/* ==========================================================================
   Sciences Po Finance — feuille de style partagée
   Couleur de marque : marine #0d3251
   ========================================================================== */

:root {
  --navy: #0d3251;
  --navy-dark: #081f33;
  --navy-light: #97b2c9;
  --ink: #16233a;
  --paper: #ffffff;
  --paper-soft: #f5f7fa;
  --line: #e2e6ec;
  --text-muted: #5b6b80;
  --radius: 10px;
  --shadow: 0 10px 30px rgba(13, 50, 81, 0.10);
  --max-width: 1180px;
  --font-heading: "Poppins", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
}

h1, h2, h3, h4,
.section-title, .hero .tagline, .links-card h1 {
  font-family: var(--font-heading);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Navigation ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(180%) blur(6px);
  border-bottom: 1px solid var(--line);
}

.site-nav {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}

.nav-top-row { display: contents; }

.site-nav .brand {
  position: absolute;
  left: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.site-nav .brand img { height: 34px; width: auto; }

/* ---------- Sélecteur de langue (traduction automatique) ---------- */

.lang-toggle {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 6px;
  z-index: 5;
}
.lang-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 13px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}
.lang-btn:hover { opacity: 0.85; }
.lang-btn.active { opacity: 1; border-color: var(--navy); box-shadow: 0 0 0 2px rgba(13,50,81,0.12); }

/* Le widget Google Translate lui-même reste invisible : seuls nos deux
   boutons drapeau pilotent la traduction. */
#google_translate_element,
.goog-te-banner-frame,
.goog-te-gadget-icon,
.skiptranslate { display: none !important; }
body { top: 0 !important; }

.site-nav a {
  font-weight: 600;
  color: var(--navy);
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s ease;
}
.site-nav a:hover,
.site-nav a.active { border-color: var(--navy); }

/* ---------- Hero ---------- */

/* aspect-ratio (not vh + cover) so the container always matches the photo's
   own shape exactly: the whole photo is visible, nobody gets cropped out
   sideways, and the safe strip below everyone's chin (where the title
   sits) never gets replaced by a face. hero.jpg has chins ending around
   52% down. Above ~1140px this would make the banner taller than the
   width warrants, so past that width we switch to a capped fixed height —
   620px is chosen so the crop it then applies still keeps that safe strip
   below the chin (don't lower this without re-checking that math, or the
   title can land back on a face). Cropping the sides a little here is
   fine/expected — it's a deliberately wide banner on a wide screen.
   Below 1140px, cropping the sides is NOT fine (mobile users want to see
   everyone in the photo, not just the middle of the group) — so instead
   the photo is shown at full width with background-size:100% auto
   (never crops, height follows width) and the title moves into a plain
   navy/white strip BELOW the photo instead of overlaid on top of it.
   The +170px in the height formula is that strip's reserved height —
   generous on purpose since the title's font-size (and so its own
   height) grows with vw up to 1140px; verified with real measurements
   (via CDP), not estimates, that clearance stays positive throughout. */
.hero {
  position: relative;
  overflow: hidden;
  height: auto;
  aspect-ratio: 1920 / 1049;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center center;
  color: #fff;
}
@media (max-width: 1139px) {
  .hero {
    aspect-ratio: auto;
    height: calc(100vw * 1049 / 1920 + 170px);
    background-size: 100% auto;
    background-position: top center;
    background-repeat: no-repeat;
    background-color: var(--navy);
  }
  .hero .hero-blur { display: none; }
}
@media (min-width: 1140px) {
  .hero { aspect-ratio: auto; height: 620px; }
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,50,81,0.06) 0%, rgba(13,50,81,0.16) 55%, rgba(13,50,81,0.6) 92%, var(--navy) 100%);
}
/* Below 1140px the photo only fills the top part of (now taller) .hero —
   the rest is the plain background-color strip the title sits in. The
   fade must stop at the photo's own bottom edge, not the box's, or it
   paints a visible navy-tinted band over the solid-color strip too. */
@media (max-width: 1139px) {
  .hero::after { bottom: auto; height: calc(100vw * 1049 / 1920); }
}
/* Pages where the section right after the hero is white/light: the photo
   itself blurs and dissolves into it instead of ending on a hard edge.
   Two extra copies of the same photo, increasingly blurred, are masked to
   fade in only near the bottom — a cheap approximation of a progressive
   (gradient) blur, which no CSS filter does natively. The color gradient
   on ::after then finishes the dissolve into white on top of that. */
.hero.blend-white { height: auto; aspect-ratio: 1920 / 1049; }
@media (max-width: 1139px) {
  .hero.blend-white {
    aspect-ratio: auto;
    height: calc(100vw * 1049 / 1920 + 170px);
    background-color: #fff;
  }
}
@media (min-width: 1140px) {
  .hero.blend-white { aspect-ratio: auto; height: 620px; }
}
.hero-blur {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center center;
  transform: scale(1.08);
}
.hero-blur.b1 {
  filter: blur(10px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 80%, black 96%, black 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, transparent 80%, black 96%, black 100%);
}
.hero-blur.b2 {
  filter: blur(26px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 90%, black 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, transparent 90%, black 100%);
}
/* Home keeps its navy (not white) fade below the hero, but gets the same
   blur treatment — tighter and more sudden than the other pages', since
   there's no white to ease into, just the next navy section. */
.hero:not(.blend-white) .hero-blur.b1 {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 90%, black 99%, black 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, transparent 90%, black 99%, black 100%);
}
.hero:not(.blend-white) .hero-blur.b2 {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 95%, black 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, transparent 95%, black 100%);
}
.hero.blend-white::after {
  background: linear-gradient(180deg,
    rgba(13,50,81,0.08) 0%,
    rgba(13,50,81,0.16) 80%,
    rgba(13,50,81,0.6) 95%,
    #fff 100%);
}
.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0 24px 44px;
  max-width: var(--max-width);
  margin: 0 auto;
}
.hero.blend-white .hero-inner { padding-bottom: 30px; }
/* Below 1140px the title sits below the photo, in the plain white strip
   (not over it) — white-on-white would be invisible there. */
@media (max-width: 1139px) {
  .hero.blend-white .hero-inner { color: var(--navy); }
  .hero.blend-white .tagline { opacity: 0.7; }
}
.hero h1 {
  font-size: clamp(2rem, 5vw, 3.2rem);
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.01em;
}
/* Below ~370px "SciencesPo Finance" wraps to 2 lines at the 2rem floor,
   doubling the title's height and pushing it up onto the chin line —
   shrink it just enough to keep it on one line. */
@media (max-width: 369px) {
  .hero h1 { font-size: 1.6rem; }
}
.hero .tagline {
  font-weight: 700;
  opacity: 0.85;
  font-size: 0.95rem;
  margin-top: 4px;
}

/* ---------- Sections ---------- */

section { padding: 64px 0; }
section.tight { padding: 40px 0; }
section.navy { background: var(--navy); color: #fff; }
section.soft { background: var(--paper-soft); }

.section-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 28px;
  letter-spacing: -0.01em;
}
section.navy .section-title { color: #fff; }
/* Titre à casse mixte (ex. le bandeau des chiffres clés) : le texte autour
   des <strong> reste normal pour que le gras ressorte — sans ça, comme le
   titre entier est déjà en 800 par défaut, un <strong> ne se voit pas. */
.section-title.mixed-weight { font-weight: 400; }
.section-title.mixed-weight strong { font-weight: 800; }

.lead {
  font-size: 1.05rem;
  color: var(--text-muted);
  max-width: 780px;
}
section.navy .lead { color: var(--navy-light); }

/* ---------- Boutons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  padding: 14px 28px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-size: 0.96rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { background: var(--navy-dark); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.3); }
.btn:active { transform: translateY(0); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22); }
.btn.outline {
  background: rgba(255, 255, 255, 0.04);
  border: 2px solid rgba(255, 255, 255, 0.7);
  color: #fff;
  box-shadow: none;
}
.btn.outline:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; box-shadow: none; }

/* ---------- Grille "stats" (Home) ---------- */

.stats-block {
  padding-top: 56px;
  margin-top: 56px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
/* flex (not grid) so a partial last row — e.g. 5 stats over 3 columns —
   fills and centers itself instead of grid's default left-aligned short
   row. Each .stat has a basis matching an even 3-per-row split AND grows
   (flex-grow:1, same trick as .logo-card for partners below): on a full
   row the basis already fills the line so nothing grows, but on a short
   last row the leftover space is distributed across its items, so e.g.
   the last two of five stretch to fill that whole row instead of sitting
   small and centered. max-width keeps a lone leftover stat from ballooning. */
.stats-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin: 28px 0 44px;
}
.stats-row .stat {
  flex: 1 1 calc((100% - 40px) / 3);
  max-width: 480px;
}
.stat {
  text-align: center;
  padding: 24px 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
}
.stat .num {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 800;
  color: #fff;
}
.stat .label {
  font-size: 0.85rem;
  color: var(--navy-light);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
}

.two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 48px;
  align-items: start;
}

.cta-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
  padding: 28px 0;
}
.cta-block img.crest {
  height: 68px;
  width: 68px;
  object-fit: contain;
  background: #fff;
  border-radius: 18px;
  padding: 14px;
  box-sizing: border-box;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

/* ---------- Partenaires ---------- */

.partners-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
}
.partners-grid .logo-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  padding: 18px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 74px;
  flex: 1 1 150px;
  max-width: 220px;
}
.partners-grid img { max-height: 34px; width: auto; filter: brightness(0) invert(1); opacity: 0.92; }

/* ---------- Équipe ---------- */

.promo-block { margin-bottom: 56px; }
.promo-block h3 {
  color: var(--navy);
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: 22px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--line);
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 26px 20px;
}
.member { text-align: left; min-width: 0; }
.member h4, .member .role { overflow-wrap: break-word; word-break: break-word; }
.member .photo {
  width: 100%;
  aspect-ratio: 3 / 3.6;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper-soft);
  margin-bottom: 10px;
  position: relative;
}
.member .photo img { width: 100%; height: 100%; object-fit: cover; }
.member .li-badge {
  position: absolute; top: 8px; left: 8px;
  background: #fff;
  border-radius: 6px;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow);
}
.member .li-badge svg { width: 14px; height: 14px; }
.member h4 { margin: 0 0 2px; font-size: 0.98rem; color: var(--ink); }
.member .role { margin: 0; font-size: 0.85rem; color: var(--text-muted); font-style: italic; }

/* ---------- Événements ---------- */

.upcoming-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  background: var(--paper-soft);
  border-radius: var(--radius);
  padding: 40px;
}
.upcoming-card img.coming { border-radius: var(--radius); }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.gallery-grid img { border-radius: var(--radius); aspect-ratio: 1/1; object-fit: cover; }

.activity {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: center;
  padding: 46px 0;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.activity:last-child { border-bottom: none; }
.activity:nth-child(even) .activity-media { order: 2; }
.activity h3 { font-size: 1.25rem; margin: 0 0 12px; }
.activity p { color: var(--navy-light); margin: 0; }
.activity-media img { border-radius: var(--radius); width: 100%; }
.activity-media .caption { font-size: 0.82rem; color: var(--navy-light); margin-top: 8px; text-align: center; }

/* ---------- About ---------- */

.about-text { max-width: 820px; }
.about-text p { margin: 0 0 20px; color: var(--text-muted); }
.masters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 20px;
}
.master-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}
.master-card h4 { color: var(--navy); margin: 0 0 10px; font-size: 1.05rem; }
.master-card p { color: var(--text-muted); font-size: 0.92rem; margin: 0; }

/* ---------- Liens (Linktree) ---------- */

.links-page {
  min-height: 100vh;
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
}
.links-card { width: 100%; max-width: 420px; text-align: center; color: #fff; }
.links-card img.crest { height: 84px; margin: 0 auto 14px; }
.links-card h1 { font-size: 1.5rem; margin: 0 0 4px; font-weight: 800; }
.links-card .tag { font-size: 0.85rem; color: var(--navy-light); margin-bottom: 26px; }
.link-item {
  display: block;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  padding: 15px 20px;
  margin-bottom: 14px;
  font-weight: 700;
  transition: background 0.15s ease, transform 0.1s ease;
}
.link-item:hover { background: rgba(255,255,255,0.18); transform: translateY(-1px); }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--navy);
  color: #fff;
  padding: 40px 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 24px;
  align-items: center;
}
.footer-social { display: flex; gap: 12px; }
.footer-social a {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.35);
  display: flex; align-items: center; justify-content: center;
}
.footer-social svg { width: 17px; height: 17px; fill: #fff; }
.footer-center { text-align: center; font-size: 0.88rem; color: var(--navy-light); }
.footer-center .copy { margin-top: 6px; opacity: 0.8; }
.footer-address { text-align: right; font-size: 0.88rem; color: var(--navy-light); }
.footer-address strong { color: #fff; display: block; margin-bottom: 4px; }

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
  /* Rangée 1, en haut de l'en-tête : logo (réduit) à gauche, sélecteur de
     langue à droite. Rangée 2, en dessous : les liens. */
  .nav-top-row { display: flex; width: 100%; justify-content: space-between; align-items: center; order: 0; margin-bottom: 10px; }
  .site-nav .brand { position: static; order: 1; }
  .site-nav .brand img { height: 22px; }
  .lang-toggle { position: static; transform: none; order: 2; }
  .site-nav a { order: 1; font-size: 0.88rem; }
  .site-nav { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px 18px; }
  .two-col { grid-template-columns: 1fr; }
  .stats-row .stat { flex-basis: calc((100% - 20px) / 2); }
  .upcoming-card { grid-template-columns: 1fr; padding: 24px; }
  .activity { grid-template-columns: 1fr; }
  .activity:nth-child(even) .activity-media { order: 0; }
  .footer-grid { grid-template-columns: 1fr; text-align: center; gap: 18px; }
  .footer-social { justify-content: center; }
  .footer-address { text-align: center; }
  .team-grid { grid-template-columns: repeat(4, 1fr); gap: 16px 8px; align-items: start; }
  .member .photo { width: 100%; }
  .member h4 { font-size: 0.8rem; margin: 0 0 1px; }
  .member .role { font-size: 0.68rem; line-height: 1.3; }
  .member .li-badge { width: 20px; height: 20px; top: 5px; left: 5px; }
  .member .li-badge svg { width: 11px; height: 11px; }
}

@media (max-width: 480px) {
  section { padding: 44px 0; }
}