/* 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)}
/* Le filet rouge du titre serait invisible sur ce rouge : il passe au blanc. */
.modules .sec-head::before{background:#fff}
.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)}
#debouches .sec-head::before{background:#fff}

.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{margin:40px 0 0;padding:32px 0 0;border-top:1px solid rgba(255,255,255,.26)}

/* ---------- la voie universitaire ----------
   Une case en largeur, l'illustration à gauche et le texte à droite : elle ne
   nomme qu'une destination, là où les domaines en nomment six, et la mettre en
   colonne à côté d'elles l'aurait rangée au même rang qu'une matière.

   L'image se fond par la droite plutôt que par le bas — c'est le bord qui
   touche le texte. Sans image, la case se referme sur sa seule colonne. */
.deb-univ{display:grid;grid-template-columns:minmax(0,1fr);background:#fff;
  border-top:3px solid var(--crimson);overflow:hidden;transition:background .3s ease}
.deb-univ[style]{grid-template-columns:minmax(0,.44fr) minmax(0,1fr)}
.deb-univ:hover{background:rgba(194,3,25,.04)}
.deb-univ-vue{display:none}
/* Elle est posée en entier et non recadrée : le dessin va d'un bord à l'autre
   de sa colonne et sa hauteur suit, plutôt que de remplir une case au rapport
   imposé — un cadrage y coupait les livres de droite. */
.deb-univ[style] .deb-univ-vue{display:block;align-self:center;aspect-ratio:840/300;
  background:#fff var(--fond) 50% 50%/contain no-repeat;
  transform:scale(1);transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.deb-univ:hover .deb-univ-vue{transform:scale(1.03)}
.deb-apres-corps{align-self:center;padding:26px 28px 28px;max-width:66ch}

/* ---------- les six domaines ----------
   Le même modèle que les cases des cabinets, en plus serré : six matières, une
   illustration chacune, et le nom seul dessous — ces noms se suffisent, et une
   ligne d'explication sous chacun aurait fait six paragraphes là où il n'y a
   qu'une énumération. */
.deb-dom-titre{margin:44px 0 20px;font-family:Spectral,Georgia,serif;font-weight:400;
  font-size:clamp(20px,1.9vw,24px);line-height:1.2;color:var(--ink)}
.deb-dom-liste{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;background:var(--line)}
.deb-dom-liste li{background:#fff;padding:0;overflow:hidden;
  display:flex;flex-direction:column;border-top:3px solid var(--crimson);
  transition:background .3s ease}
.deb-dom-liste li:hover{background:rgba(194,3,25,.04)}
.deb-dom-vue{display:none}
.deb-dom-liste li[style] .deb-dom-vue{display:block;aspect-ratio:3/2;
  background:#fff var(--fond) 50% 100%/cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg,#000 88%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(180deg,#000 88%,rgba(0,0,0,0) 100%);
  transform:scale(1);transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.deb-dom-liste li:hover .deb-dom-vue{transform:scale(1.05)}
.deb-dom-corps{flex:1;padding:14px 16px 20px}
.deb-dom-liste li[style] .deb-dom-corps{padding-top:8px}
.deb-dom-liste b{display:block;font-family:Archivo,sans-serif;font-weight:600;
  font-size:14.5px;line-height:1.3;letter-spacing:-.008em;color:var(--ink);text-wrap:pretty}
@media (max-width:1040px){.deb-dom-liste{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px){.deb-dom-liste{grid-template-columns:repeat(2,minmax(0,1fr))}}

@media (max-width:900px){
  .deb-apres{margin-top:10px}
  /* Empilée, l'illustration prend toute la largeur de la case : son rapport la
     ferait alors plus haute que le texte qu'elle annonce. On la borne. */
  .deb-univ[style]{grid-template-columns:1fr}
  .deb-univ[style] .deb-univ-vue{max-height:190px}
  .deb-apres-corps{padding-top:4px;max-width:none}
}

/* 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}
}
/* « Voir les parcours de nos diplômés » ne tient plus sur une ligne une fois
   retranchées les marges de page et le rembourrage du cadre : à 360 px — un
   iPhone SE — le bouton dépassait de 10 px et rendait toute la page glissable
   latéralement. Il s'autorise donc à passer à la ligne, et se resserre. */
@media (max-width:420px){
  .deb-cta{padding:26px 18px 28px}
  .deb-cta-bouton{white-space:normal;text-align:center;padding:14px 18px}
}

@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 */
/* Deux îlots séparés, et non deux colonnes d'un même tableau : les deux années
   ne se lisent pas l'une contre l'autre, elles se suivent. Le cadre et l'ombre
   quittent donc le conteneur pour chaque colonne, qui devient un bloc à part. */
.cursus-duo{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:8px 0 0}
.cursus-col{position:relative;background:#fff;border:1px solid var(--line);
  box-shadow:var(--ombre-bloc);padding:36px 34px 34px;display:flex;flex-direction:column;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .35s ease}

/* ---------- l'angle qui se trace au survol ----------
   Repris du DJCE de Caen, où un filet se tire le long du bord gauche de chaque
   carte. Ici il ne suit pas un côté mais un angle : deux segments partent du
   coin et courent chacun sur son bord, en même temps, de sorte que c'est bien
   le coin qu'on voit s'allumer et non deux traits indépendants.

   L'angle choisi est celui qui regarde vers l'extérieur du couple — en bas à
   gauche pour le Master 1, en haut à droite pour le Master 2 : les deux traits
   s'écartent l'un de l'autre au lieu de se faire face de part et d'autre de la
   gouttière. */
.cursus-col::before,.cursus-col::after{content:"";position:absolute;
  background:var(--crimson);pointer-events:none;
  transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.cursus-col::before{left:0;right:0;height:2px;transform:scaleX(0)}
.cursus-col::after{top:0;bottom:0;width:2px;transform:scaleY(0)}
/* Master 1 : l'angle en bas à gauche. */
.cursus-col:first-child::before{bottom:0;transform-origin:left}
.cursus-col:first-child::after{left:0;transform-origin:bottom}
/* Master 2 : l'angle en haut à droite. */
.cursus-col:last-child::before{top:0;transform-origin:right}
.cursus-col:last-child::after{right:0;transform-origin:top}

.cursus-col:hover{transform:translateY(-3px);border-color:rgba(28,28,28,.22);
  box-shadow:0 28px 58px -20px rgba(28,28,28,.3)}
.cursus-col:hover::before{transform:scaleX(1)}
.cursus-col:hover::after{transform:scaleY(1)}

/* Sans mouvement, le tracé devient une présence : l'angle paraît d'un coup,
   et la carte ne se soulève pas. */
@media (prefers-reduced-motion:reduce){
  .cursus-col,.cursus-col::before,.cursus-col::after{transition:none}
  .cursus-col:hover{transform:none}
}
.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}
/* Les paragraphes n'avaient pas de marge à eux : ils gardaient celle du
   navigateur, un quart de centimètre en haut comme en bas. La colonne étant
   une boîte flexible, ces marges ne fusionnent pas avec celle du sous-titre —
   le texte commençait quarante-cinq pixels plus bas qu'il n'y paraît à la
   lecture de la règle. On les écrit, et le texte remonte. */
.cursus-sous{margin:0 0 22px;font-family:Spectral,serif;font-style:italic;font-size:16.5px;
  line-height:1.6;color:var(--muted)}
/* Le surtitre et le sous-titre sont aussi des « p », et une règle écrite sur
   « .cursus-col p » l'emporterait sur la leur, qui n'a qu'une classe. On vise
   donc les seuls paragraphes courants. */
.cursus-col p:not(.cursus-rang):not(.cursus-sous){margin:0 0 20px;
  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:26px 0 12px;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:22px 24px 24px}
.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;gap:24px}
  .cursus-col{padding:30px 24px 28px}}


/* ---------- la présentation en vidéo ----------
   Un lien vers YouTube, pas une vidéo intégrée : l'intégration peut être
   refusée par le propriétaire de la vidéo, et le cadre affiche alors « la
   lecture sur d'autres sites a été désactivée » — un message d'erreur en plein
   milieu de la page. Un lien ne peut pas tomber en panne de cette façon, et il
   ne dépose aucun traceur avant qu'on ait cliqué.

   Deux colonnes plutôt qu'un titre, un paragraphe et une vidéo empilés : le
   texte tient la gauche, l'écran occupe la droite et devient le point d'entrée
   évident. C'est aussi ce qui permet de servir une vignette de 640 px sans
   qu'elle paraisse molle — elle n'est jamais affichée plus large que 600. */
.presentation{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:30px 56px;align-items:center}
.presentation-mot{max-width:46ch}
.presentation-sur{margin:0 0 14px;font-family:Montserrat,sans-serif;font-size:11px;
  font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--crimson);
  display:flex;align-items:center;gap:13px}
.presentation-sur::before{content:"";width:28px;height:2px;background:var(--crimson);flex:none}
.presentation-mot h2{margin:0 0 16px;font-size:clamp(28px,3.2vw,40px);font-weight:300;
  line-height:1.16}
.presentation-texte{margin:0 0 26px;font-size:16.6px;line-height:1.75;color:var(--muted)}
.presentation-lien{font-family:Montserrat,sans-serif;font-size:11.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--crimson);
  border-bottom:1px solid currentColor;padding-bottom:4px;
  transition:color .24s ease}
.presentation-lien::after{content:" \2197";display:inline-block;transition:transform .24s ease}
.presentation-lien:hover{color:var(--crimson-dark)}
.presentation-lien:hover::after{transform:translate(2px,-2px)}

/* Le raccourci vers les débouchés.
   Il est en contour et non en plein : la vidéo reste le sujet de ce bloc, et
   deux aplats rouges l'un sous l'autre se disputeraient l'œil. La flèche
   descend, parce que c'est ce que fait le lien — il va plus bas dans la même
   page. */
.presentation-gestes{display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px;margin:30px 0 0}
.presentation-debouches{display:inline-flex;align-items:center;gap:9px;padding:13px 22px;
  font-family:Montserrat,sans-serif;font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
  transition:background .24s ease,border-color .24s ease,color .24s ease}
.presentation-debouches::after{content:"\2193";font-size:15px;line-height:1;
  transition:transform .3s cubic-bezier(.22,.61,.36,1)}
.presentation-debouches:hover::after{transform:translateY(3px)}
@media (max-width:620px){.presentation-debouches{width:100%;justify-content:center}}

/* L'écran : la carte de titre de la vidéo, et le bouton par-dessus. La carte
   est claire et sobre — on ne l'assombrit pas, on pose simplement le disque
   rouge dessus. */
.presentation-ecran{position:relative;display:block;background:#fff;cursor:pointer;
  border:1px solid var(--line);overflow:hidden;box-shadow:var(--ombre-bloc);
  transition:transform .32s cubic-bezier(.22,.7,.3,1),box-shadow .32s ease,border-color .32s ease}
.presentation-ecran img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.3,1)}
/* Une fois le lecteur inséré, la carte cesse de se soulever : on ne déplace
   pas une vidéo qu'on est en train de regarder. */
.presentation-ecran iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
/* Une fois le lecteur inséré, la carte ne se soulève plus au survol — mais elle
   garde son ombre au repos : la perdre en cours de lecture la ferait retomber
   dans la page. */
.presentation-ecran:has(iframe){cursor:default;transform:none;box-shadow:var(--ombre-bloc)}
.presentation-ecran:has(iframe):hover{transform:none}
.presentation-ecran .presentation-lecture{border:0;padding:0;cursor:pointer}
.presentation-ecran:hover{transform:translateY(-4px);border-color:rgba(194,3,25,.42);
  box-shadow:0 22px 44px -18px rgba(142,2,18,.26)}
.presentation-ecran:hover img{transform:scale(1.03)}

.presentation-lecture{position:absolute;opacity:1;left:50%;top:50%;width:78px;height:78px;
  margin:-39px 0 0 -39px;border-radius:50%;background:var(--crimson);
  box-shadow:0 10px 30px -8px rgba(142,2,18,.5);
  display:flex;align-items:center;justify-content:center;
  transition:transform .32s cubic-bezier(.22,.7,.3,1),background .24s ease,opacity .3s ease}
/* Le triangle est découpé dans un carré blanc : pas d'image à charger, et il
   reste net à toutes les tailles. Décalé de 3 px vers la droite, sans quoi il
   paraît excentré — son centre optique n'est pas son centre géométrique. */
.presentation-lecture::before{content:"";width:26px;height:28px;margin-left:5px;
  background:#fff;clip-path:polygon(0 0, 100% 50%, 0 100%)}
.presentation-ecran:hover .presentation-lecture{transform:scale(1.09);background:var(--crimson-dark)}

/* L'espace entre la vidéo et le cursus : cent quatre pixels de chaque côté
   faisaient deux cents pixels de blanc entre deux blocs qui se répondent. */
#vue-formation #presentation{padding-bottom:64px}

/* ---------- la matière du bloc de présentation ----------
   Des filets horizontaux serrés, tous les 14 px, partant tous du bord gauche de
   la page et s'arrêtant chacun à sa longueur. Le bord droit dessine donc une
   descente, dont la pente change une fois.

   Au-dessus de la vidéo il n'y a rien à éviter : les trois premiers filent
   jusqu'au milieu de sa largeur, puis la descente rejoint le coin haut-gauche
   de l'image — 46,5 % de large, 20,5 % de haut. En dessous elle repart plus
   doucement et s'éteint au bas de la section. La cassure tombe exactement sur
   ce coin : c'est l'image qui la commande, et c'est ce qui garantit qu'aucun
   trait ne la touche.

   Le premier trait est tracé jusqu'à 74,5 % et non 68,5 : l'effilage du dernier
   cinquième mange la fin, et c'est la fin visible, mesurée à l'écran, qui doit
   tomber au milieu de la vidéo.

   La bande est découpée dans un masque et non obtenue par un fondu : un fondu
   agit colonne par colonne, et tous les traits mourraient au même endroit. Ici
   chacun a sa fin propre, et s'effile sur son dernier cinquième. */
#vue-formation #presentation{position:relative;isolation:isolate}
#vue-formation #presentation::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(28,28,28,.075) 0 1px,transparent 1px 14px);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='f' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='.82' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='url(%23f)'%3E%3Crect x='0' y='0.0000' width='74.500' height='2.9412'/%3E%3Crect x='0' y='2.9412' width='70.361' height='2.9412'/%3E%3Crect x='0' y='5.8824' width='66.222' height='2.9412'/%3E%3Crect x='0' y='8.8235' width='62.083' height='2.9412'/%3E%3Crect x='0' y='11.7647' width='57.944' height='2.9412'/%3E%3Crect x='0' y='14.7059' width='53.805' height='2.9412'/%3E%3Crect x='0' y='17.6471' width='49.666' height='2.9412'/%3E%3Crect x='0' y='20.5882' width='46.101' height='2.9412'/%3E%3Crect x='0' y='23.5294' width='44.404' height='2.9412'/%3E%3Crect x='0' y='26.4706' width='42.707' height='2.9412'/%3E%3Crect x='0' y='29.4118' width='41.010' height='2.9412'/%3E%3Crect x='0' y='32.3529' width='39.313' height='2.9412'/%3E%3Crect x='0' y='35.2941' width='37.616' height='2.9412'/%3E%3Crect x='0' y='38.2353' width='35.919' height='2.9412'/%3E%3Crect x='0' y='41.1765' width='34.222' height='2.9412'/%3E%3Crect x='0' y='44.1176' width='32.525' height='2.9412'/%3E%3Crect x='0' y='47.0588' width='30.828' height='2.9412'/%3E%3Crect x='0' y='50.0000' width='29.132' height='2.9412'/%3E%3Crect x='0' y='52.9412' width='27.435' height='2.9412'/%3E%3Crect x='0' y='55.8824' width='25.738' height='2.9412'/%3E%3Crect x='0' y='58.8235' width='24.041' height='2.9412'/%3E%3Crect x='0' y='61.7647' width='22.344' height='2.9412'/%3E%3Crect x='0' y='64.7059' width='20.647' height='2.9412'/%3E%3Crect x='0' y='67.6471' width='18.950' height='2.9412'/%3E%3Crect x='0' y='70.5882' width='17.253' height='2.9412'/%3E%3Crect x='0' y='73.5294' width='15.556' height='2.9412'/%3E%3Crect x='0' y='76.4706' width='13.859' height='2.9412'/%3E%3Crect x='0' y='79.4118' width='12.162' height='2.9412'/%3E%3Crect x='0' y='82.3529' width='10.465' height='2.9412'/%3E%3Crect x='0' y='85.2941' width='8.768' height='2.9412'/%3E%3Crect x='0' y='88.2353' width='7.071' height='2.9412'/%3E%3Crect x='0' y='91.1765' width='5.374' height='2.9412'/%3E%3Crect x='0' y='94.1176' width='3.677' height='2.9412'/%3E%3Crect x='0' y='97.0588' width='1.980' height='2.9412'/%3E%3C/g%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='f' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='.82' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='url(%23f)'%3E%3Crect x='0' y='0.0000' width='74.500' height='2.9412'/%3E%3Crect x='0' y='2.9412' width='70.361' height='2.9412'/%3E%3Crect x='0' y='5.8824' width='66.222' height='2.9412'/%3E%3Crect x='0' y='8.8235' width='62.083' height='2.9412'/%3E%3Crect x='0' y='11.7647' width='57.944' height='2.9412'/%3E%3Crect x='0' y='14.7059' width='53.805' height='2.9412'/%3E%3Crect x='0' y='17.6471' width='49.666' height='2.9412'/%3E%3Crect x='0' y='20.5882' width='46.101' height='2.9412'/%3E%3Crect x='0' y='23.5294' width='44.404' height='2.9412'/%3E%3Crect x='0' y='26.4706' width='42.707' height='2.9412'/%3E%3Crect x='0' y='29.4118' width='41.010' height='2.9412'/%3E%3Crect x='0' y='32.3529' width='39.313' height='2.9412'/%3E%3Crect x='0' y='35.2941' width='37.616' height='2.9412'/%3E%3Crect x='0' y='38.2353' width='35.919' height='2.9412'/%3E%3Crect x='0' y='41.1765' width='34.222' height='2.9412'/%3E%3Crect x='0' y='44.1176' width='32.525' height='2.9412'/%3E%3Crect x='0' y='47.0588' width='30.828' height='2.9412'/%3E%3Crect x='0' y='50.0000' width='29.132' height='2.9412'/%3E%3Crect x='0' y='52.9412' width='27.435' height='2.9412'/%3E%3Crect x='0' y='55.8824' width='25.738' height='2.9412'/%3E%3Crect x='0' y='58.8235' width='24.041' height='2.9412'/%3E%3Crect x='0' y='61.7647' width='22.344' height='2.9412'/%3E%3Crect x='0' y='64.7059' width='20.647' height='2.9412'/%3E%3Crect x='0' y='67.6471' width='18.950' height='2.9412'/%3E%3Crect x='0' y='70.5882' width='17.253' height='2.9412'/%3E%3Crect x='0' y='73.5294' width='15.556' height='2.9412'/%3E%3Crect x='0' y='76.4706' width='13.859' height='2.9412'/%3E%3Crect x='0' y='79.4118' width='12.162' height='2.9412'/%3E%3Crect x='0' y='82.3529' width='10.465' height='2.9412'/%3E%3Crect x='0' y='85.2941' width='8.768' height='2.9412'/%3E%3Crect x='0' y='88.2353' width='7.071' height='2.9412'/%3E%3Crect x='0' y='91.1765' width='5.374' height='2.9412'/%3E%3Crect x='0' y='94.1176' width='3.677' height='2.9412'/%3E%3Crect x='0' y='97.0588' width='1.980' height='2.9412'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
#vue-formation #cursus{padding-top:64px;position:relative;isolation:isolate}

/* ---------- les croix du bas du cursus ----------
   Entre le bas des deux îlots du Master et le panneau des débouchés, la page
   laissait une bande vide de près de trois cents pixels : le gris du panneau
   suivant s'y dissipait, et plus rien ne s'y passait.

   Les croix l'occupent. Elles éclosent du bas à droite et se dissipent en
   montant vers la gauche, à l'inverse de celles qui naissent du bas à gauche
   dans les débouchés : les deux semis se répondent de part et d'autre de la
   jonction au lieu de se répéter.

   Elles passent derrière les deux îlots, qui sont opaques, et ne se voient
   donc que dans leurs marges et sous eux. */
#vue-formation #cursus::before{content:"";position:absolute;inset:0;z-index:-1;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M22 17.5v9M17.5 22h9' stroke='%231C1C1C' stroke-opacity='.26' stroke-width='1'/%3E%3C/svg%3E");
  -webkit-mask-image:radial-gradient(74% 54% at 98% 100%,#000 6%,transparent 76%);
  mask-image:radial-gradient(74% 54% at 98% 100%,#000 6%,transparent 76%)}

/* Vidéo hébergée par nous : même cadre, mais c'est une vidéo et non une image,
   et le bouton est un vrai bouton — il disparaît dès que la lecture commence. */
.presentation-ecran-local{cursor:default}
.presentation-ecran-local video{display:block;width:100%;aspect-ratio:16/9;
  object-fit:cover;background:#000}
.presentation-ecran-local .presentation-lecture{border:0;padding:0;cursor:pointer}
.presentation-ecran-local.en-lecture .presentation-lecture{opacity:0;pointer-events:none}
.presentation-ecran-local:hover{transform:none;box-shadow:0 18px 46px rgba(0,0,0,.34)}
.presentation-ecran-local:hover .presentation-lecture{transform:scale(1.09);
  background:var(--crimson-dark)}

@media (max-width:900px){
  .presentation{grid-template-columns:1fr;gap:28px}
  .presentation-mot{max-width:none}
  .presentation-lecture{width:64px;height:64px;margin:-32px 0 0 -32px}
  .presentation-lecture::before{width:21px;height:23px;margin-left:4px}
}

/* ---------- les débouchés : un panneau clair, non plus une bande rouge ----------
   L'aplat cramoisi occupait toute la largeur, en bas de page, juste avant le
   pied noir : il se lisait comme un second pied de page, et on le survolait
   sans le lire. Le bloc devient un panneau gris posé sur du blanc, avec le
   filet et l'ombre des autres panneaux du site. On y entre parce qu'il se
   détache, et non malgré sa couleur.

   Toutes les couleurs de l'intérieur étaient écrites en blanc, pour le rouge.
   Elles sont reprises ici en un seul bloc plutôt que ligne à ligne : revenir à
   la bande rouge ne demanderait que de retirer ce bloc. */
/* La section est blanche, mais elle ne commence pas blanche : le gris du
   cursus juste au-dessus s'y prolonge et s'éteint sur cent soixante pixels.
   Sans ce fondu, le passage de #F1F1F2 à #FFFFFF se lisait comme un trait
   horizontal en travers de la page — une arête que rien ne justifiait, puisque
   les deux sections parlent de la même chose.

   C'est le gris qui descend dans le blanc, et non l'inverse : la couleur de
   fond reste le blanc, et le dégradé n'est qu'un calque qui se dissipe. La
   section garde donc son fond même si le dégradé venait à manquer. */
#vue-formation #debouches{background-color:var(--paper);color:var(--ink);
  background-image:linear-gradient(180deg,var(--gris-page) 0,rgba(241,241,242,0) 160px);
  background-repeat:no-repeat;
  position:relative;isolation:isolate}
/* Les croix de la page des promotions et des partenariats occupent le blanc
   autour du panneau : elles naissent du bas à gauche, là où la page s'ouvre sur
   le pied, et se dissipent en montant à droite. Elles passent derrière le
   panneau, qui est opaque, et ne se voient donc que dans ses marges. */
#vue-formation #debouches::before{content:"";position:absolute;inset:0;z-index:-1;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M22 17.5v9M17.5 22h9' stroke='%231C1C1C' stroke-opacity='.26' stroke-width='1'/%3E%3C/svg%3E");
  -webkit-mask-image:radial-gradient(76% 62% at 2% 100%,#000 6%,transparent 78%),
    radial-gradient(58% 24% at 98% 0%,#000 6%,transparent 76%);
  mask-image:radial-gradient(76% 62% at 2% 100%,#000 6%,transparent 78%),
    radial-gradient(58% 24% at 98% 0%,#000 6%,transparent 76%)}
#vue-formation #debouches>.wrap{background:var(--gris-page);
  box-shadow:var(--filet-bloc),var(--ombre-bloc);padding:56px 48px 60px}
#vue-formation #debouches .sec-head h2{color:var(--ink)}
#vue-formation #debouches .sec-head p{color:var(--muted)}
#vue-formation #debouches .sec-head::before{background:var(--crimson)}
#vue-formation #debouches .voie-deb-rang{color:var(--crimson)}
#vue-formation #debouches .voie-deb-rang::after{background:var(--crimson)}
#vue-formation #debouches .voie-deb h3{color:var(--ink)}
#vue-formation #debouches .voie-deb-chapeau{color:var(--muted)}
#vue-formation #debouches .voie-deb-liste{border-top-color:var(--line)}
#vue-formation #debouches .voie-deb-liste li{border-bottom-color:var(--line);color:var(--ink)}
#vue-formation #debouches .voie-deb-liste li span{color:var(--muted)}
#vue-formation #debouches .voie-deb-liste li::before{background:var(--crimson)}
#vue-formation #debouches .voie-deb-liste li:hover{color:var(--crimson)}
#vue-formation #debouches .deb-reseau{border-top-color:var(--line)}
#vue-formation #debouches .deb-reseau-texte p{color:var(--ink)}
#vue-formation #debouches .deb-apres{border-top-color:var(--line)}
#vue-formation #debouches .deb-apres-titre{color:var(--crimson)}
#vue-formation #debouches .deb-apres-texte{color:var(--muted)}
#vue-formation #debouches .deb-cta{background:#fff;color:var(--ink);border-color:var(--line)}
#vue-formation #debouches .deb-cta:hover,
#vue-formation #debouches .deb-cta:focus-visible{background:#fff;border-color:var(--crimson)}
#vue-formation #debouches .deb-cta-phrase{color:var(--ink)}
#vue-formation #debouches .deb-cta-bouton{border-color:var(--crimson);color:var(--crimson)}
#vue-formation #debouches .deb-cta:hover .deb-cta-bouton{background:var(--crimson);color:#fff}

/* ---------- les débouchés : donner envie d'y entrer ----------
   La section disait tout sur le même ton : trois colonnes au ras les unes des
   autres, des numéros de quinze pixels, des listes de métiers séparées de
   filets, puis deux blocs de texte au même corps. Rien n'y accrochait l'œil, et
   c'est pourtant la page qu'un candidat vient chercher.

   Trois changements de hiérarchie, aucun de contenu.

   1. Les trois voies deviennent trois cartes blanches posées sur le gris. Elles
      se lisaient comme un seul bloc coupé de filets ; elles se lisent maintenant
      comme trois destinations.
   2. Le numéro passe de quinze à cinquante-deux pixels, en Spectral maigre et en
      gris clair. C'est lui qui donne le point d'entrée de chaque carte, et un
      chiffre maigre et grand pèse moins qu'un petit chiffre gras.
   3. « Le réseau DJCE » devient l'énoncé de la section plutôt qu'un paragraphe
      parmi d'autres : c'est là qu'est l'argument — pourquoi ces portes s'ouvrent
      — et il passe au corps d'une citation, sur une seule colonne. */
#vue-formation #debouches .voies-deb{grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
/* Les rangées ne sont plus alignées d'une colonne à l'autre : elles l'étaient
   quand les trois voies formaient un seul bloc, pour que les listes partent du
   même trait. Ce sont des cartes maintenant, chacune se lit pour elle-même, et
   l'alignement n'achète plus que des trous entre le chapeau et la liste. */
#vue-formation #debouches .voie-deb{padding:28px 26px 30px;
  display:flex;flex-direction:column;grid-row:auto;
  box-shadow:0 0 0 1px var(--line);
  /* Le fond : la couleur toujours, l'image seulement si /admin en a choisi une.
     Sans elle, « var(--fond) » laisse la déclaration sans valeur et le navigateur
     retombe sur « aucune image » — la couleur, elle, est écrite à part et tient.
     Le voile blanc est épais : la photo doit rester une présence, le texte reste
     ce qu'on lit. */
  background-color:#fff;
  background-image:linear-gradient(rgba(255,255,255,.9),rgba(255,255,255,.95)),var(--fond);
  background-size:cover;background-position:center;
  transition:transform .35s cubic-bezier(.22,.7,.3,1),box-shadow .35s ease}
/* Au survol la carte se soulève, son filet fonce et le numéro s'assombrit. */
#vue-formation #debouches .voie-deb:hover{transform:translateY(-4px);
  box-shadow:0 0 0 1px rgba(28,28,28,.18),0 20px 42px -18px rgba(28,28,28,.28)}
#vue-formation #debouches .voie-deb:hover .voie-deb-rang{color:var(--crimson-dark)}
#vue-formation #debouches .voie-deb + .voie-deb{padding-left:26px}
#vue-formation #debouches .voie-deb:last-child{padding-right:26px}
/* Le filet vertical qui séparait les colonnes n'a plus d'objet : ce sont des
   cartes, l'espace entre elles suffit. */
#vue-formation #debouches .voie-deb + .voie-deb::before{display:none}

/* Le numéro passe au cramoisi, et il arrive après sa carte : la carte monte,
   puis le chiffre paraît dedans. L'ordre compte — un chiffre qui arrive en même
   temps que sa carte n'est qu'un élément de plus ; un chiffre qui arrive après
   est ce qu'on regarde.

   Le retard n'est posé que sur l'opacité et le déplacement : la couleur, elle,
   doit répondre au survol sans attendre deux dixièmes de seconde. */
#vue-formation #debouches .voie-deb-rang{margin:0 0 6px;font-family:Spectral,Georgia,serif;
  font-size:52px;font-weight:300;line-height:1;letter-spacing:-.02em;color:var(--crimson);
  opacity:0;transform:translateY(10px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1),color .28s ease}
#vue-formation #debouches .voies-deb.vu .voie-deb-rang{opacity:1;transform:none}
#vue-formation #debouches .voies-deb.vu .voie-deb:nth-child(1) .voie-deb-rang{transition-delay:.24s,.24s,0s}
#vue-formation #debouches .voies-deb.vu .voie-deb:nth-child(2) .voie-deb-rang{transition-delay:.36s,.36s,0s}
#vue-formation #debouches .voies-deb.vu .voie-deb:nth-child(3) .voie-deb-rang{transition-delay:.48s,.48s,0s}
@media (prefers-reduced-motion:reduce){
  #vue-formation #debouches .voie-deb-rang{opacity:1;transform:none;transition:none}
  #vue-formation #debouches .voie-deb:hover{transform:none}
}
#vue-formation #debouches .voie-deb-rang::after{display:none}
#vue-formation #debouches .voie-deb h3{margin:0 0 10px;font-family:Archivo,sans-serif;
  font-weight:600;font-size:17px;line-height:1.26;letter-spacing:-.011em;color:var(--ink)}
#vue-formation #debouches .voie-deb-chapeau{margin:0 0 20px;font-size:14.6px;
  font-family:Archivo,sans-serif;font-style:normal;line-height:1.6;color:var(--muted)}
#vue-formation #debouches .voie-deb-liste li{padding:9px 0 8px;font-size:14.6px}
#vue-formation #debouches .voie-deb-liste li span{font-size:13px;margin-top:3px}

/* L'énoncé : une seule colonne, au corps d'une citation. */
#vue-formation #debouches .deb-reseau{margin-top:46px;padding-top:38px}
/* Le texte prend toute la largeur du panneau. Borné à soixante-quatorze
   caractères, il laissait le tiers droit du lavis vide, et le bloc avait l'air
   d'une colonne posée dans un cadre trop grand. */
#vue-formation #debouches .deb-reseau-texte{grid-template-columns:1fr;gap:16px;
  margin-top:14px}
#vue-formation #debouches .deb-reseau-texte p{font-size:19.5px;line-height:1.62;color:var(--ink);
  /* Justifié : la colonne fait soixante-quatorze caractères, assez large pour
     que la justification répartisse sans creuser. La césure automatique s'y
     ajoute, faute de quoi un mot long en bout de ligne rouvrirait les trous
     qu'on cherche à éviter. */
  text-align:justify;hyphens:auto}
/* Les passages qui portent l'argument : le gras seul. Soulignés en plus, quatre
   traits dans six lignes hachaient le paragraphe — le gras suffit à les
   distinguer, et le texte se relit d'un trait. */
#vue-formation #debouches .deb-reseau-texte b{font-weight:600;color:var(--ink)}
#vue-formation #debouches .deb-apres-titre{font-size:11px;letter-spacing:.16em;font-weight:600}
/* Dans les deux cases, le titre n'est plus une étiquette au-dessus d'un
   registre : c'est le nom de la case, comme « Magic Circle » ou « Big Four ».
   Il en prend donc la forme — Archivo grasse, à l'encre, au corps d'un titre. */
#vue-formation #debouches .deb-apres-corps .deb-apres-titre{margin:0 0 10px;
  font-family:Archivo,sans-serif;font-size:19px;font-weight:600;line-height:1.22;
  letter-spacing:-.012em;text-transform:none;color:var(--ink)}
#vue-formation #debouches .deb-apres-corps .deb-apres-texte{font-size:15px;line-height:1.68}

@media (max-width:900px){
  #vue-formation #debouches .voies-deb{grid-template-columns:1fr}
  #vue-formation #debouches .voie-deb{grid-row:auto}
}

/* ---------- un peu de couleur dans les débouchés ----------
   La section était juste : panneau gris, cartes blanches, texte à l'encre. Elle
   était aussi terne, et c'est la page qu'un candidat vient chercher. Le
   cramoisi du diplôme y entre à trois endroits, choisis pour leur rôle et non
   pour remplir :

     — un bandeau au haut de chaque carte, qui les signe toutes les trois ;
     — un lavis derrière l'énoncé du réseau, parce que c'est l'argument ;
     — l'appel final en plein, là où l'on attend qu'on agisse.

   Pas de noir ajouté : le texte garde son encre, et le reste est du rouge
   dilué — cinq pour cent derrière l'énoncé, trois derrière l'appel. À cette
   dose la couleur se sent sans crier, et le texte continue de se lire. */
#vue-formation #debouches .voie-deb{border-top:3px solid var(--crimson)}

/* L'énoncé du réseau : sur un lavis, et non plus sur le gris nu. Le filet
   vertical remplace le filet horizontal qui le séparait de ce qui précède — un
   trait qui borde un bloc le désigne mieux qu'un trait qui le précède. */
#vue-formation #debouches .deb-reseau{border-top:0;border-left:3px solid var(--crimson);
  background:rgba(194,3,25,.05);margin-top:42px;padding:30px 34px 32px}
#vue-formation #debouches .deb-reseau-texte{margin-top:12px}

/* L'appel : en plein cramoisi, le seul aplat de la section. C'est le dernier
   bloc de la page avant le pied, et le seul qui demande quelque chose. */
#vue-formation #debouches .deb-cta{background:rgba(194,3,25,.04);
  border-color:rgba(194,3,25,.3)}
#vue-formation #debouches .deb-cta:hover,
#vue-formation #debouches .deb-cta:focus-visible{background:rgba(194,3,25,.07);
  border-color:var(--crimson)}
#vue-formation #debouches .deb-cta-bouton{background:var(--crimson);border-color:var(--crimson);
  color:#fff}
#vue-formation #debouches .deb-cta:hover .deb-cta-bouton{background:var(--crimson-dark);
  border-color:var(--crimson-dark)}

/* ---------- où exercent les DJCE ----------
   La question qu'un candidat pose en premier — chez qui vont les diplômés —
   n'avait pas de réponse sur la page : les trois cartes nomment des familles de
   destination et des métiers, jamais des maisons. Les quatre catégories du
   métier sont donc nommées, et nommées en grand.

   Le nom porte tout le poids : il est au corps d'un titre, en Archivo grasse,
   avec un filet cramoisi au-dessus. L'explication passe dessous, en gris et en
   petit — pour qui connaît déjà « Magic Circle », le nom suffit ; pour qui ne
   connaît pas, la ligne est là sans retarder la lecture. */
#vue-formation #debouches .deb-cab{margin:52px 0 0;padding:38px 0 0;
  border-top:1px solid var(--line)}
#vue-formation #debouches .deb-cab-titre{margin:0 0 10px;font-family:Spectral,Georgia,serif;
  font-weight:400;font-size:clamp(23px,2.3vw,29px);line-height:1.2;color:var(--ink)}
/* Le chapeau prend la forme de celui des sections : Montserrat, le même corps,
   et toute la largeur du panneau. C'est la même nature de phrase — une légende
   sous un titre — et rien ne justifiait qu'elle s'arrête à soixante-dix signes
   quand celle des débouchés court jusqu'au bord. */
#vue-formation #debouches .deb-cab-chapeau{margin:0 0 34px;max-width:none;
  font-family:Montserrat,sans-serif;font-size:16.5px;font-weight:400;line-height:1.62;
  color:var(--muted)}
/* Le filet entre les cases est tracé par les cases elles-mêmes, et non par le
   fond de la grille qu'on laisserait paraître dans l'écart. La différence se
   voit dès qu'une rangée n'est pas pleine : à trois colonnes, cinq cases en
   laissent une vide, et ce fond devenait un rectangle gris dans le coin. Les
   anneaux des cases voisines se superposent dans l'écart d'un pixel, le filet
   fait donc bien un pixel. */
#vue-formation #debouches .deb-cab-liste{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:none}
#vue-formation #debouches .deb-cab-liste li{background:#fff;padding:0;overflow:hidden;
  box-shadow:0 0 0 1px var(--line);
  display:flex;flex-direction:column;
  border-top:3px solid var(--crimson);
  transition:background .3s ease}
#vue-formation #debouches .deb-cab-liste li:hover{background:rgba(194,3,25,.04)}

/* L'illustration, quand il y en a une.
   Elle ne s'affiche que si la case porte un style — c'est-à-dire si une image a
   été choisie dans /admin ; sans elle, la case reste la case de texte d'avant.

   Elle est fondue par le bas : les dessins sont posés sur du blanc, et la case
   l'est aussi, donc un bord net ferait une arête là où il n'y a pas de matière.
   Le dégradé de masque dissout les dix derniers pour cent dans le papier, et le
   texte paraît sortir de l'image plutôt que lui succéder. */
#vue-formation #debouches .deb-cab-vue{display:none}
#vue-formation #debouches .deb-cab-liste li[style] .deb-cab-vue{display:block;
  aspect-ratio:560/336;background:#fff var(--fond) 50% 100%/cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg,#000 88%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(180deg,#000 88%,rgba(0,0,0,0) 100%);
  transform:scale(1);transition:transform .5s cubic-bezier(.22,.61,.36,1)}
#vue-formation #debouches .deb-cab-liste li:hover .deb-cab-vue{transform:scale(1.045)}

/* Le texte garde le dessus : il est à l'encre, sur le papier nu, et il commence
   assez bas sous l'image pour qu'on le lise comme le propos de la case et non
   comme une légende. */
#vue-formation #debouches .deb-cab-corps{flex:1;padding:18px 22px 24px}
#vue-formation #debouches .deb-cab-liste li[style] .deb-cab-corps{padding-top:10px}
#vue-formation #debouches .deb-cab-liste b{display:block;margin:0 0 9px;
  font-family:Archivo,sans-serif;font-weight:600;font-size:19px;line-height:1.22;
  letter-spacing:-.012em;color:var(--ink)}
#vue-formation #debouches .deb-cab-corps p{margin:0;font-size:14.2px;line-height:1.6;
  color:var(--muted)}
/* Cinq cases plutôt que quatre : la région est une destination à part entière,
   pas une note en bas des quatre autres. À la largeur du panneau, chacune fait
   un peu plus de deux cent trente pixels — assez pour l'illustration et deux
   lignes de nom. En dessous, on passe à trois puis à deux. */
@media (max-width:1180px){
  #vue-formation #debouches .deb-cab-liste{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
  #vue-formation #debouches .deb-cab-liste{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:480px){
  #vue-formation #debouches .deb-cab-liste{grid-template-columns:1fr}
}