/* ===== Studio v67 — nouveau design ===== */
@font-face{font-family:"Head";src:url(../fonts/head-400.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Head";src:url(../fonts/head-700.woff) format("woff");font-weight:700;font-display:swap}
@font-face{font-family:"Body";src:url(../fonts/body-400.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Body";src:url(../fonts/body-700.woff) format("woff");font-weight:700;font-display:swap}
:root{--ink:#102c32;--ink-2:#21434a;--paper:#f2efe6;--paper-2:#e8e4d6;--white:#fffdf8;--teal:#24796e;--teal-d:#1b5f56;--lime:#c8db88;--line:rgba(16,44,50,.16);--muted:#46605f;--on-dark:#fffdf8;--soft-dark:#d3dfd9;--serif:Georgia,'Times New Roman',serif;--sans:Arial,sans-serif;--cream:var(--paper);--dark:var(--ink);--r:10px}
.screen,.screen#maroc,.screen#senegal,.screen#quebec,.screen#projets{--serif:Georgia,'Times New Roman',serif;--sans:Arial,sans-serif}
html{scroll-padding-top:90px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 19px/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
h1,h2,h3,h4{font-family:var(--serif)!important;font-weight:700;letter-spacing:-.015em;line-height:1.08;text-wrap:balance;margin-top:0}
h2{font-size:clamp(34px,4.6vw,60px)}h3{font-size:clamp(22px,2.3vw,30px)}p,li{text-wrap:pretty}
main :is(p,li,dd,figcaption,small){color:var(--ink-2)}
a{color:var(--teal-d)}img{height:auto;max-width:100%}
.wrap{max-width:1200px;margin-inline:auto;padding-inline:clamp(20px,4vw,40px)}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:3px}
/* header */
.site-header-shell{background:rgba(242,239,230,.9)!important;backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)!important}
.logo{font:700 21px var(--serif)!important;color:var(--ink)!important;letter-spacing:.005em;text-decoration:none}.logo span{color:var(--teal-d)!important}
.links a{font:700 16px var(--sans)!important;color:var(--ink)!important;text-decoration:none}.links a:hover,.links a.is-active{box-shadow:inset 0 -4px 0 var(--lime)}
.cv-download,.nav-cta,.screen-home-link,.back,.p-home{font:700 15px var(--sans)!important;text-transform:none!important;letter-spacing:0!important;border-radius:999px!important;text-decoration:none}
.cv-download{background:var(--ink)!important;color:var(--white)!important;padding:11px 20px!important;border:2px solid var(--ink)!important}.cv-download:hover{background:var(--lime)!important;color:var(--ink)!important}
.nav-cta,.screen-home-link,.back,.p-home{background:transparent!important;color:var(--ink)!important;border:2px solid var(--ink)!important;padding:9px 16px!important}.nav-cta:hover,.screen-home-link:hover{background:var(--ink)!important;color:var(--white)!important}
.nav-projects{display:none!important}
.language-switch{border:2px solid var(--ink)!important;border-radius:999px}.language-switch button{color:var(--ink)!important;font-weight:700}.language-switch button.active{background:var(--lime)!important;color:var(--ink)!important}
.mobile-drawer{background:var(--paper)!important;color:var(--ink)!important}.mobile-drawer a{color:var(--ink)!important}.mobile-menu-trigger{color:var(--ink)!important}.mobile-menu-trigger .bars,.mobile-menu-trigger .bars::before,.mobile-menu-trigger .bars::after{background:var(--ink)!important}
/* labels */
.intro-label,.kicker,.eyebrow,.p-eyebrow,.certificate-category,.meta,.label,.company-heading small,.sub,.p-meta,.project-kicker{font:700 16px/1.3 var(--sans)!important;text-transform:none!important;letter-spacing:0!important;color:var(--teal-d);display:flex;align-items:center;gap:10px}
.intro-label::before,.kicker::before,.eyebrow::before,.p-eyebrow::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 2px var(--ink);flex:none}
/* buttons */
.pill{display:inline-flex;align-items:center;gap:8px;font:700 17px var(--sans)!important;text-transform:none!important;letter-spacing:0!important;text-decoration:none;border-radius:999px!important;padding:14px 24px!important;white-space:normal;transition:background .2s,color .2s,transform .2s}.pill:hover{transform:translateY(-2px)}
.under{font:700 17px var(--sans)!important;text-decoration:none;border-bottom:3px solid var(--lime)}
/* home hero */
body[data-page=home] .hero{background:radial-gradient(700px 420px at 85% 10%,rgba(200,219,136,.5),transparent 65%),linear-gradient(var(--line) 1px,transparent 1px) 0 0/56px 56px,linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/56px 56px,var(--paper);color:var(--ink);min-height:0;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,5vw,72px);align-items:center;padding:clamp(48px,7vw,104px) max(clamp(20px,4vw,40px),calc((100vw - 1200px)/2));overflow:visible}
body[data-page=home] .hero-copy{padding:0!important}
body[data-page=home] .hero h1{font-size:clamp(50px,7.2vw,108px);line-height:.98;letter-spacing:-.028em;color:var(--ink)!important;margin:18px 0 26px}
body[data-page=home] .hero h1 em{font-style:normal;color:var(--ink)!important;background:linear-gradient(transparent 60%,var(--lime) 60% 94%,transparent 94%) 0 0/0% 100% no-repeat;animation:mark 1s .7s cubic-bezier(.2,.7,.2,1) forwards;padding:0 .08em}
@keyframes mark{to{background-size:100% 100%}}
body[data-page=home] .hero .kicker{color:var(--teal-d)!important}
body[data-page=home] .hero-copy p{font-size:clamp(18px,1.6vw,21px);max-width:34em;color:var(--ink-2)!important}
body[data-page=home] .hero-links{gap:14px 20px;margin-top:30px}
body[data-page=home] .hero-links a.pill:not(.hero-projects){background:var(--ink);color:var(--white)!important;border:2px solid var(--ink)}
body[data-page=home] .hero-links a.pill:not(.hero-projects):hover{background:var(--lime);color:var(--ink)!important}
body[data-page=home] .hero-links a.hero-projects{background:transparent;color:var(--ink)!important;border:2px solid var(--ink)}
body[data-page=home] .hero-links a.hero-projects:hover{background:var(--ink);color:var(--white)!important}
body[data-page=home] .hero-links a.under{color:var(--ink)!important}
body[data-page=home] .hero-photo{position:relative;width:min(100%,460px);justify-self:end;margin:0;aspect-ratio:3/4;border-radius:999px 999px 20px 20px;overflow:hidden;background:var(--ink);box-shadow:18px 18px 0 var(--ink)}
body[data-page=home] .hero-photo::before{display:none!important}
body[data-page=home] .hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
body[data-page=home] .hero-photo::after{content:"";position:absolute;inset:auto 0 0;height:36%;background:linear-gradient(transparent,rgba(16,44,50,.92));pointer-events:none}
body[data-page=home] .hero-caption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 26px 24px;display:flex;flex-direction:column;gap:2px;align-items:center;text-align:center}
body[data-page=home] .hero-name{font:700 24px var(--serif);color:#fff!important}body[data-page=home] .hero-role{font:700 16px var(--sans)!important;color:var(--lime)!important;justify-content:center}body[data-page=home] .hero-role::before{display:none}
.stamp{background:var(--lime)!important;color:var(--ink)!important;font:700 12px/1.15 var(--sans)!important;z-index:3;box-shadow:0 0 0 2px var(--ink)}
/* proof */
.proof{background:var(--paper-2);color:var(--ink);border-block:1px solid var(--line)}
.proof-grid>div{border-left:1px solid var(--line)!important;padding:30px 24px!important}.proof-grid>div:first-child{border-left:0!important;padding-left:0!important}
.proof strong{color:var(--ink)!important;font:700 clamp(40px,5vw,64px)/1 var(--serif)!important}.proof span{color:var(--ink-2)!important;font-size:16px}
/* sections */
section.section,.about-me,.recruiter-snapshot,.route,.skill-strip,.certificate-section,.wrap.intro{padding-block:clamp(72px,9vw,128px)!important}
.recruiter-snapshot,.skill-strip{background:var(--white)!important}
.recruiter-card,.skill-group,.plain-card,.certificate-card,.story,.card,.p-card,.project-shot,.employers{background:var(--white);border:1px solid var(--line)!important;border-radius:var(--r)!important;box-shadow:none}
.recruiter-snapshot .recruiter-card,.skill-strip .skill-group{background:var(--paper);border-top:4px solid var(--ink)!important}
.recruiter-card>*:first-child,.skill-group h3{font:700 20px/1.25 var(--serif)!important;color:var(--ink)!important;text-transform:none!important;letter-spacing:0!important}
.skill-group li,.tags span,.skills span,.p-tags span,.p-tags li{border:1px solid var(--line)!important;background:var(--white)!important;color:var(--ink)!important;border-radius:999px!important;font:700 15px var(--sans)!important;text-transform:none!important}
@media(hover:hover){.recruiter-card,.skill-group,.plain-card,.certificate-card,.card,.p-card,.story{transition:transform .25s,border-color .25s}.recruiter-card:hover,.skill-group:hover,.plain-card:hover,.certificate-card:hover,.card:hover,.p-card:hover,.story:hover{transform:translateY(-4px);border-color:var(--teal)!important}}
.story{overflow:hidden}.story-copy{padding:clamp(24px,3vw,44px)}.story h3{font-size:clamp(26px,3vw,38px)}.story .meta{color:var(--teal-d)}.story .tags{color:var(--muted)}
.story-image,.work-memory,.memory-photo,.life-photo{border-radius:var(--r);overflow:hidden}
/* route */
.route,.quote,.contact,.footer,.p-hero,.p-end,.milestone,body:not([data-page=home]) .hero{background-color:var(--ink)}
.route h2,.route h3{color:#fff!important}.route-head p{color:var(--soft-dark)!important}
.places{position:relative;padding-top:44px}.places::before{content:"";position:absolute;left:0;right:0;top:12px;height:3px;background:repeating-linear-gradient(90deg,var(--lime) 0 14px,transparent 14px 26px);opacity:.7;animation:flow 2.4s linear infinite}@keyframes flow{to{background-position:26px 0}}
.place{border-radius:var(--r);overflow:hidden;color:#fff}.place :is(h3,strong){font:700 clamp(30px,3.4vw,44px) var(--serif)!important;color:#fff!important}.place :is(p,span,small,div){color:#fff!important;text-transform:none!important;letter-spacing:0!important}
@media(hover:hover){.place img{transition:transform .8s}.place:hover img{transform:scale(1.06)}}
.quote blockquote,.quote p:first-of-type{font:700 clamp(28px,4vw,54px)/1.14 var(--serif)!important;color:#fff!important;letter-spacing:-.012em}
/* dark surface text system */
body:not([data-page=home]) .hero,.route,.quote,.milestone,.contact,.footer,.p-hero,.p-end{color:var(--on-dark)}
body:not([data-page=home]) .hero :is(h1,h2,h3,h4,p,li,span,small,strong,em,figcaption,div,a,dt,dd,blockquote),
.route :is(h1,h2,h3,h4,p,li,span,small,strong,em,figcaption,div,a,dt,dd,blockquote),
.quote :is(h1,h2,h3,h4,p,li,span,small,strong,em,figcaption,div,a,dt,dd,blockquote),
.milestone :is(h1,h2,h3,h4,p,li,span,small,strong,em,figcaption,div,a,dt,dd,blockquote),
.contact :is(h1,h2,h3,h4,p,li,span,small,strong,em,figcaption,div,a,dt,dd,blockquote),
.footer :is(h1,h2,h3,h4,p,li,span,small,strong,em,figcaption,div,a,dt,dd,blockquote),
.p-hero :is(h1,h2,h3,h4,p,li,span,small,strong,em,figcaption,div,a,dt,dd,blockquote),
.p-end :is(h1,h2,h3,h4,p,li,span,small,strong,em,figcaption,div,a,dt,dd,blockquote){color:inherit!important}
body:not([data-page=home]) .hero :is(.eyebrow,.p-eyebrow,.intro-label,.label,.index,.num,.kicker,.p-number),
.route :is(.eyebrow,.p-eyebrow,.intro-label,.label,.index,.num,.kicker,.p-number),
.quote :is(.eyebrow,.p-eyebrow,.intro-label,.label,.index,.num,.kicker,.p-number),
.milestone :is(.eyebrow,.p-eyebrow,.intro-label,.label,.index,.num,.kicker,.p-number),
.contact :is(.eyebrow,.p-eyebrow,.intro-label,.label,.index,.num,.kicker,.p-number),
.footer :is(.eyebrow,.p-eyebrow,.intro-label,.label,.index,.num,.kicker,.p-number),
.p-hero :is(.eyebrow,.p-eyebrow,.intro-label,.label,.index,.num,.kicker,.p-number),
.p-end :is(.eyebrow,.p-eyebrow,.intro-label,.label,.index,.num,.kicker,.p-number){color:var(--lime)!important}
.milestone{border:1px solid rgba(255,255,255,.14)!important;border-radius:var(--r)!important}.milestone p{color:var(--soft-dark)!important}
.hero-links a.pill{}
/* subpage hero */
body:not([data-page=home]) .hero{min-height:clamp(380px,52vw,520px)}body:not([data-page=home]) .hero h1{font-size:clamp(56px,9vw,112px);color:#fff!important;line-height:.98}
.p-hero{padding-block:clamp(56px,8vw,110px)}.p-title{font-size:clamp(40px,6vw,84px)!important;color:#fff!important}.p-title em{font-style:normal;color:var(--lime)!important}
.p-stat strong,.p-stat b{font-family:var(--serif)!important;color:var(--lime)!important}
.p-card{padding:clamp(22px,3vw,34px)}.p-number{color:var(--teal-d)!important}.p-result{border-left:4px solid var(--lime);padding-left:14px;color:var(--ink)!important}
.project-highlight{background:var(--white);border:1px solid var(--line);border-left:6px solid var(--lime);border-radius:var(--r);padding:clamp(22px,3vw,40px)}
.partners{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,3vw,34px)}
/* certificates */
.certificate-card img{background:var(--paper-2);border-radius:8px 8px 0 0}.certificate-open,.certificate-jump{font-weight:700;color:var(--teal-d)!important}
/* contact */
.contact{border-radius:20px;padding:clamp(32px,5vw,64px)}.contact h2{font-size:clamp(36px,5vw,64px)}
.contact a,.contact .copy-mail{display:inline-flex;font:700 16px var(--sans)!important;border-radius:999px!important;padding:13px 22px!important;text-decoration:none;margin:6px 8px 6px 0;border:2px solid var(--lime)!important;background:var(--lime)!important;color:var(--ink)!important;cursor:pointer}
.contact .copy-mail{background:transparent!important;color:#fff!important;border-color:#fff!important}.contact a:hover{background:#fff!important;border-color:#fff!important}
/* footer */
.footer{color:var(--soft-dark);padding-block:36px;font-size:16px}.footer a{color:#fff!important;text-decoration:underline}.footer .cv-download{background:var(--lime)!important;color:var(--ink)!important;border-color:var(--lime)!important;text-decoration:none}
/* nav aids */
.skip-link{position:absolute;left:12px;top:-60px;z-index:500;background:var(--ink);color:#fff;padding:12px 16px;font-weight:700;text-decoration:none}.skip-link:focus{top:10px}
.progress{position:fixed;left:0;top:0;height:4px;width:100%;background:var(--teal);transform:scaleX(0);transform-origin:0 50%;z-index:600;pointer-events:none}
.to-top{position:fixed;right:18px;bottom:18px;z-index:300;width:48px;height:48px;border:2px solid var(--ink);border-radius:50%;background:var(--lime);color:var(--ink);font-size:20px;font-weight:700;cursor:pointer;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .2s,transform .2s}.to-top.on{opacity:1;transform:none;pointer-events:auto}
.crumbs{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding-block:16px;font-size:15px;background:var(--paper);color:var(--ink-2)}.crumbs a{color:var(--ink)!important;font-weight:700}.crumbs [aria-current]{font-weight:700;color:var(--ink)}
.chapter-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-block:56px}.chapter-nav a{display:flex;flex-direction:column;gap:6px;padding:24px;border:1px solid var(--line);border-radius:var(--r);background:var(--white);color:var(--ink)!important;text-decoration:none;transition:border-color .2s,transform .2s}.chapter-nav a:hover{border-color:var(--teal);transform:translateY(-3px)}.chapter-nav small{color:var(--muted)!important;font-size:15px}.chapter-nav strong{font:700 24px/1.2 var(--serif);color:var(--ink)}.chapter-nav .next{text-align:right;grid-column:2}.chapter-nav .prev{grid-column:1}
.copy-status{position:absolute;left:-9999px}.notfound{min-height:60vh;display:grid;place-content:center;gap:16px;text-align:center;padding:80px 20px}
@media(max-width:900px){body{font-size:18px}body[data-page=home] .hero{grid-template-columns:1fr}body[data-page=home] .hero-photo{justify-self:center;width:min(86%,380px);box-shadow:12px 12px 0 var(--ink)}.chapter-nav{grid-template-columns:1fr}.chapter-nav .next,.chapter-nav .prev{grid-column:1;text-align:left}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}body[data-page=home] .hero h1 em{background-size:100% 100%}}
@media print{.progress,.to-top,.skip-link,.chapter-nav{display:none}}
.proof-grid{display:grid;grid-template-columns:repeat(4,1fr)}.proof-grid>div{display:flex;flex-direction:column;gap:6px}
@media(max-width:720px){.proof-grid{grid-template-columns:1fr 1fr}.proof-grid>div:nth-child(odd){border-left:0!important;padding-left:0!important}.proof-grid>div:nth-child(n+3){border-top:1px solid var(--line)}}
body[data-page=home] .hero h1 em{background-image:linear-gradient(transparent 50%,var(--lime) 50% 86%,transparent 86%)}
body[data-page=home] .hero-photo{box-shadow:none;outline:2px solid var(--ink);outline-offset:12px}
body[data-page=home] .hero-caption{border:0!important;background:none!important}
@media(max-width:900px){body[data-page=home] .hero-photo{box-shadow:none;outline-offset:8px;margin-block:10px}}
.mobile-menu-trigger .bars,.mobile-menu-trigger .bars::before,.mobile-menu-trigger .bars::after{background:transparent!important}
.mobile-menu-trigger{border:2px solid var(--ink)!important;border-radius:999px!important;background:transparent!important;color:var(--ink)!important;padding:11px 13px!important}
.mobile-menu-trigger .bars i{background:var(--ink)!important;width:18px;height:2px}
