/* facmed — règles communes à tous les sites (charte UdeM, liens, cartes, mobile, pied de page, accueil). */
/* =========================
   Faits saillants — carré accent collé dans le coin haut-droit des cartes.
   Le carré (bloc HTML .udem-faits-corner-carre) est positionné en absolu
   par rapport à sa carte (.udem-faits-card), donc collé pile dans l'angle,
   sans tenir compte du padding interne de la carte.
========================= */
.udem-faits-card {
	position: relative;
}
.udem-faits-card .udem-faits-corner-carre {
	position: absolute;
	top: 0;
	right: 0;
	line-height: 0;
	pointer-events: none;
}
/* =========================
   Consentement témoins (UdeM) — lien « Paramètres des témoins » du pied de page.
   Le composant officiel injecte un <a> sans classe : il hérite sinon de la
   couleur de lien par défaut (vert). On l'aligne sur les autres liens du
   footer sombre (blanc).
========================= */
#udem_cookie_consent_toggle a {
	color: #fff;
	cursor: pointer;
	text-decoration: none; /* le thème gère déjà le soulignement animé au survol */
	/* Même taille que « Confidentialité » / « Conditions d'utilisation » (x-small) —
	   sinon le composant hérite du « small » du groupe et paraît plus gros. */
	font-size: var(--wp--preset--font-size--x-small);
}
/* =========================
   Cartes entièrement cliquables (ex. /ressources/). Le JS clickable-cards.js
   ajoute .eoa-card-clickable aux .wp-block-cover.is-style-rounded-cover à lien
   unique ; on signale l'interactivité par le curseur sur toute la carte.
========================= */
.wp-block-cover.is-style-rounded-cover.eoa-card-clickable {
	cursor: pointer;
}
/* =========================
   Cartes « ressources » carrées (desktop ET mobile). Le bloc cover porte un
   aspect-ratio:3/4 en style inline (rectangle vertical) ; on force le carré 1/1.
   !important requis pour battre le style inline.
========================= */
.entry-content .wp-block-group.is-layout-grid:has(> .wp-block-cover.is-style-rounded-cover) > .wp-block-cover.is-style-rounded-cover {
	aspect-ratio: 1 / 1 !important;
}
/* =========================
   Mobile — cartes « ressources » à 2 colonnes au lieu d'1.
   La grille WP (is-layout-grid) utilise minmax(min(20rem,100%),1fr) : sur un
   téléphone (< ~660px) une seule colonne de 20rem tient → 1 carte par ligne.
   On force 2 colonnes. Les cartes ont aspect-ratio:3/4, elles se redimensionnent
   proportionnellement ; on réduit juste le titre pour qu'il tienne dans la largeur.
   Ciblage par :has() → uniquement les grilles contenant ces cartes-cover.
========================= */
@media (max-width: 781px) {
.entry-content .wp-block-group.is-layout-grid:has(> .wp-block-cover.is-style-rounded-cover) {
		grid-template-columns: 1fr 1fr !important;
		gap: 14px !important;
	}
.entry-content .wp-block-group.is-layout-grid:has(> .wp-block-cover.is-style-rounded-cover) .wp-block-heading {
		font-size: clamp(0.95rem, 3.4vw, 1.5rem) !important;
		line-height: 1.2 !important;
	}
}
/* =========================
   Mobile — taille « small » remontée à 1.05rem. Le preset fluide du thème
   (clamp(.9rem, …, 1.05rem)) descend à 0.9rem (~14px) sur téléphone → trop petit.
   On fixe le plancher à 1.05rem : concerne tout le texte en taille « small »
   (menu, légendes, sous-textes, etc.).
========================= */
@media (max-width: 781px) {
:root {
		--wp--preset--font-size--small: 1.05rem;
	}
}
/* =========================
   Mobile — texte de corps plus lisible. Le body du thème utilise
   clamp(0.875rem, …, 1.25rem) → il tombe à ~14px sur téléphone (paragraphes
   trop petits). On relève le plancher : ~18px sur téléphone → 20px en tablette.
   Corrige aussi la hiérarchie du footer (les titres de section sont de simples
   paragraphes gras qui redevenaient plus petits que leurs liens en « small »).
========================= */
@media (max-width: 781px) {
body {
		font-size: clamp(1.125rem, 0.95rem + 0.9vw, 1.25rem);
	}
}
/* =========================
   Footer mobile — les 3 liens légaux sur une seule ligne.
   À 15px les libellés totalisent ~420px (trop pour un téléphone), donc on
   empêche le retour à la ligne et on réduit la taille de façon fluide pour
   qu'ils tiennent sans déborder (jusqu'à ~0.95rem sur tablette).
========================= */
@media (max-width: 781px) {
footer .wp-block-group:has(> #udem_cookie_consent_toggle) {
		flex-wrap: nowrap;
		gap: 0.4rem;
	}
footer .wp-block-group:has(> #udem_cookie_consent_toggle) > p {
		margin: 0;
	}
footer .wp-block-group:has(> #udem_cookie_consent_toggle) > p,
	footer #udem_cookie_consent_toggle a {
		white-space: nowrap;
		font-size: clamp(0.5rem, 2.6vw, 0.95rem);
	}
}
/* =========================
   Accueil — cartes Études / Recherche / École : espacement titre → sous-titre
   constant. Le conteneur est en justify-content:space-between, donc quand le
   sous-titre est court (ex. « Votre parcours commence ici », 1 ligne) l'espace
   libre de la carte se répartit et le trou titre→texte grandit. On empile depuis
   le haut avec un gap fixe et on garde l'image collée en bas (margin-top:auto).
========================= */
.home .entry-content .wp-block-group.is-vertical:has(> .wp-block-image) {
	justify-content: flex-start;
	row-gap: 16px;
	padding-top: 0 !important;   /* Recherche avait un padding-top:10px → décalait tout le bloc vers le bas */
}
.home .entry-content .wp-block-group.is-vertical:has(> .wp-block-image) > .wp-block-image {
	margin-top: auto;
}
/* =========================
   Footer desktop — barre du bas (copyright « © Faculté de médecine… » + liens
   « Confidentialité / Conditions d'utilisation / Paramètres des témoins »)
   ramenée de 15px à 12px. Le mobile conserve sa règle fluide ci-dessus.
   !important requis : le copyright porte `.has-x-small-font-size` (préset cœur
   appliqué en !important) et « Paramètres des témoins » est ciblé par un
   sélecteur ID (#udem_cookie_consent_toggle a) du plugin de consentement.
========================= */
@media (min-width: 782px) {
.footer-bloc .has-x-small-font-size.is-content-justification-space-between,
	.footer-bloc .has-x-small-font-size.is-content-justification-space-between p,
	.footer-bloc .has-x-small-font-size.is-content-justification-space-between a,
	.footer-bloc .has-x-small-font-size.is-content-justification-space-between .has-small-font-size,
	.footer-bloc .has-x-small-font-size.is-content-justification-space-between #udem_cookie_consent_toggle a {
		font-size: 12px !important;
	}
}
/* =========================
   Footer — logo invisible : la <figure> du logo avait `opacity:0` (animation
   d'apparition au défilement, type Twentig, restée bloquée car le footer n'est
   jamais « révélé »). On force la visibilité pour que le logo s'affiche toujours.
========================= */
.site-footer .wp-block-image,
.site-footer .wp-block-image img {
	opacity: 1 !important;
}
/* =========================
   Article (single) — image mise en avant sur téléphone.
   Le gabarit FSE `single.html` pose des styles EN LIGNE sur le bloc image :
   bordure haut/droite de 25px en bleu, `aspect-ratio:1` et marges latérales
   (spacing large = 32px). Beau en desktop, mais sur 390px il ne restait que
   ~238px de photo, recadrée en carré depuis une source panoramique.
   Sous 782px : plus de cadre bleu, plus de recadrage carré, l'image occupe
   toute la largeur de la colonne. `!important` obligatoire — on écrase des
   styles en ligne, pas une feuille de style.
========================= */
@media (max-width: 781px) {
/* Ciblage restreint au hero (figure enfant direct d'une colonne du bloc
	   « colonnes » de l'en-tête) : les vignettes des articles suggérés, en bas
	   de page, gardent leur recadrage carré d'origine. */
.single .wp-block-columns > .wp-block-column > .wp-block-post-featured-image {
		/* bord à bord : on annule aussi le retrait global du groupe parent */
		width: 100vw !important;
		max-width: none !important;
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
		aspect-ratio: auto !important;
	}
.single .wp-block-columns > .wp-block-column > .wp-block-post-featured-image img {
		border-width: 0 !important;
		width: 100% !important;
		height: auto !important;
		aspect-ratio: auto !important;
		object-fit: contain !important;
	}
/* Le bloc « colonnes » du hero porte row-gap:64px. En desktop les 2 colonnes
	   sont côte à côte : seul le column-gap (48px) se voit. Empilées sur
	   téléphone, ce row-gap devient un trou vertical de ~65px entre la date et
	   l'image. On le ramène à une valeur cohérente avec le reste de la page. */
.single .wp-block-columns:has(> .wp-block-column > .wp-block-post-featured-image) {
		row-gap: 1.5rem !important;
	}
}
/* =========================
   Accueil — bloc « Nouvelles » sur téléphone.
   Les styles d'origine (Styles globaux, stockés en base) sont pensés pour le
   desktop : `.udm-news-section` a 1rem de retrait latéral EN PLUS du retrait
   global de la page, `.udm-featured-card` 2rem de retrait interne, et
   `.udm-featured-image img` fait `width:92%` avec une gouttière blanche à
   droite (`padding-right:1.5rem`) — un décalage graphique voulu en grand écran.
   Cumulé sur 390px, il ne restait que ~263px d'image dans une carte de 295px,
   avec beaucoup de vide de chaque côté.
   Sous 782px : image pleine largeur de la carte, carte quasi pleine largeur,
   et l'accroche de la nouvelle en vedette masquée (image + titre suffisent).
========================= */
@media (max-width: 781px) {
.udm-news-section {
		padding-left: .5rem !important;
		padding-right: .5rem !important;
		padding-top: 2.5rem !important;
	}
/* Carte : plus de retrait latéral, l'image touche les bords de la carte */
.udm-featured-card {
		padding: 0 0 1.25rem !important;
	}
.udm-featured-image {
		width: 100% !important;
	}
.udm-featured-image img {
		width: 100% !important;
		padding-right: 0 !important;
	}
/* La carte contient un bloc « colonnes » (image | texte, empilées sur
	   téléphone) : le retrait doit aller sur les blocs de TEXTE, pas sur le
	   conteneur — sinon il repousse aussi l'image. */
.udm-featured-card .wp-block-columns,
	.udm-featured-card .wp-block-column {
		/* la colonne porte 9.75px de retrait propre : il décalait le texte de la
		   vedette (26px de gouttière) par rapport aux autres cartes (16px) */
		padding: 0 !important;
	}
.udm-featured-card .wp-block-column > *:not(.udm-featured-image) {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}
/* Nouvelle en vedette : pas d'accroche sur téléphone */
.udm-featured-card .wp-block-post-excerpt {
		display: none !important;
	}
/* Mêmes proportions pour les 3 nouvelles suivantes : elles portent un
	   retrait asymétrique (24px à droite et en bas) qui, en grand écran, dessine
	   un décroché blanc voulu, mais qui sur téléphone ne lit que comme du vide. */
.udm-news-card {
		padding: 0 0 1.25rem !important;
		/* `height:100%` sert à égaliser les cartes d'une même RANGÉE en desktop ;
		   empilées sur téléphone, il ne fait qu'ajouter du vide sous le titre,
		   variable d'une carte à l'autre. */
		height: auto !important;
	}
.udm-news-card .wp-block-post-featured-image,
	.udm-news-card .wp-block-post-featured-image img {
		width: 100% !important;
	}
.udm-news-card > *:not(.wp-block-post-featured-image) {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}
/* ---- Accueil — bloc « Faits saillants » ----
	   Les 3 encadrés ne sont pas réglés pareil DANS LE CONTENU de la page :
	   le 3e (« + 300 milieux de stages ») commence par un <br> (ligne vide) et
	   porte un padding-bas que les deux autres n'ont pas. En grand écran c'est
	   probablement voulu — les 3 colonnes sont côte à côte et son sous-titre
	   tient sur 1 ligne au lieu de 2, la ligne vide réaligne les paragraphes.
	   Empilés sur téléphone, cet alignement n'a plus de raison d'être : il ne
	   produit qu'un écart deux fois plus grand (57px contre 29px).
	   On neutralise donc uniquement sous 782px, sans toucher au desktop. */
.wp-block-column:has(> .udem-faits-corner-carre) > p > br:first-child {
		display: none !important;
	}
.wp-block-column:has(> .udem-faits-corner-carre) > p {
		padding-bottom: var(--wp--preset--spacing--small, .75rem) !important;
	}
}
/* ---- Accordéons « Bourses par année » (page Campagne annuelle) ----
   Bloc core/details + classe .accordeon-bourses posée dans le contenu.
   Le tableau rayé débordait de 1px (bordure) → barre de défilement
   horizontale inutile ; colonnes forcées à 50/50 par has-fixed-layout
   alors que la 2e ne contient qu'un chiffre. */
.wp-block-details.accordeon-bourses {
	border: 1px solid var(--wp--preset--color--border-light, #dcdfe5);
	background: var(--wp--preset--color--base, #fff);
	margin-top: var(--wp--preset--spacing--x-small, .5rem);
}
.wp-block-details.accordeon-bourses > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .85rem 1rem;
	cursor: pointer;
	list-style: none;
	line-height: 1.35;
}
.wp-block-details.accordeon-bourses > summary::-webkit-details-marker {
	display: none;
}
.wp-block-details.accordeon-bourses > summary::after {
	content: "";
	flex: none;
	width: .55rem;
	height: .55rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-25%) rotate(45deg);
	transition: transform .2s ease;
}
.wp-block-details.accordeon-bourses[open] > summary::after {
	transform: translateY(25%) rotate(-135deg);
}
.wp-block-details.accordeon-bourses > summary:hover {
	background: var(--wp--preset--color--main-accent, #e5f0f8);
}
.wp-block-details.accordeon-bourses > summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-alt, #0057ac);
	outline-offset: -2px;
}
.wp-block-details.accordeon-bourses > .wp-block-table {
	margin: 0;
	overflow: visible;
	padding: 0 1rem 1rem;
}
.wp-block-details.accordeon-bourses > .wp-block-table table {
	width: 100%;
	table-layout: auto;
	border-collapse: collapse;
}
.wp-block-details.accordeon-bourses > .wp-block-table th,
.wp-block-details.accordeon-bourses > .wp-block-table td {
	padding: .55rem .75rem;
	overflow-wrap: anywhere;
}
/* Colonne « Nombre de bourses » : juste la largeur nécessaire. */
.wp-block-details.accordeon-bourses > .wp-block-table th:last-child,
.wp-block-details.accordeon-bourses > .wp-block-table td:last-child {
	width: 1%;
	white-space: nowrap;
	text-align: right;
	font-variant-numeric: tabular-nums;
	overflow-wrap: normal;
}
@media (max-width: 600px) {
.wp-block-details.accordeon-bourses > summary {
		padding: .75rem .85rem;
		font-size: .95rem;
	}
.wp-block-details.accordeon-bourses > .wp-block-table {
		padding: 0 .5rem .75rem;
	}
.wp-block-details.accordeon-bourses > .wp-block-table th,
	.wp-block-details.accordeon-bourses > .wp-block-table td {
		padding: .5rem .5rem;
		font-size: .9rem;
	}
/* L'en-tête « Nombre de bourses » peut passer sur 2 lignes. */
.wp-block-details.accordeon-bourses > .wp-block-table th:last-child {
		white-space: normal;
		min-width: 4.5rem;
	}
}
/* ---- Lien étendu (Twentig) sur un bloc Colonnes ----
   Twentig ne gère .tw-stretched-link que sur Group/Cover en FSE ; posé en
   classe sur des Colonnes (nouvelle à la une de /faire-un-don/), le ::after
   du lien restait confiné à la colonne (position:relative) au lieu de couvrir
   toute la carte, image comprise. */
.wp-block-columns.tw-stretched-link {
	position: relative;
}
.wp-block-columns.tw-stretched-link > .wp-block-column {
	position: static;
}
/* Liste de liens : flèche au lieu de la puce, cible de clic confortable. */
.wp-block-list.liste-liens {
	list-style: none;
	padding-left: 0;
}
.wp-block-list.liste-liens li {
	position: relative;
	padding: .55rem 0 .55rem 1.6rem;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent);
}
.wp-block-list.liste-liens li + li {
	margin-top: 0;
}
.wp-block-list.liste-liens li:last-child {
	border-bottom: 0;
}
.wp-block-list.liste-liens li::before {
	content: "";
	position: absolute;
	left: .2rem;
	top: 1.05rem;
	width: .5rem;
	height: .5rem;
	border-top: 2px solid var(--wp--preset--color--primary-alt);
	border-right: 2px solid var(--wp--preset--color--primary-alt);
	transform: rotate(45deg);
}
.wp-block-list.liste-liens a {
	text-underline-offset: .2em;
}
.wp-block-list.liste-liens a:hover {
	color: var(--wp--preset--color--primary-alt);
}
/* Bande de suite de parcours sur fond foncé : boutons en blanc. */
.bande-suite .wp-block-buttons {
	justify-content: flex-end;
}
.bande-suite .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
}
.bande-suite .wp-block-button.is-style-outline .wp-block-button__link {
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--base);
}
.bande-suite .wp-block-button__link:hover,
.bande-suite .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--custom-jaune);
	border-color: var(--wp--preset--color--custom-jaune);
	color: var(--wp--preset--color--primary);
}
@media (max-width: 781px) {
.bande-suite .wp-block-buttons {
		justify-content: flex-start;
	}
}
.bande-suite .wp-block-heading + p {
	margin-top: .75rem;
}
/* Bandes foncées de fin de page : boutons blancs (priment sur le bleu principal du contenu). */
body .wp-block-post-content > .bande-suite.has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background-color: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--primary) !important;
	border: 2px solid var(--wp--preset--color--base) !important;
}
body .wp-block-post-content > .bande-suite.has-background .wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent !important;
	color: var(--wp--preset--color--base) !important;
	border: 2px solid var(--wp--preset--color--base) !important;
}
body .wp-block-post-content > .bande-suite.has-background .wp-block-button .wp-block-button__link:hover,
body .wp-block-post-content > .bande-suite.has-background .wp-block-button .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--custom-jaune) !important;
	border-color: var(--wp--preset--color--custom-jaune) !important;
	color: var(--wp--preset--color--primary) !important;
}
body .wp-block-post-content > .bande-suite.has-background .wp-block-buttons {
	gap: var(--wp--preset--spacing--small);
}
/* ---- Accordéons de texte (paragraphes, listes) : variante des accordéons Bourses ---- */
.wp-block-details.accordeon-bourses.acc-texte {
	border-radius: 12px;
	border-color: color-mix(in srgb, var(--wp--preset--color--primary) 14%, transparent);
}
.accordeon-bourses.acc-texte > summary {
	font-weight: 600;
	font-size: var(--wp--preset--font-size--medium);
	padding: 1rem 1.25rem;
	border-radius: 12px;
}
.accordeon-bourses.acc-texte[open] > summary { border-radius: 12px 12px 0 0; }
.accordeon-bourses.acc-texte > :not(summary) {
	margin: 0;
	padding: 0 1.25rem;
	max-width: 75ch;
}
.accordeon-bourses.acc-texte > :not(summary) + :not(summary) { margin-top: .75rem; }
.accordeon-bourses.acc-texte > :last-child { padding-bottom: 1.25rem; }
.accordeon-bourses.acc-texte > .wp-block-list { padding-left: 2.75rem; }
.accordeon-bourses.acc-texte > .wp-block-list li + li { margin-top: .5rem; }
/* Section sur gris pâle (classe .fond-gris) : varie l'alternance quand le bleu pâle revient trop souvent. */
.wp-block-post-content > .fond-gris.has-tertiary-background-color:not(:first-child) {
	background-color: var(--wp--preset--color--tertiary) !important;
}
/* Colonnes cliquables à couleur de survol (accueil : Études, Recherche, Département) :
   au survol, l'image zoome légèrement et prend un voile de la couleur de survol de la colonne. */
.wp-block-column.tw-stretched-link.has-hover__background-color .wp-block-image {
	position: relative;
	overflow: hidden;
}
.wp-block-column.tw-stretched-link.has-hover__background-color .wp-block-image img {
	transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}
.wp-block-column.tw-stretched-link.has-hover__background-color .wp-block-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--hover-background-color);
	opacity: 0;
	pointer-events: none;
	transition: opacity .4s ease;
}
.wp-block-column.tw-stretched-link.has-hover__background-color:is(:hover, :focus-within) .wp-block-image img { transform: scale(1.05); }
.wp-block-column.tw-stretched-link.has-hover__background-color:is(:hover, :focus-within) .wp-block-image::after { opacity: .35; }
@media (prefers-reduced-motion: reduce) {
.wp-block-column.tw-stretched-link.has-hover__background-color .wp-block-image img { transition: none; }
.wp-block-column.tw-stretched-link.has-hover__background-color:is(:hover, :focus-within) .wp-block-image img { transform: none; }
}
/* Survol jaune : texte en bleu foncé pour rester lisible (le blanc sur jaune ne contraste pas). */
.wp-block-column.tw-stretched-link[style*="--hover-background-color: var(--wp--preset--color--custom-jaune)"],
.wp-block-column.tw-stretched-link[style*="--hover-background-color: var(--wp--preset--color--custom-jaune)"] :is(p, a, h2, h3) { transition: color .3s ease; }
.wp-block-column.tw-stretched-link[style*="--hover-background-color: var(--wp--preset--color--custom-jaune)"]:is(:hover, :focus-within),
.wp-block-column.tw-stretched-link[style*="--hover-background-color: var(--wp--preset--color--custom-jaune)"]:is(:hover, :focus-within) :is(p, a, h2, h3) {
	color: var(--wp--preset--color--custom-bleu-fonc) !important;
}