/* ============================================================
   Yahdi Qalbah — coquille partagée
   En-tête, navigation, pied de page, boutons.
   Chargée par les 4 espaces ; chaque page garde ensuite son
   CSS propre pour ce qui lui est spécifique.
   Aucune dépendance externe.
   ============================================================ */

:root{
  /* Reprises telles quelles des pages existantes — ne pas changer les polices. */
  --encre:#0D0B07;      /* le fond sombre, et l'encre sur fond clair */
  --encre-2:#161209;
  --creme:#F5EEDF;      /* le fond clair de lecture (crème chaud, jamais #fff) */
  --or:#C9A962;
  --or-vif:#E8D5A3;
  --or-sombre:#8a7038;
  --muted:#9c937e;
  --line:rgba(201,169,98,.25);
  --serif:'Cormorant Garamond',serif;
  --sans:'Plus Jakarta Sans',sans-serif;
  --ar:'Amiri',serif;
}

/* Remise à zéro minimale — pour les pages sans style propre. */
*{margin:0;padding:0;box-sizing:border-box}

/* ---------- EN-TÊTE ---------- */
/* Non collant au défilement : sur un texte de 70 000 caractères lu au
   téléphone, une barre fixe coûte une bande d'écran en permanence.
   z-index élevé car les pages posent un canvas d'étoiles en fixed. */
.site-header{
  position:relative;z-index:50;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.9rem 1.4rem;
  padding:1rem clamp(1rem,4vw,2.5rem);
  background:var(--encre);
  border-block-end:1px solid var(--line);
  font-family:var(--sans);
}
.site-brand{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--serif);font-size:1.15rem;letter-spacing:.02em;
  color:var(--creme);text-decoration:none;
}
.site-brand img{border-radius:8px}
.site-brand:hover{color:var(--or)}

/* Sur mobile la navigation passe à la ligne — pas de hamburger : quatre
   liens ne justifient pas d'être cachés, et il dépendrait du JavaScript. */
.site-nav{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.35rem;
  font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;
}
.site-nav a{
  color:var(--muted);text-decoration:none;
  padding-block:.3rem;
  border-block-end:1px solid transparent;
  transition:color .25s,border-color .25s;
}
.site-nav a:hover{color:var(--creme)}
.site-nav a[aria-current="page"]{color:var(--or);border-block-end-color:var(--or)}

/* ---------- BOUTON OR ---------- */
/* Le sélecteur composé bat `.site-nav a` sans recourir à !important. */
.btn-or,
.site-nav a.btn-or{
  display:inline-block;
  padding:.5rem 1.1rem;
  border:0;border-radius:999px;
  background:linear-gradient(135deg,var(--or),var(--or-vif));
  color:var(--encre);
  font-family:var(--sans);font-size:.72rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;
  transition:transform .25s,box-shadow .25s;
}
.btn-or:hover,
.site-nav a.btn-or:hover{
  color:var(--encre);
  transform:translateY(-1px);
  box-shadow:0 8px 24px rgba(201,169,98,.25);
}

/* Sur telephone, tout l'en-tete se centre : le logo sur sa propre ligne, les
   liens centres dessous. `space-between` plaquait les liens contre les deux
   bords en creusant un vide au milieu — d'autant plus visible depuis que le
   menu est passe a six entrees (18/09/2026). */
@media (max-width:640px){
  .site-header{justify-content:center;text-align:center;gap:.8rem}
  .site-brand{flex:1 0 100%;justify-content:center}
  .site-nav{flex:1 0 100%;justify-content:center;gap:.55rem 1.1rem}
}

/* ---------- PIED DE PAGE ---------- */
/* Classes préfixées `site-` : les pages définissent déjà `footer .logo`,
   `.note`, `.fnote`… — les noms distincts évitent toute collision. */
.site-footer{
  background:var(--encre);
  border-block-start:1px solid var(--line);
  padding:2.8rem clamp(1rem,4vw,2.5rem) 2.4rem;
  font-family:var(--sans);font-size:.84rem;line-height:1.65;
  color:var(--muted);text-align:start;
}
.site-footer-inner{
  max-width:1080px;margin-inline:auto;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
  gap:2rem;
}
.site-footer h2{
  font-family:var(--serif);font-size:1.05rem;font-weight:600;
  color:var(--creme);letter-spacing:.02em;
  margin-block-end:.6rem;
}
.site-footer a{color:var(--or);text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.site-footer ul{list-style:none;display:grid;gap:.35rem}
.site-footer-contact{margin-block-start:.7rem}
.site-footer-sources{
  max-width:1080px;margin:2.2rem auto 0;
  padding-block-start:1.2rem;
  border-block-start:1px solid rgba(201,169,98,.14);
  text-align:center;font-size:.78rem;
}

/* ---------- GABARIT DE LECTURE CLAIR ---------- */
/* Sombre a l'entree, clair a la lecture : les episodes font 24 000 a
   74 000 caracteres, et l'or sur noir est eprouvant sur cette longueur.
   Le bloc se lit comme une feuille posee sur le fond sombre. */
.lecture{
  background:var(--creme);
  color:var(--encre);
  font-family:var(--serif);
  font-size:1.08rem;
  line-height:1.78;
  /* la mesure qui decide qu'on finit un texte de 70 000 signes */
  max-width:65ch;
  margin-inline:auto;
  padding:clamp(2.2rem,6vw,3.6rem) clamp(1.35rem,5vw,3rem);
  border-radius:4px;
  box-shadow:0 30px 90px rgba(0,0,0,.6);
}
.lecture p,
.lecture li{color:var(--encre)}
.lecture p{margin-block-start:1.15rem}
.lecture i,
.lecture em{color:inherit;font-style:italic}
.lecture b,
.lecture strong{color:inherit;font-weight:600}
.lecture h3,
.lecture h4{
  font-family:var(--serif);font-weight:600;
  color:#7a5f1f;                       /* l'or ne tient pas sur creme : on descend */
  line-height:1.2;
  margin-block:2.6rem 1rem;
  padding-block-start:1.4rem;
  border-block-start:1px solid rgba(13,11,7,.13);
}
.lecture h3:first-of-type{border-block-start:0;padding-block-start:0;margin-block-start:.4rem}
.lecture ol,.lecture ul{margin-block-start:1.15rem;padding-inline-start:1.5rem}
.lecture li{margin-block-start:1.15rem}
.lecture li::marker{color:#7a5f1f;font-weight:600}
.lecture blockquote{
  font-style:italic;
  border-inline-start:2px solid #b89a54;
  padding-inline-start:1.2rem;
  margin-block-start:1.3rem;
  color:#3b2f18;
}
.lecture a{color:#7a5f1f;text-decoration:underline;text-underline-offset:.2em}

/* Versets et hadiths : detaches, jamais noyes dans le paragraphe francais.
   Scope sur .lecture a dessein : sans lui, `.lecture p` (0,1,1) bat `.lecture-ar`
   (0,1,0) et l'arabe repasse en noir. Constate le 18/09/2026, 1re utilisation. */
.lecture .lecture-ar{
  font-family:var(--ar);
  direction:rtl;
  font-size:1.35em;
  line-height:2.1;
  margin-block:1.5em;
  color:#5c4715;
  text-align:center;
}

/* Les sources sont le meilleur signal d'institution disponible :
   elles doivent etre visibles, pas discretes. */
.sources{
  font-family:var(--sans);
  font-size:.86rem;
  color:#5a5140;
  border-block-start:1px solid rgba(13,11,7,.18);
  margin-block-start:2.8rem;
  padding-block-start:1.2rem;
}
.lecture .sources h3{
  font-family:var(--sans);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  color:#7a5f1f;border:0;padding:0;margin:0 0 .6rem;
}
.lecture .sources p{color:#5a5140;font-family:var(--sans);font-size:.86rem;margin-block-start:.45rem}

@media (prefers-reduced-motion:reduce){
  .btn-or,.site-nav a,.site-brand{transition:none}
}