/* ============================================================
   DĪn — Hero partagé
   Chemin attendu : /wp-content/themes/<thème-enfant>/assets/css/din-hero.css
   Chargé par inc/din-assets.php

   Utilisé par /la-priere/ et /les-ablutions/.
   Aucune dépendance : les jetons sont définis ici, avec repli sur
   --fg / --acc posés par le header sur <html>.

   ⚠ Le hero est en flex + gap, PAS en margin. C'est délibéré :
   les pages contiennent des resets du type
       #din-priere p, #din-priere h1 { margin: 0 }
   dont la spécificité (id) écraserait n'importe quelle marge
   déclarée ici en classe simple. Le gap, lui, appartient au
   conteneur et reste hors de portée de ces resets.
   ============================================================ */

.din-hero{
  --dh-ink:     var(--fg, #23211d);
  --dh-ink-2:   #6b6559;
  --dh-acc:     var(--acc, #0e7c6b);

  --dh-ff-disp: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --dh-ff-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --dh-ff-ar:   "Amiri Quran", "Amiri", "Scheherazade New", "Noto Naskh Arabic", "Traditional Arabic", "Times New Roman", serif;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;

  max-width: 900px;
  margin: 0 auto;
  padding: clamp(52px, 8vw, 100px) 24px 8px;
  text-align: center;

  color: var(--dh-ink);
  font-family: var(--dh-ff-body);
  line-height: 1.65;
}

html[data-din-theme="dark"] .din-hero{
  --dh-ink:   var(--fg, #e8e5df);
  --dh-ink-2: #9aa0a6;
  --dh-acc:   var(--acc, #4fd1b8);
}
html[data-din-theme="sepia"] .din-hero{
  --dh-ink:   var(--fg, #3a2f21);
  --dh-ink-2: #7a6a52;
  --dh-acc:   var(--acc, #96602c);
}

.din-hero *,
.din-hero *::before,
.din-hero *::after{ box-sizing: border-box; }

.din-hero-eyebrow{
  font-size: 14px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dh-ink-2);
}

.din-hero-title{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-weight: 400;
}

/* Le titre arabe fait partie de l'identité de la page :
   il n'est jamais concerné par les options d'affichage. */
.din-hero-ar{
  font-family: var(--dh-ff-ar);
  font-size: clamp(52px, 10vw, 86px);
  line-height: 1.35;
  font-weight: 400;
  color: var(--dh-acc);
  direction: rtl;
}

.din-hero-fr{
  font-family: var(--dh-ff-disp);
  font-size: clamp(28px, 4.6vw, 42px);
  font-weight: 400;
  font-style: italic;
  letter-spacing: .01em;
  line-height: 1.2;
}

.din-hero-lede{
  max-width: 58ch;
  color: var(--dh-ink-2);
  font-size: 20px;
}

@media (max-width: 600px){
  .din-hero{ gap: 20px; }
  .din-hero-lede{ font-size: 18px; }
}