/* =========================================================
   Groupe Savoir Plus — ONG
   Feuille de styles unique du site.

   Les sections suivent l'ordre d'affichage réel des pages :

    1. Variables globales
    2. Reset et bases
    3. Typographie partagée
    4. Composants partagés (boutons, animations)
    5. En-tête et navigation
    6. Hero
    7. Sections de l'accueil
    8. Formulaire de contact
    9. Pied de page
   10. Pages internes (bannière, service, activités, don)
   11. Responsive
   12. Accessibilité et impression

   Convention de nommage : bloc__element--variante

   Points de rupture : 1100, 960, 760, 640, 560 et 380px.
   Principe : on réduit d'abord la typographie et les espacements, on ne
   change le nombre de colonnes qu'en dernier recours, et on préfère
   toujours 2×2 à une colonne unique. Détail en section 11.
   ========================================================= */

/* =========================================================
   1. VARIABLES GLOBALES
   ========================================================= */
:root {
  --cream: #f8f3e6;
  --cream-2: #fffdf7;
  --navy: #1e2b54;
  --navy-deep: #172248;
  --navy-darkest: #10193a;
  --navy-alt: #26356a;
  --gold: #e0a92e;
  --gold-dark: #c8931f;
  --gold-light: #eeb838;
  --muted: #5a6180;
  --muted-2: #8a8296;
  --line: #ece4d0;
  --line-2: #e6d3a3;
  --ghost: #f1ead9;
  --chip-bg: #f1e7cf;
  --whatsapp: #25d366;
  --linkedin: #0a66c2;
  --facebook: #1877f2;

    --shell: 1280px;
  --content: 1180px;
  --gutter: 24px;

  --serif: 'Spectral', Georgia, 'Times New Roman', serif;
  --sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hand: 'Caveat', 'Segoe Script', cursive;
}

/* =========================================================
   2. RESET ET BASES
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--navy);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--navy); text-decoration: none; transition: color .3s ease, background .3s ease; }
a:hover { color: var(--gold-dark); }
img { max-width: 100%; }

/* Filet de sécurité : un mot plus long que sa colonne se coupe au lieu de
   déborder. Sans cela, « Accompagnement » dépasse la carte de son domaine sur
   un écran de 320px et se fait rogner. Sans effet quand le mot tient. */
h1, h2, h3, h4, p, li, a, span { overflow-wrap: break-word; }
::selection { background: var(--gold); color: var(--navy-deep); }
input::placeholder, textarea::placeholder { color: #9aa0b5; }

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

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy); color: #fff; padding: 14px 20px;
  font-weight: 700; border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; color: #fff; }

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

/* =========================================================
   3. TYPOGRAPHIE PARTAGÉE
   ========================================================= */
.hand { font-family: var(--hand); color: var(--gold-dark); }

.h-section {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(28px, 3.8vw, 46px);
  color: var(--navy);
  line-height: 1.12;
  margin: 6px 0 0;
  letter-spacing: -.015em;
}
.h-section--light { color: #fff; }
.h-section em { font-style: normal; color: var(--gold); }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 42px;
}
.section-head__text { max-width: 640px; }
.section-head__aside { color: var(--muted); font-size: 16px; line-height: 1.6; max-width: 360px; margin: 0; }

.rule { width: 38px; height: 3px; background: var(--gold); border-radius: 2px; margin: 0 0 14px; }
.rule--sm { width: 26px; margin-bottom: 18px; }

/* =========================================================
   4. COMPOSANTS PARTAGÉS
   ========================================================= */

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: inherit;
  font-weight: 800;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  transition: background .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.btn--gold { background: var(--gold); color: var(--navy-deep); box-shadow: 0 8px 20px rgba(224, 169, 46, .4); }
.btn--gold:hover { background: var(--gold-light); color: var(--navy-deep); }

.btn--navy { background: var(--navy); color: #fff; font-weight: 700; }
.btn--navy:hover { background: var(--gold); color: var(--navy-deep); }

.btn--glass {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .3);
  backdrop-filter: blur(6px);
  color: #fff;
  font-weight: 600;
}
.btn--glass:hover { background: rgba(255, 255, 255, .16); color: #fff; }

.btn--linkedin { background: var(--linkedin); color: #fff; font-weight: 700; padding: 13px 24px; white-space: nowrap; }
.btn--linkedin:hover { background: #0958a8; color: #fff; }

.btn--sm { font-size: 14px; padding: 13px 22px; }
.btn--md { font-size: 15px; padding: 14px 28px; }
.btn--lg { font-size: 16px; padding: 16px 28px; }
.btn--xl { font-size: 17px; padding: 18px 32px; box-shadow: 0 16px 36px rgba(224, 169, 46, .4); }
.btn--block { width: 100%; }

/* ---------- Animations ---------- */
@keyframes gsp-pulse {
  0%, 100% { box-shadow: 0 12px 30px rgba(37, 211, 102, .45); }
  50%      { box-shadow: 0 12px 44px rgba(37, 211, 102, .75); }
}
@keyframes gsp-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Fondu enchaîné des trois photos du hero. Cycle de 24 secondes : chaque
   photo reste affichée 7 secondes, la transition dure 1 seconde.

   Les calques sont empilés, le premier au fond. Chaque calque doit revenir à
   zéro pendant qu'un autre le recouvre entièrement, jamais à découvert : deux
   photos qui s'effacent en même temps se mélangeraient à l'écran. */
@keyframes gsp-hero-fondu-2 {
  0%, 29.17%     { opacity: 0; }   /*  0 -> 7 s   : la photo 1 est visible */
  33.33%, 75%    { opacity: 1; }   /*  8 -> 18 s  : photo 2, puis recouverte */
  79.17%, 100%   { opacity: 0; }   /* 19 s        : s'efface à l'abri du calque 3 */
}
@keyframes gsp-hero-fondu-3 {
  0%, 62.5%      { opacity: 0; }   /*  0 -> 15 s  */
  66.67%, 95.83% { opacity: 1; }   /* 16 -> 23 s  : photo 3 */
  100%           { opacity: 0; }   /* 24 s        : retour à la photo 1 */
}

.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s cubic-bezier(.2, .7, .2, 1),
              transform .8s cubic-bezier(.2, .7, .2, 1);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* =========================================================
   5. EN-TÊTE ET NAVIGATION
   ========================================================= */

/* ---------- Barre supérieure ---------- */
.topbar { background: var(--navy-deep); color: #c7cde0; font-size: 13px; }
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 9px;
  padding-bottom: 9px;
}
/* Les trois blocs doivent pouvoir se comprimer, sinon la devise et les icônes
   sortent de l'écran sur un petit mobile. min-width: 0 lève la largeur
   minimale implicite des éléments flex, sans quoi rien ne rétrécit. */
.topbar__left { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; min-width: 0; }
.topbar__left a { color: #c7cde0; display: flex; align-items: center; gap: 7px; min-width: 0; }
.topbar__mail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.topbar__left a:hover { color: var(--gold); }
.topbar__motto {
  font-family: var(--hand);
  font-size: 18px;
  color: var(--gold);
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar__social { display: flex; align-items: center; gap: 10px; flex: none; }
.topbar__social a {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 13px;
}
.topbar__social a:hover { color: #fff; }
.topbar__social a.is-fb:hover { background: var(--facebook); }
.topbar__social a.is-in:hover { background: var(--linkedin); font-size: 11px; }

/* ---------- En-tête ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--cream-2);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 4px 20px rgba(30, 43, 84, .05);
}
.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.brand { display: flex; align-items: center; }
.brand img { height: 52px; width: auto; display: block; }

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--navy);
  padding: 7px 9px;
  border-radius: 100px;
}
.nav__link {
  font-size: 13.5px;
  font-weight: 600;
  color: #e7ebf6;
  padding: 9px 14px;
  border-radius: 100px;
}
.nav__link:hover { color: var(--gold); }
.nav__link.is-current { color: var(--navy-deep); background: var(--gold); padding: 9px 15px; }
.nav__link.is-current:hover { color: var(--navy-deep); }

.header-cta { display: flex; align-items: center; gap: 14px; }

/* ---------- Recherche ----------
   Bouton loupe dans l'en-tête, et panneau qui se déplie juste dessous.
   Le moteur est dans assets/app.js. */
.recherche-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--navy);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.recherche-btn:hover { background: var(--chip-bg); border-color: var(--line-2); color: var(--navy-deep); }
.recherche-btn__loupe { display: flex; color: var(--gold-dark); }
.recherche-btn[aria-expanded="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.recherche-btn[aria-expanded="true"] .recherche-btn__loupe { color: var(--gold); }

.recherche {
  background: var(--cream-2);
  border-top: 1px solid var(--line);
  box-shadow: 0 16px 30px rgba(30, 43, 84, .1);
}
.recherche[hidden] { display: none; }
.recherche__inner { padding-top: 16px; padding-bottom: 18px; }
.recherche__ligne {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: 100px;
  padding: 6px 8px 6px 16px;
}
.recherche__ico { display: flex; color: var(--gold-dark); flex: none; }
.recherche__champ {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  font-family: inherit;
  font-size: 15px;
  color: var(--navy);
  background: transparent;
  padding: 10px 0;
}
/* La croix native du champ de type search ferait doublon avec notre bouton. */
.recherche__champ::-webkit-search-cancel-button { display: none; }
.recherche__fermer {
  flex: none;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  background: var(--ghost);
  color: var(--navy);
  font-size: 15px;
  line-height: 1;
}
.recherche__fermer:hover { background: var(--gold); color: var(--navy-deep); }

.recherche__resultats { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.recherche__vide { margin: 6px 2px; color: var(--muted); font-size: 14px; }
.recherche__item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: #fff;
}
.recherche__item:hover, .recherche__item:focus-visible {
  border-color: var(--line-2);
  background: var(--chip-bg);
  color: var(--navy-deep);
}
.recherche__ou {
  flex: none;
  min-width: 82px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gold-dark);
}
.recherche__titre { font-size: 14.5px; font-weight: 600; color: var(--navy); }

.burger {
  display: none;
  background: var(--navy);
  border: none;
  border-radius: 9px;
  padding: 10px 12px;
  cursor: pointer;
  color: #fff;
  font-size: 18px;
  line-height: 1;
}

.mobile-nav { background: var(--navy); }
.mobile-nav[hidden] { display: none; }
.mobile-nav__inner { display: flex; flex-direction: column; padding-top: 8px; padding-bottom: 18px; }
.mobile-nav__link {
  padding: 13px 4px;
  font-weight: 600;
  color: #e7ebf6;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.mobile-nav__link:hover { color: var(--gold); }
.mobile-nav__cta {
  margin-top: 12px;
  text-align: center;
  background: var(--gold);
  color: var(--navy-deep);
  font-weight: 800;
  padding: 14px;
  border-radius: 100px;
}

/* =========================================================
   6. HERO
   ========================================================= */
.hero {
  position: relative;
  min-height: 82vh;
  display: flex;
  align-items: center;
  background: var(--navy);
  overflow: hidden;
}
/* ---------- Diaporama de fond ----------
   Trois photos superposées au même emplacement. Les deux suivantes sont
   posées par dessus et leur opacité est animée : chacune apparaît, reste,
   puis s'efface, ce qui donne un fondu enchaîné, sans JavaScript.
   Les trois partagent le même cadrage : background-size: cover et le même
   point d'ancrage, donc aucune ne déborde ni ne se recadre autrement. */
.hero__bg {
  position: absolute;
  inset: 0;
  /* Chemin relatif à CE fichier (assets/), pas à la racine du site. */
  background-image: url('accueil-hero.jpg');
  background-size: cover;
  /* Même point d'ancrage que .page-banner__img : les visages restent dans le
     cadre quelle que soit la hauteur du bandeau. */
  background-position: center 45%;
}
.hero__bg--2 {
  background-image: url('accueil-hero-2.jpg');
  opacity: 0;
  animation: gsp-hero-fondu-2 24s ease-in-out infinite;
}
.hero__bg--3 {
  background-image: url('accueil-hero-3.jpg');
  opacity: 0;
  animation: gsp-hero-fondu-3 24s ease-in-out infinite;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(23, 34, 72, .93) 0%,
    rgba(23, 34, 72, .78) 44%,
    rgba(23, 34, 72, .4) 100%);
}
.hero__inner { position: relative; z-index: 2; width: 100%; padding-top: 70px; padding-bottom: 70px; }
.hero__content { max-width: 670px; }

.hero__kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.hero__slash {
  width: 46px; height: 8px;
  background: var(--gold);
  display: inline-block;
  transform: skewX(-24deg);
  border-radius: 2px;
}
.hero__kicker span:last-child { font-family: var(--hand); font-size: 22px; color: var(--gold); }

.hero__title {
  font-family: var(--serif);
  font-weight: 600;
  color: #fff;
  font-size: clamp(40px, 5.6vw, 72px);
  line-height: 1.05;
  margin: 0 0 22px;
  letter-spacing: -.01em;
}
/* font-style: normal annule l'italique que le navigateur applique par défaut
   à <em>. On ne garde que la couleur, comme sur .h-section em. */
.hero__title em { font-style: normal; color: var(--gold); }

.hero__lead {
  color: #cdd3e6;
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.6;
  max-width: 540px;
  margin: 0 0 34px;
}
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__actions .btn--gold { box-shadow: 0 14px 32px rgba(224, 169, 46, .4); }

/* =========================================================
   7. SECTIONS DE L'ACCUEIL
   ========================================================= */

/* ---------- À propos de l'ONG ---------- */
.apropos {
  padding: 40px 0 20px;
  background:
    radial-gradient(760px 300px at 90% -12%, rgba(224, 169, 46, .09), transparent 60%),
    var(--cream-2);
}
.apropos__head { max-width: 760px; margin: 0 auto 40px; text-align: center; }
.apropos__head .hand { font-size: 24px; line-height: 1; margin-bottom: 2px; }
.apropos__head .h-section { margin: 0 0 14px; }
.apropos__head p { margin: 0; color: var(--muted); font-size: 16.5px; line-height: 1.65; }

.apropos__grid {
  max-width: var(--content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  align-items: start;
}
.apropos__card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 34px 30px;
  height: 100%;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.apropos__card:hover { transform: translateY(-10px); }

/* Carte du milieu (mission et vision) : bleu foncé, comme dans la maquette. */
.apropos__card--dark {
  background: linear-gradient(150deg, var(--navy), var(--navy-deep));
  border-color: var(--navy-deep);
  color: #fff;
}

.apropos__icon {
  width: 58px; height: 58px;
  border-radius: 15px;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 26px rgba(224, 169, 46, .32);
  margin-bottom: 20px;
}
.apropos__card--dark .apropos__icon { box-shadow: 0 12px 26px rgba(0, 0, 0, .28); }

.apropos__card h3 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 6px;
}
.apropos__card--dark h3 { color: #fff; }
.apropos__card .rule--sm { margin: 0 0 16px; }

.apropos__card > p { margin: 0 0 18px; color: var(--muted); font-size: 14.5px; line-height: 1.7; }
.apropos__card--dark > p { color: #dfe4f1; }

.apropos__list {
  margin: 0;
  padding-left: 20px;
  color: #3c4360;
  font-size: 14.5px;
  line-height: 1.7;
}
.apropos__list li { margin-bottom: 7px; }

.apropos__vision {
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding-top: 16px;
}
.apropos__vlabel {
  font-family: var(--hand);
  font-size: 19px;
  line-height: 1;
  color: var(--gold);
  margin-bottom: 4px;
}
.apropos__vision p {
  margin: 0;
  color: #c3cade;
  font-size: 14px;
  line-height: 1.65;
}

/* Bandeau chiffré */
.impact {
  max-width: var(--content);
  margin: 40px auto 0;
  background: linear-gradient(120deg, var(--navy), var(--navy-deep) 60%, var(--navy-alt));
  border-radius: 20px;
  padding: 38px 34px 34px;
  color: #fff;
}
.impact__hand { font-family: var(--hand); font-size: 24px; color: var(--gold); line-height: 1; }
.impact__title {
  font-family: var(--serif);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 600;
  margin: 6px 0 26px;
  color: #fff;
}
.impact__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.impact__n {
  font-family: var(--serif);
  font-size: clamp(30px, 3.6vw, 42px);
  font-weight: 700;
  color: var(--gold);
  line-height: 1.05;
}
.impact__lbl { margin-top: 8px; font-size: 14px; line-height: 1.45; color: #c3cade; }

/* ---------- Services ---------- */
.services { background: var(--cream); padding: 20px var(--gutter) 30px; }
.services__intro { max-width: 760px; margin: 0 auto; text-align: center; }
.services__intro .hand { font-size: 24px; margin-bottom: 4px; }
.services__intro .h-section { font-size: clamp(32px, 4.4vw, 52px); line-height: 1.1; margin: 6px 0 16px; }
.services__intro p { color: var(--muted); font-size: 18px; line-height: 1.6; margin: 0; }

.services__grid {
  display: grid;
  /* 4 colonnes = les 4 domaines tiennent sur une seule ligne, sans orpheline. */
  grid-template-columns: repeat(4, 1fr);
  /* 1fr sur les rangées : toutes les cartes gardent la même hauteur, quelle
     que soit la longueur de leur texte, y compris en 2×2. */
  grid-auto-rows: 1fr;
  gap: 26px;
  max-width: var(--content);
  margin: 56px auto 0;
}

.service {
  display: block;
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 34px 30px 30px;
  overflow: hidden;
  color: inherit;
  transition: transform .45s ease, box-shadow .45s ease, border-color .45s ease;
}
.service:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 62px rgba(30, 43, 84, .16);
  border-color: var(--line-2);
  color: inherit;
}
.service__num {
  position: absolute;
  top: 20px; right: 26px;
  font-family: var(--serif);
  font-size: 52px;
  font-weight: 700;
  color: var(--ghost);
  line-height: 1;
}
.service__icon {
  width: 64px; height: 64px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 26px rgba(224, 169, 46, .35);
  margin-bottom: 22px;
  position: relative;
}
.service__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 21px;
  color: var(--navy);
  margin: 0 0 6px;
  position: relative;
}
.service__desc {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.62;
  margin: 0 0 18px;
  min-height: 66px;
}
.service__more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--gold-dark);
  font-weight: 700;
  font-size: 14px;
}

/* ---------- Activités ----------
   Quatre vignettes strictement identiques, une par domaine. */
.activites {
  background: var(--cream-2);
  padding: 30px var(--gutter);
  border-top: 1px solid var(--line);
}
.activites .section-head { max-width: var(--content); margin: 0 auto 42px; }
.activites__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: var(--content);
  margin: 0 auto;
}
/* aspect-ratio plutôt qu'une hauteur fixe : les quatre gardent exactement
   les mêmes proportions à toutes les largeurs d'écran. */
.activites__grid > a { display: block; aspect-ratio: 4 / 3; }

.tile {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 16px;
  overflow: hidden;              /* rogne le zoom : rien ne dépasse du cadre */
  background: var(--navy);
  transition: box-shadow .3s ease;
  box-shadow: 0 10px 26px rgba(30, 43, 84, .12);
}
/* L'image remplit exactement le cadre. Au survol elle ne fait qu'un zoom
   centré : pas de déplacement, donc jamais de fond bleu qui apparaît. */
.tile__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  transform-origin: center;
  transition: transform .45s ease;
}
.tile:hover .tile__img { transform: scale(1.06); }
.tile:hover { box-shadow: 0 22px 44px rgba(30, 43, 84, .24); }
.tile__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(23, 34, 72, 0) 38%, rgba(23, 34, 72, .86));
}
.tile__cap {
  position: absolute;
  left: 16px; right: 16px; bottom: 16px;
  transition: transform .3s ease;
}
.tile__tag {
  display: inline-block;
  background: var(--gold);
  color: var(--navy-deep);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 100px;
  margin-bottom: 8px;
}
.tile__title {
  font-family: var(--serif);
  font-weight: 600;
  color: #fff;
  font-size: 16px;
  line-height: 1.25;
}

/* ---------- Actualités LinkedIn ---------- */
.news { background: linear-gradient(135deg, var(--navy-deep), var(--navy)); padding: 40px 0; }
.news .section-head { max-width: var(--content); margin: 0 auto 40px; padding: 0 var(--gutter); }
.news__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #8fd0ff;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.badge-in {
  background: var(--linkedin);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  width: 24px; height: 24px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
}
.news .h-section { margin: 14px 0 10px; }
.news__lead { color: #b6c0da; font-size: 16px; line-height: 1.6; margin: 0; }

.news__rail { overflow: hidden; }
.news__track {
  display: flex;
  gap: 24px;
  width: max-content;
  animation: gsp-marquee 90s linear infinite;
  padding: 0 12px;
}
.news__track:hover, .news__track:focus-within { animation-play-state: paused; }

.post {
  flex: none;
  width: 360px;
  background: var(--cream-2);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: inherit;
  transition: transform .4s ease, box-shadow .4s ease;
}
.post:hover { transform: translateY(-6px); box-shadow: 0 26px 54px rgba(0, 0, 0, .35); color: inherit; }
.post__media { position: relative; aspect-ratio: 16 / 9; background: var(--navy); overflow: hidden; }
.post__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.post__body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.post__head { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
.post__avatar {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #eee;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.post__avatar img { width: 90%; height: 90%; object-fit: contain; }
.post__author { font-weight: 700; color: var(--navy); font-size: 13.5px; line-height: 1.25; }
.post__date { color: var(--muted-2); font-size: 12px; line-height: 1.25; }
.post__text { color: #3c4360; font-size: 14.5px; line-height: 1.6; margin: 0 0 15px; flex: 1; }
.post__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--muted-2);
  font-size: 13px;
  border-top: 1px solid #eee3cd;
  padding-top: 14px;
}
.post__more { margin-left: auto; color: var(--linkedin); font-weight: 700; }

/* ---------- Partenaires ---------- */
.partners { background: var(--cream); padding: 40px var(--gutter); }
.partners__head { text-align: center; margin-bottom: 38px; }
.partners__head .hand { font-size: 22px; }
.partners__head .h-section { font-size: clamp(26px, 3.4vw, 42px); margin: 4px 0 0; }
.partners__rail {
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.partners__track {
  display: flex;
  gap: 22px;
  width: max-content;
  animation: gsp-marquee 34s linear infinite;
  padding-left: 22px;
}
.partners__track:hover { animation-play-state: paused; }
.partner {
  flex: none;
  width: 200px; height: 110px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  text-align: center;
  box-shadow: 0 8px 22px rgba(30, 43, 84, .06);
}
.partner span {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 16px;
  color: var(--navy);
  line-height: 1.3;
}
/* Logos partenaires : ils occupent toute la hauteur utile de la carte, ratio
   préservé. Les fichiers sont des carrés à fond blanc, ils se fondent dedans. */
/* Carte plus étroite et plus haute : les logos étant carrés, une carte large
   laissait de grandes marges blanches à gauche et à droite. */
.partner--logo { width: 164px; height: 124px; padding: 12px; }
.partner img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.partners__cta { text-align: center; margin-top: 34px; }

/* ---------- Nous rejoindre ---------- */
.jobs {
  background: var(--cream-2);
  padding: 40px var(--gutter);
  border-top: 1px solid var(--line);
}
.jobs__head { max-width: var(--content); margin: 0 auto 44px; text-align: center; }
.jobs__head .hand { font-size: 22px; }
.jobs__head .h-section { margin: 6px 0 14px; }
.jobs__head p { color: var(--muted); font-size: 17px; line-height: 1.6; margin: 0 auto; max-width: 620px; }

.jobs__grid {
  display: grid;
  grid-template-columns:1fr;
  gap: 24px;
  max-width: var(--content);
  margin: 0 auto;
}
.job {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  transition: transform .4s ease, box-shadow .4s ease;
}
.job:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(30, 43, 84, .12); }
.job__tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.job__tag {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--navy);
  background: var(--chip-bg);
  border: 1px solid var(--line-2);
  padding: 5px 11px;
  border-radius: 100px;
}
.job__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 20px;
  color: var(--navy);
  margin: 0 0 10px;
}
.job__desc { color: var(--muted); font-size: 14.5px; line-height: 1.6; margin: 0 0 20px; flex: 1; }

.jobs__banner {
  max-width: var(--content);
  margin: 28px auto 0;
  background: var(--navy);
  border-radius: 18px;
  padding: 26px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.jobs__banner p { color: #dfe4f1; font-size: 16px; margin: 0; }

/* ---------- Bandeau don ---------- */
.donate { background: var(--cream); padding: 20px var(--gutter) 84px; }
.donate__card {
  max-width: var(--content);
  margin: 0 auto;
  background: linear-gradient(120deg, var(--navy), var(--navy-deep) 60%, var(--navy-alt));
  border-radius: 22px;
  padding: clamp(36px, 5vw, 60px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.donate__blob {
  position: absolute;
  right: -60px; top: -60px;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: rgba(224, 169, 46, .14);
}
.donate__text { position: relative; max-width: 600px; }
.donate__text .hand { font-size: 22px; color: var(--gold); }
.donate__text h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(26px, 3.4vw, 40px);
  color: #fff;
  line-height: 1.12;
  margin: 6px 0 12px;
}
.donate__text p { color: #c3cade; font-size: 16.5px; line-height: 1.6; margin: 0; }
.donate__card .btn { position: relative; }

/* =========================================================
   8. FORMULAIRE DE CONTACT
   ========================================================= */
.contact { background: var(--navy-deep); padding: 40px var(--gutter); }
.contact__head { max-width: 760px; margin: 0 auto 44px; text-align: center; }
.contact__head .hand { font-size: 22px; color: var(--gold); }
.contact__grid {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 34px;
  align-items: start;
}
.contact__links { display: flex; flex-direction: column; gap: 12px; }
.contact__link {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px;
  padding: 18px 20px;
  color: #fff;
  font-size: 14.5px;
}
.contact__link:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.contact__link .ico { font-size: 20px; color: var(--gold); }
.contact__link--wa {
  background: var(--whatsapp);
  border-color: transparent;
  color: #053d1c;
  font-weight: 800;
}
.contact__link--wa:hover { background: #20bd5a; color: #053d1c; }
.contact__link--wa .ico { color: #053d1c; }
.contact__link--static { color: #dfe4f1; }

.contact__form {
  background: var(--cream-2);
  border-radius: 18px;
  padding: 30px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .25);
}
.contact__form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field {
  border: 1px solid #dfd8c8;
  border-radius: 10px;
  padding: 14px 15px;
  font-size: 15px;
  font-family: inherit;
  color: var(--navy);
  outline: none;
  background: #fff;
  width: 100%;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(224, 169, 46, .16); }
.field--full { grid-column: 1 / -1; }
textarea.field { resize: vertical; }

.form-status {
  grid-column: 1 / -1;
  background: var(--chip-bg);
  border: 1px solid var(--line-2);
  color: #8a6d1f;
  font-size: 14px;
  border-radius: 10px;
  padding: 11px 13px;
  text-align: center;
  margin: 0;
}
.form-status[hidden] { display: none; }

/* =========================================================
   9. PIED DE PAGE
   ========================================================= */

/* ---------- Pied de page ----------
   Présentation en cartes : un bandeau d'appel, puis quatre cartes bordées,
   puis la ligne légale. Les couleurs restent celles du site : fond bleu nuit,
   accents dorés. */
.site-footer { background: var(--navy-darkest); color: #aab2cc; padding: 34px var(--gutter) 0; }
.site-footer__inner {
  max-width: var(--shell);
  margin: 0 auto;
  background: var(--navy-deep);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 26px;
  padding: 34px 32px 8px;
}

/* Bandeau d'appel */
.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.footer-top__texte { min-width: 260px; flex: 1 1 380px; }
.footer-top__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--gold); font-size: 12.5px; font-weight: 800; letter-spacing: .04em;
}
.footer-top__puce { width: 9px; height: 9px; border-radius: 3px; background: var(--gold); display: block; }
.footer-top__titre {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(22px, 3vw, 34px);
  color: #fff;
  line-height: 1.15;
  margin: 12px 0 8px;
}
.footer-top__sous { margin: 0; font-size: 14.5px; line-height: 1.6; max-width: 460px; }
.footer-top__actions { display: flex; gap: 12px; flex-wrap: wrap; }
/* Bouton secondaire du bandeau : contour clair sur fond sombre. */
.btn--ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff;
  font-weight: 700;
}
.btn--ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; }

/* Les quatre cartes */
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.4fr;
  grid-auto-rows: 1fr;      /* même hauteur pour les quatre */
  gap: 18px;
  padding: 26px 0;
}
.footer-carte {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 18px;
  padding: 22px 20px;
}
.site-footer__plate {
  background: #fff;
  display: inline-block;
  padding: 12px 14px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}
/* width: auto obligatoire : sans lui, l'attribut width= du HTML s'applique et
   écrase le logo horizontalement (image naturelle 360×224). */
.site-footer__plate img { height: 50px; width: auto; display: block; }
.site-footer__baseline { font-size: 14px; line-height: 1.65; margin: 18px 0 0; }

.social { display: flex; gap: 10px; margin-top: 20px; }
.social a {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 15px;
}
.social a:hover { color: #fff; }
.social a.is-fb:hover { background: var(--facebook); }
.social a.is-in:hover { background: var(--linkedin); font-size: 13px; }
.social a.is-wa:hover { background: var(--whatsapp); }

.site-footer h2 { color: #fff; font-weight: 700; font-size: 14.5px; letter-spacing: .02em; margin: 0 0 16px; }
.footer-links { display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.footer-links a, .footer-links > span { color: #aab2cc; display: flex; gap: 9px; align-items: center; }
.footer-links a:hover { color: var(--gold); }
/* Puce dorée devant chaque lien, comme dans la maquette de référence. */
.footer-links--puces a::before {
  content: '';
  flex: none;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
}
.footer-links--puces a:hover::before { background: var(--gold-light); }

/* Tuiles de contact */
.footer-joindre { display: flex; flex-direction: column; gap: 10px; }
.joindre {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  padding: 10px 12px;
  color: #aab2cc;
}
.joindre:hover { background: rgba(224, 169, 46, .12); border-color: rgba(224, 169, 46, .35); color: #aab2cc; }
.joindre--statique:hover { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .08); }
.joindre__ico {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 10px;
  background: rgba(224, 169, 46, .16);
  color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
}
.joindre__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.joindre__k { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #7a83a2; }
.joindre__v { font-size: 13.5px; font-weight: 700; color: #fff; line-height: 1.3; }

.site-footer__legal {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 20px 0 24px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: 13px;
  color: #7a83a2;
}

/* ---------- WhatsApp flottant ---------- */
.wa-float {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 70;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--whatsapp);
  display: flex; align-items: center; justify-content: center;
  animation: gsp-pulse 3s ease-in-out infinite;
}
.wa-float:hover { background: #20bd5a; }
.wa-float span { font-size: 29px; line-height: 1; color: #053d1c; }

/* =========================================================
   10. PAGES INTERNES
   ========================================================= */

/* ---------- Bandeau de page ---------- */
.page-banner {
  position: relative;
  background: var(--navy);
  overflow: hidden;
  padding: 60px var(--gutter);
}
/* Variante photo du bandeau. Aucune page ne s'en sert aujourd'hui, les 6 pages
   internes utilisant le fond dessiné ci-dessous. On la garde volontairement :
   c'est ce qui permet de remettre une photo sur un bandeau en deux lignes de
   HTML, la procédure est décrite dans le README. Les deux règles vont toujours
   ensemble, le voile assombrit la photo pour garder le texte lisible. */
.page-banner__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 45%;
  opacity: .5;
}
.page-banner__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(23, 34, 72, .95), rgba(23, 34, 72, .72));
}
/* ---------- Bandeau de page sans photo ----------
   Variante utilisée par la page « Nous soutenir ». Le fond est entièrement
   dessiné en CSS, aux couleurs du site : rien à télécharger, et le titre
   reste lisible quelle que soit la largeur.

   Trois calques :
     1. dégradé de bleus, du plus sombre à gauche au plus clair à droite ;
     2. halo doré diffus en haut à droite, qui creuse la profondeur ;
     3. bandes obliques dorées très pâles, à la même inclinaison que le trait
        doré du kicker (.hero__slash), pour rester dans le langage du site. */
.page-banner--motif {
  background:
    radial-gradient(120% 140% at 88% 0%, rgba(224, 169, 46, .22) 0%, rgba(224, 169, 46, 0) 55%),
    linear-gradient(105deg, var(--navy-darkest) 0%, var(--navy-deep) 45%, var(--navy-alt) 100%);
}
.page-banner__motif {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(-24deg,
    rgba(224, 169, 46, .10) 0 2px,
    rgba(224, 169, 46, 0) 2px 26px);
  /* Les bandes s'effacent vers la gauche : elles décorent le côté droit sans
     jamais passer derrière le titre. Si le navigateur ignore le masque, elles
     restent à 10 % d'opacité, le texte blanc reste parfaitement lisible. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 58%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 58%);
}

.page-banner__inner { position: relative; z-index: 2; max-width: var(--content); margin: 0 auto; }

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #b7c0da;
  font-size: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.breadcrumb a { color: #b7c0da; }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb [aria-current] { color: var(--gold); }

.page-banner__kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.page-banner__kicker span:last-child { font-family: var(--hand); font-size: 22px; color: var(--gold); }

.page-banner__title {
  font-family: var(--serif);
  font-weight: 600;
  color: #fff;
  font-size: clamp(32px, 4.6vw, 56px);
  line-height: 1.06;
  margin: 0 0 14px;
  letter-spacing: -.01em;
}
.page-banner__title em { font-style: normal; color: var(--gold); }
.page-banner__intro {
  color: #cdd3e6;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.6;
  max-width: 640px;
  margin: 0;
}

/* ---------- Page service ---------- */
.svc { background: var(--cream); padding: 66px var(--gutter) 84px; }
.svc__grid {
  max-width: var(--content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 44px;
  align-items: start;
}

.svc-block { margin-bottom: 38px; }
.svc-block h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(24px, 2.8vw, 32px);
  color: var(--navy);
  margin: 0 0 6px;
}
.svc-block__rule { width: 44px; height: 3px; background: var(--gold); border-radius: 2px; margin-bottom: 22px; }

.check-list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 15px 18px;
  color: #3c4360;
  font-size: 15.5px;
  line-height: 1.5;
}
.check-list li::before {
  content: '✓';
  flex: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy-deep);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
  margin-top: 1px;
}

.svc-cta {
  background: linear-gradient(120deg, var(--navy), var(--navy-deep) 60%, var(--navy-alt));
  border-radius: 18px;
  padding: 32px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.svc-cta p { color: #dfe4f1; font-size: 17px; max-width: 440px; margin: 0; }

.svc-aside { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 92px; }
.svc-aside__box {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px 22px;
}
.svc-aside__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 19px;
  color: var(--navy);
  margin: 0 0 16px;
}
.svc-nav { display: flex; flex-direction: column; gap: 6px; }
.svc-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 600;
  color: #3c4360;
  background: transparent;
  transition: background .25s ease, color .25s ease;
}
.svc-nav a:hover { background: var(--cream); color: var(--gold-dark); }
.svc-nav a[aria-current] { background: var(--navy); color: #fff; }
.svc-nav a[aria-current]:hover { background: var(--navy); color: #fff; }
.svc-nav .num { font-family: var(--serif); font-weight: 700; opacity: .6; }

.svc-help {
  background: var(--navy);
  border-radius: 18px;
  padding: 26px 24px;
  color: #fff;
}
.svc-help h2 { font-family: var(--serif); font-weight: 700; font-size: 19px; margin: 0 0 8px; color: #fff; }
.svc-help p { color: #c3cade; font-size: 14px; line-height: 1.55; margin: 0 0 18px; }
.svc-help .btn { width: 100%; padding: 13px; }
.svc-help .btn--wa { background: var(--whatsapp); color: #053d1c; margin-bottom: 10px; }
.svc-help .btn--wa:hover { background: #20bd5a; color: #053d1c; }
.svc-help .btn--outline {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  color: #fff;
  font-weight: 700;
}
.svc-help .btn--outline:hover { background: rgba(255, 255, 255, .18); color: #fff; }

/* ---------- Page activités ---------- */
.acts { background: var(--cream); padding: 44px var(--gutter) 84px; }
.acts__inner { max-width: var(--content); margin: 0 auto; }

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 38px;
}
.filter {
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  padding: 10px 20px;
  border-radius: 100px;
  cursor: pointer;
  background: #fff;
  color: #3c4360;
  border: 2px solid var(--line-2);
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.filter:hover { border-color: var(--gold); }
.filter[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }

/* grid-auto-rows: 1fr aligne les 10 cartes sur la même hauteur, sinon les
   descriptions les plus longues créent des marches d'escalier. */
.acts__grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; gap: 26px; }

.act {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .4s ease, box-shadow .4s ease;
  /* Arrivée depuis une vignette de l'accueil, via activites.html#<id> :
     réserve la hauteur de l'en-tête collant, sinon la carte visée se
     retrouve cachée dessous. */
  scroll-margin-top: 104px;
}
.act:hover { transform: translateY(-6px); box-shadow: 0 26px 54px rgba(30, 43, 84, .14); }
.act[hidden] { display: none; }

/* Le liseré doré indique la carte demandée depuis l'accueil. */
.act:target {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(224, 169, 46, .28), 0 26px 54px rgba(30, 43, 84, .14);
}
.act__media { position: relative; aspect-ratio: 16 / 10; background: var(--navy); overflow: hidden; }
.act__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Carte sans photo : aplat bleu discret plutôt qu'une image d'emprunt. */
.act__media--vide { background: linear-gradient(135deg, var(--navy), var(--navy-deep) 55%, var(--navy-alt)); }
.act__attente {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, .42);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .06em;
}
.act__tag {
  position: absolute;
  left: 14px; top: 14px;
  background: var(--gold);
  color: var(--navy-deep);
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 100px;
}
.act__body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.act__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 20px;
  color: var(--navy);
  margin: 0 0 10px;
  line-height: 1.3;
}
.act__desc { color: var(--muted); font-size: 14.5px; line-height: 1.6; margin: 0 0 16px; flex: 1; }
.act__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--muted-2);
  font-size: 13px;
  border-top: 1px solid var(--ghost);
  padding-top: 14px;
  flex-wrap: wrap;
}
.acts__empty {
  text-align: center;
  color: var(--muted);
  font-size: 16px;
  padding: 40px 0;
}
.acts__empty[hidden] { display: none; }

.back-link { text-align: center; margin-top: 48px; }

/* ---------- Page don ---------- */
.don { background: var(--cream); padding: 70px var(--gutter) 84px; }
.don__strip {
  max-width: 1080px;
  margin: 0 auto 28px;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 21 / 8;
  background: var(--navy);
}
.don__strip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.don__strip-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(23, 34, 72, .6), rgba(23, 34, 72, .15));
}
.don__badges {
  position: absolute;
  left: 22px; top: 22px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.don__badge {
  background: rgba(23, 34, 72, .72);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  padding: 9px 15px;
  border-radius: 100px;
  backdrop-filter: blur(4px);
}

.don__grid {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 26px;
  align-items: start;
}
.don__main { display: flex; flex-direction: column; gap: 22px; }
.don__aside { display: flex; flex-direction: column; gap: 18px; }

.don-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 34px 32px;
}
.don-card--sm { padding: 30px 28px; }
.don-card h2 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 26px;
  color: var(--navy);
  margin: 0 0 6px;
}
.don-card--sm h2 { font-size: 24px; margin-bottom: 20px; }

.pill-label {
  display: inline-block;
  background: var(--chip-bg);
  color: var(--gold-dark);
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: .1em;
  padding: 6px 14px;
  border-radius: 100px;
}
.don-card p.why { color: #3c4360; font-size: 16px; line-height: 1.65; margin: 16px 0 0; }
.don-card__title { font-size: 24px; margin: 14px 0 6px; }

/* Bloc « Autres façons de nous soutenir ».
   La liste .check-list vient des pages domaines, où elle est posée sur le fond
   crème : ses items sont blancs. Dans une carte déjà blanche il faut inverser,
   sinon les puces flottent sans délimitation. */
.don-card .check-list { margin-top: 20px; }
.don-card .check-list li { background: var(--cream); }
.don-card .check-list + .btn { margin-top: 22px; }

/* Bloc « Moyens de paiement » */
.pay { text-align: center; padding: 14px 6px 4px; }
.pay__lead {
  color: #3c4360;
  font-size: 15.5px;
  line-height: 1.65;
  max-width: 460px;
  margin: 0 auto 22px;
}

.pay__amounts { border: 0; margin: 0 auto 22px; padding: 0; max-width: 460px; }
.pay__amounts legend {
  color: var(--muted-2);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 0;
  margin-bottom: 12px;
}
.pay__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.pay__chip {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 11px 20px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease, color .25s ease;
}
.pay__chip:hover { border-color: var(--gold); }
.pay__chip.is-active { background: var(--chip-bg); border-color: var(--gold); color: var(--gold-dark); }

.pay__custom { display: block; margin-top: 14px; }
.pay__custom span {
  display: block;
  font-weight: 700;
  font-size: 14px;
  color: var(--navy);
  margin-bottom: 7px;
  text-align: left;
}

.pay__cta { padding: 16px 32px; font-size: 16px; font-weight: 800; }

.pay__status {
  max-width: 460px;
  margin: 16px auto 0;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 14.5px;
  line-height: 1.55;
  text-align: left;
}
.pay__status[hidden] { display: none; }
.pay__status[data-kind="ok"] { background: var(--chip-bg); border-color: var(--line-2); color: #8a6d1f; }
.pay__status[data-kind="warn"] { background: #fdf6e3; border-color: var(--line-2); color: #8a6d1f; }
.pay__status[data-kind="error"] { background: #fdecec; border-color: #f2c9c9; color: #a33; }

.pay__secure { color: var(--muted-2); font-size: 13px; margin-top: 12px; }

.pay__logos { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.pay__logo {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 36px;
  padding: 5px;
  border-radius: 8px;
  border: 1px solid var(--line);
  /* Fond blanc : les trois logos sont fournis sur fond transparent. */
  background: #fff;
}
/* Les trois fichiers ont des rapports largeur/hauteur différents. Les
   contraindre en hauteur ET en largeur, sans dimension imposée, les met à
   l'échelle sans jamais les déformer : la rangée reste alignée. */
.pay__logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
}

.facts { display: flex; flex-direction: column; }
.fact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--ghost);
}
.fact__k {
  color: var(--muted-2);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .08em;
}
.fact__v {
  background: var(--cream);
  color: var(--navy);
  font-weight: 700;
  font-size: 14px;
  padding: 8px 14px;
  border-radius: 10px;
  text-align: right;
}

.share { display: flex; flex-direction: column; gap: 10px; }
.share > * {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 13px 20px;
  font-weight: 700;
  color: var(--navy);
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
  transition: border-color .25s ease;
}
.share > *:hover { border-color: var(--gold); color: var(--navy); }
.share .ico-fb { color: var(--facebook); font-weight: 800; }
.share .ico-in { color: var(--linkedin); font-weight: 800; }
.share .ico-wa { color: var(--whatsapp); font-weight: 800; }

.don__back { text-align: center; color: var(--muted); font-weight: 600; font-size: 14px; padding: 8px; display: block; }
.don__back:hover { color: var(--gold-dark); }

/* =========================================================
   11. RESPONSIVE
   ========================================================= */

/* Principe de ce site : on ne casse pas la composition horizontale dès que
   l'écran rétrécit. On réduit d'abord les tailles de texte et les
   espacements ; on ne change le nombre de colonnes qu'en dernier recours, et
   on préfère toujours 2×2 à une colonne unique.

   Points de rupture :
     1100px  la composition tient encore, on resserre la typographie
      960px  bascule du menu en burger, les grilles de 4 passent en 2×2
      760px  resserrage supplémentaire, les grilles de 3 restent à 3
      560px  dernier palier avant l'empilement des blocs de texte longs
      380px  marges latérales réduites                                    */

/* ---------- Resserrage — 1100px ---------- */
@media (max-width: 1100px) {
  /* L'en-tête garde toute sa navigation : on rétrécit, on ne replie pas. */
  .nav { gap: 2px; padding: 6px 7px; }
  .nav__link { font-size: 12.5px; padding: 8px 11px; }
  .nav__link.is-current { padding: 8px 12px; }
  .recherche-btn { font-size: 12.5px; padding: 9px 13px; }
  .recherche-btn__mot { display: none; }   /* la loupe seule suffit */
  .header-cta { gap: 10px; }
  .btn--sm { font-size: 12.5px; padding: 10px 16px; }
  .brand img { height: 44px; }
  .site-header__bar { gap: 12px; }

  .apropos__card { padding: 26px 22px; }
  .apropos__card h3 { font-size: 19px; }
  .apropos__card > p, .apropos__list { font-size: 13.5px; }
  .apropos__grid { gap: 18px; }

  .impact { padding: 30px 26px 26px; }
  .impact__grid { gap: 16px; }
  .impact__lbl { font-size: 13px; }

  .service { padding: 26px 22px; }
  .service__title { font-size: 18px; }
  .service__desc { font-size: 14px; }
}

/* ---------- Tablette et bascule du menu — 960px ---------- */
@media (max-width: 960px) {
  /* La barre supérieure garde ses trois blocs : email, devise, réseaux.
     On rétrécit, on ne fait plus disparaître la devise. */
  .topbar { font-size: 12px; }
  .topbar__inner { gap: 10px; }
  .topbar__left { gap: 12px; }
  .topbar__motto { font-size: 15px; }
  .topbar__social { gap: 7px; }
  .topbar__social a { width: 23px; height: 23px; font-size: 11.5px; }

  /* Intro de « Nos domaines d'intervention » */
  .services__intro .hand { font-size: 20px; }
  .services__intro .h-section { font-size: clamp(24px, 4vw, 34px); }
  .services__intro p { font-size: 15.5px; }

  /* Ces deux bandeaux restent en ligne : texte à gauche, bouton à droite.
     Sans `flex: 1` et `max-width: none`, le texte garde sa largeur maximale
     de 600px et pousse le bouton à la ligne suivante. */
  .jobs__banner p, .donate__text { flex: 1 1 0; min-width: 0; max-width: none; }
  .jobs__banner .btn, .donate__card .btn { flex: none; }
  .jobs__banner { padding: 20px 22px; gap: 14px; }
  .jobs__banner p { font-size: 14.5px; }
  .donate__card { padding: 30px 26px; gap: 20px; }
  .donate__text .hand { font-size: 19px; }
  .donate__text h2 { font-size: clamp(21px, 3.2vw, 30px); }
  .donate__text p { font-size: 14.5px; }

  /* La navigation tient encore : dernier cran de resserrage avant le burger. */
  .nav__link { font-size: 11.5px; padding: 7px 8px; }
  .nav__link.is-current { padding: 7px 9px; }
  .recherche-btn { padding: 8px 10px; }
  .btn--sm { font-size: 11.5px; padding: 9px 13px; }
  .brand img { height: 38px; }

  /* Pied de page : 4 cartes -> 2×2. */
  .site-footer__inner { padding: 26px 20px 6px; border-radius: 20px; }
  .footer-top__titre { font-size: clamp(20px, 4vw, 26px); }
  .site-footer__grid { gap: 14px; }
  .footer-carte { padding: 18px 16px; }
  .joindre__v { font-size: 12.5px; }

  /* Les grilles de 4 passent en 2×2, jamais en colonne unique. */
  .services__grid { grid-template-columns: repeat(2, 1fr); }
  .activites__grid { grid-template-columns: repeat(2, 1fr); }
  .site-footer__grid { grid-template-columns: repeat(2, 1fr); gap: 36px; }

  /* .jobs__grid reste à 3 colonnes : trois cartes ne se répartissent pas
     en 2×2 sans laisser une orpheline. On rétrécit, on ne replie pas. */

  /* « À propos » et « Nos résultats » gardent leur disposition horizontale :
     on ne réduit que la typographie et les espacements. */
  .apropos__grid { gap: 14px; }
  .apropos__card { padding: 20px 16px; }
  .apropos__card h3 { font-size: 17px; }
  .apropos__card > p, .apropos__list { font-size: 12.5px; line-height: 1.55; }
  .apropos__list { padding-left: 16px; }
  .apropos__vlabel { font-size: 16px; }
  .apropos__vision p { font-size: 12.5px; }
  .apropos__icon { width: 42px; height: 42px; }

  .impact__grid { gap: 12px; }
  .impact__lbl { font-size: 12px; line-height: 1.35; }

  /* Publications, partenaires et contact : on rétrécit les cartes plutôt que
     de laisser leur largeur fixe déborder de l'écran. */
  .post { width: 300px; }
  .partner, .partner--logo { width: 148px; height: 108px; padding: 12px; }
  .contact__link { padding: 12px 14px; gap: 11px; font-size: 14px; }
  .field { padding: 12px 14px; font-size: 14px; }

  /* Contenu principal + colonne latérale : on garde les deux côte à côte,
     en resserrant la colonne latérale plutôt qu'en la renvoyant dessous. */
  .contact__grid { grid-template-columns: 1fr 1fr; gap: 22px; }
  .svc__grid { grid-template-columns: 1.6fr 1fr; gap: 22px; }
  .don__grid { grid-template-columns: 1.5fr 1fr; gap: 18px; }
  .svc-aside__box, .svc-help, .don-card { padding: 22px 18px; }
  .don-card__title { font-size: 20px; }
  .svc-block { padding: 22px 18px; }

  .services { padding-top: 64px; padding-bottom: 56px; }
  .activites, .jobs, .contact { padding-top: 64px; padding-bottom: 64px; }
  .news { padding: 64px 0; }
  .section-head__aside { max-width: none; }
  .svc { padding-top: 48px; padding-bottom: 64px; }
  .don { padding-top: 48px; padding-bottom: 64px; }
}

/* ---------- Mobile large — 760px ---------- */
@media (max-width: 760px) {
  /* En dessous, sept entrées ne tiennent plus sans devenir illisibles :
     c'est ici que le menu bascule en burger. */
  .nav { display: none; }
  .burger { display: inline-flex; }
  .brand img { height: 42px; }
  .btn--sm { font-size: 12px; padding: 10px 14px; }

  /* « Nous soutenir » figure déjà dans le menu burger : le répéter dans la
     barre encombre pour rien. La recherche récupère toute la place libérée. */
  .header-cta .btn--gold { display: none; }
  .header-cta { flex: 1; min-width: 0; }
  .recherche-btn { width: 100%; justify-content: flex-start; padding: 11px 16px; }
  .recherche-btn__mot { display: inline; color: var(--muted); font-weight: 600; }

  .apropos { padding-top: 28px; }
  .apropos__grid { gap: 10px; }
  .apropos__card { padding: 16px 12px; border-radius: 14px; }
  .apropos__card h3 { font-size: 15px; }
  .apropos__card > p, .apropos__list, .apropos__vision p { font-size: 11.5px; line-height: 1.5; }
  .apropos__list { padding-left: 14px; }
  .apropos__list li { margin-bottom: 5px; }
  .apropos__icon { width: 34px; height: 34px; }
  .apropos__icon svg { width: 20px; height: 20px; }
  .apropos__vlabel { font-size: 14px; }
  /* Le survol soulève la carte de 10px : sur trois cartes serrées, le
     mouvement devient parasite. */
  .apropos__card:hover { transform: none; }

  .impact { padding: 24px 18px 20px; }
  .impact__grid { gap: 10px; }
  .impact__lbl { font-size: 10.5px; line-height: 1.3; }

  .service { padding: 20px 16px; }
  .service__title { font-size: 16px; }
  .service__desc { font-size: 13px; }
  .service__num { font-size: 38px; top: 12px; right: 16px; }

  /* Les 3 offres restent alignées : on réduit la carte, pas le nombre. */
  .jobs__grid { grid-template-columns: 1fr; gap: 12px; }
  .job { padding: 18px 14px; }
  .job__title { font-size: 16px; }
  .job__desc { font-size: 12.5px; line-height: 1.5; }
  .job__tag { font-size: 10.5px; padding: 4px 9px; }
  .job .btn { font-size: 12px; padding: 10px 12px; }

  .svc__grid, .don__grid, .contact__grid { gap: 16px; }
  .topbar { font-size: 11px; }
  .topbar__left { gap: 9px; }
  .topbar__motto { font-size: 13px; }
  .topbar__social a { width: 20px; height: 20px; font-size: 10.5px; }

  .services__intro .hand { font-size: 17px; }
  .services__intro .h-section { font-size: clamp(21px, 3.6vw, 28px); }
  .services__intro p { font-size: 14px; }

  .jobs__banner { padding: 16px 16px; gap: 10px; }
  .jobs__banner p { font-size: 13px; }
  .donate__card { padding: 24px 20px; gap: 14px; }
  .donate__text .hand { font-size: 17px; }
  .donate__text h2 { font-size: clamp(18px, 3vw, 24px); }
  .donate__text p { font-size: 13px; }

  .post { width: 262px; }
  .partner, .partner--logo { width: 128px; height: 94px; padding: 10px; }
  .contact__link { padding: 10px 12px; font-size: 13px; }
  .contact__form-grid { gap: 10px; }
  .field { padding: 11px 12px; font-size: 13px; }
  .svc-aside__box, .svc-help, .don-card { padding: 18px 14px; }
  .check-list li { font-size: 13.5px; padding: 12px 14px; }
  .facts, .fact__v { font-size: 12.5px; }
  .pay__chip { font-size: 13px; padding: 10px 14px; }

}

/* ---------- Mobile — 640px ---------- */
@media (max-width: 640px) {
  /* Les tuiles « Nous joindre » ont une largeur incompressible : sous 640px
     elles dépassaient leur colonne et se faisaient rogner. La carte contact
     prend donc toute la largeur, les trois autres restent côte à côte. */
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__grid > .footer-carte:last-child { grid-column: 1 / -1; }
  .site-footer__inner { padding: 22px 14px 4px; }
  .footer-carte { padding: 16px 13px; }
  .site-footer h2 { font-size: 13.5px; margin-bottom: 12px; }
  .footer-links { font-size: 13px; gap: 10px; }
  .site-footer__baseline { font-size: 13px; }
  .footer-top__actions { width: 100%; }
  .footer-top__actions .btn { flex: 1; }

  .contact__form-grid { grid-template-columns: 1fr; }
  .post { width: 240px; }
  .hero { min-height: 0; }
  .hero__inner { padding-top: 56px; padding-bottom: 56px; }
  .hero__actions .btn { width: 100%; }
  .topbar__left { gap: 14px; font-size: 12px; }
  .wa-float { right: 16px; bottom: 16px; width: 54px; height: 54px; }
  .wa-float span { font-size: 26px; }

  /* Les libellés des domaines sont longs (« Valorisation & diffusion ») :
     sans cet ajustement les 5 filtres tiennent sur 4 lignes et repoussent
     les activités hors de l'écran. */
  .filters { gap: 8px; margin-bottom: 28px; }
  .filter { font-size: 13px; padding: 9px 14px; }
  .don__strip { aspect-ratio: 16 / 9; }
  .don__badges { left: 14px; top: 14px; right: 14px; }
  .pay__cta { width: 100%; }
  /* .jobs__banner et .donate__card restent en ligne : c'est un texte suivi
     d'un bouton, l'empiler casse la lecture. Seul .svc-cta, dont le bouton
     est bien plus large, passe dessous. */
  .svc-cta { flex-direction: column; align-items: flex-start; }
  .svc-cta .btn { width: 100%; }
  .jobs__banner .btn, .donate__card .btn { font-size: 12.5px; padding: 11px 16px; }

   .acts__grid { grid-template-columns: repeat(1, 1fr); }

}

/* ---------- Petit mobile — 560px ---------- */
@media (max-width: 560px) {
  /* Seul palier où les blocs de texte long s'empilent : en dessous, trois
     colonnes de 150px rendraient les listes à puces illisibles. */
  .apropos__grid { grid-template-columns: 1fr; gap: 14px; }
  .apropos__card { padding: 22px 18px; }
  .apropos__card h3 { font-size: 18px; }
  .apropos__card > p, .apropos__list, .apropos__vision p { font-size: 14px; line-height: 1.6; }
  .apropos__icon { width: 46px; height: 46px; }
  .apropos__icon svg { width: 26px; height: 26px; }

  /* « Nos résultats » passe en 2×2 : quatre colonnes de 66px couperaient
     chaque libellé en une colonne de mots. */
  .impact__grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .impact__lbl { font-size: 12px; }

  /* Trois offres, trois colonnes : elles restent alignées, comme demandé.
     Elles ne se répartissent pas en 2×2 sans laisser un orphelin. */
  .jobs__grid { gap: 8px; }
  .job { padding: 14px 10px; }
  .job__title { font-size: 13.5px; }
  .job__desc { font-size: 11px; }
  .job__tag { font-size: 9.5px; padding: 3px 7px; }
  .job .btn { font-size: 11px; padding: 9px 8px; }

  /* Contenu + colonne latérale : à cette largeur, deux colonnes de 130px
     rendraient le formulaire de contact et le choix du montant inutilisables. */
  .contact__grid, .svc__grid, .don__grid { grid-template-columns: 1fr; gap: 18px; }
  .topbar { font-size: 10px; }
  .topbar__left { gap: 7px; flex: 0 1 auto; }
  /* L'adresse complète ne tient plus : on garde l'enveloppe seule, toujours
     cliquable et menant au même endroit. */
  .topbar__mail { display: none; }
  .topbar__left a span[aria-hidden] { font-size: 13px; }
  .topbar__motto { font-size: 11.5px; }
  .topbar__social a { width: 18px; height: 18px; font-size: 9.5px; }

  .services__intro .h-section { font-size: 19px; }
  .services__intro p { font-size: 12.5px; }
  .services__intro .hand { font-size: 15px; }

  .jobs__banner { padding: 13px 12px; gap: 8px; }
  .jobs__banner p { font-size: 11.5px; }
  .donate__card { padding: 18px 16px; gap: 10px; }
  .donate__text h2 { font-size: 18px; }
  .donate__text p { font-size: 11.5px; }
  .donate__text .hand { font-size: 15px; }
  .jobs__banner .btn, .donate__card .btn { font-size: 11.5px; padding: 10px 13px; }

  .post { width: 218px; }
  .partner, .partner--logo { width: 108px; height: 80px; padding: 9px; }

  .filter { font-size: 12.5px; padding: 8px 12px; }
  .tile__title { font-size: 14px; }
  .tile__tag { font-size: 10px; padding: 4px 9px; }

  
}

/* ---------- Très petit mobile — 380px ---------- */
@media (max-width: 380px) {
  /* Sur un écran de 320px, 24px de marge de chaque côté ne laissent que
     272px de contenu utile. On récupère 16px de largeur de texte. */
  :root { --gutter: 16px; }
  .activites__grid, .services__grid, .acts__grid { gap: 10px; }
  .tile__title { font-size: 12.5px; }
  .service { padding: 16px 12px; }
  .site-footer { padding-left: 10px; padding-right: 10px; }
  .site-footer__inner { padding: 18px 10px 2px; }
  .footer-carte { padding: 13px 10px; }
  .joindre { padding: 8px 9px; gap: 9px; }
  .joindre__ico { width: 28px; height: 28px; font-size: 13px; }
  .joindre__v { font-size: 11.5px; }
  .joindre__k { font-size: 9.5px; }
  .topbar { font-size: 9px; }
  /* 9px et non 10 : à 320px la devise dépassait de 13px et se faisait
     tronquer par les points de suspension. */
  .topbar__motto { font-size: 9px; }
  .topbar__left { gap: 5px; }
  .topbar__social a { width: 16px; height: 16px; font-size: 8.5px; }
  .jobs__banner .btn, .donate__card .btn { font-size: 10.5px; padding: 9px 10px; }

  /* Trois cartes dans 288px : chaque bouton doit pouvoir se comprimer, sinon
     la grille impose une largeur minimale et déborde. */
  .jobs__grid { gap: 6px; }
  .job { padding: 11px 7px; }
  .job__title { font-size: 12px; }
  .job__desc { font-size: 10px; line-height: 1.4; }
  .job__tag { font-size: 8.5px; padding: 3px 5px; }
  .job .btn { font-size: 10px; padding: 8px 4px; min-width: 0; }
  .jobs__banner { padding: 11px 10px; gap: 6px; }
  .donate__card { padding: 15px 13px; gap: 8px; }

  .post { width: 196px; }
  .partner, .partner--logo { width: 92px; height: 70px; padding: 8px; }
  .service__title { font-size: 14.5px; }
  /* La page est en français : la césure automatique coupe les mots longs
     proprement plutôt qu'au milieu d'une syllabe. */
  .service__title, .service__desc, .apropos__card h3 { hyphens: auto; }
}

/* =========================================================
   12. ACCESSIBILITÉ ET IMPRESSION
   ========================================================= */

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .news__track, .partners__track { animation: none; }
  /* Le diaporama du hero s'arrête sur la première photo plutôt que de
     clignoter d'une image à l'autre. */
  .hero__bg--2, .hero__bg--3 { animation: none; opacity: 0; }
}

/* ---------- Impression ---------- */
@media print {
  .topbar, .site-header, .wa-float, .news__rail, .partners__rail { display: none; }
  body { background: #fff; color: #000; }
}