/* page L'école : vidéo, frise, manifeste, distinctions, alumni */

/* ---------- mot des co-directeurs : vidéo, citation, portrait ---------- */
/* Aplat rouge DJCE sur toute la largeur. On reprend --crimson-dark, le rouge
   déjà retenu pour le bandeau des modules : sur une grande surface le #C20319
   vibre trop derrière du blanc. Pour le rouge vif, remplacer var(--crimson-dark)
   par var(--crimson) ci-dessous. */
#mot{background:var(--crimson-dark);color:#fff}
#mot .sec-head h2{color:#fff}
#mot .sec-head p{color:rgba(255,255,255,.72)}
#mot .video-bloc{margin-bottom:0}
#mot .video-bloc video{box-shadow:0 18px 46px rgba(0,0,0,.32)}
#mot .video-legende{color:rgba(255,255,255,.66)}

.video-bloc{margin:0 0 60px}
.video-bloc video{width:100%;display:block;background:#000;box-shadow:0 18px 46px rgba(28,28,28,.20)}
.video-legende{margin:14px 0 0;font-size:13.5px;letter-spacing:.04em;color:var(--muted)}
.citation{position:relative;margin:0 0 62px;padding:54px 60px 56px;background:var(--stone-soft);
  border-top:3px solid var(--crimson);font-family:Spectral,serif;font-weight:300;
  font-size:clamp(19px,2.1vw,26px);line-height:1.62;color:var(--ink);text-align:justify;hyphens:auto}
.citation::before{content:"";position:absolute;left:60px;top:-3px;width:0;height:0}
.codir h3{font-family:Spectral,serif;font-size:clamp(22px,2.4vw,28px);font-weight:400;margin:0 0 26px;
  padding-bottom:20px;border-bottom:1px solid var(--line)}
.codir .signature{margin-top:0;padding-top:0;border-top:0;gap:52px}
.photo-codir{display:block;width:100%;max-width:520px;margin:44px 0 0;filter:grayscale(1);
  box-shadow:0 14px 36px rgba(28,28,28,.16)}
@media (max-width:680px){
  .citation{padding:34px 26px 36px}
}

/* ---------- frise chronologique ---------- */
.texte-large + .texte-large{margin-top:20px}
.frise{position:relative;margin:58px 0 0;padding-left:42px}

/* Le trait n'est plus un rail unique qui court derrière les ronds : c'est une
   suite de segments, tracés d'un rond au suivant. Plus aucun trait ne se
   trouve à l'endroit d'un cercle — ni au repos, ni pendant l'apparition, ni à
   un zoom inhabituel — parce qu'il n'y en a plus à masquer. Le dernier jalon
   n'en porte pas : la frise s'arrête donc pile sur son dernier rond, au lieu
   de dépasser dans le paragraphe. */
.jalon{position:relative;padding-bottom:44px}
.jalon:last-child{padding-bottom:0}

/* Le rond. Sa bordure de 2 px doit être comprise dans ses 12 px, sans quoi il
   en ferait 16 et ne serait plus centré sur les segments : le sélecteur
   universel de base.css pose « border-box » sur les éléments de la page, mais
   pas sur ceux que le style engendre, d'où le rappel ici. */
.jalon::before{content:"";box-sizing:border-box;
  position:absolute;left:-42px;top:6px;width:12px;height:12px;border-radius:50%;
  background:#fff;border:2px solid var(--crimson);
  opacity:0;transition:opacity .22s ease}
/* Le segment part 5 px sous le rond et s'arrête 5 px avant le suivant. */
.jalon:not(:last-child)::after{content:"";position:absolute;left:-37px;top:23px;bottom:-1px;width:2px;
  background:var(--crimson);transform:scaleY(0);transform-origin:top;
  transition:transform .42s cubic-bezier(.4,.6,.3,1)}
/* Le tracé descend : le premier rond s'allume, son segment se dessine, puis le
   rond suivant, et ainsi de suite jusqu'en bas. C'est le mouvement de l'ancien
   balayage, rendu à des segments séparés. Les retards s'enchaînent — un rond
   s'allume à l'instant précis où le segment du dessus finit de se tracer —,
   d'où le pas de 520 ms : 100 ms d'attente puis 420 ms de tracé.

   Ils sont écrits à la main plutôt que calculés : la frise compte cinq jalons
   et n'en comptera jamais beaucoup plus. Si une date s'ajoute un jour, il
   suffit de prolonger la série de quatre lignes. */
.frise.vu .jalon::before{opacity:1}
.frise.vu .jalon::after{transform:scaleY(1)}
.frise.vu .jalon:nth-child(1)::before{transition-delay:0s}
.frise.vu .jalon:nth-child(1)::after{transition-delay:.10s}
.frise.vu .jalon:nth-child(2)::before{transition-delay:.52s}
.frise.vu .jalon:nth-child(2)::after{transition-delay:.62s}
.frise.vu .jalon:nth-child(3)::before{transition-delay:1.04s}
.frise.vu .jalon:nth-child(3)::after{transition-delay:1.14s}
.frise.vu .jalon:nth-child(4)::before{transition-delay:1.56s}
.frise.vu .jalon:nth-child(4)::after{transition-delay:1.66s}
.frise.vu .jalon:nth-child(5)::before{transition-delay:2.08s}
.frise.vu .jalon:nth-child(5)::after{transition-delay:2.18s}

/* Seul le texte glisse en apparaissant. Les ronds et les segments ne bougent
   pas d'un pixel : s'ils glissaient, ils se décaleraient les uns des autres le
   temps de l'animation, et le trait paraîtrait traverser les cercles. */
.jalon > *{opacity:0;transform:translateY(20px);
  transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.3,1)}
.jalon.vu > *{opacity:1;transform:none}
.jalon b{display:block;font-family:Montserrat,sans-serif;font-size:11.5px;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:var(--crimson);margin-bottom:9px}
.jalon h3{font-family:Spectral,serif;font-size:22px;font-weight:400;margin:0 0 10px;line-height:1.3}
.jalon p{margin:0;font-size:15.4px;line-height:1.7;color:var(--muted);max-width:70ch;
  text-align:justify;hyphens:auto}
.exergue{margin:32px 0;padding:4px 0 4px 22px;border-left:2px solid var(--crimson);
  font-family:Spectral,serif;font-size:clamp(19px,2vw,23px);font-weight:300;color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  .jalon > *,.jalon::before{opacity:1;transform:none}
  .jalon::after{transform:scaleY(1)}
  .frise .jalon::before,.frise .jalon::after{transition-delay:0s}
}
@media (max-width:680px){
  .frise{padding-left:30px}
  .jalon::before{left:-30px}
  .jalon::after{left:-25px}
}

/* ---------- manifeste : bloc rouge pleine largeur ---------- */
.manifeste{background:#8E0212;color:#fff;padding:106px 0}
.manifeste-grille{display:grid;grid-template-columns:1fr 1.05fr;gap:74px;align-items:start}
.manifeste-texte h2{font-size:clamp(28px,3.3vw,40px);font-weight:300;line-height:1.15;margin:0 0 26px;color:#fff}
.manifeste-texte h2::after{content:"";display:block;width:54px;height:2px;margin-top:20px;
  background:rgba(255,255,255,.55)}
.manifeste-texte p{margin:0 0 22px;font-size:16px;line-height:1.74;color:rgba(255,255,255,.82);
  text-align:justify;hyphens:auto}
.manifeste-texte p:first-of-type{font-family:Spectral,serif;font-size:clamp(17px,1.6vw,19.5px);
  font-weight:300;line-height:1.66;color:rgba(255,255,255,.96);
  padding-bottom:24px;margin-bottom:24px;border-bottom:1px solid rgba(255,255,255,.28)}
.manifeste-texte p:last-child{margin-bottom:0}
.principes{list-style:none;counter-reset:pr;margin:0;padding:0}
.principes li{counter-increment:pr;position:relative;padding:22px 0 22px 62px;
  border-bottom:1px solid rgba(255,255,255,.26);font-family:Spectral,serif;font-size:18px;line-height:1.5;
  text-align:justify;hyphens:auto}
.principes li:first-child{padding-top:0}
.principes li:first-child::before{top:-4px}
.principes li:last-child{border-bottom:0;padding-bottom:0}
.principes li::before{content:counter(pr,decimal-leading-zero);position:absolute;left:0;top:22px;
  font-family:Montserrat,sans-serif;font-size:13px;font-weight:500;letter-spacing:.1em;
  color:rgba(255,255,255,.55)}
@media (max-width:1040px){
  .manifeste-grille{grid-template-columns:1fr;gap:46px}
}
@media (max-width:680px){
  .manifeste{padding:64px 0}
  .principes li{padding-left:46px;font-size:16.5px}
}

/* ---------- co-directeurs ---------- */
.codirection{text-align:center}
.codirection h2{font-family:Spectral,serif;font-size:clamp(26px,3vw,36px);font-weight:600;
  margin:0 0 26px;line-height:1.2}
.codirection-noms{margin:0 0 10px;font-size:clamp(17px,1.8vw,21px);line-height:1.5;color:var(--ink)}
.codirection-noms span{color:var(--muted);font-size:.86em}
.codirection img{width:100%;max-width:580px;margin:44px auto 0;display:block;filter:grayscale(1);
  box-shadow:0 16px 40px rgba(28,28,28,.16)}

/* ---------- témoignages d'alumni ---------- */
.temoignage{max-width:900px}
.temoignage-titre{margin:0 0 22px;font-family:Spectral,serif;font-size:clamp(20px,2.2vw,26px);
  font-weight:400;color:var(--ink)}
.temoignage-titre span{color:var(--crimson);margin:0 4px}
.video-cadre{position:relative;padding-top:56.25%;background:#000;
  box-shadow:0 18px 46px rgba(28,28,28,.20)}
.video-cadre iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* ---------- vignette de lecture ---------- */
.video-cadre{cursor:pointer}
.video-cadre img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.lecture{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:82px;height:58px;
  border:0;border-radius:12px;background:var(--crimson);cursor:pointer;padding:0;
  transition:transform .3s ease,background .3s ease}
.lecture::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-40%,-50%);
  border-style:solid;border-width:11px 0 11px 19px;border-color:transparent transparent transparent #fff}
.video-cadre:hover .lecture{transform:translate(-50%,-50%) scale(1.08);background:var(--crimson-dark)}
.video-lien{margin:16px 0 0;font-size:14px}
.video-lien a{color:var(--crimson);border-bottom:1px solid currentColor;padding-bottom:2px}

/* ---------- resserrement entre la vidéo et l'histoire ---------- */
#mot{padding-bottom:52px}
#histoire{padding-top:58px}

/* ---------- commande visible du rail des distinctions ----------
   Le recentrage au survol restait à découvrir par hasard : un bouton annonce
   explicitement qu'il y a d'autres cartes, et les fait défiler au clic. */
.rail-commande{display:flex;justify-content:flex-end;margin:22px 0 0}
.rail-suite{display:inline-flex;align-items:center;gap:14px;padding:13px 22px 13px 24px;
  background:transparent;border:1px solid var(--line);color:var(--ink);
  font-family:Montserrat,sans-serif;font-size:12.5px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;cursor:pointer;transition:background .2s ease,border-color .2s ease,color .2s ease}
.rail-suite:hover,.rail-suite:focus-visible{background:var(--crimson);border-color:var(--crimson);color:#fff}
.rail-suite svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;
  transition:transform .3s cubic-bezier(.22,.7,.3,1)}
.rail-suite:hover svg{transform:translateX(4px)}
.rail-suite.retour svg{transform:scaleX(-1)}
.rail-suite.retour:hover svg{transform:scaleX(-1) translateX(4px)}
.rail-suite[hidden]{display:none}

/* ---------- bande de cartes défilante ----------
   Les cartes gardent toutes la même largeur et s'étirent à la même hauteur ;
   au-delà de la largeur disponible, on fait défiler la bande horizontalement. */
/* Le rail défile toujours, mais sans barre visible : c'est le survol d'une carte
   débordante qui la ramène dans le cadre (voir le script en bas de page).
   L'accroche passe en « proximity » pour ne pas contrarier le défilement animé. */
.cartes-rail{
  display:flex;align-items:stretch;gap:1px;background:var(--line);
  border:1px solid var(--line);overflow-x:auto;scroll-snap-type:x proximity;
  scrollbar-width:none;-ms-overflow-style:none;
}
.cartes-rail::-webkit-scrollbar{display:none}
.cartes-rail>.card{flex:0 0 clamp(270px,33.333%,420px);scroll-snap-align:start;
  display:flex;flex-direction:column}
/* Le texte suit son titre au lieu d'être poussé en bas de la carte, où il se
   retrouvait à 12 px du titre sur une carte et à 72 px sur la suivante. Pour
   qu'il démarre malgré tout à la même hauteur partout, le titre réserve la
   place de trois lignes — la longueur du plus long d'entre eux. */
.cartes-rail>.card h3{min-height:calc(3 * 1.65em)}
@media (max-width:680px){.cartes-rail>.card{flex-basis:82%}}

/* « Les distinctions » et « Nos alumni témoignent » sont deux sections « alt »
   qui se suivent : même fond, donc aucune limite visible entre elles, et
   l'espace d'une section à l'autre s'y lit comme un trou. On le resserre, comme
   sur l'accueil entre « Ce qui distingue » et « Actualités ».
   (padding-bottom / padding-top et non la forme courte : les marges mobiles de
   responsive.css continuent ainsi de s'appliquer aux autres côtés.) */
#distinctions{padding-bottom:40px}
#alumni{padding-top:40px}