/* Olympiades · pages des saisons.
   Feuille reprise du mini-site d'archives, portée sous le préfixe .oly
   et recolorée aux couleurs STEM4ALL. Le préfixe n'est pas cosmétique :
   sans lui, .container, .section, .btn et les titres écraseraient le
   thème public, qui utilise les mêmes noms. */

.oly {
  --ink: #1f2330;
  --muted: #777777;
  --paper: #fbf9f7;
  --card: #fff;
  --line: rgba(31, 35, 48, .12);
  --pink: #B42E5E;
  --violet: #D4A017;
  --mint: #F3D7A8;
  --yellow: #E8B923;
  --season: #B42E5E;
  --season-rgb: 180, 46, 94;
  --container: 1180px;
  --shadow: 0 24px 70px rgba(31, 35, 48, .12);
}
.oly * { box-sizing: border-box; }
/* Le thème public (style.css) pose des couleurs sur h1..h3, p et li. Une
   règle qui vise l'élément bat toujours la couleur héritée : sans ce rappel,
   les titres des sections sombres de cette maquette ressortaient en gris
   foncé sur fond foncé, et tout le corps de texte en #777. On rend la main à
   l'héritage ; les nuances contextuelles ci-dessous restent prioritaires. */
.oly h1, .oly h2, .oly h3, .oly h4,
.oly p, .oly li, .oly span, .oly small,
.oly strong, .oly em, .oly figcaption, .oly blockquote { color: inherit; }


.oly { scroll-behavior: smooth; }
.oly {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: "Poppins", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.oly a { color: inherit; text-decoration: none; }
.oly button { color: inherit; font: inherit; }
.oly img { display: block; max-width: 100%; }
.oly :focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }
.oly .container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.oly .section { padding: 72px 0; }
.oly h1, .oly h2, .oly h3 { margin: 0; font-family: "Poppins", sans-serif; letter-spacing: -.04em; }
.oly h1 { max-width: 880px; font-size: clamp(3.2rem, 7.2vw, 7rem); line-height: .92; }
.oly h2 { margin-bottom: 18px; font-size: clamp(2.15rem, 4.2vw, 4rem); line-height: 1.04; }
.oly h3 { margin-bottom: 10px; font-size: 1.18rem; line-height: 1.25; }
.oly p { margin-top: 0; line-height: 1.72; }
.oly .lead { color: var(--muted); font-size: clamp(1.02rem, 1.6vw, 1.2rem); }
.oly .eyebrow {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 20px;
  color: var(--season); font-size: .76rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
}
.oly .eyebrow::before { content: ""; width: 25px; height: 3px; border-radius: 99px; background: currentColor; }
.oly .section-heading { max-width: 760px; margin-bottom: 32px; }
.oly .section-heading p { margin-bottom: 0; }
.oly .btn {
  min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 22px;
  border: 1px solid transparent; border-radius: 999px; font-weight: 800; cursor: pointer; transition: .2s;
}
.oly .btn:hover { transform: translateY(-2px); }
.oly .btn-primary { background: var(--season); color: #fff; box-shadow: 0 14px 30px rgba(var(--season-rgb), .24); }
.oly .btn-light { border-color: var(--line); background: #fff; }
.oly .season-hero { position: relative; overflow: hidden; padding: 48px 0 56px; }
.oly .season-hero::after {
  content: ""; position: absolute; z-index: -1; width: 620px; height: 620px; right: -270px; top: -280px;
  border: 1px solid rgba(var(--season-rgb), .23); border-radius: 50%; box-shadow: 0 0 0 80px rgba(var(--season-rgb), .03), 0 0 0 160px rgba(var(--season-rgb), .02);
}
.oly .season-hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 44px; align-items: center; }
.oly .season-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 25px; font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.oly .season-kicker span { padding: 8px 11px; border-radius: 999px; background: rgba(var(--season-rgb), .1); color: var(--season); }
.oly .season-hero h1 span { color: var(--season); }
.oly .season-hero .lead { max-width: 710px; margin: 28px 0 32px; }
.oly .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.oly .season-art { position: relative; min-height: 520px; }
.oly .number-card {
  position: absolute; inset: 0 35px 0 0; display: grid; place-items: center; overflow: hidden;
  border-radius: 160px 30px 160px 30px; background: linear-gradient(145deg, var(--ink), color-mix(in srgb, var(--season) 62%, var(--ink)));
  box-shadow: var(--shadow); color: rgba(255,255,255,.94);
}
.oly .number-card::before { content: ""; position: absolute; width: 310px; height: 310px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; box-shadow: 0 0 0 62px rgba(255,255,255,.035), 0 0 0 124px rgba(255,255,255,.025); }
.oly .number-card.has-image::before { z-index: 2; width: 240px; height: 240px; right: -95px; top: -95px; }
.oly .number-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.oly .visual-shade { position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, rgba(23,20,47,.03), rgba(23,20,47,.64)); }
.oly .season-number { position: absolute; z-index: 2; left: 28px; bottom: -24px; color: rgba(255,255,255,.92); font: 800 clamp(8rem, 14vw, 12rem)/1 "Poppins"; letter-spacing: -.12em; text-shadow: 0 12px 35px rgba(0,0,0,.2); }
.oly .season-formula { position: absolute; z-index: 3; left: -22px; top: 46px; padding: 15px 18px; border-radius: 15px; background: #fff; box-shadow: 0 14px 35px rgba(23,20,47,.16); font: 800 .88rem "Poppins"; transform: rotate(-6deg); }
.oly .year-badge { position: absolute; z-index: 3; right: 0; bottom: 55px; width: 112px; height: 112px; display: grid; place-items: center; border-radius: 50%; background: var(--yellow); font: 800 1.05rem "Poppins"; transform: rotate(7deg); }
.oly .archive-note { margin: 26px 0 0; display: flex; align-items: flex-start; gap: 10px; color: var(--muted); font-size: .82rem; }
.oly .archive-note::before { content: "i"; flex: 0 0 auto; width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; font: 700 .72rem serif; }
.oly .facts-bar { border-block: 1px solid var(--line); background: rgba(255,255,255,.55); }
.oly .facts { min-height: 105px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: stretch; }
.oly .fact { display: flex; flex-direction: column; justify-content: center; padding: 20px 26px; border-left: 1px solid var(--line); }
.oly .fact:first-child { border-left: 0; }
.oly .fact small { color: var(--muted); font-size: .69rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.oly .fact strong { margin-top: 6px; font: 800 clamp(1.15rem, 1.7vw, 1.42rem) "Poppins"; }

/* Une barre de constat, pas d'organisation : ces pourcentages sont la raison
   d'être des Olympiades, ils doivent frapper avant le reste de la page. */
.oly .facts-bar--stat .facts { min-height: 132px; }
.oly .facts-bar--stat .fact strong { margin-top: 8px; color: var(--season); font: 800 clamp(2.25rem, 4.2vw, 3.3rem) "Poppins"; line-height: 1; letter-spacing: -.035em; }
.oly .facts-bar--stat .fact small { font-size: .72rem; }

/* Palmarès : une carte porte une équipe, donc plusieurs noms. La liste
   remplace le paragraphe unique des cartes de marraines, et le visuel garde
   son format d'origine (les noms y sont inscrits, on ne le recadre pas). */
.oly .people-grid.laureate-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.oly .laureate-card .person-photo { height: auto; padding: 14px 14px 0; background: #fff; }
.oly .laureate-card .person-photo img { width: 100%; height: auto; max-height: 430px; object-fit: contain; border-radius: 14px; background: #f4edf0; }
.oly .laureate-card .person-rank { color: var(--season); }
.oly .laureate-list { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.oly .laureate-list li { display: flex; flex-direction: column; }
.oly .laureate-list strong { font-size: .95rem; }
.oly .laureate-list span { color: var(--muted); font-size: .78rem; line-height: 1.45; }
@media (max-width: 700px) {
.oly .people-grid.laureate-grid { grid-template-columns: 1fr; }
}
.oly .story-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 52px; align-items: start; }
/* Le titre de section suit la lecture du texte long qui lui fait face. Le
   décalage suit l'en-tête du site, qui se fixe et se rétracte au défilement :
   les 130 px de la maquette d'origine, calés sur son propre en-tête, le
   décrochaient d'un cran. */
.oly .story-aside { position: sticky; top: 110px; }
.oly .story-copy { font-size: 1.03rem; }
.oly .story-copy p { color: var(--muted); }
.oly .story-copy p:first-child { color: var(--ink); font-size: 1.32rem; font-weight: 600; line-height: 1.55; }
.oly .feature-list { display: grid; gap: 14px; margin-top: 30px; }
.oly .feature { display: grid; grid-template-columns: 45px 1fr; gap: 15px; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.oly .feature-num { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 14px; background: rgba(var(--season-rgb), .1); color: var(--season); font: 800 .8rem "Poppins"; }
.oly .feature p { margin-bottom: 0; font-size: .93rem; }
.oly .timeline-section { background: var(--ink); color: #fff; }
.oly .timeline-section .eyebrow { color: var(--mint); }
.oly .timeline-section .lead { color: rgba(255,255,255,.62); }
/* Le calendrier de saison porte les mêmes noms de classes que le composant
   « timeline » du thème public (style.css l. 17902). Deux de ses règles
   passaient au travers du préfixe .oly, faute d'être contredites ici :

     .timeline:before          un rail vertical en pointillés, qui flottait
                               à gauche sans rien relier ;
     .timeline .timeline-item  margin: 3rem 2rem 3rem 5rem, soit 112 px de
                               marge horizontale dans une colonne de grille
                               d'environ 220 px. Les cartes tombaient à une
                               centaine de pixels de large et le texte se
                               brisait à un mot par ligne.

   Les deux sont neutralisées explicitement plutôt que par une surenchère de
   sélecteurs : on dit ce qu'on refuse, et pourquoi. */
/* Le fil de la saison, en lecture verticale.

   Trois raisons d'avoir abandonné la rangée de cartes.

   La largeur d'abord. Cinq à six étapes sur une ligne de 1110 px donnent des
   cartes de 180 à 210 px, où « Épreuve collaborative de quatre heures par
   équipes de trois » tombe en cinq lignes de trois mots. Le texte n'était
   pas serré par accident, il l'était par construction.

   La chronologie ensuite : un calendrier se lit dans un ordre, et rien ne
   reliait les cartes entre elles.

   Le nombre d'étapes enfin. Il varie de quatre à six selon les saisons, et
   une colonne par étape rétrécit tout le monde dès qu'on en ajoute une. En
   lignes, la sixième étape ne coûte rien aux cinq autres.

   Le trait et sa pastille sont peints dans une piste de grille dédiée, large
   de 14 px, et non positionnés en absolu : le fil reste aligné sans qu'aucun
   décalage en pixels ne soit à maintenir le jour où la colonne des dates
   change de largeur. */
.oly .timeline { display: grid; gap: 0; list-style: none; }
.oly .timeline::before { content: none; }

.oly .timeline-item {
  display: grid;
  grid-template-columns: minmax(0, 168px) 14px minmax(0, 1fr);
  /* Les deux lignes sont déclarées, et non laissées à la grille implicite :
     « grid-row: 1 / -1 » compte les lignes de la grille EXPLICITE. Sans
     cette déclaration, -1 valait 1, le trait ne couvrait que la ligne du
     titre, et le fil se brisait entre chaque étape. */
  grid-template-rows: auto auto;
  column-gap: 26px;
  margin: 0; padding: 0; border: 0; border-radius: 0; background: none; min-height: 0;
}

/* Piste 2 : le trait continu, et la pastille de l'étape par-dessus. */
.oly .timeline-item::before {
  content: "";
  grid-column: 2;
  grid-row: 1 / -1;
  background-image:
    radial-gradient(circle at 50% 14px, var(--season) 0 5.5px, transparent 6px),
    linear-gradient(rgba(255,255,255,.16), rgba(255,255,255,.16));
  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, 50% 0;
  background-size: auto, 2px 100%;
}
/* Le fil part de la première pastille et s'arrête à la dernière : il ne
   pendouille ni au-dessus de la première étape ni sous la dernière. */
.oly .timeline-item:first-child::before { background-position: 0 0, 50% 14px; background-size: auto, 2px calc(100% - 14px); }
.oly .timeline-item:last-child::before { background-size: auto, 2px 14px; }

.oly .timeline-date {
  grid-column: 1; grid-row: 1;
  margin: 0; padding-top: 6px;
  text-align: right;
  color: var(--mint);
  font: 800 .78rem/1.5 "Poppins";
  letter-spacing: .055em;
  text-transform: uppercase;
}
.oly .timeline-item h3 { grid-column: 3; grid-row: 1; margin: 0 0 8px; font-size: 1.2rem; line-height: 1.35; }
.oly .timeline-item p {
  grid-column: 3; grid-row: 2;
  max-width: 62ch;
  margin: 0;
  color: rgba(255,255,255,.62);
  font-size: .95rem;
  line-height: 1.65;
}
/* L'espace entre deux étapes vit à l'intérieur de la ligne, sur son dernier
   élément, et non en padding : la piste du trait suit la hauteur du contenu,
   et le fil resterait interrompu à chaque étape s'il s'agissait de padding. */
.oly .timeline-item > :last-child { margin-bottom: 38px; }
.oly .timeline-item:last-child > :last-child { margin-bottom: 0; }
.oly .media-section { padding: 0 0 104px; }
.oly .media-shell { display: grid; grid-template-columns: .72fr 1.28fr; align-items: center; gap: 40px; padding: 34px; border-radius: 28px; background: var(--ink); color: #fff; box-shadow: var(--shadow); }
.oly .media-copy { padding: 18px; }
.oly .media-copy .eyebrow { color: var(--mint); }
.oly .media-copy h2 { font-size: clamp(1.9rem, 3vw, 3rem); }
.oly .media-copy p { margin-bottom: 0; color: rgba(255,255,255,.6); }
.oly .media-shell video { width: 100%; min-height: 310px; max-height: 520px; object-fit: cover; border-radius: 20px; background: #141721; }
.oly .gallery-section { padding: 0 0 104px; }
.oly .gallery-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 36px; margin-bottom: 30px; }
.oly .gallery-head h2 { max-width: 700px; margin-bottom: 0; }
.oly .gallery-head > p { max-width: 390px; margin-bottom: 7px; color: var(--muted); text-align: right; }
.oly .gallery-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.oly .gallery-item { position: relative; grid-column: span 4; min-height: 330px; margin: 0; overflow: hidden; border-radius: 24px; background: rgba(var(--season-rgb), .1); }
.oly .gallery-count-2 .gallery-item { grid-column: span 6; min-height: 440px; }
.oly .gallery-count-4 .gallery-item { grid-column: span 6; min-height: 390px; }
.oly .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.oly .gallery-item:hover img { transform: scale(1.025); }
.oly .gallery-item figcaption { position: absolute; left: 18px; right: 18px; bottom: 18px; padding: 12px 15px; border-radius: 14px; background: rgba(255,255,255,.9); color: var(--ink); font-size: .8rem; font-weight: 800; backdrop-filter: blur(10px); }
.oly .quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.oly .quote-card { display: flex; flex-direction: column; min-height: 100%; padding: 27px; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: 0 10px 35px rgba(23,20,47,.04); }
.oly .quote-card::before { content: "“"; height: 45px; color: var(--season); font: 800 4rem/1 "Poppins"; }
.oly .quote-card blockquote { margin: 12px 0 24px; color: var(--muted); line-height: 1.65; }
.oly .quote-person { margin-top: auto; display: flex; align-items: center; gap: 12px; }
.oly .quote-person img { width: 46px; height: 46px; object-fit: cover; border-radius: 50%; background: rgba(var(--season-rgb), .1); }
.oly .quote-person span { display: flex; flex-direction: column; font-size: .82rem; }
.oly .quote-person strong { font-family: "Poppins"; font-size: .9rem; }
.oly .quote-person small { margin-top: 2px; color: var(--muted); }
.oly .people-section { background: #faf4f6; }
.oly .people-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.oly .person-card { position: relative; overflow: hidden; min-height: 170px; padding: 24px; border-radius: 22px; background: #fff; }
.oly .person-card::after { content: attr(data-initials); position: absolute; right: -8px; bottom: -24px; color: rgba(var(--season-rgb), .08); font: 800 5.5rem "Poppins"; }
.oly .person-card > * { position: relative; z-index: 1; }
.oly .person-rank { display: inline-flex; margin-bottom: 28px; padding: 6px 9px; border-radius: 999px; background: rgba(var(--season-rgb), .1); color: var(--season); font-size: .69rem; font-weight: 800; text-transform: uppercase; }
.oly .person-card p { margin-bottom: 0; color: var(--muted); font-size: .82rem; line-height: 1.5; }
.oly .person-card.has-photo { min-height: 380px; padding: 0; display: flex; flex-direction: column; }
.oly .person-card.has-photo::after { z-index: 2; }
.oly .person-photo { height: 230px; overflow: hidden; background: rgba(var(--season-rgb), .1); }
.oly .person-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .45s ease; }
.oly .person-card:hover .person-photo img { transform: scale(1.035); }
.oly .person-body { position: relative; z-index: 3; padding: 24px; flex: 1; background: #fff; }
.oly .logo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.oly .logo-card { min-height: 110px; display: grid; place-items: center; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.oly .logo-card img { max-width: 150px; max-height: 72px; object-fit: contain; filter: grayscale(1); opacity: .72; transition: .2s; }
.oly .logo-card:hover img { filter: none; opacity: 1; }
.oly .logo-card.image-unavailable, .oly .person-photo.image-unavailable { background: linear-gradient(135deg, rgba(var(--season-rgb), .12), rgba(118,103,239,.08)); }
.oly .logo-card.image-unavailable img, .oly .person-photo.image-unavailable img { display: none; }
.oly .season-nav { padding: 40px 0 60px; }
.oly .season-nav-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.oly .season-link { min-height: 150px; display: flex; flex-direction: column; justify-content: space-between; padding: 25px; border: 1px solid var(--line); border-radius: 22px; background: #fff; transition: .2s; }
.oly .season-link:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.oly .season-link.next { align-items: flex-end; text-align: right; }
.oly .season-link small { color: var(--muted); font-weight: 700; }
.oly .season-link strong { font: 800 1.3rem "Poppins"; }
.oly .hub-hero { padding: 52px 0 60px; }
.oly .hub-hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 48px; align-items: center; }
.oly .hub-hero p { max-width: 700px; margin: 28px 0 30px; }
.oly .hub-collage { position: relative; min-height: 420px; }
.oly .hub-photo-main, .oly .hub-photo-small { position: absolute; object-fit: cover; box-shadow: var(--shadow); }
.oly .hub-photo-main { inset: 0 0 54px 34px; width: calc(100% - 34px); height: calc(100% - 54px); border-radius: 150px 30px 150px 30px; }
.oly .hub-photo-small { width: 180px; height: 240px; left: -24px; bottom: 0; border: 8px solid var(--paper); border-radius: 90px 20px 90px 20px; }
.oly .hub-stamp { position: absolute; right: -20px; top: 28px; width: 112px; height: 112px; display: grid; place-content: center; border-radius: 50%; background: var(--yellow); font: 800 2.3rem/.8 "Poppins"; text-align: center; transform: rotate(7deg); box-shadow: 0 18px 38px rgba(23,20,47,.14); }
.oly .hub-stamp small { font-size: .67rem; letter-spacing: .06em; text-transform: uppercase; }
.oly .archive-section { padding: 60px 0 72px; background: #faf4f6; }
.oly .archive-intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 38px; }
.oly .archive-intro span { font: 800 clamp(2rem, 4vw, 3.6rem) "Poppins"; letter-spacing: -.05em; }
.oly .archive-intro p { max-width: 420px; margin-bottom: 4px; color: var(--muted); text-align: right; }
.oly .hub-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.oly .hub-card { position: relative; overflow: hidden; min-height: 380px; display: flex; flex-direction: column; padding: 28px; border-radius: 28px; background: var(--ink); color: #fff; transition: transform .25s, box-shadow .25s; }
.oly .hub-card { grid-column: span 4; min-height: 360px; }
.oly .hub-card:first-child, .oly .hub-card:last-child { grid-column: span 6; }
.oly .hub-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.oly .hub-card::before { content: attr(data-number); z-index: 2; position: absolute; right: -16px; bottom: -55px; color: rgba(255,255,255,.11); font: 800 13rem "Poppins"; letter-spacing: -.12em; }
.oly .hub-card-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.oly .hub-card:hover .hub-card-image { transform: scale(1.035); }
.oly .hub-card-overlay { position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, rgba(23,20,47,.08), rgba(23,20,47,.88) 82%); }
.oly .hub-card > * { position: relative; z-index: 1; }
.oly .hub-card > :not(.hub-card-image):not(.hub-card-overlay) { z-index: 3; }
.oly .hub-card small { color: var(--mint); font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.oly .hub-card h2 { margin: auto 0 12px; font-size: 2rem; }
.oly .hub-card p { max-width: 440px; color: rgba(255,255,255,.68); font-size: .88rem; line-height: 1.55; }
.oly .hub-card .card-arrow { width: 46px; height: 46px; display: grid; place-items: center; margin-top: auto; border-radius: 50%; background: #fff; color: var(--ink); font-size: 1.2rem; }
/* L'apparition au défilement ne se met en place que si le script tourne :
   la classe oly-anim est posée par olympiades.js. Sans elle, tout est visible.
   Auparavant l'état masqué était le défaut du CSS : une erreur JavaScript, un
   fichier qui ne charge pas, et la page entière restait blanche. */
.oly .reveal { opacity: 1; transform: none; }
.oly-anim .oly .reveal { opacity: 0; transform: translateY(20px); transition: opacity .65s, transform .65s; }
.oly-anim .oly .reveal.visible { opacity: 1; transform: none; }
@media (max-width: 980px) {
.oly .season-hero-grid, .oly .story-grid { grid-template-columns: 1fr; }
.oly .hub-hero-grid { grid-template-columns: 1fr; }
.oly .hub-collage { width: min(100%, 620px); margin-inline: auto; }
.oly .media-shell { grid-template-columns: 1fr; }
/* La colonne des dates se resserre avant de disparaître. */
.oly .timeline-item { grid-template-columns: minmax(0, 120px) 14px minmax(0, 1fr); column-gap: 18px; }
.oly .gallery-item, .oly .gallery-count-2 .gallery-item, .oly .gallery-count-4 .gallery-item { grid-column: span 6; }
.oly .season-art { width: min(100%, 650px); margin: 0 auto; }
.oly .story-aside { position: static; }
.oly .quote-grid { grid-template-columns: 1fr 1fr; }
.oly .hub-card, .oly .hub-card:first-child, .oly .hub-card:last-child { grid-column: span 6; }
}
@media (max-width: 700px) {
.oly .container { width: min(calc(100% - 28px), var(--container)); }
.oly .section { padding: 52px 0; }
.oly .season-hero { padding: 32px 0 40px; }
.oly .season-hero-grid { gap: 42px; }
.oly .hero-actions .btn { width: 100%; }
.oly .season-art { min-height: 430px; }
.oly .number-card { right: 16px; border-radius: 110px 25px 110px 25px; }
.oly .season-formula { left: -2px; }
.oly .year-badge { width: 88px; height: 88px; right: -2px; }
.oly .facts { grid-template-columns: 1fr 1fr; }
.oly .fact:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
.oly .fact:nth-child(4) { border-top: 1px solid var(--line); }
.oly .quote-grid, .oly .people-grid, .oly .logo-grid { grid-template-columns: 1fr; }
.oly .hub-grid { display: grid; grid-template-columns: 1fr; }
.oly .hub-card, .oly .hub-card:first-child, .oly .hub-card:last-child { grid-column: 1; min-height: 340px; }
.oly .hub-collage { min-height: 340px; }
.oly .hub-photo-main { left: 18px; width: calc(100% - 18px); }
.oly .hub-photo-small { width: 135px; height: 180px; left: -6px; }
.oly .hub-stamp { width: 88px; height: 88px; right: -4px; font-size: 1.8rem; }
.oly .archive-intro { align-items: flex-start; flex-direction: column; }
.oly .archive-intro p { text-align: left; }
/* Sous 700 px, la date passe au-dessus du titre et le fil s'efface : une
   colonne de dates et un trait ne tiennent pas dans la largeur d'un
   téléphone sans manger le texte. */
.oly .timeline-item { grid-template-columns: 1fr; column-gap: 0; }
.oly .timeline-item::before { display: none; }
.oly .timeline-date { grid-column: 1; grid-row: auto; padding-top: 0; margin-bottom: 6px; text-align: left; }
.oly .timeline-item h3, .oly .timeline-item p { grid-column: 1; grid-row: auto; }
.oly .timeline-item > :last-child { margin-bottom: 30px; }
.oly .media-shell { padding: 20px; }
.oly .media-shell video { min-height: 220px; }
.oly .gallery-head { align-items: flex-start; flex-direction: column; }
.oly .gallery-head > p { text-align: left; }
.oly .gallery-grid { grid-template-columns: 1fr; }
.oly .gallery-item, .oly .gallery-count-2 .gallery-item, .oly .gallery-count-4 .gallery-item { grid-column: 1; min-height: 320px; }
.oly .timeline-item { min-height: auto; }
.oly .season-nav-grid { grid-template-columns: 1fr; }
}
.oly /* Refined image and typography system: preserve every visual and keep copy outside photography. */
.season-hero-grid > *, .oly .hub-hero-grid > * { min-width: 0; }
.oly .season-hero h1 {
  max-width: 720px;
  font-size: clamp(2.75rem, 5.2vw, 5.25rem);
  line-height: 1.02;
  text-wrap: balance;
}
.oly .hub-hero h1 {
  max-width: 720px;
  font-size: clamp(3rem, 6vw, 5.75rem);
  line-height: .98;
  text-wrap: balance;
}
.oly .section-heading h2, .oly .gallery-head h2, .oly .story-aside h2, .oly .archive-intro span {
  text-wrap: balance;
}
.oly .story-aside h2 {
  max-width: 520px;
  font-size: clamp(2.2rem, 4vw, 3.45rem);
  line-height: 1.08;
}
.oly .season-art {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: 16px;
  align-items: center;
}
.oly .number-card {
  position: relative;
  inset: auto;
  grid-column: 1 / -1;
  width: 100%;
  min-height: 0;
  border-radius: 32px;
  background: #f4edf0;
}
.oly .number-card > img {
  position: static;
  width: 100%;
  height: auto;
  max-height: 460px;
  object-fit: contain;
  object-position: center;
  background: #f4edf0;
}
.oly .number-card.has-image::before, .oly .number-card .visual-shade, .oly .number-card .season-number { display: none; }
.oly .season-formula {
  position: static;
  grid-column: 1;
  justify-self: start;
  padding: 12px 16px;
  transform: none;
  box-shadow: 0 10px 24px rgba(23,20,47,.1);
}
.oly .year-badge {
  position: static;
  grid-column: 2;
  width: auto;
  height: auto;
  min-width: 94px;
  padding: 13px 18px;
  border-radius: 999px;
  transform: none;
}
.oly .hub-collage {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
}
.oly .hub-photo-main, .oly .hub-photo-small {
  position: static;
  object-fit: contain;
  object-position: center;
  background: #f4edf0;
}
.oly .hub-photo-main {
  grid-column: 1 / -1;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: 32px;
}
.oly .hub-photo-small {
  width: 180px;
  height: 180px;
  border: 0;
  border-radius: 24px;
}
.oly .hub-stamp {
  position: static;
  justify-self: end;
  transform: none;
}
.oly .hub-card, .oly .hub-card:first-child, .oly .hub-card:last-child {
  min-height: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 280px auto auto 1fr auto;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  box-shadow: 0 12px 38px rgba(23,20,47,.07);
}
.oly .hub-card::before, .oly .hub-card-overlay { display: none; }
.oly .hub-card-image {
  position: static;
  grid-row: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #efe6ea;
}
.oly .hub-card:hover .hub-card-image, .oly .gallery-item:hover img, .oly .person-card:hover .person-photo img { transform: none; }
.oly .hub-card small {
  grid-row: 2;
  margin: 24px 28px 0;
  color: var(--season);
}
.oly .hub-card h2 {
  grid-row: 3;
  margin: 10px 28px 12px;
  color: var(--ink);
  font-size: clamp(1.6rem, 2.4vw, 2.15rem);
  line-height: 1.08;
  text-wrap: balance;
}
.oly .hub-card p {
  grid-row: 4;
  max-width: none;
  margin: 0 28px;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.62;
}
.oly .hub-card .card-arrow {
  grid-row: 5;
  margin: 22px 28px 28px;
  background: var(--ink);
  color: #fff;
}
.oly .gallery-item, .oly .gallery-count-2 .gallery-item, .oly .gallery-count-4 .gallery-item {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 12px 34px rgba(31,35,48,.06);
}
.oly .gallery-item img {
  width: 100%;
  height: auto;
  max-height: 400px;
  object-fit: contain;
  object-position: center;
  background: #f4edf0;
}
.oly .gallery-count-2 .gallery-item img { max-height: 440px; }
.oly .gallery-item figcaption {
  position: static;
  padding: 16px 18px 18px;
  border-radius: 0;
  border-top: 1px solid var(--line);
  background: #fff;
  font-size: .86rem;
  line-height: 1.45;
  backdrop-filter: none;
}
.oly .person-card.has-photo { min-height: 0; }
.oly .person-photo {
  height: 280px;
  display: grid;
  place-items: center;
  background: #f4edf0;
}
.oly .person-photo img {
  object-fit: contain;
  object-position: center;
  background: #f4edf0;
}
.oly .person-body { padding: 22px 24px 25px; }
@media (max-width: 700px) {
.oly .season-hero h1 {
    font-size: clamp(2.45rem, 12vw, 3.9rem);
    line-height: 1.03;
  }
.oly .number-card {
    min-height: 0;
    aspect-ratio: 1 / 1;
    border-radius: 24px;
  }
.oly .season-formula {
    max-width: 210px;
    font-size: .8rem;
  }
.oly .year-badge {
    min-width: 78px;
    padding: 11px 14px;
    font-size: .9rem;
  }
.oly .hub-collage { width: 100%; }
.oly .hub-photo-main {
    width: 100%;
    height: auto;
    border-radius: 24px;
  }
.oly .hub-photo-small {
    width: 132px;
    height: 132px;
    border-radius: 20px;
  }
.oly .hub-card, .oly .hub-card:first-child, .oly .hub-card:last-child {
    grid-template-rows: 240px auto auto 1fr auto;
  }
.oly .hub-card small { margin: 22px 22px 0; }
.oly .hub-card h2 { margin-inline: 22px; }
.oly .hub-card p { margin-inline: 22px; }
.oly .hub-card .card-arrow { margin: 20px 22px 24px; }
.oly .gallery-item img, .oly .gallery-count-2 .gallery-item img, .oly .gallery-count-4 .gallery-item img { max-height: 320px; }
.oly .person-photo { height: 320px; }
}
@media (prefers-reduced-motion: reduce) {
.oly { scroll-behavior: auto; }
.oly *, .oly *::before, .oly *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
.oly .reveal, .oly-anim .oly .reveal { opacity: 1; transform: none; }
}