/* page La formation : modules, débouchés, Master 1 / Master 2, maquettes */

/* Fond de page gris, comme l'accueil et les partenariats. « Débouchés », qui est
   sur fond rouge sombre, n'est pas concerné. */
#vue-formation .sec:not(#debouches){background:var(--gris-page)}

/* ---------- modules ---------- */
.modules{background:#8E0212;color:#fff;padding:112px 0}
.modules h2{color:#fff}
.modules .sec-head p{color:rgba(255,255,255,.72)}
.mod-list{display:grid;grid-template-columns:repeat(3,1fr);column-gap:64px}
.mod{display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding:22px 0 20px;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.26);
  font-family:Spectral,serif;font-size:19px;line-height:1.38;
  transition:border-color .25s ease,padding-left .25s ease}
.mod i{font-family:Archivo,sans-serif;font-style:normal;font-size:11.5px;letter-spacing:.14em;
  color:rgba(255,255,255,.6)}
.mod:hover,.mod:focus-visible{border-bottom-color:#fff;padding-left:10px}
.mod span{position:relative}
.mod span::before{content:"";position:absolute;left:-16px;top:.62em;width:6px;height:1px;background:#fff;
  opacity:0;transition:opacity .25s ease}
.mod:hover span::before{opacity:1}

/* ---------- débouchés : aplat rouge DJCE ----------
   Même rouge que la bande des modules. Pas de cadre : les trois voies sont
   simplement séparées par un filet, et c'est l'alignement qui fait la tenue.
   Un encadré blanc sur ce rouge ferait un pavé, un encadré translucide faisait
   une boîte vide — on retire la boîte. */
#debouches{background:var(--crimson-dark);color:#fff;padding-bottom:104px}
#debouches .sec-head h2{color:#fff}
#debouches .sec-head p{color:rgba(255,255,255,.74)}

.voies-deb{list-style:none;counter-reset:voie;margin:56px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr)}
/* Chaque voie occupe quatre rangées de la grille — numéro, titre, chapeau,
   liste — et reprend celles du parent. Les quatre rangées sont donc communes
   aux trois colonnes : un chapeau sur deux lignes impose sa hauteur à ses
   voisins, et les listes démarrent toutes au même endroit. Même procédé que
   les fiches de la page Partenariats. */
.voie-deb{counter-increment:voie;position:relative;padding:4px 48px 4px 0;
  display:grid;grid-template-rows:subgrid;grid-row:span 4;align-content:start}
.voie-deb + .voie-deb{padding-left:48px}
.voie-deb:last-child{padding-right:0}
/* Le filet de séparation se trace de haut en bas quand la section apparaît. */
.voie-deb + .voie-deb::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;
  background:rgba(255,255,255,.26);transform:scaleY(0);transform-origin:top;
  transition:transform .9s cubic-bezier(.4,.6,.3,1)}

.voie-deb-rang{margin:0 0 20px;font-family:Spectral,serif;font-size:15px;font-weight:300;
  letter-spacing:.08em;color:rgba(255,255,255,.5)}
.voie-deb-rang::before{content:counter(voie,decimal-leading-zero)}
/* Le filet sous le numéro se déploie vers la droite : c'est lui qui donne le
   départ de la colonne. */
.voie-deb-rang::after{content:"";display:block;width:34px;height:1px;background:#fff;
  margin-top:14px;transform:scaleX(0);transform-origin:left;
  transition:transform .6s cubic-bezier(.3,.7,.3,1)}
.voie-deb h3{margin:0 0 12px;font-family:Spectral,serif;font-size:clamp(20px,2.1vw,24px);
  font-weight:600;line-height:1.24;color:#fff}
.voie-deb-chapeau{margin:0 0 26px;font-family:Spectral,serif;font-style:italic;font-size:16px;
  line-height:1.6;color:rgba(255,255,255,.74);text-wrap:pretty}

/* Les métiers : une ligne chacun, séparés d'un filet. Le survol reprend le
   geste des modules juste au-dessus — le texte avance d'un cran et un tiret
   se montre —, pour que la page garde un seul vocabulaire. */
.voie-deb-liste{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.18)}
.voie-deb-liste li{position:relative;padding:13px 0 12px;
  border-bottom:1px solid rgba(255,255,255,.18);
  font-size:15.2px;line-height:1.5;color:rgba(255,255,255,.9);
  transition:padding-left .28s ease,color .28s ease}
.voie-deb-liste li i{font-style:italic}
/* Certaines lignes demandent une précision — quelles structures, sous quel
   titre. Elle vient en dessous, plus petite et en retrait de ton, pour rester
   une note et non une deuxième entrée. */
.voie-deb-liste li span{display:block;margin-top:5px;font-size:13.4px;line-height:1.56;
  color:rgba(255,255,255,.62);text-wrap:pretty}
.voie-deb-liste li::before{content:"";position:absolute;left:-14px;top:1.42em;width:7px;height:1px;
  background:#fff;opacity:0;transition:opacity .28s ease}
.voie-deb-liste li:hover{padding-left:12px;color:#fff}
.voie-deb-liste li:hover::before{opacity:1}

/* Apparition : les trois colonnes montent l'une après l'autre, et dans chacune
   les lignes suivent. Les retards sont courts — on doit sentir un ordre, pas
   attendre que ça finisse. */
.voies-deb .voie-deb{opacity:0;transform:translateY(16px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.voies-deb.vu .voie-deb{opacity:1;transform:none}
.voies-deb .voie-deb:nth-child(2){transition-delay:.12s}
.voies-deb .voie-deb:nth-child(3){transition-delay:.24s}
.voies-deb.vu .voie-deb + .voie-deb::before{transform:scaleY(1)}
.voies-deb .voie-deb:nth-child(2)::before{transition-delay:.12s}
.voies-deb .voie-deb:nth-child(3)::before{transition-delay:.24s}
.voies-deb.vu .voie-deb-rang::after{transform:scaleX(1)}
.voies-deb .voie-deb:nth-child(1) .voie-deb-rang::after{transition-delay:.30s}
.voies-deb .voie-deb:nth-child(2) .voie-deb-rang::after{transition-delay:.42s}
.voies-deb .voie-deb:nth-child(3) .voie-deb-rang::after{transition-delay:.54s}
.voie-deb-liste li{opacity:0;transform:translateY(10px)}
.voies-deb.vu .voie-deb-liste li{opacity:1;transform:none;
  transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.3,1),
             padding-left .28s ease,color .28s ease}
.voies-deb.vu .voie-deb-liste li:nth-child(1){transition-delay:.34s,.34s,0s,0s}
.voies-deb.vu .voie-deb-liste li:nth-child(2){transition-delay:.42s,.42s,0s,0s}
.voies-deb.vu .voie-deb-liste li:nth-child(3){transition-delay:.50s,.50s,0s,0s}
.voies-deb.vu .voie-deb-liste li:nth-child(4){transition-delay:.58s,.58s,0s,0s}

/* ---------- le réseau ----------
   Les colonnes disent où vont les diplômés ; ce bloc dit pourquoi ces portes
   s'ouvrent. D'où le corps plus généreux et le Spectral : c'est l'argument de
   la section, pas une note de bas de page. */
.deb-reseau{margin:56px 0 0;padding:34px 0 0;border-top:1px solid rgba(255,255,255,.26)}
.deb-reseau-texte{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 64px;
  margin-top:16px}
.deb-reseau-texte p{margin:0;font-family:Spectral,serif;font-size:17.2px;line-height:1.66;
  color:rgba(255,255,255,.9);text-wrap:pretty}
.deb-reseau{opacity:0;transform:translateY(14px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.deb-reseau.vu{opacity:1;transform:none}
@media (max-width:900px){.deb-reseau-texte{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.deb-reseau{opacity:1;transform:none}}

/* ---------- bas de section : la voie universitaire et les domaines ----------
   Deux choses qui ne rentrent dans aucune des trois colonnes : l'université,
   qui n'est pas une structure d'exercice comme les autres, et les domaines,
   qui les traversent toutes. D'où ce registre plus bas, sous un filet. */
.deb-apres{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:26px 64px;
  margin:40px 0 0;padding:32px 0 0;border-top:1px solid rgba(255,255,255,.26)}
.deb-apres-titre{margin:0 0 12px;font-family:Montserrat,sans-serif;font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.58)}
.deb-apres-texte{margin:0;font-size:15.2px;line-height:1.68;color:rgba(255,255,255,.86);
  text-wrap:pretty}
/* Les domaines : deux colonnes de mots, chacun précédé d'un tiret — le même
   repère que la liste des acquis du Master 2, plus bas sur la page. Une file
   séparée par des points médians avait le défaut de rejeter un point en tête
   de ligne au moment du retour à la ligne. Pas de pastilles non plus : sur un
   aplat rouge, elles feraient des confettis. */
.deb-domaines{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 40px}
.deb-domaines li{position:relative;padding-left:17px;
  font-size:15.2px;line-height:1.6;color:rgba(255,255,255,.86)}
.deb-domaines li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:1px;
  background:rgba(255,255,255,.55)}
@media (max-width:900px){
  .deb-apres{grid-template-columns:1fr;gap:30px;margin-top:10px}
  .deb-domaines{grid-template-columns:1fr}
}

/* Le bloc suit la cascade des colonnes, un cran plus tard. */
.deb-apres .deb-apres-bloc{opacity:0;transform:translateY(14px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.deb-apres.vu .deb-apres-bloc{opacity:1;transform:none}
.deb-apres .deb-apres-bloc:nth-child(2){transition-delay:.12s}

/* ---------- clôture : le renvoi vers les promotions ----------
   Le reste de la section est fait de filets et de texte ; ici, au contraire,
   on ferme par un cadre. C'est le seul de la partie, donc son point final, et
   le seul endroit où l'on demande quelque chose au lecteur.

   Le lien porte le cadre entier, pas seulement le bouton : toute la surface
   est cliquable, et l'intention se voit sans avoir à lire. */
.deb-cta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 52px;align-items:center;
  margin:50px 0 0;padding:32px 38px 34px;color:#fff;
  border:1px solid rgba(255,255,255,.34);
  transition:background .3s ease,border-color .3s ease}
.deb-cta:hover,.deb-cta:focus-visible{background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.66)}
/* La phrase est en Spectral et plus grande que les listes au-dessus : elle
   s'adresse au lecteur, elle ne l'informe pas. */
.deb-cta-phrase{display:block;max-width:60ch;
  font-family:Spectral,serif;font-size:clamp(17px,1.8vw,19.5px);line-height:1.6;
  color:#fff;text-wrap:pretty}
/* Le bouton n'en est pas un : c'est la cible visible du lien qui l'entoure. Il
   s'inverse au survol du cadre, et non au sien — sinon il faudrait le viser. */
.deb-cta-bouton{display:inline-flex;align-items:center;gap:12px;white-space:nowrap;
  padding:15px 28px;border:1px solid rgba(255,255,255,.6);
  font-family:Montserrat,sans-serif;font-size:13.4px;font-weight:500;letter-spacing:.03em;
  transition:background .3s ease,color .3s ease,border-color .3s ease}
.deb-cta-bouton::after{content:"\2192";transition:transform .3s cubic-bezier(.3,.7,.3,1)}
.deb-cta:hover .deb-cta-bouton,.deb-cta:focus-visible .deb-cta-bouton{
  background:#fff;color:var(--crimson-dark);border-color:#fff}
.deb-cta:hover .deb-cta-bouton::after,.deb-cta:focus-visible .deb-cta-bouton::after{
  transform:translateX(5px)}
.deb-cta{opacity:0;transform:translateY(14px)}
.deb-cta.vu{opacity:1;transform:none;
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1),
             background .3s ease,border-color .3s ease}
@media (max-width:820px){
  .deb-cta{grid-template-columns:1fr;padding:28px 24px 30px;gap:22px}
  .deb-cta-bouton{justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  .deb-cta{opacity:1;transform:none}
  .deb-apres .deb-apres-bloc{opacity:1;transform:none}
  .voies-deb .voie-deb,.voie-deb-liste li{opacity:1;transform:none}
  .voie-deb + .voie-deb::before{transform:scaleY(1)}
  .voie-deb-rang::after{transform:scaleX(1)}
}
@media (max-width:900px){
  .voies-deb{grid-template-columns:1fr;gap:0}
  .voie-deb,.voie-deb + .voie-deb{padding:34px 0}
  .voie-deb + .voie-deb::before{left:0;right:0;top:0;bottom:auto;width:auto;height:1px;
    transform:scaleX(0);transform-origin:left}
  .voies-deb.vu .voie-deb + .voie-deb::before{transform:scaleX(1)}
}

/* ---------- pages Master 1 et Master 2 ----------
   Deux briques réutilisables : les « strates » (une couche de socle, une couche
   qui s'y ajoute, puis le résultat) et la liste d'unités d'enseignement. */
.strates{display:grid;gap:18px;margin:44px 0 0}
.strate{position:relative;background:#fff;border:1px solid var(--line);border-left:3px solid var(--stone);
  padding:30px 34px 32px}
.sec.alt .strate{background:#fff}
.strate.majeure{border-left-color:var(--crimson)}
.strate-rang{display:block;font-family:Montserrat,sans-serif;font-size:11.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--crimson);margin:0 0 12px}
.strate h3{margin:0 0 10px;font-family:Spectral,serif;font-size:clamp(19px,2.1vw,23px);font-weight:600}
.strate p{margin:0;font-size:15.4px;line-height:1.7;color:var(--muted);max-width:78ch}
.strate-plus{display:flex;align-items:center;gap:14px;margin:0;
  font-family:Spectral,serif;font-style:italic;font-size:17px;color:var(--muted)}
.strate-plus::before,.strate-plus::after{content:"";height:1px;background:var(--line);flex:1}
.resultat{margin:18px 0 0;padding:30px 34px 32px;background:var(--ink-deep);color:#fff}
.resultat b{display:block;font-family:Montserrat,sans-serif;font-size:11.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62);margin:0 0 16px}
.resultat ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:16px 40px}
.resultat li{font-family:Spectral,serif;font-size:clamp(18px,2vw,21px);line-height:1.4;
  padding-left:22px;position:relative}
.resultat li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:2px;background:var(--crimson)}
@media (max-width:680px){.resultat ul{grid-template-columns:1fr}}

/* liste d'unités d'enseignement, avec crédits alignés à droite */
.ue-liste{margin:40px 0 0;border-top:1px solid var(--line)}
.ue{display:grid;grid-template-columns:1fr auto;gap:18px 26px;align-items:baseline;
  padding:20px 0 19px;border-bottom:1px solid var(--line)}
.ue b{font-family:Spectral,serif;font-size:18px;font-weight:600}
.ue span{display:block;margin-top:5px;font-size:14.4px;line-height:1.62;color:var(--muted);max-width:72ch}
.ue i{font-family:Montserrat,sans-serif;font-style:normal;font-size:11.5px;font-weight:500;
  letter-spacing:.12em;color:var(--crimson);white-space:nowrap}
.ue-note{margin:18px 0 0;font-size:13.6px;color:var(--muted)}

/* tableau à deux colonnes : le Master 1 à gauche, le Master 2 à droite, chacun
   refermé par le bouton qui ouvre sa maquette */
.cursus-duo{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);margin:8px 0 0}
.cursus-col{background:#fff;padding:46px 42px 42px;display:flex;flex-direction:column}
.cursus-rang{margin:0 0 14px;font-family:Montserrat,sans-serif;font-size:11.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--crimson)}
.cursus-col h3{margin:0 0 8px;font-family:Spectral,serif;font-weight:400;
  font-size:clamp(26px,2.9vw,34px);line-height:1.14}
.cursus-sous{margin:0 0 30px;font-family:Spectral,serif;font-style:italic;font-size:16.5px;
  line-height:1.6;color:var(--muted)}
.cursus-col p{font-size:15.4px;line-height:1.75;color:var(--muted);
  text-align:justify;hyphens:auto}
.cursus-col .ue span{text-align:justify;hyphens:auto}
/* Le bloc des diplômes et le bouton forment un pied de colonne : c'est lui qui
   se cale en bas, de sorte que les deux colonnes se terminent au même niveau
   quelle que soit la longueur des listes au-dessus. */
.cursus-col h4{margin:34px 0 14px;font-family:Montserrat,sans-serif;font-size:11.5px;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink);
  padding-bottom:10px;border-bottom:1px solid var(--line)}
.cursus-col .ue-liste{margin:0;border-top:0}
.cursus-col .ue{padding:15px 0 14px}
.cursus-col .ue b{font-size:16px}
.cursus-col .ue span{font-size:13.8px;margin-top:4px}
.cursus-col .ue-note{margin-top:16px;font-size:13.2px}
.cursus-col .resultat{margin:auto 0 0;padding:26px 28px 28px}
.cursus-col .resultat ul{grid-template-columns:1fr;gap:12px}
.cursus-col .resultat li{font-size:17.5px}
/* le bouton de maquette se cale en bas de colonne, quelle que soit la hauteur du texte */
.plaquette{margin:38px 0 0;width:100%;text-align:left;font:inherit;cursor:pointer;
  background:var(--stone-soft);border:1px solid var(--line);border-left:3px solid var(--crimson);
  padding:22px 26px 24px;display:flex;flex-direction:column;gap:6px;
  transition:background .2s ease,border-color .2s ease}
.cursus-col .plaquette{margin-top:30px}
.plaquette:hover,.plaquette:focus-visible{background:#fff;border-color:var(--crimson)}
.plaquette em{font-style:normal;font-family:Montserrat,sans-serif;font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--crimson)}
.plaquette b{font-family:Spectral,serif;font-size:18.5px;font-weight:600}
.plaquette span{font-size:13.6px;color:var(--muted)}
@media (max-width:860px){.cursus-duo{grid-template-columns:1fr}.cursus-col{padding:38px 28px 34px}}