/* ============================================================
   CONTREPIED — S'engager pour un football pacifié
   Vert #67AC44 · noir & blanc · Gothiks (titres) · Montserrat
   Système éditorial : filets, index, colonnes sticky, offsets.
   ============================================================ */

:root {
  --vert: #67ac44;
  --noir: #0a0b0a;
  --encre: #161816;
  --blanc: #fdfdfc;
  --gris: #6a6f6a;
  --ligne: rgba(10, 11, 10, 0.14);
  --ligne-s: rgba(253, 253, 252, 0.16);

  --font-display: "gothiks", "Arial Narrow", sans-serif;
  --font-body: "Montserrat", "Helvetica Neue", sans-serif;

  --header-h: 5.1rem;
  --pad-x: clamp(1.25rem, 4vw, 4rem);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--encre);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

::selection { background: var(--vert); color: var(--blanc); }

img, svg { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
ul, ol { list-style: none; }

:focus-visible { outline: 2px solid var(--vert); outline-offset: 4px; }

/* libellé réservé aux lecteurs d'écran */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Loader ---------- */

.loader {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--noir);
  display: none;
  align-items: center;
  justify-content: center;
}
html.has-js .loader { display: flex; }
.loader .logo { font-size: 1.6rem; }

/* ---------- Typo ---------- */

.display {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.96;
  letter-spacing: 0.014em;
}

.display .line { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.display .line > span { display: inline-block; will-change: transform; }

.txt-vert { color: var(--vert); font-style: normal; }
.on-dark .txt-vert { color: var(--vert); }

.label {
  font-weight: 600;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--gris);
}

.lead {
  font-weight: 400;
  font-size: clamp(0.95rem, 1.4vw, 1.05rem);
  line-height: 1.8;
  max-width: 34em;
  color: var(--gris);
}
.lead strong { font-weight: 600; color: var(--encre); }

.muted { color: var(--gris); }

.on-dark { color: var(--blanc); }
.on-dark .label { color: rgba(253, 253, 252, 0.55); }
.on-dark .lead, .on-dark .muted { color: rgba(253, 253, 252, 0.66); }
.on-dark .lead strong { color: var(--blanc); }

/* ---------- Grain ---------- */

.grain { position: relative; isolation: isolate; }
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.12 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.grain > * { position: relative; z-index: 2; }

/* ---------- Layout ---------- */

.section { padding: clamp(4rem, 9vw, 8rem) var(--pad-x); position: relative; }
.section--dark { background: var(--noir); }

.wrap { max-width: 82rem; margin: 0 auto; }

/* En-tête de section : filet + index + titre */
.sec-head {
  border-top: 1px solid var(--ligne);
  padding-top: 1.1rem;
  margin-bottom: clamp(2.2rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
}
.on-dark .sec-head, .section--dark .sec-head { border-color: var(--ligne-s); }
.sec-head .idx { font-family: var(--font-display); font-weight: 700; font-size: 0.8rem; color: var(--vert); letter-spacing: 0.1em; }
.on-dark .sec-head .idx { color: var(--vert); }
.sec-head h2 { font-size: clamp(1.9rem, 4.6vw, 3.6rem); max-width: 14em; }
.sec-head .sec-note { max-width: 34em; }
@media (min-width: 900px) {
  .sec-head { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); align-items: start; }
  .sec-head .sec-note { justify-self: end; padding-top: 0.4rem; }
}

/* Split : colonne label sticky + contenu */
.split { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(3rem, 6vw, 6rem); }
  .split-side { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; }
}

/* ---------- Boutons ---------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  text-decoration: none;
  padding: 1em 1.9em;
  border-radius: 999px;
  border: 1px solid transparent;
  overflow: hidden;
  transition: color 0.35s, border-color 0.35s;
}
.btn > span { position: relative; z-index: 2; }
.btn::after {
  content: "";
  position: absolute;
  /* -1px : le remplissage doit couvrir la bordure, sinon un liseré de la couleur
     du bouton reste visible autour du vert au survol */
  inset: -1px;
  background: var(--vert);
  transform: translateY(101%);
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
  z-index: 1;
}
.btn:hover::after { transform: translateY(0); }
/* overflow:hidden rogne le remplissage à la boîte de padding : la bordure resterait
   visible en anneau (blanc sur .btn--blanc, noir sur .btn--noir). On la passe au vert
   en même temps. Ne pas remplacer par clip-path : il masquerait l'anneau de focus. */
.btn:hover { border-color: var(--vert); }

.btn--noir { background: var(--noir); color: var(--blanc); }
.btn--blanc { background: var(--blanc); color: var(--noir); }
.btn--blanc:hover { color: var(--blanc); }
.btn--outline { border-color: var(--ligne); color: var(--encre); background: transparent; }
.btn--outline:hover { color: var(--blanc); border-color: var(--vert); }
.on-dark .btn--outline, .hero .btn--outline { color: var(--blanc); border-color: rgba(253, 253, 252, 0.45); }

.btn-group { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; }

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 220;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 var(--pad-x);
  background: var(--blanc);
  border-top: 10px solid var(--vert);
  border-bottom: 1px solid var(--ligne);
  transition: transform 0.45s, box-shadow 0.3s;
}
.site-header.is-scrolled { box-shadow: 0 8px 30px rgba(10, 11, 10, 0.07); }
.site-header.is-hidden { transform: translateY(-100%); }

.logo {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  background: var(--vert);
  color: #fff;
  text-decoration: none;
  font-size: 1.05rem;
  line-height: 1;
  padding: 0.32em 0.5em 0.4em;
  letter-spacing: 0.03em;
  display: inline-block;
}

.main-nav { display: none; }
.header-actions { display: flex; align-items: center; gap: 1rem; }

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-decoration: none;
  color: var(--noir);
  border: 1px solid var(--ligne);
  border-radius: 999px;
  padding: 0.34em 0.7em 0.34em 0.4em;
  transition: border-color 0.2s, background-color 0.2s;
}
.lang-switch svg { width: 1.25rem; height: auto; border-radius: 2px; display: block; }
.lang-switch:hover { border-color: var(--noir); background: rgba(10, 11, 10, 0.04); }
body.nav-open .site-header .lang-switch { color: var(--blanc); border-color: rgba(253, 253, 252, 0.35); }
body.nav-open .site-header .lang-switch:hover { border-color: var(--blanc); background: rgba(253, 253, 252, 0.1); }

/* CTA de soutien, calé tout à droite de la barre (desktop uniquement :
   en mobile il ferait doublon avec le menu plein écran) */
.btn-soutien {
  display: none;
  align-items: center;
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--vert);
  color: var(--blanc);
  padding: 0.9em 1.5em;
  border-radius: 999px;
  transition: background-color 0.25s;
}
.btn-soutien:hover { background: var(--noir); }
@media (min-width: 900px) { .btn-soutien { display: inline-flex; } }
body.nav-open .btn-soutien { display: none; }

.nav-toggle {
  background: none;
  border: none;
  width: 2.75rem;
  height: 2.75rem;
  position: relative;
  z-index: 220;
  flex: none;
}
.nav-toggle span {
  position: absolute;
  left: 0.55rem;
  right: 0.55rem;
  height: 1.5px;
  background: var(--encre);
  transition: transform 0.35s, opacity 0.3s, background-color 0.3s;
}
.nav-toggle span:nth-child(1) { top: 1.13rem; }
.nav-toggle span:nth-child(2) { top: 1.62rem; }
body.nav-open .nav-toggle span { background: var(--blanc); }
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(0.25rem) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { transform: translateY(-0.24rem) rotate(-45deg); }

/* Menu plein écran */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 210;
  padding-top: var(--header-h);
  background: var(--noir);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--pad-x);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}
body.nav-open .nav-overlay { opacity: 1; pointer-events: auto; }
.nav-overlay a.nav-link {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2.4rem, 9vw, 5rem);
  line-height: 1.05;
  color: var(--blanc);
  text-decoration: none;
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  width: fit-content;
  transition: color 0.25s;
}
.nav-overlay a.nav-link i {
  font-style: normal;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: rgba(253, 253, 252, 0.4);
}
.nav-overlay a.nav-link:hover, .nav-overlay a.nav-link[aria-current="page"] { color: var(--vert); }
.nav-overlay .nav-foot {
  position: absolute;
  bottom: 1.6rem;
  left: var(--pad-x);
  right: var(--pad-x);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: rgba(253, 253, 252, 0.45);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}
@media (min-width: 700px) {
  .nav-overlay .nav-foot { flex-direction: row; justify-content: space-between; gap: 1rem; }
}

@media (min-width: 900px) {
  .main-nav { display: flex; align-items: center; gap: 2.2rem; }
  .main-nav a {
    font-weight: 700;
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--noir);
    transition: color 0.2s;
    position: relative;
  }
  .main-nav a:hover { color: var(--vert); }
  .main-nav a[aria-current="page"] { color: var(--noir); }
  .main-nav a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.5em;
    width: 1.4em;
    height: 2px;
    background: var(--vert);
  }
}

/* ---------- Hero (image de fond) ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--header-h) + 3rem) var(--pad-x) clamp(2rem, 4vw, 3rem);
  color: var(--blanc);
  background: var(--noir);
  overflow: hidden;
}
/* Hero d'accueil : contenu plus dense pour ne pas déborder sur les écrans 14" */
.hero--home { padding-top: calc(var(--header-h) + 1.25rem); }
.hero--home .hero-meta { margin-bottom: 0.8rem; }
.hero--home .hero-title { font-size: clamp(3.1rem, 7.4vw, 5.6rem); }
.hero--home .hero-main .lead { margin-top: 1rem; font-size: clamp(0.95rem, 1.5vw, 1.08rem); }
.hero--home .hero-main .btn-group { margin-top: 1.1rem; }
.hero--home .hero-foot { padding-top: clamp(0.9rem, 3vh, 1.75rem); }
@media (max-width: 640px) {
  .hero--home .btn { padding: 0.85em 1.5em; font-size: 0.66rem; }
}
/* Le mot final : un bandeau vert le recouvre de temps en temps (voir main.js) */
.hero--home .hero-title .txt-vert { display: inline-block; }
.hero--home .hero-title .pacifie-mot { position: relative; }
.hero--home .hero-title .pacifie-mot .pm-cover {
  position: absolute;
  inset: -0.04em -0.06em;
  display: flex;
  align-items: center;
  padding: 0 0.06em;
  color: var(--blanc);
  background: var(--vert);
  white-space: nowrap;
  clip-path: inset(0 100% 0 0);
  pointer-events: none;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10, 11, 10, 0.55) 0%, rgba(10, 11, 10, 0.1) 55%, rgba(10, 11, 10, 0.25) 100%),
    linear-gradient(180deg, rgba(10, 11, 10, 0.4) 0%, rgba(10, 11, 10, 0) 30%, rgba(10, 11, 10, 0.55) 100%);
}
.hero > :not(.hero-bg) { position: relative; z-index: 2; }

.hero-meta {
  display: flex;
  align-items: center;
  gap: 0.9rem 1.1rem;
  flex-wrap: wrap;
  margin-bottom: 1.2rem;
}
.hero-meta .label { color: var(--blanc); display: inline-flex; align-items: center; gap: 0.7em; }
.hero-meta .label.dim { color: rgba(253, 253, 252, 0.66); }
.hero-meta .label + .label::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--vert);
  flex: none;
}

.hero .lead { color: rgba(253, 253, 252, 0.92); }
.hero .lead strong { color: var(--blanc); }
.hero-main { max-width: 82rem; margin: auto; width: 100%; }
.hero-main .btn-group { margin-top: 1.8rem; }
.hero-main .lead { margin-top: 1.6rem; font-size: clamp(1rem, 1.7vw, 1.2rem); }

/* Menu ouvert : header transparent, liseré vert conservé, burger blanc */
body.nav-open .site-header {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}
body.nav-open .site-header .lang-switch { color: rgba(253, 253, 252, 0.7); }
body.nav-open .site-header .lang-switch:hover { color: var(--blanc); }
body.nav-open .site-header .nav-toggle span { background: var(--blanc); }

.hero-title {
  font-size: clamp(2.7rem, 9.2vw, 7.2rem);
  margin: clamp(2rem, 6vh, 4rem) 0;
}
.hero-title .l2 { margin-left: clamp(0px, 7vw, 9rem); }
.hero-title .l3 { margin-left: clamp(0px, 14vw, 18rem); }

.hero-foot {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-top: clamp(2rem, 6vh, 4rem);
}
@media (min-width: 820px) {
  .hero-foot { flex-direction: row; justify-content: space-between; align-items: flex-end; }
  .hero-foot .lead { max-width: 30em; }
}
.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(253, 253, 252, 0.7);
}
.scroll-cue::before {
  content: "";
  width: 3.5rem;
  height: 1px;
  background: var(--blanc);
  display: inline-block;
}
.scroll-cue .cue-arrow {
  width: 1.9rem;
  height: 1.9rem;
  border: 1px solid rgba(253, 253, 252, 0.45);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  animation: cueBob 1.8s ease-in-out infinite;
  transition: background-color 0.25s, border-color 0.25s;
}
.scroll-cue .cue-arrow svg { width: 0.7rem; height: auto; }
.scroll-cue:hover .cue-arrow { background: var(--vert); border-color: var(--vert); }
@keyframes cueBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* ---------- Section brassard ---------- */

.brassard-sec { position: relative; overflow: hidden; }
.brassard-sec.grain > .brassard-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.16;
  pointer-events: none;
}
.brassard-bg img { width: 100%; height: 100%; object-fit: cover; }
.brassard-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 820px) {
  .brassard-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); }
}
.brassard-visual { position: relative; }
.brassard-visual .produit {
  width: min(78%, 30rem);
  margin: 0 auto;
  transform: rotate(-8deg);
  filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.5));
  will-change: transform;
}
.brassard-sec .cta-line-white {
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ---------- CTA sur image ---------- */

.cta-img {
  position: relative;
  padding: clamp(6rem, 16vw, 12rem) var(--pad-x);
  color: var(--blanc);
  overflow: hidden;
  background: var(--noir);
}
.cta-img .cta-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.cta-img .cta-bg img { position: absolute; top: -10%; left: 0; width: 100%; height: 120%; object-fit: cover; will-change: transform; }
.cta-img .cta-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 11, 10, 0.55), rgba(10, 11, 10, 0.35) 50%, rgba(10, 11, 10, 0.65));
}
.cta-img .wrap { position: relative; z-index: 2; }
.hero-right { display: flex; flex-direction: column; gap: 1.6rem; align-items: flex-start; }

/* ---------- Image pleine largeur ---------- */

.full-img {
  position: relative;
  overflow: hidden;
  height: clamp(320px, 78vh, 720px);
}
.full-img img {
  width: 100%;
  height: 120%;
  object-fit: cover;
  will-change: transform;
}
.full-img .img-tag {
  position: absolute;
  z-index: 3;
  bottom: 1.2rem;
  left: var(--pad-x);
  color: var(--blanc);
  font-weight: 600;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.8em;
}
.full-img .img-tag::before { content: ""; width: 2.4rem; height: 1px; background: var(--blanc); }

/* ---------- Manifesto ---------- */

.recit-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) {
  .recit-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2.5rem, 6vw, 5.5rem); }
}
.recit-media { position: relative; }
.recit-media .img-frame { aspect-ratio: 3 / 4; }
.recit-media .recit-tag {
  position: absolute;
  z-index: 3;
  left: -0.6rem;
  bottom: 1.6rem;
  background: var(--vert);
  color: var(--blanc);
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.7em 1.1em;
}


/* Constat (accueil) & récit (à-propos) : déclaration en grand, puis le texte
   d'appui en colonne étroite décalée sous le titre. Pas de mise en colonnes
   côte à côte : les deux blocs n'ont jamais la même longueur et ça crée un trou. */
.constat { background: #f6f6f3; }
.constat-wrap > .label {
  display: block;
  border-top: 1px solid var(--ligne);
  padding-top: 1.1rem;
  margin-bottom: clamp(1.8rem, 4vw, 2.8rem);
}
.constat-titre {
  font-size: clamp(2rem, 5.4vw, 4rem);
  max-width: 13em;
}
.constat-corps { margin-top: clamp(2rem, 4.5vw, 3.2rem); max-width: 34em; }
.constat-corps p { color: var(--gris); font-size: clamp(0.95rem, 1.4vw, 1.05rem); line-height: 1.8; }
.constat-corps p + p { margin-top: 1.1rem; }
.constat-chute {
  margin-top: 1.8rem;
  border-left: 3px solid var(--vert);
  padding-left: 1.3rem;
  font-weight: 600;
  font-size: 1.05rem !important;
  line-height: 1.6 !important;
  color: var(--encre) !important;
}
@media (min-width: 900px) {
  /* le texte d'appui décalé sous la déclaration : respiration à gauche */
  .constat-corps { margin-left: 38%; }
}

/* Constat : « fatalité » se fait barrer d'un trait vert au scroll */
.cv-corr {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.9rem, 6.4vw, 4.6rem);
  line-height: 1.02;
  max-width: 14em;
}
.cv-corr .barre { position: relative; display: inline-block; }
.cv-corr .barre::after {
  content: "";
  position: absolute;
  left: -1%;
  right: -1%;
  top: 54%;
  height: 0.09em;
  background: var(--vert);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.cv-corr .barre.tracee::after { transform: scaleX(1); }
.cv-corr .suite { display: block; color: var(--vert); }
.cv-note { margin-top: clamp(1.8rem, 3.5vw, 2.6rem); max-width: 32em; color: var(--gris); line-height: 1.8; }
.cv-note strong { color: var(--encre); font-weight: 600; }

/* ---------- Cartes leviers (vertes) ---------- */

.lever-cards { display: grid; grid-template-columns: 1fr; gap: 1.2rem; }
@media (min-width: 820px) {
  .lever-cards { grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2.5vw, 2rem); align-items: stretch; }
}
.lever-card {
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  background: var(--vert);
  color: var(--blanc);
  border-radius: 6px;
  padding: clamp(1.6rem, 3vw, 2.2rem);
  min-height: clamp(18rem, 30vw, 24rem);
  display: flex;
  flex-direction: column;
  text-decoration: none;
}
.lever-card .lc-img { position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s; }
.lever-card .lc-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.lever-card .lc-img::after { content: ""; position: absolute; inset: 0; background: rgba(10, 11, 10, 0.55); }
.lever-card:hover .lc-img { opacity: 1; }
.lever-card:hover .lc-img img { transform: scale(1); }
.lever-card > :not(.lc-img) { position: relative; z-index: 2; }
.lever-card h3 {
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 0.95;
  margin-bottom: 0.9rem;
}
.lever-card p { font-size: 0.85rem; color: rgba(255, 255, 255, 0.92); max-width: 30em; }
.lever-card .lc-arrow {
  margin-top: auto;
  align-self: flex-end;
  width: 2.7rem;
  height: 2.7rem;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: background-color 0.3s, transform 0.3s;
}
.lever-card:hover .lc-arrow { background: var(--blanc); color: var(--noir); transform: rotate(-45deg); }

/* ---------- Bloc documentaire ---------- */

.doc-poster {
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  border-radius: 6px;
  aspect-ratio: 16 / 9;
  will-change: transform;
  cursor: pointer;
}
.doc-poster img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.doc-poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 11, 10, 0.25), transparent 40%, rgba(10, 11, 10, 0.7));
}
.doc-info {
  position: absolute;
  z-index: 2;
  left: clamp(1.2rem, 3vw, 2.2rem);
  bottom: clamp(1.2rem, 3vw, 2rem);
  color: var(--blanc);
}
.doc-info .label { color: var(--vert); display: block; margin-bottom: 0.4rem; }
.doc-info strong {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.3rem, 3.4vw, 2.4rem);
  line-height: 0.98;
  display: block;
  max-width: 16em;
}
.doc-play {
  position: absolute;
  z-index: 2;
  inset: 0;
  margin: auto;
  width: clamp(4rem, 9vw, 6rem);
  height: clamp(4rem, 9vw, 6rem);
  border-radius: 50%;
  background: var(--vert);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s;
}
.doc-poster:hover .doc-play { transform: scale(1.1); background: var(--blanc); }
.doc-play svg { width: 34%; margin-left: 8%; }
.doc-play svg path { fill: #fff; transition: fill 0.3s; }
.doc-poster:hover .doc-play svg path { fill: var(--noir); }

.video-modal {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(5, 6, 5, 0.94);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--pad-x);
}
.video-modal.open { display: flex; }
.vm-frame {
  position: relative;
  width: min(92vw, 62rem);
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: var(--noir);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.vm-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.28; filter: blur(6px); transform: scale(1.05); }
.vm-frame .vm-txt { position: relative; z-index: 2; color: var(--blanc); padding: 1rem; }
.vm-frame .vm-txt .logo { margin-bottom: 1rem; }
.vm-frame .vm-txt strong { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.4rem, 4vw, 2.6rem); display: block; line-height: 1; }
.vm-frame .vm-txt span { display: block; margin-top: 0.7rem; color: rgba(253, 253, 252, 0.7); font-size: 0.85rem; }
.vm-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 3;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  border: 1.5px solid rgba(253, 253, 252, 0.4);
  background: transparent;
  color: var(--blanc);
  font-size: 1.1rem;
  line-height: 1;
  transition: background-color 0.25s, color 0.25s;
}
.vm-close:hover { background: var(--blanc); color: var(--noir); }

/* ---------- Marquee logos partenaires ---------- */

.logo-marquee {
  overflow: hidden;
  border-top: 1px solid var(--ligne);
  border-bottom: 1px solid var(--ligne);
  padding: clamp(1.4rem, 3vw, 2rem) 0;
}
.logo-track { display: flex; align-items: center; width: max-content; will-change: transform; }
.logo-track .lm-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin-right: clamp(4rem, 11vw, 9rem);
  flex: none;
  height: clamp(40px, 6vw, 60px);
}
/* Logos partenaires : aucune opacité ni effet au survol. Les marques fournissent
   leur logo avec des règles d'usage, toute altération du rendu est à proscrire. */
.logo-track img {
  max-height: 100%;
  max-width: clamp(96px, 15vw, 160px);
  width: auto;
  height: auto;
  object-fit: contain;
}
.logo-track .lm-name {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(0.95rem, 2vw, 1.25rem);
  color: var(--encre);
  white-space: nowrap;
}

/* ---------- Bio : logos parcours ---------- */

.def-list dd { display: flex; align-items: center; gap: 0.9rem; }
.def-list dd .dd-logo {
  height: 28px;
  width: 3.4rem;
  object-fit: contain;
  object-position: left center;
  flex: none;
}
.def-list dd .logo { font-size: 0.6rem; padding: 0.35em 0.45em 0.42em; flex: none; width: 3.4rem; text-align: center; }

/* ---------- Manifesto : phrase clé ---------- */


/* ---------- Liste index (actions) ---------- */

.rows { border-top: 1px solid var(--ligne); }
.row-item {
  position: relative;
  display: grid;
  grid-template-columns: 2.6rem 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: clamp(1.4rem, 3.5vw, 2.4rem) 0;
  border-bottom: 1px solid var(--ligne);
  text-decoration: none;
}
.row-item .r-idx {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--vert);
  align-self: start;
  padding-top: 0.5em;
}
.row-item .r-title {
  font-size: clamp(1.9rem, 5.5vw, 4rem);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s;
}
.row-item .r-desc {
  grid-column: 2;
  color: var(--gris);
  font-size: 0.85rem;
  max-width: 42em;
  margin-top: 0.4rem;
}
.row-item .r-arrow {
  grid-row: 1;
  grid-column: 3;
  font-size: 1.4rem;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.row-item .r-img {
  display: none;
  position: absolute;
  right: 8%;
  top: 50%;
  width: clamp(200px, 20vw, 300px);
  aspect-ratio: 4 / 3;
  transform: translateY(-50%) rotate(3deg) scale(0.9);
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 3;
  transition: opacity 0.4s, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.row-item .r-img img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
  .row-item .r-img { display: block; }
  .row-item:hover .r-img { opacity: 1; transform: translateY(-50%) rotate(0deg) scale(1); }
  .row-item:hover .r-title { transform: translateX(1.2rem); color: var(--vert); }
  .row-item:hover .r-arrow { transform: translateX(0.5rem); }
}

/* ---------- Écharpe (marquee unique) ---------- */

.scarf-block { overflow: hidden; padding: clamp(1.4rem, 3vw, 2.2rem) 0; }
/* variante sombre : quand la bande est prise entre deux sections noires,
   un fond blanc coupe la page en deux */
.scarf-block--sombre { background: var(--noir); }
.scarf-row { display: flex; width: max-content; will-change: transform; }
.scarf-row img { height: clamp(28px, 3.6vw, 40px); width: auto; flex: none; }

/* ---------- Images / figures ---------- */

/* photos : coins légèrement arrondis. Les bannières pleine largeur (hero,
   fond brassard, CTA sur image) restent à angles droits.
   translateZ(0) est indispensable : les images à l'intérieur sont animées
   (parallaxe, zoom au survol) donc promues sur leur propre couche GPU, et une
   couche enfant échappe au rognage arrondi tant que le parent n'est pas promu
   lui aussi. Sans ça, les coins hauts redeviennent carrés pendant le scroll. */
.img-frame { overflow: hidden; position: relative; border-radius: 6px; transform: translateZ(0); }
.img-frame img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
/* Images en parallaxe : elles glissent de ±8 % dans leur cadre. Si elles font
   exactement la hauteur du cadre, le glissement découvre une bande vide en haut
   ou en bas, et le coin arrondi se retrouve sans image (bord qui paraît droit).
   On les agrandit donc légèrement, avec assez de marge des deux côtés. */
.img-frame[data-parallax] img {
  position: absolute;
  top: -10%;
  left: 0;
  height: 120%;
}

/* ---------- Laure ---------- */

.laure-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; }
@media (min-width: 900px) {
  .laure-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); gap: clamp(3rem, 7vw, 7rem); }
  .laure-grid > .img-frame { position: sticky; top: calc(var(--header-h) + 2rem); }
}
.laure-grid > .img-frame { aspect-ratio: 3 / 4; }

.big-quote { position: relative; padding-top: 2.4rem; }
.big-quote::before {
  content: "“";
  position: absolute;
  top: 0;
  left: -0.06em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 4.5rem;
  line-height: 1;
  color: var(--vert);
}
.big-quote p {
  font-weight: 300;
  font-size: clamp(1.3rem, 2.8vw, 1.9rem);
  line-height: 1.5;
}
.big-quote p strong { font-weight: 500; }
.big-quote cite {
  display: block;
  margin-top: 1.2rem;
  font-style: normal;
  font-weight: 600;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gris);
}

.def-list { border-top: 1px solid var(--ligne); margin-top: 2.4rem; }
.def-list > div {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: 1.4rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--ligne);
  align-items: baseline;
}
.def-list dt { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 0.82rem; color: var(--vert); letter-spacing: 0.06em; }
.def-list dd strong { font-weight: 600; font-size: 0.9rem; display: block; }
.def-list dd p { color: var(--gris); font-size: 0.8rem; }
.on-dark .def-list, .on-dark .def-list > div { border-color: var(--ligne-s); }
.on-dark .def-list dt { color: var(--vert); }

/* ---------- Portraits décalés ---------- */

.persons { display: grid; grid-template-columns: 1fr; gap: 2.2rem; }
/* mobile : en pleine largeur les portraits mangeaient deux écrans, on passe à deux colonnes */
@media (max-width: 699px) {
  .persons { grid-template-columns: repeat(2, 1fr); gap: 1.2rem 1rem; }
  .person figcaption { padding-top: 0.7rem; padding-bottom: 0.7rem; }
}
@media (min-width: 700px) {
  .persons { grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
}
/* Variante à deux portraits (ex. les parrains) : pas de décalage, largeur contenue */
.persons--pair { max-width: 34rem; }
@media (min-width: 700px) {
  .persons--pair { grid-template-columns: repeat(2, minmax(0, 15rem)); }
  .persons--pair > *:nth-child(2) { margin-top: 0; }
}
/* portraits carrés : les photos sont fournies en 1:1 avec du dégagement au-dessus
   de la tête, donc aucun rognage et aucun front coupé. */
.person .img-frame { aspect-ratio: 1 / 1; box-sizing: border-box; border: 3px solid transparent; transition: border-color 0.35s ease; }
/* le cadre est plus carré que les photos : on garde le haut du visage, sinon le front est coupé */
.person .img-frame img { object-position: 50% 0; transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.person:hover .img-frame { border-color: var(--vert); }
.person:hover .img-frame img { transform: scale(1.03); }
.person figcaption {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  padding-top: 0.9rem;
  border-bottom: 1px solid var(--ligne);
  padding-bottom: 0.9rem;
}
@media (min-width: 480px) {
  .person figcaption { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 1rem; }
}
.person figcaption strong { white-space: nowrap; }
.person figcaption strong { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 1rem; letter-spacing: 0.03em; }
.person figcaption span { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gris); }
.on-dark .person figcaption { border-color: var(--ligne-s); }
.on-dark .person figcaption span { color: rgba(253, 253, 252, 0.5); }

/* ---------- Tableaux fins (planning, partenaires, charte) ---------- */

.t-rows { border-top: 1px solid var(--ligne); }
.t-row {
  display: grid;
  grid-template-columns: 6rem 1fr auto;
  gap: 1.2rem;
  align-items: baseline;
  padding: 1.3rem 0;
  border-bottom: 1px solid var(--ligne);
}
.t-row .t-key { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(1rem, 2vw, 1.4rem); }
.t-row .t-val { font-weight: 500; font-size: 0.92rem; }
.t-row .t-note { color: var(--gris); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; }
.on-dark .t-rows, .on-dark .t-row { border-color: var(--ligne-s); }

/* ---------- Fiche / chips / timeline ---------- */

.chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 1.3rem 0; }
.chip {
  font-weight: 600;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--ligne);
  border-radius: 999px;
  padding: 0.55em 1.1em;
  color: var(--gris);
  transition: background-color 0.25s, border-color 0.25s, color 0.25s;
}
.chip:hover { background: var(--vert); border-color: var(--vert); color: var(--blanc); }

/* ---------- Axes détaillés (page actions) ---------- */

.axe {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.8rem;
  padding: clamp(2.5rem, 6vw, 4.5rem) 0;
  border-top: 1px solid var(--ligne);
}
@media (min-width: 900px) {
  .axe { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
}
.axe h3 { font-size: clamp(1.7rem, 3.6vw, 2.8rem); margin-bottom: 1rem; }
.axe .lead { margin-bottom: 1.4rem; }
.axe .a-media { overflow: hidden; }
.axe .a-media .img-frame { aspect-ratio: 4 / 3; }
.axe-list { border-top: 1px solid var(--ligne); }
.axe-list li { padding: 0.85rem 0; border-bottom: 1px solid var(--ligne); font-size: 0.86rem; }
.axe-list strong { font-weight: 600; }
.axe-list span { color: var(--gris); }

/* ---------- Contact ---------- */

.contact-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: start; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1.2fr 1fr; gap: clamp(3rem, 7vw, 7rem); } }

.form-field { border-bottom: 1px solid var(--ligne); padding: 1.2rem 0 0.7rem; }
.form-field label {
  display: block;
  font-weight: 600;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: 0.4rem;
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--encre);
  background: transparent;
  border: none;
  padding: 0.3em 0;
}
.form-field textarea { min-height: 7rem; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; }
.form-field:focus-within { border-color: var(--vert); }
.form-field:focus-within label { color: var(--vert); }
form .btn { margin-top: 2rem; }
form .btn:disabled { opacity: 0.6; cursor: default; }

/* piège à robots : champ invisible, jamais rempli par un visiteur humain */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-feedback { margin-top: 1rem; font-size: 0.85rem; }
.form-feedback.is-ok { color: var(--vert); }
.form-feedback.is-error { color: var(--gris); }

/* cibles d'ancrage : #partenaire / #presse mènent au formulaire, même sans JS */
.ancre { display: block; height: 0; scroll-margin-top: calc(var(--header-h) + 2rem); }

.contact-aside { border-top: 1px solid var(--ligne); }
.contact-line { padding: 1.6rem 0; border-bottom: 1px solid var(--ligne); }
.contact-line .label { display: block; margin-bottom: 0.9rem; }
.contact-line p { color: var(--gris); font-size: 0.85rem; max-width: 34em; }
.contact-mail {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.1rem, 2.6vw, 1.5rem);
  line-height: 1.1;
  color: var(--encre);
  text-decoration: none;
  word-break: break-word;
  transition: color 0.2s;
}
.contact-mail:hover { color: var(--vert); }
.contact-line .contact-mail + p { margin-top: 0.7rem; }

.contact-social { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.contact-social a {
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--ligne);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--encre);
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}
.contact-social a:hover { color: var(--blanc); background: var(--vert); border-color: var(--vert); }
.contact-social svg { width: 1.05rem; height: 1.05rem; display: block; }
.contact-handle {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--gris);
  text-decoration: none;
}
.contact-handle:hover { color: var(--vert); }

/* ---------- Nous soutenir : 3 raisons ---------- */

/* colonne de titre resserrée : les cartes ont besoin de largeur pour respirer */
@media (min-width: 900px) {
  .split--raisons { grid-template-columns: minmax(0, 15rem) minmax(0, 3fr); gap: clamp(2rem, 4vw, 4rem); }
}

.raisons { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 700px) { .raisons { grid-template-columns: repeat(3, 1fr); } }
.raison {
  background: var(--vert);
  color: var(--blanc);
  min-height: clamp(15rem, 24vw, 19rem);
  padding: 1.8rem 1.6rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.4rem;
}
.raison .num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 4.6vw, 3.2rem);
  line-height: 1;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid rgba(253, 253, 252, 0.45);
}
.raison p { font-size: 0.9rem; line-height: 1.55; margin-bottom: 1.1rem; }
.raison .btn { align-self: flex-start; }
/* fond vert : le bouton passe en blanc, et son remplissage au survol en noir
   (le remplissage vert par défaut serait invisible ici) */
.raison .btn--outline { color: var(--blanc); border-color: rgba(253, 253, 252, 0.55); }
.raison .btn--outline::after { background: var(--noir); }
.raison .btn--outline:hover { border-color: var(--noir); color: var(--blanc); }

/* ---------- Nous soutenir : montants ---------- */

.don-grid { display: grid; grid-template-columns: 1fr; gap: 1.4rem; }
@media (min-width: 760px) { .don-grid { grid-template-columns: repeat(3, 1fr); } }
.don-card {
  position: relative;
  border: 1px solid var(--ligne);
  border-radius: 4px;
  padding: 2.2rem 1.7rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: border-color 0.3s ease;
}
/* le brassard offert, posé dans l'angle libre de la carte */
.don-card .don-visuel {
  position: absolute;
  top: 1.1rem;
  right: -0.5rem;
  width: clamp(84px, 30%, 118px);
  transform: rotate(-10deg);
  pointer-events: none;
}
.don-card:hover { border-color: var(--vert); }
.don-card .don-montant {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 5.5vw, 3.4rem);
  line-height: 1;
  color: var(--encre);
}
/* Le coût réel après réduction est l'argument principal : il sort du texte courant
   pour devenir un bloc à part, calé juste au-dessus du bouton. */
.don-card .don-reel {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.9rem 1rem;
  background: rgba(103, 172, 68, 0.1);
  border-left: 3px solid var(--vert);
}
.don-card .don-reel .lib {
  font-weight: 600;
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gris);
}
.don-card .don-reel strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.6vw, 2.2rem);
  line-height: 1;
  color: var(--vert);
}
.don-saisie { display: flex; align-items: baseline; gap: 0.35rem; }
.don-saisie input,
.don-saisie .devise {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 5.5vw, 3.4rem);
  line-height: 1;
  color: var(--encre);
}
.don-saisie input {
  width: 3.6em;
  padding: 0 0 0.1rem;
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--vert);
  border-radius: 0;
  appearance: textfield;
  -moz-appearance: textfield;
}
.don-saisie input::-webkit-outer-spin-button,
.don-saisie input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.don-saisie input:focus { outline: none; border-bottom-color: var(--encre); }
.don-hint { font-size: 0.76rem; color: var(--gris); }
.don-plus {
  border-top: 1px solid var(--ligne);
  padding-top: 0.8rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--vert);
}
.don-card .don-reel strong { color: var(--vert); font-weight: 600; }
.don-card .btn { align-self: flex-start; }
.don-fiscal {
  margin-top: 1.6rem;
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--gris);
  max-width: 46em;
}
.via-helloasso {
  margin-top: 1.8rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.via-helloasso span {
  font-size: 0.76rem;
  color: var(--gris);
}
.via-helloasso img { height: 22px; width: auto; }
.don-card .don-tag {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  line-height: 1.1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vert);
}

/* ---------- Nous soutenir : le brassard ---------- */

.prix {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.2rem 0.9rem;
  margin-top: 2rem;
}
.prix b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 7vw, 4.2rem);
  line-height: 0.9;
  color: var(--vert);
}
.prix span {
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(253, 253, 252, 0.55);
}
.prix-note {
  margin-top: 1.2rem;
  font-size: 0.78rem;
  color: rgba(253, 253, 252, 0.55);
  max-width: 32em;
}

/* ---------- CTA final ---------- */

.cta-final { text-align: left; }
.cta-final h2 { font-size: clamp(2.2rem, 7vw, 5.5rem); }
.cta-final .lead { margin: 1.6rem 0 2.2rem; }

/* ---------- Footer ---------- */

.site-footer { background: var(--noir); color: var(--blanc); overflow: hidden; }
.footer-inner { padding: clamp(3rem, 6vw, 5rem) var(--pad-x) 0; max-width: 82rem; margin: 0 auto; }
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 820px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }

.footer-brand { grid-column: 1 / -1; }
@media (min-width: 820px) { .footer-brand { grid-column: auto; } }
.footer-brand p { color: rgba(253, 253, 252, 0.55); font-size: 0.82rem; max-width: 30em; margin-top: 1rem; }

.footer-col h4 {
  font-weight: 600;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(253, 253, 252, 0.4);
  margin-bottom: 1rem;
}
.footer-col li + li { margin-top: 0.5rem; }
.footer-col a {
  text-decoration: none;
  color: rgba(253, 253, 252, 0.75);
  font-size: 0.84rem;
  transition: color 0.2s;
}
.footer-col a:hover { color: var(--vert); }

.footer-social { display: flex; flex-wrap: wrap; gap: 0.6rem; }
/* en mobile la colonne « suivre » prend toute la largeur : les 4 icônes tiennent sur une ligne */
@media (max-width: 819px) { .footer-grid > .footer-col:last-child { grid-column: 1 / -1; } }
.footer-social a {
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--ligne-s);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(253, 253, 252, 0.75);
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}
.footer-social a:hover { color: var(--noir); background: var(--vert); border-color: var(--vert); }
.footer-social svg { width: 1.05rem; height: 1.05rem; display: block; }
.footer-handle {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

/* Crédit partenaires en tout petit, en bas du footer. Les logos exigent un fond
   clair (le « FONDATION » de Canal+ est noir) : ils sont posés sur une pastille
   blanche plutôt que retouchés. */
.footer-partenaires {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem 1.1rem;
  padding-bottom: 1.6rem;
}
.fp-label {
  font-weight: 600;
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(253, 253, 252, 0.35);
}
.fp-logos {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  background: var(--blanc);
  border-radius: 3px;
  padding: 0.45rem 0.8rem;
}
.fp-logos img { height: 16px; width: auto; }

.footer-bottom {
  border-top: 1px solid var(--ligne-s);
  padding: 1.2rem 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.8rem;
  color: rgba(253, 253, 252, 0.4);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
}
.footer-bottom a { color: inherit; text-decoration: none; }
.footer-bottom a:hover { color: var(--blanc); }

.footer-mark {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 15.2vw;
  line-height: 0.78;
  letter-spacing: 0.005em;
  text-align: center;
  color: var(--blanc);
  margin-top: 0.5rem;
  transform: translateY(0.14em);
  user-select: none;
}
.footer-mark .line { display: block; overflow: hidden; }
.footer-mark .line > span { display: inline-block; will-change: transform; }

/* ---------- Pages légales ---------- */

.legal { max-width: 46rem; }
.legal h2 {
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  margin-top: 3rem;
  margin-bottom: 1rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--ligne);
}
.legal h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.legal h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  margin-top: 1.6rem;
  margin-bottom: 0.6rem;
}
.legal p, .legal li { color: var(--gris); font-size: 0.92rem; line-height: 1.8; }
.legal p + p, .legal ul + p, .legal p + ul { margin-top: 1rem; }
.legal ul { list-style: disc; padding-left: 1.3rem; }
.legal ul li + li { margin-top: 0.4rem; }
.legal strong { color: var(--encre); font-weight: 600; }
.legal a { color: var(--vert); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Divers ---------- */

.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
  html.has-js .loader { display: none; }
}