/* ==========================================================================
   France Dons — feuille de style principale
   Charte reprise de francedons.org (couleurs, polices, bandeau multicolore)
   Pour changer une couleur partout : modifiez-la ici, dans :root.
   ========================================================================== */

:root {
  /* Couleurs de la charte France Dons */
  --bleu: #1B3F8B;
  --bleu-clair: #2756B8;
  --bleu-nuit: #0D1F45;
  --orange: #E8750A;
  --jaune: #F5B800;
  --vert: #3AA535;
  --rouge: #D92B2B;
  --rouge-fonce: #B82222;
  --blanc: #FFFFFF;
  --creme: #F8F7F3;
  --gris-clair: #F0EDE8;
  --gris: #E5E2DC;
  --texte: #1A1A1A;
  --doux: #5A6577;
  --bleu-pale: #EEF3FB;
  --orange-pale: #FFF4EC;
  --vert-pale: #EDF7EC;
  --rouge-pale: #FDECEA;
  --jaune-pale: #FFF8E1;

  /* Polices */
  --f-texte: "Nunito Sans", system-ui, sans-serif;
  --f-titre: "Caveat", cursive;
  --f-chiffre: "Bebas Neue", "Nunito Sans", sans-serif;

  /* Mise en page */
  --largeur: 1160px;
  --rayon: 14px;
  --ombre: 0 10px 30px rgba(13, 31, 69, .08);
  --ombre-forte: 0 18px 40px rgba(13, 31, 69, .16);
  color-scheme: light;
}

/* ---------- Bases ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--f-texte);
  font-size: 17px;
  line-height: 1.65;
  color: var(--texte);
  background: var(--blanc);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--bleu-clair); }
a:hover { color: var(--bleu); }
h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 .5em; color: var(--bleu); }
h1, h2 { font-family: var(--f-titre); font-weight: 700; }
h1 { font-size: clamp(2.6rem, 6vw, 4.2rem); }
h2 { font-size: clamp(2.1rem, 4.5vw, 3rem); }
h3 { font-size: 1.2rem; font-weight: 800; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--jaune); outline-offset: 3px; border-radius: 4px; }

.conteneur { width: 100%; max-width: var(--largeur); margin: 0 auto; padding: 0 20px; }
.section { padding: 80px 0; }
.section--creme { background: var(--creme); }
.section--bleu { background: var(--bleu); color: #fff; }
.section--bleu h2, .section--bleu h3 { color: #fff; }
.centre { text-align: center; }
.intro { max-width: 680px; margin: 0 auto 48px; color: var(--doux); font-size: 1.08rem; }
.section--bleu .intro { color: rgba(255,255,255,.82); }

/* Petit sur-titre en capitales, comme sur le site actuel */
.surtitre {
  display: inline-block;
  font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--vert); margin-bottom: 10px;
}
/* Mots colorés dans les titres manuscrits */
.c-vert { color: var(--vert); } .c-rouge { color: var(--rouge); }
.c-orange { color: var(--orange); } .c-bleu { color: var(--bleu); } .c-jaune { color: var(--jaune); }

/* ---------- Bandeau multicolore (signature visuelle) ---------- */
.bandeau-couleurs {
  height: 5px;
  background: linear-gradient(90deg,
    var(--bleu) 0 20%, var(--vert) 20% 40%, var(--jaune) 40% 60%,
    var(--orange) 60% 80%, var(--rouge) 80% 100%);
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 26px; border-radius: 10px; border: 2px solid transparent;
  font: 800 1rem/1.2 var(--f-texte); text-decoration: none; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-rouge { background: linear-gradient(135deg, var(--rouge), var(--rouge-fonce)); color: #fff; box-shadow: 0 8px 20px rgba(217,43,43,.28); }
.btn-rouge:hover { color: #fff; box-shadow: 0 12px 26px rgba(217,43,43,.36); }
.btn-contour { background: #fff; color: var(--bleu); border-color: var(--bleu); }
.btn-contour:hover { background: var(--bleu-pale); }
.btn-blanc { background: #fff; color: var(--bleu); }
.btn-blanc:hover { color: var(--bleu); box-shadow: var(--ombre-forte); }
.btn-grand { padding: 18px 34px; font-size: 1.1rem; }
.btn-bloc { width: 100%; }

/* ---------- En-tête & navigation ---------- */
.entete { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: #fff; box-shadow: 0 2px 14px rgba(13,31,69,.07); }
.entete__barre { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo img { width: 52px; height: 52px; }
.logo__slogan { font-size: .7rem; font-weight: 800; line-height: 1.25; text-transform: uppercase; letter-spacing: .04em; }
.logo__slogan span:nth-child(1) { color: var(--vert); }
.logo__slogan span:nth-child(2) { color: var(--rouge); }
.logo__slogan span:nth-child(3) { color: var(--orange); }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a:not(.btn) {
  padding: 10px 12px; font-size: .86rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--texte); text-decoration: none; border-bottom: 3px solid transparent;
}
.nav a:not(.btn):hover { color: var(--bleu); }
.nav a[aria-current="page"] { color: var(--bleu); border-bottom-color: var(--bleu); }
.nav .btn { margin-left: 8px; padding: 11px 18px; font-size: .9rem; }
.burger { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
.burger span { display: block; width: 26px; height: 3px; margin: 5px 0; background: var(--bleu); border-radius: 2px; transition: .2s; }

@media (max-width: 1100px) {
  .burger { display: block; }
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; padding: 8px 20px 20px; box-shadow: 0 12px 20px rgba(13,31,69,.12);
  }
  .nav.ouvert { display: flex; }
  .nav a:not(.btn) { padding: 14px 4px; border-bottom: 1px solid var(--gris); }
  .nav a[aria-current="page"] { border-bottom-color: var(--gris); border-left: 4px solid var(--bleu); padding-left: 12px; }
  .nav .btn { margin: 14px 0 0; }
}

/* ---------- Héros (haut de page d'accueil) ---------- */
.heros { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--bleu-pale), #fff 85%); padding: 72px 0 64px; }
.heros::after { /* halo doux comme sur le site actuel */
  content: ""; position: absolute; right: -160px; top: -120px; width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(245,184,0,.18), transparent 70%); pointer-events: none;
}
.heros__grille { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; position: relative; z-index: 1; }
.badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px;
  background: var(--vert-pale); color: #23781F; border: 1px solid rgba(58,165,53,.3);
  font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 18px;
}
.heros h1 { margin-bottom: 18px; }
.heros__texte { font-size: 1.15rem; color: var(--doux); max-width: 560px; margin-bottom: 28px; }
.heros__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 26px; }
.confiance { display: flex; flex-wrap: wrap; gap: 10px 20px; padding: 0; margin: 0; list-style: none; font-size: .9rem; font-weight: 700; color: var(--doux); }
.confiance li { display: flex; align-items: center; gap: 7px; }
.confiance li::before { content: "✓"; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--vert); color: #fff; font-size: .7rem; }

/* Carte « 100 € ne vous coûtent que 34 € » */
.carte-cout {
  background: #fff; border-radius: 20px; padding: 30px; box-shadow: var(--ombre-forte);
  border-top: 6px solid var(--vert); text-align: center;
}
.carte-cout__logo { width: 96px; margin: 0 auto 8px; }
.carte-cout__petit { font-size: .85rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--doux); margin: 0; }
.carte-cout__montants { display: flex; align-items: baseline; justify-content: center; gap: 14px; margin: 6px 0 4px; }
.carte-cout__don { font: 3.2rem/1 var(--f-chiffre); color: var(--bleu); }
.carte-cout__fleche { color: var(--doux); font-size: 1.4rem; }
.carte-cout__reel { font: 3.2rem/1 var(--f-chiffre); color: var(--vert); }
.carte-cout__legende { font-size: .92rem; color: var(--doux); margin-bottom: 18px; }
.curseur { width: 100%; accent-color: var(--rouge); margin: 6px 0 16px; }

@media (max-width: 520px) { .heros__actions .btn { width: 100%; } }
@media (max-width: 860px) {
  .heros { padding: 48px 0; }
  .heros__grille { grid-template-columns: 1fr; gap: 36px; }
}

/* ---------- Bandeau de chiffres clés (masqué tant qu'il n'y a pas de vrais chiffres) ---------- */
.chiffres { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--gris); border-bottom: 1px solid var(--gris); }
.chiffres[hidden] { display: none; }
.chiffre { text-align: center; padding: 26px 10px; border-right: 1px solid var(--gris); border-bottom: 5px solid var(--bleu); }
.chiffre:nth-child(2) { border-bottom-color: var(--vert); }
.chiffre:nth-child(3) { border-bottom-color: var(--orange); }
.chiffre:nth-child(4) { border-bottom-color: var(--rouge); border-right: 0; }
.chiffre__valeur { font: 2.8rem/1 var(--f-chiffre); color: var(--bleu); }
.chiffre:nth-child(2) .chiffre__valeur { color: var(--vert); }
.chiffre:nth-child(3) .chiffre__valeur { color: var(--orange); }
.chiffre:nth-child(4) .chiffre__valeur { color: var(--rouge); }
.chiffre__libelle { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--doux); margin-top: 6px; }
@media (max-width: 700px) { .chiffres { grid-template-columns: 1fr 1fr; } .chiffre:nth-child(2) { border-right: 0; } }

/* ---------- Grilles et cartes ---------- */
.grille-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grille-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grille-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 900px) { .grille-3, .grille-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .grille-3, .grille-2, .grille-4 { grid-template-columns: 1fr; } }

.carte {
  background: #fff; border-radius: var(--rayon); padding: 28px; box-shadow: var(--ombre);
  border: 1px solid var(--gris); display: flex; flex-direction: column;
}
.carte p { color: var(--doux); }
.carte .lien-fleche { margin-top: auto; }
.carte__icone {
  width: 58px; height: 58px; border-radius: 14px; display: grid; place-items: center;
  font-size: 1.8rem; margin-bottom: 16px; background: var(--bleu-pale);
}
.carte--vert { border-top: 5px solid var(--vert); } .carte--vert .carte__icone { background: var(--vert-pale); }
.carte--orange { border-top: 5px solid var(--orange); } .carte--orange .carte__icone { background: var(--orange-pale); }
.carte--bleu { border-top: 5px solid var(--bleu); }
.carte--rouge { border-top: 5px solid var(--rouge); } .carte--rouge .carte__icone { background: var(--rouge-pale); }
.carte--jaune { border-top: 5px solid var(--jaune); } .carte--jaune .carte__icone { background: var(--jaune-pale); }
.lien-fleche { font-weight: 800; text-decoration: none; color: var(--bleu); }
.lien-fleche::after { content: " →"; transition: margin .15s; }
.lien-fleche:hover::after { margin-left: 4px; }

/* Liste à puces cochées */
.coches { list-style: none; padding: 0; margin: 0 0 1em; }
.coches li { position: relative; padding-left: 30px; margin-bottom: 10px; }
.coches li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: var(--vert-pale); color: var(--vert); font-weight: 900; font-size: .75rem; display: grid; place-items: center; }

/* ---------- Exemples d'impact ---------- */
.impact { text-align: center; padding: 30px 22px; border-radius: var(--rayon); background: #fff; border: 1px solid var(--gris); }
.impact__montant { font: 3rem/1 var(--f-chiffre); color: var(--rouge); }
.impact__egal { font-family: var(--f-titre); font-size: 1.6rem; color: var(--doux); }
.impact__quoi { font-weight: 800; color: var(--bleu); font-size: 1.1rem; }
.impact__cout { font-size: .85rem; color: var(--vert); font-weight: 700; margin-top: 8px; }

/* ---------- Parcours de traçabilité (frise) ---------- */
.parcours { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; counter-reset: etape; position: relative; }
.parcours::before { content: ""; position: absolute; top: 30px; left: 10%; right: 10%; height: 4px; background: linear-gradient(90deg, var(--bleu), var(--vert), var(--jaune), var(--orange), var(--rouge)); border-radius: 2px; }
.parcours li { text-align: center; padding: 0 10px; position: relative; counter-increment: etape; }
.parcours__num {
  width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; background: #fff; display: grid; place-items: center;
  font-size: 1.7rem; border: 4px solid var(--bleu); position: relative; z-index: 1; box-shadow: var(--ombre);
}
.parcours li:nth-child(2) .parcours__num { border-color: var(--vert); }
.parcours li:nth-child(3) .parcours__num { border-color: var(--jaune); }
.parcours li:nth-child(4) .parcours__num { border-color: var(--orange); }
.parcours li:nth-child(5) .parcours__num { border-color: var(--rouge); }
.parcours h3 { font-size: 1rem; margin-bottom: 6px; }
.parcours h3::before { content: counter(etape) ". "; }
.parcours p { font-size: .9rem; color: var(--doux); margin: 0; }
.section--bleu .parcours p { color: rgba(255,255,255,.8); }
.section--bleu .parcours__num { color: var(--texte); }
@media (max-width: 860px) {
  .parcours { grid-template-columns: 1fr; gap: 22px; }
  .parcours::before { top: 0; bottom: 0; left: 31px; right: auto; width: 4px; height: auto; background: linear-gradient(180deg, var(--bleu), var(--vert), var(--jaune), var(--orange), var(--rouge)); }
  .parcours li { display: grid; grid-template-columns: 64px 1fr; gap: 0 16px; text-align: left; padding: 0; }
  .parcours__num { margin: 0; grid-row: span 2; }
}

/* ---------- Bloc « public » (associations / entreprises) ---------- */
.public { border-radius: 20px; padding: 40px; color: #fff; position: relative; overflow: hidden; display: flex; flex-direction: column; }
.public h2 { color: #fff; font-size: 2.4rem; }
.public p { color: rgba(255,255,255,.88); }
.public--vert { background: linear-gradient(135deg, #2F8C2B, var(--vert)); }
.public--bleu { background: linear-gradient(135deg, var(--bleu-nuit), var(--bleu)); }
.public .btn { align-self: flex-start; margin-top: auto; }
.public .coches li::before { background: rgba(255,255,255,.2); color: #fff; }

/* ---------- Simulateur fiscal ---------- */
.simulateur { background: #fff; border-radius: 20px; box-shadow: var(--ombre-forte); overflow: hidden; display: grid; grid-template-columns: 1.1fr .9fr; }
.simulateur__saisie { padding: 36px; }
.simulateur__resultat { padding: 36px; background: var(--bleu); color: #fff; display: flex; flex-direction: column; justify-content: center; }
.simulateur__resultat h3 { color: rgba(255,255,255,.85); font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; }
.onglets { display: flex; background: var(--gris-clair); border-radius: 12px; padding: 5px; margin-bottom: 24px; }
.onglets button {
  flex: 1; border: 0; background: none; padding: 11px; border-radius: 9px; cursor: pointer;
  font: 800 .95rem var(--f-texte); color: var(--doux);
}
.onglets button[aria-selected="true"] { background: #fff; color: var(--bleu); box-shadow: 0 2px 8px rgba(13,31,69,.1); }
.montants { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.montants button {
  padding: 14px 6px; border-radius: 10px; border: 2px solid var(--gris); background: #fff; cursor: pointer;
  font: 1.6rem/1 var(--f-chiffre); color: var(--bleu); transition: .15s;
}
.montants button:hover { border-color: var(--bleu-clair); }
.montants button[aria-pressed="true"] { border-color: var(--rouge); background: var(--rouge-pale); color: var(--rouge); }
.champ { margin-bottom: 16px; }
.champ label { display: block; font-weight: 800; font-size: .9rem; margin-bottom: 6px; }
.champ .aide { font-size: .82rem; color: var(--doux); margin-top: 4px; }
.champ input[type="text"], .champ input[type="email"], .champ input[type="tel"], .champ input[type="number"],
.champ select, .champ textarea {
  width: 100%; padding: 13px 14px; border: 2px solid var(--gris); border-radius: 10px;
  font: 1rem var(--f-texte); color: var(--texte); background: #fff;
}
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--bleu-clair); box-shadow: 0 0 0 4px var(--bleu-pale); }
.champ textarea { min-height: 140px; resize: vertical; }
.saisie-euro { position: relative; }
.saisie-euro input { padding-right: 40px !important; }
.saisie-euro::after { content: "€"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-weight: 800; color: var(--doux); }
.resultat__grand { font: 4.2rem/1 var(--f-chiffre); color: var(--jaune); margin: 4px 0 6px; }
.resultat__ligne { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.15); font-weight: 700; }
.resultat__ligne:last-of-type { border-bottom: 0; }
.resultat__ligne strong { font-family: var(--f-chiffre); font-size: 1.5rem; font-weight: 400; letter-spacing: .02em; }
.resultat__note { font-size: .82rem; color: rgba(255,255,255,.72); margin: 14px 0 20px; }
.resultat__avertissement { display: none; background: rgba(245,184,0,.15); border-left: 4px solid var(--jaune); padding: 10px 12px; border-radius: 6px; font-size: .85rem; margin-top: 10px; }
.resultat__avertissement.visible { display: block; }
@media (max-width: 860px) { .simulateur { grid-template-columns: 1fr; } .simulateur__saisie, .simulateur__resultat { padding: 26px 22px; } }
@media (max-width: 420px) { .montants { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Formulaires ---------- */
.formulaire { background: #fff; border-radius: 20px; padding: 36px; box-shadow: var(--ombre); border: 1px solid var(--gris); }
.formulaire .ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 640px) { .formulaire { padding: 24px 18px; } .formulaire .ligne { grid-template-columns: 1fr; } }
.consentement { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; color: var(--doux); margin: 8px 0 20px; }
.consentement input { margin-top: 4px; width: 18px; height: 18px; flex: none; accent-color: var(--bleu); }
.pot-de-miel { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.mention-rgpd { font-size: .8rem; color: var(--doux); margin-top: 16px; }
.obligatoire { color: var(--rouge); }
.message-formulaire { padding: 14px 16px; border-radius: 10px; margin-bottom: 20px; font-weight: 700; }
.message-formulaire--ok { background: var(--vert-pale); color: #23781F; }
.message-formulaire--erreur { background: var(--rouge-pale); color: var(--rouge-fonce); }

/* ---------- Suivi d'un don ---------- */
.suivi-resultat { margin-top: 24px; }
.suivi-etapes { list-style: none; padding: 0; margin: 16px 0 0; }
.suivi-etapes li { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-bottom: 1px dashed var(--gris); color: var(--doux); }
.suivi-etapes li .pastille { width: 28px; height: 28px; flex: none; border-radius: 50%; border: 3px solid var(--gris); background: #fff; display: grid; place-items: center; font-size: .8rem; font-weight: 900; }
.suivi-etapes li.fait { color: var(--texte); }
.suivi-etapes li.fait .pastille { border-color: var(--vert); background: var(--vert); color: #fff; }
.suivi-etapes li.encours .pastille { border-color: var(--orange); color: var(--orange); }
.suivi-etapes li.encours { color: var(--texte); font-weight: 700; }

/* ---------- Encadrés ---------- */
.encadre { border-radius: var(--rayon); padding: 22px 24px; background: var(--bleu-pale); border-left: 5px solid var(--bleu); }
.encadre--vert { background: var(--vert-pale); border-left-color: var(--vert); }
.encadre--jaune { background: var(--jaune-pale); border-left-color: var(--jaune); }
.encadre--orange { background: var(--orange-pale); border-left-color: var(--orange); }
.encadre h3 { margin-bottom: 6px; }
.encadre p:last-child { margin-bottom: 0; }

/* ---------- Questions fréquentes ---------- */
.faq { max-width: 820px; margin: 0 auto; }
.faq details { background: #fff; border: 1px solid var(--gris); border-radius: 12px; margin-bottom: 12px; padding: 0 22px; }
.faq summary { cursor: pointer; padding: 18px 0; font-weight: 800; color: var(--bleu); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; line-height: 1; color: var(--rouge); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--doux); }

/* ---------- Étapes numérotées (adhésion, entreprises) ---------- */
.etapes { list-style: none; padding: 0; margin: 0; counter-reset: e; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.etapes li { counter-increment: e; background: #fff; border-radius: var(--rayon); padding: 24px; border: 1px solid var(--gris); }
.etapes li::before { content: counter(e); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--bleu); color: #fff; font: 1.6rem/1 var(--f-chiffre); margin-bottom: 12px; }
.etapes li:nth-child(2)::before { background: var(--vert); }
.etapes li:nth-child(3)::before { background: var(--orange); }
.etapes li:nth-child(4)::before { background: var(--rouge); }
.etapes h3 { font-size: 1.05rem; }
.etapes p { font-size: .92rem; color: var(--doux); margin: 0; }
@media (max-width: 900px) { .etapes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .etapes { grid-template-columns: 1fr; } }

/* ---------- Bandeau d'appel final ---------- */
.appel { background: var(--bleu); color: #fff; text-align: center; padding: 70px 0; position: relative; overflow: hidden; }
.appel::before { content: ""; position: absolute; inset: auto 0 0 0; height: 6px; background: linear-gradient(90deg, var(--bleu-clair) 0 20%, var(--vert) 20% 40%, var(--jaune) 40% 60%, var(--orange) 60% 80%, var(--rouge) 80% 100%); }
.appel h2 { color: #fff; }
.appel p { color: rgba(255,255,255,.85); max-width: 600px; margin: 0 auto 28px; font-size: 1.1rem; }
.appel .btn + .btn { margin-left: 10px; }
@media (max-width: 520px) { .appel .btn { width: 100%; } .appel .btn + .btn { margin: 12px 0 0; } }

/* ---------- En-tête des pages intérieures ---------- */
.titre-page { background: linear-gradient(180deg, var(--bleu-pale), #fff); padding: 60px 0 40px; text-align: center; }
.titre-page p { max-width: 680px; margin: 0 auto; color: var(--doux); font-size: 1.12rem; }

/* ---------- Moyens de paiement ---------- */
.moyen { display: flex; gap: 16px; align-items: flex-start; }
.moyen__icone { font-size: 1.8rem; flex: none; }
.helloasso-note { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: .85rem; color: var(--doux); margin-top: 12px; }

/* ---------- Pied de page ---------- */
.pied { background: var(--bleu-nuit); color: rgba(255,255,255,.65); padding: 60px 0 0; font-size: .95rem; }
.pied__grille { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.pied h4 { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 14px; }
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { margin-bottom: 8px; }
.pied a { color: rgba(255,255,255,.78); text-decoration: none; }
.pied a:hover { color: #fff; text-decoration: underline; }
.pied__marque { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.pied__marque img { width: 56px; height: 56px; background: #fff; border-radius: 12px; padding: 4px; }
.pied__marque strong { font-family: var(--f-titre); font-size: 2rem; color: #fff; }
.pied__bas { margin-top: 44px; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: .85rem; }
@media (max-width: 860px) { .pied__grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pied__grille { grid-template-columns: 1fr; } }

/* ---------- Divers ---------- */
.deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.deux-colonnes--formulaire { grid-template-columns: 1.4fr .8fr; align-items: start; }
@media (max-width: 860px) { .deux-colonnes, .deux-colonnes--formulaire { grid-template-columns: 1fr; gap: 28px; } }
.section--bleu .carte h3 { color: var(--bleu); }
.liste-associations:empty::before { content: attr(data-vide); display: block; padding: 28px; text-align: center; color: var(--doux); background: #fff; border: 2px dashed var(--gris); border-radius: var(--rayon); }
/* Pages légales (mentions, confidentialité, CGU, rapport financier) */
.texte-legal { max-width: 860px; margin: 0 auto; display: grid; gap: 20px; }
.texte-legal h2 { font-size: 1.3rem; margin: 0 0 10px; }
.texte-legal .carte p:last-child, .texte-legal .carte ul:last-child { margin-bottom: 0; }
.texte-legal .carte ul:not(.coches) { color: var(--doux); padding-left: 20px; }
.maj { font-size: .88rem; color: var(--doux); }
/* ---------- Page « Nos actions » ---------- */
[hidden] { display: none !important; }
.filtres { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 32px; }
.filtre {
  font: 700 .9rem/1 var(--f-texte); padding: 10px 16px; border-radius: 99px; cursor: pointer;
  border: 2px solid var(--gris); background: #fff; color: var(--texte);
}
.filtre:hover { border-color: var(--bleu); }
.filtre[aria-pressed="true"] { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.actions-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { .actions-grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .actions-grille { grid-template-columns: 1fr; } }
.action-carte {
  display: flex; flex-direction: column; text-decoration: none; color: inherit; background: #fff;
  border: 1px solid var(--gris); border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre);
  transition: transform .15s ease, box-shadow .15s ease;
}
.action-carte:hover { transform: translateY(-4px); box-shadow: var(--ombre-forte); color: inherit; }
.action-carte__image { position: relative; aspect-ratio: 4 / 3; background: var(--bleu-pale); overflow: hidden; }
.action-carte__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.action-carte:hover .action-carte__image img { transform: scale(1.04); }
.action-carte__image .action-carte__logo { object-fit: contain; padding: 18%; }
.action-carte__nb { position: absolute; right: 10px; bottom: 10px; background: rgba(13,31,69,.75); color: #fff; font-size: .8rem; font-weight: 700; padding: 4px 10px; border-radius: 99px; }
.action-carte__corps { padding: 20px 22px 22px; }
.action-carte__corps h2 { font: 800 1.2rem/1.25 var(--f-texte); margin: 0 0 8px; }
.action-carte__corps p { color: var(--doux); font-size: .95rem; margin: 0 0 8px; }
.action-carte__meta { font-size: .8rem !important; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--vert) !important; }
.action-carte__lieu { font-size: .88rem !important; margin: 0 !important; }
.actions-vide { padding: 40px 28px; text-align: center; color: var(--doux); background: #fff; border: 2px dashed var(--gris); border-radius: var(--rayon); }

.action-titre h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); max-width: 900px; margin-left: auto; margin-right: auto; }
.action-retour { margin: 0 0 14px; }
.lien-retour { font-weight: 800; text-decoration: none; }
.lien-retour::before { content: "← "; }
.action-infos { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; color: var(--doux); font-weight: 700; font-size: .95rem; }
.action-corps { max-width: 900px; }
.action-une { display: block; border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre-forte); margin-bottom: 32px; cursor: zoom-in; }
.action-une img { width: 100%; max-height: 560px; object-fit: cover; }
.action-texte { font-size: 1.08rem; max-width: 720px; margin: 0 auto; }
.action-galerie-titre { margin-top: 40px; }
.action-galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.action-galerie figure { margin: 0; }
.action-galerie a { display: block; border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 3; cursor: zoom-in; }
.action-galerie img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.action-galerie a:hover img { transform: scale(1.05); }
.action-galerie figcaption { font-size: .85rem; color: var(--doux); margin-top: 6px; }
.action-partage { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--gris); }
.action-partage span { font-weight: 800; color: var(--doux); }
.action-partage .btn { padding: 9px 16px; font-size: .9rem; }

.visionneuse { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.visionneuse::backdrop { background: rgba(8, 16, 36, .92); }
.visionneuse[open] { display: flex; align-items: center; justify-content: center; }
.visionneuse figure { margin: 0; max-width: 92vw; text-align: center; }
.visionneuse img { max-width: 92vw; max-height: 84vh; width: auto; margin: 0 auto; border-radius: 6px; }
.visionneuse figcaption { color: #fff; margin-top: 10px; font-size: .95rem; }
.visionneuse button { position: fixed; background: rgba(255,255,255,.12); color: #fff; border: 0; border-radius: 50%; width: 48px; height: 48px; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.visionneuse button:hover { background: rgba(255,255,255,.25); }
.visionneuse__fermer { top: 16px; right: 16px; }
.visionneuse__prec { left: 12px; top: 50%; transform: translateY(-50%); }
.visionneuse__suiv { right: 12px; top: 50%; transform: translateY(-50%); }

.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn:hover { transform: none; }
}