/* ═══════════════════════════════════════════════════════════════
   LinCom — Widget d'accessibilité (édition professionnelle)
   Identique sur tout le site (Front + Backoffice + Messagerie).
   ═══════════════════════════════════════════════════════════════ */

/* ── Lien d'évitement ─────────────────────────────────────────── */
.a11y-skip-link {
  position: fixed;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  background: #00A896;
  color: #fff !important;
  padding: 12px 28px;
  border-radius: 0 0 10px 10px;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none !important;
  z-index: 99999;
  transition: top .2s ease;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
.a11y-skip-link:focus {
  top: 0;
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* ── Bouton déclencheur ───────────────────────────────────────── */
#a11y-trigger {
  position: fixed;
  bottom: 20px;
  left: 16px;
  z-index: 99990;
  background: #0B2545;
  color: #fff;
  border: 2.5px solid #00A896;
  border-radius: 50%;
  width: 46px;
  height: 46px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  box-shadow: 0 3px 14px rgba(0,0,0,.3);
  transition: background .2s, transform .2s;
  padding: 0;
}
#a11y-trigger:hover,
#a11y-trigger:focus {
  background: #00A896;
  transform: scale(1.08);
  outline: none;
}
#a11y-trigger[aria-expanded="true"] {
  background: #00A896;
}

/* ── Panneau (s'ouvre vers le haut) ─────────────────────────── */
#a11y-panel {
  position: fixed;
  bottom: 74px;
  left: 16px;
  z-index: 99991;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0,0,0,.22);
  width: 330px;
  max-width: calc(100vw - 24px);
  height: min(520px, calc(100vh - 110px));
  display: none;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  font-family: 'Poppins', sans-serif;
}
#a11y-panel.open { display: flex; }

.a11y-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: #0B2545;
  color: #fff;
  flex: 0 0 auto;
}
.a11y-head h3 {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0;
}
#a11y-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  opacity: .85;
}
#a11y-close:hover { opacity: 1; }

/* ── Onglets ──────────────────────────────────────────────────── */
.a11y-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 10px 12px 8px;
  flex: 0 0 auto;
  border-bottom: 1px solid #F3F4F6;
}
.a11y-tab {
  border: none;
  background: #F3F4F6;
  color: #374151;
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 7px;
  cursor: pointer;
}
.a11y-tab.on { background: #00A896; color: #fff; }

.a11y-body {
  padding: 14px 16px;
  overflow-y: auto;
  flex: 1 1 auto;
}
.a11y-section { display: none; }
.a11y-section.on { display: block; }

.a11y-hint {
  margin: 0 0 10px;
  font-size: 11.5px;
  color: #6B7280;
}

/* ── Layout lignes (label + contrôle) ───────────────────────── */
.a11y-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  gap: 8px;
  border-bottom: 1px solid #F9FAFB;
}
.a11y-row:last-child { border-bottom: none; }
.a11y-lbl {
  font-size: 12.5px;
  font-weight: 500;
  color: #374151;
}

/* ── Groupe boutons taille / espacement ─────────────────────── */
.a11y-fs-grp { display: flex; gap: 5px; }
.a11y-fs-btn, .a11y-sp-btn {
  width: 29px;
  height: 29px;
  border-radius: 6px;
  border: 1.5px solid #D1D5DB;
  background: transparent;
  cursor: pointer;
  font-weight: 700;
  color: #374151;
  font-family: inherit;
  transition: .15s;
}
.a11y-fs-btn:hover, .a11y-fs-btn.on,
.a11y-sp-btn:hover, .a11y-sp-btn.on {
  border-color: #00A896;
  color: #00A896;
  background: #E8F7F5;
}

/* ── Switch toggle ────────────────────────────────────────────── */
.a11y-sw {
  position: relative;
  display: inline-flex;
  width: 38px;
  height: 20px;
  flex-shrink: 0;
}
.a11y-sw input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.a11y-sw-track {
  position: absolute;
  inset: 0;
  background: #D1D5DB;
  border-radius: 10px;
  cursor: pointer;
  transition: background .2s;
}
.a11y-sw input:checked + .a11y-sw-track {
  background: #00A896;
}
.a11y-sw-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform .2s;
}
.a11y-sw input:checked + .a11y-sw-track::after {
  transform: translateX(18px);
}
.a11y-sw input:focus-visible + .a11y-sw-track {
  outline: 3px solid #0B2545 !important;
  outline-offset: 2px !important;
}

/* ── Profils rapides ──────────────────────────────────────────── */
.a11y-profiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.a11y-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 6px;
  border-radius: 10px;
  border: 1.5px solid #E5E7EB;
  background: #FAFBFC;
  color: #374151;
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  font-family: inherit;
  transition: .15s;
}
.a11y-profile:hover { border-color: #00A896; background: #E8F7F5; color: #00A896; }
.a11y-profile-ic { font-size: 19px; }

/* ── Bouton d'action principal (ex : Lire cette page) ───────────── */
.a11y-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  margin-bottom: 12px;
  border: none;
  border-radius: 10px;
  background: #00A896;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: .15s;
}
.a11y-cta:hover { background: #009684; }
.a11y-cta-ic { font-size: 17px; }

/* ── Barre de contrôle de lecture (flottante, bas-centre) ───────── */
#a11y-tts-bar {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 99995;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #0B2545;
  color: #fff;
  padding: 10px 16px;
  border-radius: 30px;
  box-shadow: 0 6px 24px rgba(0,0,0,.3);
  font-family: 'Poppins', sans-serif;
  font-size: 12.5px;
  max-width: calc(100vw - 32px);
}
#a11y-tts-status { font-weight: 600; white-space: nowrap; }
#a11y-tts-bar button {
  border: none;
  background: #00A896;
  color: #fff;
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  font-weight: 600;
  font-size: 12px;
  font-family: inherit;
  white-space: nowrap;
}
#a11y-tts-bar button:hover { background: #009684; }

/* ── Texte en cours de lecture ───────────────────────────────────── */
.a11y-tts-current {
  background: rgba(0, 168, 150, .16) !important;
  outline: 2px solid #00A896 !important;
  outline-offset: 2px;
  border-radius: 3px;
}

/* ── Mode couleur (radio) ─────────────────────────────────────── */
.a11y-radio-grp { display: flex; flex-direction: column; }
.a11y-radio-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 4px;
  font-size: 12.5px;
  color: #374151;
  cursor: pointer;
  border-bottom: 1px solid #F9FAFB;
}
.a11y-radio-row:last-child { border-bottom: none; }
.a11y-radio-row input { width: 15px; height: 15px; accent-color: #00A896; cursor: pointer; }

/* ── Bouton réinitialiser ──────────────────────────────────────── */
#a11y-reset {
  flex: 0 0 auto;
  margin: 0;
  padding: 11px;
  border: none;
  border-top: 1px solid #E5E7EB;
  background: #FAFBFC;
  color: #6B7280;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: .15s;
}
#a11y-reset:hover {
  color: #EF4444;
  background: #FEF2F2;
}

/* ══════════════════════════════════════════════════════════════════
   Modes d'affichage
   ══════════════════════════════════════════════════════════════════ */

/* ── Taille du texte (ciblée par élément, pas de "*") ───────────── */
body.lc-fs-1 p, body.lc-fs-1 li, body.lc-fs-1 span, body.lc-fs-1 a, body.lc-fs-1 label,
body.lc-fs-1 td, body.lc-fs-1 th, body.lc-fs-1 h1, body.lc-fs-1 h2, body.lc-fs-1 h3,
body.lc-fs-1 h4, body.lc-fs-1 h5, body.lc-fs-1 h6 { font-size: 1.15em !important; }

body.lc-fs-2 p, body.lc-fs-2 li, body.lc-fs-2 span, body.lc-fs-2 a, body.lc-fs-2 label,
body.lc-fs-2 td, body.lc-fs-2 th, body.lc-fs-2 h1, body.lc-fs-2 h2, body.lc-fs-2 h3,
body.lc-fs-2 h4, body.lc-fs-2 h5, body.lc-fs-2 h6 { font-size: 1.3em !important; }

body.lc-fs-3 p, body.lc-fs-3 li, body.lc-fs-3 span, body.lc-fs-3 a, body.lc-fs-3 label,
body.lc-fs-3 td, body.lc-fs-3 th, body.lc-fs-3 h1, body.lc-fs-3 h2, body.lc-fs-3 h3,
body.lc-fs-3 h4, body.lc-fs-3 h5, body.lc-fs-3 h6 { font-size: 1.5em !important; }

body.lc-fs-4 p, body.lc-fs-4 li, body.lc-fs-4 span, body.lc-fs-4 a, body.lc-fs-4 label,
body.lc-fs-4 td, body.lc-fs-4 th, body.lc-fs-4 h1, body.lc-fs-4 h2, body.lc-fs-4 h3,
body.lc-fs-4 h4, body.lc-fs-4 h5, body.lc-fs-4 h6 { font-size: 1.7em !important; }

/* ── Espacement du texte ─────────────────────────────────────── */
body.lc-spacing-1 p, body.lc-spacing-1 li, body.lc-spacing-1 span, body.lc-spacing-1 td {
  letter-spacing: .8px !important;
  word-spacing: 2px !important;
  line-height: 1.7 !important;
}
body.lc-spacing-2 p, body.lc-spacing-2 li, body.lc-spacing-2 span, body.lc-spacing-2 td {
  letter-spacing: 1.6px !important;
  word-spacing: 4px !important;
  line-height: 2 !important;
}

/* ── Police dyslexie ─────────────────────────────────────────── */
body.lc-dyslexia, body.lc-dyslexia p, body.lc-dyslexia li, body.lc-dyslexia span,
body.lc-dyslexia a, body.lc-dyslexia label, body.lc-dyslexia h1, body.lc-dyslexia h2,
body.lc-dyslexia h3, body.lc-dyslexia h4, body.lc-dyslexia h5, body.lc-dyslexia h6,
body.lc-dyslexia td, body.lc-dyslexia th, body.lc-dyslexia button, body.lc-dyslexia input {
  font-family: 'Arial', 'Verdana', sans-serif !important;
  letter-spacing: .07em !important;
  word-spacing: .18em !important;
  line-height: 1.9 !important;
}

/* ── Aligner le texte à gauche ──────────────────────────────── */
body.lc-textleft p, body.lc-textleft li, body.lc-textleft blockquote, body.lc-textleft dd {
  text-align: left !important;
}

/* ── Souligner les liens ─────────────────────────────────────── */
body.lc-underline a { text-decoration: underline !important; }

/* ── Mettre en valeur les titres ───────────────────────────────── */
body.lc-headings h1, body.lc-headings h2, body.lc-headings h3,
body.lc-headings h4, body.lc-headings h5, body.lc-headings h6 {
  outline: 2px solid #00A896 !important;
  outline-offset: 3px;
  border-radius: 3px;
}

/* ── Masquer les images ─────────────────────────────────────── */
body.lc-hideimages img, body.lc-hideimages picture, body.lc-hideimages video {
  visibility: hidden !important;
}

/* ── Réduire les animations ─────────────────────────────────── */
body.lc-motion *, body.lc-motion *::before, body.lc-motion *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
  scroll-behavior: auto !important;
}

/* ── Curseur agrandi ──────────────────────────────────────────── */
body.lc-bigcursor, body.lc-bigcursor a, body.lc-bigcursor button, body.lc-bigcursor * {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><path d="M4 2 L4 34 L13 26 L19 37 L24 34 L18 23 L28 23 Z" fill="black" stroke="white" stroke-width="2.5" stroke-linejoin="round"/></svg>') 4 4, auto !important;
}

/* ── Agrandir les zones cliquables ────────────────────────────── */
body.lc-bigtargets a, body.lc-bigtargets button, body.lc-bigtargets input[type="submit"],
body.lc-bigtargets input[type="button"], body.lc-bigtargets select {
  min-height: 44px !important;
  min-width: 44px !important;
  padding: 8px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* ── Modes de couleur (un seul actif à la fois — le filter CSS ne
   se cumule pas entre classes séparées, d'où le choix radio) ──── */
body.lc-cm-contrast { filter: invert(1) hue-rotate(180deg); }
body.lc-cm-contrast img, body.lc-cm-contrast video, body.lc-cm-contrast picture,
body.lc-cm-contrast iframe { filter: invert(1) hue-rotate(180deg); }

body.lc-cm-grayscale { filter: grayscale(1) contrast(1.1); }

body.lc-cm-protanopia { filter: saturate(1.6) hue-rotate(-20deg) contrast(1.1); }
body.lc-cm-deuteranopia { filter: saturate(1.6) hue-rotate(15deg) contrast(1.1); }
body.lc-cm-tritanopia { filter: saturate(1.6) hue-rotate(180deg) contrast(1.05); }
body.lc-cm-achromatopsia { filter: grayscale(1) contrast(1.2); }

/* ── Guide de lecture ─────────────────────────────────────────── */
#a11y-reading-guide {
  position: fixed;
  left: 0;
  width: 100vw;
  height: 36px;
  background: rgba(0, 168, 150, .14);
  border-top: 2px solid #00A896;
  border-bottom: 2px solid #00A896;
  z-index: 99980;
  pointer-events: none;
}

/* ── Masque de lecture (bandeau lumineux) ───────────────────── */
.a11y-mask-band {
  position: fixed;
  left: 0;
  width: 100vw;
  background: rgba(0, 0, 0, .72);
  z-index: 99979;
  pointer-events: none;
}
.a11y-mask-top { top: 0; }
.a11y-mask-bottom { bottom: 0; top: auto; height: 100vh; }

/* ── Lecture vocale : indication visuelle au survol ───────────── */
body.lc-tts p:hover, body.lc-tts li:hover, body.lc-tts h1:hover, body.lc-tts h2:hover,
body.lc-tts h3:hover, body.lc-tts h4:hover, body.lc-tts h5:hover, body.lc-tts h6:hover,
body.lc-tts blockquote:hover {
  outline: 2px dashed #00A896 !important;
  outline-offset: 2px;
  cursor: pointer;
  background: rgba(0, 168, 150, .06);
}

/* ── Focus visible renforcé (toujours actif) ──────────────────── */
:focus-visible {
  outline: 3px solid #00A896 !important;
  outline-offset: 3px !important;
  border-radius: 3px;
}

/* ── Repositionnement mobile du widget ────────────────────────── */
@media (max-width: 639px) {
  #a11y-trigger { bottom: 14px; left: 10px; }
  #a11y-panel   { width: calc(100vw - 20px); left: 10px; bottom: 68px; }
}