/* ==========================================================
   M2 IDC — identité visuelle
   Jetons de design + composants partagés par toutes les pages.
   Mobile d'abord : les règles de base visent le téléphone,
   les @media (min-width) enrichissent pour les grands écrans.
   ========================================================== */

/* ---------- Police ----------
   Libre Franklin (licence OFL, fonts/OFL.txt), auto-hébergée : aucune requête vers Google.
   Un seul fichier variable couvre les graisses 400 à 800 ; sous-ensemble latin (français compris). */
@font-face {
  font-family: "Libre Franklin";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/libre-franklin-latin.woff2") format("woff2");
}

/* ---------- Jetons ---------- */
:root {
  /* Couleurs de marque */
  --ardoise:        #2E4E66; /* bleu de la plaquette : couleur principale */
  --ardoise-fonce:  #1C3346; /* titres, pied de page */
  --ardoise-clair:  #C9D6E1; /* pastilles, grands numéros */
  --brique:         #9E2F27; /* accent : bouton d'action, repères */
  --brique-fonce:   #7A231D; /* survol du bouton d'action */
  --prune:          #63003C; /* Université Paris-Saclay : usage institutionnel seulement */

  /* Neutres */
  --encre:          #1A2530; /* texte courant */
  --gris:           #56626E; /* texte secondaire */
  --trait:          #D9DDE1; /* bordures, séparateurs */
  --fond:           #FCFCFB; /* fond de page : blanc à peine cassé */
  --creme:          #F3EFE8; /* fond de bloc ponctuel */
  --ardoise-pale:   #E6EDF3; /* fond d'encadré d'information */
  --blanc:          #FFFFFF; /* cartes, surfaces */

  /* Typographie */
  --police: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  --t-xs:   0.8125rem;                       /* 13 px : mentions */
  --t-s:    0.9375rem;                       /* 15 px : légendes */
  --t-m:    1.0625rem;                       /* 17 px : texte courant */
  --t-l:    clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);   /* intertitres */
  --t-xl:   clamp(1.9rem, 1.4rem + 2.2vw, 3rem);      /* titres de section */
  --t-xxl:  clamp(2.1rem, 1.5rem + 3vw, 3.75rem);     /* titre principal */

  /* Espacements (base 4 px) */
  --e-1: 0.25rem; --e-2: 0.5rem; --e-3: 0.75rem; --e-4: 1rem;
  --e-6: 1.5rem;  --e-8: 2rem;   --e-12: 3rem;   --e-16: 4rem;

  /* Formes : angles très légèrement arrondis, pas d'ombre */
  --rayon:   4px;
  --largeur: 72rem;  /* largeur max du contenu */
  --lecture: 40rem;  /* largeur max d'un paragraphe */
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* --entete-h : hauteur de l'en-tête collant (77 px en bureau, 92 px sur téléphone où le menu passe dessous) */
:root { --entete-h: 4.875rem; }
@media (max-width: 40rem) { :root { --entete-h: 5.75rem; } }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--entete-h) + var(--e-4)); }
body {
  margin: 0;
  font-family: var(--police);
  font-size: var(--t-m);
  line-height: 1.6;
  color: var(--encre);
  background: var(--fond);
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { color: var(--ardoise-fonce); margin: 0 0 var(--e-4); text-wrap: balance; }
h1 { font-size: var(--t-xxl); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; }
h2 { font-size: var(--t-xl);  font-weight: 800; line-height: 1.08; letter-spacing: -0.025em; }
h3 { font-size: var(--t-l);   font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }

/* Titre de bloc à l'intérieur d'une section : filet épais dessous, comme une rubrique */
.titre-bloc {
  font-size: 1.125rem; letter-spacing: 0;
  padding-bottom: var(--e-3); margin-bottom: var(--e-6);
  border-bottom: 2px solid var(--ardoise-fonce);
}
p  { margin: 0 0 var(--e-4); max-width: var(--lecture); }
a  { color: var(--ardoise); text-underline-offset: 0.2em; }
a:hover { color: var(--brique); }
:focus-visible { outline: 3px solid var(--brique); outline-offset: 2px; }

.conteneur { width: 100%; max-width: var(--largeur); margin-inline: auto; padding-inline: var(--e-4); }
@media (min-width: 48rem) { .conteneur { padding-inline: var(--e-8); } }

.section { padding-block: var(--e-12); border-top: 1px solid var(--trait); }
.section--creme { background: var(--creme); border-top: 0; }
.section--ardoise { background: var(--ardoise); color: var(--blanc); border-top: 0; }
.section--ardoise h2, .section--ardoise h3 { color: var(--blanc); }
@media (min-width: 48rem) { .section { padding-block: var(--e-16); } }

.chapeau { font-size: var(--t-l); line-height: 1.45; color: var(--gris); }

/* ---------- En-tête de section ---------- */
.entete-section { margin-bottom: var(--e-12); }
.entete-section p:last-child { margin-bottom: 0; }
.entete-section p { color: var(--gris); }
.logo-cfa a { display: inline-block; }
.logo-cfa img { display: block; height: 32px; width: auto; }
/* Grand écran : titre à gauche, introduction à droite, à la manière d'une page de magazine */
@media (min-width: 56rem) {
  .entete-section > div { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--e-12); align-items: start; }
  .entete-section h2 { margin-bottom: 0; }
  .entete-section p { padding-top: 0.45em; }
}

/* ---------- Logo typographique ---------- */
.marques { display: flex; align-items: center; gap: var(--e-4); }
.logo { display: inline-flex; align-items: center; gap: var(--e-3); text-decoration: none; color: var(--ardoise-fonce); }
.logo__sigle { font-weight: 800; font-size: 1.875rem; line-height: 1; letter-spacing: -0.04em; padding-right: var(--e-3); border-right: 1px solid var(--trait); }
.logo__sigle span { color: var(--brique); }
.logo__nom { font-size: 0.9375rem; font-weight: 700; line-height: 1.15; color: var(--ardoise-fonce); }
.marques__univ { display: block; padding-left: var(--e-4); border-left: 1px solid var(--trait); }
.marques__univ img { display: block; height: 40px; width: auto; }
@media (min-width: 40.01rem) { .logo__nom { white-space: nowrap; } }
/* Sur téléphone : nom sur deux lignes, logos réduits */
@media (max-width: 40rem) {
  .marques { gap: var(--e-3); }
  .logo { gap: var(--e-2); }
  .logo__sigle { font-size: 1.5rem; padding-right: var(--e-2); }
  .logo__nom { font-size: 0.8125rem; max-width: 7.5em; }
  .marques__univ { padding-left: var(--e-3); }
  .marques__univ img { height: 30px; }
}

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: 48px;               /* cible tactile confortable */
  padding: var(--e-3) var(--e-6);
  border: 2px solid transparent;
  border-radius: var(--rayon);
  font: inherit; font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.bouton--compact { padding-inline: var(--e-4); min-height: 44px; }
.bouton--action { background: var(--brique); color: var(--blanc); }
.bouton--action:hover { background: var(--brique-fonce); color: var(--blanc); }
.bouton--contour { border-color: var(--ardoise); color: var(--ardoise); background: transparent; }
.bouton--contour:hover { background: var(--ardoise); color: var(--blanc); }
.section--ardoise .bouton--contour { border-color: var(--blanc); color: var(--blanc); }
.section--ardoise .bouton--contour:hover { background: var(--blanc); color: var(--ardoise); }

/* ---------- Pastilles de faits clés ---------- */
.faits { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ardoise-fonce); }
.fait {
  display: flex; align-items: flex-start; gap: var(--e-3);
  padding: var(--e-3) 0;
  border-bottom: 1px solid var(--trait);
  font-weight: 600; color: var(--ardoise-fonce);
}
.fait .picto { width: 1.25rem; height: 1.25rem; margin-top: 0.15em; color: var(--ardoise); }
.fait small { display: block; font-size: var(--t-s); font-weight: 400; color: var(--gris); line-height: 1.4; margin-top: 2px; }
/* Label officiel (pack du ministère, SVG) : texte aligné sur celui des faits clés, label à droite */
.label-dnm { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); margin-top: var(--e-6); padding-left: calc(1.25rem + var(--e-3)); }
.label-dnm img { width: 88px; height: auto; flex: none; }
.label-dnm p { margin: 0; font-weight: 700; color: var(--ardoise-fonce); line-height: 1.3; }
.label-dnm small { display: block; font-weight: 400; color: var(--gris); font-size: var(--t-s); }

/* ---------- Chiffres clés ---------- */
.chiffres { display: grid; gap: var(--e-6) var(--e-4); grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.chiffre { border-top: 3px solid var(--ardoise-fonce); padding-top: var(--e-3); }
.chiffre__valeur { display: block; font-size: var(--t-xxl); font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--ardoise-fonce); font-variant-numeric: tabular-nums; }
.chiffre__libelle { display: block; margin-top: var(--e-2); font-size: var(--t-s); color: var(--gris); }
.chiffres__source { margin-top: var(--e-4); font-size: var(--t-xs); color: var(--gris); }

/* ---------- Cartes : filet en tête, angles droits, sans ombre ---------- */
.cartes { display: grid; gap: var(--e-6); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
/* Variante pour 4 cartes : 2 colonnes, puis 4, jamais une carte orpheline */
@media (min-width: 40rem) { .cartes--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .cartes--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.carte { border-top: 3px solid var(--ardoise); padding-top: var(--e-4); }
.carte :is(h3, h4) { font-size: 1.25rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--ardoise-fonce); margin: 0 0 var(--e-2); }
.carte p:last-child { margin-bottom: 0; }
.carte--encadree { border-radius: var(--rayon); background: var(--blanc); border: 1px solid var(--trait); border-top: 3px solid var(--ardoise); padding: var(--e-6); }

/* ---------- Programme : quatre blocs toujours visibles ----------
   Une colonne sur téléphone ; deux en grand écran, blocs 1-2 à gauche et 3-4 à droite
   (l'ordre du code reste l'ordre de lecture). Même présentation que la plaquette. */
.programme { display: grid; gap: var(--e-8); }
@media (min-width: 56rem) {
  .programme { grid-template-columns: 1fr 1fr; gap: var(--e-8) var(--e-12); align-items: start; }
  .programme .bloc-ue:nth-child(1) { grid-area: 1 / 1; }
  .programme .bloc-ue:nth-child(2) { grid-area: 2 / 1; }
  .programme .bloc-ue:nth-child(3) { grid-area: 1 / 2; }
  .programme .bloc-ue:nth-child(4) { grid-area: 2 / 2; }
}
.bloc-ue h3 {
  display: flex; justify-content: space-between; align-items: flex-end; gap: var(--e-4);
  margin: 0; padding-bottom: var(--e-2); border-bottom: 2px solid var(--ardoise-fonce);
  font-size: 1.125rem; letter-spacing: 0;
}
.bloc-ue h3 small { display: block; margin-top: 2px; font-size: var(--t-xs); font-weight: 400; color: var(--gris); }
/* La brique est réservée à l'action : badge ECTS en ardoise foncée */
.bloc-ue .ects { flex: none; padding: 0.1rem 0.5rem; border-radius: var(--rayon); background: var(--ardoise-fonce); color: var(--blanc); font-size: var(--t-xs); font-weight: 800; white-space: nowrap; }

/* ---------- Liste des UE (dans chaque bloc du programme) ---------- */
.liste-ue { list-style: none; margin: 0; padding: 0; }
.liste-ue li {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-4);
  padding: var(--e-2) 0; border-bottom: 1px solid var(--trait); color: var(--encre); font-size: var(--t-s); line-height: 1.4;
}
.liste-ue .volume { flex: none; font-size: var(--t-s); color: var(--gris); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Listes en colonnes (postes, mémoires) ---------- */
.liste { margin: 0; padding: 0; list-style: none; }
.liste li { padding: var(--e-3) 0; border-top: 1px solid var(--trait); }
.liste li:last-child { border-bottom: 1px solid var(--trait); }
.liste .annee { margin-left: var(--e-2); font-size: var(--t-s); color: var(--gris); font-variant-numeric: tabular-nums; }
@media (min-width: 56rem) {
  .liste--colonnes { column-count: 2; column-gap: var(--e-8); }
  .liste--colonnes li { break-inside: avoid; }
  .liste--colonnes li:last-child { border-bottom: 0; }
}

/* ---------- Grilles utilitaires ---------- */
.grille-2 { display: grid; gap: var(--e-8); }
@media (min-width: 56rem) {
  .grille-2 { grid-template-columns: 1fr 1fr; }
  /* Mêmes colonnes que l'en-tête de section : le contenu de droite s'aligne sur l'introduction */
  .grille-2--entete { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--e-12); }
}
.pile > * + * { margin-top: var(--e-12); }
.suite-section { margin-top: var(--e-16); }

/* ---------- En-tête du site ---------- */
.entete {
  position: sticky; top: 0; z-index: 20;   /* en-tête collant, au-dessus de la navigation par ancres de la charte */
  padding-block: var(--e-4);
  background: rgba(252, 252, 251, .95);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--trait);
}
.entete .conteneur { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--e-3); }
/* Sur téléphone, le menu passe sous le logo */
@media (max-width: 40rem) {
  .entete { padding-block: var(--e-3) 0; }   /* en-tête collant : le plus compact possible sur petit écran */
  .entete .conteneur { row-gap: var(--e-2); }
  .entete nav { width: 100%; border-top: 1px solid var(--trait); }
  .entete .menu { gap: var(--e-6); }
  .entete .menu a { min-height: 40px; }
}

/* ---------- Bandeau d'accueil ---------- */
.accueil { padding-block: var(--e-12) var(--e-16); }
.accueil h1 { max-width: 20ch; }
.actions { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; }
.actions--espacees { margin-top: var(--e-6); }

/* Libellés qui changent selon l'état des candidatures (classe « candidatures-ouvertes » sur <body>) */
.si-ouvertes { display: none; }
.candidatures-ouvertes .si-ouvertes { display: revert; }
.candidatures-ouvertes .si-fermees { display: none; }

/* Rappel discret vers la page Candidature, en fin de section */
.rappel { margin: var(--e-8) 0 0; font-weight: 600; color: var(--ardoise-fonce); }
.rappel a span { white-space: nowrap; }

/* ---------- Pied de page : appels employeur / étudiant, plan du site, bandeau institutionnel ---------- */
.pied { background: var(--ardoise-fonce); color: #C9D4DD; font-size: var(--t-s); }
.pied a { color: var(--blanc); }
.pied a:hover { color: var(--ardoise-clair); }
.pied p { max-width: none; }
.pied__grille { display: grid; gap: var(--e-8); padding-block: var(--e-12); }
@media (min-width: 40rem) { .pied__grille { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .pied__grille { grid-template-columns: 1fr 1fr 1fr auto; gap: var(--e-12); } }
.pied__sigle { margin: 0; font-size: 2.25rem; font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--blanc); }
.pied__sigle span { color: #E0645A; } /* brique éclairci, lisible sur fond sombre */
.pied__nom { margin: var(--e-2) 0 var(--e-4); font-weight: 700; color: var(--blanc); }
.pied h2 { display: flex; align-items: center; gap: var(--e-2); color: var(--blanc); font-size: var(--t-m); margin-bottom: var(--e-3); }
.pied__appel p { margin-bottom: var(--e-3); }
.pied__lien-fort { font-weight: 700; text-decoration: none; border-bottom: 2px solid #E0645A; padding-bottom: 2px; }
.pied__lien-fort span { display: inline-block; transition: transform .2s; }
.pied__lien-fort:hover span { transform: translateX(3px); }
.pied__nav h2 { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.08em; color: #9FB0BF; }
.pied__nav ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--e-2); }
.pied__nav a { display: inline-flex; align-items: center; gap: var(--e-2); text-decoration: none; white-space: nowrap; }
.pied__nav a:hover { text-decoration: underline; }
.pied__nav a[aria-current="page"] { font-weight: 700; color: var(--blanc); box-shadow: inset 0 -2px 0 #E0645A; } /* page courante : en gras, soulignée */
.pied__nav .pied__externes { margin-top: var(--e-4); padding-top: var(--e-4); border-top: 1px solid rgba(255,255,255,.15); } /* filet entre pages du site et liens externes */
.picto--externe { width: 0.875em; height: 0.875em; opacity: .7; }

/* Bandeau institutionnel : fond clair pour garder les logos officiels dans leurs couleurs */
.pied__institution { background: var(--blanc); color: var(--gris); padding-block: var(--e-6); border-top: 4px solid var(--brique); }
.pied__institution .conteneur { display: grid; gap: var(--e-4) var(--e-8); align-items: center; }
@media (min-width: 56rem) { .pied__institution .conteneur { grid-template-columns: auto 1fr auto; } }
.pied__logos { display: flex; align-items: center; gap: var(--e-6); }
.pied__logos img:first-child { height: 48px; width: auto; }
.pied__logos img:last-child { height: 76px; width: auto; }
.pied__institution p { margin: 0; line-height: 1.5; }
.pied__institution a { color: var(--ardoise); }
.mentions summary { cursor: pointer; font-weight: 600; color: var(--ardoise-fonce); min-height: 44px; display: flex; align-items: center; }
.mentions[open] { grid-column: 1 / -1; border-top: 1px solid var(--trait); }
.mentions__contenu { columns: 18rem; column-gap: var(--e-8); padding-block: var(--e-4); }
/* Chaque rubrique (titre + texte) reste d'un seul tenant : jamais de titre seul en bas de colonne */
.mentions__contenu > div { display: inline-block; width: 100%; break-inside: avoid; margin-bottom: var(--e-4); } /* inline-block : pas de marge reportée en haut de colonne */
.mentions__contenu h3 { color: var(--ardoise-fonce); font-size: var(--t-s); margin: 0 0 var(--e-1); }
.mentions__contenu p { margin: 0; }

/* ---------- Contact ---------- */
.contact { display: flex; flex-direction: column; gap: var(--e-1); }
.contact__nom { font-weight: 700; color: var(--ardoise-fonce); }
.contact__role { font-size: var(--t-s); color: var(--gris); margin-bottom: var(--e-3); }

/* ---------- Citation ---------- */
/* Grand guillemet décoratif en tête, texte en retrait sous lui */
.citation { position: relative; margin: 0; padding-top: 3.75rem; align-self: start; }
.citation::before {
  content: "\201C"; /* guillemet ouvrant « “ » */
  position: absolute; top: 0; left: -0.06em;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 9rem; line-height: 0.8; color: var(--ardoise);
}
.citation p { font-size: var(--t-l); font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; color: var(--ardoise-fonce); margin-bottom: var(--e-4); }
.citation footer { display: flex; align-items: center; gap: var(--e-3); font-size: var(--t-s); font-weight: 600; color: var(--gris); }
.citation p:last-of-type::after { content: "\201D"; /* guillemet fermant « ” », plus petit que l'ouvrant */ margin-left: 0.1em; font-family: Georgia, "Times New Roman", serif; font-size: 3.5rem; font-weight: 400; line-height: 0; vertical-align: -0.35em; color: var(--ardoise); }

/* ---------- Accessibilité : texte réservé aux lecteurs d'écran, lien d'évitement ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.evitement { position: absolute; left: var(--e-4); top: 0; z-index: 100; padding: var(--e-3) var(--e-4); background: var(--ardoise-fonce); color: var(--blanc); font-weight: 600; transform: translateY(-120%); }
.evitement:focus { transform: none; color: var(--blanc); }
main:focus { outline: none; }

/* ---------- Pictogrammes (sprite intégré aux pages, icônes Lucide) ---------- */
.picto { width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.2em; }
.picto--grand { width: 2rem; height: 2rem; color: var(--ardoise); margin-bottom: var(--e-3); display: block; }

/* ---------- Menu principal : deux pages ----------
   Règle : le lien « Candidature » prend la forme d'un bouton rouge
   uniquement quand les candidatures sont ouvertes, c'est-à-dire quand
   <body> porte la classe « candidatures-ouvertes » (à ajouter ou retirer
   sur chaque page). Sinon, c'est un lien comme « Présentation ». */
.menu { display: flex; align-items: center; gap: var(--e-4); margin: 0; padding: 0; list-style: none; }
.menu a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 600; color: var(--gris); text-decoration: none;
  border-bottom: 3px solid transparent;
}
.menu a[aria-current="page"] { color: var(--ardoise-fonce); border-bottom-color: var(--ardoise-fonce); }
.menu a:hover { color: var(--ardoise-fonce); }
.candidatures-ouvertes .menu__candidature {
  padding-inline: var(--e-4); border-bottom: 0; border-radius: var(--rayon);
  background: var(--brique); color: var(--blanc);
  transition: background-color .15s;
}
.candidatures-ouvertes .menu__candidature:hover { background: var(--brique-fonce); color: var(--blanc); }
.candidatures-ouvertes .menu__candidature[aria-current="page"] { color: var(--blanc); }
@media (min-width: 48rem) { .menu { gap: var(--e-6); } }

/* ---------- Sommaire de la page (sous le bandeau d'accueil) ---------- */
.sommaire { border-top: 1px solid var(--trait); padding-top: var(--e-6); margin-top: var(--e-12); }
.sommaire h2 { font-size: var(--t-s); color: var(--gris); font-weight: 600; margin-bottom: var(--e-3); letter-spacing: 0; }
.sommaire ul { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: 0; padding: 0; list-style: none; }
.sommaire a {
  display: inline-flex; align-items: center; gap: var(--e-2); min-height: 40px; padding: 0 var(--e-3);
  border: 1px solid var(--trait); border-radius: var(--rayon);
  font-size: var(--t-s); font-weight: 600; color: var(--ardoise-fonce); text-decoration: none;
}
.sommaire a:hover { border-color: var(--ardoise); color: var(--ardoise); }
.sommaire .picto { width: 1.125em; height: 1.125em; color: var(--ardoise); }

/* ---------- Bandeau d'accueil : texte à gauche, faits clés à droite ---------- */
.accueil__grille { display: grid; gap: var(--e-8); }
.accueil .chapeau { margin-bottom: var(--e-8); }
@media (min-width: 56rem) {
  .accueil__grille { grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--e-12); align-items: end; }
}

/* ---------- Mur de logos ----------
   Logos légèrement désaturés pour un ensemble homogène ;
   la couleur d'origine revient au survol. */
.logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: var(--e-2); margin: 0; padding: 0; list-style: none; }
.logos li {
  display: flex; align-items: center; justify-content: center;
  height: 5rem; padding: var(--e-3) var(--e-4);
  background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon);
}
.logos img { max-height: 2.25rem; max-width: 100%; width: auto; filter: grayscale(.45); opacity: .9; transition: filter .2s, opacity .2s; }
.logos .logo--haut img { max-height: 3.5rem; } /* logos carrés ou en bloc-marque */
.logos .logo--pale img { filter: grayscale(.45) brightness(.7) contrast(1.4); } /* logos clairs, illisibles en simple gris */
.logos li:hover img { filter: none; opacity: 1; }
.logos .logo-texte { font-weight: 700; color: var(--gris); text-align: center; line-height: 1.2; font-size: var(--t-s); }

/* ---------- Contact avec photo ---------- */
.contact__entete { display: flex; align-items: center; gap: var(--e-4); margin-bottom: var(--e-4); }
.contact__photo {
  width: 72px; height: 72px; flex: none; border-radius: var(--rayon);
  background: var(--ardoise-clair); color: var(--ardoise);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.contact__photo img { width: 100%; height: 100%; object-fit: cover; }
.contact__photo .picto { width: 2rem; height: 2rem; }
.contact .contact__role { margin-bottom: 0; }

/* ---------- Carte géographique ---------- */
.carte-geo { position: relative; aspect-ratio: 4 / 3; border: 1px solid var(--trait); border-radius: var(--rayon); overflow: hidden; background: var(--ardoise-clair); }
.carte-geo iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Bouton qui remplace le plan tant que le visiteur ne l'a pas demandé */
.carte-geo__bouton {
  position: absolute; inset: 0; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e-2);
  border: 0; background: var(--ardoise-pale); color: var(--ardoise-fonce);
  font: inherit; font-weight: 700; cursor: pointer; text-align: center; padding: var(--e-4);
}
.carte-geo__bouton .picto { width: 2rem; height: 2rem; color: var(--ardoise); }
.carte-geo__bouton small { display: block; margin-top: var(--e-1); font-size: var(--t-s); font-weight: 400; color: var(--gris); }
.carte-geo__bouton:hover { background: var(--ardoise-clair); }
@media (min-width: 56rem) { .carte-geo { aspect-ratio: 16 / 10; } }
.infos-acces { list-style: none; margin: 0; padding: 0; }
.infos-acces li { display: flex; gap: var(--e-3); padding: var(--e-3) 0; border-top: 1px solid var(--trait); }
.infos-acces li:first-child { border-top: 0; padding-top: 0; }
.infos-acces .picto { color: var(--ardoise); margin-top: 0.2em; }


/* ---------- Page Candidature ---------- */
/* Encadré d'état des candidatures (ouvertes / fermées) */
.statut {
  display: flex; gap: var(--e-4); align-items: flex-start;
  background: var(--ardoise-pale);
  border-radius: var(--rayon); padding: var(--e-4) var(--e-6);
  margin-bottom: var(--e-8); max-width: var(--lecture);
}
.statut .picto { width: 1.5rem; height: 1.5rem; color: var(--ardoise); margin-top: 0.1em; }
.statut p { margin: 0; }
.statut strong { display: block; color: var(--ardoise-fonce); }

/* Liste à coches (entretien, contrat) */
.coches { list-style: none; margin: 0; padding: 0; }
.coches li { display: flex; gap: var(--e-3); padding: var(--e-3) 0; border-bottom: 1px solid var(--trait); }
.coches .picto { color: var(--ardoise); margin-top: 0.2em; }
.coches small { display: block; color: var(--gris); font-size: var(--t-s); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ---------- Page Candidature : profils, étapes, rythme ---------- */
/* Profils admis : trois cartes, la première porte la liste des disciplines */
.profils { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-6); }
@media (min-width: 48rem) { .profils { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .profils { grid-template-columns: 1.4fr 1fr 1fr; } }
/* VAE et formation continue : seule sur sa ligne, sur toute la largeur */
.profils__large { grid-column: 1 / -1; }
.profils__large p { max-width: var(--lecture); }
.profils p { color: var(--gris); }
.etiquettes { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: 0; padding: 0; list-style: none; }
.etiquettes li {
  padding: var(--e-1) var(--e-3); border-radius: var(--rayon);
  background: var(--creme); color: var(--ardoise-fonce);
  font-size: var(--t-s); font-weight: 600; line-height: 1.4;
}
.citation--detachee { margin-top: var(--e-12); max-width: var(--lecture); }

/* Frise enrichie : date, titre et description à chaque étape */
.frise--etapes p { margin: var(--e-1) 0 0; color: var(--gris); font-size: var(--t-s); }
/* Nom de l'étape en tête de l'explication, sur la même ligne */
.frise--etapes p strong { color: var(--ardoise-fonce); font-weight: 700; }
.frise--etapes p strong::after { content: " · "; font-weight: 400; color: var(--gris); }
.frise--etapes li:last-child::before { background: var(--ardoise); }

/* Rythme de l'alternance : une ligne par période ; période et détail alignés en deux colonnes, séparés par un trait vertical */
.rythme { margin: 0 0 var(--e-6); display: grid; grid-template-columns: max-content 1fr; }
.rythme > div { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: baseline; padding: var(--e-3) 0; border-bottom: 1px solid var(--trait); }
.rythme dt { font-weight: 700; color: var(--ardoise-fonce); padding-right: var(--e-3); margin-right: var(--e-3); border-right: 1px solid var(--trait); }
.rythme dd { margin: 0; color: var(--gris); }

/* ---------- Pastilles du type d'intervenant (Académique / Professionnel) ---------- */
.ue-titre .pastille { margin-left: var(--e-1); vertical-align: 0.1em; }
.pastille + .pastille { margin-left: 3px; }
.pastille {
  display: inline-block; min-width: 1.35rem; padding: 0 0.3rem; border-radius: 3px; text-align: center;
  font-size: 0.6875rem; font-weight: 700; line-height: 1.5; white-space: nowrap;
}
/* Texte lu par les lecteurs d'écran mais masqué à l'écran (« A » / « P » des pastilles) */
.visuellement-cache { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* La brique est réservée à l'action : pastilles en ardoise, pleine (professionnel) ou en contour (académique) */
.pastille--acad { background: transparent; color: var(--ardoise); box-shadow: inset 0 0 0 1px var(--ardoise); }
.pastille--pro  { background: var(--ardoise); color: var(--blanc); }
.legende-ue { font-size: var(--t-s); color: var(--gris); display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-6); }
.legende-ue > span { display: inline-flex; align-items: center; gap: var(--e-2); } /* pastille et description restent ensemble */

/* Introduction de « La formation » : quatre disciplines en mots-clés, séparées par un carré brique, puis une phrase en gris */
.mots-cles { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); margin: 0 0 var(--e-4); padding: 0; list-style: none; }
.mots-cles li { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.3; color: var(--ardoise-fonce); white-space: nowrap; }
.mots-cles li + li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: var(--e-4); vertical-align: 0.3em; background: var(--brique); }
/* Téléphone : deux mots par ligne, un carré devant chacun (évite un séparateur orphelin en début de ligne) */
@media (max-width: 40rem) {
  .mots-cles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-1) var(--e-4); }
  .mots-cles li::before, .mots-cles li + li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: var(--e-3); vertical-align: 0.3em; background: var(--brique); }
}
@media (min-width: 56rem) { .entete-section .mots-cles { padding-top: 0.45em; } .entete-section .mots-cles + p { padding-top: 0; } }

/* Citation décalée vers la droite dans la grille d'en-tête */
@media (min-width: 56rem) { .grille-2--entete .citation { padding-left: var(--e-12); } }

/* « Pour qui ? » : sur grand écran, la citation est centrée verticalement face au bloc de gauche. */
@media (min-width: 56rem) {
  .grille-2--profil .citation { align-self: center; }
}

/* Compétences visées : filets des cartes plus fins et gris */
.cartes--4 .carte { border-top: 1px solid var(--trait); }

/* ---------- Sujets de mémoires : deux colonnes de lignes ; thème et année en surtitre, au-dessus du titre ---------- */
.memoires { list-style: none; margin: 0; padding: 0; }
.memoires li { display: flex; flex-direction: column; gap: var(--e-2); padding: var(--e-4) 0 var(--e-6); border-bottom: 1px solid var(--trait); break-inside: avoid; }
.memoires .surtitre { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-xs); line-height: 1; font-weight: 600; }
.memoires .theme { font-weight: 700; color: var(--ardoise); }
.memoires .theme::before { content: ""; display: inline-block; width: 1rem; height: 2px; margin-right: var(--e-2); vertical-align: 0.25em; background: currentColor; }
.memoires .annee { color: var(--gris); font-variant-numeric: tabular-nums; }
.memoires .annee::before { content: "·"; margin-right: var(--e-2); }
.memoires .annee:empty { display: none; }
.memoires .memoire__titre { font-size: 1.125rem; font-weight: 600; line-height: 1.4; color: var(--ardoise-fonce); }
/* Le titre du mémoire est une citation : guillemets français */
.memoires .memoire__titre::before { content: "\00ab\00a0"; }
.memoires .memoire__titre::after { content: "\00a0\00bb"; }
@media (min-width: 56rem) { .memoires { column-count: 2; column-gap: var(--e-12); } }

/* ---------- Postes occupés : une carte par famille de métiers (pictogramme, titre, liste) ----------
   Une colonne sur téléphone, puis autant de colonnes que la largeur le permet (quatre en bureau). */
.familles { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.famille { background: var(--blanc); border: 1px solid var(--trait); border-top: 3px solid var(--ardoise); border-radius: var(--rayon); padding: var(--e-6); }
/* Les deux familles les moins fournies partagent une colonne, l'une sur l'autre. */
.familles__pile { display: flex; flex-direction: column; gap: var(--e-4); }
.familles__pile .famille:last-child { flex: 1; }
.famille .picto--grand { width: 1.75rem; height: 1.75rem; }
.famille h4 { margin: 0 0 var(--e-3); font-size: 1.125rem; line-height: 1.25; color: var(--ardoise-fonce); }
.postes { list-style: none; margin: 0; padding: 0; }
.postes li { padding: var(--e-2) 0; border-top: 1px solid var(--trait); font-size: var(--t-s); line-height: 1.4; color: var(--encre); }

/* ---------- Photo « tablette et stylet » : fond du bandeau d'appel (bichromie ardoise) et bandeau entre deux sections ---------- */
.section--photo { position: relative; overflow: hidden; }
.section--photo__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 20% 50%; filter: grayscale(1) contrast(1.15) brightness(1.05); mix-blend-mode: multiply; opacity: .9; }
.section--photo > .conteneur { position: relative; }
.bandeau-photo { height: 11rem; background: url("../img/tablette-stylet.jpg") 40% 45% / cover no-repeat; }
@media (min-width: 56rem) and (hover: hover) { .bandeau-photo { height: 15rem; background-attachment: fixed; background-position: 40% 35%; } }

/* ---------- Calendrier de candidature : parcours en étapes numérotées ---------- */
.parcours { counter-reset: etape; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-6); position: relative; }
.parcours::before { content: ""; position: absolute; left: calc(1rem - 1px); top: 1rem; bottom: 1rem; width: 2px; background: var(--ardoise); }
.parcours li { position: relative; padding-left: 2.75rem; }
.parcours li::before { content: counter(etape); counter-increment: etape; position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--blanc); border: 2px solid var(--ardoise); color: var(--ardoise); font-weight: 800; font-size: var(--t-s); }
.parcours li:last-child::before { background: var(--ardoise); border-color: var(--ardoise); color: #fff; }
.parcours small { display: block; font-size: var(--t-s); font-weight: 700; color: var(--ardoise); }
.parcours strong { display: block; color: var(--ardoise-fonce); font-size: var(--t-m); margin: 2px 0; }
.parcours span { font-size: var(--t-s); color: var(--gris); }
@media (min-width: 56rem) {
  .parcours { grid-template-columns: repeat(5, 1fr); gap: var(--e-4); }
  .parcours::before { left: 1rem; right: 1rem; top: calc(1rem - 1px); bottom: auto; width: auto; height: 2px; }
  .parcours li { padding: 2.75rem 0 0; }
}

/* VAE et formation continue : sur la même ligne que la citation */
.profils-bas { display: grid; gap: var(--e-6); margin-top: var(--e-6); }
.profils-bas .citation--detachee { margin-top: 0; }
.profils__vae p { color: var(--gris); max-width: var(--lecture); }
/* mêmes colonnes que la grille des profils : la tuile VAE s'aligne sur celle des M1, la citation occupe la droite */
@media (min-width: 48rem) { .profils-bas { grid-template-columns: 1fr 1fr; align-items: start; } .profils-bas .citation { padding-left: var(--e-6); } }
@media (min-width: 64rem) { .profils-bas { grid-template-columns: 1.4fr 1fr 1fr; } .profils-bas .citation { grid-column: 2 / -1; } }

/* ---------- TOEIC : pastille sous le cours d'anglais (programme) ---------- */
.etiquette-toeic { display: flex; align-items: center; gap: var(--e-1); width: fit-content; margin-top: var(--e-1); padding: 0 var(--e-2); border-radius: 3px; background: var(--ardoise-pale); color: var(--ardoise-fonce); font-size: 0.75rem; font-weight: 600; line-height: 1.6; }
.etiquette-toeic .picto { width: 0.85rem; height: 0.85rem; color: var(--ardoise); }