/* ==========================================================================
   Orphelinat Keur Mame Diarra — feuille de styles principale
   Écrite en propriétés logiques (inline-start/end) : le RTL arabe fonctionne
   sans feuille rtl.css séparée.
   ========================================================================== */

/* --- 1. Jetons de design ------------------------------------------------- */
:root {
  /* Vert de l'identité historique (#0a4c04) décliné en gamme */
  --okmd-green-950: #052e02;
  --okmd-green-900: #0a4c04;
  --okmd-green-700: #14701a;
  --okmd-green-500: #2e9b3a;
  --okmd-green-100: #e3f2e2;

  /* Or : le #efd807 du site actuel, désaturé pour rester lisible */
  --okmd-gold-600: #b8890a;
  --okmd-gold-500: #e3b505;
  --okmd-gold-100: #fdf3d3;

  /* Rouge brique, reserve a ce qui manque. Distinct du rouge d'erreur des
     formulaires (#b3261e) : ce n'est pas une panne, c'est une alerte. */
  --okmd-alerte-600: #a32b1f;

  --okmd-sand-50: #fbf8f1;
  --okmd-ink: #1a1d19;
  --okmd-muted: #5a6357;
  --okmd-line: #e2e0d6;
  --okmd-white: #ffffff;

  --okmd-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Fraunces porte les titres : une serif donne l'autorite tranquille qu'une
     grotesque ne donne pas, et distingue le site des gabarits associatifs. */
  --okmd-font-head: "Fraunces", Georgia, "Times New Roman", serif;
  --okmd-font-ui: "Inter", system-ui, sans-serif;

  --okmd-radius: 14px;
  --okmd-radius-lg: 24px;
  --okmd-radius-xl: 32px;
  --okmd-shadow-fine: 0 1px 2px rgba(5, 46, 2, .05), 0 2px 8px rgba(5, 46, 2, .04);
  --okmd-shadow: 0 2px 4px rgba(5, 46, 2, .05), 0 12px 32px rgba(5, 46, 2, .08);
  --okmd-shadow-forte: 0 4px 8px rgba(5, 46, 2, .06), 0 28px 60px rgba(5, 46, 2, .14);
  --okmd-wrap: 1400px;
  --okmd-gutter: clamp(1.15rem, 4vw, 3rem);
}

/* L'arabe passe intégralement en Cairo (le latin garde Inter). */
html[lang^="ar"] {
  --okmd-font-body: "Cairo", system-ui, sans-serif;
  --okmd-font-head: "Cairo", system-ui, sans-serif;
  --okmd-font-ui: "Cairo", system-ui, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--okmd-font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--okmd-ink);
  background: var(--okmd-white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--okmd-font-head);
  line-height: 1.2;
  color: var(--okmd-green-950);
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 {
  font-size: clamp(2.35rem, 5.4vw, 4rem);
  font-weight: 600;
  letter-spacing: -.022em;
  line-height: 1.06;
}
h2 {
  font-size: clamp(1.75rem, 3.6vw, 2.65rem);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.12;
}
h3 { font-size: 1.28rem; font-weight: 600; letter-spacing: -.01em; }

/* Fraunces est variable : on ouvre un peu l'axe optique sur les grands
   corps, ce qui affine les deliés et evite l'effet « titre gras ». */
h1, h2 { font-variation-settings: "opsz" 120, "SOFT" 30; }

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

a { color: var(--okmd-green-700); text-underline-offset: 3px; }
a:hover { color: var(--okmd-green-900); }

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

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

.okmd-skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 999;
  background: var(--okmd-green-900);
  color: #fff;
  padding: .75rem 1.25rem;
}
.okmd-skip-link:focus { inset-inline-start: 0; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

/* --- 3. Mise en page ----------------------------------------------------- */
.okmd-wrap {
  width: min(var(--okmd-wrap), 100%);
  margin-inline: auto;
  padding-inline: var(--okmd-gutter);
}

.okmd-section { padding-block: clamp(3rem, 8vw, 5.5rem); }
.okmd-section--sand { background: var(--okmd-sand-50); }

.okmd-section__intro {
  max-width: 50rem;
  margin-inline: auto;
  margin-block-end: 2.75rem;
  text-align: center;
}
.okmd-section__intro p { color: var(--okmd-muted); font-size: 1.125rem; }

.okmd-eyebrow {
  display: inline-block;
  font-family: var(--okmd-font-ui);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--okmd-gold-600);
  margin-block-end: .6rem;
}

/* --- 4. Boutons ---------------------------------------------------------- */
.okmd-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .8rem 1.6rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--okmd-font-ui);
  font-weight: 600;
  font-size: .97rem;
  letter-spacing: -.005em;
  line-height: 1;
  text-decoration: none;
  /* Un bouton ne se coupe jamais : dans l'en-tete serre, « Faire un don »
     se repliait sur trois lignes et prenait la forme d'une pastille. */
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease,
              transform .2s ease, box-shadow .2s ease;
}
.okmd-btn:hover { transform: translateY(-2px); }
.okmd-btn--primary {
  background: var(--okmd-gold-500);
  color: var(--okmd-green-950);
  box-shadow: 0 4px 14px rgba(227, 181, 5, .3);
}
.okmd-btn--primary:hover {
  background: var(--okmd-gold-600);
  color: #fff;
  box-shadow: 0 8px 22px rgba(184, 137, 10, .38);
}

.okmd-btn--ghost { border-color: currentColor; color: var(--okmd-green-900); background: transparent; }
.okmd-btn--ghost:hover { background: var(--okmd-green-900); color: #fff; }

.okmd-btn--on-dark { border-color: rgba(255,255,255,.6); color: #fff; }
.okmd-btn--on-dark:hover { background: #fff; color: var(--okmd-green-950); }

/* --- 5. En-tête ---------------------------------------------------------- */
.okmd-topbar {
  background: var(--okmd-green-950);
  color: #cfe0cc;
  font-size: .875rem;
}
.okmd-topbar .okmd-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .4rem 1.5rem;
  padding-block: .55rem;
}
/* Deux groupes plutot qu'un espaceur : au repli, chaque groupe reste entier
   et le bouton de don ne part pas seul a la ligne. */
.okmd-topbar__groupe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem 1.25rem;
}
.okmd-topbar a { color: #cfe0cc; text-decoration: none; }
.okmd-topbar a:hover { color: #fff; text-decoration: underline; }

/* L'appel au don ouvre la page, avant même le logo. Compact : la barre
   supérieure doit rester une barre, pas un bandeau. */
.okmd-topbar__don {
  padding: .42rem 1.05rem;
  font-size: .85rem;
  margin-block: -.15rem;
}

@media (max-width: 780px) {
  /* Sur mobile la barre ne garde que l'essentiel : appeler et donner.
     E-mail et réseaux sont dans le pied de page, à deux écrans de là. */
  .okmd-topbar__email,
  .okmd-topbar__social { display: none; }
  .okmd-topbar .okmd-wrap { gap: .5rem .9rem; padding-block: .45rem; }
  .okmd-topbar__don { padding: .4rem .9rem; font-size: .82rem; }
}

.okmd-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Fond opaque plutot qu'un backdrop-filter : le flou d'arriere-plan coute
     cher a composer, sur des telephones modestes comme au defilement, pour un
     gain visuel nul sur un fond deja clair. */
  background: rgba(255, 255, 255, .97);
  border-block-end: 1px solid var(--okmd-line);
  transition: box-shadow .25s ease;
}
.okmd-header .okmd-wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-block: .7rem;
  /* Plus large que la colonne de texte : une barre de navigation n'a pas a
     respecter la largeur de lecture, et huit entrees ont besoin de place. */
  width: min(1500px, 100%);
}
.okmd-header .okmd-btn { flex-shrink: 0; padding-inline: 1.25rem; }

.okmd-brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  flex-shrink: 0;
}
.okmd-brand img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.okmd-brand__name {
  display: block;
  font-family: var(--okmd-font-head);
  font-weight: 600;
  font-size: 1rem;
  color: var(--okmd-green-950);
  line-height: 1.2;
  /* Deux lignes : « Orphelinat Keur / Mame Diarra ». */
  max-width: 15ch;
}
.okmd-brand__tag { display: block; font-size: .72rem; color: var(--okmd-muted); }

/* Sous 620 px, l'en-tete ne dispose que d'environ 353 px. Marque, bouton de
   menu et appel au don ne tiennent qu'en resserrant : c'est ce reglage, et
   non un overflow-x cache, qui supprime la bande blanche a droite. */
/* L'appel au don ayant rejoint la barre supérieure, la ligne du logo n'a plus
   que la marque et le bouton de menu : le nom complet et la baseline tiennent
   désormais jusqu'en bas de l'échelle. */
@media (max-width: 620px) {
  .okmd-brand img { width: 44px; height: 44px; }
  .okmd-brand__name { font-size: .95rem; max-width: 16ch; }
  .okmd-brand__tag { font-size: .7rem; }
}

/* Le menu a huit entrees mesure 823 px ; avec la marque (200) et le bouton de
   don (130), il faut 1153 px pour 1084 disponibles. On resserre donc les
   entrees des que la place manque, et on efface la baseline, qui figure deja
   dans le pied de page. */
/* Mesuré, pas estimé : marque 241 px + menu resserré 738 px = 995 px, auxquels
   s'ajoutent 92 px de marges intérieures. Le menu horizontal réclame donc
   environ 1090 px ; en dessous de 1150 px, le menu déroulant prend le relais. */
@media (min-width: 1151px) and (max-width: 1400px) {
  .okmd-nav a { padding-inline: .55rem; font-size: .9rem; }
}

.okmd-nav { margin-inline-start: auto; }
.okmd-nav ul { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.okmd-nav li { position: relative; }
.okmd-nav a {
  display: block;
  padding: .6rem .85rem;
  border-radius: 8px;
  font-family: var(--okmd-font-ui);
  font-weight: 500;
  font-size: .94rem;
  color: var(--okmd-ink);
  text-decoration: none;
  white-space: nowrap;
}
.okmd-nav a:hover,
.okmd-nav a.est-actif { background: var(--okmd-green-100); color: var(--okmd-green-900); }

/* sous-menus */
.okmd-nav .sub-menu {
  position: absolute;
  inset-inline-start: 0;
  top: 100%;
  display: none;
  min-width: 15rem;
  flex-direction: column;
  gap: 0;
  padding: .4rem;
  background: #fff;
  border: 1px solid var(--okmd-line);
  border-radius: var(--okmd-radius);
  box-shadow: var(--okmd-shadow);
}
.okmd-nav li:hover > .sub-menu,
.okmd-nav li:focus-within > .sub-menu { display: flex; }

.okmd-nav-toggle {
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-inline-start: auto;
  padding: 0;
  background: transparent;
  border: 1px solid var(--okmd-line);
  border-radius: 10px;
  cursor: pointer;
  flex-shrink: 0;
}

/* Trois barres dessinees en CSS : la barre centrale est l'element, les deux
   autres ses pseudo-elements. Aucune image, aucune police d'icones. */
.okmd-burger,
.okmd-burger::before,
.okmd-burger::after {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--okmd-green-950);
  transition: transform .25s ease, opacity .2s ease;
}
.okmd-burger { position: relative; }
.okmd-burger::before,
.okmd-burger::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
}
.okmd-burger::before { top: -6px; }
.okmd-burger::after  { top: 6px; }

/* Ouvert : les barres forment une croix. */
.okmd-nav-toggle[aria-expanded="true"] .okmd-burger { background: transparent; }
.okmd-nav-toggle[aria-expanded="true"] .okmd-burger::before { transform: translateY(6px) rotate(45deg); }
.okmd-nav-toggle[aria-expanded="true"] .okmd-burger::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1150px) {
  .okmd-nav-toggle { display: grid; }
  .okmd-nav {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    background: #fff;
    border-block-end: 1px solid var(--okmd-line);
    box-shadow: var(--okmd-shadow);
    padding: .75rem var(--okmd-gutter) 1.25rem;
  }
  .okmd-nav.is-open { display: block; }
  .okmd-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .okmd-nav .sub-menu {
    position: static;
    display: flex;
    border: 0;
    box-shadow: none;
    padding-inline-start: 1rem;
  }
}

/* --- 6. Sélecteur de langue --------------------------------------------- */
.okmd-lang { display: flex; gap: .3rem; list-style: none; margin: 0; padding: 0; }
.okmd-lang a {
  display: block;
  padding: .3rem .55rem;
  border-radius: 6px;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  color: #cfe0cc;
}
.okmd-lang a:hover { background: rgba(255,255,255,.12); color: #fff; text-decoration: none; }
.okmd-lang .current-lang a { background: var(--okmd-gold-500); color: var(--okmd-green-950); }

/* --- 7. Bandeau d'accueil ------------------------------------------------ */
/* Composition en deux colonnes : le texte porte, la photo accompagne. Les
   originaux ne dépassent pas 1035 px de large — les étirer en pleine largeur
   les rendrait flous. On les cadre, on ne les agrandit pas. */
.okmd-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 100% at 85% 0%, #0d5c06 0%, transparent 55%),
    linear-gradient(160deg, var(--okmd-green-950) 0%, #041f01 100%);
  color: #fff;
}

/* Filet doré en bas du bandeau : une seule ligne, mais elle signe la page. */
.okmd-hero::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg,
    transparent, var(--okmd-gold-500) 25%, var(--okmd-gold-500) 75%, transparent);
  opacity: .85;
}

.okmd-hero .okmd-wrap {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
}

.okmd-hero h1 { color: #fff; margin-block-end: .55em; }
.okmd-hero .okmd-eyebrow { color: var(--okmd-gold-500); }

.okmd-hero__lead {
  max-width: 34rem;
  margin-block-end: 2.25rem;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.6;
  color: #d8e6d5;
}

.okmd-hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* La photo, dans un cadre légèrement incliné avec un aplat doré en retrait. */
.okmd-hero__media { position: relative; }
.okmd-hero__media::before {
  content: "";
  position: absolute;
  inset-inline-start: -14px;
  top: 18px;
  width: 100%;
  height: 100%;
  border: 2px solid var(--okmd-gold-500);
  border-radius: var(--okmd-radius-xl);
  opacity: .5;
}
.okmd-hero__media picture,
.okmd-hero__media img {
  position: relative;
  display: block;
  width: 100%;
  border-radius: var(--okmd-radius-xl);
}
.okmd-hero__media img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  box-shadow: var(--okmd-shadow-forte);
}
.okmd-hero__legende {
  position: relative;
  margin-block-start: .9rem;
  font-size: .82rem;
  color: #9fbb9b;
}

@media (max-width: 900px) {
  .okmd-hero .okmd-wrap { grid-template-columns: 1fr; }
  .okmd-hero__media { order: -1; }
  .okmd-hero__media::before { display: none; }
  .okmd-hero__lead { max-width: none; }
}

/* --- 8. Chiffres clés ---------------------------------------------------- */
.okmd-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1px;
  background: var(--okmd-line);
  border: 1px solid var(--okmd-line);
  border-radius: var(--okmd-radius-lg);
  overflow: hidden;
}
/* Les cellules sont séparées par la grille elle-même : un filet d'un pixel,
   pas cinq boîtes qui flottent. */
.okmd-stat {
  padding: 2.15rem 1.4rem;
  background: #fff;
  text-align: center;
  transition: background-color .25s ease;
}
.okmd-stat:hover { background: var(--okmd-sand-50); }
.okmd-stat__value {
  display: block;
  font-family: var(--okmd-font-head);
  font-size: clamp(2.4rem, 4.5vw, 3.3rem);
  font-weight: 600;
  font-variation-settings: "opsz" 144;
  line-height: 1;
  color: var(--okmd-green-900);
  letter-spacing: -.03em;
}
.okmd-stat__label {
  display: block;
  margin-block-start: .7rem;
  font-size: .9rem;
  line-height: 1.45;
  color: var(--okmd-muted);
}

/* --- 9. Cartes ----------------------------------------------------------- */
.okmd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.5rem;
}

/* Quatre elements : auto-fit les repartit en 3 + 1 dans notre largeur, ce qui
   laisse une carte orpheline. On impose donc 4 colonnes, puis 2, puis 1. */
.okmd-grid--quatre { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1050px) { .okmd-grid--quatre { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .okmd-grid--quatre { grid-template-columns: 1fr; } }

/* Deux colonnes : pour les cartes au contenu long, comme les coordonnees
   bancaires, qu'une colonne etroite couperait mal. */
.okmd-grid--deux { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .okmd-grid--deux { grid-template-columns: 1fr; } }
.okmd-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--okmd-line);
  border-radius: var(--okmd-radius-lg);
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
.okmd-card:hover { box-shadow: var(--okmd-shadow); transform: translateY(-4px); }
.okmd-card__media { aspect-ratio: 16 / 10; width: 100%; object-fit: cover; background: var(--okmd-green-100); }
.okmd-card__body { padding: 1.5rem; }
.okmd-card__body p { color: var(--okmd-muted); }

/* --- 9 bis. Parcours en étapes ------------------------------------------ */
.okmd-parcours {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Le trait qui relie les trois etapes : c'est lui qui fait lire « parcours »
   plutot que « trois cartes cote a cote ». */
.okmd-parcours::before {
  content: "";
  position: absolute;
  inset-inline: 12%;
  top: 3.15rem;
  height: 2px;
  background: repeating-linear-gradient(90deg,
    var(--okmd-gold-500) 0 8px, transparent 8px 16px);
  opacity: .5;
}
@media (max-width: 1000px) { .okmd-parcours::before { display: none; } }

.okmd-parcours__etape {
  position: relative;
  padding: 2.25rem 1.6rem 1.9rem;
  background: #fff;
  border: 1px solid var(--okmd-line);
  border-radius: var(--okmd-radius-lg);
  transition: box-shadow .25s ease, transform .25s ease;
}
.okmd-parcours__etape:hover {
  box-shadow: var(--okmd-shadow);
  transform: translateY(-4px);
}
.okmd-parcours__num {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-block-end: 1.1rem;
  border-radius: 50%;
  background: var(--okmd-green-900);
  color: #fff;
  font-family: var(--okmd-font-head);
  font-weight: 600;
  font-size: 1.2rem;
  /* Anneau clair : detache la pastille du trait qui passe derriere. */
  box-shadow: 0 0 0 6px #fff, 0 0 0 7px var(--okmd-green-100);
}
.okmd-parcours__etape h3 { font-size: 1.15rem; }
.okmd-parcours__etape p { color: var(--okmd-muted); margin: 0; }

/* --- 9 ter. Page de don -------------------------------------------------- */
.okmd-don .okmd-card__body { display: flex; flex-direction: column; height: 100%; }
.okmd-don__value {
  margin-block: auto .35rem;
  padding-block-start: 1rem;
  font-family: var(--okmd-font-head);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--okmd-green-900);
  /* Les numéros et RIB restent en lecture gauche-droite, même en page arabe. */
  direction: ltr;
  text-align: start;
  unicode-bidi: isolate;
}
.okmd-don__value a { color: inherit; text-decoration: none; }
.okmd-don__value a:hover { text-decoration: underline; }
.okmd-don__value--rib {
  font-size: 1.05rem;
  letter-spacing: .02em;
  word-break: break-word;
  /* La cle du RIB est un groupe d'un seul caractere : sans equilibrage, elle
     se retrouve seule sur sa ligne, ce qui invite a l'erreur de recopie.
     « balance » repartit les lignes sans modifier un seul caractere. */
  text-wrap: balance;
}
.okmd-don__holder { font-size: .9rem; color: var(--okmd-muted); }

/* Le virement bancaire est d'une autre nature que les paiements instantanes :
   il occupe sa propre ligne, ce qui laisse au RIB la largeur qu'il reclame. */
.okmd-don--large {
  margin-block-start: 1.5rem;
}
.okmd-don--large .okmd-card__body {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .4rem 2.5rem;
}
.okmd-don--large h3 { grid-column: 1; margin: 0; }
.okmd-don--large > div > p:nth-of-type(1) { grid-column: 1; margin: 0; }
.okmd-don--large .okmd-don__value {
  grid-column: 2;
  grid-row: 1 / 3;
  margin: 0;
  padding: 0;
  text-align: end;
}
.okmd-don--large .okmd-don__holder { grid-column: 1 / -1; }

@media (max-width: 760px) {
  .okmd-don--large .okmd-card__body { grid-template-columns: 1fr; }
  .okmd-don--large .okmd-don__value {
    grid-column: 1;
    grid-row: auto;
    text-align: start;
    padding-block-start: .8rem;
  }
}

/* PayPal aboutit sur un bouton, pas sur un numero a recopier. */
.okmd-don__action { margin-block: auto .4rem; padding-block-start: 1rem; }
.okmd-don__action .okmd-btn { width: 100%; justify-content: center; }

.okmd-besoins {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: .75rem 2rem;
  max-width: 52rem;
  margin-inline: auto;
  padding: 0;
  list-style: none;
}
.okmd-besoins li {
  position: relative;
  padding-inline-start: 1.9rem;
  padding-block: .3rem;
}
.okmd-besoins li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .85em;
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--okmd-gold-500);
}

.okmd-hadith {
  max-width: 42rem;
  margin-inline: auto;
  margin-block-start: 3.5rem;
  padding-inline: 1.5rem;
  border-inline-start: 4px solid var(--okmd-gold-500);
  font-size: 1.1rem;
  font-style: italic;
  color: var(--okmd-muted);
}
.okmd-hadith cite {
  display: block;
  margin-block-start: .6rem;
  font-size: .9rem;
  font-style: normal;
  color: var(--okmd-green-900);
}
.okmd-don__note {
  max-width: 44rem;
  margin-inline: auto;
  margin-block-start: 2.5rem;
  padding: 1.15rem 1.4rem;
  background: var(--okmd-gold-100);
  border-inline-start: 4px solid var(--okmd-gold-500);
  border-radius: var(--okmd-radius);
  font-size: .97rem;
}

/* --- 10. Bandeau d'appel au don ----------------------------------------- */
.okmd-cta {
  background: linear-gradient(135deg, var(--okmd-green-900), var(--okmd-green-950));
  color: #fff;
  text-align: center;
}
.okmd-cta h2 { color: #fff; }
.okmd-cta p { max-width: 42rem; margin-inline: auto; color: #d9e7d7; }
.okmd-cta__actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-block-start: 1.75rem; }

/* --- 11. Contenu éditorial (pages WordPress) ---------------------------- */
.okmd-page-header {
  padding-block: clamp(2.5rem, 6vw, 4rem);
  background: var(--okmd-sand-50);
  border-block-end: 1px solid var(--okmd-line);
}
.okmd-prose { width: min(50rem, 100%); margin-inline: auto; }
.okmd-prose > * + * { margin-block-start: 1.1em; }
.okmd-prose h2 { margin-block-start: 2em; }
.okmd-prose ul, .okmd-prose ol { padding-inline-start: 1.4em; }
.okmd-prose li + li { margin-block-start: .35em; }
.okmd-prose img { border-radius: var(--okmd-radius); }
.okmd-prose blockquote {
  margin-inline: 0;
  padding-inline-start: 1.25rem;
  border-inline-start: 4px solid var(--okmd-gold-500);
  font-size: 1.1rem;
  color: var(--okmd-muted);
}
.okmd-prose table { width: 100%; border-collapse: collapse; }
.okmd-prose th, .okmd-prose td { padding: .6rem .75rem; border: 1px solid var(--okmd-line); text-align: start; }

/* --- 11 bis. Vidéos ------------------------------------------------------ */
.okmd-videos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: 1.75rem;
}
.okmd-video { display: flex; flex-direction: column; }

.okmd-video__facade {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--okmd-radius);
  overflow: hidden;
  background: var(--okmd-green-950);
  cursor: pointer;
  aspect-ratio: 16 / 9;
}
.okmd-video__facade img {
  width: 100%;
  height: 100%;
  /* Les vignettes YouTube sont en 4/3 avec des bandes : on recadre. */
  object-fit: cover;
  transition: transform .3s ease, opacity .3s ease;
}
.okmd-video__facade:hover img { transform: scale(1.04); opacity: .85; }

.okmd-video__play {
  position: absolute;
  inset-inline-start: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 4.25rem;
  height: 3rem;
  border-radius: 12px;
  background: rgba(5, 46, 2, .82);
  transition: background-color .2s ease;
}
.okmd-video__play::after {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  top: 50%;
  transform: translate(-40%, -50%);
  border-style: solid;
  border-width: .6rem 0 .6rem 1rem;
  border-color: transparent transparent transparent #fff;
}
.okmd-video__facade:hover .okmd-video__play { background: var(--okmd-gold-500); }
.okmd-video__facade:hover .okmd-video__play::after { border-left-color: var(--okmd-green-950); }

/* Le lecteur remplace la façade une fois le clic donné. */
.okmd-video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--okmd-radius);
}

.okmd-video__corps { padding-block-start: .9rem; }
.okmd-video__corps h3 { font-size: 1.02rem; line-height: 1.35; margin-block-end: .3rem; }
.okmd-video__date { font-size: .85rem; color: var(--okmd-muted); margin: 0; }

/* Renvoi vers la chaine : le flux RSS s'arrete a quinze videos, il faut donc
   dire ou sont les autres plutot que de laisser croire qu'il n'y en a pas. */
.okmd-videos__suite {
  max-width: 44rem;
  margin-inline: auto;
  margin-block-start: 3rem;
  padding: 2rem 1.75rem;
  background: var(--okmd-sand-50);
  border: 1px solid var(--okmd-line);
  border-radius: var(--okmd-radius-lg);
  text-align: center;
}
.okmd-videos__suite p {
  margin-block-end: 1.4rem;
  color: var(--okmd-muted);
}

.okmd-videos__note {
  max-width: 40rem;
  margin-inline: auto;
  margin-block-start: 2.5rem;
  font-size: .9rem;
  color: var(--okmd-muted);
  text-align: center;
}

/* --- 11 quater. Formulaire de contact ------------------------------------ */
.okmd-form {
  width: min(44rem, 100%);
  margin-inline: auto;
}
.okmd-form__ligne {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0 1.25rem;
}

.okmd-champ { margin-block-end: 1.1rem; }
.okmd-champ label {
  display: block;
  margin-block-end: .35rem;
  font-family: var(--okmd-font-head);
  font-weight: 600;
  font-size: .92rem;
  color: var(--okmd-green-950);
}
.okmd-champ label span { color: var(--okmd-gold-600); }

.okmd-champ input,
.okmd-champ textarea {
  width: 100%;
  padding: .7rem .85rem;
  border: 1px solid var(--okmd-line);
  border-radius: var(--okmd-radius);
  background: #fff;
  font-family: inherit;
  font-size: 1rem;
  color: var(--okmd-ink);
}
.okmd-champ textarea { resize: vertical; min-height: 9rem; }
.okmd-champ input:focus,
.okmd-champ textarea:focus { border-color: var(--okmd-green-500); }

/* Le piège à robots doit rester invisible mais réellement présent. */
.okmd-pot-de-miel {
  position: absolute;
  inset-inline-start: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.okmd-etat {
  width: min(44rem, 100%);
  margin-inline: auto;
  margin-block-end: 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: var(--okmd-radius);
  border-inline-start: 4px solid;
  font-size: .97rem;
}
.okmd-etat--succes { background: var(--okmd-green-100); border-color: var(--okmd-green-700); }
.okmd-etat--erreur { background: #fdeceb; border-color: #b3261e; color: #7a1a15; }

/* --- 11 ter. Utilitaires ------------------------------------------------- */
.okmd-liste-nue { margin: 0; padding: 0; list-style: none; }
.okmd-liste-nue li { padding-block: .22rem; color: var(--okmd-muted); }

.okmd-centre { text-align: center; margin-block-start: 2.5rem; }

/* --- 12. Pied de page ---------------------------------------------------- */
.okmd-footer {
  background: var(--okmd-green-950);
  color: #b9cdb6;
  padding-block: clamp(2.5rem, 6vw, 4rem) 1.5rem;
  font-size: .95rem;
}
.okmd-footer h3 { color: #fff; font-size: 1rem; margin-block-end: .9rem; }
.okmd-footer a { color: #d7e6d5; text-decoration: none; }
.okmd-footer a:hover { color: #fff; text-decoration: underline; }
.okmd-footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 2rem;
}
.okmd-footer ul { list-style: none; margin: 0; padding: 0; }
.okmd-footer li + li { margin-block-start: .45rem; }
.okmd-footer__bottom {
  margin-block-start: 2.5rem;
  padding-block-start: 1.25rem;
  border-block-start: 1px solid rgba(255,255,255,.12);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  font-size: .85rem;
  color: #91a88e;
}

/* --- 13. Photos ---------------------------------------------------------- */
/* Toutes les sources sont des captures video de 500 a 1567 px. Elles sont
   cadrees dans des conteneurs a ratio fixe et jamais agrandies au-dela de leur
   taille native : c'est la seule facon d'en tirer un rendu net. */
.okmd-photo { display: block; }
.okmd-photo img {
  width: 100%;
  border-radius: var(--okmd-radius-lg);
  object-fit: cover;
}

.okmd-figure { margin: 0; }
.okmd-figure figcaption {
  margin-block-start: .8rem;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--okmd-muted);
}

/* --- 14. Bande en deux colonnes texte / image ---------------------------- */
.okmd-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}
.okmd-duo--inverse .okmd-duo__media { order: 2; }

.okmd-duo__texte h2 { margin-block-end: .6em; }
.okmd-duo__texte p { color: var(--okmd-muted); font-size: 1.06rem; }

.okmd-duo__media { position: relative; }
.okmd-duo__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--okmd-radius-xl);
  box-shadow: var(--okmd-shadow);
}

@media (max-width: 880px) {
  .okmd-duo { grid-template-columns: 1fr; }
  .okmd-duo--inverse .okmd-duo__media { order: 0; }
}

/* --- 15. Mosaique de photos --------------------------------------------- */
/* Une grande image et deux plus petites : la variation de taille evite
   l'effet catalogue et laisse respirer les cliches les plus faibles. */
.okmd-mosaique {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: 1rem;
}
.okmd-mosaique picture { display: block; height: 100%; }
.okmd-mosaique img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--okmd-radius-lg);
  transition: transform .5s ease;
}
.okmd-mosaique picture:hover img { transform: scale(1.03); }
.okmd-mosaique picture { overflow: hidden; border-radius: var(--okmd-radius-lg); }

.okmd-mosaique__large { grid-column: span 2; grid-row: span 2; }
.okmd-mosaique__large img { min-height: 22rem; }
.okmd-mosaique picture:not(.okmd-mosaique__large) img { min-height: 10.5rem; }

@media (max-width: 820px) {
  .okmd-mosaique { grid-template-columns: repeat(2, 1fr); }
  .okmd-mosaique__large { grid-column: span 2; grid-row: span 1; }
  .okmd-mosaique__large img { min-height: 15rem; }
}

/* --- 16. Bandeau photo pleine largeur ----------------------------------- */
/* Utilise uniquement avec une image assez large, et toujours sous un voile
   sombre : le texte doit rester lisible meme si la photo est mediocre. */
.okmd-bandeau {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(18rem, 34vw, 26rem);
  overflow: hidden;
  text-align: center;
  color: #fff;
  background: var(--okmd-green-950);
}
.okmd-bandeau picture { position: absolute; inset: 0; }
.okmd-bandeau img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .34;
}
.okmd-bandeau__contenu { position: relative; padding-block: 3rem; }
.okmd-bandeau h2 { color: #fff; }
.okmd-bandeau p { max-width: 40rem; margin-inline: auto; color: #d9e7d7; }

/* --- 17. Apparition au defilement --------------------------------------- */
/* Discret : 12 px et 500 ms. Une animation qu'on remarque est une animation
   ratee. Neutralisee si le visiteur a demande moins de mouvement. */
/* L'etat masque est conditionne a la classe .okmd-js, que le script pose
   lui-meme des son execution. Si le JavaScript echoue ou est bloque, la
   regle ne s'applique jamais et tout le contenu reste visible : une page
   ne doit jamais dependre d'un script pour s'afficher. */
@media (prefers-reduced-motion: no-preference) {
  .okmd-js .okmd-apparait {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .5s ease, transform .5s ease;
  }
  .okmd-js .okmd-apparait.est-visible { opacity: 1; transform: none; }
}

/* --- 18. Finitions ------------------------------------------------------- */
/* Alternance de fonds : une section claire, une section sable, sans filet
   dur entre les deux. */
.okmd-section--sand + .okmd-section--sand { padding-block-start: 0; }

.okmd-prose p { font-size: 1.06rem; }
.okmd-prose h2 { margin-block-start: 2.2em; }
.okmd-prose h2:first-child { margin-block-start: 0; }

.okmd-page-header {
  background:
    radial-gradient(90% 120% at 100% 0%, var(--okmd-gold-100) 0%, transparent 60%),
    var(--okmd-sand-50);
}


/* --- 19. Pages éditoriales en deux colonnes ------------------------------ */
/* Sur grand écran, une colonne de texte seule laisse la moitié de l'écran
   vide. On garde la mesure de lecture et on occupe le reste avec un encart
   qui sert à quelque chose : appeler, écrire, donner. */
.okmd-editorial {
  display: grid;
  grid-template-columns: minmax(0, 50rem) minmax(16rem, 22rem);
  justify-content: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.okmd-editorial .okmd-prose { width: 100%; margin-inline: 0; }

.okmd-encart {
  position: sticky;
  top: 6rem;
  padding: 1.75rem 1.6rem;
  background: var(--okmd-sand-50);
  border: 1px solid var(--okmd-line);
  border-radius: var(--okmd-radius-lg);
}
.okmd-encart h2 {
  font-size: 1.15rem;
  margin-block-end: .7rem;
}
.okmd-encart p { font-size: .96rem; color: var(--okmd-muted); }
.okmd-encart .okmd-btn { width: 100%; justify-content: center; margin-block-start: .5rem; }
.okmd-encart__ligne {
  display: block;
  padding-block: .45rem;
  font-family: var(--okmd-font-head);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--okmd-green-900);
  text-decoration: none;
  direction: ltr;
  unicode-bidi: isolate;
}
.okmd-encart__ligne:hover { text-decoration: underline; }

@media (max-width: 1100px) {
  .okmd-editorial { grid-template-columns: minmax(0, 50rem); justify-content: center; }
  .okmd-encart { position: static; }
}


/* --- 20. Mise en regard de deux chiffres --------------------------------- */
/* « 313 places bâties / une cinquantaine occupées » : c'est l'écart qui
   parle, pas chacun des deux nombres pris isolément. */
.okmd-contraste {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(1rem, 4vw, 2.5rem);
  max-width: 46rem;
  margin-inline: auto;
  margin-block: 2.5rem;
  padding: 2rem 1.75rem;
  background: #fff;
  border: 1px solid var(--okmd-line);
  border-radius: var(--okmd-radius-lg);
  text-align: center;
}
.okmd-contraste__valeur {
  display: block;
  font-family: var(--okmd-font-head);
  font-size: clamp(2.2rem, 6vw, 3.2rem);
  font-weight: 600;
  font-variation-settings: "opsz" 144;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--okmd-green-900);
}
.okmd-contraste__valeur--pale { color: var(--okmd-muted); }
.okmd-contraste__libelle {
  display: block;
  margin-block-start: .55rem;
  font-size: .92rem;
  line-height: 1.4;
  color: var(--okmd-muted);
}
.okmd-contraste__signe {
  font-family: var(--okmd-font-head);
  font-size: 1.6rem;
  color: var(--okmd-gold-500);
}
.okmd-contraste__note {
  grid-column: 1 / -1;
  margin-block-start: 1.5rem;
  padding-block-start: 1.25rem;
  border-block-start: 1px solid var(--okmd-line);
  font-size: 1rem;
  color: var(--okmd-ink);
}

@media (max-width: 560px) {
  .okmd-contraste { grid-template-columns: 1fr; }
  .okmd-contraste__signe { display: none; }
}


/* --- 21. Alignement des titres ------------------------------------------ */
/* Les titres sont centres, le texte courant reste au fil du fer a gauche :
   centrer un paragraphe rend chaque debut de ligne mobile et fatigue la
   lecture, ce que le titre, court, ne subit pas. */
.okmd-page-header .okmd-prose,
.okmd-page-header .okmd-editorial { text-align: center; }

.okmd-prose h2,
.okmd-prose h3 { text-align: center; }

/* Sauf dans l'encart lateral, trop etroit pour que le centrage se lise. */
.okmd-encart h2 { text-align: start; }


/* --- 22. QR code de paiement --------------------------------------------- */
/* Masqué sous 700 px : on ne scanne pas l'écran sur lequel on lit. Le bouton
   PayPal reste, lui, disponible partout. */
.okmd-qr { display: none; }

@media (min-width: 700px) {
  .okmd-qr {
    display: block;
    margin: 1.1rem 0 0;
    text-align: center;
  }
  .okmd-qr img {
    width: 100%;
    max-width: 160px;
    height: auto;
    margin-inline: auto;
    padding: .5rem;
    background: #fff;
    border: 1px solid var(--okmd-line);
    border-radius: var(--okmd-radius);
    /* Les modules doivent rester nets : pas de lissage a l'agrandissement. */
    image-rendering: pixelated;
  }
  .okmd-qr figcaption {
    margin-block-start: .5rem;
    font-size: .82rem;
    color: var(--okmd-muted);
  }
}


/* --- 23. Bloc d'urgence -------------------------------------------------- */
/* Le fait le plus fort du dossier : les murs sont debout, les places sont
   vides. Il lui faut sa propre bande, sinon il se noie dans les autres
   chiffres. */
.okmd-urgence {
  background:
    radial-gradient(80% 120% at 15% 0%, var(--okmd-gold-100) 0%, transparent 60%),
    var(--okmd-sand-50);
  border-block: 1px solid var(--okmd-line);
}
.okmd-urgence .okmd-wrap {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(1.5rem, 5vw, 4rem);
  padding-block: clamp(3rem, 7vw, 4.75rem);
}

/* En rouge et non en vert : au-dessus, cinq chiffres verts annoncent ce que
   l'orphelinat accomplit. Celui-ci compte ce qui manque. Le meme vert les
   aurait fait lire comme une sixieme reussite. Contraste 6,8:1 sur le fond
   sable, largement au-dela du seuil. */
.okmd-urgence__nombre {
  font-family: var(--okmd-font-head);
  font-size: clamp(4.5rem, 13vw, 9rem);
  font-weight: 600;
  font-variation-settings: "opsz" 144;
  line-height: .85;
  letter-spacing: -.045em;
  color: var(--okmd-alerte-600);
}

.okmd-urgence h2 { margin-block-end: .5em; }

/* Les styles de texte sont poses sur le conteneur, pas sur « .okmd-urgence p » :
   une regle heritee cede devant n'importe quelle declaration directe, ce qui
   evite d'avoir a surencherir en specificite pour le nombre et pour l'alerte. */
.okmd-urgence__texte {
  max-width: 46rem;
  font-size: 1.08rem;
  color: var(--okmd-muted);
}
.okmd-urgence__texte strong { color: var(--okmd-ink); }

/* La dernière phrase porte le poids : elle se détache. */
.okmd-urgence__alerte {
  margin-block-start: 1.2rem;
  padding-inline-start: 1.1rem;
  border-inline-start: 3px solid var(--okmd-alerte-600);
  font-size: 1.08rem;
  color: var(--okmd-ink);
}
.okmd-urgence .okmd-btn { margin-block-start: 1.75rem; }

@media (max-width: 780px) {
  .okmd-urgence .okmd-wrap { grid-template-columns: 1fr; gap: .5rem; }
}