/* Page publique des communiqués CERT (module cert-news).
   Refonte UX inspirée d'un fil Twitter : cartes individuelles compactes
   (bordure, coins arrondis, légère élévation au survol - voir plus bas),
   filtres par clic sur badge (façon tag) plutôt que des menus déroulants,
   mise à jour dynamique annoncée par une bannière discrète plutôt qu'une
   insertion silencieuse. Palette : vert DCOD (#88cc00/#4e7500) comme seul
   accent, bleu/rouge très désaturés uniquement pour distinguer Actu/Alerte
   au coup d'œil - jamais de couleur ajoutée ailleurs.

   Largeur de lecture volontairement plus étroite que le conteneur "pleine
   largeur" du thème Authentic (voir --dcod-cert-max-width ci-dessous) :
   une colonne de texte/cartes qui s'étire sur toute la largeur d'un grand
   écran devient inconfortable à lire (lignes trop longues) - même logique
   qu'un article de blog, pas une grille de cartes qui profiterait de la
   largeur.

   Mode sombre calé sur html[data-scheme="dark"] (attribut pose par le theme
   Authentic, cf inc/dark-mode.php), PAS sur @media (prefers-color-scheme) :
   le mode sombre du theme est desactive par defaut (color_enable_dark_mode
   = false) et peut rester fixe en clair meme si le systeme du visiteur est
   en sombre. Reagir a la preference OS brute faisait alors passer nos
   couleurs de texte en sombre pendant que le fond de page restait clair
   (herite, jamais repeint par ce composant hors survol/frais) - texte
   quasi blanc sur fond blanc. Suivre l'attribut du theme garantit que nos
   variables ne basculent que lorsque le fond autour de nous bascule
   vraiment. */

.dcod-sec-cert-news {
	--dcod-cert-ink: #16181c;
	--dcod-cert-ink-muted: #57606a;
	--dcod-cert-ink-faint: #8a938c;
	--dcod-cert-surface: #ffffff;
	--dcod-cert-ground: #f6f8f5;
	--dcod-cert-border: #e3e6df;
	--dcod-cert-border-strong: #cdd2c8;
	--dcod-cert-accent: #4e7500;
	--dcod-cert-accent-soft: #eef7d9;
	--dcod-cert-accent-dot: #6fa829;
	/* Vert fluo "geste de marque" du site (memes valeurs que les boutons/menus
	   du theme, contraste 9,5:1 deja valide) - reserve aux moments PONCTUELS
	   (survol, nouveaute, correspondance de recherche trouvee), jamais a un
	   etat qui reste affiche en continu (ex. filtre actif) :--dcod-cert-accent
	   ci-dessus reste le vert de base pour ca. Meme valeur en clair et en
	   sombre (un vert fluo se lit bien sur les deux fonds, pas besoin de
	   variante). */
	--dcod-cert-fluo: #88cc00;
	--dcod-cert-fluo-ink: #121212;
	--dcod-cert-alert: #a8371f;
	--dcod-cert-alert-soft: #fbeeec;
	--dcod-cert-news: #1d5fa8;
	--dcod-cert-news-soft: #eaf2fb;
	--dcod-cert-focus: #2271b1;

	width: 100%;
	max-width: 760px;
	margin: 0 auto;
	color: var(--dcod-cert-ink);
}

html[data-scheme="dark"] .dcod-sec-cert-news {
	--dcod-cert-ink: #e7e9e5;
	--dcod-cert-ink-muted: #9aa39a;
	--dcod-cert-ink-faint: #6b746a;
	--dcod-cert-surface: #1b1e1a;
	--dcod-cert-ground: #121412;
	--dcod-cert-border: #2a2f28;
	--dcod-cert-border-strong: #3a4137;
	--dcod-cert-accent: #8dc63f;
	--dcod-cert-accent-soft: #223018;
	--dcod-cert-accent-dot: #8dc63f;
	--dcod-cert-alert: #ff8171;
	--dcod-cert-alert-soft: #341c19;
	--dcod-cert-news: #7cb4f2;
	--dcod-cert-news-soft: #16233a;
	--dcod-cert-focus: #7cb4f2;
}

.dcod-sec-cert-news *,
.dcod-sec-cert-news *::before,
.dcod-sec-cert-news *::after {
	box-sizing: border-box;
}

.dcod-sec-cert-news button,
.dcod-sec-cert-news input {
	font-family: inherit;
}

.dcod-sec-cert-news button:focus-visible,
.dcod-sec-cert-news a:focus-visible,
.dcod-sec-cert-news input:focus-visible {
	outline: 2px solid var(--dcod-cert-focus);
	outline-offset: 2px;
}

/* Surbrillance de selection de texte forcee (fond clair + encre foncee),
   plutot que de laisser le theme hote l'imposer : constate en usage reel,
   un fond de selection sombre combine a notre texte deja gris (description)
   devenait illisible - meme categorie de bug que la couleur des titres
   deja visites, meme remede (definir explicitement plutot que d'heriter). */
.dcod-sec-cert-news ::selection {
	background: var(--dcod-cert-accent-soft);
	color: var(--dcod-cert-ink);
}

/* ── Disclaimer : une ligne repliee par defaut, jamais de pave colore ── */

.dcod-sec-cert-news__disclaimer {
	font-size: 12px;
	line-height: 1.5;
	color: var(--dcod-cert-ink-faint);
	margin: 0 0 14px;
}

.dcod-sec-cert-news__disclaimer-text {
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.dcod-sec-cert-news__disclaimer.is-expanded .dcod-sec-cert-news__disclaimer-text {
	-webkit-line-clamp: unset;
}

.dcod-sec-cert-news__disclaimer-toggle {
	border: none;
	background: none;
	padding: 0;
	color: var(--dcod-cert-ink-muted);
	font-size: 12px;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.dcod-sec-cert-news__disclaimer-toggle:hover {
	color: var(--dcod-cert-accent);
}

/* ── Toolbar : recherche + segmented control + lien Inoreader, 1 ligne ── */

.dcod-sec-cert-news__toolbar {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}

.dcod-sec-cert-news__search-wrap {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
}

/* Specificite renforcee (.dcod-sec-cert-news en prefixe + !important sur le
   positionnement) : un theme peut charger ses propres regles pour
   input[type=search] APRES ce fichier, avec une specificite egale ou
   superieure - sans ca, le padding-left ci-dessous peut perdre la cascade
   et la loupe se retrouve superposee au texte (constate en usage reel).
   Classe dediee (pas juste "svg") : le bouton d'effacement ci-dessous ajoute
   un second svg dans ce meme conteneur, qui ne doit pas heriter de ce
   positionnement a gauche. */
.dcod-sec-cert-news .dcod-sec-cert-news__search-icon {
	position: absolute !important;
	left: 12px !important;
	top: 50% !important;
	display: block;
	width: 14px !important;
	height: 14px !important;
	margin: 0 !important;
	transform: translateY(-50%);
	color: var(--dcod-cert-ink-faint);
	pointer-events: none;
}

.dcod-sec-cert-news .dcod-sec-cert-news__search-clear {
	position: absolute !important;
	right: 6px !important;
	top: 50% !important;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px !important;
	height: 22px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none;
	border-radius: 999px;
	background: none;
	color: var(--dcod-cert-ink-faint);
	cursor: pointer;
}

.dcod-sec-cert-news .dcod-sec-cert-news__search-clear:hover {
	background: var(--dcod-cert-ground);
	color: var(--dcod-cert-ink);
}

/* content:none neutralise une icone de recherche injectee par le theme via
   ::before/::after (certains themes, dont "Authentic", en ajoutent une sur
   input[type=search]) ; -webkit-appearance/background:none neutralise celle
   ajoutee nativement par le navigateur - les deux se superposaient sinon a
   notre propre loupe SVG. */
.dcod-sec-cert-news .dcod-sec-cert-news__search-wrap::before,
.dcod-sec-cert-news .dcod-sec-cert-news__search-wrap::after,
.dcod-sec-cert-news .dcod-sec-cert-news__search::before,
.dcod-sec-cert-news .dcod-sec-cert-news__search::after {
	content: none !important;
}

.dcod-sec-cert-news .dcod-sec-cert-news__search {
	width: 100%;
	padding: 8px 30px 8px 36px !important;
	border: 1px solid var(--dcod-cert-border);
	border-radius: 8px;
	background: var(--dcod-cert-surface) none;
	color: var(--dcod-cert-ink);
	font-size: 13.5px;
	line-height: 1.4;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color .12s ease, box-shadow .12s ease;
}

.dcod-sec-cert-news__search::-webkit-search-decoration,
.dcod-sec-cert-news__search::-webkit-search-cancel-button,
.dcod-sec-cert-news__search::-webkit-search-results-button,
.dcod-sec-cert-news__search::-webkit-search-results-decoration {
	-webkit-appearance: none;
}

.dcod-sec-cert-news__search::placeholder {
	color: var(--dcod-cert-ink-faint);
}

.dcod-sec-cert-news__search:focus {
	outline: none;
	border-color: var(--dcod-cert-accent);
	box-shadow: 0 0 0 3px var(--dcod-cert-accent-soft);
}

.dcod-sec-cert-news__segmented {
	display: inline-flex;
	border: 1px solid var(--dcod-cert-border);
	border-radius: 8px;
	padding: 2px;
	background: var(--dcod-cert-surface);
	flex: 0 0 auto;
}

.dcod-sec-cert-news__segmented-btn {
	border: none;
	background: none;
	color: var(--dcod-cert-ink-muted);
	font-size: 12.5px;
	font-weight: 600;
	padding: 5px 10px;
	border-radius: 6px;
	cursor: pointer;
	white-space: nowrap;
	transition: background .12s ease, color .12s ease;
}

.dcod-sec-cert-news__segmented-btn:hover {
	color: var(--dcod-cert-ink);
}

.dcod-sec-cert-news__segmented-btn[aria-pressed="true"] {
	background: var(--dcod-cert-accent-soft);
	color: var(--dcod-cert-accent);
}

/* Libelle + groupe : les 2 icones seules (📰/🔔) ne suffisent pas a en
   deviner le role (suivre le flux sur Inoreader, PAS filtrer la liste - le
   segmented control juste a cote utilise deja les memes emoji pour une
   action differente) - signale par un utilisateur en usage reel. Le titre
   HTML (survol) ne sert a rien sur mobile/tactile, d'ou ce libelle visible
   en permanence plutot qu'une info seulement accessible au survol. */
.dcod-sec-cert-news__inoreader-wrap {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
}

.dcod-sec-cert-news__inoreader-label {
	font-size: 12px;
	color: var(--dcod-cert-ink-faint);
	white-space: nowrap;
}

/* Groupe compact des 2 liens Inoreader (Actus/Alertes) - meme habillage que
   le segmented control (bordure partagee, separateur interne) plutot que 2
   boutons isoles, pour rester compact dans la toolbar. */
.dcod-sec-cert-news__inoreader-group {
	display: inline-flex;
	border: 1px solid var(--dcod-cert-border);
	border-radius: 8px;
	overflow: hidden;
	flex: 0 0 auto;
}

.dcod-sec-cert-news__inoreader-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	font-size: 14px;
	line-height: 1;
	background: var(--dcod-cert-surface);
	text-decoration: none;
	transition: background .12s ease;
}

.dcod-sec-cert-news__inoreader-btn + .dcod-sec-cert-news__inoreader-btn {
	border-left: 1px solid var(--dcod-cert-border);
}

.dcod-sec-cert-news__inoreader-btn:hover {
	background: var(--dcod-cert-accent-soft);
}

/* ── Chips de filtre actifs (source/type choisis en cliquant un badge) ── */

.dcod-sec-cert-news__active-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0 0 10px;
}

.dcod-sec-cert-news__chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: var(--dcod-cert-accent-soft);
	color: var(--dcod-cert-accent);
	border: none;
	border-radius: 999px;
	padding: 4px 6px 4px 10px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}

.dcod-sec-cert-news__chip svg {
	opacity: .7;
}

.dcod-sec-cert-news__chip:hover svg {
	opacity: 1;
}

.dcod-sec-cert-news__chip-clear {
	font-size: 12px;
	color: var(--dcod-cert-ink-faint);
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px 2px;
}

.dcod-sec-cert-news__chip-clear:hover {
	color: var(--dcod-cert-ink-muted);
	text-decoration: underline;
}

/* ── Banniere "nouveaux communiques" (sondage periodique, jamais d'insertion silencieuse) ── */

.dcod-sec-cert-news__new-banner-wrap {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .28s ease;
}

.dcod-sec-cert-news__new-banner-wrap.is-visible {
	grid-template-rows: 1fr;
}

.dcod-sec-cert-news__new-banner-inner {
	overflow: hidden;
}

.dcod-sec-cert-news__new-banner {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin-bottom: 10px;
	padding: 8px;
	border: 1px solid var(--dcod-cert-border);
	border-radius: 8px;
	background: var(--dcod-cert-surface);
	color: var(--dcod-cert-accent);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.dcod-sec-cert-news__new-banner:hover {
	background: var(--dcod-cert-fluo);
	border-color: var(--dcod-cert-fluo);
	color: var(--dcod-cert-fluo-ink);
}

/* Point fluo (au lieu de --dcod-cert-accent-dot) : un signal "il y a du
   nouveau" merite d'etre le plus vif de la page, justement parce qu'il ne
   s'affiche que quand il y a effectivement quelque chose a annoncer -
   jamais visible au repos. */
.dcod-sec-cert-news__new-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--dcod-cert-fluo);
}

@media (prefers-reduced-motion: no-preference) {
	.dcod-sec-cert-news__new-dot {
		animation: dcod-cert-pulse 1.6s ease-in-out infinite;
	}
}

@keyframes dcod-cert-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: .45; transform: scale(.75); }
}

.dcod-sec-cert-news__count {
	font-size: 12px;
	color: var(--dcod-cert-ink-faint);
	margin: 0 0 4px;
	font-variant-numeric: tabular-nums;
}

/* ── Liste : cartes individuelles (inspiration Twitter, pas un tableau dense) ──
   Chaque communique est une carte autonome (bordure, coins arrondis, legere
   elevation au survol) plutot qu'une ligne dans une liste a separateurs :
   plus de caractere, tout en restant aussi scannable qu'avant. Le liseré de
   couleur a gauche (rouge alerte / bleu actu, voir --item--alert/--news plus
   bas) permet de trier au coup d'oeil sans lire le badge. */

.dcod-sec-cert-news__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.dcod-sec-cert-news__loading,
.dcod-sec-cert-news__empty {
	color: var(--dcod-cert-ink-faint);
	text-align: center;
	padding: 32px 10px;
	font-size: 13.5px;
}

.dcod-sec-cert-news__item {
	position: relative;
	padding: 13px 16px 13px 14px;
	border: 1px solid var(--dcod-cert-border);
	border-left: 4px solid var(--dcod-cert-border);
	border-radius: 10px;
	background: var(--dcod-cert-surface);
	transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
}

.dcod-sec-cert-news__item--alert {
	border-left-color: var(--dcod-cert-alert);
}

.dcod-sec-cert-news__item--news {
	border-left-color: var(--dcod-cert-news);
}

/* flex-wrap : un nom de source long (ex. "Canadian Centre for Cyber
   Security") ne doit jamais pousser la date hors ecran - sans ca, la ligne
   entiere (et avec elle toute la page) depassait la largeur du mobile,
   rendant impossible de tout voir sans defiler horizontalement (constate en
   usage reel). La date passe simplement sur une 2e ligne si necessaire. */
.dcod-sec-cert-news__item-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 6px;
	margin-bottom: 4px;
	font-size: 12px;
}

.dcod-sec-cert-news__pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	border: none;
	border-radius: 999px;
	padding: 2px 8px;
	font-size: 11.5px;
	font-weight: 700;
	cursor: pointer;
	line-height: 1.5;
	white-space: nowrap;
	position: relative;
	z-index: 1;
}

.dcod-sec-cert-news__pill--source {
	background: var(--dcod-cert-ground);
	color: var(--dcod-cert-ink-muted);
	border: 1px solid var(--dcod-cert-border);
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dcod-sec-cert-news__pill--source:hover {
	border-color: var(--dcod-cert-border-strong);
	color: var(--dcod-cert-ink);
}

.dcod-sec-cert-news__pill--source.is-active {
	background: var(--dcod-cert-accent-soft);
	color: var(--dcod-cert-accent);
	border-color: transparent;
}

.dcod-sec-cert-news__pill--kind-alert {
	background: var(--dcod-cert-alert-soft);
	color: var(--dcod-cert-alert);
}

.dcod-sec-cert-news__pill--kind-news {
	background: var(--dcod-cert-news-soft);
	color: var(--dcod-cert-news);
}

.dcod-sec-cert-news__pill--kind-alert.is-active,
.dcod-sec-cert-news__pill--kind-news.is-active {
	box-shadow: inset 0 0 0 1.5px currentColor;
}

.dcod-sec-cert-news__item-time {
	margin-left: auto;
	flex: 0 0 auto;
	color: var(--dcod-cert-ink-faint);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

.dcod-sec-cert-news__item-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	margin: 0 0 3px;
}

/* Couleur du titre forcee y compris a l'etat :visited (specificite renforcee
   + !important, meme principe que le correctif de la loupe de recherche) :
   le titre est un vrai <a href> - sans ce rappel explicite, un lien deja
   visite retombe sur la couleur "lien visite" grise et peu lisible du
   theme hote (constate en usage reel sur mobile, ou l'on clique beaucoup
   pour lire les articles). */
.dcod-sec-cert-news .dcod-sec-cert-news__item-title,
.dcod-sec-cert-news .dcod-sec-cert-news__item-title:visited {
	color: var(--dcod-cert-ink) !important;
}

.dcod-sec-cert-news .dcod-sec-cert-news__item:hover .dcod-sec-cert-news__item-title,
.dcod-sec-cert-news .dcod-sec-cert-news__item:hover .dcod-sec-cert-news__item-title:visited {
	color: var(--dcod-cert-accent) !important;
}

.dcod-sec-cert-news__item-desc {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 13px;
	line-height: 1.5;
	color: var(--dcod-cert-ink-muted);
	margin: 0;
	word-break: break-word;
}

/* Recherche active : la description stockee va jusqu'a 500 caracteres (voir
   dcod_sec_cert_truncate_description() cote PHP), largement au-dela des ~2
   lignes normalement affichees - une correspondance de recherche pouvait donc
   tomber dans la partie coupee, invisible pour l'utilisateur (signale en
   usage reel). Le titre est deja court en pratique, mais desactive aussi par
   coherence - le cout (une ligne de plus, rarement) est negligeable face au
   risque de cacher a nouveau une correspondance. */
.dcod-sec-cert-news__list.is-searching .dcod-sec-cert-news__item-title,
.dcod-sec-cert-news__list.is-searching .dcod-sec-cert-news__item-desc {
	display: block;
	-webkit-line-clamp: unset;
	overflow: visible;
}

/* Surligneur fluo (--dcod-cert-fluo, voir :root) plutot qu'un texte
   simplement colore : alignement demande sur le style reel des liens du
   site (fond vert vif + texte fonce au survol), plus dynamique qu'un texte
   colore plat. */
.dcod-sec-cert-news__mark {
	background: var(--dcod-cert-fluo);
	color: var(--dcod-cert-fluo-ink);
	font-weight: 700;
	border-radius: 3px;
	padding: 0 3px;
}

.dcod-sec-cert-news__item.is-fresh {
	background: var(--dcod-cert-accent-soft);
}

/* Place APRES .is-fresh (meme specificite : 2 classes) pour gagner la
   cascade sur un item a la fois "frais" et survole/tape - sinon le fond
   vert pale du surlignage "nouveau" persiste sous le titre qui passe en
   vert accent au survol, les deux verts se melangent et le titre devient
   peu lisible en mode clair (constate en usage reel). Le survol reprend
   ainsi la main sur le fond : coherent, l'interaction avec l'item prime sur
   l'indicateur "nouveau" une fois qu'on le regarde.
   Elevation (translateY + ombre) plutot qu'un simple changement de fond,
   maintenant que chaque item est une carte : lecture "carte qui se souleve"
   plus dynamique qu'un simple surlignage. border-top/right/bottom-color
   seulement (jamais le raccourci border-color) : le liseré de gauche
   (--item--alert/--news) ne doit jamais etre efface au survol. */
.dcod-sec-cert-news__item:hover {
	background: var(--dcod-cert-ground);
	cursor: pointer;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(15, 20, 12, .1);
	border-top-color: var(--dcod-cert-border-strong);
	border-right-color: var(--dcod-cert-border-strong);
	border-bottom-color: var(--dcod-cert-border-strong);
}

@media (prefers-reduced-motion: no-preference) {
	.dcod-sec-cert-news__item.is-entering {
		animation: dcod-cert-enter .5s ease both;
	}
	@keyframes dcod-cert-enter {
		from { opacity: 0; transform: translateY(-6px); }
		to { opacity: 1; transform: translateY(0); }
	}
	.dcod-sec-cert-news__item.is-fresh {
		transition: background 1.8s ease .3s;
	}
}

/* ── Pagination "charger plus" (jamais de scroll infini - voir cert-news.js) ── */

.dcod-sec-cert-news__load-more-wrap {
	margin-top: 14px;
	text-align: center;
}

/* Style repris a l'IDENTIQUE de .load-more.button-primary
   (authentic-child/style.css) - le bouton "charger plus" deja etabli
   ailleurs sur le site : fond blanc, bord et texte noirs au repos, valeurs
   en dur (pas les tokens --dcod-cert-*) precisement pour matcher ce
   reference EXACTEMENT, y compris en mode sombre - ce bouton du theme n'a
   lui-meme aucune variante sombre. */
.dcod-sec-cert-news__load-more {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background-color: #ffffff;
	color: #121212;
	border-width: 2px;
	border-style: solid;
	border-color: #121212;
	border-radius: 6px;
	padding: 13px 34px;
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: .85rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
	transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	-webkit-appearance: none;
	appearance: none;
}

/* Cause reelle (identifiee par reproduction automatisee - Playwright,
   inspection de document.styleSheets pour lister TOUTES les regles qui
   matchent reellement le bouton, cf session) du cadre noir qui disparaissait
   des le premier clic sur "Charger plus", jamais avant : cliquer le bouton
   lui donne le focus natif du navigateur, qui PERSISTE ensuite (rien d'autre
   ne prend le focus). Le theme porte une regle generique
   "button:focus { border-color: transparent }" (authentic/style.css, reset
   façon Bootstrap qui vise TOUS les <button> du site) dont la specificite
   (1 element + 1 pseudo-classe) est superieure a la regle de repos
   ci-dessus (1 classe seule) - elle gagnait donc des que le bouton etait
   focus, quelle que soit la maniere dont border-color y est declare
   (raccourci ou longhand, deja essaye sans effet). Cette regle dediee
   (1 classe + 1 pseudo-classe, superieure a la regle du theme) neutralise
   ce reset - placee AVANT :hover/:active plus bas expres, pour que ceux-ci
   continuent a gagner par ordre de declaration si le bouton est focus ET
   survole/actif en meme temps (specificite egale entre les trois). */
.dcod-sec-cert-news__load-more:focus {
	border-color: #121212;
}

.dcod-sec-cert-news__load-more::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);
	transition: left .5s ease;
	pointer-events: none;
}

/* Survol limite aux vrais pointeurs (souris) : au tactile, :hover reste
   "colle" sur le bouton apres un appui jusqu'au prochain element touche -
   meme precaution que le bouton de reference. */
@media (hover: hover) and (pointer: fine) {
	.dcod-sec-cert-news__load-more:hover {
		background-color: #88cc00;
		border-color: #88cc00;
		color: #121212;
		transform: translateY(-2px);
		box-shadow: 0 6px 16px rgba(136, 204, 0, .3);
	}
	.dcod-sec-cert-news__load-more:hover::before {
		left: 100%;
	}
}

.dcod-sec-cert-news__load-more:active {
	background-color: #88cc00;
	border-color: #88cc00;
	color: #121212;
	transform: translateY(0);
	box-shadow: 0 2px 6px rgba(136, 204, 0, .25);
}

/* Classe plutot que l'attribut natif "disabled" : basculer "disabled" sur un
   vrai <button> PENDANT son propre gestionnaire de clic est justement ce qui
   declenche le bug de rendu mobile decrit ci-dessus (le bouton reste
   cliquable en JS - voir la garde "loading" dans cert-news.js - seul l'etat
   visuel change ici). */
.dcod-sec-cert-news__load-more.is-loading {
	opacity: .6;
	cursor: default;
}

@media (prefers-reduced-motion: reduce) {
	.dcod-sec-cert-news__load-more {
		transition: none;
	}
	.dcod-sec-cert-news__load-more:hover {
		transform: none;
	}
	.dcod-sec-cert-news__load-more::before {
		display: none;
	}
}

@media (max-width: 480px) {
	.dcod-sec-cert-news__toolbar {
		flex-wrap: wrap;
	}
	.dcod-sec-cert-news__segmented {
		order: 1;
	}
	.dcod-sec-cert-news__search-wrap {
		order: 0;
		flex-basis: 100%;
	}
	.dcod-sec-cert-news__inoreader-wrap {
		order: 2;
		margin-left: auto;
	}
}

/* ── Onglets "Communiques" / "Sources" affiches/masques sur la MEME page
   (dcod_sec_cert_tabs_html() + initTabs() dans cert-news.js) - PAS
   dcod_sec_nav (includes/views.php), composant sans rapport (grille
   perimetre x module de securitytxt-map). Sobre : simple soulignement de
   l'onglet actif, coherent avec le reste du composant plutot qu'une barre
   sombre distincte. Boutons (<button>), pas des liens : reset des styles
   natifs du navigateur necessaire (border/background/font/cursor). ── */

.dcod-sec-cert-pubnav {
	display: flex;
	gap: 24px;
	margin: 0 0 16px;
	border-bottom: 1px solid var(--dcod-cert-border);
}

/* Sans emoji devant le libelle (retire : peu lisible/incoherent selon les
   plateformes, surtout a cote d'un texte court), la distinction entre les 2
   onglets repose entierement sur la typo et l'espacement - padding et
   taille de police augmentes en consequence (aussi une cible tactile plus
   confortable sur mobile), et l'ecart entre onglets elargi (gap ci-dessus)
   pour que "Communiqués" et "Sources CERT" ne se lisent jamais comme une
   seule phrase. */
.dcod-sec-cert-pubnav__tab {
	padding: 11px 2px;
	margin-bottom: -1px;
	border: none;
	border-bottom: 2px solid transparent;
	background: none;
	color: var(--dcod-cert-ink-muted);
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: color .12s ease, border-color .12s ease;
}

.dcod-sec-cert-pubnav__tab:hover {
	color: var(--dcod-cert-ink);
}

.dcod-sec-cert-pubnav__tab.is-active {
	color: var(--dcod-cert-ink);
	border-bottom-color: var(--dcod-cert-accent);
}

/* ── Panneau "Sources CERT" (dcod_sec_cert_sources_panel_html(),
   includes/public-sources.php) - reutilise .dcod-sec-cert-news comme portee
   des tokens de couleur (meme palette, meme gestion du mode sombre), cette
   section n'ajoute que ce qui est specifique au tableau. ── */

.dcod-sec-cert-sources__intro {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--dcod-cert-ink-muted);
	margin: 0 0 14px;
}

.dcod-sec-cert-sources__intro a {
	color: var(--dcod-cert-accent);
	font-weight: 600;
}

.dcod-sec-cert-sources__toolbar {
	margin-bottom: 8px;
}

.dcod-sec-cert-sources__count {
	font-size: 12px;
	color: var(--dcod-cert-ink-faint);
	margin: 0 0 10px;
	font-variant-numeric: tabular-nums;
}

/* overflow-x:auto sur son propre conteneur, jamais sur la page entiere : un
   nom de CERT long ou un ecran etroit ne doit faire defiler QUE le tableau. */
.dcod-sec-cert-sources__table-wrap {
	overflow-x: auto;
}

.dcod-sec-cert-sources__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13.5px;
}

.dcod-sec-cert-sources__table th,
.dcod-sec-cert-sources__table td {
	padding: 9px 10px;
	text-align: left;
	border-bottom: 1px solid var(--dcod-cert-border);
	white-space: nowrap;
}

.dcod-sec-cert-sources__table th {
	color: var(--dcod-cert-ink-faint);
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
}

.dcod-sec-cert-sources__table td:first-child {
	white-space: normal;
	min-width: 160px;
}

/* Colonne "Communiqués" (3e : CERT, Pays, Communiqués...) : nombre, centre
   comme une donnee chiffree plutot qu'aligne a gauche comme le texte. */
.dcod-sec-cert-sources__table th:nth-child(3),
.dcod-sec-cert-sources__table td:nth-child(3) {
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.dcod-sec-cert-sources__table tbody tr:hover {
	background: var(--dcod-cert-ground);
}

.dcod-sec-cert-sources__table a {
	color: var(--dcod-cert-ink);
	font-weight: 600;
	text-decoration: none;
}

.dcod-sec-cert-sources__table tbody tr:hover a {
	color: var(--dcod-cert-accent);
}

.dcod-sec-cert-sources__feed {
	display: inline-block;
	text-decoration: none;
	font-size: 14px;
}

.dcod-sec-cert-sources__feed--none {
	color: var(--dcod-cert-ink-faint);
}

.dcod-sec-cert-sources__empty {
	color: var(--dcod-cert-ink-faint);
	text-align: center;
	padding: 32px 10px;
	font-size: 13.5px;
}