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

/* ---------- mot des co-directeurs ----------
   Six états avant celui-ci, et chacun a appris quelque chose.

   Le rouge pleine largeur : un aplat venant buter contre un entête déjà
   sombre. La plaque rouge que l'écran chevauchait : la forme était bonne, la
   couleur ne l'était pas. Le presque-blanc de la bande du parrain : juste,
   mais vide — là-bas cette bande porte un grand logo et six paragraphes, elle
   a de quoi meubler sa discrétion. Le panneau sombre encadré : plein, mais une
   boîte au milieu d'une page qui n'en a nulle part ailleurs. La photographie
   des co-directeurs sous le texte : du contenu, mais les mêmes deux visages
   que l'affiche de la vidéo, à trente centimètres l'un de l'autre.

   La disposition vient de « Présentation du Diplôme », sur La formation :
   c'est exactement ce bloc-ci — un surtitre, un titre, trois lignes et une
   vidéo à droite —, et il n'y a aucune raison que deux blocs identiques se
   présentent autrement. D'où le gris des panneaux, et le bouton qui propose la
   suite : là-bas les débouchés, ici les témoignages des alumni.

   La matière, elle, n'est plus celle de La formation. Les filets horizontaux à
   la fin dégressive, qui contournent le coin de l'écran, sont le geste de
   cette page-là ; ici ils faisaient du papier à lignes. Ce sont donc des
   colonnes : de fins filets verticaux tous les 96 px, allumés en haut et
   éteints en bas, qui courent d'un bord à l'autre de la fenêtre.

   Elle vient d'un détour par les sites des grands cabinets d'affaires. On y
   cherchait un motif, on n'en trouve aucun : pas un losange, pas un semis, pas
   une tuile de trente pixels. Ce qui tient lieu de texture chez eux est
   toujours grand et mou — une lumière qui rase une surface, une typographie
   démesurée, une photographie d'architecture. Et quand un trait paraît, c'est
   la grille de mise en page elle-même, rendue visible. C'est ce qu'on fait
   ici : la colonne n'est pas un ornement posé sur la page, c'est la page qui
   montre son ossature.

   Le fondu du haut et du bas est ce qui la distingue d'une grille de cahier :
   les filets ne commencent ni ne finissent nulle part, ils passent. */
#mot{position:relative;isolation:isolate;background:var(--gris-page)}
#mot::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(28,28,28,.055) 0 1px,transparent 1px 96px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%)}
@media (max-width:900px){#mot{padding:clamp(54px,9vw,76px) 0}}

/* ---------- l'histoire : le récit à gauche, la frise à droite ----------
   Le titre, les deux paragraphes et la frise étaient empilés dans une colonne
   de 70 caractères : sur un grand écran, la moitié droite de la section restait
   blanche et le titre n'était qu'une étiquette posée au-dessus. Les deux
   colonnes reprennent la grammaire de « Présentation du Diplôme » et du mot des
   co-directeurs — un texte, un bloc à côté — pour que la page garde le même
   rythme d'un bout à l'autre.

   Le récit était collé (« sticky ») le temps qu'on descende la frise. À
   l'usage, une colonne qui s'arrête pendant que l'autre continue se lit comme
   deux défilements côte à côte : les deux colonnes montent désormais
   ensemble, et le blanc sous le récit est le prix à payer. */
.histoire{display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);
  gap:34px 72px;align-items:start}
.histoire-mot{max-width:46ch}
.histoire-mot h2{margin:0 0 20px;font-size:clamp(28px,3.2vw,40px);font-weight:300;
  line-height:1.16}
/* Justifié, mais sans couper les mots en fin de ligne (« hyphens:manual ») :
   un mot coupé en deux se remarque plus qu'un blanc un peu large. Les jalons,
   juste à côté, suivent la même règle. */
.histoire-mot p{margin:0 0 18px;font-size:16.2px;line-height:1.75;color:var(--muted);
  text-align:justify;hyphens:manual}
.histoire-mot p:last-child{margin-bottom:0}

/* ---------- la matière de l'histoire ----------
   Le récit tient la colonne de gauche et s'arrête à mi-hauteur ; la frise, à
   droite, descend bien plus bas. Le quart bas-gauche de la section est donc un
   blanc nu de quatre cents pixels de haut, et c'était le dernier de la page.

   Les croix l'occupent : le même semis que sur Les promotions et Les
   partenariats, tracé dans la même encre et à la même taille. Trois endroits
   partagent désormais ce motif, et c'est voulu — ce sont les trois fois où la
   page laisse un angle libre à côté d'une grille ou d'une colonne.

   Il éclot du coin bas-gauche et s'éteint en montant vers la droite, bien
   avant d'atteindre la frise : les ronds et les segments cramoisis ont déjà
   leur propre dessin, et deux tracés superposés se seraient brouillés. */
/* La section est blanche, mais elle ne commence pas blanche : le gris du mot
   des co-directeurs, 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.

   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. Même
   procédé qu'entre le cursus et les débouchés, sur La formation. */
#histoire{position:relative;isolation:isolate;
  background-color:var(--paper);
  background-image:linear-gradient(180deg,var(--gris-page) 0,rgba(241,241,242,0) 160px);
  background-repeat:no-repeat}
#histoire::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(56% 54% at 1% 93%,#000 8%,transparent 80%);
  mask-image:radial-gradient(56% 54% at 1% 93%,#000 8%,transparent 80%)}

/* ---------- frise chronologique ---------- */
.texte-large + .texte-large{margin-top:20px}
.frise{position:relative;margin: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)}
/* Le rang de chaque jalon est posé sur l'élément lui-même par le gabarit :
   le tracé s'enchaîne donc pour n'importe quel nombre d'étapes, sans qu'il
   faille ajouter une ligne ici chaque fois qu'une date s'ajoute. */
.frise.vu .jalon::before{transition-delay:calc(var(--rang, 0) * .52s)}
.frise.vu .jalon::after{transition-delay:calc(var(--rang, 0) * .52s + .10s)}

/* 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:manual}
.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}
}
/* En dessous de 980 px les deux colonnes se superposent : le récit repasse
   au-dessus de la frise, et la mesure s'élargit à 70 caractères. */
@media (max-width:980px){
  .histoire{grid-template-columns:1fr;gap:44px}
  .histoire-mot{max-width:70ch}
}
@media (max-width:680px){
  .frise{padding-left:30px}
  .jalon::before{left:-30px}
  .jalon::after{left:-25px}
}

/* ---------- la bande de nuit ----------
   Ce fond sombre a été dessiné pour la charte du diplôme, qui occupait le
   milieu de la page ; cette partie-là a été retirée, mais le fond est resté et
   a changé de place : c'est maintenant celui des témoignages, tout en bas. Il
   y est mieux à sa place qu'il ne l'était au milieu — on y regarde des vidéos
   et on y écoute des podcasts, et une salle d'écoute se tient dans le noir.

   Le parcours de la page y gagne aussi : l'entête en photo, le blanc du mot et
   de l'histoire, le crème du palmarès, puis le noir. La page descend d'un ton
   à chaque fois au lieu d'alterner deux rouges. */
.nuit{position:relative;isolation:isolate;background:var(--ink-deep);color:#fff;
  padding:clamp(76px,8vw,116px) 0}
/* La matière : des cannelures. Des filets verticaux serrés qui montent du bas
   de la bande et s'éteignent à mi-hauteur — le bas d'un fût de colonne. Elle
   est claire sur fond sombre, là où les filets du bas de la page Les
   partenariats sont sombres sur fond clair : la même famille de traits,
   l'effet inverse.

   Par-dessus, deux lueurs : le cramoisi monte du coin bas-gauche et une
   lumière froide tombe du coin haut-droit. Sans elles le noir serait aussi
   plat que le rouge qu'il a remplacé. */
.nuit::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.075) 0 1px,transparent 1px 17px);
  -webkit-mask-image:linear-gradient(0deg,#000 0,rgba(0,0,0,.42) 32%,transparent 74%);
  mask-image:linear-gradient(0deg,#000 0,rgba(0,0,0,.42) 32%,transparent 74%)}
.nuit::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(66% 58% at 4% 100%,rgba(194,3,25,.34),transparent 70%),
    radial-gradient(54% 48% at 94% 0%,rgba(255,255,255,.06),transparent 72%)}
/* Tout ce que la bande porte passe au clair : le titre, le texte, les filets
   qui séparent les fiches, le cadre des écrans. Le lien en bas de chaque
   témoignage passe au blanc — le cramoisi du site est un rouge sombre, il
   tient sur du blanc et disparaît sur du noir ; il reste au tiret du surtitre
   et à la pastille, qui sont des aplats et non du texte. */
.nuit .presentation-sur{color:#fff}
.nuit .tete-bloc h2{color:#fff}
.nuit .tete-bloc>p:last-child{color:rgba(255,255,255,.76)}
.nuit .presentation-lien{color:#fff;border-bottom-color:rgba(255,255,255,.55)}
.nuit .presentation-lien:hover{color:#fff;border-bottom-color:#fff}
.nuit .presentation-ecran{border-color:rgba(255,255,255,.16);background:#000;
  box-shadow:0 24px 56px -14px rgba(0,0,0,.6)}
.nuit .presentation-ecran:hover{border-color:rgba(255,255,255,.46);
  box-shadow:0 30px 64px -14px rgba(0,0,0,.68)}

/* ---------- les témoignages d'alumni ----------
   Un seul témoignage tenait ici, écrit dans le gabarit : le texte à gauche,
   l'écran à droite. La composition était bonne — c'est celle de « Présentation
   du Diplôme » —, mais elle ne tenait qu'une chose, et il n'y avait pas de
   place pour la deuxième.

   Elle se répète maintenant, une fois par fiche, et change de main à chaque
   fois : l'écran à droite, puis à gauche, puis à droite. C'est ce qui fait
   qu'une suite de six ne se lit pas comme six fois la même chose. Un filet
   sépare les fiches, comme les lignes du palmarès juste au-dessus.

   Une fiche porte une vidéo ou un épisode de podcast : dans les deux cas
   l'affiche est la nôtre et le lecteur n'arrive qu'au clic. Une pastille dit
   lequel des deux attend, pour qu'on sache avant de cliquer si l'on va
   regarder ou écouter. */
.voix-bloc{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:28px clamp(34px,4vw,56px);align-items:center}
.voix-bloc-inverse{grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr)}
.voix-bloc-inverse .voix-mot{order:2}
.voix-bloc + .voix-bloc{margin-top:clamp(44px,4.8vw,66px);padding-top:clamp(44px,4.8vw,66px);
  border-top:1px solid rgba(255,255,255,.18)}
.voix-mot{max-width:46ch}
/* Le surtitre : les deux noms encadrant une croix cramoisie, ou la promotion
   de l'invité. Il ouvre la colonne, au-dessus du titre. */
.voix-sur{margin:0 0 13px;font-family:Spectral,serif;font-size:17px;font-weight:400;
  color:rgba(255,255,255,.88)}
.voix-sur span{color:var(--crimson);margin:0 4px}
.voix-mot h3{margin:0 0 15px;font-family:Spectral,serif;font-size:clamp(25px,2.9vw,36px);
  font-weight:300;line-height:1.15;color:#fff}
.voix-texte{margin:0 0 24px;font-size:16.4px;line-height:1.75;color:rgba(255,255,255,.76);
  text-wrap:pretty}
.voix-mot .presentation-lien{display:inline-block}

/* La pastille. Elle disparaît dès que le lecteur est inséré : elle annonçait
   ce qui allait venir, et ce qui allait venir est là. */
.voix-ecran{position:relative}
/* En bas à gauche, et non en haut : le haut d'une affiche de vidéo porte
   souvent déjà un bandeau — titre, noms des invités —, et la pastille venait
   se poser dessus. Le bas gauche est le coin qu'on laisse vide. */
.voix-genre{position:absolute;left:0;bottom:0;z-index:2;margin:0;padding:7px 13px 6px;
  background:var(--crimson);color:#fff;font-family:Montserrat,sans-serif;font-size:9.5px;
  font-weight:600;letter-spacing:.17em;text-transform:uppercase}
.voix-ecran:has(iframe) .voix-genre{display:none}
/* Le lecteur Spotify n'est pas une vidéo : il a sa hauteur à lui, celle que
   Spotify sert pour un épisode avec sa pochette. Le seize-neuvièmes des
   vidéos y ferait une bande noire sous la pochette. */
/* La feuille de La formation, qui pose « .presentation-ecran », est chargée
   après celle-ci : à égalité de poids c'est elle qui l'emporte. Les deux
   règles qui la contredisent — la hauteur du lecteur Spotify et le fond de la
   plaque sans affiche — passent donc par l'identifiant de la vue. */
#vue-ecole .voix-ecran-podcast iframe{aspect-ratio:auto;height:232px}
/* Sans affiche dans la fiche, l'écran devient une plaque sombre portant le nom
   de l'invité : une affiche manquante ne doit pas faire un trou gris. */
#vue-ecole .voix-ecran-nu{background:rgba(255,255,255,.06);display:flex;align-items:flex-start;
  justify-content:flex-start;aspect-ratio:16/9;padding:clamp(24px,2.6vw,34px);
  border-color:rgba(255,255,255,.14)}
/* Le nom se pose en haut à gauche, et non au milieu : le disque de lecture
   occupe le centre, et un nom centré passait derrière lui. */
.voix-nom-nu{max-width:14ch;font-family:Spectral,serif;font-weight:300;
  font-size:clamp(20px,2.4vw,30px);line-height:1.22;color:rgba(255,255,255,.58);
  text-wrap:balance}
@media (max-width:900px){
  .voix-bloc,.voix-bloc-inverse{grid-template-columns:1fr;gap:26px}
  .voix-bloc-inverse .voix-mot{order:0}
  .voix-mot{max-width:none}
}

/* ---------- resserrement entre la vidéo et l'histoire ----------
   Le mot et l'histoire se répondent : cent quatre pixels de part et d'autre en
   auraient fait deux cents de blanc entre eux. Le bas du mot est tenu par sa
   plaque, dont la marge basse est déjà comptée ; seul l'histoire se rapproche. */
#histoire{padding-top:58px}

/* ---------- le palmarès ----------
   Quatre cartes à photo, date et chapeau, poussées côte à côte dans un rail
   qu'on fait défiler : c'est, trait pour trait, la forme d'un fil
   d'actualités. Or un prix n'est pas une nouvelle. Une nouvelle se consomme et
   se périme ; une distinction se consigne, et la liste de celles qu'on a
   gagnées est elle-même le propos.

   Donc un palmarès : une ligne par distinction, et sur chaque ligne les trois
   choses qu'un palmarès affiche, dans cet ordre — quand, quoi, et la preuve en
   image. Rien ne défile, rien n'est caché derrière un bouton, et la liste
   s'allonge d'une ligne à chaque fiche ajoutée depuis /admin.

   Le médaillon est un disque à double filet, comme le revers d'une médaille :
   l'année en Spectral, et dessous le jour ou le mois quand on les connaît. La
   photo est posée dans une marie-louise blanche — la marge de carton d'un
   encadrement —, ce qui la détache du fond crème sans lui ajouter de bordure
   et lui donne l'air d'un cliché accroché au mur plutôt que d'une vignette. */
.tete-bloc{max-width:72ch;margin:0 0 clamp(36px,4vw,56px)}
.tete-bloc h2{margin:0 0 14px;font-size:clamp(30px,3.6vw,44px);font-weight:300;
  line-height:1.15}
.tete-bloc>p:last-child{margin:0;max-width:70ch;color:var(--muted);
  font-size:16.4px;line-height:1.7}

.palmares{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.palmares-ligne{display:grid;
  grid-template-columns:104px minmax(0,1fr) clamp(230px,25%,318px);
  gap:0 clamp(26px,3.2vw,48px);align-items:center;
  padding:clamp(28px,3.2vw,42px) 0;border-bottom:1px solid var(--line)}

.palmares-medaille{margin:0;width:104px;height:104px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  border:1px solid rgba(194,3,25,.42);background:rgba(255,255,255,.55);
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.75),inset 0 0 0 5px rgba(194,3,25,.2)}
.palmares-medaille b{font-family:Spectral,serif;font-size:24px;font-weight:400;
  line-height:1;color:var(--ink)}
.palmares-medaille span{padding:0 11px;font-family:Montserrat,sans-serif;font-size:9px;
  font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);
  line-height:1.3;text-align:center}
/* Une fiche sans date garde sa place dans la grille, sans son disque : les
   titres des autres lignes resteraient sinon seuls à s'aligner. */
.palmares-sans-date{border:0;background:none;box-shadow:none}

.palmares-dire h3{margin:0 0 11px;font-family:Spectral,Georgia,serif;font-weight:400;
  font-size:clamp(20px,2.2vw,27px);line-height:1.26;letter-spacing:0;color:var(--ink)}
.palmares-dire h3::before{display:none}
.palmares-dire p{margin:0;max-width:62ch;font-size:15.4px;line-height:1.7;color:var(--muted);
  text-wrap:pretty}
.palmares-dire .presentation-lien{display:inline-block;margin-top:16px}

/* Sans photo, la colonne de droite ne garde pas sa place : le texte prend
   toute la largeur. Une case vide à côté d'un texte ferait croire à une image
   qui n'a pas chargé. */
.palmares-ligne.palmares-sans-vue{grid-template-columns:104px minmax(0,1fr)}
.palmares-vue{display:block;padding:9px;background:#fff;
  box-shadow:0 0 0 1px var(--line),0 18px 36px -22px rgba(28,28,28,.42);
  transition:transform .35s cubic-bezier(.22,.7,.3,1),box-shadow .35s ease}
.palmares-image{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
a.palmares-vue:hover,a.palmares-vue:focus-visible{transform:translateY(-3px);
  box-shadow:0 0 0 1px rgba(28,28,28,.22),0 26px 46px -22px rgba(28,28,28,.48)}

/* En dessous de 900 px la photo passe sous le texte, sur toute la largeur : à
   deux cent trente pixels dans une colonne de trois cents, elle n'était plus
   qu'une vignette, et c'est l'image qui porte la distinction. */
@media (max-width:900px){
  .palmares-ligne{grid-template-columns:76px minmax(0,1fr);align-items:start;
    gap:0 20px}
  .palmares-medaille{width:76px;height:76px;gap:2px;
    box-shadow:inset 0 0 0 3px rgba(255,255,255,.75),inset 0 0 0 4px rgba(194,3,25,.2)}
  .palmares-medaille b{font-size:19px}
  .palmares-medaille span{font-size:8px;padding:0 6px}
  .palmares-vue{grid-column:1/-1;margin-top:22px}
}

/* ---------- le fond du palmarès ----------
   Le crème — un #F6F4F1 tirant sur le beige — réchauffait toute la fin de la
   page. Il va au papier ancien, il ne va pas à des photographies de concours.
   Le palmarès prend donc le gris des panneaux, celui du mot des co-directeurs
   en haut de page et du pied : un gris franchement neutre, qui ne raconte rien
   et laisse les photos parler.

   La page alterne alors gris, blanc, gris, noir — quatre tons neutres, et pas
   une seule couleur de fond.

   Et comme en haut de page, le passage d'un ton à l'autre se fond : le blanc
   de l'histoire descend dans le gris et s'y éteint sur cent soixante pixels,
   au lieu de s'arrêter sur un trait en travers de la page. */
#distinctions{background-color:var(--gris-page);
  background-image:linear-gradient(180deg,var(--paper) 0,rgba(255,255,255,0) 160px);
  background-repeat:no-repeat}

/* ---------- l'apparition des distinctions ----------
   Chaque ligne monte et se révèle quand elle arrive sous les yeux, et son
   médaillon se pose ensuite, un sixième de seconde plus tard : la médaille
   s'appose après le palmarès, comme un cachet sur un diplôme. C'est le seul
   endroit du site où deux temps s'enchaînent dans un même bloc, et c'est ce
   qui donne à la section son air de remise de prix plutôt que de liste.

   L'observateur employé est celui de la lettre des co-directeurs — il se
   déclenche quand le haut de l'élément est bien entré dans l'écran, et non
   trente-cinq pour cent avant comme celui des blocs. C'est ce qu'il faut ici :
   on veut voir la ligne paraître, pas la trouver déjà parue.

   Les lignes du lot que le bouton déplie n'ont rien de particulier : elles
   sont cachées, l'observateur ne les a donc jamais vues entrer ; elles
   paraissent exactement de la même façon à l'instant où le bouton les montre.
   Le dixième de seconde de retard entre deux rangs fait alors ce qu'il fait
   partout ailleurs — un déroulé plutôt qu'un bloc qui tombe. */
#distinctions .palmares-ligne{opacity:0;transform:translateY(24px);
  transition:opacity .6s cubic-bezier(.22,.7,.3,1),transform .6s cubic-bezier(.22,.7,.3,1);
  transition-delay:calc(var(--rang,0) * .1s)}
#distinctions .palmares-ligne.vu{opacity:1;transform:none}
#distinctions .palmares-medaille{transform:scale(.82);opacity:0;
  transition:opacity .5s ease,transform .62s cubic-bezier(.2,.84,.3,1);
  transition-delay:calc(var(--rang,0) * .1s + .16s)}
#distinctions .palmares-ligne.vu .palmares-medaille{transform:none;opacity:1}
@media (prefers-reduced-motion:reduce){
  #distinctions .palmares-ligne,#distinctions .palmares-medaille{
    opacity:1;transform:none;transition:none}
}

/* ---------- la commande du palmarès ----------
   Centrée sous la liste, comme celle des anciens parrains. Elle ne paraît que
   si le script l'a vue : sans lui, l'attribut reste et la règle qui suit la
   garde cachée — les distinctions précédentes sont alors simplement montrées
   à la suite, et rien ne manque. */
.palmares-commande{display:flex;justify-content:center;margin:34px 0 0}
.palmares-commande[data-repli-commande]{display:none}
.palmares-bascule svg{transition:transform .3s cubic-bezier(.22,.7,.3,1)}
.palmares-bascule:hover svg{transform:translateY(3px)}
.palmares-bascule.retour svg{transform:rotate(180deg)}
.palmares-bascule.retour:hover svg{transform:rotate(180deg) translateY(3px)}
/* Les deux listes se suivent : le filet du haut de la seconde doublerait celui
   du bas de la dernière ligne de la première. */
.palmares + .palmares{border-top:0}

/* ---------- la matière du palmarès ----------
   Le quadrillage y faisait un papier à carreaux derrière des photos : une
   trame régulière demande un fond vide, et celui-ci ne l'est pas.

   Des arcs, donc, plutôt qu'une trame : une famille de cercles concentriques
   centrée sur le coin bas-gauche du bloc, dessinés vers le haut et estompés
   avant le haut de la section. Un geste qui traverse le bloc au lieu d'un
   motif qui le remplit.

   Ils couvraient autrefois les deux blocs crème, le palmarès et les
   témoignages, et se rejoignaient à leur jonction. Les témoignages sont passés
   au noir : le second demi-cercle n'a plus de fond où se poser, et les arcs
   s'arrêtent net au bord de la bande de nuit. C'est la limite la plus franche
   de la page — elle n'a pas besoin qu'on l'adoucisse. */
#distinctions{position:relative;isolation:isolate}
#distinctions::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:repeating-radial-gradient(circle at 0% 100%,
    transparent 0 66px,rgba(28,28,28,.07) 66px 67px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 46%,#000 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 46%,#000 100%)}