/* ════════════════════════════════════════════════════════════════════════════════════
   affichage.css — réglages d'accessibilité du panneau « Affichage » (affichage.js), sur toutes
   les pages : site public, espace Logistique, admin, démo. Le contraste renforcé détaillé des
   pages publiques reste dans cvdl-ui.css ; ici, sa base commune (textes secondaires et filets
   en bleu nuit) pour l'admin et l'espace Logistique.
   ════════════════════════════════════════════════════════════════════════════════════ */
/* ════ Panneau « Affichage » ════ */
.cvdl-entete-actions,
.ac-entete-actions {
  position: relative;
}
.cvdl-affichage-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 999px;
  border: none;
  background: var(--d-doux, #eef2f5);
  color: var(--navy, #002743);
  font: inherit;
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
}
.cvdl-affichage-btn:hover,
.cvdl-affichage-btn[aria-expanded='true'] {
  background: var(--d-filet, #e3e8ec);
}
.cvdl-affichage {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 200;
  width: min(360px, calc(100vw - 24px));
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px 18px;
  background: #fff;
  color: var(--navy, #002743);
  border: var(--trait, 1.5px solid #002743);
  border-radius: var(--r-l, 18px);
  box-shadow: 6px 6px 0 var(--aplat-fort, rgba(0, 39, 67, 0.38));
  text-align: left;
}
.cvdl-affichage[hidden] {
  display: none;
}
.cvdl-aff-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--d-filet, #e3e8ec);
}
.cvdl-aff-tete h2 {
  font-size: 18px;
  margin: 0;
}
.cvdl-aff-fermer {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid #7b8c9a;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  color: var(--navy, #002743);
}
.cvdl-aff-taille {
  border: none;
  margin: 0 0 6px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cvdl-aff-taille legend {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 6px;
  padding: 0;
}
.cvdl-aff-taille label {
  flex: 1;
  position: relative;
}
.cvdl-aff-taille input {
  position: absolute;
  opacity: 0;
}
.cvdl-aff-taille span {
  display: block;
  text-align: center;
  padding: 8px 6px;
  border-radius: 10px;
  background: var(--d-doux, #eef2f5);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.cvdl-aff-taille label:nth-child(3) span {
  font-size: 14.5px;
}
.cvdl-aff-taille label:nth-child(4) span {
  font-size: 16px;
}
.cvdl-aff-taille input:checked + span {
  background: var(--navy, #002743);
  color: #fff;
}
.cvdl-aff-taille input:focus-visible + span {
  outline: 2px solid var(--navy, #002743);
  outline-offset: 2px;
}
.cvdl-aff-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--d-filet-leger, #edf1f4);
  cursor: pointer;
}
.cvdl-aff-opt > span:first-child {
  display: flex;
  flex-direction: column;
}
.cvdl-aff-opt b {
  font-size: 14px;
}
.cvdl-aff-opt small {
  font-size: 12.5px;
  color: #5a6d7d;
  line-height: 1.4;
}
.cvdl-aff-inter {
  position: relative;
  flex: none;
  width: 46px;
  height: 26px;
}
.cvdl-aff-inter input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.cvdl-aff-inter i {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 1.5px solid var(--navy, #002743);
  background: #fff;
  pointer-events: none;
  transition: background 0.15s;
}
.cvdl-aff-inter i::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--navy, #002743);
  background: #fff;
  transform: translateY(-50%);
  transition: transform 0.15s;
  box-sizing: border-box;
}
.cvdl-aff-inter input:checked + i {
  background: var(--tur-texte, #00777a);
}
.cvdl-aff-inter input:checked + i::after {
  transform: translate(19px, -50%);
}
.cvdl-aff-inter input:focus-visible + i {
  outline: 2px solid var(--navy, #002743);
  outline-offset: 2px;
}
.cvdl-aff-reset {
  margin-top: 8px;
  align-self: flex-start;
  background: none;
  border: none;
  padding: 6px 0;
  font: inherit;
  font-weight: 700;
  font-size: 13px;
  color: var(--navy, #002743);
  text-decoration: underline dashed;
  text-underline-offset: 4px;
  cursor: pointer;
}
@media (max-width: 600px) {
  .cvdl-affichage-btn span {
    display: none;
  }
  .cvdl-affichage {
    position: fixed;
    top: auto;
    bottom: 12px;
    left: 12px;
    right: 12px;
    width: auto;
  }
}

/* Panneau hors en-tête public (espace Logistique, admin) : posé au-dessus de la page */
.cvdl-affichage.flottant {
  position: fixed;
  top: 76px;
  right: 16px;
}
.cvdl-affichage.flottant.bas-gauche {
  top: auto;
  right: auto;
  bottom: 16px;
  left: 16px;
}

/* ════ Modes d'affichage ════ */
/* Taille du texte (zoom : les tailles de la charte sont en px) */
html[data-cvdl-taille='grande'] body {
  zoom: 1.15;
}
html[data-cvdl-taille='tres-grande'] body {
  zoom: 1.3;
}
/* Espacement du texte (WCAG 1.4.12) */
html.cvdl-espacement body *:not(svg):not(svg *) {
  line-height: 1.6 !important;
  letter-spacing: 0.06em !important;
  word-spacing: 0.16em !important;
}
html.cvdl-espacement body p {
  margin-bottom: 1.2em !important;
}
/* Police très lisible */
html.cvdl-police body,
html.cvdl-police body *:not(svg):not(svg *):not(.mono):not(.pk-sn) {
  font-family: 'Atkinson Hyperlegible', Verdana, sans-serif !important;
}
/* Liens soulignés */
html.cvdl-liens body a {
  text-decoration: underline !important;
  text-decoration-style: solid !important;
  text-underline-offset: 3px;
}
/* Sans animations */
html.cvdl-sans-anim body *,
html.cvdl-sans-anim body *::before,
html.cvdl-sans-anim body *::after {
  animation: none !important;
  transition: none !important;
}
/* Contraste renforcé, base commune : textes secondaires, gris et filets passent en bleu nuit */
html.cvdl-contraste body {
  --sp-mute: #002743;
  --sp-faint: #002743;
  --sp-line: #002743;
  --d-texte2: #002743;
  --d-filet: #002743;
  --th-tx-5a6d7dff: #002743;
  --th-bd-e3e8ecff: #002743;
  --color-text-muted: #002743;
}
html.cvdl-contraste body ::placeholder {
  color: #40566a !important;
  opacity: 1;
}
/* Contraste renforcé : texte (et pictogrammes) en blanc sur les fonds sombres, repérés par
   affichage.js (cvdl-sur-sombre) ; le bleu nuit y serait illisible. */
html.cvdl-contraste body .cvdl-sur-sombre.cvdl-sur-sombre {
  color: #fff !important;
}