/* sommaire des promotions et trombinoscopes */

/* ---------- promotions ---------- */
.promo-annee{margin:0 0 10px!important;font-family:Montserrat,sans-serif;font-size:12px;font-weight:500;
  letter-spacing:.16em;color:var(--crimson)}
.sec-head h2 sup{font-size:.5em;vertical-align:.72em;margin-left:1px}

/* ---------- trombinoscopes ---------- */
.trombi{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.trombi a{display:block;background:#fff;box-shadow:0 12px 32px rgba(28,28,28,.14);
  transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s ease}
.trombi a:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(28,28,28,.20)}
.trombi img{width:100%;display:block}
@media (max-width:1040px){.trombi{grid-template-columns:1fr;max-width:520px;gap:22px}}

/* ---------- sommaire des promotions ---------- */
/* Les cases sont toutes illustrées : un filet noir franc sépare les photos
   nettement, là où le filet clair d'origine se perdait dans les images.
   À 1 px il se perdait encore dans les arrondis de rendu : il passe à 4 px. */
/* Une rangée souple plutôt qu'une grille rigide : à cinq promotions, la grille
   à trois colonnes laissait une case vide, c'est-à-dire un rectangle noir au
   bout de la dernière rangée. En flex, les cases de la rangée incomplète
   s'élargissent et la remplissent. */
/* ---------- la matière du fond ----------
   Des croix semées tous les 44 px, écloses du coin haut droit et dissipées en
   descendant vers la gauche : elles occupent la bande qui sépare le bandeau
   photo de la grille, et la marge qui la longe à droite.

   Chaque endroit a sa matière — le quadrillage à la bande du parrain, les
   points à Candidater, les filets serrés à la présentation du diplôme, le
   quadrillage et les lueurs au bloc des alumni. La même partout aurait fait un
   papier peint.

   La croix est le seul motif du site tracé par une image : deux traits de neuf
   pixels centrés dans une tuile de quarante-quatre, ce qu'aucun dégradé ne
   sait faire. Elle pèse moins de trois cents octets, écrits dans la feuille
   elle-même : rien à télécharger. */
#vue-promotions .sec{position:relative;isolation:isolate}
#vue-promotions .sec::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(88% 78% at 100% 0%,#000 6%,transparent 74%);
  mask-image:radial-gradient(88% 78% at 100% 0%,#000 6%,transparent 74%)}

.promos-grille{display:flex;flex-wrap:wrap;gap:3px;background:var(--ink-deep);
  border:3px solid var(--ink-deep);box-shadow:var(--ombre-bloc)}
/* Les cases ne s'étirent pas pour remplir la dernière rangée : cinq
   promotions donneraient trois cases d'un tiers puis deux d'une moitié, et
   l'œil lirait une hiérarchie là où il n'y en a pas. La place qui reste
   montre le fond sombre du bloc, et le bloc s'arrête net. */
.promos-grille>.promo-case{flex:0 1 calc(100% / var(--colonnes, 3) - 3px);min-width:0}
.promo-case{background:#fff;padding:24px 24px 25px;display:block;transition:background .25s ease}
.promo-case:hover{background:var(--stone-soft)}
.promo-case b{display:block;font-family:Spectral,serif;font-size:21px;font-weight:400;color:var(--ink)}
.promo-case b sup{font-size:.5em;vertical-align:.72em}
.promo-case span{display:block;margin-top:6px;font-family:Montserrat,sans-serif;font-size:11px;
  font-weight:500;letter-spacing:.13em;color:var(--muted)}
.promo-case i{display:inline-block;margin-top:11px;padding:3px 9px 2px;background:var(--crimson);color:#fff;
  font-family:Montserrat,sans-serif;font-style:normal;font-size:10px;font-weight:500;letter-spacing:.11em}
.page-head h1 sup{font-size:.46em;vertical-align:.8em}
.page-head h1 .promo-cycle{vertical-align:.34em}
@media (max-width:1040px){.promos-grille>.promo-case{flex-basis:calc(50% - 3px)}}
@media (max-width:680px){.promos-grille>.promo-case{flex-basis:100%}}

/* ---------- les deux promotions en cours, en tête ----------
   Ce sont elles qu'un visiteur vient voir, et les seules dont la page change
   encore. Dans la grille commune, elles se perdaient parmi cinq promotions
   diplômées. Elles en sortent donc et passent au-dessus, chacune dans une
   case qui tient toute la largeur.

   Les deux ont exactement le même gabarit : ce sont les deux années d'un même
   cursus, et une différence de taille entre elles dirait une hiérarchie qui
   n'existe pas.

   Le bloc reprend le dessin de la grille — même fond sombre, même bordure de
   quatre pixels, même gouttière entre les cases —, pour qu'on lise les deux
   ensembles comme une seule famille. */
/* Les deux cases sont des blocs séparés, et non deux moitiés d'un même
   bloc : elles ne sont pas de la même année, et les coller les faisait lire
   comme une seule photo coupée en deux. Chacune porte donc sa bordure, et un
   vrai intervalle les sépare — plus large que la gouttière de la grille, pour
   qu'on ne s'y trompe pas. */
.promos-vedettes{display:flex;flex-direction:column;gap:18px;margin:0 0 26px}
.promo-vedette{border:3px solid var(--ink-deep);box-shadow:var(--ombre-bloc)}
/* La case large est allongée : le texte s'y appuie au bas, comme sur un
   bandeau, plutôt que de flotter au milieu d'un grand vide. */
.promo-vedette{min-height:336px;display:flex;flex-direction:column;justify-content:flex-end;
  padding:24px 28px 22px;background-clip:padding-box}
.promo-vedette b{font-size:26px}
.promo-vedette span{margin-top:7px}
@media (max-width:1040px){.promo-vedette{min-height:292px;padding:21px 22px 19px}
  .promo-vedette b{font-size:23px}}
@media (max-width:680px){.promo-vedette{min-height:248px;padding:18px 17px 17px}
  .promo-vedette b{font-size:21px}}

/* ---------- sous la grille ---------- */
/* Le bouton qui mène aux promotions d'avant la 50e. */
.promos-suite{display:flex;justify-content:center;margin:28px 0 0}
/* La pastille est un « inline-block » : sans cela elle s'étirerait d'un bord
   à l'autre dans une case devenue colonne flex. */
.promo-case i{align-self:flex-start}
/* Le sigle du diplôme, séparé par un filet plutôt que par une barre tapée au
   clavier : une barre verticale de police ne s'aligne ni sur la hauteur des
   capitales ni sur leur graisse, et se lit comme un caractère de plus. */
/* « display:inline » et les marges remises à zéro ne sont pas des précautions
   d'écriture : la règle « .promo-case span » juste au-dessus met en bloc tous
   les span d'une case — c'est elle qui compose la ligne des années —, et le
   sigle passait donc à la ligne sous le filet, quoi qu'on dise du retour à la
   ligne. On le ramène en ligne, et on lui rend la taille et la couleur de la
   pastille qui l'entoure. */
.promo-case i span{display:inline;margin:0 0 0 9px;padding-left:9px;
  font-size:inherit;font-weight:inherit;letter-spacing:inherit;color:inherit;
  border-left:1px solid rgba(255,255,255,.5)}
.promo-case i{white-space:nowrap}

/* ---------- l'annuaire des anciennes promotions ----------
   La page « Les promotions » montre les mêmes promotions en grandes cases
   illustrées ; ici on cherche une année, pas une image. D'où des lignes denses,
   alignées sur trois colonnes, qui se parcourent du regard. */
#vue-anciennes-promotions .sec{padding:68px 0 116px}
.annuaire{border-top:1px solid var(--line)}
.annuaire-ligne{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;
  gap:16px 32px;align-items:baseline;
  padding:22px 4px 22px;border-bottom:1px solid var(--line);color:inherit;
  transition:background .22s ease,padding-left .22s ease}
.annuaire-ligne:hover,.annuaire-ligne:focus-visible{background:var(--stone-soft);padding-left:16px}
.annuaire-ligne b{font-family:Spectral,serif;font-size:21px;font-weight:400;color:var(--ink);
  transition:color .22s ease}
.annuaire-ligne b sup{font-size:.5em;vertical-align:.72em}
.annuaire-ligne:hover b,.annuaire-ligne:focus-visible b{color:var(--crimson)}
.annuaire-annees{font-family:Montserrat,sans-serif;font-size:12.5px;font-weight:500;
  letter-spacing:.14em;color:var(--muted)}
.annuaire-effectif{font-family:Montserrat,sans-serif;font-size:12.5px;color:var(--muted);
  justify-self:end;white-space:nowrap}
.annuaire-effectif::after{content:" \2192";margin-left:12px;color:var(--crimson)}
.annuaire-note{margin:34px 0 0;max-width:68ch;font-size:15px;line-height:1.7;color:var(--muted)}
/* Tant qu'aucune promotion ancienne n'est renseignée, la page n'a qu'un message
   à donner : il prend la place d'un bloc, encadré et centré, au lieu de flotter
   en petit caractère au milieu d'une page vide. Le filet rouge du haut reprend
   celui des fiches. */
.annuaire-note.annuaire-seule{margin:0;max-width:none;background:#fff;
  border:1px solid var(--line);border-top:2px solid var(--crimson);
  padding:46px 48px 48px;text-align:center;font-size:16.4px;color:var(--ink)}
@media (max-width:680px){.annuaire-note.annuaire-seule{padding:34px 24px 36px}}
@media (max-width:680px){
  .annuaire-ligne{grid-template-columns:1fr auto;gap:6px 18px}
  .annuaire-annees{grid-column:1}
  .annuaire-effectif{grid-row:1 / span 2}
}

/* ---------- trombinoscope ---------- */
.trombi-grille{display:grid;grid-template-columns:repeat(5,1fr);gap:30px}
.tete{margin:0}
/* La vignette est carrée et la photo la remplit : il reste toujours quelque
   chose dehors. « object-position » choisit ce qu'on garde, et le zoom permet
   de reculer quand le visage est trop serré. Les valeurs viennent de la fiche
   de l'étudiant, réglables depuis /admin ; sans réglage, ce sont celles
   écrites ici — la photo centrée, droite, à sa taille.

   Trois mécanismes se superposent, et c'est voulu :

   « object-position » choisit ce qu'on garde DANS la photo. Il ne peut pas
   sortir de ses bords : à zéro on voit le haut, à cent le bas, et au-delà il
   n'y a plus rien à montrer. C'est sa limite, et elle se rencontre vite — les
   portraits du site sont déjà des carrés, où ce réglage n'a donc aucune prise.

   « --tete-glisse-y » fait alors ce que l'autre ne sait pas faire : il pousse
   la photo entière hors de la case, et le fond paraît du côté opposé. C'est ce
   qui permet de remonter un visage quand la photo elle-même n'a plus de marge.

   « --tete-angle » redresse une photo prise de travers. La rotation vide les
   coins : le zoom doit la compenser, et l'outil de cadrage le calcule.

   L'ordre compte. Écrit ainsi, le glissement se mesure en pour-cent de la
   case et non de la photo agrandie : vingt pour cent restent vingt pour cent
   de ce qu'on voit, quel que soit le zoom. */
.tete img{width:100%;aspect-ratio:1;object-fit:cover;display:block;background:var(--stone-soft);
  object-position:var(--tete-x, 50%) var(--tete-y, 50%);
  transform:translate(var(--tete-glisse-x, 0%), var(--tete-glisse-y, 0%))
    rotate(var(--tete-angle, 0deg)) scale(var(--tete-zoom, 1));
  transition:transform .4s cubic-bezier(.2,.7,.3,1)}
/* Le survol agrandit de trois pour cent — par-dessus les réglages de la fiche,
   et non à leur place : écrit « scale(1.03) » seul, il aurait annulé le
   cadrage dès que la souris passe. */
.tete:hover img{transform:translate(var(--tete-glisse-x, 0%), var(--tete-glisse-y, 0%))
  rotate(var(--tete-angle, 0deg)) scale(calc(var(--tete-zoom, 1) * 1.03))}
.tete figcaption{margin-top:14px;padding-top:12px;border-top:2px solid var(--crimson);line-height:1.35}
.tete b{display:block;font-family:Spectral,serif;font-size:17px;font-weight:400;color:var(--ink)}
.tete span{display:block;font-family:Montserrat,sans-serif;font-size:12px;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-top:3px}
@media (max-width:1040px){.trombi-grille{grid-template-columns:repeat(3,1fr);gap:24px}}
@media (max-width:680px){.trombi-grille{grid-template-columns:repeat(2,1fr);gap:18px}}

/* ---------- trombinoscope : le cadre et le voile au survol ----------
   Le portrait est enfermé dans .portrait, qui masque le débordement : le voile
   monte du bas, et l'image s'agrandit, glisse ou pivote sans sortir du cadre.
   Ce cadre entoure désormais tous les portraits, et non plus seulement ceux
   qui portent des liens — sans lui, une photo redressée aurait débordé sur la
   légende et sur ses voisines. */
.tete .portrait{position:relative;overflow:hidden;background:var(--stone-soft)}
.voile{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:18px 16px 16px;
  background:linear-gradient(to top,rgba(17,17,17,.88) 0%,rgba(17,17,17,.62) 42%,rgba(17,17,17,.18) 72%,rgba(17,17,17,0) 100%);
  opacity:0;transition:opacity .32s ease;
}
.tete:hover .voile,
.tete:focus-within .voile{opacity:1}

/* les boutons glissent légèrement vers le haut en apparaissant */
.voile-liens{display:flex;flex-wrap:wrap;gap:8px;
  transform:translateY(10px);transition:transform .32s cubic-bezier(.2,.7,.3,1)}
.tete:hover .voile-liens,.tete:focus-within .voile-liens{transform:translateY(0)}
.pastille{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 11px;border:1px solid rgba(255,255,255,.62);
  font-family:Montserrat,sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:#fff;
  background:rgba(255,255,255,.06);
  transition:background .22s ease,border-color .22s ease;
}
.pastille:hover{background:var(--crimson);border-color:var(--crimson)}
.pastille svg{width:13px;height:13px;flex:none;fill:currentColor}
/* l'icône CV est un tracé : un peu plus grande pour que les lettres restent lisibles */
.pastille .ico-cv{width:14px;height:14px}

/* écrans tactiles : pas de survol possible, le voile reste visible */
@media (hover:none){
  .voile{opacity:1;background:linear-gradient(to top,rgba(17,17,17,.9) 0%,rgba(17,17,17,.55) 45%,rgba(17,17,17,0) 85%)}
  .voile-liens{transform:none}
}
@media (max-width:680px){
  .voile{padding:12px 10px 10px}
  .pastille{padding:6px 8px;font-size:9.5px;letter-spacing:.08em}
}

/* ---------- l'en-tête d'une page de promotion ----------
   Il est plus haut qu'ailleurs. Sur les autres pages, le bandeau est un décor
   derrière un titre ; ici, la photo est le sujet — c'est la promotion
   elle-même, et on vient la regarder.

   À 396 px de haut pour 1380 de large, une photo de groupe se réduisait à une
   bande de visages hauts comme un ongle. Le retrait monte donc d'environ la
   moitié, et il suit la largeur de l'écran pour que le rapport tienne du
   portable au grand écran.

   Le voile, lui, ne bouge pas. Il paraît déjà plus léger sur un bandeau haut
   — la même teinte étalée sur deux fois plus de hauteur laisse voir bien
   davantage —, et l'éclaircir en plus mettrait en péril la lisibilité du
   titre, qui passe au milieu de la photo et non au-dessus.

   La règle porte les trois sélecteurs qu'il faut pour l'emporter : au-delà de
   1500 px, pages.css en pose une de même nature sur « .page-head:not(.sobre) »,
   qui est plus précise qu'une classe seule et reprenait la main — le bandeau
   rapetissait en passant sur grand écran. */
/* Le titre descend au bas du bandeau. Au milieu, il coupait la photo de groupe
   en deux et se posait sur les visages ; en bas, il laisse voir tout ce qui est
   au-dessus et se lit comme une légende sous une estampe. Le retrait du haut
   grandit donc, celui du bas se resserre. */
.page-head.page-head-promo:not(.sobre){padding:clamp(262px,26vw,500px) 0 clamp(54px,4.4vw,94px)}
@media (max-width:860px){
  .page-head.page-head-promo:not(.sobre){padding:196px 0 44px}
}

/* ---------- le titre et son parrain, sur une ligne ----------
   La promotion et l'entreprise qui l'accompagne se nomment d'un seul tenant.
   Une barre claire les sépare, assez haute pour tenir tête au titre.

   Le parrain forme un seul objet et non trois pièces en file : la pastille à
   gauche, et contre elle l'étiquette et le nom empilés. Deux lignes serrées
   font le poids d'un titre de cinquante pixels, là où une ligne unique se
   serait perdue à côté.

   Le logo est sur une pastille claire : ces logos sont dessinés pour du papier
   blanc, et les noirs comme les bleu marine disparaîtraient sur une photo de
   groupe assombrie. */
.promo-rang{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px 28px}
/* Le titre s'efface d'un cran. « Les promotions » le surmonte dans la même
   fonte, et c'est elle qui ouvre : le numéro vient après, et n'a plus besoin
   de cinquante pixels pour se faire entendre. Il fait désormais le poids du
   nom du parrain qui lui fait face. */
.promo-rang h1{margin:0;font-size:clamp(26px,2.7vw,36px)}
.promo-barre{width:1px;align-self:stretch;min-height:40px;background:rgba(255,255,255,.3);flex:none}
.promo-blason{display:flex;align-items:center;gap:15px;text-decoration:none}
.promo-blason-ecu{display:flex;align-items:center;justify-content:center;flex:none;
  background:rgba(255,255,255,.96);padding:9px 14px;min-width:78px;
  box-shadow:0 12px 30px -14px rgba(0,0,0,.7);
  transition:transform .32s cubic-bezier(.22,.68,.3,1),box-shadow .32s ease}
.promo-blason-ecu img{display:block;max-height:26px;max-width:112px;width:auto;height:auto}
.promo-blason-dire{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left}
.promo-blason-mot{font-family:Montserrat,sans-serif;font-size:9px;font-weight:600;
  letter-spacing:.19em;text-transform:uppercase;color:rgba(255,255,255,.58);
  text-shadow:0 1px 10px rgba(0,0,0,.5)}
.promo-blason-nom{font-family:Spectral,Georgia,serif;font-size:17.5px;color:rgba(255,255,255,.95);
  text-shadow:0 1px 12px rgba(0,0,0,.55);border-bottom:1px solid transparent;padding-bottom:1px;
  transition:border-color .24s ease}
.promo-blason:hover .promo-blason-ecu{transform:translateY(-1px);
  box-shadow:0 16px 34px -14px rgba(0,0,0,.78)}
.promo-blason:hover .promo-blason-nom{border-bottom-color:rgba(255,255,255,.55)}

/* Repliés, le titre et le parrain ne sont plus côte à côte : la barre n'a plus
   rien à séparer, et le parrain se centre sous le titre. */
@media (max-width:1040px){
  .promo-rang{gap:16px}
  .promo-barre{display:none}
  .promo-blason{margin:0 auto}
}
@media (max-width:620px){
  .promo-blason{gap:12px}
  .promo-blason-nom{font-size:16px}
  .promo-blason-ecu{padding:8px 12px;min-width:68px}
  .promo-blason-ecu img{max-height:22px;max-width:94px}
}

/* ---------- case de promotion illustrée ----------
   La photo de groupe passe en fond, voilée de sombre pour que le texte reste
   lisible. Au survol, le voile s'allège : la photo se révèle un peu. */
.promo-case.avec-photo{position:relative;overflow:hidden;background:#1C1C1C;
  background-image:var(--photo);
  background-size:cover;background-position:var(--case-x, center) var(--case-y, center)}
/* Les deux cases en tête servent une vignette de mille huit cents pixels,
   parce qu'elles tiennent jusqu'à mille deux cent soixante-dix-huit : à neuf
   cents, la photographie était agrandie de moitié et cela se voyait. Mais sur
   un téléphone la même case ne fait plus que trois cent quatre-vingts pixels,
   et quatre cent vingt kilo-octets y seraient dix fois le nécessaire. En
   dessous de la tablette, on revient donc à la petite. */
@media (max-width:760px){
  .promo-vedette.avec-photo{background-image:var(--photo-petite)}
}
/* La photo est reprise par un calque interne, seul à pouvoir s'agrandir sans
   entraîner le texte : un fond d'élément ne se met pas à l'échelle. */
.promo-case.avec-photo::after{content:"";position:absolute;inset:0;
  background-image:inherit;background-size:cover;
  background-position:var(--case-x, center) var(--case-y, center);
  transition:transform .75s cubic-bezier(.2,.7,.3,1)}
.promo-case.avec-photo::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to bottom,rgba(17,17,17,.72),rgba(17,17,17,.82));
  transition:background .35s ease}
.promo-case.avec-photo:hover::after{transform:scale(1.045)}
.promo-case.avec-photo:hover{background-color:#1C1C1C}
.promo-case.avec-photo:hover::before{
  background:linear-gradient(to bottom,rgba(17,17,17,.56),rgba(17,17,17,.72))}
.promo-case.avec-photo b,.promo-case.avec-photo span{position:relative;z-index:2;color:#fff}
.promo-case.avec-photo span{color:rgba(255,255,255,.78)}
.promo-case.avec-photo i{position:relative;z-index:2}

/* Le survol soulève la case et la détache de la grille. */
.promo-case{position:relative;transition:background .25s ease,transform .4s cubic-bezier(.2,.7,.3,1),
  box-shadow .4s ease}
.promo-case:hover{z-index:2;transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(28,28,28,.15)}
/* Un filet rouge se déploie sous le numéro de promotion. */
.promo-case b{position:relative;padding-bottom:10px}
.promo-case b::after{content:"";position:absolute;left:0;bottom:0;width:40px;height:2px;
  background:var(--crimson);transform:scaleX(0);transform-origin:left;
  transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.promo-case:hover b::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){
  .promo-case,.promo-case.avec-photo::after,.promo-case b::after{transition:none}
  .promo-case:hover{transform:none}
}

/* ---------- arrivée des portraits ----------
   À l'ouverture d'une page de promotion, les vignettes paraissent l'une après
   l'autre. Le décalage est court : au-delà, l'attente se sent. */
@keyframes paraitre{
  from{opacity:0;transform:translateY(16px) scale(.985)}
  to{opacity:1;transform:none}
}
.trombi-grille .tete{animation:paraitre .9s cubic-bezier(.22,.7,.3,1) backwards}
.trombi-grille .tete:nth-child(1){animation-delay:0.05s}
.trombi-grille .tete:nth-child(2){animation-delay:0.10s}
.trombi-grille .tete:nth-child(3){animation-delay:0.15s}
.trombi-grille .tete:nth-child(4){animation-delay:0.20s}
.trombi-grille .tete:nth-child(5){animation-delay:0.25s}
.trombi-grille .tete:nth-child(6){animation-delay:0.30s}
.trombi-grille .tete:nth-child(7){animation-delay:0.35s}
.trombi-grille .tete:nth-child(8){animation-delay:0.40s}
.trombi-grille .tete:nth-child(9){animation-delay:0.45s}
.trombi-grille .tete:nth-child(10){animation-delay:0.50s}
.trombi-grille .tete:nth-child(11){animation-delay:0.55s}
.trombi-grille .tete:nth-child(12){animation-delay:0.60s}
.trombi-grille .tete:nth-child(13){animation-delay:0.65s}
.trombi-grille .tete:nth-child(14){animation-delay:0.70s}
.trombi-grille .tete:nth-child(15){animation-delay:0.75s}
.trombi-grille .tete:nth-child(16){animation-delay:0.80s}
.trombi-grille .tete:nth-child(17){animation-delay:0.85s}
.trombi-grille .tete:nth-child(18){animation-delay:0.90s}
.trombi-grille .tete:nth-child(19){animation-delay:0.95s}
.trombi-grille .tete:nth-child(20){animation-delay:1.00s}
.trombi-grille .tete:nth-child(21){animation-delay:1.05s}
.trombi-grille .tete:nth-child(22){animation-delay:1.10s}
.trombi-grille .tete:nth-child(23){animation-delay:1.15s}
.trombi-grille .tete:nth-child(24){animation-delay:1.20s}
.trombi-grille .tete:nth-child(25){animation-delay:1.25s}
.trombi-grille .tete:nth-child(26){animation-delay:1.30s}
.trombi-grille .tete:nth-child(27){animation-delay:1.35s}
.trombi-grille .tete:nth-child(28){animation-delay:1.40s}
.trombi-grille .tete:nth-child(29){animation-delay:1.45s}
.trombi-grille .tete:nth-child(30){animation-delay:1.50s}
.trombi-grille .tete:nth-child(n+31){animation-delay:1.55s}
@media (prefers-reduced-motion:reduce){
  .trombi-grille .tete{animation:none}
}

/* ---------- le parrain sur un entête sans photo ----------
   Tout ce bloc a été dessiné pour du blanc sur une photographie assombrie :
   le mot, le nom et le filet. Dès qu'on retire la photo, il s'écrit en blanc
   sur fond clair et disparaît. On le repasse donc à l'encre, et les ombres
   portées — qui n'avaient de sens que sur une image — s'effacent : une ombre
   sur du texte noir posé sur du papier ne fait que le salir.

   La pastille du logo garde son fond blanc, mais elle est désormais cernée
   d'un filet : sans lui, un logo blanc sur fond clair n'aurait plus de bord. */
.page-head.sobre .promo-barre{background:var(--line)}
/* La petite ligne passe à l'encre elle aussi, et non au gris des mentions
   secondaires. Sur la photographie assombrie elle était blanche à 58 % : un
   gris moyen en est la transposition arithmétique, pas la transposition
   visuelle. En neuf points, en capitales espacées, il faut tout le noir. */
.page-head.sobre .promo-blason-mot{color:var(--ink);text-shadow:none}
.page-head.sobre .promo-blason-nom{color:var(--ink);text-shadow:none}
.page-head.sobre .promo-blason-ecu{background:#fff;border:1px solid var(--line);
  box-shadow:0 10px 24px -16px rgba(28,28,28,.5)}
.page-head.sobre .promo-blason:hover .promo-blason-ecu{
  box-shadow:0 14px 28px -16px rgba(28,28,28,.6)}
.page-head.sobre .promo-blason:hover .promo-blason-nom{border-bottom-color:var(--crimson)}