/*
 * Sphera — feuille front/éditeur
 * Ce que theme.json ne couvre pas : composition du header/footer, grilles éditoriales,
 * overlay menu, encart newsletter, cards post avec titre en surimpression,
 * breakpoints mobile.
 */

:root {
	--sphera-breakpoint-md: 768px;
	--sphera-transition: 180ms ease-out;
}

/* ----------------------------------------------------------------
   Ras-le-viewport : enlève le gap natif du body FSE aux bords
   ---------------------------------------------------------------- */
body.wp-site-blocks {
	margin: 0;
}

.wp-site-blocks > .is-layout-constrained,
.wp-site-blocks > main,
.wp-site-blocks > header.wp-block-template-part,
.wp-site-blocks > footer.wp-block-template-part {
	margin-block: 0 !important;
}

/* ----------------------------------------------------------------
   Gouttières fluides : mobile puis desktop au delà de 768px
   ---------------------------------------------------------------- */
@media (min-width: 768px) {
	:root {
		--sphera-gouttiere: var(--wp--custom--gouttiere--desktop, 48px);
	}
	.sphera-header,
	.sphera-footer,
	.sphera-pad-x {
		padding-inline: var(--wp--custom--gouttiere--desktop, 48px) !important;
	}
}

/* ----------------------------------------------------------------
   Header — 3 colonnes : left (burger+logo) | center (nav) | right (lang+CTA)
   Sticky / padding : voir header.css (.sphera-header)
   ---------------------------------------------------------------- */
.sphera-header__inner {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: space-between;
	gap: clamp(0.75rem, 1.5vw, 1.25rem);
	width: 100%;
	min-width: 0;
}

.sphera-header__left,
.sphera-header__right {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	align-self: stretch;
	flex: 0 0 auto;
	min-width: 0;
	gap: clamp(0.65rem, 1vw, 1.25rem);
}

.sphera-header__left {
	flex-shrink: 0;
}

.sphera-header__right {
	flex-shrink: 0;
	margin-left: auto;
}

/* Bouton burger — hamburger + label "Menu" */
.sphera-burger {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	gap: 0.55rem;
	background: transparent;
	border: 0;
	padding: 0.35rem 0.1rem;
	color: inherit;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--massilia);
	font-size: var(--wp--preset--font-size--menu);
	font-weight: 400;
	line-height: 1;
	white-space: nowrap;
}

.sphera-burger:hover {
	color: var(--wp--preset--color--network-mid-blue);
}

.sphera-burger__icon {
	flex-shrink: 0;
}

.sphera-burger__label {
	line-height: 1;
}

/* Logo SVG : hauteur contrôlée, conserve le ratio */
.sphera-logo {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	text-decoration: none;
	color: inherit;
	line-height: 0;
	min-width: 0;
}

.sphera-logo__img {
	height: 26px;
	width: auto;
	max-width: min(132px, 28vw);
	display: block;
}

@media (min-width: 1024px) {
	.sphera-logo__img {
		height: 28px;
	}
}

.sphera-logo__img--lg {
	height: 34px;
}

/* Top nav éditoriale — masquée sous 1024 px */
.sphera-top-nav {
	display: none;
	flex: 1 1 auto;
	min-width: 0;
	max-width: 100%;
	gap: clamp(0.35rem, 0.8vw, 1rem);
	align-items: stretch;
	align-self: stretch;
}

@media (min-width: 1024px) {
	.sphera-top-nav {
		display: flex;
		flex-wrap: nowrap;
		justify-content: center;
	}
}

@media (min-width: 1024px) and (max-width: 1280px) {
	.sphera-header__inner {
		gap: 0.65rem;
	}

	.sphera-top-nav {
		gap: 0.35rem;
	}

	.sphera-top-nav__link {
		font-size: var(--wp--preset--font-size--corps, 18px);
	}
}

/* Même trait de survol que .hover-border-bottom (Figma : Micro 6px, bleu accent) */
.sphera-top-nav__link {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	align-self: stretch;
	gap: var(--wp--preset--spacing--micro, 6px);
	box-sizing: border-box;
	color: var(--wp--preset--color--network-beige);
	text-decoration: none;
	font-family: var(--wp--preset--font-family--massilia);
	font-size: var(--wp--preset--font-size--menu);
	font-weight: 400;
	padding: 0;
	line-height: 1;
	white-space: nowrap;
	border-bottom: var(--wp--preset--spacing--micro, 6px) solid transparent;
	transition: border-color 180ms ease-out;
}

.sphera-top-nav__link > span {
	display: inline-block;
	line-height: 1;
}

.sphera-top-nav__link:hover,
.sphera-top-nav__link[aria-current="page"] {
	border-bottom-color: var(--wp--preset--color--network-deep-blue, #1352ff);
}

.sphera-top-nav__icon,
.sphera-top-nav__custom-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	display: block;
	object-fit: contain;
}

.sphera-top-nav__icon {
	/* Correction optique : on descend l'icône de 2 px pour aligner
	   son centre visuel sur le cap-height de Massilia Bold. */
	transform: translateY(2px);
}

/* Séparateur vertical (entre icônes et switcher) */
.sphera-vdiv {
	display: none;
	width: 1px;
	height: 22px;
	background: color-mix(in srgb, var(--wp--preset--color--network-beige) 28%, transparent);
	flex-shrink: 0;
}

@media (min-width: 1024px) {
	.sphera-vdiv { display: inline-block; }
}

/* Sélecteur de langue — bouton + menu déroulant */
.sphera-lang {
	position: relative;
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
}

.sphera-lang__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: transparent;
	border: 0;
	padding: 0.35rem 0.1rem;
	color: var(--wp--preset--color--network-light-blue, #e4eeff);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--massilia);
	font-size: var(--wp--preset--font-size--menu);
	line-height: 1;
}

.sphera-lang__toggle:hover {
	color: var(--wp--preset--color--network-mid-blue, #66a0ff);
}
.sphera-lang__chevron {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	transition: transform var(--sphera-transition);
}

.sphera-lang.is-open .sphera-lang__chevron {
	transform: rotate(180deg);
}

.sphera-lang__menu {
	position: absolute;
	top: calc(100% + 0.5rem);
	right: 0;
	min-width: 180px;
	margin: 0;
	padding: 0.4rem 0;
	list-style: none;
	background: var(--wp--preset--color--edito-00);
	color: var(--wp--preset--color--network-dark-blue);
	border-radius: 4px;
	box-shadow: 0 10px 30px -10px rgba(0, 19, 58, 0.35);
	z-index: 50;
}

.sphera-lang__menu li { margin: 0; }

.sphera-lang__menu a {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	padding: 0.5rem 0.85rem;
	color: inherit;
	text-decoration: none;
	font-family: var(--wp--preset--font-family--massilia);
	font-size: 0.95rem;
}

.sphera-lang__menu a:hover,
.sphera-lang__menu a[aria-current="true"] {
	background: var(--wp--preset--color--network-light-blue);
}

.sphera-lang__label {
	font-family: var(--wp--preset--font-family--degular-mono);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	min-width: 22px;
	color: var(--wp--preset--color--network-deep-blue);
}

.sphera-lang__name {
	font-weight: 400;
}

/* CTA Network — pastille bleue arrondie avec icône étoile */
.sphera-cta-network {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	gap: 0.5rem;
	white-space: nowrap;
	background: var(--wp--preset--color--network-mid-blue);
	color: var(--wp--preset--color--network-dark-blue);
	padding: 0.5rem 0.95rem;
	border-radius: 6px;
	font-family: var(--wp--preset--font-family--massilia);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--menu);
	text-decoration: none;
	line-height: 1;
	transition: background var(--sphera-transition);
}

.sphera-cta-network:hover {
	background: #7db2ff;
}

.sphera-cta-network__icon { flex-shrink: 0; }

/* Responsive : on masque la top-nav + langue sous 1024 px (burger prend le relais) */
@media (max-width: 1023px) {
	.sphera-lang { display: none; }
	.sphera-cta-network span { display: none; }
	.sphera-cta-network { padding: 0.5rem; border-radius: 6px; }
}

@media (max-width: 479px) {
	.sphera-burger__label { display: none; }
}

/* ----------------------------------------------------------------
   Drawer (menu burger) — panneau depuis la gauche, fond edito-00
   ---------------------------------------------------------------- */
.sphera-drawer {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: block;
}

.sphera-drawer[hidden] { display: none; }

.sphera-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 19, 58, 0.55);
	opacity: 0;
	transition: opacity var(--sphera-transition);
}

.sphera-drawer.is-open .sphera-drawer__backdrop {
	opacity: 1;
}

.sphera-drawer__panel {
	position: relative;
	width: min(420px, 92vw);
	/* 100dvh suit dynamiquement la barre d'URL mobile (iOS Safari, Chrome Android) ;
	   fallback en 100% pour les navigateurs qui ne supportent pas dvh. */
	height: 100%;
	height: 100dvh;
	max-height: 100dvh;
	background: var(--wp--preset--color--edito-00);
	color: var(--wp--preset--color--network-dark-blue);
	/* Padding symétrique : le bas devient la responsabilité de .sphera-drawer__foot,
	   qui est épinglé en bas de la colonne flex et intègre lui-même la safe-area. */
	padding: 1.25rem 1.5rem 0;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	transform: translateX(-100%);
	transition: transform 240ms ease-out;
	/* On ne scrolle plus le panel dans son ensemble : c'est la nav qui scrolle
	   si nécessaire, pour que les réseaux sociaux soient toujours visibles. */
	overflow: hidden;
	overscroll-behavior: contain;
}

.sphera-drawer.is-open .sphera-drawer__panel {
	transform: translateX(0);
}

.sphera-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-shrink: 0;
}

/* Zone centrale scrollable : si les items de nav dépassent, c'est cette
   zone qui scrolle, pas le panel entier. Du coup .sphera-drawer__foot
   (réseaux sociaux) reste toujours épinglé et visible au-dessus de la
   home-bar, quelle que soit la hauteur du viewport. */
.sphera-drawer__nav {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.sphera-logo--on-light { color: var(--wp--preset--color--network-dark-blue); }

/* Le logo SVG est rempli en E4EEFF par le fichier ; dans le drawer (fond clair),
   on filtre pour passer en bleu foncé. */
.sphera-logo--on-light .sphera-logo__img {
	filter: brightness(0) saturate(100%) invert(9%) sepia(64%) saturate(6149%) hue-rotate(221deg) brightness(65%) contrast(121%);
}

.sphera-drawer__close {
	background: transparent;
	border: 0;
	color: inherit;
	cursor: pointer;
	padding: 0.35rem;
	line-height: 0;
	border-radius: 4px;
}

.sphera-drawer__close:hover {
	background: color-mix(in srgb, currentColor 8%, transparent);
}

.sphera-drawer__nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.sphera-drawer__nav a {
	display: block;
	padding: 0.6rem 0;
	font-family: var(--wp--preset--font-family--massilia);
	font-size: 1.4rem;
	font-weight: 500;
	color: inherit;
	text-decoration: none;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.sphera-drawer__nav a:hover {
	color: var(--wp--preset--color--network-deep-blue);
	text-decoration: underline;
}

.sphera-drawer__foot {
	/* Plus de margin-top:auto — le flex de la colonne le fait déjà via
	   flex:1 sur la nav. Ici on épingle le bloc en bas du panel et on
	   réserve la safe-area iOS/Android pour que les icônes restent claires. */
	flex-shrink: 0;
	padding-top: 1.25rem;
	/* Respiration suffisante sous les icônes sociales : au moins 2rem,
	   et +1.5rem au-delà de la safe-area sur les appareils avec home-bar. */
	padding-bottom: max(2rem, env(safe-area-inset-bottom) + 1.5rem);
	border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent);
	background: var(--wp--preset--color--edito-00);
}

.sphera-drawer__foot-label {
	font-family: var(--wp--preset--font-family--degular-mono);
	font-size: var(--wp--preset--font-size--note);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gris-fonce);
	margin: 0 0 0.6rem;
}

.sphera-drawer__social {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	gap: 0.75rem;
}

.sphera-drawer__social a {
	display: inline-grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
	border-radius: 50%;
	color: inherit;
}

.sphera-drawer__social a:hover {
	background: var(--wp--preset--color--network-dark-blue);
	color: var(--wp--preset--color--network-beige);
	border-color: transparent;
}

html.has-sphera-drawer-open {
	overflow: hidden;
}

/* ----------------------------------------------------------------
   Hero home (bandeau clair, titre monumental, CTA)
   ---------------------------------------------------------------- */
.sphera-hero {
	background: var(--wp--preset--color--network-light-blue);
	padding-block: clamp(3rem, 8vw, 6rem);
}

.sphera-hero__inner {
	max-width: 860px;
	margin: 0 auto;
	text-align: center;
}

.sphera-hero__title {
	font-family: var(--wp--preset--font-family--massilia);
	font-weight: 900;
	color: var(--wp--preset--color--network-dark-blue);
	font-size: clamp(2rem, 5vw + 0.5rem, 3.5rem);
	line-height: 1;
	margin: 0 0 1.5rem;
	letter-spacing: -0.01em;
}

.sphera-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 40px;
	padding: 0 1.5rem;
	background: var(--wp--preset--color--network-mid-blue);
	color: var(--wp--preset--color--network-dark-blue);
	border: 1px solid var(--wp--preset--color--network-dark-blue);
	border-radius: 6px;
	text-decoration: none;
	font-family: var(--wp--preset--font-family--massilia);
	font-weight: 500;
	font-size: 1.0625rem;
	line-height: 1.3;
	transition: background-color 160ms ease;
}

.sphera-hero__cta::after {
	content: "";
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin-top: 3px;
	background: url("../svg/fleche.svg") center / contain no-repeat;
	transition: transform 160ms ease;
}

.sphera-hero__cta svg {
	display: none;
}

.sphera-hero__cta:hover {
	background: color-mix(in srgb, var(--wp--preset--color--network-mid-blue) 85%, var(--wp--preset--color--network-dark-blue));
}

.sphera-hero__cta:hover::after {
	transform: translateX(3px);
}

/* ----------------------------------------------------------------
   Entêtes de section "Recently / Videos / Shorts…" avec lien droite
   ---------------------------------------------------------------- */
.sphera-section-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	margin-bottom: 1.25rem;
	flex-wrap: wrap;
}

.sphera-section-head {
	align-items: flex-end;
	margin-bottom: 1.75rem;
}

.sphera-section-head h2 {
	margin: 0;
	font-family: var(--wp--preset--font-family--massilia);
	font-size: clamp(1.5rem, 1.2vw + 1rem, 2rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.01em;
	color: inherit;
}

.sphera-section-head__sub {
	color: var(--Network-Network_dark-blue, #00133A);
	font-family: massilia-variable, system-ui, sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 300;
	line-height: 140%; /* 25.2px */

}

a.sphera-section-head__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: inherit;
	text-decoration: none;
    font-family: massilia-variable, system-ui, sans-serif;
    font-size: 17px;
    font-style: normal;
    font-weight: 500;
    line-height: 130%; /* 22.1px */
	letter-spacing: -0.02em;
	margin-left: auto;
	padding-bottom: 0.1rem;
	border-bottom: 1px solid currentColor;
	transition: gap 160ms ease, opacity 160ms ease;
}

a.sphera-section-head__link::after {
	content: "";
	flex-shrink: 0;
	display: inline-block;
	width: 16px;
	height: 16px;
	background: url("../svg/fleche.svg") center / contain no-repeat;
	transition: transform 160ms ease;
}

.sphera-section-head__link:hover { gap: 0.7rem; opacity: 0.85; }
.sphera-section-head__link:hover::after { transform: translateX(3px); }

.sphera-section--dark .sphera-section-head__link::after {
	filter: brightness(0) invert(1);
}

/* Sections sur fond sombre (European Dives / Shorts sur article vidéo) */
.sphera-section--dark {
	background: var(--wp--preset--color--network-dark-blue);
	color: var(--wp--preset--color--network-beige);
	padding-block: clamp(3rem, 6vw, 5rem);
}

.sphera-section--dark .sphera-section-head__link {
	color: var(--wp--preset--color--network-beige);
}

.sphera-section--light {
	padding-block: clamp(3rem, 6vw, 5rem);
}

/* ----------------------------------------------------------------
   Lien article — stretched link : rend toute la .sphera-card cliquable.
   Utiliser sur un wp:read-more à l'intérieur de la card.
   ---------------------------------------------------------------- */
.lien-article {
	/* Texte visuellement masqué mais accessible aux lecteurs d'écran */
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.lien-article::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	cursor: pointer;
}

/* ----------------------------------------------------------------
   Card article — variants
   ---------------------------------------------------------------- */
.sphera-card {
	position: relative; /* ancre du stretched link .lien-article */
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

/* Les termes/catégories restent cliquables par-dessus le stretched link */
.sphera-card .wp-block-post-terms {
	position: relative;
	z-index: 2;
}

/* Neutralise le padding global injecté par Gutenberg et le centrage auto
   imposé par .is-layout-constrained sur les enfants de la carte. */
.sphera-card.has-global-padding {
	padding-left: 0;
	padding-right: 0;
}

/* Gutenberg écrit `.is-layout-constrained > :where(...){margin-left/right: auto !important}`
   ce qui recentre individuellement pill, titre et excerpt dans la carte.
   On neutralise en forçant `!important` + on remet les marges verticales à 0
   (le `gap` du flex se charge du rythme vertical). */
.sphera-card > *,
.sphera-card.is-layout-constrained > *,
.sphera-card.wp-block-group-is-layout-constrained > * {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	margin-block-start: 0;
	align-self: stretch;
}

.sphera-card .wp-block-post-terms {
	align-self: flex-start;
}

.sphera-card--featured {
	gap: 1.125rem; /* 18px Figma */
}

.sphera-card--featured .wp-block-post-title + .wp-block-post-excerpt,
.sphera-card--featured .wp-block-post-terms + .wp-block-post-title {
	margin-top: 0.75rem; /* 12px Figma */
}

.sphera-card .wp-block-post-featured-image,
.sphera-card .wp-block-cover {
	margin: 0;
}

.sphera-card .wp-block-post-featured-image img,
.sphera-card .wp-block-cover {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: var(--wp--preset--color--gris-moyen);
	border-radius: 2px;
}

.sphera-card--featured .wp-block-post-featured-image img {
	aspect-ratio: 3 / 2;
}

.sphera-card--square .wp-block-post-featured-image img,
.sphera-card--square .wp-block-cover {
	aspect-ratio: 1 / 1;
}

.sphera-card--portrait .wp-block-post-featured-image img,
.sphera-card--portrait .wp-block-cover {
	aspect-ratio: 1 / 2;
}

.sphera-card .wp-block-post-terms {
	display: inline-flex;
	align-items: center;
	background: var(--wp--preset--color--network-light-blue);
	color: var(--wp--preset--color--network-dark-blue);
	padding: 9px 12px;
	border-radius: 6px;
	font-family: var(--wp--preset--font-family--massilia);
	font-weight: 200;
	font-size: 0.9375rem;
	line-height: 1.1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	width: fit-content;
}

.sphera-card .wp-block-post-terms a {
	color: inherit;
	text-decoration: none;
}

.sphera-card .wp-block-post-terms a:hover {
	text-decoration: none;
}

.sphera-section--dark .sphera-card .wp-block-post-terms {
	background: var(--wp--preset--color--network-beige);
	color: var(--wp--preset--color--network-dark-blue);
}

.sphera-card .wp-block-post-title {
	font-family: var(--wp--preset--font-family--massilia);
	font-weight: 800;
	line-height: 1.05;
	margin: 0;
}

.sphera-card--featured .wp-block-post-title {
	font-weight: 600;
	font-size: 1.25rem;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--network-dark-blue);
}

.sphera-card--featured .wp-block-post-excerpt {
	font-family: var(--wp--preset--font-family--massilia);
	font-weight: 300;
	font-size: 1.125rem;
	line-height: 1.4;
	color: var(--wp--preset--color--network-dark-blue);
}

.sphera-card .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.sphera-card .wp-block-post-title a:hover {
	text-decoration: underline;
}

.sphera-card .wp-block-post-excerpt {
	margin: 0;
	font-size: var(--wp--preset--font-size--corps);
}

.sphera-card .wp-block-post-excerpt__excerpt {
	margin: 0;
}

/* Variant "overlay" : titre directement sur l'image, ancré en bas à gauche */
.sphera-card--overlay .wp-block-cover__inner-container {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 1rem;
	box-sizing: border-box;
}

.sphera-card--overlay .wp-block-cover__inner-container .wp-block-post-title {
	display: inline;
	background: none;
	color: var(--wp--preset--color--network-beige, #faf8f2);
	padding: 0;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	font-size: clamp(1rem, 0.75vw + 0.6rem, 1.25rem);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.01em;
	--sphera-headline-stroke: 0.0333em;
	--sphera-headline-shadow-x: -0.0667em;
	--sphera-headline-shadow-y: 0.0667em;
}

.sphera-card--overlay .wp-block-cover__inner-container .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
	border: none;
	-webkit-text-stroke: var(--sphera-headline-stroke, 0.0333em) var(--wp--preset--color--network-dark-blue, #00133a);
	paint-order: stroke fill;
	text-shadow: var(--sphera-headline-shadow-x, -0.0667em) var(--sphera-headline-shadow-y, 0.0667em) 0 var(--wp--preset--color--network-dark-blue, #00133a);
}

/* ----------------------------------------------------------------
   Grille de cards (post-template layout:grid override responsive)
   ---------------------------------------------------------------- */
.wp-block-post-template.is-layout-grid {
	gap: 2.25rem 3rem; /* 36px row / 48px col — colonne Figma */
}

@media (max-width: 767px) {
	.wp-block-post-template.is-layout-grid.columns-3,
	.wp-block-post-template.is-layout-grid.columns-4,
	.wp-block-post-template.is-layout-grid.columns-5 {
		grid-template-columns: 1fr !important;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.wp-block-post-template.is-layout-grid.columns-4,
	.wp-block-post-template.is-layout-grid.columns-5 {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

/* ----------------------------------------------------------------
   Boucle de requête — limite d'articles (classes sur le bloc Query)
   query-3 | query-4 | query-5 → affiche 3, 4 ou 5 articles max.
   Layout « par défaut » ou grille ; masque aussi la pagination.
   ---------------------------------------------------------------- */
.wp-block-query.query-3 .wp-block-post-template > *:nth-child(n + 4),
.wp-block-query.query-4 .wp-block-post-template > *:nth-child(n + 5),
.wp-block-query.query-5 .wp-block-post-template > *:nth-child(n + 6),
.wp-block-post-template.query-3 > *:nth-child(n + 4),
.wp-block-post-template.query-4 > *:nth-child(n + 5),
.wp-block-post-template.query-5 > *:nth-child(n + 6) {
	display: none !important;
}

.wp-block-query.query-3 .wp-block-query-pagination,
.wp-block-query.query-4 .wp-block-query-pagination,
.wp-block-query.query-5 .wp-block-query-pagination {
	display: none !important;
}

/* ----------------------------------------------------------------
   Newsletter encart (InVivo) — fond or, structure Figma 135:2510
   Desktop : 2 col externes (contenu | visuel 400x400),
   dans le contenu : top row 2 sub-col (info | longue desc) + form en bas.
   ---------------------------------------------------------------- */
.sphera-nl {
	background: var(--wp--preset--color--network-gold);
	color: var(--wp--preset--color--network-dark-blue);
	padding: clamp(1.5rem, 3vw, 3rem);
	border-radius: 2px;
	display: grid;
	gap: clamp(1.5rem, 3vw, 3rem);
}

@media (min-width: 900px) {
	.sphera-nl {
		grid-template-columns: minmax(0, 1fr) 400px;
		align-items: stretch;
	}
}

.sphera-nl__content {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 2rem;
	min-width: 0;
}

.sphera-nl__top {
	display: grid;
	gap: 1.5rem;
}

@media (min-width: 700px) {
	.sphera-nl__top {
		grid-template-columns: 1fr 1fr;
	}
}

.sphera-nl__info {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	align-items: flex-start;
}

.sphera-nl__title {
	font-family: var(--wp--preset--font-family--massilia);
	font-weight: 900;
	font-size: clamp(2.25rem, 2.5vw + 1rem, 2.5rem); /* 40px Figma */
	margin: 0;
	line-height: 1;
	letter-spacing: 0;
}

.sphera-nl__subtitle {
	font-family: var(--wp--preset--font-family--massilia);
	font-weight: 300;
	font-size: 1.125rem; /* 18px Figma */
	line-height: 1.4;
	margin: 0.25rem 0 0;
	max-width: 28ch;
}

.sphera-nl__meta {
	font-family: var(--wp--preset--font-family--degular-mono);
	font-size: var(--wp--preset--font-size--note);
	letter-spacing: -0.02em;
	margin: 0.5rem 0 0;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.sphera-nl__archive-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin: 1rem 0 0;
	color: var(--wp--preset--color--network-dark-blue);
	text-decoration: underline;
	text-underline-offset: 3px;
	font-family: var(--wp--preset--font-family--massilia);
	font-weight: 500;
	font-size: 1.0625rem; /* 17px Figma */
	line-height: 1.3;
	transition: gap 160ms ease, opacity 160ms ease;
}

.sphera-nl__archive-link svg {
	transition: transform 160ms ease;
}

.sphera-nl__archive-link:hover { gap: 0.6rem; opacity: 0.85; }
.sphera-nl__archive-link:hover svg { transform: translateX(3px); }

.sphera-nl__desc p {
	margin: 0;
	font-size: var(--wp--preset--font-size--corps);
	line-height: 1.45;
}

.sphera-nl__form {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-bottom: 0.65rem;
	max-width: 412px;
}

/* input + button doivent rendre la même largeur totale (border + padding inclus).
   Sans box-sizing: border-box explicite, le button (inline-flex) peut être
   calculé content-box selon le reset du navigateur. */
.sphera-nl__form input[type="email"],
.sphera-nl__form button {
	box-sizing: border-box;
}

.sphera-nl__form input[type="email"] {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid var(--wp--preset--color--network-gold);
	background: var(--wp--preset--color--network-beige);
	font-family: var(--wp--preset--font-family--massilia);
	font-size: var(--wp--preset--font-size--corps);
	border-radius: 6px;
	color: var(--wp--preset--color--network-dark-blue);
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

.sphera-nl__form input[type="email"]::placeholder {
	color: color-mix(in srgb, var(--wp--preset--color--network-dark-blue) 55%, transparent);
}

.sphera-nl__form input[type="email"]:focus {
	outline: 0;
	border-color: var(--wp--preset--color--network-dark-blue);
	box-shadow: var(--wp--custom--focus--ring);
}

.sphera-nl__form button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	height: 40px;
	padding: 0 1.5rem;
	background: var(--wp--preset--color--network-mid-blue);
	color: var(--wp--preset--color--network-dark-blue);
	border: 1px solid var(--wp--preset--color--network-dark-blue);
	border-radius: 6px;
	font-family: var(--wp--preset--font-family--massilia);
	font-weight: 500;
	font-size: 1.0625rem;
	letter-spacing: 0;
	line-height: 1.3;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 160ms ease;
}

.sphera-nl__form button svg {
	margin: 0 !important;
	vertical-align: middle !important;
	transition: transform 160ms ease;
}

.sphera-nl__form button:hover {
	background: color-mix(in srgb, var(--wp--preset--color--network-mid-blue) 85%, var(--wp--preset--color--network-dark-blue));
}

.sphera-nl__form button:hover svg {
	transform: translateX(3px);
}

.sphera-nl__rgpd {
	font-family: var(--wp--preset--font-family--degular-mono);
	font-size: var(--wp--preset--font-size--note);
	letter-spacing: -0.02em;
	margin-top: 0.5rem;
	color: color-mix(in srgb, var(--wp--preset--color--network-dark-blue) 70%, transparent);
}

/* Brevo (SIB) — masque les <p> parasites (champs cachés, lignes vides) */
.sib_signup_form > p:has(input[type="hidden"]) {
	display: none;
}

.sib_signup_form p:empty {
	display: none;
	margin: 0;
	padding: 0;
}

.sib_signup_form .sib-email-container {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
}

.sib_signup_form .sib-email-container .sib-email-area,
.sib_signup_form .sib-email-container .sib-default-btn {
	margin: 0;
	box-sizing: border-box;
}

.sib_signup_form .sib-email-container br {
	display: none;
}

form[id^="sib_signup_form_"].sib_signup_form .sib-email-area,
.sib_signup_form .sib-email-area {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid var(--wp--preset--color--network-gold, #ebdfac);
	border-radius: 6px;
	background: var(--wp--preset--color--network-beige, #faf8f2);
	color: var(--wp--preset--color--gris-fonce, #616161);
	font-family: var(--wp--preset--font-family--massilia);
	font-size: var(--wp--preset--font-size--corps, 18px);
	font-style: normal;
	font-weight: 300;
	line-height: 1.4;
}

.sib_signup_form .sib-email-area::placeholder {
	color: color-mix(in srgb, var(--wp--preset--color--gris-fonce, #616161) 65%, transparent);
}

.sib_signup_form .sib-email-area:focus {
	outline: 0;
	border-color: var(--wp--preset--color--network-dark-blue, #00133a);
	box-shadow: var(--wp--custom--focus--ring);
}

/* Brevo (SIB) — bouton submit : texte + flèche centrés, gap 6px (via <button> en JS) */
form[id^="sib_signup_form_"].sib_signup_form .sib-default-btn,
.sib_signup_form .sib-default-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	height: 40px;
	padding: 0 1.5rem;
	border: 1px solid var(--wp--preset--color--network-dark-blue, #00133a) !important;
	border-radius: 6px;
	background-color: var(--wp--preset--color--network-mid-blue, #66a0ff) !important;
	background-image: none !important;
	color: var(--wp--preset--color--network-dark-blue, #00133a) !important;
	font-family: var(--wp--preset--font-family--massilia);
	font-size: var(--wp--preset--font-size--button, 17px);
	font-style: normal;
	font-weight: 500;
	line-height: 1.3;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 160ms ease;
}

.sphera-sib-submit__label {
	display: inline-block;
}

.sphera-sib-submit__arrow {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin-top: 3px;
	background: url("../svg/fleche.svg") center / contain no-repeat;
	transition: transform 160ms ease;
}

form[id^="sib_signup_form_"].sib_signup_form .sib-default-btn:hover .sphera-sib-submit__arrow,
.sib_signup_form .sib-default-btn:hover .sphera-sib-submit__arrow {
	transform: translateX(3px);
}

form[id^="sib_signup_form_"].sib_signup_form .sib-default-btn:hover,
.sib_signup_form .sib-default-btn:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--network-mid-blue, #66a0ff) 85%, var(--wp--preset--color--network-dark-blue, #00133a)) !important;
	box-shadow: none !important;
}

.sphera-nl__visual {
	aspect-ratio: 1 / 1;
	background: repeating-conic-gradient(
		color-mix(in srgb, var(--wp--preset--color--gris-moyen) 50%, transparent) 0% 25%,
		transparent 0% 50%
	) 50% / 16px 16px;
	border-radius: 2px;
	min-height: 220px;
}

/* ----------------------------------------------------------------
   Footer
   ---------------------------------------------------------------- */
.sphera-footer {
	background: var(--wp--preset--color--network-dark-blue);
	color: var(--wp--preset--color--network-beige);
	padding-block: clamp(2.5rem, 4vw, 3rem);
}

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

.sphera-footer a:hover {
	text-decoration: underline;
}

.sphera-footer__grid {
	display: grid;
	gap: 2rem 2rem;
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.sphera-footer__grid {
		grid-template-columns: 1.3fr 1fr 1fr 1fr 1.5fr;
		align-items: start;
	}
}

.sphera-footer__col h3 {
	font-family: var(--wp--preset--font-family--degular-mono);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--note);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: color-mix(in srgb, currentColor 65%, transparent);
	margin: 0 0 0.9rem;
}

.sphera-footer__col ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.sphera-footer__col li {
	font-family: var(--wp--preset--font-family--massilia);
	font-size: 0.95rem;
	font-weight: 400;
	line-height: 1.35;
}

.sphera-footer__col li a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.sphera-footer__col li a svg {
	width: 14px;
	height: 14px;
	opacity: 0.75;
	flex-shrink: 0;
}

.sphera-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.sphera-footer__brand .sphera-logo {
	color: var(--wp--preset--color--network-beige);
}

.sphera-footer__tagline {
	font-family: var(--wp--preset--font-family--massilia);
	font-weight: 400;
	font-size: 0.95rem;
	line-height: 1.4;
	margin: 0 0 0.5rem;
	max-width: 30ch;
	color: color-mix(in srgb, currentColor 80%, transparent);
}

.sphera-footer__brand h3 {
	margin-top: 0.25rem;
}

.sphera-footer__social {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.sphera-footer__social li a {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.95rem;
}

.sphera-footer__social li a svg {
	width: 18px;
	height: 18px;
	opacity: 0.9;
	flex-shrink: 0;
}

/* Bloc Gutenberg wp-block-social-links (footer / pages éditables) */
.wp-block-social-links {
	--wp--social-links--icon-size: 20px !important;
}

.wp-block-social-links .wp-block-social-link-anchor svg {
	width: 20px;
	height: 20px;
}

.wp-block-social-links.has-visible-labels .wp-block-social-link-anchor {
	font-size: 20px;
}

.wp-block-social-links.has-visible-labels .wp-block-social-link-label {
	font-size: 20px;
	line-height: 1.2;
}

.wp-block-social-links .wp-social-link span:not(.screen-reader-text) {
	font-size: 20px;
}

.sphera-footer__nl {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.sphera-footer__nl p {
	margin: 0;
	font-family: var(--wp--preset--font-family--massilia);
	font-weight: 300;
}

.sphera-footer__nl form {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.5rem;
	align-items: stretch;
}

.sphera-footer__nl input[type="email"] {
	grid-column: 1 / 2;
	padding: 0.7rem 1rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--network-beige) 28%, transparent);
	background: color-mix(in srgb, var(--wp--preset--color--network-beige) 8%, transparent);
	font-family: var(--wp--preset--font-family--massilia);
	font-size: 0.95rem;
	color: var(--wp--preset--color--network-beige);
	border-radius: 6px;
	transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.sphera-footer__nl input[type="email"]::placeholder {
	color: color-mix(in srgb, var(--wp--preset--color--network-beige) 55%, transparent);
}

.sphera-footer__nl input[type="email"]:focus {
	outline: 0;
	background: var(--wp--preset--color--network-beige);
	color: var(--wp--preset--color--network-dark-blue);
	border-color: var(--wp--preset--color--network-beige);
}

.sphera-footer__nl button {
	grid-column: 2 / 3;
	padding: 0.7rem 1.25rem;
	background: var(--wp--preset--color--network-beige);
	color: var(--wp--preset--color--network-dark-blue);
	border: 0;
	border-radius: 6px;
	font-family: var(--wp--preset--font-family--massilia);
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 160ms ease;
}

.sphera-footer__nl button:hover {
	background: #fff;
}

@media (max-width: 399px) {
	.sphera-footer__nl form {
		grid-template-columns: 1fr;
	}
	.sphera-footer__nl button {
		grid-column: 1 / 2;
	}
}

.sphera-footer__nl .sphera-footer__rgpd {
	font-family: var(--wp--preset--font-family--degular-mono);
	font-size: var(--wp--preset--font-size--note);
	letter-spacing: -0.02em;
	opacity: 0.7;
}

.sphera-footer__bottom {
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--network-beige) 20%, transparent);
	font-family: var(--wp--preset--font-family--degular-mono);
	font-size: var(--wp--preset--font-size--note);
	letter-spacing: -0.02em;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
}

/* ----------------------------------------------------------------
   Article single : méta + breadcrumb + pullquote
   ---------------------------------------------------------------- */
.sphera-breadcrumb {
	font-family: var(--wp--preset--font-family--degular-mono);
	font-size: var(--wp--preset--font-size--ariane);
	letter-spacing: -0.02em;
	text-transform: uppercase;
	padding-block: 1rem;
	color: var(--wp--preset--color--network-deep-blue);
}

.sphera-breadcrumb a {
	color: inherit;
	text-decoration: underline;
}

.sphera-breadcrumb__sep {
	padding: 0 0.4rem;
	color: var(--wp--preset--color--gris-moyen);
}

.sphera-article-meta {
	font-family: var(--wp--preset--font-family--degular-mono);
	font-size: var(--wp--preset--font-size--note);
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--gris-fonce);
	margin-block: 1rem;
}

.sphera-article-meta strong {
	color: var(--wp--preset--color--network-dark-blue);
	font-family: var(--wp--preset--font-family--massilia);
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	font-size: var(--wp--preset--font-size--corps);
}

/* ----------------------------------------------------------------
   Archive / Newsletters list (rangs avec N° / date / titre / CTA)
   ---------------------------------------------------------------- */
.sphera-archive-list {
	display: flex;
	flex-direction: column;
}

/* NOTE : on NE MET PAS de grille sur .wp-block-post (le <li>) — les lignes
   sont un seul enfant `.sphera-archive-row` qui porte lui-même le grid.
   Mettre `display: grid` sur le <li> avec plusieurs colonnes écraserait
   son unique enfant dans la 1ʳᵉ colonne, ce qui faisait s'afficher le
   titre un caractère par ligne sur la page Newsletter. */
.sphera-archive-list .wp-block-post {
	display: block;
	padding: 0;
	border: 0;
	margin: 0;
	font-family: var(--wp--preset--font-family--massilia);
	font-size: var(--wp--preset--font-size--corps);
	list-style: none;
}

.sphera-archive-list .wp-block-post-date,
.sphera-archive-list .sphera-archive-list__num {
	color: var(--wp--preset--color--gris-fonce);
	font-family: var(--wp--preset--font-family--degular-mono);
	font-size: var(--wp--preset--font-size--note);
	letter-spacing: -0.02em;
}

.sphera-archive-list .wp-block-post-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--corps);
	font-weight: 400;
}

.sphera-archive-list .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.sphera-archive-list .wp-block-read-more {
	text-decoration: underline;
	font-weight: 500;
}

/* ----------------------------------------------------------------
   Pagination (chiffres compacts + chevrons précédent / suivant)
   ---------------------------------------------------------------- */
.wp-block-query-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin-block: 2rem;
	font-family: var(--wp--preset--font-family--massilia);
}

.wp-block-query-pagination-numbers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.wp-block-query-pagination-numbers .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 32px;
	height: 32px;
	padding: 0 0.5rem;
	border-radius: 4px;
	text-decoration: none;
	color: var(--wp--preset--color--network-dark-blue);
}

.wp-block-query-pagination-numbers .page-numbers.current {
	border-radius: var(--wp--preset--spacing--micro, 6px);
	border: 1px solid var(--wp--preset--color--network-dark-blue, #00133a);
	background: var(--wp--preset--color--network-light-blue, #e4eeff);
	color: var(--wp--preset--color--network-dark-blue, #00133a);
}

.wp-block-query-pagination-numbers .page-numbers.dots {
	min-width: auto;
	padding: 0 0.25rem;
}

/* Chevrons précédent / suivant (8×14 px) */
.wp-block-query-pagination-previous a,
a.wp-block-query-pagination-previous,
.sphera-pagination-chevron--previous,
.wp-block-query-pagination-next a,
a.wp-block-query-pagination-next,
.sphera-pagination-chevron--next {
	display: inline-grid;
	place-items: center;
	width: 32px;
	min-width: 32px;
	height: 32px;
	font-size: 0;
	line-height: 0;
	color: transparent;
	text-decoration: none;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 8px 14px;
	transition: opacity 160ms ease, transform 160ms ease;
}

.wp-block-query-pagination-previous a,
a.wp-block-query-pagination-previous,
.sphera-pagination-chevron--previous {
	background-image: url("../svg/chevron-left.svg");
}

.wp-block-query-pagination-next a,
a.wp-block-query-pagination-next,
.sphera-pagination-chevron--next {
	background-image: url("../svg/chevron-right.svg");
}

.wp-block-query-pagination-previous a:hover,
a.wp-block-query-pagination-previous:hover,
.sphera-pagination-chevron--previous:hover {
	opacity: 0.75;
	transform: translateX(-2px);
}

.wp-block-query-pagination-next a:hover,
a.wp-block-query-pagination-next:hover,
.sphera-pagination-chevron--next:hover {
	opacity: 0.75;
	transform: translateX(2px);
}

.wp-block-query-pagination-previous.is-disabled,
.wp-block-query-pagination-next.is-disabled,
.sphera-pagination-chevron.is-disabled {
	display: none;
}

.wp-block-query-pagination-previous-arrow {
	display: none;
}

/* ----------------------------------------------------------------
   Podcast list (lignes fines, titre + lien)
   ---------------------------------------------------------------- */
.sphera-podcast-list {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.sphera-podcast-list > * {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.85rem 0;
	border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent);
	font-family: var(--wp--preset--font-family--massilia);
}

/* ----------------------------------------------------------------
   Helper : row full-bleed
   ---------------------------------------------------------------- */
.sphera-fullbleed {
	width: 100%;
}

/* ----------------------------------------------------------------
   Breadcrumb — élément courant (non cliquable)
   ---------------------------------------------------------------- */
.sphera-breadcrumb__current {
	color: var(--wp--preset--color--gris-fonce);
	text-decoration: none;
}

/* ----------------------------------------------------------------
   Archive — barre d'outils (fictive : compteur + tri)
   ---------------------------------------------------------------- */
.sphera-archive-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--wp--preset--color--gris-moyen);
	font-family: var(--wp--preset--font-family--degular-mono);
	font-size: var(--wp--preset--font-size--note);
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gris-fonce);
}

/* ----------------------------------------------------------------
   Archive — ligne (date | cat | titre | miniature)
   Les lignes sont générées par wp:post-template ; on cible les
   rows imbriquées.
   ---------------------------------------------------------------- */
.sphera-archive-list > .wp-block-post {
	display: block;
	border: 0;
	padding: 0;
}

.sphera-archive-row {
	display: grid;
	grid-template-columns: 120px 180px 1fr 140px;
	gap: 1.5rem;
	align-items: baseline;
	padding: 1.25rem 0;
}

/* La miniature n'a pas de baseline : on la re-centre verticalement. */
.sphera-archive-row .sphera-archive-row__thumb,
.sphera-archive-row .wp-block-post-featured-image {
	align-self: center;
}

/* Reset des marges par défaut de <h1..h6> pour le titre (post-title est un heading) */
.sphera-archive-row .wp-block-post-title,
.sphera-archive-row .wp-block-post-title :is(h1, h2, h3, h4, h5, h6) {
	margin: 0;
	padding: 0;
}

/* Gutenberg peut injecter une décoration de lien sur post-terms. */
.wp-block-post-terms,
.wp-block-post-terms a,
.wp-block-post-terms a:hover,
.wp-block-post-terms a:focus,
.wp-block-post-terms a:active {
	text-decoration: none !important;
}

.sphera-archive-row .wp-block-post-terms,
.sphera-archive-row .wp-block-post-terms a {
	text-decoration: none;
}

/* Catégorie (taxonomy-category) — gris foncé, style Figma */
.wp-block-post-terms.taxonomy-category.has-gris-fonce-color,
.wp-block-post-terms.taxonomy-category.has-gris-fonce-color a {
	color: var(--wp--preset--color--gris-fonce, #616161);
	font-family: var(--wp--preset--font-family--massilia);
	font-size: var(--wp--preset--font-size--categorie, 15px);
	font-style: normal;
	font-weight: 200;
	line-height: 1.1;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	leading-trim: both;
	text-edge: cap;
}

/* Annule les règles `.is-layout-constrained > *` injectées par Gutenberg :
   sans ça, chaque enfant (date, catégorie, titre, thumb) reçoit
   `max-width: content-size` + `margin-inline: auto !important`, ce qui
   fait que le titre se réduit à `min-content` et s'affiche un caractère
   par ligne. On force les enfants à occuper 100 % de leur cellule. */
.sphera-archive-row > *,
.sphera-archive-row.is-layout-constrained > *,
.sphera-archive-row.wp-block-group-is-layout-constrained > * {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	min-width: 0;
}

.sphera-archive-row .wp-block-post-title {
	/* Permet au titre d'occuper toute sa cellule 1fr et de wrapper
	   sur plusieurs lignes si besoin, sans casser mot-à-mot. */
	word-break: normal;
	overflow-wrap: anywhere;
}

@media (max-width: 767px) {
	.sphera-archive-row {
		grid-template-columns: 1fr;
		gap: 0.5rem;
		align-items: start;
	}
	.sphera-archive-row__thumb,
	.sphera-archive-row .wp-block-post-featured-image {
		order: -1;
		align-self: start;
	}
}

.sphera-archive-row__date {
	font-family: var(--wp--preset--font-family--degular-mono);
	font-size: var(--wp--preset--font-size--note);
	letter-spacing: -0.02em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--wp--preset--color--gris-fonce);
	margin: 0;
}

.sphera-archive-row__cat {
	font-family: var(--wp--preset--font-family--degular-mono);
	font-size: var(--wp--preset--font-size--categorie);
	letter-spacing: 0.04em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--wp--preset--color--network-deep-blue);
	margin: 0;
}

.sphera-archive-row__cat a {
	color: inherit;
	text-decoration: none;
}

.sphera-archive-row__title {
	font-family: var(--wp--preset--font-family--massilia);
	font-size: var(--wp--preset--font-size--corps);
	font-weight: 500;
	line-height: 1.3;
	margin: 0;
}

.sphera-archive-row__title a {
	color: var(--wp--preset--color--network-dark-blue);
	text-decoration: none;
}

.sphera-archive-row__title a:hover {
	text-decoration: underline;
}

.sphera-archive-row__thumb img {
	border-radius: 4px;
}

/* ----------------------------------------------------------------
   Recherche — icône + texte centrés
   ---------------------------------------------------------------- */
.wp-block-search {
	display: flex;
	justify-content: center;
	width: 100%;
}

.wp-block-search__inside-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--micro, 6px);
	width: 100%;
	box-sizing: border-box;
}

.wp-block-search__inside-wrapper:has(.wp-block-search__input.has-network-dark-blue-border-color) {
	border: 1px solid var(--wp--preset--color--network-dark-blue, #00133a);
	border-radius: 6px;
	padding: 10px 16px;
	background: #fff;
}

.wp-block-search__inside-wrapper:has(.wp-block-search__input.has-network-dark-blue-border-color)::before {
	content: "";
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	background: url("../svg/search.svg") center / contain no-repeat;
}

.wp-block-search__input.has-network-dark-blue-border-color {
	border: none !important;
	outline: none;
	background: transparent;
	text-align: left;
	flex: 0 1 auto;
	width: 9.5ch;
	max-width: calc(100% - 30px);
	min-width: 0;
	padding: 0;
	field-sizing: content;
	font-family: var(--wp--preset--font-family--massilia);
	font-size: var(--wp--preset--font-size--corps);
	color: var(--wp--preset--color--network-dark-blue, #00133a);
}

.wp-block-search__input.has-network-dark-blue-border-color::placeholder {
	text-align: left;
	color: var(--wp--preset--color--network-dark-blue, #00133a);
	opacity: 1;
}

.sphera-search .wp-block-search__inside-wrapper {
	border: 1px solid var(--wp--preset--color--gris-moyen);
	border-radius: 6px;
	padding: 0.25rem;
	background: #fff;
}

.sphera-search .wp-block-search__input {
	border: 0;
	outline: 0;
	padding: 0.6rem 1rem;
	background: transparent;
	font-family: var(--wp--preset--font-family--massilia);
	font-size: var(--wp--preset--font-size--corps);
	flex: 1;
}

.sphera-search .wp-block-search__button {
	border: 0;
	border-radius: 6px;
	background: var(--wp--preset--color--network-dark-blue);
	color: var(--wp--preset--color--network-beige);
	font-family: var(--wp--preset--font-family--degular-mono);
	font-size: var(--wp--preset--font-size--note);
	letter-spacing: -0.02em;
	text-transform: uppercase;
	padding: 0.6rem 1.1rem;
	cursor: pointer;
}

/* ----------------------------------------------------------------
   Cover block — titre en surimpression (blanc, uppercase, Massilia)
   ---------------------------------------------------------------- */
.wp-block-cover {
	position: relative;
}

.wp-block-cover .wp-block-cover__link {
	position: absolute;
	inset: 0;
	z-index: 1;
	cursor: pointer;
}

.wp-block-cover .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	pointer-events: none;
}

.wp-block-cover .wp-block-cover__inner-container a {
	pointer-events: auto;
}

.wp-block-cover__inner-container.is-layout-flow {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: clamp(0.75rem, 2vw, 1.25rem);
	box-sizing: border-box;
	background: linear-gradient(
		to top,
		rgba(0, 19, 58, 0.72) 0%,
		rgba(0, 19, 58, 0.18) 70%,
		transparent 100%
	);
}

.wp-block-cover .wp-block-cover__inner-container .wp-block-post-title,
.wp-block-cover .wp-block-cover__inner-container.is-layout-flow .wp-block-post-title {
	display: inline !important;
	background: none;
	color: var(--wp--preset--color--network-beige, #faf8f2);
	padding: 0;
	border: none;
	box-shadow: none;
	text-shadow: none;
	margin: 0;
	font-family: var(--wp--preset--font-family--massilia);
	font-weight: 900;
	font-size: var(--wp--preset--font-size--h-4, clamp(1rem, 1.2vw + 0.6rem, 1.25rem));
	line-height: 1 !important;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	transform: none;
	transform-origin: left bottom;
	--sphera-headline-stroke: 0.0333em;
	--sphera-headline-shadow-x: -0.0667em;
	--sphera-headline-shadow-y: 0.0667em;
}

.wp-block-cover .wp-block-cover__inner-container .wp-block-post-title.has-network-beige-color,
.wp-block-cover .wp-block-cover__inner-container.is-layout-flow .wp-block-post-title.has-network-beige-color,
.wp-block-cover .wp-block-cover__inner-container .wp-block-post-title.has-blanc-color,
.wp-block-cover .wp-block-cover__inner-container.is-layout-flow .wp-block-post-title.has-blanc-color {
	color: var(--wp--preset--color--network-beige, #faf8f2);
}

.wp-block-cover .wp-block-cover__inner-container .wp-block-post-title a,
.wp-block-cover .wp-block-cover__inner-container.is-layout-flow .wp-block-post-title a {
	display: inline;
	width: auto;
	color: inherit;
	text-decoration: none !important;
	border: none;
	-webkit-text-stroke: var(--sphera-headline-stroke, 0.0333em) var(--wp--preset--color--network-dark-blue, #00133a);
	paint-order: stroke fill;
	text-shadow: var(--sphera-headline-shadow-x, -0.0667em) var(--sphera-headline-shadow-y, 0.0667em) 0 var(--wp--preset--color--network-dark-blue, #00133a);
}

.wp-block-cover .wp-block-cover__inner-container .wp-block-post-title a:hover,
.wp-block-cover .wp-block-cover__inner-container .wp-block-post-title a:focus,
.wp-block-cover .wp-block-cover__inner-container.is-layout-flow .wp-block-post-title a:hover,
.wp-block-cover .wp-block-cover__inner-container.is-layout-flow .wp-block-post-title a:focus,
.sphera-card--overlay .wp-block-cover__inner-container .wp-block-post-title a:hover,
.sphera-card--overlay .wp-block-cover__inner-container .wp-block-post-title a:focus,
.wp-block-post-title a:has(.titre-bleu-fin),
.wp-block-post-title a:has(.titre-bleu-fin):hover,
.wp-block-post-title a:has(.titre-bleu-fin):focus {
	text-decoration: none !important;
}

/* Derniers mots : fond bleu incliné (spec Figma Network/Headline) */
.wp-block-cover .titre-bleu-fin,
.wp-block-cover a .titre-bleu-fin,
.sphera-card--overlay .titre-bleu-fin {
	position: relative;
	display: inline;
	background-color: var(--wp--preset--color--network-deep-blue, #1352ff) !important;
	color: var(--wp--preset--color--blanc, #fff) !important;
	padding: 0.053em 0.35em;
	border: none;
	box-shadow: 0 0.0235em 0.0235em 0 rgba(0, 0, 0, 0.25);
	text-shadow: inherit;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	transform: rotate(-2deg);
	transform-origin: center center;
	min-height: 1.106em;
	vertical-align: baseline;
}

/* ----------------------------------------------------------------
   404
   ---------------------------------------------------------------- */
.sphera-404 {
	padding-block: clamp(3rem, 8vw, 6rem);
}

.sphera-404__inner {
	max-width: 720px;
	text-align: center;
}

.sphera-404__code {
	font-family: var(--wp--preset--font-family--degular-mono);
	font-size: var(--wp--preset--font-size--categorie);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--network-deep-blue);
	margin: 0 0 0.5rem;
}

.sphera-404__msg {
	font-family: var(--wp--preset--font-family--massilia);
	font-size: var(--wp--preset--font-size--corps);
	color: var(--wp--preset--color--gris-fonce);
	margin: 1rem auto 1.5rem;
	max-width: 560px;
}