/* bandeau, navigation, menu mobile */

/* ---------- en-tête : bandeau blanc ---------- */
.site-head{position:fixed;top:0;left:0;right:0;z-index:50;background:#fff;border-top:3px solid var(--crimson);
  box-shadow:0 1px 0 var(--line);transition:box-shadow .3s ease,transform .58s cubic-bezier(.32,.72,.28,1)}
.site-head.cache{transform:translateY(-102%)}
.site-head.solid{box-shadow:0 6px 22px rgba(28,28,28,.09)}
.head-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:78px}
.brand{grid-column:2;grid-row:1;justify-self:center;display:block}
.brand img{height:66px;width:auto;display:block;transform-origin:center;
  transition:transform .5s cubic-bezier(.2,.7,.3,1),filter .5s ease}
.brand:hover img,.brand:focus-visible img{transform:translateY(-2px) scale(1.035);
  filter:drop-shadow(0 4px 10px rgba(158,6,22,.22))}

nav.main{display:contents}
nav.main>ul{display:flex;list-style:none;margin:0;padding:0;align-items:center}
.nav-left{grid-column:1;grid-row:1;justify-content:flex-end;padding-right:26px}
.nav-right{grid-column:3;grid-row:1;justify-content:flex-start;padding-left:26px}
nav.main li{position:relative}
/* ---------- le survol d'une rubrique ----------
   Le filet se trace depuis le centre, et non depuis la gauche. C'est le geste
   que fait déjà le site ailleurs : les deux traits cramoisis qui encadrent le
   surtitre des en-têtes s'ouvrent eux aussi du milieu vers les bords. Le menu
   parle donc la même langue que les pages, au lieu d'emprunter celle d'un
   autre site.

   Trois choses se produisent ensemble, et c'est leur accord qui fait
   l'animation plutôt que le trait seul : le mot monte d'un pixel, son
   interlettrage s'ouvre d'un quart de point, et le filet s'écarte. L'ensemble
   se lit comme une inspiration — le mot se redresse pour répondre.

   Le filet est plus fin qu'avant, 1,5 px au lieu de 2 : tracé depuis le centre
   il paraît plus présent à épaisseur égale. */
nav.main>ul>li>a{
  position:relative;display:flex;align-items:center;height:78px;padding:0 14px;color:#6A6A6A;
  font-family:Montserrat,'Helvetica Neue',sans-serif;font-size:13px;font-weight:300;letter-spacing:.13em;
  text-transform:uppercase;white-space:nowrap;
  transition:color .25s ease,letter-spacing .34s cubic-bezier(.22,.68,.3,1),
             transform .34s cubic-bezier(.22,.68,.3,1);
}
nav.main>ul>li>a::after{content:"";position:absolute;left:14px;right:14px;bottom:22px;height:1.5px;
  background:var(--crimson);transform:scaleX(0);transform-origin:center;
  transition:transform .38s cubic-bezier(.22,.68,.3,1)}
nav.main>ul>li>a:hover,nav.main>ul>li>a:focus-visible{color:var(--crimson);
  letter-spacing:.155em;transform:translateY(-1px)}
nav.main>ul>li>a:hover::after,nav.main>ul>li>a:focus-visible::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){
  nav.main>ul>li>a,nav.main>ul>li>a::after{transition:none}
  nav.main>ul>li>a:hover{letter-spacing:.13em;transform:none}
}
nav.main>ul>li.apply>a{color:var(--crimson)}
nav.main>ul>li.apply>a:hover{color:var(--crimson-dark)}
/* ---------- le déroulé du panneau ----------
   Il glissait de six pixels vers le bas, d'un bloc. Il se déplie maintenant
   depuis son filet rouge, comme une feuille qu'on abaisse : l'échelle verticale
   part de 0,86 et le point fixe est le bord haut, celui que le filet occupe.

   Les entrées suivent une à une, décalées de quarante millisecondes. C'est peu
   — on ne compte pas les entrées qui arrivent —, mais assez pour que le
   panneau paraisse se déployer au lieu d'apparaître. */
.drop{
  display:block;position:absolute;top:100%;left:0;min-width:274px;background:#fff;
  /* Le panneau n'a plus de filet cramoisi, ni en haut ni sur le côté. Celui du
     haut faisait du panneau une carte de plus et rappelait le site dont est
     parti le gabarit ; celui de gauche, essayé ensuite, courait sur toute la
     hauteur et tirait l'œil vers le bas alors qu'il n'y a rien à y chercher.

     Le trait qui se trace sous la rubrique survolée dit déjà laquelle est
     ouverte : le panneau n'a pas à le répéter. Il ne tient plus que par son
     fond blanc, son ombre portée et un filet gris en haut. */
  border-top:1px solid var(--line);
  box-shadow:0 18px 40px rgba(28,28,28,.14);
  list-style:none;margin:0;padding:8px 0;opacity:0;visibility:hidden;
  transform:scaleY(.86);transform-origin:top center;
  transition:opacity .2s ease,transform .3s cubic-bezier(.22,.72,.26,1),visibility .3s;
}
nav.main li:hover>.drop,nav.main li:has(:focus-visible)>.drop{opacity:1;visibility:visible;transform:none}
.drop>li{opacity:0;transform:translateY(-5px);
  transition:opacity .26s ease,transform .26s cubic-bezier(.22,.72,.26,1)}
nav.main li:hover>.drop>li,nav.main li:has(:focus-visible)>.drop>li{opacity:1;transform:none}
.drop>li:nth-child(2){transition-delay:.04s}
.drop>li:nth-child(3){transition-delay:.08s}
.drop>li:nth-child(4){transition-delay:.12s}
.drop>li:nth-child(5){transition-delay:.16s}
.drop>li:nth-child(6){transition-delay:.2s}
@media (prefers-reduced-motion:reduce){
  .drop{transform:none;transition:opacity .15s ease,visibility .15s}
  .drop>li{opacity:1;transform:none;transition:none}
}
.nav-right .drop{left:auto;right:0}
/* Une entrée tient sur une ligne : repliée, elle se lit comme deux entrées
   superposées. Le panneau s'élargit donc de lui-même autour de la plus longue
   plutôt que de couper — d'où la largeur minimale conservée, et le retour à la
   ligne interdit. */
.drop a{display:block;padding:10px 22px;font-family:Montserrat,'Helvetica Neue',sans-serif;font-size:14px;
  font-weight:400;letter-spacing:.02em;color:#4A4A4A;white-space:nowrap}
.drop a:hover{background:var(--stone-soft);color:var(--crimson)}
.burger{display:none;grid-column:3;grid-row:1;justify-self:end;background:none;border:0;padding:10px;cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0}

/* ---------- bandeau : paliers intermédiaires ---------- */
@media (max-width:1180px){
  nav.main>ul>li>a{font-size:11.5px;letter-spacing:.10em;padding:0 10px}
  nav.main>ul>li>a::after{left:10px;right:10px}
  .nav-left{padding-right:16px}
  .nav-right{padding-left:16px}
}
@media (max-width:900px){
  .burger{display:block;grid-column:2;grid-row:1}
  .head-inner{grid-template-columns:1fr auto;height:78px}
  .brand{grid-column:1;grid-row:1;justify-self:start}
  nav.main{display:block;position:fixed;inset:0 0 0 26%;background:#fff;
    padding:98px 26px 40px;overflow-y:auto;transform:translateX(100%);transition:transform .3s ease;
    box-shadow:-14px 0 40px rgba(10,22,38,.14);z-index:5}
  nav.main.open{transform:none}
  nav.main>ul{flex-direction:column;align-items:stretch;width:100%;margin:0}
  nav.main>ul>li>a{height:auto;padding:14px 0;font-size:13px;letter-spacing:.13em;border-bottom:1px solid var(--line)}
  nav.main>ul>li>a::after{display:none}
  .nav-right .drop{right:auto}
  /* En colonne, un filet gris marque l'imbrication : les entrées se lisent comme
     dépendant de la rubrique au-dessus, sans qu'il faille du rouge pour ça. */
  .drop{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;background:transparent;
    border-top:0;border-left:1px solid var(--line);padding:4px 0 14px 14px;min-width:0}
  /* Le menu déplié occupe l'écran : les entrées y sont posées, pas déployées. */
  .drop>li{opacity:1;transform:none;transition:none}
  /* En colonne, la place ne manque pas en largeur : le repli redevient permis. */
  .drop a{color:var(--muted);padding:7px 0;font-size:14px;text-transform:none;letter-spacing:0;
    white-space:normal}
  .drop a:hover{background:none;color:var(--crimson)}
}

nav.main>ul>li.current>a{color:var(--crimson)}
nav.main>ul>li.current>a::after{transform:scaleX(1)}

/* ---------- l'appel à soutenir, en cramoisi dans le menu ----------
   De tous les items du menu de L'école, c'est le seul qui demande quelque
   chose au visiteur plutôt que de lui montrer une page. Il prend donc la même
   marque que « Candidater » dans la barre : la couleur ne décore pas, elle dit
   qu'on attend une démarche.

   La règle est posée en fin de feuille et vise à la fois la classe et la
   balise : le menu replié du téléphone repeint « .drop a » en gris, et il
   faut passer devant. */
.drop li.apply>a{color:var(--crimson);font-weight:500}
.drop li.apply>a:hover,.drop li.apply>a:focus-visible{color:var(--crimson-dark)}