/*
Theme Name: Orientation journalisme
Description: Thème du comparateur des formations au journalisme. Affiche les données de l'extension orientation-journalisme, sans photo ; seules les couvertures de la page Livres viennent d'Amazon ou de Défense Zone.
Version: 0.3.8
Requires at least: 6.5
Requires PHP: 8.1
Author: Fred Marie
Text Domain: oj-theme
*/

/* ---------- Direction « Encre et surligneur » (1er novembre 2026) ----------
 * Fond blanc, bleu encre de stylo pour l'action, jaune surligneur pour ce qu'on veut
 * faire ressortir (titre, différences du comparateur), comme sur une copie annotée.
 * Une seule famille de caractères, Schibsted Grotesk (dessinée pour un groupe de presse,
 * licence OFL, servie par le site). Pas d'ombres portées ni de dégradés. */

@font-face {
	font-family: "Schibsted Grotesk";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("assets/fonts/schibsted-grotesk-latin-variable.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--fond: #ffffff;
	--fond-2: #f2f4f8;
	--surface: #ffffff;
	--encre: #14161f;
	--doux: #575c6b;
	--filet: #e3e6ee;
	--filet-fort: #c3c8d5;
	--accent: #1f3fd1;
	--accent-fonce: #142c9c;
	--accent-fond: #e9edfd;
	--surligneur: #ffe94a;
	--surligneur-pale: #fff7bf;
	--non: #b42318;
	--non-fond: #fcebea;
	--ok: #17663a;
	--ok-fond: #e4f2e9;
	--alerte: #7a4f00;
	--alerte-fond: #fff2d1;
	--focus: #1d4ed8;
	--police: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--rayon: 6px;
	--largeur: 76rem;
	--gouttiere: 1rem;
}
@media (min-width: 48rem) { :root { --gouttiere: 2rem; } }

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

/* Un élément masqué le reste, même s'il est mis en forme (boutons, listes). */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--fond);
	color: var(--encre);
	font-family: var(--police);
	font-size: 1.0625rem;
	line-height: 1.55;
	overflow-wrap: break-word;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
	line-height: 1.08;
	margin: 0 0 .6em;
	text-wrap: balance;
	letter-spacing: -.025em;
}
h1 { font-size: clamp(2.1rem, 1.4rem + 2.8vw, 3.6rem); font-weight: 800; }
h2 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem); font-weight: 750; margin-top: 2.5rem; }
h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
p, ul, ol, dl, table { margin: 0 0 1rem; }

a { color: var(--encre); text-decoration-color: var(--accent); text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover { color: var(--accent); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.lien-evitement {
	position: absolute; left: 1rem; top: -4rem;
	background: var(--encre); color: #fff; padding: .5rem 1rem; z-index: 100;
}
.lien-evitement:focus { top: 1rem; color: #fff; }

.conteneur { max-width: var(--largeur); margin: 0 auto; padding: 0 var(--gouttiere); }
/* Colonne de lecture : alignée à gauche comme le reste du site. */
.etroit > * { max-width: 48rem; }

/* ---------- En-tête et pied ---------- */

.entete {
	position: sticky; top: 0; z-index: 40;
	background: rgba(255, 255, 255, .97);
	border-bottom: 1px solid var(--filet);
}
.entete .conteneur {
	display: flex; flex-wrap: wrap; align-items: center;
	gap: .25rem 1.75rem; min-height: 4rem; padding-top: .5rem; padding-bottom: .5rem;
}
.marque {
	display: inline-flex; align-items: center; gap: .55rem; margin-right: auto;
	font-weight: 800; font-size: 1.1rem; letter-spacing: -.02em; line-height: 1.1;
	color: var(--encre); text-decoration: none;
}
.marque::before {
	content: ""; flex: 0 0 auto; width: .75rem; height: .75rem; border-radius: 50%;
	background: var(--accent); box-shadow: 0 0 0 3px var(--surligneur);
}
.marque:hover { color: var(--encre); }
.nav .menu { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem 1.4rem; list-style: none; padding: 0; margin: 0; }
.nav a { display: inline-block; color: var(--encre); text-decoration: none; font-weight: 550; font-size: .98rem; padding: .4rem 0; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--accent); }
.nav a[aria-current="page"] { border-bottom-color: var(--accent); }
.entete-action { margin: 0; }
.entete-action .bouton { min-height: 2.5rem; padding: .4rem 1rem; font-size: .95rem; }
/* Écrans moyens : six entrées et le bouton tiennent sur une ligne. */
@media (min-width: 48rem) and (max-width: 74.99rem) {
	.nav .menu { gap: .1rem .95rem; }
	.nav a { font-size: .92rem; }
	.marque { font-size: 1rem; }
	.entete-action .bouton { padding: .35rem .8rem; font-size: .9rem; }
}
@media (max-width: 47.99rem) {
	/* Sur mobile, l'en-tête défile avec la page : il ne mange pas l'écran. */
	.entete { position: static; }
	.entete .conteneur { padding-top: .6rem; padding-bottom: 0; gap: .4rem 1rem; flex-wrap: wrap; }
	.marque { flex: 1 1 0; min-width: 0; font-size: 1rem; }
	.nav { order: 3; width: 100%; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gouttiere)); padding: 0 var(--gouttiere); width: calc(100% + 2 * var(--gouttiere)); }
	.nav::-webkit-scrollbar { display: none; }
	.nav .menu { flex-wrap: nowrap; }
	.nav a { white-space: nowrap; padding: .45rem 0 .55rem; }
	.entete-action .bouton { min-height: 2.4rem; padding: .35rem .85rem; font-size: .92rem; }
}

main { display: block; padding-top: 2.5rem; }

.pied { margin-top: 5rem; background: var(--fond-2); color: var(--doux); font-size: .95rem; border-top: 1px solid var(--filet); }
.pied .conteneur { padding-top: 3rem; padding-bottom: 3rem; display: grid; gap: 2rem; }
@media (min-width: 48rem) { .pied .conteneur { grid-template-columns: 1.5fr 1fr; align-items: start; } }
.pied-marque { color: var(--encre); font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; margin-bottom: .6rem; }
.pied p { max-width: 38rem; }
.pied ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.pied a { color: var(--encre); }
.pied ul a { text-decoration: none; }
.pied a:hover { color: var(--accent); text-decoration: underline; }

/* ---------- Éléments communs ---------- */

.chapo { font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); line-height: 1.45; color: var(--doux); max-width: 44rem; }
.fil { font-size: .9rem; color: var(--doux); margin-bottom: 1.25rem; }
.fil a { color: var(--doux); }
.surtitre {
	display: block; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	color: var(--accent); margin: 0 0 .9rem;
}

.bouton {
	display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
	min-height: 2.75rem; padding: .55rem 1.15rem;
	border: 1.5px solid var(--accent); border-radius: var(--rayon);
	background: var(--accent); color: #fff; font: inherit; font-weight: 650; font-size: 1rem; line-height: 1.2;
	text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s;
}
.bouton:hover { background: var(--accent-fonce); border-color: var(--accent-fonce); color: #fff; }
.bouton--surligneur { background: var(--surligneur); border-color: var(--surligneur); color: var(--encre); }
.bouton--surligneur:hover { background: #fff; border-color: #fff; color: var(--encre); }
.bouton--secondaire { background: transparent; color: var(--encre); border-color: var(--filet-fort); }
.bouton--secondaire:hover { background: var(--fond-2); color: var(--encre); border-color: var(--encre); }
.bouton--secondaire[aria-pressed="true"] { background: var(--ok-fond); border-color: var(--ok); color: var(--ok); }
.bouton--secondaire[aria-pressed="true"]::before { content: "✓"; }
.bouton--discret { background: transparent; border-color: var(--filet-fort); color: var(--encre); font-weight: 550; }
.bouton--discret:hover { background: var(--fond-2); color: var(--encre); border-color: var(--encre); }
.boutons { display: flex; flex-wrap: wrap; gap: .6rem; }
.lien-fleche { font-weight: 650; text-decoration: none; }
.lien-fleche::after { content: "\00a0→"; color: var(--accent); }
.lien-fleche:hover { text-decoration: underline; }

.badges { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .75rem; }
.badge {
	display: inline-flex; align-items: center; gap: .35rem; padding: .1rem .5rem; border-radius: 3px;
	background: var(--fond-2); color: var(--encre);
	font-size: .78rem; font-weight: 650; line-height: 1.6; letter-spacing: .01em;
}
.badge--cpnej { background: var(--accent-fond); color: var(--accent-fonce); }
.badge--cpnej::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--accent); }
.badge--alerte { background: var(--alerte-fond); color: var(--alerte); }

.valeur--inconnue { color: var(--doux); font-style: italic; }
.mention { font-size: .8rem; font-weight: 650; padding: .05rem .4rem; border-radius: 3px; background: var(--fond-2); white-space: nowrap; }
.mention--alerte { background: var(--alerte-fond); color: var(--alerte); }
.source {
	font-size: .78rem; color: var(--doux); white-space: nowrap;
	text-decoration-style: dotted; text-decoration-color: var(--filet-fort);
}
.source::before { content: "↗ "; }

.encadre { border: 1px solid var(--filet); border-radius: var(--rayon); background: var(--surface); padding: 1.25rem; }
.avis { border-left: 3px solid var(--alerte); background: var(--alerte-fond); padding: .9rem 1.1rem; margin-bottom: 1.5rem; }
.aide { font-size: .84rem; color: var(--doux); margin: .2rem 0 0; }

.section-titre {
	display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1.5rem;
	border-top: 2px solid var(--encre); padding-top: 1rem; margin: 4rem 0 1.5rem;
}
.section-titre h2 { margin: 0; }
.section-titre p { margin: 0; }

/* ---------- Accueil ---------- */

.une { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 62rem) { .une { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 3.5rem; } }
.une h1 { font-size: clamp(2.6rem, 1.6rem + 4vw, 4.75rem); line-height: .96; letter-spacing: -.045em; margin-bottom: 1.25rem; }
/* Le mot clé du titre, passé au surligneur. */
.une h1 em, .surligne {
	font-style: normal; padding: 0 .06em; margin: 0 -.06em;
	background: linear-gradient(transparent 52%, var(--surligneur) 52%, var(--surligneur) 94%, transparent 94%);
	-webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.une .chapo { margin-bottom: 1.75rem; }

.recherche { display: flex; gap: .5rem; max-width: 34rem; margin: 0 0 1.25rem; }
.recherche input {
	flex: 1; min-width: 0; min-height: 3.1rem; padding: .5rem 1rem; font: inherit;
	border: 1.5px solid var(--encre); border-radius: var(--rayon); background: #fff; color: var(--encre);
}
.recherche .bouton { min-height: 3.1rem; }

.chiffres-ligne {
	display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; list-style: none; padding: 1.25rem 0 0; margin: 1.75rem 0 0;
	border-top: 1px solid var(--filet); font-size: .95rem; color: var(--doux);
}
.chiffres-ligne strong { color: var(--encre); font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; margin-right: .3rem; }

.liste-compacte { list-style: none; padding: 0; margin: 0; columns: 1; column-gap: 3rem; }
@media (min-width: 48rem) { .liste-compacte { columns: 2; } }
.liste-compacte li { break-inside: avoid; border-top: 1px solid var(--filet); padding: .8rem 0; }
.liste-compacte a { display: block; font-weight: 700; text-decoration: none; letter-spacing: -.01em; line-height: 1.3; }
.liste-compacte a:hover { color: var(--accent); }
.liste-compacte span { display: block; color: var(--doux); font-size: .92rem; margin-top: .15rem; }

.bandeau {
	background: var(--accent); color: #fff; border-radius: var(--rayon);
	padding: clamp(1.75rem, 1rem + 2.5vw, 3rem); margin-top: 4rem;
	display: grid; gap: 1.5rem; align-items: center;
}
@media (min-width: 52rem) { .bandeau { grid-template-columns: 1fr auto; } }
.bandeau h2 { margin: 0 0 .5rem; color: #fff; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); }
.bandeau p { margin: 0; color: #e3e8ff; max-width: 40rem; }

.engagement { margin: 3rem 0 0; padding: 1.25rem 0; border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); letter-spacing: -.01em; }
.principes { display: grid; gap: 1.75rem 3rem; list-style: none; padding: 0; margin: 0; }
@media (min-width: 52rem) { .principes { grid-template-columns: repeat(3, 1fr); } }
.principes li { border-top: 1px solid var(--filet); padding-top: 1rem; }
.principes strong { display: block; font-size: 1.1rem; letter-spacing: -.01em; margin-bottom: .3rem; }
.principes p { margin: 0; color: var(--doux); }

.sigles { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; }
.sigles a {
	display: inline-block; padding: .35rem .7rem; border-radius: var(--rayon);
	background: var(--fond-2); color: var(--encre); text-decoration: none; font-weight: 600; font-size: .92rem;
}
.sigles a:hover { background: var(--encre); color: #fff; }

/* ---------- Carte des formations ---------- */

.carte-module { position: relative; min-width: 0; }
.carte-cadre {
	position: relative; background: var(--fond-2); border-radius: var(--rayon); overflow: hidden;
	aspect-ratio: 1000 / 934; user-select: none; -webkit-user-select: none;
}
.carte-cadre.est-zoomee { touch-action: none; }
.carte-cadre svg { display: block; width: 100%; height: 100%; }
.carte-cadre.est-zoomee svg { cursor: grab; }
.carte-cadre.est-tiree svg { cursor: grabbing; }
.carte-regions path { fill: #fff; stroke: var(--filet-fort); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.lieu { cursor: pointer; }
/* Plein : au moins une formation reconnue CPNEJ. Creux : les autres. Lisible sans la couleur. */
.lieu circle { fill: #fff; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.lieu--cpnej circle { fill: var(--accent); stroke: #fff; stroke-width: 1.5; }
.lieu text { fill: var(--accent); font-family: var(--police); font-weight: 750; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.lieu--cpnej text { fill: #fff; }
.lieu:hover circle, .lieu[aria-expanded="true"] circle { stroke: var(--encre); stroke-width: 3; }
.lieu[aria-expanded="true"] circle { fill: var(--surligneur); }
.lieu[aria-expanded="true"] text { fill: var(--encre); }
.lieu:focus { outline: none; }
.lieu:focus-visible circle { stroke: var(--focus); stroke-width: 4; }
.carte-nom { font-family: var(--police); font-weight: 650; fill: var(--encre); paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }

.carte-zoom { position: absolute; right: .6rem; top: .6rem; display: grid; gap: .3rem; }
.carte-zoom button {
	width: 2.5rem; height: 2.5rem; border: 1px solid var(--filet-fort); border-radius: var(--rayon);
	background: #fff; color: var(--encre); font: 700 1.15rem/1 var(--police); cursor: pointer;
}
.carte-zoom button:hover { border-color: var(--encre); }

.carte-legende { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; align-items: center; font-size: .88rem; color: var(--doux); margin: .75rem 0 0; padding: 0; list-style: none; }
.carte-legende li { display: inline-flex; align-items: center; gap: .4rem; }
.pastille { display: inline-block; flex: 0 0 auto; width: .8rem; height: .8rem; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--accent); }
.pastille--cpnej { background: var(--accent); box-shadow: none; }

.carte-filtres { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; padding: 0; border: 0; min-width: 0; }
.carte-filtres legend { font-size: .84rem; font-weight: 650; color: var(--doux); margin-bottom: .5rem; padding: 0; }
.puce-filtre { position: relative; display: inline-flex; }
.puce-filtre input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.puce-filtre span {
	display: inline-flex; align-items: center; gap: .35rem; min-height: 2.3rem; padding: .3rem .85rem;
	border: 1px solid var(--filet-fort); border-radius: 999px; font-size: .9rem; font-weight: 550; cursor: pointer; background: #fff;
}
.puce-filtre span:hover { border-color: var(--encre); }
.puce-filtre input:checked + span { background: var(--surligneur); border-color: var(--encre); box-shadow: inset 0 0 0 1px var(--encre); }
.puce-filtre input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.puce-filtre small { font-size: .78rem; opacity: .7; font-weight: 500; }

.carte-panneau {
	position: absolute; left: .6rem; right: .6rem; bottom: .6rem; max-height: 62%; overflow: auto; overscroll-behavior: contain;
	background: #fff; border: 1px solid var(--encre); border-radius: var(--rayon); padding: 1rem 1.1rem .6rem;
}
@media (min-width: 40rem) { .carte-panneau { right: auto; width: min(23rem, 62%); top: .6rem; bottom: auto; max-height: calc(100% - 1.2rem); } }
.carte-panneau h3 { margin: 0 2.5rem .15rem 0; font-size: 1.15rem; }
.carte-panneau h3:focus { outline: none; }
.carte-panneau h4 { margin: .75rem 0 0; font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--doux); }
.carte-panneau .fermer {
	position: absolute; right: .45rem; top: .45rem; width: 2.25rem; height: 2.25rem; border: 0; border-radius: 50%;
	background: var(--fond-2); color: var(--encre); font: 600 1.25rem/1 var(--police); cursor: pointer;
}
.carte-panneau .fermer:hover { background: var(--encre); color: #fff; }
.carte-panneau ul { list-style: none; padding: 0; margin: .4rem 0 0; }
.carte-panneau li { border-top: 1px solid var(--filet); padding: .55rem 0; font-size: .95rem; line-height: 1.35; }
.carte-panneau li a { font-weight: 650; text-decoration: none; }
.carte-panneau li a:hover { text-decoration: underline; }
.carte-panneau li span { display: block; color: var(--doux); font-size: .85rem; margin-top: .1rem; }

.carte-ailleurs { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .9rem 0 0; font-size: .9rem; }
.carte-ailleurs a { display: inline-block; padding: .25rem .65rem; border-radius: 999px; background: var(--fond-2); text-decoration: none; font-weight: 550; }
.carte-ailleurs a:hover { background: var(--encre); color: #fff; }

.carte-liste { columns: 1; column-gap: 3rem; margin-top: 1rem; }
@media (min-width: 48rem) { .carte-liste { columns: 2; } }
@media (min-width: 72rem) { .carte-liste { columns: 3; } }
.carte-liste section { break-inside: avoid; margin-bottom: 1.5rem; }
.carte-liste h3 { font-size: 1rem; margin: 0 0 .35rem; padding-bottom: .35rem; border-bottom: 2px solid var(--encre); }
.carte-liste h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--doux); margin: .7rem 0 .2rem; }
.carte-liste ul { list-style: none; padding: 0; margin: 0; font-size: .93rem; }
.carte-liste li { padding: .3rem 0; border-bottom: 1px solid var(--filet); line-height: 1.35; }
.carte-liste li a { text-decoration: none; font-weight: 600; }
.carte-liste li a:hover { text-decoration: underline; }
.carte-liste li span { color: var(--doux); font-size: .85rem; }
.carte-liste li .pastille { width: .55rem; height: .55rem; margin-right: .35rem; vertical-align: .08em; }
.carte-liste :target { scroll-margin-top: 6rem; }
.carte-liste section:target h4, .carte-liste div:target > h4 { color: var(--accent); }

/* Page /carte/ : la carte à gauche, la liste à droite (dessous sur mobile). */
.carte-page { display: grid; gap: 2.5rem; margin-top: 1.5rem; }
.carte-page > * { min-width: 0; }
.carte-page-liste h2 { margin: 0 0 .25rem; font-size: 1.35rem; }
@media (min-width: 62rem) {
	.carte-page { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; gap: 3rem; }
	.carte-page-liste { position: sticky; top: 5.5rem; max-height: calc(100vh - 7rem); overflow: auto; overscroll-behavior: contain; padding-right: .75rem; border-top: 2px solid var(--encre); padding-top: 1rem; }
	.carte-page .carte-liste { columns: 1; }
}
.une > * { min-width: 0; }

/* ---------- Annuaire ---------- */

.repli-filtres > summary {
	cursor: pointer; font-weight: 650; padding: .7rem 1rem; margin-bottom: .75rem;
	border: 1.5px solid var(--encre); border-radius: var(--rayon); background: #fff;
}
@media (min-width: 62rem) {
	.repli-filtres > summary { display: none; }
	.repli-filtres { position: sticky; top: 5.5rem; }
}

.annuaire { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 62rem) { .annuaire { grid-template-columns: 16rem minmax(0, 1fr); gap: 3.5rem; } }

.filtres { display: grid; gap: 1rem; }
.filtres.encadre { border: 0; padding: 0; background: transparent; }
.filtres label, .filtres legend { display: block; font-weight: 650; font-size: .88rem; margin-bottom: .3rem; }
.filtres input[type="search"], .filtres input[type="number"], .filtres select {
	width: 100%; min-height: 2.75rem; padding: .4rem .7rem; font: inherit; font-size: 1rem;
	border: 1px solid var(--filet-fort); border-radius: var(--rayon); background: #fff; color: var(--encre);
}
.filtres input:focus, .filtres select:focus { border-color: var(--encre); }
.filtres fieldset { border: 0; padding: 0; margin: 0; }
.case { display: flex !important; align-items: center; gap: .55rem; font-weight: 400 !important; min-height: 2rem; }
.case input { width: 1.15rem; height: 1.15rem; accent-color: var(--accent); }

.compte { margin: 0 0 .5rem; font-size: 1rem; font-weight: 650; letter-spacing: 0; }

.cartes { list-style: none; padding: 0; margin: 0; border-bottom: 1px solid var(--filet); }
.carte { border-top: 1px solid var(--filet); padding: 1.35rem 0; display: grid; gap: .4rem 2.5rem; align-content: start; }
.carte h2, .carte h3 { font-size: 1.2rem; margin: 0; letter-spacing: -.015em; }
.carte h2 a, .carte h3 a, .resultat h3 a { color: var(--encre); text-decoration: none; }
.carte h2 a:hover, .carte h3 a:hover, .resultat h3 a:hover { color: var(--accent); text-decoration: underline; }
.carte .ecole { color: var(--doux); margin: 0; font-size: .95rem; }
.carte .badges { margin: .3rem 0 0; }
.faits { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: .6rem 1.25rem; margin: .3rem 0; }
.faits div { min-width: 0; }
.faits dt { font-size: .74rem; color: var(--doux); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.faits dd { margin: 0; font-weight: 550; font-size: .97rem; line-height: 1.35; }
.carte .boutons { margin: .5rem 0 0; }
.carte .boutons .bouton { min-height: 2.5rem; padding: .4rem .9rem; font-size: .93rem; }
@media (min-width: 62rem) {
	/* Une ligne par formation : identité à gauche, repères à droite. */
	.cartes--lignes .carte { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
	.cartes--lignes .carte > * { grid-column: 1; }
	.cartes--lignes .carte > .faits { grid-column: 2; grid-row: 1 / span 4; margin: .2rem 0 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.inconnus { margin-top: 1.5rem; font-size: .95rem; background: var(--fond-2); border: 0; }
.inconnus p { margin: 0; }
.inconnus ul { margin: .5rem 0 0; }

/* ---------- Fiches ---------- */

.fiche-entete { padding-bottom: 1.5rem; margin-bottom: 2rem; border-bottom: 2px solid var(--encre); }
.fiche-entete h1 { max-width: 54rem; }
.fiche-entete .ecole { font-size: 1.15rem; margin: -.1rem 0 .9rem; color: var(--doux); }
.fiche-entete .ecole a { color: var(--encre); font-weight: 600; }

.fiche { display: grid; gap: 2.5rem; }
/* Sans min-width: 0, un tableau large (barème) élargit la colonne au lieu de défiler dans .defile. */
.fiche > * { min-width: 0; }
@media (min-width: 62rem) { .fiche { grid-template-columns: minmax(0, 1fr) 20rem; gap: 4rem; } }
.fiche aside .encadre { position: sticky; top: 5.5rem; display: grid; gap: .9rem; background: var(--fond-2); border: 0; }
.fiche aside p { margin: 0; }
.titre-premier { margin-top: 0; }

.tableau-faits { width: 100%; border-collapse: collapse; }
.tableau-faits th, .tableau-faits td { text-align: left; vertical-align: top; padding: .8rem .75rem .8rem 0; border-top: 1px solid var(--filet); }
.tableau-faits tr:last-child th, .tableau-faits tr:last-child td { border-bottom: 1px solid var(--filet); }
.tableau-faits th { width: 34%; font-weight: 600; color: var(--doux); font-size: .93rem; }
@media (max-width: 34rem) {
	.tableau-faits th, .tableau-faits td { display: block; width: auto; padding: .15rem 0; border: 0 !important; }
	.tableau-faits tr { display: block; border-top: 1px solid var(--filet); padding: .6rem 0; }
}

.texte-long { white-space: pre-line; }

.tableau { width: 100%; border-collapse: collapse; font-size: .95rem; background: var(--surface); }
.tableau th, .tableau td { border-bottom: 1px solid var(--filet); padding: .65rem .9rem .65rem 0; text-align: left; vertical-align: top; }
.tableau thead th { border-bottom: 2px solid var(--encre); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--doux); }
.tableau tbody th a { font-weight: 650; text-decoration: none; }
.tableau tbody th a:hover { text-decoration: underline; }
/* position: relative : les textes masqués (position absolue) restent dans la zone qui défile au lieu d'élargir la page. */
.defile { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

.sources { font-size: .92rem; padding-left: 1.2rem; }
.sources li { margin-bottom: .55rem; }
.sources .elements { color: var(--doux); display: block; }

/* ---------- Comparateur ---------- */

.comparateur { border-collapse: separate; border-spacing: 0; min-width: 100%; background: var(--surface); font-size: .95rem; }
.comparateur th, .comparateur td {
	padding: .75rem .9rem; vertical-align: top; text-align: left;
	border-bottom: 1px solid var(--filet); min-width: 13rem;
}
.comparateur thead th { border-bottom: 2px solid var(--encre); background: var(--surface); }
.comparateur thead th a.titre { color: var(--encre); font-weight: 750; font-size: 1.05rem; text-decoration: none; letter-spacing: -.01em; }
.comparateur thead th a.titre:hover { color: var(--accent); text-decoration: underline; }
.comparateur tbody th[scope="row"] {
	position: sticky; left: 0; z-index: 1; min-width: 9rem; max-width: 11rem;
	background: var(--fond-2); color: var(--doux); font-weight: 600; font-size: .86rem;
}
.comparateur thead td { background: var(--fond-2); position: sticky; left: 0; z-index: 1; min-width: 9rem; }
.comparateur .retirer { display: inline-block; margin-top: .4rem; font-size: .82rem; color: var(--doux); }
.comparateur tr.difference td { background: var(--surligneur-pale); }
.masquer-identiques tr.identique { display: none; }
.comparateur .texte-long { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }

.outils { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0 1.25rem; }

.choix-formations { columns: 2 18rem; column-gap: 2rem; list-style: none; padding: 0; }
.choix-formations li { break-inside: avoid; padding: .3rem 0; }

/* Barre de sélection du comparateur */
.selection {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
	background: var(--encre); color: #fff; padding: .7rem var(--gouttiere);
	padding-bottom: calc(.7rem + env(safe-area-inset-bottom, 0px));
}
.selection .conteneur { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: 0; }
.selection ul { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; flex: 1 1 20rem; }
.selection li {
	display: inline-flex; align-items: center; gap: .35rem; max-width: 100%;
	background: rgba(255, 255, 255, .12); border-radius: 999px; padding: .15rem .3rem .15rem .75rem; font-size: .88rem;
}
.selection li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 16rem; }
.selection button.retirer {
	border: 0; background: transparent; color: #fff; cursor: pointer; font-size: 1.1rem; line-height: 1;
	width: 1.9rem; height: 1.9rem; border-radius: 50%;
}
.selection button.retirer:hover { background: rgba(255, 255, 255, .2); }
.selection .bouton { background: var(--surligneur); color: var(--encre); border-color: var(--surligneur); }
.selection .bouton:hover { background: #fff; color: var(--encre); border-color: #fff; }
.selection .bouton[aria-disabled="true"] { opacity: .6; pointer-events: none; }
body.avec-selection { padding-bottom: 6rem; }

/* ---------- Pages de texte ---------- */

.contenu { max-width: 44rem; }
.contenu li { margin-bottom: .4rem; }

/* ---------- Quiz d'orientation ---------- */

.quiz { margin: 1.5rem 0 1rem; }
.question { border: 0; border-top: 2px solid var(--encre); padding: 1.25rem 0 1.5rem; margin: 0 0 1rem; min-width: 0; }
.question legend {
	font-size: clamp(1.35rem, 1.2rem + .6vw, 1.75rem); line-height: 1.15; font-weight: 750; letter-spacing: -.02em;
	padding: 0; float: left; width: 100%; margin-bottom: .6rem;
}
.question legend:focus { outline: none; }
.question legend + * { clear: both; }
.question-numero { display: block; font-size: .78rem; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .45rem; }
.question > .aide { margin: 0 0 .9rem; font-size: .92rem; }
.options { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
@media (min-width: 40rem) { .options--colonnes { grid-template-columns: 1fr 1fr; } }
.option {
	display: flex; align-items: center; gap: .7rem; min-height: 3rem;
	padding: .55rem .9rem; border: 1px solid var(--filet-fort); border-radius: var(--rayon);
	background: #fff; cursor: pointer; transition: border-color .12s, background-color .12s;
}
.option:hover { border-color: var(--encre); }
.option input { width: 1.2rem; height: 1.2rem; flex: 0 0 auto; margin: 0; accent-color: var(--accent); }
.option:has(input:checked) { border-color: var(--accent); background: var(--accent-fond); box-shadow: inset 0 0 0 1px var(--accent); }
.option:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.strict { margin: .9rem 0 0; }
.option--strict { border-style: dashed; font-size: .95rem; min-height: 2.75rem; }
.erreur { color: var(--non); font-weight: 650; margin: .6rem 0 0; }
.erreur::before { content: "⚠ "; }
.quiz-progression { font-weight: 650; font-size: .92rem; color: var(--doux); margin-bottom: .5rem; }
.quiz-barre { height: 3px; background: var(--filet); margin: 0 0 1.75rem; overflow: hidden; }
.quiz-barre span { display: block; height: 100%; background: var(--accent); transition: width .2s; }
.quiz-nav { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; }

/* Une question par écran (ajouté par assets/quiz.js) : le rang est donné par la progression. */
.quiz--pas .question-rang { display: none; }
.quiz--pas .question { display: none; border-top: 0; padding-top: 0; }
.quiz--pas .question.est-courante { display: block; }
.quiz--pas .quiz-envoi { display: none; }

.vos-reponses { margin: 1rem 0 .75rem; padding: 1rem 1.25rem; background: var(--fond-2); border: 0; }
.vos-reponses summary { cursor: pointer; font-weight: 650; }
.vos-reponses .faits { margin: .9rem 0 0; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.resultats { margin-top: 1rem; }
.carte.resultat { display: block; }
.resultat h3 { display: flex; gap: .7rem; align-items: baseline; font-size: 1.25rem; margin-bottom: .2rem; }
.resultat-rang {
	flex: 0 0 auto; display: inline-grid; place-items: center; width: 2rem; height: 2rem;
	border-radius: 50%; background: var(--accent); color: #fff; font-size: .95rem; font-weight: 750; letter-spacing: 0;
}
.resultat-appreciation { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .6rem; margin: .6rem 0 .5rem; }
.resultat-appreciation .aide { margin: 0; }
.criteres { list-style: none; padding: 0; margin: 0 0 .6rem; display: grid; gap: .3rem; font-size: .95rem; }
@media (min-width: 52rem) { .criteres { grid-template-columns: 1fr 1fr; column-gap: 2rem; } }
.critere { display: flex; gap: .55rem; align-items: baseline; }
.critere-puce {
	flex: 0 0 1.35rem; height: 1.35rem; display: inline-grid; place-items: center;
	border-radius: 3px; font-weight: 700; font-size: .85rem; line-height: 1;
}
.critere--oui .critere-puce { background: var(--ok-fond); color: var(--ok); }
.critere--partiel .critere-puce { background: var(--alerte-fond); color: var(--alerte); }
.critere--non .critere-puce { background: var(--non-fond); color: var(--non); }
.critere--inconnu .critere-puce { background: var(--fond-2); color: var(--doux); }
.critere--inconnu { color: var(--doux); }
.repli { margin: 1.5rem 0; }
.repli > summary { cursor: pointer; font-weight: 700; font-size: 1.15rem; padding: .5rem 0; letter-spacing: -.01em; }
.aucun { margin: 1.5rem 0; background: var(--fond-2); border: 0; }
.aucun h2 { margin-top: 0; }
.assouplir { padding-left: 1.1rem; }
.assouplir li { margin-bottom: .4rem; }
.ecartees { padding-left: 1.1rem; }
.ecartees li { margin-bottom: .5rem; }
.ecartees .aide { display: block; }
.methode-quiz { margin-top: 3rem; padding-top: 1rem; border-top: 2px solid var(--encre); max-width: 48rem; }
.methode-quiz h2 { margin-top: 0; }
.methode-quiz .tableau { width: 100%; max-width: 30rem; }

/* ---------- Petits écrans et impression ---------- */

@media (max-width: 40rem) {
	.selection ul { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .2rem; }
	.selection li { flex: 0 0 auto; }
	.selection li span { max-width: 11rem; }
	.comparateur th, .comparateur td { min-width: 11rem; padding: .6rem; }
	.comparateur tbody th[scope="row"], .comparateur thead td { min-width: 6.5rem; max-width: 7.5rem; font-size: .8rem; }
	.recherche { flex-direction: column; }
}

@media print {
	body { background: #fff; font-size: 10.5pt; }
	.entete { position: static; }
	.entete .nav, .entete-action, .pied, .selection, .outils, .js-comparer, .retirer, .lien-evitement, .filtres, .no-print, .carte-zoom, .carte-filtres { display: none !important; }
	main { padding: 0; }
	.comparateur th, .comparateur td { min-width: 0; }
	.comparateur tbody th[scope="row"] { position: static; }
	.defile { overflow: visible; }
	.comparateur .texte-long { display: block; -webkit-line-clamp: unset; }
	a.source::after { content: " (" attr(href) ")"; word-break: break-all; }
	.masquer-identiques tr.identique { display: none; }
	.fiche { display: block; }
}

@media (prefers-reduced-motion: reduce) {
	* { scroll-behavior: auto !important; transition: none !important; }
}

/* Alternatives aux écoles (masterclasses, boîte à outils, accompagnement) : à part du classement, du quiz et du comparateur. */
.offre-editeur { margin: 3rem 0; padding: 1.25rem; border: 2px solid var(--encre); border-radius: var(--rayon); background: var(--surface); }
.offre-tete { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: 1rem; }
.offre-tete h2 { margin: 0; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); }
.offre-etiquette { display: inline-block; margin: 0; padding: .15rem .5rem; border-radius: 3px; background: var(--encre); color: var(--fond); font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.offres-cartes { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; }
@media (min-width: 48rem) { .offres-cartes { grid-template-columns: repeat(3, 1fr); } }
.offres-cartes > li { display: flex; flex-direction: column; border-top: 1px solid var(--filet-fort); padding-top: .8rem; }
.offres-cartes h3 { margin: 0 0 .35rem; font-size: 1.1rem; line-height: 1.25; }
.offres-cartes h3 a { text-decoration: none; }
.offres-cartes h3 a:hover { color: var(--accent); }
.offres-cartes p { margin: 0 0 .5rem; }
.offre-faits { list-style: none; padding: 0; margin: 0 0 .6rem; color: var(--doux); font-size: .92rem; }
.offre-prix { margin-top: auto; font-weight: 700; font-size: 1.15rem; white-space: nowrap; }
.offre-mention { margin: 1rem 0 0; color: var(--doux); font-size: .88rem; }
.offre-mention .lien-fleche { white-space: nowrap; }
.offres-tableau { width: 100%; min-width: 34rem; border-collapse: collapse; }
.offres-tableau th, .offres-tableau td { padding: .55rem .6rem; border-top: 1px solid var(--filet); text-align: left; vertical-align: top; }
.offres-tableau thead th { border-top: 0; color: var(--doux); font-size: .85rem; }
.offres-tableau th a { text-decoration: none; }
.offre-editeur--ligne { margin: 2rem 0 0; padding: .9rem 1rem; border-width: 1px; }
.offre-editeur--ligne p { margin: .4rem 0 0; }
.offre-editeur--ligne .offre-mention { font-size: .85rem; }
.conteneur.etroit > .offre-etiquette { max-width: none; margin-top: 2rem; }

/* ---------- Écoles : mosaïque des logos (1er novembre 2026) ----------
 * Chaque tuile montre le logo et le nom ; au survol ou au clavier, un voile dit le statut,
 * les villes et les formations décrites. Sur écran tactile, ces informations restent sous le nom.
 */
.compte { color: var(--doux); margin: 1.5rem 0 1rem; }
.mosaique { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .6rem; }
@media (min-width: 48rem) { .mosaique { grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: 1rem; } }
.tuile-lien {
	position: relative; display: flex; flex-direction: column; align-items: center; gap: .75rem; height: 100%;
	padding: 1.25rem 1rem 1rem; border: 1px solid var(--filet); border-radius: var(--rayon); background: var(--surface);
	color: var(--encre); text-decoration: none; overflow: hidden; transition: border-color .15s, box-shadow .15s;
}
.tuile-lien:hover, .tuile-lien:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.tuile-lien:focus-visible { outline: 3px solid var(--surligneur); outline-offset: 2px; }
.tuile-nom { font-weight: 600; font-size: .95rem; line-height: 1.3; text-align: center; }
.tuile-infos { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; line-height: 1.35; text-align: center; }
.tuile-statut { font-weight: 700; }
.tuile-voir, .tuile-rappel { display: none; }
@media (hover: hover) {
	.tuile-infos {
		position: absolute; inset: 0; justify-content: center; padding: 1rem; background: var(--accent); color: #fff; font-size: .92rem;
		opacity: 0; transform: translateY(.4rem); transition: opacity .15s, transform .15s;
	}
	.tuile-lien:hover .tuile-infos, .tuile-lien:focus-visible .tuile-infos { opacity: 1; transform: none; }
	.tuile-rappel { display: block; font-size: .8rem; opacity: .85; margin-bottom: .35rem; }
	.tuile-voir { display: block; margin-top: .5rem; text-decoration: underline; text-underline-offset: .2em; }
}
@media (hover: none) { .tuile-infos { color: var(--doux); } .tuile-infos .tuile-statut { color: var(--encre); } }

/* Cadre du logo : taille fixe, logo entier (jamais rogné). Un logo blanc est posé sur l'encre. */
.logo { display: flex; align-items: center; justify-content: center; flex: none; border-radius: var(--rayon); }
.logo img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.logo--sombre { background: var(--encre); }
.logo--tuile { width: 100%; height: 5.5rem; padding: .5rem; }
.logo--fiche { width: 9rem; height: 6rem; padding: .6rem; border: 1px solid var(--filet); margin-bottom: 1rem; }
.logo--fiche.logo--sombre { border-color: var(--encre); }
.logo--mini { display: inline-flex; width: 2.6rem; height: 1.6rem; padding: .15rem; margin-right: .5rem; vertical-align: middle; }
.logo--sigle {
	background: var(--fond-2); color: var(--accent-fonce); font-weight: 800; letter-spacing: .02em; text-align: center;
	font-size: 1.35rem; line-height: 1.1; overflow-wrap: anywhere;
}
.logo--fiche.logo--sigle { font-size: 1.6rem; }
@media (min-width: 48rem) {
	.fiche-entete--logo { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.5rem; align-items: center; }
	.fiche-entete--logo > .logo { grid-row: span 2; margin-bottom: 0; }
	.fiche-entete--logo > :not(.logo) { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) { .tuile-infos, .tuile-lien { transition: none; } }
.aide--espace { margin-top: 1.5rem; }
@media (max-width: 47.99rem) { .tuile-lien { padding: 1rem .6rem .8rem; gap: .6rem; } .logo--tuile { height: 4.5rem; } .tuile-nom { font-size: .88rem; } .tuile-infos { font-size: .8rem; } }

/* ---------- Livres sur le journalisme (1er novembre 2026, refait le soir) ----------
 * Mosaïque de couvertures, recherche et nuage de mots-clés, thèmes illustrés par leurs couvertures.
 * Un livre sans couverture reçoit une couverture typographique à la couleur de son thème.
 */
.couv-typo--metier, .theme--metier { --theme: #1f3fd1; }
.couv-typo--enquete, .theme--enquete { --theme: #2b2f3a; }
.couv-typo--reportage, .theme--reportage { --theme: #a3291b; }
.couv-typo--photojournalisme, .theme--photojournalisme { --theme: #5b3a8c; }
.couv-typo--journalistes, .theme--journalistes { --theme: #17663a; }
.couv-typo--ethique, .theme--ethique { --theme: #8a5a00; }
.couv-typo--medias, .theme--medias { --theme: #0f6b7a; }
.couv-typo--histoire, .theme--histoire { --theme: #6b4a2e; }
.couv-typo--presse, .theme--presse { --theme: #8a1f4f; }

.librairie-tete { padding-bottom: .5rem; }
.librairie-recherche { display: flex; gap: .5rem; max-width: 44rem; margin: 1.75rem 0 1.25rem; }
.librairie-recherche input {
	flex: 1; min-width: 0; font: inherit; font-size: 1.1rem; padding: .75rem 1rem;
	border: 2px solid var(--encre); border-radius: var(--rayon); background: #fff; color: var(--encre);
}
.librairie-recherche input:focus { outline: 3px solid var(--surligneur); outline-offset: 0; }

.nuage { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .5rem; max-width: 60rem; }
.nuage-mot {
	display: inline-block; padding: .15rem .45rem; border-radius: var(--rayon);
	color: var(--encre); text-decoration: none; line-height: 1.25; letter-spacing: -.01em;
}
.nuage-mot:hover { background: var(--surligneur-pale); }
.nuage-mot[aria-current="true"] { background: var(--surligneur); box-shadow: inset 0 -2px 0 var(--encre); }
.nuage-mot--1 { font-size: .85rem; font-weight: 450; color: var(--doux); }
.nuage-mot--2 { font-size: .95rem; font-weight: 500; }
.nuage-mot--3 { font-size: 1.1rem; font-weight: 600; }
.nuage-mot--4 { font-size: 1.3rem; font-weight: 700; }
.nuage-mot--5 { font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; }
.nuage-nombre { font-size: .7rem; font-weight: 500; color: var(--doux); vertical-align: super; }

.themes { list-style: none; margin: 1rem 0 2rem; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.theme {
	display: flex; flex-direction: column; height: 100%; overflow: hidden;
	border: 1px solid var(--filet); border-radius: var(--rayon); color: var(--encre); text-decoration: none; background: #fff;
}
.theme:hover, .theme:focus-visible { border-color: var(--theme); box-shadow: 0 0 0 1px var(--theme); }
.theme-couvs {
	display: flex; justify-content: center; align-items: flex-end; height: 9.5rem; padding: 1rem 1rem 0;
	background: color-mix(in srgb, var(--theme) 14%, #fff); border-bottom: 3px solid var(--theme);
}
.theme-couv { width: 4.6rem; aspect-ratio: 2 / 3; display: flex; align-items: flex-end; margin: 0 -.7rem; transition: transform .2s ease; }
.theme-couv:nth-child(1) { transform: rotate(-7deg) translateY(.3rem); }
.theme-couv:nth-child(2) { position: relative; z-index: 1; width: 5.2rem; }
.theme-couv:nth-child(3) { transform: rotate(7deg) translateY(.3rem); }
.theme:hover .theme-couv:nth-child(1) { transform: rotate(-11deg) translate(-.4rem, .2rem); }
.theme:hover .theme-couv:nth-child(3) { transform: rotate(11deg) translate(.4rem, .2rem); }
.theme-couv img, .theme-couv .couv-typo { width: 100%; height: auto; max-height: 100%; border: 2px solid #fff; border-bottom: 0; }
.theme-texte { display: flex; flex-direction: column; gap: .2rem; padding: .85rem 1rem 1rem; }
@media (max-width: 47.99rem) {
	.themes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
	.theme-couvs { height: 7rem; padding: .75rem .5rem 0; }
	.theme-couv { width: 3.3rem; margin: 0 -.55rem; }
	.theme-couv:nth-child(2) { width: 3.8rem; }
	.theme-texte { padding: .6rem .7rem .75rem; }
	.theme-titre { font-size: .9rem; }
	.theme-nombre { font-size: .8rem; }
}
.theme-titre { font-weight: 700; font-size: 1.02rem; line-height: 1.25; }
.theme-nombre { font-size: .88rem; color: var(--doux); }

.librairie-barre { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .25rem 1rem; border-bottom: 2px solid var(--encre); margin: 2rem 0 1.25rem; }
.librairie-barre h2 { margin: 0 0 .4rem; }
.librairie-barre .compte { margin: 0 0 .4rem; color: var(--doux); }
.couvs { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem 1rem; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
@media (min-width: 48rem) { .couvs { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 2rem 1.5rem; } }
.couv-lien { display: flex; flex-direction: column; gap: .3rem; height: 100%; color: var(--encre); text-decoration: none; border-radius: var(--rayon); }
.couv-image { display: flex; align-items: flex-end; justify-content: center; aspect-ratio: 2 / 3; margin-bottom: .4rem; }
.couv-image img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; outline: 1px solid rgb(20 22 31 / .1); outline-offset: -1px; transition: transform .2s ease; }
.couv-lien:hover .couv-image img, .couv-lien:hover .couv-typo, .couv-lien:focus-visible .couv-image img { transform: translateY(-5px); }
.couv-lien:hover .couv-titre { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.couv-titre { font-weight: 650; font-size: .92rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.couv-meta { font-size: .8rem; color: var(--doux); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.couv-typo {
	display: flex; flex-direction: column; justify-content: space-between; width: 100%; aspect-ratio: 2 / 3;
	padding: 12% 10% 10%; background: var(--theme, var(--encre)); color: #fff; transition: transform .2s ease;
	border-top: .35rem solid rgb(255 255 255 / .25); overflow: hidden;
}
.couv-typo-titre { font-weight: 800; font-size: .95rem; line-height: 1.12; letter-spacing: -.015em; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.couv-typo-auteur { font-size: .72rem; font-weight: 500; opacity: .85; border-top: 1px solid rgb(255 255 255 / .5); padding-top: .4rem; }
.theme-couv .couv-typo-titre { font-size: .62rem; -webkit-line-clamp: 5; }
.theme-couv .couv-typo-auteur { display: none; }

.librairie-vide { margin: 1.5rem 0; font-weight: 600; }
.librairie-plus { text-align: center; margin: 2.5rem 0 1rem; }
.autres-themes ul { list-style: none; margin: 0 0 2rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.autres-themes a { display: inline-block; padding: .4rem .75rem; border: 1px solid var(--filet-fort); border-radius: var(--rayon); color: var(--encre); text-decoration: none; font-weight: 550; font-size: .92rem; }
.autres-themes a:hover { border-color: var(--encre); background: var(--fond-2); }
.couv-fiche { align-self: flex-start; margin-top: .15rem; font-size: .72rem; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; background: var(--surligneur); padding: .05rem .35rem; border-radius: 3px; }

/* Fiche d'un livre, page d'auteur, page « concours ». */
.livre-fiche { display: grid; gap: 1.5rem; margin: .5rem 0 2rem; }
@media (min-width: 48rem) { .livre-fiche { grid-template-columns: minmax(12rem, 18rem) minmax(0, 1fr); gap: 2.5rem; align-items: start; } }
.livre-fiche-couv { max-width: 16rem; }
.livre-fiche-couv img { display: block; width: 100%; height: auto; outline: 1px solid rgb(20 22 31 / .1); outline-offset: -1px; }
.livre-fiche-couv .couv-typo-titre { font-size: 1.4rem; }
.livre-fiche-couv .couv-typo-auteur { font-size: .9rem; }
.livre-fiche h1 { margin-bottom: .25em; }
.livre-fiche-sous-titre { font-size: 1.2rem; color: var(--doux); margin: 0 0 .5rem; line-height: 1.35; }
.livre-fiche-auteurs { font-weight: 650; font-size: 1.1rem; margin: 0 0 1rem; }
.livre-fiche-faits { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin: 1.25rem 0; font-size: .92rem; }
.livre-fiche-faits dt { color: var(--doux); font-size: .8rem; }
.livre-fiche-faits dd { margin: 0; font-weight: 600; }
.livre-fiche-mots { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.livre-fiche-mots a { display: inline-block; padding: .2rem .55rem; border: 1px solid var(--filet-fort); border-radius: var(--rayon); font-size: .85rem; color: var(--encre); text-decoration: none; }
.livre-fiche-mots a:hover { background: var(--surligneur-pale); border-color: var(--encre); }
.livre-fiche-corps { margin-bottom: 1rem; }
.livre-sources { margin-top: 1.5rem; }
.concours-partie { margin-bottom: 2.5rem; }
.concours-partie .couvs { margin: 1.25rem 0; }
.lien-concours { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; margin: 0 0 2rem; padding: 1rem 1.25rem; background: var(--surligneur-pale); border-left: 4px solid var(--surligneur); border-radius: var(--rayon); }
.lien-concours p { margin: 0; font-weight: 650; font-size: 1.05rem; }
@media (prefers-reduced-motion: reduce) { .theme-couv, .couv-image img, .couv-typo { transition: none; } }

/* Calendrier des concours et des admissions (oj-calendrier.php, bloc de la fiche formation). */
.calendrier-partie { margin: 2.5rem 0; }
.calendrier-plateforme { margin: 1.75rem 0 2.25rem; }
.calendrier-plateforme h3 { margin: 0; font-size: 1.2rem; }
.calendrier-mois { margin: 2rem 0 .25rem; font-size: 1.15rem; text-transform: none; }
.calendrier-liste { list-style: none; margin: .75rem 0 0; padding: 0; }
.calendrier-liste li { display: grid; gap: .15rem 1.25rem; padding: .75rem 0; border-top: 1px solid var(--filet); }
.calendrier-liste li:last-child { border-bottom: 1px solid var(--filet); }
.calendrier-liste p { margin: 0; }
.calendrier-quand { font-weight: 650; }
.calendrier-quoi { font-weight: 550; }
.calendrier-qui { font-size: .92rem; color: var(--doux); }
.calendrier-passe { opacity: .62; }
.calendrier-formations { margin-top: .75rem; }
.calendrier-formations summary { cursor: pointer; font-weight: 650; }
.calendrier-formations ul, .calendrier-attente { margin: .5rem 0 0; padding-left: 1.2rem; }
.calendrier-attente li { margin: .3rem 0; }
@media (min-width: 40rem) { .calendrier-liste li { grid-template-columns: 15rem minmax(0, 1fr); } }

/* Alternatives aux écoles : bannières des masterclasses, accompagnement personnalisé. */
.offres-cartes .offre-image-lien { display: block; width: 100%; max-width: 20rem; margin: 0 0 .75rem; }
.offre-image { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--rayon); border: 1px solid var(--filet); }
.accompagnement-carte { margin-top: 1.25rem; padding: 1.25rem; border-radius: var(--rayon); background: var(--surligneur-pale); border-left: 4px solid var(--surligneur); }
.accompagnement-carte h2, .accompagnement-carte h3 { margin: .2rem 0 .5rem; font-size: 1.25rem; }
.accompagnement-carte p { margin: .4rem 0 0; max-width: 44rem; }
.accompagnement-carte .bouton { margin-top: .5rem; }

/* Formulaire de candidature (oj-accompagnement.php). */
.candidature { margin: 2.5rem 0; }
.candidature fieldset { border: 1px solid var(--filet); border-radius: var(--rayon); padding: 1rem 1.25rem 1.25rem; margin: 0 0 1.25rem; }
.candidature legend { font-weight: 700; font-size: 1.05rem; padding: 0 .4rem; }
.champ { margin: .9rem 0 0; }
.champ label { display: block; font-weight: 650; margin-bottom: .3rem; }
.champ .aide { display: block; margin: -.1rem 0 .35rem; }
.champ label .aide { display: inline; font-weight: 400; margin: 0; }
.candidature input[type="text"], .candidature input[type="email"], .candidature input[type="tel"], .candidature select, .candidature textarea {
	width: 100%; max-width: 40rem; font: inherit; padding: .6rem .7rem; border: 1px solid var(--filet-fort); border-radius: var(--rayon); background: var(--surface); color: var(--encre);
}
.candidature textarea { resize: vertical; }
.candidature input:focus, .candidature select:focus, .candidature textarea:focus { outline: 3px solid var(--surligneur); outline-offset: 1px; border-color: var(--encre); }
.candidature [aria-invalid="true"] { border-color: var(--alerte); }
.champ-erreur { color: var(--alerte); font-weight: 650; font-size: .9rem; margin: .3rem 0 0; }
.champ-accord label { font-weight: 400; display: flex; gap: .5rem; align-items: flex-start; }
.champ-accord input { margin-top: .3rem; }
.champ-concours .choix-formations { margin: .5rem 0 0; }
.champ-concours .choix-formations label { display: flex; gap: .5rem; align-items: flex-start; font-weight: 400; }
.champ-concours .choix-formations input { margin-top: .3rem; }
.candidature-erreurs { border: 2px solid var(--alerte); background: var(--alerte-fond); border-radius: var(--rayon); padding: .9rem 1.1rem; margin: 0 0 1.25rem; }
.candidature-erreurs ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.candidature-merci { border-left: 4px solid var(--ok); background: var(--ok-fond); border-radius: var(--rayon); padding: 1rem 1.25rem; }
.candidature-merci p { margin: .3rem 0; }
.champ-piege { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Articles (0.3.8). */
.article-rubrique { margin: 0; font-size: .78rem; font-weight: 650; text-transform: uppercase; letter-spacing: .07em; color: var(--accent); }
.article-carte p { margin: 0; }
.articles--accueil { margin-bottom: 2.5rem; }
@media (min-width: 60rem) {
	.articles--accueil, .article-autres .articles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2rem; border-bottom: 0; }
}
.pagination { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: space-between; margin: 1.5rem 0 2rem; }
.article-infos { margin: -.25rem 0 1.5rem; font-size: .9rem; }
.article-corps > p:first-child { font-size: clamp(1.1rem, 1rem + .4vw, 1.25rem); line-height: 1.5; color: var(--encre); }
.article-corps blockquote { margin: 1.5rem 0; padding: 1rem 1.25rem; background: var(--surligneur-pale); border-left: 4px solid var(--surligneur); border-radius: var(--rayon); }
.article-corps blockquote > :first-child { margin-top: 0; }
.article-corps blockquote > :last-child { margin-bottom: 0; }
.article-corps blockquote ul { padding-left: 1.2rem; }
.article-corps h2 { margin-top: 2.25rem; }
.article-corps .tableau { overflow-x: auto; margin: 1.25rem 0; }
.article-corps table { border-collapse: collapse; width: 100%; font-size: .93rem; }
.article-corps th, .article-corps td { border-bottom: 1px solid var(--filet); padding: .55rem .6rem; text-align: left; vertical-align: top; }
.article-corps th { background: var(--fond-2); font-weight: 650; }
.article-faq, .article-sources { margin-top: 2.5rem; }
.article-faq details { border-top: 1px solid var(--filet); padding: .8rem 0; }
.article-faq details:last-child { border-bottom: 1px solid var(--filet); }
.article-faq summary { cursor: pointer; font-weight: 650; }
.article-faq details p { margin: .6rem 0 0; }
.article-outils { margin: 2.5rem 0; padding: 1.25rem 1.5rem; border: 1px solid var(--filet-fort); border-radius: var(--rayon); }
.article-outils h2 { margin-top: 0; font-size: 1.25rem; }
.article-autres { margin: 2rem 0 1rem; }