/* --- Intégration WP : neutralise Bootstrap/Digiqole dans la fiche (spécificité 1,0,0, avant les règles de la maquette) --- */ html:root{overflow-x:clip!important;overflow-y:visible!important} html:root body{overflow:visible!important} #pgeml{display:block;width:100%;position:relative;font:400 16px/1.7 var(--f-body);color:var(--text);background:var(--surface);overflow-x:clip} #pgeml :where(h1,h2,h3,h4,h5,h6){line-height:inherit;margin:0;font-weight:bold} #pgeml :where(.h1,.h2,.h3,.h4,.h5,.h6):not(:where(h1,h2,h3,h4,h5,h6)){font-family:inherit;font-weight:inherit;margin:0;line-height:inherit} #pgeml :where(.lead){font-weight:inherit;font-size:inherit} #pgeml :where(.btn){text-transform:none;font-weight:inherit;line-height:inherit;border-radius:0;border:0;padding:0;font-size:inherit;vertical-align:baseline} #pgeml :where(.small,small){font-weight:inherit} #pgeml :where(table,thead,tbody,tr,th,td){border:0;margin:0} #pgeml :where(button){font-family:Arial,sans-serif;line-height:normal} @font-face{ font-family: "Cabinet Grotesk"; src: url("../fonts/CabinetGrotesk-500.woff2") format("woff2"); font-weight: 500; font-display: swap; } @font-face{ font-family: "Cabinet Grotesk"; src: url("../fonts/CabinetGrotesk-700.woff2") format("woff2"); font-weight: 700; font-display: swap; } @font-face{ font-family: "Cabinet Grotesk"; src: url("../fonts/CabinetGrotesk-800.woff2") format("woff2"); font-weight: 800; font-display: swap; } @font-face{ font-family: "Roboto"; src: url("../fonts/Roboto-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; } @font-face{ font-family: "Barlow"; src: url("../fonts/Barlow-500.woff2") format("woff2"); font-weight: 500; font-display: swap; } @font-face{ font-family: "Barlow"; src: url("../fonts/Barlow-600.woff2") format("woff2"); font-weight: 600; font-display: swap; } @font-face{ font-family: "Barlow"; src: url("../fonts/Barlow-700.woff2") format("woff2"); font-weight: 700; font-display: swap; } #pgeml{ --navy-950: #03163D; --navy-900: #091A42; --navy-800: #182A52; --navy-700: #1B2C57; --ink-900: #0C1321; --ink-850: #0A1527; --ink-800: #111B2E; --blue-700: #2A4F96; --blue-600: #2E4B94; --blue-500: #315EA5; --blue-400: #567CC9; --sky-500: #2C91E4; --sky-600: #1F6FB5; --sky-100: #E3F1FD; --sky-50: #F1F8FE; --cyan-500: #00A8E0; --gold-500: #C8A24C; --grad-cta: linear-gradient(90deg, #428FCC 13%, #2B4F97 100%); --text-strong: #091A42; --text: #354564; --text-muted: #54546B; --text-subtle: #69727D; --border: #DBE1E5; --border-blue: #C7CEF8; --line: #E6EBF3; --surface: #FFFFFF; --tint: #F0F4FC; --tint-2: #F7F9FE; --input: #EFF4FA; --uni-bachelor: #2C91E4; --uni-bachelor-deep: #1F6FB5; --uni-bachelor-mint: #F1F8FE; --uni-masters: #756CE1; --uni-masters-deep: #5A50C4; --uni-masters-mint: #F5F4FD; --uni-exec: #11B59F; --uni-exec-deep: #0C8273; --uni-exec-mint: #F3FBFA; --uni-new: #C8A24C; --uni-new-deep: #8A6A1E; --uni-new-mint: #FBF7EC; --f-display: "Cabinet Grotesk", "Roboto", system-ui, sans-serif; --f-body: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif; --f-ui: "Barlow", "Roboto", system-ui, sans-serif; --r-xs: 5px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-field: 25px; --r-pill: 100px; --sh-card: 0 2px 9.3px rgba(75, 161, 218, .35); --sh-glow: 0 0 12px rgba(216, 236, 255, .49); --sh-soft: 0 10px 30px -12px rgba(24, 42, 82, .18), 0 2px 6px rgba(24, 42, 82, .05); --sh-raise: 0 2px 16px rgba(0, 0, 0, .10); --ring: 0 0 0 3px rgba(44, 145, 228, .28); --ease: cubic-bezier(.22, .61, .36, 1); --dur-fast: .3s; --dur-base: .4s; --dur-slow: .6s; --container: 1200px; --gutter: 20px; --header-h: 72px; --toc-h: 66px; --sec-pad: clamp(64px, 8vw, 112px); } #pgeml *,#pgeml *::before,#pgeml *::after{ box-sizing: border-box; } html{scroll-behavior:smooth} #pgeml{ margin: 0; background: var(--surface); color: var(--text); font: 400 16px/1.7 var(--f-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } #pgeml img{ display: block; max-width: 100%; height: auto; } #pgeml a{ color: var(--sky-600); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--dur-fast) var(--ease); } #pgeml a:hover{ color: var(--blue-700); } #pgeml :focus-visible{ outline: 2px solid var(--sky-500); outline-offset: 3px; border-radius: 6px; } #pgeml strong{ color: var(--text-strong); font-weight: 700; } #pgeml h1,#pgeml h2,#pgeml h3,#pgeml h4{ font-family: var(--f-display); color: var(--navy-950); margin: 0; letter-spacing: -.01em; } #pgeml p{ margin: 0; } #pgeml ul,#pgeml ol{ margin: 0; padding: 0; } #pgeml figure{ margin: 0; } #pgeml .sr-only{ position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } #pgeml .skip-link{ position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--navy-800); color: #fff; padding: 10px 16px; border-radius: var(--r-pill); font: 600 14px var(--f-ui); } #pgeml .skip-link:focus{ top: 12px; color: #fff; } #pgeml .container{ width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); } #pgeml .i{ width: 1em; height: 1em; flex: none; fill: currentColor; vertical-align: -0.14em; } #pgeml .i-14{ font-size: 14px; } #pgeml .i-16{ font-size: 16px; } #pgeml .i-18{ font-size: 18px; } #pgeml .i-20{ font-size: 20px; } #pgeml .i-24{ font-size: 24px; } #pgeml .i-28{ font-size: 28px; } #pgeml .i-32{ font-size: 32px; } #pgeml .icon-tile{ --accent: var(--sky-500); display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: var(--r-md); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, #fff); border: 1px solid color-mix(in srgb, var(--accent) 28%, #fff); font-size: 24px; } #pgeml .icon-tile--lg{ width: 56px; height: 56px; border-radius: var(--r-lg); font-size: 30px; } #pgeml .icon-tile--dark{ background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); color: #8EC8F5; } #pgeml .progress{ position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 120; pointer-events: none; } #pgeml .progress span{ display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: var(--grad-cta); } #pgeml .site-header{ position: sticky; top: 0; z-index: 100; height: var(--header-h); background: rgba(255, 255, 255, .94); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line); } #pgeml .site-header .container{ height: 100%; display: flex; align-items: center; gap: 28px; max-width: 1340px; } #pgeml .brand{ display: flex; align-items: center; flex: none; } #pgeml .brand img{ height: 46px; width: auto; } #pgeml .main-nav{ margin-left: auto; } #pgeml .main-nav ul{ list-style: none; display: flex; align-items: center; gap: 4px; } #pgeml .main-nav a{ display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: var(--r-pill); font: 700 16px/1 var(--f-display); color: var(--navy-800); text-decoration: none; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } #pgeml .main-nav a:hover{ background: var(--sky-50); color: var(--sky-600); } #pgeml .main-nav a.is-current{ color: var(--sky-500); background: var(--sky-50); } #pgeml .header-actions{ display: flex; align-items: center; gap: 10px; } #pgeml .btn-icon{ display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--blue-700); color: #fff; cursor: pointer; font-size: 20px; transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } #pgeml .btn-icon:hover{ background: var(--navy-800); } #pgeml .btn-icon--ghost{ background: var(--input); color: var(--blue-700); } #pgeml .btn-icon--ghost:hover{ background: var(--sky-100); } #pgeml .burger{ display: none; border-radius: var(--r-md); } #pgeml .mobile-nav{ display: none; } #pgeml .crumbs{ background: var(--tint); border-bottom: 1px solid var(--line); } #pgeml .crumbs ol{ list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 12px 0; font: 500 13px/1.4 var(--f-ui); color: var(--text-subtle); } #pgeml .crumbs li{ display: inline-flex; align-items: center; gap: 6px; } #pgeml .crumbs a{ color: var(--text-subtle); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } #pgeml .crumbs a:hover{ color: var(--sky-600); } #pgeml .crumbs .sep{ color: #A9B3C3; } #pgeml .crumbs [aria-current]{ color: var(--navy-800); font-weight: 700; } #pgeml .hero{ position: relative; overflow: hidden; color: #fff; isolation: isolate; background: radial-gradient(900px 500px at 85% -10%, rgba(44, 145, 228, .30), transparent 60%), radial-gradient(700px 420px at -10% 110%, rgba(86, 124, 201, .22), transparent 60%), var(--ink-900); padding: clamp(40px, 6vw, 72px) 0 clamp(32px, 4vw, 48px); } #pgeml .hero::before{ content: ""; position: absolute; inset: 0; z-index: -1; opacity: .35; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse at 70% 30%, #000 10%, transparent 70%); } #pgeml .hero-grid{ display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(32px, 5vw, 72px); align-items: center; } #pgeml .hero-kicker{ display: flex; align-items: center; gap: 14px; margin-bottom: 22px; } #pgeml .hero-logo{ width: 72px; height: 72px; border-radius: var(--r-lg); background: #fff; padding: 6px; flex: none; box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .45); } #pgeml .hero-logo img{ width: 100%; height: 100%; object-fit: contain; border-radius: 10px; } #pgeml .hero-kicker .eyebrow{ color: #9CC9F2; } #pgeml .hero h1{ color: #fff; font-weight: 800; font-size: clamp(32px, 4.2vw, 54px); line-height: 1.06; letter-spacing: -.02em; } #pgeml .hero h1 .h1-name{ display: block; } #pgeml .hero h1 .h1-rest{ display: block; margin-top: 10px; font-size: .56em; line-height: 1.22; font-weight: 700; color: #B9CCEB; letter-spacing: -.005em; } #pgeml .hero-chips{ display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 22px; padding: 0; list-style: none; } #pgeml .hero-chip{ display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border-radius: var(--r-pill); border: 1px solid rgba(142, 200, 245, .35); background: rgba(255, 255, 255, .05); font: 600 14px/1.3 var(--f-ui); color: #E6EEFA; } #pgeml .hero-chip .i{ color: #8EC8F5; font-size: 18px; } #pgeml .hero-intro{ font-size: 17px; line-height: 1.7; color: rgba(255, 255, 255, .82); max-width: 60ch; } #pgeml .hero-intro strong{ color: #fff; } #pgeml .hero-media{ position: relative; padding: 0 0 18px 18px; } #pgeml .hero-media::before{ content: ""; position: absolute; left: 0; bottom: 0; width: 72%; height: 78%; border-radius: var(--r-xl); background: linear-gradient(135deg, var(--sky-500), var(--blue-700)); } #pgeml .hero-media img{ position: relative; width: 100%; aspect-ratio: 4 / 3.1; object-fit: cover; border-radius: var(--r-xl); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55); } #pgeml .hero-stats{ margin-top: clamp(32px, 4vw, 52px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: var(--r-xl); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .10); backdrop-filter: blur(6px); } #pgeml .stat{ display: flex; gap: 14px; align-items: flex-start; padding: 22px 24px; position: relative; } #pgeml .stat + .stat::before{ content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 1px; background: rgba(255, 255, 255, .12); } #pgeml .stat .icon-tile{ width: 42px; height: 42px; font-size: 22px; } #pgeml .stat-body{ display: flex; flex-direction: column; min-width: 0; } #pgeml .stat-value{ font: 800 clamp(26px, 2.6vw, 34px)/1.05 var(--f-display); color: #fff; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; } #pgeml .stat-label{ font: 700 15px/1.3 var(--f-display); color: #CFE0F6; margin-top: 4px; } #pgeml .stat-sub{ font: 500 13px/1.35 var(--f-ui); color: rgba(255, 255, 255, .58); margin-top: 2px; } #pgeml .hero--full{ min-height: clamp(560px, 74vh, 760px); display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(96px, 12vw, 160px) 0 clamp(28px, 3.5vw, 44px); background: var(--ink-900); } #pgeml .hero--full::before{ display: none; } #pgeml .hero-bg{ position: absolute; inset: 0; z-index: -1; overflow: hidden; } #pgeml .hero-bg img{ width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; transform-origin: 0 40%; transform: scale(1.46); } .js #pgeml .hero-bg img{ animation: heroZoom 2.4s var(--ease) forwards; } @keyframes heroZoom{ from { transform: scale(1.54); } to { transform: scale(1.46); } } #pgeml .hero-bg::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9, 16, 30, .94) 0%, rgba(9, 16, 30, .82) 38%, rgba(9, 16, 30, .40) 68%, rgba(9, 16, 30, .18) 100%), linear-gradient(180deg, rgba(9, 16, 30, .35) 0%, transparent 30%, transparent 55%, rgba(9, 16, 30, .92) 100%); } #pgeml .hero--full .hero-grid{ grid-template-columns: minmax(0, 840px); } #pgeml .hero--full .hero-intro{ max-width: 62ch; } #pgeml .hero--full .hero-intro{ color: rgba(255, 255, 255, .88); } #pgeml .hero--full .hero-chip{ background: rgba(9, 16, 30, .45); backdrop-filter: blur(6px); border-color: rgba(255, 255, 255, .22); } #pgeml .hero--full .hero-stats{ background: rgba(9, 16, 30, .55); border-color: rgba(255, 255, 255, .14); backdrop-filter: blur(12px); } #pgeml .hero--full .hero-logo{ box-shadow: 0 12px 34px -10px rgba(0, 0, 0, .6); } @media (max-width: 1100px){#pgeml .hero-bg::after{ background: linear-gradient(90deg, rgba(9, 16, 30, .95) 0%, rgba(9, 16, 30, .86) 50%, rgba(9, 16, 30, .55) 80%, rgba(9, 16, 30, .35) 100%), linear-gradient(180deg, transparent 50%, rgba(9, 16, 30, .92) 100%); } } @media (max-width: 760px){#pgeml .hero--full{ min-height: 0; padding-top: 72px; } #pgeml .hero-bg img{ object-position: 62% 20%; transform-origin: 50% 30%; transform: scale(1.05); } .js #pgeml .hero-bg img{ animation: none; } #pgeml .hero-bg::after{ background: linear-gradient(180deg, rgba(9, 16, 30, .55) 0%, rgba(9, 16, 30, .80) 35%, rgba(9, 16, 30, .95) 100%); } } #pgeml .toc{ position: sticky; top: var(--header-h); z-index: 90; height: var(--toc-h); background: rgba(255, 255, 255, .97); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); box-shadow: 0 10px 24px -18px rgba(24, 42, 82, .45); } #pgeml .toc .container{ height: 100%; display: flex; align-items: center; gap: 10px; max-width: 1340px; } #pgeml .toc-count{ flex: none; display: inline-flex; align-items: baseline; gap: 4px; padding: 8px 14px; border-radius: var(--r-pill); background: var(--navy-950); color: #fff; font: 600 13px/1 var(--f-ui); font-variant-numeric: tabular-nums; } #pgeml .toc-count b{ font: 800 16px/1 var(--f-display); } #pgeml .toc-count span{ opacity: .6; } #pgeml .toc-scroller{ position: relative; flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; } #pgeml .toc-list{ list-style: none; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; padding: 0 6px; height: 100%; align-items: center; width: 100%; cursor: grab; user-select: none; --fl: 0px; --fr: 0px; mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%); } #pgeml .toc-list.can-prev{ --fl: 48px; } #pgeml .toc-list.can-next{ --fr: 48px; } #pgeml .toc-list.is-dragging{ cursor: grabbing; scroll-behavior: auto; } #pgeml .toc-list.is-dragging a{ pointer-events: none; } #pgeml .toc-list::-webkit-scrollbar{ display: none; } #pgeml .toc-list a{ position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; height: 42px; padding: 0 16px 0 12px; border-radius: var(--r-pill); font: 600 15px/1 var(--f-ui); color: var(--navy-800); text-decoration: none; background: var(--tint-2, #F7F9FD); border: 1px solid var(--line); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); -webkit-user-drag: none; } #pgeml .toc-list a .i{ font-size: 19px; color: var(--sky-500); transition: color var(--dur-fast) var(--ease); } #pgeml .toc-list a:hover{ background: #fff; border-color: color-mix(in srgb, var(--sky-500) 45%, #fff); color: var(--sky-600); transform: translateY(-1px); box-shadow: 0 8px 16px -12px rgba(24, 42, 82, .5); } #pgeml .toc-list a.is-active{ background: linear-gradient(135deg, var(--blue-700), var(--sky-500)); border-color: transparent; color: #fff; box-shadow: 0 10px 20px -12px rgba(42, 79, 150, .9); } #pgeml .toc-list a.is-active .i{ color: #fff; } #pgeml .toc-list a::after{ content: ""; position: absolute; left: 14px; bottom: 5px; height: 2px; width: calc(var(--p, 0) * (100% - 28px)); background: rgba(255, 255, 255, .9); border-radius: 2px; opacity: 0; } #pgeml .toc-list a.is-active::after{ opacity: 1; } #pgeml .toc-arrow{ flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--navy-950); color: #fff; display: inline-grid; place-items: center; cursor: pointer; font-size: 18px; box-shadow: 0 8px 16px -10px rgba(3, 22, 61, .8); transition: background var(--dur-fast), opacity var(--dur-fast), transform var(--dur-fast) var(--ease); } #pgeml .toc-arrow:hover{ background: var(--sky-500); transform: scale(1.06); } #pgeml .toc-arrow[disabled]{ opacity: .25; cursor: default; background: var(--navy-800); transform: none; box-shadow: none; } #pgeml .section{ padding: var(--sec-pad) 0; scroll-margin-top: calc(var(--header-h) + var(--toc-h) + 8px); position: relative; } #pgeml .section--tint{ background: var(--tint); } #pgeml .section--dark{ background: var(--ink-900); color: rgba(255, 255, 255, .82); } #pgeml .section--tight{ padding-top: clamp(40px, 5vw, 64px); } #pgeml [id]{ scroll-margin-top: calc(var(--header-h) + var(--toc-h) + 16px); } #pgeml .sec-head{ display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 32px; align-items: end; padding-bottom: 22px; margin-bottom: 36px; border-bottom: 1px solid var(--border); } #pgeml .section--dark .sec-head{ border-color: rgba(255, 255, 255, .12); } #pgeml .eyebrow{ display: inline-flex; align-items: center; gap: 10px; font: 700 13px/1 var(--f-ui); letter-spacing: 2px; text-transform: uppercase; color: var(--blue-400); } #pgeml .eyebrow::before{ content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-500); flex: none; } #pgeml .sec-head .eyebrow{ grid-column: 1 / -1; margin-bottom: 4px; } #pgeml .h2{ font-weight: 800; font-size: clamp(28px, 3.3vw, 44px); line-height: 1.1; letter-spacing: -.02em; color: var(--navy-950); text-wrap: pretty; } #pgeml .section--dark .h2{ color: #fff; } #pgeml .section--dark .eyebrow{ color: #8EC8F5; } #pgeml .h3{ font-family: var(--f-display); font-weight: 800; font-size: clamp(20px, 1.8vw, 24px); line-height: 1.2; color: var(--navy-950); } #pgeml .h3-sub{ font-family: var(--f-display); font-weight: 800; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.15; color: var(--navy-950); margin: 56px 0 24px; display: flex; align-items: center; gap: 12px; } #pgeml .lead{ font-size: 17px; line-height: 1.75; color: var(--text); } #pgeml .section--dark .lead{ color: rgba(255, 255, 255, .8); } #pgeml .section--dark .lead strong{ color: #fff; } #pgeml .section--dark .lead a{ color: #8EC8F5; } #pgeml .prose p + p{ margin-top: 14px; } #pgeml .prose a,#pgeml .lead a{ font-weight: 500; } #pgeml .muted{ font: 500 14px/1.5 var(--f-ui); color: var(--text-subtle); } #pgeml .hl strong{ background: linear-gradient(180deg, transparent 62%, rgba(44, 145, 228, .18) 62%); padding: 0 1px; } #pgeml .card{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--sh-soft); } #pgeml .card--pad{ padding: clamp(22px, 2.6vw, 32px); } #pgeml .btn{ display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 12px 22px; border-radius: var(--r-pill); border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; font: 700 15px/1.1 var(--f-display); letter-spacing: .01em; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } #pgeml .btn .i{ font-size: 18px; transition: transform var(--dur-fast) var(--ease); } #pgeml .btn:hover .i-go{ transform: translate(2px, -2px); } #pgeml .btn:hover .i-next{ transform: translateX(3px); } #pgeml .btn--primary{ background: var(--grad-cta); color: #fff; box-shadow: 0 8px 20px -10px rgba(43, 79, 151, .8); } #pgeml .btn--primary:hover{ color: #fff; box-shadow: 0 12px 26px -10px rgba(43, 79, 151, .9); transform: translateY(-1px); } #pgeml .btn--sky{ background: var(--sky-500); color: #fff; } #pgeml .btn--sky:hover{ background: var(--sky-600); color: #fff; } #pgeml .btn--white{ background: #fff; color: var(--blue-700); } #pgeml .btn--white:hover{ background: var(--sky-50); color: var(--navy-800); } #pgeml .btn--outline{ background: transparent; border-color: var(--accent, var(--sky-500)); color: var(--navy-800); font: 600 14px/1.1 var(--f-ui); } #pgeml .btn--outline:hover{ background: color-mix(in srgb, var(--accent, var(--sky-500)) 10%, #fff); color: var(--navy-900); } #pgeml .btn--sm{ min-height: 40px; padding: 9px 16px; font-size: 14px; } #pgeml .link-arrow{ display: inline-flex; align-items: center; gap: 8px; font: 700 15px/1.3 var(--f-display); color: var(--accent-deep, var(--sky-600)); text-decoration: none; } #pgeml .link-arrow .i{ font-size: 18px; transition: transform var(--dur-fast) var(--ease); } #pgeml .link-arrow:hover{ color: var(--navy-900); } #pgeml .link-arrow:hover .i{ transform: translate(2px, -2px); } #pgeml .chip{ display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: var(--r-pill); font: 700 12px/1.2 var(--f-ui); letter-spacing: .6px; text-transform: uppercase; } #pgeml .chip::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } #pgeml .chip--plain::before{ display: none; } #pgeml .readmore{ display: flex; align-items: center; gap: 16px; width: fit-content; max-width: 100%; margin: 36px auto 0; padding: 14px 16px 14px 14px; border-radius: var(--r-pill); background: #fff; border: 1.5px solid color-mix(in srgb, var(--sky-500) 40%, #fff); box-shadow: 0 12px 28px -16px rgba(43, 79, 151, .55); font: 500 16px/1.4 var(--f-body); transition: border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast) var(--ease); } #pgeml .readmore:hover{ border-color: var(--sky-500); box-shadow: 0 16px 34px -14px rgba(43, 79, 151, .6); transform: translateY(-2px); } #pgeml .readmore .icon-tile{ width: 44px; height: 44px; font-size: 22px; border-radius: 50%; } #pgeml .readmore-k{ font: 700 12px/1 var(--f-ui); letter-spacing: 1.4px; text-transform: uppercase; color: var(--sky-600); display: block; margin-bottom: 5px; } #pgeml .readmore a{ color: var(--navy-900); font: 700 17px/1.35 var(--f-display); text-decoration: none; } #pgeml .readmore a::after{ content: ""; position: absolute; inset: 0; border-radius: inherit; } #pgeml .readmore{ position: relative; } #pgeml .readmore a:hover{ color: var(--sky-600); } #pgeml .readmore > .i{ margin-left: 12px; flex: none; width: 40px; height: 40px; padding: 10px; border-radius: 50%; background: var(--sky-500); color: #fff; transition: transform var(--dur-fast) var(--ease), background var(--dur-fast); } #pgeml .readmore:hover > .i{ transform: rotate(45deg); background: var(--blue-700); } #pgeml .section--dark .readmore{ background: rgba(44, 145, 228, .12); border-color: rgba(142, 200, 245, .45); box-shadow: 0 16px 34px -18px rgba(44, 145, 228, .7); } #pgeml .section--dark .readmore-k{ color: #8EC8F5; } #pgeml .section--dark .readmore a{ color: #fff; } #pgeml .section--dark .readmore a:hover{ color: #8EC8F5; } #pgeml .table-card{ background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; } #pgeml .data-table{ width: 100%; border-collapse: collapse; font-size: 15px; color: var(--text); } #pgeml .data-table caption{ text-align: left; padding: 18px 20px 12px; font: 800 17px/1.3 var(--f-display); color: var(--navy-950); caption-side: top; } #pgeml .data-table th{ text-align: left; font: 700 12px/1.2 var(--f-ui); letter-spacing: 1px; text-transform: uppercase; color: var(--text-subtle); background: var(--tint); padding: 12px 20px; white-space: nowrap; } #pgeml .data-table td{ padding: 14px 20px; border-top: 1px solid var(--line); vertical-align: middle; } #pgeml .data-table tbody tr{ transition: background var(--dur-fast); } #pgeml .data-table tbody tr:hover{ background: var(--tint-2); } #pgeml .data-table .num{ font: 800 17px/1.2 var(--f-display); color: var(--navy-950); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; } #pgeml .data-table th.num-h{ text-align: right; } #pgeml .essentiel{ display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: start; position: relative; overflow: hidden; } #pgeml .essentiel::after{ content: ""; position: absolute; right: -80px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(44, 145, 228, .10), transparent 70%); pointer-events: none; } #pgeml .essentiel h2{ font-size: clamp(22px, 2.2vw, 28px); font-weight: 800; margin-bottom: 12px; } #pgeml .essentiel p{ font-size: 17px; line-height: 1.8; } #pgeml .adm-intro{ display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: clamp(28px, 4vw, 56px); align-items: stretch; } #pgeml .adm-intro .lead{ font-size: 19px; line-height: 1.8; align-self: center; } #pgeml .adm-intro figure{ position: relative; min-height: 200px; } #pgeml .adm-intro figure img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-xl); box-shadow: var(--sh-soft); } #pgeml .pathways{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 44px; } #pgeml .pathway{ --accent: var(--sky-500); text-align: left; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 20px 22px; border-radius: var(--r-xl); border: 1.5px solid var(--line); background: #fff; cursor: pointer; font: inherit; color: inherit; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); position: relative; } #pgeml .pathway:hover{ border-color: color-mix(in srgb, var(--accent) 50%, #fff); transform: translateY(-2px); } #pgeml .pathway[aria-selected="true"]{ border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, #fff); box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--accent) 80%, #000); } #pgeml .pathway[aria-selected="true"]::after{ content: ""; position: absolute; left: 50%; bottom: -9px; width: 16px; height: 16px; background: inherit; border-right: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent); transform: translateX(-50%) rotate(45deg); } #pgeml .pathway--ast{ --accent: var(--uni-masters); } #pgeml .pathway .h3{ font-size: 19px; display: block; } #pgeml .pathway .muted{ display: block; margin-top: 4px; } #pgeml .pathway-num{ text-align: right; } #pgeml .pathway-num b{ display: block; font: 800 34px/1 var(--f-display); color: var(--accent); } #pgeml .pathway-num span{ font: 600 12px/1.3 var(--f-ui); color: var(--text-subtle); text-transform: uppercase; letter-spacing: .6px; } #pgeml .tab-panel{ margin-top: 22px; padding: clamp(22px, 3vw, 36px); border-radius: var(--r-xl); background: var(--tint-2); border: 1px solid var(--line); } #pgeml .tab-panel[hidden]{ display: none; } .js #pgeml .tab-panel{ animation: panelIn .45s var(--ease); } @keyframes panelIn{ from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } #pgeml .panel-grid{ display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(24px, 3.5vw, 48px); align-items: start; } #pgeml .panel-title{ display: none; } #pgeml .share{ padding: 18px 20px 20px; border-top: 1px solid var(--line); } #pgeml .share-bar{ display: flex; height: 14px; border-radius: var(--r-pill); overflow: hidden; background: var(--line); gap: 2px; } #pgeml .share-bar span{ display: block; height: 100%; width: 0; transition: width 1.1s var(--ease); } #pgeml .is-in .share-bar span{ width: var(--w); } #pgeml .share-legend{ display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font: 500 13px/1.3 var(--f-ui); color: var(--text-subtle); list-style: none; } #pgeml .share-legend li{ display: inline-flex; align-items: center; gap: 6px; } #pgeml .share-legend i{ width: 10px; height: 10px; border-radius: 3px; display: inline-block; } #pgeml .coef{ display: inline-flex; align-items: center; gap: 10px; justify-content: flex-end; } #pgeml .coef-bar{ width: 64px; height: 6px; border-radius: 4px; background: var(--line); overflow: hidden; } #pgeml .coef-bar span{ display: block; height: 100%; width: 0; border-radius: 4px; background: var(--uni-masters); transition: width 1s var(--ease) .2s; } #pgeml .is-in .coef-bar span{ width: var(--w); } #pgeml .td-step{ display: inline-flex; align-items: center; gap: 8px; font: 700 14px/1.2 var(--f-ui); color: var(--navy-800); } #pgeml .td-step .i{ font-size: 18px; color: var(--uni-masters); } #pgeml .data-table .date{ font: 700 15px/1.3 var(--f-display); color: var(--uni-masters-deep); white-space: normal; text-align: right; } #pgeml .band{ margin-top: clamp(56px, 7vw, 96px); position: relative; border-radius: var(--r-xl); overflow: hidden; } #pgeml .band img{ width: 100%; aspect-ratio: 21 / 8; object-fit: cover; transform: scale(1.04); transition: transform 1.6s var(--ease); } #pgeml .band.is-in img{ transform: scale(1); } #pgeml .band figcaption{ position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 28px 22px; color: #fff; font: 500 15px/1.5 var(--f-body); background: linear-gradient(180deg, transparent, rgba(12, 19, 33, .82)); display: flex; align-items: center; gap: 10px; } #pgeml .band figcaption .i{ color: #8EC8F5; font-size: 20px; } #pgeml .fees{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; margin-top: 40px; align-items: stretch; } #pgeml .price-table caption{ padding-bottom: 6px; } #pgeml .price-table tbody tr:first-child td{ padding-top: 22px; padding-bottom: 22px; background: linear-gradient(90deg, var(--sky-50), #fff); } #pgeml .price-table tbody tr:first-child td:first-child{ font: 700 16px/1.35 var(--f-display); color: var(--navy-900); } #pgeml .price-table tbody tr:first-child .num{ font-size: 30px; color: var(--sky-600); } #pgeml .price-free td{ background: var(--uni-exec-mint); } #pgeml .price-free .num{ color: var(--uni-exec-deep) !important; } #pgeml .price-free .tag-free{ display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; padding: 3px 9px; border-radius: var(--r-pill); background: #fff; border: 1px solid color-mix(in srgb, var(--uni-exec) 40%, #fff); color: var(--uni-exec-deep); font: 700 11px/1.2 var(--f-ui); letter-spacing: .6px; text-transform: uppercase; vertical-align: 1px; } #pgeml .compare{ padding: 22px 24px 24px; display: flex; flex-direction: column; } #pgeml .compare-title{ display: flex; align-items: center; gap: 12px; font: 800 17px/1.3 var(--f-display); color: var(--navy-950); margin-bottom: 20px; } #pgeml .compare-title .icon-tile{ width: 38px; height: 38px; font-size: 20px; border-radius: 10px; } #pgeml .bars{ list-style: none; display: flex; flex-direction: column; gap: 14px; flex: 1; justify-content: center; } #pgeml .bar-row{ display: grid; grid-template-columns: 92px minmax(0, 1fr) 84px; gap: 12px; align-items: center; font: 600 14px/1.2 var(--f-ui); color: var(--navy-800); } #pgeml .bar-track{ display: block; height: 26px; border-radius: 8px; background: var(--tint); overflow: hidden; } #pgeml .bar-fill{ display: block; height: 100%; width: 0; border-radius: 8px; background: linear-gradient(90deg, #C9D5EE, #A9BBE0); transition: width 1.2s var(--ease); } #pgeml .is-in .bar-fill{ width: var(--w); } #pgeml .bar-row:nth-child(2) .bar-fill{ transition-delay: .08s; } #pgeml .bar-row:nth-child(3) .bar-fill{ transition-delay: .16s; } #pgeml .bar-row:nth-child(4) .bar-fill{ transition-delay: .24s; } #pgeml .bar-row:nth-child(5) .bar-fill{ transition-delay: .32s; } #pgeml .bar-val{ text-align: right; font: 800 15px/1 var(--f-display); color: var(--navy-900); font-variant-numeric: tabular-nums; white-space: nowrap; } #pgeml .bar-row.is-me{ color: var(--sky-600); } #pgeml .bar-row.is-me .bar-name{ font-weight: 800; } #pgeml .bar-row.is-me .bar-fill{ background: var(--grad-cta); box-shadow: 0 6px 14px -6px rgba(43, 79, 151, .7); } #pgeml .bar-row.is-me .bar-val{ color: var(--sky-600); } #pgeml .callout{ display: flex; gap: 16px; align-items: flex-start; margin-top: 24px; padding: 20px 22px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); } #pgeml .callout p{ font-size: 16px; line-height: 1.75; } #pgeml .ranks{ list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; } #pgeml .rank-caption{ margin-top: 44px; font: 800 18px/1.3 var(--f-display); color: #fff; display: flex; align-items: center; gap: 10px; } #pgeml .rank-caption + .ranks{ margin-top: 18px; } #pgeml .rank{ position: relative; display: flex; gap: 18px; align-items: center; padding: 20px 22px; border-radius: var(--r-xl); background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025)); border: 1px solid rgba(255, 255, 255, .10); transition: transform var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), background var(--dur-base); } #pgeml .rank:hover{ transform: translateY(-3px); border-color: rgba(142, 200, 245, .45); } #pgeml .rank-num{ flex: none; width: 78px; height: 78px; border-radius: 20px; display: flex; align-items: center; justify-content: center; background: rgba(44, 145, 228, .14); border: 1px solid rgba(142, 200, 245, .3); font: 800 32px/1 var(--f-display); color: #fff; letter-spacing: -.02em; } #pgeml .rank-num sup{ font-size: .5em; line-height: 1; align-self: flex-start; margin: 20px 0 0 2px; color: #8EC8F5; } #pgeml .rank > span:last-child{ display: flex; flex-direction: column; align-items: flex-start; min-width: 0; } #pgeml .rank-name{ font: 700 16px/1.35 var(--f-display); color: #fff; } #pgeml .rank-scope{ display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font: 600 12px/1 var(--f-ui); letter-spacing: .5px; color: #A9C8EA; padding: 5px 10px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .06); } #pgeml .rank-scope .i{ font-size: 14px; color: #8EC8F5; } #pgeml .rank--top .rank-num{ background: var(--grad-cta); border-color: transparent; box-shadow: 0 12px 26px -12px rgba(44, 145, 228, .9); } #pgeml .rank--top .rank-num sup{ color: #fff; } #pgeml .charts{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; } #pgeml .chart-card{ background: #fff; border-radius: var(--r-xl); padding: 22px 22px 14px; color: var(--text); } #pgeml .chart-card figcaption{ display: flex; gap: 14px; align-items: flex-start; margin-bottom: 8px; } #pgeml .chart-card .h3{ font-size: 18px; display: block; } #pgeml .chart-card .muted{ display: block; margin-top: 3px; } #pgeml .chart-card .chart-badge{ margin-left: auto; flex: none; text-align: right; } #pgeml .chart-badge b{ display: block; font: 800 28px/1 var(--f-display); color: var(--sky-600); } #pgeml .chart-badge span{ font: 600 11px/1.2 var(--f-ui); letter-spacing: .8px; text-transform: uppercase; color: var(--text-subtle); } #pgeml .chart svg{ width: 100%; height: auto; display: block; overflow: visible; } #pgeml .chart .grid line{ stroke: #E6EBF3; stroke-width: 1; } #pgeml .chart .axis text{ font: 500 12px var(--f-ui); fill: #69727D; } #pgeml .chart .line{ fill: none; stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: var(--len); stroke-dashoffset: var(--len); } #pgeml .chart .area{ opacity: 0; transition: opacity 1s var(--ease) .9s; } #pgeml .chart .pt{ fill: #fff; stroke: var(--blue-700); stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; } #pgeml .chart .pt-last{ fill: var(--sky-500); stroke: #fff; stroke-width: 3; } #pgeml .chart .halo{ fill: var(--sky-500); opacity: 0; transform-box: fill-box; transform-origin: center; } #pgeml .chart .lbl{ font: 800 13px var(--f-display); fill: var(--navy-950); opacity: 0; } #pgeml .chart .lbl-last{ fill: var(--sky-600); font-size: 15px; } #pgeml .chart.is-in .line{ animation: draw 1.6s var(--ease) forwards; } #pgeml .chart.is-in .area{ opacity: 1; } #pgeml .chart.is-in .pt,#pgeml .chart.is-in .lbl{ animation: pop .45s var(--ease) forwards; animation-delay: calc(var(--d) * 1s); } #pgeml .chart.is-in .halo{ animation: halo 2.4s var(--ease) 1.8s infinite; } @keyframes draw{ to { stroke-dashoffset: 0; } } @keyframes pop{ from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } } @keyframes halo{ 0% { opacity: .35; transform: scale(1); } 100% { opacity: 0; transform: scale(3); } } #pgeml .ill{ position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: var(--r-pill); background: rgba(12, 19, 33, .72); backdrop-filter: blur(4px); color: #fff; font: 600 11px/1.2 var(--f-ui); letter-spacing: .3px; } #pgeml .ill .i{ font-size: 12px; } #pgeml .role{ display: inline-flex; align-items: center; gap: 8px; font: 700 12px/1.2 var(--f-ui); letter-spacing: 1.3px; text-transform: uppercase; color: var(--blue-400); } #pgeml .role .i{ font-size: 16px; color: var(--gold-500); } #pgeml .people{ display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } #pgeml .person{ display: grid; grid-template-columns: 210px minmax(0, 1fr); overflow: hidden; transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); } #pgeml .person:hover{ transform: translateY(-3px); box-shadow: 0 22px 40px -22px rgba(24, 42, 82, .35); } #pgeml .person-photo{ position: relative; background: var(--tint); overflow: hidden; } #pgeml .person-photo img{ width: 100%; height: 100%; object-fit: cover; min-height: 280px; transition: transform 1s var(--ease); } #pgeml .person:hover .person-photo img{ transform: scale(1.04); } #pgeml .person-body{ padding: 26px 26px 24px; display: flex; flex-direction: column; gap: 10px; } #pgeml .person-body .h3{ font-size: 26px; } #pgeml .person-body p{ font-size: 15.5px; line-height: 1.7; } #pgeml .person-body .link-arrow{ margin-top: auto; padding-top: 8px; font-size: 15px; } #pgeml .flagship{ display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); overflow: hidden; margin-top: 40px; } #pgeml .flagship-media{ position: relative; min-height: 100%; } #pgeml .flagship-media img{ width: 100%; height: 100%; object-fit: cover; min-height: 320px; } #pgeml .flagship-media::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, transparent 50%, rgba(12, 19, 33, .45)); } #pgeml .flagship-body{ padding: clamp(24px, 3.2vw, 44px); display: flex; flex-direction: column; gap: 16px; } #pgeml .flagship-body h3{ font-size: clamp(24px, 2.4vw, 32px); font-weight: 800; } #pgeml .chip--star{ align-self: flex-start; background: #FBF3DC; color: #7A5A12; border: 1px solid #EBD9A3; } #pgeml .chip--star::before{ display: none; } #pgeml .chip--star .i{ font-size: 15px; color: var(--gold-500); } #pgeml .features{ list-style: none; display: grid; gap: 10px; margin-top: 4px; } #pgeml .features li{ display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; padding: 12px 14px; border-radius: var(--r-md); background: var(--tint-2); border: 1px solid var(--line); font-size: 15px; line-height: 1.6; transition: background var(--dur-fast), border-color var(--dur-fast); } #pgeml .features li:hover{ background: var(--sky-50); border-color: color-mix(in srgb, var(--sky-500) 30%, #fff); } #pgeml .features .icon-tile{ width: 36px; height: 36px; font-size: 19px; border-radius: 10px; } #pgeml .flagship .readmore{ margin-top: 8px; } #pgeml .programs{ display: grid; grid-template-columns: 1fr; gap: 18px; } #pgeml .program{ --accent: var(--uni-bachelor); --accent-deep: var(--uni-bachelor-deep); --accent-mint: var(--uni-bachelor-mint); position: relative; display: grid; grid-template-columns: 236px minmax(0, 1fr); align-items: stretch; border-radius: var(--r-xl); background: #fff; border: 1px solid var(--line); overflow: hidden; box-shadow: 0 18px 36px -30px rgba(24, 42, 82, .45); transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base); } #pgeml .program:hover{ transform: translateY(-3px); box-shadow: 0 28px 44px -28px color-mix(in srgb, var(--accent-deep) 70%, #000); border-color: color-mix(in srgb, var(--accent) 45%, #fff); } #pgeml .program--masters{ --accent: var(--uni-masters); --accent-deep: var(--uni-masters-deep); --accent-mint: var(--uni-masters-mint); } #pgeml .program--exec{ --accent: var(--uni-exec); --accent-deep: var(--uni-exec-deep); --accent-mint: var(--uni-exec-mint); } #pgeml .program--new{ --accent: #E3A33B; --accent-deep: #8A5A0E; --accent-mint: #FFF9EF; } #pgeml .program-side{ grid-row: 1 / span 2; position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; padding: 26px 26px 24px; color: #fff; background: linear-gradient(155deg, var(--accent-deep) 0%, color-mix(in srgb, var(--accent-deep) 80%, #000) 100%); } #pgeml .program-side::after{ content: ""; position: absolute; right: -60px; bottom: -60px; width: 190px; height: 190px; border-radius: 50%; z-index: -1; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 75%, transparent) 0%, transparent 70%); opacity: .6; transition: transform var(--dur-slow) var(--ease); } #pgeml .program:hover .program-side::after{ transform: scale(1.25); } #pgeml .program-num{ font: 800 54px/.9 var(--f-display); letter-spacing: -.03em; color: rgba(255, 255, 255, .95); } #pgeml .program-icon{ width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; font-size: 30px; color: #fff; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .26); transition: transform var(--dur-base) var(--ease); } #pgeml .program:hover .program-icon{ transform: rotate(-6deg) scale(1.06); } #pgeml .program-kicker{ font: 700 12.5px/1.3 var(--f-ui); letter-spacing: 1.2px; text-transform: uppercase; color: #fff; } #pgeml .program-main{ padding: 28px 32px 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; } #pgeml .program .h3{ font-size: clamp(24px, 2.2vw, 30px); font-weight: 800; letter-spacing: -.02em; color: var(--navy-950); } #pgeml .program p{ font-size: 16px; line-height: 1.7; color: var(--text); } #pgeml .program-links{ list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px 12px; margin-top: 6px; } #pgeml .program-links a{ display: flex; align-items: flex-start; gap: 8px; height: 100%; padding: 10px 12px; border-radius: 12px; background: var(--accent-mint); border: 1px solid color-mix(in srgb, var(--accent) 22%, #fff); font: 600 14.5px/1.4 var(--f-ui); color: var(--navy-900); text-decoration: none; transition: background var(--dur-fast), border-color var(--dur-fast); } #pgeml .program-links a .i{ font-size: 16px; color: var(--accent-deep); margin-top: 2px; flex: none; transition: transform var(--dur-fast) var(--ease); } #pgeml .program-links a:hover{ border-color: var(--accent); background: #fff; } #pgeml .program-links a:hover .i{ transform: translate(2px, -2px); } #pgeml .program-action{ grid-column: 2; display: flex; align-items: flex-end; padding: 20px 32px 28px; } #pgeml .program-cta{ white-space: nowrap; text-align: left; line-height: 1.2; } #pgeml .program .program-cta{ font-size: 13.5px; min-height: 42px; padding: 10px 18px; } #pgeml .program .btn--solid{ background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; font: 600 14px/1.25 var(--f-ui); } #pgeml .program .btn--solid .i{ color: #fff; } #pgeml .program .btn--solid:hover{ background: color-mix(in srgb, var(--accent-deep) 80%, #000); color: #fff; } #pgeml .campus-top{ display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: clamp(24px, 4vw, 56px); align-items: center; } #pgeml .intl{ padding: 22px 24px; } #pgeml .intl-row{ display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } #pgeml .intl-big{ font: 800 44px/1 var(--f-display); color: var(--navy-950); letter-spacing: -.02em; } #pgeml .intl-big small{ font-size: .5em; } #pgeml .intl-lbl{ font: 600 13px/1.3 var(--f-ui); color: var(--text-subtle); } #pgeml .gauge{ position: relative; height: 12px; border-radius: var(--r-pill); background: var(--tint); margin: 14px 0 26px; } #pgeml .gauge-fill{ position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--grad-cta); transition: width 1.4s var(--ease); } #pgeml .is-in .gauge-fill{ width: 40%; } #pgeml .gauge-goal{ position: absolute; left: 50%; top: -6px; bottom: -6px; width: 2px; background: var(--gold-500); border-radius: 2px; } #pgeml .gauge-goal span{ position: absolute; top: 26px; left: 50%; transform: translateX(-50%); white-space: nowrap; font: 700 11px/1 var(--f-ui); color: #8A6A1E; letter-spacing: .4px; } #pgeml .intl-mob{ display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); } #pgeml .intl-mob b{ font: 800 22px/1 var(--f-display); color: var(--navy-950); } #pgeml .campus-grid{ display: grid; grid-template-columns: 1.25fr 1fr 1fr; grid-template-rows: 280px 230px; gap: 16px; margin-top: 40px; } #pgeml .campus{ position: relative; border-radius: var(--r-xl); overflow: hidden; background: var(--ink-900); isolation: isolate; } #pgeml .campus img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; transition: transform 1s var(--ease); } #pgeml .campus:hover img{ transform: scale(1.06); } #pgeml .campus::after{ content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 35%, rgba(9, 16, 30, .88)); } #pgeml .campus-body{ position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 22px; color: #fff; } #pgeml .campus-pin{ display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border-radius: var(--r-pill); background: rgba(255, 255, 255, .14); backdrop-filter: blur(6px); font: 700 11px/1 var(--f-ui); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 10px; } #pgeml .campus-pin .i{ font-size: 14px; color: #8EC8F5; } #pgeml .campus .h3{ color: #fff; font-size: 26px; } #pgeml .campus .muted{ color: rgba(255, 255, 255, .78); display: block; margin-top: 4px; font-size: 14px; } #pgeml .campus--lyon{ grid-row: 1 / span 2; } #pgeml .campus--lyon .h3{ font-size: 34px; } #pgeml .campus-more{ grid-column: 2 / span 2; padding: 26px 30px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 26px; align-items: center; background: linear-gradient(135deg, var(--navy-800), var(--ink-900)); color: rgba(255, 255, 255, .85); border: 0; } #pgeml .campus-more p{ font-size: 16px; line-height: 1.7; } #pgeml .campus-more strong{ color: #fff; } #pgeml .campus-globe{ width: 84px; height: 84px; border-radius: 24px; display: grid; place-items: center; align-self: center; font-size: 46px; color: #8EC8F5; background: radial-gradient(circle at 30% 25%, rgba(142, 200, 245, .28), rgba(255, 255, 255, .06)); border: 1px solid rgba(142, 200, 245, .3); box-shadow: inset 0 0 0 6px rgba(255, 255, 255, .03); } #pgeml .sal-top{ display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: clamp(24px, 4vw, 56px); align-items: center; } #pgeml .sal-kpi{ position: relative; overflow: hidden; padding: 26px; border-radius: var(--r-xl); background: var(--ink-900); color: #fff; } #pgeml .sal-kpi::before{ content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(44, 145, 228, .45), transparent 70%); } #pgeml .sal-kpi .eyebrow{ color: #8EC8F5; } #pgeml .sal-kpi b{ display: block; margin: 14px 0 6px; font: 800 clamp(40px, 4vw, 52px)/1 var(--f-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; } #pgeml .sal-kpi b small{ font-size: .42em; font-weight: 700; color: #B9CCEB; margin-left: 4px; } #pgeml .sal-kpi > span:last-child{ position: relative; display: block; font: 500 14px/1.5 var(--f-ui); color: rgba(255, 255, 255, .7); } #pgeml .sling{ margin-top: 40px; padding: 26px 0 24px; overflow: hidden; } #pgeml .sling-head{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 0 26px 22px; } #pgeml .sling-brand{ display: flex; flex-direction: column; gap: 4px; } #pgeml .sling-brand img{ height: 26px; width: auto; margin-bottom: 6px; align-self: flex-start; } #pgeml .sling-brand .t{ font: 800 18px/1.3 var(--f-display); color: var(--navy-950); } #pgeml .sling-brand .s{ font: 500 14px/1.4 var(--f-ui); color: var(--text-subtle); } #pgeml .btn--sling{ background: #EAF8F1; color: #11663F; border: 1px solid #A6DEC2; } #pgeml .btn--sling:hover{ background: #D7F2E5; color: #0B4F30; } #pgeml .marquee{ position: relative; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); } #pgeml .marquee-track{ display: flex; width: max-content; animation: marquee 48s linear infinite; } #pgeml .marquee:hover .marquee-track,#pgeml .marquee:focus-within .marquee-track,#pgeml .marquee.is-paused .marquee-track{ animation-play-state: paused; } #pgeml .marquee-list{ list-style: none; display: flex; gap: 16px; padding: 4px 8px 8px; } @keyframes marquee{ to { transform: translateX(-50%); } } #pgeml .sal-card{ width: 330px; flex: none; display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); box-shadow: 0 4px 14px -8px rgba(24, 42, 82, .2); } #pgeml .sal-co{ display: flex; align-items: center; gap: 12px; } #pgeml .sal-logo{ width: 40px; height: 40px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--tint); color: var(--navy-800); font: 800 12px/1 var(--f-display); letter-spacing: .3px; border: 1px solid var(--line); } #pgeml .sal-co-name{ display: block; font: 700 15px/1.25 var(--f-display); color: var(--navy-950); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 210px; } #pgeml .sal-meta{ display: block; font: 500 12px/1.3 var(--f-ui); color: var(--text-subtle); margin-top: 2px; } #pgeml .sal-role{ display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; } #pgeml .sal-role .r{ display: block; font: 700 14px/1.3 var(--f-ui); color: var(--navy-800); } #pgeml .sal-school{ text-align: right; flex: none; } #pgeml .sal-school .r{ color: var(--navy-900); } #pgeml .sal-total{ display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; padding: 12px 14px; border-radius: var(--r-md); background: var(--tint-2); } #pgeml .sal-total .k{ display: block; white-space: nowrap; font: 600 11px/1.2 var(--f-ui); color: var(--text-subtle); text-transform: uppercase; letter-spacing: .5px; } #pgeml .sal-total .v{ display: block; font: 800 22px/1.1 var(--f-display); color: var(--navy-950); margin-top: 3px; font-variant-numeric: tabular-nums; } #pgeml .sal-total .split{ text-align: right; } #pgeml .sal-total .split .v{ font: 700 13px/1.2 var(--f-ui); color: var(--navy-800); } #pgeml .sal-unlock{ width: 300px; flex: none; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 22px; border-radius: var(--r-lg); color: #fff; background: radial-gradient(260px 160px at 100% 0, rgba(44, 145, 228, .55), transparent 70%), var(--navy-800); } #pgeml .sal-unlock .i-lock{ font-size: 30px; color: #8EC8F5; } #pgeml .sal-unlock .t{ font: 800 20px/1.2 var(--f-display); } #pgeml .sal-unlock .s{ font: 500 14px/1.5 var(--f-ui); color: rgba(255, 255, 255, .78); } #pgeml .sal-unlock .btn{ align-self: flex-start; margin-top: 4px; } #pgeml .alumnow{ margin-top: 40px; padding: clamp(22px, 3vw, 32px); border-radius: var(--r-xl); background: linear-gradient(180deg, var(--tint), #fff); border: 1px solid var(--line); } #pgeml .alumnow-head{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 24px; } #pgeml .alumnow-brand{ display: flex; align-items: center; gap: 18px; } #pgeml .alumnow-brand img{ height: 34px; width: auto; flex: none; align-self: center; } #pgeml .alumnow-brand span{ font: 800 19px/1.3 var(--f-display); color: var(--navy-950); max-width: 40ch; } #pgeml .alumni{ display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } #pgeml .alum{ display: flex; flex-direction: column; border-radius: var(--r-lg); overflow: hidden; background: #fff; border: 1px solid var(--line); text-decoration: none; color: inherit; transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); } #pgeml .alum:hover{ transform: translateY(-4px); box-shadow: var(--sh-card); color: inherit; } #pgeml .alum-photo{ position: relative; aspect-ratio: 1 / 1.05; overflow: hidden; background: var(--tint); } #pgeml .alum-photo img{ width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); } #pgeml .alum:hover .alum-photo img{ transform: scale(1.06); } #pgeml .alum-body{ display: flex; flex-direction: column; gap: 4px; padding: 14px 14px 16px; flex: 1; } #pgeml .alum-name{ font: 800 16px/1.25 var(--f-display); color: var(--navy-950); } #pgeml .alum-role{ font: 500 13px/1.45 var(--f-ui); color: var(--text-subtle); } #pgeml .alum-cta{ margin-top: auto; padding-top: 10px; display: inline-flex; align-items: center; gap: 6px; font: 700 12px/1 var(--f-ui); letter-spacing: 1px; color: var(--sky-600); } #pgeml .alum-cta .i{ font-size: 14px; transition: transform var(--dur-fast) var(--ease); } #pgeml .alum:hover .alum-cta .i{ transform: translateX(3px); } #pgeml .alum-banner{ margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; border-radius: var(--r-lg); color: #fff; background: var(--grad-cta); } #pgeml .alum-banner .t{ display: flex; align-items: center; gap: 14px; } #pgeml .alum-banner .t .icon-tile{ --accent: #fff; color: #fff; background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .3); } #pgeml .alum-banner b{ display: block; font: 800 18px/1.25 var(--f-display); } #pgeml .alum-banner span span{ display: block; font: 500 14px/1.5 var(--f-ui); color: rgba(255, 255, 255, .85); } #pgeml .videos{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } #pgeml .video{ display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: inherit; border-radius: var(--r-xl); background: #fff; border: 1px solid var(--line); transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); } #pgeml .video:hover{ transform: translateY(-4px); box-shadow: var(--sh-card); color: inherit; } #pgeml .video-thumb{ position: relative; aspect-ratio: 16 / 10; overflow: hidden; } #pgeml .video-thumb img{ width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); } #pgeml .video:hover .video-thumb img{ transform: scale(1.05); } #pgeml .video-thumb::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(12, 19, 33, .45)); } #pgeml .play{ position: absolute; left: 50%; top: 50%; z-index: 1; width: 62px; height: 62px; margin: -31px 0 0 -31px; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--blue-700); display: grid; place-items: center; font-size: 28px; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .5); transition: transform var(--dur-base) var(--ease), background var(--dur-base), color var(--dur-base); } #pgeml .play::before{ content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .55); opacity: 0; transform: scale(.85); transition: all var(--dur-base) var(--ease); } #pgeml .video:hover .play{ transform: scale(1.08); background: var(--sky-500); color: #fff; } #pgeml .video:hover .play::before{ opacity: 1; transform: scale(1); } #pgeml .video-body{ padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 6px; } #pgeml .video-body .muted{ display: inline-flex; align-items: center; gap: 6px; font-size: 13px; } #pgeml .video-body .muted .i{ color: var(--sky-500); font-size: 16px; } #pgeml .video-body .h3{ font-size: 19px; } #pgeml .vie-top{ display: block; } #pgeml .vie-stats{ list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 32px; } #pgeml .vie-stat{ display: flex; align-items: center; gap: 18px; padding: 22px 24px; border-radius: var(--r-xl); background: var(--accent-mint); border: 1px solid color-mix(in srgb, var(--accent) 22%, #fff); transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); } #pgeml .vie-stat:hover{ transform: translateY(-3px); box-shadow: 0 18px 30px -20px color-mix(in srgb, var(--accent) 80%, #000); } #pgeml .vie-icon{ flex: none; width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; font-size: 34px; color: #fff; background: linear-gradient(145deg, var(--accent), var(--accent-deep)); box-shadow: 0 10px 22px -10px var(--accent-deep); } #pgeml .vie-stats b{ display: block; font: 800 28px/1.05 var(--f-display); color: var(--navy-950); } #pgeml .vie-stats span span{ display: block; margin-top: 4px; font: 600 14px/1.35 var(--f-ui); color: var(--accent-deep); } #pgeml .mosaic{ display: grid; grid-template-columns: 1.7fr 1fr; grid-template-rows: 220px 220px; gap: 16px; margin-top: 40px; } #pgeml .mosaic figure{ position: relative; border-radius: var(--r-xl); overflow: hidden; } #pgeml .mosaic figure:first-child{ grid-row: 1 / span 2; } #pgeml .mosaic img{ width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); } #pgeml .mosaic figure:hover img{ transform: scale(1.05); } #pgeml .mosaic figcaption{ position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .92); color: var(--navy-900); font: 700 13px/1 var(--f-ui); box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .4); } #pgeml .mosaic figcaption .i{ color: var(--sky-500); font-size: 16px; } #pgeml .timeline{ position: relative; list-style: none; margin-top: 8px; padding: 10px 0; } #pgeml .timeline::before,#pgeml .timeline::after{ content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; border-radius: 3px; background: var(--line); } #pgeml .timeline::after{ background: linear-gradient(180deg, var(--sky-500), var(--blue-700)); transform-origin: top; transform: scaleY(var(--tp, 0)); } #pgeml .tl{ position: relative; display: grid; grid-template-columns: 1fr 64px 1fr; align-items: center; min-height: 92px; } #pgeml .tl + .tl{ margin-top: 8px; } #pgeml .tl-dot{ grid-column: 2; justify-self: center; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid var(--border-blue); z-index: 1; transition: border-color .4s var(--ease), background .4s var(--ease), transform .4s var(--ease); } #pgeml .tl.is-on .tl-dot{ border-color: var(--sky-500); background: var(--sky-500); box-shadow: 0 0 0 6px rgba(44, 145, 228, .16); } #pgeml .tl-card{ padding: 18px 22px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-soft); transition: opacity .6s var(--ease), transform .6s var(--ease); } #pgeml .tl:nth-child(odd) .tl-card{ grid-column: 1; grid-row: 1; text-align: right; } #pgeml .tl:nth-child(even) .tl-card{ grid-column: 3; grid-row: 1; } #pgeml .tl:nth-child(odd) .tl-dot,#pgeml .tl:nth-child(even) .tl-dot{ grid-row: 1; } #pgeml .tl-year{ display: block; font: 800 28px/1 var(--f-display); color: var(--blue-700); letter-spacing: -.01em; margin-bottom: 8px; } #pgeml .tl-card p{ font-size: 15.5px; line-height: 1.65; } #pgeml .tl--now .tl-card{ background: var(--ink-900); border-color: var(--ink-900); color: rgba(255, 255, 255, .85); } #pgeml .tl--now .tl-year{ color: #8EC8F5; } .js #pgeml .tl:not(.is-on) .tl-card{ opacity: .5; transform: translateY(6px); } #pgeml .news{ display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 24px; } #pgeml .news-feature{ display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: inherit; border-radius: var(--r-xl); background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-card); transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); } #pgeml .news-feature:hover{ transform: translateY(-3px); box-shadow: 0 0 22px rgba(120, 180, 230, .55); color: inherit; } #pgeml .news-feature .thumb{ aspect-ratio: 16 / 9; overflow: hidden; } #pgeml .news-feature img{ width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); } #pgeml .news-feature:hover img{ transform: scale(1.05); } #pgeml .news-feature .body{ padding: 24px 26px 26px; display: flex; flex-direction: column; gap: 10px; } #pgeml .news-feature .h3{ font-size: clamp(22px, 2.1vw, 28px); line-height: 1.2; } #pgeml .news-meta{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 600 12px/1.3 var(--f-ui); letter-spacing: .5px; text-transform: uppercase; color: var(--text-subtle); } #pgeml .news-meta .i{ color: var(--sky-500); font-size: 15px; } #pgeml .src{ padding: 3px 8px; border-radius: var(--r-xs); background: var(--sky-50); color: var(--sky-600); letter-spacing: .4px; } #pgeml .src--mp{ background: #FDECEC; color: #B4232A; } #pgeml .news-list{ list-style: none; display: flex; flex-direction: column; gap: 12px; } #pgeml .news-item{ display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 10px 14px 10px 10px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); text-decoration: none; color: inherit; transition: border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast) var(--ease); } #pgeml .news-item:hover{ border-color: color-mix(in srgb, var(--sky-500) 40%, #fff); box-shadow: var(--sh-card); transform: translateX(3px); color: inherit; } #pgeml .news-item img{ width: 112px; height: 78px; object-fit: cover; border-radius: var(--r-md); } #pgeml .news-item .h3{ font-size: 16px; line-height: 1.3; margin-top: 6px; } #pgeml .news-item > .i{ color: var(--sky-500); font-size: 20px; transition: transform var(--dur-fast) var(--ease); } #pgeml .news-item:hover > .i{ transform: translate(2px, -2px); } #pgeml .faq-grid{ display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; } #pgeml .faq-aside{ position: sticky; top: calc(var(--header-h) + var(--toc-h) + 32px); display: flex; flex-direction: column; gap: 14px; } #pgeml .faq-aside .h2{ margin: 0; } #pgeml .faq-caption{ font-size: 17px; line-height: 1.7; color: var(--text); padding-top: 18px; border-top: 1px solid var(--border); } #pgeml .faq-list{ display: flex; flex-direction: column; gap: 12px; } #pgeml .acc{ border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); overflow: hidden; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); } #pgeml .acc[open]{ border-color: color-mix(in srgb, var(--sky-500) 40%, #fff); box-shadow: var(--sh-card); } #pgeml .acc summary{ list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px; padding: 20px 22px; min-height: 64px; } #pgeml .acc summary::-webkit-details-marker{ display: none; } #pgeml .acc summary .h3{ font-size: 18px; flex: 1; } #pgeml .acc summary .num{ flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--tint); color: var(--blue-700); font: 800 14px/1 var(--f-display); transition: background var(--dur-fast), color var(--dur-fast); } #pgeml .acc[open] summary .num{ background: var(--sky-500); color: #fff; } #pgeml .acc .chev{ flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--tint); color: var(--navy-800); font-size: 18px; transition: transform var(--dur-base) var(--ease), background var(--dur-fast); } #pgeml .acc[open] .chev{ transform: rotate(180deg); background: var(--sky-50); color: var(--sky-600); } #pgeml .acc summary:hover .chev{ background: var(--sky-50); } #pgeml .acc-body{ padding: 0 22px 22px 72px; } #pgeml .acc-body p{ font-size: 16px; line-height: 1.75; } #pgeml .schools{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } #pgeml .school{ position: relative; display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: inherit; border-radius: 18px; background: #fff; box-shadow: 0 0 10px rgba(75, 161, 218, .35); transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); } #pgeml .school:hover{ transform: translateY(-4px); box-shadow: 0 0 22px rgba(75, 161, 218, .55); color: inherit; } #pgeml .school-photo{ display: block; aspect-ratio: 297 / 145; overflow: hidden; background: var(--tint); } #pgeml .school-photo img{ width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); } #pgeml .school:hover .school-photo img{ transform: scale(1.06); } #pgeml .school-logo{ position: relative; left: 0; top: 0; transform: none; align-self: flex-start; width: 96px; height: 96px; margin: -48px 0 0 16px; border-radius: 50%; background: #fff; display: grid; place-items: center; padding: 10px; border: 4px solid #E4F0FC; box-shadow: 0 6px 16px -6px rgba(43, 79, 151, .45); z-index: 1; } #pgeml .school-logo img{ max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transition: transform var(--dur-base) var(--ease); } #pgeml .school:hover .school-logo img{ transform: scale(1.06); } #pgeml .school-body{ padding: 12px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; } #pgeml .school-name{ font: 800 20px/1.2 var(--f-display); color: var(--blue-600); letter-spacing: -.01em; } #pgeml .school-loc{ display: flex; align-items: flex-start; gap: 7px; } #pgeml .school-loc .i{ color: var(--blue-400); font-size: 16px; margin-top: 2px; } #pgeml .school .link-arrow{ margin-top: auto; padding-top: 8px; align-self: flex-end; font: 500 14px/1.3 var(--f-body); color: var(--cyan-500); } #pgeml .school .link-arrow .i{ font-size: 16px; } #pgeml .school:hover .link-arrow{ color: var(--blue-700); } #pgeml .school:hover .link-arrow .i{ transform: translateX(3px); } #pgeml .update{ margin-top: clamp(48px, 6vw, 72px); position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: clamp(24px, 3vw, 34px) clamp(24px, 3vw, 40px); border-radius: var(--r-xl); color: #fff; background: radial-gradient(500px 200px at 90% 0, rgba(44, 145, 228, .45), transparent 70%), var(--navy-800); } #pgeml .update .t{ display: flex; align-items: center; gap: 18px; } #pgeml .update .h3{ color: #fff; display: block; font-size: clamp(20px, 2vw, 26px); } #pgeml .update .s{ display: block; font: 500 15px/1.5 var(--f-ui); color: #D4E0F5; margin-top: 4px; } #pgeml .site-footer{ background: var(--ink-900); color: #C9D3F2; } #pgeml .site-footer .container{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding-top: 30px; padding-bottom: 30px; } #pgeml .site-footer .f-text{ font: 500 14px/1.5 var(--f-ui); } #pgeml .f-logo{ background: #fff; border-radius: var(--r-md); padding: 8px 12px; display: flex; } #pgeml .f-logo img{ height: 32px; width: auto; } #pgeml .to-top{ position: fixed; right: 20px; bottom: 20px; z-index: 80; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), background var(--dur-fast); box-shadow: 0 10px 24px -10px rgba(24, 42, 82, .6); } #pgeml .to-top.is-visible{ opacity: 1; transform: none; pointer-events: auto; } #pgeml .to-top .i{ transform: rotate(-90deg); } .js #pgeml .reveal{ opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--rd, 0s); } .js #pgeml .reveal.is-in{ opacity: 1; transform: none; } .js #pgeml .hero-anim > *{ opacity: 0; transform: translateY(16px); animation: heroIn .9s var(--ease) forwards; } .js #pgeml .hero-anim > *:nth-child(2){ animation-delay: .08s; } .js #pgeml .hero-anim > *:nth-child(3){ animation-delay: .16s; } .js #pgeml .hero-anim > *:nth-child(4){ animation-delay: .24s; } .js #pgeml .hero-media{ opacity: 0; transform: translateX(24px); animation: heroIn 1s var(--ease) .2s forwards; } .js #pgeml .hero-stats{ opacity: 0; transform: translateY(16px); animation: heroIn .9s var(--ease) .38s forwards; } @keyframes heroIn{ to { opacity: 1; transform: none; } } @media (max-width: 1180px){#pgeml .main-nav a{ padding: 0 10px; font-size: 15px; } #pgeml .program{ grid-template-columns: 200px minmax(0, 1fr); } #pgeml .alumni{ grid-template-columns: repeat(5, 200px); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin; } #pgeml .alum{ scroll-snap-align: start; } } @media (max-width: 1024px){#pgeml{ --header-h: 64px; } #pgeml .main-nav{ display: none; } #pgeml .burger{ display: inline-grid; } #pgeml .header-actions{ margin-left: auto; } #pgeml .mobile-nav{ display: block; position: fixed; inset: var(--header-h) 0 auto 0; z-index: 99; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 20px 30px -20px rgba(24, 42, 82, .4); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: all var(--dur-base) var(--ease); } #pgeml .mobile-nav.is-open{ transform: none; opacity: 1; visibility: visible; } #pgeml .mobile-nav ul{ list-style: none; padding: 10px var(--gutter) 18px; } #pgeml .mobile-nav a{ display: flex; align-items: center; justify-content: space-between; padding: 14px 4px; border-bottom: 1px solid var(--line); font: 700 18px/1.2 var(--f-display); color: var(--navy-800); text-decoration: none; } #pgeml .mobile-nav a .i{ color: var(--sky-500); } #pgeml .hero-grid{ grid-template-columns: 1fr; } #pgeml .hero-media{ max-width: 640px; } #pgeml .hero-stats{ grid-template-columns: repeat(2, minmax(0, 1fr)); } #pgeml .stat:nth-child(3)::before{ display: none; } #pgeml .stat:nth-child(n+3){ border-top: 1px solid rgba(255, 255, 255, .10); } #pgeml .adm-intro,#pgeml .panel-grid,#pgeml .fees,#pgeml .campus-top,#pgeml .sal-top,#pgeml .vie-top,#pgeml .news,#pgeml .faq-grid{ grid-template-columns: 1fr; } #pgeml .faq-aside{ position: static; } #pgeml .ranks{ grid-template-columns: repeat(2, minmax(0, 1fr)); } #pgeml .charts{ grid-template-columns: 1fr; } #pgeml .people{ grid-template-columns: 1fr; } #pgeml .adm-intro figure{ min-height: 0; aspect-ratio: 16 / 9; } #pgeml .adm-intro .lead{ font-size: 17px; } #pgeml .flagship{ grid-template-columns: 1fr; } #pgeml .flagship-media img{ min-height: 0; aspect-ratio: 16 / 9; } #pgeml .campus-grid{ grid-template-columns: 1fr 1fr; grid-template-rows: 300px 220px auto; } #pgeml .campus--lyon{ grid-row: auto; grid-column: 1 / -1; } #pgeml .campus-more{ grid-column: 1 / -1; } #pgeml .videos{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } #pgeml .schools{ grid-template-columns: repeat(2, minmax(0, 1fr)); } #pgeml .sec-head{ grid-template-columns: 1fr; } } @media (max-width: 760px){#pgeml{ --gutter: 16px; --toc-h: 58px; } #pgeml{ font-size: 15.5px; } #pgeml .brand img{ height: 38px; } #pgeml .toc-label,#pgeml .toc-arrow,#pgeml .toc-count{ display: none; } #pgeml .toc-list a{ height: 40px; font-size: 14px; padding: 0 14px 0 11px; } #pgeml .toc-list.can-prev{ --fl: 28px; } #pgeml .toc-list.can-next{ --fr: 28px; } #pgeml .hero h1 .h1-rest{ font-size: .6em; } #pgeml .hero-intro{ font-size: 16px; } #pgeml .hero-media{ padding: 0 0 12px 12px; } #pgeml .stat{ padding: 18px 16px; gap: 10px; } #pgeml .stat .icon-tile{ display: none; } #pgeml .stat-value{ font-size: 26px; } #pgeml .essentiel{ grid-template-columns: 1fr; gap: 14px; } #pgeml .essentiel p{ font-size: 16px; } #pgeml .lead{ font-size: 16px; } #pgeml .pathways{ grid-template-columns: 1fr; gap: 12px; } #pgeml .pathway{ grid-template-columns: auto minmax(0, 1fr); } #pgeml .pathway .icon-tile{ grid-row: span 2; } #pgeml .pathway-num{ text-align: left; grid-column: 2; display: flex; align-items: baseline; gap: 8px; } #pgeml .pathway-num b{ font-size: 26px; } #pgeml .pathway[aria-selected="true"]::after{ display: none; } #pgeml .rtable thead{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } #pgeml .rtable tbody tr{ display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 14px 18px; border-top: 1px solid var(--line); } #pgeml .rtable td{ border: 0; padding: 0; } #pgeml .rtable td[data-label]::before{ content: attr(data-label); display: block; font: 700 11px/1.3 var(--f-ui); letter-spacing: .8px; text-transform: uppercase; color: var(--text-subtle); margin-bottom: 3px; } #pgeml .rtable td.num,#pgeml .rtable td.date{ grid-row: 1 / span 2; grid-column: 2; align-self: center; } #pgeml .price-table tbody tr:first-child .num{ font-size: 24px; } #pgeml .band img{ aspect-ratio: 4 / 3; } #pgeml .band figcaption{ padding: 50px 18px 16px; font-size: 14px; } #pgeml .bar-row{ grid-template-columns: 74px minmax(0, 1fr) 74px; gap: 8px; font-size: 13px; } #pgeml .bar-val{ font-size: 14px; } #pgeml .ranks{ grid-template-columns: 1fr; } #pgeml .rank-num{ width: 64px; height: 64px; font-size: 26px; border-radius: 16px; } #pgeml .chart-card{ padding: 18px 14px 10px; } #pgeml .chart .axis text{ font-size: 17px; } #pgeml .chart .lbl{ font-size: 18px; } #pgeml .chart .lbl-last{ font-size: 20px; } #pgeml .person{ grid-template-columns: 1fr; } #pgeml .person-photo img{ min-height: 0; height: 280px; } #pgeml .person-body{ padding: 22px 20px 24px; } #pgeml .vie-stats{ grid-template-columns: 1fr; gap: 12px; } #pgeml .vie-stat{ padding: 16px 18px; } #pgeml .vie-icon{ width: 54px; height: 54px; font-size: 28px; } #pgeml .campus-globe{ width: 64px; height: 64px; font-size: 34px; border-radius: 18px; } #pgeml .readmore{ border-radius: var(--r-lg); width: 100%; } #pgeml .program{ grid-template-columns: 1fr; grid-template-rows: none; } #pgeml .program-side{ grid-row: auto; flex-direction: row; align-items: center; gap: 14px; padding: 16px 20px; } #pgeml .program-num{ font-size: 34px; } #pgeml .program-icon{ width: 44px; height: 44px; font-size: 24px; border-radius: 12px; order: -1; } #pgeml .program-kicker{ margin-left: auto; text-align: right; } #pgeml .program-main{ padding: 22px 20px 4px; } #pgeml .program-links{ grid-template-columns: 1fr; } #pgeml .program-action{ grid-column: auto; padding: 16px 20px 22px; } #pgeml .campus-grid{ grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: 240px; } #pgeml .campus-more{ grid-column: auto; grid-template-columns: 1fr; } #pgeml .campus-grid .campus-more{ height: auto; } #pgeml .campus-grid{ grid-auto-rows: minmax(240px, auto); } #pgeml .sal-card,#pgeml .sal-unlock{ width: 270px; } #pgeml .alumnow-brand{ flex-direction: column; align-items: flex-start; gap: 10px; } #pgeml .alumni{ grid-template-columns: repeat(5, 72%); } #pgeml .videos{ grid-template-columns: 1fr; } #pgeml .mosaic{ grid-template-columns: 1fr 1fr; grid-template-rows: 240px 160px; } #pgeml .mosaic figure:first-child{ grid-row: auto; grid-column: 1 / -1; } #pgeml .timeline::before,#pgeml .timeline::after{ left: 11px; margin-left: 0; } #pgeml .tl{ grid-template-columns: 24px minmax(0, 1fr); gap: 0 16px; min-height: 0; } #pgeml .tl + .tl{ margin-top: 14px; } #pgeml .tl .tl-dot{ grid-column: 1 !important; justify-self: start; align-self: start; margin-top: 20px; } #pgeml .tl .tl-card{ grid-column: 2 !important; text-align: left !important; } #pgeml .tl-year{ font-size: 24px; } #pgeml .news-item{ grid-template-columns: 84px minmax(0, 1fr); } #pgeml .news-item img{ width: 84px; height: 64px; } #pgeml .news-item > .i{ display: none; } #pgeml .acc summary{ padding: 16px; gap: 12px; } #pgeml .acc summary .h3{ font-size: 16.5px; } #pgeml .acc-body{ padding: 0 16px 18px 16px; } #pgeml .schools{ grid-template-columns: 1fr 1fr; gap: 12px; } #pgeml .school-logo{ height: 100px; padding: 14px; } #pgeml .school-logo img{ max-height: 60px; } #pgeml .update .btn{ width: 100%; } #pgeml .site-footer .container{ flex-direction: column; align-items: flex-start; } } @media (max-width: 420px){#pgeml .program-cta{ white-space: normal; } #pgeml .hero-stats{ grid-template-columns: 1fr 1fr; } #pgeml .stat-value{ font-size: 23px; } #pgeml .schools{ grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce){html{scroll-behavior:smooth} #pgeml *,#pgeml *::before,#pgeml *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; } #pgeml .marquee{ overflow-x: auto; mask-image: none; } #pgeml .marquee-track{ animation: none !important; } #pgeml .marquee-list[aria-hidden="true"]{ display: none; } #pgeml .chart .line{ stroke-dashoffset: 0; } #pgeml .chart .pt,#pgeml .chart .lbl,#pgeml .chart .area{ opacity: 1; } #pgeml .chart .halo{ display: none; } } @media print{#pgeml .site-header,#pgeml .toc,#pgeml .progress,#pgeml .to-top,#pgeml .marquee-list[aria-hidden="true"]{ display: none !important; } #pgeml .section--dark,#pgeml .hero{ background: #fff !important; color: #000 !important; } .js #pgeml .reveal,.js #pgeml .tl .tl-card{ opacity: 1 !important; transform: none !important; } } #pgeml .pathway .icon-tile{ background: color-mix(in srgb, var(--accent) 12%, #fff); border-color: color-mix(in srgb, var(--accent) 28%, #fff); color: color-mix(in srgb, var(--accent) 78%, #000); transition: background var(--dur-fast), color var(--dur-fast); } #pgeml .pathway[aria-selected="true"] .icon-tile{ background: var(--accent); border-color: var(--accent); color: #fff; } #pgeml .hero--center{ text-align: center; } #pgeml .hero--center .hero-grid{ grid-template-columns: minmax(0, 920px); justify-content: center; } #pgeml .hero--center .hero-kicker{ justify-content: center; } #pgeml .hero--center .hero-chips{ justify-content: center; } #pgeml .hero--center .hero-intro{ margin-inline: auto; } #pgeml .hero--center .hero-stats{ text-align: left; } #pgeml .hero--center .hero-bg img{ object-position: 50% 30%; transform-origin: 50% 30%; transform: scale(1); } .js #pgeml .hero--center .hero-bg img{ animation: heroZoomC 2.4s var(--ease) forwards; } @keyframes heroZoomC{ from { transform: scale(1.08); } to { transform: scale(1); } } #pgeml .hero--center .hero-bg::after{ background: radial-gradient(ellipse 60% 56% at 50% 44%, rgba(9, 16, 30, .80) 0%, rgba(9, 16, 30, .58) 60%, rgba(9, 16, 30, .40) 100%), linear-gradient(180deg, rgba(9, 16, 30, .55) 0%, rgba(9, 16, 30, .25) 28%, rgba(9, 16, 30, .45) 62%, rgba(9, 16, 30, .95) 100%); } @media (max-width: 760px){#pgeml .hero--center .hero-bg img{ object-position: 50% 20%; transform: scale(1.05); } .js #pgeml .hero--center .hero-bg img{ animation: none; } #pgeml .hero--center .hero-bg::after{ background: linear-gradient(180deg, rgba(9, 16, 30, .62) 0%, rgba(9, 16, 30, .80) 40%, rgba(9, 16, 30, .96) 100%); } } @media (prefers-reduced-motion: reduce){.js #pgeml .hero--center .hero-bg img{ animation: none; } } @media (max-width: 1024px) and (min-width: 761px){#pgeml .vie-stat{ flex-direction: column; align-items: flex-start; gap: 14px; } } #pgeml .hero--center .hero-logo{ width: 104px; height: 104px; padding: 8px; border-radius: 22px; } #pgeml .hero--center .hero-logo img{ border-radius: 14px; } @media (max-width: 760px){#pgeml .hero--center .hero-logo{ width: 88px; height: 88px; border-radius: 20px; } } #pgeml .hero--light{ color: var(--navy-950); background: #F4F8FE; } #pgeml .hero--light .hero-bg img{ filter: saturate(.9); } #pgeml .hero--light .hero-bg::after{ background: radial-gradient(ellipse 58% 60% at 50% 44%, rgba(247, 250, 255, .93) 0%, rgba(247, 250, 255, .84) 55%, rgba(247, 250, 255, .66) 100%), linear-gradient(180deg, rgba(247, 250, 255, .55) 0%, rgba(247, 250, 255, .2) 30%, rgba(240, 244, 252, .6) 66%, #F0F4FC 100%); } #pgeml .hero--light h1{ color: var(--navy-950); } #pgeml .hero--light h1 .h1-rest{ color: var(--blue-600); } #pgeml .hero--light .hero-intro{ color: var(--text); } #pgeml .hero--light .hero-intro strong{ color: var(--navy-950); } #pgeml .hero--light .hero-chip{ background: rgba(255, 255, 255, .82); border-color: color-mix(in srgb, var(--sky-500) 28%, #fff); color: var(--navy-800); backdrop-filter: blur(6px); box-shadow: 0 6px 18px -12px rgba(24, 42, 82, .45); } #pgeml .hero--light .hero-chip .i{ color: var(--sky-500); } #pgeml .hero--light .hero-logo{ box-shadow: 0 16px 34px -14px rgba(24, 42, 82, .45); border: 1px solid var(--line); } #pgeml .hero--light .hero-stats{ background: rgba(255, 255, 255, .9); border-color: var(--line); backdrop-filter: blur(12px); box-shadow: 0 24px 50px -32px rgba(24, 42, 82, .5); } #pgeml .hero--light .stat + .stat::before{ background: var(--line); } #pgeml .hero--light .icon-tile--dark{ background: var(--sky-50); border-color: var(--sky-100); color: var(--sky-600); } #pgeml .hero--light .stat-value{ color: var(--navy-950); } #pgeml .hero--light .stat-label{ color: var(--blue-600); } #pgeml .hero--light .stat-sub{ color: var(--text-subtle); } @media (max-width: 1024px){#pgeml .hero--light .stat:nth-child(n+3){ border-top-color: var(--line); } } @media (max-width: 760px){#pgeml .hero--light .hero-bg::after{ background: linear-gradient(180deg, rgba(247, 250, 255, .78) 0%, rgba(247, 250, 255, .9) 40%, #F0F4FC 100%); } } #pgeml .hero--banner{ --band: clamp(240px, 30vw, 400px); min-height: 0; justify-content: flex-start; padding-top: calc(var(--band) - 56px); background: #F4F8FE; } #pgeml .hero--banner .hero-bg{ inset: 0 0 auto 0; height: var(--band); } #pgeml .hero--banner .hero-bg img{ filter: none; object-position: 50% 32%; } #pgeml .hero--banner .hero-bg::after{ background: linear-gradient(180deg, rgba(9, 16, 30, .18) 0%, rgba(9, 16, 30, 0) 30%, rgba(9, 16, 30, 0) 62%, rgba(244, 248, 254, .55) 86%, #F4F8FE 100%); } #pgeml .hero--banner .hero-logo{ width: 112px; height: 112px; border-radius: 26px; padding: 9px; border: 0; box-shadow: 0 0 0 6px #F4F8FE, 0 22px 40px -18px rgba(24, 42, 82, .6); } #pgeml .hero--banner .hero-logo img{ border-radius: 16px; } #pgeml .hero--banner .hero-kicker{ margin-bottom: 26px; } @media (max-width: 760px){#pgeml .hero--banner{ --band: 210px; padding-top: calc(var(--band) - 44px); } #pgeml .hero--banner .hero-bg img{ object-position: 50% 30%; transform: none; } #pgeml .hero--banner .hero-bg::after{ background: linear-gradient(180deg, rgba(9, 16, 30, .15) 0%, rgba(9, 16, 30, 0) 40%, rgba(244, 248, 254, .5) 85%, #F4F8FE 100%); } #pgeml .hero--banner .hero-logo{ width: 88px; height: 88px; border-radius: 22px; padding: 7px; } } #pgeml .programs-band{ position: relative; isolation: isolate; overflow: hidden; margin-top: 56px; padding: clamp(28px, 3.6vw, 48px); border-radius: 28px; background: radial-gradient(700px 360px at 100% 0%, rgba(44, 145, 228, .28), transparent 60%), radial-gradient(600px 340px at 0% 100%, rgba(117, 108, 225, .22), transparent 60%), var(--navy-950); } #pgeml .programs-band .h3-sub{ color: #fff; margin: 0 0 28px; } #pgeml .programs-band .programs{ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } #pgeml .programs-band .program{ display: flex; flex-direction: column; grid-template-columns: none; grid-template-rows: none; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); box-shadow: none; } #pgeml .programs-band .program:hover{ background: rgba(255, 255, 255, .08); border-color: color-mix(in srgb, var(--accent) 70%, transparent); box-shadow: 0 26px 44px -26px color-mix(in srgb, var(--accent) 60%, #000); } #pgeml .programs-band .program-side{ grid-row: auto; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 14px; padding: 26px 22px 0; background: none; } #pgeml .programs-band .program-side::after{ display: none; } #pgeml .programs-band .program-num{ font-size: 40px; color: var(--accent); order: 2; margin-left: auto; opacity: .9; } #pgeml .programs-band .program-icon{ width: 50px; height: 50px; font-size: 27px; border-radius: 14px; background: linear-gradient(145deg, var(--accent), var(--accent-deep)); border: 0; box-shadow: 0 10px 22px -12px var(--accent); } #pgeml .programs-band .program-kicker{ order: 3; flex-basis: 100%; margin: 4px 0 0; text-align: left; color: color-mix(in srgb, var(--accent) 55%, #fff); } #pgeml .programs-band .program-main{ padding: 12px 22px 4px; gap: 10px; flex: 1; } #pgeml .programs-band .program .h3{ color: #fff; font-size: 22px; line-height: 1.2; } #pgeml .programs-band .program p{ color: rgba(255, 255, 255, .74); font-size: 15px; line-height: 1.65; } #pgeml .programs-band .program-links{ grid-template-columns: 1fr; gap: 6px; } #pgeml .programs-band .program-links a{ background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); color: #fff; font-size: 13.5px; padding: 9px 11px; } #pgeml .programs-band .program-links a .i{ color: color-mix(in srgb, var(--accent) 60%, #fff); } #pgeml .programs-band .program-links a:hover{ background: rgba(255, 255, 255, .12); border-color: var(--accent); } #pgeml .programs-band .program-action{ grid-column: auto; padding: 18px 22px 24px; } #pgeml .programs-band .program .btn--solid{ background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; } #pgeml .programs-band .program--new .btn--solid,#pgeml .programs-band .program--exec .btn--solid{ background: var(--accent); border-color: var(--accent); } #pgeml .programs-band .program--new .btn--solid,#pgeml .programs-band .program--exec .btn--solid{ color: var(--navy-950); } #pgeml .programs-band .program--new .btn--solid .i,#pgeml .programs-band .program--exec .btn--solid .i{ color: var(--navy-950); } #pgeml .programs-band .program .btn--solid:hover{ background: #fff; border-color: #fff; color: var(--navy-950); } #pgeml .programs-band .program .btn--solid:hover .i{ color: var(--navy-950); } @media (max-width: 1180px){#pgeml .programs-band .programs{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px){#pgeml .programs-band{ margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); border-radius: 0; padding: 32px var(--gutter); } #pgeml .programs-band .programs{ grid-template-columns: 1fr; } #pgeml .programs-band .program-kicker{ margin-left: 0; text-align: left; } } @media (min-width: 761px){#pgeml .program-links:has(> li:nth-child(4)){ grid-template-columns: repeat(2, minmax(0, 1fr)); } } #pgeml .leaders{ display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } #pgeml .leader{ position: relative; isolation: isolate; overflow: hidden; min-height: 560px; border-radius: var(--r-xl); display: flex; align-items: flex-end; background: var(--ink-900); box-shadow: 0 30px 50px -30px rgba(12, 19, 33, .6); } #pgeml .leader-photo{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease); } #pgeml .leader:hover .leader-photo{ transform: scale(1.04); } #pgeml .leader::after{ content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(9, 16, 30, 0) 30%, rgba(9, 16, 30, .55) 55%, rgba(9, 16, 30, .94) 100%); } #pgeml .leader-body{ padding: 30px 32px 32px; display: flex; flex-direction: column; gap: 12px; color: rgba(255, 255, 255, .86); } #pgeml .leader .role{ gap: 8px; font: 700 12px/1.2 var(--f-ui); letter-spacing: 1.2px; text-transform: uppercase; align-self: flex-start; padding: 8px 14px 8px 11px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .14); backdrop-filter: blur(8px); color: #fff; border: 1px solid rgba(255, 255, 255, .22); } #pgeml .leader .h3{ color: #fff; font-size: clamp(30px, 3vw, 40px); letter-spacing: -.02em; } #pgeml .leader p{ font-size: 16px; line-height: 1.7; max-width: 52ch; } #pgeml .leader .btn{ align-self: flex-start; margin-top: 6px; } #pgeml .programs{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } #pgeml .program{ grid-template-columns: 168px minmax(0, 1fr); grid-template-rows: 1fr auto; } #pgeml .program-main{ padding: 26px 26px 4px; } #pgeml .program-links,#pgeml .program-links:has(> li:nth-child(4)){ grid-template-columns: 1fr; } #pgeml .program-action{ padding: 18px 26px 26px; } @media (max-width: 1180px){#pgeml .program{ grid-template-columns: 140px minmax(0, 1fr); } #pgeml .program-side{ padding: 22px 20px; } #pgeml .program-num{ font-size: 44px; } #pgeml .program-cta{ white-space: normal; } } @media (max-width: 1024px){#pgeml .leader{ min-height: 500px; } #pgeml .programs{ grid-template-columns: 1fr; } #pgeml .program{ grid-template-columns: 190px minmax(0, 1fr); } #pgeml .program-num{ font-size: 54px; } #pgeml .program-cta{ white-space: nowrap; } #pgeml .program-links,#pgeml .program-links:has(> li:nth-child(4)){ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px){#pgeml .leaders{ grid-template-columns: 1fr; } #pgeml .leader{ min-height: 520px; } #pgeml .leader-body{ padding: 22px 20px 24px; } #pgeml .program{ grid-template-columns: 1fr; grid-template-rows: none; } #pgeml .program-side{ padding: 16px 20px; } #pgeml .program-num{ font-size: 34px; } #pgeml .program-links,#pgeml .program-links:has(> li:nth-child(4)){ grid-template-columns: 1fr; } } @media (max-width: 420px){#pgeml .program-cta{ white-space: normal; } } #pgeml .pgeml-main{display:block}