/* ===== Dossier de l'Islam — Feuille de style commune ===== */
@import url('https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400&family=Marcellus&family=Jost:wght@300;400;500;600&display=swap');

:root {
  --vert-profond: #0d3b2e;
  --vert-foret: #1a5c45;
  --vert-clair: #2d7a5f;
  --or: #c9a04e;
  --or-clair: #e3c987;
  --creme: #f7f3e8;
  --creme-fonce: #ece4cf;
  --texte: #243029;
  --texte-doux: #4a5750;
  --blanc: #ffffff;
  --ombre: 0 18px 45px -22px rgba(13, 59, 46, .45);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Jost', sans-serif;
  color: var(--texte);
  background: var(--creme);
  line-height: 1.7;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display { font-family: 'Marcellus', serif; font-weight: 400; }

a { color: inherit; text-decoration: none; }

/* ===== Bandeau supérieur ===== */
.topbar {
  background: var(--vert-profond);
  color: var(--or-clair);
  font-size: .82rem;
  letter-spacing: .04em;
}
.topbar .wrap {
  max-width: 1180px; margin: 0 auto; padding: .55rem 2rem;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .4rem;
}
.topbar .arabe { font-family: 'Amiri', serif; font-size: 1rem; }

/* ===== Navigation ===== */
.nav {
  background: var(--blanc);
  border-bottom: 1px solid var(--creme-fonce);
  position: sticky; top: 0; z-index: 50;
}
.nav .wrap {
  max-width: 1180px; margin: 0 auto; padding: 1rem 2rem;
  display: flex; align-items: center; justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: .85rem; }
.brand .crest {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--vert-profond); color: var(--or-clair);
  display: grid; place-items: center;
  font-family: 'Amiri', serif; font-size: 1.4rem;
  border: 2px solid var(--or);
}
.brand .name { font-family: 'Marcellus', serif; font-size: 1.32rem; color: var(--vert-profond); line-height: 1.1; }
.brand .name small { display: block; font-family: 'Jost', sans-serif; font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--or); }

.menu { display: flex; gap: 2rem; list-style: none; font-size: .92rem; letter-spacing: .03em; }
.menu a { padding-bottom: 4px; border-bottom: 2px solid transparent; transition: .25s; }
.menu a:hover, .menu a.actif { color: var(--vert-foret); border-color: var(--or); }

.burger { display: none; background: none; border: 0; cursor: pointer; flex-direction: column; gap: 5px; }
.burger span { width: 26px; height: 2px; background: var(--vert-profond); }

/* ===== Sections génériques ===== */
.section { max-width: 1180px; margin: 0 auto; padding: 5rem 2rem; }
.eyebrow {
  display: inline-block; font-size: .72rem; letter-spacing: .28em;
  text-transform: uppercase; color: var(--or);
  border-bottom: 1px solid var(--or); padding-bottom: .35rem; margin-bottom: 1.2rem;
}
.section h2 { font-size: 2.3rem; color: var(--vert-profond); line-height: 1.2; }

/* ===== Placeholder image ===== */
.placeholder {
  background:
    repeating-linear-gradient(45deg, var(--creme-fonce) 0 12px, #e5dcc4 12px 24px);
  border: 1px dashed var(--or);
  display: grid; place-items: center; text-align: center;
  color: var(--texte-doux); font-size: .82rem; letter-spacing: .04em;
  min-height: 220px; padding: 1.5rem;
}
.placeholder span { display: block; }
.placeholder .ico { font-size: 1.8rem; color: var(--or); margin-bottom: .4rem; }

/* ===== Boutons ===== */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--or); color: var(--vert-profond);
  padding: .85rem 1.8rem; border-radius: 2px; border: 0; cursor: pointer;
  font-family: 'Jost', sans-serif; font-weight: 500; font-size: .92rem;
  letter-spacing: .05em; transition: .25s;
}
.btn:hover { background: var(--vert-profond); color: var(--or-clair); }
.btn.ghost { background: transparent; border: 1.5px solid var(--vert-profond); color: var(--vert-profond); }
.btn.ghost:hover { background: var(--vert-profond); color: var(--creme); }
.btn.wa { background: #1f8a4c; color: #fff; }
.btn.wa:hover { background: #166637; }

/* ===== Pied de page ===== */
footer {
  background: var(--vert-profond); color: var(--creme-fonce);
  margin-top: 4rem;
}
footer .wrap {
  max-width: 1180px; margin: 0 auto; padding: 3.5rem 2rem 1.5rem;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem;
}
footer h4 { font-family: 'Marcellus', serif; color: var(--or-clair); margin-bottom: 1rem; font-size: 1.05rem; }
footer a:hover { color: var(--or-clair); }
footer .col p, footer .col li { font-size: .9rem; margin-bottom: .5rem; list-style: none; }
footer .verset { font-family: 'Amiri', serif; font-style: italic; color: var(--or-clair); }
.copyright {
  border-top: 1px solid rgba(227,201,135,.2);
  text-align: center; padding: 1.3rem 2rem; font-size: .8rem; color: #8ba99a;
}

/* ===== Animations ===== */
.reveal { opacity: 0; transform: translateY(24px); transition: .8s ease; }
.reveal.vu { opacity: 1; transform: none; }

/* ===== Responsive ===== */
@media (max-width: 860px) {
  .burger { display: flex; }
  .menu {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--blanc); flex-direction: column; gap: 0;
    padding: .5rem 2rem 1.5rem; box-shadow: var(--ombre);
    display: none;
  }
  .menu.ouvert { display: flex; }
  .menu li { padding: .7rem 0; border-bottom: 1px solid var(--creme-fonce); }
  .section h2 { font-size: 1.8rem; }
  footer .wrap { grid-template-columns: 1fr; gap: 1.8rem; }
  .section { padding: 3.5rem 1.4rem; }
}