:root{
  --font-heading:"Inter", system-ui, sans-serif;
  --font-body:"Inter", system-ui, sans-serif;
  --color-accent:#99dd01;
  --color-accent-100:#f6fde8;
  --color-accent-200:#e7f8c4;
  --color-accent-300:#d2f093;
  --color-accent-400:#b9e753;
  --color-accent-500:#99dd01;
  --color-accent-600:#7db600;
  --color-accent-700:#5e8a00;
  --color-accent-800:#0b407f;
  --color-accent-900:#062a57;
}
*{ box-sizing:border-box; }
body{ margin:0; background:var(--color-bg); font-family:var(--font-body); color:var(--color-text); }
a{ color:var(--color-accent-700); text-decoration:none; }
a:hover{ color:#43620a; }
img{ display:block; }

/* --- layout --- */
.section{ border-bottom:1px solid var(--color-accent-200); }
.section--tinted{ background:var(--color-neutral-100); }
.wrap{
  max-width:1280px; margin:0 auto;
  padding:clamp(48px,7vw,88px) clamp(20px,4vw,48px);
  display:flex; flex-direction:column; gap:clamp(28px,4vw,40px);
}

/* --- headings --- */
.kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-size:13px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--color-accent-700);
}
.kicker::before{ content:""; width:26px; height:3px; background:var(--color-accent); flex:none; }
.kicker--light{ color:#fff; }
.kicker--pale{ color:var(--color-accent-300); }
h2.title{
  margin:0; font-family:var(--font-heading); font-weight:400;
  font-size:clamp(28px,3.6vw,46px); line-height:1.1;
}
.lead{ margin:0; font-size:15px; line-height:1.6; opacity:0.85; }

/* --- buttons --- */
.pill{
  border-radius:999px; padding:12px 24px; font-size:14px; font-weight:400;
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
}
.pill--accent{ background:var(--color-accent); color:#183500; }
.pill--accent:hover{ background:var(--color-accent-600); color:#183500; }
.pill--light{ background:#fff; color:var(--color-accent-900); }
.pill--light:hover{ background:rgba(255,255,255,0.85); color:var(--color-accent-900); }
.pill--outline{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,0.6); }
.pill--outline:hover{ background:rgba(255,255,255,0.14); color:#fff; }

/* --- bits --- */
.icon-tile{
  width:46px; height:46px; border-radius:12px;
  background:var(--color-accent); color:#183500;
  display:inline-flex; align-items:center; justify-content:center; flex:none;
}
.photo{ width:100%; border-radius:16px; overflow:hidden; }
.photo img{ width:100%; height:100%; object-fit:cover; }
.photo--fill{ position:relative; }
.photo--fill img{ position:absolute; inset:0; }

/* =========================================================
   PAGE ASSOCIATION - styles requis par association.html
   Scope: page ID 40 uniquement
   ========================================================= */

/* --- page hero --- */
.page-id-40 .phero{
  position:relative;
  overflow:hidden;
  min-height:clamp(330px,38vw,470px);
  display:flex;
  align-items:flex-end;
}
.page-id-40 .phero__bg{
  position:absolute;
  inset:0;
}
.page-id-40 .phero__bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 46%;
}
.page-id-40 .phero__tint{
  position:absolute;
  inset:0;
  background:rgba(6,42,87,0.34);
}
.page-id-40 .phero__grad{
  position:absolute;
  inset:0;
  background:linear-gradient(
    180deg,
    rgba(6,42,87,0.18) 0%,
    rgba(6,42,87,0.28) 45%,
    rgba(6,42,87,0.88) 100%
  );
}
.page-id-40 .phero__inner{
  position:relative;
  z-index:2;
  width:100%;
  max-width:1280px;
  margin:0 auto;
  padding:clamp(88px,10vw,128px) clamp(20px,4vw,48px) clamp(40px,5vw,60px);
}
.page-id-40 .crumb{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:9px;
  margin:0 0 16px;
  font-size:14px;
  line-height:1.4;
}
.page-id-40 .crumb a{
  color:rgba(255,255,255,0.76);
}
.page-id-40 .crumb a:hover{
  color:#fff;
}
.page-id-40 .crumb span{
  color:#fff;
}
.page-id-40 .phero__title{
  margin:0;
  color:#fff;
  font-family:var(--font-heading);
  font-size:clamp(38px,5vw,64px);
  font-weight:400;
  line-height:1.04;
  letter-spacing:-0.025em;
}

/* --- about / panel --- */
.page-id-40 .lead--muted{
  opacity:0.72;
}
.page-id-40 .panel{
  background:#fff;
  border-radius:20px;
  padding:clamp(14px,1.4vw,18px);
  display:flex;
  flex-direction:column;
  gap:clamp(14px,1.4vw,18px);
  min-width:0;
}
.page-id-40 .card{
  background:var(--color-neutral-100);
  border-radius:20px;
  padding:clamp(20px,2.2vw,28px);
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:0;
}
.page-id-40 .card__title{
  margin:0;
  color:var(--color-text);
  font-size:20px;
  font-weight:600;
  line-height:1.25;
}
.page-id-40 .card__body{
  margin:0;
  font-size:14px;
  line-height:1.6;
  opacity:0.78;
}

/* --- mission cards --- */
.page-id-40 .intro{
  width:100%;
  max-width:760px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.page-id-40 .cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2vw,24px);
  align-items:stretch;
}
.page-id-40 .card--frame{
  padding:0;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--color-accent-200);
  transition:transform .25s ease, box-shadow .25s ease;
}
.page-id-40 .card--frame:hover,
.page-id-40 .card--frame:focus-visible{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
}
.page-id-40 .card__media{
  position:relative;
  padding:14px 14px 0;
}
.page-id-40 .card__media .photo{
  aspect-ratio:4/3;
  border-radius:14px;
}
.page-id-40 .card__moment{
  position:absolute;
  left:26px;
  bottom:12px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:6px 11px;
  border-radius:999px;
  background:#fff;
  color:var(--color-accent-900);
  box-shadow:var(--shadow-sm);
  font-size:12px;
  font-weight:600;
  line-height:1;
}
.page-id-40 .card__text{
  padding:20px 22px 14px;
  display:flex;
  flex-direction:column;
  gap:9px;
  flex:1;
}
.page-id-40 .card__panel{
  padding:0 22px 22px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}
.page-id-40 .card__link{
  font-size:14px;
  font-weight:600;
  color:var(--color-accent-700);
}
.page-id-40 .card__link:hover{
  color:#43620a;
}
.page-id-40 .tag{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:5px 10px;
  border-radius:999px;
  background:var(--color-accent-100);
  color:var(--color-accent-700);
  font-size:12px;
  font-weight:600;
}

/* --- CTA bandeau --- */
.page-id-40 .bandeau{
  position:relative;
  overflow:hidden;
  min-height:clamp(420px,52vw,560px);
  display:flex;
  align-items:center;
}
.page-id-40 .bandeau__bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:60% center;
}
.page-id-40 .bandeau__veil{
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(6,42,87,0.94) 0%,
    rgba(6,42,87,0.82) 38%,
    rgba(6,42,87,0.28) 72%,
    rgba(6,42,87,0.10) 100%
  );
}
.page-id-40 .bandeau__inner{
  position:relative;
  z-index:2;
  width:100%;
  max-width:1280px;
  margin:0 auto;
  padding:clamp(52px,7vw,84px) clamp(20px,4vw,48px);
  display:flex;
  flex-direction:column;
  gap:18px;
  align-items:flex-start;
}
.page-id-40 .bandeau__title{
  margin:0;
  max-width:17ch;
  color:#fff;
  font-family:var(--font-heading);
  font-size:clamp(30px,4vw,52px);
  font-weight:400;
  line-height:1.08;
}
.page-id-40 .bandeau__lead{
  margin:0;
  max-width:52ch;
  color:rgba(255,255,255,0.88);
  font-size:15px;
  line-height:1.65;
}
.page-id-40 .actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.page-id-40 .actions--center{
  align-items:center;
}

/* --- responsive --- */
@media (max-width:900px){
  .page-id-40 .cards{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .page-id-40 .cards > .card:last-child{
    grid-column:1 / -1;
  }
}
@media (max-width:640px){
  .page-id-40 .phero{
    min-height:320px;
  }
  .page-id-40 .phero__inner{
    padding-bottom:34px;
  }
  .page-id-40 .cards{
    grid-template-columns:1fr;
  }
  .page-id-40 .cards > .card:last-child{
    grid-column:auto;
  }
  .page-id-40 .bandeau{
    min-height:460px;
  }
  .page-id-40 .bandeau__bg{
    object-position:center;
  }
  .page-id-40 .bandeau__veil{
    background:linear-gradient(
      90deg,
      rgba(6,42,87,0.96) 0%,
      rgba(6,42,87,0.78) 100%
    );
  }
  .page-id-40 .actions{
    width:100%;
  }
  .page-id-40 .actions .pill{
    justify-content:center;
    flex:1 1 160px;
  }
}


/* --- Notre mission: rendu du HTML de reference --- */
.page-id-40 #mission{
  background:#f5f6f8;
}
.page-id-40 #mission .wrap{
  gap:clamp(42px,5vw,58px);
}
.page-id-40 #mission .intro{
  max-width:820px;
  gap:14px;
}
.page-id-40 #mission .intro .kicker{
  color:#556b00;
  font-size:13px;
}
.page-id-40 #mission .intro .title{
  max-width:18ch !important;
  color:#1d1d1f;
  font-size:clamp(38px,4.6vw,62px);
  font-weight:400;
  line-height:1.04;
  letter-spacing:-0.025em;
}
.page-id-40 #mission .intro .lead{
  max-width:70ch;
  color:#4d4d4f;
  font-size:clamp(16px,1.35vw,19px);
  line-height:1.65;
  opacity:1;
}
.page-id-40 #mission .cards{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,2vw,30px);
}
.page-id-40 #mission .card--frame{
  background:var(--color-accent-900);
  border:0;
  border-radius:12px;
  padding:14px;
  color:#fff;
  overflow:hidden;
}
.page-id-40 #mission .card--frame:hover,
.page-id-40 #mission .card--frame:focus-visible{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
}
.page-id-40 #mission .card__media{
  padding:0;
  position:relative;
}
.page-id-40 #mission .card__media .photo{
  aspect-ratio:1.48 / 1;
  border-radius:10px;
}
.page-id-40 #mission .card__moment{
  left:50%;
  bottom:auto;
  top:16px;
  transform:translateX(-50%);
  min-width:158px;
  min-height:42px;
  justify-content:center;
  padding:9px 18px;
  border-radius:999px;
  background:var(--color-accent);
  color:#183500;
  box-shadow:none;
  font-size:16px;
  font-weight:500;
}
.page-id-40 #mission .card__text{
  padding:20px 14px 18px;
  gap:12px;
}
.page-id-40 #mission .card__title{
  color:#fff;
  font-size:clamp(20px,1.55vw,26px);
  font-weight:700;
  line-height:1.2;
}
.page-id-40 #mission .card__body{
  color:rgba(255,255,255,0.92);
  font-size:clamp(14px,1.05vw,17px);
  line-height:1.55;
  opacity:1;
}
.page-id-40 #mission .card__panel{
  margin-top:auto;
  padding:18px 20px;
  border-radius:10px;
  background:rgba(255,255,255,0.09);
  gap:10px;
}
.page-id-40 #mission .card__link{
  color:#fff;
  font-size:16px;
  font-weight:500;
}
.page-id-40 #mission .card__link:hover{
  color:var(--color-accent);
}
.page-id-40 #mission .tag{
  min-height:34px;
  padding:7px 14px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.28);
  color:#fff;
  font-size:14px;
  font-weight:500;
}
@media (max-width:900px){
  .page-id-40 #mission .cards{
    grid-template-columns:1fr;
  }
  .page-id-40 #mission .cards > .card:last-child{
    grid-column:auto;
  }
  .page-id-40 #mission .card__media .photo{
    aspect-ratio:16 / 9;
  }
}