/**
 * mod_accessibility_j6 — widget d'accessibilité.
 *
 * Ce fichier contient DEUX choses distinctes :
 *   1. l'habillage du widget lui-même (bouton flottant + panneau) ;
 *   2. une base GÉNÉRIQUE de mode nuit (fond, texte, liens, bordures).
 *
 * La base nuit ne peut pas connaître les classes propres à chaque site.
 * Les couleurs spécifiques d'un site (cartes, bandes, boutons de marque) se
 * surchargent à part, sous le sélecteur html[data-lma11y-theme="night"].
 * Voir le README du module.
 *
 * @copyright  (C) 2026 Langage Machine
 * @license    GNU General Public License version 2 or later
 */

/* ============================ 1. LE WIDGET ============================ */

.lma11y {
	position: fixed;
	/* Doit passer AU-DESSUS d'un bandeau de consentement (celui de mod_popupbox_j6
	   est a 99990) : un controle d'accessibilite injoignable tant qu'on n'a pas
	   consenti est un contresens. Valeur reglable dans l'admin du module. */
	z-index: var(--lma11y-z, 99995);
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
	line-height: 1.4;
}

.lma11y--bottom-left  { bottom: var(--lma11y-y, 20px); left:  var(--lma11y-x, 20px); }
.lma11y--bottom-right { bottom: var(--lma11y-y, 20px); right: var(--lma11y-x, 20px); }
.lma11y--top-left     { top:    var(--lma11y-y, 20px); left:  var(--lma11y-x, 20px); }
.lma11y--top-right    { top:    var(--lma11y-y, 20px); right: var(--lma11y-x, 20px); }

.lma11y-sr {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.lma11y-toggle {
	display: flex; align-items: center; justify-content: center;
	width: 46px; height: 46px; padding: 0;
	border: none; border-radius: 50%; cursor: pointer;
	background: var(--lma11y-bg, #0067B8);
	color: var(--lma11y-fg, #fff);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
	transition: transform .15s ease, box-shadow .15s ease;
}

.lma11y-toggle:hover { transform: scale(1.06); }
.lma11y-toggle:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

/* Pictogramme d'accessibilité dessiné en CSS (masque SVG en data URI) : aucune
   image à charger, et il suit la couleur du texte du bouton. */
.lma11y-icon {
	width: 26px; height: 26px; background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm9 5.5-6 1V22h-2l-1-6h-1l-1 6H8V8.5l-6-1V6l7 1h6l7-1v1.5z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm9 5.5-6 1V22h-2l-1-6h-1l-1 6H8V8.5l-6-1V6l7 1h6l7-1v1.5z'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center; mask-position: center;
	-webkit-mask-size: contain; mask-size: contain;
}

.lma11y-panel {
	position: absolute; min-width: 226px; padding: 16px;
	background: #fff; color: #1b1b1b;
	border: 1px solid #d8d8d8; border-radius: 12px;
	box-shadow: 0 6px 28px rgba(0, 0, 0, .22);
}

.lma11y-panel[hidden] { display: none; }

.lma11y--bottom-left  .lma11y-panel { bottom: 56px; left: 0; }
.lma11y--bottom-right .lma11y-panel { bottom: 56px; right: 0; }
.lma11y--top-left     .lma11y-panel { top: 56px; left: 0; }
.lma11y--top-right    .lma11y-panel { top: 56px; right: 0; }

.lma11y-title { margin: 0 0 12px; font-size: 15px; font-weight: 700; }
.lma11y-label { font-size: 13px; font-weight: 600; }

.lma11y-group {
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px; margin-bottom: 12px;
}

.lma11y-steps { display: flex; gap: 6px; }

.lma11y-step {
	display: flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; padding: 0;
	background: #f2f2f2; color: #1b1b1b;
	border: 1px solid #d0d0d0; border-radius: 8px;
	cursor: pointer; font-weight: 700;
}

/* Chaque palier montre sa propre taille : le bouton EST l'aperçu du réglage. */
.lma11y-step:nth-child(1) { font-size: 13px; }
.lma11y-step:nth-child(2) { font-size: 16px; }
.lma11y-step:nth-child(3) { font-size: 19px; }
.lma11y-step:nth-child(4) { font-size: 22px; }

.lma11y-step[aria-pressed="true"] {
	background: var(--lma11y-bg, #0067B8);
	color: var(--lma11y-fg, #fff);
	border-color: var(--lma11y-bg, #0067B8);
}

.lma11y-step:focus-visible,
.lma11y-switch:focus-visible,
.lma11y-reset:focus-visible { outline: 3px solid var(--lma11y-bg, #0067B8); outline-offset: 2px; }

.lma11y-switch {
	position: relative; flex: none; width: 46px; height: 26px; padding: 0;
	background: #c9c9c9; border: none; border-radius: 13px; cursor: pointer;
	transition: background .2s ease;
}

.lma11y-switch-knob {
	position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
	background: #fff; border-radius: 50%;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
	transition: transform .2s ease;
}

.lma11y-switch[aria-checked="true"] { background: var(--lma11y-bg, #0067B8); }
.lma11y-switch[aria-checked="true"] .lma11y-switch-knob { transform: translateX(20px); }

.lma11y-reset {
	width: 100%; padding: 8px 10px; margin-top: 4px;
	background: none; color: #444;
	border: 1px solid #d0d0d0; border-radius: 8px;
	cursor: pointer; font-size: 13px;
}

.lma11y-reset:hover { background: #f2f2f2; }

@media (prefers-reduced-motion: reduce) {
	.lma11y-toggle, .lma11y-switch, .lma11y-switch-knob { transition: none; }
}

/* ================== 2. BASE GÉNÉRIQUE DU MODE NUIT ==================== */

html[data-lma11y-theme="night"] {
	--lma11y-night-bg: #10151f;
	--lma11y-night-surface: #1a2130;
	--lma11y-night-text: #e6e9ef;
	--lma11y-night-muted: #a4adbb;
	--lma11y-night-border: #2b3446;
	--lma11y-night-link: #6fb3f2;

	background: var(--lma11y-night-bg);
	color: var(--lma11y-night-text);
	color-scheme: dark;
}

html[data-lma11y-theme="night"] body { background: var(--lma11y-night-bg); color: var(--lma11y-night-text); }

html[data-lma11y-theme="night"] h1,
html[data-lma11y-theme="night"] h2,
html[data-lma11y-theme="night"] h3,
html[data-lma11y-theme="night"] h4,
html[data-lma11y-theme="night"] h5,
html[data-lma11y-theme="night"] h6 { color: var(--lma11y-night-text); }

html[data-lma11y-theme="night"] a { color: var(--lma11y-night-link); }

html[data-lma11y-theme="night"] hr,
html[data-lma11y-theme="night"] table,
html[data-lma11y-theme="night"] th,
html[data-lma11y-theme="night"] td { border-color: var(--lma11y-night-border); }

/* Le panneau du widget suit lui aussi le mode nuit, sinon il devient un carré
   blanc éblouissant au milieu d'une page sombre. */
html[data-lma11y-theme="night"] .lma11y-panel {
	background: var(--lma11y-night-surface);
	color: var(--lma11y-night-text);
	border-color: var(--lma11y-night-border);
}

html[data-lma11y-theme="night"] .lma11y-step {
	background: #232c3d; color: var(--lma11y-night-text); border-color: var(--lma11y-night-border);
}

html[data-lma11y-theme="night"] .lma11y-reset {
	color: var(--lma11y-night-muted); border-color: var(--lma11y-night-border);
}

html[data-lma11y-theme="night"] .lma11y-reset:hover { background: #232c3d; }