/* The six vocations, imagined as a constellation of possibilities. */
.formations-section{width:min(1328px,calc(100% - 36px));margin:64px auto 38px;padding:66px 44px 46px;border:1px solid #c5a05066;border-radius:28px;background-color:#122640;background-image:radial-gradient(ellipse at 5% 0,#476c715c,transparent 52%),radial-gradient(ellipse at 100% 100%,#42619047,transparent 55%);color:#f5f7fa;position:relative;isolation:isolate;overflow:hidden;scroll-margin-top:114px;box-shadow:0 20px 60px #14294c0c}
.formations-section:before{inset:0;width:auto;height:auto;background:url('/assets/zellige.svg') 0 0/155px;opacity:.09;mask-image:linear-gradient(135deg,#000,transparent 72%);z-index:-1}
.formations-section:after{content:'';position:absolute;inset:auto -45px -60px auto;width:560px;height:450px;background:url('/assets/science-network.svg') center/contain no-repeat;opacity:.15;z-index:-1;pointer-events:none}
.formations-section .section-heading{position:relative;gap:42px;align-items:center;margin-bottom:40px}
.formations-section .section-heading>div{min-width:0;flex:1}
.formations-section .section-heading h2{font-size:clamp(34px,3.5vw,48px);font-weight:500;line-height:1.16;color:#f8fafc;letter-spacing:-.045em}
.formations-section .section-heading h2 em{display:inline-block;color:#e8cf95;font-size:1.14em;line-height:1.15;text-shadow:0 0 32px #e8cf9515}
.formations-section .section-heading>.eyebrow,.formations-section .section-heading>div>.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:9px;letter-spacing:.17em;color:#e8cf95;padding:6px 11px;border:1px solid #d2b67444;border-radius:20px;background:#ffffff05;margin-bottom:22px}
.formations-section .section-heading .eyebrow:before{content:'✦';width:auto;height:auto;background:none;font-size:13px;line-height:1;color:#e8cf95}
.formations-section .section-heading>p{color:#bdccdc;max-width:345px;font-size:14px;line-height:1.9;margin:0;padding-inline-start:22px;border-inline-start:1px solid #d9c28b55;flex:0 1 345px}
.formations-section .course-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;position:relative}
.formations-section .course-card,.formations-section .course-card:nth-last-child(-n+2),.formations-section .course-card:last-child{grid-column:auto}
.formations-section .course-card{--course-accent:#e8cf95;--course-glow:232,207,149;background:linear-gradient(155deg,#ffffff0d,#ffffff03);border:1px solid #d8e4f12d;border-radius:20px;box-shadow:0 8px 25px #040e1b14;isolation:isolate;position:relative;overflow:hidden;transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
.formations-section .course-card:nth-child(3n+2){--course-accent:#9cd4c7;--course-glow:156,212,199}
.formations-section .course-card:nth-child(3n){--course-accent:#afc9f2;--course-glow:175,201,242}
.formations-section .course-card:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% -10%,rgba(var(--course-glow),.14),transparent 66%);pointer-events:none;z-index:-1}
.formations-section .course-card:hover,.formations-section .course-card:focus-within{border-color:rgba(var(--course-glow),.65);box-shadow:0 15px 40px #030d1b30,0 0 28px rgba(var(--course-glow),.07);transform:translateY(-6px)}
.formations-section .course-icon-link{min-height:150px;padding:28px 24px 9px;justify-content:center;background:transparent;position:relative;color:var(--course-accent)}
.formations-section .course-icon-link:after{inset:0;width:auto;height:auto;background:url('/assets/science-network.svg') 75% 15%/360px no-repeat;opacity:.15;mask-image:none;z-index:-1}
.formations-section .course-index{position:absolute;inset-block-start:19px;inset-inline-end:21px;margin:0;align-self:auto;font-family:Lato,Arial,sans-serif;font-style:normal;font-size:11px;line-height:1;letter-spacing:.12em;color:#aebfd2;border:1px solid #ffffff20;border-radius:20px;padding:6px 8px;background:#ffffff03}
.formations-section .course-icon,.formations-section .course-card:nth-child(2n) .course-icon{width:84px;height:84px;border-radius:50%;border:1px solid rgba(var(--course-glow),.48);background:radial-gradient(circle at 30% 20%,rgba(var(--course-glow),.16),rgba(var(--course-glow),.035));color:var(--course-accent);box-shadow:0 0 30px rgba(var(--course-glow),.1),inset 0 0 20px rgba(var(--course-glow),.04);position:relative;transform:none;transition:box-shadow .3s ease}
.formations-section .course-icon:before{content:'';position:absolute;inset:-9px;border:1px dashed rgba(var(--course-glow),.23);border-radius:50%;pointer-events:none}
.formations-section .course-icon:after{content:'✦';position:absolute;inset-block-start:-15px;inset-inline-end:-13px;font-family:Georgia,serif;font-size:19px;color:var(--course-accent);text-shadow:0 0 16px rgba(var(--course-glow),.45);pointer-events:none}
.formations-section .course-icon svg{width:51px;height:51px;stroke-width:2;position:relative}
.formations-section .course-copy{padding:16px 25px 25px;text-align:center;position:relative}
.formations-section .course-copy .eyebrow{display:block;color:var(--course-accent);font-size:8px;line-height:1.8;letter-spacing:.14em;margin:0 0 11px;min-height:15px;opacity:.82}
.formations-section .course-copy .eyebrow:before{display:none}
.formations-section .course-copy h3{color:#f4f7fc;font-size:23px;line-height:1.35;min-height:62px;margin:0 auto 14px;max-width:20ch;letter-spacing:-.035em;font-weight:500}
.formations-section .course-description{color:#bfcddd;font-size:13px;line-height:1.85;margin:0 0 23px;max-width:none}
.formations-section .course-copy .text-link{color:#edf3fa;border:1px solid #d7e5f022;background:#ffffff05;border-radius:9px;padding:10px 11px 10px 14px;min-height:46px;font-size:10px;line-height:1.5;gap:12px;text-align:start;transition:background .2s,border-color .2s}
.formations-section .text-link>span{display:grid;place-items:center;flex:0 0 27px;width:27px;height:27px;border-radius:50%;background:var(--course-accent);color:#122640;font-size:18px;line-height:1}
.formations-section .course-card:hover .text-link,.formations-section .course-card:focus-within .text-link{background:rgba(var(--course-glow),.09);border-color:rgba(var(--course-glow),.4)}
.formations-section a:focus-visible{outline:2px solid var(--course-accent,#e8cf95);outline-offset:4px}
html[lang=ar] .formations-section .section-heading h2{font-size:41px;line-height:1.65;letter-spacing:0}
html[lang=ar] .formations-section .section-heading h2 em{font-size:1.05em;line-height:1.6}
html[lang=ar] .formations-section .section-heading .eyebrow{font-size:11px;letter-spacing:0}
html[lang=ar] .formations-section .section-heading>p{font-size:15px}
html[lang=ar] .formations-section .course-copy .eyebrow{font-size:11px;letter-spacing:0}
html[lang=ar] .formations-section .course-copy h3{font-size:25px;line-height:1.65;min-height:83px;letter-spacing:0}
html[lang=ar] .formations-section .course-description{font-size:14px;line-height:1.95}
html[lang=ar] .formations-section .course-copy .text-link{font-size:12px}
@keyframes vocation-float{0%,100%{translate:0 0}50%{translate:0 -4px}}
@media(prefers-reduced-motion:no-preference) and (hover:hover){.formations-section .course-icon{animation:vocation-float 7s ease-in-out infinite}.formations-section .course-card:nth-child(2n) .course-icon{animation-delay:-2s}.formations-section .course-card:nth-child(3n) .course-icon{animation-delay:-4s}}
@media(prefers-reduced-motion:reduce){.formations-section .course-card,.formations-section .course-icon,.formations-section .text-link{transition:none}.formations-section .course-card:hover,.formations-section .course-card:focus-within{transform:none}}
@media(max-width:1100px){.formations-section{padding:52px 30px 34px}.formations-section .section-heading{gap:30px}.formations-section .section-heading>p{max-width:300px;flex-basis:300px}.formations-section .course-grid{gap:16px}.formations-section .course-copy{padding:14px 20px 20px}.formations-section .course-copy h3{font-size:20px;min-height:54px}.formations-section .course-description{font-size:12px}html[lang=ar] .formations-section .section-heading h2{font-size:36px}html[lang=ar] .formations-section .course-copy h3{font-size:23px}}
@media(max-width:800px){.formations-section{width:calc(100% - 32px);margin-top:44px;margin-bottom:28px;padding:42px 26px 28px;border-radius:24px;scroll-margin-top:100px}.formations-section .section-heading{display:block;margin-bottom:32px}.formations-section .section-heading h2{font-size:38px}.formations-section .section-heading>p{max-width:510px;margin-top:23px;font-size:14px;padding-inline-start:16px}.formations-section .course-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.formations-section .course-icon-link{min-height:137px;padding-top:25px}.formations-section .course-icon,.formations-section .course-card:nth-child(2n) .course-icon{width:76px;height:76px}.formations-section .course-icon svg{width:47px;height:47px}.formations-section .course-copy{padding:15px 20px 20px}.formations-section .course-copy h3{font-size:21px;min-height:57px}.formations-section .course-description{font-size:13px}html[lang=ar] .formations-section .section-heading h2{font-size:35px}html[lang=ar] .formations-section .course-copy h3{font-size:24px;min-height:80px}}
@media(max-width:600px){.formations-section{width:calc(100% - 24px);padding:35px 18px 20px;border-radius:20px;margin-top:35px}.formations-section:after{width:340px;height:330px;inset:auto -65px -35px auto}.formations-section .section-heading{margin-bottom:27px;padding:0 3px}.formations-section .section-heading h2{font-size:34px;line-height:1.18}.formations-section .section-heading>div>.eyebrow{font-size:8px;margin-bottom:18px}.formations-section .section-heading>p{font-size:13px;line-height:1.85;margin-top:21px}.formations-section .course-grid{grid-template-columns:1fr;gap:15px}.formations-section .course-card{border-radius:17px}.formations-section .course-icon-link{min-height:121px;padding:24px 22px 5px}.formations-section .course-icon,.formations-section .course-card:nth-child(2n) .course-icon{width:70px;height:70px}.formations-section .course-icon svg{width:43px;height:43px}.formations-section .course-copy{padding:15px 22px 22px}.formations-section .course-copy .eyebrow{font-size:8px;margin-bottom:10px}.formations-section .course-copy h3{font-size:23px;min-height:0;line-height:1.35;max-width:19ch;margin-bottom:12px}.formations-section .course-description{font-size:13px;line-height:1.9;margin-bottom:19px}.formations-section .course-copy .text-link{font-size:11px;padding:10px 12px;min-height:46px}.formations-section .course-index{inset-block-start:16px;inset-inline-end:16px;font-size:10px}.formations-section .course-icon:after{font-size:17px}html[lang=ar] .formations-section .section-heading h2{font-size:30px;line-height:1.75}html[lang=ar] .formations-section .section-heading>div>.eyebrow{font-size:11px}html[lang=ar] .formations-section .section-heading>p{font-size:14px}html[lang=ar] .formations-section .course-copy .eyebrow{font-size:11px}html[lang=ar] .formations-section .course-copy h3{font-size:25px;min-height:0;line-height:1.7}html[lang=ar] .formations-section .course-description{font-size:14px}html[lang=ar] .formations-section .course-copy .text-link{font-size:12px}}