/* ==========================================================================
   QUIDAM — feuille de style unique
   Couleur de marque de référence : #00B893 (extraite du logo Q officiel).
   Toute la palette est dérivée de cette teinte (168°).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

@font-face {
  font-family: 'Don Jose';
  src: url('../fonts/DonJose_Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Échelle verte dérivée de #00B893 */
  --green-50:#effbf8;
  --green-100:#d7f4ee;
  --green-200:#aae4d8;
  --green-300:#72d5c1;
  --green-400:#22d3af;
  --green-500:#00b893;
  --green-600:#00997a;
  --green-700:#007a62;
  --green-800:#025f4c;
  --green-900:#044135;

  /* Neutres re-teintés sur la même teinte */
  --neutral-0:#ffffff;
  --neutral-50:#f6f8f8;
  --neutral-100:#ecf0f0;
  --neutral-200:#dae1e0;
  --neutral-300:#becac8;
  --neutral-400:#91a19e;
  --neutral-500:#677976;
  --neutral-600:#495a56;
  --neutral-700:#364542;
  --neutral-800:#212c29;
  --neutral-900:#121a18;

  --brand:var(--green-500);
  --brand-strong:var(--green-600);
  --brand-stronger:var(--green-700);
  --brand-tint:var(--green-50);

  --bg:var(--neutral-0);
  --bg-subtle:var(--green-50);
  --text-strong:var(--neutral-900);
  --text-body:var(--neutral-800);
  --text-muted:var(--neutral-500);
  --text-link:var(--green-700);
  --text-link-hover:var(--green-800);
  --border:var(--neutral-200);
  --border-inverse:rgba(255,255,255,.16);
  --focus-ring:rgba(0,184,147,.42);
  --success:var(--green-600);
  --success-bg:var(--green-50);

  --font-title:'Don Jose','Archivo',system-ui,sans-serif;
  --font-display:'Archivo','Public Sans',system-ui,sans-serif;
  --font-body:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;

  --container-max:1200px;
  --ease:cubic-bezier(.2,.7,.3,1);
}

/* --------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text-body);
  background: var(--bg);
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
a { color: var(--text-link); }
a:hover { color: var(--text-link-hover); }
:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--focus-ring); }

[hidden] { display: none !important; }

.container { max-width: var(--container-max); margin: 0 auto; padding: 0 20px; }
.container--narrow { max-width: 820px; }
.container--mid { max-width: 1120px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------- header -- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(1.2) blur(10px);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-header__inner {
  max-width: var(--container-max); margin: 0 auto; padding: 0 20px;
  height: 68px; display: flex; align-items: center; gap: 20px;
}
.site-header__logo { display: flex; align-items: center; }
.site-header__logo img { height: 28px; width: auto; display: block; }

.nav-desktop { display: flex; gap: 2px; margin-left: auto; }
.nav-desktop a {
  padding: 9px 14px; text-decoration: none;
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  color: var(--text-body);
}
.nav-desktop a:hover { color: var(--brand-stronger); }
.nav-desktop a[aria-current="page"] {
  color: var(--brand-stronger);
  box-shadow: inset 0 -2px 0 var(--brand);
}

.nav-toggle {
  display: none; margin-left: auto;
  width: 46px; height: 46px; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border); cursor: pointer;
  font-size: 24px; line-height: 1; color: var(--text-strong);
}
.nav-mobile { display: none; border-top: 1px solid var(--border); background: #fff; padding: 8px 16px 20px; }
.nav-mobile.is-open { display: flex; flex-direction: column; }
.nav-mobile a {
  padding: 16px 6px; text-decoration: none; border-bottom: 1px solid var(--border);
  font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--text-body);
}
.nav-mobile a[aria-current="page"] { color: var(--brand-stronger); }

/* ------------------------------------------------------- typographie -- */
.eyebrow {
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--brand-stronger);
}
.eyebrow--inverse { color: var(--green-200); }

.title { font-family: var(--font-title); font-weight: 800; letter-spacing: -.02em; margin: 0; text-wrap: balance; color: var(--text-strong); line-height: 1.02; }
.title--sm { font-size: clamp(26px,4.4vw,36px); }
.title--md { font-size: clamp(30px,5.4vw,48px); }
.title--lg { font-size: clamp(40px,8vw,72px); }
.title--inverse { color: #fff; }
.accent { color: var(--brand); }

h1.page-title {
  margin: 0; font-family: var(--font-title); font-weight: 800;
  letter-spacing: -.03em; line-height: .95; color: var(--text-strong);
}
h1.page-title .line { white-space: nowrap; display: inline-block; }

.lede { font-size: clamp(17px,2.2vw,21px); line-height: 1.6; color: var(--text-muted); margin: 0; text-wrap: pretty; }
.lede--inverse { color: var(--neutral-300); }
.lede--body { color: var(--text-body); }
.lede--big { font-size: clamp(18px,2.4vw,24px); }

.prose { display: grid; gap: 20px; font-size: clamp(16px,1.8vw,18px); line-height: 1.75; color: var(--text-body); }
.prose p { margin: 0; }

/* ------------------------------------------------------------ boutons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  padding: 0 22px; height: 48px; cursor: pointer; text-decoration: none;
  border: 2px solid transparent; transition: transform 120ms var(--ease), background 160ms var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn--lg { height: 54px; padding: 0 26px; font-size: 16px; }
.btn--block { width: 100%; }
.btn--primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-strong); border-color: var(--brand-strong); color: #fff; }
.btn--secondary { background: var(--neutral-900); border-color: var(--neutral-900); color: #fff; }
.btn--secondary:hover { background: var(--neutral-800); border-color: var(--neutral-800); color: #fff; }
.btn--outline { background: transparent; border-color: var(--brand); color: var(--brand-stronger); }
.btn--outline:hover { background: var(--brand-tint); color: var(--brand-stronger); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--text-body); height: 40px; padding: 0 12px; font-size: 14px; }
.btn--ghost:hover { background: var(--brand-tint); color: var(--brand-stronger); }
.btn--onbrand { background: #fff; border-color: #fff; color: var(--brand-stronger); }
.btn--onbrand:hover { background: var(--green-50); color: var(--brand-stronger); }

/* -------------------------------------------------------------- motifs -- */
.motif { position: absolute; pointer-events: none; }
.motif svg { width: 100%; height: 100%; display: block; overflow: visible; }
.has-motifs { position: relative; overflow: hidden; }
.has-motifs > .container, .has-motifs > .inner { position: relative; }

/* --------------------------------------------------------- bandeau hero -- */
.hero { background: var(--bg-subtle); border-bottom: 1px solid var(--green-100); }
.hero__inner { max-width: var(--container-max); margin: 0 auto; padding: clamp(44px,7vw,88px) 20px 0; }
.hero h1 {
  font-family: var(--font-title); font-weight: 800;
  font-size: clamp(30px,7.1vw,100px); line-height: .98; letter-spacing: -.025em;
  color: var(--text-strong); margin: 18px 0 0; max-width: 1000px;
}
.hero h1 .line { white-space: nowrap; display: inline-block; }
.hero__body { display: grid; gap: 30px; margin-top: clamp(26px,3.6vw,40px); padding-bottom: clamp(44px,7vw,88px); }
.hero__body .lede { max-width: 620px; }

.page-head { padding: clamp(40px,6vw,72px) 0 clamp(28px,4vw,44px); }
.page-head__text { margin-top: 18px; }
.page-head .lede { margin-top: 22px; }

/* ------------------------------------------------------ bandeau chiffres -- */
.stats-band { background: var(--neutral-900); position: relative; overflow: hidden; }
.stats-band__grid {
  position: relative; max-width: var(--container-max); margin: 0 auto;
  padding: clamp(36px,6vw,60px) 20px;
  display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(28px,4vw,36px);
}
.stat { display: grid; grid-template-rows: auto auto; align-content: start; gap: 10px; }
.stat__value {
  font-family: var(--font-title); font-weight: 800;
  font-size: clamp(42px,7vw,64px); line-height: 1; height: clamp(42px,7vw,64px);
  display: flex; align-items: flex-end; letter-spacing: -.03em; color: #fff;
}
.stat__label { font-size: clamp(14px,1.6vw,16px); line-height: 1.45; color: rgba(255,255,255,.92); max-width: 230px; }
sup.ord { font-size: .46em; line-height: 1; vertical-align: super; letter-spacing: 0; margin-left: .02em; }

/* ---------------------------------------------------------- sections -- */
.section { padding: clamp(56px,9vw,104px) 0; }
.section--sm { padding: clamp(48px,7vw,88px) 0; }
.section--subtle { background: var(--bg-subtle); }

.split { display: grid; gap: clamp(28px,4.5vw,64px); align-items: start; }
.split--image-text { grid-template-columns: .85fr 1.15fr; }
.split--text-side { grid-template-columns: 1.25fr .75fr; }
.split--frap { grid-template-columns: 1fr .91fr; }
.split--support { grid-template-columns: .62fr 1.38fr; }
.split--contact { grid-template-columns: .85fr 1.15fr; }
.split--center { align-items: center; }

.stack { display: grid; gap: 22px; }

/* filets éditoriaux (remplacent les blocs encadrés) */
.rule-list { display: grid; }
.rule-item { border-top: 1px solid var(--border); padding: 20px 0; }
.rule-item h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(17px,2vw,19px); color: var(--text-strong); margin: 0 0 6px; }
.rule-item p { font-size: clamp(15px,1.7vw,17px); line-height: 1.65; color: var(--text-muted); margin: 0; }

.pillars { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(0px,3vw,36px); margin-top: clamp(32px,5vw,56px); position: relative; }
.pillar { border-top: 3px solid var(--brand); padding-top: 20px; padding-bottom: 4px; }
.pillar__num { font-family: var(--font-title); font-weight: 800; font-size: 15px; color: var(--brand-stronger); letter-spacing: .06em; }
.pillar h3 { font-family: var(--font-title); font-weight: 800; font-size: clamp(24px,3.2vw,30px); letter-spacing: -.02em; color: var(--text-strong); margin: 10px 0; }
.pillar p { font-size: clamp(15px,1.7vw,17px); line-height: 1.65; color: var(--text-muted); margin: 0; max-width: 340px; }

/* chiffres valorisés en filets */
.figs { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(20px,3vw,40px); margin-top: clamp(10px,2vw,20px); }
.fig { border-top: 1px solid var(--border); padding: 18px 0; display: grid; gap: 6px; }
.fig__value { font-family: var(--font-title); font-weight: 800; font-size: clamp(34px,4.6vw,46px); line-height: 1; letter-spacing: -.03em; color: var(--brand); }
.fig p { font-size: 15px; line-height: 1.55; color: var(--text-body); margin: 0; }

.side-figs { display: grid; }
.side-fig { border-top: 1px solid var(--border); padding: 18px 0; }
.side-fig__value { font-family: var(--font-title); font-weight: 800; font-size: clamp(36px,5vw,48px); line-height: 1; letter-spacing: -.03em; color: var(--brand); }
.side-fig p { font-size: 15px; line-height: 1.55; color: var(--text-muted); margin: 8px 0 0; }

/* traitement bichromie de marque sur les photos */
.art { position: relative; width: 100%; overflow: hidden; background: var(--brand-stronger); }
.art--3x4 { aspect-ratio: 3 / 4; }
.art img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  filter: grayscale(1) contrast(1.1) brightness(1.06);
  mix-blend-mode: luminosity;
}
.banner img { width: 100%; height: auto; display: block; }

figure.marraines { margin: 0; }
figure.marraines img { width: 100%; height: auto; display: block; }
figure.marraines figcaption { font-size: 14px; line-height: 1.5; color: var(--text-muted); margin-top: 12px; }

/* -------------------------------------------------------------- CTA -- */
.cta { position: relative; overflow: hidden; }
.cta--brand { background: var(--brand); }
.cta--light { background: var(--bg-subtle); }
.cta__inner { position: relative; max-width: var(--container-max); margin: 0 auto; padding: clamp(48px,7vw,80px) 20px; }
.cta__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px,4vw,56px); align-items: center; }
.cta__label {
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--brand-stronger);
}
.cta--brand .cta__label { color: rgba(255,255,255,.9); }
.mail-form { display: grid; gap: 10px; }
.mail-row { display: flex; gap: 10px; }
.mail-row input {
  flex: 1; min-width: 0; height: 52px; padding: 0 14px; font-size: 16px;
  font-family: var(--font-body); color: var(--text-strong); background: #fff;
  border: 3px solid var(--brand); outline: none;
}
.cta--brand .mail-row input { border-color: #fff; }
.mail-row button { height: 52px; padding: 0 22px; }
.cta__alt { font-size: 15px; text-decoration: underline; text-underline-offset: 3px; margin-top: 2px; }
.cta--brand .cta__alt { color: #fff; }
.cta__done { display: grid; gap: 8px; }
.cta__done strong { font-family: var(--font-display); font-size: 18px; color: var(--text-strong); }
.cta--brand .cta__done strong, .cta--brand .cta__done span { color: #fff; }
.cta__done span { font-size: 15px; line-height: 1.6; color: var(--text-muted); }

/* --------------------------------------------------- page nous soutenir -- */
.support-hero { background: var(--neutral-900); position: relative; overflow: hidden; }
.support-hero__inner { position: relative; max-width: var(--container-max); margin: 0 auto; padding: clamp(44px,7vw,80px) 20px clamp(36px,5vw,56px); }
.support-hero h1 {
  font-family: var(--font-title); font-weight: 800; font-size: clamp(42px,9vw,88px);
  line-height: .98; letter-spacing: -.03em; color: #fff; margin: 18px 0 0;
  text-wrap: balance; max-width: 900px;
}
.support-hero .lede { margin-top: 20px; max-width: 620px; }
.amount { border-top: 1px solid var(--border); padding: 18px 0; display: grid; gap: 6px; }
.amount__value { font-family: var(--font-title); font-weight: 800; font-size: clamp(28px,4vw,38px); line-height: 1; letter-spacing: -.02em; color: var(--brand); }
.amount p { font-size: 15px; line-height: 1.6; color: var(--text-body); margin: 0; }
.support-note { border-top: 1px solid var(--border); padding-top: 18px; font-size: 15px; line-height: 1.65; color: var(--text-muted); margin: 0; }
.helloasso { border: 3px solid var(--brand); background: #fff; }
.helloasso iframe { width: 100%; height: 760px; border: none; display: block; }
.helloasso-note { font-size: 13px; line-height: 1.6; color: var(--text-muted); margin: 12px 0 0; }

/* ---------------------------------------------------------- contact -- */
.contact-page { background: var(--bg-subtle); position: relative; overflow: hidden; }
.contact-page__inner { position: relative; max-width: 1120px; margin: 0 auto; padding: clamp(40px,6vw,64px) 20px clamp(56px,8vw,96px); }
.socials { display: flex; gap: 12px; flex-wrap: wrap; }
.social {
  display: inline-flex; align-items: center; gap: 10px; height: 52px;
  padding: 0 18px 0 14px; background: var(--brand); text-decoration: none;
  transition: background 160ms var(--ease);
}
.social:hover { background: var(--brand-strong); }
.social__icon { width: 22px; height: 22px; display: block; background: #fff; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; }
.social span:last-child { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: #fff; }
.socials-block { border-top: 1px solid var(--green-100); padding-top: 22px; }
.socials-block .cta__label { margin-bottom: 14px; display: block; }

.form-card { border: 3px solid var(--brand); background: #fff; padding: clamp(20px,3vw,34px); }
.field { display: grid; gap: 7px; }
.field + .field, .form-row + .field, .field + .form-row { margin-top: 16px; }
.field label, .form-row label {
  font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--text-strong);
}
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--font-body); font-size: 16px; color: var(--text-strong);
  background: #fff; border: 1px solid var(--neutral-300); padding: 12px 14px; outline: none;
}
.field textarea { resize: vertical; min-height: 140px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 4px var(--focus-ring); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.check { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0 22px; }
.check input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--brand); flex: none; }
.check label { font-size: 14px; line-height: 1.55; color: var(--text-muted); }
.form-done { text-align: center; padding: 28px 4px; }
.form-done__mark {
  width: 64px; height: 64px; border-radius: 50%; background: var(--success-bg); color: var(--success);
  display: inline-flex; align-items: center; justify-content: center; font-size: 32px; margin-bottom: 18px;
}
.form-done h3 { font-family: var(--font-title); font-weight: 800; font-size: 24px; color: var(--text-strong); margin: 0 0 10px; }
.form-done p { font-size: 16px; color: var(--text-muted); margin: 0 auto 24px; max-width: 380px; line-height: 1.6; }

/* -------------------------------------------------- mentions légales -- */
.legal { max-width: 820px; margin: 0 auto; padding: clamp(36px,5vw,64px) 20px clamp(56px,8vw,96px); }
.legal h2 { font-family: var(--font-title); font-weight: 700; font-size: clamp(21px,2.6vw,25px); color: var(--text-strong); margin: 36px 0 12px; }
.legal p, .legal li { font-size: 16px; line-height: 1.7; color: var(--text-body); }
.legal p { margin: 0 0 12px; }
.legal ul { padding-left: 20px; margin: 0 0 12px; }
.legal .updated { font-size: 14px; color: var(--text-muted); margin-top: 28px; }

/* --------------------------------------------------------------- footer -- */
.site-footer { background: var(--neutral-900); color: var(--neutral-0); padding-top: 56px; }
.site-footer__grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 44px; }
.site-footer__brand { max-width: 320px; }
.site-footer__brand img { height: 28px; width: auto; display: block; }
.site-footer__brand p { color: var(--neutral-300); font-size: 15px; line-height: 1.65; margin-top: 18px; }
.footer-col__title {
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--green-300); margin-bottom: 14px;
}
.footer-col__links { display: flex; flex-direction: column; gap: 11px; }
.footer-col__links a { color: var(--neutral-300); text-decoration: none; font-size: 15px; }
.footer-col__links a:hover { color: #fff; }
.site-footer__bottom {
  border-top: 1px solid var(--border-inverse); padding: 20px 0;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  color: var(--neutral-400); font-size: 13px;
}
.site-footer__bottom a { color: var(--neutral-400); text-decoration: none; }
.site-footer__bottom a:hover { color: #fff; }

/* ---------------------------------------------------------- responsive -- */
@media (max-width: 980px) {
  .stats-band__grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 900px) {
  .nav-desktop { display: none; }
  .nav-toggle { display: inline-flex; }
  .split, .pillars, .cta__grid { grid-template-columns: 1fr !important; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .stats-band__grid { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .mail-row { flex-direction: column; }
  .mail-row button { width: 100%; }
  .figs { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
}

@media print {
  .site-header, .nav-mobile, .cta, .motif { display: none !important; }
}