/* page Candidater : voies d'accès, parcours, appel final */

/* Fond de page gris. Les panneaux, jusqu'ici crème sur blanc, repassent au blanc :
   c'est le fond qui porte la teinte, comme sur les autres pages. */
/* ---------- la matière du fond ----------
   Une trame de points, et non le quadrillage de la bande du parrain : chaque
   page a la sienne, sans quoi la texture devient un papier peint de site.
   Les points conviennent à une page qui décrit un cheminement — ils comptent
   sans tracer de direction.

   Ils sont ancrés au bord gauche, à mi-hauteur, et se dissipent vers la droite :
   ils couvrent la marge où court le fil des étapes, passent derrière les
   paragraphes et s'éteignent avant les tableaux. À quatorze pour cent, ils ne
   gênent pas la lecture — un texte posé dessus se lit comme sur le fond nu.

   Le point fait un pixel à quatorze pour cent, tous les vingt-six : vu de près
   c'est une grille, vu de loin un grain. */
#vue-candidatures .sec{position:relative;isolation:isolate;background:var(--gris-page)}
#vue-candidatures .sec::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at center,rgba(28,28,28,.14) 1px,transparent 1.7px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(78% 88% at 1% 46%,#000 6%,transparent 76%);
  mask-image:radial-gradient(78% 88% at 1% 46%,#000 6%,transparent 76%)}

.credo{list-style:none;margin:26px 0 0;padding:0;max-width:92ch}
/* Drapeau à droite, sans césure : la justification obligeait à couper les
   mots en bout de ligne — « diplô-me », « entre-tien », « étu-diants » — et
   la retirer sans retirer la justification creuserait des blancs entre les
   mots. Le bord droit irrégulier coûte moins à la lecture que l'un ou
   l'autre. */
.credo li{position:relative;padding:0 0 15px 28px;font-size:15.6px;line-height:1.7;color:var(--muted);
  text-align:left;hyphens:manual}
.credo li::before{content:"";position:absolute;left:0;top:12px;width:12px;height:2px;background:var(--crimson)}
/* Sous-bloc titré suivi d'une liste : sert aux rubriques d'une même section
   (conditions d'accès, procédure…). Le filet rouge reprend celui des cartes. */
.bloc-liste{margin-top:40px;max-width:92ch}
.bloc-liste h3{font-size:21px;font-weight:600;margin:0;color:var(--ink)}
.bloc-liste .credo{margin-top:12px}
.credo li b{font-weight:600;color:var(--ink)}
/* Le trait par défaut colle aux jambages et paraît lourd sur un mot court. */
.credo li u{text-decoration-thickness:1px;text-underline-offset:.2em}
/* Paragraphe suivi d'une action : le bouton se place au bout du texte, calé sur
   sa hauteur, et repasse dessous dès que la largeur manque. */
.bloc-action{display:flex;flex-wrap:wrap;align-items:center;gap:24px 38px}
.bloc-action .btn{flex:none;padding:13px 28px}

/* ---------- bande photo pleine largeur ---------- */
/* Une respiration entre deux sections : rompt la succession d'aplats mieux
   qu'une couleur supplémentaire, et rappelle le lieu. */
.bande-photo{margin:0;line-height:0}
.bande-photo img{display:block;width:100%;height:clamp(190px,29vw,400px);
  object-fit:cover;object-position:center 42%}

/* ---------- les deux voies d'accès : panneaux jumeaux ---------- */
/* Rattachées à la vue : « voies » et « voie » servent aussi, avec un tout
   autre dessin, à la page « Devenir partenaire ou parrain » (partenariats.css).
   Les deux feuilles étant chargées sur toutes les pages, elles se mélangeaient :
   les panneaux d'ici héritaient du filet rouge et de la gouttière de 26 px de
   l'autre page, et l'autre page héritait du fond gris d'ici. Constaté le
   2026-10-02. */
/* Deux colonnes de même gabarit plutôt que deux sections empilées : le candidat
   repère d'un coup d'œil laquelle le concerne au lieu de lire les deux. */
#vue-candidatures .voies{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);box-shadow:var(--ombre-bloc)}
#vue-candidatures .voie{background:#fff;padding:40px 36px 42px;display:flex;flex-direction:column}
#vue-candidatures .voie-tag{margin:0 0 16px;font-family:Montserrat,sans-serif;font-size:11.5px;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:var(--crimson)}
#vue-candidatures .voie h3{font-family:Spectral,serif;font-size:clamp(22px,2.3vw,27px);font-weight:400;
  margin:0 0 12px;line-height:1.25}
#vue-candidatures .voie-intro{margin:0;font-size:15.3px;line-height:1.68;color:var(--muted);
  text-align:left;hyphens:manual}
#vue-candidatures .voie h4{font-family:Montserrat,sans-serif;font-size:11.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);margin:30px 0 0}
#vue-candidatures .voie .credo{margin:12px 0 0;max-width:none}
#vue-candidatures .voie .credo li{padding-bottom:12px;font-size:15px}
#vue-candidatures .voie .credo li:last-child{padding-bottom:0}
/* Deux boutons côte à côte sur l'audition nationale : ils passent l'un sous
   l'autre dès que la colonne se resserre. */
#vue-candidatures .voie-pied{margin-top:auto;padding-top:34px;
  display:flex;flex-wrap:wrap;gap:12px}
#vue-candidatures .voie-pied .btn{padding:13px 26px;font-size:14.5px}
@media (max-width:900px){
  #vue-candidatures .voies{grid-template-columns:1fr}
}

/* ---------- page Candidater ----------
   Trois temps : les deux voies côte à côte, le parcours en frise horizontale,
   puis un appel final sur fond sombre. */
#vue-candidatures .voie h4{margin:26px 0 12px;font-family:Montserrat,sans-serif;font-size:11px;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink);
  padding-bottom:9px;border-bottom:1px solid var(--line)}

/* ---------- grande frise du parcours ----------
   Une colonne qui descend, trois jalons numérotés : elle remplace à la fois la
   frise horizontale à quatre temps et le tableau des deux voies, ces dernières
   devenant le contenu de la deuxième étape.

   Le rail est un filet gris ; par-dessus, un second trait rouge se déplie à la
   verticale au fil du défilement. Sa hauteur vient de --avancement, une variable
   que js/frise.js met à jour entre 0 et 1 — le CSS fait tout le rendu. Sans
   JavaScript, la variable vaut 0 : il ne reste que le filet gris, et rien n'est
   caché. Le numéro est posé par un compteur : rien à renuméroter. */
.grande-frise{list-style:none;margin:56px 0 0;padding:0 0 0 108px;position:relative;
  counter-reset:jalon}
.grande-frise::before,
.grande-frise::after{content:"";position:absolute;left:35px;top:36px;width:2px;
  height:calc(100% - 72px)}
.grande-frise::before{background:var(--line)}
.grande-frise::after{background:var(--crimson);transform-origin:top;
  transform:scaleY(var(--avancement,0))}

/* Le trait de la dernière frise ne s'arrête plus au dernier jalon : il descend
   jusqu'au bandeau « Une question avant de candidater ? », qui est la suite du
   parcours et non un bloc de plus. Il s'arrêtait net au milieu d'un grand
   blanc, et le cheminement semblait se perdre.

   140 px : les 36 qui séparent le centre du dernier jalon du bas de la liste,
   plus les 104 de marge basse de la section. */
#candidater-m2 .grande-frise::before,
#candidater-m2 .grande-frise::after{height:calc(100% - 72px + 140px)}

/* 208 px séparaient la dernière ligne du parcours Master I du titre du parcours
   Master II — deux marges de section bout à bout. Ramenées à 104 : les deux
   parcours se suivent, ils n'ont pas à être séparés par un écran de blanc.
   La marge basse de #candidater-m2 ne bouge pas : c'est elle que le
   prolongement du trait ci-dessus mesure. */
#vue-candidatures #parcours{padding-bottom:44px}
#vue-candidatures #candidater-m2{padding-top:60px}

.grande-etape{position:relative;counter-increment:jalon;padding-bottom:92px}
.grande-etape:last-child{padding-bottom:0}

/* Le jalon : un cercle évidé, qui se remplit de rouge au passage de la ligne de
   lecture. Les deux rails sont les pseudo-éléments de la liste, donc ses
   derniers enfants : sans z-index, ils se dessinent par-dessus le cercle et le
   trait rouge le traverse. Le jalon repasse donc devant. */
.grande-etape::before{content:counter(jalon,decimal-leading-zero);
  position:absolute;left:-108px;top:0;width:72px;height:72px;border-radius:50%;z-index:1;
  display:flex;align-items:center;justify-content:center;
  background:var(--stone-soft);border:1px solid var(--line);color:var(--crimson);
  font-family:Spectral,serif;font-size:25px;font-weight:300;line-height:1;
  letter-spacing:.02em;
  transition:border-color .55s ease,color .55s ease,
             transform .55s cubic-bezier(.3,.7,.3,1)}
.sec:not(.alt) .grande-etape::before{background:#fff}
/* Le cercle ne se remplit pas au passage de la ligne de lecture : il reste
   clair, son chiffre passe simplement du rouge au noir et son filet au rouge.
   Un aplat rouge à cette taille pesait lourd dans une page qui n'en a nulle
   part ailleurs ; le contraste du chiffre suffit à dire que l'étape est
   franchie. */
.grande-etape.atteint::before{border-color:var(--crimson);
  color:var(--ink);transform:scale(1.06)}

/* Le titre glisse d'un cheveu et s'éclaircit tant que l'étape n'est pas atteinte :
   assez pour marquer la progression, trop peu pour gêner la lecture. */
.grande-etape > h3{margin:15px 0 16px;font-family:Spectral,serif;
  font-size:clamp(25px,2.7vw,34px);font-weight:300;line-height:1.18;
  opacity:.45;transform:translateY(6px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.3,.7,.3,1)}
.grande-etape.atteint > h3{opacity:1;transform:none}

/* 92ch plutôt que 74 : le paragraphe passe de 629 à 782 px sur une colonne de
   1016, soit près de quatre-vingt-dix-huit caractères par ligne au lieu de
   soixante-dix-neuf. Au-delà l'œil perd le début de la ligne suivante, et la
   justification creuserait des lézardes. */
.grande-etape > p{margin:0;font-size:16.4px;line-height:1.78;color:var(--muted);max-width:92ch;
  text-align:left;hyphens:manual}
.grande-etape > h4{margin:34px 0 14px;font-family:Montserrat,sans-serif;font-size:11px;
  font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--ink);
  padding-bottom:9px;border-bottom:1px solid var(--line);max-width:none}
.grande-etape > .credo{margin-top:0}
.grande-etape > p + h4{margin-top:38px}
/* Le chapeau de l'étape, en serif et plus grand : il annonce, les rubriques
   détaillent. La hiérarchie se voit avant même d'être lue. */
.grande-etape > h3 + p{font-family:Spectral,serif;font-weight:300;font-size:18.5px;
  line-height:1.66;color:#3B3B3B;max-width:82ch}

/* Deux rubriques courtes côte à côte plutôt qu'empilées : l'étape tient sur
   moins de hauteur et les deux listes se comparent d'un coup d'œil. */
.rubriques{display:grid;grid-template-columns:repeat(2,1fr);gap:0 46px;
  margin-top:38px;max-width:92ch}
.rubrique h4{margin:0 0 14px;font-family:Montserrat,sans-serif;font-size:11px;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink);
  padding-bottom:9px;border-bottom:1px solid var(--line)}
.rubrique .credo{margin:0;max-width:none}

/* Trois formalités de même poids : en colonnes, elles se lisent comme une
   liste de contrôle et non comme un paragraphe qui s'étire. */
.credo-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:0 34px;max-width:none}
.credo-trio li{padding-bottom:0;text-align:left}

@media (max-width:860px){
  .rubriques{grid-template-columns:1fr;gap:34px}
  .credo-trio{grid-template-columns:1fr}
  .credo-trio li{padding-bottom:14px}
}

/* Les deux voies sont le contenu de l'étape 2, les critères du jury la fin de
   l'étape 1 : ces blocs occupent toute la colonne, plus large que le texte. */
#vue-candidatures .grande-etape .voies{margin-top:32px}
/* Fonds inversés sur cette page : la section est blanche, ce sont les panneaux
   et les encarts qui portent le crème. L'en-tête de page garde le sien. */
.grande-etape .grid3{margin-top:26px}
#vue-candidatures .grid3 .card{background:#fff}

@media (max-width:1040px){.grande-etape .grid3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){
  .grande-frise{padding-left:66px}
  .grande-frise::before,.grande-frise::after{left:22px;top:23px;height:calc(100% - 46px)}
  /* Le prolongement jusqu'au bandeau suit les mesures d'ici : 23 px du centre
     du dernier jalon au bas de la liste, puis 66 de marge basse. */
  #candidater-m2 .grande-frise::before,
  #candidater-m2 .grande-frise::after{height:calc(100% - 46px + 89px)}
  #vue-candidatures #parcours{padding-bottom:28px}
  #vue-candidatures #candidater-m2{padding-top:40px}
  .grande-etape{padding-bottom:64px}
  .grande-etape::before{left:-66px;width:46px;height:46px;font-size:17px}
  .grande-etape > h3{margin-top:2px}
  .grande-etape .grid3{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .grande-etape > h3{opacity:1;transform:none}
}

/* appel final */
/* Rouge DJCE plutôt qu'anthracite : le pied de page est sombre, deux blocs
   noirs accolés se seraient confondus. */
.appel{background:var(--crimson-dark);color:#fff;padding:96px 0}

/* ---------- le trait traverse le bandeau ----------
   Le trait du parcours s'arrêtait au bord du rouge. Il le traverse désormais,
   en blanc, jusqu'au titre : « Une question avant de candidater ? » est la
   dernière étape du chemin, pas un bloc rapporté après coup.

   Le segment est accroché à la première colonne du bandeau, dont le bord gauche
   est celui du texte, et remonte jusqu'en haut de la bande : « --rail-haut »
   vaut donc la marge haute de la section, et « --rail-x » l'écart du trait au
   texte, 35 px tant que les jalons font 72 et 22 quand ils tombent à 46. */
.appel{--rail-haut:96px;--rail-x:35px;position:relative}
.appel .wrap > div:first-child{position:relative}
.appel .wrap > div:first-child::before{content:"";position:absolute;
  left:var(--rail-x);top:calc(var(--rail-haut) * -1);
  width:2px;height:var(--rail-haut);background:#fff;
  /* Il se tire au défilement, comme le trait rouge au-dessus : js/frise.js
     écrit « --trait ». Sans script, rien ne le tracerait — d'où la valeur de
     repli à 1, qui le montre entier plutôt que pas du tout. */
  transform:scaleY(var(--trait,1));transform-origin:top}
@media (prefers-reduced-motion:reduce){
  .appel .wrap > div:first-child::before{transform:none}
}
.appel .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:70px;align-items:center}
.appel h2{margin:0 0 18px;font-size:clamp(27px,3.1vw,38px);font-weight:300;line-height:1.16;color:#fff}
.appel p{margin:0;font-size:16px;line-height:1.76;color:rgba(255,255,255,.78);
  text-align:left;hyphens:manual}
.appel-actions{display:flex;flex-direction:column;gap:14px}
.appel-actions .btn{justify-content:center;text-align:center}
.appel-actions .btn-solid{background:#fff;color:var(--crimson-dark);border-color:#fff}
.appel-actions .btn-solid:hover{background:rgba(255,255,255,.86);color:var(--crimson-dark)}
.appel-actions .btn-ghost{border-color:rgba(255,255,255,.45);color:#fff}
.appel-actions .btn-ghost:hover{background:#fff;color:var(--crimson-dark);border-color:#fff}
.appel-contact{margin:22px 0 0;font-size:14.6px;line-height:1.8;color:rgba(255,255,255,.66)}
.appel-contact a{color:#fff;border-bottom:1px solid rgba(255,255,255,.45)}
.appel-contact a:hover{border-bottom-color:#fff}
@media (max-width:860px){.appel .wrap{grid-template-columns:1fr;gap:40px}.appel{padding:68px 0;--rail-haut:68px}}

/* Renvoi vers la vidéo des co-directeurs, sous les critères du jury. */
/* Même ombre que le tableau juste au-dessus : posé à plat sous un bloc
   détaché, celui-ci avait l'air d'être resté en arrière. */
.renvoi-video{margin-top:40px;padding:30px 34px;background:#fff;border:1px solid var(--line);
  box-shadow:var(--ombre-bloc);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 32px}
.renvoi-video p{margin:0;color:var(--muted);font-size:17px;max-width:52ch}
.renvoi-video .btn{padding:13px 26px;font-size:14.5px}
@media (max-width:700px){
  .renvoi-video{flex-direction:column;align-items:flex-start}
}

/* Les jalons tombent à 46 px sous 680, et le trait se rapproche du texte : le
   segment blanc du bandeau suit. Écrit ici, et non dans la requête média plus
   haut, parce que la règle de base de « .appel » lui est postérieure dans le
   fichier et l'emportait à égalité de spécificité. */
@media (max-width:680px){
  .appel{--rail-x:22px}
}