/* =====================================================================
   Andry Foundation — Feuille de style
   Reprend les design tokens et composants du gabarit fourni.

   Changelog :
   - Suppression des styles liés aux layouts "needs" (cartes 3 colonnes)
     et "positioning" (cartes numérotées 2 colonnes) : .af-card-title,
     .af-card-numbered, .af-card-num.
   - "activities" (Core activities) est conservé : .af-numbered-item,
     .af-numbered-num, .af-numbered-content, .af-numbered-title,
     .af-numbered-body.
   - Suppression des styles du bloc "Jurisdiction, committees and next
     steps" : .af-split-5-7, .af-setup-row, .af-setup-label, .af-setup-body.
   - "Founding members" repensés en cartes VERTICALES type article
     (photo en grand en haut, nom, puis rôle) sur 2 colonnes :
     .af-board-grid, .af-board-card, .af-board-photo, .af-board-card-body,
     .af-board-member-name, .af-board-member-status.
   - Suppression des styles du formulaire de don, remplacés par le bloc
     WYSIWYG : .af-donate-content.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. DESIGN TOKENS
   --------------------------------------------------------------------- */
:root{
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-core: var(--font-sans);
  --font-display: var(--font-sans);
  --font-body: var(--font-sans);

  /* Couleurs — marque */
  --primary:#173B57; --primary-hover:#0F3049; --primary-pressed:#092638; --on-primary:#FFFFFF;
  --secondary:#2D7D78; --secondary-hover:#246B67; --secondary-pressed:#1B5956; --on-secondary:#FFFFFF;
  --accent-warm:#D8845A; --accent-warm-hover:#BE6E47;

  /* Couleurs — texte */
  --ink:#17232D; --ink-muted:#4E5D67; --ink-subtle:#70808A;
  --inverse-ink:#FFFFFF; --inverse-ink-muted:#D8E3E6;

  /* Couleurs — surfaces */
  --canvas:#FCFDFC; --surface-1:#F4F8F7; --surface-2:#E8F0EE; --warm-surface:#F7EFE8;
  --inverse-canvas:#102B3B; --inverse-surface:#183A4C;

  /* Couleurs — lignes & focus */
  --border:#D6E0E2; --border-strong:#8EA1AA; --focus:#1E6FB3;

  /* Couleurs — sémantiques */
  --success:#2F7A4B; --warning:#A96800; --error:#B64040; --info:#1E6FB3;

  /* Alias sémantiques — texte */
  --text-heading:var(--ink); --text-body:var(--ink); --text-secondary:var(--ink-muted);
  --text-subtle:var(--ink-subtle); --text-link:var(--primary);
  --text-on-dark:var(--inverse-ink); --text-on-dark-secondary:var(--inverse-ink-muted);

  /* Alias sémantiques — surfaces */
  --surface-page:var(--canvas); --surface-card:var(--canvas); --surface-alt:var(--surface-1);
  --surface-selected:var(--surface-2); --surface-inverse:var(--inverse-canvas);
  --surface-inverse-raised:var(--inverse-surface);

  /* Alias sémantiques — lignes */
  --border-card:var(--border); --border-control:var(--border-strong); --border-featured:var(--secondary);

  /* Alias sémantiques — actions */
  --action-primary-bg:var(--primary); --action-primary-bg-hover:var(--primary-hover);
  --action-primary-bg-pressed:var(--primary-pressed); --action-primary-fg:var(--on-primary);
  --action-secondary-bg:var(--secondary); --action-secondary-bg-hover:var(--secondary-hover);
  --action-secondary-bg-pressed:var(--secondary-pressed); --action-secondary-fg:var(--on-secondary);

  /* Typographie — tailles (desktop) */
  --fs-display-xl:64px; --fs-display-lg:48px; --fs-display-md:38px; --fs-headline:30px;
  --fs-card-title:22px; --fs-subhead:20px; --fs-body-lg:18px; --fs-body:16px; --fs-body-sm:14px;
  --fs-caption:12px; --fs-button:15px; --fs-eyebrow:13px;

  /* Typographie — tailles (mobile) */
  --fs-display-xl-mobile:40px; --fs-display-lg-mobile:36px; --fs-display-md-mobile:32px;
  --fs-headline-mobile:26px; --fs-card-title-mobile:21px;

  /* Typographie — graisses */
  --fw-regular:400; --fw-medium:500; --fw-semibold:650; --fw-bold:700;

  /* Typographie — interlignes */
  --lh-display-xl:1.08; --lh-display-lg:1.12; --lh-display-md:1.16; --lh-headline:1.25;
  --lh-card-title:1.32; --lh-subhead:1.45; --lh-body-lg:1.60; --lh-body:1.55; --lh-body-sm:1.50;
  --lh-caption:1.40; --lh-button:1.20; --lh-eyebrow:1.35;

  /* Typographie — espacement des lettres */
  --ls-display-xl:-1.2px; --ls-display-lg:-0.8px; --ls-display-md:-0.4px; --ls-headline:-0.2px;
  --ls-card-title:-0.1px; --ls-eyebrow:0.7px;

  /* Mesure de lecture */
  --measure-body:68ch; --measure-editorial:760px;

  /* Espacements (rythme 8px) */
  --space-xxs:4px; --space-xs:8px; --space-sm:12px; --space-md:16px; --space-lg:24px;
  --space-xl:32px; --space-xxl:48px; --space-xxxl:64px;
  --space-section:112px; --space-section-mobile:64px;
  --space-control-x:20px; --space-control-y:13px; --space-card:28px; --space-card-featured:32px;
  --space-panel:56px;

  /* Rayons */
  --radius-xs:4px; --radius-sm:8px; --radius-md:10px; --radius-lg:12px; --radius-xl:16px; --radius-pill:9999px;
  --radius-control:10px; --radius-input:8px; --radius-card:12px; --radius-panel:16px;
  --radius-image:12px; --radius-image-lg:16px;

  /* Ombres */
  --shadow-raised:0 8px 24px rgba(16,43,59,0.08);
  --shadow-raised-strong:0 12px 32px rgba(16,43,59,0.10);
  --focus-ring:0 0 0 3px rgba(30,111,179,0.35);

  /* Transitions */
  --duration-fast:150ms; --duration-slow:220ms;
  --ease-standard:cubic-bezier(0.2,0,0,1);

  /* Layout */
  --container-max:1280px;
  --gutter-desktop:48px; --gutter-tablet:32px; --gutter-mobile:20px;
  --nav-height:72px;
}

@media (prefers-reduced-motion:reduce){
  :root{ --duration-fast:1ms; --duration-slow:1ms; }
  *{ transition:none!important; animation:none!important; }
}

/* ---------------------------------------------------------------------
   2. BASE
   --------------------------------------------------------------------- */
.af *{ box-sizing:border-box; }
.af{ font-family:var(--font-body); color:var(--text-body); background:var(--canvas); line-height:var(--lh-body); -webkit-font-smoothing:antialiased; }
.af a{ color:var(--text-link); text-decoration:none; }
.af a:hover{ color:var(--primary-hover); text-decoration:underline; }
.af button{ font-family:inherit; cursor:pointer; border:none; background:none; }
.af :focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }

.af-skip-link{ position:absolute; left:-9999px; top:0; background:var(--canvas); color:var(--text-link); padding:12px 16px; z-index:200; border-radius:var(--radius-control); }
.af-skip-link:focus{ left:16px; top:16px; }

.af-container{ max-width:var(--container-max); margin:0 auto; padding-left:var(--gutter-desktop); padding-right:var(--gutter-desktop); }

.af-eyebrow{ margin:0; font-size:var(--fs-eyebrow); font-weight:var(--fw-semibold); letter-spacing:.16em; text-transform:uppercase; color:var(--secondary); }

/* ---------------------------------------------------------------------
   3. HEADER
   --------------------------------------------------------------------- */
.af-header{ position:sticky; top:0; z-index:100; background:var(--canvas); border-bottom:1px solid var(--border); }
.af-header-inner{ height:var(--nav-height); display:flex; align-items:center; gap:32px; }
.af-header-logo{ height:32px; width:auto; display:block; }
.af-nav-list{ display:flex; align-items:center; gap:32px; margin-left:auto; list-style:none; padding:0; }
.af-nav{ color:var(--text-secondary); font-size:var(--fs-body-sm); font-weight:var(--fw-medium); transition:color var(--duration-fast) var(--ease-standard); }
.af-nav:hover{ color:var(--primary); text-decoration:none; }

/* ---------------------------------------------------------------------
   4. BOUTONS
   --------------------------------------------------------------------- */
.af-btn{ display:inline-flex; align-items:center; gap:8px; padding:15px 28px; border-radius:var(--radius-control); font-size:var(--fs-body); font-weight:var(--fw-semibold); border:1px solid transparent; transition:background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
.af-btn-sm{ padding:11px 22px; font-size:var(--fs-body-sm); }
.af-btn-primary{ background:var(--primary); border-color:var(--primary); color:var(--on-primary)!important; }
.af-btn-primary:hover{ background:var(--primary-hover); border-color:var(--primary-hover); color:var(--on-primary); text-decoration:none; }
.af-btn-primary:active{ background:var(--primary-pressed); border-color:var(--primary-pressed); }
.af-btn-outline{ background:transparent; border-color:var(--border-strong); color:var(--primary); }
.af-btn-outline:hover{ background:var(--surface-1); border-color:var(--border-strong); text-decoration:none; }
.af-btn-teal{ background:var(--secondary); border-color:var(--secondary); color:var(--on-secondary); }
.af-btn-teal:hover{ background:var(--secondary-hover); border-color:var(--secondary-hover); color:var(--on-secondary); text-decoration:none; }

/* ---------------------------------------------------------------------
   5. SECTIONS / GRILLES
   --------------------------------------------------------------------- */
.af-section{ background:var(--canvas); }
.af-section-pad{ padding:var(--space-section) var(--gutter-desktop); }
.af-section-alt{ background:var(--surface-1); border-top:1px solid var(--border); }

.af-split{ display:grid; gap:72px; align-items:start; }
.af-split-4-8{ grid-template-columns:4fr 8fr; }
.af-split-6-6{ grid-template-columns:6fr 6fr; }
.af-split-7-5{ grid-template-columns:7fr 5fr; }
.af-split-end{ align-items:end; }
.af-split-center{ align-items:center; }
.af-split-header{ margin-bottom:56px; }

.af-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.af-grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }

.af-title{ margin:0; font-size:clamp(28px,3vw,48px); line-height:1.1; letter-spacing:-1px; font-weight:var(--fw-semibold); color:var(--text-heading); max-width:24ch; text-wrap:pretty; }
.af-description{ margin:0; font-size:var(--fs-body-lg); line-height:var(--lh-body-lg); color:var(--text-secondary); max-width:66ch; }

/* ---------------------------------------------------------------------
   6. HERO
   --------------------------------------------------------------------- */
.html_header_top.html_header_sticky #main { padding-top: 0px!important; }
.af-hero{ position:relative; overflow:hidden; }
.af-hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:65% 35%; filter:saturate(.72); }
.af-hero-overlay{ position:absolute; inset:0; background:linear-gradient(100deg, rgba(248,250,250,.93) 0%, rgba(248,250,250,.86) 40%, rgba(248,250,250,.70) 70%, rgba(248,250,250,.48) 100%); }
.af-hero-inner{ position:relative; padding:112px var(--gutter-desktop) 96px; }
.af-hero-copy{ display:flex; flex-direction:column; gap:28px; }
.af-hero-title{ margin:0; font-size:clamp(38px,4.6vw,64px); line-height:1.06; letter-spacing:-1.2px; font-weight:var(--fw-semibold); color:var(--text-heading); max-width:20ch; text-wrap:pretty; }
.af-hero-subtitle{ margin:0; font-size:var(--fs-body-lg); line-height:var(--lh-body-lg); color:var(--text-secondary); max-width:64ch; }
.af-hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:4px; }
.af-hero-disclaimer{ margin:0; font-size:var(--fs-caption); line-height:var(--lh-caption); color:var(--text-subtle); max-width:56ch; }

.af-stats-card{ background:var(--canvas); border:1px solid var(--border); border-radius:var(--radius-card); padding:32px; display:flex; flex-direction:column; gap:24px; }
.af-stats-list{ display:flex; flex-direction:column; gap:20px; }
.af-stat{ display:flex; flex-direction:column; gap:6px; border-top:1px solid var(--border-strong); padding-top:16px; }
.af-stat-number{ font-size:38px; font-weight:var(--fw-semibold); letter-spacing:-.8px; line-height:1; color:var(--text-heading); }
.af-stat-description{ font-size:var(--fs-body-sm); line-height:var(--lh-body-sm); color:var(--text-secondary); }

/* ---------------------------------------------------------------------
   7. MISSION
   --------------------------------------------------------------------- */
.af-quote{ margin:0; font-size:clamp(24px,2.4vw,38px); line-height:1.3; letter-spacing:-.6px; font-weight:var(--fw-medium); color:var(--text-heading); border-left:3px solid var(--secondary); padding-left:28px; text-wrap:pretty; }
.af-mission-texts{ display:flex; flex-direction:column; gap:32px; }
.af-mission-text{ margin:0; font-size:var(--fs-body); line-height:var(--lh-body); color:var(--text-secondary); max-width:66ch; }

/* ---------------------------------------------------------------------
   8. CARTES
   --------------------------------------------------------------------- */
.af-card{ display:flex; flex-direction:column; gap:10px; background:var(--surface-card); border:1px solid var(--border-card); border-radius:var(--radius-card); padding:var(--space-card); transition:box-shadow var(--duration-slow) var(--ease-standard), border-color var(--duration-slow) var(--ease-standard), transform var(--duration-slow) var(--ease-standard); }
.af-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-raised); border-color:var(--border-strong); }
.af-card-body{ margin:0; font-size:var(--fs-body-sm); line-height:var(--lh-body-sm); color:var(--text-secondary); }
.af-card-heading{ margin:0; font-size:var(--fs-card-title); line-height:1.28; font-weight:var(--fw-semibold); color:var(--text-heading); }
.af-card-label{ font-size:var(--fs-caption); font-weight:var(--fw-bold); letter-spacing:.12em; text-transform:uppercase; color:var(--secondary); }

/* ---------------------------------------------------------------------
   9. LISTE NUMÉROTÉE (Core activities)
   --------------------------------------------------------------------- */
.af-numbered-item{ display:grid; grid-template-columns:44px 1fr; gap:16px; border-top:1px solid var(--border); padding:20px 0; }
.af-numbered-num{ font-size:var(--fs-body-sm); font-weight:var(--fw-bold); color:var(--secondary); }
.af-numbered-content{ display:flex; flex-direction:column; gap:6px; }
.af-numbered-title{ font-size:var(--fs-body); font-weight:var(--fw-semibold); color:var(--text-heading); }
.af-numbered-body{ font-size:var(--fs-body-sm); line-height:var(--lh-body-sm); color:var(--text-secondary); }

/* ---------------------------------------------------------------------
   10. STRUCTURE (cartes + founding members)
   --------------------------------------------------------------------- */
.af-board{ margin-top:8px; }

.af-board-grid{ margin-top:0; }
.af-board-card{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:var(--surface-card);
  border:1px solid var(--border-card);
  border-radius:var(--radius-card);
  transition:box-shadow var(--duration-slow) var(--ease-standard), border-color var(--duration-slow) var(--ease-standard), transform var(--duration-slow) var(--ease-standard);
}
.af-board-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-raised); border-color:var(--border-strong); }
.af-board-photo{ width:100%; background:var(--surface-1); overflow:hidden; }
.af-board-photo img{ object-fit:cover; display:block; margin: 0 auto; }
.af-board-card-body{ display:flex; flex-direction:column; gap:4px; padding:20px 24px 24px; }
.af-board-member-name{ font-size:var(--fs-subhead); font-weight:var(--fw-semibold); color:var(--text-heading); }
.af-board-member-status{ font-size:var(--fs-body-sm); color:var(--text-secondary); }
.af-board-note{ margin:24px 0 0; font-size:var(--fs-body-sm); line-height:var(--lh-body-sm); color:var(--text-secondary); }

/* ---------------------------------------------------------------------
   11. NAME (origine du nom)
   --------------------------------------------------------------------- */
.af-name-image-wrap{ background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius-image-lg); padding:48px; display:flex; align-items:center; justify-content:center; }
.af-name-image-wrap img{ width:min(300px,100%); height:auto; display:block; }
.af-fact{ display:flex; flex-direction:column; gap:6px; border-top:1px solid var(--border); padding-top:16px; }
.af-fact-title{ font-size:var(--fs-body-sm); font-weight:var(--fw-semibold); color:var(--text-heading); }
.af-fact-body{ font-size:var(--fs-body); line-height:var(--lh-body); color:var(--text-secondary); }

/* ---------------------------------------------------------------------
   12. DON
   --------------------------------------------------------------------- */
.af-donate-copy{ display:flex; flex-direction:column; gap:22px; }
.af-donate-text{ margin:0; font-size:var(--fs-body); line-height:var(--lh-body); color:var(--text-secondary); max-width:60ch; }
.af-donate-text-lg{ font-size:var(--fs-body-lg); line-height:var(--lh-body-lg); }
.af-donate-disclaimer{ margin:0; font-size:var(--fs-caption); line-height:var(--lh-caption); color:var(--text-subtle); max-width:56ch; }

.af-donate-card{ background:var(--canvas); border:1px solid var(--border); border-radius:var(--radius-card); padding:32px; }

.af-donate-content{ font-size:var(--fs-body); line-height:var(--lh-body); color:var(--text-body); }
.af-donate-content h2,
.af-donate-content h3,
.af-donate-content h4{ margin:0 0 12px; color:var(--text-heading); font-weight:var(--fw-semibold); }
.af-donate-content p{ margin:0 0 16px; }
.af-donate-content p:last-child{ margin-bottom:0; }
.af-donate-content ul,
.af-donate-content ol{ margin:0 0 16px; padding-left:20px; }
.af-donate-content li{ margin-bottom:6px; }
.af-donate-content a{ color:var(--text-link); text-decoration:underline; }
.af-donate-content img{ max-width:100%; height:auto; border-radius:var(--radius-image); }
.af-disclaimer-container {
   display: flex;
   gap: 10px;
}

.af-cute-link {
  color: var(--secondary) !important;
  position: relative;
  text-decoration: none !important; /* on retire le soulignement natif */
  display: inline-block; /* nécessaire pour que le ::after suive bien le texte */
  width: fit-content;
}

.af-cute-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px; /* ajuste selon l'espacement souhaité */
  width: 100%;
  height: 1px; /* épaisseur du trait */
  background-color: currentColor; /* ou var(--secondary) si tu veux forcer la couleur */
  transform: scaleX(0);
  transform-origin: right; /* le trait se rétracte vers la droite quand on quitte */
  transition: transform 0.3s ease;
}

.af-cute-link:hover::after {
  transform: scaleX(1);
  transform-origin: left; /* le trait se dessine depuis la gauche */
}

/* ---------------------------------------------------------------------
   13. FOOTER
   --------------------------------------------------------------------- */
.af-footer{ background:var(--inverse-canvas); color:var(--inverse-ink-muted); }
.af-footer-inner{ padding:72px var(--gutter-desktop) 36px; display:flex; flex-direction:column; gap:48px; }
.af-footer-top{ display:grid; grid-template-columns:5fr 7fr; gap:56px; }
.af-footer-brand{ display:flex; flex-direction:column; gap:18px; }
.af-footer-logo{ height:36px; width:auto; display:block; object-fit:contain; }
.af-footer-desc{ margin:0; font-size:var(--fs-body-sm); line-height:var(--lh-body-sm); max-width:40ch; }
.af-footer-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.af-footer-col{ display:flex; flex-direction:column; gap:12px; }
.af-footer-col-heading{ font-size:var(--fs-caption); font-weight:var(--fw-semibold); letter-spacing:.12em; text-transform:uppercase; color:var(--inverse-ink); }
.af-footer-col-link{ font-size:var(--fs-body-sm); line-height:var(--lh-body-sm); color:var(--inverse-ink-muted); }
.af-footer-bottom{ border-top:1px solid var(--inverse-surface); padding-top:24px; display:flex; flex-direction:column; gap:12px; font-size:var(--fs-caption); }
.af-footer-legal{ margin:0; line-height:var(--lh-caption); max-width:104ch; }
.af-footer-contact{ margin:0; }

/* ---------------------------------------------------------------------
   14. RESPONSIVE
   --------------------------------------------------------------------- */
@media (max-width:1024px){
  .af-nav-list{ display:none!important; }
  .af-split{ grid-template-columns:1fr!important; gap:48px!important; }
  .af-grid-3{ grid-template-columns:1fr 1fr!important; }
  .af-grid-2{ grid-template-columns:1fr!important; }
  .af-footer-top{ grid-template-columns:1fr!important; }
}
@media (max-width:720px){
  .af-container,
  .af-header-inner,
  .af-hero-inner,
  .af-section-pad,
  .af-footer-inner{ padding-left:20px!important; padding-right:20px!important; }
  .af-grid-3{ grid-template-columns:1fr!important; }
  .af-section-pad{ padding-top:64px!important; padding-bottom:64px!important; }
  .af-hero-inner{ padding-top:120px!important; padding-bottom:64px!important; }
  .af-footer-cols{ grid-template-columns:1fr!important; }
}