/* ADIS-HAÏTI — refonte 2026 des pages publiques (direction « portail institutionnel » :
   bandeau bleu plein avec photo en carte, titres centrés, cartes arrondies, boutons pilules).
   Chargée APRÈS style.css : ne touche ni aux textes ni aux scripts, seulement à la présentation.
   shortcut: surcouche de style.css (encore utilisé par /admin), à fusionner en une seule feuille
   quand /admin aura sa propre base. */

/* -------------------- TOKENS -------------------- */
:root {
  /* Bleu et or relevés sur le logo officiel (assets/logo.png) */
  --bleu: #101A7A;         /* bleu du logo, un cran plus lumineux pour les grands aplats */
  --bleu-fonce: #0B1257;   /* bleu exact des deux profils */
  --bleu-vif: #2B45D4;     /* liens et actions sur fond clair */
  --or: #D9AE3A;           /* bouton principal sur fond bleu */
  --or-fonce: #7A5C0E;     /* or lisible sur blanc */
  --blanc: #FFFFFF;
  --fond-doux: #F3F6FC;    /* panneaux et cartes */
  --texte: #1B2440;
  --texte-doux: #56607A;
  --filet: #E1E6F2;

  --police: 'Nunito Sans', 'Helvetica Neue', Arial, sans-serif;

  --e1: 8px; --e2: 16px; --e3: 24px; --e4: 40px; --e5: 64px; --e6: 88px;
  --marge: clamp(20px, 4vw, 48px);
  --largeur: 1180px;
  --rayon: 12px;
  --rayon-petit: 8px;

  /* Les anciens tokens de style.css pointent vers la nouvelle palette */
  --navy: var(--bleu);
  --navy-deep: var(--bleu-fonce);
  --navy-mid: var(--bleu);
  --gold: var(--or);
  --gold-dark: var(--or-fonce);
  --bg: var(--blanc);
  --ink: var(--texte);
  --body-text: var(--texte-doux);
  --serif: var(--police);
  --sans: var(--police);
}

body { font-family: var(--police); font-size: 16px; line-height: 1.55; color: var(--texte); background: var(--blanc); }
h1, h2, h3 { font-family: var(--police); }
a { color: var(--bleu-vif); transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; }
a:hover { color: var(--bleu); }
:focus-visible { outline: 2px solid var(--bleu-vif); outline-offset: 3px; }
.site-header :focus-visible, .hero :focus-visible, .event-card--primary :focus-visible, .quote :focus-visible, .site-footer :focus-visible, .announce-bar :focus-visible { outline-color: var(--or); }

/* Boutons pilules : petites capitales grasses */
.nav-link, .hero-cta, .event-cta, .btn, .stats-link a, .announce-cta, .testimonial-more {
  font-family: var(--police); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
}

/* -------------------- BANNIÈRE D'ANNONCE -------------------- */
.announce-bar { background: var(--bleu-fonce); }
.announce-inner { max-width: var(--largeur); padding: 6px var(--marge); justify-content: center; gap: var(--e3); }
.announce-text { color: #fff; font-size: 14px; }
.announce-text strong { font-weight: 800; }
.announce-cta { background: #fff; color: var(--bleu); border-radius: 999px; padding: 8px 16px; font-size: 11px; }
.announce-cta:hover { background: var(--or); color: var(--bleu-fonce); }
.announce-close { color: #fff; opacity: 1; min-width: 44px; min-height: 44px; }

/* -------------------- EN-TÊTE -------------------- */
.site-header { background: var(--bleu); border-bottom: 0; }
.header-inner { max-width: calc(var(--largeur) + 2 * var(--marge)); padding: 12px var(--marge); flex-wrap: nowrap; }
.brand-logo { width: 46px; height: 46px; border-radius: var(--rayon-petit); background: #fff; object-fit: contain; padding: 2px; }
.brand-name { font-family: var(--police); font-weight: 800; font-size: 17px; letter-spacing: 0.04em; color: #fff; white-space: nowrap; }
.nav-links { gap: 18px; flex-wrap: nowrap; white-space: nowrap; }
.nav-link { color: #fff; font-size: 11px; padding: 10px 0; }
.nav-link:hover { color: var(--or); }
.nav-link.is-active { color: #fff; border-bottom: 2px solid var(--or); padding-bottom: 8px; }
.nav-link--outline, .nav-link--cta { background: none; color: #fff; border: 1.5px solid #fff; border-radius: 999px; padding: 9px 18px; font-size: 11px; font-weight: 800; }
.nav-link--outline:hover, .nav-link--cta:hover { background: #fff; color: var(--bleu); border-color: #fff; }
.nav-links .nav-link--cta:last-of-type { background: var(--or); color: var(--bleu-fonce); border-color: var(--or); }
.nav-links .nav-link--cta:last-of-type:hover { background: #fff; border-color: #fff; color: var(--bleu); }
.nav-lang { color: #fff; font-size: 11px; font-weight: 800; border-left-color: rgba(255, 255, 255, 0.4); }
.mobile-toggle { border-color: #fff; border-radius: var(--rayon-petit); min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
.mobile-menu { background: var(--bleu); border-top: 1px solid rgba(255, 255, 255, 0.2); padding: 8px var(--marge) 20px; }
.mobile-menu .nav-link { padding: 14px 0; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.18); font-size: 12px; }
.mobile-menu .nav-link--cta, .mobile-menu .nav-link--outline { padding: 14px 16px; border: 1.5px solid #fff; }
@media (max-width: 1280px) {
  .nav-links { display: none; }
  .mobile-toggle { display: flex; }
}

/* -------------------- BANDEAU D'OUVERTURE -------------------- */
/* Aplat bleu, texte à gauche, photo réelle en grande carte arrondie à droite (décorative :
   la photo figure avec son texte alternatif sur la page Projets). */
.hero { background: var(--bleu); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: var(--e5); padding: var(--e4) max(var(--marge), calc((100% - var(--largeur)) / 2)) var(--e6); overflow: visible; }
.hero-bande { order: 2; aspect-ratio: 3 / 2; border-radius: var(--rayon); overflow: hidden; background: var(--bleu-fonce) url('assets/photos/projet-caricom-podium.jpg') center 30% / cover no-repeat; box-shadow: 0 24px 48px rgba(5, 9, 48, 0.35); }
.hero-inner { order: 1; max-width: none; margin: 0; padding: 0; text-align: left; }
.hero-eyebrow { display: inline-block; font-family: var(--police); font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bleu-fonce); background: var(--or); border-radius: 999px; padding: 5px 12px; margin: 0 0 var(--e3); }
.hero-title { font-weight: 700; font-size: clamp(24px, 2.5vw, 34px); line-height: 1.25; color: #fff; margin: 0 0 var(--e2); text-wrap: balance; }
.hero-sub { font-size: 16px; line-height: 1.6; color: #DCE1FA; max-width: 34em; margin: 0 0 var(--e3); }
.hero-cta { background: var(--or); color: var(--bleu-fonce); font-size: 11.5px; padding: 14px 24px; border-radius: 999px; box-shadow: none; margin-bottom: var(--e3); }
.hero-cta:hover { background: #fff; color: var(--bleu); }
.hero-links { justify-content: flex-start; gap: var(--e3); }
.hero-links a { font-family: var(--police); font-size: 14px; font-weight: 700; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.6); padding: 10px 0 2px; }
.hero-links a:hover { color: var(--or); border-color: var(--or); }
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; gap: var(--e4); padding-bottom: var(--e5); }
  .hero-bande { order: 2; }
}

/* -------------------- TITRES DE SECTION (centrés) -------------------- */
.section-title, .stats-title { font-family: var(--police); font-weight: 700; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.25; color: var(--bleu); text-align: center; margin: 0 0 var(--e1); }
.section-rule, .stats-rule { display: none; }

/* -------------------- RENDEZ-VOUS -------------------- */
/* Une grande carte photo pour l'événement ADIS-HAÏTI, les partenaires en cartes claires à droite. */
.events-section { width: 100%; max-width: calc(var(--largeur) + 2 * var(--marge)); padding: var(--e5) var(--marge) var(--e4); }
.section-head { text-align: center; max-width: 640px; margin: 0 auto var(--e4); }
.events-eyebrow { font-family: var(--police); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--or-fonce); margin: 0 0 var(--e1); }
.events-lead { font-size: 15px; color: var(--texte-doux); }
.events-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--e2) var(--e5); align-items: stretch; position: relative; }
.events-grid::before { content: ''; position: absolute; top: 0; bottom: 0; left: calc(58.33% - 1px); width: 1px; background: var(--filet); }
.event-card { background: var(--fond-doux); border: 0; border-radius: var(--rayon-petit); padding: var(--e3); text-align: left; box-shadow: none; }
.event-card--primary { grid-row: span 2; justify-content: flex-end; min-height: 340px; border-radius: var(--rayon); padding: var(--e4); box-shadow: none;
  background: linear-gradient(rgba(11, 18, 87, 0.35), rgba(11, 18, 87, 0.88)), url('assets/photos/apropos-delegation-formelle.jpg') center / cover no-repeat; }
.event-tag { font-family: var(--police); font-size: 11px; font-weight: 700; letter-spacing: 0.02em; text-transform: none; color: var(--texte-doux); margin: 0 0 6px; display: block; }
.event-tag::before { content: none; }
.event-card--primary .event-tag { align-self: flex-start; font-weight: 800; text-transform: uppercase; color: var(--bleu-fonce); background: var(--or); border-radius: 4px; padding: 4px 10px; margin-bottom: var(--e2); }
.event-title { font-family: var(--police); font-weight: 700; font-size: 17px; line-height: 1.3; color: var(--bleu); min-height: 0; display: block; margin: 0 0 4px; }
.event-card--primary .event-title { font-size: clamp(26px, 2.6vw, 34px); color: #fff; }
.event-date { font-family: var(--police); font-size: 13.5px; font-weight: 600; color: var(--texte-doux); margin: 0 0 var(--e1); }
.event-card--primary .event-date { font-size: 15px; color: #fff; margin-bottom: var(--e2); }
.event-countdown { justify-content: flex-start; gap: var(--e1); margin: 0 0 var(--e3); }
.event-countdown .u { background: rgba(255, 255, 255, 0.14); border: 0; border-radius: var(--rayon-petit); padding: 10px 6px; width: 64px; text-align: center; }
.event-countdown .v { font-family: var(--police); font-weight: 800; font-size: 22px; color: #fff; display: block; }
.event-countdown .l { font-family: var(--police); font-size: 9px; font-weight: 700; letter-spacing: 0.08em; color: #DCE1FA; }
.event-note { font-size: 13.5px; color: var(--texte-doux); margin: 0 0 var(--e2); display: block; flex: 1; }
.event-cta { margin-top: auto; align-self: flex-start; border-radius: 999px; font-size: 11px; padding: 12px 20px; }
.event-card--primary .event-cta { background: var(--or); color: var(--bleu-fonce); }
.event-card--primary .event-cta:hover { background: #fff; color: var(--bleu); }
.event-card--partner .event-cta { background: none; border: 1.5px solid var(--bleu-vif); color: var(--bleu-vif); }
.event-card--partner .event-cta:hover { background: var(--bleu-vif); border-color: var(--bleu-vif); color: #fff; }
@media (max-width: 860px) {
  .events-grid { grid-template-columns: 1fr; }
  .events-grid::before { content: none; }
}

/* -------------------- IMPACT : panneau clair arrondi -------------------- */
.stats { width: calc(100% - 2 * var(--marge)); max-width: var(--largeur); margin: var(--e3) auto 0; padding: var(--e4); background: var(--fond-doux); border-radius: var(--rayon); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--e5); align-items: center; }
.stats-title { grid-column: 1; text-align: left; font-size: 22px; }
.stats-lead { grid-column: 1; max-width: none; margin: 0; text-align: left; font-size: 14.5px; color: var(--texte-doux); }
.stats-grid { grid-column: 2; grid-row: 1 / span 3; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e2); }
.stat { text-align: center; background: #fff; border-radius: var(--rayon-petit); padding: var(--e3) var(--e1); }
.stat-value { font-family: var(--police); font-weight: 800; font-size: clamp(26px, 3vw, 38px); line-height: 1.1; color: var(--bleu); }
.stat-label { font-size: 13px; color: var(--texte-doux); margin-top: 4px; }
.stats-link { grid-column: 1 / -1; text-align: center; margin-top: var(--e4); }
.stats-link a { display: inline-block; background: var(--bleu-vif); color: #fff; border: 0; border-radius: 999px; font-size: 11.5px; padding: 14px 28px; }
.stats-link a:hover { background: var(--bleu); color: #fff; }
@media (max-width: 900px) {
  .stats { grid-template-columns: 1fr; row-gap: var(--e3); padding: var(--e3); }
  .stats-grid { grid-column: 1; grid-row: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* -------------------- PHOTOS : cartes arrondies de largeurs inégales -------------------- */
.photo-card { border-radius: var(--rayon); box-shadow: none; background: var(--fond-doux); }
.photo-card:hover .real-photo { transform: none; }
.impact-photos { width: 100%; max-width: calc(var(--largeur) + 2 * var(--marge)); padding: var(--e6) var(--marge) 0; }
.impact-photos .section-title { margin-bottom: var(--e4); }
.impact-photos-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 4.6fr); gap: var(--e2); }
.impact-photos-grid .photo-card { aspect-ratio: auto; height: 300px; }
#homeGallerySection .nav-link--outline { border-radius: 999px !important; padding: 12px 24px !important; color: var(--bleu-vif); border: 1.5px solid var(--bleu-vif); }
#homeGallerySection .nav-link--outline:hover { background: var(--bleu-vif); color: #fff; }
@media (max-width: 780px) {
  .impact-photos-grid { grid-template-columns: 1fr 1fr; }
  .impact-photos-grid .photo-card { height: 200px; }
  .impact-photos-grid .photo-card:nth-child(3) { grid-column: 1 / -1; }
}

/* -------------------- CITATION : carte bleue arrondie -------------------- */
.quote { width: calc(100% - 2 * var(--marge)); max-width: var(--largeur); margin: var(--e6) auto 0; background: var(--bleu); border-radius: var(--rayon); padding: var(--e5) var(--e4); text-align: center; }
.quote p { max-width: 34em; margin: 0 auto; font-family: var(--police); font-weight: 700; font-size: clamp(18px, 2vw, 24px); line-height: 1.5; color: #fff; }
.quote-tag { color: var(--or); }

/* -------------------- TÉMOIGNAGES -------------------- */
.testimonials-home, .testimonials-section { background: var(--blanc); padding: var(--e6) 0; }
.testimonials-inner { max-width: calc(var(--largeur) + 2 * var(--marge)); padding: 0 var(--marge); }
.testimonials-head { max-width: 640px; margin: 0 auto; text-align: center; }
.testimonials-home-subtitle { font-family: var(--police); font-style: normal; font-weight: 700; font-size: 16px; color: var(--or-fonce); margin: 0 0 var(--e1); }
.testimonials-lead { font-size: 15px; color: var(--texte-doux); }
.testimonials-grid, .testimonials-home .testimonials-grid { gap: var(--e2); margin-top: var(--e4); }
#homeTestimonialsHiddenGroup:not([hidden]) { display: contents; }
.testimonial-card { background: var(--fond-doux); border: 0; border-radius: var(--rayon); box-shadow: none; padding: var(--e3); margin: 0; }
.testimonial-card:hover { transform: none; box-shadow: none; }
.testimonial-quote-icon { font-family: Georgia, serif; font-size: 40px; line-height: 0.8; color: var(--bleu-vif); margin: 0 0 4px; }
.testimonial-text { font-family: var(--police); font-size: 14.5px; line-height: 1.65; color: var(--texte); margin: 0 0 var(--e2); }
.testimonial-more { font-size: 11px; color: var(--bleu-vif); padding: 12px 0; margin: 0 0 var(--e1); cursor: pointer; }
.testimonial-more:hover, .testimonial-more:focus-visible { color: var(--bleu); text-decoration: underline; }
.testimonial-footer { border-top: 1px solid var(--filet); padding-top: var(--e2); gap: 12px; }
.testimonial-avatar { width: 40px; height: 40px; background: var(--bleu); color: #fff; font-family: var(--police); font-weight: 800; font-size: 13px; }
.testimonial-name { font-family: var(--police); font-weight: 800; font-size: 14px; color: var(--bleu); }
.testimonial-role { font-size: 12.5px; color: var(--texte-doux); }
.testimonials-toggle-wrap { text-align: center; margin-top: var(--e4); }
.btn { border-radius: 999px; font-size: 11.5px; padding: 14px 28px; cursor: pointer; }
.btn-primary { background: var(--bleu-vif); color: #fff; }
.btn-primary:hover { background: var(--bleu); color: #fff; }
.btn-outline { background: var(--bleu-vif); border: 0; color: #fff; }
.btn-outline:hover { background: var(--bleu); color: #fff; }
.btn-lg, .btn-lg:hover { box-shadow: none; }
.testimonial-dialog { border-radius: var(--rayon); background: #fff; box-shadow: 0 24px 60px rgba(5, 9, 48, 0.35); max-width: 600px; }
.testimonial-dialog::backdrop { background: rgba(5, 9, 48, 0.6); }
.testimonial-dialog-close { min-width: 44px; min-height: 44px; color: var(--texte); }
.testimonial-dialog-text { font-family: var(--police); font-size: 16px; line-height: 1.7; color: var(--texte); }

/* -------------------- PIED DE PAGE -------------------- */
.site-footer { background: var(--bleu-fonce); padding: var(--e5) var(--marge) var(--e3); }
.footer-grid { max-width: var(--largeur); }
.footer-logo { width: 46px; height: 46px; border-radius: var(--rayon-petit); background: #fff; padding: 2px; }
.footer-brand-name { font-family: var(--police); font-weight: 800; font-size: 17px; letter-spacing: 0.04em; color: #fff; }
.footer-desc { color: #C9CFEE; font-size: 14.5px; }
.footer-col { gap: 0; }
.footer-col-title { color: #fff; font-weight: 800; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: var(--e1); }
.footer-col a, .footer-static { color: #C9CFEE; font-size: 14.5px; padding: 8px 0; }
.footer-col a:hover { color: var(--or); }
.footer-bottom { max-width: var(--largeur); border-top-color: rgba(255, 255, 255, 0.2); color: #C9CFEE; font-size: 13px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ==================== AUTRES PAGES PUBLIQUES ==================== */

/* Polices codées en dur dans style.css : tout passe sur la police du site */
.membership-confirm-title, .membership-confirm-body, .membership-confirm-table, .membership-confirm-welcome,
.accordion-reveal-link, .accordion-reveal-note, .membership-teaser-tag, .membership-teaser-title,
.membership-teaser-desc, .membership-teaser-cta, .quiz-question, .quiz-setup-head h2, .quiz-results-head h2,
.quiz-result-value, .confirm-box h3, .donation-pitch-title, .donation-pitch-cta { font-family: var(--police); }

/* -------------------- BANDEAUX DE PAGE -------------------- */
.page-hero, .page-hero-solid, .page-hero-dark, .adhesion-hero { background: var(--bleu); border: 0; padding: var(--e5) var(--marge) var(--e5); text-align: center; }
.page-hero h1, .page-hero-solid h1, .page-hero-dark h1, .adhesion-hero h1 { font-weight: 700; font-size: clamp(26px, 3vw, 36px); line-height: 1.2; color: #fff; letter-spacing: 0; }
.page-hero p, .page-hero-solid p, .page-hero-dark p, .adhesion-hero p { color: #DCE1FA; font-size: 16px; }
.page-hero-soft { background: var(--fond-doux); padding: var(--e5) var(--marge); }
.page-hero-soft h1 { font-weight: 700; font-size: clamp(26px, 3vw, 36px); color: var(--bleu); letter-spacing: 0; }
.page-hero-soft .eyebrow { color: var(--or-fonce); font-weight: 800; letter-spacing: 0.08em; }
.page-badge, .quiz-badge { background: var(--or); color: var(--bleu-fonce); border: 0; border-radius: 999px; padding: 5px 14px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; }
.page-hero-dark-icon { background: rgba(255, 255, 255, 0.14); border: 0; color: var(--or); }
.adhesion-hero .back-link { color: #fff; font-weight: 700; }
.adhesion-hero .back-link:hover { color: var(--or); }
.section-sub { color: var(--texte-doux); }

/* -------------------- CARTES ET PANNEAUX -------------------- */
.impact-section, .bg-alt, .donation-section { background: var(--fond-doux); }
.origin-card, .approach-banner, .mvv-card--navy { background: var(--bleu); border-radius: var(--rayon); }
.origin-card h2, .approach-banner h2, .mvv-card--navy h3 { color: #fff; }
.origin-card p, .approach-banner p, .mvv-card--navy p { color: #DCE1FA; }
.mvv-card { border-radius: var(--rayon); }
.mvv-card--gold { background: var(--or); }
.mvv-card--gold h3, .mvv-card--gold p { color: var(--bleu-fonce); }
.impact-card, .accordion-item, .project-card, .blog-card, .form-section, .donation-form, .confirm-panel { border-radius: var(--rayon); box-shadow: none; border: 1px solid var(--filet); }
.approach-card { border: 1px solid var(--filet); border-radius: var(--rayon); background: var(--fond-doux); }
.impact-card .val, .approach-card .val { color: var(--bleu); font-weight: 800; }
.confirm-box { background: var(--fond-doux); border-radius: var(--rayon); }
.project-card:hover .project-card-img .real-photo, .blog-card:hover .blog-card-img .real-photo, .gallery-item:hover .real-photo { transform: none; }
.project-badge { border-radius: 4px; font-weight: 800; }
.project-category, .accordion-subtitle, .accordion-toggle, .timeline-year { color: var(--or-fonce); font-weight: 800; }
.project-card-body h3, .accordion-name, .timeline-title { color: var(--bleu); font-weight: 700; }
.accordion-bullet { background: var(--or); border-radius: 50%; transform: none; }
.gallery-item { border-radius: var(--rayon); box-shadow: none; }
.game-card { border-radius: var(--rayon); }
.game-icon { border-radius: var(--rayon-petit); }
.form-section-head { background: var(--bleu); }
.form-section-desc { color: #DCE1FA; }
.membership-teaser { background: var(--bleu); border: 0; border-radius: var(--rayon); box-shadow: none; }
.membership-teaser:hover { transform: none; background: var(--bleu-fonce); }
.membership-teaser-tag, .membership-teaser-cta { color: var(--or); }
.membership-teaser-title { font-weight: 800; }
.membership-dot { background: var(--or); }
.accordion-reveal-link { color: var(--bleu-vif); font-size: 15px; padding: 12px 4px; }
.accordion-reveal-note { font-style: normal; font-size: 13px; }
.membership-confirm-welcome { color: var(--or-fonce); }
.donation-pitch-title { color: var(--bleu); font-weight: 800; text-transform: none; font-size: clamp(24px, 3vw, 34px); }
.donation-pitch-cta { color: var(--bleu); }
.contact-info-icon { color: var(--bleu-vif); }
.contact-section h2 { color: var(--bleu); font-weight: 700; }

/* -------------------- BOUTONS ET FILTRES (pilules) -------------------- */
.btn-submit, .btn-submit-lg, .project-cta, .filter-btn, .game-start, .quiz-btn-primary, .quiz-btn-outline, .confirm-panel .btn-home {
  border-radius: 999px; font-family: var(--police); font-weight: 800; font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; min-height: 44px; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease;
}
.btn-submit, .btn-submit-lg, .project-cta, .confirm-panel .btn-home { background: var(--bleu-vif); color: #fff; padding: 14px 24px; }
.btn-submit:hover, .btn-submit-lg:hover, .project-cta:hover, .confirm-panel .btn-home:hover { background: var(--bleu); color: #fff; }
.filter-btn { background: #fff; color: var(--texte-doux); border: 1px solid var(--filet); padding: 10px 20px; }
.filter-btn.is-active, .filter-btn--dark.is-active { background: var(--bleu); border-color: var(--bleu); color: #fff; }

/* -------------------- FORMULAIRES -------------------- */
.field-input, .field-select, textarea.field-input, .donation-custom-input { border: 1px solid #C5CCE0; border-radius: var(--rayon-petit); font-size: 16px; color: var(--texte); }
.form-field label, .contact-info-label, .donation-label { color: var(--bleu); font-weight: 700; }
.donation-amount-btn, .donation-provider-btn, .membership-provider-btn { background: #fff; border: 1.5px solid var(--filet); border-radius: var(--rayon-petit); color: var(--bleu); }
.donation-amount-btn:hover, .donation-provider-btn:hover, .membership-provider-btn:hover { border-color: var(--bleu-vif); }
.donation-amount-btn.is-active { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.donation-provider-btn.is-active, .membership-provider-btn.is-active { background: var(--fond-doux); border-color: var(--bleu-vif); }
.form-section-badge, .photo-preview { border-radius: 50%; }

/* -------------------- QUIZ -------------------- */
.quiz-modal { background: var(--bleu-fonce); border: 0; border-radius: var(--rayon); }
.quiz-btn-primary { background: var(--or); color: var(--bleu-fonce); padding: 13px 24px; }
.quiz-btn-primary:hover { background: #fff; }
.quiz-btn-outline { padding: 13px 24px; }
.quiz-cat-card, .quiz-answer, .quiz-result-stat, .quiz-leaderboard { border-radius: var(--rayon-petit); }

/* -------------------- GALERIE (styles intégrés à la page, d'où le préfixe body) -------------------- */
body .gal-tab { border: 1px solid var(--filet); border-radius: 999px; color: var(--texte-doux); font-weight: 800; font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; min-height: 44px; }
body .gal-tab.is-active { background: var(--bleu); border-color: var(--bleu); color: #fff; }
body .gal-search-row input { border: 1px solid #C5CCE0; border-radius: 999px; font-size: 16px; }
body .gal-album-card, body .gal-video-card { border-radius: var(--rayon); box-shadow: none; }
body .gal-album-card:hover img { transform: none; }
body .gal-album-overlay h3 { font-family: var(--police); font-weight: 800; }
body .gal-featured-badge { border-radius: 4px; }
body .gal-load-more { background: var(--bleu-vif); border-radius: 999px; font-weight: 800; font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; padding: 14px 28px; }
body .gal-load-more:hover { background: var(--bleu); }

/* Le filet doré sous les titres est masqué : l'espace qu'il portait revient au titre */
.section-title { margin-bottom: var(--e4); }
.section-head .section-title, .testimonials-head .section-title { margin-bottom: var(--e1); }
.section-title + .section-rule + .section-sub { margin-top: calc(-1 * var(--e3)); }

/* -------------------- BLOG -------------------- */
.blog-card-body h3 { color: var(--bleu); font-weight: 700; }
.blog-read { border: 1.5px solid var(--bleu-vif); border-radius: 999px; color: var(--bleu-vif); font-weight: 800; font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; padding: 13px; }
.blog-read:hover { background: var(--bleu-vif); color: #fff; }

/* ==================== CARROUSELS D'IMAGES (accueil) ==================== */
/* Défilement natif avec accroche : fonctionne au doigt, à la molette et au clavier, sans script.
   Le défilement automatique (script de index.html) se met en pause au survol et au focus. */
.carrousel-piste, .impact-photos-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.carrousel-piste::-webkit-scrollbar, .impact-photos-grid::-webkit-scrollbar { display: none; }
.carrousel-commandes { display: flex; justify-content: center; gap: var(--e1); margin-top: var(--e3); }
.carrousel-btn { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--bleu-vif); background: #fff; color: var(--bleu-vif); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: background-color 0.15s ease, color 0.15s ease; }
.carrousel-btn:hover { background: var(--bleu-vif); color: #fff; }

/* Ouverture : une image à la fois dans la carte du bandeau */
.hero-bande { position: relative; background: var(--bleu-fonce); }
.hero-bande .carrousel-piste { height: 100%; }
.hero-bande .carrousel-piste img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; }
.hero-bande .carrousel-commandes { position: absolute; right: var(--e2); bottom: var(--e2); margin: 0; }
.hero-bande .carrousel-btn { border-color: #fff; }

/* Communauté : trois images visibles, toutes au même format 3:2 */
.impact-photos-grid { gap: var(--e2); }
.impact-photos-grid .photo-card { flex: 0 0 calc((100% - 2 * var(--e2)) / 3); height: auto; aspect-ratio: 3 / 2; scroll-snap-align: start; }
@media (max-width: 1000px) { .impact-photos-grid .photo-card { flex-basis: calc((100% - var(--e2)) / 2); } }
@media (max-width: 780px) { .impact-photos-grid .photo-card { flex-basis: 84%; height: auto; } }