/*
 * Smart ID — Accessibilité – Confort d'affichage (v2)
 * Toutes les classes sont préfixées "sid-a11y-" pour ne jamais entrer en
 * collision avec le thème. Les réglages ajoutent une classe sur <html>
 * (voir sid-a11y.js) ; ce fichier en décrit l'effet.
 */

/* Respecte par défaut la préférence système, avant toute action du visiteur. */
@media (prefers-reduced-motion: reduce) {
	html *,
	html *::before,
	html *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* =====================================================================
   Interface du widget
   ===================================================================== */

.sid-a11y-ui,
.sid-a11y-ui * {
	box-sizing: border-box;
}

.sid-a11y-ui {
	font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
	letter-spacing: normal !important;
	word-spacing: normal !important;
	line-height: 1.4 !important;
	text-transform: none;
}

/* ---------- Bouton flottant ---------- */

.sid-a11y-toggle {
	position: fixed;
	z-index: 2147483000;
	bottom: var(--sid-a11y-offset-bottom, 20px);
	width: var(--sid-a11y-size, 44px);
	height: var(--sid-a11y-size, 44px);
	border-radius: 10px;
	border: 2px solid #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--sid-a11y-accent, #1a1a2e);
	color: var(--sid-a11y-on-accent, #fff);
	cursor: pointer;
	padding: 0;
	margin: 0;
}

.sid-a11y-toggle svg,
.sid-a11y-toggle img {
	width: 55%;
	height: 55%;
	object-fit: contain;
}

/* Pastille discrète : au moins un réglage est actif. */
.sid-a11y-toggle.sid-a11y-has-active::after {
	content: "";
	position: absolute;
	top: -4px;
	right: -4px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #ffbf47;
	border: 2px solid #1a1a1a;
}

.sid-a11y-toggle:focus-visible,
.sid-a11y-ui button:focus-visible,
.sid-a11y-ui a:focus-visible,
.sid-a11y-title:focus-visible {
	outline: 3px solid #1a1a1a !important;
	box-shadow: 0 0 0 6px #ffbf47 !important;
	outline-offset: 1px !important;
}

.sid-a11y-title:focus:not(:focus-visible) {
	outline: none;
}

.sid-a11y-position-bottom-right {
	right: var(--sid-a11y-offset-side, 20px);
}

.sid-a11y-position-bottom-left {
	left: var(--sid-a11y-offset-side, 20px);
}

/* ---------- Panneau ---------- */

.sid-a11y-panel {
	position: fixed;
	z-index: 2147483000;
	bottom: var(--sid-a11y-panel-bottom, 74px);
	width: min(380px, calc(100vw - 2 * var(--sid-a11y-offset-side, 20px)));
	max-height: calc(100vh - var(--sid-a11y-panel-bottom, 74px) - 16px);
	max-height: calc(100dvh - var(--sid-a11y-panel-bottom, 74px) - 16px);
	display: flex;
	flex-direction: column;
	background: #ffffff;
	color: #1a1a1a;
	border-radius: 14px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
	font-size: 15px;
	text-align: left;
	overflow: hidden;
}

.sid-a11y-panel[hidden] {
	display: none !important;
}

.sid-a11y-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 12px 12px 12px 16px;
	background: var(--sid-a11y-accent, #1a1a2e);
	color: var(--sid-a11y-on-accent, #fff);
}

.sid-a11y-panel .sid-a11y-title {
	margin: 0;
	padding: 0;
	font-size: 17px !important;
	font-weight: 700;
	color: inherit;
	text-decoration: none !important;
	border-radius: 4px;
}

.sid-a11y-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.15);
	color: inherit;
	cursor: pointer;
	padding: 0;
}

.sid-a11y-close:hover {
	background: rgba(255, 255, 255, 0.3);
}

.sid-a11y-body {
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 4px 16px 8px;
}

.sid-a11y-panel p.sid-a11y-disclaimer {
	text-align: left !important;
	font-size: 13px;
	color: #4a4a4a;
	margin: 10px 0 4px;
}

.sid-a11y-section {
	padding: 12px 0 8px;
	border-top: 1px solid #e6e6ea;
}

.sid-a11y-section:first-of-type {
	border-top: 0;
}

.sid-a11y-panel h3 {
	margin: 0 0 10px;
	padding: 0;
	font-size: 12px !important;
	font-weight: 700;
	letter-spacing: 0.06em !important;
	text-transform: uppercase;
	color: #4a4a4a;
	text-decoration: none !important;
}

/* Tuiles marche / arrêt */
.sid-a11y-grid,
.sid-a11y-profiles {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-bottom: 8px;
}

.sid-a11y-tile,
.sid-a11y-profile {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	margin: 0;
	padding: 8px 10px;
	border: 1px solid #d6d6dc;
	border-radius: 10px;
	background: #f5f5f7;
	color: #1a1a1a;
	font-size: 14px !important;
	font-weight: 500;
	text-align: left;
	cursor: pointer;
}

.sid-a11y-profile {
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 2px;
}

.sid-a11y-profile-name {
	font-weight: 700;
}

.sid-a11y-profile-desc {
	font-size: 12px !important;
	color: #555;
}

.sid-a11y-tile:hover,
.sid-a11y-profile:hover,
.sid-a11y-seg button:hover {
	border-color: var(--sid-a11y-accent, #1a1a2e);
}

.sid-a11y-tile[aria-pressed="true"],
.sid-a11y-profile[aria-pressed="true"],
.sid-a11y-seg button[aria-pressed="true"] {
	background: var(--sid-a11y-accent, #1a1a2e);
	border-color: var(--sid-a11y-accent, #1a1a2e);
	color: var(--sid-a11y-on-accent, #fff);
}

.sid-a11y-profile[aria-pressed="true"] .sid-a11y-profile-desc {
	color: inherit;
}

/* État actif signalé aussi par une coche : l'information ne repose pas
   uniquement sur la couleur (RGAA 3.1). */
.sid-a11y-tile[aria-pressed="true"] .sid-a11y-tile-label::after,
.sid-a11y-profile[aria-pressed="true"] .sid-a11y-profile-name::after {
	content: " \2713";
	font-weight: 700;
}

.sid-a11y-ico {
	display: inline-flex;
	flex: 0 0 auto;
}

.sid-a11y-ico svg {
	display: block;
}

/* Réglages à niveaux */
.sid-a11y-level {
	margin: 4px 0 12px;
}

.sid-a11y-level-label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
	font-weight: 600;
	font-size: 14px !important;
}

.sid-a11y-seg {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 6px;
}

.sid-a11y-seg button {
	min-height: 40px;
	margin: 0;
	padding: 6px 4px;
	border: 1px solid #d6d6dc;
	border-radius: 8px;
	background: #f5f5f7;
	color: #1a1a1a;
	font-size: 14px !important;
	font-weight: 600;
	cursor: pointer;
}

/* Pied du panneau */
.sid-a11y-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px 12px;
	padding: 12px 16px;
	border-top: 1px solid #e6e6ea;
	background: #fafafb;
}

.sid-a11y-reset {
	margin: 0;
	padding: 8px 12px;
	border: 1px solid #8a8a93;
	border-radius: 8px;
	background: #fff;
	color: #1a1a1a;
	font-size: 14px !important;
	font-weight: 600;
	cursor: pointer;
}

.sid-a11y-links {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 13px !important;
}

.sid-a11y-links li {
	margin: 0;
	padding: 2px 0;
	list-style: none;
}

.sid-a11y-links a {
	color: #1a1a1a !important;
	text-decoration: underline !important;
}

/* Texte réservé aux lecteurs d'écran */
.sid-a11y-sr {
	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;
}

@media (max-width: 480px) {
	.sid-a11y-panel {
		left: 8px !important;
		right: 8px !important;
		width: auto;
	}
}

/* ---------- Règle et masque de lecture ---------- */

.sid-a11y-aid {
	pointer-events: none;
}

.sid-a11y-aid-guide,
.sid-a11y-aid-mask {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	z-index: 2147482000;
	pointer-events: none;
}

.sid-a11y-aid[data-mode="1"] .sid-a11y-aid-guide {
	display: block;
	top: 0;
	height: 12px;
	background: rgba(26, 26, 26, 0.85);
	border-top: 3px solid #ffbf47;
	border-bottom: 3px solid #ffbf47;
}

.sid-a11y-aid[data-mode="2"] .sid-a11y-aid-mask {
	display: block;
	background: rgba(0, 0, 0, 0.55);
}

.sid-a11y-aid-top {
	top: 0;
}

.sid-a11y-aid-bottom {
	bottom: 0;
}

/* =====================================================================
   Effets appliqués au site (déclenchés depuis <html>)
   ===================================================================== */

/* Les effets ci-dessous excluent le widget (.sid-a11y-ui), qui garde
   toujours le même aspect.

   Filtres de couleur : combinaison calculée par le script. Un filtre posé
   sur <html> ne casse pas les éléments en position fixe du thème (le
   document racine est exempté de cet effet de bord). */
html.sid-a11y-filtered {
	filter: var(--sid-a11y-filter);
}

/* Couleurs inversées : on ré-inverse les médias du site (pas de photos
   en négatif), le widget et la règle / le masque de lecture (appliqué
   sur chaque bande, jamais sur leur conteneur, pour ne pas casser leur
   position fixe). */
html.sid-a11y-invert body img:not(.sid-a11y-ui):not(.sid-a11y-ui *),
html.sid-a11y-invert body video:not(.sid-a11y-ui):not(.sid-a11y-ui *),
html.sid-a11y-invert body picture img:not(.sid-a11y-ui):not(.sid-a11y-ui *),
html.sid-a11y-invert body iframe:not(.sid-a11y-ui):not(.sid-a11y-ui *),
html.sid-a11y-invert body canvas:not(.sid-a11y-ui):not(.sid-a11y-ui *),
html.sid-a11y-invert .sid-a11y-toggle,
html.sid-a11y-invert .sid-a11y-panel,
html.sid-a11y-invert .sid-a11y-aid-guide,
html.sid-a11y-invert .sid-a11y-aid-mask {
	filter: invert(1) hue-rotate(180deg);
}

html.sid-a11y-invert body picture img:not(.sid-a11y-ui):not(.sid-a11y-ui *) {
	filter: none;
}

html.sid-a11y-invert body picture:not(.sid-a11y-ui):not(.sid-a11y-ui *) {
	filter: invert(1) hue-rotate(180deg);
}

/* Taille du texte : "zoom" plutôt qu'un font-size racine, car un thème
   qui fixe ses tailles en pixels (très fréquent) ignorerait ce dernier.
   Appliqué sur <body> ; le widget compense ce zoom (voir plus bas). */
html.sid-a11y-fontsize-1 body {
	zoom: 1.15;
}

html.sid-a11y-fontsize-2 body {
	zoom: 1.3;
}

html.sid-a11y-fontsize-3 body {
	zoom: 1.5;
}

/* Le widget et l'aide à la lecture sont dans <body> (HTML conforme) : on
   annule pour eux le zoom du site, afin qu'ils gardent une taille stable. */
html.sid-a11y-fontsize-1 .sid-a11y-ui,
html.sid-a11y-fontsize-1 .sid-a11y-aid {
	zoom: 0.8696;
}

html.sid-a11y-fontsize-2 .sid-a11y-ui,
html.sid-a11y-fontsize-2 .sid-a11y-aid {
	zoom: 0.7692;
}

html.sid-a11y-fontsize-3 .sid-a11y-ui,
html.sid-a11y-fontsize-3 .sid-a11y-aid {
	zoom: 0.6667;
}

/* Interligne */
html.sid-a11y-lh-1 body,
html.sid-a11y-lh-1 body *:not(.sid-a11y-ui):not(.sid-a11y-ui *) {
	line-height: 1.5 !important;
}

html.sid-a11y-lh-2 body,
html.sid-a11y-lh-2 body *:not(.sid-a11y-ui):not(.sid-a11y-ui *) {
	line-height: 1.8 !important;
}

html.sid-a11y-lh-3 body,
html.sid-a11y-lh-3 body *:not(.sid-a11y-ui):not(.sid-a11y-ui *) {
	line-height: 2.1 !important;
}

html[class*="sid-a11y-lh-"] body p:not(.sid-a11y-ui):not(.sid-a11y-ui *) {
	margin-bottom: 1.5em !important;
}

/* Espacement des lettres et des mots. Le niveau 2 correspond aux valeurs
   du critère WCAG 1.4.12 / RGAA 10.12 (0,12 em et 0,16 em). */
html.sid-a11y-ls-1 body,
html.sid-a11y-ls-1 body *:not(.sid-a11y-ui):not(.sid-a11y-ui *) {
	letter-spacing: 0.05em !important;
	word-spacing: 0.08em !important;
}

html.sid-a11y-ls-2 body,
html.sid-a11y-ls-2 body *:not(.sid-a11y-ui):not(.sid-a11y-ui *) {
	letter-spacing: 0.12em !important;
	word-spacing: 0.16em !important;
}

html.sid-a11y-ls-3 body,
html.sid-a11y-ls-3 body *:not(.sid-a11y-ui):not(.sid-a11y-ui *) {
	letter-spacing: 0.18em !important;
	word-spacing: 0.28em !important;
}

/* Police lisible. Les polices d'icônes (FontAwesome, icomoon de The7,
   Dashicons…) sont exclues : sans cela, les pictogrammes du thème se
   transforment en carrés vides (défaut corrigé par rapport à la v1). */
html.sid-a11y-readable-font body,
html.sid-a11y-readable-font body :not(.sid-a11y-ui):not(.sid-a11y-ui *):not([data-sid-a11y-icon]):not(i):not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not([class*="fa-"]):not([class^="icon"]):not([class*=" icon"]):not([class*="-icon"]):not([class*="icomoon"]):not([class*="dashicons"]):not([class*="glyph"]) {
	font-family: Verdana, Tahoma, "Segoe UI", Arial, sans-serif !important;
	font-style: normal !important;
}

/* Souligner les titres */
html.sid-a11y-titles body :is(h1, h2, h3, h4, h5, h6, [role="heading"]):not(.sid-a11y-ui):not(.sid-a11y-ui *) {
	text-decoration: underline !important;
	text-decoration-thickness: 3px !important;
	text-underline-offset: 0.2em !important;
}

/* Souligner les liens */
html.sid-a11y-underline-links body a:not(.sid-a11y-ui):not(.sid-a11y-ui *) {
	text-decoration: underline !important;
	text-decoration-thickness: 2px !important;
	text-underline-offset: 0.15em !important;
}

/* Focus clavier renforcé : double anneau noir + jaune, visible sur tous
   les fonds. */
html.sid-a11y-focus-ring body *:not(.sid-a11y-ui):not(.sid-a11y-ui *):focus-visible,
html.sid-a11y-focus-ring body *:not(.sid-a11y-ui):not(.sid-a11y-ui *):focus {
	outline: 3px solid #1a1a1a !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 6px #ffbf47 !important;
}

html.sid-a11y-focus-ring body *:not(.sid-a11y-ui):not(.sid-a11y-ui *):focus:not(:focus-visible) {
	outline: none !important;
	box-shadow: none !important;
}

/* Masquer les images (l'espace est conservé pour ne pas casser la mise
   en page). Les images de fond ne sont pas retirées : un texte clair
   posé dessus deviendrait illisible. */
html.sid-a11y-hide-images body img:not(.sid-a11y-ui):not(.sid-a11y-ui *),
html.sid-a11y-hide-images body picture:not(.sid-a11y-ui):not(.sid-a11y-ui *),
html.sid-a11y-hide-images body video:not(.sid-a11y-ui):not(.sid-a11y-ui *),
html.sid-a11y-hide-images body [role="img"]:not(.sid-a11y-ui):not(.sid-a11y-ui *) {
	visibility: hidden !important;
}

/* Arrêter les animations */
html.sid-a11y-reduce-motion *,
html.sid-a11y-reduce-motion *::before,
html.sid-a11y-reduce-motion *::after {
	animation-duration: 0.001ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.001ms !important;
	scroll-behavior: auto !important;
}

/* Grand curseur (flèche) et grande main sur les éléments cliquables */
html.sid-a11y-big-cursor,
html.sid-a11y-big-cursor * {
	cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24"><path d="M4 2l15 8.5-6.5 2L10 19z" fill="black" stroke="white" stroke-width="1.3" stroke-linejoin="round"/></svg>') 4 2, auto !important;
}

html.sid-a11y-big-cursor a,
html.sid-a11y-big-cursor a *,
html.sid-a11y-big-cursor button,
html.sid-a11y-big-cursor button *,
html.sid-a11y-big-cursor [role="button"],
html.sid-a11y-big-cursor label,
html.sid-a11y-big-cursor select,
html.sid-a11y-big-cursor summary {
	cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24"><path fill="white" stroke="black" stroke-width="1.6" stroke-linejoin="round" d="M10 11V4.5a2 2 0 0 1 4 0V11v-1.5a2 2 0 0 1 4 0V13v-1a2 2 0 0 1 4 0v3.5a7 7 0 0 1-7 7h-2.5a7 7 0 0 1-5.6-2.8L3.6 15a2 2 0 0 1 3-2.6L8 14V6.5a2 2 0 0 1 2-2"/></svg>') 16 4, pointer !important;
}

/* Thème The7 : le bouton « haut de page » est dans <body> et serait agrandi
   par le zoom, jusqu'à chevaucher le bouton du widget. On compense. */
html.sid-a11y-fontsize-1 body a.scroll-top {
	zoom: 0.8696;
}

html.sid-a11y-fontsize-2 body a.scroll-top {
	zoom: 0.7692;
}

html.sid-a11y-fontsize-3 body a.scroll-top {
	zoom: 0.6667;
}