:root{--navy:#061f42;--red:#ed2532;--paper:#f2f8fc;--blue:#087af0;--teal:#00b99f;--gold:#d9a72e}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--navy);background:var(--paper)}a{color:inherit;text-decoration:none}button{font:inherit}img{display:block;max-width:100%}::selection{background:#ef3340;color:white}:focus-visible{outline:3px solid #ed2532;outline-offset:4px}.skip{position:absolute;z-index:100;left:1rem;top:-6rem;background:white;padding:1rem}.skip:focus{top:1rem}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.header{position:absolute;z-index:5;top:0;left:0;width:100%;display:flex;align-items:center;justify-content:space-between;padding:24px 6.5%}.brand{display:inline-flex;align-items:center;gap:12px}.brand img{object-fit:contain;width:55px;height:70px}.brand strong{display:block;font-size:clamp(1rem,2vw,1.5rem);letter-spacing:-.035em}.brand em{font-style:normal;color:var(--red)}.brand small{display:block;font-size:.61rem;letter-spacing:.16em;margin-top:3px}.header nav{display:flex;gap:32px;font-weight:bold;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em}.header nav a:hover{text-decoration:underline;text-underline-offset:6px}.menu-toggle,.mobile-menu{display:none}.hero{position:relative;min-height:650px;height:min(75vw,760px);overflow:hidden;background:#edf4f8}.hero-photo{position:absolute;inset:0;background-image:linear-gradient(90deg,#f8f8f6 0%,rgba(248,248,246,.92) 23%,rgba(248,248,246,.18) 55%,rgba(4,24,48,.05) 100%),url('assets/hero.webp');background-size:cover;background-position:center, right center}.hero-content{position:relative;z-index:1;padding:190px 6.5% 120px}.eyebrow{text-transform:uppercase;font-size:.72rem;font-weight:700;letter-spacing:.18em;display:flex;align-items:center;gap:12px}.eyebrow:before{content:'';width:25px;height:2px;background:var(--red)}h1{font-size:clamp(3.5rem,6.4vw,6rem);line-height:.94;letter-spacing:-.04em;margin:22px 0 48px}h1 span{color:var(--red)}.discover{display:inline-flex;align-items:center;gap:14px;text-transform:uppercase;font-size:.65rem;letter-spacing:.14em;line-height:1.5;font-weight:bold}.circle,.arrow{display:grid;place-items:center;border:1px solid currentColor;border-radius:50%;width:43px;height:43px;font-size:1.4rem;font-weight:normal;transition:transform .25s}.discover:hover .circle{transform:translateY(4px)}.hero-signature{position:absolute;right:6%;bottom:100px;color:white;font:italic 2rem/1.05 Georgia,serif;transform:rotate(-9deg);text-shadow:0 2px 12px #10273f}.wave{position:absolute;bottom:-1px;left:0;width:100%;height:65px;fill:var(--paper)}.initiatives{position:relative;padding:0 4% 26px}.cards{max-width:1440px;margin:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.card{position:relative;display:block;min-height:350px;border-radius:13px;overflow:hidden;background:#102849;color:white;box-shadow:0 8px 18px #10284924;isolation:isolate}.card > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}.card:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 15%,rgba(2,15,30,.88) 100%);z-index:-0}.card:hover > img{transform:scale(1.045)}.card:before{content:'';position:absolute;z-index:2;bottom:0;left:0;width:34%;height:6px;border-radius:0 8px 0 0;background:var(--accent)}.school{--accent:var(--red)}.university{--accent:var(--blue)}.hospital{--accent:var(--teal)}.other{--accent:var(--gold)}.card-content{position:absolute;z-index:1;left:24px;right:20px;bottom:24px}.badge{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:var(--accent);border:3px solid #ffffff80;font-size:1.4rem;font-weight:bold;margin-bottom:12px}.card h3{font-size:clamp(1.15rem,1.7vw,1.65rem);line-height:1.08;letter-spacing:-.03em;margin:0;padding-right:38px}.arrow{position:absolute;right:0;bottom:0;font-size:1.2rem}.card:hover .arrow{transform:translateX(4px)}.status{display:inline-block;margin-top:8px;padding:5px 10px;border-radius:20px;background:#b7eaf5;color:#073765;font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;font-weight:bold}.impact{overflow:hidden}.impact-scene{position:relative;height:300px;background:linear-gradient(180deg,#ffffff44,transparent 35%),url('assets/panorama.webp') center/cover}.impact-scene h2{position:absolute;left:5%;top:16px;margin:0;font:italic 1.75rem/1.15 Georgia,serif;transform:rotate(-4deg);text-shadow:0 1px 8px white}.impact-label{position:absolute;right:6%;top:55px;font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;font-weight:bold;background:#f5f8f5d9;padding:12px 18px;border-radius:30px}.gallery{position:relative;padding:0 6% 25px;background:var(--paper)}.gallery img{width:100%;max-width:1200px;height:auto;min-height:80px;object-fit:cover;margin:-20px auto 0;position:relative;border-radius:12px;box-shadow:0 8px 25px #0a264321}footer{background:#061f42;color:#e2edf7;padding:55px 6.5% 45px}.footer-inner{max-width:1400px;margin:auto;display:flex;justify-content:space-between;align-items:end;gap:30px}.footer-brand img{width:45px;height:60px}.footer-brand strong{font-size:1.15rem}.footer-brand small{font-size:.5rem}.footer-inner p{font-size:.75rem;color:#c7d8eb}.footer-motto{letter-spacing:.14em}.footer-motto:before{content:'';display:inline-block;width:35px;height:2px;background:var(--red);vertical-align:middle;margin-right:14px}@media(max-width:800px){.header{padding:18px 5%}.header nav{display:none}.menu-toggle{display:flex;width:46px;height:46px;border:0;border-radius:50%;background:white;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer}.menu-toggle span{width:17px;height:2px;background:var(--navy)}.mobile-menu:not([hidden]){display:flex;position:absolute;right:5%;top:75px;flex-direction:column;gap:16px;background:white;padding:22px;border-radius:12px;box-shadow:0 10px 30px #061f4230;font-weight:bold}.hero{height:700px;min-height:0}.hero-photo{background-position:center,65% center}.hero-content{padding:180px 6% 100px}.hero-signature{font-size:1.5rem;bottom:90px}.cards{grid-template-columns:repeat(2,1fr)}.card{min-height:320px}.impact-scene{height:260px}}@media(max-width:480px){.brand img{width:42px;height:55px}.brand strong{font-size:1rem}.brand small{font-size:.45rem}.hero{height:660px}.hero-photo{background-image:linear-gradient(90deg,rgba(248,248,246,.96),rgba(248,248,246,.72) 40%,rgba(248,248,246,.05) 100%),url('assets/students.png');background-position:center,65% center}.hero-content{padding-top:175px}h1{font-size:3.55rem}.hero-signature{font-size:1.15rem;right:7%}.initiatives{padding:0 4% 20px}.cards{gap:10px}.card{min-height:245px}.card-content{left:14px;right:12px;bottom:17px}.badge{width:38px;height:38px;font-size:1rem;margin-bottom:8px}.card h3{font-size:1rem;padding-right:25px}.arrow{width:31px;height:31px;font-size:1rem}.status{font-size:.48rem;padding:4px 6px}.impact-scene{height:220px}.impact-scene h2{font-size:1.2rem}.impact-label{font-size:.52rem;right:4%}.gallery img{min-height:55px}.footer-inner{display:block}.footer-motto{margin-top:30px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* Readability refinements for small labels and photo overlays. */
.brand small,.footer-brand small{font-size:11px;letter-spacing:.05em}
.discover,.status,.impact-label{font-size:11px}
.hospital .badge{color:#062f2a}
.hero-signature{background:rgba(6,31,66,.72);padding:12px 16px;border-radius:8px;text-shadow:none}
@media(max-width:480px){.brand small,.footer-brand small{font-size:11px}.status,.impact-label{font-size:11px}.status{padding:5px 7px}}
/* Initiative-first layout and interaction */
:root{--navy:#071e3c;--red:#cf182a;--paper:#f5f7f6}body{background:var(--paper)}.header{position:relative;max-width:1600px;margin:auto;padding:24px 5.5%}.header nav a{border-bottom:1px solid #9ba9b6;padding:10px 0}.hero{height:auto;min-height:0;max-width:1600px;margin:auto;background:transparent;overflow:visible}.hero-content{padding:60px 5.5% 55px}.hero-content h1{max-width:1050px;font-size:clamp(3.7rem,8vw,7.5rem);line-height:.95;margin:0;letter-spacing:-.04em}.hero-content p{color:#42566d;line-height:1.45;margin:27px 0 24px;font-size:1.1rem}.discover{gap:16px;color:var(--navy)}.discover .circle{transition:background .25s,color .25s,transform .4s}.discover:hover .circle{background:var(--navy);color:white;transform:translateY(4px)}.initiatives{max-width:1600px;margin:auto;padding:0 5.5% 90px}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:20px;gap:20px}.section-heading h2{margin:0;font-size:clamp(1.6rem,2.6vw,2.5rem);letter-spacing:-.03em}.section-heading h2 span{color:var(--red)}.section-heading p{margin:0 0 4px;color:#52657a;font-size:.85rem}.cards{gap:12px}.card{min-height:390px;border-radius:12px;box-shadow:none}.card > img{transition:transform .8s cubic-bezier(.16,1,.3,1),filter .8s}.card:after{background:linear-gradient(180deg,rgba(3,15,31,.05) 10%,rgba(3,15,31,.25) 40%,rgba(3,15,31,.96) 100%)}.card:before{display:none}.card-content{left:22px;right:22px;bottom:24px}.card h3{font-size:clamp(1.35rem,2vw,2rem)}.badge{width:42px;height:42px;font-size:1rem}.arrow{transition:transform .4s,background .3s,color .3s}.card:hover .arrow,.card:focus-visible .arrow{transform:rotate(-45deg);background:white;color:var(--navy)}.card:hover > img,.card:focus-visible > img{transform:scale(1.08)}.status{font-size:.7rem;padding:7px 10px}footer{padding:36px 5.5%}.footer-brand em{color:#ff5966}.footer-brand small{letter-spacing:.06em}@media(max-width:800px){.header nav{display:flex}.hero{height:auto}.hero-content{padding:55px 5% 45px}.cards{grid-template-columns:repeat(2,1fr)}.card{min-height:350px}}@media(max-width:480px){.header{padding:18px 5%}.header nav{display:flex}.header nav a{font-size:.6rem}.hero-content{padding:52px 5% 40px}.hero-content h1{font-size:clamp(3.1rem,13vw,5rem)}.hero-content p{font-size:1rem}.section-heading{display:block}.section-heading p{margin:8px 0 0}.initiatives{padding:0 5% 60px}.card{min-height:265px}.card-content{left:14px;right:14px;bottom:18px}.card h3{font-size:1.1rem}.badge{width:38px;height:38px}.arrow{width:34px;height:34px}.status{font-size:.65rem}}
@media(max-width:480px){.header nav a,.status{font-size:12px}}

/* ==========================================================================
   Mouvements
   Les états d'attente sont posés dans <head> (classe motion-armed) puis
   remplacés par GSAP. Sans JavaScript, sans GSAP ou si l'utilisateur préfère
   réduire les animations, le contenu reste entièrement visible et statique.
   ========================================================================== */

/* Évite un clignotement entre le premier rendu et le démarrage des animations. */
.motion-armed .header .brand,
.motion-armed .header nav a,
.motion-armed .hero h1,
.motion-armed .hero-content > p,
.motion-armed .discover,
.motion-armed .section-heading > *,
.motion-armed .cards .card,
.motion-armed footer .footer-inner > *{opacity:0}

/* Cartes : élévation au survol, badge qui pivote, flèche qui répond. */
.card{transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s cubic-bezier(.16,1,.3,1)}
.card:hover,.card:focus-visible{transform:translateY(-6px);box-shadow:0 24px 42px #061f4226}
.card:hover > img,.card:focus-visible > img{transform:scale(1.06)}
.card .badge{transition:transform .5s cubic-bezier(.16,1,.3,1)}
.badge img{position:static;width:24px;height:24px;max-width:24px;object-fit:contain;transform:none!important;transition:none!important}
.card:hover .badge,.card:focus-visible .badge{transform:rotate(-8deg) scale(1.08)}
.card:hover .arrow,.card:focus-visible .arrow{transform:translateX(4px) rotate(-45deg)}

/* Navigation : soulignement qui se déploie. */
.header nav a{position:relative}
.header nav a:after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:right center;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.header nav a:hover,.header nav a:focus-visible{text-decoration:none}
.header nav a:hover:after,.header nav a:focus-visible:after{transform:scaleX(1);transform-origin:left center}

/* Repère d'appel : respiration lente de la flèche du bouton. */
.discover .circle{animation:float-hint 3.6s ease-in-out infinite}
.discover:hover .circle,.discover:focus-visible .circle{animation-play-state:paused}
@keyframes float-hint{0%,100%{translate:0 0}50%{translate:0 5px}}

/* Pied de page : le filet de la devise s'étire à l'entrée en scène. */
.motion-ready footer .footer-motto:before{transform:scaleX(0);transform-origin:left center;transition:transform .8s cubic-bezier(.16,1,.3,1) .15s}
.motion-ready footer.is-in .footer-motto:before{transform:scaleX(1)}

@media (prefers-reduced-motion: reduce){
	.discover .circle{animation:none}
	.motion-ready footer .footer-motto:before{transform:none}
	.card:hover,.card:focus-visible{transform:none}
	.card:hover > img,.card:focus-visible > img{transform:none}
}

/* ==========================================================================
   Photo d'accueil
   hero.webp sert de fond au hero : voile clair à gauche pour la lisibilité
   du titre, fondu vers la section suivante en bas de la bannière.
   ========================================================================== */
.hero-photo{background-image:linear-gradient(90deg,#f8f8f6 0%,rgba(248,248,246,.97) 30%,rgba(248,248,246,.82) 52%,rgba(248,248,246,.45) 68%,rgba(248,248,246,.10) 82%,rgba(4,24,48,.05) 100%),url('assets/hero.png')}
.hero:after{content:'';position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(180deg,rgba(245,247,246,0),var(--paper));pointer-events:none;z-index:0}

@media(max-width:800px){
	.header nav{display:none}
	.hero-photo{background-image:linear-gradient(90deg,rgba(248,248,246,.97) 0%,rgba(248,248,246,.90) 48%,rgba(248,248,246,.62) 76%,rgba(248,248,246,.22) 100%),url('assets/hero.png');background-position:center,65% center}
}

/* Le fond du hero se prolonge derrière l'en-tête. */
.header{position:absolute;z-index:5;top:0;left:50%;width:100%;max-width:1600px;margin:0;transform:translateX(-50%)}
/* Le fond occupe tout l'écran ; le contenu conserve l'alignement des sections. */
.hero{width:100%;max-width:none;margin:0}
.hero-content{max-width:1600px;margin:0 auto;padding-top:172px}

@media(max-width:800px){
	.header{left:0;transform:none}
	.hero-content{padding-top:145px}
}

/* Sélecteur de langue fourni par la balise SPIP #MENU_LANG. */
.header-actions{display:flex;align-items:center;gap:22px}
.language-switcher .menu_lang{margin:0}
.language-switcher .menu_lang div{display:flex;align-items:center}
.language-switcher select{appearance:none;border:1px solid rgba(7,30,60,.45);border-radius:999px;background:rgba(245,247,246,.74);color:var(--navy);padding:8px 29px 8px 12px;font:700 .68rem/1 Arial,Helvetica,sans-serif;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 13px) 50%,calc(100% - 9px) 50%;background-size:4px 4px,4px 4px;background-repeat:no-repeat}
.language-switcher select:focus-visible{outline-offset:3px}

@media(max-width:800px){
	.header-actions{gap:0}
	.language-switcher select{font-size:.62rem;padding:7px 25px 7px 10px}
}