/**
 * dh-Cubelist — Cards CTA
 * Charte Ardoise & cuivre.
 *
 * Principe de la refonte 1.7 : on sépare avec de l'ESPACE, pas avec des
 * filets. Les bandeaux pleine largeur bordés, le texte centré et le
 * bouton étiré bord à bord sont ce qui datait la card.
 *
 * Tailles en pixels absolus : la base typographique d'OceanWP est
 * souvent de 14 ou 15 px, ce qui faisait rétrécir tout l'ensemble.
 */

:root {
	--dhc-bg:        #FBFAF8;
	--dhc-surface:   #F1EDE5;
	--dhc-text:      #1C2B36;
	--dhc-muted:     #66757F;
	--dhc-accent:    #B5642F;
	--dhc-accent-dk: #99521F;
	--dhc-second:    #33566B;
	--dhc-line:      rgba(28, 43, 54, .10);
	--dhc-radius:    16px;
}

/* ---------------------------------------------------------------- Card */

.dhc-card {
	max-width: 620px;
	margin: 2.4rem auto;
	padding: 26px 28px 20px;
	background: var(--dhc-bg);
	border: 1px solid var(--dhc-line);
	border-radius: var(--dhc-radius);
	box-shadow: 0 1px 2px rgba(28, 43, 54, .04),
	            0 10px 30px -18px rgba(28, 43, 54, .35);
	color: var(--dhc-text);
	font-size: 16px;
	line-height: 1.5;
}

/* Neutralisation des marges héritées du thème : sans ça, OceanWP
   injecte ses marges de paragraphe et crée des trous. */
.dhc-card p,
.dhc-card span,
.dhc-card div,
.dhc-card a,
.dhc-card img {
	margin: 0;
	padding: 0;
	text-indent: 0;
}

/* ------------------------------------------------------------- En-tête */

.dhc-card__hd {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 16px !important;
}

/* Carré de marque : le logo est centré avec une gouttière interne.
   Sans ce padding, un logo au format large vient toucher la bordure
   et l'ensemble paraît mal calé. */
.dhc-card__logo {
	flex: none;
	width: 52px;
	height: 52px;
	border-radius: 13px;
	background: var(--dhc-surface);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 9px !important;
	box-sizing: border-box;
	overflow: hidden;
}

.dhc-card__logo img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
	border-radius: 0;
}

.dhc-card__eyebrow {
	font-size: 11.5px !important;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--dhc-muted);
	line-height: 1.35;
}

/* --------------------------------------------------------------- Corps */

.dhc-card__title {
	font-size: 22px !important;
	font-weight: 660;
	line-height: 1.25;
	letter-spacing: -.015em;
	color: var(--dhc-text);
	margin: 0 0 9px !important;
}

.dhc-card__byline {
	font-size: 15px !important;
	line-height: 1.6;
	color: var(--dhc-muted);
	margin: 0 0 20px !important;
}

/* ------------------------------------------------------------ Pastilles */

/* Deux pastilles est le format cible : elles se partagent la largeur
   à parts égales et restent lisibles. Une troisième les comprime à 33 %
   et casse l'équilibre — le champ existe encore, mais évite-le. */
.dhc-card__chips {
	display: flex;
	gap: 10px;
	margin: 0 0 22px !important;
}

.dhc-chip {
	display: block;
	flex: 1 1 0;
	min-width: 0;
	background: var(--dhc-surface);
	border-radius: 11px;
	padding: 11px 16px !important;
}

.dhc-chip__v {
	display: block;
	font-size: 16px !important;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.01em;
	color: var(--dhc-text);
}

.dhc-chip__l {
	display: block;
	margin-top: 2px !important;
	font-size: 11.5px !important;
	line-height: 1.3;
	color: var(--dhc-muted);
}

/* ------------------------------------------------------------- Action */

.dhc-card__act {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.dhc-btn {
	display: inline-block;
	background: var(--dhc-accent);
	color: #fff !important;
	font-size: 15px !important;
	font-weight: 600;
	line-height: 1.2;
	padding: 13px 24px !important;
	border-radius: 11px;
	text-decoration: none !important;
	border: 0;
	white-space: nowrap;
	transition: background .15s ease;
}

.dhc-btn:hover,
.dhc-btn:focus {
	background: var(--dhc-accent-dk);
	color: #fff !important;
}

.dhc-btn:focus-visible {
	outline: 3px solid var(--dhc-second);
	outline-offset: 3px;
}

.dhc-card__reass {
	font-size: 13px !important;
	line-height: 1.45;
	color: var(--dhc-muted);
	flex: 1;
	min-width: 140px;
}

/* --------------------------------------------------------------- Pied */

.dhc-card__ft {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 16px !important;
	padding-top: 13px !important;
	border-top: 1px solid var(--dhc-line);
	font-size: 11.5px !important;
	line-height: 1.4;
	color: var(--dhc-muted);
}

/* ------------------------------------------------------------- Compact */

.dhc-card--compact {
	max-width: 520px;
	padding: 22px 24px 18px;
}

.dhc-card--compact .dhc-card__title {
	font-size: 19px !important;
}

/* --------------------------------------------------------- Lien inline */

.dhc-inline-link {
	color: var(--dhc-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
	font-weight: 500;
}

.dhc-inline-link:hover {
	color: var(--dhc-accent-dk);
}

/* -------------------------------------------------------------- Sticky */

body.dhc-has-sticky {
	padding-bottom: 72px;
}

.dhc-sticky {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9990;
	background: rgba(251, 250, 248, .96);
	backdrop-filter: saturate(180%) blur(8px);
	border-top: 1px solid var(--dhc-line);
	box-shadow: 0 -6px 24px -14px rgba(28, 43, 54, .5);
	font-size: 16px;
}

.dhc-sticky[hidden] {
	display: none;
}

.dhc-sticky__inner {
	max-width: 900px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 18px;
}

.dhc-sticky__label {
	flex: 1;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--dhc-text);
	line-height: 1.3;
}

.dhc-btn--sm {
	padding: 10px 20px !important;
	font-size: 14px !important;
}

.dhc-sticky__close {
	background: none;
	border: 0;
	font-size: 22px;
	line-height: 1;
	color: var(--dhc-muted);
	cursor: pointer;
	padding: 4px 7px;
}

.dhc-sticky__close:hover {
	color: var(--dhc-text);
}

/* -------------------------------------------------------------- Mobile */

@media (max-width: 560px) {
	.dhc-card {
		padding: 22px 20px 18px;
		border-radius: 14px;
	}

	.dhc-card__title {
		font-size: 20px !important;
	}

	/* Deux pastilles côte à côte tiennent très bien jusqu'à 360 px.
	   En dessous, on empile pour ne pas casser les libellés. */
	.dhc-card__chips {
		gap: 8px;
	}

	.dhc-chip {
		text-align: left;
		padding: 10px 13px !important;
	}

	.dhc-btn {
		display: block;
		width: 100%;
		text-align: center;
		box-sizing: border-box;
	}

	.dhc-card__reass {
		flex: 1 1 100%;
		text-align: center;
	}

	.dhc-card__ft {
		justify-content: flex-start;
		gap: 4px;
	}

	.dhc-sticky__label {
		display: none;
	}

	.dhc-btn--sm {
		flex: 1;
		text-align: center;
	}
}

@media (max-width: 380px) {
	.dhc-card__chips {
		flex-direction: column;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dhc-btn {
		transition: none;
	}
}

/* --------------------------------------------------------------- Print */

@media print {
	.dhc-sticky {
		display: none !important;
	}

	.dhc-card {
		box-shadow: none;
	}

	.dhc-btn {
		background: none;
		color: #000 !important;
		border: 1px solid #000;
	}
}

/* =========================================================================
   CONTENU ÉDITORIAL DES CATÉGORIES (pages piliers)
   -------------------------------------------------------------------------
   Injecté HORS du conteneur de boucle : OceanWP positionne les cartes
   d'archive en absolu (masonry), tout ce qui est inséré dedans passe
   sous les cartes.
   ========================================================================= */

.dhc-term-wrap {
	clear: both;
	float: none;
	display: block;
	width: 100%;
	position: relative;
	z-index: 2;
	box-sizing: border-box;
}

/* Un modèle Elementor gère sa propre largeur et ses propres marges :
   le wrapper ne lui impose rien. */
.dhc-term-wrap--tpl {
	max-width: none;
	padding: 0;
}

/* Contenu HTML : même largeur que les articles, mêmes gouttières. */
.dhc-term-content {
	max-width: 1150px;
	margin: 0 auto;
	padding-left: 30px;
	padding-right: 30px;
	box-sizing: border-box;
	font-size: 17px;
	line-height: 1.75;
	color: var(--dhc-text);
}

.dhc-term-content--top {
	padding-top: 1.6rem;
	padding-bottom: 2.8rem;
}

.dhc-term-content--bottom {
	padding-top: 2.8rem;
	padding-bottom: 3.2rem;
	margin-top: 2.6rem;
	border-top: 1px solid var(--dhc-line);
}

/* La prose reste sur une colonne lisible, les blocs occupent la largeur. */
.dhc-term-content > p,
.dhc-term-content > ul,
.dhc-term-content > ol,
.dhc-term-content > h2,
.dhc-term-content > h3 {
	max-width: 68ch;
}

.dhc-term-content p { margin: 0 0 1.15em; }

.dhc-term-content h2 {
	margin: 2.2em 0 .6em;
	font-size: 1.6rem;
	font-weight: 650;
	line-height: 1.25;
	color: var(--dhc-text);
}

.dhc-term-content h3 {
	margin: 1.8em 0 .45em;
	font-size: 1.15rem;
	font-weight: 650;
	color: var(--dhc-text);
}

.dhc-term-content > *:first-child { margin-top: 0; }

.dhc-term-content .dhc-card { max-width: 620px; margin-left: 0; }

.dhc-term-content table {
	width: 100%;
	max-width: none;
	border-collapse: collapse;
	font-size: 15px;
	margin: 1.8em 0;
}

.dhc-term-content th {
	background: var(--dhc-surface);
	text-align: left;
	font-weight: 650;
	color: var(--dhc-text);
}

.dhc-term-content th,
.dhc-term-content td {
	border: 1px solid var(--dhc-line);
	padding: .75em .95em;
	vertical-align: top;
}

/* ------------------------------------------------------------------------
   TITRE D'ARCHIVE
   OceanWP masque parfois l'en-tête de page sur les archives, d'où le H1
   invisible. On force son affichage et on l'aligne sur la même largeur.
   Si tu construis ton H1 dans un modèle Elementor, désactive plutôt
   l'en-tête de page dans Personnaliser > En-tête de page.
   ------------------------------------------------------------------------ */

.archive .page-header,
.category .page-header {
	display: block;
}

.category .page-header .page-header-title {
	max-width: 1150px;
	margin: 0 auto;
	padding: 0 30px;
	box-sizing: border-box;
	font-size: 2.2rem;
	font-weight: 660;
	line-height: 1.2;
	letter-spacing: -.02em;
	color: var(--dhc-text);
}

@media (max-width: 767px) {
	.dhc-term-content {
		font-size: 16.5px;
		padding-left: 20px;
		padding-right: 20px;
	}
	.dhc-term-content table { display: block; overflow-x: auto; }
	.dhc-term-content h2 { font-size: 1.4rem; }
	.category .page-header .page-header-title {
		font-size: 1.7rem;
		padding: 0 20px;
	}
}