/* ==========================================================================
   sections.css : mise en page des sections
   Ordre : shell / barre utilitaire / hero / pitch / audience / partenaires /
           editorial / points 01-06 / ambition / confiance EPC / programme /
           intervenants / lieu / CTA final / pied de page / responsive
   ========================================================================== */

.summit-shell {
  width: min(100% - var(--space-8), var(--shell-max));
  margin-inline: auto;
}

.summit-section { padding-block: var(--space-16); }
.summit-section--tight { padding-block: var(--space-12); }
.summit-section--cream { background: var(--cream); }
.summit-section--paper { background: var(--paper); }

/* La barre utilitaire est fixe : sans cette marge, elle recouvrirait le
   titre de la section vers laquelle une ancre vient de sauter. */
[id] { scroll-margin-top: calc(var(--utilitybar-h) + var(--space-6)); }


/* ==========================================================================
   BARRE UTILITAIRE FIXE
   Reprend le bandeau monospace date/lieu deja present en pied des emails,
   dans un role nouveau et utile. Masquee tant que le hero est visible.
   ========================================================================== */

.summit-utilitybar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--utilitybar-h);
  background: var(--navy);
  color: #FFFFFF;
  border-bottom: 1px solid var(--navy-line);
  transform: translateY(-100%);
  transition: transform .25s ease;
}

.summit-utilitybar.is-visible { transform: translateY(0); }

.summit-utilitybar__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.summit-utilitybar__when {
  text-decoration: none;
  transition: color .15s ease;
  font-family: var(--font-sans);
  font-size: var(--fs-100);
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* min-width:0 est indispensable : sans lui, un element flex refuse de
     retrecir sous la largeur de son contenu, et une chaine en white-space:
     nowrap elargirait toute la barre : donc le document, sur petit ecran.
     L'ellipse ne fonctionne qu'a cette condition. */
  flex: 1 1 auto;
  min-width: 0;
  font-stretch: var(--wd-normal);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.summit-nav {
  display: flex;
  gap: var(--space-6);
  font-family: var(--font-sans);
  font-size: var(--fs-100);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-stretch: var(--wd-normal);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.summit-nav a {
  text-decoration: none;
  padding-block: var(--space-1);
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease, color .15s ease;
}

.summit-nav a:hover { border-bottom-color: var(--accent); color: var(--accent); }

/* Le bouton de la barre garde sa taille : c'est le libelle date/lieu qui
   cede la place, via l'ellipse ci-dessus. */
.summit-utilitybar .summit-cta { flex: none; }


/* ==========================================================================
   HERO
   Composition asymetrique reprise du visuel officiel : bloc titre a gauche,
   bloc date a droite. Le degrade et les disques sont reconstruits en CSS a
   partir des valeurs echantillonnees (voir tokens.css) : le PNG heberge ne
   fait que 600x241 px et serait pixellise en pleine largeur.
   Le texte est du vrai texte HTML : donc net a toute resolution, lisible par
   les lecteurs d'ecran et indexable, contrairement a une image.
   ========================================================================== */

.summit-hero {
  position: relative;
  isolation: isolate;
  background-image: var(--brand-gradient);
  color: var(--navy);
  padding-block: var(--space-16);
  overflow: hidden;
}

/* Les deux disques roses du visuel officiel. En pseudo-elements plutot qu'en
   degrade radial : avec aspect-ratio 1 et une taille exprimee en pourcentage
   de la HAUTEUR, ils restent de vrais cercles a la bonne echelle quelle que
   soit la largeur de l'ecran. Un radial-gradient en pourcentages, lui,
   s'etirerait en ellipse des que le hero devient large. */
.summit-hero::before,
.summit-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* grand disque : centre 71 % / 71 %, diametre 88 % de la hauteur */
.summit-hero::before {
  height: 96%;
  top: 68%;
  left: 54%;
  background: rgba(var(--blob-tint), .26);
}

/* petit disque : centre 52 % / 41 %, diametre 62 % de la hauteur */
.summit-hero::after {
  height: 88%;
  top: 48%;
  left: 37%;
  background: rgba(var(--blob-tint), .20);
}

/* Le filet court et epais qui separe le titre de la tagline dans la banniere.
   Il manquait entierement dans la premiere version du hero. */
.summit-hero__rule {
  width: 58px;
  height: 5px;
  background: var(--navy);
  margin-top: var(--space-6);
}

.summit-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-12);
}

.summit-hero__title { margin: 0; }

.summit-hero__line1 {
  display: block;
  font-family: var(--font-sans);
  font-weight: 700;
  text-transform: uppercase;
  line-height: .96;
  letter-spacing: -0.005em;
  font-size: clamp(1.8rem, 5.5vw, 3.9rem);
  font-stretch: var(--wd-hero);
  font-weight: 800;
}

.summit-hero__experimentation {
  display: block;
  font-size: clamp(.78rem, 1.95vw, 1.45rem);
  color: rgba(18, 29, 66, .78);
  margin-block: var(--space-1) calc(var(--space-2) * -1);
  padding-left: .12em;
}

.summit-hero__line2 {
  display: block;
  font-family: var(--font-sans);
  font-weight: 700;
  text-transform: uppercase;
  line-height: .96;
  letter-spacing: -0.01em;
  font-size: clamp(2.1rem, 7.3vw, 5rem);
  font-stretch: var(--wd-hero);
  font-weight: 800;
}

.summit-hero__tagline {
  max-width: 32ch;
  margin-top: var(--space-4);
  font-size: var(--fs-300);
  line-height: 1.4;
  font-weight: bold;
}

/* Bloc date : "15 / OCTOBER 2026 / PARIS", comme sur la banniere. */
.summit-when {
  text-align: right;
}

.summit-when__day {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(3.2rem, 8.8vw, 6.1rem);
  line-height: .82;
  letter-spacing: -0.02em;
  font-stretch: var(--wd-hero);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.summit-when__month {
  font-family: var(--font-sans);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: var(--fs-300);
  margin-top: var(--space-2);
  font-stretch: var(--wd-normal);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* La banniere ne comporte aucun filet entre OCTOBER 2026 et PARIS :
   celui-ci etait de mon invention. */
.summit-when__rule { display: none; }

.summit-when__city {
  font-family: var(--font-sans);
  font-weight: 700;
  text-transform: uppercase;
  margin-top: var(--space-6);
  letter-spacing: .06em;
  font-size: var(--fs-500);
  font-stretch: 85%;
  font-weight: 800;
}

.summit-when__venue {
  font-size: var(--fs-200);
  line-height: 1.4;
  color: rgba(18, 29, 66, .82);
  margin-top: var(--space-2);
}


/* ==========================================================================
   PITCH : panneau marine sous le hero, comme dans l'invitation
   ========================================================================== */

.summit-pitch {
  background: var(--navy);
  color: #FFFFFF;
  padding-block: var(--space-16);
}

.summit-pitch__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--space-16);
  align-items: start;
}

.summit-pitch__claim {
  font-size: clamp(var(--fs-300), 2.4vw, var(--fs-400));
  line-height: 1.4;
}

.summit-pitch__claim strong { color: var(--accent); }

.summit-pitch__quote {
  margin-top: var(--space-6);
  padding-left: var(--space-4);
  border-left: 3px solid var(--brand-orange);
  color: rgba(255, 255, 255, .85);
  font-size: var(--fs-200);
}

.summit-pitch__quote strong { color: var(--accent); }

.summit-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.summit-reassure {
  font-family: var(--font-sans);
  font-size: var(--fs-100);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
  font-stretch: var(--wd-normal);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Repere de conformite accole au CTA. Les pages fintech B2B qui placent
   leur repere de confiance au contact du bouton convertissent nettement
   mieux que celles qui le releguent en bas de page. */
.summit-credential {
  border: 1px solid var(--navy-line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  font-size: var(--fs-100);
  line-height: 1.5;
  color: rgba(255, 255, 255, .82);
}

.summit-credential strong {
  display: block;
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-1);
  font-stretch: var(--wd-normal);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   AUDIENCE + PARTENAIRES
   ========================================================================== */

.summit-audience__text {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(var(--fs-300), 2.8vw, var(--fs-500));
  line-height: 1.3;
  max-width: 34ch;
  margin-top: var(--space-4);
  font-stretch: var(--wd-lead);
  font-weight: 600;
}

/* Sans filets : le changement de nature du contenu suffit a separer les
   blocs, deux traits de plus ne faisaient qu'alourdir. */
.summit-partners {
  padding-block: var(--space-8);
}

/* --------------------------------------------------------------------------
   RUBAN DEFILANT DES PARTENAIRES

   Trois logos seulement : un defilement infini repeterait tres vite la meme
   sequence. Pour que ce soit un ruban calme et non un carrousel, le jeu est
   duplique quatre fois, la translation vaut exactement une largeur de jeu
   (25 % de la piste) : la boucle est donc invisible, la vitesse est lente,
   et deux masques de degrade estompent les deux bords.
   -------------------------------------------------------------------------- */

.summit-marquee {
  --marquee-gap: 180px;
  margin-top: var(--space-6);
  overflow: hidden;
  /* les logos s'effacent aux deux bords au lieu d'y apparaitre brutalement */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.summit-marquee__track {
  display: flex;
  width: max-content;
  animation: summit-marquee-right 26s linear infinite;
}

.summit-marquee:hover .summit-marquee__track { animation-play-state: paused; }

.summit-marquee__set {
  display: flex;
  align-items: center;
  gap: var(--marquee-gap);
  padding-right: var(--marquee-gap);
  margin: 0;
}

/* Defilement vers la DROITE : la piste part decalee d'un jeu vers la gauche et
   revient a zero, ce qui donne un mouvement vers la droite sans saut. */
@keyframes summit-marquee-right {
  from { transform: translateX(-25%); }
  to   { transform: translateX(0); }
}

/* Les trois logos n'ont ni le meme rapport ni le meme poids optique : leurs
   hauteurs sont reglees une par une pour qu'ils pesent pareil a l'oeil. */
.summit-plogo { width: auto; display: block; }
.summit-plogo--epc { height: 46px; }
.summit-plogo--bnp { height: 34px; }
.summit-plogo--sm  { height: 34px; }

/* Seule animation de la page : elle doit pouvoir etre coupee. Sans mouvement,
   le ruban redevient une simple rangee centree. */
@media (prefers-reduced-motion: reduce) {
  .summit-marquee { -webkit-mask-image: none; mask-image: none; }
  .summit-marquee__track {
    animation: none;
    width: 100%;
    justify-content: center;
  }
  .summit-marquee__set:not(:first-child) { display: none; }
  .summit-marquee__set { padding-right: 0; }
}


/* ==========================================================================
   SECTION EDITORIALE : titre a gauche, prose a droite
   ========================================================================== */

.summit-editorial {
  display: grid;
  grid-template-columns: 24rem minmax(0, 1fr);
  gap: var(--space-16);
  align-items: start;
}

.summit-editorial__aside { position: sticky; top: calc(var(--utilitybar-h) + var(--space-6)); }
.summit-editorial__aside .summit-h2 { margin-top: var(--space-2); }


/* --------------------------------------------------------------------------
   LES 6 POINTS : index typographique numerote, pas six cartes clonees.
   Une grille de cartes identiques est l'un des marqueurs les plus nets d'une
   page generee ; un index numerote en monospace reprend au contraire la
   signature de la campagne.
   -------------------------------------------------------------------------- */

.summit-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-12);
  margin-top: var(--space-8);
}

.summit-point {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  border-top: 1px solid var(--line);
  padding-top: var(--space-4);
}

.summit-point__n {
  font-family: var(--font-sans);
  font-size: var(--fs-100);
  font-weight: 700;
  color: var(--burnt);
  letter-spacing: .05em;
  font-stretch: var(--wd-normal);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.summit-point__text { font-size: var(--fs-200); line-height: 1.5; }


.summit-note {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  font-size: var(--fs-100);
  line-height: 1.55;
  color: var(--muted);
}

.summit-note a { color: var(--burnt); }


/* Exergue : la phrase vient de l'EPC, pas de StreamMind. Le fond marine et
   l'attribution rendent cette origine evidente. */
.summit-pull {
  margin: var(--space-6) 0 0;
  padding: var(--space-8);
  background: var(--navy);
  border-radius: var(--radius-card);
  color: #FFFFFF;
}

.summit-pull__quote {
  font-stretch: 92%;
  font-weight: 400;
  font-size: clamp(var(--fs-300), 2.1vw, var(--fs-400));
  line-height: 1.4;
}

.summit-pull__quote::before { content: "\201C"; margin-right: -.18em; }
.summit-pull__quote::after  { content: "\201D"; margin-left: -.22em; }
.summit-pull__quote strong { color: var(--accent); font-weight: 700; }

.summit-pull__from {
  margin-top: var(--space-4);
  font-stretch: var(--wd-normal);
  font-weight: 600;
  font-size: var(--fs-100);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}

.summit-timing {
  margin-top: var(--space-6);
  padding: var(--space-6);
  background: var(--paper);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-data);
  font-size: var(--fs-200);
  line-height: 1.55;
}

.summit-timing__head {
  margin-bottom: var(--space-2);
  font-stretch: var(--wd-normal);
  font-weight: 600;
  font-size: var(--fs-100);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--burnt);
}


/* ==========================================================================
   EXTRAIT DE REGISTRE

   Remplace deux cartes a gros chiffre, qui etaient le gabarit le plus banal
   possible. Ici on montre la liste reelle des fournisseurs homologues et la
   place de StreamMind dedans : le lecteur constate lui-meme que la liste est
   courte, au lieu de lire un compteur.
   ========================================================================== */

.summit-registry {
  margin-top: var(--space-8);
  border-top: 1px solid var(--line-soft);
}

.summit-registry__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-6);
  padding-block: var(--space-8);
  border-bottom: 1px solid var(--line-soft);
}

.summit-registry__icon {
  width: 28px;
  height: 28px;
  color: var(--burnt);
  margin-top: 2px;
  flex: none;
}

.summit-registry__label {
  font-stretch: 88%;
  font-weight: 700;
  font-size: var(--fs-300);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--ink);
}

.summit-registry__lead {
  margin-top: var(--space-3);
  max-width: 62ch;
  font-size: var(--fs-200);
  line-height: 1.55;
  color: var(--muted);
}

/* Les fournisseurs sont montres par leur logo, en couleurs d'origine, sur une
   tuile blanche. Le creme de la section ne conviendrait pas a tous : le
   lettrage de ToriiPay est en blanc casse et y disparaitrait. La tuile donne a
   chacun le fond pour lequel il a ete dessine.

   Les quatre tuiles sont strictement identiques : aucune n'est mise en avant.
   Le lecteur reconnait StreamMind de lui-meme, et une liste ou tout le monde
   est traite pareil se lit comme un releve officiel plutot que comme une
   affiche. */
.summit-providers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.summit-provider {
  flex: 0 0 auto;
  width: 176px;
  height: 76px;
  display: grid;
  place-items: center;
  padding-inline: var(--space-6);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 2px rgba(18, 29, 66, .05);
}

/* Hauteurs reglees une par une : les quatre logos n'ont ni le meme rapport ni
   le meme poids optique. */
.summit-provider__logo { width: auto; max-width: 100%; display: block; }
.summit-provider__logo--iberpay { height: 23px; }
.summit-provider__logo--sm      { height: 25px; }
.summit-provider__logo--monei   { height: 19px; }
.summit-provider__logo--torii   { height: 21px; }


/* ==========================================================================
   PARCOURS D'AMBITION

   Quatre temps, de la technologie deja prete a une mise en production qui
   reste facultative.

   Pas de boites : les quatre libelles ont des longueurs tres inegales, et des
   cellules de grille s'alignant en hauteur laissaient un vide different sous
   chacun. Ici les libelles pendent sous un rail continu, calés en haut : la
   difference de longueur ne se voit plus.

   Le dernier segment est pointille et le dernier point est creux, parce que
   la mise en production est facultative. Le dessin porte le sens.
   ========================================================================== */

.summit-journey {
  margin-top: var(--space-16);
  padding-top: var(--space-12);
  border-top: 1px solid var(--line);
}

.summit-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-8);
  margin-top: var(--space-12);
}

.summit-step {
  position: relative;
  padding-top: var(--space-8);
}

/* Le point du rail. */
.summit-step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--burnt);
  z-index: 1;
}

/* Le segment qui mene au point suivant. Il part du point et traverse
   l'intervalle de la grille. */
.summit-step::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 14px;
  right: calc(var(--space-8) * -1);
  border-top: 2px solid var(--burnt);
}

.summit-step:last-child::after { display: none; }

/* Etape facultative : point creux, et segment qui y mene en pointille. */
.summit-step--optional::before {
  background: var(--paper);
  border: 2px solid var(--line-strong);
}

.summit-step:nth-last-child(2)::after {
  border-top-style: dashed;
  border-top-color: var(--line-strong);
}

.summit-step__n {
  display: block;
  font-stretch: var(--wd-normal);
  font-weight: 700;
  font-size: var(--fs-100);
  letter-spacing: .12em;
  color: var(--burnt);
  font-variant-numeric: tabular-nums;
}

.summit-step__text {
  display: block;
  margin-top: var(--space-2);
  font-stretch: 88%;
  font-weight: 700;
  font-size: var(--fs-300);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--ink);
  text-wrap: balance;
}

.summit-step__note {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--fs-100);
  line-height: 1.5;
  color: var(--muted);
}

.summit-step--optional .summit-step__n,
.summit-step--optional .summit-step__text { color: var(--muted); }


/* ==========================================================================
   PROGRAMME
   ========================================================================== */

.summit-agenda { margin-top: var(--space-8); border-top: 1px solid var(--line); }

.summit-agenda__row {
  display: grid;
  grid-template-columns: 5.5rem auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius-data);
}

.summit-agenda__time {
  font-family: var(--font-sans);
  font-size: var(--fs-200);
  font-weight: 700;
  color: var(--burnt);
  letter-spacing: .04em;
  font-stretch: var(--wd-normal);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Chaque activite a son pictogramme, trace en SVG et non en emoji : le rendu
   d'un emoji change d'un systeme a l'autre, et l'effet est bricole sur une page
   destinee a des dirigeants de banques. */
.summit-agenda__icon {
  width: 24px;
  height: 24px;
  color: var(--burnt);
  flex: none;
}

.summit-agenda__what {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-300);
  text-transform: uppercase;
  letter-spacing: .02em;
  font-stretch: 88%;
  font-weight: 700;
}


/* ==========================================================================
   INTERVENANTS
   ========================================================================== */

.summit-speakers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-12);
  margin-top: var(--space-12);
}

/* Les colonnes sont larges et le contenu de chaque carte est etroit : cale a
   gauche, il flottait dans le vide. Tout est desormais centre, portrait
   compris, et la carte se lit comme un bloc. */
.summit-speaker {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Pastille de marque posee en bas a droite du portrait.
   Les trois logos sont des blocs HORIZONTAUX (EPC 3:1, BNP 4,8:1, StreamMind
   4,4:1) : reduits dans un petit rond ils seraient illisibles. On n'utilise
   donc que leur SYMBOLE, qui est carre. Le libelle texte de l'organisation
   reste sous le nom : un symbole seul ne dit pas « European Payments Council ». */
.summit-speaker__portrait {
  position: relative;
  width: 132px;
}

.summit-speaker__badge {
  position: absolute;
  left: 50%;
  bottom: -14px;
  transform: translateX(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--paper);
  display: grid;
  place-items: center;
  box-shadow: 0 1px 4px rgba(18, 29, 66, .22);
}

.summit-speaker__badge img {
  width: 27px;
  height: 27px;
  object-fit: contain;
  border-radius: 3px;
}

/* Les trois intervenants ont desormais un portrait : le repli en monogramme
   n'existe plus. */
.summit-speaker__avatar {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--paper);
}

.summit-speaker__org {
  margin-top: var(--space-8);
  font-family: var(--font-sans);
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--burnt);
  font-stretch: var(--wd-normal);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.summit-speaker__name {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-300);
  text-transform: uppercase;
  letter-spacing: .02em;
  margin-top: var(--space-2);
  font-stretch: 88%;
  font-weight: 700;
}

.summit-speaker__role { font-size: var(--fs-100); color: var(--muted); margin-top: var(--space-1); }


/* ==========================================================================
   LIEU
   ========================================================================== */

/* --------------------------------------------------------------------------
   GALERIE DU LIEU
   Une image large, puis deux images de meme hauteur. Toutes en chargement
   differe : elles arrivent bas dans la page et ne doivent pas retarder
   l'affichage du hero ni du bouton d'inscription.
   -------------------------------------------------------------------------- */

.summit-gallery {
  margin: var(--space-8) 0 0;
}

.summit-gallery img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
  background: var(--line);
}

.summit-gallery__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-4);
}

/* Le credit photo n'est pas decoratif : il conditionne le droit d'usage. */
.summit-gallery__credit {
  margin-top: var(--space-3);
  font-size: var(--fs-100);
  color: var(--muted);
}

.summit-venue {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-16);
  margin-top: var(--space-8);
}

.summit-facts { border-top: 1px solid var(--line); }

.summit-fact {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius-data);
}

.summit-fact__key {
  font-family: var(--font-sans);
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  font-stretch: var(--wd-normal);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.summit-fact__val { font-size: var(--fs-200); line-height: 1.5; }

/* Ligne de transport : les pastilles officielles, puis le nom de la station. */
.summit-lines {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.summit-lines__badges {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.summit-lines__badges img {
  width: 28px;
  height: 28px;
  flex: none;
}

/* Le logo RER est un bloc horizontal, pas un disque : il garde son rapport. */
.summit-lines__rer { width: auto !important; }
.summit-fact__val a { color: var(--burnt); }


/* ==========================================================================
   CTA FINAL + PIED DE PAGE : une seule region marine
   ========================================================================== */

.summit-close { background: var(--navy); color: #FFFFFF; }

.summit-close__cta {
  padding-block: var(--space-24);
  text-align: center;
  border-bottom: 1px solid var(--navy-line);
}

.summit-close__title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(var(--fs-400), 4vw, var(--fs-600));
  text-transform: uppercase;
  line-height: var(--lh-snug);
  text-wrap: balance;
  max-width: 20ch;
  margin-inline: auto;
  font-stretch: var(--wd-title);
  font-weight: 800;
}

.summit-close__actions { margin-top: var(--space-8); }

.summit-signoff { margin-top: var(--space-12); }
.summit-signoff__from { font-size: var(--fs-100); color: rgba(255, 255, 255, .75); }

.summit-signoff__logo {
  height: 36px;
  width: auto;
  margin: var(--space-3) auto 0;
}

.summit-footer { padding-block: var(--space-8); }

.summit-footer__band {
  font-family: var(--font-sans);
  font-size: var(--fs-100);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
  text-align: center;
  font-stretch: var(--wd-normal);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   MENTIONS LEGALES
   Trois colonnes sobres : editeur, mentions LCEN, donnees personnelles.
   Corps reduit et couleur attenuee : ces informations sont obligatoires, pas
   promotionnelles ; elles doivent etre lisibles sans capter le regard.
   -------------------------------------------------------------------------- */

.summit-legal {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8) var(--space-12);
  /* meme valeur que le padding haut du pied de page : le bandeau date/lieu
     est ainsi exactement centre entre le filet du CTA et celui d'ici. */
  margin-top: var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid var(--navy-line);
  font-size: var(--fs-100);
  line-height: 1.65;
  color: rgba(255, 255, 255, .68);
}

.summit-legal__head {
  font-stretch: var(--wd-normal);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-3);
}

.summit-legal__col p + p { margin-top: var(--space-3); }
.summit-legal a { color: rgba(255, 255, 255, .88); }

.summit-footer__row {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4) var(--space-8);
  font-size: var(--fs-100);
}

.summit-footer__row a { color: rgba(255, 255, 255, .85); }

.summit-linkout {
  display: inline-block;
  padding: var(--space-2) var(--space-6);
  border: 1px solid var(--navy-line);
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-family: var(--font-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: border-color .15s ease, color .15s ease;
  font-stretch: var(--wd-normal);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.summit-linkout:hover { border-color: var(--accent); color: var(--accent); }


/* ==========================================================================
   RESPONSIVE
   900px : effondrement des grilles a deux colonnes
   600px : point de rupture deja utilise par les autres fichiers du dossier
   ========================================================================== */

@media (max-width: 900px) {
  .summit-hero__inner,
  .summit-pitch__inner,
  .summit-editorial,
  .summit-venue { grid-template-columns: minmax(0, 1fr); gap: var(--space-12); }

  .summit-editorial__aside { position: static; }

  .summit-when {
    text-align: left;
    border-left: 0;
    border-top: 1px solid rgba(18, 29, 66, .28);
    padding-left: 0;
    padding-top: var(--space-6);
  }

  .summit-speakers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
  .summit-nav { display: none; }
}

@media (max-width: 600px) {
  .summit-provider { width: calc(50% - var(--space-3) / 2); }

  /* Sur telephone, le picto passe au-dessus du texte plutot que de lui voler
     une colonne. */
  .summit-registry__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }

  .summit-section { padding-block: var(--space-12); }
  .summit-points,
  .summit-gallery__pair,
  .summit-legal,
  .summit-speakers { grid-template-columns: minmax(0, 1fr); }
  .summit-agenda__row { grid-template-columns: 4.5rem auto minmax(0, 1fr); gap: var(--space-3); }
  .summit-fact { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .summit-utilitybar__when { font-size: 10px; letter-spacing: .06em; }
  .summit-cta { width: 100%; text-align: center; padding-inline: var(--space-6); }
  .summit-cta--small { width: auto; }
}

/* Sous 900 px le rang se brise : un rail horizontal n'aurait plus de sens, il
   passe donc a la verticale. Le trait relie chaque point au suivant, vers le
   bas, et la derniere etape garde son pointille. */
@media (max-width: 900px) {
  .summit-steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .summit-step {
    padding: 0 0 var(--space-8) var(--space-8);
  }

  .summit-step::before { top: 4px; }

  .summit-step::after {
    top: 18px;
    bottom: 0;
    left: 6px;
    right: auto;
    border-top: 0;
    border-left: 2px solid var(--burnt);
  }

  .summit-step:nth-last-child(2)::after {
    border-left-style: dashed;
    border-left-color: var(--line-strong);
  }

  .summit-step:last-child { padding-bottom: 0; }
}