/* Laocoon. Règles tirées du design system Claude Design « Laocoon Design System »
   (readme, tokens/, components/site/) : noir et blanc, jaune au survol seulement,
   Montserrat, angles vifs, fondu unique de 0,5 s. */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/polices/montserrat-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/polices/montserrat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* GFS Didot : pour la devise grecque uniquement (charte). */
@font-face {
  font-family: "GFS Didot";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/polices/gfs-didot-grec.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

:root {
  --lc-noir: #000000;
  --lc-encre: #111110;
  --lc-blanc: #FFFFFF;
  --lc-gris-surtitre: #6E6E68;
  --lc-gris-sur-noir: #D6D6D0;
  --lc-jaune: #FFE600;

  --police: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --approche-surtitre: 0.32em;
  --approche-numero: 0.06em;

  --duree-fondu: 0.5s;
  --entree-deplacement: 24px;
  --entree-duree: 0.6s;
  --courbe-douce: cubic-bezier(0.22, 1, 0.36, 1);

  --marge: 40px;

  /* Ton clair. Le sceau fait basculer vers le ton noir. */
  --fond: var(--lc-blanc);
  --encre: var(--lc-encre);
  --secondaire: var(--lc-gris-surtitre);
}
:root[data-ton="noir"] {
  --fond: var(--lc-noir);
  --encre: var(--lc-blanc);
  --secondaire: var(--lc-gris-sur-noir);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html.menu-ouvert { overflow: hidden; }

body {
  margin: 0;
  font-family: var(--police);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  font-variant-numeric: lining-nums;
  background: var(--fond);
  color: var(--encre);
  transition: background-color var(--duree-fondu), color var(--duree-fondu);
}

a { color: inherit; text-underline-offset: 4px; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.hors-ecran {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Surtitre : capitales espacées, gris. */
.surtitre {
  margin: 0;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: var(--approche-surtitre);
  text-transform: uppercase;
  color: var(--secondaire);
  transition: color var(--duree-fondu);
}

.filet { width: 62px; height: 1px; flex: none; background: var(--encre); transition: background-color var(--duree-fondu); }

/* Bouton menu : cadre 1 px, angles vifs, jaune au survol. */
.bouton-menu {
  min-height: 44px;
  padding: 12px 12px 12px 16px;
  border: 1px solid var(--encre);
  border-radius: 0;
  background: transparent;
  color: var(--encre);
  font: inherit;
  font-weight: 500;
  font-size: 11px;
  line-height: 1;
  letter-spacing: var(--approche-surtitre);
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--duree-fondu), color var(--duree-fondu), border-color var(--duree-fondu);
}
.bouton-menu--sur-blanc { border-color: var(--lc-encre); color: var(--lc-encre); }
.bouton-menu:hover, .bouton-menu:focus-visible {
  background: var(--lc-jaune);
  border-color: var(--lc-encre);
  color: var(--lc-encre);
}

/* Logotype : tête dans son disque + nom en capitales. La tête est le disque
   central du sceau, recadré. */
.logotype {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--encre);
  text-decoration: none;
  transition: color var(--duree-fondu);
}
.logotype__tete {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  background: url("/assets/tete-sombre.svg?v=1f48a15") center / cover no-repeat;
}
:root[data-ton="noir"] .logotype:not(.logotype--menu) .logotype__tete { background: url("/assets/sceau-clair.svg?v=1f48a15") center / 201.5% no-repeat; }
.logotype__nom {
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.logotype--menu { color: var(--lc-encre); }
.logotype--menu .logotype__tete { width: 28px; height: 28px; }

/* En-tête d'accueil : sceau centré, accroche, filet. */
/* Il reste en place pendant le défilement : son contenu monte moins vite que
   la page, la suite remonte par-dessus et il s'efface à mesure (site.js). */
.entete {
  position: sticky;
  top: 0;
  z-index: 0;
  min-height: calc(100vh - 64px);
  min-height: calc(100svh - 64px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 120px var(--marge);
}
.entete__menu { position: absolute; right: var(--marge); top: 32px; }

.sceau {
  position: relative;
  width: clamp(180px, 44vw, 280px);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
/* L'anneau des deux mots tourne autour de la tête au défilement (site.js). */
.sceau__anneau { position: absolute; inset: 0; will-change: transform; }
/* Le contenu de l'en-tête monte moins vite que la page (site.js). */
.entete [data-vitesse] { will-change: transform; }
.entete--passee { visibility: hidden; }
.suite, .pied { position: relative; z-index: 1; background: var(--fond); transition: background-color var(--duree-fondu); }
.sceau__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity var(--duree-fondu);
}
.sceau__image--clair { opacity: 0; }
:root[data-ton="noir"] .sceau__image--sombre { opacity: 0; }
:root[data-ton="noir"] .sceau__image--clair { opacity: 1; }

.accroche {
  margin: 0;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.3;
  text-align: center;
  text-wrap: balance;
}
/* En noir, l'accroche passe au grec : les deux textes occupent la même place
   et se fondent l'un dans l'autre. */
.accroche { display: grid; justify-items: center; align-items: center; }
.accroche > span { grid-area: 1 / 1; transition: opacity var(--duree-fondu); }
.accroche__grec { font-family: "GFS Didot", serif; font-weight: 400; font-size: 26px; opacity: 0; }
:root[data-ton="noir"] .accroche__francais { opacity: 0; }
:root[data-ton="noir"] .accroche__grec { opacity: 1; }

.entete__mots { margin-top: -12px; text-align: center; line-height: 1.8; }
.entete__public { margin: -12px 0 0; font-size: 15px; line-height: 1.7; text-align: center; text-wrap: balance; color: var(--secondaire); transition: color var(--duree-fondu); }

/* Barre fixe, visible une fois l'en-tête dépassé. */
.barre {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 40;
  height: 72px;
  padding: 0 var(--marge);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--fond);
  color: var(--encre);
  border-bottom: 1px solid var(--encre);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duree-fondu), background-color var(--duree-fondu), border-color var(--duree-fondu);
}
.barre--visible { opacity: 1; pointer-events: auto; }

/* Métiers. */
.metiers {
  max-width: 1040px;
  margin: 0 auto;
  padding: 40px var(--marge) 120px;
}
.metiers .surtitre { margin-bottom: 28px; }

.metier {
  display: grid;
  grid-template-columns: minmax(48px, auto) 1fr;
  column-gap: 24px;
  align-items: baseline;
  padding: 40px 16px 48px;
  border-bottom: 1px solid var(--encre);
  scroll-margin-top: 72px;
  transition: border-color var(--duree-fondu);
}
/* Le premier métier n'a pas de filet au-dessus : le petit filet du titre suffit (JB, 26/10/2026). */
.metier__numero {
  font-weight: 500;
  font-size: 15px;
  letter-spacing: var(--approche-numero);
}
.metier__titre {
  margin: 0 0 24px;
  font-weight: 600;
  font-size: 32px;
  line-height: 1.1;
}
.metier__corps p { max-width: 62ch; margin: 0 0 12px; }
.metier__corps p:last-child { margin-bottom: 0; }
.metier__corps .metier__chapo {
  margin-bottom: 20px;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.4;
  text-wrap: balance;
}

/* Manifeste, sur l'accueil, avant les métiers. */
.manifeste {
  max-width: 1040px;
  margin: 0 auto;
  padding: 24px var(--marge) 96px;
}
.manifeste__texte { margin-top: 28px; padding-left: 16px; }
.manifeste__texte p { max-width: 58ch; margin: 0 0 16px; font-size: 18px; line-height: 1.6; }
.manifeste__texte .manifeste__ouverture {
  max-width: 24ch;
  margin-bottom: 32px;
  font-weight: 600;
  font-size: 32px;
  line-height: 1.2;
  text-wrap: balance;
}
.manifeste mark { background: var(--lc-jaune); color: var(--lc-encre); padding: 0 4px; font-size: 16px; }

/* Lignes de liste cliquables : aplat jaune au survol. */
.ligne {
  display: grid;
  grid-template-columns: minmax(48px, auto) 1fr;
  column-gap: 24px;
  align-items: baseline;
  padding: 22px 16px 24px;
  border-bottom: 1px solid var(--encre);
  color: var(--encre);
  text-decoration: none;
  transition: background-color var(--duree-fondu), color var(--duree-fondu), border-color var(--duree-fondu);
}
.ligne:first-child { border-top: 1px solid var(--encre); }
.ligne:hover, .ligne:focus-visible { background: var(--lc-jaune); color: var(--lc-encre); }
.ligne__numero { font-weight: 500; font-size: 15px; letter-spacing: var(--approche-numero); }
.ligne__corps { display: flex; flex-direction: column; gap: 8px; }
.ligne__nom { font-weight: 600; font-size: 32px; line-height: 1.1; }
.ligne__chapo { font-size: 16px; line-height: 1.5; }

/* Invitation à un premier échange. */
.echange { margin-top: 96px; padding-top: 40px; border-top: 1px solid var(--encre); transition: border-color var(--duree-fondu); }
.echange--accueil { max-width: 1040px; margin: 0 auto; padding: 40px var(--marge) 120px; border-top: 0; }
.echange .echange__texte { max-width: 26ch; margin: 20px 0 28px; font-weight: 600; font-size: 30px; line-height: 1.2; text-wrap: balance; }
.echange .echange__liens { display: flex; flex-wrap: wrap; gap: 8px 40px; max-width: none; margin: 0; font-size: 18px; }
.metiers { padding-bottom: 72px; }

/* Pied. */
.pied {
  padding: 0 max(var(--marge), calc((100% - 1040px) / 2 + var(--marge))) 48px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 40px;
  font-size: 15px;
}
.pied a { text-decoration: none; }
.pied a:hover, .pied a:focus-visible { text-decoration: underline; }
.pied__fin { margin-left: auto; }

/* Menu plein écran : toujours sur fond blanc. */
.menu {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  padding: 28px var(--marge) 36px;
  overflow-y: auto;
  background: var(--lc-blanc);
  color: var(--lc-encre);
  opacity: 0;
  transition: opacity var(--duree-fondu) ease;
}
.menu[hidden] { display: none; }
.menu--ouvert { opacity: 1; }
.menu__haut { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.menu__entrees { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 48px 0; }
.menu__contact { display: flex; flex-wrap: wrap; gap: 8px 40px; font-size: 15px; }
.menu__contact a { text-decoration: none; }
.menu__contact a:hover, .menu__contact a:focus-visible { text-decoration: underline; }

.entree {
  display: grid;
  grid-template-columns: minmax(48px, auto) 1fr;
  column-gap: 24px;
  align-items: baseline;
  padding: clamp(10px, min(2.6vw, 2.4vh), 31px) 16px;
  border-bottom: 1px solid var(--lc-encre);
  color: var(--lc-encre);
  text-decoration: none;
  opacity: 0;
  transform: translateY(var(--entree-deplacement));
  transition: background-color var(--duree-fondu);
}
.entree:first-child { border-top: 1px solid var(--lc-encre); }
.entree:hover, .entree:focus-visible { background: var(--lc-jaune); }
.entree__numero {
  font-weight: 500;
  font-size: clamp(12px, min(2.2vw, 2.8vh), 26px);
  letter-spacing: var(--approche-numero);
}
.entree__nom { font-weight: 600; font-size: clamp(26px, min(4.8vw, 6vh), 56px); line-height: 1.1; }

/* Ouverture : les entrées montent l'une après l'autre. Fermeture : fondu simple,
   les entrées restent en place. */
.menu--ouvert .entree {
  opacity: 1;
  transform: none;
  transition: opacity var(--entree-duree) var(--courbe-douce), transform var(--entree-duree) var(--courbe-douce), background-color var(--duree-fondu);
}
.menu--ouvert .entree:nth-child(1) { transition-delay: 150ms, 150ms, 0s; }
.menu--ouvert .entree:nth-child(2) { transition-delay: 220ms, 220ms, 0s; }
.menu--ouvert .entree:nth-child(3) { transition-delay: 290ms, 290ms, 0s; }
.menu--ouvert .entree:nth-child(4) { transition-delay: 360ms, 360ms, 0s; }
.menu--ouvert .entree:nth-child(5) { transition-delay: 430ms, 430ms, 0s; }
.menu--ouvert .entree:nth-child(6) { transition-delay: 500ms, 500ms, 0s; }
.menu--sortie .entree { opacity: 1; transform: none; transition: none; }

/* Pages de texte (mentions légales, page introuvable). */
.page-barre {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--fond);
  height: 72px;
  padding: 0 var(--marge);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--encre);
}
.page-barre a.retour {
  font-weight: 500;
  font-size: 11px;
  letter-spacing: var(--approche-surtitre);
  text-transform: uppercase;
  text-decoration: none;
}
.page-barre a.retour:hover, .page-barre a.retour:focus-visible { text-decoration: underline; }
.page {
  max-width: 1040px;
  margin: 0 auto;
  padding: 72px var(--marge) 120px;
}
.page__titre { max-width: 22ch; margin: 16px 0 24px; font-weight: 600; font-size: 36px; line-height: 1.1; text-wrap: balance; }
.page .filet { width: 83px; margin-bottom: 48px; }
.page h2 { margin: 40px 0 12px; font-weight: 600; font-size: 20px; line-height: 1.3; }
.page p { max-width: 62ch; margin: 0 0 12px; }
.page .page__chapo { max-width: 62ch; margin-bottom: 56px; font-weight: 500; font-size: 20px; line-height: 1.4; }
.page .page__attente { margin-top: 40px; }

/* Études de cas, équipe : même grille que les métiers. */
.cas {
  display: grid;
  grid-template-columns: minmax(48px, auto) 1fr;
  column-gap: 24px;
  align-items: baseline;
  padding: 40px 16px 48px;
  border-bottom: 1px solid var(--encre);
}
.cas:first-of-type { border-top: 1px solid var(--encre); }
.cas__numero { font-weight: 500; font-size: 15px; letter-spacing: var(--approche-numero); }
.page .cas__titre { margin: 12px 0 28px; font-weight: 600; font-size: 28px; line-height: 1.15; text-wrap: balance; }
.page .cas__rubrique {
  margin: 24px 0 8px;
  font-weight: 500;
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: var(--approche-surtitre);
  text-transform: uppercase;
  color: var(--secondaire);
}
.page .cas__resultat { margin: 28px 0 4px; font-weight: 600; font-size: 22px; line-height: 1.3; }
.page .cas__reserve { margin-top: 16px; font-size: 14px; color: var(--secondaire); }

.page .metier__titre { margin: 0 0 24px; font-size: 32px; line-height: 1.1; }
.page .metier { scroll-margin-top: 96px; }

/* Équipe : portrait en noir et blanc, puis le parcours. */
.personne {
  display: grid;
  grid-template-columns: minmax(200px, 320px) 1fr;
  column-gap: 48px;
  align-items: start;
  padding: 48px 0 56px;
  border-bottom: 1px solid var(--encre);
}
.personne:first-of-type { border-top: 1px solid var(--encre); }
.personne__photo { display: block; width: 100%; height: auto; filter: grayscale(1); }
.page .personne .cas__titre { margin-top: 0; }
.page .personne .cas__rubrique:first-of-type { margin-top: 0; }
.personne__liste { list-style: none; max-width: 56ch; margin: 0; padding: 0; }
.personne__liste li { margin-bottom: 6px; }

/* Page « pourquoi Laocoon » : un récit, en texte courant plus grand. */
.recit p { font-size: 18px; line-height: 1.65; margin-bottom: 18px; }
.recit .surtitre { margin-bottom: 0; font-size: 11px; line-height: 1.6; }
.recit__citation { margin: 36px 0; padding: 0; }
.page .recit__citation p { max-width: 20em; margin: 0; font-weight: 600; font-size: 30px; line-height: 1.25; text-wrap: balance; }
.page .recit__chute { margin-top: 36px; font-weight: 600; font-size: 30px; line-height: 1.2; }
.page .recit__source { margin-top: 56px; font-size: 14px; color: var(--secondaire); }
.recit__source cite { font-style: normal; }

.reste { margin-top: 72px; }
.page h2.surtitre { margin: 0; font-weight: 500; font-size: 11px; line-height: 1.6; }
.reste__liste { list-style: none; margin: 28px 0 0; padding: 0; }
.reste__liste li {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 3fr;
  column-gap: 24px;
  align-items: baseline;
  padding: 18px 16px;
  border-bottom: 1px solid var(--encre);
}
.reste__liste li:first-child { border-top: 1px solid var(--encre); }
.reste__liste strong { font-weight: 600; font-size: 22px; line-height: 1.2; }
.cloture { margin-top: 72px; }
.page .cloture .cas__titre { margin-top: 0; }

.page mark { background: var(--lc-jaune); color: var(--lc-encre); padding: 0 4px; }

/* Page formation : titre, sous-titre, chapo face à l'illustration, objectifs
   numérotés, cible. L'illustration est un disque, comme la tête du sceau. */
.page .formation__soustitre { max-width: 40ch; margin: -8px 0 24px; font-weight: 500; font-size: 20px; line-height: 1.4; color: var(--secondaire); transition: color var(--duree-fondu); }
.formation__ouverture {
  display: grid;
  grid-template-columns: 1fr clamp(180px, 24vw, 280px);
  column-gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.page .formation__ouverture .page__chapo { margin-bottom: 0; }
/* L'illustration commence à la hauteur du titre. */
.formation__image { display: block; width: 100%; height: auto; aspect-ratio: 1; margin-top: 16px; border-radius: 50%; }
.formation__bloc { margin-top: 72px; }
/* Liste des formations : un groupe par domaine. Une ligne sans page n'est pas un lien et ne réagit pas au survol. */
.formations__groupe { margin-bottom: 72px; }
.page .formations__groupe h2.surtitre { margin: 0 0 28px; }
.ligne--fixe:hover { background: none; color: var(--encre); }
.page .ligne__chapo { max-width: 62ch; }
.page .formation__retour { margin: 72px 0 0; font-weight: 500; font-size: 11px; letter-spacing: var(--approche-surtitre); text-transform: uppercase; }
.formation__retour a { display: inline-block; padding: 14px 0; }
.page .formation__amorce { margin: 28px 0 0; padding: 0 16px 18px; }
.objectifs { list-style: none; margin: 0; padding: 0; }
.objectifs li {
  display: grid;
  grid-template-columns: minmax(48px, auto) 1fr;
  column-gap: 24px;
  align-items: baseline;
  padding: 18px 16px 20px;
  border-bottom: 1px solid var(--encre);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.3;
  transition: border-color var(--duree-fondu);
}
.objectifs li:first-child { border-top: 1px solid var(--encre); }
.objectifs__numero { font-weight: 500; font-size: 15px; letter-spacing: var(--approche-numero); }
.page .formation__cible { max-width: 40ch; margin: 28px 0 0; padding-left: 16px; font-weight: 500; font-size: 20px; line-height: 1.4; }

@media (max-width: 640px) {
  :root { --marge: 20px; }
  .entete__menu { top: 20px; }
  .metier { grid-template-columns: 1fr; row-gap: 12px; padding: 32px 0 40px; }
  .metier__titre { font-size: 28px; }
  .metier__corps .metier__chapo { font-size: 18px; }
  .entree { padding-left: 0; padding-right: 0; column-gap: 12px; grid-template-columns: minmax(32px, auto) 1fr; }
  .pied__fin { margin-left: 0; }
  .page { padding-top: 48px; }
  .page__titre { font-size: 30px; }
  .manifeste { padding-bottom: 64px; }
  .manifeste__texte { padding-left: 0; }
  .manifeste__texte .manifeste__ouverture { font-size: 26px; }
  .manifeste__texte p { font-size: 17px; }
  .ligne { grid-template-columns: 1fr; row-gap: 8px; padding-left: 0; padding-right: 0; }
  .ligne__nom { font-size: 26px; }
  .personne { grid-template-columns: 1fr; row-gap: 24px; padding: 32px 0 40px; }
  .personne__photo { max-width: 320px; }
  .cas { grid-template-columns: 1fr; row-gap: 12px; padding: 32px 0 40px; }
  .page .cas__titre { font-size: 24px; }
  .reste__liste li { grid-template-columns: 1fr; row-gap: 4px; padding: 16px 0; }
  .page .formation__amorce { padding-left: 0; padding-right: 0; }
  .objectifs li { grid-template-columns: 1fr; row-gap: 4px; padding: 16px 0; font-size: 19px; }
  .page .formation__cible { padding-left: 0; }
}

/* Corrections de l'audit du 07/10/2026. */
.surtitre a { text-decoration: none; }
.surtitre a:hover, .surtitre a:focus-visible { text-decoration: underline; }
/* Zones tactiles : 44 px de haut au moins sur les liens isolés. */
.logotype { padding: 9px 0; }
.pied a, .menu__contact a, .page-barre a.retour, .echange__liens a { display: inline-block; padding: 10px 0; }
/* Menu : la page où l'on est se reconnaît, sans jaune fixe. */
.entree[aria-current="page"] .entree__nom { text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 2px; }
/* Un seul filet entre le dernier métier et l'invitation à l'échange. */
.page .metier:last-of-type { border-bottom: 0; }
/* Liste des formations : les noms ne concurrencent plus le titre de la page. */
.formations__groupe .ligne__nom { font-size: 24px; line-height: 1.2; }
.formations__groupe .ligne { padding: 16px 16px 18px; }
/* Page de formation étroite : une colonne, l'illustration en tête. */
@media (max-width: 900px) {
  .formation__ouverture { grid-template-columns: 1fr; row-gap: 32px; }
  .formation__image { order: -1; max-width: 160px; margin: 0 0 8px; }
}
@media (max-width: 640px) {
  .formations__groupe .ligne__nom { font-size: 21px; }
  .formations__groupe .ligne { padding-left: 0; padding-right: 0; }
}
/* Pages de formation, arbitrages du 26/10/2026 : aiguillage sous la cible,
   modalités, programme par séquence, tête-à-tête, demande. */
.page .formation__aiguillage, .page .formation__paragraphe, .page .formation__lien { max-width: 62ch; margin: 20px 0 0; padding-left: 16px; }
.page .formation__lien { font-weight: 500; }
.page .formation__lien--page { margin: 0 0 72px; padding-left: 0; }
.formation__paragraphe strong { font-weight: 600; }
.modalites { margin: 28px 0 0; }
.modalites div {
  display: grid;
  grid-template-columns: 160px 1fr;
  column-gap: 24px;
  align-items: baseline;
  padding: 14px 16px 16px;
  border-bottom: 1px solid var(--encre);
  transition: border-color var(--duree-fondu);
}
.modalites div:first-child { border-top: 1px solid var(--encre); }
.modalites dt { font-weight: 500; font-size: 11px; letter-spacing: var(--approche-surtitre); text-transform: uppercase; }
.modalites dd { max-width: 62ch; margin: 0; }
.programme { list-style: none; margin: 28px 0 0; padding: 0; }
.programme li {
  display: grid;
  grid-template-columns: 160px 1fr;
  column-gap: 24px;
  align-items: baseline;
  padding: 18px 16px 20px;
  border-bottom: 1px solid var(--encre);
  transition: border-color var(--duree-fondu);
}
.programme li:first-child { border-top: 1px solid var(--encre); }
.programme__numero { font-weight: 500; font-size: 11px; letter-spacing: var(--approche-surtitre); text-transform: uppercase; }
.programme__corps { max-width: 62ch; }
.programme__titre { display: block; margin-bottom: 4px; font-weight: 600; font-size: 18px; }
.page .echange .echange__suite { margin: -12px 0 20px; }
.ligne__duree { display: block; margin-top: 6px; font-weight: 500; font-size: 13px; color: var(--secondaire); transition: color var(--duree-fondu); }
.ligne:hover .ligne__duree { color: inherit; }
.page .formations__note { max-width: 62ch; margin: 20px 0 0; padding-left: 16px; color: var(--secondaire); transition: color var(--duree-fondu); }
@media (max-width: 640px) {
  .page .formation__aiguillage, .page .formation__paragraphe, .page .formation__lien, .page .formations__note { padding-left: 0; }
  .modalites div, .programme li { grid-template-columns: 1fr; row-gap: 6px; padding-left: 0; padding-right: 0; }
}
/* Sommaire de la page des formations : quatre rubriques, un lien vers chacune.
   Les groupes s'arrêtent sous la barre fixe. */
.sommaire { display: grid; gap: 0; max-width: 62ch; margin: 28px 0 32px; border-top: 1px solid var(--encre); transition: border-color var(--duree-fondu); }
.sommaire__entree {
  display: grid;
  grid-template-columns: 88px 1fr;
  column-gap: 24px;
  align-items: baseline;
  padding: 12px 16px 14px;
  border-bottom: 1px solid var(--encre);
  text-decoration: none;
  transition: background-color var(--duree-fondu), color var(--duree-fondu), border-color var(--duree-fondu);
}
.sommaire__entree:hover, .sommaire__entree:focus-visible { background: var(--lc-jaune); color: var(--lc-noir); outline: none; }
.sommaire__numeros { font-weight: 500; font-size: 11px; letter-spacing: var(--approche-surtitre); text-transform: uppercase; }
.sommaire__nom { font-weight: 600; font-size: 18px; line-height: 1.3; }
.formations__groupe { scroll-margin-top: 96px; }
@media (max-width: 640px) {
  .sommaire__entree { padding-left: 0; padding-right: 0; }
}
/* Page équipe : les portraits, en noir et blanc, passent en couleur au survol (JB, 26/10/2026). */
.personne__photo { transition: filter var(--duree-fondu); }
.personne:hover .personne__photo, .personne:focus-within .personne__photo { filter: grayscale(0); }

/* Programme imprimé (PDF) : la fiche seule, sans menu ni appel. */
@media print {
  @page { size: A4; margin: 14mm 16mm; }
  html { font-size: 10px; }
  body { background: #FFFFFF; color: #000000; }
  .page-barre, .menu, .pied__fin, .echange, .formation__retour, .formation__lien, .sommaire, .page > .surtitre { display: none !important; }
  .page { padding: 0 !important; max-width: none; }
  .page__titre { font-size: 24px; margin: 0 0 6px; }
  .page .formation__soustitre { font-size: 12px; margin: 0 0 8px; }
  .filet { display: none; }
  .page .page__chapo { font-size: 11px; margin: 0; }
  .page p, .modalites dd, .programme__corps { font-size: 10px; line-height: 1.35; }
  .formation__ouverture { grid-template-columns: 1fr 80px !important; column-gap: 24px; row-gap: 0; }
  .formation__image { order: 0 !important; max-width: 80px !important; margin: 0 !important; }
  .page .formation__soustitre, .page .page__chapo { max-width: none; }
  .programme__titre { display: inline; margin: 0; font-size: 10.5px; }
  .programme__titre::after { content: ". "; }
  .formation__bloc { margin-top: 12px; break-inside: avoid; }
  .page .formation__amorce { margin: 6px 0 0; padding: 0 0 4px; font-size: 10px; }
  .objectifs li { padding: 3px 0; font-size: 10.5px; grid-template-columns: 24px 1fr; column-gap: 8px; }
  .objectifs__numero { font-size: 9px; }
  .page .formation__cible, .page .formation__aiguillage, .page .formation__paragraphe { margin: 4px 0 0; padding: 0; font-size: 10px; font-weight: 500; }
  .modalites, .programme { margin-top: 6px; }
  .modalites div, .programme li { padding: 3px 0; grid-template-columns: 90px 1fr; column-gap: 8px; }
  .modalites dt, .programme__numero { font-size: 7.5px; }
  .page h2.surtitre { font-size: 8px; }
  .pied { margin: 14px 0 0; padding: 8px 0 0; font-size: 9px; }
  .formations__groupe { margin-bottom: 14px; break-inside: avoid; }
  .formations__groupe .ligne { padding: 4px 0; }
  .formations__groupe .ligne__nom { font-size: 12px; }
  .ligne__chapo, .ligne__duree { font-size: 9.5px; }
  .page .formations__note { padding: 0; margin: 4px 0 0; font-size: 9.5px; }
}
/* Fenêtre basse (téléphone couché) : l'accroche reste visible sous le sceau. */
@media (max-height: 600px) {
  .entete { padding: 72px var(--marge) 24px; gap: 14px; }
  .sceau { width: clamp(96px, 36vh, 280px); }
  .entete__mots { margin-top: -6px; }
  .entete__public { margin-top: -6px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01s !important; transition-delay: 0s !important; }
}