/* Two identities, one association: green foundations, laterite project. */
/* Official yellow from Charte graphique associative.docx. */
:root{--yellow:#e0a82e}
body.association-page{background:var(--forest)}
body.elan-page{background:var(--laterite)}
main{overflow:hidden}
h1,h2,h3,h1 em,h2 em{border:0;text-decoration:none;background-image:none}
h1::before,h1::after,h2::before,h2::after,h3::before,h3::after,nav a::after{content:none!important}
h1 em,h2 em{font-family:var(--sans);font-style:normal;font-weight:700;letter-spacing:normal}
nav a{padding:12px 16px;border-radius:30px;transition:background-color .2s,color .2s}
nav a[aria-current="page"]{text-decoration:none;background:var(--forest);color:var(--cream)}
.elan-page nav a[aria-current="page"]{background:var(--laterite)}
.header .nav-contact{background:transparent;border:0;color:var(--forest)}
.header .nav-contact:hover{background:var(--yellow);color:var(--forest)}
nav a:hover{background:#f1e8d5;color:var(--forest)}
.hero{position:relative;isolation:isolate;padding-block:90px 100px;gap:64px}
.hero::before{content:"";position:absolute;z-index:-1;right:-55px;top:45px;width:43%;height:85%;max-height:500px;background:var(--yellow);border-radius:48% 52% 16% 84% / 36% 33% 67% 64%;transform:rotate(-9deg)}
.hero-photo{position:relative;transform:rotate(2deg)}
.hero-photo img{border-radius:80px 12px 80px 12px;box-shadow:0 20px 40px #122b2526}
.hero h1{font-weight:700;letter-spacing:normal;font-size:clamp(42px,4.8vw,68px)}
.hero h1 em{color:var(--yellow)}
.hero .eyebrow{color:var(--yellow)}
.hero .button-green{background:var(--yellow);border:0;color:#173d2e}
.hero .text-link{border:0}
.association{border-radius:0 80px 0 0;gap:60px;padding:60px;align-items:start}
.association .people-photo img{border-radius:120px 120px 12px 12px;aspect-ratio:4/5;object-position:center}
.association .section-main h2{font-size:clamp(32px,3.2vw,45px);font-weight:700}
.statutory-facts{display:grid;gap:20px;margin:28px 0 32px;font-size:15px}
.statutory-facts dt{font-weight:700;margin-bottom:5px;color:var(--forest)}
.statutory-facts dd{margin:0;line-height:1.6;color:var(--muted)}
.team-details{border:0;background:#ececda;padding:0 20px;border-radius:16px}
.team-list>div{border:0;padding-block:10px}
.engagements{background:var(--yellow);position:relative}
.engagements .section-heading{grid-template-columns:1fr;max-width:850px;gap:0}
.engagements h2{font-weight:700}.engagement-intro{color:var(--ink);max-width:680px}
.commitments,.commitment+.commitment,.commitment{border:0}
.commitment-icon{display:none}.commitment-number{font-size:14px;font-weight:700}
.commitment h3{font-weight:700}
.association-page .participate{background:var(--forest)}
.participation{border-radius:28px 4px 28px 4px}
.association-page .contact{background:#153a2b}
.elan-page .hero h1{font-size:clamp(50px,6vw,86px)}
.elan-page .hero h1 em{font-size:.65em;line-height:1.05;display:block;margin-top:12px}
.elan-page .hero::before{content:none}
.elan-page .hero-photo{isolation:isolate;transform:none;margin-block:clamp(50px,6vw,90px);width:90%;justify-self:center}
.elan-page .hero-photo::before{content:"";position:absolute;pointer-events:none;z-index:-1;left:50%;top:50%;width:128%;aspect-ratio:6/5;background:url("assets/elan-forme-arrondie.svg") center/contain no-repeat;transform:translate(-50%,-50%) rotate(-6deg)}
.elan-page .hero-photo img{border-radius:42px;transform:rotate(2deg)}
.elan-page .hero .eyebrow,.elan-page .project-team .eyebrow{color:var(--cream)}
.elan-intro{border-radius:70px 0 70px 0;position:relative;padding:60px}
.elan-intro h2{font-weight:700}
.elan-axes{background:var(--cream)}
.elan-axes h2{font-weight:700}
.elan-grid{display:flex;flex-direction:column;gap:0}
.elan-card{display:grid;grid-template-columns:minmax(220px,.85fr) minmax(0,1.15fr);column-gap:70px;padding:42px 0;border-radius:0;background:transparent}
.elan-card+.elan-card{border-top:1px solid #e5d9c6}
.elan-card .eyebrow{grid-column:1;grid-row:1;color:var(--laterite)}
.elan-card h3{grid-column:1;grid-row:2 / span 3;font-size:clamp(28px,3vw,43px);font-weight:700;max-width:390px}
.elan-card>p:not(.eyebrow),.elan-card ul{grid-column:2;margin-top:0}
.elan-card ul{margin-bottom:0}
.elan-note{background:var(--yellow);padding:28px 34px;border-radius:0 40px 0 40px;color:var(--ink);max-width:none}
.project-team{display:grid;grid-template-columns:1fr 1.1fr;gap:70px;color:var(--cream);padding-block:80px}
.project-team .eyebrow{color:var(--yellow)}
.project-team h2{font-weight:700;font-size:clamp(32px,3.5vw,48px)}
.team-heading>p:last-child{font-size:17px;line-height:1.8;max-width:430px}
.project-roles{margin:0;background:var(--cream);color:var(--ink);border-radius:50px 0 50px 0;padding:38px}
.project-roles>div+div{margin-top:26px}
.project-roles dt{font-size:19px;font-weight:700;margin-bottom:8px}
.project-roles dd{margin:0;line-height:1.7;color:var(--muted)}
.project-access{background:var(--yellow);padding-block:65px}
.project-access h2{font-weight:700}.access-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin-top:36px}
.access-grid h3{font-size:23px;font-weight:700}.access-grid p{line-height:1.75}
.email-link,.footer-info{border:0;text-decoration:none}
.footer a:hover,.photo-notice a:hover{text-decoration:underline}
@view-transition{navigation:auto}
@keyframes page-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes page-leave{to{opacity:0;transform:translateY(-8px)}}
::view-transition-old(root){animation:page-leave .18s ease both}
::view-transition-new(root){animation:page-enter .32s ease both}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}.hero-copy{animation:page-enter .5s ease both}}
@media(max-width:1100px){nav{gap:4px}nav a{padding-inline:12px}.hero{gap:40px}.association{padding:36px;gap:36px}.project-team{gap:35px}}
@media(max-width:960px){nav a{border-radius:12px;padding:14px 16px}.elan-card{column-gap:35px}.project-team{grid-template-columns:1fr}.team-heading>p:last-child{max-width:700px}}
@media(max-width:820px){.hero{padding-block:50px 65px}.hero::before{top:auto;bottom:25px;right:-25px;width:80%;height:45%}.hero-photo{max-width:620px;justify-self:center;width:95%}.association{padding:32px}.association .people-photo img{aspect-ratio:3/2;border-radius:70px 10px 70px 10px}.access-grid{grid-template-columns:1fr;gap:20px}}
@media(max-width:640px){.hero{gap:32px}.hero h1{font-size:clamp(36px,9.2vw,52px)}.hero-photo img{border-radius:50px 8px 50px 8px}.association{padding:28px 22px;border-radius:0 45px 0 0}.elan-intro{padding:30px 24px;border-radius:40px 0 40px 0}.elan-card{display:block;padding-block:30px}.elan-card h3{margin-bottom:22px}.elan-note{padding:25px}.project-roles{padding:28px}.project-team{padding-block:55px}.project-access{padding-block:50px}}
@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}html{scroll-behavior:auto}}
@media(max-width:820px){.elan-page .hero-photo{width:84%;margin-block:clamp(45px,10vw,80px)}.elan-page .hero-photo::before{width:130%}}
@media(max-width:640px){.elan-page .hero-photo img{border-radius:30px}.elan-page .hero{padding-bottom:48px}}

/* Brand charter: official palette, editorial typography, logo protection. */
:root{--forest:#1f4d3a;--deep:#1f4d3a;--laterite:#b5532a;--laterite-deep:#1f4d3a;--orange:#b5532a;--gold:#e0a82e;--yellow:#e0a82e;--cream:#faf7f0;--ink:#1a1a1a;--muted:#4a4a4a}
body{font-family:var(--serif);font-size:18px;color:var(--ink)}
h1,h2,h3,h1 em,h2 em,nav,button,.button,.eyebrow,.action-link,.text-link,.participation-label,dt,.back-top,.footer-info,.team-details summary{font-family:var(--sans)}
h1,h2,h3{font-weight:700}
.association h2,.engagements h2,.elan-intro h2,.elan-axes h2,.project-access h2,dialog h2{color:var(--forest)}
.elan-card h3,.access-grid h3,.project-roles dt{color:var(--forest)}
.hero h1 em,.hero .eyebrow,.participate .eyebrow,.project-team .eyebrow,.contact h2 em{color:var(--cream)}
.hero .button-green{background:var(--cream);color:var(--forest)}
.hero .button-green:hover{background:var(--yellow)}
.hero .text-link:hover{color:var(--cream)}
.engagements,.project-access{background:var(--cream)}
.elan-note{background:var(--forest);color:var(--cream)}
.team-details{background:var(--cream)}
.association-page .contact,.contact{background:var(--forest)}
.project-team{width:100%;max-width:none;background:var(--forest);padding-inline:max(48px,calc((100% - 1264px)/2))}
.commitment p,.engagement-intro,.elan-card p,.elan-card ul,.project-roles dd,.statutory-facts dd,.association .section-main>p,.participation p,.access-grid p{color:var(--ink)}
.header,.footer{background:#fff}
.header{height:136px}
.brand,.header .brand,.footer .brand{width:168px;padding:24px;background:#fff;flex-shrink:0}
.brand img,.header .brand img,.footer .brand img{width:120px;height:auto;aspect-ratio:1307/924;object-fit:contain;mix-blend-mode:normal;filter:none;box-shadow:none;transform:none}
.nav-wrap{gap:24px}
.photo-notice{background:var(--cream)}
html{scroll-padding-top:156px}
::selection{background:var(--yellow);color:var(--ink)}
.email-link{font-family:var(--sans)}
@media(max-width:960px){nav{top:135px}.header{height:136px}.nav-wrap{gap:16px}.project-team{padding-inline:24px}}
@media(max-width:640px){.project-team{padding-inline:20px}.hero-intro,.engagement-intro{font-size:18px}.elan-card p,.elan-card li,.access-grid p,.project-roles dd{font-size:17px}.header .brand{width:168px}}
@media(max-width:960px){html:not(.js) .header{height:auto}}
.legal-page{background:var(--cream);padding:50px;margin-block:40px;border-radius:24px}
.legal-page h1{font-size:clamp(34px,5vw,56px);color:var(--forest)}
.legal-page h2{font-size:28px;color:var(--forest);margin-bottom:20px}
.legal-page section{margin-block:40px;max-width:850px}
.legal-page a{overflow-wrap:anywhere}
@media(max-width:640px){.legal-page{padding:28px 22px}.legal-page h2{font-size:25px}}

/* Keep the rounded yellow star behind the children on the ÉLAN page. */
.hero::before{content:none!important}

/* Mobile readability and simpler editorial presentation. */
h1,h2,h3,h1 em,h2 em,.project-roles dt{word-spacing:.04em}
.elan-card h3{grid-row:1 / span 3;margin-top:0}
.elan-card,.elan-card+.elan-card,.commitment,.commitment+.commitment,.participation,.participation .action-link{border:0}
.association .people-photo img{aspect-ratio:3/2;border-radius:60px 12px 60px 12px}
@media(max-width:960px){
 .header{height:88px}
 .header .brand{width:100px;padding:8px}
 .header .brand img{width:84px;height:auto}
 nav{top:87px;max-height:calc(100dvh - 88px);overflow-y:auto}
 html{scroll-padding-top:108px}
}