/* ==========================================================================
   Mediba blog - habillage premium (au-dela de theme.json)
   Palette : --wp--preset--color--{primary,primary-alt,background,muted,
   accent,card,border,foreground}. Typo corps : Geist.
   ========================================================================== */

:root {
	--mediba-radius: 14px;
	--mediba-radius-lg: 22px;
	--mediba-shadow: 0 1px 2px rgba(2, 119, 151, .04), 0 8px 24px -12px rgba(2, 119, 151, .18);
	--mediba-shadow-hover: 0 2px 4px rgba(2, 119, 151, .06), 0 18px 40px -16px rgba(2, 119, 151, .28);
	--mediba-ink: #0f2b33;
	--mediba-muted-ink: #5b7079;
}

body {
	color: var(--mediba-ink);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Safari iOS zoome sur le champ des qu'il a une police sous 16px. On pose un
   plancher a 16px plutot que de brider le pinch-zoom via maximum-scale sur le
   viewport, qui retirerait le zoom manuel a tout le monde. Limite aux champs de
   saisie : cases a cocher, radios et boutons ne declenchent pas ce zoom. */
input:where(
	[type="text"], [type="email"], [type="search"],
	[type="url"], [type="tel"], [type="password"], [type="number"]
),
textarea,
select {
	font-size: max(16px, 1rem);
}

/* Focus visible partout (accessibilite) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	border-radius: 6px;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.mediba-header {
	position: sticky;
	top: 0;
	z-index: 50;
	padding-block: .85rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
	background: rgba(255, 255, 255, .92) !important;
}
/* Blur sur un pseudo-element : backdrop-filter sur le header lui-meme en
   ferait le containing block du menu burger (position fixed), qui se
   retrouverait piege dans la hauteur du header. */
.mediba-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	-webkit-backdrop-filter: saturate(1.1) blur(6px);
	backdrop-filter: saturate(1.1) blur(6px);
}
.mediba-header-inner { align-items: center; gap: 1.5rem; }
.mediba-logo { display: inline-flex; align-items: center; }
.mediba-logo img { height: 34px; width: auto; display: block; }
/* Navigation desktop calquée sur le header de l'app (PublicHeader) : liens
   DM Sans, et un dropdown "Blog & Fiches" fait maison (un seul bouton
   libellé + chevron, panneau au survol/focus) - pur CSS, sans le bloc
   navigation WordPress ni sa couche JS (qui rendait deux éléments cliquables
   et laissait le panneau coincé ouvert). */
.mediba-nav {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2vw, 2rem);
	font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif;
	font-size: .875rem;
	font-weight: 500;
	line-height: 1.25rem;
}
.mediba-nav > a,
.mediba-nav-trigger {
	color: rgb(31 41 55 / .8);
	text-decoration: none;
	transition: color .15s ease;
}
.mediba-nav > a:hover,
.mediba-nav-trigger:hover { color: rgb(31 41 55); }
.mediba-nav-item { position: relative; }
.mediba-nav-trigger {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	padding: 0;
	border: 0;
	background: transparent;
	font: inherit;
	cursor: pointer;
}
.mediba-nav-chevron { transition: transform .15s ease; }
.mediba-nav-item:hover .mediba-nav-chevron,
.mediba-nav-item:focus-within .mediba-nav-chevron { transform: rotate(180deg); }
/* Le padding-top fait le pont invisible sous le bouton : le survol reste
   continu du déclencheur au panneau (comme l'app). */
.mediba-nav-menu {
	position: absolute;
	top: 100%;
	left: 0;
	padding-top: .5rem;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-.25rem);
	transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
}
.mediba-nav-item:hover .mediba-nav-menu,
.mediba-nav-item:focus-within .mediba-nav-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity .15s ease, transform .15s ease;
}
.mediba-nav-menu-inner {
	min-width: 13rem;
	padding: .375rem;
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--mediba-radius);
	box-shadow: var(--mediba-shadow);
}
.mediba-nav-menu-inner a {
	display: block;
	padding: .5rem .75rem;
	border-radius: 8px;
	color: rgb(31 41 55 / .8);
	text-decoration: none;
	transition: color .15s ease, background-color .15s ease;
}
.mediba-nav-menu-inner a:hover {
	color: rgb(31 41 55);
	background: var(--wp--preset--color--accent);
}

.mediba-header .wp-block-buttons { gap: .6rem; }
.mediba-header .wp-block-button__link { white-space: nowrap; }

/* Bouton "Consulter" mobile (calque le header staging : visible sous lg) */
.mediba-header-consult {
	display: none;
	align-items: center;
	box-sizing: border-box;
	min-height: 44px; /* cible tactile */
	background: var(--wp--preset--color--primary);
	color: #fff !important;
	font-weight: 600;
	font-size: .9rem;
	text-decoration: none;
	border-radius: 999px;
	padding: .55rem 1.1rem;
	white-space: nowrap;
}
/* Burger + menu lateral (Sheet) : replique du header de l'app
   (PublicHeader + shadcn sheet) - bouton min 44px arrondi, panneau droit
   75% / max 384px, overlay noir 80%, slide 150ms in / 100ms out. */
.mediba-burger {
	display: none;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	box-sizing: border-box;
	padding: 0;
	border: 0;
	background: transparent;
	border-radius: 12px;
	color: rgba(31, 41, 55, .8);
	cursor: pointer;
	touch-action: manipulation;
	transition: color .15s ease, background-color .15s ease;
}
.mediba-burger:hover {
	color: rgb(31, 41, 55);
	background: rgba(216, 241, 243, .6);
}
.mediba-sheet-overlay {
	position: fixed;
	inset: 0;
	z-index: 98;
	background: rgba(0, 0, 0, .8);
	opacity: 0;
	transition: opacity .1s linear;
}
.mediba-sheet-overlay.is-open { opacity: 1; }
.mediba-sheet {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 99;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	width: 75%;
	max-width: 384px;
	box-sizing: border-box;
	padding: 1.5rem;
	background: var(--wp--preset--color--card);
	border-left: 1px solid var(--wp--preset--color--border);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
	transform: translateX(100%);
	transition: transform .15s ease-in-out;
}
.mediba-sheet.is-open { transform: translateX(0); }
.mediba-sheet:not(.is-open) { transition-duration: .1s; }
.mediba-sheet-logo { height: 32px; width: auto; align-self: flex-start; }
.mediba-sheet-nav { display: flex; flex-direction: column; gap: .25rem; }
.mediba-sheet-nav a {
	padding-block: .75rem;
	color: rgba(31, 41, 55, .9);
	font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif;
	font-weight: 500;
	font-size: 1rem;
	text-decoration: none;
	transition: color .15s ease;
}
.mediba-sheet-nav a:hover { color: rgb(31, 41, 55); }
.mediba-sheet-actions {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: .5rem;
}
.mediba-sheet-btn {
	padding: .75rem 1.25rem;
	border-radius: 12px;
	text-align: center;
	font-size: .875rem;
	font-weight: 500;
	text-decoration: none;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--primary);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
	transition: background-color .15s ease;
}
.mediba-sheet-btn:hover { background: rgba(216, 241, 243, .8); }
.mediba-sheet-btn.is-primary {
	background: var(--wp--preset--color--primary);
	color: #fff;
	font-weight: 600;
}
.mediba-sheet-btn.is-primary:hover { background: rgba(2, 119, 151, .9); }
.mediba-sheet-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	padding: .25rem;
	border: 0;
	background: transparent;
	color: inherit;
	border-radius: 2px;
	opacity: .7;
	cursor: pointer;
	transition: opacity .15s ease;
}
.mediba-sheet-close:hover { opacity: 1; }
.mediba-sheet-lock { overflow: hidden; }

/* Boutons */
.wp-block-button__link {
	border-radius: 999px;
	font-weight: 600;
	font-size: .92rem;
	padding: .62rem 1.25rem;
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary-alt);
	transform: translateY(-1px);
	box-shadow: 0 8px 18px -8px rgba(2, 119, 151, .5);
}
.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--primary);
	border: 1.5px solid var(--wp--preset--color--border);
}
.is-style-outline .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--accent);
}

/* --------------------------------------------------------------------------
   Hero de page (listing / archive / conseils)
   -------------------------------------------------------------------------- */
main.wp-block-group { padding-top: clamp(2.5rem, 5vw, 4rem) !important; }
main > .wp-block-heading.has-xx-large-font-size,
main > .wp-block-query-title {
	letter-spacing: -.02em;
	line-height: 1.08;
	margin-bottom: .5rem;
	/* Moranga n'expose que 400 et 500-700 : la graisse 300 demandee n'existe
	   pas, 400 est le rendu le plus leger disponible pour la marque. Valeur
	   ecrite en dur pour ne pas dependre du font matching. */
	font-weight: 400;
}
main > .has-text-align-center:not(.wp-block-heading) {
	color: var(--mediba-muted-ink);
	font-size: 1.075rem;
	max-width: 40rem;
	margin-inline: auto;
	margin-bottom: 2.25rem;
}

/* --------------------------------------------------------------------------
   Pills categories
   -------------------------------------------------------------------------- */
.mediba-pills-label {
	text-transform: uppercase;
	font-size: .78rem;
	letter-spacing: .08em;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	margin: 0 0 .75rem;
}
/* Alignee a gauche et sur toute la colonne de contenu (1200px) : l'ancien
   max-width de 66rem centrait la rangee sur une largeur plus etroite que la
   grille de cartes. */
.mediba-pills {
	gap: .5rem;
	justify-content: flex-start;
	margin-bottom: 2.5rem;
}
.mediba-pill { margin: 0; }
.mediba-pill a {
	display: inline-block;
	padding: .5rem 1rem;
	border-radius: 999px;
	background: var(--wp--preset--color--accent);
	border: 0;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	font-size: .875rem;
	font-weight: 600;
	transition: background-color .15s ease, color .15s ease;
}
.mediba-pill a:hover { background: #c5e8ec; }
.mediba-pill.is-active a {
	background: var(--wp--preset--color--primary);
	color: #fff;
}

/* --------------------------------------------------------------------------
   Grille + cartes article
   -------------------------------------------------------------------------- */
.wp-block-post-template.is-layout-grid { gap: 1.5rem; }
.mediba-card {
	position: relative;
	border-radius: var(--mediba-radius-lg);
	overflow: hidden;
	padding: 0 0 .9rem !important;
	height: 100%;
	border: 1px solid rgba(2, 119, 151, .06);
	box-shadow: 0 15px 45px -25px rgba(2, 119, 151, .35);
	transition: transform .2s ease, box-shadow .2s ease;
}
.mediba-card:hover { transform: translateY(-4px); box-shadow: 0 22px 55px -22px rgba(2, 119, 151, .42); }
.mediba-card > *:not(.mediba-cover):not(.wp-block-post-featured-image) { padding-inline: 1.35rem; }
.mediba-card > *:not(.mediba-cover):not(.wp-block-post-featured-image):first-child { padding-top: 1.35rem; }

/* Photo a la une (remplace l'illustration sur le listing) */
.mediba-card .wp-block-post-featured-image {
	display: block;
	margin: 0 0 1.1rem;
}
.mediba-card .wp-block-post-featured-image a { display: block; }
.mediba-card .wp-block-post-featured-image img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
	transition: transform .25s ease;
}
.mediba-card:hover .wp-block-post-featured-image img { transform: scale(1.04); }

/* Cover illustre par la charte : meme ratio que la photo a la une pour que
   la zone image (et donc l'espace image -> titre) soit identique sur toutes
   les cards d'une grille, photo ou illustration */
.mediba-cover {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin: 0 0 1.1rem;
	background: var(--wp--preset--color--muted);
	overflow: hidden;
}
.mediba-cover img {
	width: 88px;
	height: 88px;
	object-fit: contain;
	transition: transform .25s ease;
}
.mediba-card:hover .mediba-cover img { transform: scale(1.06) rotate(-2deg); }

/* Teintes par categorie (douces, cohesion charte) */
.mediba-cover[data-cat="sante-courante"]   { background: #e6f3f4; }
.mediba-cover[data-cat="sante-feminine"]   { background: #fdeef0; }
.mediba-cover[data-cat="sante-sexuelle"]   { background: #fcecec; }
.mediba-cover[data-cat="dermatologie"]     { background: #fff2e6; }
.mediba-cover[data-cat="sante-mentale"]    { background: #eef0fb; }
.mediba-cover[data-cat="bilan-biologique"] { background: #e7f0fb; }
.mediba-cover[data-cat="nutrition"]        { background: #eaf6ec; }
.mediba-cover[data-cat="addiction"]        { background: #f1edfb; }
.mediba-cover[data-cat="medicaments"]      { background: #e6f4f1; }
.mediba-cover[data-cat="actualites-sante"] { background: #eef4f6; }

/* Badge categorie (eyebrow) */
.mediba-badge {
	text-transform: uppercase;
	font-size: .68rem;
	letter-spacing: .07em;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	margin-top: 0 !important;
	margin-bottom: .35rem !important;
}
.mediba-badge a { color: inherit; text-decoration: none; }

.mediba-card .wp-block-post-title {
	margin: 0 0 .55rem;
	line-height: 1.28;
	letter-spacing: -.01em;
	font-size: 1.1rem !important;
	font-weight: 600;
}
.mediba-card .wp-block-post-title a { color: var(--mediba-ink); text-decoration: none; }
.mediba-card .wp-block-post-title a:hover { color: var(--wp--preset--color--primary); }
.mediba-card .wp-block-post-excerpt {
	color: var(--mediba-muted-ink);
	font-size: .92rem;
	line-height: 1.55;
	margin-bottom: .55rem;
}
.mediba-card .wp-block-post-excerpt__more-text { display: none; }

/* Temps de lecture avec picto horloge */
.mediba-reading-time {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	margin-top: .1rem;
	font-size: .8rem;
	font-weight: 600;
	color: #2f7d95;
}

/* Pictos meta (auteur / date / lecture) - icone reelle (pas ::before, laisse
   le pseudo-element libre pour le point separateur de .mediba-meta) */
.mediba-ico {
	display: inline-block;
	width: 15px;
	height: 15px;
	flex: none;
	background: no-repeat center / contain;
}
.mediba-ico-clock {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f7d95' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}
.mediba-ico-author {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f7d95' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}
.mediba-ico-date {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f7d95' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
}

/* Pagination */
.wp-block-query-pagination { margin-top: 2.5rem; gap: .5rem; justify-content: center; }
.wp-block-query-pagination-numbers { display: inline-flex; gap: .5rem; }
.wp-block-query-pagination .wp-block-query-pagination-numbers .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	border-radius: 999px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	font-weight: 600;
	font-size: .9rem;
	transition: background-color .15s ease, color .15s ease;
}
.wp-block-query-pagination .wp-block-query-pagination-numbers .page-numbers:hover { background: #c5e8ec; }
.wp-block-query-pagination .page-numbers.current {
	background: var(--wp--preset--color--primary);
	color: #fff;
}
.wp-block-query-pagination-next,
.wp-block-query-pagination-previous {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: 0 1.1rem;
	height: 2.25rem;
	border-radius: 999px;
	background: var(--wp--preset--color--primary);
	color: #fff !important;
	text-decoration: none;
	font-weight: 600;
	font-size: .9rem;
	transition: background-color .15s ease;
}
.wp-block-query-pagination-next:hover,
.wp-block-query-pagination-previous:hover { background: var(--wp--preset--color--primary-alt); }
.wp-block-query-pagination-next::after { content: "\203A"; font-size: 1.1em; line-height: 1; }
.wp-block-query-pagination-previous::before { content: "\2039"; font-size: 1.1em; line-height: 1; }

/* --------------------------------------------------------------------------
   CTA consultation
   -------------------------------------------------------------------------- */
.wp-block-group.has-primary-background-color:not(.mediba-footer):not(.mediba-urgence) {
	border-radius: var(--mediba-radius-lg) !important;
	background: var(--wp--preset--color--primary) !important;
	padding: clamp(2.5rem, 4vw, 3.5rem) 1.5rem !important;
	margin-top: 3.5rem;
	box-shadow: 0 24px 48px -28px rgba(2, 119, 151, .45);
}
.wp-block-group.has-primary-background-color:not(.mediba-footer) h2 { letter-spacing: -.01em; }
.wp-block-group.has-primary-background-color:not(.mediba-footer) .wp-block-button__link {
	background: #fff;
	color: var(--wp--preset--color--primary);
	padding: .8rem 1.75rem;
}
.wp-block-group.has-primary-background-color:not(.mediba-footer) .wp-block-button__link:hover {
	background: var(--wp--preset--color--accent);
}
/* Sous-titre du CTA : assez petit pour tenir sur une seule ligne dans la
   colonne du bloc (760px) ; il repasse sur deux lignes sous ~700px. */
.mediba-cta-sub {
	font-size: .95rem;
	line-height: 1.55;
}
.mediba-cta-arrow .wp-block-button__link::after {
	content: "\2192";
	margin-left: .5rem;
	display: inline-block;
}

/* --------------------------------------------------------------------------
   Newsletter
   -------------------------------------------------------------------------- */
.wp-block-group.has-accent-background-color:not(.mediba-vision):not(.mediba-newsletter-band) {
	border-radius: var(--mediba-radius-lg);
	margin-top: 2rem;
	padding: clamp(2.25rem, 4vw, 3rem) 1.5rem !important;
}
/* Bandeau pleine largeur (alignfull) : pas d'arrondi, le fond va d'un bord
   a l'autre de la page. Le contenu reste borne par le layout constrained. */
.mediba-newsletter-band {
	border-radius: 0;
	margin-top: 3.5rem;
	padding-block: clamp(3rem, 6vw, 4.5rem) !important;
}
/* Quand le bandeau ferme la page, il doit toucher le bandeau d'urgence. Deux
   ecarts a neutraliser : le block gap que WP pose entre les parties du gabarit
   (24px sur .wp-site-blocks > *) et le margin-top qui aere le footer sur les
   autres pages.
   Ces trois regles supposent le bandeau en DERNIER enfant du main : deplace
   ailleurs dans le gabarit, elles cessent simplement de s'appliquer (sans
   erreur) et les ecarts reviennent. */
main.wp-block-group:has(> .mediba-newsletter-band:last-child) {
	/* Le main n'a aujourd'hui aucun padding vertical au rendu (l'attribut du
	   gabarit n'est pas serialise), mais une sauvegarde du gabarit depuis
	   l'editeur de site le reintroduirait : on le neutralise d'avance. */
	padding-bottom: 0 !important;
}
main.wp-block-group:has(> .mediba-newsletter-band:last-child) + .wp-block-template-part {
	margin-block-start: 0;
}
main.wp-block-group:has(> .mediba-newsletter-band:last-child) + .wp-block-template-part .mediba-urgence {
	margin-top: 0;
}
.mediba-newsletter-band .wp-block-heading { font-size: clamp(1.75rem, 3.2vw, 2.25rem); margin: 0; }
.mediba-newsletter-band > p {
	font-size: 1.075rem;
	line-height: 1.6;
	max-width: 34rem;
	margin: 1rem auto 0;
	/* Teinte de marque plutot que la couleur de texte heritee. primary-alt et
	   non primary : sur le fond accent, primary plafonne a 4.35:1 et rate le
	   4.5:1 exige par WCAG AA a cette taille, primary-alt donne 6.29:1. */
	color: var(--wp--preset--color--primary-alt);
}
.mediba-newsletter { display: flex; gap: .5rem; max-width: 460px; margin: 2rem auto 0; }
.mediba-newsletter input {
	flex: 1;
	min-width: 0;
	padding: .7rem 1.25rem;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--border);
	background: #fff;
	font-family: inherit;
	font-weight: 400;
	line-height: 1.5;
}
.mediba-newsletter button {
	padding: .7rem 1.4rem;
	border-radius: 999px;
	border: 0;
	background: var(--wp--preset--color--primary);
	color: #fff;
	font-size: .875rem;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .15s ease;
}
.mediba-newsletter button:hover { background: var(--wp--preset--color--primary-alt); }

/* --------------------------------------------------------------------------
   Article (single)
   -------------------------------------------------------------------------- */
.single-post main.wp-block-group > .mediba-badge { text-align: left; margin-bottom: .5rem !important; }
.single-post .wp-block-post-title { letter-spacing: -.02em; line-height: 1.12; margin-bottom: .75rem; }
/* Voir la note sur les graisses Moranga au niveau du hero de listing. */
.single-post main > .wp-block-post-title { font-weight: 400; }

/* Typo article : titres en Moranga (police de marque Mediba), corps en DM Sans
   (le listing garde le reglage global - regle scopee a .single-post uniquement). */
.single-post .wp-block-heading,
.single-post .wp-block-post-title,
.single-post .wp-block-post-content h2,
.single-post .wp-block-post-content h3 {
	font-family: Moranga, "DM Sans", ui-sans-serif, system-ui, sans-serif;
	font-weight: 500;
}
.single-post .wp-block-post-content {
	font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif;
}

/* Pilule "Consulter un medecin en ligne" (sous la meta, au-dessus du hero).
   Le wrap est bloc : il recoit les marges auto du layout constrained et cale
   la pilule sur la colonne de contenu (un inline-flex seul colle au viewport). */
.mediba-consult-wrap { margin: .25rem 0 2rem; }
.mediba-consult-pill {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	background: #fff;
	border-radius: 999px;
	padding: .55rem 1.1rem;
	box-shadow: 0 1px 2px rgba(2, 119, 151, .1);
}
.mediba-consult-pill a {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	font-size: .88rem;
	text-decoration: none;
}
/* Pastille de disponibilite : pulsation lente facon indicateur "en ligne".
   Le halo vit sur ::after pour ne pas deformer le point lui-meme.
   Neutralisee par la regle prefers-reduced-motion en bas de fichier, qui cible
   aussi les pseudo-elements. */
.mediba-consult-dot {
	position: relative;
	width: 10px;
	height: 10px;
	flex: none;
	border-radius: 50%;
	background: #22c55e;
	animation: mediba-dot-blink 1.8s ease-in-out infinite;
}
.mediba-consult-dot::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: #22c55e;
	animation: mediba-dot-halo 1.8s ease-out infinite;
}
@keyframes mediba-dot-blink {
	0%, 100% { opacity: 1; }
	50% { opacity: .55; }
}
@keyframes mediba-dot-halo {
	0% { transform: scale(1); opacity: .5; }
	70%, 100% { transform: scale(2.6); opacity: 0; }
}

/* Fil d'Ariane */
.mediba-breadcrumb { margin: 0 0 1.1rem; }
.mediba-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4rem;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: .85rem;
	color: var(--mediba-muted-ink);
}
.mediba-breadcrumb a { color: inherit; text-decoration: none; }
.mediba-breadcrumb a:hover { color: var(--wp--preset--color--primary); }
.mediba-breadcrumb-current { color: var(--wp--preset--color--primary); font-weight: 600; }
.mediba-breadcrumb-sep { opacity: .55; }

.mediba-meta {
	gap: 1.1rem;
	align-items: center;
	color: var(--mediba-muted-ink);
	font-size: .9rem;
	margin: 0 0 1.75rem;
	flex-wrap: wrap;
}
.mediba-meta > * { position: relative; }
.mediba-meta > * + *::before {
	content: "";
	position: absolute;
	left: -.6rem;
	top: 50%;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: currentColor;
	transform: translateY(-50%);
	opacity: .5;
}
.mediba-meta-item { display: inline-flex; align-items: center; gap: .4rem; }
.mediba-meta .wp-block-post-author-name { display: inline; }
.mediba-meta .wp-block-post-author-name a { color: var(--wp--preset--color--primary); text-decoration: none; font-weight: 600; }

/* Hero photo de l'article (image a la une) */
.mediba-article-hero { margin: 0 0 2.5rem; }
.mediba-article-hero .wp-block-post-featured-image { margin: 0; }
.mediba-article-hero .wp-block-post-featured-image img {
	width: 100%;
	max-height: 440px;
	object-fit: cover;
	display: block;
	border-radius: var(--mediba-radius-lg);
}
/* Repli illustration si l'article n'a pas d'image a la une */
.mediba-article-hero .mediba-cover {
	height: 260px;
	border-radius: var(--mediba-radius-lg);
	margin: 0;
}
.mediba-article-hero .mediba-cover img { width: 132px; height: 132px; }

/* Colonnes article + sommaire (sommaire a droite, etroit, sticky) */
.mediba-article-cols { gap: 3rem; align-items: flex-start; }
.mediba-toc {
	position: sticky;
	top: 5.5rem;
	background: transparent;
	border: 0;
	padding: 0;
}
.mediba-toc-title {
	font-weight: 700;
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .07em;
	margin: 0 0 .75rem;
	color: var(--wp--preset--color--primary);
}
.mediba-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .1rem; }
.mediba-toc a {
	display: block;
	padding: .28rem .5rem .28rem .7rem;
	color: var(--mediba-muted-ink);
	text-decoration: none;
	font-size: .8rem;
	line-height: 1.35;
	border-left: 2px solid transparent;
	border-radius: 0 6px 6px 0;
	transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.mediba-toc a:hover { color: var(--wp--preset--color--primary); }
.mediba-toc a.is-active {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	border-left-color: var(--wp--preset--color--primary);
	background: transparent;
}

/* Corps de l'article - gris-bleu doux (au lieu du texte tres sombre) */
.wp-block-post-content { font-size: 1.06rem; line-height: 1.75; color: #24333a; }
.single-post .wp-block-post-content { color: #547583; }
.wp-block-post-content > h2 {
	margin-top: 2.5rem;
	margin-bottom: .75rem;
	font-size: 1.55rem;
	letter-spacing: -.01em;
	scroll-margin-top: 6rem;
}
.wp-block-post-content > h3 { margin-top: 1.75rem; scroll-margin-top: 6rem; }
.wp-block-post-content > p { margin: 0 0 1.15rem; }
.wp-block-post-content a { color: var(--wp--preset--color--primary); text-underline-offset: 3px; }
.wp-block-post-content ul { padding-left: 1.25rem; }
.wp-block-post-content li { margin: .3rem 0; }
.single-post .wp-block-post-content ul { list-style: none; padding-left: 0; margin: 0 0 1.15rem; }
.single-post .wp-block-post-content li { position: relative; margin: .4rem 0; padding-left: 1.35rem; }
.single-post .wp-block-post-content li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .65em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
}
.single-post .wp-block-post-content strong {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}

/* Encadre "a retenir" */
.mediba-callout {
	border-radius: var(--mediba-radius);
	border: 1px solid #bfe6ea;
	background: var(--wp--preset--color--accent) !important;
	padding: 1.35rem 1.5rem !important;
	margin: 2rem 0;
}
.mediba-callout h3 { margin-top: 0; color: var(--wp--preset--color--primary); }
.mediba-quickread-eyebrow {
	display: inline-block;
	background: #fff;
	color: var(--wp--preset--color--primary);
	text-transform: uppercase;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .07em;
	padding: .32rem .8rem;
	border-radius: 999px;
	margin: 0 0 .85rem;
}
.mediba-callout ul { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.mediba-quickread-foot { margin: 1rem 0 0; font-size: .82rem; color: var(--mediba-muted-ink); }
.single-post .mediba-callout li { position: relative; padding-left: 1.9rem; margin: 0; }
.single-post .mediba-callout li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .05rem;
	width: 1.25rem;
	height: 1.25rem;
	background: no-repeat center / contain
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23027797'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1.2 14.3l-4-4 1.4-1.4 2.6 2.6 5.2-5.2 1.4 1.4z'/%3E%3C/svg%3E");
}

/* FAQ - blocs Details natifs, a plat (filets, pas de carte) */
.wp-block-details {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	border-radius: 0;
	padding: 1.1rem 0;
	margin: 0;
	box-shadow: none !important;
}
.wp-block-details:last-of-type { border-bottom: 0; }
.wp-block-details summary {
	cursor: pointer;
	font-weight: 600;
	font-size: 1.02rem;
	color: var(--wp--preset--color--primary);
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after {
	content: "";
	width: 16px;
	height: 16px;
	flex: none;
	background: no-repeat center / contain
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a9aa1' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	transition: transform .2s ease;
}
.wp-block-details[open] summary::after { transform: rotate(180deg); }
.wp-block-details p { margin: .7rem 0 0; }

/* Encadres info / avertissement dans le corps de l'article (disclaimers) */
.mediba-note {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
	border-radius: var(--mediba-radius);
	padding: 1.05rem 1.3rem;
	margin: 1.5rem 0;
	font-size: .95rem;
	line-height: 1.55;
}
.mediba-note-icon { flex: none; font-size: 1.1rem; line-height: 1.5; }
.mediba-note-warning { background: #fff8e6; border: 1px solid #f5dfa0; color: #7a5b12; }
.mediba-note-info {
	background: var(--wp--preset--color--accent);
	border: 1px solid #bfe6ea;
	color: var(--mediba-ink);
}

/* Carte "a retenir" (seule note du corps de texte a rester encadree, hors
   disclaimers ci-dessus) : bordure gauche teal, fond blanc. */
.mediba-note-card {
	background: #fff;
	border-left: 4px solid var(--wp--preset--color--primary);
	border-radius: 0 var(--mediba-radius) var(--mediba-radius) 0;
	box-shadow: var(--mediba-shadow);
	padding: 1.25rem 1.5rem;
	margin: 2rem 0;
}
.mediba-note-card p { margin: 0; }
.mediba-note-card-title {
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	margin: 0 0 .5rem !important;
}

/* CTA intermediaires dans le corps de l'article */
.mediba-content-cta {
	border-radius: var(--mediba-radius-lg);
	padding: clamp(1.75rem, 4vw, 2.5rem) 1.75rem !important;
	margin: 2.5rem 0;
	text-align: center;
}
.mediba-content-cta h3 { margin-top: 0; color: #fff; }
.mediba-content-cta p { color: rgba(255, 255, 255, .9); }
.mediba-content-cta .mediba-content-cta-note { font-size: .82rem; color: rgba(255, 255, 255, .9); margin: .85rem 0 0; }

/* Titres de section article (Articles lies, Sources...) */
.single-post main > .wp-block-heading { margin-top: 3rem; letter-spacing: -.01em; }

/* --------------------------------------------------------------------------
   Articles associes : carrousel horizontal
   -------------------------------------------------------------------------- */
.mediba-related-head { align-items: center; justify-content: space-between; margin: 3rem 0 1.5rem; }
.mediba-related-head .wp-block-heading { margin: 0; text-align: left; }
.mediba-related-nav { display: flex; gap: .6rem; }
.mediba-related-arrow {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 999px;
	border: 0;
	background: var(--wp--preset--color--primary);
	color: #fff;
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color .15s ease, opacity .15s ease;
}
.mediba-related-arrow:hover { background: var(--wp--preset--color--primary-alt); }
.mediba-related-arrow:disabled { opacity: .35; cursor: default; }
.mediba-related-track .wp-block-post-template {
	display: flex !important;
	gap: 1.5rem;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	/* overflow-x:auto force overflow-y a "auto" et rogne l'ombre douce des cartes :
	   dans le carrousel elle etait coupee en haut/bas et sur les cotes (ombre
	   gauche de la 1re carte, droite de la derniere). On menage la place a l'ombre
	   sur les deux axes (meme rendu que le listing /blog), puis on reabsorbe
	   l'ecart avec des marges negatives pour que ni les cartes ni la section ne
	   bougent. */
	padding-top: 1.25rem;
	padding-bottom: 3rem;
	padding-inline: 1.25rem;
	margin-top: -1.25rem;
	margin-bottom: -2.6rem;
	margin-inline: -1.25rem;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.mediba-related-track .wp-block-post-template::-webkit-scrollbar { display: none; }
.mediba-related-track .mediba-card {
	flex: 0 0 clamp(230px, 27vw, 300px) !important;
	width: clamp(230px, 27vw, 300px) !important;
	max-width: clamp(230px, 27vw, 300px) !important;
	scroll-snap-align: start;
}
/* Cartes identiques a celles du listing (image 16/9, badge, titre, extrait,
   temps de lecture) : aucune surcharge de format ici, seules les mecaniques
   du carousel restent. Le titre garde un clamp a 2 lignes pour que les cartes
   d'une meme rangee alignent extrait et temps de lecture. */
.mediba-related-track .mediba-card { display: flex; flex-direction: column; }
/* Le clamp vit sur le lien (seul contenant direct du texte) : sur le h3,
   le a inline-block forme une ligne atomique -> coupe sans ellipse + decalage */
.mediba-related-track .mediba-card .wp-block-post-title {
	line-height: 1.3;
	min-height: 2.6em;
}
.mediba-related-track .mediba-card .wp-block-post-title a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-clamp: 2;
	overflow: hidden;
}
/* Dernier element de la carte ancre en bas : temps de lecture sur les articles
   associes, lien "Lire l'article" sur la fiche auteur. */
.mediba-related-track .mediba-card .mediba-reading-time,
.mediba-related-track .mediba-card .mediba-card-more { margin-top: auto; }
/* La carte passe en flex column ici : les marges auto du layout "constrained"
   de WP y centreraient badge et temps de lecture. On les recale a gauche pour
   coller aux cartes du listing. */
.mediba-related-track .mediba-card .wp-block-post-title { text-align: left; }
.mediba-related-track .mediba-card .mediba-badge,
.mediba-related-track .mediba-card .mediba-reading-time {
	align-self: flex-start;
	/* !important : le layout "constrained" de WP centre les enfants avec
	   margin-inline: auto !important, qu'il faut donc surcharger explicitement. */
	margin-inline: 0 !important;
}
.mediba-card-more {
	display: inline-block;
	margin-top: .2rem;
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	font-size: .88rem;
	text-decoration: none;
}
.mediba-card-more:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Conseils medicaux (archive pathologie)
   -------------------------------------------------------------------------- */
/* Colonne un peu plus etroite que le reste du blog (~75% du 1440, comme la maquette). */
.post-type-archive-pathologie main.wp-block-group { --wp--style--global--content-size: 68rem; }
.post-type-archive-pathologie .mediba-pills-label {
	/* Rendu en <h2> ici (vs <p> sur le listing blog) : on neutralise l'heritage
	   Moranga, taille/graisse/marge restent celles du style de base pour un
	   label identique a la page /blog. */
	font-family: inherit;
}
.mediba-filter { display: flex; flex-wrap: wrap; gap: .5rem .625rem; justify-content: flex-start; margin: 0 0 2.5rem; max-width: var(--wp--style--global--content-size, 60rem); }
.mediba-filter .mediba-pill a { cursor: pointer; }
.mediba-patho-group { margin-bottom: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--wp--preset--color--border); }
.mediba-patho-group:last-child { border-bottom: 0; padding-bottom: 0; }
.mediba-pill-title {
	display: inline-block;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--primary);
	/* <h2> : sans ca, heriterait de Moranga. On garde la police du corps pour
	   matcher les pills de filtre juste au-dessus. */
	font-family: inherit;
	font-size: .875rem;
	font-weight: 600;
	letter-spacing: normal;
	padding: .375rem 1rem;
	border-radius: 999px;
	margin: 0 0 1.25rem;
}
.mediba-patho-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	column-gap: 1.5rem;
	row-gap: .25rem;
}
.mediba-patho-list li { padding: .625rem 0; }
.mediba-patho-list a {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.5;
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
	transition: color .15s ease;
}
/* Chevron revele au survol, glisse depuis la gauche (maquette). Couleur en dur
   car il n'apparait qu'a l'etat survole/focus, ou le lien est toujours primary. */
.mediba-patho-list a::after {
	content: "";
	width: 14px;
	height: 14px;
	flex: none;
	background: center / 14px 14px no-repeat
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23027797' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity .2s ease, transform .2s ease;
}
.mediba-patho-list a:hover,
.mediba-patho-list a:focus-visible { color: var(--wp--preset--color--primary); }
.mediba-patho-list a:hover::after,
.mediba-patho-list a:focus-visible::after { opacity: 1; transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
	.mediba-patho-list a::after { transition: opacity .2s ease; transform: none; }
}

/* --------------------------------------------------------------------------
   Fiche auteur
   -------------------------------------------------------------------------- */
.author main > .wp-block-query-title {
	letter-spacing: -.02em;
	margin-bottom: .35rem;
	color: var(--wp--preset--color--primary);
}
.author .wp-block-query-title::after {
	content: "";
	display: block;
	width: 2.5rem;
	height: 3px;
	background: var(--wp--preset--color--primary);
	margin: .6rem auto 0;
	border-radius: 2px;
}
.mediba-author-role {
	text-align: center;
	color: var(--wp--preset--color--primary);
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	font-size: 1.05rem;
	margin-bottom: 1.25rem;
}
.author .wp-block-post-author-biography {
	text-align: center;
	color: var(--mediba-muted-ink);
	line-height: 1.7;
}
/* Scope a main : sans lui, la regle attrape aussi les boutons du header */
.author main .wp-block-buttons { margin: 1.5rem 0 2.5rem; }

/* Bouton "Suivre sur LinkedIn" avec logo : compact et centre (les styles
   globaux des boutons l'etiraient sur toute la largeur de colonne) */
.author main .wp-block-buttons .mediba-linkedin-btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	width: auto;
}
.mediba-ico-linkedin { flex: none; }

/* "Quel est son rôle chez Mediba ?" : intro + carrousel de cartes a icone */
.mediba-role { margin: 2.5rem 0; }
/* Le head vient du bloc dynamique mediba/author-roles : pas de classes de
   layout injectees par WP, on pose le flex nous-memes */
.mediba-role .mediba-related-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}
.mediba-author-role-intro { color: var(--mediba-muted-ink); line-height: 1.6; margin: 0 0 1.5rem; }
.mediba-role-track { position: relative; }
.mediba-role-list {
	display: flex;
	gap: 1.25rem;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding-bottom: .4rem;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.mediba-role-list::-webkit-scrollbar { display: none; }
.mediba-role-card {
	flex: 0 0 clamp(230px, 27vw, 300px);
	width: clamp(230px, 27vw, 300px);
	max-width: clamp(230px, 27vw, 300px);
	scroll-snap-align: start;
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--mediba-radius);
	padding: 1.35rem;
}
.mediba-role-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 10px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--primary);
	margin-bottom: .9rem;
}
.mediba-role-icon svg { width: 20px; height: 20px; }
.mediba-role-card h3 {
	margin: 0 0 .5rem;
	color: var(--wp--preset--color--primary);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
}
.mediba-role-card p { margin: 0; color: var(--mediba-muted-ink); font-size: .9rem; line-height: 1.6; }

/* "Sa vision du contenu santé" : bande teal pleine largeur */
.mediba-vision { position: relative; text-align: center; padding: 3rem 2rem !important; margin: 3rem 0; }
.mediba-vision-icon { display: block; margin: 0 auto 1rem; color: var(--wp--preset--color--primary); opacity: .35; }
.mediba-vision h2 { margin-top: 0; }
.mediba-author-vision-intro { color: var(--mediba-muted-ink); line-height: 1.6; margin: 0 0 1.25rem; }
.mediba-author-vision { text-align: center; font-style: italic; font-size: 1.1rem; color: var(--wp--preset--color--primary); }
.mediba-author-vision-attribution {
	text-align: center;
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	font-size: .92rem;
	margin-top: 1rem !important;
}
.mediba-author-parcours { color: #24333a; line-height: 1.7; }

/* "Articles de {prenom}" : carrousel de cartes avec photo + badge en overlay.
   Ce carousel partage .mediba-related-track avec les articles associes mais
   garde son propre format (ratio 3/2, pas d'extrait) : il lui faut la zone
   d'image a hauteur fixe, sinon les cartes sans photo a la une retombent sur
   le .mediba-cover en 16/9 et la rangee devient irreguliere. */
.mediba-articles-track .mediba-card .wp-block-post-featured-image,
.mediba-articles-track .mediba-card .mediba-cover {
	height: 170px !important;
	width: 100% !important;
	aspect-ratio: auto !important;
	flex: none;
	overflow: hidden;
}
.mediba-articles-track .mediba-card .wp-block-post-featured-image a {
	display: block;
	width: 100%;
	height: 100%;
}
.mediba-articles-track .mediba-card .wp-block-post-featured-image img {
	width: 100% !important;
	height: 100% !important;
	aspect-ratio: auto !important;
	object-fit: cover;
}
.mediba-articles { margin: 3rem 0 1rem; }
.mediba-articles .mediba-related-head { margin: 0 0 1.5rem; align-items: flex-end; }
.mediba-articles-subtitle { color: var(--mediba-muted-ink); font-size: .92rem; margin: .25rem 0 0; }
.mediba-articles-track .mediba-card {
	flex: 0 0 clamp(240px, 28vw, 320px) !important;
	width: clamp(240px, 28vw, 320px) !important;
	max-width: clamp(240px, 28vw, 320px) !important;
}
.mediba-articles-track .mediba-card .wp-block-post-featured-image { position: relative; margin-bottom: 0; }
.mediba-articles-track .mediba-card .mediba-badge {
	position: absolute;
	top: .85rem;
	left: .85rem;
	margin: 0 !important;
	padding: .3rem .9rem !important;
	border-radius: 999px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--primary);
	text-transform: none;
	letter-spacing: 0;
	font-weight: 600;
	font-size: .72rem;
	z-index: 2;
}
.mediba-articles-track .mediba-card .wp-block-post-title { margin-top: .9rem; }

.mediba-author-closing { color: var(--mediba-muted-ink); margin: 2.5rem 0 0; }

/* Titres de cartes en contexte auteur (conteneur etroit) : plus petits pour
   eviter les coupures en plein mot */
.author .mediba-card .wp-block-post-title { font-size: 1.05rem !important; line-height: 1.28; }
.author .mediba-cover img { width: 66px; height: 66px; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
/* Bandeau urgence : calé sur la maquette (44px : py 12px, texte 14px) */
.mediba-urgence { padding-block: .75rem !important; margin-top: 4rem; }
.mediba-urgence p { margin: 0; font-size: .875rem; line-height: 1.45; }
/* Tout le footer en DM Sans, comme le footer de l'app (PublicFooter) : titres,
   liens et paragraphes. Sans ca, seuls les h3 etaient forces en DM Sans et le
   reste heritait de la police du corps (Plus Jakarta), la ou l'app est
   entierement en DM Sans. */
.mediba-footer {
	padding-block: 3rem 1.75rem !important;
	border-top: 1px solid var(--wp--preset--color--border);
	font-family: var(--wp--preset--font-family--dm-sans);
}
.mediba-footer-logo { height: 30px; width: auto; margin-bottom: .35rem; }
/* Le paragraphe sous le logo colle a l'image : la colonne du footer herite
   sinon du block gap de wp:columns (24px). */
.mediba-footer .wp-block-column > p:first-of-type { margin-top: .35rem; }
/* Titres de colonne en Moranga (police de marque Mediba), le reste du footer
   restant en DM Sans comme le footer de l'app (PublicFooter). */
.mediba-footer h3 {
	font-family: Moranga, "DM Sans", ui-sans-serif, system-ui, sans-serif;
	font-size: .875rem;
	font-weight: 500;
	line-height: 1.25rem;
	color: var(--mediba-ink);
	margin: 0 0 .9rem;
}
.mediba-footer p, .mediba-footer li { color: var(--mediba-muted-ink); font-size: .9rem; line-height: 1.6; }
.mediba-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
/* Liens du footer : gris muted comme le footer staging (sans la couleur
   primary + soulignement herites du style global des liens) */
.mediba-footer li a {
	color: inherit;
	text-decoration: none;
	transition: color .15s ease;
}
.mediba-footer li a:hover { color: var(--wp--preset--color--primary); }
.mediba-footer > .has-text-align-center {
	color: var(--mediba-muted-ink);
	font-size: .8rem;
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--wp--preset--color--border);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
/* Header compact sous lg (1024px), calque le header staging :
   logo + bouton Consulter + burger ; nav inline et boutons Espace masques.
   WP ne bascule le burger qu'a 600px, on etend sa plage jusqu'a 1023px. */
@media (max-width: 1023px) {
	.mediba-header-inner { justify-content: flex-start !important; }
	.mediba-header .wp-block-buttons { display: none; }
	.mediba-header-consult { display: inline-flex; margin-left: auto !important; }
	/* Scope .js : sans JavaScript le burger custom est inerte, on garde
	   alors la nav inline plutot qu'un menu inaccessible */
	.js .mediba-header .mediba-nav { display: none; }
	.js .mediba-burger { display: inline-flex; }
	/* Listing + archives : 2 colonnes sur tablette (3 colonnes = cards trop etroites) */
	.home .wp-block-query:not(.mediba-related-track) .wp-block-post-template.is-layout-grid,
	.blog .wp-block-query:not(.mediba-related-track) .wp-block-post-template.is-layout-grid,
	.archive .wp-block-query:not(.mediba-related-track) .wp-block-post-template.is-layout-grid,
	.search .wp-block-query:not(.mediba-related-track) .wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}
@media (max-width: 599px) {
	.home .wp-block-query:not(.mediba-related-track) .wp-block-post-template.is-layout-grid,
	.blog .wp-block-query:not(.mediba-related-track) .wp-block-post-template.is-layout-grid,
	.archive .wp-block-query:not(.mediba-related-track) .wp-block-post-template.is-layout-grid,
	.search .wp-block-query:not(.mediba-related-track) .wp-block-post-template.is-layout-grid {
		grid-template-columns: 1fr !important;
	}
}
@media (max-width: 900px) {
	.mediba-patho-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 782px) {
	.mediba-header-inner { gap: .75rem; }
	.mediba-header .mediba-nav { font-size: .875rem; }
	/* Footer en 2 colonnes (comme staging grid-cols-2), logo en dernier pleine largeur */
	.mediba-footer .wp-block-columns { flex-wrap: wrap !important; gap: 1.5rem 1rem; }
	.mediba-footer .wp-block-columns > .wp-block-column { flex-basis: calc(50% - .5rem) !important; flex-grow: 0 !important; }
	.mediba-footer .wp-block-columns > .wp-block-column:first-child { order: 9; flex-basis: 100% !important; }
	.mediba-article-cols { flex-direction: column; gap: 1.5rem; }
	.mediba-article-cols .wp-block-column { flex-basis: 100% !important; }
	/* Sommaire compact au-dessus du corps de l'article (au lieu de la colonne
	   laterale sticky, illisible en dessous de 782px). */
	.mediba-article-cols .wp-block-column:last-child { order: -1; }
	.mediba-toc {
		position: static;
		padding-bottom: 1.1rem;
		margin-bottom: .25rem;
		border-bottom: 1px solid var(--wp--preset--color--border);
	}
	.mediba-patho-list { grid-template-columns: 1fr; }
	.mediba-newsletter { flex-direction: column; }
	/* Article en mobile : hero remonte sous le header, titre plus grand, et
	   auteur / date / temps de lecture empiles une ligne chacun. */
	.single-post main.wp-block-group { padding-top: 1.25rem !important; }
	/* !important : les classes de taille preset de WP en portent une aussi */
	.single-post main > .wp-block-post-title { font-size: 2rem !important; line-height: 1.15; }
	.mediba-meta {
		flex-direction: column;
		align-items: flex-start;
		gap: .3rem;
		margin-bottom: 1.25rem;
	}
	/* Les points separateurs n'ont plus de sens en colonne */
	.mediba-meta > * + *::before { content: none; }
	/* Plus d'override nowrap/overflow-x ici : le filtre de la page conseils
	   retombe sur le flex-wrap de sa regle de base et passe a la ligne comme
	   les pills du listing, l'indice de defilement ayant ete retire. */
	.mediba-article-hero .mediba-cover { height: 180px; }
}

/* --------------------------------------------------------------------------
   Typographie : corps sans-serif, titres en Moranga (police de marque Mediba).
   -------------------------------------------------------------------------- */
.wp-block-heading,
.wp-block-post-title,
.wp-block-query-title { font-weight: 500; letter-spacing: -.005em; }
main > .wp-block-heading.has-xx-large-font-size,
.home main > .wp-block-heading.has-xx-large-font-size,
.blog main > .wp-block-heading.has-xx-large-font-size { font-size: clamp(2.1rem, 4.5vw, 2.9rem); }

/* Paragraphe d'accroche de l'article */
.wp-block-post-content > p:first-of-type {
	font-size: 1.14rem;
	line-height: 1.65;
	color: var(--mediba-ink);
}
.single-post .wp-block-post-content > p:first-of-type {
	color: #547583;
}

/* --------------------------------------------------------------------------
   Animations de section (apparition au scroll, façon maquette). Portées par la
   classe "js" (ajoutée sur <html> par blog.js) : sans JS, aucun etat cache
   n'est jamais applique, le contenu reste visible d'emblee.
   -------------------------------------------------------------------------- */
.js .mediba-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .5s ease, transform .5s ease;
}
.js .mediba-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* --------------------------------------------------------------------------
   Impression : on ne garde que le contenu editorial
   -------------------------------------------------------------------------- */
@media print {
	.mediba-header,
	.mediba-urgence,
	.mediba-footer,
	.mediba-toc,
	.mediba-consult-wrap,
	.mediba-newsletter-band,
	.mediba-sheet,
	.mediba-sheet-overlay,
	.mediba-related-head,
	.mediba-related-track,
	.wp-block-group.has-primary-background-color,
	.mediba-newsletter { display: none !important; }
	.mediba-article-cols .wp-block-column { flex-basis: 100% !important; }
	body { background: #fff; }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	/* Les pseudo-elements sont cibles explicitement : le selecteur universel ne
	   matche que des elements, et animation ne s'herite pas. Sans ca le halo de
	   .mediba-consult-dot::after continuerait de tourner. */
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
	.mediba-card:hover { transform: none; }
	.mediba-reveal { opacity: 1 !important; transform: none !important; }
}