/* ════════════════════════════════════════════════════════════════════
   AL IHSAN — Couche « award » GLOBALE : micro-interactions réutilisables
   (toutes pages), page « À propos », et raffinements dark-mode + contraste.
   Non-layered → surcharge proprement theme.css. transform/opacity only · RM respecté.
   ════════════════════════════════════════════════════════════════════ */

/* En-tête non collant (option Customizer) */
.no-sticky .site-header { position: static; }

/* ─────────────  Logo de marque (image officielle)  ───────────── */
.brand__logo { height: clamp(42px, 5.6vw, 58px); width: auto; display: block; }
/* Sur fond vert foncé (footer toujours, header en sombre) : pastille blanche pour le contraste */
.site-footer .brand__logo { height: 70px; background: #fff; padding: 8px 12px; border-radius: 12px; }
:root[data-theme="dark"] .site-header .brand__logo { background: #fff; padding: 4px 9px; border-radius: 9px; }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .site-header .brand__logo { background: #fff; padding: 4px 9px; border-radius: 9px; } }

/* ─────────────  Barre de progression de défilement (toutes pages)  ───────────── */
.scroll-progress {
  position: fixed; inset-block-start: 0; inset-inline: 0; height: 3px; z-index: 300;
  background: linear-gradient(90deg, var(--gold), var(--orange), var(--leaf));
  transform: scaleX(0); transform-origin: 0 50%; will-change: transform;
}
html[dir="rtl"] .scroll-progress { transform-origin: 100% 50%; }

/* ─────────────  Reveals directionnels  ───────────── */
@media (prefers-reduced-motion: no-preference) {
  .reveal[data-reveal="left"]  { transform: translateX(-44px); }
  .reveal[data-reveal="right"] { transform: translateX(44px); }
  .reveal[data-reveal="scale"] { transform: scale(.92); }
  .reveal[data-reveal="left"].is-in,
  .reveal[data-reveal="right"].is-in,
  .reveal[data-reveal="scale"].is-in { transform: none; }
  .reveal[data-delay="4"] { transition-delay: 360ms; }
  .reveal[data-delay="5"] { transition-delay: 450ms; }
  /* Miroir RTL des révélations directionnelles (arabe = défaut) */
  html[dir="rtl"] .reveal[data-reveal="left"]  { transform: translateX(44px); }
  html[dir="rtl"] .reveal[data-reveal="right"] { transform: translateX(-44px); }
  html[dir="rtl"] .reveal[data-reveal="left"].is-in,
  html[dir="rtl"] .reveal[data-reveal="right"].is-in { transform: none; }
}

/* ─────────────  Flèches directionnelles : miroir en RTL  ───────────── */
html[dir="rtl"] .ih-arrow { transform: scaleX(-1); }

/* ════════════════════════════════════════════════════════════════════
   PAGE « FAIRE UN DON » — paliers d'impact + canaux (réutilise les tokens)
   ════════════════════════════════════════════════════════════════════ */
.give-tier {
  display: flex; flex-direction: column; gap: .5rem; padding: clamp(1.4rem, 3vw, 2.1rem);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  text-decoration: none; position: relative; overflow: clip; isolation: isolate;
  transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base), border-color var(--dur-base);
}
.give-tier::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--orange)); transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-out); }
html[dir="rtl"] .give-tier::before { transform-origin: right center; }
.give-tier:hover { transform: translateY(-6px); box-shadow: var(--shadow-3); border-color: color-mix(in oklch, var(--gold) 45%, var(--border)); }
.give-tier:hover::before { transform: scaleX(1); }
.give-tier__icon { width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: var(--radius); background: var(--accent-soft); color: var(--gold); margin-block-end: .4rem; }
.give-tier__icon svg { width: 1.6rem; height: 1.6rem; }
.give-tier__amt { font-family: var(--font-display); font-size: var(--step-3); line-height: 1; color: var(--brand); direction: ltr; }
.give-tier__txt { color: var(--ink-soft); }
.give-tier__cta { margin-block-start: auto; padding-block-start: .7rem; color: var(--gold); font-weight: 700; display: inline-flex; align-items: center; gap: .4em; }

.give-channel {
  display: flex; align-items: center; gap: 1.1rem; padding: clamp(1.1rem, 2.5vw, 1.6rem);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); text-decoration: none;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base), border-color var(--dur-base);
}
a.give-channel:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: color-mix(in oklch, var(--gold) 40%, var(--border)); }
.give-channel__icon { flex: 0 0 auto; width: 3.2rem; height: 3.2rem; display: grid; place-items: center; border-radius: 50%; background: var(--brand-soft); color: var(--brand); }
.give-channel__icon svg { width: 1.5rem; height: 1.5rem; }
.give-channel__icon--wa { background: color-mix(in oklch, #25d366 20%, transparent); color: #1aa34a; }
.give-channel__body { display: flex; flex-direction: column; gap: .25rem; flex: 1; min-width: 0; }
.give-channel__body strong { font-size: var(--step-1); }
.give-channel__lines { display: flex; flex-direction: column; gap: .15rem; font-weight: 600; }
.give-channel__lines a { text-decoration: none; }
.give-channel__lines a:hover { color: var(--brand); }
.give-channel__rib { font-family: ui-monospace, "Cascadia Code", monospace; font-size: .88rem; background: var(--surface-2); padding: .5rem .7rem; border-radius: var(--radius-xs); word-break: break-word; }
.give-channel__go { flex: 0 0 auto; color: var(--gold); }

/* ─────────────  Formulaire de don : montant (presets) + fréquence  ───────────── */
.give-form { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(1.3rem, 3.5vw, 2.2rem); box-shadow: var(--shadow-1); }
.give-presets { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-end: .55rem; }
.give-preset { padding: .5em 1.05em; border-radius: var(--radius-pill); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--ink); font-weight: 700; font-size: .92rem; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast); }
.give-preset:hover { border-color: var(--gold); }
.give-preset:active { transform: scale(.96); }
.give-preset.is-active { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.field__label { font-weight: 600; font-size: .95rem; display: block; }
.give-radios { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; min-block-size: 44px; }
.give-radios label { display: inline-flex; align-items: center; gap: .45em; font-weight: 500; cursor: pointer; }
.give-radios input[type="radio"] { inline-size: 1.1rem; block-size: 1.1rem; accent-color: var(--brand); }
.give-form .btn--cta { margin-block-start: .5rem; }

/* ─────────────  Page Contact  ───────────── */
.contact-grid { display: grid; grid-template-columns: 1.3fr .85fr; gap: clamp(1.5rem, 4vw, var(--space-l)); align-items: start; }
.contact-info-col { display: flex; flex-direction: column; gap: 1.2rem; position: sticky; top: calc(var(--header-h) + 1rem); }
.contact-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-m); box-shadow: var(--shadow-1); position: relative; overflow: clip; isolation: isolate; }
.contact-card::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px; background: linear-gradient(90deg, var(--gold), var(--orange), var(--leaf)); }
.contact-card__title { display: inline-flex; align-items: center; gap: .5em; font-size: var(--step-1); margin-block-end: 1rem; }
.contact-card__title svg { color: var(--gold); }
.contact-list { margin: 0 0 1.2rem; display: flex; flex-direction: column; gap: 1rem; list-style: none; padding: 0; }
.contact-row { display: flex; gap: .8rem; align-items: flex-start; }
.contact-row__ico { flex: 0 0 auto; inline-size: 40px; block-size: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--accent-soft); color: var(--gold); }
.contact-row__ico svg { width: 1.2rem; height: 1.2rem; }
.contact-row__body { display: flex; flex-direction: column; gap: 1px; min-inline-size: 0; }
.contact-row__lbl { font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); font-weight: 700; }
html[dir="rtl"] .contact-row__lbl { letter-spacing: 0; }
.contact-row__val { font-weight: 600; color: var(--ink); text-decoration: none; overflow-wrap: break-word; }
a.contact-row__val:hover { color: var(--brand); }
.contact-wa { inline-size: 100%; justify-content: center; }
.contact-social { margin-block-start: 1rem; display: flex; flex-direction: column; gap: .5rem; }
.contact-social .footer__social a { background: var(--surface-2); color: var(--brand); border: 1px solid var(--border); }
.contact-social .footer__social a:hover { background: var(--gold); color: var(--pine-deep); }

.contact-map { display: flex; gap: .9rem; align-items: center; text-decoration: none; color: var(--on-brand);
  background: linear-gradient(135deg, var(--pine-deep), var(--forest)); border-radius: var(--radius-lg); padding: 1.1rem 1.2rem;
  position: relative; overflow: clip; box-shadow: var(--shadow-1); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base); }
.contact-map:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.contact-map__pin { flex: 0 0 auto; inline-size: 48px; block-size: 48px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in oklch, var(--gold) 88%, white); color: var(--pine-deep); }
.contact-map__pin svg { width: 1.5rem; height: 1.5rem; }
.contact-map__body { display: flex; flex-direction: column; gap: 2px; }
.contact-map__body strong { font-family: var(--font-display); font-size: var(--step-1); }
.contact-map__body .contact-row__val { color: color-mix(in oklch, var(--on-brand) 82%, transparent); font-weight: 400; }
.contact-map__cta { display: inline-flex; align-items: center; gap: .35em; color: var(--wheat); font-weight: 600; margin-block-start: .25rem; }
@media (max-width: 880px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-info-col { position: static; }
}

/* ─────────────  Médiathèque (galerie unifiée + visualiseur)  ───────────── */
.media-filter { display: flex; flex-wrap: wrap; gap: .6rem; margin-block: 0 1.6rem; }
.media-filter__btn { display: inline-flex; align-items: center; gap: .5em; padding: .5em 1.05em; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--surface); color: var(--ink-soft); font-weight: 600; cursor: pointer; transition: color var(--dur-base), background var(--dur-base), border-color var(--dur-base); }
.media-filter__btn:hover { border-color: color-mix(in oklch, var(--gold) 50%, var(--border)); color: var(--ink); }
.media-filter__btn.is-active { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.media-filter__n { font-size: .8em; opacity: .72; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: clamp(.8rem, 2vw, 1.3rem); }
.media-card { display: flex; flex-direction: column; text-align: start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: clip; box-shadow: var(--shadow-1); cursor: pointer; text-decoration: none; color: inherit; font: inherit; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base), border-color var(--dur-base); }
.media-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); border-color: color-mix(in oklch, var(--gold) 30%, var(--border)); }
.media-card__media { position: relative; aspect-ratio: 4 / 3; overflow: clip; background: var(--surface-2); }
.media-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.media-card:hover .media-card__media img { transform: scale(1.06); }
.media-card__ph { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.6rem; }
.media-card__media--doc { background: color-mix(in oklch, var(--gold) 10%, var(--surface-2)); }
.media-card__play { position: absolute; inset: 0; display: grid; place-items: center; }
.media-card__play svg { width: 3.2rem; height: 3.2rem; fill: #fff; color: #fff; filter: drop-shadow(0 4px 16px rgba(0,0,0,.5)); transition: transform var(--dur-base) var(--ease-spring); }
.media-card:hover .media-card__play svg { transform: scale(1.15); }
.media-card__zoom { position: absolute; inset-block-end: .6rem; inset-inline-end: .6rem; inline-size: 38px; block-size: 38px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in oklch, var(--pine-deep) 70%, transparent); color: #fff; opacity: 0; transform: scale(.8); transition: opacity var(--dur-base), transform var(--dur-base) var(--ease-spring); }
.media-card:hover .media-card__zoom { opacity: 1; transform: none; }
.media-card__zoom svg { width: 1.1rem; height: 1.1rem; }
.media-card__count { position: absolute; inset-block-start: .6rem; inset-inline-end: .6rem; display: inline-flex; align-items: center; gap: .3em; padding: .2em .6em; border-radius: var(--radius-pill); background: color-mix(in oklch, var(--pine-deep) 72%, transparent); color: #fff; font-size: .78rem; font-weight: 700; }
.media-card__count svg { width: .9em; height: .9em; }
.media-card__body { padding: .9rem 1rem 1.1rem; display: flex; flex-direction: column; gap: .3rem; }
.media-card__kind { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.media-card__title { font-weight: 600; line-height: 1.3; }
.media-card__cta { margin-block-start: .4rem; display: inline-flex; align-items: center; gap: .4em; font-size: .85rem; font-weight: 700; color: var(--brand); }
.media-card__cta svg { width: 1em; height: 1em; }
.media-empty { text-align: center; color: var(--ink-soft); padding: 2.5rem 1rem; font-size: var(--step-1); }
.pub-video { aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: clip; box-shadow: var(--shadow-2); background: #000; }
.pub-video iframe { width: 100%; height: 100%; border: 0; }
.pub-figure { border-radius: var(--radius-lg); overflow: clip; box-shadow: var(--shadow-1); margin: 0; }
.pub-gallery { margin-block-start: .5rem; }
.pub-gallery .media-card { aspect-ratio: 1; }
.pub-gallery .media-card__media { aspect-ratio: 1; }

/* Visualiseur plein écran (photos / albums / vidéos) */
.ihsan-viewer { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; gap: .5rem; padding: clamp(.5rem, 3vw, 2rem); background: oklch(0.16 0.02 158 / .92); backdrop-filter: blur(6px); animation: v-in var(--dur-base) var(--ease-out); }
@keyframes v-in { from { opacity: 0; } }
.ihsan-viewer__stage { max-width: min(1100px, 94vw); max-height: 88vh; display: flex; }
.ihsan-viewer__fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.ihsan-viewer__img { max-width: min(1100px, 90vw); max-height: 80vh; width: auto; height: auto; border-radius: var(--radius); box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.ihsan-viewer__cap { color: #fff; font-size: .9rem; opacity: .9; text-align: center; }
.ihsan-viewer__video { width: min(1100px, 92vw); aspect-ratio: 16 / 9; }
.ihsan-viewer__video iframe { width: 100%; height: 100%; border: 0; border-radius: var(--radius); background: #000; }
.ihsan-viewer__close { position: absolute; inset-block-start: clamp(.5rem, 2vw, 1.2rem); inset-inline-end: clamp(.5rem, 2vw, 1.2rem); inline-size: 46px; block-size: 46px; border: none; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 1.8rem; line-height: 1; cursor: pointer; transition: background var(--dur-base); }
.ihsan-viewer__close:hover { background: rgba(255,255,255,.28); }
.ihsan-viewer__nav { flex: 0 0 auto; inline-size: 50px; block-size: 50px; border: none; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; transition: background var(--dur-base); }
.ihsan-viewer__nav:hover { background: rgba(255,255,255,.28); }
html[dir="rtl"] .ihsan-viewer__prev, html[dir="rtl"] .ihsan-viewer__next { transform: scaleX(-1); }
@media (max-width: 600px) { .ihsan-viewer__nav { position: absolute; inset-block-end: 1rem; } .ihsan-viewer__prev { inset-inline-start: 1rem; } .ihsan-viewer__next { inset-inline-end: 1rem; } }
@media (prefers-reduced-motion: reduce) { .ihsan-viewer { animation: none; } }

/* ─────────────  Accueil — « Notre approche » (3 étapes reliées)  ───────────── */
.approach { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 3rem); position: relative; margin-block-start: clamp(1.6rem, 4vw, 3rem); }
.approach::before { content: ""; position: absolute; inset-block-start: 40px; inset-inline: 16%; block-size: 2px; background: repeating-linear-gradient(90deg, color-mix(in oklch, var(--gold) 60%, transparent) 0 9px, transparent 9px 18px); z-index: 0; }
.approach__step { position: relative; z-index: 1; text-align: center; display: flex; flex-direction: column; align-items: center; }
.approach__ico { position: relative; inline-size: 82px; block-size: 82px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); border: 2px solid color-mix(in oklch, var(--gold) 45%, var(--border)); color: var(--brand); box-shadow: var(--shadow-1); margin-block-end: 1.1rem; transition: transform var(--dur-base) var(--ease-spring), border-color var(--dur-base), background var(--dur-base); }
.approach__ico svg { width: 2rem; height: 2rem; }
.approach__num { position: absolute; inset-block-start: -8px; inset-inline-end: -8px; inline-size: 28px; block-size: 28px; border-radius: 50%; background: var(--gold); color: var(--pine-deep); display: grid; place-items: center; font-family: var(--font-display); font-size: .82rem; font-weight: 800; border: 3px solid var(--bg); }
.bg-cream .approach__num { border-color: var(--bg-alt); }
.approach__step:hover .approach__ico { transform: translateY(-7px) scale(1.06); border-color: var(--gold); background: var(--accent-soft); }
.approach__step h3 { font-size: var(--step-1); margin: 0 0 .45rem; }
.approach__step p { color: var(--ink-soft); max-inline-size: 30ch; margin-inline: auto; }
@media (max-width: 720px) { .approach { grid-template-columns: 1fr; gap: 1.7rem; } .approach::before { display: none; } }

/* ─────────────  Bouton « Revenir en haut »  ───────────── */
/* Positionné AU-DESSUS du bouton WhatsApp flottant (56px) pour éviter le chevauchement. */
.back-to-top { position: fixed; inset-block-end: calc(1.4rem + 56px + .7rem + env(safe-area-inset-bottom)); inset-inline-end: calc(1.4rem + 4px); z-index: 70; inline-size: 48px; block-size: 48px; display: grid; place-items: center; border: none; border-radius: 50%; background: var(--brand); color: var(--on-brand); box-shadow: var(--shadow-2); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(14px) scale(.85); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-spring), visibility var(--dur-base), background var(--dur-base); }
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { background: var(--brand-strong); transform: translateY(-3px); }
.back-to-top svg { width: 1.3rem; height: 1.3rem; }
@media (max-width: 860px) { .back-to-top { inset-block-end: calc(var(--tabbar-h, 76px) + .8rem + 56px + .6rem + env(safe-area-inset-bottom)); inset-inline-end: calc(1.4rem + 6px); inline-size: 44px; block-size: 44px; } }
@media (prefers-reduced-motion: reduce) { .back-to-top { transition: opacity var(--dur-base); transform: none; } .back-to-top.is-visible { transform: none; } }

/* ─────────────  Demande d'aide  ───────────── */
.ref-box { display: flex; gap: .9rem; align-items: flex-start; background: color-mix(in oklch, var(--leaf) 12%, var(--surface)); border: 1px solid color-mix(in oklch, var(--leaf) 40%, var(--border)); border-radius: var(--radius-lg); padding: 1rem 1.2rem; margin-block-end: 1.2rem; }
.ref-box__ico { flex: 0 0 auto; inline-size: 40px; block-size: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--leaf); color: #fff; }
.ref-box__ico svg { width: 1.3rem; height: 1.3rem; }
.ref-box__ref { display: block; font-family: var(--font-display); font-size: var(--step-2); letter-spacing: .04em; color: var(--brand); }
html[dir="rtl"] .ref-box__ref { letter-spacing: 0; }
.aid-track { gap: .7rem !important; }
.aid-track__res { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-block-start: .8rem; padding: .7rem .9rem; border-radius: var(--radius); background: var(--surface-2); }
.aid-track__res code { font-weight: 700; color: var(--ink); }
.aid-track__res svg { color: var(--gold); width: 1em; height: 1em; }
.aid-steps { margin-block-start: 1rem; }
.aid-step { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(1.4rem, 3vw, 2rem); box-shadow: var(--shadow-1); overflow: clip; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base), border-color var(--dur-base); }
.aid-step:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: color-mix(in oklch, var(--gold) 35%, var(--border)); }
.aid-step__num { position: absolute; inset-block-start: .8rem; inset-inline-end: 1.1rem; font-family: var(--font-display); font-size: var(--step-3); color: color-mix(in oklch, var(--gold) 32%, transparent); line-height: 1; font-weight: 700; }
.aid-step__ico { inline-size: 52px; block-size: 52px; display: grid; place-items: center; border-radius: 14px; background: var(--brand-soft); color: var(--brand); margin-block-end: .9rem; }
.aid-step__ico svg { width: 1.5rem; height: 1.5rem; }
.aid-step h3 { font-size: var(--step-1); margin: 0 0 .4rem; }
/* Bouton « Aide » compact dans l'en-tête */
.nav__actions .btn--aid { padding: .5em .75em; font-size: .9rem; }

/* ─────────────  Espace partenaire (tableau de bord)  ───────────── */
.login-gate { max-inline-size: 34rem; margin-inline: auto; }
.login-gate__ico { inline-size: 64px; block-size: 64px; border-radius: 50%; background: var(--accent-soft); color: var(--gold); display: grid; place-items: center; margin-inline: auto; }
.login-gate__ico svg { width: 2rem; height: 2rem; }

.pd-head { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; justify-content: space-between; color: var(--on-brand);
  background: linear-gradient(135deg, var(--pine-deep), var(--forest)); border-radius: var(--radius-lg); padding: clamp(1.2rem, 3vw, 1.8rem) clamp(1.3rem, 3.5vw, 2rem); box-shadow: var(--shadow-1); position: relative; overflow: clip; isolation: isolate; }
.pd-head::after { content: ""; position: absolute; inset-block: 0; inset-inline-end: -10%; inline-size: 40%; background: radial-gradient(circle at 70% 50%, color-mix(in oklch, var(--gold) 26%, transparent), transparent 70%); pointer-events: none; z-index: -1; }
.pd-head__who { display: flex; align-items: center; gap: 1rem; }
.pd-avatar { flex: 0 0 auto; inline-size: 56px; block-size: 56px; border-radius: 50%; background: color-mix(in oklch, var(--gold) 88%, white); color: var(--pine-deep); display: grid; place-items: center; font-family: var(--font-display); font-size: var(--step-2); font-weight: 700; }
.pd-hello { margin: 0; font-size: var(--step--1); color: color-mix(in oklch, var(--on-brand) 78%, transparent); }
.pd-name { margin: 0; font-size: var(--step-2); }
.pd-head__meta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.pd-badge { background: color-mix(in oklch, white 12%, transparent); border: 1px solid color-mix(in oklch, var(--wheat) 30%, transparent); border-radius: var(--radius-pill); padding: .4em 1em; font-size: var(--step--1); }
.pd-badge strong { color: var(--wheat); font-family: var(--font-display); font-size: var(--step-1); margin-inline-end: .25em; }
.btn--sm { padding: .5em .9em; font-size: var(--step--1); }
.pd-head .btn--ghost { color: var(--on-brand); border-color: color-mix(in oklch, var(--on-brand) 42%, transparent); }
.pd-head .btn--ghost:hover { background: color-mix(in oklch, white 14%, transparent); }

.pd-adminnote { margin-block: 1.2rem 0; display: flex; align-items: center; gap: .5em; flex-wrap: wrap; padding: .8em 1em; border-radius: var(--radius); background: var(--accent-soft); color: var(--ink-soft); font-size: var(--step--1); }
.pd-adminnote svg { color: var(--gold); }

.pd-reports { display: grid; gap: 1rem; margin-block-start: 1.5rem; }
.pd-report { display: flex; gap: 1.2rem; align-items: center; justify-content: space-between; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(1rem, 2.5vw, 1.4rem); box-shadow: var(--shadow-1);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base), border-color var(--dur-base); }
.pd-report:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: color-mix(in oklch, var(--gold) 35%, var(--border)); }
.pd-report__main { display: flex; gap: 1rem; align-items: flex-start; flex: 1 1 300px; min-inline-size: 0; }
.pd-report__ico { flex: 0 0 auto; inline-size: 48px; block-size: 48px; border-radius: 12px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; }
.pd-report__ico svg { width: 1.4rem; height: 1.4rem; }
.pd-report__title { font-size: var(--step-1); margin: 0 0 .35rem; }
.pd-report__meta { display: flex; flex-wrap: wrap; gap: .35rem 1rem; color: var(--ink-soft); font-size: var(--step--1); }
.pd-report__meta span { display: inline-flex; align-items: center; gap: .35em; }
.pd-report__meta svg { width: 1em; height: 1em; color: var(--gold); }
.pd-report__sum { margin: .5rem 0 0; color: var(--ink-soft); font-size: var(--step--1); }
.pd-report__dl { flex: 0 0 auto; white-space: nowrap; }

.pd-empty { text-align: center; display: grid; place-items: center; gap: 1rem; padding: clamp(2rem, 6vw, 4rem); }
.pd-empty__ico { inline-size: 64px; block-size: 64px; border-radius: 50%; background: var(--surface-2); color: var(--gold); display: grid; place-items: center; }
.pd-empty__ico svg { width: 1.9rem; height: 1.9rem; }

@media (max-width: 600px) {
  .pd-report { flex-direction: column; align-items: stretch; }
  .pd-report__dl { inline-size: 100%; justify-content: center; }
  .pd-head { flex-direction: column; align-items: flex-start; }
}

/* ─────────────  Page de connexion (espace pro)  ───────────── */
.tpl-connexion .topbar, .tpl-connexion .site-header, .tpl-connexion footer, .tpl-connexion .tabbar, .tpl-connexion .wa-float, .tpl-connexion .breadcrumb { display: none !important; }
.tpl-connexion #main { padding: 0; }
.tpl-connexion { padding-block-end: 0 !important; }

.auth { display: grid; grid-template-columns: 0.92fr 1.08fr; min-block-size: 100vh; min-block-size: 100dvh; }
.auth__brand { position: relative; display: grid; place-items: center; padding: clamp(2rem, 5vw, 4rem); color: var(--on-brand); overflow: clip; isolation: isolate; }
.auth__brand-bg { position: absolute; inset: 0; z-index: -2; background: linear-gradient(150deg, var(--pine-deep), var(--forest) 55%, var(--leaf)); }
.auth__brand::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 55% at 28% 18%, color-mix(in oklch, var(--gold) 26%, transparent), transparent 70%); }
.auth__brand-inner { max-inline-size: 30rem; display: flex; flex-direction: column; gap: 1.1rem; }
.auth__logo { display: inline-block; width: max-content; }
.auth__logo .brand__logo, .auth__logo img { background: #fff; padding: 6px 12px; border-radius: 12px; }
.auth__eyebrow { color: var(--wheat); }
.auth__brand h1 { font-size: var(--step-4); line-height: 1.08; }
.auth__roles { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.auth__roles li { display: flex; align-items: center; gap: .8em; font-weight: 500; }
.auth__roles-ic { inline-size: 36px; block-size: 36px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: color-mix(in oklch, white 14%, transparent); color: var(--wheat); }
.auth__roles-ic svg { width: 1.05rem; height: 1.05rem; }
.auth__sig { margin-block-start: 1rem; font-family: var(--font-display); font-style: italic; color: color-mix(in oklch, var(--on-brand) 82%, transparent); }
html[dir="rtl"] .auth__sig { font-style: normal; }

.auth__form-col { display: grid; place-items: center; padding: clamp(1.5rem, 5vw, 4rem); background: var(--bg); }
.auth__card { inline-size: min(100%, 27rem); }
.auth__title { font-size: var(--step-3); }
.auth__lead { margin-block: .3rem 1.4rem; }
.auth__form { display: flex; flex-direction: column; gap: 1rem; }
.field-ic { position: relative; display: flex; align-items: center; }
.field-ic > svg:first-child { position: absolute; inset-inline-start: .9rem; width: 1.15rem; height: 1.15rem; color: var(--ink-soft); pointer-events: none; }
.field-ic input { inline-size: 100%; padding-inline-start: 2.8rem; }
.pw-toggle { position: absolute; inset-inline-end: .5rem; inline-size: 38px; block-size: 38px; display: grid; place-items: center; border: 0; background: transparent; color: var(--ink-soft); cursor: pointer; border-radius: 8px; transition: color var(--dur-base); }
.pw-toggle:hover, .pw-toggle.is-on { color: var(--brand); }
.pw-toggle svg { width: 1.2rem; height: 1.2rem; }
.auth__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: var(--step--1); margin-block: .2rem; }
.auth__remember { display: inline-flex; align-items: center; gap: .5em; cursor: pointer; }
.auth__remember input { inline-size: 1.05rem; block-size: 1.05rem; accent-color: var(--brand); }
.auth__submit { inline-size: 100%; justify-content: center; margin-block-start: .3rem; }
.auth__secure { display: flex; align-items: center; gap: .5em; justify-content: center; margin-block-start: 1.3rem; padding-block-start: 1.1rem; border-block-start: 1px solid var(--border); color: var(--ink-soft); font-size: var(--step--1); }
.auth__secure svg { color: var(--leaf); width: 1.1em; height: 1.1em; }
.auth__back { text-align: center; margin-block-start: .8rem; }
.auth__back a { display: inline-flex; align-items: center; gap: .4em; color: var(--ink-soft); text-decoration: none; }
.auth__back a:hover { color: var(--brand); }
@media (max-width: 880px) {
  .auth { grid-template-columns: 1fr; min-block-size: auto; }
  .auth__brand { min-block-size: 36vh; text-align: start; }
}

/* ─────────────  Espace équipe (tableau de bord)  ───────────── */
.team-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.5rem, 4vw, var(--space-l)); align-items: start; margin-block-start: 1.5rem; }
.team-reports { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.team-report { display: flex; align-items: center; gap: .9rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .85rem 1rem; transition: border-color var(--dur-base), transform var(--dur-base) var(--ease-out); }
.team-report:hover { border-color: color-mix(in oklch, var(--gold) 35%, var(--border)); transform: translateX(2px); }
html[dir="rtl"] .team-report:hover { transform: translateX(-2px); }
.team-report__ico { inline-size: 40px; block-size: 40px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 10px; background: var(--brand-soft); color: var(--brand); }
.team-report__ico svg { width: 1.2rem; height: 1.2rem; }
.team-report__body { display: flex; flex-direction: column; min-inline-size: 0; flex: 1; gap: 1px; }
.team-status { flex: 0 0 auto; font-size: .7rem; font-weight: 700; padding: .32em .8em; border-radius: var(--radius-pill); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
html[dir="rtl"] .team-status { letter-spacing: 0; }
.team-status.is-pending { background: var(--accent-soft); color: color-mix(in oklch, var(--gold) 58%, var(--ink)); }
.team-status.is-published { background: color-mix(in oklch, var(--leaf) 20%, transparent); color: color-mix(in oklch, var(--leaf) 62%, var(--ink)); }
@media (max-width: 880px) { .team-grid { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════════════════
   PROGRAMMES & PROJETS — archives + singles
   ════════════════════════════════════════════════════════════════════ */
/* Grille programmes (archive) : exactement 3 colonnes au-delà de 880px */
.grid--prog { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
@media (min-width: 880px) { .grid--prog { grid-template-columns: repeat(3, 1fr); } }
.program__title { overflow-wrap: break-word; hyphens: auto; }
html[dir="rtl"] .program__title { hyphens: manual; }

/* Cartes programme — version large (archive) */
.program--lg { padding: clamp(1.6rem, 3.5vw, 2.4rem); gap: .85rem; }
.program--lg .program__icon { width: 3.6rem; height: 3.6rem; }
.program--lg .program__icon svg { width: 2rem; height: 2rem; }
.program--lg .program__title { font-size: var(--step-2); }
.program--lg .program__count { margin-block-start: auto; padding-block-start: .5rem; color: var(--gold); font-weight: 700; display: inline-flex; align-items: center; gap: .4em; }

/* Emblème décoratif sur le bandeau (single programme/projet) */
.page-hero { position: relative; }
.page-hero__emblem { position: absolute; inset-block-start: 50%; inset-inline-end: clamp(-2.5rem, 1vw, 2.5rem); translate: 0 -50%; z-index: -1;
  inline-size: clamp(150px, 22vw, 300px); color: color-mix(in oklch, var(--wheat) 42%, transparent); opacity: .5; pointer-events: none; }
html[dir="rtl"] .page-hero__emblem { inset-inline-end: auto; inset-inline-start: clamp(-2.5rem, 1vw, 2.5rem); }
.page-hero__emblem svg { inline-size: 100%; block-size: auto; }
@media (prefers-reduced-motion: no-preference) { .page-hero__emblem { animation: ihsan-sway 8s var(--ease-inout) infinite alternate; transform-origin: bottom center; } }
@media (max-width: 720px) { .page-hero__emblem { opacity: .22; } }

/* Filtres projets + compteur de résultats */
.filters--projets { align-items: end; gap: 1rem 1.1rem; }
.filters__count { margin-inline-start: auto; align-self: center; color: var(--ink-soft); font-size: var(--step--1); white-space: nowrap; }
.filters__count strong { color: var(--brand); font-family: var(--font-display); font-size: var(--step-1); margin-inline-end: .15em; }
@media (max-width: 620px) { .filters__count { margin-inline-start: 0; } }

/* État vide */
.empty-state { text-align: center; padding-block: clamp(2rem, 6vw, 4rem); display: grid; place-items: center; gap: 1rem; }
.empty-state__icon { width: 3.6rem; height: 3.6rem; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--gold); }
.empty-state__icon svg { width: 1.7rem; height: 1.7rem; }

/* Single projet : en-tête + grille contenu/fiche */
.single-projet__head h1 { font-size: var(--step-4); margin-block-start: .2em; }
.single-projet__head .lead { color: var(--ink-soft); max-width: 60ch; }
.single-projet .single-figure { margin-block: 1.8rem 2rem; }
.single-projet__grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(1.5rem, 4vw, var(--space-l)); align-items: start; }
.single-projet__gallery-title { display: inline-flex; align-items: center; gap: .5em; margin-block-start: 1.8rem; margin-block-end: .8rem; font-size: var(--step-1); }
.single-projet__gallery-title svg { color: var(--gold); }
.project-facts { position: sticky; top: calc(var(--header-h) + 1rem); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-m); box-shadow: var(--shadow-1); display: flex; flex-direction: column; gap: 1.1rem; isolation: isolate; overflow: clip; }
.project-facts::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px; background: linear-gradient(90deg, var(--gold), var(--orange), var(--leaf)); }
.project-facts__title { display: inline-flex; align-items: center; gap: .5em; font-size: var(--step-1); }
.project-facts__title svg { color: var(--gold); }
.project-facts__list { margin: 0; }
.project-facts__row { display: flex; justify-content: space-between; gap: 1rem; padding-block: .65rem; border-block-end: 1px solid var(--border); }
.project-facts__row:last-child { border-block-end: 0; }
.project-facts__row dt { color: var(--ink-soft); }
.project-facts__row dd { font-weight: 600; margin: 0; text-align: end; }
html[dir="rtl"] .project-facts__row dd { text-align: start; }
.project-facts .progress__bar { transition: width var(--dur-xslow) var(--ease-out); }
@media (max-width: 880px) { .single-projet__grid { grid-template-columns: 1fr; } .project-facts { position: static; } }

/* Frise chronologique : marqueur doré raffiné */
.tl-item::before { background: var(--surface); border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in oklch, var(--gold) 16%, transparent), var(--shadow-1); }

/* V/M/V (À propos) : icône qui réagit */
.vmv .card { transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base), border-color var(--dur-base); }
.vmv .card:hover .card__icon { background: var(--brand); color: var(--on-brand); }

/* ════════════════════════════════════════════════════════════════════
   ACTUALITÉS — article à la une (featured) + single éditorial
   ════════════════════════════════════════════════════════════════════ */
.news-featured { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: clip; text-decoration: none; isolation: isolate;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base), border-color var(--dur-base); }
.news-featured:hover { box-shadow: var(--shadow-3); border-color: color-mix(in oklch, var(--gold) 40%, var(--border)); }
.news-featured__media { position: relative; overflow: hidden; overflow: clip; background: var(--surface-2); min-block-size: 250px; }
.news-featured__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.news-featured:hover .news-featured__media img { transform: scale(1.04); }
.news-featured__tag { position: absolute; inset-block-start: 1rem; inset-inline-start: 1rem; z-index: 2; display: inline-flex; align-items: center; gap: .4em;
  padding: .35em .85em; border-radius: var(--radius-pill); background: var(--gold); color: #2a1c05; font-size: var(--step--1); font-weight: 700; box-shadow: var(--shadow-1); }
.news-featured__tag svg { width: 1.05em; height: 1.05em; }
.news-featured__body { display: flex; flex-direction: column; gap: .7rem; padding: clamp(1.4rem, 3vw, 2.4rem); }
.news-featured__title { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.16; color: var(--ink); transition: color var(--dur-base); }
.news-featured:hover .news-featured__title { color: var(--brand); }
.news-featured__more { margin-block-start: auto; font-weight: 700; display: inline-flex; align-items: center; gap: .45em; }
@media (max-width: 720px) { .news-featured { grid-template-columns: 1fr; } .news-featured__media { aspect-ratio: 16/9; min-block-size: 0; } }

.single-head { text-align: start; margin-block-end: 1.6rem; }
.single-head h1 { font-size: var(--step-4); }
.single-meta { display: flex; flex-wrap: wrap; gap: 1.2rem; color: var(--ink-soft); font-size: var(--step--1); margin-block-start: .5rem; }
.single-meta span { display: inline-flex; align-items: center; gap: .45em; }
.single-meta svg { color: var(--gold); width: 1.05em; height: 1.05em; }
.single-figure { border-radius: var(--radius-lg); overflow: hidden; overflow: clip; margin-block-end: 2rem; box-shadow: var(--shadow-2); }
.single-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-start: 2rem; }
.single-share { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-block-start: 1.6rem; padding-block-start: 1.4rem; border-block-start: 1px solid var(--border); }
.single-share__label { display: inline-flex; align-items: center; gap: .4em; font-weight: 700; color: var(--ink-soft); margin-inline-end: .3rem; }
.single-share__label svg { color: var(--gold); }
.single-share__btn { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--border); color: var(--brand);
  transition: transform var(--dur-fast) var(--ease-spring), background var(--dur-base), color var(--dur-base), border-color var(--dur-base); }
.single-share__btn:hover { transform: translateY(-3px); background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.single-share__btn:active { transform: scale(.92); }
.single-share__btn svg { width: 20px; height: 20px; }

.single-nav { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem 1.5rem; align-items: center; margin-block-start: 2.5rem; padding-block-start: 1.6rem; border-block-start: 1px solid var(--border); }
.single-nav__link { text-decoration: none; display: flex; flex-direction: column; gap: 2px; max-inline-size: 24ch; }
.single-nav__link small { color: var(--gold); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .7rem; }
html[dir="rtl"] .single-nav__link small { letter-spacing: 0; }
.single-nav__link span { color: var(--ink); font-weight: 600; line-height: 1.25; }
.single-nav__link:hover span { color: var(--brand); }
.single-nav__next { text-align: end; align-items: flex-end; }
.single-nav__all { justify-self: center; }
@media (max-width: 600px) {
  .single-nav { grid-template-columns: 1fr; text-align: start; }
  .single-nav__next { text-align: start; align-items: flex-start; }
  .single-nav__all { justify-self: stretch; order: 3; }
}

/* ─────────────  Médiathèque publique  ───────────── */
.med-tabs { display: flex; flex-wrap: wrap; gap: .6rem; padding-block: 1.4rem .2rem; }
.med-tabs a { display: inline-flex; align-items: center; gap: .5em; padding: .55em 1.05em; border-radius: var(--radius-pill);
  border: 1px solid var(--border); text-decoration: none; font-weight: 600; font-size: .95rem;
  transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast); }
.med-tabs a:hover { border-color: var(--gold); background: var(--accent-soft); color: var(--brand); }
.med-tabs svg { width: 1.1em; height: 1.1em; color: var(--gold); }
.med-video { position: relative; }
.med-video__play { position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; }
.med-video__play svg { width: 3.4rem; height: 3.4rem; color: #fff; filter: drop-shadow(0 4px 16px rgba(0,0,0,.55)); transition: transform var(--dur-base) var(--ease-spring); }
.card:hover .med-video__play svg { transform: scale(1.14); }

/* ─────────────  Accent de titre — fleuron éditorial « fil d'or »  ─────────────
   Reprend le moment signature (الخطّ الحاصد) : l'épi flanqué de deux filets d'or.
   Crée un fil conducteur cohérent sur toute la page (retenue, élégance). */
.head-accent { display: inline-flex; align-items: center; gap: .85rem; width: auto; height: auto;
  background: none; border-radius: 0; color: var(--gold); margin-inline: auto; margin-block-end: 1.1rem; }
.head-accent::before, .head-accent::after {
  content: ""; inline-size: clamp(1.6rem, 5vw, 3rem); block-size: 2px; border-radius: 2px; background: var(--hairline);
}
.head-accent svg { width: 1.45rem; height: 1.45rem; flex: 0 0 auto; filter: drop-shadow(0 0 8px color-mix(in oklch, var(--gold) 45%, transparent)); }
/* Aligné au départ (sections asymétriques) : un seul filet, du côté de la lecture. */
.section-head--start .head-accent { margin-inline: 0; }
.section-head--start .head-accent::before { display: none; }

/* ─────────────  Bandeau d'en-tête de page interne  ───────────── */
.page-hero { position: relative; color: var(--on-brand); overflow: clip; isolation: isolate;
  background: linear-gradient(120deg, var(--pine-deep), var(--forest) 70%, var(--leaf));
  padding-block: clamp(3rem, 8vw, 5.5rem); }
.page-hero::after { content: ""; position: absolute; inset-block-start: -30%; inset-inline-end: -8%; z-index: -1;
  width: clamp(260px, 34vw, 520px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklch, var(--wheat) 32%, transparent), transparent 68%); }
html[dir="rtl"] .page-hero::after { inset-inline-end: auto; inset-inline-start: -8%; }
.page-hero h1 { color: var(--on-brand); }
.page-hero .lead { color: color-mix(in oklch, var(--on-brand) 88%, transparent); max-width: 54ch; margin-block-start: .8em; font-size: var(--step-1); }
.page-hero .eyebrow { color: var(--cream); }

/* ─────────────  KPI polish (toutes pages)  ───────────── */
.kpi { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base), border-color var(--dur-base); overflow: clip; }
.kpi::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--orange)); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--dur-slow) var(--ease-out); }
.kpi:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); border-color: color-mix(in oklch, var(--gold) 45%, var(--border)); }
.kpi:hover::before { transform: scaleX(1); }
.kpi__icon { display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); transition: transform var(--dur-base) var(--ease-out); }
.kpi:hover .kpi__icon { transform: scale(1.12) rotate(-6deg); }

/* ─────────────  Programmes polish  ───────────── */
.program { position: relative; overflow: clip; isolation: isolate; }
.program::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: linear-gradient(150deg, transparent 40%, var(--brand-soft)); transition: opacity var(--dur-base) var(--ease-out); }
.program:hover::after { opacity: 1; }
.program__icon { transition: transform var(--dur-base) var(--ease-out), background var(--dur-base), color var(--dur-base); }
.program:hover .program__icon { transform: translateY(-3px) scale(1.06); background: var(--brand); color: var(--on-brand); }
.program__idx { position: absolute; inset-block-start: 1rem; inset-inline-end: 1.1rem; font-family: var(--font-display);
  font-size: var(--step-1); color: color-mix(in oklch, var(--ink) 16%, transparent); font-weight: 700; }

/* ─────────────  Cartes : overlay média  ───────────── */
.card__media { position: relative; }
.card__media::after { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur-base);
  background: linear-gradient(to top, color-mix(in oklch, var(--pine-deep) 60%, transparent), transparent 55%); }
.card:hover .card__media::after { opacity: 1; }

/* ─────────────  Boutons : sheen + magnétique  ───────────── */
.btn { position: relative; overflow: clip; isolation: isolate; }
.btn::before { content: ""; position: absolute; inset: 0; transform: translateX(-120%); pointer-events: none; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, color-mix(in oklch, white 28%, transparent) 50%, transparent 70%); }
@media (prefers-reduced-motion: no-preference) {
  .btn:hover::before { animation: ihsan-sheen .85s var(--ease-out); }
  @keyframes ihsan-sheen { to { transform: translateX(120%); } }
  /* Sheen en sens inverse en RTL */
  html[dir="rtl"] .btn::before { transform: translateX(120%); }
  html[dir="rtl"] .btn:hover::before { animation: ihsan-sheen-rtl .85s var(--ease-out); }
  @keyframes ihsan-sheen-rtl { to { transform: translateX(-120%); } }
}
.btn--magnetic { transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base), background var(--dur-base); }
.btn--magnetic:hover { will-change: transform; } /* promotion GPU à la demande seulement */

/* ─────────────  Bascule de thème (icône soleil/lune)  ───────────── */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .theme-toggle .icon-sun { display: block; }
  :root[data-theme="auto"] .theme-toggle .icon-moon { display: none; }
}

/* ─────────────  Carte GIS : pulse des pins  ───────────── */
@media (prefers-reduced-motion: no-preference) {
  .gis__pin.has { transform-box: fill-box; transform-origin: center; animation: ihsan-pulse 2.6s var(--ease-inout) infinite; }
  @keyframes ihsan-pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; transform: scale(.82); } }
}
.gis__pin.is-active { animation: none !important; transform: scale(1.3); transform-box: fill-box; transform-origin: center; }

/* ─────────────  CTA band : lueur conique animée  ───────────── */
.cta-band { isolation: isolate; }
.cta-band::after { content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: inherit; opacity: .8;
  background: conic-gradient(from 0deg, transparent, color-mix(in oklch, var(--gold) 22%, transparent), transparent 40%); }
@media (prefers-reduced-motion: no-preference) {
  /* Rotation unique à l'apparition (one-shot) plutôt qu'infinie — plus sobre, moins coûteux. */
  .cta-band.is-in::after { animation: ihsan-spin 14s linear; }
  @keyframes ihsan-spin { to { transform: rotate(1turn); } }
}

/* ─────────────  Séparateur « champ »  ───────────── */
.field-divider { display: grid; place-items: center; gap: .6rem; padding-block: clamp(1.5rem, 4vw, 2.5rem); color: var(--gold); }
.field-divider svg { width: 34px; height: 34px; }
.field-divider .line { width: min(60%, 420px); height: 1px; background: linear-gradient(90deg, transparent, var(--border-strong), transparent); }

/* ─────────────  Marquee  ───────────── */
.marquee__track { animation-duration: 46s; }

/* ════════════════════════════════════════════════════════════════════
   PAGE « À PROPOS » — vision/mission/valeurs, frise, structure
   ════════════════════════════════════════════════════════════════════ */
.vmv { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--space-m); }
.vmv .card { padding: var(--space-m); }
.vmv .card__icon { width: 3.2rem; height: 3.2rem; display: grid; place-items: center; border-radius: var(--radius);
  background: var(--brand-soft); color: var(--brand); margin-block-end: 1rem; transition: transform var(--dur-base) var(--ease-out); }
.vmv .card:hover .card__icon { transform: translateY(-3px) scale(1.06); }
.vmv .card__icon svg { width: 1.7rem; height: 1.7rem; }
.vmv h3 { font-size: var(--step-1); margin-block-end: .5rem; }
.vmv p { color: var(--ink-soft); }

/* Frise chronologique (verticale, cartes + marqueurs lumineux) */
.timeline { position: relative; max-width: 820px; margin-inline: auto; padding-inline-start: 3rem; margin-block-start: clamp(1.4rem, 3vw, 2.4rem); }
.timeline::before { content: ""; position: absolute; inset-block: .5rem .5rem; inset-inline-start: .82rem; width: 3px; border-radius: 3px;
  background: linear-gradient(var(--gold), color-mix(in oklch, var(--gold) 12%, transparent)); }
.tl-item { position: relative; padding-block: 0 1.4rem; }
.tl-item:last-child { padding-block-end: 0; }
.tl-item::before { content: ""; position: absolute; inset-inline-start: calc(-3rem + .2rem); inset-block-start: .9rem;
  inline-size: 1.25rem; block-size: 1.25rem; border-radius: 50%; background: var(--gold); border: 3px solid var(--surface);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--gold) 22%, transparent), var(--shadow-1); transition: transform var(--dur-base) var(--ease-spring); z-index: 1; }
.tl-item:hover::before { transform: scale(1.2); }
.tl-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1rem 1.3rem; box-shadow: var(--shadow-1); transition: box-shadow var(--dur-base), border-color var(--dur-base); }
.tl-item:hover .tl-card { box-shadow: var(--shadow-2); border-color: color-mix(in oklch, var(--gold) 32%, var(--border)); }
.tl-year { display: inline-block; font-family: var(--font-display); font-size: var(--step-0); color: var(--pine-deep); background: color-mix(in oklch, var(--gold) 88%, white); font-weight: 800; padding: .08em .7em; border-radius: var(--radius-pill); letter-spacing: .03em; }
.tl-item p { color: var(--ink-soft); margin-block: .5rem 0; }

/* À propos — piliers de valeurs (4 colonnes) */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2.5vw, 1.5rem); margin-block-start: clamp(1.5rem, 4vw, 2.5rem); }
.pillar { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(1.4rem, 3vw, 2rem); box-shadow: var(--shadow-1); overflow: clip; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base), border-color var(--dur-base); }
.pillar::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 3px; background: var(--hairline); opacity: 0; transition: opacity var(--dur-base); }
.pillar:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); border-color: color-mix(in oklch, var(--gold) 35%, var(--border)); }
.pillar:hover::before { opacity: 1; }
.pillar__ico { inline-size: 54px; block-size: 54px; display: grid; place-items: center; border-radius: 14px; background: var(--brand-soft); color: var(--brand); margin-block-end: 1rem; transition: transform var(--dur-base) var(--ease-spring); }
.pillar:hover .pillar__ico { transform: rotate(-6deg) scale(1.08); }
.pillar__ico svg { width: 1.6rem; height: 1.6rem; }
.pillar h3 { font-size: var(--step-1); margin: 0 0 .4rem; }
.pillar p { color: var(--ink-soft); font-size: var(--step--1); margin: 0; }
@media (max-width: 920px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .pillars { grid-template-columns: 1fr; } }

/* Bloc structure / organigramme */
.org-card { background: linear-gradient(150deg, var(--pine-deep), var(--forest)); color: var(--on-brand);
  border-radius: var(--radius-lg); padding: clamp(1.6rem, 4vw, 2.6rem); }
.org-card h2 { color: var(--on-brand); }
.org-card .lead { color: color-mix(in oklch, var(--on-brand) 86%, transparent); }

/* ════════════════════════════════════════════════════════════════════
   RAFFINEMENTS DARK-MODE + CORRECTIONS DE CONTRASTE (WCAG AA)
   ════════════════════════════════════════════════════════════════════ */
/* Badge « en cours » : texte sombre sur or (lisible en clair ET sombre) */
.badge--pending { color: #2e2206; }
.chip--gold { color: color-mix(in oklch, var(--gold) 72%, black); }

/* Bouton primaire « nu » : forcer un vert assez foncé + texte clair (le vert --brand
   devient clair en sombre → on hardcode pour garder le contraste du CTA). */
:root[data-theme="dark"] .btn:not(.btn--cta):not(.btn--gold):not(.btn--ghost):not(.btn--on-dark) {
  background: oklch(0.52 0.11 150); color: #fff;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .btn:not(.btn--cta):not(.btn--gold):not(.btn--ghost):not(.btn--on-dark) {
    background: oklch(0.52 0.11 150); color: #fff;
  }
}

/* En sombre, l'or des chips redevient clair pour contraster avec le fond foncé */
:root[data-theme="dark"] .chip--gold { color: color-mix(in oklch, var(--wheat) 90%, white); }
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .chip--gold { color: color-mix(in oklch, var(--wheat) 90%, white); }
}

/* Bouton ghost : bordure au repos plus lisible en sombre */
:root[data-theme="dark"] .btn--ghost { box-shadow: inset 0 0 0 1.5px color-mix(in oklch, var(--brand) 55%, transparent); }
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .btn--ghost { box-shadow: inset 0 0 0 1.5px color-mix(in oklch, var(--brand) 55%, transparent); }
}

/* En-tête translucide : un peu plus dense en sombre pour la lisibilité */
:root[data-theme="dark"] .site-header { background: color-mix(in oklch, var(--surface) 92%, transparent); }
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .site-header { background: color-mix(in oklch, var(--surface) 92%, transparent); }
}

/* ════════════════════════════════════════════════════════════════════
   MODE SOMBRE — correctifs de lisibilité (audit contraste)
   Messages de formulaire (étaient mixés vers le noir → invisibles),
   palier de don actif (vert clair/blanc → muddy), logos partenaires.
   ════════════════════════════════════════════════════════════════════ */
:root[data-theme="dark"] .form-msg--ok {
  color: color-mix(in oklch, var(--st-ok) 46%, white);
  background: color-mix(in oklch, var(--st-ok) 24%, var(--bg));
  border-color: color-mix(in oklch, var(--st-ok) 55%, var(--surface));
}
:root[data-theme="dark"] .form-msg--err {
  color: color-mix(in oklch, var(--st-danger) 56%, white);
  background: color-mix(in oklch, var(--st-danger) 20%, var(--bg));
  border-color: color-mix(in oklch, var(--st-danger) 55%, var(--surface));
}
:root[data-theme="dark"] .give-preset.is-active,
:root[data-theme="dark"] .pagination .current,
:root[data-theme="dark"] .vmv .card:hover .card__icon,
:root[data-theme="dark"] .single-share__btn:hover,
:root[data-theme="dark"] .program:hover .program__icon {
  background: oklch(0.55 0.115 150); color: #fff; border-color: oklch(0.6 0.12 150);
}
:root[data-theme="dark"] .marquee img { filter: grayscale(1) brightness(1.55) opacity(.82); }
/* Champs de formulaire en retrait pour se détacher de la carte sombre */
:root[data-theme="dark"] .field input,
:root[data-theme="dark"] .field select,
:root[data-theme="dark"] .field textarea { background: var(--bg); }

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .form-msg--ok {
    color: color-mix(in oklch, var(--st-ok) 46%, white);
    background: color-mix(in oklch, var(--st-ok) 24%, var(--bg));
    border-color: color-mix(in oklch, var(--st-ok) 55%, var(--surface));
  }
  :root[data-theme="auto"] .form-msg--err {
    color: color-mix(in oklch, var(--st-danger) 56%, white);
    background: color-mix(in oklch, var(--st-danger) 20%, var(--bg));
    border-color: color-mix(in oklch, var(--st-danger) 55%, var(--surface));
  }
  :root[data-theme="auto"] .give-preset.is-active,
  :root[data-theme="auto"] .pagination .current,
  :root[data-theme="auto"] .vmv .card:hover .card__icon,
  :root[data-theme="auto"] .single-share__btn:hover,
  :root[data-theme="auto"] .program:hover .program__icon {
    background: oklch(0.55 0.115 150); color: #fff; border-color: oklch(0.6 0.12 150);
  }
  :root[data-theme="auto"] .marquee img { filter: grayscale(1) brightness(1.55) opacity(.82); }
  :root[data-theme="auto"] .field input,
  :root[data-theme="auto"] .field select,
  :root[data-theme="auto"] .field textarea { background: var(--bg); }
}

/* ════════════════════════════════════════════════════════════════════
   AWARD v2 — raffinements globaux (toutes pages)
   transform/opacity · prefers-reduced-motion respecté · RTL-first
   ════════════════════════════════════════════════════════════════════ */

/* ─────────────  Révélations : entrée plus soyeuse (flou + ressort doux)  ───────────── */
@media (prefers-reduced-motion: no-preference) {
  /* transform/opacity uniquement (charte) — pas de filter:blur animé (repaint coûteux sur mobile). */
  .reveal { transition: opacity var(--dur-xslow) var(--ease-out), transform var(--dur-xslow) var(--ease-out); }
  .reveal[data-reveal="up"]   { transform: translateY(34px); }
  .reveal[data-reveal="fade"] { transform: none; }
  .reveal[data-delay="1"] { transition-delay: 80ms; }
  .reveal[data-delay="2"] { transition-delay: 160ms; }
  .reveal[data-delay="3"] { transition-delay: 240ms; }
}

/* ─────────────  En-tête : barre dynamique au scroll  ───────────── */
.site-header { transition: box-shadow var(--dur-base), background var(--dur-base), border-color var(--dur-base); }
.site-header.is-scrolled { background: color-mix(in oklch, var(--surface) 96%, transparent); border-block-end-color: color-mix(in oklch, var(--gold) 28%, var(--border)); }
.nav__menu a { position: relative; }
.nav__menu a::after {
  content: ""; position: absolute; inset-block-end: .35em; inset-inline: .9em; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--orange)); transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-out);
}
html[dir="rtl"] .nav__menu a::after { transform-origin: right center; }
.nav__menu a:hover::after, .nav__menu .current-menu-item > a::after { transform: scaleX(1); }
.nav__menu a:hover, .nav__menu .current-menu-item > a { background: transparent; }

/* ─────────────  Barre de progression : lueur  ───────────── */
.scroll-progress { box-shadow: 0 0 12px color-mix(in oklch, var(--gold) 70%, transparent); border-end-end-radius: 3px; border-start-end-radius: 3px; }

/* ─────────────  Programmes : projecteur au curseur + soulignement  ───────────── */
.program { --mx: 50%; --my: 0%; transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base), border-color var(--dur-base); }
.program::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; border-radius: inherit;
  background: radial-gradient(circle at var(--mx) var(--my), color-mix(in oklch, var(--gold) 20%, transparent), transparent 55%);
  transition: opacity var(--dur-base) var(--ease-out);
}
.program:hover::before, .program:focus-visible::before { opacity: 1; }
.program__title { position: relative; width: fit-content; }
.program__title::after {
  content: ""; position: absolute; inset-block-end: -3px; inset-inline: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--orange)); transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-out);
}
html[dir="rtl"] .program__title::after { transform-origin: right center; }
.program:hover .program__title::after, .program:focus-visible .program__title::after { transform: scaleX(1); }
.program:hover { box-shadow: var(--shadow-3); }

/* ─────────────  Cartes : éclat diagonal + bascule 3D (pointeur fin)  ───────────── */
/* .card__media est un <a> (inline par défaut) → display:block pour que aspect-ratio
   s'applique vraiment, et l'image remplit la boîte 16/10 quelle que soit sa taille. */
.card__media { position: relative; display: block; }
.card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card__media::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; transform: translateX(-130%);
  background: linear-gradient(110deg, transparent 38%, color-mix(in oklch, white 38%, transparent) 50%, transparent 62%);
}
@media (prefers-reduced-motion: no-preference) {
  .card:hover .card__media::before { animation: ihsan-sheen 1s var(--ease-out); }
  html[dir="rtl"] .card__media::before { transform: translateX(130%); }
  html[dir="rtl"] .card:hover .card__media::before { animation: ihsan-sheen-rtl 1s var(--ease-out); }
}
[data-tilt] { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base); transform-style: preserve-3d; }
[data-tilt].is-tilting { transition: transform 90ms linear, box-shadow var(--dur-base); }
.card[data-tilt].is-tilting { box-shadow: var(--shadow-3); }

/* ─────────────  Boutons : pression + focus net  ───────────── */
.btn:active { transform: scale(.97); }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.btn--cta { background: linear-gradient(135deg, var(--cta), color-mix(in oklch, var(--gold) 55%, var(--cta))); }
.btn--cta:hover { background: linear-gradient(135deg, var(--cta-strong), var(--cta)); }
.btn--ghost { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }

/* ─────────────  Marquee : voile de bord + variété de vitesse  ───────────── */
.marquee { position: relative; }
.marquee::before, .marquee::after { content: ""; position: absolute; inset-block: 0; width: clamp(2rem, 8vw, 6rem); z-index: 2; pointer-events: none; }
.marquee::before { inset-inline-start: 0; background: linear-gradient(to right, var(--bg-alt), transparent); }
.marquee::after  { inset-inline-end: 0;  background: linear-gradient(to left, var(--bg-alt), transparent); }
.chip--gold { transition: transform var(--dur-fast) var(--ease-out), background var(--dur-base); }
.marquee .chip--gold:hover { transform: translateY(-3px); }

/* ─────────────  Séparateur « champ » : épi qui respire  ───────────── */
@media (prefers-reduced-motion: no-preference) {
  .field-divider svg { animation: ihsan-sway 6s var(--ease-inout) infinite alternate; transform-origin: bottom center; }
}

/* ─────────────  Pied de page : réseaux animés  ───────────── */
.footer__social a { transition: transform var(--dur-base) var(--ease-spring), background var(--dur-base), color var(--dur-base); }
.footer__social a:hover { transform: translateY(-4px) scale(1.08); }
.wa-float { animation: none; }
@media (prefers-reduced-motion: no-preference) {
  .wa-float::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #25d366; z-index: -1; animation: ihsan-ping 2.4s var(--ease-out) infinite; }
  @keyframes ihsan-ping { 0% { transform: scale(1); opacity: .5; } 70%, 100% { transform: scale(1.7); opacity: 0; } }
}

/* ════════════════════════════════════════════════════════════════════
   VERSION ARABE (langue par défaut, dir=rtl) — typographie « award »
   Reem Kufi (titres) + Readex Pro (corps), auto-hébergés. RTL-first.
   ════════════════════════════════════════════════════════════════════ */

/* Familles display/body pointent vers les fontes arabes → toute la version arabe
   est cohérente (KPI, badges, signature, titres…), sans tomber sur un latin sans glyphe. */
html[dir="rtl"], html[lang="ar"] { --font-display: var(--font-ar-display); --font-body: var(--font-ar-body); }

/* L'interlettrage (négatif sur les titres, .04em sur les titres de pied) CASSE les
   liaisons de l'écriture arabe → on le neutralise partout en arabe. */
html[dir="rtl"] :is(h1, h2, h3, h4, .h1, .h2, .h3, .h4),
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .footer-col h4,
html[dir="rtl"] .brand__tag,
html[dir="rtl"] .brand__name { letter-spacing: normal; }

/* Interligne plus généreux (diacritiques, hampes) + rendu fin. */
html[dir="rtl"] body { line-height: 1.85; font-feature-settings: "kern" 1, "liga" 1, "calt" 1; }
html[dir="rtl"] :is(h1, h2, h3) { line-height: 1.28; }
html[dir="rtl"] .hero h1 { line-height: 1.3; }
html[dir="rtl"] .hero__lead, html[dir="rtl"] .lead, html[dir="rtl"] .intro__body { line-height: 1.9; }

/* L'italique n'existe pas en arabe : la signature reprend le Kufi, droit. */
html[dir="rtl"] .footer__signature, html[dir="rtl"] .intro__title em { font-style: normal; }

/* Chiffres « occidentaux » conservés (usage sénégalais) ; alignement net.
   direction:ltr → le nombre et son suffixe (+, %) se lisent naturellement « 207 796+ ». */
html[dir="rtl"] .kpi__num, html[dir="rtl"] .tl-year, html[dir="rtl"] .ref-box strong { font-variant-numeric: lining-nums tabular-nums; }
html[dir="rtl"] .kpi__num { direction: ltr; }

/* Eyebrow arabe : un cran plus lisible (pas de capitales pertinentes en arabe). */
html[dir="rtl"] .eyebrow { font-size: var(--step-0); font-weight: 600; }

/* ════════════════════════════════════════════════════════════════════
   PAGINATION : chevrons orientés (précédent ⟵ / suivant ⟶), miroir en RTL
   ════════════════════════════════════════════════════════════════════ */
.pagination .prev svg { transform: rotate(180deg); }
html[dir="rtl"] .pagination .prev svg { transform: none; }
html[dir="rtl"] .pagination .next svg { transform: rotate(180deg); }

/* ════════════════════════════════════════════════════════════════════
   prefers-contrast : renforcement des bordures et du texte (charte a11y)
   ════════════════════════════════════════════════════════════════════ */
@media (prefers-contrast: more) {
  :root {
    --border: color-mix(in oklch, var(--ink) 45%, transparent);
    --border-strong: var(--ink);
    --ink-soft: color-mix(in oklch, var(--ink) 88%, var(--bg));
  }
  .btn--ghost { box-shadow: inset 0 0 0 2px var(--brand); }
  .card, .program, .kpi, .gis__panel, .filters { border-color: var(--border-strong); }
  .eyebrow, .card__excerpt, .form__note { color: var(--ink); }
}

/* ════════════════════════════════════════════════════════════════════
   AWARD v3 — MOBILE : tactile, allègement GPU, drawer raffiné. Non-layered.
   transform/opacity · prefers-reduced-motion respecté · RTL-first.
   ════════════════════════════════════════════════════════════════════ */

/* ─── Retour tactile (:active) sur les contrôles clés (le tactile n'a pas de :hover fiable) ─── */
.burger, .theme-toggle, .langswitch__btn { transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast), border-color var(--dur-fast); }
.burger:active, .theme-toggle:active, .langswitch__btn:active { transform: scale(.92); background: var(--brand-soft); }
.mobile-menu__list a { transition: background var(--dur-fast), padding-inline-start var(--dur-base) var(--ease-out); }
.mobile-menu__list a:active { background: var(--brand-soft); }
.footer__social a:active { transform: scale(.92); }
/* Les effets de survol non essentiels ne « collent » plus sur écran tactile */
@media (hover: none) {
  .wa-float:hover { transform: none; }
  .marquee img:hover { filter: grayscale(1) opacity(.65); }
  .marquee:hover .marquee__track { animation-play-state: running; }
}
.wa-float:active { transform: scale(.9); }

/* ─── En-tête mobile : pas de backdrop-filter (reflou à chaque frame de scroll) ─── */
@media (max-width: 860px) {
  .site-header, .site-header.is-scrolled {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: color-mix(in oklch, var(--surface) 97%, transparent);
  }
  .btn--ghost { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ─── Allègement des animations « idle » infinies sur mobile (perf / batterie) ─── */
@media (max-width: 820px) {
  .wa-float::after { display: none; } /* coupe le halo « ping » permanent */
}
@media (max-width: 600px) {
  .gis__pin.has { animation-duration: 4s; }      /* pulse plus lent */
  .cta-band::after { animation: none; }           /* conic-gradient figé */
  .intro__badge { -webkit-backdrop-filter: none; backdrop-filter: none; }
  /* Reveals plus vifs sur mobile (moins d'attente, pas de stagger superflu en 1 colonne) */
  .reveal { transition-duration: var(--dur-slow); }
  .reveal[data-delay="1"], .reveal[data-delay="2"], .reveal[data-delay="3"] { transition-delay: 0ms; }
}

/* ─── Drawer mobile raffiné : voile flou (one-shot à l'ouverture), profondeur, entrée échelonnée ─── */
.mobile-menu { background: color-mix(in oklch, var(--pine-deep) 55%, transparent); }
.mobile-menu__panel { box-shadow: -24px 0 60px -20px oklch(0.18 0.04 158 / .5); }
html[dir="rtl"] .mobile-menu__panel { box-shadow: 24px 0 60px -20px oklch(0.18 0.04 158 / .5); }
@media (prefers-reduced-motion: no-preference) {
  /* Le voile ne se floute qu'à l'ouverture (pas pendant le scroll) → coût ponctuel acceptable */
  .mobile-menu[data-open="true"] { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
  /* Apparition échelonnée des items du menu */
  .mobile-menu__list a { opacity: 0; transform: translateY(8px); }
  .mobile-menu[data-open="true"] .mobile-menu__list a { animation: ihsan-drawer-item .42s var(--ease-out) both; }
  .mobile-menu[data-open="true"] .mobile-menu__list li:nth-child(1) a { animation-delay: .06s; }
  .mobile-menu[data-open="true"] .mobile-menu__list li:nth-child(2) a { animation-delay: .11s; }
  .mobile-menu[data-open="true"] .mobile-menu__list li:nth-child(3) a { animation-delay: .16s; }
  .mobile-menu[data-open="true"] .mobile-menu__list li:nth-child(4) a { animation-delay: .21s; }
  .mobile-menu[data-open="true"] .mobile-menu__list li:nth-child(5) a { animation-delay: .26s; }
  .mobile-menu[data-open="true"] .mobile-menu__list li:nth-child(6) a { animation-delay: .31s; }
  .mobile-menu[data-open="true"] .mobile-menu__list li:nth-child(n+7) a { animation-delay: .36s; }
  @keyframes ihsan-drawer-item { to { opacity: 1; transform: none; } }
}

/* ─── Tabbar : libellés arabes lisibles + anti-troncature ─── */
html[dir="rtl"] .tabbar a { font-size: .74rem; line-height: 1.15; }
.tabbar a span { max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ─────────────  Logo réel (.ihsan-mark) en remplacement du motif « blé »  ───────────── */
.ihsan-mark { max-inline-size: 100%; block-size: auto; vertical-align: middle; }
/* Eyebrows & hero : texte épuré — la marque vit dans l'en-tête/le footer et les emblèmes. */
.eyebrow .ihsan-mark, .hero .ihsan-mark { display: none; }
/* Petits accents sur fonds clairs : logo lisible à petite taille. */
.head-accent .ihsan-mark { inline-size: auto; block-size: 1.8rem; filter: drop-shadow(0 2px 6px color-mix(in oklch, var(--gold) 35%, transparent)); }
.field-divider .ihsan-mark { inline-size: auto; block-size: 30px; }
/* Watermark d'angle des bandeaux : retiré (le logo couleur ne fonctionne pas en filigrane sombre). */
.page-hero__emblem { display: none; }
/* Grands emblèmes sur cartes sombres → pastille blanche (logo toujours lisible). */
.intro__art .emblem .ihsan-mark, .org-card .ihsan-mark {
  inline-size: 100%; block-size: auto; background: #fff; border-radius: 18px; padding: 12px 16px; box-shadow: var(--shadow-2);
}