/* ==========================================================================
   Espace de lecture — styles.
   Réutilise les variables du thème mywiki (--mw-*) avec valeurs de repli,
   pour se fondre dans le site tout en restant autonome.
   ========================================================================== */

.el-auth,
.el-me {
	--el-accent: var(--mw-accent, #0f3a82);
	--el-accent-dark: var(--mw-accent-dark, #0a2a5e);
	--el-accent-soft: var(--mw-accent-soft, #eef2fa);
	--el-bg: var(--mw-bg, #fafaf7);
	--el-card: var(--mw-bg-card, #ffffff);
	--el-soft: var(--mw-bg-soft, #f6f4ec);
	--el-text: var(--mw-text, #1a1a1a);
	--el-muted: var(--mw-text-muted, #666666);
	--el-faint: var(--mw-text-faint, #aaaaaa);
	--el-border: var(--mw-border, #e8e6df);
	--el-border-strong: var(--mw-border-strong, #d8d4c8);
	--el-radius: var(--mw-radius-md, 10px);
	--el-radius-sm: var(--mw-radius-sm, 6px);
	--el-good: #2f7d4f;
	--el-warn: #b0602f;
}

/* ---------- Boutons génériques ---------- */
.el-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	padding: 10px 16px;
	border-radius: var(--el-radius-sm);
	border: 1px solid var(--el-border-strong);
	background: var(--el-card);
	color: var(--el-muted);
	cursor: pointer;
	text-decoration: none;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.el-btn:hover { border-color: var(--el-accent); color: var(--el-accent); }
.el-btn-primary { background: var(--el-accent); border-color: var(--el-accent); color: #fff; }
.el-btn-primary:hover { background: var(--el-accent-dark); border-color: var(--el-accent-dark); color: #fff; }
.el-btn-block { width: 100%; justify-content: center; }
.el-btn-ghost { background: transparent; }

/* ==========================================================================
   Suivi de lecture sur l'article — noir & blanc
   ========================================================================== */
:root { --el-serif: 'Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif; }

/* Invitation visiteur non connecté */
.el-guest { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--mw-text-muted,#666); background: var(--mw-bg-card,#fff); border: 1px solid var(--mw-border,#e8e6df); border-radius: 8px; padding: 10px 14px; margin: 0 0 22px; }
.el-guest svg { color: var(--mw-text-faint,#9a968c); flex: none; }
.el-guest a { color: var(--mw-text,#1a1a1a); font-weight: 600; text-decoration: underline; }

/* Pictos dans la ligne méta : pastilles bordées, taille FIXE (rayon 8, compact),
   actif = fond gris. Libellés constants, poids constant → aucun décalage.
   Bordure IDENTIQUE actif/inactif (--el-meta-bd) : seul le fond change à l'activation. */
:root { --el-meta-bd: #a8a294; }
.mw-page-meta .el-act {
	display: inline-flex; align-items: center; gap: 6px;
	font-family: inherit; font-size: 12.5px; line-height: 1; font-weight: 500; cursor: pointer;
	background: #fff; border: 1px solid var(--el-meta-bd); color: var(--mw-text-muted,#666);
	padding: 3.5px 11px; border-radius: 8px; white-space: nowrap;
	transition: background .12s, border-color .12s, color .12s;
}
.mw-page-meta .el-act:hover { color: var(--mw-text,#1a1a1a); }
.mw-page-meta .el-act.is-on { background: #eceae3; border-color: var(--el-meta-bd); color: var(--mw-text,#1a1a1a); }
.mw-page-meta .el-act:active, .mw-page-meta .el-seg-h:active { transform: scale(0.96); }
.mw-page-meta .el-act svg { display: block; }
.mw-page-meta .el-fav.is-on svg { fill: currentColor; }
/* Actif = icône remplie : crayon plein ; œil = contour conservé + pupille pleine */
.mw-page-meta .el-note.is-on svg { fill: currentColor; }
.mw-page-meta .el-lu.is-on .el-eye circle { fill: currentColor; }
/* Lu : œil barré (non lu) → œil (lu) */
.mw-page-meta .el-lu .el-eye { display: none; }
.mw-page-meta .el-lu.is-on .el-eye-off { display: none; }
.mw-page-meta .el-lu.is-on .el-eye { display: block; }
.mw-page-meta .el-act:focus-visible,
.mw-page-meta .el-seg-h:focus-visible { outline: 2px solid var(--mw-text,#1a1a1a); outline-offset: 2px; }

.mw-page-meta .el-seg { display: inline-flex; border: 1px solid var(--el-meta-bd); border-radius: 8px; overflow: hidden; }
/* .el-seg est un <span> : la feuille custom_css (BDD) lui impose
   « body.single .mw-page-header .mw-page-meta span { gap:.35rem; align-items:center } »
   (spécificité 0,3,2). Ce gap de 5,6px laissait une bande NON PEINTE entre les deux
   moitiés — le fond de la moitié active ne touchait pas le séparateur. On repasse
   devant avec le boost :not() maison, et on étire les moitiés sur toute la hauteur. */
html body.single .mw-page-header .mw-page-meta .el-seg:not(.zz):not(.yy) {
	gap: 0 !important;
	align-items: stretch !important;
}
.mw-page-meta .el-seg-h {
	display: inline-flex; align-items: center; gap: 5px;
	font-family: inherit; font-size: 12.5px; line-height: 1; font-weight: 500; cursor: pointer;
	background: #fff; border: 0; color: var(--mw-text-muted,#666); padding: 3.5px 11px;
	transition: background .12s, color .12s;
}
.mw-page-meta .el-seg-h + .el-seg-h { border-left: 1px solid var(--el-meta-bd); }
.mw-page-meta .el-seg-h:hover { color: var(--mw-text,#1a1a1a); }
.mw-page-meta .el-seg-h.is-on { background: #eceae3; color: var(--mw-text,#1a1a1a); }
.mw-page-meta .el-seg-h.is-on svg { fill: currentColor; }
.mw-page-meta .el-seg svg { display: block; }

/* Barre d'actions rendue SERVEUR dans la ligne méta : poussée à droite. Les
   boutons restent SUR la ligne (même alignement que fil d'Ariane / date / auteur). */
.mw-page-meta.el-meta-has-tools { justify-content: flex-start; align-items: center; }
.mw-page-meta .el-tools { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
/* Enveloppe d'une action : haute comme son bouton (le sélecteur bat « .mw-page-meta span »). */
.mw-page-meta .el-tools .el-actw { position: relative; display: inline-flex; align-items: center; }
/* Date SOUS le bouton, en position absolue : elle n'ajoute aucune hauteur à la ligne
   méta (donc rien n'est décalé ni recentré) et ne bouge jamais au clic. */
.mw-page-meta .el-tools .el-act-d {
	position: absolute; top: calc(100% + 1px); left: 50%; transform: translateX(-50%);
	font-size: 8px; line-height: 10px; font-style: italic; font-weight: 400; letter-spacing: .01em;
	color: var(--mw-text-faint, #9a968c); font-variant-numeric: tabular-nums;
	text-align: center; white-space: nowrap; pointer-events: none;
}

/* Note incrustée dans la page (visible) */
.el-onpage { margin: 0 0 26px; border: 1px solid var(--mw-border,#e8e6df); border-radius: 10px; background: var(--mw-bg-card,#fff); padding: 14px 16px; }
.el-onpage-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.el-onpage-h b { font-size: 12.5px; color: var(--mw-text,#1a1a1a); }
.el-onpage-lock { font-size: 10.5px; color: var(--mw-text-faint,#9a968c); font-weight: 400; margin-left: 6px; }
.el-onpage-acts { display: flex; gap: 14px; }
.el-onpage-acts button { font: inherit; font-size: 12px; color: var(--mw-text-muted,#666); background: none; border: 0; text-decoration: underline; cursor: pointer; }
.el-onpage-acts button:hover { color: var(--mw-text,#1a1a1a); }
.el-onpage-txt { font-size: 15px; color: #333; line-height: 1.6; white-space: pre-wrap; }
.el-onpage-dates { margin-top: 8px; font-size: 11px; color: var(--mw-text-faint,#9a968c); }
.el-onpage-dates:empty { display: none; }

/* Popup de note : Hairline + zone encadrée, taille « Très grande » */
.el-modal-ov { position: fixed; inset: 0; background: rgba(26,26,26,.34); display: none; align-items: center; justify-content: center; z-index: 100000; padding: 24px; }
.el-modal-ov.open { display: flex; }
.el-modal { width: 100%; background: #fff; border-radius: 16px; box-shadow: 0 26px 60px -18px rgba(0,0,0,.4); }
.el-modal-in { position: relative; padding: 30px 34px 24px; }
.el-modal-x { position: absolute; top: 16px; right: 17px; width: 28px; height: 28px; border: 0; background: none; border-radius: 50%; color: var(--mw-text-faint,#9a968c); cursor: pointer; font-size: 20px; line-height: 1; }
.el-modal-x:hover { color: var(--mw-text,#1a1a1a); background: var(--mw-border-soft,#f0eee7); }
.el-modal-title { font-family: var(--el-serif); font-size: 22px; font-weight: 600; color: var(--mw-text,#1a1a1a); }
.el-modal-hr { border: 0; border-top: 1px solid var(--mw-border-soft,#f0eee7); margin: 15px 0 18px; }
.el-modal-ta { width: 100%; box-sizing: border-box; font-family: inherit; font-size: 15.5px; line-height: 1.7; color: var(--mw-text,#1a1a1a); background: #fff; border: 1px solid var(--mw-border-strong,#d8d4c8); border-radius: 10px; padding: 14px 16px; resize: vertical; outline: none; }
.el-modal-ta:focus { border-color: var(--mw-text,#1a1a1a); }
.el-modal-lock { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--mw-text-faint,#9a968c); margin-top: 12px; }
.el-modal-f { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; }
.el-modal-del { font: inherit; font-size: 13px; color: var(--mw-text-muted,#666); background: none; border: 0; cursor: pointer; }
.el-modal-del:hover { color: #a3251a; }
.el-modal-save { font: inherit; font-size: 15px; font-weight: 600; color: var(--mw-text,#1a1a1a); background: none; border: 0; border-bottom: 2px solid var(--mw-text,#1a1a1a); padding-bottom: 2px; cursor: pointer; }

/* Confirmation de suppression */
.el-confirm-ov { position: fixed; inset: 0; background: rgba(26,26,26,.4); display: none; align-items: center; justify-content: center; z-index: 100001; padding: 24px; }
.el-confirm-ov.open { display: flex; }
.el-confirm { width: 100%; max-width: 360px; background: #fff; border-radius: 14px; box-shadow: 0 24px 60px -18px rgba(0,0,0,.45); padding: 24px 24px 20px; text-align: center; }
.el-confirm-ic { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--mw-border-strong,#d8d4c8); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; color: var(--mw-text,#1a1a1a); }
.el-confirm h4 { font-family: var(--el-serif); font-size: 18px; margin: 0 0 6px; font-weight: 600; color: var(--mw-text,#1a1a1a); }
.el-confirm p { font-size: 13.5px; color: var(--mw-text-muted,#666); margin: 0 0 18px; }
.el-confirm-f { display: flex; gap: 10px; justify-content: center; }
.el-confirm-f button { font: inherit; font-size: 13.5px; font-weight: 600; border-radius: 8px; padding: 9px 18px; cursor: pointer; }
.el-confirm-cancel { background: #fff; border: 1px solid var(--mw-border-strong,#d8d4c8); color: var(--mw-text,#1a1a1a); }
.el-confirm-cancel:hover { border-color: var(--mw-text,#1a1a1a); }
.el-confirm-ok { background: var(--mw-text,#1a1a1a); border: 1px solid var(--mw-text,#1a1a1a); color: #fff; }

/* Toast */
.el-toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--mw-text,#1a1a1a); color: #fff; font-size: 13px; padding: 9px 16px; border-radius: 100px; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 100002; }
.el-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Formulaires connexion/inscription ---------- */
.el-auth { display: flex; justify-content: center; padding: 20px 0; }
.el-auth-card {
	width: 100%; max-width: 400px; background: var(--el-card);
	border: 1px solid var(--el-border); border-radius: var(--el-radius);
	box-shadow: var(--mw-shadow-md, 0 4px 16px rgba(15,15,20,.06)); padding: 30px;
	color: var(--el-text);
}
.el-auth-title { text-align: center; margin: 0 0 4px; font-size: 22px; }
.el-auth-sub { text-align: center; color: var(--el-muted); font-size: 13px; margin: 0 0 22px; }
.el-tabs { display: flex; background: var(--el-accent-soft); border-radius: var(--el-radius-sm); padding: 4px; margin-bottom: 22px; }
.el-tab { flex: 1; text-align: center; font-size: 14px; font-weight: 600; padding: 9px; border-radius: var(--el-radius-sm); color: var(--el-accent); border: 0; background: none; cursor: pointer; }
.el-tab.is-on { background: var(--el-card); color: var(--el-text); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.el-form.is-hidden { display: none; }
.el-fld { display: block; margin-bottom: 16px; }
.el-fld > span { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--el-muted); font-weight: 600; margin-bottom: 6px; }
.el-fld input {
	width: 100%; box-sizing: border-box; padding: 11px 13px; font-size: 15px;
	border: 1px solid var(--el-border-strong); border-radius: var(--el-radius-sm);
	background: var(--el-bg); color: var(--el-text);
}
.el-help { display: block; margin-top: 6px; color: var(--el-faint); font-size: 12px; }
.el-consent { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; color: var(--el-muted); line-height: 1.5; margin-bottom: 18px; }
.el-consent input { margin-top: 3px; }
.el-form-foot { text-align: center; margin: 14px 0 0; font-size: 13px; }
.el-alert { background: #fbe9e7; color: #b0281a; border: 1px solid #f3c0b8; border-radius: var(--el-radius-sm); padding: 10px 14px; font-size: 13.5px; margin-bottom: 18px; }

/* Notice de succès/info (confirmation envoyée, compte activé…) */
.el-notice { border-radius: var(--el-radius-sm); padding: 12px 16px; font-size: 13.5px; line-height: 1.5; margin: 0 auto 18px; max-width: 760px; }
.el-notice-ok { background: #eaf3ee; color: #256447; border: 1px solid #c3ddcd; }
.el-notice-warn { background: #fdf3e3; color: #8a5a12; border: 1px solid #f0d9ad; }
/* Renvoi de l'email de confirmation (sous le formulaire de connexion) */
.el-resend { margin-top: 12px; }
/* Champ honeypot anti-robot : hors écran mais présent dans le DOM */
.el-hp { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Écran d'authentification en deux panneaux ---------- */
.el-auth-split {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	max-width: 900px;
	margin: 0 auto;
	background: var(--el-card);
	border: 1px solid var(--el-border);
	border-radius: var(--el-radius);
	overflow: hidden;
	box-shadow: var(--mw-shadow-md, 0 4px 16px rgba(15,15,20,.06));
}
/* Panneau sombre à GAUCHE (desktop) / EN HAUT (mobile) → order:1 ;
   le formulaire passe à droite / en dessous → order:2. */
.el-auth-split .el-auth-card {
	order: 2;
	max-width: none;
	width: 100%;
	border: 0;
	box-shadow: none;
	border-radius: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 34px 34px;
}
.el-auth-aside { order: 1; }
.el-auth-split .el-tabs { margin-top: 0; }

/* panneau avantages */
.el-auth-aside {
	background: var(--el-accent);
	color: #fff;
	padding: 40px 34px;
	display: flex;
	align-items: center;
}
.el-aside-title { color: #fff; font-size: 23px; line-height: 1.2; margin: 0 0 10px; }
.el-aside-lead { color: rgba(255,255,255,.82); font-size: 14px; line-height: 1.55; margin: 0 0 26px; }
.el-benefits { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.el-benefits li { display: flex; gap: 14px; align-items: flex-start; }
.el-bic {
	width: 34px; height: 34px; border-radius: 9px; flex: none;
	background: rgba(255,255,255,.15); color: #fff;
	display: inline-flex; align-items: center; justify-content: center; font-size: 16px;
}
.el-benefits b { display: block; font-size: 14px; color: #fff; margin-bottom: 2px; }
.el-benefits span { font-size: 12.5px; color: rgba(255,255,255,.75); line-height: 1.5; }
.el-aside-foot { font-size: 12px; color: rgba(255,255,255,.72); border-top: 1px solid rgba(255,255,255,.2); padding-top: 16px; margin: 0; }

@media (max-width: 760px) {
	.el-auth-split { grid-template-columns: 1fr; max-width: 440px; }
	.el-auth-aside { padding: 30px 26px; }
	.el-auth-split .el-auth-card { padding: 28px 26px; }
}

/* compte */
.el-account { border: 1px solid var(--mw-border,#e8e6df); border-radius: 10px; overflow: hidden; max-width: 480px; margin-bottom: 20px; }
.el-acc-row { display: flex; justify-content: space-between; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--mw-border,#e8e6df); font-size: 14px; }
.el-acc-row:last-child { border-bottom: 0; }
.el-acc-k { color: var(--mw-text-muted,#666); }
.el-acc-v { font-weight: 600; }
.el-acc-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.el-empty-s { color: var(--mw-text-muted,#666); font-size: 14px; }

/* ---------- Menu profil dans la navbar (tout à droite) ---------- */
.el-profile { position: relative; display: inline-flex; align-items: center; }
.el-prof-toggle { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; cursor: pointer; padding: 2px; color: var(--mw-text-muted,#666); }
.el-prof-ava { width: 32px; height: 32px; border-radius: 50%; background: var(--mw-text,#1a1a1a); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; }
.el-prof-chev { color: var(--mw-text-faint,#9a968c); }
.el-prof-login { font-size: 14px; color: var(--mw-text,#1a1a1a); text-decoration: none; font-weight: 500; border: 1px solid var(--mw-border-strong,#d8d4c8); padding: 7px 14px; border-radius: 8px; }
.el-prof-login:hover { border-color: var(--mw-text,#1a1a1a); }
.el-prof-menu { position: absolute; top: 46px; right: 0; width: 224px; background: var(--mw-bg-card,#fff); border: 1px solid var(--mw-border,#e8e6df); border-radius: 10px; box-shadow: 0 14px 36px -14px rgba(0,0,0,.24); padding: 6px; z-index: 9999; }
.el-prof-menu[hidden] { display: none; }
.el-prof-h { display: flex; align-items: center; gap: 10px; padding: 10px 10px 12px; border-bottom: 1px solid var(--mw-border-soft,#f0eee7); margin-bottom: 6px; }
.el-prof-a { width: 34px; height: 34px; border-radius: 50%; background: var(--mw-text,#1a1a1a); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; flex: none; }
.el-prof-h b { font-size: 13.5px; display: block; color: var(--mw-text,#1a1a1a); }
.el-prof-h span { font-size: 11.5px; color: var(--mw-text-faint,#9a968c); word-break: break-all; }
.el-prof-menu a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; font-size: 13.5px; color: var(--mw-text-muted,#666); text-decoration: none; border-radius: 7px; }
.el-prof-menu a:hover { background: var(--mw-bg-soft,#f6f4ec); color: var(--mw-text,#1a1a1a); }
.el-prof-menu a svg { color: var(--mw-text-faint,#9a968c); flex: none; }
.el-prof-menu a:hover svg { color: var(--mw-text,#1a1a1a); }
.el-prof-menu hr { border: 0; border-top: 1px solid var(--mw-border-soft,#f0eee7); margin: 6px 4px; }
.el-prof-menu a.out { color: #a3251a; }
.el-prof-menu a.out svg { color: #a3251a; }

/* ---------- Focus clavier visible ---------- */
.el-btn:focus-visible, .el-tab:focus-visible,
.el-fld input:focus-visible, .el-prof-toggle:focus-visible, .el-prof-menu a:focus-visible { outline: 2px solid var(--mw-text,#1a1a1a); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	.el-btn, .el-avis-btn, .el-tab { transition: none; }
}

/* ==========================================================================
   Page « Mon espace » : occuper toute la largeur du thème.
   Neutralise le plafond de lecture (760px) et le sommaire auto du thème mywiki,
   sans modifier le thème (surcharges scoppées à la page via body class).
   ========================================================================== */
.el-espace-page .mw-full-width { max-width: 1180px; }
.el-espace-page .mw-article,
.el-espace-page .mw-article--full,
.el-espace-page .mw-article-content {
	max-width: 100% !important;
	margin-left: 0;
	margin-right: 0;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}
.el-espace-page .mw-article > p:first-of-type { font-size: inherit; line-height: inherit; color: inherit; }

/* Filet de sécurité si la page reste sur le gabarit par défaut (avec sommaire) */
.el-espace-page .mw-content-layout { display: block; max-width: 1180px; }
.el-espace-page .mw-content-layout-narrow { max-width: 1180px; }
.el-espace-page .mw-toc-sidebar { display: none; }

/* Masque le fil d'Ariane et le titre « Mon espace » du thème :
   inutiles ici (le dashboard dit « Bonjour X », la carte dit « Mon espace de lecture »)
   et responsables du vide sous la barre de navigation. */
.el-espace-page .mw-breadcrumbs,
.el-espace-page .mw-article-header,
.el-espace-page .mw-page-header { display: none; }

/* Espace maîtrisé entre la navbar et le contenu (conteneur de CONTENU uniquement,
   surtout pas .mw-container en général, sinon la navbar/le footer gonflent) */
.el-espace-page .mw-full-width { padding-top: 36px; padding-bottom: 48px; }

/* Le bloc connexion/inscription : centré verticalement, sans excès */
.el-espace-page .el-auth { padding: 8px 0 24px; }

/* ==========================================================================
   Filtres « suivi de lecture » sur les listes d'articles
   ========================================================================== */
.el-suivi { --el-muted: var(--mw-text-muted, #666); --el-border: var(--mw-border, #e8e6df); --el-soft: var(--mw-bg-soft, #f6f4ec); }
.el-suivi-ic { display: inline-flex; align-items: center; color: var(--mw-text-faint, #9a968c); flex: none; }
.el-suivi-link.is-on .el-suivi-ic { color: var(--mw-text, #1a1a1a); }

/* Variante sidepane (verticale), à pictos, noir & blanc */
.el-suivi-pane { margin: 0; padding: 0; border-bottom: 0; }
.el-suivi-h { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--mw-text-faint, #9a968c); margin: 0 0 8px; font-weight: 700; }
.el-suivi-pane .el-suivi-list { display: flex; flex-direction: column; gap: 1px; }
.el-suivi-pane .el-suivi-link {
	display: flex; align-items: center; gap: 8px; padding: 5px 8px; font-size: 12.5px; color: var(--el-muted);
	text-decoration: none; border-radius: 6px;
}
.el-suivi-pane .el-suivi-link:hover { background: var(--el-soft); color: var(--mw-text, #1a1a1a); }
.el-suivi-pane .el-suivi-link.is-on { background: #eceae3; color: var(--mw-text, #1a1a1a); font-weight: 600; }

/* Variante barre horizontale (page « Articles »), à pictos, noir & blanc */
.el-suivi-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 1.6rem; }
.el-suivi-bar .el-suivi-link {
	display: inline-flex; align-items: center; gap: 7px;
	font-size: 13px; font-weight: 500; padding: 6px 13px; border-radius: 100px;
	border: 1px solid var(--mw-border-strong, #d8d4c8); background: #fff; color: var(--el-muted); text-decoration: none;
	transition: color .15s, border-color .15s;
}
.el-suivi-bar .el-suivi-link:hover { border-color: var(--mw-text, #1a1a1a); color: var(--mw-text, #1a1a1a); }
.el-suivi-bar .el-suivi-link.is-on { background: var(--mw-text, #1a1a1a); border-color: var(--mw-text, #1a1a1a); color: #fff; }
.el-suivi-bar .el-suivi-link.is-on .el-suivi-ic { color: #fff; }

/* En-tête des listes d'articles : le retrait du fil d'Ariane et le
   repositionnement du compteur sont faits en JS (styles inline !important),
   car le thème impose sa grille via une feuille injectée qui bat le CSS externe.
   Voir espace.js → restructuration de .mw-archive-header. */
.mw-archive-header .mw-archive-count.el-count-left {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--mw-text-soft, #888);
}

/* ==========================================================================
   Page « Mots-clés » (nuage de tags)
   ========================================================================== */
.el-tags-page { --el-border: var(--mw-border, #e8e6df); --el-muted: var(--mw-text-muted, #666); }
/* En-tête compact, calqué sur l'en-tête d'archive (/articles/) pour que le HR
   se retrouve au même niveau : petite ligne « N tags », même espacement. */
.el-tags-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 0;
	margin: 0 0 48px;
	padding: 0 0 16px;
	border-bottom: 1px solid var(--mw-border-soft, #f0eee7);
}
/* Titre « Tags » à gauche — même format que /articles/ (.mw-page-eyebrow). */
.el-tags-title {
	font-family: var(--mw-serif, Georgia, 'Times New Roman', serif);
	font-size: 1.8rem; line-height: 1.04; font-weight: 600;
	color: var(--mw-text, #1a1a1a);
}
/* Compteur à droite — même style sobre que le compteur d'archive. */
.el-tags-count { font-size: 0.82rem; text-transform: none; letter-spacing: 0; color: var(--mw-text-soft, #888); white-space: nowrap; }
/* Aligne le haut de contenu sur celui de /articles/ (16px, pas 36px) */
.el-tags-body .mw-full-width { padding-top: 16px; }

/* ==========================================================================
   EN-TÊTE DE PAGE UNIFIÉ — Statistiques, Roadmap, Maquettes…
   Même format que /articles/ et /tags/ : titre serif à gauche, méta à droite,
   filet aligné. espace.css étant chargé partout, ces classes sont réutilisables
   par les shortcodes des autres plugins (islamologia-stats/-roadmap/-maquettes).
   ========================================================================== */
.el-page-head {
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px; min-height: 0; margin: 0 0 28px; padding: 16px 0;
	border-bottom: 1px solid var(--mw-border-soft, #f0eee7);
}
.el-page-title {
	font-family: var(--mw-serif, Georgia, 'Times New Roman', serif);
	font-size: 1.8rem; line-height: 1.04; font-weight: 600; margin: 0;
	color: var(--mw-text, #1a1a1a);
}
.el-page-meta { font-size: 0.82rem; color: var(--mw-text-soft, #888); white-space: nowrap; }
/* Ces pages portent leur propre en-tête → on masque celui du thème (titre + fil d'Ariane). */
body:has(.el-page-head) .mw-article-header,
body:has(.el-page-head) .mw-breadcrumbs { display: none !important; }

/* Disposition 2 colonnes (aside gauche + contenu droite) pour Revue/Roadmap/Maquettes,
   reprenant le side panel de la page Articles : on reutilise .archive-sidepane /
   .sidepane-block / .cats-list (styles par le CSS global) + on fournit la grille. */
.el-page-layout{ display: grid; grid-template-columns: 280px minmax(0, 1fr); column-gap: 2rem; align-items: start; }
.el-page-layout > .el-page-main{ grid-column: 2; min-width: 0; }
.el-page-layout .archive-sidepane .cats-list .dot{ background: #c9c4b8; }
.el-page-layout .archive-sidepane .cats-list a{ cursor: pointer; }
@media (max-width: 820px){
	.el-page-layout{ grid-template-columns: 1fr; row-gap: 18px; }
	.el-page-layout > .el-page-main{ grid-column: 1; }
	.el-page-layout .archive-sidepane{ position: static; }
}
/* Widgets de synthese dans l'aside : progression + repartition (mini-barres) + recap. */
.el-aside-prog{ font-size: 12.5px; color: var(--mw-text-muted, #666); }
.el-aside-prog .bar{ height: 8px; background: var(--mw-border, #e8e6df); border-radius: 100px; overflow: hidden; margin-bottom: 8px; }
.el-aside-prog .bar span{ display: block; height: 100%; background: var(--mw-text, #1a1a1a); }
.el-aside-prog b{ color: var(--mw-text, #1a1a1a); }
.el-aside-bars{ display: flex; flex-direction: column; gap: 7px; }
.el-aside-bars .row{ display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--mw-text-muted, #666); }
.el-aside-bars .row .l{ width: 84px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.el-aside-bars .row .t{ flex: 1; height: 6px; background: var(--mw-border, #e8e6df); border-radius: 100px; overflow: hidden; }
.el-aside-bars .row .t span{ display: block; height: 100%; background: var(--mw-text, #1a1a1a); }
.el-aside-bars .row .n{ width: 20px; text-align: right; font-variant-numeric: tabular-nums; color: var(--mw-text-faint, #9a968c); }
.el-aside-recap{ font-size: 12.5px; color: var(--mw-text-muted, #666); line-height: 1.7; }
.el-aside-recap b{ color: var(--mw-text, #1a1a1a); }

/* ==========================================================================
   ACTIONS DE TABLEAU (pictos « halo », option B) + TABLEAU DE BORD unifie.
   Reutilises par Revue / Maquettes / Roadmap. Ajouter la classe .el-ic aux
   boutons d'action et .el-dtable aux tableaux.
   ========================================================================== */
.el-ic{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; border:0; background:none; color:var(--mw-text-muted,#666); cursor:pointer; padding:0; transition:background .15s, color .15s; text-decoration:none; }
.el-ic svg{ width:18px; height:18px; display:block; }
.el-ic:hover, .el-ic:focus-visible{ color:var(--mw-text,#1a1a1a); background:var(--mw-bg-soft,#f6f4ec); outline:none; }
.el-ic.is-danger:hover{ color:#9a2a2a; background:#f6ecec; }
.el-ic.is-on{ color:var(--mw-text,#1a1a1a); }
.el-ic[disabled]{ opacity:.4; cursor:default; }
.el-ic-row{ display:inline-flex; align-items:center; gap:2px; }

.el-dtable{ width:100%; border-collapse:collapse; font-size:13.5px; }
.el-dtable th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--mw-text-faint,#9a968c); font-weight:600; padding:11px 12px; border-bottom:1px solid var(--mw-border-strong,#d8d4c8); vertical-align:middle; white-space:nowrap; background:none; }
.el-dtable td{ padding:12px; border-bottom:1px solid var(--mw-border,#e8e6df); vertical-align:middle; }
.el-dtable tbody tr:hover td{ background:var(--mw-bg-soft,#f6f4ec); }
.el-dtable th.sortable{ cursor:pointer; user-select:none; }
.el-dtable th.sortable:hover{ color:var(--mw-text,#1a1a1a); }
.el-dtable th.sortable .el-ar{ display:inline-block; margin-left:5px; font-size:10px; line-height:1; color:var(--mw-text-faint,#9a968c); opacity:.5; vertical-align:middle; font-weight:400; }
.el-dtable th.sortable:hover .el-ar{ opacity:.85; color:var(--mw-text,#1a1a1a); }
.el-dtable th.is-sorted{ color:var(--mw-text,#1a1a1a); }
.el-dtable th.is-sorted .el-ar{ opacity:1; color:var(--mw-text,#1a1a1a); }

/* Pastilles sobres uniformes, 100 % noir & blanc (proposition 7, hauteur C) */
.el-tags-cloud { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.el-tag {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 4px 11px; border-radius: 100px; text-decoration: none; line-height: 1.2;
	background: #fff; border: 1px solid var(--mw-border-strong, #d8d4c8);
	font-size: 12.5px; white-space: nowrap;
	transition: color .15s, border-color .15s;
}
/* neutralise la couleur de lien bleue du thème */
.el-tag, .el-tag:visited { color: var(--mw-text, #1a1a1a) !important; }
.el-tag:hover { border-color: var(--mw-text, #1a1a1a); color: var(--mw-text, #1a1a1a) !important; }
.el-tag-h { color: var(--mw-text-faint, #9a968c) !important; }
.el-tag-count { background: var(--mw-bg, #fafaf7); color: var(--mw-text-muted, #666); border-radius: 100px; padding: 0 6px; font-size: 10px; font-variant-numeric: tabular-nums; }
.el-tag:hover .el-tag-count { color: var(--mw-text, #1a1a1a); }

/* ==========================================================================
   Neutralisation du bleu — cohérence noir & blanc du thème
   ========================================================================== */
/* Sommaire « Sur cette page » : paragraphe courant en NOIR GRAS (au lieu de bleu) */
.mw-toc-list a:hover { color: var(--mw-text, #1a1a1a) !important; }
.mw-toc-list a.is-active {
	color: var(--mw-text, #1a1a1a) !important;
	border-left-color: var(--mw-text, #1a1a1a) !important;
	font-weight: 700 !important;
}

/* ==========================================================================
   Bandeau « À propos » de catégorie — déplacé hors de la sidepane,
   en tête de la colonne des articles (pleine largeur en vue cartes ET liste).
   ========================================================================== */
.mw-archive-about { grid-column: 1 / -1; margin: 0 0 6px; }
.mw-about-name {
	display: block;
	font-family: var(--mw-serif, Georgia, 'Times New Roman', serif);
	font-size: 18px; font-weight: 600; line-height: 1.25;
	color: var(--mw-text, #1a1a1a); margin-bottom: 3px;
}
.mw-about-text {
	display: block;
	color: var(--mw-text-muted, #666);
	font-size: 14px; line-height: 1.6; max-width: 80ch;
}

/* ==========================================================================
   Catégories en NOIR & BLANC — neutralisation du code couleur.
   Le thème colore les cartes d'accueil, les liserés d'articles et les
   pastilles de la sidepane via une variable --cat-c (une couleur par
   catégorie). Au-delà de ~6 catégories la couleur ne discrimine plus rien :
   on repasse tout en monochrome sobre, cohérent avec la charte N&B.
   ========================================================================== */
/* 1. On surcharge la VARIABLE --cat-c (pas chaque règle) : une seule valeur
   grise neutre, avec une spécificité qui bat les setters du thème
   (.mw-cat-card--slug et body.category-X .mw-archive-item). Toutes les
   utilisations (liserés + textes/survols) héritent donc du gris. */
html .mw-cat-card, html [class*="mw-cat-card--"] { --cat-c: #8a8578 !important; }
html body.archive .mw-archive-item,
html body.blog .mw-archive-item,
html body.search .mw-archive-item,
html body[class*="category-"] .mw-archive-item { --cat-c: #8a8578 !important; }
/* 2. Pastilles colorées de la sidepane (Catégories ET Affiner sur recherche) → gris */
.archive-sidepane .dot { background: var(--mw-text-faint, #9a968c) !important; }
/* Cases à cocher « Affiner » : accent bleu du navigateur → noir */
.archive-sidepane input[type="checkbox"] { accent-color: var(--mw-text, #1a1a1a); }
/* 3. Couvertures dégradées colorées éventuelles → neutre */
.mw-archive-item::before { background: var(--mw-bg-soft, #f6f4ec) !important; }

/* ==========================================================================
   Accueil — panneaux catégorie homogènes en hauteur.
   Le titre de l'article vedette variait de 2 à 4 lignes → l'en-tête gris
   dépassait. On limite le titre à 3 lignes (…) avec une hauteur réservée,
   et la date (remontée hors du lien par le JS) passe sur sa propre ligne :
   les dates s'alignent d'un panneau à l'autre.
   ========================================================================== */
.mw-cat-card-v3 .mw-cat-feat-title {
	display: -webkit-box !important;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	min-height: 3.9em;            /* 3 lignes (line-height 1.3) réservées */
}
.mw-cat-card-v3 .mw-cat-feat > .mw-cat-date {
	display: block;
	margin: 0.3rem 0 0;
	white-space: normal;
}

/* ==========================================================================
   Sidepane COMPACTE (socle repris de la maquette liste-20) — sans encadré.
   Surcharge le CSS additionnel du thème (boîte bordée) : fond transparent,
   sections séparées par un simple filet, titres discrets, rangées compactes.
   Spécificité `html …` pour battre l'ordre de source du CSS additionnel.
   ========================================================================== */
html .archive-sidepane {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
}
/* Sections : plus de marge/bordure propre ; séparation par filet entre blocs */
html .archive-sidepane > * { margin: 0 !important; }
html .archive-sidepane > * + * {
	margin-top: 16px !important;
	padding-top: 16px !important;
	border-top: 1px solid var(--mw-border-soft, #f0eee7) !important;
}
/* Titres de section : petit, majuscule, gris, sans soulignement */
html .archive-sidepane h4 {
	font-size: 10px !important; letter-spacing: .1em !important; text-transform: uppercase !important;
	font-weight: 700 !important; color: var(--mw-text-faint, #9a968c) !important;
	margin: 0 0 8px !important; border-bottom: 0 !important; padding-bottom: 0 !important;
}
/* Reset des listes tri/catégories */
html .archive-sidepane .sort-list,
html .archive-sidepane .cats-list,
html .archive-sidepane .filters-list { list-style: none !important; padding: 0 !important; margin: 0 !important; }
html .archive-sidepane .sort-list li,
html .archive-sidepane .cats-list li { margin: 0 !important; }
/* Rangées compactes (tri, catégories, filtres) */
html .archive-sidepane .cats-list a,
html .archive-sidepane .filters-list label {
	display: flex !important; align-items: center !important; gap: 8px !important;
	padding: 5px 8px !important; border-radius: 6px !important;
	font-size: 12.5px !important; color: var(--mw-text-muted, #666) !important; text-decoration: none !important;
}
html .archive-sidepane .sort-list a,
html .archive-sidepane .sort-list button {
	display: flex !important; width: 100% !important; text-align: left !important; text-decoration: none !important;
	background: transparent !important; border: 0 !important; cursor: pointer !important; font-family: inherit !important;
	padding: 5px 8px !important; border-radius: 6px !important;
	font-size: 12.5px !important; color: var(--mw-text-muted, #666) !important;
}
html .archive-sidepane .cats-list a:hover,
html .archive-sidepane .sort-list a:hover,
html .archive-sidepane .sort-list button:hover,
html .archive-sidepane .filters-list label:hover { background: var(--mw-bg-soft, #f6f4ec) !important; }
/* État actif = surbrillance grise (au lieu d'ombre/blanc) */
html .archive-sidepane .cats-list li.is-active > a,
html .archive-sidepane .sort-list a.is-active,
html .archive-sidepane .sort-list button.is-active {
	background: #eceae3 !important; color: var(--mw-text, #1a1a1a) !important; font-weight: 600 !important; box-shadow: none !important;
}
/* Pastille + compteur compacts */
html .archive-sidepane .cats-list .dot { width: 7px !important; height: 7px !important; flex: 0 0 7px !important; }
html .archive-sidepane .count {
	margin-left: auto !important; font-size: 10px !important; min-width: 0 !important; padding: 0 7px !important;
	background: var(--mw-border-soft, #f0eee7) !important; color: var(--mw-text-faint, #9a968c) !important;
}

/* ==========================================================================
   Mon Espace réduit à « Mon compte » (Phase 2)
   ========================================================================== */
.el-compte-wrap { max-width: 640px; margin: 0 auto; padding: 10px 0 48px; }

/* ==========================================================================
   PHASE 3 — Style de liste unifié n°1 (vue LISTE) : cartes blanches serif
   aérées + pictos de suivi à droite. Provenances : Articles / Cat / Tag / Recherche.
   Surcharge le CSS additionnel (liseré coloré, titre sans-serif) via `html …`.
   ========================================================================== */
html body[data-archive-view="list"].archive .mw-archive-item,
html body[data-archive-view="list"].blog .mw-archive-item,
html body[data-archive-view="list"].search .mw-archive-item {
	position: relative !important;
	background: #fff !important;
	border: 1px solid var(--mw-border, #e8e6df) !important;
	border-radius: 10px !important;
	padding: 18px 22px !important;
	margin: 0 0 15px !important;
	box-shadow: none !important;
}
html body[data-archive-view="list"].archive .mw-archive-item h3,
html body[data-archive-view="list"].blog .mw-archive-item h3,
html body[data-archive-view="list"].search .mw-archive-item h3 {
	font-family: var(--mw-serif, Georgia, 'Times New Roman', serif) !important;
	font-weight: 500 !important; font-size: 1.22rem !important; line-height: 1.28 !important;
	margin: 0 0 6px !important; padding-right: 158px !important;
}
html body[data-archive-view="list"] .mw-archive-item h3 a { color: var(--mw-text, #1a1a1a) !important; text-decoration: none !important; }

/* Pictos de suivi à droite de chaque item (visibles en vue liste seulement) */
.el-list-chips { position: absolute; top: 16px; right: 20px; display: none; gap: 5px; }
body[data-archive-view="list"] .el-list-chips { display: inline-flex; }
.el-lc {
	display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 24px; height: 24px;
	border: 1px solid var(--el-meta-bd, #a8a294); border-radius: 6px; background: #fff;
	color: var(--mw-text-faint, #9a968c); cursor: pointer; padding: 0;
	transition: background .12s, color .12s;
}
.el-lc svg { width: 13px; height: 13px; display: block; }
.el-lc:hover { color: var(--mw-text, #1a1a1a); }
.el-lc.is-on { background: #eceae3; color: var(--mw-text, #1a1a1a); }
.el-lc.is-on.fill svg { fill: currentColor; }
.el-lc-eye.is-on .el-eye circle { fill: currentColor; }
.el-lc:active { transform: scale(0.94); }

/* Infobulle stylée (maison) sur les pictos de liste : datée si l'action est faite.
   Positionnée SOUS le picto (les pictos sont en haut à droite de la carte). */
.el-list-chips [data-tip] { position: relative; }
.el-list-chips [data-tip]:hover::after,
.el-list-chips [data-tip]:focus-visible::after {
	content: attr(data-tip); position: absolute; top: calc(100% + 8px); right: 0;
	background: #26241f; color: #f6f2ea; font-size: 11px; line-height: 1.25; font-weight: 500; font-style: normal;
	white-space: nowrap; padding: 5px 9px; border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.18);
	z-index: 30; pointer-events: none;
}
.el-list-chips [data-tip]:hover::before,
.el-list-chips [data-tip]:focus-visible::before {
	content: ""; position: absolute; top: calc(100% + 3px); right: 9px; border: 5px solid transparent;
	border-bottom-color: #26241f; z-index: 30; pointer-events: none;
}

/* ==========================================================================
   PHASE 4 — Modale d'inscription (invité) : split formulaire + avantages.
   Réutilise le rendu .el-auth (el_render_auth) dans une grande pop-up.
   ========================================================================== */
.el-authmodal-ov { position: fixed; inset: 0; background: rgba(26,26,26,.42); display: none; align-items: center; justify-content: center; z-index: 100001; padding: 24px; overflow: auto; }
.el-authmodal-ov.open { display: flex; }
.el-authmodal { width: 100%; max-width: 880px; position: relative; }
.el-authmodal .el-auth { margin: 0; }
.el-authmodal-x {
	position: absolute; top: 12px; right: 14px; z-index: 3; width: 32px; height: 32px; border: 0;
	background: rgba(255,255,255,.85); border-radius: 50%; font-size: 20px; line-height: 1; color: #555; cursor: pointer;
	box-shadow: 0 2px 8px -2px rgba(0,0,0,.3);
}
.el-authmodal-x:hover { background: #fff; color: #1a1a1a; }

/* ==========================================================================
   Split connexion/inscription (page Mon Espace déconnectée + modale invité)
   → NOIR & BLANC : le panneau avantages et les boutons étaient en bleu (--el-accent).
   ========================================================================== */
.el-auth { --el-accent: #1a1a1a; --el-accent-dark: #000000; --el-accent-soft: var(--mw-bg-soft, #f6f4ec); }
.el-auth .el-tab.is-on { color: #1a1a1a; }
.el-auth .el-input:focus, .el-auth input:focus { border-color: #1a1a1a; }

/* Compte + liens auth : neutraliser le bleu résiduel (couleur de lien du thème) */
.el-me { --el-accent: #1a1a1a; --el-accent-dark: #000000; }
.el-me .el-btn { color: var(--mw-text, #1a1a1a) !important; }
.el-me .el-btn:hover { border-color: var(--mw-text, #1a1a1a) !important; color: var(--mw-text, #1a1a1a) !important; }
.el-auth-card a, .el-auth-card a:visited { color: var(--mw-text-muted, #666) !important; text-decoration: underline; }
.el-auth-card a:hover { color: var(--mw-text, #1a1a1a) !important; }

/* Compteurs par filtre « Mon suivi » (comme les compteurs de catégories) */
.el-suivi-pane .el-suivi-link .el-suivi-lbl { flex: 1; }
.el-suivi-c {
	margin-left: auto; font-size: 10px; padding: 0 7px; border-radius: 100px;
	background: var(--mw-border-soft, #f0eee7); color: var(--mw-text-faint, #9a968c);
	font-variant-numeric: tabular-nums;
}
.el-suivi-link.is-on .el-suivi-c { background: #e2ded3; color: var(--mw-text, #1a1a1a); }
/* variante barre horizontale : compteur collé au libellé */
.el-suivi-bar .el-suivi-c { margin-left: 4px; }

/* État vide (filtre « Mon suivi » ou catégorie sans article) — zone principale
   propre, grille header/sidepane/main préservée. */
html .mw-archive-list.mw-archive-empty {
	display: flex !important; align-items: center; justify-content: center;
	min-height: 280px; grid-template-columns: none !important; margin: 0 !important;
}
.mw-archive-empty .el-empty { text-align: center; }
.el-empty-t { font-family: var(--mw-serif, Georgia, 'Times New Roman', serif); font-size: 20px; font-weight: 500; color: var(--mw-text, #1a1a1a); margin: 0 0 6px; }
.el-empty-s { font-size: 14px; color: var(--mw-text-muted, #666); margin: 0; }

/* « Tous » = item autonome au-dessus du bloc « Mon suivi de lecture ».
   Le trait séparateur est en ::after (hors du fond gris) pour que le contenu
   reste centré dans la surbrillance. */
.el-suivi-pane .el-suivi-all { position: relative; margin-bottom: 13px; }
.el-suivi-pane .el-suivi-all::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 1px; background: var(--mw-border-soft, #f0eee7); }

/* Avis segmenté (J'aime | J'aime pas) dans les pictos de liste */
/* overflow visible (au lieu de hidden) pour laisser sortir l'infobulle ; les coins
   arrondis sont reportés sur les deux boutons enfants. */
.el-lc-seg { display: inline-flex; box-sizing: border-box; height: 24px; border: 1px solid var(--el-meta-bd, #a8a294); border-radius: 6px; overflow: visible; flex: none; }
.el-lc-seg .el-lc-h:first-child { border-radius: 5px 0 0 5px; }
.el-lc-seg .el-lc-h:last-child { border-radius: 0 5px 5px 0; }
.el-lc-h { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 22px; height: 100%; padding: 0; border: 0; background: #fff; color: var(--mw-text-faint, #9a968c); cursor: pointer; }
.el-lc-h svg { width: 13px; height: 13px; display: block; }
.el-lc-h + .el-lc-h { border-left: 1px solid var(--el-meta-bd, #a8a294); }
.el-lc-h:hover { color: var(--mw-text, #1a1a1a); }
.el-lc-h.is-on { background: #eceae3; color: var(--mw-text, #1a1a1a); }
.el-lc-h.is-on svg { fill: currentColor; }
.el-lc-h:active { transform: scale(0.94); }

/* ==========================================================================
   « Trier » déplacé dans la barre d'outils de l'en-tête (menu déroulant),
   à côté du toggle vue. Libère la sidepane → « Catégories » remonte.
   ========================================================================== */
.el-arch-right { display: inline-flex; align-items: center; gap: 10px; }
.el-sortdrop { position: relative; }
.el-sortdrop-btn {
	display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12.5px; line-height: 1;
	color: var(--mw-text-muted, #666); background: #fff; border: 1px solid var(--mw-border-strong, #d8d4c8);
	border-radius: 8px; padding: 6px 11px; cursor: pointer; white-space: nowrap;
}
.el-sortdrop-btn b { font-weight: 600; color: var(--mw-text, #1a1a1a); }
.el-sortdrop-btn svg { color: var(--mw-text-faint, #9a968c); display: block; }
.el-sortdrop-btn:hover { border-color: var(--mw-text, #1a1a1a); }
.el-sortdrop-menu {
	position: absolute; top: calc(100% + 6px); right: 0; min-width: 176px;
	background: #fff; border: 1px solid var(--mw-border, #e8e6df); border-radius: 10px;
	box-shadow: 0 14px 36px -14px rgba(0,0,0,.24); padding: 6px; z-index: 60;
}
.el-sortdrop-menu[hidden] { display: none; }
.el-sortdrop-menu a {
	display: block; padding: 7px 10px; font-size: 13px; color: var(--mw-text-muted, #666) !important;
	text-decoration: none !important; border-radius: 6px;
}
.el-sortdrop-menu a:hover { background: var(--mw-bg-soft, #f6f4ec); color: var(--mw-text, #1a1a1a) !important; }
.el-sortdrop-menu a.is-on { background: #eceae3; color: var(--mw-text, #1a1a1a) !important; font-weight: 600; }

/* En-tête liste : compteur « N articles » + dropdown « Trier » + toggle vue
   alignés sur une SEULE ligne (le thème applique un padding-bottom asymétrique
   qui les décalait). */
html body.archive .mw-archive-header,
html body.blog .mw-archive-header,
html body.search .mw-archive-header { align-items: center !important; padding-bottom: 16px !important; }
html body.archive .mw-archive-header > *,
html body.blog .mw-archive-header > *,
html body.search .mw-archive-header > * { padding-bottom: 0 !important; }
html .mw-archive-header .el-arch-right { display: inline-flex !important; align-items: center !important; gap: 10px !important; }
html .mw-archive-header .el-arch-right > * { margin: 0 !important; align-self: center !important; }

/* ==========================================================================
   Anti-décalage au chargement (CLS) : l'en-tête de liste est mis dans sa
   forme FINALE dès le 1er paint (compteur à gauche, fil d'Ariane masqué,
   colonne droite « tri + vue » réservée) — au lieu d'être repositionné par JS
   après coup. Le boost :not() bat la spécificité des règles du thème.
   ========================================================================== */
html body.archive .mw-archive-header,
html body.blog .mw-archive-header,
html body.search .mw-archive-header {
	grid-template-columns: 1fr auto auto !important;
	grid-template-areas: "title count toggle" !important;
	column-gap: 16px !important;
	align-items: center !important;
	text-align: left !important;
	padding-bottom: 16px !important;
}
html body.archive .mw-archive-header > .mw-breadcrumbs,
html body.blog .mw-archive-header > .mw-breadcrumbs,
html body.search .mw-archive-header > .mw-breadcrumbs { display: none !important; }
/* Titre de page « Articles » (ex-eyebrow) : à GAUCHE, grand mais mesuré. */
html body.archive .mw-archive-header > .mw-page-eyebrow,
html body.blog .mw-archive-header > .mw-page-eyebrow,
html body.search .mw-archive-header > .mw-page-eyebrow {
	grid-area: title !important; justify-self: start !important;
	margin: 0 !important; padding: 0 !important;
	font-family: var(--mw-serif, Georgia, 'Times New Roman', serif) !important;
	font-size: 1.8rem !important; line-height: 1.04 !important; font-weight: 600 !important;
	letter-spacing: 0 !important; text-transform: none !important;
	color: var(--mw-text, #1a1a1a) !important;
}
/* On révèle le titre (masqué par le custom_css en BDD) sur TOUTES les listes :
   page Articles (blog), archives catégorie/étiquette (archive), recherche (search).
   Spécificité « html body.xxx … » supérieure à la règle en base. */
html body.blog .mw-archive-header > .mw-page-eyebrow,
html body.archive .mw-archive-header > .mw-page-eyebrow,
html body.search .mw-archive-header > .mw-page-eyebrow { display: block !important; }
/* Compteur « N articles » : à DROITE, juste à gauche de la combo de tri. */
html body.archive .mw-archive-header > .mw-archive-count:not(.zz):not(.yy),
html body.blog .mw-archive-header > .mw-archive-count:not(.zz):not(.yy),
html body.search .mw-archive-header > .mw-archive-count:not(.zz):not(.yy) {
	grid-area: count !important; justify-self: end !important; text-align: right !important; margin: 0 !important; padding-bottom: 0 !important;
	font-size: 0.82rem; text-transform: none; letter-spacing: 0; color: var(--mw-text-soft, #888); white-space: nowrap;
}
html body.archive .mw-archive-header > .el-arch-right:not(.zz):not(.yy),
html body.blog .mw-archive-header > .el-arch-right:not(.zz):not(.yy),
html body.search .mw-archive-header > .el-arch-right:not(.zz):not(.yy) {
	grid-area: toggle !important; justify-self: end !important; display: inline-flex !important;
	align-items: center !important; gap: 10px !important; margin: 0 !important; padding-bottom: 0 !important;
}
/* Le thème pose un margin-top asymétrique sur .archive-view-toggle (jadis enfant
   direct de la grille) : il pousse le toggle SOUS le tri. On l'annule ici avec la
   même spécificité boostée pour recentrer les deux enfants de .el-arch-right. */
html body.archive .mw-archive-header .el-arch-right .el-sortdrop:not(.zz):not(.yy),
html body.blog .mw-archive-header .el-arch-right .el-sortdrop:not(.zz):not(.yy),
html body.search .mw-archive-header .el-arch-right .el-sortdrop:not(.zz):not(.yy),
html body.archive .mw-archive-header .el-arch-right .archive-view-toggle:not(.zz):not(.yy),
html body.blog .mw-archive-header .el-arch-right .archive-view-toggle:not(.zz):not(.yy),
html body.search .mw-archive-header .el-arch-right .archive-view-toggle:not(.zz):not(.yy) {
	margin: 0 !important; align-self: center !important; padding-top: 0 !important; padding-bottom: 0 !important;
}


/* ==========================================================================
   MOBILE (≤ 820 px) — BLOC STRICTEMENT ADDITIF
   --------------------------------------------------------------------------
   Rien ici ne modifie le desktop : au-dessus de 820 px le navigateur ignore
   tout ce bloc. Supprimer ce bloc = revenir exactement au rendu d'aujourd'hui.
   Les !important sont nécessaires : une media query n'ajoute AUCUNE spécificité,
   et le custom_css stocké en BDD est très spécifique (voir en-tête du fichier).

   Décisions (16/07/2026, après manipulation de proto-mobile.html) :
   · Article  = variante 2 « icônes seules » + option C « date au tap »
   · Liste    = variante 6 « accordéon natif fermé » + pictos en flux
   ========================================================================== */

/* La barre d'accordéon n'existe QUE en mobile. Défaut = masquée : aucune règle
   desktop n'est écrite pour elle, elle est simplement absente du rendu. */
.el-facc-cb,
.el-facc-bar { display: none; }

@media (max-width: 820px) {

	/* ---------- 1. LISTE : la grille cesse d'écraser la colonne ----------
	   Cause du bug : .mw-container reste en « 280px 896px » ; à 390 px la
	   sidepane garde ses 280 px fixes et la liste tombe à 46 px (mesuré).
	   On empile en flex-column.
	   ⚠️ L'ordre du DOM est header → liste → pagination → barre → aside : c'est la
	   grille (« header header » / « sidepane main ») qui remonte l'aside à gauche
	   sur desktop. Sans « order » explicite, la barre de filtres se retrouverait
	   SOUS la pagination. D'où le réordonnancement ci-dessous. */
	html body.archive .mw-container:not(.zz):not(.yy),
	html body.blog .mw-container:not(.zz):not(.yy),
	html body.search .mw-container:not(.zz):not(.yy) {
		display: flex !important;
		flex-direction: column !important;
	}
	html body.archive .mw-container > .mw-archive-header,
	html body.blog .mw-container > .mw-archive-header,
	html body.search .mw-container > .mw-archive-header { order: 1; }
	html body.archive .mw-container > .el-facc-bar,
	html body.blog .mw-container > .el-facc-bar,
	html body.search .mw-container > .el-facc-bar { order: 2; }
	html body.archive .mw-container > .archive-sidepane,
	html body.blog .mw-container > .archive-sidepane,
	html body.search .mw-container > .archive-sidepane { order: 3; }
	html body.archive .mw-container > .mw-archive-list,
	html body.blog .mw-container > .mw-archive-list,
	html body.search .mw-container > .mw-archive-list { order: 4; }
	html body.archive .mw-container > .mw-pagination,
	html body.blog .mw-container > .mw-pagination,
	html body.search .mw-container > .mw-pagination { order: 5; }

	/* ---------- 2. Accordéon des filtres (100 % CSS, zéro JS) ---------- */
	.el-facc-bar {
		display: flex !important; align-items: center; gap: 9px;
		width: 100%; box-sizing: border-box;
		margin: 0 0 12px; padding: 11px 13px; cursor: pointer;
		font-size: 13px; font-weight: 600; color: var(--mw-text, #1a1a1a);
		background: var(--mw-bg-card, #fff);
		border: 1px solid var(--el-meta-bd, #a8a294); border-radius: 9px;
		-webkit-tap-highlight-color: transparent;
	}
	.el-facc-bar svg { flex: none; color: var(--mw-text-faint, #9a968c); }
	.el-facc-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.el-facc-ch { margin-left: auto; color: var(--mw-text-faint, #9a968c); transition: transform .18s; }
	.el-facc-cb:checked ~ .el-facc-bar .el-facc-ch { transform: rotate(180deg); }
	.el-facc-bar:focus-within { outline: 2px solid var(--mw-text, #1a1a1a); outline-offset: 2px; }

	/* fermée par défaut ; ouverte quand la case est cochée */
	html body.archive .archive-sidepane:not(.zz):not(.yy),
	html body.blog .archive-sidepane:not(.zz):not(.yy),
	html body.search .archive-sidepane:not(.zz):not(.yy) {
		display: none !important;
		position: static !important;   /* plus de sticky en mobile */
		width: 100% !important;        /* alignée sur la barre et les cartes */
		box-sizing: border-box !important;
		margin: 0 0 14px !important;
	}
	html body.archive .el-facc-cb:checked ~ .archive-sidepane:not(.zz):not(.yy),
	html body.blog .el-facc-cb:checked ~ .archive-sidepane:not(.zz):not(.yy),
	html body.search .el-facc-cb:checked ~ .archive-sidepane:not(.zz):not(.yy) {
		display: block !important;
	}

	/* ---------- 3. Pictos de liste : en flux sous l'extrait ----------
	   Ils étaient en position absolue en haut à droite → ils passaient
	   par-dessus les titres en petit écran (mesuré). */
	html body[data-archive-view="list"] .el-list-chips:not(.zz):not(.yy) {
		position: static !important;
		display: flex !important;
		margin-top: 11px !important;
	}
	/* Le titre réservait 158 px à droite pour ces pictos quand ils étaient en
	   absolu (règle du style de liste n°1). En flux, cette réserve étranglait le
	   titre sur 5 lignes (mesuré) → on lui rend toute la largeur. */
	html body[data-archive-view="list"].archive .mw-archive-item h3:not(.zz):not(.yy),
	html body[data-archive-view="list"].blog .mw-archive-item h3:not(.zz):not(.yy),
	html body[data-archive-view="list"].search .mw-archive-item h3:not(.zz):not(.yy) {
		padding-right: 0 !important;
	}

	/* ---------- 4a. ARTICLE : contenu PLEINE LARGEUR ----------
	   Le CSS additionnel (BDD) force « .single .mw-content-layout : 220px 880px
	   220px » jusqu'à 1024px SANS le replier en dessous → sur mobile l'article
	   reste coincé dans une colonne de ~220px (mesuré : 71 % de l'écran).
	   Le thème, lui, replie bien en 1fr à ≤1024px, mais la règle .single (BDD)
	   plus spécifique le bat. On repasse donc en UNE colonne pleine largeur.
	   (le sommaire aside.mw-toc-sidebar est déjà masqué en mobile par le thème) */
	html body.single .mw-content-layout:not(.zz):not(.yy),
	html body.mw-singular .mw-content-layout:not(.zz):not(.yy) {
		display: block !important;
		grid-template-columns: 1fr !important;
		max-width: 100% !important;
	}

	/* ---------- 4b. ARTICLE : icônes seules, dates au tap ----------
	   Variante 2 + option C : on retire les libellés ET les légendes datées.
	   Retirer la date du flux supprime PAR CONSTRUCTION le décalage horizontal
	   de 13 px mesuré sur le prototype (la colonne ne peut plus s'élargir). */
	html body.single .mw-page-header .mw-page-meta .el-tools:not(.zz):not(.yy) {
		margin-left: 0 !important;
		width: 100% !important;
		gap: 7px !important;
		flex-wrap: wrap !important;
	}
	html body.single .mw-page-meta .el-act-l:not(.zz):not(.yy),
	html body.single .mw-page-meta .el-seg-h span:not(.zz):not(.yy) { display: none !important; }
	html body.single .mw-page-meta .el-act-d:not(.zz):not(.yy) { display: none !important; }
	html body.single .mw-page-meta .el-act:not(.zz):not(.yy),
	html body.single .mw-page-meta .el-seg-h:not(.zz):not(.yy) { padding: 7px !important; }

	/* bulle datée au tap (:hover est « collant » au toucher) */
	.mw-page-meta [data-tip]:not([data-tip=""]):hover::after,
	.mw-page-meta [data-tip]:not([data-tip=""]):focus-visible::after {
		content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%;
		transform: translateX(-50%);
		background: #26241f; color: #f6f2ea; font-size: 11px; line-height: 1.25;
		font-weight: 500; font-style: normal; white-space: nowrap;
		padding: 5px 9px; border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.18);
		z-index: 30; pointer-events: none;
	}
	.mw-page-meta [data-tip]:not([data-tip=""]):hover::before,
	.mw-page-meta [data-tip]:not([data-tip=""]):focus-visible::before {
		content: ""; position: absolute; bottom: calc(100% + 3px); left: 50%;
		transform: translateX(-50%); border: 5px solid transparent;
		border-top-color: #26241f; z-index: 30; pointer-events: none;
	}
	.mw-page-meta .el-act,
	.mw-page-meta .el-seg { position: relative; }

	/* ---------- 5. Modale d'inscription (invité) : maquette « A9 » ----------
	   Panneau sombre EN HAUT (order:1), formulaire en dessous, empilés. Le panneau
	   est rendu COMPACT pour limiter le défilement (foot masqué, marges réduites).
	   align-items:flex-start + overflow:auto (hérité) = filet si le clavier réduit
	   la hauteur : ça défile proprement au lieu de couper. */
	.el-authmodal-ov { align-items: flex-start !important; padding: 14px 12px !important; }
	.el-authmodal .el-auth-split { grid-template-columns: 1fr !important; }
	.el-authmodal .el-auth-card { padding: 22px 20px !important; }

	/* Panneau « avantages » compact sur mobile (inline + modale) */
	.el-auth-aside { padding: 22px 22px 18px; align-items: flex-start; }
	.el-aside-title { font-size: 21px; margin-bottom: 8px; }
	.el-aside-lead { font-size: 13px; margin-bottom: 16px; }
	.el-benefits { gap: 12px; margin-bottom: 2px; }
	.el-benefits span { font-size: 12px; line-height: 1.4; }
	.el-bic { width: 30px; height: 30px; font-size: 15px; }
	.el-aside-foot { display: none; }
}

/* ============================================================
   Partage d'article — bouton + menu (déroulant desktop / feuille mobile)
============================================================ */
.el-share-w { position: relative; }
.el-share-b { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 1px solid currentColor; border-radius: 5px; font-size: 11px; font-weight: 700; flex: none; line-height: 1; }
.el-share-menu { position: absolute; top: calc(100% + 8px); left: 0; z-index: 200; width: 232px; background: var(--el-card, #fff); border: 1px solid var(--mw-border, #e8e6df); border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.15); overflow: hidden; }
.el-share-menu[hidden] { display: none; }
.el-share-i { display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 15px; font-size: 13.5px; font-family: inherit; color: var(--mw-text, #1a1a1a); text-decoration: none; background: none; border: 0; border-top: 1px solid var(--mw-border-soft, #f0eee7); cursor: pointer; text-align: left; }
.el-share-i:first-of-type { border-top: 0; }
.el-share-i:hover, .el-share-i:focus { background: var(--mw-bg-soft, #f6f4ec); color: var(--mw-text, #1a1a1a); }
.el-share-i svg { flex: none; }
.el-share-title, .el-share-cancel { display: none; }
.el-share-signal { display: none; }             /* desktop = pas de Signal (proposition 1) */
.el-share.is-open, .el-share[aria-expanded="true"] { background: var(--mw-text, #1a1a1a); color: #fff; border-color: var(--mw-text, #1a1a1a); }
.el-share-backdrop { position: fixed; inset: 0; background: rgba(20,20,20,.42); z-index: 199; }
.el-share-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); background: var(--mw-text, #1a1a1a); color: #fff; padding: 10px 18px; border-radius: 100px; font-size: 13.5px; z-index: 200001; box-shadow: 0 8px 24px rgba(0,0,0,.25); }

/* Mobile : feuille du bas (proposition 3), Signal visible */
@media (max-width: 720px) {
	.el-share-menu { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; border-radius: 18px 18px 0 0; padding: 8px 8px 14px; box-shadow: 0 -10px 34px rgba(0,0,0,.22); }
	.el-share-title { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--mw-text-faint, #aaa); font-weight: 700; padding: 14px 16px 8px; }
	.el-share-signal { display: flex; }
	.el-share-i { padding: 14px 16px; font-size: 15px; }
	.el-share-cancel { display: block; text-align: center; font-weight: 600; color: var(--mw-text-muted, #666); padding: 15px; border-top: 1px solid var(--mw-border, #e8e6df); margin-top: 4px; background: none; border-left: 0; border-right: 0; border-bottom: 0; width: 100%; cursor: pointer; font-family: inherit; }
}