:root {
  --color-primary: #1d3557;
  --color-primary-dark: #12233c;
  --color-primary-light: #4a6fa5;
  --color-accent: #e0983a;
  --color-accent-dark: #c07f24;
  /* Variante utilisable pour du TEXTE sur fond clair : --color-accent et
     --color-accent-dark n'atteignent pas 4,5:1 sur blanc (2,41:1 et 3,4:1
     mesurés) et sont réservés aux aplats de fond. */
  --color-accent-strong: #8f5c0f;

  --color-background: #f7f6f1;
  --color-surface: #ffffff;
  --color-surface-alt: #f1efe6;

  --color-text: #181a1f;
  --color-muted: #5c6270;
  --color-border: #e3e1d8;
  --color-border-strong: #cfccc0;

  /* Assombri : #1f8a4c ne donnait que 3,85:1 sur --color-success-bg
     (mesuré), sous le minimum de 4,5:1 — visible sur le badge « Alternance ». */
  --color-success: #17703c;
  --color-success-bg: #e6f4ea;
  --color-warning: #b45309;
  --color-warning-bg: #fdf1e0;
  --color-danger: #b3261e;
  --color-danger-bg: #fbe9e7;

  --font-sans:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(24, 26, 31, 0.06);
  --shadow-md: 0 8px 24px rgba(24, 26, 31, 0.08);

  --container-width: 1180px;
}

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

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

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
  max-width: 100%;
}

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

button {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(2.25rem, 4vw, 3.25rem);
}

h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
}

h3 {
  font-size: 1.125rem;
}

p {
  margin: 0;
}

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

input,
select {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--color-primary-light);
  outline-offset: 2px;
}

/* Titres rendus focalisables par le code (tabindex="-1") pour replacer le
   focus après un changement d'écran du quiz : ils reçoivent le focus par
   programme, jamais par tabulation, donc pas de contour à afficher — ce
   n'est pas un contrôle interactif. */
h1[tabindex='-1']:focus,
h2[tabindex='-1']:focus {
  outline: none;
}

/* Bug réel mesuré (Playwright contre la prod, computed display) : le
   navigateur applique [hidden]{display:none} depuis sa propre feuille de
   style, avec la même priorité qu'une règle d'auteur — un composant qui
   fixe son propre `display` (ex. .button en display:flex) l'emporte donc
   sur l'attribut hidden posé en JS (bouton "Suivant" du questionnaire
   d'orientation resté visible malgré hidden=true). Sans ce correctif,
   TOUT usage futur de `el.hidden = true` sur un élément stylé est fragile
   de la même façon. */
[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -48px;
  left: var(--space-4);
  z-index: 100;
  background: var(--color-primary);
  color: #fff;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: var(--space-2);
}

.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

main {
  display: block;
}

.page-shell {
  padding-bottom: var(--space-8);
}

.section {
  padding-block: var(--space-8);
}

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.section-intro {
  color: var(--color-muted);
  margin-top: var(--space-3);
  max-width: 46ch;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 var(--space-3);
}

.eyebrow span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}

.narrow-section {
  max-width: 620px;
  padding-block: var(--space-7);
}

/* Header ------------------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(247, 246, 241, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding-block: var(--space-4);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  font-size: 1.0625rem;
  margin-right: auto;
}

.brand__mark {
  display: inline-flex;
  gap: 2px;
}

.brand__mark span {
  width: 6px;
  height: 18px;
  border-radius: 3px;
  background: var(--color-primary-light);
}

.brand__mark span:nth-child(2) {
  background: var(--color-primary);
}

.brand__mark span:nth-child(3) {
  background: var(--color-accent);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  font-weight: 500;
  color: var(--color-muted);
}

.site-nav a:hover {
  color: var(--color-text);
}

.site-nav a[aria-current='page'] {
  color: var(--color-primary);
  font-weight: 600;
}

.header-favorite {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 500;
  color: var(--color-muted);
}

.header-favorite:hover {
  color: var(--color-primary);
}

.mobile-menu {
  display: none;
}

.mobile-menu summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin: calc(var(--space-2) * -1);
  border-radius: var(--radius-md);
}

.mobile-menu summary:hover {
  background: var(--color-surface-alt);
}

.mobile-menu summary::-webkit-details-marker {
  display: none;
}

/* Positionné en absolu par rapport à .site-header (position: sticky, donc
   déjà un bloc conteneur), volontairement PAS par rapport à .mobile-menu :
   bug réel mesuré (Playwright, scrollWidth) quand .mobile-menu portait son
   propre `position: relative` — le bouton hamburger de 28px devenait le
   bloc conteneur, inset-inline calculait une largeur de ~26px, le contenu
   du menu débordait visuellement de cette boîte et décalait toute la page
   de 63px à 360px de large. */
.mobile-menu nav {
  position: absolute;
  inset-inline: var(--space-4);
  top: 100%;
  margin-top: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  box-shadow: var(--shadow-md);
}

/* Footer -------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  padding-top: var(--space-7);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-6);
  padding-bottom: var(--space-6);
}

.footer-brand {
  font-weight: 700;
  font-size: 1.0625rem;
  margin-bottom: var(--space-2);
}

.footer-copy {
  color: var(--color-muted);
  max-width: 34ch;
}

.footer-title {
  font-weight: 600;
  margin-bottom: var(--space-3);
}

.footer-grid a {
  display: block;
  color: var(--color-muted);
  padding-block: var(--space-1);
}

.footer-grid a:hover {
  color: var(--color-primary);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding-block: var(--space-4);
  border-top: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: 0.875rem;
}

/* Breadcrumb ---------------------------------------------------------- */

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-muted);
  font-size: 0.875rem;
}

.breadcrumb li:not(:last-child)::after {
  content: '/';
  margin-left: var(--space-2);
  color: var(--color-border-strong);
}

.breadcrumb a:hover {
  color: var(--color-primary);
}

/* Buttons ---------------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.75rem 1.375rem;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  transition:
    transform 0.12s ease,
    background 0.15s ease,
    border-color 0.15s ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button--primary {
  background: var(--color-primary);
  color: #fff;
}

.button--primary:hover {
  background: var(--color-primary-dark);
}

.button--secondary {
  background: var(--color-surface);
  color: var(--color-primary);
  border-color: var(--color-border-strong);
}

.button--secondary:hover {
  border-color: var(--color-primary);
}

.button--ghost {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border-strong);
}

.button--dark {
  background: var(--color-primary-dark);
  color: #fff;
}

.button--full {
  width: 100%;
}

.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.text-link {
  font-weight: 600;
  color: var(--color-primary);
  border-bottom: 1px solid transparent;
}

.text-link:hover {
  border-color: currentColor;
}

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

/* Badges ------------------------------------------------------------------ */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
}

.badge--neutral {
  background: var(--color-surface-alt);
  color: var(--color-muted);
}

.badge--primary {
  background: rgba(29, 53, 87, 0.1);
  color: var(--color-primary);
}

.badge--success {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.badge--warning {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

/* Active filter chips ------------------------------------------------------ */

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 36px;
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: rgba(29, 53, 87, 0.08);
  color: var(--color-primary);
  font-size: 0.8125rem;
  font-weight: 600;
}

.filter-chip:hover {
  background: rgba(29, 53, 87, 0.15);
}

/* Raccourci « Tout effacer ». Classe distincte de .filter-chip, et pas un
   simple modificateur : il ne représente aucun filtre, il les retire tous.
   Le distinguer évite aussi qu'il soit compté comme une puce de filtre
   (par un test comme par un lecteur d'écran). */
.filter-reset {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding-inline: var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-muted);
  font-size: 0.8125rem;
  font-weight: 600;
}

.filter-reset:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
}

.filter-chip span[aria-hidden] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 1rem;
  line-height: 1;
}

/* Pagination ----------------------------------------------------------------- */

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.pagination__pages {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1);
}

.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  height: 2.75rem;
  padding-inline: var(--space-2);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-muted);
}

.pagination a:hover {
  background: var(--color-surface-alt);
}

.pagination a[aria-current='page'] {
  background: var(--color-primary);
  color: #fff;
}

.pagination span[aria-disabled='true'] {
  opacity: 0.4;
}

/* Favorite button --------------------------------------------------------------- */

.favorite-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-muted);
  cursor: pointer;
}

.favorite-button[aria-pressed='true'] {
  color: #c0264a;
  border-color: #f2c4d1;
  background: #fdf0f3;
}

.favorite-button--compact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: var(--space-2);
  border: none;
  background: transparent;
}

/* Map ----------------------------------------------------------------------------- */

.formation-map {
  width: 100%;
  height: 520px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.map-empty {
  padding: var(--space-6);
  text-align: center;
  color: var(--color-muted);
  background: var(--color-surface);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
}

.map-popup {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-family: var(--font-sans);
}

.map-popup strong {
  font-size: 0.9375rem;
}

.map-popup span {
  font-size: 0.8125rem;
  color: var(--color-muted);
}

.map-popup a {
  margin-top: var(--space-1);
  font-weight: 600;
  color: var(--color-primary);
  font-size: 0.8125rem;
}

/* Empty state / alerts ------------------------------------------------------------- */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-4);
  color: var(--color-muted);
}

.empty-state__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
}

.empty-state__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-surface-alt);
  color: var(--color-primary);
}

.empty-state h2 {
  color: var(--color-text);
}

.alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  flex-wrap: wrap;
}

.alert--warning {
  background: var(--color-warning-bg);
  border: 1px solid #f0d3a6;
}

.alert strong {
  display: block;
}

.alert p {
  color: var(--color-muted);
  margin-top: var(--space-1);
}

/* Skeleton loading states -------------------------------------------------------------- */

.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
}

.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  animation: skeleton-shimmer 1.4s infinite;
}

@keyframes skeleton-shimmer {
  100% {
    transform: translateX(100%);
  }
}

.skeleton--title {
  height: 2.5rem;
  width: min(420px, 70%);
  margin-bottom: var(--space-4);
}

.skeleton--search {
  height: 3.25rem;
  border-radius: var(--radius-full);
  max-width: 560px;
}

.skeleton--filters {
  height: 420px;
}

.skeleton--card {
  height: 220px;
}

/* Search bar / form ------------------------------------------------------ */

.hero-search,
.search-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5);
  box-shadow: var(--shadow-sm);
}

.hero-search {
  margin-top: var(--space-6);
  max-width: 560px;
}

/* Groupe loupe + champ. Transparent par défaut : sur grand écran, c'est le
   formulaire lui-même qui porte la pilule, bouton compris. Il reprend cette
   pilule à son compte sous 400 px, quand le bouton passe sur sa propre
   ligne (voir responsive.css). */
.search-field {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
}

.hero-search input,
.search-bar input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding-block: var(--space-2);
  font-size: 1rem;
}

.hero-search input:focus,
.search-bar input:focus {
  outline: none;
}

/* Le focus est déplacé sur le conteneur pilule (:focus-within) plutôt que
   sur l'input lui-même, sans quoi le rectangle d'outline par défaut casse
   la forme arrondie ; un outline explicite reste indispensable pour le
   clavier (WCAG 2.4.7), il ne doit jamais être supprimé sans remplacement. */
.hero-search:focus-within,
.search-bar:focus-within {
  outline: 2px solid var(--color-primary-light);
  outline-offset: 2px;
}

.hero-search svg,
.search-bar svg {
  color: var(--color-muted);
  flex-shrink: 0;
}

.hero-search .button,
.search-bar .button {
  flex-shrink: 0;
}

/* Filter panel -------------------------------------------------------------- */

/* Le panneau de filtres est un <details> replié par défaut sur mobile (via
   filter-panel.js, qui ne ferme que sous 900px) et toujours ouvert sur
   desktop — le bouton "Filtres" (summary) n'existe donc visuellement que
   sous 900px, voir responsive.css. */
.filter-panel-toggle {
  display: none;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  margin-bottom: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  width: fit-content;
}

.filter-panel-toggle::-webkit-details-marker {
  display: none;
}

.filter-panel {
  position: sticky;
  top: calc(64px + var(--space-4));
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.filter-panel__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border: none;
  padding: 0;
  margin: 0;
}

.field legend {
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 0;
  margin-bottom: var(--space-1);
}

.field label:not(.radio-row) {
  font-weight: 600;
  font-size: 0.875rem;
}

.field input[type='text'],
.field select {
  /* Bug réel mesuré (Playwright, /metiers à 320px) : un <select> sans
     largeur explicite peut se dimensionner sur son option la plus longue
     (ex. un intitulé de domaine long) plutôt que sur l'espace disponible,
     ce qui élargit toute la colonne de grille .search-layout qui le
     contient (les grid items ne rétrécissent pas sous leur min-content par
     défaut) — d'où un débordement horizontal de page entière, pas juste du
     champ. width: 100% force le select à suivre son conteneur. */
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  background: var(--color-background);
}

.radio-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.9375rem;
}

/* Domain grid ------------------------------------------------------------ */

.domain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-4);
}

.domain-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  transition:
    border-color 0.15s ease,
    transform 0.15s ease;
}

.domain-card:hover {
  border-color: var(--color-primary-light);
  transform: translateY(-2px);
}

.domain-card svg {
  margin-left: auto;
  color: var(--color-muted);
  flex-shrink: 0;
}

.domain-card__number {
  font-weight: 700;
  font-size: 1.125rem;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
}

.domain-card__number--1 {
  background: var(--color-primary);
}

/* Texte sombre sur l'accent orange, pas blanc : blanc sur --color-accent ne
   donne que 2,41:1 (mesuré), très en dessous du minimum de 4,5:1 pour ce
   corps de texte. Assombrir l'orange jusqu'à passer avec du blanc le
   dénaturerait ; le texte sombre garde la couleur de marque intacte. */
.domain-card__number--2 {
  background: var(--color-accent);
  color: var(--color-primary-dark);
}

/* Vert assombri : l'ancien #5c8a72 ne donnait que 3,94:1 avec du blanc. */
.domain-card__number--3 {
  background: #47705b;
}

.domain-card__number--4 {
  background: #7a6ba8;
}

.domain-card strong {
  display: block;
}

.domain-card small {
  color: var(--color-muted);
}

/* Pathway ------------------------------------------------------------------ */

.pathway-layout {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--space-7);
  align-items: start;
}

.pathway-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.pathway-steps li {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

/* --color-accent sur fond clair ne donne que 2,41:1 (mesuré) : ces numéros
   d'étape portent une information (l'ordre), ils doivent rester lisibles. */
.pathway-steps li span:first-child {
  font-weight: 700;
  color: var(--color-accent-strong);
  font-size: 1.125rem;
}

.pathway-steps p {
  color: var(--color-muted);
  margin-top: var(--space-1);
}

/* Formation card --------------------------------------------------------------- */

.formation-card {
  display: flex;
  flex-direction: column;
  /* Resserré (12px → 8px) pour compenser le titre agrandi : la hiérarchie
     doit gagner en lisibilité sans rendre les cartes plus hautes, ce qui
     repousserait à nouveau les résultats suivants hors de l'écran. */
  gap: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.formation-card:hover {
  border-color: var(--color-primary-light);
  box-shadow: var(--shadow-sm);
}

.formation-card__topline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.formation-card__topline .favorite-button {
  margin-left: auto;
}

.formation-card__eyebrow {
  font-size: 0.8125rem;
  color: var(--color-muted);
  font-weight: 600;
  margin-bottom: var(--space-1);
}

/* Hiérarchie des cartes de liste (relevé par un audit externe : listes trop
   denses et uniformes, « l'œil ne sait plus où regarder »). Mesuré avant
   correction : le titre n'était qu'à 17px quand tout le reste tenait entre
   13 et 14px, et l'établissement avait exactement le même traitement que la
   localisation — deux lignes grises indifférenciables.
   Ordre de lecture visé : intitulé, établissement, localisation, puis
   informations de contexte (date) et actions. */
.formation-card h2 {
  font-size: 1.1875rem;
  line-height: 1.35;
}

.formation-card h2 a:hover {
  color: var(--color-primary);
}

.formation-card__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  color: var(--color-muted);
  font-size: 0.875rem;
}

/* L'établissement est le deuxième critère de choix après l'intitulé : il
   porte donc la couleur du texte principal, la localisation reste en gris
   secondaire. */
.formation-card__institution {
  color: var(--color-text);
  font-weight: 500;
}

.formation-card__location {
  font-size: 0.8125rem;
}

.formation-card__details p {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.formation-card__details svg {
  flex-shrink: 0;
  color: var(--color-muted);
}

.formation-card__details a:hover {
  color: var(--color-primary);
}

.formation-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  /* Date de mise à jour : information de contexte, volontairement au dernier
     rang visuel — elle doit rester lisible (elle dit que la donnée n'est pas
     temps réel) sans concurrencer l'intitulé ni les actions. */
  font-size: 0.75rem;
  color: var(--color-muted);
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: 600;
  color: var(--color-primary);
  white-space: nowrap;
  /* Action principale de la carte : ne doit pas hériter de la taille réduite
     du pied, qui est réservée à la date de mise à jour. */
  font-size: 0.8125rem;
}

/* Profession cards -------------------------------------------------------------- */

.rome-code-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.rome-code {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
  color: var(--color-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.8125rem;
  font-weight: 700;
  white-space: nowrap;
}

.profession-card .formation-card__details > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

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

.formation-card__footer-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.compare-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: 40px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: 0.8125rem;
  font-weight: 600;
}

.compare-button--selected {
  color: var(--color-primary);
  border-color: var(--color-primary-light);
  background: rgba(29, 53, 87, 0.08);
}

/* Limite atteinte : le bouton reste focusable (aria-disabled, pas disabled)
   et porte le message en clair, une infobulle n'existant ni au toucher ni
   au clavier. */
.compare-button:disabled,
.compare-button--full {
  opacity: 0.65;
  cursor: not-allowed;
}

/* Réserve d'espace en bas de page tant que la barre flottante est affichée,
   sinon elle masque le pied de page (mesuré : 157 px recouverts à 360x640).
   La hauteur réelle est fournie par compare-bar.js, qui la mesure après
   rendu — elle dépend de la largeur d'écran et du nombre de lignes. */
.has-compare-bar {
  padding-bottom: calc(var(--compare-bar-height, 0px) + var(--space-7));
}

.compare-bar {
  position: fixed;
  left: 50%;
  /* env(safe-area-inset-bottom) : sur les téléphones à barre de geste, le
     bas de l'écran est occupé par l'interface système. */
  bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  max-width: calc(100vw - 2 * var(--space-4));
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--space-5);
  background: var(--color-primary-dark);
  color: #fff;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
  font-size: 0.875rem;
  font-weight: 600;
}

.compare-bar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.compare-bar .text-link {
  color: rgba(255, 255, 255, 0.75);
}

.compare-bar .detail-muted {
  color: rgba(255, 255, 255, 0.75);
}

.compare-differences {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}

.compare-differences h2 {
  margin-bottom: var(--space-3);
}

.compare-differences ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.compare-differences li {
  font-size: 0.9375rem;
  color: var(--color-muted);
}

.compare-differences li strong {
  color: var(--color-text);
}

.compare-table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}

.compare-table th,
.compare-table td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

.compare-table thead th {
  background: var(--color-surface-alt);
  font-size: 0.9375rem;
}

.compare-table tbody th {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-muted);
  white-space: nowrap;
}

.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td {
  border-bottom: none;
}

/* Cartes de comparaison (mobile) ------------------------------------------ */

/* comparer-page.js génère toujours les deux structures (tableau + cartes) ;
   c'est le CSS seul qui décide laquelle est visible selon la largeur —
   pas de recalcul JS au redimensionnement, voir le seuil dans
   responsive.css (même endroit que .compare-table-wrapper qui bascule en
   sens inverse). */
.compare-cards {
  display: none;
  flex-direction: column;
  gap: var(--space-4);
}

.compare-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}

.compare-card__title {
  margin-bottom: var(--space-4);
}

.compare-card__rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.compare-card__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.compare-card__row:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.compare-card__row dt {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}

.compare-card__row dd {
  margin: 0;
  font-weight: 500;
}

/* Questionnaire /orientation --------------------------------------------- */

.questionnaire {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  margin-top: var(--space-6);
}

.questionnaire select[multiple] {
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  background: var(--color-background);
}

.questionnaire-results {
  padding-top: var(--space-2);
  padding-bottom: var(--space-7);
}

.questionnaire-results h2 {
  margin-bottom: var(--space-3);
}

.questionnaire-results .formation-list {
  margin-top: var(--space-5);
}

/* Score de correspondance : le pourcentage et le libellé qualitatif
   ("92 % — Très bon match") forment un seul bloc de lecture plutôt que
   deux éléments séparés (badge + nombre brut) — le nombre seul
   n'explique rien sans son interprétation. */
.recommendation-score-block {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-1);
}

.recommendation-score-block .favorite-button--compact {
  margin-left: auto;
}

.recommendation-score {
  font-weight: 700;
  font-size: 1.375rem;
  color: var(--color-text);
}

.recommendation-match-label {
  font-weight: 600;
  font-size: 0.875rem;
}

.recommendation-score-block--success .recommendation-match-label {
  color: var(--color-success);
}

.recommendation-score-block--primary .recommendation-match-label {
  color: var(--color-primary);
}

.recommendation-score-block--neutral .recommendation-match-label {
  color: var(--color-muted);
}

.recommendation-reasons-block {
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}

.recommendation-reasons-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  margin-bottom: var(--space-2);
}

.recommendation-reasons {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.recommendation-reasons li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.8125rem;
  color: var(--color-muted);
}

.recommendation-reasons svg {
  color: var(--color-success);
  flex-shrink: 0;
}

.recommendation-disclaimer {
  font-size: 0.75rem;
  color: var(--color-muted);
  font-style: italic;
}

/* Quiz d'orientation (public/js/orientation-quiz/) ------------------------- */

/* Rythme vertical global de la page : les écrans successifs (intro,
   question, résultats) gèrent chacun leur propre largeur, ce padding ne
   fait qu'espacer le tout du header/footer. */
.quiz-page {
  padding-block: var(--space-7);
}

/* Écran d'intro et écran de question : volontairement plus étroits que
   .container (1180px) pour rester "une chose à la fois" — calme et
   pédagogique plutôt qu'un tableau de bord. Les résultats, eux, utilisent
   toute la largeur de .container (voir .quiz-results) : composition
   réellement différente entre les deux écrans, pas juste une version
   mobile étirée. */
.quiz-intro,
.quiz-shell {
  max-width: 720px;
  margin-inline: auto;
}

.quiz-intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-6);
  text-align: center;
  align-items: center;
}

.quiz-intro h1 {
  max-width: 26ch;
}

.quiz-intro__lead {
  color: var(--color-muted);
  font-size: 1.0625rem;
  max-width: 52ch;
}

.quiz-intro__note {
  font-size: 0.875rem;
  color: var(--color-muted);
}

.quiz-intro__actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

/* Écran de question --------------------------------------------------------- */

.quiz-shell {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.quiz-progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.quiz-progress__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-muted);
}

.quiz-progress__bar {
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-surface-alt);
  overflow: hidden;
}

.quiz-progress__fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  transition: width 0.25s ease;
}

.quiz-question {
  font-size: 1.5rem;
  line-height: 1.3;
}

.quiz-question__hint {
  margin-top: calc(-1 * var(--space-4));
  font-size: 0.875rem;
  color: var(--color-muted);
}

.quiz-text-field input {
  width: 100%;
  font-size: 1.0625rem;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.quiz-text-field input:focus {
  outline: 2px solid var(--color-primary-light);
  outline-offset: 2px;
}

.quiz-nav {
  display: flex;
  gap: var(--space-3);
}

.quiz-nav [data-action='back'] {
  flex: 0 0 auto;
}

.quiz-nav [data-action='continue-multi'],
.quiz-nav [data-action='continue-text'] {
  flex: 1;
}

/* Réponses : grandes cartes tactiles (jamais de simple radio compacte),
   en grille qui s'adapte au nombre de réponses réelles de chaque question
   (de 3 à 15) sans réglage au cas par cas. */
.quiz-answers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-3);
}

.quiz-answer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  min-height: 64px;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  text-align: left;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    transform 0.12s ease;
}

.quiz-answer:hover {
  border-color: var(--color-primary-light);
  transform: translateY(-1px);
}

.quiz-answer:focus-visible {
  outline: 2px solid var(--color-primary-light);
  outline-offset: 2px;
}

.quiz-answer--selected {
  border-color: var(--color-primary);
  background: rgba(29, 53, 87, 0.06);
}

.quiz-answer__icon {
  font-size: 1.5rem;
  line-height: 1;
}

.quiz-answer__label {
  line-height: 1.35;
}

/* Écran de résultats --------------------------------------------------------- */

/* Contrairement à l'intro/aux questions, les résultats utilisent toute la
   largeur de .container : plusieurs sections denses (profil, domaines,
   formations) plutôt qu'un flux unique — la vraie différence de
   composition desktop demandée, pas une simple colonne étirée. */
.quiz-results {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

.quiz-results__intro h1 {
  margin-top: var(--space-2);
}

.quiz-results__hybrid {
  color: var(--color-muted);
  font-weight: 500;
  font-size: 0.6em;
}

.quiz-results__lead {
  margin-top: var(--space-3);
  font-size: 1.0625rem;
  max-width: 68ch;
}

.quiz-results__disclaimer {
  margin-top: var(--space-3);
  font-size: 0.8125rem;
  color: var(--color-muted);
  font-style: italic;
  max-width: 68ch;
}

.quiz-results__section h2 {
  margin-bottom: var(--space-2);
}

.quiz-results__section-note {
  color: var(--color-muted);
  font-size: 0.875rem;
  margin-bottom: var(--space-4);
  max-width: 68ch;
}

.quiz-results__how {
  margin-top: var(--space-4);
  font-size: 0.875rem;
  color: var(--color-muted);
}

.quiz-results__how summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--color-primary);
}

.quiz-results__how p {
  margin-top: var(--space-2);
  max-width: 68ch;
}

.quiz-results__also {
  margin-top: var(--space-5);
  margin-bottom: var(--space-3);
  font-weight: 600;
  font-size: 0.9375rem;
}

.quiz-results__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.quiz-profile-bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* max-width porté par la barre elle-même (pas seulement le conteneur
   .quiz-profile-bars) pour que la barre isolée de "Tes préférences
   d'études" garde les mêmes proportions que les 6 barres du profil
   d'intérêts, plutôt que de s'étirer sur toute la largeur de .container. */
.quiz-profile-bar {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 640px;
}

.quiz-profile-bar__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 0.9375rem;
  font-weight: 600;
}

.quiz-profile-bar__track {
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-surface-alt);
  overflow: hidden;
}

.quiz-profile-bar__fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  transition: width 0.4s ease;
}

.quiz-domain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-4);
}

.quiz-domain-grid--secondary .quiz-domain-card {
  background: var(--color-surface-alt);
  border-color: transparent;
}

.quiz-domain-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  transition:
    border-color 0.15s ease,
    transform 0.12s ease;
}

.quiz-domain-card:hover {
  border-color: var(--color-primary-light);
  transform: translateY(-1px);
}

.quiz-domain-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.quiz-domain-card__score {
  flex-shrink: 0;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-full);
  background: rgba(29, 53, 87, 0.1);
  color: var(--color-primary);
  font-size: 0.75rem;
  font-weight: 700;
}

.quiz-domain-card__why {
  color: var(--color-muted);
  font-size: 0.8125rem;
}

.quiz-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* Écran intermédiaire "profil prêt" (renderInterimProfile) --------------- */

.quiz-interim__transition {
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}

.quiz-interim__transition h2 {
  font-size: 1.125rem;
}

/* Formation la plus compatible : légèrement mise en avant par rapport aux
   alternatives (.formation-list), sans dupliquer un design entièrement
   différent — même carte, cadre plus marqué. */
.quiz-best-match .recommendation-card {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

/* Hero (accueil) ---------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-8);
}

.hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.35;
  z-index: 0;
}

.hero__orb--one {
  width: 420px;
  height: 420px;
  background: var(--color-primary-light);
  top: -160px;
  right: -120px;
}

.hero__orb--two {
  width: 320px;
  height: 320px;
  background: var(--color-accent);
  bottom: -140px;
  left: -100px;
  opacity: 0.25;
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: 720px;
}

.hero__lead {
  color: var(--color-muted);
  font-size: 1.125rem;
  margin-top: var(--space-4);
  max-width: 52ch;
}

.hero__trust {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
  color: var(--color-muted);
  font-size: 0.875rem;
}

/* Intentions (accueil) ------------------------------------------------------ */

.section--intents {
  padding-block: var(--space-7);
}

.intent-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.intent-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.intent-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: rgba(29, 53, 87, 0.08);
  color: var(--color-primary);
}

.intent-card p {
  color: var(--color-muted);
  flex-grow: 1;
}

/* Search CTA -------------------------------------------------------------- */

.search-cta {
  text-align: center;
  max-width: 560px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.search-cta svg {
  color: var(--color-primary);
}

.search-cta p {
  color: var(--color-muted);
}

.search-cta .button {
  margin-top: var(--space-3);
}

/* Formations search page --------------------------------------------------- */

.search-header {
  padding-block: var(--space-7) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.search-header__lead {
  color: var(--color-muted);
  max-width: 68ch;
  margin-top: var(--space-3);
}

.search-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-6);
  padding-block: var(--space-6);
  align-items: start;
}

.results-panel {
  min-width: 0;
}

.results-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

.favorites-section + .favorites-section {
  margin-top: var(--space-7);
}

.favorites-section__count {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-muted);
}

.results-toolbar p {
  color: var(--color-muted);
  margin-top: var(--space-1);
}

.view-switch {
  display: inline-flex;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.view-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-muted);
}

.view-switch a[aria-current='page'] {
  background: var(--color-primary);
  color: #fff;
}

.formation-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}

.map-results {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.map-note {
  color: var(--color-muted);
  font-size: 0.875rem;
}

/* Detail pages (formation / établissement / métier / domaine) ------------- */

.detail-hero {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-6) var(--space-7);
}

.detail-hero__badges {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.detail-hero h1 {
  max-width: 44ch;
}

.detail-hero__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-muted);
  margin-top: var(--space-3);
}

.detail-hero__meta svg {
  flex-shrink: 0;
}

.detail-hero__meta a:hover {
  color: var(--color-primary);
}

.detail-hero__actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
  flex-wrap: wrap;
}

.detail-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-6);
  padding-block: var(--space-6);
  align-items: start;
}

.detail-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

.detail-side {
  position: sticky;
  top: calc(64px + var(--space-4));
}

.detail-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}

.detail-card h2 {
  margin-bottom: var(--space-4);
}

.detail-card > p + p {
  margin-top: var(--space-1);
}

.detail-muted {
  color: var(--color-muted);
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

.detail-grid--single {
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.detail-grid dt {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  margin-bottom: var(--space-1);
}

.detail-grid dd {
  margin: 0;
  font-weight: 500;
}

.detail-disclaimer {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: 0.8125rem;
}

.other-offerings-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.other-offerings-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.other-offerings-item:hover {
  border-color: var(--color-primary-light);
}

.other-offerings-item__institution {
  font-weight: 600;
}

.other-offerings-item__meta {
  font-size: 0.8125rem;
  color: var(--color-muted);
}

.detail-alert {
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
}

.detail-alert--warning {
  background: var(--color-warning-bg);
  border: 1px solid #f0d3a6;
}

.detail-alert__title {
  font-weight: 700;
  color: var(--color-warning);
  margin-bottom: var(--space-2);
}

.detail-alert ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  list-style: disc;
  padding-left: 1.25rem;
  color: var(--color-text);
  font-size: 0.875rem;
}

/* Admin --------------------------------------------------------------- */

.admin-section-title {
  margin-top: var(--space-7);
}

.admin-strong {
  color: var(--color-text);
}

/* Content pages (à propos, transparence) ------------------------------- */

.prose {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-block: var(--space-6) var(--space-8);
}

.prose h2 {
  margin-top: var(--space-4);
}

.prose p {
  color: var(--color-muted);
  max-width: 68ch;
}

.prose ul {
  list-style: disc;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  color: var(--color-muted);
  max-width: 68ch;
}

.prose a {
  color: var(--color-primary);
  font-weight: 600;
}

.prose a:hover {
  text-decoration: underline;
}

/* Toutes les media queries du site, regroupées ici par point de rupture
   plutôt que dispersées dans chaque fichier de composant (structure
   demandée : un seul endroit à ouvrir pour ajuster le responsive). */

/* ≤ 400px : barre de recherche (hero + /formations) ---------------------- */

/* Bug réel mesuré (Playwright, viewport réel, pas une lecture du CSS) : le
   bouton "Rechercher" a une largeur fixe (flex-shrink: 0, voir forms.css)
   et ne rentre plus à côté de l'icône + du champ en dessous de ~400px —
   débordement horizontal mesuré de 16px à 375px, 71px à 320px. Sur la page
   d'accueil, .hero { overflow: hidden } masquait ce débordement au lieu de
   le révéler : le bouton était silencieusement rogné, pas juste débordant.
   Le bouton passe donc sur sa propre ligne, pleine largeur, en dessous de
   ce seuil plutôt que de rétrécir son texte.

   Reste que le bouton, pilule pleine largeur, se retrouvait alors ENFERMÉ
   dans la pilule blanche du formulaire : deux formes arrondies imbriquées,
   avec une épaisse marge blanche autour du bouton. Sous ce seuil, le
   formulaire abandonne donc son fond au profit du seul groupe loupe+champ
   (.search-field) et devient une simple colonne : une pilule de saisie, un
   espace, un bouton — au lieu d'un bouton dans une boîte. */
@media (max-width: 400px) {
  .hero-search,
  .search-bar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
  }

  /* Le focus doit suivre la pilule, qui n'est plus le formulaire. */
  .hero-search:focus-within,
  .search-bar:focus-within {
    outline: none;
  }

  .search-field {
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-sm);
    padding: var(--space-2) var(--space-4);
  }

  .search-field:focus-within {
    outline: 2px solid var(--color-primary-light);
    outline-offset: 2px;
  }

  .hero-search .button,
  .search-bar .button {
    width: 100%;
  }
}

/* ≤ 640px : container, hero, section, compare-bar --------------------- */

@media (max-width: 640px) {
  .container {
    padding-inline: var(--space-4);
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .section {
    padding-block: var(--space-7);
  }

  .compare-bar {
    left: var(--space-4);
    right: var(--space-4);
    bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    transform: none;
    max-width: none;
    flex-direction: column;
    align-items: flex-start;
  }

  .detail-grid {
    grid-template-columns: 1fr;
  }

  .compare-table-wrapper {
    display: none;
  }

  .compare-cards {
    display: flex;
  }

  .quiz-intro {
    padding: var(--space-5) var(--space-4);
  }

  .quiz-question {
    font-size: 1.25rem;
  }

  .quiz-results__intro h1 {
    font-size: 1.5rem;
  }

  /* Bug réel mesuré (Playwright, 360x740, deux filtres actifs) : le premier
     résultat commençait à 748 px, soit entièrement sous la ligne de
     flottaison — l'utilisateur mobile n'en voyait aucun sans faire défiler.
     L'en-tête de recherche consommait à lui seul 323 px et la barre
     d'outils 120 px. On resserre les deux : rien n'est retiré, seuls les
     espacements et la taille du titre sont réduits sur petit écran. */
  .search-header {
    padding-block: var(--space-5) var(--space-4);
  }

  .search-header h1 {
    font-size: 1.5rem;
  }

  .search-header .eyebrow {
    margin-bottom: var(--space-1);
  }

  .search-layout {
    padding-block: var(--space-4);
  }

  .results-toolbar {
    margin-bottom: var(--space-4);
    gap: var(--space-2);
  }

  .results-toolbar h2 {
    font-size: 1.125rem;
  }
}

/* ≤ 780px : header/nav, footer ----------------------------------------- */

@media (max-width: 780px) {
  .site-nav,
  .header-favorite {
    display: none;
  }

  .mobile-menu {
    display: block;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }
}

/* ≤ 860px : cartes d'intentions (accueil), parcours (pathway) ------------ */

@media (max-width: 860px) {
  .intent-grid {
    grid-template-columns: 1fr;
  }

  .pathway-layout {
    grid-template-columns: 1fr;
  }
}

/* ≤ 900px : recherche formations, pages de détail ------------------------ */

@media (max-width: 900px) {
  .search-layout {
    grid-template-columns: 1fr;
  }

  .detail-layout {
    grid-template-columns: 1fr;
  }

  .detail-side {
    position: static;
  }

  .filter-panel-toggle {
    display: flex;
  }

  .filter-panel {
    position: static;
    top: auto;
  }
}

/* Préférences d'accessibilité -------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .skeleton::after {
    animation: none;
  }
}