/*
  EDC Paris Business School - proposition de refonte
  Feuille de style commune, charte "One Focus. YOU" (brandbook Site internet, Beta 1.0)
  Aucune dependance, aucun outil de construction.
*/

/* ---------- 1. Polices (Montserrat hebergee localement) ---------- */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/montserrat-700.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("fonts/montserrat-900.woff2") format("woff2");
}

/* ---------- 2. Jetons de charte ---------- */
:root {
  --color-blue: #261fb3;
  --color-blue-dark: #1a1680;
  --color-blue-darker: #100d4d;
  --color-blue-tint: #eceafb;
  --color-yellow: #f1ff5e;
  --color-gray: #f0f0f0;
  --color-gray-dark: #dcdcdc;
  --color-black: #000000;
  --color-white: #ffffff;
  /* Le corps de texte est au noir charte. Les valeurs ci-dessous sont des
     variantes assumees, hors des cinq couleurs du brandbook : un gris de texte
     secondaire, un gris de bordure, et trois bleus (deux fonces pour les fonds
     et degrades, un tres clair pour les etiquettes), la charte n'ayant plus de
     couleur secondaire depuis le retrait du magenta. */
  --color-text: #000000;
  --color-text-muted: #4a4a52;
  --color-border: #dcdcdc;
  --color-field-border: #767676;

  --font-heading: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;

  --container-max: 1280px;
  --container-pad: 1.25rem;

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.25rem;
  --space-6: 3.5rem;
  --space-7: 5rem;

  --radius-s: 2px;
  --radius-m: 4px;

  --shadow-card: 0 24px 48px -28px rgba(38, 31, 179, .45);
  --shadow-pop: 0 12px 28px -12px rgba(20, 20, 26, .25);

  --transition: 180ms ease;

  --header-h: 128px;
  --header-h-mobile: 64px;
  --supheader-h: 40px;
}

/* L'en-tete bascule en menu deroulant a 1200px et non a 960px : en dessous de
   cette largeur, les sept entrees du menu principal ne tiennent plus a cote du
   logo et le recouvrent (mesure : 17px de chevauchement a 1440px de fenetre,
   89px a 1024px, avant correction). */
@media (max-width: 1200px) {
  :root { --header-h: 104px; }
}

/* ---------- 3. Reinitialisation ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-white);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-heading); font-weight: 900; color: var(--color-blue); line-height: 1.08; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
main { display: block; }

/* Focus visible, accessibilite */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-yellow);
  outline-offset: 2px;
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--color-blue);
  color: var(--color-white);
  padding: .75em 1.25em;
  font-weight: 700;
}
.skip-link:focus {
  left: var(--space-3);
  top: var(--space-3);
}
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 4. Typographie ---------- */
h1, .h1 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.6rem); }
h2, .h2 { font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.5rem); }
h3, .h3 { font-size: clamp(1.2rem, 1.05rem + .7vw, 1.5rem); }
h4, .h4 { font-size: 1.05rem; }
.lead { font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); color: var(--color-text); }
.eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-blue);
  margin-bottom: var(--space-2);
}
.eyebrow--on-blue { color: var(--color-yellow); }
.text-muted { color: var(--color-text-muted); }
.rich-text p { max-width: 68ch; }
.rich-text ul { margin: 1em 0; }
.rich-text li {
  position: relative;
  padding-left: 1.4em;
  margin-bottom: .5em;
}
.rich-text li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .35em;
  width: .6em;
  height: .6em;
  background: var(--color-blue);
  transform: skewX(-18deg);
}

/* ---------- 5. Mise en page ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
@media (min-width: 640px) { :root { --container-pad: 2rem; } }
@media (min-width: 1100px) { :root { --container-pad: 2.5rem; } }
/* Grille de la maquette PGE (dessinee a 1440px) : contenu a 48px des bords, soit
   1344px utiles, et non 1200px centres. Mesure faite le 23 septembre 2026. */
@media (min-width: 1201px) { :root { --container-max: 1440px; --container-pad: 3rem; } }

.section { padding-block: var(--space-6); }
.section--tight { padding-block: var(--space-5); }
.section--gray { background: var(--color-gray); }
.section--blue { background: var(--color-blue); color: var(--color-white); }
.section--blue h2, .section--blue h3 { color: var(--color-white); }
.section-head { max-width: 46rem; margin-bottom: var(--space-5); }
.section-head--split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  /* Le bloc doit tenir toute la largeur, sinon la limite de 46rem heritee de
     .section-head comprime le titre et fait passer le lien sous celui-ci,
     au lieu de le poser a droite. Le titre, lui, garde sa largeur de lecture. */
  max-width: none;
}
.section-head--split > div { max-width: 46rem; }
/* Le lien s'aligne franchement sur le bas du bloc de titre (donc sur le trait),
   au lieu de flotter entre la derniere ligne du titre et ce trait. */
.section-head--split > .link-arrow { flex: none; align-self: flex-end; }
/* La maquette ne montre aucun trait sous les titres de section : la marque est
   neutralisee ici, et le balisage residuel sera retire a l'harmonisation. */
.section-title-mark { display: none; }

.grid { display: grid; gap: var(--space-4); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.two-col {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-6);
  align-items: start;
}
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }

/* ---------- 6. Boutons / CTA ---------- */
.cta {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .95em 1.6em;
  border: 2px solid transparent;
  border-radius: var(--radius-s);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  white-space: normal;
  text-align: center;
}
.cta svg { width: 1em; height: 1em; flex: none; }

.cta-outline {
  background: transparent;
  border-color: var(--color-blue);
  color: var(--color-blue);
}
.cta-outline:hover, .cta-outline:focus-visible { background: var(--color-blue); color: var(--color-white); }
.cta-outline--on-blue { border-color: var(--color-white); color: var(--color-white); }
.cta-outline--on-blue:hover, .cta-outline--on-blue:focus-visible { background: var(--color-white); color: var(--color-blue); }

.cta-solid {
  background: var(--color-blue);
  border-color: var(--color-blue);
  color: var(--color-white);
}
.cta-solid:hover, .cta-solid:focus-visible { background: transparent; color: var(--color-blue); }

.cta-yellow {
  background: var(--color-yellow);
  border-color: var(--color-yellow);
  color: var(--color-blue);
}
/* Page « Les CTA » du brandbook : le CTA 3 (jaune, texte bleu) passe au survol
   sur un fond gris charte, le texte restant bleu. Ce n'est pas une inversion
   jaune / bleu, contrairement aux CTA 1 et 2 qui s'echangent leurs rendus. */
.cta-yellow:hover, .cta-yellow:focus-visible { background: var(--color-gray); border-color: var(--color-gray); color: var(--color-blue); }

.cta-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-weight: 700;
  color: var(--color-blue);
  border-bottom: 2px solid transparent;
}
.link-arrow:hover, .link-arrow:focus-visible { border-bottom-color: var(--color-blue); }
.link-arrow svg { width: 1.1em; height: 1.1em; transition: transform var(--transition); }
.link-arrow:hover svg { transform: translateX(3px); }

/* ---------- 7. Supheader ---------- */
/* Maquette du 23 septembre 2026 : une suite de blocs separes par des filets
   verticaux, chacun occupant toute la hauteur du bandeau. Le bloc « Demande
   d'information » est un aplat jaune pleine hauteur, pas un bouton detache. */
.supheader {
  background: var(--color-blue);
  color: var(--color-white);
  font-size: .72rem;
}
.supheader .container {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--supheader-h);
  padding-right: 0;
}
.supheader__baseline {
  display: flex;
  align-items: center;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: .82rem;
  color: var(--color-yellow);
  letter-spacing: .01em;
  white-space: nowrap;
  margin: 0;
}
.supheader__actions { display: flex; align-items: stretch; }
.supheader__bloc {
  position: relative;
  display: flex;
  align-items: center;
  border-left: 1px solid rgba(255, 255, 255, .35);
}
.supheader__bloc--jaune { background: var(--color-yellow); border-left-color: var(--color-yellow); }
.supheader__bloc--jaune .supheader__link { color: var(--color-blue); }
.supheader__bloc--jaune .supheader__link:hover,
.supheader__bloc--jaune .supheader__link:focus-visible { color: var(--color-blue); text-decoration: underline; }

.supheader__link,
.supheader__declencheur {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  height: 100%;
  padding: .7em 1.1em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
  color: var(--color-white);
}
.supheader__link:hover, .supheader__link:focus-visible,
.supheader__declencheur:hover, .supheader__declencheur:focus-visible { color: var(--color-yellow); }
.supheader .icone-sup { width: 1.15em; height: 1.15em; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; }
.supheader .drapeau { width: 1.35em; height: .9em; flex: none; }
.supheader .chevron { width: .7em; height: .7em; }

/* Choix de la langue */
.supheader__menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 600;
  min-width: 100%;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-pop);
  padding: .3em 0;
}
.supheader__menu a {
  display: block;
  padding: .55em 1.1em;
  color: var(--color-blue);
  font-weight: 700;
  white-space: nowrap;
}
.supheader__menu a:hover, .supheader__menu a:focus-visible { background: var(--color-gray); }

@media (max-width: 1100px) {
  .supheader__link, .supheader__declencheur { padding: .7em .8em; }
  .supheader__bloc--texte-long { display: none; }
}
@media (max-width: 780px) {
  .supheader .container { gap: var(--space-2); }
  .supheader__baseline { font-size: .72rem; }
  .supheader__bloc:not(.supheader__bloc--jaune):not(.supheader__langue):not(.supheader__bloc--loupe) { display: none; }
}
@media (max-width: 560px) {
  .supheader { font-size: .66rem; }
  .supheader__baseline { font-size: .66rem; }
  .supheader__bloc--jaune { display: none; }
}

/* ---------- 8. En-tete et navigation ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
}
.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-h);
}
@media (max-width: 1200px) { .site-header__bar { min-height: var(--header-h-mobile); } }

.site-logo { display: flex; align-items: center; flex: none; }
.site-logo img { height: 52px; width: auto; }
@media (max-width: 1200px) { .site-logo img { height: 36px; } }

.main-nav { flex: 1; min-width: 0; }
.main-nav__list {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Sept entrees longues doivent tenir entre le logo et le bouton de contact
     dans un conteneur de 1280px : au-dela de .7rem d'ecart, la liste deborde
     par la gauche et passe sur le logo. */
  gap: .7rem;
}
.main-nav__item { position: relative; display: flex; align-items: center; }
/* Filets verticaux entre les rubriques, conformement a la maquette. */
.main-nav__item + .main-nav__item::before {
  content: "";
  width: 1px;
  height: 1.9em;
  background: var(--color-border);
  margin-right: var(--space-3);
}
.main-nav__link {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  padding: 1em 0;
  /* Maquette : les rubriques sont plus grandes et sans graisse appuyee. */
  font-weight: 500;
  font-size: .84rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--color-text);
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.main-nav__link:hover, .main-nav__link:focus-visible,
.main-nav__item.is-open > .main-nav__link {
  color: var(--color-blue);
  border-bottom-color: var(--color-blue);
}
.main-nav__link .chevron { width: .85em; height: .85em; flex: none; transition: transform var(--transition); }
.main-nav__item.is-open .chevron { transform: rotate(180deg); }

.mega {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 620px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-pop);
  padding: var(--space-4);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
}
.main-nav__item:not(.is-open) .mega { display: none; }
/* Repli sans JavaScript : le survol et le parcours au clavier ouvrent aussi le
   menu, sans quoi les pages qui ne sont listees que la deviennent inatteignables
   quand le script ne s'execute pas. */
.main-nav__item:hover > .mega,
.main-nav__item:focus-within > .mega { display: grid; }
.mega__group-title {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: .78rem;
  color: var(--color-blue);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: .6em;
  padding-bottom: .5em;
  border-bottom: 2px solid var(--color-yellow);
}
.mega__links { display: flex; flex-direction: column; gap: .1em; }
.mega__links a {
  display: block;
  padding: .4em 0;
  font-size: .88rem;
  color: var(--color-text);
}
.mega__links a:hover, .mega__links a:focus-visible { color: var(--color-blue); text-decoration: underline; }
.mega__subheading {
  font-weight: 700;
  font-size: .78rem;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding-top: .6em;
}

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: .5em;
}
.menu-toggle span { width: 24px; height: 2px; background: var(--color-blue); display: block; }

@media (max-width: 1200px) {
  .main-nav {
    position: fixed;
    inset: var(--header-h-mobile) 0 0 0;
    background: var(--color-white);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--transition);
    padding: var(--space-4);
    z-index: 400;
  }
  .site-header.is-menu-open .main-nav { transform: translateX(0); }
  .main-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .main-nav__item { border-bottom: 1px solid var(--color-border); }
  .main-nav__link { width: 100%; justify-content: space-between; padding: 1em .2em; border-bottom: none; }
  .mega {
    position: static;
    transform: none;
    min-width: 0;
    display: none;
    grid-template-columns: 1fr;
    box-shadow: none;
    border: none;
    padding: 0 0 1em;
  }
  .main-nav__item.is-open .mega { display: grid; }
  .menu-toggle { display: inline-flex; }
}

.header-tools {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
@media (max-width: 1180px) { .header-tools .cta { display: none; } }

/* ---------- 9. Fil d'Ariane ---------- */
.breadcrumb {
  background: var(--color-gray);
  font-size: .8rem;
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4em;
  padding-block: .7em;
}
.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb a:hover, .breadcrumb a:focus-visible { color: var(--color-blue); }
.breadcrumb li:not(:last-child)::after { content: "/"; margin-left: .4em; color: var(--color-text-muted); }
.breadcrumb [aria-current="page"] { color: var(--color-blue); font-weight: 700; }

/* ---------- 10. Banniere oblique ---------- */
.banner {
  position: relative;
  background: var(--color-blue);
  color: var(--color-white);
  overflow: hidden;
  min-height: 420px;
  display: flex;
  align-items: stretch;
}
.banner--compact { min-height: 300px; }
.banner__image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.banner__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, var(--color-blue-darker) 0%, transparent 55%);
  opacity: .35;
}
.banner--plain .banner__image {
  background-image: linear-gradient(135deg, var(--color-blue) 0%, var(--color-blue-darker) 100%);
}
.banner__panel {
  position: relative;
  z-index: 1;
  background: var(--color-blue);
  width: min(64%, 780px);
  min-width: 320px;
  clip-path: polygon(0 0, 82% 0, 62% 100%, 0 100%);
  display: flex;
  align-items: center;
  padding-block: var(--space-6);
}
.banner__panel-inner { padding-right: var(--space-6); max-width: 34rem; }
.banner .eyebrow { color: var(--color-yellow); }
.banner h1, .banner h2 { color: var(--color-white); margin-bottom: var(--space-3); }
.banner__lead { font-size: 1.1rem; margin-bottom: var(--space-4); max-width: 32ch; }

.banner__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  padding: var(--space-3) 0;
  border-top: 1px solid rgba(255,255,255,.25);
  border-bottom: 1px solid rgba(255,255,255,.25);
}
.banner__fact {
  display: flex;
  align-items: center;
  gap: .6em;
  font-size: .85rem;
  font-weight: 700;
}
.banner__fact .icon {
  width: 1.9em;
  height: 1.9em;
  flex: none;
  padding: .3em;
  background: var(--color-yellow);
  color: var(--color-blue);
  border-radius: 50%;
}

@media (max-width: 900px) {
  .banner { min-height: 0; flex-direction: column; }
  .banner__image { position: absolute; inset: 0; }
  .banner__panel {
    width: 100%;
    min-width: 0;
    clip-path: polygon(0 0, 100% 0, 100% 76%, 0 100%);
    padding-block: var(--space-5) var(--space-6);
  }
  .banner__panel-inner { padding-right: var(--space-4); max-width: none; padding-top: var(--space-3); }
  .banner__facts { border-color: rgba(255,255,255,.3); }
}

/* Bandeau simple (sans photo, pleine largeur, utilise pour de courtes mises en avant) */
.strip {
  position: relative;
  background: linear-gradient(120deg, var(--color-blue) 0%, var(--color-blue-darker) 100%);
  color: var(--color-white);
  padding-block: var(--space-6);
}
.strip--image { background: var(--color-blue); }
.strip__image {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.strip--image::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--color-blue) 0%, var(--color-blue) 40%, rgba(38,31,179,.15) 100%);
}
.strip__content { position: relative; z-index: 1; max-width: 42rem; }
.strip h2 { color: var(--color-white); }

/* ---------- 11. Cartes ---------- */
.card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition), transform var(--transition);
}
.card:hover { box-shadow: var(--shadow-card); transform: translateY(-3px); }
.card__media { aspect-ratio: 4/3; overflow: hidden; background: var(--color-gray); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: var(--space-4); display: flex; flex-direction: column; gap: .6em; flex: 1; }
.card__tag {
  align-self: flex-start;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-blue);
  background: var(--color-blue-tint);
  padding: .3em .7em;
}
.card__title { font-size: 1.1rem; }
.card__text { color: var(--color-text-muted); font-size: .92rem; flex: 1; }
.card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5em 1.2em;
  font-size: .78rem;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
  padding-top: .7em;
}
.card__meta span { display: inline-flex; align-items: center; gap: .35em; }
.card__meta .icon { width: 1.1em; height: 1.1em; color: var(--color-blue); }
.card__link { margin-top: auto; }

/* Carte pleine couleur (profils d'entree, "pourquoi rejoindre") */
.tile {
  background: var(--color-blue);
  color: var(--color-white);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 220px;
}
.tile--alt { background: var(--color-blue-dark); }
.tile--yellow { background: var(--color-yellow); color: var(--color-blue); }
.tile__level {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-yellow);
}
.tile--yellow .tile__level { color: var(--color-blue); }
.tile h3 { color: inherit; }
.tile ul { flex: 1; font-size: .88rem; display: flex; flex-direction: column; gap: .4em; }
.tile li { position: relative; padding-left: 1.2em; }
.tile li::before { content: ""; position: absolute; left: 0; top: .5em; width: .55em; height: .55em; background: var(--color-yellow); transform: skewX(-18deg); }
.tile--yellow li::before { background: var(--color-blue); }
.tile__link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4em; height: 2.4em;
  background: var(--color-yellow);
  color: var(--color-blue);
  transition: transform var(--transition);
}
.tile--yellow .tile__link { background: var(--color-blue); color: var(--color-yellow); }
.tile__link:hover { transform: translateX(3px); }
.tile__link svg { width: 1.1em; height: 1.1em; }

/* Carte contact (personnes) */
.contact-card { display: flex; gap: var(--space-3); align-items: flex-start; background: var(--color-white); border: 1px solid var(--color-border); padding: var(--space-4); }
.contact-card img { width: 64px; height: 64px; object-fit: cover; border-radius: 50%; flex: none; }
.contact-card__name { font-weight: 700; }
.contact-card__role { font-size: .82rem; color: var(--color-text-muted); margin-bottom: .5em; }

/* Temoignages */
.testimonial {
  background: var(--color-gray);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.testimonial blockquote { margin: 0; font-size: 1.02rem; }
.testimonial blockquote::before { content: "\201C"; color: var(--color-blue); font-family: var(--font-heading); font-weight: 900; font-size: 1.6em; line-height: 0; display: block; margin-bottom: .2em; }
.testimonial cite { font-style: normal; font-weight: 700; display: flex; align-items: center; gap: .7em; }
.testimonial cite img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.testimonial cite span small { display: block; font-weight: 400; color: var(--color-text-muted); font-size: .82rem; }

/* ---------- 12. Chiffres cles ---------- */
.stats {
  background: linear-gradient(120deg, var(--color-blue-darker) 0%, var(--color-blue) 100%);
  color: var(--color-white);
  padding-block: var(--space-6);
}
.stats h2 { color: var(--color-white); }
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-5);
}
@media (max-width: 900px) { .stats__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .stats__grid { grid-template-columns: 1fr; } }
.stat__value {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem);
  color: var(--color-yellow);
  line-height: 1;
}
.stat__label { margin-top: .5em; font-size: .9rem; max-width: 22ch; }

/* ---------- 13. Formulaires ---------- */
.form-panel { background: var(--color-gray); padding: var(--space-5); }
.form-panel h2, .form-panel h3 { margin-bottom: var(--space-2); }
.form-grid { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.form-grid--two { grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .form-grid--two { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: .4em; }
.field label { font-size: .82rem; font-weight: 700; }
.field--full { grid-column: 1 / -1; }
.field input, .field textarea, .field select {
  /* Sans largeur explicite, un select dont une option est longue (ex. la liste
     des pays) impose sa largeur de contenu minimale et deborde le formulaire
     en mobile : voir backlog/general/debordement-mobile-menu-2026-09-30.md. */
  width: 100%;
  padding: .8em .9em;
  /* Limite d'un element d'interface : WCAG 1.4.11 demande au moins 3:1. Le gris
     de bordure courant (#dcdcdc) ne donne que 1,37:1 sur blanc, quasi invisible
     pour un oeil peu contrastant ; #767676 donne 4,54:1. */
  border: 1px solid var(--color-field-border);
  background: var(--color-white);
  font-family: var(--font-body);
}
.field textarea { resize: vertical; min-height: 8em; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { border-color: var(--color-blue); }
.field--checkbox { flex-direction: row; align-items: flex-start; gap: .6em; font-size: .82rem; }
.field--checkbox input { margin-top: .3em; }
.form-note { font-size: .74rem; color: var(--color-text-muted); margin-top: var(--space-3); }
.form-confirm {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-blue);
  color: var(--color-white);
  font-weight: 700;
}

/* ---------- 14. Accordeon ---------- */
.accordion { border-top: 1px solid var(--color-border); }
.accordion__item { border-bottom: 1px solid var(--color-border); }
.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 1.1em .2em;
  text-align: left;
  font-family: var(--font-heading);
  font-weight: 900;
  color: var(--color-blue);
  font-size: 1rem;
}
.accordion__trigger .chevron { width: 1em; height: 1em; flex: none; transition: transform var(--transition); }
.accordion__trigger[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.accordion__panel { padding: 0 .2em 1.3em; color: var(--color-text-muted); }

/* ---------- 15. Filtres (catalogue programmes) ---------- */
.filters { display: flex; flex-direction: column; gap: var(--space-4); }
.filters fieldset { border: 0; padding: 0; margin: 0; }
.filters legend { font-family: var(--font-heading); font-weight: 900; color: var(--color-blue); margin-bottom: .6em; padding: 0; }
.filters .option { display: flex; align-items: center; gap: .5em; padding: .3em 0; font-size: .9rem; }

/* ---------- 16. Pied de page ---------- */
/* Maquette du 23 septembre 2026 : quatre bandes superposees. Une bande claire
   avec la marque et les liens, une bande bleue pour les valeurs, une bande
   blanche pour les liens legaux, une bande bleue pour le copyright. */
.site-footer { background: var(--color-white); }

.footer-top { background: var(--color-gray); padding-block: var(--space-6); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1.2fr 1fr;
  gap: var(--space-5);
  align-items: start;
}
@media (max-width: 1000px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-brand img { width: 200px; height: auto; margin-bottom: var(--space-3); }
.footer-baseline {
  font-family: var(--font-heading);
  font-weight: 900;
  color: var(--color-blue);
  margin: 0;
}
.footer-col h3 {
  color: var(--color-blue);
  font-size: 1.05rem;
  margin-bottom: var(--space-3);
}
.footer-social { display: flex; gap: .7em; }
.footer-social a {
  width: 2.2em; height: 2.2em;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-blue);
  border-radius: 50%;
  color: var(--color-blue);
}
.footer-social a:hover, .footer-social a:focus-visible { background: var(--color-blue); color: var(--color-white); }
.footer-social svg { width: 1.1em; height: 1.1em; }

.footer-liens-forts { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-liens-forts a {
  font-family: var(--font-heading);
  font-weight: 900;
  color: var(--color-blue);
  font-size: 1.02rem;
}
.footer-liens-forts a:hover, .footer-liens-forts a:focus-visible { text-decoration: underline; }
.footer-maj {
  margin-top: var(--space-3);
  font-family: var(--font-heading);
  font-weight: 900;
  color: var(--color-blue);
  font-size: 1.02rem;
}

/* Les valeurs, sur fond bleu, titre jaune, trois colonnes centrees */
.footer-values { background: var(--color-blue); color: var(--color-white); padding-block: var(--space-6); }
.footer-values h2 { color: var(--color-yellow); text-align: center; margin-bottom: var(--space-6); }
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
@media (max-width: 800px) { .values-grid { grid-template-columns: 1fr; } }
.valeur { text-align: center; }
.valeur__picto {
  width: 3rem; height: 3rem;
  margin: 0 auto var(--space-3);
  /* Pictogrammes des valeurs en jaune sur le fond bleu, comme demande. */
  stroke: var(--color-yellow);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.valeur h3 { color: var(--color-white); margin-bottom: var(--space-2); }
.valeur p { color: var(--color-white); font-size: .92rem; max-width: 24rem; margin-inline: auto; }

/* Liens legaux, separes par des filets */
.footer-legal { background: var(--color-white); padding-block: var(--space-4); }
.footer-legal ul { display: flex; flex-wrap: wrap; align-items: center; }
.footer-legal li { display: flex; align-items: center; }
.footer-legal li + li::before {
  content: "";
  width: 1px;
  height: 1.4em;
  background: var(--color-border);
  margin-inline: var(--space-3);
}
.footer-legal a {
  color: var(--color-black);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.footer-legal a:hover, .footer-legal a:focus-visible { color: var(--color-blue); }
/* « Bureau des pratiques d'excellence » continue la rangee des liens, apres un
   filet, et ne passe a la ligne que faute de place (maquette : sa rangee est
   pleine, d'ou le retour). */
.footer-legal .container { display: flex; flex-wrap: wrap; align-items: center; row-gap: var(--space-2); }
.footer-excellence::before {
  content: "";
  width: 1px;
  height: 1.4em;
  background: var(--color-border);
  margin-inline: var(--space-3);
}
.footer-excellence {
  display: flex;
  align-items: center;
  margin: 0;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-black);
}
/* Sous 1100px la rangee se replie : un filet tomberait en debut de ligne. Les
   liens sont alors simplement espaces. */
@media (max-width: 1100px) {
  .footer-legal .container { display: block; }
  .footer-legal ul { gap: .6rem 1.5rem; }
  .footer-legal li + li::before, .footer-excellence::before { display: none; }
  .footer-excellence { margin-top: .6rem; }
}

.footer-copyright { background: var(--color-blue); color: var(--color-white); padding-block: var(--space-3); }
.footer-copyright p { margin: 0; font-size: .78rem; font-weight: 700; }

/* ---------- 16 bis. Regles des sections de l'accueil et des cartes ----------
   Ce bloc regroupe les regles des composants introduits avec la maquette du
   23 septembre 2026. Il a ete reecrit d'un seul tenant apres que deux passes
   concurrentes se sont mutuellement ecrasees sur cette feuille. */

/* Cadre pour un logo dans une carte : jamais agrandi au-dela du natif. */
.card__media--logo {
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
.card__media--logo img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Onglets par profil, section « Bienvenue ». */
.lien-sous-titre { margin-top: var(--space-2); margin-bottom: var(--space-4); }
.texte-pleine-largeur { max-width: none; }
.onglets { margin-top: var(--space-5); }
.onglets__liste {
  display: flex;
  justify-content: center;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}
.onglets__onglet {
  padding: .4em .2em .6em;
  font-size: .86rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-black);
  border-bottom: 2px solid transparent;
}
.onglets__onglet[aria-selected="true"] { color: var(--color-blue); border-bottom-color: var(--color-blue); font-weight: 700; }
.onglets__onglet:hover { color: var(--color-blue); }
.onglets__panneau:focus-visible { outline: 3px solid var(--color-yellow); outline-offset: 4px; }
.grille-parcours { align-items: stretch; }

/* Rangee des labels et accreditations. */
.rangee-labels {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
}
.rangee-labels img { height: 74px; width: auto; max-width: 100%; object-fit: contain; }
.rangee-labels img[src*="diplome"] { height: 92px; }
@media (max-width: 760px) {
  .rangee-labels { gap: var(--space-4); justify-content: center; }
  .rangee-labels img { height: 56px; }
  .rangee-labels img[src*="diplome"] { height: 70px; }
}

/* Grille des atouts : trois colonnes, la premiere carte sur deux rangees. */
.grille-atouts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  align-items: stretch;
}
.grille-atouts__colonne { display: grid; gap: var(--space-4); align-content: stretch; }
@media (max-width: 900px) { .grille-atouts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .grille-atouts { grid-template-columns: 1fr; } }

.carte-lien {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-blue);
  border-radius: 6px;
  padding: var(--space-4) var(--space-4) calc(var(--space-4) + 1.4em);
  color: var(--color-blue);
  transition: background var(--transition), color var(--transition);
}
.carte-lien h3 { color: var(--color-blue); font-size: 1.12rem; margin-bottom: var(--space-3); }
.carte-lien p { color: var(--color-blue); font-size: .86rem; line-height: 1.5; }
.carte-lien ul { margin: 0; }
.carte-lien li {
  position: relative;
  padding-left: 1em;
  margin-bottom: .7em;
  color: var(--color-blue);
  font-size: .86rem;
  line-height: 1.45;
}
.carte-lien li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: .3em;
  height: .3em;
  border-radius: 50%;
  background: var(--color-blue);
}
.carte-lien__fleche { position: absolute; right: var(--space-4); bottom: var(--space-3); display: inline-flex; }
.carte-lien__fleche svg {
  width: 1.15em;
  height: 1.15em;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.carte-lien:hover, .carte-lien:focus-visible { background: var(--color-blue); color: var(--color-white); }
.carte-lien:hover h3, .carte-lien:hover p, .carte-lien:hover li,
.carte-lien:focus-visible h3, .carte-lien:focus-visible p, .carte-lien:focus-visible li { color: var(--color-white); }
.carte-lien:hover li::before, .carte-lien:focus-visible li::before { background: var(--color-white); }

/* Bandeau des chiffres cles : fond bleu, titre jaune, valeurs blanches. */
.bandeau-chiffres { background: var(--color-blue); color: var(--color-white); }
.bandeau-chiffres h2 { color: var(--color-yellow); }
.chiffres-grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
@media (max-width: 900px) { .chiffres-grille { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .chiffres-grille { grid-template-columns: 1fr; } }
.chiffre__valeur {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: clamp(2rem, 1.4rem + 2vw, 2.9rem);
  line-height: 1.05;
  color: var(--color-white);
  margin-bottom: var(--space-3);
}
.chiffre__libelle { color: var(--color-white); font-size: .86rem; line-height: 1.5; max-width: 15rem; margin: 0; }

/* Bloc a oblique : texte a gauche, image a droite coupee en diagonale. */
.bloc-oblique { padding-block: 0; overflow: hidden; }
.bloc-oblique__grille { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: center; }
.bloc-oblique__texte { padding-block: var(--space-6); padding-right: var(--space-5); }
.bloc-oblique__image { position: relative; align-self: stretch; min-height: 22rem; }
.bloc-oblique__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
}
@media (max-width: 900px) {
  .bloc-oblique__grille { grid-template-columns: 1fr; }
  .bloc-oblique__texte { padding-right: 0; }
  .bloc-oblique__image { min-height: 14rem; }
  .bloc-oblique__image img { clip-path: polygon(0 18%, 100% 0, 100% 100%, 0 100%); }
}

/* Deux appels a l'action empiles, alignes a gauche. */
.pile-cta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); margin-top: var(--space-4); }
.pile-cta .cta { font-size: .78rem; padding: .7em 1.1em; }
.pile-cta .cta svg {
  width: 1em;
  height: 1em;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Procedure d'admission : deux colonnes de cartes blanches. */
.bloc-admission__chapo { max-width: 42rem; margin-bottom: var(--space-5); }
.bloc-admission { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); max-width: 58rem; }
.bloc-admission__colonne { display: grid; gap: var(--space-4); align-content: start; }
@media (max-width: 760px) { .bloc-admission { grid-template-columns: 1fr; } }

.carte-contact {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--color-white);
  border-radius: 6px;
  padding: var(--space-4);
}
.carte-contact img { width: 4.5rem; height: 4.5rem; border-radius: 50%; object-fit: cover; flex: none; }
.carte-contact__nom { font-family: var(--font-heading); font-weight: 900; color: var(--color-blue); margin-bottom: .2em; }
.carte-contact__role { color: var(--color-black); font-size: .88rem; margin: 0; }

.carte-procedure {
  position: relative;
  display: block;
  background: var(--color-white);
  border-radius: 6px;
  padding: var(--space-4) var(--space-4) calc(var(--space-4) + 1.2em);
}
.carte-procedure h3 { color: var(--color-blue); font-size: 1.02rem; margin-bottom: var(--space-2); }
.carte-procedure p { color: var(--color-black); font-size: .88rem; line-height: 1.5; }
.carte-procedure:hover, .carte-procedure:focus-visible { background: var(--color-blue); }
.carte-procedure:hover h3, .carte-procedure:hover p,
.carte-procedure:focus-visible h3, .carte-procedure:focus-visible p { color: var(--color-white); }
.carte-procedure .carte-lien__fleche { color: var(--color-blue); }
.carte-procedure:hover .carte-lien__fleche, .carte-procedure:focus-visible .carte-lien__fleche { color: var(--color-white); }

/* La premiere carte des atouts occupe les deux rangees de sa colonne. */
.carte-lien--haute { grid-row: span 2; }

/* Pastille d'initiale, quand un contact n'a pas de portrait. */
.contact-card__initial {
  width: 3rem;
  height: 3rem;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-blue);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.15rem;
}

/* ---------- 16 ter. Maquette de la fiche programme (PGE, 23 septembre 2026) ----------
   Composants de la fiche Programme Grande Ecole : banniere a reperes, sous-navigation,
   deux colonnes avec formulaire, bandeaux a oblique, cartes bleues, accordeons gris.
   Voir sources/maquettes/ANALYSE.md. */

/* Menu : rubrique courante soulignee, filets pleine hauteur, libelle sur deux lignes. */
.main-nav__item.is-current > .main-nav__link { color: var(--color-blue); border-bottom-color: var(--color-blue); }
.main-nav__item + .main-nav__item::before { height: 3.1em; }
.main-nav__link { font-size: .9rem; line-height: 1.2; text-align: left; }
@media (max-width: 1200px) {
  .main-nav__item + .main-nav__item::before { display: none; }
  .main-nav__link br { display: none; }
}
.supheader__bloc--loupe .supheader__link { padding-inline: 1.2em; }

/* Page de recherche */
.recherche-page { display: flex; gap: var(--space-2); margin-top: var(--space-4); flex-wrap: wrap; }
.recherche-page input {
  flex: 1 1 18rem;
  min-width: 0;
  padding: .85em 1em;
  border: 1px solid var(--color-white);
  background: var(--color-white);
  color: var(--color-black);
  font-size: 1rem;
}
.recherche-bilan { font-weight: 700; margin-bottom: var(--space-4); }
.recherche-resultats { display: grid; gap: var(--space-3); }
.recherche-resultats a {
  display: block;
  padding: var(--space-4);
  background: var(--color-gray);
  border-left: 4px solid var(--color-blue);
}
.recherche-resultats a:hover, .recherche-resultats a:focus-visible { background: var(--color-blue); }
.recherche-resultats a:hover h2, .recherche-resultats a:hover p,
.recherche-resultats a:focus-visible h2, .recherche-resultats a:focus-visible p { color: var(--color-white); }
.recherche-resultats h2 { margin-bottom: var(--space-2); }
.recherche-resultats p { color: var(--color-black); margin: 0; }

/* Titres et texte de la fiche */
.fiche-programme { --fiche-gris-colonne: #f7f7f7; }
.fiche-section { padding-block: var(--space-6); }
.fiche-section + .fiche-section { padding-top: 0; }
.titre-xl { font-size: clamp(1.9rem, 1.3rem + 1.8vw, 2.9rem); margin-bottom: var(--space-5); }
.fiche-programme h3 { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.7rem); margin: var(--space-5) 0 var(--space-4); }
.fiche-programme .titre-xl + h3 { margin-top: 0; }
.fiche-programme .titre-noir { color: var(--color-black); }
.fiche-programme p { line-height: 1.55; }
.fiche-grille__contenu > p, .fiche-section--pleine .container > p { text-align: justify; }
.fiche-programme p.centre { text-align: center; }
.intertitre-gras { font-weight: 700; margin-top: var(--space-4); }
.intertitre-caps { text-transform: uppercase; letter-spacing: .01em; margin-bottom: var(--space-3); }
.intertitre-caps--fin { margin-top: var(--space-4); }
.semestre { text-transform: uppercase; margin-top: var(--space-5); }
.centre { text-align: center; }
.lien-souligne { color: var(--color-blue); text-decoration: underline; text-underline-offset: 3px; }
.lien-souligne:hover, .lien-souligne:focus-visible { text-decoration-thickness: 2px; }

.coches { margin: var(--space-3) 0 var(--space-4); display: grid; gap: .45em; }
.coches li { position: relative; padding-left: 2em; }
.coches li::before {
  content: "";
  position: absolute;
  left: .35em;
  top: .15em;
  width: .5em;
  height: .95em;
  border: solid var(--color-blue);
  border-width: 0 .14em .14em 0;
  transform: rotate(40deg);
}
.puces { margin: var(--space-2) 0 var(--space-3); display: grid; gap: .3em; }
.puces li { position: relative; padding-left: 1.1em; }
.puces li::before {
  content: "";
  position: absolute;
  left: .2em;
  top: .62em;
  width: .3em;
  height: .3em;
  border-radius: 50%;
  background: currentColor;
}
.puces--blanches { color: var(--color-white); }

/* Banniere de fiche : texte sur bleu, photo a droite coupee en oblique, reperes a pictogrammes */
.hero-programme {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--color-blue);
  color: var(--color-white);
  min-height: 34rem;
  overflow: hidden;
}
.hero-programme__texte { display: flex; align-items: center; padding-block: var(--space-6); }
.hero-programme__interieur {
  padding-left: max(var(--container-pad), calc((100vw - var(--container-max)) / 2 + var(--container-pad)));
  padding-right: var(--space-5);
  max-width: calc(var(--container-max) / 2 + 12rem);
}
.hero-programme h1 { color: var(--color-white); font-size: clamp(2.3rem, 1.4rem + 3vw, 4rem); margin-bottom: var(--space-5); }
.hero-programme__accroche { color: var(--color-white); font-size: 1.05rem; max-width: 36rem; }
.hero-programme__image { position: relative; }
.hero-programme__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
}
.reperes { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-4); margin-top: var(--space-5); }
@media (min-width: 1100px) { .reperes { flex-wrap: nowrap; } }
.reperes li { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; max-width: 6.8rem; flex: 0 1 auto; }
.reperes span { font-size: .95rem; line-height: 1.25; }
.picto { flex: none; width: 2.4rem; height: 2.4rem; stroke: var(--color-yellow); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.picto--jaune { stroke: var(--color-yellow); }
@media (max-width: 900px) {
  .hero-programme { grid-template-columns: 1fr; min-height: 0; }
  .hero-programme__interieur { padding-right: var(--container-pad); }
  .hero-programme__image { min-height: 15rem; }
  .hero-programme__image img { clip-path: polygon(0 16%, 100% 0, 100% 100%, 0 100%); }
}

/* Sous-navigation de la fiche, collee sous l'en-tete */
.sous-navigation {
  position: sticky;
  top: var(--header-h);
  z-index: 300;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
}
.sous-navigation ul {
  display: flex;
  justify-content: center;
  gap: var(--space-2) var(--space-6);
  padding: var(--space-4) var(--container-pad);
  overflow-x: auto;
}
.sous-navigation a {
  display: inline-block;
  padding-bottom: .35em;
  text-transform: uppercase;
  font-size: 1rem;
  color: var(--color-black);
  border-bottom: 2px solid var(--color-border);
  white-space: nowrap;
}
.sous-navigation a[aria-current="true"], .sous-navigation a:hover, .sous-navigation a:focus-visible {
  border-bottom-color: var(--color-blue);
}
@media (max-width: 1200px) { .sous-navigation { top: var(--header-h-mobile); } }
@media (max-width: 700px) { .sous-navigation ul { justify-content: flex-start; gap: var(--space-4); } }

/* Fil d'Ariane de la fiche, sous la sous-navigation, separateurs « > » */
.ariane-programme { padding-block: var(--space-4) 0; }
.ariane-programme ol { display: flex; flex-wrap: wrap; gap: .4em 1.4em; font-size: 1rem; }
.ariane-programme li + li::before { content: ">"; margin-right: 1.4em; color: var(--color-black); }
.ariane-programme a { color: var(--color-black); }
.ariane-programme a:hover, .ariane-programme a:focus-visible { color: var(--color-blue); text-decoration: underline; }

/* Deux colonnes : contenu, et colonne grise portant le formulaire */
.fiche-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24rem;
  gap: var(--space-6);
  align-items: stretch;
}
.colonne-formulaire { background: var(--fiche-gris-colonne); padding: var(--space-4); }
.formulaire-maquette {
  position: sticky;
  top: calc(var(--header-h) + 5rem);
  background: var(--color-gray);
  border-radius: 6px;
  padding: var(--space-4);
  display: grid;
  gap: var(--space-2);
}
.formulaire-maquette__titre { font-size: 1.45rem; margin-bottom: var(--space-3); }
.formulaire-maquette__ligne { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.champ-maquette input, .champ-maquette select {
  width: 100%;
  padding: .7em .75em;
  border: 1px solid var(--color-field-border);
  background: var(--color-white);
  font-size: .85rem;
  color: var(--color-black);
}
/* Sous 16px, Safari iOS zoome automatiquement la page a la saisie : la taille
   calee sur la maquette desktop (.85rem, 13.6px) ne doit pas descendre sous
   ce seuil hors du contexte desktop. */
@media (max-width: 1200px) { .champ-maquette input, .champ-maquette select { font-size: 1rem; } }
.formulaire-maquette__rgpd {
  max-height: 6.2em;
  overflow-y: auto;
  font-size: .68rem;
  line-height: 1.4;
  color: var(--color-text-muted);
  margin-top: var(--space-2);
  padding-right: .4em;
}
.formulaire-maquette__envoi { justify-self: center; margin-top: var(--space-3); }
.formulaire-maquette .form-confirm { font-size: .85rem; color: var(--color-blue); font-weight: 700; }
@media (max-width: 1000px) {
  .fiche-grille { grid-template-columns: 1fr; }
  .formulaire-maquette { position: static; }
  /* En une colonne, un seul formulaire suffit : les suivants repeteraient le premier. */
  .fiche-section ~ .fiche-section .colonne-formulaire { display: none; }
}

/* Logos de la fiche, plus petits que sur l'accueil */
.rangee-labels--fiche { gap: var(--space-4); margin: var(--space-4) 0 var(--space-6); }
.rangee-labels--fiche img { height: 44px; }
.rangee-labels--fiche img[src*="diplome"] { height: 72px; }

/* Cartes bleues : objectifs (3 + 2) et atouts (3 + 3, carrees) */
.cartes-bleues { display: grid; grid-template-columns: repeat(3, minmax(0, 15.5rem)); gap: var(--space-2); }
@media (max-width: 760px) { .cartes-bleues { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .cartes-bleues--objectifs { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .carte-bleue--carree { aspect-ratio: auto; min-height: 10rem; padding: var(--space-3) var(--space-2); } }
.carte-bleue {
  background: var(--color-blue);
  color: var(--color-white);
  padding: var(--space-4) var(--space-3);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.carte-bleue h4 { font-family: var(--font-body); font-weight: 700; font-size: 1rem; color: var(--color-yellow); margin: 0; }
.carte-bleue p { color: var(--color-white); font-size: .92rem; line-height: 1.4; margin: 0; }
.carte-bleue--carree { aspect-ratio: 1; justify-content: center; }
.carte-bleue p.carte-bleue__atout { color: var(--color-yellow); font-weight: 700; font-size: 1rem; }

/* Le mot de la direction */
.mot-direction { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--space-5); margin: 0; }
.mot-direction img { width: 9rem; height: 9rem; border-radius: 50%; object-fit: cover; }
.mot-direction blockquote { margin: 0; }
.mot-direction figcaption { grid-column: 2; color: var(--color-black); }
.mot-direction figcaption strong { color: var(--color-blue); }
@media (max-width: 620px) {
  .mot-direction { grid-template-columns: 1fr; }
  .mot-direction figcaption { grid-column: 1; }
}

/* Specialisations */
.specialites { display: grid; gap: .25em; margin-bottom: var(--space-4); }
.specialites__nom { color: var(--color-blue); }

/* Bandeaux bleus pleine largeur, photo a droite coupee en oblique */
.bandeau-oblique {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 36%);
  background: var(--color-blue);
  color: var(--color-white);
  overflow: hidden;
}
.bandeau-oblique__texte { padding-block: var(--space-6); }
.bandeau-oblique__interieur {
  padding-left: max(var(--container-pad), calc((100vw - var(--container-max)) / 2 + var(--container-pad)));
  padding-right: var(--space-5);
}
.bandeau-oblique h2 { color: var(--color-white); font-size: clamp(1.9rem, 1.3rem + 1.8vw, 2.9rem); margin-bottom: var(--space-3); }
.bandeau-oblique .bandeau-oblique__surtitre {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: .01em;
}
.bandeau-oblique__sous-titre { font-family: var(--font-heading); font-weight: 900; font-size: 1.45rem; margin-bottom: var(--space-4); }
.bandeau-oblique p { color: var(--color-white); text-align: justify; }
.bandeau-oblique__image { position: relative; min-height: 18rem; }
.bandeau-oblique__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
}
.rangee-cta { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); margin-top: var(--space-5); }
@media (max-width: 900px) {
  .bandeau-oblique { grid-template-columns: 1fr; }
  .bandeau-oblique__interieur { padding-right: var(--container-pad); }
  .bandeau-oblique__image { min-height: 14rem; }
  .bandeau-oblique__image img { clip-path: polygon(0 16%, 100% 0, 100% 100%, 0 100%); }
}

/* Accordeons gris de la maquette : titre en capitales, chevron bleu, ouvert en « ^ » */
.pile-accordeons { display: grid; gap: var(--space-2); margin: var(--space-4) 0; }
.accordeon-gris { background: var(--color-gray); }
.accordeon-gris h3 { margin: 0 !important; font-size: 1rem !important; }
.accordeon-gris .accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: .9em 1.2em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.02rem;
  text-transform: uppercase;
  text-align: left;
  color: var(--color-black);
}
.accordeon-gris .chevron { width: 1.1em; height: 1.1em; flex: none; stroke: var(--color-blue); stroke-width: 3; transition: transform var(--transition); }
.accordeon-gris .accordion__trigger[aria-expanded="true"] .chevron { transform: rotate(-90deg); }
.accordeon-gris__panneau { padding: 0 1.2em 1.2em; }
.accordeon-gris__panneau p { text-align: justify; }

/* Appels a l'action a fleche « > » de la maquette */
.cta--fleche { gap: 1.4em; justify-content: space-between; }
.cta .fleche { width: 1em; height: 1em; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Admissions : paires de cartes grises */
.paire-cartes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); align-items: start; margin-bottom: var(--space-4); }
@media (max-width: 800px) { .paire-cartes { grid-template-columns: 1fr; } }
.carte-grise { background: var(--color-gray); padding: var(--space-4); }
.etapes-numerotees { counter-reset: etape; display: grid; gap: .35em; }
.etapes-numerotees li { counter-increment: etape; position: relative; padding-left: 2em; }
.etapes-numerotees li::before { content: counter(etape) "."; position: absolute; left: 0; color: var(--color-blue); font-weight: 700; }
.parcoursup-rangee { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); margin: var(--space-5) 0; }
.parcoursup-rangee img { max-width: 100%; height: auto; }

/* Frais de scolarite */
.cartes-frais { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 900px) { .cartes-frais { grid-template-columns: 1fr; } }
.carte-frais { background: var(--color-white); border-radius: 8px; padding: var(--space-5) var(--space-4); }
.carte-frais__public { color: var(--color-blue); font-weight: 700; margin-top: var(--space-3); }
.carte-frais__note { font-size: .9rem; margin-top: var(--space-4); }

/* Equipe admission */
.equipe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); text-align: center; margin-bottom: var(--space-5); }
@media (max-width: 760px) { .equipe { grid-template-columns: 1fr; } }
.equipe img, .equipe__initiales {
  width: 10rem;
  height: 10rem;
  margin: 0 auto var(--space-3);
  border-radius: 50%;
  object-fit: cover;
}
.equipe__initiales {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gray);
  color: var(--color-blue);
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 2.2rem;
}
.equipe__nom { font-weight: 700; margin-bottom: .2em; }
.equipe__role { margin: 0; }

/* Bandeau bleu du temoignage */
.bandeau-bleu { background: var(--color-blue); color: var(--color-white); }
.bandeau-bleu .titre-jaune { color: var(--color-yellow); }
.video-temoignage { max-width: 48rem; }

/* Foire aux questions en deux colonnes */
.faq-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); gap: var(--space-6); align-items: start; }
@media (max-width: 900px) { .faq-grille { grid-template-columns: 1fr; } }
.faq-grille__question { font-size: 1.6rem; margin-bottom: .2em; }
.faq-grille__reponse { font-size: 1.6rem; font-weight: 700; margin-bottom: var(--space-5); }
.faq-grille .pile-accordeons { margin-top: 0; }

.cartes-bleues--objectifs, .cartes-bleues--atouts { margin-bottom: var(--space-5); }
.faq-grille__appel { position: sticky; top: calc(var(--header-h) + 5rem); }
@media (max-width: 900px) { .faq-grille__appel { position: static; } }

.pile-accordeons + .titre-xl, .coches + .titre-xl, .rangee-cta + .titre-xl { margin-top: var(--space-6); }
/* Les ancres de la sous-navigation ne doivent pas passer sous l'en-tete colle. */
.fiche-programme [id] { scroll-margin-top: calc(var(--header-h) + 5rem); }

/* Sur un ecran etroit, le texte justifie ouvre de grands blancs entre les mots. */
@media (max-width: 700px) {
  .fiche-grille__contenu > p, .fiche-section--pleine .container > p, .accordeon-gris__panneau p, .bandeau-oblique p { text-align: left; }
  .fiche-programme p.centre { text-align: center; }
  .ariane-programme ol { gap: .3em .7em; font-size: .9rem; }
  .ariane-programme li + li::before { margin-right: .7em; }
}

/* ---------- 16 quater. Ecarts mesures contre la maquette PGE (23 septembre 2026) ----------
   Comparaison au pixel, maquette ramenee a 1440px contre le rendu a 1440px :
   voir sources/maquettes/ECARTS-PGE.md. */

/* Bandeau superieur : 55px de haut, baseline et liens plus grands. */
@media (min-width: 1201px) {
  :root { --supheader-h: 55px; --header-h: 115px; }
  .supheader { font-size: .78rem; }
  .supheader__baseline { font-size: 1.16rem; }
  .site-logo img { height: 42px; }
  .supheader__link, .supheader__declencheur { padding-inline: 2.1em; }
  /* La loupe et « Telecharger la brochure » forment un seul bloc, sans filet. */
  .supheader__bloc--loupe .supheader__link { padding-inline: 2.1em .5em; }
  .supheader__bloc--loupe + .supheader__bloc { border-left: 0; }
  .supheader__bloc--loupe + .supheader__bloc .supheader__link { padding-left: .5em; }
  /* Menu : corps 16px sans graisse, filets gris fonce avant chaque rubrique,
     aligne a droite ; le soulignement reste sous le seul libelle. */
  .main-nav__list { justify-content: flex-end; gap: 0; }
  .main-nav__item::before,
  .main-nav__item + .main-nav__item::before {
    content: "";
    width: 1px;
    height: 2.3em;
    background: #6b6b6b;
    margin-right: 1.9rem;
  }
  .main-nav__link { font-size: 1rem; font-weight: 400; margin-right: 1.9rem; }
  .main-nav__item:last-child .main-nav__link { margin-right: 0; }
}

/* Texte plus serre : interligne 1,35, listes sans espace entre les entrees. */
.fiche-programme p, .fiche-programme li { line-height: 1.35; }
.fiche-programme .coches, .fiche-programme .puces { gap: .15em; }
.fiche-programme .titre-xl { font-size: clamp(1.8rem, 1.2rem + 1.5vw, 2.6rem); }
.fiche-programme h3 { font-size: clamp(1.2rem, 1rem + .7vw, 1.6rem); }
.hero-programme { min-height: 29.5rem; }
.hero-programme h1 { font-size: clamp(2.1rem, 1rem + 2.5vw, 3.3rem); }
/* Titres coupes comme sur la maquette : « Programme / Grande Ecole. », « Demande / d'informations. » */
.hero-programme h1 { max-width: 30rem; }
.formulaire-maquette__titre { max-width: 9em; }

/* Colonne du formulaire : 28rem, a 7rem du texte ; champs et bouton plus bas. */
@media (min-width: 1201px) { .fiche-grille { grid-template-columns: minmax(0, 1fr) 28rem; gap: 7rem; } }
.formulaire-maquette__titre { font-size: 1.25rem; }
.champ-maquette input, .champ-maquette select { padding: .45em .6em; }
.formulaire-maquette__envoi { padding: .6em 1.6em; font-size: .75rem; }
.rgpd-defilement { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; align-items: center; margin-top: var(--space-2); }
.rgpd-defilement .formulaire-maquette__rgpd { margin-top: 0; max-height: 7em; } /* cinq lignes entieres, comme la maquette */
.formulaire-maquette__rgpd.is-pilote { scrollbar-width: none; }
.formulaire-maquette__rgpd.is-pilote::-webkit-scrollbar { display: none; }
.rgpd-defilement__commandes { display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.rgpd-defilement__bouton { display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.3rem; padding: 0; color: #555; }
.rgpd-defilement__bouton svg { width: .7rem; height: .56rem; fill: currentColor; }
.rgpd-defilement__bouton:hover:not(:disabled), .rgpd-defilement__bouton:focus-visible { color: var(--color-blue); }
.rgpd-defilement__bouton:disabled { opacity: .35; cursor: default; }
.rgpd-defilement__tiret { width: .55rem; height: 1px; background: #555; }

/* Cartes carrees de 13rem, pictogrammes plus grands. Reservee au bureau : sans
   media query, elle imposait 3 colonnes de 13rem meme en mobile et cassait la
   grille a 2 colonnes prevue plus haut, provoquant un debordement horizontal
   (voir backlog/general/debordement-mobile-menu-2026-09-30.md). */
@media (min-width: 1201px) { .cartes-bleues { grid-template-columns: repeat(3, minmax(0, 13rem)); gap: .45rem; } }
.carte-bleue { padding: var(--space-3) var(--space-3); gap: var(--space-2); justify-content: center; }
.carte-bleue .picto { width: 3rem; height: 3rem; stroke-width: 2.2; }
.carte-bleue p { font-size: .85rem; line-height: 1.3; }
.carte-bleue h4, .carte-bleue p.carte-bleue__atout { font-size: .9rem; }
.cartes-bleues--objectifs .carte-bleue { aspect-ratio: 1; }
@media (max-width: 760px) { .cartes-bleues--objectifs .carte-bleue { aspect-ratio: auto; } }

/* Mot de la direction : portrait plus petit, respiration avant les cinq annees. */
.mot-direction { grid-template-columns: 7.25rem minmax(0, 1fr); margin-bottom: var(--space-7); }
.mot-direction img { width: 7.25rem; height: 7.25rem; }

/* Chiffres : libelles lisibles, titre sur une ligne. */
.fiche-programme .bandeau-chiffres .section-head { max-width: none; }
.fiche-programme .chiffre__libelle { font-size: 1.1rem; line-height: 1.3; }

/* Accordeons plus bas, video et portraits aux proportions de la maquette. */
.accordeon-gris .accordion__trigger { padding: .6em 1.2em; font-size: .95rem; }
.equipe img, .equipe__initiales { width: 12.5rem; height: 12.5rem; }
.video-temoignage { max-width: 36rem; }

/* International : accroche plus grande (le debord de la carte est commun, voir la fin de la feuille). */
.fiche-programme .bloc-oblique__texte p { font-size: 1.15rem; max-width: 31rem; }

/* ---------- 17. Pictogrammes ---------- */
.icon { width: 1.4em; height: 1.4em; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Les chevrons sont des traces, pas des aplats : sans ces regles, le path est
   rempli en noir et se lit comme un point colle au libelle du menu. */
.chevron {
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- 18. Pagination ---------- */
.pagination { display: flex; gap: .5em; justify-content: center; margin-top: var(--space-5); }
.pagination a, .pagination span {
  width: 2.4em; height: 2.4em;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-border);
  font-weight: 700;
}
.pagination a:hover, .pagination a:focus-visible { border-color: var(--color-blue); color: var(--color-blue); }
.pagination [aria-current="page"] { background: var(--color-blue); color: var(--color-white); border-color: var(--color-blue); }

/* ---------- 19. Sous-navigation fiche programme ---------- */
.subnav { background: var(--color-white); border-bottom: 1px solid var(--color-border); position: sticky; top: var(--header-h); z-index: 300; }
@media (max-width: 1200px) { .subnav { top: var(--header-h-mobile); } }
.subnav ol { display: flex; gap: var(--space-4); overflow-x: auto; }
.subnav a {
  display: inline-block;
  padding: 1em 0;
  font-weight: 700;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  color: var(--color-text-muted);
}
.subnav a:hover, .subnav a:focus-visible, .subnav a[aria-current="true"] { color: var(--color-blue); border-bottom-color: var(--color-blue); }

/* ---------- 20. Bloc candidater (jaune sur bleu) ---------- */
.promo {
  background: var(--color-blue);
  color: var(--color-white);
  padding: var(--space-6) var(--space-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  position: relative;
  overflow: hidden;
}
.promo::before {
  content: "";
  position: absolute;
  right: -10%;
  top: 0;
  bottom: 0;
  width: 45%;
  background: var(--color-blue-dark);
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
}
.promo__content { position: relative; z-index: 1; max-width: 34rem; }
.promo h2 { color: var(--color-white); }
.promo .cta-row { position: relative; z-index: 1; }

/* ---------- 21. Divers ---------- */
.news-strip { display: flex; gap: var(--space-4); overflow-x: auto; padding-bottom: var(--space-2); scroll-snap-type: x proximity; }
.news-strip .card { min-width: 260px; scroll-snap-align: start; }
.numbered-step { display: flex; gap: var(--space-3); align-items: flex-start; }
.numbered-step__index { font-family: var(--font-heading); font-weight: 900; font-size: 1.6rem; color: var(--color-blue); flex: none; min-width: 2ch; }
.logo-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); }
.logo-row img { max-height: 48px; width: auto; }
.map-figure { position: relative; }
.map-figure img { width: 100%; }
.badge-row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.badge-row img { max-height: 64px; width: auto; }

/* Un element de grille a « min-width: auto » par defaut : sans cette remise a
   zero, un tableau a min-width ne peut pas retrecir et fait deborder la page
   (cas releve : fiche Programme Grande Ecole a 375px). */
.two-col > *, .grid > * { min-width: 0; }
.table-wrap { overflow-x: auto; min-width: 0; max-width: 100%; }
table { border-collapse: collapse; width: 100%; min-width: 480px; }
th, td { text-align: left; padding: .8em 1em; border-bottom: 1px solid var(--color-border); font-size: .92rem; }
th { font-family: var(--font-heading); font-weight: 900; color: var(--color-blue); }

.video-frame { position: relative; aspect-ratio: 16/9; background: var(--color-black); }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Facade de lecture : la vignette est hebergee ici et le lecteur YouTube n'est
   insere qu'au clic. Le site ne fait donc aucune requete vers un tiers tant que
   le visiteur n'a pas demande la video. */
.video-facade { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; display: block; }
.video-facade img { width: 100%; height: 100%; object-fit: cover; }
.video-facade__play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 4.5rem; height: 4.5rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-blue);
  border: 3px solid var(--color-white);
  border-radius: 50%;
  transition: background var(--transition), transform var(--transition);
}
.video-facade__play svg { width: 2rem; height: 2rem; fill: var(--color-white); stroke: none; }
.video-facade:hover .video-facade__play,
.video-facade:focus-visible .video-facade__play { background: var(--color-yellow); transform: translate(-50%, -50%) scale(1.08); }
.video-facade:hover .video-facade__play svg,
.video-facade:focus-visible .video-facade__play svg { fill: var(--color-blue); }

@media (max-width: 900px) {
  .promo { flex-direction: column; align-items: flex-start; }
}

/* ---------- 22. Section « Bienvenue » : lien sous le titre, onglets, cartes de parcours ---------- */
/* Le lien "Tous nos programmes" est colle sous le titre (pas a droite comme un
   section-head--split classique), et le paragraphe qui suit occupe toute la
   largeur du conteneur, conformement a la maquette. */
.lien-sous-titre { margin: var(--space-3) 0 var(--space-4); }
.texte-pleine-largeur { max-width: none; margin-bottom: var(--space-5); }

/* Onglets Etudiant / Professionnel / Entreprise : centres, utilisables au
   clavier (fleches, Home, End) via le script en bas de page. */
.onglets__liste {
  display: flex;
  justify-content: center;
  gap: var(--space-5);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-5);
}
.onglets__onglet {
  padding: .9em .1em;
  margin-bottom: -1px;
  font-weight: 700;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text-muted);
  border-bottom: 3px solid transparent;
}
.onglets__onglet[aria-selected="true"] { color: var(--color-blue); border-bottom-color: var(--color-blue); }
.onglets__onglet:hover, .onglets__onglet:focus-visible { color: var(--color-blue); }
@media (max-width: 620px) { .onglets__liste { gap: var(--space-3); } }

/* Cartes de parcours : la carte entiere est le lien (pas de fleche visible,
   contrairement a .carte-lien), fond bleu ou gris clair en alternance, badge
   diplome cale en bas par le flex:1 de la liste. */
.carte-parcours {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--color-blue);
  color: var(--color-white);
  padding: var(--space-4);
  min-height: 260px;
  transition: box-shadow var(--transition), transform var(--transition);
}
.carte-parcours:hover, .carte-parcours:focus-visible { box-shadow: var(--shadow-card); transform: translateY(-3px); }
.carte-parcours h3 { color: inherit; }
.carte-parcours__niveau {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-yellow);
}
.carte-parcours ul { flex: 1; font-size: .88rem; display: flex; flex-direction: column; gap: .4em; margin: 0; }
.carte-parcours li { position: relative; padding-left: 1.2em; }
.carte-parcours li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: .55em;
  height: .55em;
  background: var(--color-yellow);
  transform: skewX(-18deg);
}
.carte-parcours__diplome { margin-top: auto; display: flex; }
.carte-parcours__diplome img { height: 56px; width: auto; max-width: 100%; }

.carte-parcours--claire { background: var(--color-gray); color: var(--color-blue); }
.carte-parcours--claire .carte-parcours__niveau { color: var(--color-blue); }
.carte-parcours--claire li::before { background: var(--color-blue); }

/* Cartes simplifiees (onglets Professionnel / Entreprise) : ni liste a puces,
   ni pictogramme, le contenu reel ne le permettant pas (voir rapport). */
.carte-parcours--simple { min-height: 140px; justify-content: space-between; }
.carte-parcours__plus { display: inline-flex; align-items: center; gap: .5em; font-weight: 700; font-size: .85rem; color: var(--color-yellow); }
.carte-parcours__plus svg { width: 1.1em; height: 1.1em; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.carte-parcours--claire .carte-parcours__plus { color: var(--color-blue); }

/* ---------- 23. Carte evenement ---------- */
/* Carte etroite, environ un quart du conteneur, alignee a gauche : photo en
   fond, bouton « S'inscrire » en haut a droite, bandeau bleu en bas a gauche
   sur deux lignes (nom puis date), fleche blanche en bas a droite. */
.carte-evenement { max-width: 320px; }
.carte-evenement__lien { position: relative; display: block; overflow: hidden; }
.carte-evenement__lien img { width: 100%; height: auto; display: block; }
.carte-evenement__badge {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  background: rgba(38, 31, 179, .55);
  border: 1px solid var(--color-white);
  color: var(--color-white);
  font-weight: 700;
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .5em .9em;
}
.carte-evenement__info { position: absolute; left: 0; bottom: 0; display: flex; flex-direction: column; }
.carte-evenement__nom, .carte-evenement__date {
  background: var(--color-blue);
  color: var(--color-white);
  font-weight: 700;
  padding: .35em .8em;
  font-size: .85rem;
  align-self: flex-start;
}
.carte-evenement__fleche {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  color: var(--color-white);
  display: inline-flex;
}
.carte-evenement__fleche svg { width: 1.5em; height: 1.5em; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.carte-evenement__lien:hover .carte-evenement__fleche,
.carte-evenement__lien:focus-visible .carte-evenement__fleche { transform: translateX(3px); }

/* ---------- 24. Rangee d'actualites en defilement horizontal ---------- */
/* Defilement natif (overflow-x + scroll-snap), sans bibliotheque : les cartes
   etant des <a>, la tabulation les rend joignables au clavier et le
   navigateur fait defiler leur conteneur automatiquement ; la molette (Maj +
   molette ou pave tactile) fonctionne nativement sur un overflow horizontal.
   La barre de defilement est restylee en jaune sur les navigateurs qui le
   permettent (Chrome/Edge/Safari via ::-webkit-scrollbar, Firefox via
   scrollbar-color). */
.defilement-actus {
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: var(--space-3);
  scrollbar-width: thin;
  scrollbar-color: var(--color-yellow) var(--color-gray);
}
.defilement-actus__rangee { display: flex; gap: var(--space-4); }
.defilement-actus::-webkit-scrollbar { height: 6px; }
.defilement-actus::-webkit-scrollbar-track { background: var(--color-gray); }
.defilement-actus::-webkit-scrollbar-thumb { background: var(--color-yellow); border-radius: 3px; }

.carte-actualite {
  position: relative;
  flex: 0 0 220px;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  display: block;
  scroll-snap-align: start;
}
.carte-actualite img { width: 100%; height: 100%; object-fit: cover; }
.carte-actualite::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .6) 100%);
}
.carte-actualite__titre {
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: var(--space-4);
  z-index: 1;
  color: var(--color-white);
  font-weight: 700;
  font-size: .92rem;
  line-height: 1.3;
}
.carte-actualite__fleche {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 1;
  color: var(--color-white);
  display: inline-flex;
}
.carte-actualite__fleche svg { width: 1.3em; height: 1.3em; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.carte-actualite:hover .carte-actualite__fleche,
.carte-actualite:focus-visible .carte-actualite__fleche { transform: translateX(3px); }

/* Variante blanche du lien fleche, pour un fond bleu plein (section « EDC en
   video »), sur le meme principe que .cta-outline--on-blue. */
.link-arrow--sur-bleu { color: var(--color-white); }
.link-arrow--sur-bleu:hover, .link-arrow--sur-bleu:focus-visible { border-bottom-color: var(--color-white); }

/* ---------- 25. Retours de l'ecole du 23 septembre 2026 ----------
   Place en fin de feuille pour primer sur les sections 8 a 24.
   Document « Modifications site » : sources/retours-2026-09-23/. */

/* Boutons arrondis a 5px, partout. */
.cta { border-radius: 5px; }

/* Cartes de parcours : arrondi 5px, puces rondes blanches, niveau en blanc,
   « En savoir plus » aligne a droite, badge du diplome a gauche. */
.carte-parcours { border-radius: 5px; }
.carte-parcours__niveau { color: var(--color-white); }
.carte-parcours li::before {
  top: .45em;
  width: .4em;
  height: .4em;
  border-radius: 50%;
  background: var(--color-white);
  transform: none;
}
.carte-parcours--claire li::before { background: var(--color-blue); }
.carte-parcours__pied { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); }
.carte-parcours__pied .carte-parcours__diplome { margin-top: 0; }
.carte-parcours__plus { margin-left: auto; }
.carte-parcours--simple .carte-parcours__plus { align-self: flex-end; }

/* Carte evenement : bouton « S'inscrire » sur fond transparent. */
.carte-evenement__badge { background: transparent; }

/* Accreditations : deroule continu, en pause au survol, au focus, sur demande
   (bouton) et quand le visiteur a demande a limiter les animations. */
.defile-labels { position: relative; overflow: hidden; padding-bottom: 2.75rem; } /* place du bouton pause, sous les logos */
.defile-labels__piste { display: flex; width: max-content; animation: defile-labels 40s linear infinite; }
.defile-labels .rangee-labels { flex-wrap: nowrap; padding-right: var(--space-6); }
.defile-labels:hover .defile-labels__piste,
.defile-labels:focus-within .defile-labels__piste,
.defile-labels.est-en-pause .defile-labels__piste { animation-play-state: paused; }
@keyframes defile-labels { to { transform: translateX(-50%); } }
.defile-labels__pause {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  border: 1px solid var(--color-blue);
  border-radius: 5px;
  color: var(--color-blue);
}
.defile-labels__pause svg { width: 1rem; height: 1rem; stroke: currentColor; stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.defile-labels__icone-lecture { display: none; fill: currentColor; }
.defile-labels.est-en-pause .defile-labels__icone-pause { display: none; }
.defile-labels.est-en-pause .defile-labels__icone-lecture { display: inline; }
@media (prefers-reduced-motion: reduce) {
  .defile-labels__piste { animation: none; width: auto; }
  .defile-labels .rangee-labels { flex-wrap: wrap; padding-right: 0; }
  .defile-labels .rangee-labels[aria-hidden="true"], .defile-labels__pause { display: none; }
}

/* Pourquoi rejoindre : cartes bleues, blanches au survol. */
.carte-lien { background: var(--color-blue); color: var(--color-white); }
.carte-lien h3, .carte-lien p, .carte-lien li { color: var(--color-white); }
.carte-lien li::before { background: var(--color-white); }
.carte-lien:hover, .carte-lien:focus-visible { background: var(--color-white); color: var(--color-blue); }
.carte-lien:hover h3, .carte-lien:hover p, .carte-lien:hover li,
.carte-lien:focus-visible h3, .carte-lien:focus-visible p, .carte-lien:focus-visible li { color: var(--color-blue); }
.carte-lien:hover li::before, .carte-lien:focus-visible li::before { background: var(--color-blue); }

/* Boutons a filet sur fond gris : fond blanc. */
.section--gray .cta-outline { background: var(--color-white); }
.section--gray .cta-outline:hover, .section--gray .cta-outline:focus-visible { background: var(--color-blue); }

/* Procedure d'admission : les trois contacts sur une rangee, les trois
   procedures sur la suivante. */
.bloc-admission { grid-template-columns: 1fr; max-width: none; }
.bloc-admission__colonne { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
@media (max-width: 900px) { .bloc-admission__colonne { grid-template-columns: 1fr; } }

/* Blocs a oblique : la photo va jusqu'au bord droit de la fenetre, sans laisser
   de bande du fond a droite. */
@media (min-width: 901px) {
  .bloc-oblique__image {
    margin-right: calc(-1 * max(var(--container-pad), (100vw - var(--container-max)) / 2 + var(--container-pad)));
  }
}

/* Barre de defilement des actualites : bleue quand on la fait defiler. */
.defilement-actus.est-en-mouvement { scrollbar-color: var(--color-blue) var(--color-gray); }
.defilement-actus.est-en-mouvement::-webkit-scrollbar-thumb,
.defilement-actus::-webkit-scrollbar-thumb:active { background: var(--color-blue); }

/* Pictogrammes des valeurs : fichiers fournis par l'ecole (Streamline). */
img.valeur__picto { display: block; width: 3rem; height: 3rem; }

/* Pictogrammes Streamline fournis par l'ecole : le dessin occupe toute sa boite,
   la ou les pictogrammes traces a la main gardent une marge ; on les ramene a
   la taille visible de leurs voisins, comme sur la maquette. */
img.picto { width: 1.65rem; height: 1.65rem; margin: .375rem; }
.carte-bleue img.picto { width: 2.15rem; height: 2.15rem; margin: .425rem; }
/* Cartes bleues de la fiche : coins arrondis, comme sur la maquette et les autres cartes. */
.carte-bleue { border-radius: 5px; }

/* ---------- 26. Retours de l'ecole du 23 septembre au soir ----------
   Document « Modifications page programme » : sources/retours-2026-09-23-soir/. */

/* Pictogrammes Streamline fournis : repere de fiche jaune directement sur la
   banniere bleue (plus de pastille), pictogramme bleu dans les cartes blanches. */
.banner__fact img.icone-repere { width: 1.9em; height: 1.9em; flex: none; }
.card__tag img.icone-carte { width: 2.25rem; height: 2.25rem; display: block; }
.card__tag:has(img.icone-carte) { background: transparent; padding: 0; }

/* Les titres en Montserrat ne sont jamais en capitales. */
.eyebrow, .mega__group-title, .tile__level, .carte-parcours__niveau { text-transform: none; letter-spacing: 0; }

/* Formulaire colle : s'il ne tient pas en entier sous l'en-tete, il defile avec
   la page (classe posee par site.js), sinon son bouton serait inatteignable. */
.formulaire-maquette.est-trop-haut { position: static; }

/* Justifier tous les textes de la fiche, hors elements centres par dessin. */
.fiche-programme :is(p, li):not(.carte-bleue *, .centre, .equipe *, .chiffre *, .reperes *, .formulaire-maquette *, nav *, .faq-grille__appel *, .hero-programme__accroche) { text-align: justify; }
@media (max-width: 700px) {
  .fiche-programme :is(p, li):not(.centre) { text-align: left; }
}