/* 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}
.promo-cycle{display:inline-block;margin-left:14px;padding:5px 12px 4px;background:var(--crimson);color:#fff;
  font-family:Montserrat,sans-serif;font-size:12px;font-weight:500;letter-spacing:.12em;vertical-align:.42em}

/* ---------- 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. */
.promos-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:var(--ink-deep);
  border:4px solid var(--ink-deep)}
.promo-case{background:#fff;padding:34px 32px 36px;display:block;transition:background .25s ease}
.promo-case:hover{background:var(--stone-soft)}
.promo-case b{display:block;font-family:Spectral,serif;font-size:26px;font-weight:400;color:var(--ink)}
.promo-case b sup{font-size:.5em;vertical-align:.72em}
.promo-case span{display:block;margin-top:8px;font-family:Montserrat,sans-serif;font-size:12px;
  font-weight:500;letter-spacing:.14em;color:var(--muted)}
.promo-case i{display:inline-block;margin-top:14px;padding:4px 11px 3px;background:var(--crimson);color:#fff;
  font-family:Montserrat,sans-serif;font-style:normal;font-size:11px;font-weight:500;letter-spacing:.12em}
.page-head h1 sup{font-size:.46em;vertical-align:.8em}
.page-head h1 .promo-cycle{vertical-align:.34em}
@media (max-width:1040px){.promos-grille{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.promos-grille{grid-template-columns:1fr}}

/* ---------- trombinoscope ---------- */
.trombi-grille{display:grid;grid-template-columns:repeat(5,1fr);gap:30px}
.tete{margin:0}
.tete img{width:100%;aspect-ratio:1;object-fit:cover;display:block;background:var(--stone-soft);
  transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.tete:hover img{transform:scale(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 : voile au survol ----------
   Le portrait est enfermé dans .portrait, qui masque le débordement :
   le voile monte du bas et l'image s'agrandit sans sortir du cadre. */
.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}
}

/* ---------- 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-size:cover;background-position:center}
/* 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: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}
}