/* Composants fondamentaux. */

/* ------------------------------------------------------------------ */
/* Boutons                                                             */
/* Principal (doré) = participation ; secondaire (bleu) ; tertiaire.   */
/* Les boutons de l'éditeur de blocs reprennent ce système : style     */
/* « Par défaut » = principal, « Secondaire », « Contour » = tertiaire.*/
/* ------------------------------------------------------------------ */

.btn,
.wp-block-button__link,
.wp-element-button {
	--btn-bg: var(--color-gold-500);
	--btn-fg: var(--color-blue-900);
	--btn-border: var(--color-gold-500);
	--btn-bg-hover: var(--color-gold-600);
	--btn-border-hover: var(--color-gold-600);
	--btn-fg-hover: var(--color-blue-900);

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: 2.75rem; /* 44px : zone tactile minimale */
	padding: var(--space-2) var(--space-5);
	border: 2px solid var(--btn-border);
	border-radius: var(--radius-sm);
	background: var(--btn-bg);
	color: var(--btn-fg);
	font-family: var(--font-sans);
	font-size: var(--text-ui);
	font-weight: var(--weight-semibold);
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition:
		background-color var(--duration-fast) ease,
		border-color var(--duration-fast) ease,
		color var(--duration-fast) ease,
		transform var(--duration-fast) ease;
}

.btn:hover,
.wp-block-button__link:hover,
.wp-element-button:hover {
	border-color: var(--btn-border-hover);
	background: var(--btn-bg-hover);
	color: var(--btn-fg-hover);
	text-decoration: none;
}

.btn:active,
.wp-block-button__link:active {
	transform: translateY(1px);
}

.btn:focus-visible,
.wp-block-button__link:focus-visible {
	outline: var(--focus-ring);
	outline-offset: 3px;
	border-radius: var(--radius-sm);
}

.btn--secondary,
.is-style-secondary .wp-block-button__link {
	--btn-bg: var(--color-blue-900);
	--btn-fg: var(--color-white);
	--btn-border: var(--color-blue-900);
	--btn-bg-hover: var(--color-blue-700);
	--btn-border-hover: var(--color-blue-700);
	--btn-fg-hover: var(--color-white);
}

.btn--tertiary,
.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline > .wp-block-button__link {
	--btn-bg: transparent;
	--btn-fg: var(--color-blue-800);
	--btn-border: var(--color-blue-800);
	--btn-bg-hover: var(--color-blue-800);
	--btn-border-hover: var(--color-blue-800);
	--btn-fg-hover: var(--color-white);
}

/* Bouton contour sur fond sombre */
.btn--on-dark {
	--btn-bg: transparent;
	--btn-fg: var(--color-white);
	--btn-border: rgb(250 248 242 / 0.6);
	--btn-bg-hover: var(--color-white);
	--btn-border-hover: var(--color-white);
	--btn-fg-hover: var(--color-blue-900);
}

.btn--sm {
	min-height: 2.5rem;
	padding: var(--space-1) var(--space-4);
	font-size: var(--text-small);
}

.btn--block {
	width: 100%;
}

.btn:disabled,
.btn[aria-disabled="true"],
.btn.is-disabled {
	--btn-bg: var(--color-gray-200);
	--btn-fg: var(--color-gray-500);
	--btn-border: var(--color-gray-200);
	--btn-bg-hover: var(--color-gray-200);
	--btn-border-hover: var(--color-gray-200);
	--btn-fg-hover: var(--color-gray-500);

	cursor: not-allowed;
	transform: none;
}

.btn__icon {
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
}

/* Sur fond bleu profond, le focus passe au doré. */
:is(.section--dark, .site-footer, .cta-block) :focus-visible {
	outline-color: var(--color-focus-on-dark);
}

/* Lien d'action (flèche) */

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-weight: var(--weight-semibold);
	text-decoration: none;
}

.link-arrow::after {
	content: "";
	width: 1rem;
	height: 1rem;
	background: currentColor;
	-webkit-mask: var(--icon-arrow) center / contain no-repeat;
	mask: var(--icon-arrow) center / contain no-repeat;
	transition: transform var(--duration-base) var(--ease-out);
}

.link-arrow:hover {
	text-decoration: underline;
}

.link-arrow:hover::after {
	transform: translateX(3px);
}

:root {
	--icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	--icon-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M5 20h14'/%3E%3C/svg%3E");
	--icon-file: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E");
	--icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
	--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	--icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.01'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ */
/* Badges et surtitre                                                  */
/* ------------------------------------------------------------------ */

.badge {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	min-height: 1.625rem;
	padding: 0.125rem 0.625rem;
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	background: var(--color-gray-100);
	color: var(--color-gray-700);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	line-height: 1.3;
	letter-spacing: 0.01em;
	text-decoration: none;
	white-space: nowrap;
}

a.badge:hover {
	border-color: var(--color-border-strong);
	color: var(--color-blue-900);
}

/* Pastille : la forme double l'information portée par la couleur. */
.badge--dot::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: currentColor;
}

.badge--blue {
	border-color: var(--color-border);
	background: var(--color-ivory-100);
	color: var(--color-blue-800);
}

.badge--gold {
	background: var(--color-gold-100);
	color: var(--color-blue-900);
}

.badge--outline {
	border-color: var(--color-border-strong);
	background: transparent;
	color: var(--color-gray-700);
}

.badge--alert {
	border-color: currentColor;
	background: var(--color-white);
	color: var(--color-danger);
}

/* Statuts de consultation */
.badge--status-upcoming {
	border-color: var(--color-border);
	background: var(--color-ivory-100);
	color: var(--color-blue-800);
}

.badge--status-open {
	background: var(--color-gold-100);
	color: var(--color-blue-900);
}

.badge--status-open::before {
	background: var(--color-gold-600);
	box-shadow: 0 0 0 2px var(--color-white);
}

.badge--status-closed {
	background: var(--color-gray-100);
	color: var(--color-gray-700);
}

.badge--status-archived {
	border-color: var(--color-border-strong);
	background: transparent;
	color: var(--color-gray-700);
}

/* Surtitre : à réserver aux rubriques ; ne pas le poser par défaut au-dessus de chaque titre. */
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	color: var(--color-text-muted);
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	font-weight: var(--weight-semibold);
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-transform: uppercase;
}

.section--dark .eyebrow,
.cta-block .eyebrow {
	color: var(--color-gold-100);
}

/* ------------------------------------------------------------------ */
/* Métadonnées (date, catégorie, statut)                               */
/* ------------------------------------------------------------------ */

.meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-3);
	margin: 0;
	padding: 0;
	color: var(--color-text-muted);
	font-size: var(--text-small);
	line-height: 1.4;
	list-style: none;
}

.meta__item {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}

.meta__item + .meta__item:not(.meta__item--badge)::before {
	content: "";
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--color-gray-500);
}

/* Le badge se distingue seul : pas de séparateur après lui. */
.meta__item--badge + .meta__item::before {
	display: none;
}

.meta a {
	color: inherit;
	text-decoration: none;
}

.meta a:hover {
	color: var(--color-link-hover);
	text-decoration: underline;
}

/* ------------------------------------------------------------------ */
/* Cartes                                                              */
/* Toute la carte est cliquable via le lien du titre (::after), le     */
/* focus est rendu sur la carte entière.                               */
/* ------------------------------------------------------------------ */

.card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	height: 100%;
	padding: var(--space-5);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	transition: border-color var(--duration-base) ease, box-shadow var(--duration-base) ease, transform var(--duration-base) var(--ease-out);
}

@media (min-width: 64em) {
	.card {
		padding: var(--space-6);
	}
}

.card__title {
	font-size: var(--text-h4);
	line-height: var(--leading-snug);
}

.card__title a {
	color: inherit;
	text-decoration: none;
}

.card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

.card__title a:focus-visible {
	outline: none;
}

.card:has(.card__title a:focus-visible) {
	outline: var(--focus-ring);
	outline-offset: var(--focus-offset);
}

.card:has(.card__title a) :is(.meta a, .badge) {
	position: relative;
	z-index: 2;
}

.card:has(.card__title a):hover {
	border-color: var(--color-border-strong);
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.card:has(.card__title a):hover .card__title {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.card__text {
	color: var(--color-text-muted);
}

.card__footer {
	margin-top: auto;
	padding-top: var(--space-2);
}

.card__action {
	color: var(--color-link);
}

/* Carte actualité (maquette V2.1) : panneau blanc à filet fin, image dominante,
   métadonnées discrètes, titre serif bleu ; ombre quasi absente. */

.card--news {
	gap: 0;
	padding: 0;
	overflow: hidden;
	border-radius: var(--radius-sm);
	box-shadow: none;
}

.card--news .card__media {
	aspect-ratio: 2 / 1;
	overflow: hidden;
	background: var(--color-bg-alt);
}

.card--news .card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms var(--ease-out);
}

.card--news .card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-4) var(--space-5) var(--space-5);
}

.card--news .meta {
	font-size: var(--text-xs);
}

.card--news .card__title {
	font-size: var(--text-card-title);
	line-height: 1.3;
}

.card--news .card__text {
	font-size: var(--text-small);
	line-height: 1.55;
}

.card--news:has(.card__title a):hover {
	border-color: var(--color-border-strong);
	box-shadow: var(--shadow-sm);
	transform: none;
}

.card--news:hover .card__media img {
	transform: scale(1.03);
}

/* Visuel de remplacement quand l'actualité n'a pas d'image */
.media-placeholder {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	background:
		linear-gradient(120deg, transparent 0 62%, rgb(214 164 65 / 0.45) 62% calc(62% + 1px), transparent calc(62% + 1px) 70%, rgb(214 164 65 / 0.45) 70% calc(70% + 1px), transparent calc(70% + 1px)),
		var(--color-ivory-100);
}

/* Carte consultation */

.card--consultation .card__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
}

.card--consultation .card__dates {
	color: var(--color-text-muted);
	font-size: var(--text-small);
}

/* ------------------------------------------------------------------ */
/* Chiffre clé                                                         */
/* ------------------------------------------------------------------ */

.key-figures {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
	padding: var(--space-2) 0;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-surface);
}

@media (min-width: 64em) {
	.key-figures {
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
		grid-template-columns: none;
	}
}

.key-figure {
	display: grid;
	align-content: start;
	justify-items: center;
	gap: var(--space-2);
	margin: 0;
	padding: var(--space-5) var(--space-4);
	text-align: center;
}

/* Filets de séparation */
.key-figures .key-figure:nth-child(even) {
	border-left: 1px solid var(--color-border);
}

.key-figures .key-figure:nth-child(n + 3) {
	border-top: 1px solid var(--color-border);
}

@media (min-width: 64em) {
	.key-figures .key-figure:nth-child(n) {
		border-top: 0;
		border-left: 1px solid var(--color-border);
	}

	.key-figures .key-figure:first-child {
		border-left: 0;
	}
}

.key-figure__value {
	order: -1;
	color: var(--color-blue-800);
	font-family: var(--font-serif);
	font-size: var(--text-figure);
	font-weight: var(--weight-bold);
	font-variant-numeric: lining-nums;
	line-height: 1;
	letter-spacing: -0.02em;
}

.key-figure__label {
	max-width: 22ch;
	color: var(--color-text-muted);
	font-size: var(--text-small);
	line-height: 1.45;
}

.section--dark .key-figures {
	border-color: rgb(250 248 242 / 0.2);
	background: none;
}

.section--dark .key-figures .key-figure {
	border-color: rgb(250 248 242 / 0.2);
}

.section--dark .key-figure__value {
	color: var(--color-white);
}

.section--dark .key-figure__label {
	color: var(--color-on-dark-muted);
}

/* ------------------------------------------------------------------ */
/* Bloc CTA                                                            */
/* ------------------------------------------------------------------ */

.cta-block {
	position: relative;
	display: grid;
	gap: var(--space-5);
	padding: var(--space-6) var(--space-5);
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--color-blue-900);
	color: var(--color-on-dark-muted);
}

.cta-block > * {
	position: relative;
}

.cta-block__title {
	max-width: 24ch;
	color: var(--color-white);
	font-size: var(--text-h3);
}

.cta-block__text {
	max-width: 56ch;
}

.cta-block__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3) var(--space-5);
}

.cta-block__actions a:not(.btn) {
	color: var(--color-white);
}

@media (min-width: 64em) {
	.cta-block {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: end;
		column-gap: var(--space-8);
		padding: var(--space-7) var(--space-7);
	}

	.cta-block__content {
		display: grid;
		gap: var(--space-4);
	}
}

.cta-block__content {
	display: grid;
	gap: var(--space-3);
}

.cta-block--light {
	border: 1px solid var(--color-border);
	background: var(--color-bg-alt);
	color: var(--color-text-muted);
}

.cta-block--light .cta-block__title {
	color: var(--color-heading);
}

.cta-block--light .cta-block__actions a:not(.btn) {
	color: var(--color-link);
}

/* Sur fond clair : focus et surtitre reprennent les couleurs standard. */
.cta-block--light :focus-visible {
	outline-color: var(--color-focus);
}

.cta-block--light .eyebrow {
	color: var(--color-blue-700);
}


/* ------------------------------------------------------------------ */
/* Encadré (synthèse, information)                                     */
/* ------------------------------------------------------------------ */

.panel {
	display: grid;
	gap: var(--space-4);
	padding: var(--space-5);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-bg-alt);
}

@media (min-width: 64em) {
	.panel {
		padding: var(--space-6);
	}
}

.panel__title {
	font-size: var(--text-h4);
}

/* ------------------------------------------------------------------ */
/* État vide                                                           */
/* ------------------------------------------------------------------ */

.empty-state {
	display: grid;
	justify-items: start;
	gap: var(--space-3);
	padding: var(--space-6);
	border: 1px dashed var(--color-border-strong);
	border-radius: var(--radius-md);
	color: var(--color-text-muted);
}

/* ------------------------------------------------------------------ */
/* Pagination et navigation entre articles                             */
/* ------------------------------------------------------------------ */

.pagination {
	margin-top: var(--space-7);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding-inline: var(--space-3);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-sm);
	background: var(--color-surface);
	color: var(--color-blue-800);
	font-weight: var(--weight-semibold);
	text-decoration: none;
}

.pagination a.page-numbers:hover {
	border-color: var(--color-blue-800);
}

.pagination .page-numbers.current {
	border-color: var(--color-blue-900);
	background: var(--color-blue-900);
	color: var(--color-white);
}

.pagination .page-numbers.dots {
	border-color: transparent;
	background: none;
}

.post-navigation {
	margin-top: var(--space-8);
	padding-top: var(--space-6);
	border-top: 1px solid var(--color-border);
}

.post-navigation .nav-links {
	display: grid;
	gap: var(--space-5);
}

@media (min-width: 48em) {
	.post-navigation .nav-links {
		grid-template-columns: 1fr 1fr;
	}

	.post-navigation .nav-next {
		grid-column: 2;
		text-align: right;
	}
}

.post-navigation a {
	display: grid;
	gap: var(--space-1);
	text-decoration: none;
}

.post-navigation .nav-subtitle {
	color: var(--color-text-muted);
	font-size: var(--text-small);
}

.post-navigation .nav-title {
	color: var(--color-heading);
	font-family: var(--font-serif);
	font-weight: var(--weight-bold);
	line-height: var(--leading-snug);
}

.post-navigation a:hover .nav-title {
	text-decoration: underline;
}

/* Wordmark provisoire (remplacé par le logo officiel via custom-logo) */

.brand {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	gap: var(--space-3);
	color: var(--color-blue-900);
	text-decoration: none;
	white-space: nowrap;
}

.brand:hover {
	color: var(--color-blue-900);
}

/* Filet doré avec un discret point rouge en pied : seul signe graphique provisoire. */
.brand__rule {
	flex: none;
	align-self: stretch;
	width: 2px;
	margin-block: 0.125rem;
	border-radius: 1px;
	background: linear-gradient(var(--color-gold-500) 0 80%, var(--color-red-600) 80% 100%);
}

.brand__text {
	display: grid;
	line-height: 1.2;
}

.brand__name {
	font-family: var(--font-serif);
	font-size: var(--text-brand);
	font-weight: var(--weight-bold);
	letter-spacing: -0.005em;
}

.brand__tagline {
	font-family: var(--font-serif);
	font-size: var(--text-nav);
	font-weight: var(--weight-regular);
}

.brand .custom-logo {
	width: auto;
	max-height: 3rem;
}

.link-arrow--back::after {
	display: none;
}

.link-arrow--back::before {
	content: "";
	width: 1rem;
	height: 1rem;
	background: currentColor;
	-webkit-mask: var(--icon-arrow) center / contain no-repeat;
	mask: var(--icon-arrow) center / contain no-repeat;
	transform: scaleX(-1);
	transition: transform var(--duration-base) var(--ease-out);
}

.link-arrow--back:hover::before {
	transform: scaleX(-1) translateX(3px);
}

/* Bouton avec flèche d'action */
.btn--arrow::after {
	content: "";
	width: 1.125rem;
	height: 1.125rem;
	background: currentColor;
	-webkit-mask: var(--icon-arrow) center / contain no-repeat;
	mask: var(--icon-arrow) center / contain no-repeat;
	transition: transform var(--duration-base) var(--ease-out);
}

.btn--arrow:hover::after {
	transform: translateX(3px);
}

/* En-tête de section avec lien « Voir tout » */
.section__header--split {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: var(--space-3) var(--space-5);
	max-width: none;
}

.key-figure__value,
.key-figure__label {
	margin: 0;
}

/* Dans une carte (colonne flex), badges et surtitres gardent leur largeur naturelle. */
.card > :is(.badge, .eyebrow) {
	align-self: flex-start;
}

/* Bloc CTA avec photographie : image en fond, voile bleu nuit pour le contraste du texte. */
.cta-block__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.cta-block__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cta-block__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgb(11 31 58 / 0.95) 0%, rgb(11 31 58 / 0.85) 42%, rgb(11 31 58 / 0.15) 100%);
}

@media (max-width: 47.9375em) {
	.cta-block__media::after {
		background: rgb(11 31 58 / 0.86);
	}
}

@media (min-width: 64em) {
	/* Bande panoramique, comme la page Actualités de la maquette. */
	.card--news .card__media {
		aspect-ratio: 3 / 1;
	}
}