:root {
	--certis-navy: #203a61;
	--certis-blue: #2f67a8;
	--certis-red: #d53a36;
	--certis-ink: #243247;
	--certis-muted: #667085;
	--certis-pale: #eef4fa;
	--certis-line: #dce4ed;
	--certis-white: #ffffff;
}

.certis-bib,
.certis-bib button,
.certis-bib input {
	box-sizing: border-box;
	color: var(--certis-ink);
	font-family: Roboto, Arial, sans-serif;
}

.certis-bib * {
	box-sizing: inherit;
}

.certis-bib-container {
	margin-inline: auto;
	width: min(100% - 40px, 940px);
}

.certis-bib-header {
	background: none !important;
	border-bottom: none !important;
	box-shadow: none !important;
	padding: 34px 0 38px;
	/* Le thème applique `header { position: sticky; height: 80px; overflow: visible;
	   background: white; border-bottom: 2px solid var(--border-color);
	   box-shadow: 0 2px 12px rgba(43,63,95,.08) }` à TOUTES les balises <header>.
	   On neutralise tout ça ici pour ce bloc de contenu, qui n'est pas le header
	   de navigation du site (d'où les valeurs explicites en !important ci-dessus
	   plutôt qu'une simple absence de déclaration — le box-shadow en particulier
	   créait la ligne floutée visible entre les deux premiers paragraphes). */
	position: static !important;
	height: auto !important;
	top: auto !important;
	z-index: auto !important;
	overflow: visible !important;
}

.certis-bib-kicker {
	color: var(--certis-muted);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	margin: 0 0 10px;
	text-transform: uppercase;
}

.certis-bib h1 {
	border-bottom: 3px solid var(--certis-red);
	color: var(--certis-navy) !important;
	font-size: clamp(30px, 4vw, 42px) !important;
	font-weight: 700 !important;
	line-height: 1.12;
	margin: 0;
	padding-bottom: 14px;
}

.certis-bib h2 {
	color: var(--certis-navy) !important;
	font-size: clamp(24px, 3vw, 28px) !important;
	font-weight: 700 !important;
	line-height: 1.2;
	margin: 42px 0 16px;
}

.certis-bib h3 {
	color: var(--certis-blue);
	font-size: 20px;
	line-height: 1.3;
	margin: 30px 0 12px;
}

.certis-bib p,
.certis-bib li,
.certis-bib td,
.certis-bib summary {
	font-size: 17px;
	line-height: 1.62;
}

.certis-bib a {
	color: var(--certis-blue);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.certis-bib a:hover,
.certis-bib a:focus-visible {
	color: var(--certis-red);
}

.certis-bib-breadcrumb {
	color: var(--certis-muted);
	font-size: 13px;
	margin: 0 0 12px;
	/* Le thème applique `nav { display:flex; height:80px; max-width:1280px;
	   margin:0 auto; padding:0 32px }` à toute balise <nav>. On neutralise
	   ça ici : ce fil d'Ariane n'est pas la navbar du site. */
	display: block;
	position: static;
	height: auto;
	max-width: none;
	padding: 0;
}

.certis-bib-breadcrumb span {
	padding-inline: 8px;
}

.certis-bib-introduction {
	font-size: 18px;
	font-weight: 700;
	margin-top: 22px;
}

.certis-bib-introduction p {
	font-weight: 700 !important;
}

.certis-bib-header .certis-bib-introduction p {
	font-weight: 700 !important;
	font-size: 18px !important;
}

.certis-bib-single .certis-bib-header {
	padding-bottom: 4px;
}

.certis-bib-content {
	padding-block: 4px 64px;
}

.certis-bib-answer {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 24px;
}

.certis-bib-answer p {
	font-size: inherit;
	font-weight: 700 !important;
	margin: 0 0 12px;
}

.certis-bib-content .certis-bib-answer p {
	font-weight: 700 !important;
	font-size: 18px !important;
}

.certis-bib-takeaway,
.certis-bib-cta {
	background: var(--certis-pale);
	border-left: 5px solid var(--certis-red);
	margin: 28px 0 34px;
	padding: 20px 24px;
}

.certis-bib-takeaway p,
.certis-bib-cta p {
	display: inline;
	margin: 0;
}

.certis-bib-body > :first-child {
	margin-top: 0;
}

.certis-bib-body table {
	border-collapse: collapse;
	margin: 22px 0 30px;
	width: 100%;
}

.certis-bib-body th {
	background: var(--certis-navy);
	border-bottom: 2px solid var(--certis-red);
	color: var(--certis-white);
	font-size: 15px;
	padding: 12px;
	text-align: center;
	vertical-align: middle;
}

.certis-bib-body td {
	border: 1px solid var(--certis-line);
	padding: 12px;
	vertical-align: middle;
}

.certis-bib-body tr:nth-child(even) td {
	background: #f7f9fc;
}

.certis-bib-image {
	margin: 30px 0 36px;
}

.certis-bib-image img {
	display: block;
	height: auto;
	max-width: 100%;
}

.certis-bib-image figcaption {
	color: var(--certis-muted);
	font-size: 14px;
	margin-top: 8px;
}

.certis-bib-related,
.certis-bib-faq,
.certis-bib-sources {
	border-top: 1px solid var(--certis-line);
	margin-top: 42px;
	padding-top: 2px;
}

.certis-bib-conclusion-finale {
	margin-top: 34px;
}

.certis-bib-related ul {
	padding-left: 22px;
}

.certis-bib-related li {
	margin-bottom: 10px;
}

.certis-bib-related span {
	font-weight: 700;
}

.certis-bib-faq details {
	border-bottom: 1px solid var(--certis-line);
	padding: 14px 0;
}

.certis-bib-faq summary {
	color: var(--certis-navy);
	cursor: pointer;
	font-weight: 700;
}

.certis-bib-sources,
.certis-bib-sources p,
.certis-bib-sources li {
	color: var(--certis-ink);
	font-size: 16px;
}

.certis-bib-cta {
	align-items: center;
	display: flex;
	gap: 24px;
	justify-content: space-between;
	margin-bottom: 0;
	margin-top: 46px;
}

.certis-bib-button,
.certis-bib-search button {
	background: var(--certis-red);
	border: 0;
	border-radius: 4px;
	color: #fff !important;
	display: inline-flex;
	font-weight: 700;
	justify-content: center;
	padding: 13px 18px;
	text-decoration: none;
}

.certis-bib-search {
	display: flex;
	margin-top: 24px;
	max-width: 680px;
}

.certis-bib-search input {
	border: 1px solid var(--certis-line);
	border-radius: 4px 0 0 4px;
	flex: 1;
	font-size: 16px;
	min-height: 48px;
	padding-inline: 14px;
}

.certis-bib-search button {
	border-radius: 0 4px 4px 0;
}

.certis-bib-index {
	padding-block: 46px 64px;
	width: min(100% - 40px, 1100px);
}

.certis-bib-grid {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.certis-bib-card {
	border: 1px solid var(--certis-line);
	border-top: 3px solid var(--certis-navy);
	color: var(--certis-navy) !important;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-height: 120px;
	padding: 20px;
	text-decoration: none;
}

.certis-bib-card span {
	color: var(--certis-muted);
	font-size: 14px;
}

@media (max-width: 820px) {
	.certis-bib-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.certis-bib-cta {
		align-items: flex-start;
		flex-direction: column;
	}

	.certis-bib-body {
		overflow-wrap: anywhere;
	}

	.certis-bib-body table {
		display: block;
		overflow-x: auto;
	}
}

@media (max-width: 560px) {
	.certis-bib-container,
	.certis-bib-index {
		width: min(100% - 28px, 940px);
	}

	.certis-bib-grid {
		grid-template-columns: 1fr;
	}

	.certis-bib-search {
		display: grid;
		gap: 8px;
	}

	.certis-bib-search input,
	.certis-bib-search button {
		border-radius: 4px;
	}

	.certis-bib p,
	.certis-bib li,
	.certis-bib td,
	.certis-bib summary {
		font-size: 16px;
	}
}

/* ============================================================
   CARTES D'ARTICLES — page de dossier (taxonomy-certis_thematique.php)
   Maquette dédiée : icône dans un badge circulaire, titre, code
   article sous forme de pastille. Namespace propre au plugin
   (certis-bib-*) pour ne pas toucher .biblio-article-item du thème,
   utilisé ailleurs (page-comprendre-expertise-batiment.php).
============================================================ */
.certis-bib-articles-grid {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(3, 1fr);
}

.certis-bib-article-card {
	background: var(--certis-white);
	border: 1px solid var(--certis-line);
	border-radius: 16px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 28px 24px;
	text-decoration: none;
	transition: border-color .2s, box-shadow .2s, transform .2s;
	justify-content: space-between;
}

.certis-bib-article-card:hover {
	border-color: var(--certis-red);
	box-shadow: 0 10px 24px rgba(32, 58, 97, .1);
	transform: translateY(-2px);
}

.certis-bib-article-card__top {
	align-items: flex-start;
	display: flex;
	gap: 18px;
}

.certis-bib-article-card__icon {
	align-items: center;
	background: rgba(213, 58, 54, .08);
	border-radius: 50%;
	display: flex;
	flex-shrink: 0;
	height: 56px;
	justify-content: center;
	width: 56px;
}

.certis-bib-article-card__icon svg {
	height: 26px;
	width: 26px;
}

.certis-bib-article-card__title {
	color: var(--certis-navy);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
	transition: color .2s;
}

.certis-bib-article-card:hover .certis-bib-article-card__title {
	color: var(--certis-red);
}

.certis-bib-article-card__bottom {
	align-items: center;
	display: flex;
	justify-content: space-between;
	padding-left: 74px;
}

.certis-bib-article-card__code {
	color: var(--certis-navy);
	font-size: 15px;
	font-weight: 700;
}

.certis-bib-article-card__arrow {
	align-items: center;
	border: 1.5px solid var(--certis-red);
	border-radius: 50%;
	display: flex;
	flex-shrink: 0;
	height: 40px;
	justify-content: center;
	margin-left: auto;
	transition: background-color .2s;
	width: 40px;
}

.certis-bib-article-card__arrow svg {
	height: 18px;
	width: 18px;
}

.certis-bib-article-card:hover .certis-bib-article-card__arrow {
	background: rgb(254, 239, 239);
}

@media (max-width: 900px) {
	.certis-bib-articles-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.certis-bib-articles-grid {
		grid-template-columns: 1fr;
	}
}

/* Le sélecteur global ".certis-bib a" (couleur bleue) est plus spécifique
   que ".btn-cta-red" du thème (home.css) et écrase son texte blanc.
   On force donc le blanc ici, dans le bloc CTA final repris de front-page.php. */
.section-cta-final a.btn-cta-red,
.section-cta-final a.btn-cta-red:hover,
.section-cta-final a.btn-cta-red:focus-visible {
	color: #fff;
}

/* ============================================================
   PROTECTION DU CONTENU — dissuasion du copier/coller
   Désactive la sélection de texte sur le titre, l'introduction et
   le corps de l'article (clic droit + Ctrl+C gérés en JS, voir
   assets/js/protect-content.js). Les liens restent cliquables :
   user-select n'affecte que la sélection, pas les clics.
============================================================ */

.certis-bib-header,
.certis-bib-content {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* On réautorise la sélection dans les champs/éléments interactifs
   qui pourraient se trouver dans la zone protégée (accessibilité) */
.certis-bib-header input,
.certis-bib-header textarea,
.certis-bib-content input,
.certis-bib-content textarea {
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	user-select: text;
}


/* ============================================================
   AUTRES THÉMATIQUES — archive taxonomie certis_thematique
   Liste simple (pas de cartes), sous le titre .biblio-article-group-title
   (styles du titre définis côté thème, dans biblio-theme-page.css)
============================================================ */
.section-biblio-articles.section-autres-thematiques {
	background: #fff !important;
}

.certis-bib-autres-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 4px;
}

.certis-bib-autres-liste li {
	border-bottom: 1px solid var(--certis-line);
}

.certis-bib-autres-liste li:first-child {
	border-top: 1px solid var(--certis-line);
}

.certis-bib-autres-liste a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 4px;
	color: var(--certis-navy);
	font-weight: 600;
	text-decoration: none;
}

.certis-bib-autres-liste a:hover {
	color: var(--certis-red);
}

.certis-bib-autres-liste a span {
	color: var(--certis-muted);
	font-size: 14px;
	font-weight: 400;
	white-space: nowrap;
}