/* ==========================================================================
   Nid'Envol — Feuille de style principale
   Refonte 2026 — HTML statique
   Palette héritée de l'identité existante :
     rose      #ca3088   vert anis #93c01f   turquoise #0a6e7b
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Marque */
  --teal-900: #064149;
  --teal-700: #0a6e7b;
  --teal-500: #1b828f;
  --teal-100: #d9e9eb;
  --teal-050: #f0f6f7;

  --rose-700: #a8256e;
  --rose-600: #ca3088;
  --rose-100: #fbe4f0;
  --rose-050: #fdf1f7;

  --leaf-700: #6d9012;
  --leaf-600: #7fa518;
  --leaf-500: #93c01f;
  --leaf-100: #eaf4d3;

  /* Neutres chauds */
  --ink:      #21302f;
  --ink-soft: #4d5f5e;
  --ink-mute: #788a89;
  --line:     #e3e8e6;
  --cream:    #fbf8f3;
  --sand:     #f4efe6;
  --white:    #ffffff;

  /* Typo */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Échelle fluide */
  --step--1: clamp(0.86rem, 0.83rem + 0.15vw, 0.94rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.45rem);
  --step-2:  clamp(1.45rem, 1.3rem + 0.75vw, 1.95rem);
  --step-3:  clamp(1.8rem, 1.5rem + 1.4vw, 2.7rem);
  --step-4:  clamp(2.2rem, 1.7rem + 2.4vw, 3.8rem);

  /* Rythme */
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --wrap: 1180px;
  --wrap-narrow: 760px;
  --radius-s: 12px;
  --radius:   20px;
  --radius-l: 32px;
  --radius-xl: 48px;

  --shadow-s: 0 2px 8px rgba(33, 48, 47, .06);
  --shadow:   0 12px 32px -12px rgba(33, 48, 47, .18);
  --shadow-l: 0 28px 60px -24px rgba(33, 48, 47, .28);

  --ease: cubic-bezier(.33, 1, .68, 1);

  /* Filigrane « arbre » — l'arbre est bicolore, comme le dessin d'origine :
     deux tracés distincts, chacun avec sa propre couleur. */
  --tree-1: var(--teal-700);   /* partie gauche, sur fond clair    */
  --tree-2: var(--leaf-500);   /* partie droite, sur fond clair    */
  --tree-1-dark: #ffffff;      /* partie gauche, sur fond turquoise */
  --tree-2-dark: var(--leaf-500);
  /* Le vert anis est bien plus clair que le turquoise : à opacité égale il
     s'efface. Ce coefficient rééquilibre la présence des deux parties.
     Mettre 1 pour appliquer strictement la même opacité aux deux. */
  --tree-2-boost: 1.6;

  /* Intensité de la partie turquoise, par emplacement. La partie verte est
     rehaussée par --tree-2-boost. Valeurs établies par mesure de contraste
     (voir charte-graphique.html) : seuls le pied de page et le bandeau
     d'appel à l'action ont du texte au-dessus du motif. */
  --tree-hero:   .18;
  --tree-quote:  .14;
  --tree-cta:    .20;
  --tree-footer: .16;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--teal-900);
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--teal-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--rose-600); }

strong, b { font-weight: 700; color: var(--teal-900); }

::selection { background: var(--rose-100); color: var(--rose-700); }

:focus-visible {
  outline: 3px solid var(--rose-600);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: 50%; top: -100px; transform: translateX(-50%);
  z-index: 999; background: var(--teal-700); color: #fff;
  padding: .7rem 1.4rem; border-radius: 0 0 var(--radius-s) var(--radius-s);
  font-weight: 700; text-decoration: none; transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; color: #fff; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- 3. Layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--cream { background: var(--cream); }
.section--sand  { background: var(--sand); }
.section--white { background: var(--white); }
.section--teal  { background: var(--teal-050); }

.section-head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-body);
  font-size: var(--step--1); font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--rose-600); margin-bottom: .9rem;
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; border-radius: 2px;
  background: currentColor; flex: none;
}
.section-head--center .eyebrow::before { display: none; }

.lead { font-size: var(--step-1); line-height: 1.6; color: var(--ink-soft); }

.grid { display: grid; gap: clamp(1.1rem, 2.5vw, 1.9rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* ---------- 4. Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--font-body); font-weight: 800; font-size: var(--step-0);
  line-height: 1.2; text-decoration: none; cursor: pointer;
  padding: .85em 1.6em; border-radius: 999px; border: 2px solid transparent;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .2s, color .2s, border-color .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--rose-600); color: #fff; box-shadow: 0 10px 24px -12px rgba(202,48,136,.9); }
.btn--primary:hover { background: var(--rose-700); color: #fff; box-shadow: 0 16px 30px -12px rgba(202,48,136,.9); }

.btn--teal { background: var(--teal-700); color: #fff; box-shadow: 0 10px 24px -12px rgba(10,110,123,.9); }
.btn--teal:hover { background: var(--teal-900); color: #fff; }

.btn--ghost { background: transparent; color: var(--teal-700); border-color: var(--teal-700); }
.btn--ghost:hover { background: var(--teal-700); color: #fff; }

.btn--light { background: rgba(255,255,255,.95); color: var(--teal-900); }
.btn--light:hover { background: #fff; color: var(--rose-600); }

.btn--sm { font-size: var(--step--1); padding: .65em 1.25em; }

.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; }

/* ---------- 5. En-tête ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(251, 248, 243, .88);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, box-shadow .3s, background-color .3s;
}
.site-header.is-stuck { border-bottom-color: var(--line); box-shadow: var(--shadow-s); }

.nav {
  display: flex; align-items: center; gap: 1rem;
  min-height: 76px;
}
.brand { display: flex; align-items: center; gap: .7rem; margin-right: auto; text-decoration: none; flex: none; }
.brand img { height: 54px; width: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--teal-900); }
.brand-tag { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute); font-weight: 700; }

.nav-links { display: flex; align-items: center; gap: .15rem; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  display: block; padding: .55rem .8rem; border-radius: 999px;
  font-weight: 700; font-size: .96rem; color: var(--ink-soft); text-decoration: none;
  transition: background-color .2s, color .2s;
}
.nav-links a:hover { background: var(--teal-100); color: var(--teal-900); }
.nav-links a[aria-current="page"] { color: var(--rose-600); background: var(--rose-050); }

.nav-cta { flex: none; }

.nav-toggle {
  display: none; flex: none;
  width: 46px; height: 46px; border-radius: 14px;
  border: 2px solid var(--line); background: var(--white);
  align-items: center; justify-content: center; cursor: pointer;
}
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--teal-900); border-radius: 2px; position: relative; transition: background-color .2s; }
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--teal-900); border-radius: 2px;
  transition: transform .25s var(--ease), top .25s var(--ease);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 960px) {
  .brand img { height: 46px; }
  .nav-toggle { display: flex; }
  .nav-cta { display: none; }
  .nav-links {
    position: fixed; inset: 76px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: .2rem;
    background: var(--white); padding: 1rem var(--gutter) 2rem;
    border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
    max-height: calc(100dvh - 76px); overflow-y: auto;
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity .22s var(--ease), transform .22s var(--ease);
  }
  .nav-links.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .nav-links a { padding: .9rem 1rem; font-size: 1.05rem; border-radius: var(--radius-s); }
  .nav-links .nav-mobile-cta { margin-top: .6rem; }
  .nav-links .nav-mobile-cta a { background: var(--rose-600); color: #fff; text-align: center; }
}
@media (min-width: 961px) { .nav-links .nav-mobile-cta { display: none; } }

/* ---------- 6. Hero ---------- */
.hero { position: relative; padding-block: clamp(2rem, 4vw, 3.5rem) clamp(3rem, 6vw, 5rem); }
.hero-inner {
  display: grid; gap: clamp(1.8rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) { .hero-inner { grid-template-columns: 1.05fr 1fr; } }

.hero h1 { margin-bottom: .45em; }
.hero h1 em { font-style: italic; color: var(--rose-600); }
.hero .lead { max-width: 52ch; }

.hero-media { position: relative; }
.hero-media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-xl) var(--radius-s) var(--radius-xl) var(--radius-s);
  box-shadow: var(--shadow-l);
}
.hero-blob {
  position: absolute; z-index: -1; border-radius: 50%;
  filter: blur(4px); opacity: .55;
}
.hero-blob--1 { width: 190px; height: 190px; background: var(--leaf-100); top: -34px; left: -34px; }
.hero-blob--2 { width: 150px; height: 150px; background: var(--rose-100); bottom: -30px; right: -22px; }
@media (max-width: 700px) {
  .hero-blob--1 { width: 130px; height: 130px; top: -18px; left: -6px; }
  .hero-blob--2 { width: 110px; height: 110px; bottom: -16px; right: -6px; }
}

.hero-badge {
  position: absolute; bottom: 18px; left: -8px;
  background: var(--white); border-radius: var(--radius);
  padding: .8rem 1.15rem; box-shadow: var(--shadow);
  display: flex; align-items: center; gap: .7rem; max-width: 78%;
}
.hero-badge svg { flex: none; }
.hero-badge b { display: block; font-size: .98rem; color: var(--teal-900); line-height: 1.25; }
.hero-badge span { font-size: .82rem; color: var(--ink-mute); }

/* Bandeau image pleine largeur (pages intérieures) */
.page-hero {
  position: relative; background: var(--teal-050);
  padding-block: clamp(2.6rem, 6vw, 4.5rem);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.page-hero::after {
  content: ""; position: absolute; left: -140px; bottom: -160px;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(147,192,31,.14), rgba(147,192,31,0) 70%);
}
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero h1 { max-width: 20ch; }
.page-hero .lead { max-width: 60ch; }

.breadcrumb { font-size: var(--step--1); color: var(--ink-soft); margin-bottom: 1rem; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.breadcrumb li::after { content: "›"; margin-left: .45rem; color: var(--ink-mute); }
.breadcrumb li:last-child::after { content: ""; }
.breadcrumb a { color: var(--ink-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--rose-600); text-decoration: underline; }


/* ---------- 6 bis. Filigrane « arbre » ----------
   L'arbre de l'ASBL est bicolore. Il est donc découpé en DEUX tracés — la
   partie gauche et la partie droite — empilés en deux calques masqués, chacun
   recoloré indépendamment. Les tracés sont intégrés ici en data-URI (~20 Ko à
   eux deux) plutôt qu'appelés en fichiers : un masque CSS pointant vers un
   fichier externe est bloqué par les navigateurs en ouverture locale (file://).
   Les fichiers autonomes restent disponibles :
   assets/img/arbre-partie-1.svg et arbre-partie-2.svg
   Purement décoratif : aria-hidden, donc ignoré par les lecteurs d'écran.     */
:root {
  --tree-mask-1: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20729%22%3E%3Cg%20transform=%22translate(0.000000,729.000000)%20scale(0.100000,-0.100000)%22%20fill=%22%23000%22%3E%3Cpath%20d=%22M2632%207245%20c-29%20-64%20-11%20-122%2064%20-206%2027%20-31%2043%20-57%2040%20-66%20-4%20-8%20-9%20-25%20-12%20-38%20-6%20-23%20-6%20-23%20-51%20-3%20-54%2024%20-152%2039%20-188%2029%20-26%20-6%20-26%20-6%20-5%20-34%2030%20-38%20209%20-127%20270%20-134%2027%20-3%2051%20-12%2054%20-19%2016%20-43%20101%20-154%20138%20-182%2053%20-40%2068%20-63%20107%20-171%2017%20-46%2041%20-98%2054%20-115%2050%20-65%2050%20-70%2018%20-144%20-21%20-48%20-31%20-91%20-36%20-153%20-7%20-87%20-7%20-87%20-52%20-93%20-25%20-3%20-103%20-29%20-173%20-56%20-175%20-69%20-184%20-70%20-240%20-20%20-58%2052%20-45%2064%2077%2074%20177%2013%20226%2045%20165%20106%20-51%2051%20-95%2054%20-183%2010%20-76%20-39%20-63%20-9%2026%2060%2070%2054%2087%2081%2083%20133%20-6%2077%20-194%2052%20-237%20-31%20-20%20-37%20-20%20-37%20-21%20-4%200%2060%20-54%20122%20-105%20122%20-17%200%20-45%20-91%20-45%20-145%20-1%20-97%20-61%200%20-86%20139%20-8%2044%20-26%20115%20-39%20156%20-44%20141%20-48%20130%2045%20130%2044%200%2080%204%2080%209%200%2017%20-69%2069%20-100%2076%20-37%208%20-29%2023%2031%2057%2068%2038%20105%20128%2054%20128%20-36%200%20-59%20-13%20-133%20-76%20-76%20-65%20-74%20-65%20-98%20-11%20-10%2023%20-38%2061%20-62%2084%20-43%2042%20-43%2042%20-21%2064%2027%2027%2055%2091%2064%20147%209%2056%20-18%2058%20-73%205%20-39%20-38%20-39%20-38%20-67%2020%20-42%2088%20-103%20153%20-124%20132%20-25%20-25%20-19%20-101%2012%20-162%2015%20-29%2027%20-54%2027%20-56%200%20-3%20-30%204%20-67%2014%20-170%2047%20-254%2011%20-178%20-78%2055%20-65%20120%20-87%20194%20-68%20113%2029%20128%2022%20195%20-89%2045%20-75%2045%20-80%20-4%20-55%20-54%2028%20-210%20-24%20-210%20-70%200%20-14%2095%20-51%20147%20-57%2089%20-10%2088%20-9%20122%20-83%2034%20-73%2058%20-178%2048%20-204%20-5%20-14%20-15%20-11%20-62%2017%20-127%2077%20-254%20111%20-407%20109%20-76%200%20-138%203%20-138%208%200%205%2011%2052%2025%20105%2040%20153%2031%20283%20-19%20268%20-42%20-12%20-71%20-41%20-84%20-85%20-23%20-75%20-24%20-76%20-30%20-59%20-3%208%20-26%2042%20-51%2074%20-46%2059%20-46%2059%20-43%20173%206%20206%20-38%20313%20-99%20243%20-67%20-75%20-83%20-149%20-54%20-244%2023%20-74%2021%20-78%20-27%20-51%20-64%2037%20-165%2022%20-208%20-30%20-25%20-31%20102%20-90%20217%20-101%2077%20-7%20122%20-32%20170%20-92%2047%20-60%2047%20-60%20-10%20-45%20-97%2025%20-195%2013%20-264%20-32%20-52%20-35%2083%20-121%20227%20-146%2030%20-5%2071%20-12%2090%20-15%2046%20-8%2022%20-21%20-140%20-77%20-170%20-59%20-215%20-59%20-450%20-3%20-95%2022%20-95%2022%20-59%2040%2087%2041%20135%20163%2085%20213%20-12%2013%20-89%20-20%20-126%20-53%20-39%20-36%20-39%20-36%20-33%2029%206%2068%20-2%20163%20-16%20186%20-7%2011%20-20%208%20-67%20-13%20-107%20-49%20-145%20-103%20-162%20-229%20-13%20-98%20-13%20-98%20-65%20-50%20-45%2042%20-80%2055%20-224%2087%20-116%2026%20-117%2025%20-109%20-36%2020%20-146%20153%20-239%20324%20-226%2058%204%2053%20-2%20-30%20-48%20-89%20-48%20-208%20-158%20-190%20-176%2049%20-49%20234%201%20334%2090%2068%2060%2092%2066%20216%2057%2096%20-7%2096%20-7%2049%20-49%20-25%20-22%20-47%20-50%20-49%20-61%20-3%20-17%20-14%20-21%20-70%20-27%20-78%20-9%20-161%20-39%20-202%20-72%20-42%20-35%2025%20-82%20104%20-73%2057%207%2056%208%2031%20-35%20-29%20-48%20-51%20-143%20-51%20-215%200%20-62%200%20-62%2030%20-51%2071%2024%20190%20172%20190%20236%200%2010%208%208%2027%20-6%2079%20-55%20113%20-65%20107%20-30%20-13%2073%20-35%20136%20-54%20153%20-27%2024%20-26%2024%2021%2084%2060%2076%2074%2080%20214%2074%20120%20-5%20120%20-5%20280%2042%20366%20107%20434%20104%20705%20-29%20174%20-86%20179%20-90%20219%20-160%2015%20-28%2048%20-76%2073%20-106%2024%20-30%2061%20-85%2081%20-121%2020%20-36%2043%20-71%2051%20-78%2012%20-10%20-10%20-25%20-129%20-85%20-201%20-102%20-240%20-108%20-425%20-69%20-75%2016%20-75%2016%20-18%2029%2080%2019%20132%2048%20190%20106%2060%2059%2059%2060%20-17%2042%20-96%20-22%20-127%20-20%20-119%2011%207%2029%20-3%20124%20-15%20144%20-14%2021%20-110%20-35%20-141%20-82%20-23%20-36%20-25%20-37%20-34%20-18%20-10%2023%20-81%2061%20-114%2061%20-41%200%20-25%20-35%2060%20-128%2067%20-75%2070%20-123%206%20-87%20-24%2012%20-75%2035%20-114%2050%20-71%2028%20-71%2028%20-62%2069%2011%2045%203%20175%20-11%20189%20-10%2010%20-61%20-55%20-81%20-103%20-16%20-39%20-23%20-38%20-39%206%20-14%2038%20-90%20124%20-109%20124%20-12%200%20-18%20-46%20-13%20-110%201%20-19%2013%20-52%2027%20-72%2030%20-47%2032%20-43%20-19%20-58%20-88%20-26%20-207%20-101%20-207%20-130%200%20-13%20102%20-21%20156%20-12%2061%2010%20136%2052%20165%2092%2021%2028%2021%2028%20108%20-45%20129%20-109%20159%20-150%20132%20-179%20-22%20-23%20-22%20-23%20-55%2010%20-43%2043%20-66%2045%20-259%2023%20-53%20-6%20-99%20-15%20-102%20-19%20-18%20-29%20119%20-90%20253%20-111%2080%20-13%20103%20-39%2033%20-39%20-75%200%20-102%20-12%20-166%20-72%20-61%20-56%20-94%20-111%20-75%20-123%2034%20-21%20170%2024%20266%2089%20l69%2046%2011%20-85%20c12%20-85%2025%20-115%2050%20-115%2062%200%2061%20188%20-2%20263%20-25%2029%20-25%2029%208%2052%2033%2023%2033%2023%2038%20-35%205%20-62%2016%20-79%2074%20-121%2061%20-45%2082%204%2047%20108%20-25%2074%20-33%2073%20116%2018%20232%20-85%20457%20-61%20683%2073%20325%20192%20472%20217%20675%20114%20153%20-77%20187%20-120%20254%20-319%2070%20-207%2059%20-251%20-74%20-299%20-176%20-64%20-282%2012%20-112%2081%20145%2057%20113%20165%20-40%20138%20-29%20-5%20-53%20-9%20-53%20-7%200%201%206%2014%2014%2029%2018%2035%2038%20152%2034%20196%20-7%2081%20-127%20-81%20-143%20-195%20-8%20-49%20-8%20-49%20-39%20-13%20-56%2064%20-104%2058%20-92%20-12%209%20-61%2025%20-88%2067%20-115%2043%20-29%2059%20-54%2050%20-78%20-7%20-20%20-237%2081%20-234%20104%201%207%209%2031%2017%2053%2025%2067%2014%20167%20-23%20189%20-14%209%20-60%20-62%20-81%20-125%20-17%20-51%20-17%20-51%20-24%20-17%20-7%2037%20-67%20121%20-109%20152%20-68%2050%20-90%20-66%20-34%20-177%2033%20-65%2033%20-65%20-63%20-69%20-90%20-3%20-180%20-33%20-180%20-59%200%20-41%20194%20-70%20279%20-40%2091%2032%20143%2023%20219%20-37%2021%20-17%2064%20-41%2095%20-52%2065%20-25%2070%20-38%2026%20-75%20-32%20-26%20-32%20-26%20-58%20-2%20-37%2035%20-149%2065%20-191%2052%20-38%20-12%2013%20-105%2059%20-105%2034%200%2092%20-22%20118%20-44%2030%20-26%2028%20-27%20-48%20-40%20-65%20-11%20-104%20-65%20-103%20-142%201%20-80%203%20-82%2056%20-51%2053%2031%2096%2077%20133%20141%2028%2049%2028%2049%2046%20-22%2034%20-133%2045%20-137%2078%20-28%2026%2085%2026%20131%201%20181%20-35%2068%20-27%2075%2078%2075%2068%20-1%20129%20-18%20257%20-73%2033%20-15%2074%20-27%2092%20-27%20120%20-1%20201%20-371%20210%20-960%206%20-380%20-4%20-483%20-72%20-712%20-190%20-643%20-205%20-708%20-244%20-1033%20-37%20-312%20-62%20-663%20-81%20-1160%20-6%20-148%20-15%20-382%20-21%20-519%20-9%20-224%20-9%20-251%206%20-265%2027%20-27%20159%20-26%20325%202%2080%2014%20170%2029%20202%2032%20l56%207%200%20797%20c-1%201198%2015%201427%20138%202036%2067%20333%2077%20506%2044%20745%20-5%2036%20-16%20137%20-25%20225%20-32%20313%20-106%20707%20-171%20909%20-55%20170%20-72%20447%20-31%20510%209%2013%2036%2037%2060%2053%2043%2030%2043%2030%2090%20-13%2063%20-57%20201%20-101%20213%20-69%2013%2034%20-8%2088%20-53%20136%20-46%2049%20-46%2049%2024%2049%2066%200%20145%2033%20168%2070%2024%2039%20-153%2037%20-235%20-3%20-67%20-32%20-68%20-31%20-41%2039%2025%2065%2027%20116%206%20134%20-29%2024%20-87%20-50%20-95%20-120%20-5%20-45%20-5%20-45%20-65%20-66%20-33%20-11%20-82%20-35%20-110%20-52%20-50%20-31%20-50%20-31%20-59%2068%20-11%20125%201%20163%2082%20247%20114%20119%20170%20137%20211%2068%2023%20-40%2049%20-52%20128%20-62%2056%20-6%2056%20-6%2051%2055%20-7%2069%20-20%2093%20-72%20128%20-58%2040%20-41%2054%2064%2054%2073%200%20170%2076%20170%20132%200%2020%20-156%208%20-202%20-15%20-45%20-23%20-45%20-23%20-35%2013%2013%2045%2014%20247%201%20260%20-27%2027%20-116%20-67%20-166%20-177%20-31%20-68%20-31%20-68%20-46%20-14%20-16%2057%20-80%20137%20-104%20129%20-54%20-18%20-61%20-235%20-9%20-279%2045%20-37%2040%20-48%20-56%20-127%20-49%20-39%20-101%20-85%20-118%20-102%20-52%20-55%20-80%20-65%20-115%20-40%20-15%2011%20-61%2034%20-102%2051%20-220%2093%20-204%20288%2039%20472%20148%20112%20210%20190%20229%20292%2012%2063%20114%20125%20209%20125%2034%200%2085%2021%2085%2035%200%2030%20-29%2038%20-130%2033%20-119%20-6%20-119%20-6%20-45%2086%2096%20121%2071%20158%20-45%2066%20-50%20-40%20-50%20-40%20-50%2033%200%20132%20-48%20119%20-58%20-16%20-5%20-68%20-5%20-68%20-27%20-47%20-35%2033%20-114%2050%20-143%2031%20-22%20-13%207%20-59%2077%20-124%2061%20-56%2061%20-56%2016%20-144%20-73%20-147%20-187%20-255%20-292%20-278%20-27%20-5%20-33%20-3%20-33%209%200%209%20-11%2049%20-25%2088%20-46%20130%20-30%20168%2068%20165%2060%20-2%20146%2037%20147%2065%201%2038%20-122%2076%20-174%2054%20-53%20-22%20-56%20-21%20-45%2016%2019%2068%20-3%20162%20-46%20198%20-38%2032%20-77%20-134%20-49%20-209%2018%20-50%20-5%20-177%20-34%20-195%20-18%20-11%20-222%20248%20-222%20282%200%208%2018%2031%2040%2049%2047%2040%2095%20117%2086%20138%20-12%2032%20-104%2019%20-142%20-19%20-41%20-41%20-41%20-34%20-9%2074%2022%2075%2033%20160%2020%20160%20-28%200%20-106%20-67%20-121%20-104%20-19%20-44%20-19%20-44%20-47%207%20-50%2092%20-77%20112%20-95%2072z%22/%3E%3C/g%3E%3C/svg%3E");
  --tree-mask-2: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20729%22%3E%3Cg%20transform=%22translate(0.000000,729.000000)%20scale(0.100000,-0.100000)%22%20fill=%22%23000%22%3E%3Cpath%20d=%22M4700%207242%20c0%20-21%2011%20-76%2025%20-122%2032%20-108%2032%20-115%20-9%20-74%20-38%2038%20-130%2051%20-142%2019%20-9%20-22%2041%20-100%2086%20-136%2049%20-39%2049%20-53%205%20-119%20-48%20-71%20-177%20-220%20-187%20-214%20-29%2018%20-52%20145%20-34%20195%2028%2075%20-11%20241%20-49%20209%20-43%20-36%20-65%20-130%20-46%20-198%2011%20-37%2011%20-37%20-46%20-16%20-73%2028%20-206%20-32%20-158%20-71%2045%20-36%20101%20-55%20147%20-49%2080%2011%2096%20-40%2053%20-161%20-13%20-38%20-25%20-78%20-25%20-88%200%20-16%20-5%20-17%20-32%20-12%20-96%2020%20-216%20129%20-282%20254%20-39%2076%20-31%2073%20-138%2049%20-48%20-10%20-48%20-10%20-20%20-37%2018%20-16%2032%20-42%2036%20-66%2012%20-65%2065%20-152%20128%20-210%2059%20-55%2059%20-55%20100%20-25%2050%2037%2054%2035%2062%20-41%205%20-52%2012%20-68%2041%20-101%2020%20-21%2041%20-50%2047%20-64%2010%20-22%2017%20-24%2075%20-24%2034%200%2063%20-4%2063%20-9%200%20-14%20-50%20-84%20-75%20-106%20-13%20-11%20-29%20-38%20-34%20-61%20-6%20-22%20-22%20-50%20-35%20-63%20-22%20-20%20-23%20-28%20-18%20-83%205%20-61%205%20-61%20-54%20-54%20-32%204%20-72%2013%20-88%2021%20-26%2013%20-32%2013%20-53%20-1%20-26%20-16%20-103%2019%20-103%2047%200%2014%20-76%20-48%20-106%20-88%20-25%20-33%20-25%20-34%20-8%20-78%2013%20-36%2015%20-62%2010%20-130%20-7%20-82%20-2%20-97%2021%20-74%205%205%2039%2020%2074%2032%2064%2022%2064%2022%2069%2067%208%2070%2066%20144%2095%20120%2021%20-18%2019%20-69%20-6%20-134%20-27%20-70%20-26%20-71%2041%20-39%2061%2030%20173%2043%20207%2024%2015%20-8%2032%20-6%2071%209%20134%2051%20238%2046%20378%20-20%2049%20-23%2098%20-45%20109%20-50%2011%20-4%2069%20-37%20130%20-74%20217%20-132%20449%20-156%20678%20-71%20139%2052%20147%2053%20121%204%20-17%20-35%20-24%20-125%20-10%20-147%2026%20-43%20126%2070%20126%20143%200%2055%200%2055%2034%2033%2034%20-22%2034%20-22%203%20-66%20-54%20-75%20-49%20-252%207%20-252%2025%200%2038%2030%2050%20115%20l11%2085%2069%20-46%20c96%20-64%20231%20-109%20268%20-87%2017%209%20-19%2068%20-77%20121%20-64%2060%20-91%2072%20-166%2072%20-36%200%20-62%2029%20-26%2030%2091%203%20261%2057%20297%2095%2027%2029%2026%2029%20-77%2044%20-150%2022%20-230%2016%20-269%20-23%20-33%20-33%20-33%20-33%20-55%20-10%20-27%2029%203%2070%20132%20179%2087%2073%2087%2073%20108%2045%2029%20-40%2097%20-78%20162%20-90%2054%20-11%20159%20-4%20159%2010%200%2029%20-119%20104%20-207%20130%20-51%2015%20-49%2011%20-19%2058%2014%2020%2026%2053%2027%2072%205%2064%20-1%20110%20-13%20110%20-19%200%20-95%20-86%20-109%20-124%20-16%20-44%20-23%20-45%20-39%20-6%20-16%2039%20-67%20110%20-79%20110%20-14%200%20-24%20-143%20-13%20-193%209%20-45%209%20-45%20-52%20-67%20-34%20-12%20-85%20-35%20-113%20-50%20-72%20-38%20-77%201%20-10%2076%2062%2071%2087%20105%2087%20120%200%2036%20-117%20-5%20-136%20-46%20-9%20-21%20-11%20-20%20-34%2017%20-31%2047%20-127%20103%20-141%2082%20-12%20-20%20-22%20-115%20-15%20-144%208%20-31%20-23%20-33%20-119%20-11%20-77%2018%20-77%2017%20-16%20-44%2055%20-55%20129%20-94%20201%20-106%2045%20-7%2045%20-7%20-23%20-25%20-173%20-44%20-230%20-35%20-439%2071%20-112%2057%20-134%2071%20-122%2081%208%207%2031%2042%2051%2078%2020%2036%2056%2090%2079%20119%2024%2028%2057%2077%2074%20107%2041%2071%2058%2084%20230%20167%20264%20126%20333%20129%20695%2023%20160%20-47%20160%20-47%20280%20-42%20140%206%20154%202%20214%20-74%2047%20-60%2048%20-60%2021%20-84%20-19%20-17%20-41%20-80%20-54%20-153%20-6%20-35%2028%20-25%20107%2030%2021%2015%2027%2016%2027%205%200%20-62%20121%20-211%20190%20-235%2030%20-11%2030%20-11%2030%2051%200%2072%20-22%20167%20-51%20215%20-10%2018%20-19%2034%20-19%2035%200%202%2026%203%2058%202%2086%200%20137%2037%2095%2071%20-41%2034%20-128%2065%20-203%2072%20-57%206%20-65%2010%20-68%2029%20-2%2013%20-24%2040%20-49%2060%20-46%2038%20-46%2038%208%2045%20145%2017%20198%207%20248%20-46%2084%20-90%20312%20-151%20347%20-94%2011%2017%20-118%20131%20-193%20172%20-78%2042%20-90%2055%20-44%2048%20163%20-24%20318%2080%20337%20226%208%2061%208%2061%20-107%2037%20-138%20-29%20-180%20-46%20-226%20-88%20-52%20-48%20-52%20-48%20-65%2050%20-12%2093%20-34%20139%20-87%20184%20-49%2043%20-131%2075%20-142%2057%20-14%20-22%20-22%20-118%20-16%20-185%206%20-65%206%20-65%20-33%20-29%20-37%2033%20-114%2066%20-126%2053%20-50%20-50%20-6%20-165%2081%20-210%2040%20-20%2040%20-20%20-55%20-43%20-250%20-60%20-398%20-45%20-596%2059%20-33%2018%20-39%2015%2089%2036%20153%2026%20289%20110%20234%20146%20-69%2045%20-167%2057%20-264%2032%20-57%20-15%20-57%20-15%20-10%2045%2048%2060%2093%2085%20170%2092%2079%208%20166%2038%20204%2071%2066%2056%20-129%20111%20-204%2057%20-39%20-28%20-44%20-14%20-18%2058%2030%2085%2012%20166%20-54%20240%20-61%2070%20-105%20-37%20-99%20-243%203%20-111%202%20-114%20-25%20-148%20-15%20-19%20-37%20-49%20-50%20-66%20-28%20-42%20-33%20-41%20-41%207%20-12%2077%20-101%20137%20-124%2084%20-19%20-41%20-14%20-144%2013%20-245%2013%20-51%2025%20-100%2025%20-107%200%20-10%20-27%20-11%20-122%20-6%20-150%207%20-378%20-58%20-460%20-133%20-45%20-41%20-31%2092%2023%20208%2034%2074%2033%2073%20124%2084%2054%207%20145%2042%20145%2056%200%2015%20-103%2078%20-137%2085%20-23%205%20-44%200%20-73%20-15%20-49%20-25%20-49%20-21%20-4%2055%2067%20111%2082%20118%20195%2089%2088%20-23%20186%2025%20220%20107%2023%2057%20-75%2076%20-203%2040%20-38%20-11%20-68%20-18%20-68%20-15%200%202%2012%2027%2027%2056%2031%2061%2037%20137%2012%20162%20-21%2021%20-82%20-44%20-124%20-132%20-28%20-58%20-28%20-58%20-65%20-20%20-54%2053%20-84%2051%20-75%20-5%209%20-56%2037%20-120%2064%20-147%2022%20-22%2022%20-22%20-21%20-64%20-24%20-23%20-52%20-61%20-62%20-84%20-24%20-54%20-22%20-54%20-98%2011%20-74%2063%20-97%2076%20-133%2076%20-51%200%20-14%20-90%2054%20-128%2060%20-34%2068%20-49%2031%20-57%20-35%20-8%20-103%20-62%20-94%20-76%203%20-5%2039%20-9%2080%20-9%2086%200%2083%2010%2039%20-130%20-13%20-41%20-31%20-112%20-39%20-158%20-10%20-55%20-26%20-102%20-48%20-140%20l-33%20-57%20-6%2070%20c-5%2061%20-29%20135%20-45%20135%20-50%200%20-104%20-62%20-104%20-122%20-1%20-33%20-1%20-33%20-21%204%20-28%2055%20-52%2066%20-149%2070%20-85%203%20-85%203%20-88%20-36%20-5%20-54%2011%20-79%2085%20-138%2091%20-72%20102%20-98%2024%20-57%20-89%2047%20-133%2044%20-184%20-10%20-57%20-62%20-9%20-92%20170%20-107%20118%20-9%20130%20-22%2073%20-74%20-56%20-50%20-65%20-49%20-240%2020%20-70%2027%20-148%2053%20-173%2056%20-44%206%20-44%206%20-51%2093%20-6%2062%20-16%20105%20-37%20153%20-32%2074%20-32%2079%2018%20144%2013%2017%2037%2069%2054%20115%2039%20106%2058%20137%20108%20174%2036%2026%20121%20138%20137%20179%203%208%2028%2017%2056%2020%20114%2015%20323%20148%20266%20169%20-29%2011%20-150%20-8%20-198%20-32%20-38%20-18%20-38%20-18%20-44%204%20-3%2013%20-8%2030%20-12%2038%20-3%209%2013%2035%2040%2066%2075%2084%2093%20142%2064%20206%20-20%2045%20-49%2019%20-111%20-100%20-9%20-16%20-16%20-24%20-17%20-17%20-1%2036%20-36%2084%20-81%20112%20-61%2037%20-59%2038%20-59%20-8z%22/%3E%20%3Cpath%20d=%22M3874%207068%20c-23%20-37%20-22%20-88%202%20-82%2042%2011%2028%20-27%20-44%20-115%20-19%20-23%20-28%20-42%20-22%20-46%2017%20-10%2011%20-25%20-10%20-25%20-11%200%20-20%20-4%20-20%20-9%200%20-4%2044%20-6%2098%20-4%20104%206%20164%2042%20209%20127%2031%2059%20-82%2063%20-144%204%20-23%20-21%20-23%20-21%20-23%2028%200%2082%20-27%20153%20-46%20122z%22/%3E%20%3Cpath%20d=%22M3740%206950%20c0%20-46%201%20-47%2040%20-18%2030%2022%2030%2022%202%2040%20-38%2025%20-42%2023%20-42%20-22z%22/%3E%20%3Cpath%20d=%22M3597%206783%20c-14%20-13%20-6%20-30%2017%20-41%2021%20-9%2025%20-8%2029%209%206%2024%20-30%2049%20-46%2032z%22/%3E%20%3Cpath%20d=%22M3707%206307%20c-31%20-31%20-48%20-58%20-59%20-97%20-15%20-55%20-15%20-55%20-50%2020%20-56%20118%20-53%20116%20-120%2067%20-61%20-46%20-64%20-59%20-38%20-162%207%20-31%207%20-31%20-39%20-8%20-57%2030%20-71%2027%20-87%20-17%20-31%20-87%20-22%20-99%2076%20-104%2084%20-4%2095%20-11%2056%20-40%20-98%20-70%20-98%20-93%20-1%20-134%2075%20-31%2075%20-31%20100%209%2029%2045%2051%2049%20101%2018%2033%20-20%2033%20-20%2098%2032%2066%2052%2066%2052%2026%2081%20-48%2036%20-50%2053%20-9%2087%2043%2037%2051%20119%2020%20220%20-25%2084%20-21%2082%20-74%2028z%22/%3E%20%3Cpath%20d=%22M4150%205415%20c24%20-25%2024%20-25%2047%20-3%2030%2028%2030%2028%20-24%2028%20-46%200%20-46%200%20-23%20-25z%22/%3E%20%3Cpath%20d=%22M3396%205367%20c-46%20-69%20-33%20-116%2028%20-107%2061%209%2061%2010%2032%2068%20-32%2063%20-41%2069%20-60%2039z%22/%3E%20%3Cpath%20d=%22M3922%205337%20c-23%20-16%20-50%20-40%20-59%20-53%20-42%20-65%20-24%20-337%2035%20-524%2022%20-69%2043%20-143%2047%20-165%209%20-46%2024%20-81%2025%20-55%202%2074%2050%20140%20102%20140%2018%200%2060%2012%2093%2027%20128%2055%20189%2072%20257%2073%20105%200%20113%20-7%2078%20-75%20-25%20-50%20-25%20-96%200%20-176%2036%20-114%2045%20-111%2079%2023%20l19%2072%2031%20-56%20c52%20-92%20163%20-180%20179%20-141%2036%2090%20-16%20183%20-117%20204%20-55%2011%20-55%2011%20-28%2035%2026%2022%2084%2044%20118%2044%2050%200%2098%2095%2054%20106%20-46%2012%20-161%20-22%20-193%20-56%20-19%20-21%20-19%20-21%20-51%205%20-43%2037%20-39%2051%2023%2074%2030%2011%2076%2036%20101%2055%2077%2059%20125%2067%20216%2035%2087%20-30%20279%20-1%20279%2042%200%2025%20-88%2053%20-180%2057%20-96%204%20-96%204%20-63%2069%2055%20108%2035%20223%20-31%20180%20-41%20-27%20-105%20-114%20-112%20-153%20-7%20-36%20-7%20-36%20-24%2015%20-21%2063%20-67%20134%20-81%20125%20-39%20-24%20-48%20-119%20-19%20-196%2011%20-28%2018%20-54%2015%20-56%20-2%20-2%20-55%20-28%20-117%20-57%20-111%20-53%20-113%20-53%20-121%20-32%20-7%2018%20-2%2027%2025%2050%2070%2060%2078%2070%2088%20105%2027%2099%20-42%20128%20-94%2039%20-19%20-32%20-19%20-32%20-32%2030%20-20%2095%20-99%20213%20-142%20213%20-19%200%2018%20-210%2041%20-239%2010%20-12%203%20-13%20-45%20-7%20-70%209%20-138%20-7%20-138%20-32%200%20-36%2048%20-90%2097%20-108%20167%20-61%2075%20-138%20-100%20-84%20-136%2042%20-156%2096%20-97%20272%2036%20107%2036%20104%206%20112%20-13%203%20-46%2025%20-72%2049%20-49%2043%20-49%2043%20-92%2014z%22/%3E%20%3Cpath%20d=%22M3601%204333%20c-66%20-382%20-71%20-436%20-71%20-910%200%20-422%207%20-539%2039%20-683%208%20-39%2023%201%20106%20288%2093%20327%2089%20951%20-11%201415%20-9%2042%20-20%2077%20-24%2077%20-4%200%20-21%20-84%20-39%20-187z%22/%3E%20%3Cpath%20d=%22M3987%202580%20c-36%20-229%20-45%20-302%20-57%20-479%20-18%20-260%20-29%20-1032%20-23%20-1548%206%20-491%206%20-491%20-28%20-495%20-68%20-7%20160%20-43%20273%20-43%20152%200%20141%20-22%20129%20281%20-6%20137%20-15%20371%20-21%20519%20-33%20841%20-84%201339%20-175%201680%20-74%20279%20-68%20273%20-98%2085z%22/%3E%3C/g%3E%3C/svg%3E");
}

.tree {
  position: absolute; z-index: 0; pointer-events: none;
  aspect-ratio: 760 / 729;
}
.tree i {
  position: absolute; inset: 0; display: block;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.tree i:nth-child(1) {
  background-color: var(--tree-1);
  -webkit-mask-image: var(--tree-mask-1); mask-image: var(--tree-mask-1);
}
.tree i:nth-child(2) {
  background-color: var(--tree-2);
  -webkit-mask-image: var(--tree-mask-2); mask-image: var(--tree-mask-2);
}
/* Le conteneur porte l'opacité de la partie la plus forte (la verte, rehaussée),
   et la partie turquoise est ramenée à son niveau. Une opacité CSS ne pouvant
   pas dépasser 1, c'est le seul moyen d'appliquer deux niveaux distincts. */
.tree i:nth-child(1) { opacity: calc(1 / var(--tree-2-boost)); }
/* Sur fond turquoise, les deux parties changent de couleur. Le vert y ressort
   davantage que sur fond clair : le rééquilibrage y est plus léger. */
.tree--dark { --tree-2-boost: 1.2; }
.tree--dark i:nth-child(1) { background-color: var(--tree-1-dark); }
.tree--dark i:nth-child(2) { background-color: var(--tree-2-dark); }

/* Si les masques CSS ne sont pas gérés, rien ne s'affiche plutôt qu'un aplat */
@supports not ((-webkit-mask-image: url("#x")) or (mask-image: url("#x"))) {
  .tree { display: none; }
}

/* Emplacements */
.tree--hero   { right: -7%; top: -10%; width: min(560px, 52%); opacity: min(1, calc(var(--tree-hero) * var(--tree-2-boost))); }
.tree--quote  { left: -8%; top: -12%; width: min(460px, 42%); opacity: min(1, calc(var(--tree-quote) * var(--tree-2-boost))); }
.tree--cta    { right: -5%; top: -6%;  width: min(420px, 44%); opacity: min(1, calc(var(--tree-cta) * var(--tree-2-boost))); }
.tree--footer { right: -4%; top: -14%; width: min(450px, 38%); opacity: min(1, calc(var(--tree-footer) * var(--tree-2-boost))); }

/* Les conteneurs doivent rogner le motif et garder le contenu au-dessus */
.section--teal { position: relative; overflow: hidden; }
.section--teal > *:not(.tree) { position: relative; z-index: 1; }

@media (max-width: 700px) {
  /* Sur petit écran le texte occupe toute la largeur : on recule le motif
     vers la marge droite et on réduit l'intensité. */
  .tree--hero   { width: 76%; right: -32%; top: -6%; opacity: min(1, calc(.10 * var(--tree-2-boost))); }
  .tree--quote  { display: none; }
  .tree--footer { width: 66%; right: -26%; top: -8%; opacity: min(1, calc(.10 * var(--tree-2-boost))); }
  .tree--cta    { width: 64%; right: -18%; opacity: min(1, calc(.14 * var(--tree-2-boost))); }
}

/* ---------- 7. Cartes & composants ---------- */
.card {
  background: var(--white); border-radius: var(--radius-l);
  padding: clamp(1.4rem, 3vw, 2.1rem);
  box-shadow: var(--shadow-s); border: 1px solid var(--line);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.card--hover:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.card h3 { margin-bottom: .5rem; }
.card p { color: var(--ink-soft); }

.card-icon {
  width: 54px; height: 54px; border-radius: 18px;
  display: grid; place-items: center; margin-bottom: 1.1rem;
  background: var(--teal-100); color: var(--teal-700);
}
.card-icon--rose { background: var(--rose-100); color: var(--rose-700); }
.card-icon--leaf { background: var(--leaf-100); color: var(--leaf-700); }

/* Valeurs */
.value-card { border-top: 5px solid var(--rose-600); }
.value-card:nth-child(2n) { border-top-color: var(--leaf-500); }
.value-card:nth-child(3n) { border-top-color: var(--teal-700); }
.value-card h3 { font-family: var(--font-body); font-weight: 900; letter-spacing: .04em; text-transform: uppercase; font-size: var(--step-0); color: var(--teal-900); }
.value-card p { font-size: var(--step-0); margin: 0; }

/* Chiffres clés */
.stats { display: grid; gap: 1px; background: var(--line); border-radius: var(--radius-l); overflow: hidden; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); border: 1px solid var(--line); }
.stat { background: var(--white); padding: clamp(1.3rem, 3vw, 2rem) 1.1rem; text-align: center; }
.stat b { display: block; font-family: var(--font-display); font-size: clamp(1.9rem, 4vw, 2.9rem); color: var(--rose-600); line-height: 1; margin-bottom: .35rem; }
.stat span { font-size: var(--step--1); color: var(--ink-soft); font-weight: 700; letter-spacing: .02em; }

/* Principes pédagogiques */
.principle {
  display: grid; gap: 1rem 1.6rem; align-items: start;
  grid-template-columns: auto 1fr;
  padding: clamp(1.3rem, 3vw, 2rem) 0;
  border-bottom: 1px solid var(--line);
}
.principle:last-child { border-bottom: 0; }
.principle-num {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 600;
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center; flex: none;
  background: var(--rose-050); color: var(--rose-600);
}
.principle h3 { font-size: var(--step-1); margin-bottom: .5rem; }
.principle blockquote {
  margin: 0 0 .9rem; padding-left: 1rem;
  border-left: 3px solid var(--leaf-500);
  font-weight: 700; color: var(--teal-700); font-style: italic;
}
.principle p { color: var(--ink-soft); margin-bottom: 0; }

/* Listes stylées */
.list-check { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.list-check li { position: relative; padding-left: 2.1rem; color: var(--ink-soft); }
.list-check li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--leaf-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d9012' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.list-check strong { color: var(--teal-900); }

.list-dot { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.list-dot li { position: relative; padding-left: 1.5rem; color: var(--ink-soft); }
.list-dot li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--rose-600);
}

/* Citation */
.quote {
  background: var(--white); border-radius: var(--radius-l);
  padding: clamp(1.6rem, 4vw, 2.8rem);
  border: 1px solid var(--line); box-shadow: var(--shadow-s);
  position: relative;
}
.quote::before {
  content: "“"; position: absolute; top: -.15em; left: .3em;
  font-family: var(--font-display); font-size: 5rem; color: var(--rose-100); line-height: 1;
}
.quote > * { position: relative; }
.quote cite { display: block; margin-top: 1rem; font-style: normal; font-weight: 800; color: var(--teal-700); font-size: var(--step--1); letter-spacing: .04em; text-transform: uppercase; }

/* Équipe */
.team-grid { display: grid; gap: clamp(1.2rem, 3vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.member { text-align: center; }
.member img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 20%;
  border-radius: var(--radius-l) var(--radius-l) var(--radius-s) var(--radius-s);
  box-shadow: var(--shadow-s); margin-bottom: 1rem;
  background: var(--sand);
}
.member h3 { font-size: var(--step-1); margin-bottom: .2rem; }
.member p { font-size: var(--step--1); color: var(--ink-mute); font-weight: 700; margin: 0; }

/* Galerie */
.gallery { display: grid; gap: clamp(.7rem, 2vw, 1.2rem); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.gallery a {
  display: block; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-s); background: var(--sand);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.gallery a:hover { transform: scale(1.02); box-shadow: var(--shadow); }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.gallery a:nth-child(4n+1) { grid-row: span 1; }

/* Calendrier */
.cal-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.cal-list li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .9rem;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-s); padding: .85rem 1.1rem;
}
.cal-list li.is-closure { border-left: 4px solid var(--rose-600); }
.cal-list li.is-day     { border-left: 4px solid var(--leaf-500); }
.cal-list li.is-open    { border-left: 4px solid var(--teal-500); }
.cal-label { font-weight: 800; color: var(--teal-900); flex: 1 1 220px; }
.cal-date  { font-weight: 800; color: var(--rose-600); }
.cal-note  { font-size: var(--step--1); color: var(--ink-mute); flex-basis: 100%; }

/* Encadré info */
.callout {
  border-radius: var(--radius-l); padding: clamp(1.3rem, 3vw, 2rem);
  background: var(--teal-050); border: 1px solid var(--teal-100);
}
.callout--rose { background: var(--rose-050); border-color: var(--rose-100); }
.callout--leaf { background: var(--leaf-100); border-color: #dcecbb; }
.callout h3 { margin-bottom: .5rem; }
.callout p:last-child { margin-bottom: 0; }

/* Contact / coordonnées */
.contact-card { display: grid; gap: 1.4rem; }
.contact-line { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start; }
.contact-line svg { color: var(--rose-600); margin-top: .2rem; flex: none; }
.contact-line b { display: block; color: var(--teal-900); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .07em; }
.contact-line a { font-weight: 700; }

.map-embed { border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow-s); border: 1px solid var(--line); }
.map-embed iframe { display: block; width: 100%; height: 380px; border: 0; }

/* Bandeau CTA */
.cta-band {
  background: linear-gradient(135deg, var(--teal-700), var(--teal-900));
  color: #fff; border-radius: var(--radius-xl);
  padding: clamp(2rem, 5vw, 3.5rem);
  position: relative; overflow: hidden;
}
.cta-band::after {
  content: ""; position: absolute; left: -90px; bottom: -130px;
  width: 280px; height: 280px; border-radius: 50%;
  background: rgba(147,192,31,.16);
}
.cta-band > *:not(.tree) { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.86); max-width: 55ch; }

/* Formulaire / Paperform */
.form-shell {
  background: var(--white); border-radius: var(--radius-l);
  border: 1px solid var(--line); box-shadow: var(--shadow-s);
  padding: clamp(1.2rem, 3vw, 2rem);
}
.form-shell { position: relative; }

/* Hauteur de la fenêtre du formulaire — ajustez ici si besoin */
.paperform-frame {
  --form-height: clamp(560px, 78vh, 940px);
  width: 100%;
  height: var(--form-height);
  border: 0;
  display: block;
  border-radius: var(--radius);
  background: var(--white);
}

/* Message de secours affiché uniquement si l'iframe n'a pas pu charger */
.form-shell.is-loaded #paperform-secours { display: none; }
#paperform-secours { margin-top: 1.2rem; }
.form-fallback {
  display: grid; gap: 1rem; text-align: center;
  padding: clamp(2rem, 5vw, 3.5rem) 1rem;
  border: 2px dashed var(--teal-100); border-radius: var(--radius);
  background: var(--teal-050);
}
.form-fallback code { background: var(--white); padding: .15em .45em; border-radius: 6px; font-size: .9em; color: var(--rose-700); }

/* Détails / accordéon */
details.faq {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.1rem 1.3rem; margin-bottom: .75rem;
}
details.faq summary {
  cursor: pointer; font-weight: 800; color: var(--teal-900);
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; font-size: 1.5rem; color: var(--rose-600); line-height: 1; flex: none; }
details.faq[open] summary::after { content: "–"; }
details.faq[open] summary { margin-bottom: .8rem; }
details.faq p:last-child { margin-bottom: 0; }

/* Ruban IBAN */
.iban {
  display: inline-flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: var(--step-1); font-weight: 700; letter-spacing: .04em;
  background: var(--white); color: var(--rose-600);
  border: 2px dashed var(--rose-100); border-radius: var(--radius-s);
  padding: .7rem 1.1rem;
}

/* Prose (blocs de texte long) */
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 1.8em; }
.prose h3 { margin-top: 1.4em; }
.prose blockquote {
  margin: 1.5em 0; padding: 1.2rem 1.5rem;
  background: var(--white); border-left: 4px solid var(--leaf-500);
  border-radius: 0 var(--radius) var(--radius) 0; color: var(--ink-soft);
}
.prose ul { padding-left: 1.2rem; color: var(--ink-soft); }
.prose li { margin-bottom: .5rem; }

/* ---------- 8. Pied de page ---------- */
.site-footer { position: relative; overflow: hidden; background: var(--teal-900); color: rgba(255,255,255,.78); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; margin-top: 0; }
.site-footer .wrap { position: relative; z-index: 1; }
.site-footer h2, .site-footer h3 { color: #fff; font-size: var(--step-1); }
.footer-grid { display: grid; gap: clamp(1.8rem, 4vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.site-footer a { color: rgba(255,255,255,.82); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-brand img { height: 54px; width: auto; margin-bottom: 1rem; }
.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.footer-bottom {
  margin-top: clamp(2rem, 5vw, 3rem); padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between;
  font-size: var(--step--1); color: rgba(255,255,255,.6);
}

/* ---------- 9. Animations ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- 10. Impression ---------- */
@media print {
  .site-header, .nav-toggle, .cta-band, .site-footer { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .quote { box-shadow: none; border: 1px solid #ccc; }
}