/* ==========================================================================
   Catalogue Mécavenir — feuille de style unique
   Les couleurs de la charte sont des variables : les modifier ici les change
   partout. Les fichiers de contenu y font référence par leur nom (couleur: vert).
   ========================================================================== */

:root {
  --bleu: #00489a;
  --ciel: #009fe3;
  --vert: #95c11f;
  --orange: #f39200;
  --violet: #a71681;
  --rouge: #dc0d15;
  --turquoise: #0095ad;
  --pomme: #65b32e;
  --indigo: #332878;
  --mandarine: #ef7d00;
  --jaune: #e1b900;
  --soleil: #ffd200;
  --rose: #e8a3c9;
  --lagon: #84c9d7;
  --barre: #7fc6d6;

  --encre: #1b2a41;
  --texte: #33415c;
  --texte-doux: #5b6b85;
  --fond: #f3f5fa;
  --blanc: #fff;
  --ligne: #dbe3ef;
  --survol: #eef2f9;
  --actif: #e3ecf9;

  --titres: "Archivo", sans-serif;
  --corps: "Source Sans 3", system-ui, sans-serif;

  --menu-ouvert: 260px;
  --menu-ferme: 72px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: #0b1c33;
  font-family: var(--corps);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--bleu); text-decoration: none; }
a:hover { color: var(--ciel); }
img { max-width: 100%; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #c9d6e6; border-radius: 8px; }

/* --- Structure générale -------------------------------------------------- */

.app {
  position: fixed;
  inset: 0;
  display: flex;
  overflow: hidden;
  background: var(--fond);
}
.scene { flex: 1; position: relative; overflow: hidden; }
.piste {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 520ms cubic-bezier(.7, 0, .2, 1);
}
.ecran {
  flex: 0 0 100%;
  height: 100%;
  overflow-y: auto;
  color: var(--encre);
  background: var(--fond);
}
.ecran--blanc { background: var(--blanc); }
.ecran--sombre {
  background: linear-gradient(160deg, var(--bleu) 0%, #005597 45%, var(--turquoise) 100%);
  color: #fff;
}

/* --- Menu latéral -------------------------------------------------------- */

.menu {
  flex: none;
  width: var(--menu-ferme);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 10px;
  background: var(--blanc);
  border-right: 1px solid var(--ligne);
  transition: width 260ms cubic-bezier(.4, 0, .2, 1);
  z-index: 30;
}
/* data-menu-ouvert : menu épinglé (il pousse le contenu) ;
   data-menu-deplie : menu affiché en entier (épinglé, ou survolé quand il est replié). */
.app[data-menu-deplie="true"] .menu { width: var(--menu-ouvert); }
/* Replié (ou sur petit écran), le menu se superpose au contenu : le survol
   le déplie sans décaler la page. */
.app:not([data-menu-ouvert="true"]) .menu { position: absolute; top: 0; bottom: 0; left: 0; }
.app:not([data-menu-ouvert="true"]) .scene { margin-left: var(--menu-ferme); }
.app:not([data-menu-ouvert="true"])[data-menu-deplie="true"] .menu { box-shadow: 0 0 40px rgba(0, 30, 70, .25); }
/* Petits écrans : le menu se superpose toujours au contenu */
@media (max-width: 759px) {
  .menu { position: absolute; top: 0; bottom: 0; left: 0; }
  .scene { margin-left: var(--menu-ferme); }
  .app[data-menu-deplie="true"] .menu { box-shadow: 0 0 40px rgba(0, 30, 70, .25); }
}
.menu__haut { display: flex; align-items: center; height: 48px; flex: none; }
.menu__bascule {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  border: none;
  margin-left: 4px;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.menu__bascule span { display: block; height: 3px; border-radius: 2px; background: var(--bleu); }
.menu__sep { height: 1px; background: #e6ecf5; margin: 6px 4px 10px; flex: none; }
.menu__liste { display: flex; flex-direction: column; gap: 4px; min-height: 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; }
.menu__rubrique {
  display: none;
  margin: 10px 12px 2px;
  font: 700 11px/1.3 var(--titres);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texte-doux);
}
.app[data-menu-deplie="true"] .menu__rubrique { display: block; }
.menu__rubrique span { display: block; }
.menu__rubrique.theme--bac2 { color: var(--orange); }
.menu__rubrique.theme--bac3 { color: var(--pomme); }
.menu__rubrique.theme--bac5 { color: var(--violet); }
.menu__sous-rubrique {
  display: none;
  margin: 6px 12px 0 46px;
  font: 700 10.5px/1.3 var(--titres);
  letter-spacing: .06em;
  color: #8494ab;
}
.app[data-menu-deplie="true"] .menu__sous-rubrique { display: block; }
.menu__nouveau {
  display: inline-block;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 3px;
  background: var(--soleil);
  color: var(--rouge);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: 2px;
}
.menu__item {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  /* 16px de chaque côté du numéro (20px) : centré dans le rail replié (52px utiles) */
  padding: 10px 12px 10px 16px;
  border-radius: 22px;
  font-family: var(--titres);
  font-weight: 700;
  color: var(--texte-doux);
  transition: background 180ms;
}
.menu__item:hover { background: var(--survol); color: var(--texte-doux); }
.menu__item[aria-current="true"] { background: var(--actif); color: var(--bleu); }
.menu__num { flex: none; display: flex; justify-content: center; width: 20px; font-size: 13px; letter-spacing: .04em; white-space: nowrap; }
/* Replié : pas de barre de défilement, qui décentrerait les numéros */
.app:not([data-menu-deplie="true"]) .menu__liste { scrollbar-width: none; }
.app:not([data-menu-deplie="true"]) .menu__liste::-webkit-scrollbar { display: none; }
.menu__titre {
  display: none;
  flex: 1;
  min-width: 0;
  font-size: 14.5px;
  line-height: 1.25;
  color: var(--texte);
  text-wrap: pretty;
}
.menu__item[aria-current="true"] .menu__titre { color: var(--bleu); }
.app[data-menu-deplie="true"] .menu__titre { display: block; }
.menu__pied {
  margin-top: auto;
  padding: 8px 12px 0;
  font-size: 12px;
  line-height: 1.5;
  color: #8494ab;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 200ms;
}
.app[data-menu-deplie="true"] .menu__pied { opacity: 1; }


/* --- En-tête et flèches -------------------------------------------------- */

.entete {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px clamp(14px, 3vw, 28px);
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(10px);
  color: var(--bleu);
}
.app[data-sombre="oui"] .entete { background: rgba(0, 52, 110, .85); color: #fff; }
/* Même hauteur que les logos partenaires des fiches (.fiche__logos). */
.entete__logo { display: block; height: clamp(40px, 5vw, 52px); width: auto; }
.entete__compteur {
  font: 600 13px var(--titres);
  letter-spacing: .12em;
  opacity: .75;
}

.fleche {
  position: absolute;
  top: 72px; bottom: 0;
  width: clamp(48px, 6vw, 80px);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.fleche--prec { left: 0; }
.fleche--suiv { right: 0; }
.fleche[hidden] { display: none; }
.fleche button {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: var(--bleu);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 30, 70, .22);
  transition: transform 180ms;
}
.fleche button:hover { transform: scale(1.08); }
.app[data-sombre="oui"] .fleche button { background: rgba(255, 255, 255, .22); color: #fff; }


/* --- Couverture ---------------------------------------------------------- */

.couverture {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(28px, 4vw, 40px);
  padding: clamp(74px, 8vw, 96px) clamp(20px, 6vw, 96px) clamp(40px, 6vw, 72px);
  container-type: inline-size;
}
.couverture__logo { align-self: flex-start; background: #fff; padding: clamp(10px, 1.4vw, 16px) clamp(12px, 1.8vw, 20px); }
.couverture__logo img { display: block; width: 180px; max-width: 45vw; height: auto; }
/* Titre et liste des diplômes côte à côte seulement s'il y a la place : la
   colonne du titre ne descend jamais sous la largeur de son mot le plus long. */
.couverture__corps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4cqi, 64px);
  align-items: end;
}
@container (min-width: 820px) {
  .couverture__corps { grid-template-columns: minmax(min-content, 1.3fr) minmax(240px, 1fr); }
}
.couverture__surtitre { font: 600 clamp(13px, 1.8vw, 16px) var(--titres); letter-spacing: .3em; color: var(--vert); }
.couverture__titre {
  display: inline-block;
  margin: 16px 0 0;
  padding: .25em .6em;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(90deg, var(--bleu), var(--turquoise));
  font: 800 clamp(24px, 6.4cqi, 64px)/1.05 var(--titres);
  text-wrap: balance;
}
.couverture__sous-titre { margin: 18px 0 0; font: 300 clamp(18px, 2.4vw, 26px) var(--titres); letter-spacing: .04em; color: #d3eaf0; }
.couverture__sous-titre strong { font-weight: 800; color: #fff; }
.couverture__diplomes { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.couverture__diplomes li {
  padding: 10px 18px;
  border-left: 4px solid var(--vert);
  background: rgba(255, 255, 255, .12);
  font: 600 clamp(15px, 2vw, 20px) var(--titres);
  letter-spacing: .06em;
}
.couverture__signature,
.separateur__signature {
  align-self: flex-start;
  padding: 8px 22px;
  border-radius: 999px;
  background: var(--turquoise);
  color: #fff;
  font: 700 clamp(15px, 2vw, 20px) var(--titres);
}

/* --- Intercalaires (BAC + 2, + 3, + 5) ----------------------------------- */

.ecran.theme--bac2 { --degrade: linear-gradient(150deg, #c25f00, var(--orange) 45%, var(--lagon)); }
.ecran.theme--bac3 { --degrade: linear-gradient(150deg, #4f8a12, var(--vert) 45%, var(--soleil)); }
.ecran.theme--bac5 { --degrade: linear-gradient(150deg, var(--bleu), #5a3d97 50%, var(--rose)); }
.ecran--sombre.theme--bac2,
.ecran--sombre.theme--bac3,
.ecran--sombre.theme--bac5 { background: var(--degrade); }
.separateur {
  min-height: 100%;
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(20px, 3vw, 32px);
  padding: clamp(84px, 9vw, 110px) clamp(20px, 6vw, 80px) clamp(40px, 6vw, 72px);
}
.separateur__signature { background: var(--section); box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); }
.separateur__titre { margin: 0; font: 300 clamp(30px, 5.4vw, 64px)/1.05 var(--titres); text-wrap: balance; }
.separateur__titre strong { font-weight: 800; }
.separateur__texte.prose { max-width: 720px; color: #fff; font-size: clamp(17px, 1.9vw, 20px); }
.separateur__texte.prose strong { color: #fff; font-weight: 700; }
.separateur__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px clamp(18px, 3vw, 36px);
  margin: 8px 0 0;
  padding: 16px clamp(16px, 3vw, 32px);
  border-radius: 18px;
  background: #fff;
  list-style: none;
}
.separateur__logos img { display: block; height: clamp(34px, 4.5vw, 48px); width: auto; }

/* --- Pages standard ------------------------------------------------------ */

.page,
.fiche {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(74px, 8vw, 96px) clamp(20px, 5vw, 64px) clamp(40px, 5vw, 64px);
}
/* Titre souligné d'une barre, comme dans le PDF */
.titre-section {
  margin: 0;
  font: 800 clamp(20px, 2.6vw, 28px)/1.2 var(--titres);
  color: var(--encre);
  text-wrap: balance;
}
.titre-section::after {
  content: "";
  display: block;
  width: 190px;
  max-width: 40%;
  height: 7px;
  margin-top: 8px;
  border-radius: 4px;
  background: var(--barre);
}
.titre-section--page { font-size: clamp(24px, 3.6vw, 38px); color: var(--bleu); letter-spacing: .01em; }
.titre-section__sous-titre { margin: 10px 0 0; font: 700 18px var(--titres); color: var(--bleu); }
/* Titre de page accompagné d'une photo (édito) */
.page__entete { display: flex; align-items: flex-end; gap: clamp(18px, 3vw, 32px); }
.page__entete .titre-section--page { flex: 1; min-width: 0; }
.page__photo {
  flex: none;
  width: clamp(110px, 16vw, 180px);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 8px 8px 0 var(--bleu);
}
/* Photo à gauche d'un texte (édito) ; au-dessus sur petit écran */
.texte-photo { display: grid; grid-template-columns: clamp(140px, 22%, 220px) minmax(0, 1fr); gap: clamp(18px, 3vw, 32px); align-items: start; }
.texte-photo__img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px; box-shadow: 8px 8px 0 var(--bleu); }
@media (max-width: 559px) { .texte-photo { grid-template-columns: minmax(0, 1fr); } .texte-photo__img { width: 160px; } }
.page__accroche { margin: 16px 0 0; font: 800 clamp(19px, 2.4vw, 26px)/1.25 var(--titres); color: var(--encre); }

.blocs { display: flex; flex-direction: column; gap: clamp(20px, 3vw, 32px); margin-top: clamp(22px, 3vw, 34px); }
.colonne > .blocs { margin-top: 0; }
.bloc { min-width: 0; }
.bloc--section { margin-top: clamp(4px, 1vw, 12px); }
.bloc__titre { margin: 0 0 10px; font: 700 20px/1.3 var(--titres); color: var(--bleu); }
/* Titre du premier bloc d'une page (« Plus de 30 ans d’expérience… ») :
   même taille et même couleur qu'un titre de section, sans le trait. */
.page > .blocs > .bloc--texte:first-child > .bloc__titre { font: 800 clamp(20px, 2.6vw, 28px)/1.2 var(--titres); color: var(--encre); text-wrap: balance; }
.colonnes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 3.5vw, 48px);
  align-items: start;
}
@media (max-width: 759px) { .colonnes { grid-template-columns: minmax(0, 1fr); } }

.prose { font-size: clamp(16px, 1.6vw, 17.5px); line-height: 1.6; color: var(--texte); }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose p { margin: 0 0 14px; }
.prose ul { margin: 0 0 14px; padding-left: 20px; }
.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--ciel); }
.prose h3,
.page .prose h4 { margin: 22px 0 4px; font: 700 19px/1.3 var(--titres); letter-spacing: 0; color: var(--bleu); }
.page .prose h4::before { content: none; }
.prose h4 { margin: 18px 0 4px; font: 800 15px/1.3 var(--titres); letter-spacing: .04em; color: var(--accent, var(--bleu)); }
.prose h4::before { content: ""; display: inline-block; width: 16px; height: 5px; margin-right: 8px; border-radius: 3px; background: var(--pastille, var(--rose)); vertical-align: 3px; }
.prose strong { color: var(--encre); font-weight: 700; }
.prose sup { font-size: .7em; }
.prose--2-colonnes { columns: 2 320px; column-gap: clamp(24px, 3.5vw, 48px); }
.prose--2-colonnes h3, .prose--2-colonnes h4 { break-after: avoid-column; }
.prose--2-colonnes h3:first-child { column-span: all; margin-bottom: 14px; }
.prose__chapeau { font-weight: 800; color: var(--encre); }
.prose table { width: 100%; margin: 0 0 18px; border-collapse: collapse; font-size: 14.5px; text-align: center; }
.prose th { padding: 9px 8px; background: linear-gradient(180deg, #0a5aa8, var(--bleu)); color: #fff; font-family: var(--titres); font-weight: 700; }
.prose td { padding: 8px; border-left: 1px solid #c8d3e2; }
.prose td:first-child { border-left: 0; }
.prose tbody tr:nth-child(odd) td { background: #e8f3f7; }
@media (max-width: 559px) {
  .prose table { display: block; overflow-x: auto; white-space: nowrap; }
}

.signature { margin-top: 4px; padding-top: 14px; border-top: 6px solid var(--barre); text-align: center; }
.signature__nom { font: 400 17px var(--corps); color: var(--encre); }
.signature__fonction { font-size: 15px; font-style: italic; color: var(--texte-doux); }

/* Page standard rattachée à une rubrique (theme: bac2…) : mêmes couleurs et
   même mise en forme que les fiches formation de la rubrique. */
.page--theme .titre-section.titre-section--page {
  margin: 0 0 0 calc(-1 * clamp(20px, 5vw, 64px));
  padding: 14px clamp(20px, 5vw, 64px);
  border-radius: 0 999px 999px 0;
  background: linear-gradient(90deg, var(--accent), var(--degrade-fin));
  color: #fff;
}
.page--theme .titre-section--page::after { content: none; }
.page--theme .titre-section,
.page--theme .bloc__titre,
.page--theme > .blocs > .bloc--texte:first-child > .bloc__titre { color: var(--accent); }
.page--theme .titre-section::after { background: var(--pastille); }
.page--theme .prose strong { color: var(--accent); }
.page--theme .bloc--liste .bloc__titre {
  display: inline-block;
  padding: 6px 20px;
  border-radius: 999px;
  background: var(--section);
  color: #fff;
  font-size: 15px;
}
.page--theme .liste--etiquettes { border-color: var(--accent); }
.page--theme .liste--etiquettes li { color: var(--accent); }
.page--theme .liste__note { color: var(--pastille); font: 600 20px var(--titres); }

/* Encadré « L’offre est donc complète » */
.niveaux__titre { padding-bottom: 6px; border-bottom: 1px solid var(--bleu); font: 800 18px var(--titres); color: var(--encre); }
.niveaux__ligne { display: grid; grid-template-columns: 74px 1fr; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--bleu); }
.niveaux__code { font: 800 16px var(--titres); color: var(--bleu); white-space: nowrap; }
.niveaux__texte { font-size: 16.5px; line-height: 1.45; color: var(--encre); }
.niveaux__texte strong { font-weight: 800; }

/* Encadré sous un texte */
.encadre { margin-top: 14px; padding: 16px 18px; background: #fff; border-left: 5px solid var(--accent); font-size: 15px; line-height: 1.55; color: var(--texte); }
.encadre__titre { margin-bottom: 6px; font-family: var(--titres); font-weight: 700; color: var(--bleu); }

/* Cartes en grille */
.cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 14px; }
.carte { padding: 20px 22px; background: #fff; border-top: 4px solid var(--accent); }
.carte__titre { margin-bottom: 8px; font: 700 17px var(--titres); color: var(--bleu); }

/* Chiffres clés */
/* dense : sur écran étroit, les petites tuiles comblent le trou laissé par
   la grande tuile « 19 diplômes » (l'ordre des tuiles peut alors changer). */
.chiffres { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); grid-auto-flow: dense; gap: 12px; }
.chiffre {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 150px;
  padding: 18px 14px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--accent) 22%, #fff);
  text-align: center;
}
.chiffre__avant { font-size: 15px; color: var(--encre); }
.chiffre__valeur { font: 800 clamp(32px, 4vw, 44px)/1 var(--titres); color: var(--valeur, var(--violet)); }
.chiffre__appel { margin-left: 1px; font-size: .45em; font-weight: 700; vertical-align: .9em; line-height: 0; }
.chiffre__libelle { font-size: 15px; line-height: 1.35; color: var(--encre); }
.chiffre__detail { margin-top: 6px; font-size: 12.5px; line-height: 1.4; color: var(--texte); }
.chiffre--vedette { grid-column: span 2; grid-row: span 2; background: linear-gradient(180deg, var(--bleu), var(--turquoise)); color: #fff; }
.chiffre--vedette .chiffre__valeur { font-size: clamp(44px, 6vw, 64px); color: #fff; }
.chiffre--vedette .chiffre__libelle { font: 600 clamp(20px, 2.6vw, 28px) var(--titres); color: #fff; }
.chiffre--vedette .chiffre__detail { font-size: 15px; color: #fff; }
.chiffre--vedette .chiffre__detail strong { color: #fff; }
@media (max-width: 340px) { .chiffre--vedette { grid-column: auto; grid-row: auto; } }

/* Listes : puces fléchées sur 2 colonnes, ou étiquettes */
.liste { margin: 0; padding: 0; list-style: none; }
.liste--puces { columns: 2 260px; column-gap: 28px; }
.liste--puces li {
  break-inside: avoid;
  padding: 7px 10px 7px 22px;
  position: relative;
  font: 700 14.5px var(--titres);
  letter-spacing: .02em;
  color: var(--encre);
}
.liste--puces li:nth-child(even) { color: var(--bleu); }
.liste--puces li:nth-child(odd) { background: #fbf2f6; }
.liste--puces li::before {
  content: "";
  position: absolute;
  left: 6px; top: 50%;
  margin-top: -7px;
  border: 7px solid transparent;
  border-left: 7px solid var(--violet);
  border-right: 0;
}
.liste--etiquettes { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 18px; border: 1px solid var(--bleu); border-radius: 26px; }
.liste--etiquettes li { padding: 4px 12px; border-radius: 14px; background: var(--fond); font: 700 14px var(--titres); color: var(--bleu); }
.ecran--clair .liste--etiquettes li { background: #fff; }
.liste__note { margin: 10px 0 0; color: var(--texte); }

/* Étapes numérotées */
.etapes { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.etape {
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 28px);
  padding: 12px clamp(18px, 3vw, 32px);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 35%, #fff);
}
.etape__num { flex: none; width: 1em; font: 800 clamp(44px, 6vw, 64px)/1 var(--titres); color: var(--accent); text-align: center; }
.etape__titre { font: 700 clamp(17px, 2vw, 21px) var(--titres); color: var(--bleu); }
.etape__texte { font-size: 15px; color: var(--encre); }

/* Schéma des cursus : grille à 5 colonnes (BUT | flèche | Ingénieur | flèche |
   Master et Licence) qui reprend la disposition du PDF. Les tailles suivent la
   largeur disponible (unités cqi). Sur écran étroit le texte garde une taille
   lisible et passe sur plusieurs lignes, les positions restant identiques. */
.cursus-defile { container-type: inline-size; }
.cursus {
  --fleche: #0a7fb0;
  --bandeau: #d5e9f0;
  display: grid;
  grid-template-columns: 1fr 5% 1fr 5% 1fr;
  grid-template-rows: auto auto auto 3cqi auto auto auto auto auto auto auto;
  font-family: var(--titres);
  font-size: clamp(9px, 1.45cqi, 13px);
  line-height: 1.25;
  text-align: center;
  color: var(--encre);
}
.cursus__case {
  display: flex;
  flex-direction: column;
  padding: 1.4em 1em 1em;
  border-radius: 1.4em;
  color: #fff;
}
.cursus__corps { display: flex; flex-direction: column; flex: 1; }
.cursus__nom { font-weight: 800; font-size: 2em; line-height: 1; }
.cursus__niveau { font-weight: 700; font-size: 1.15em; }
.cursus__annees { margin: auto 0 0; padding: 1.5em .6em 0; list-style: none; }
.cursus__annees li { padding: .9em 0; font-weight: 500; }
.cursus__annees li + li, .cursus__annees--entree li { border-top: 1px solid rgba(255, 255, 255, .7); }
.cursus__annees--entree { margin: 0; padding-top: 0; }
.cursus__admission { padding: .5em 0 0; font-weight: 800; font-size: .92em; line-height: 1.2; }
.cursus__admission::after {
  content: "";
  display: block;
  width: 0;
  margin: .5em auto 0;
  border: 1em solid transparent;
  border-top: 0;
  border-bottom: .9em solid var(--fleche);
  border-left-width: 2em;
  border-right-width: 2em;
  margin-bottom: .35em;
}
.cursus__acces { align-self: start; padding: .55em 1em; border-radius: 999px; background: var(--bandeau); font-weight: 700; font-size: .92em; }
.cursus__fleche { width: 0; height: 0; justify-self: center; align-self: center; border-block: 1.3em solid transparent; }
.cursus__fleche--droite { border-left: 1em solid var(--fleche); }
.cursus__fleche--gauche { border-right: 1em solid var(--fleche); }

@container (max-width: 559px) {
  .cursus { grid-template-columns: 1fr 6% 1fr 6% 1fr; font-size: 11px; hyphens: auto; overflow-wrap: break-word; }
  .cursus__case { padding: 1em .35em .6em; border-radius: 1em; }
  .cursus__nom { font-size: 1.3em; }
  .cursus .cursus__case--licence .cursus__nom { font-size: 1.15em; }
  .cursus__niveau { font-size: 1em; }
  .cursus__annees { padding: 1em .1em 0; }
  .cursus__annees li { padding: .6em 0; }
  .cursus__admission { font-size: .9em; }
  .cursus__acces { padding: .5em .6em; border-radius: 1em; }
  .cursus__case--bts { width: 80%; margin-left: 6%; }
  .cursus__admission--bts { margin-left: 6%; }
  .cursus__fleche { border-block-width: 1em; }
  .cursus__fleche--droite { border-left-width: .8em; }
  .cursus__fleche--gauche { border-right-width: .8em; }
}

/* Emplacement de chaque élément (ligne / colonne).
   La case Ingénieur (lignes 1 à 6) partage les lignes de la grille
   (subgrid) : sa 1re année occupe la ligne 6, où commence la case BUT. */
.cursus__case--ingenieur { grid-area: 1 / 3 / 7 / 4; display: grid; grid-template-rows: subgrid; background: linear-gradient(180deg, #00489a, #2f4d9c 30%, #8d6fb2 70%, #efa3c8); }
.cursus__case--ingenieur .cursus__corps { grid-row: 1 / 6; }
.cursus__case--ingenieur .cursus__annees--entree { grid-row: 6; }
.cursus__case--master { grid-area: 1 / 5; min-height: 11em; background: linear-gradient(180deg, var(--violet), #7a4fa6 50%, #2eaee8); }
.cursus__admission--master { grid-area: 2 / 5; }
.cursus__acces--master { grid-area: 3 / 5; }
.cursus__case--licence { grid-area: 5 / 5 / 7 / 6; min-height: 11em; background: linear-gradient(180deg, #8fc31f, #c2c800 55%, var(--soleil)); }
.cursus__case--licence .cursus__nom { font-size: 1.75em; }
.cursus__admission--ingenieur { grid-area: 7 / 3; }
.cursus__admission--licence { grid-area: 7 / 5; }
.cursus__acces--ingenieur-licence { grid-area: 8 / 3 / 9 / 6; margin-bottom: 1.2em; }
.cursus__case--but { grid-area: 6 / 1 / 10 / 2; background: linear-gradient(180deg, #95c11f, #bdc700 55%, #ffcc00); }
.cursus__case--but .cursus__annees { color: var(--bleu); }
.cursus__case--but .cursus__annees li + li { border-top-color: var(--bleu); }
.cursus__case--bts { grid-area: 9 / 3 / 10 / 6; justify-self: center; width: 72%; margin-left: 10%; background: linear-gradient(180deg, var(--orange), #f2a54a 45%, var(--lagon)); }
.cursus__admission--but { grid-area: 10 / 1; }
.cursus__admission--bts { grid-area: 10 / 3 / 11 / 6; margin-left: 10%; }
.cursus__acces--bac { grid-area: 11 / 1 / 12 / 6; }
/* Le BUT mène en 1re année du cycle ingénieur : flèche en face de cette année. */
.cursus__fleche--but-ingenieur { grid-area: 6 / 2; }
.cursus__fleche--licence-ingenieur { grid-area: 5 / 4 / 7 / 5; }

/* Adresses */
.adresses { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 16px 24px; }
.adresse__nom { font: 800 14.5px var(--titres); color: var(--violet); }
.adresse__texte { font-size: 14.5px; line-height: 1.45; color: var(--bleu); }
.adresses--avant { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 699px) { .adresses--avant { grid-template-columns: minmax(0, 1fr); } }
.adresses--avant .adresse { padding: 14px 18px; border-left: 5px solid var(--vert); background: #fff; }
.ecran--blanc .adresses--avant .adresse { background: var(--fond); }
.adresses--avant .adresse__nom { color: var(--bleu); font-size: 16px; }
.adresses--avant .adresse__texte { color: var(--encre); font-size: 15.5px; }

/* Bandeau et contact */
.bandeau { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 20px; align-items: center; padding: clamp(22px, 3vw, 32px); background: var(--bleu); color: #fff; }
.bandeau__titre { font: 800 clamp(20px, 2.6vw, 28px)/1.2 var(--titres); }
.bandeau__texte { margin: 0; font-size: 16px; line-height: 1.6; color: #d3eaf0; }
.contact { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: baseline; padding: 16px 20px; border-left: 5px solid var(--vert); background: #fff; }
.ecran--blanc .contact { background: var(--fond); }
.contact__titre { font: 800 16px var(--titres); color: var(--encre); }
.contact a { font-size: 16px; font-weight: 600; }

/* Image pleine largeur (carte des campus) */
.image { margin: 0; }
.image img { display: block; width: 100%; height: auto; border-radius: 4px; }
.image figcaption { margin-top: 6px; font-size: 13px; color: var(--texte-doux); }

/* Page « Nous contacter » */
.coordonnees { display: flex; flex-direction: column; align-items: center; gap: clamp(16px, 2.4vw, 24px); text-align: center; }
.coordonnees__site {
  margin: clamp(16px, 3vw, 36px) 0;
  padding: 12px clamp(20px, 4vw, 44px);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--bleu), var(--turquoise));
  color: #fff;
  font: 800 clamp(16px, 2.2vw, 22px)/1.25 var(--titres);
}
.coordonnees__site a { color: #fff; }
.coordonnees__visuel { display: block; width: 100%; max-width: 760px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; }
.coordonnees__contact { margin: 0; font: 700 clamp(16px, 2vw, 19px) var(--titres); color: var(--bleu); }
.coordonnees__contact a { color: var(--bleu); }
.coordonnees__reseaux { display: flex; gap: 12px; margin: -6px 0 0; padding: 0; list-style: none; }
.coordonnees__reseaux img { display: block; height: 32px; width: auto; border-radius: 7px; }
.coordonnees__reseaux a { display: block; transition: transform .15s; }
.coordonnees__reseaux a:hover { transform: translateY(-2px); }
.coordonnees__mention { margin: 0; font-size: 16px; color: var(--encre); }
.coordonnees__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 18px clamp(14px, 2.2vw, 28px);
  align-self: stretch;
  margin: 8px 0 0;
  padding: clamp(18px, 2.4vw, 26px) 0 0;
  border-top: 1.5px solid var(--bleu);
  list-style: none;
}
.coordonnees__logos img { display: block; height: clamp(34px, 4.4vw, 50px); width: auto; max-width: clamp(100px, 11vw, 130px); object-fit: contain; }
.coordonnees__logos .coordonnees__logo--grand img { height: clamp(72px, 9vw, 104px); max-width: none; }
.coordonnees__logos li { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.coordonnees__logos small { max-width: 150px; font-size: 10.5px; line-height: 1.3; color: var(--encre); }
.coordonnees__logos small span { color: var(--rouge); }
.bloc--coordonnees + .bloc--note { text-align: center; }

.note { margin: 0; font-size: 13px; color: var(--texte-doux); }
.note p { margin: 0; }
.fiche__note { margin-top: clamp(16px, 2.4vw, 24px); }

/* Numéro de page du catalogue imprimé */
.numero-page { margin-top: clamp(24px, 4vw, 40px); text-align: center; }
.numero-page span { display: inline-block; min-width: 54px; padding: 1px 14px; border: 1.5px solid var(--turquoise); border-radius: 999px; font: 700 14px var(--titres); color: var(--bleu); }

/* --- Fiche formation ----------------------------------------------------- */

/* Couleurs par niveau : --accent (textes), --degrade-fin (bandeau),
   --pastille (filets sous les titres), --section (couleur principale de la
   rubrique : titres en pastille, taux de réussite, signature de l'intercalaire)
   et --section-pale (étiquettes des secteurs d'activité). */
.ecran { --accent: var(--bleu); --degrade-fin: var(--rose); --pastille: var(--rose); --section: var(--bleu); }
.ecran.theme--bac2 { --accent: var(--orange); --degrade-fin: var(--lagon); --pastille: var(--lagon); --section: #ea8500; }
.ecran.theme--bac3 { --accent: #7aa51a; --degrade-fin: var(--soleil); --pastille: #fde9a0; --section: #7aa51a; }
.ecran.theme--bac5 { --accent: var(--bleu); --degrade-fin: var(--rose); --pastille: #d18fc0; --section: #5a3d97; }
.ecran { --section-pale: color-mix(in srgb, var(--section) 15%, #fff); }

.fiche__entete { display: flex; flex-direction: column; gap: 14px; }
.fiche__logos { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px 22px; }
.fiche__logos img { height: clamp(34px, 5vw, 52px); width: auto; }
.fiche__logos .logo--petit { height: clamp(24px, 3.2vw, 34px); }
.page__logos { margin-bottom: 14px; }
.fiche__titre {
  margin: 0 calc(-1 * clamp(20px, 5vw, 64px)) 0 calc(-1 * clamp(20px, 5vw, 64px));
  padding: 14px clamp(20px, 5vw, 64px);
  border-radius: 0 999px 999px 0;
  background: linear-gradient(90deg, var(--accent), var(--degrade-fin));
  color: #fff;
  font: 800 clamp(22px, 3.6vw, 38px)/1.08 var(--titres);
  text-wrap: balance;
}
@media (min-width: 760px) { .fiche__titre { margin-right: 0; border-radius: 0 999px 999px 0; } }
.fiche__haut {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 28px);
  margin-top: clamp(14px, 2vw, 20px);
  align-items: start;
}
.fiche__haut--sans-photo { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
/* En dessous de 960px, la photo passe au-dessus du texte. */
@media (max-width: 959px) { .fiche__haut { grid-template-columns: minmax(0, 1fr); } }
.fiche__photo { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.fiche__infos { display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; line-height: 1.45; color: var(--encre); }
.fiche__diplome { font: 400 clamp(20px, 2.4vw, 26px)/1.1 var(--titres); color: var(--accent); }
.fiche__diplome strong { font-weight: 800; }
.fiche__diplome span { display: block; padding-bottom: 6px; border-bottom: 4px solid var(--pastille); font-weight: 300; font-size: .82em; }
.fiche__delivre { margin: 0; font-weight: 600; }
.fiche__certif { display: flex; flex-direction: column; }
.fiche__certif strong { color: var(--accent); }
.fiche__certif small { color: var(--texte-doux); }
.fiche__tarifs h3 { margin: 0 0 2px; font: 800 13px var(--titres); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.fiche__tarifs p { margin: 0; }
.fiche__programme {
  align-self: flex-start;
  padding: 7px 16px;
  border: 2px solid var(--accent);
  border-radius: 20px;
  color: var(--accent);
  font: 700 14px var(--titres);
  margin-top: 10px;
}
.fiche__programme:hover { background: var(--accent); color: #fff; }
.fiche__taux { align-self: flex-start; margin-top: 10px; padding: 6px 20px; border-radius: 999px; background: var(--section); color: #fff; font: 700 15px var(--titres); }
.fiche__taux strong { font-size: 21px; font-weight: 800; }
.fiche__nouveaute {
  align-self: flex-start;
  padding: 3px 24px;
  border-radius: 20px;
  background: var(--soleil);
  color: var(--rouge);
  font: 800 16px var(--titres);
  letter-spacing: .1em;
}
.fiche__accroche {
  margin: clamp(22px, 3vw, 32px) 0 0;
  font: 800 clamp(21px, 2.8vw, 30px)/1.2 var(--titres);
  color: var(--accent);
  text-wrap: balance;
}
.fiche__accroche::after { content: ""; display: block; width: 190px; height: 6px; margin-top: 8px; border-radius: 4px; background: var(--pastille); }
.fiche__chapeau { margin: 18px 0 0; font-size: 17px; line-height: 1.4; font-weight: 800; color: var(--encre); }
.fiche__section .fiche__chapeau { margin: 0; }
.fiche__colonnes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 4vw, 48px);
  margin-top: clamp(18px, 2.5vw, 26px);
}
@media (max-width: 759px) { .fiche__colonnes { grid-template-columns: minmax(0, 1fr); } }
.fiche__colonnes > div { display: flex; flex-direction: column; gap: 22px; }
.fiche__bas { margin-top: 22px; }
.fiche .prose { font-size: 15.5px; }
.fiche .prose strong { color: var(--accent); }
.fiche .prose ul { list-style: none; padding: 0; }
.fiche__intertitre {
  margin: 0 0 10px;
  font: 800 16px var(--titres);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}
.fiche__intertitre::after { content: ""; display: block; width: 130px; height: 5px; margin-top: 4px; border-radius: 3px; background: var(--pastille); }
.fiche__pastille {
  margin: 0 0 12px;
  padding: 6px 20px;
  border-radius: 999px;
  background: var(--section);
  color: #fff;
  font: 800 15px var(--titres);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.fiche__secteurs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fiche__secteurs li {
  padding: 6px 14px;
  border-radius: 16px;
  background: var(--section-pale);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--encre);
}
.fiche__complement { margin-top: 28px; }

@media (prefers-reduced-motion: reduce) {
  .piste, .menu { transition: none; }
}