/* ==========================================================
   Institut de droit des affaires : feuille de style
   Couleurs, fond et police se règlent dans le bloc :root.
   ========================================================== */

@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/eb-garamond-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400 800; font-display: swap; src: url("../fonts/eb-garamond-latin-wght-italic.woff2") format("woff2"); }

:root {
  --bordeaux: #5c001a;
  --bordeaux-clair: #6c0a25;
  --bordeaux-profond: #470013;
  --encre: #23161a;
  --gris: #625055;
  --ivoire: #fbf6ee;
  --ivoire-doux: rgba(251, 246, 238, 0.68);  /* texte secondaire sur fond bordeaux */
  --fond: #f5f5f2;          /* porcelaine : couleur de fond des pages */
  --fond-image: #e8e7e3;    /* teinte visible pendant le chargement des photos */
  --bord-champ: #8f8286;    /* contour des champs de formulaire (espace des anciens) */
  /* dégradé commun à la couverture, aux bandeaux et au bas de page */
  --degrade: radial-gradient(130% 110% at 12% 0%, var(--bordeaux-clair) 0%, var(--bordeaux) 48%, var(--bordeaux-profond) 100%);
  --police: "EB Garamond", Garamond, "Times New Roman", serif;
  --largeur: 78rem;
  --marge: clamp(1.25rem, 5.5vw, 4rem);
  --col-titre: 15rem;
  --gouttiere: clamp(2rem, 6vw, 6.5rem);
  /* hauteur de l'en-tête (mesurée par le script, valeurs de secours ici)
     et hauteur commune des bandeaux des pages intérieures */
  --h-entete: 7.6rem;
  --h-bandeau: clamp(25rem, 48vh, 29rem);
}
@media (max-width: 78em) { :root { --h-entete: 13.5rem; --h-bandeau: clamp(28rem, 52vh, 31rem); } }
@media (max-width: 52em) {
  :root { --h-entete: 7.6rem; --h-bandeau: clamp(23.5rem, 50vh, 26rem); }
  html:not(.js) { --h-entete: 17rem; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--fond); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  color: var(--encre);
  font-family: var(--police);
  font-size: 1.1875rem;
  line-height: 1.62;
  font-kerning: normal;
  font-feature-settings: "liga" 1, "kern" 1;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 72em) { body { font-size: 1.25rem; } }

img { display: block; max-width: 100%; height: auto; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.15; }
ul { margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; transition: color 0.25s, text-decoration-color 0.25s; }
a:hover { color: var(--bordeaux); }
.texte a, .lien {
  color: var(--bordeaux);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: rgba(92, 0, 26, 0.35);
}
.texte a:hover, .lien:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 1.5px solid var(--bordeaux); outline-offset: 4px; }
::selection { background: var(--bordeaux); color: var(--ivoire); }
.entete ::selection, .couverture ::selection, .tete-page ::selection, .pied ::selection { background: var(--ivoire); color: var(--bordeaux); }
.entete :focus-visible, .couverture :focus-visible, .tete-page :focus-visible, .pied :focus-visible { outline-color: var(--ivoire); }

.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.evitement {
  position: absolute; left: var(--marge); top: -5rem; z-index: 80;
  background: var(--ivoire); color: var(--bordeaux); padding: 0.5rem 1rem;
}
.evitement:focus { top: 1rem; }

/* ---------- Surfaces bordeaux : couverture, bandeaux, bas de page ----------
   Une lumière douce suit le curseur (variables réglées par effets.js). */
@property --lumiere { syntax: "<number>"; inherits: false; initial-value: 0; }
.couverture, .tete-page, .pied {
  --lx: 12%; --ly: 0%; --lumiere: 0;
  color: var(--ivoire);
  background:
    radial-gradient(circle 30rem at var(--lx) var(--ly), rgba(255, 232, 220, calc(0.11 * var(--lumiere))) 0%, rgba(255, 232, 220, 0) 100%),
    var(--degrade);
  transition: --lumiere 0.6s ease-out;
}

/* ---------- En-tête : posé sur la couverture ou sur le bandeau ---------- */
.entete { position: absolute; top: 0; left: 0; right: 0; z-index: 5; color: var(--ivoire); }
.entete-interieur {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 2rem var(--marge);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem 2rem;
}
.marque { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
.marque, .marque:hover { color: var(--ivoire); }
.marque img { width: 3.6rem; height: 3.6rem; }
.marque-texte { display: flex; flex-direction: column; line-height: 1.2; }
.marque-nom { font-size: 1.22rem; }
.marque-univ { font-size: 0.95rem; color: var(--ivoire-doux); }

.menu ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.3rem 1.55rem; }
.menu a { position: relative; display: inline-block; font-size: 1.04rem; padding: 0.2rem 0; color: var(--ivoire-doux); }
.menu a:hover, .menu a[aria-current="page"] { color: var(--ivoire); }
/* Repère de la page en cours : il glisse d'une entrée à l'autre au changement de page */
.repere { display: none; }
.menu a[aria-current="page"] .repere {
  display: block; position: absolute; left: 0; right: 0; bottom: -0.1rem;
  height: 1px; background: currentColor;
}
.menu-bouton { display: none; }

/* Page sans couverture ni bandeau : l'en-tête reprend sa place et garde un fond bordeaux */
body:not(:has(.tete-page, .couverture)) .entete { position: static; background: var(--degrade); }

/* Accueil : le nom de l'Institut est déjà le titre de la couverture */
.page-accueil .marque-texte {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.page-accueil .marque img { width: 4.6rem; height: 4.6rem; }

/* Écrans moyens : le menu passe sous le nom */
@media (max-width: 78em) {
  .entete-interieur { flex-wrap: wrap; }
  .menu { flex-basis: 100%; }
  .menu ul { justify-content: flex-start; }
}

/* Téléphone : menu plein écran */
@media (max-width: 52em) {
  .js .menu-bouton {
    display: inline-block; position: relative; z-index: 60;
    font: inherit; font-size: 1.1rem; letter-spacing: 0.02em;
    color: inherit; background: none; border: 0; padding: 0.5rem 0; cursor: pointer;
  }
  .js .menu { display: none; }
  .js .menu.ouvert {
    display: flex; align-items: center; justify-content: center;
    position: fixed; inset: 0; z-index: 50;
    background: var(--degrade);
  }
  .menu.ouvert ul { flex-direction: column; align-items: center; gap: 0.9rem; }
  .menu.ouvert a { font-size: 1.95rem; }
  .marque-nom { font-size: 1.12rem; }
}
.menu-ouvert, .menu-ouvert body { overflow: hidden; }
@media (max-width: 30em) {
  :root { --h-entete: 7rem; }
  .marque-univ { display: none; }
  .marque-nom { max-width: 9em; }
  .marque img { width: 3rem; height: 3rem; }
  .page-accueil .marque img { width: 3.8rem; height: 3.8rem; }
}

/* ---------- Couverture (accueil) : elle laisse voir le début du texte ---------- */
.couverture-interieur {
  max-width: var(--largeur);
  margin: 0 auto;
  min-height: 84vh;
  min-height: 84svh;
  padding: calc(var(--h-entete) + 1.5rem) var(--marge) clamp(2rem, 5vh, 3.25rem);
  display: flex; flex-direction: column; justify-content: flex-end;
}
@media (min-height: 70em) { .couverture-interieur { min-height: 54rem; } }
.couverture-titre {
  font-weight: 400;
  font-size: clamp(3.75rem, min(12.5vw, 16.5vh), 11rem);
  line-height: 0.92;
  letter-spacing: -0.015em;
  margin-bottom: clamp(2.5rem, 8vh, 5.5rem);
}
.couverture-titre span { display: block; }
.couverture-pied {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.3rem 2rem;
  font-size: 1.12rem;
  color: var(--ivoire-doux);
}
.couverture-pied p { margin: 0; }

/* Arrivée sur l'accueil : chaque ligne du titre monte de derrière sa ligne de base */
@media (prefers-reduced-motion: no-preference) {
  .couverture-titre span { animation: leve 1.15s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .couverture-titre span:nth-child(2) { animation-delay: 0.09s; }
  .couverture-titre span:nth-child(3) { animation-delay: 0.18s; }
  .couverture-pied { animation: apparition 1.2s 0.7s both; }
  /* inutile quand on arrive par une transition de page, qui anime déjà le titre */
  .transition-page .couverture-titre span, .transition-page .couverture-pied { animation: none; }
}
@keyframes leve {
  from { transform: translateY(100%); clip-path: inset(0 0 100% 0); }
  to { transform: translateY(0); clip-path: inset(-0.2em -0.2em -0.2em -0.2em); }
}
@keyframes apparition { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Bandeau des pages intérieures : même hauteur sur toutes les pages ---------- */
.tete-page {
  min-height: var(--h-bandeau);
  padding: calc(var(--h-entete) + 1.5rem) max(var(--marge), calc((100% - var(--largeur)) / 2 + var(--marge))) clamp(2.5rem, 6vh, 4rem);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.tete-page h1 {
  font-size: clamp(3rem, 8vw, 6.75rem);
  line-height: 0.98;
  letter-spacing: -0.012em;
}
/* Le sous-titre occupe toujours la place de deux lignes : le titre ne bouge pas d'une page à l'autre */
.tete-page-chapeau {
  max-width: 36rem;
  min-height: 2.9em;
  margin: 1.4rem 0 0;
  font-size: 1.4rem; line-height: 1.45;
  color: var(--ivoire-doux);
}
.tete-page h1:only-child { margin-bottom: calc(1.4rem + 1.4rem * 2.9); }
@media (max-width: 40em) {
  .tete-page-chapeau { font-size: 1.25rem; min-height: 4.35em; margin-top: 1.2rem; }
  .tete-page h1:only-child { margin-bottom: calc(1.2rem + 1.25rem * 4.35); }
}

/* ---------- Rangées : titre en marge, texte à droite ---------- */
.rangee {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: clamp(3rem, 8vh, 6rem) var(--marge);
  display: grid;
  grid-template-columns: minmax(0, var(--col-titre)) minmax(0, 1fr);
  column-gap: var(--gouttiere);
}
.couverture + .rangee { padding-top: clamp(3.5rem, 9vh, 6rem); }
.tete-page + .rangee { padding-top: clamp(4.5rem, 12vh, 8rem); }
.rangee-titre {
  align-self: start;
  position: sticky; top: 2.5rem;
  color: var(--bordeaux);
  font-size: 1.65rem; line-height: 1.2;
}
.rangee-contenu { max-width: 38rem; }
.rangee-contenu.large { max-width: 52rem; }
.rangee-contenu > :last-child { margin-bottom: 0; }
.mesure { max-width: 38rem; }

@media (max-width: 52em) {
  .rangee { grid-template-columns: minmax(0, 1fr); }
  .rangee-titre { position: static; margin-bottom: 1.5rem; }
}

.chapeau { font-size: 1.5rem; line-height: 1.5; }
.direction { font-size: 1.5rem; line-height: 1.45; }
.suite { margin-top: 2.25rem; }

/* Libellés : plus petits que le texte et en bordeaux, pour se distinguer du contenu */
.fiche dt, .annee h4, .intervenant-matiere {
  color: var(--bordeaux);
  font-size: 0.98rem;
  font-weight: 500;
  letter-spacing: 0.012em;
}

/* ---------- Fiche ---------- */
.fiche { margin: 2.25rem 0 0; display: grid; gap: 1.1rem; }
.fiche > div { display: grid; grid-template-columns: 12rem 1fr; gap: 0.1rem 2rem; align-items: baseline; }
.fiche dd { margin: 0; }
.rangee-contenu > .fiche:first-child { margin-top: 0; }
@media (max-width: 36em) { .fiche { gap: 1.25rem; } .fiche > div { grid-template-columns: 1fr; } }

/* ---------- Programme ---------- */
.annees { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3.5rem; }
@media (min-width: 64em) { .annees { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.5rem 5rem; } }
.annee h3 {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  font-size: 1.8rem; color: var(--encre);
  margin-bottom: 0.4rem;
}
.annee-total { font-size: 1.05rem; color: var(--gris); white-space: nowrap; }
.annee h4 { margin: 1.7rem 0 0.3rem; }
.matieres { list-style: none; }
.matieres li { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; line-height: 1.95; }
.heures { color: var(--gris); font-variant-numeric: tabular-nums; white-space: nowrap; }
.total { margin: 3.5rem 0 0; font-size: 1.4rem; }
.total .heures { color: var(--bordeaux); }

/* ---------- Intervenants ---------- */
.intervenants { list-style: none; display: grid; gap: 2.4rem; }
.intervenant { display: grid; grid-template-columns: 14rem 1fr; column-gap: 2rem; align-items: baseline; }
.intervenant p { margin: 0; }
.intervenant-matiere { grid-row: span 2; }
.intervenant-nom { font-size: 1.8rem; line-height: 1.25; }
.intervenant-nom a:hover { color: var(--bordeaux); }
.intervenant-qualite { margin-top: 0.2rem !important; font-size: 1.05rem; color: var(--gris); }
@media (max-width: 40em) {
  .intervenant { grid-template-columns: 1fr; }
  .intervenant-matiere { grid-row: auto; padding: 0 0 0.15rem; }
}

/* ---------- Logos des partenaires ----------
   Les logos se répartissent en quinconce sur toute la largeur.
   Largeur d'un logo : variable --largeur-logo (16rem par défaut). */
.rangee > .logos { grid-column: 1 / -1; }
.logos {
  list-style: none;
  margin-top: clamp(3rem, 9vh, 6rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 12rem;
  column-gap: var(--gouttiere);
}
.logo { display: flex; align-items: center; justify-content: center; }
.logo:nth-child(even) { transform: translateY(50%); }
.logos:has(> .logo:nth-child(even):last-child) { padding-bottom: 6rem; }
.logo img { width: var(--largeur-logo, 16rem); max-width: 100%; height: auto; }
.logo-linklaters { --largeur-logo: 19rem; }
.logo-sullivan { --largeur-logo: 33rem; }
.logo-darrois { --largeur-logo: 12rem; }
.logo-white { --largeur-logo: 12rem; }
.logo-paul { --largeur-logo: 17rem; }
@media (max-width: 40em) {
  .logos { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; row-gap: 3.5rem; }
  .logos:has(> .logo:nth-child(even):last-child) { padding-bottom: 0; }
  .logo:nth-child(even) { transform: none; justify-content: flex-end; }
  .logo:nth-child(odd) { justify-content: flex-start; }
  .logo img { width: calc(var(--largeur-logo, 16rem) * 0.72); }
}

/* ---------- Temps forts ---------- */
.evenements { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 3.25rem 3rem; }
@media (min-width: 40em) { .evenements { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.evenement-lien { display: block; }
.evenement-lien img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--fond-image); }
/* Image de document (fond blanc) : le blanc prend la couleur de fond de la page */
.evenement-lien img.document { mix-blend-mode: multiply; }
.evenement-titre { display: block; margin-top: 1.15rem; font-size: 1.42rem; line-height: 1.3; }
.evenement-voir { display: inline-block; margin-top: 0.35rem; font-size: 1rem; color: var(--bordeaux); }
.evenement-lien:hover .evenement-titre { color: var(--bordeaux); }
.evenement-lien:hover .evenement-voir { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }

/* ---------- Bas de page (bordeaux, en écho au bandeau) ---------- */
.pied {
  margin-top: clamp(4rem, 12vh, 8rem);
  padding: clamp(4rem, 10vh, 6.5rem) var(--marge) 3rem;
  text-align: center;
}
.pied a:hover { color: var(--ivoire); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
.pied-titre { font-size: 1.65rem; margin-bottom: 1.4rem; }
.pied-coordonnees { font-size: 1.08rem; line-height: 1.75; }
.pied-coordonnees p { margin: 0; }
.pied-reseaux { list-style: none; display: flex; justify-content: center; gap: 2rem; margin-top: 1rem; }
.pied-univ { display: inline-block; margin: 3.5rem auto 2.25rem; }
.pied-univ img { height: 5.75rem; width: auto; }
.pied-liens { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 0.4rem 2rem; font-size: 0.98rem; color: var(--ivoire-doux); }
.pied-copy { margin: 0.8rem 0 0; font-size: 0.92rem; color: var(--ivoire-doux); }

/* ==========================================================
   Espace des anciens : formulaires, annuaire, offres, administration
   ========================================================== */

/* Menu de l'espace, dans le bandeau : il occupe la place du sous-titre */
.espace-nav { margin: 1.4rem 0 0; min-height: calc(1.4rem * 2.9); font-size: 1.08rem; }
.espace-nav ul { list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 1.9rem; }
.espace-nav a, .espace-nav button { color: var(--ivoire-doux); }
.espace-nav a:hover, .espace-nav button:hover, .espace-nav a[aria-current="page"] { color: var(--ivoire); }
.espace-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.4em; }
.espace-nav form { display: inline; }
.espace-nav button { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; transition: color 0.25s; }
.espace-nav-fin { margin-left: auto; }
@media (max-width: 40em) {
  .espace-nav { margin-top: 1.2rem; min-height: calc(1.25rem * 4.35); }
  .espace-nav-fin { margin-left: 0; }
}

/* Formulaires */
.formulaire { display: grid; gap: 1.5rem; margin: 2rem 0 0; }
.rangee-contenu > .formulaire:first-child { margin-top: 0; }
.champ { display: grid; gap: 0.4rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.champ > label, .champ > legend, .libelle {
  margin: 0; padding: 0;
  color: var(--bordeaux);
  font-size: 0.98rem; font-weight: 500; letter-spacing: 0.012em;
}
.champ > legend { margin-bottom: 0.5rem; }
.facultatif { color: var(--gris); font-weight: 400; }
.champ input:not([type="checkbox"], [type="radio"]), .champ select, .champ textarea {
  width: 100%;
  font: inherit; line-height: 1.4; color: var(--encre);
  background: #fff;
  border: 1px solid var(--bord-champ); border-radius: 0;
  padding: 0.62rem 0.8rem;
}
.champ select { appearance: auto; }
.champ textarea { display: block; resize: vertical; min-height: 9rem; line-height: 1.5; }
.champ input:not([type="checkbox"], [type="radio"]):focus-visible, .champ select:focus-visible, .champ textarea:focus-visible {
  border-color: var(--bordeaux); outline-offset: 1px;
}
.champ ::placeholder { color: #7d6d72; opacity: 1; }
.champ.court input { max-width: 9rem; }
.aide { margin: 0; font-size: 0.98rem; line-height: 1.45; color: var(--gris); }
.case { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.7rem; align-items: baseline; margin: 0; }
.case input { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--bordeaux); transform: translateY(0.14rem); }
.choix .case { margin-bottom: 0.35rem; }
.groupe { display: grid; gap: 0.75rem; }
.groupe p { margin: 0; }
.notice { font-size: 1.02rem; line-height: 1.5; color: var(--gris); }
.formulaire .notice { margin: 0; }
.actions { margin: 0.4rem 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.8rem 1.6rem; }
.suite.actions { margin-top: 2.5rem; }
.bouton {
  display: inline-block;
  font: inherit; font-size: 1.05rem; line-height: 1.2; letter-spacing: 0.01em; text-align: center;
  color: var(--ivoire); background: var(--bordeaux);
  border: 1px solid var(--bordeaux); border-radius: 0;
  padding: 0.78rem 1.7rem;
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s;
}
.bouton:hover { color: var(--ivoire); background: var(--bordeaux-profond); }
.bouton-clair { color: var(--bordeaux); background: none; }
.bouton-clair:hover { color: var(--ivoire); background: var(--bordeaux); }
.pot { position: absolute; left: -200rem; width: 1px; height: 1px; overflow: hidden; }
/* Profil : seuls les champs du profil choisi s'affichent */
.formulaire:has(input[name="profil"][value="etudiant"]:checked) .pour-professionnel,
.formulaire:has(input[name="profil"][value="professionnel"]:checked) .pour-etudiant { display: none; }

/* Messages */
.avis { margin: 0 0 2rem; padding: 1rem 1.25rem; background: rgba(92, 0, 26, 0.06); }
.avis p { margin: 0; }
.avis p + p { margin-top: 0.4rem; }
.avis-erreur { background: var(--bordeaux); color: var(--ivoire); }

/* Recherche */
.filtres { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 1rem 1.25rem; align-items: end; }
.filtres .actions { margin: 0; }
@media (max-width: 52em) {
  .filtres { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .filtres .champ:first-child { grid-column: 1 / -1; }
}
@media (max-width: 30em) { .filtres { grid-template-columns: minmax(0, 1fr); } }

/* Annuaire : une rangée par promotion */
.rangee.serree { padding-top: clamp(1.5rem, 4vh, 2.5rem); padding-bottom: clamp(1.5rem, 4vh, 2.5rem); }
.annuaire { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.9rem 3rem; }
@media (min-width: 48em) { .annuaire { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.annuaire.seul { grid-template-columns: minmax(0, 1fr); margin-top: 0.4rem; }
.ancien p { margin: 0; }
.ancien-nom { font-size: 1.5rem; line-height: 1.25; }
.ancien-situation { margin-top: 0.15rem !important; font-size: 1.05rem; color: var(--gris); }
.ancien-liens { margin-top: 0.3rem !important; font-size: 1rem; display: flex; flex-wrap: wrap; gap: 0.2rem 1.25rem; overflow-wrap: anywhere; }

/* Offres de stage */
.offres { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.4rem 3rem; }
@media (min-width: 48em) { .offres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.offre-lien { display: block; }
.offre-titre { display: block; margin-bottom: 0.2rem; font-size: 1.5rem; line-height: 1.25; }
.offre-detail { display: block; font-size: 1.05rem; line-height: 1.5; color: var(--gris); }
.offre-voir { display: inline-block; margin-top: 0.4rem; font-size: 1rem; color: var(--bordeaux); }
.offre-lien:hover .offre-titre { color: var(--bordeaux); }
.offre-lien:hover .offre-voir { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
.offre-nom { font-size: 2rem; line-height: 1.2; }
.offre-description { margin-top: 2.25rem; overflow-wrap: anywhere; }

/* Listes de gestion (mes offres, administration) */
.gestion { list-style: none; display: grid; gap: 2.1rem; margin-top: 1.75rem; }
.rangee-contenu > .gestion:first-child { margin-top: 0; }
.gestion > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.75rem 2rem; align-items: start; }
.gestion p { margin: 0; }
.gestion form { margin: 0; }
.gestion-titre { font-size: 1.4rem; line-height: 1.3; }
.gestion-detail { font-size: 1.03rem; color: var(--gris); overflow-wrap: anywhere; }
.gestion-detail .lien + .lien { margin-left: 1rem; }
.gestion-actions { display: grid; gap: 0.6rem; justify-items: end; }
.gestion .bouton { padding: 0.55rem 1.2rem; font-size: 1rem; }
.gestion .formulaire { gap: 0.9rem; margin-top: 0.9rem; }
.marque-admin { margin-left: 0.6rem; font-size: 0.92rem; letter-spacing: 0.012em; color: var(--bordeaux); }
.repli { text-align: right; }
.repli > summary {
  cursor: pointer; list-style: none;
  font-size: 1rem; color: var(--bordeaux);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: rgba(92, 0, 26, 0.35);
}
.repli > summary::-webkit-details-marker { display: none; }
.repli > summary:hover { text-decoration-color: currentColor; }
.repli[open] { width: min(22rem, 78vw); text-align: left; }
.repli[open] > summary { margin-bottom: 0.9rem; }
@media (max-width: 40em) {
  .gestion > li { grid-template-columns: minmax(0, 1fr); }
  .gestion-actions { justify-items: start; }
  .repli { text-align: left; }
}

/* Journal et vérifications */
.fiche.journal > div { grid-template-columns: 14rem 1fr; }
.journal-auteur { font-size: 0.98rem; color: var(--gris); overflow-wrap: anywhere; }
@media (max-width: 36em) { .fiche.journal > div { grid-template-columns: 1fr; } }
.points { list-style: none; display: grid; gap: 1.1rem; margin-bottom: 2.25rem; }
.points li { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 0.1rem 1.5rem; align-items: baseline; }
.point-etat { font-size: 0.98rem; font-weight: 500; letter-spacing: 0.012em; color: var(--gris); }
.point-ko .point-etat { color: var(--bordeaux); }
@media (max-width: 36em) { .points li { grid-template-columns: minmax(0, 1fr); } }
code { font-family: inherit; font-size: 0.96em; padding: 0.05em 0.35em; background: rgba(35, 22, 26, 0.06); overflow-wrap: anywhere; }
.sous-titre { margin: 2.75rem 0 0.7rem; font-size: 1.4rem; color: var(--bordeaux); }

/* ---------- Transitions entre les pages ----------
   Au clic, le bordeaux se déploie ou se replie, les titres se relaient,
   le sceau change de taille et le repère du menu glisse vers la nouvelle page.
   Sans effet (navigation ordinaire) sur les navigateurs qui ne les gèrent pas. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.entete { view-transition-name: entete; }
.marque img { view-transition-name: sceau; }
.menu { view-transition-name: menu; }
.repere { view-transition-name: repere; }
.couverture, .tete-page { view-transition-name: bandeau; }
.couverture-titre, .tete-page h1 { view-transition-name: titre; }
.couverture-pied, .tete-page-chapeau { view-transition-name: sous-titre; }
.espace-nav { view-transition-name: menu-espace; }

::view-transition { pointer-events: none; }
::view-transition-group(*) { animation-duration: 0.62s; animation-timing-function: cubic-bezier(0.62, 0.02, 0.16, 1); }
/* le fond bordeaux s'étire d'une hauteur à l'autre, le repère d'une largeur à l'autre */
::view-transition-old(bandeau), ::view-transition-new(bandeau),
::view-transition-old(repere), ::view-transition-new(repere) { block-size: 100%; }
/* les textes gardent leur taille : l'ancien s'efface, le nouveau monte à sa place */
::view-transition-old(titre), ::view-transition-new(titre),
::view-transition-old(sous-titre), ::view-transition-new(sous-titre) { inline-size: auto; mix-blend-mode: normal; }
::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; }
::view-transition-old(titre), ::view-transition-old(sous-titre), ::view-transition-old(root) { animation: vt-sort 0.2s ease-in both; }
::view-transition-new(root) { animation: vt-entre 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.14s both; }
::view-transition-new(titre) { animation: vt-entre 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both; }
::view-transition-new(sous-titre) { animation: vt-entre 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both; }
@keyframes vt-sort { to { opacity: 0; } }
@keyframes vt-entre { from { opacity: 0; transform: translateY(1.1rem); } }

/* ---------- Impression ---------- */
@media print {
  .entete, .pied-liens, .menu-bouton, .pied-univ, .espace-nav, .filtres, .gestion-actions { display: none; }
  .couverture, .tete-page, .pied { background: none; color: var(--encre); }
  .tete-page { min-height: 0; padding-top: 2rem; }
  .tete-page-chapeau, .couverture-pied, .pied-copy { color: var(--gris); }
  .couverture-interieur { min-height: 0; padding-top: 2rem; }
  .rangee-titre { position: static; }
  .logo:nth-child(even) { transform: none; }
}