:root { --header-height: 100px; --ease: cubic-bezier(.22,.68,.25,1); }
html { scroll-padding-top: calc(var(--header-height) + 20px); }
body { background: #fbfcfe; font-family: 'Segoe UI', Arial, sans-serif; }
::selection { background: #d9eaff; color: var(--deep); }
.skip { z-index: 100; }
.reading-progress { position: fixed; inset: 0 0 auto; height: 3px; background: #3099d4; transform: scaleX(0); transform-origin: left; z-index: 60; pointer-events: none; }
.header { position: sticky; top: 0; z-index: 50; height: auto; min-height: 100px; max-width: none; padding: 8px 6%; background: rgb(255 255 255 / 94%); border-bottom: 1px solid transparent; transition: box-shadow .3s,border-color .3s; }
@supports (backdrop-filter: blur(16px)) { .header { background: rgb(255 255 255 / 89%); backdrop-filter: blur(16px); } }
.header.is-scrolled { border-color: #d9e4ecbb; box-shadow: 0 8px 32px #0e34550f; }
.brand, .brand img { border-radius: 8px; }
.brand img { width: 225px; height: 80px; }
nav { gap: 6px; font-weight: 500; }
nav a { padding: 10px 16px; border-radius: 999px; transition: color .25s,background .25s,box-shadow .25s; }
nav a:hover, nav a[aria-current='location'] { text-decoration: none; color: var(--navy); background: #eaf3fb; }
.nav-contact { margin-left: 10px; border-color: #bbcedf; padding: 10px 16px; }
.nav-contact span { display: inline-block; margin-left: 20px; transition: transform .3s var(--ease); }
.nav-contact:hover { background: var(--navy); color: white; border-color: var(--navy); box-shadow: 0 5px 18px #103e7015; }
.nav-contact:hover span { transform: translate(2px,-2px); }
.hero { position: relative; isolation: isolate; overflow: hidden; margin: 12px 24px 0; padding: 65px 5% 0; border-radius: 32px; background: radial-gradient(ellipse at 93% 8%,#2e639b 0,transparent 58%),linear-gradient(120deg,#0b325e,#164980); box-shadow: 0 18px 55px #103e7010; }
.hero::before { content: ''; position: absolute; inset: 20px; border: 1px solid #ffffff0f; border-radius: 22px; z-index: -1; pointer-events: none; }
.hero-inner { padding-bottom: 65px; }
h1 em { color: #b5dffc; }
.button { gap: 30px; padding: 15px 23px; border-radius: 999px; box-shadow: 0 4px 20px #00162e12; transition: background .25s,box-shadow .3s,transform .3s var(--ease); }
.button span { display: inline-grid; place-items: center; border-radius: 50%; background: #ecf5fc; width: 30px; height: 30px; transition: transform .3s var(--ease); }
.button:hover { background: #edf6fe; transform: translateY(-3px); box-shadow: 0 10px 25px #00162e30; }
.button:hover span { transform: translateY(2px); }
.identity { border: 1px solid #ffffffb3; border-radius: 160px 160px 24px 24px; min-height: 435px; transform: rotate(0); box-shadow: 0 26px 65px #031d3c40,9px 9px 0 #ffffff0c; transition: transform .6s var(--ease),box-shadow .6s var(--ease); }
.identity-top { font-size: 12px; letter-spacing: .6px; gap: 15px; color: #526c84; }
.identity-bottom span { font-size: 12px; letter-spacing: 1px; }
.section { padding-top: 96px; padding-bottom: 96px; }
.section-label { display: flex; align-items: flex-start; gap: 14px; font-size: 12px; line-height: 28px; letter-spacing: 1.4px; font-weight: 600; }
.section-label span { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; height: 28px; min-width: 42px; padding: 0 8px; margin: 0; border: 1px solid #c9dbea; border-radius: 999px; font-size: 12px; color: #45657f; letter-spacing: 0; }
.association-content,.histoire-content,.reperes-content,.contact-content { min-width: 0; }
.association-quote { padding: 26px 30px; border-left: 3px solid #8cb9dd; border-radius: 0 22px 22px 0; background: linear-gradient(110deg,#eaf4fd,#f4f8fc); }
.histoire { margin: 0 24px; border-radius: 32px; background: linear-gradient(115deg,#e5f0f8,#f1f7fc); padding-left: calc(6% - 24px); padding-right: calc(6% - 24px); border: 1px solid #dce9f4; }
.centre-link { padding: 15px 22px; border-radius: 999px; transition: background .25s,transform .3s var(--ease),box-shadow .3s; }
.centre-link:hover { transform: translateY(-3px); box-shadow: 0 10px 20px #103e7020; }
.centre-link span { display: inline-block; transition: transform .3s; }
.centre-link:hover span { transform: translate(2px,-2px); }
.reperes { background: transparent; padding-top: 85px; padding-bottom: 85px; }
.reperes h2 { font-size: 35px; }
.facts { grid-template-columns: 1.1fr .8fr 1fr; gap: 18px; }
.facts article { background: white; border: 1px solid #dce7ef; border-radius: 20px; padding: 26px 23px; box-shadow: 0 4px 20px #103e7004; transition: transform .35s var(--ease),border-color .35s,box-shadow .35s; }
.fact-label { font-size: 12px; letter-spacing: 1px; color: #526c81; }
.contact { margin: 0 24px; padding: 72px calc(6% - 24px); border-radius: 32px; color: white; background: linear-gradient(115deg,#0c325d,#154876); }
.contact .section-label { color: #e5eff8; }
.contact .section-label span { color: #d4e7f8; border-color: #ffffff40; }
.contact h2 em { color: #b5dffc; }
.contact p { color: #e3edf6; }
.contact .email-link { color: white; text-decoration-color: #97c7e3; text-underline-offset: 5px; transition: text-decoration-color .25s; }
.contact .email-link:hover { text-decoration-color: white; }
address { border-color: #ffffff33; }
address .fact-label { color: #c6dded; }
footer { border: 0; margin-top: 24px; }
footer p { font-size: 13px; }
.top-link { width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%; transition: transform .3s var(--ease),background .25s; }
.top-link:hover { transform: translateY(-3px); background: #e8f2fb; }
@media (hover: hover) and (pointer: fine) {
  .identity:hover { transform: rotate(-1.5deg) translateY(-5px); box-shadow: 0 32px 70px #031d3c50,9px 9px 0 #ffffff0c; }
  .facts article:hover { transform: translateY(-5px); border-color: #b4cfe4; box-shadow: 0 16px 30px #103e700c; }
}
@media (min-width:1500px) {
  .header { padding-left: max(6%,calc((100vw - 1268px)/2)); padding-right: max(6%,calc((100vw - 1268px)/2)); }
  .histoire,.contact { padding-left: max(calc(6% - 24px),calc((100vw - 1316px)/2)); padding-right: max(calc(6% - 24px),calc((100vw - 1316px)/2)); }
}
@media (max-width:1100px) {
  .header { padding: 8px 4%; }
  nav a { padding: 9px 12px; }
  .nav-contact { margin-left: 3px; }
  .hero-inner { gap: 38px; }
  .identity { min-height: 375px; }
  .identity-top { letter-spacing: 0; }
  .section { padding-top: 70px; padding-bottom: 70px; }
  .facts { gap: 12px; }
  .facts article { padding: 23px 18px; }
}
@media (min-width:721px) and (max-width:900px) {
  .header { min-height: 100px; }
  .brand img { width: 190px; height: 72px; }
  nav { gap: 4px; font-size: 14px; }
  nav a { padding: 9px 10px; }
  .nav-contact span { margin-left: 8px; }
  .facts { grid-template-columns: 1fr; }
  .identity-top { flex-direction: column; gap: 2px; text-align: center; }
}
@media (max-width:720px) {
  :root { --header-height: 148px; }
  .header { min-height: 0; padding: 4px 4% 10px; }
  .brand img { width: 180px; height: 60px; }
  nav { gap: 4px 2px; }
  nav a { padding: 7px 10px; }
  .nav-contact { margin: 0; }
  .nav-contact span { display: none; }
  .hero { margin: 8px 12px 0; border-radius: 24px; padding: 40px 6% 0; }
  .hero::before { inset: 12px; border-radius: 17px; }
  .hero-inner { gap: 45px; padding-bottom: 38px; }
  h1 { font-size: clamp(44px,10.3vw,66px); }
  .eyebrow { font-size: 12px; letter-spacing: 1.3px; }
  .desktop-break { display: none; }
  .button { gap: 18px; padding: 13px 19px; font-size: 14px; }
  .identity { min-height: 310px; max-width: 440px; border-radius: 110px 110px 20px 20px; padding: 38px 18px 25px; transform: none; }
  .identity-top { padding: 14px 2px 0; }
  .identity-bottom { margin: 0 4px; }
  .identity-bottom span { display: none; }
  .hero-foot span:first-child { font-size: 12px; letter-spacing: .3px; }
  .section { gap: 25px; padding: 52px 6%; }
  .section-label { font-size: 12px; }
  h2,.reperes h2 { font-size: 33px; }
  .association-quote { padding: 22px; }
  .histoire,.contact { margin: 0 12px; padding: 42px 6%; border-radius: 24px; }
  .centre-link { font-size: 15px; padding: 14px 19px; gap: 15px; }
  .facts { grid-template-columns: 1fr; gap: 14px; }
  .facts article { padding: 23px; }
  .contact h2 { font-size: 33px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation: none !important; transition: none !important; }
  .identity,.identity:hover,.button:hover,.button:hover span,.facts article:hover,.centre-link:hover,.centre-link:hover span,.nav-contact:hover span,.top-link:hover { transform: none; }
}