/* 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. */
#vue-candidatures .sec{background:var(--gris-page)}

.credo{list-style:none;margin:26px 0 0;padding:0;max-width:74ch}
.credo li{position:relative;padding:0 0 15px 28px;font-size:15.6px;line-height:1.7;color:var(--muted);
  text-align:justify;hyphens:auto}
.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:74ch}
.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 ---------- */
/* 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. */
.voies{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line)}
.voie{background:#fff;padding:40px 36px 42px;display:flex;flex-direction:column}
.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)}
.voie h3{font-family:Spectral,serif;font-size:clamp(22px,2.3vw,27px);font-weight:400;
  margin:0 0 12px;line-height:1.25}
.voie-intro{margin:0;font-size:15.3px;line-height:1.68;color:var(--muted);
  text-align:justify;hyphens:auto}
.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}
.voie .credo{margin:12px 0 0;max-width:none}
.voie .credo li{padding-bottom:12px;font-size:15px}
.voie .credo li:last-child{padding-bottom:0}
.voie-pied{margin-top:auto;padding-top:34px}
.voie-pied .btn{padding:13px 26px;font-size:14.5px}
@media (max-width:900px){
  .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. */
.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))}

.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}

.grande-etape > p{margin:0;font-size:16.4px;line-height:1.78;color:var(--muted);max-width:74ch;
  text-align:justify;hyphens:auto}
.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:74ch}
.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:68ch}

/* 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. */
.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)}
  .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}
.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:justify;hyphens:auto}
.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}}

/* Renvoi vers la vidéo des co-directeurs, sous les critères du jury. */
.renvoi-video{margin-top:40px;padding:30px 34px;background:#fff;border:1px solid var(--line);
  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}
}