/* ==========================================================================
   COMPONENTS — éléments réutilisés sur les 5 pages
   Convention BEM : .bloc, .bloc__element, .bloc--variante
   ========================================================================== */

/* --------------------------------------------------------------------------
   Barre d'urgence (52 px, fond #1B090C)
   -------------------------------------------------------------------------- */

.topbar {
  height: var(--h-topbar);
  background: var(--c-ink-topbar);
  color: var(--c-white);
  display: flex;
  align-items: center;
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
}

.topbar__group { display: flex; align-items: center; gap: var(--sp-24); }

.topbar__item {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: var(--lh-normal);
  white-space: nowrap;
}
.topbar__item img { flex: none; }

.topbar__rule {
  width: 1px;
  align-self: stretch;
  margin-block: 6px;
  background: var(--c-rule-light);
  flex: none;
}

.topbar__status {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
}

.topbar__dot {
  width: 8.22px;
  height: 8.22px;
  border-radius: var(--r-dot);
  background: var(--c-gold);
  flex: none;
  animation: pulse-dot 2.4s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   En-tête / navigation (110 px, ombre douce)
   -------------------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  height: var(--h-header);
  background: var(--c-white);
  box-shadow: var(--sh-header);
  display: flex;
  align-items: center;
}

.header.is-stuck { box-shadow: 0 8px 30px rgba(0, 0, 0, .10); }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-24);
}

.header__logo { display: block; flex: none; }
.header__logo img { width: 68px; height: 95px; }

.nav { display: flex; align-items: center; gap: var(--sp-32); }

.nav__link {
  position: relative;
  font-family: var(--ff-display);
  font-size: var(--fs-body); /* maquette : 14 px, jugé trop petit par le client (03/09/2026) → 16 px */
  color: var(--c-muted);
  padding-block: var(--sp-8);
  white-space: nowrap;
}
.nav__link:hover { color: var(--c-navy); }

/* Page courante : libellé en gras bordeaux + filet or de 28 px (maquette) */
.nav__link[aria-current="page"] {
  color: var(--c-navy);
  font-weight: 700;
}
.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 28px;
  height: 1.3px;
  background: var(--c-gold);
}

/* Bascule mobile — masquée au format bureau */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-chip);
  flex: none;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 22px; height: 2px;
  background: var(--c-navy);
  border-radius: 2px;
  transition: transform var(--t-base), opacity var(--t-fast);
}
.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ""; position: absolute; }
.nav-toggle__bars::before { transform: translateY(-7px); }
.nav-toggle__bars::after  { transform: translateY(7px); }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: rotate(-45deg); }

/* --------------------------------------------------------------------------
   Boutons — hauteur 44 px, capsule 38 px de rayon (maquette)
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-10);
  height: var(--h-btn);
  padding: 0 26px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: var(--lh-normal);
  text-align: center;
  white-space: nowrap;
  transition: transform var(--t-fast), box-shadow var(--t-fast),
              background-color var(--t-fast), color var(--t-fast);
}
.btn:hover  { transform: translateY(-2px); box-shadow: var(--sh-btn); }
.btn:active { transform: translateY(0); }
.btn img, .btn svg { flex: none; }

/* Framboise plein — action principale */
.btn--accent {
  background: var(--c-accent);
  color: var(--c-white);
  box-shadow: var(--sh-btn);
}
.btn--accent:hover { background: var(--c-navy-hover); }

/* Contour framboise sur fond clair */
.btn--outline {
  background: transparent;
  color: var(--c-accent);
  border: .75px solid var(--c-accent);
}
.btn--outline:hover { background: var(--c-accent); color: var(--c-white); }
.btn--outline:hover img { filter: brightness(0) invert(1); }

/* Blanc plein — sur fond photo ou bordeaux */
.btn--white {
  background: var(--c-white);
  color: var(--c-navy);
  box-shadow: var(--sh-btn);
}
.btn--white:hover { background: var(--c-cream); }

/* Contour blanc — sur fond sombre */
.btn--ghost {
  background: transparent;
  color: var(--c-white);
  border: .75px solid var(--c-white);
}
.btn--ghost:hover { background: var(--c-white); color: var(--c-navy); }
.btn--ghost:hover img { filter: none; }

.btn--block { width: 100%; }

.btn-group {
  display: flex;
  align-items: center;
  gap: var(--sp-24);
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Sur-titre (« eyebrow ») : pastille or + libellé
   -------------------------------------------------------------------------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.45;          /* Figma : interligne auto, et non le 1.6 du corps */
  letter-spacing: var(--ls-wide);
  color: var(--c-gold);
}
.eyebrow--alt { color: var(--c-gold-alt); }
.eyebrow--center { justify-content: center; }

.eyebrow::before,
.eyebrow--center::after {
  content: "";
  width: 7.2px; height: 7.2px;
  border-radius: var(--r-dot);
  background: currentColor;
  flex: none;
}

/* --------------------------------------------------------------------------
   En-tête de section (sur-titre + titre + chapô)
   -------------------------------------------------------------------------- */

.sec-head { display: flex; flex-direction: column; gap: var(--sp-16); }
.sec-head__top { display: flex; flex-direction: column; gap: var(--sp-8); }
.sec-head--center { align-items: center; text-align: center; }
.sec-head--center .sec-head__top { align-items: center; }
.sec-head__lead { color: var(--c-body); font-size: var(--fs-body); line-height: var(--lh-body); }

/* --------------------------------------------------------------------------
   Cartes « verre » du héros
   -------------------------------------------------------------------------- */

.glass {
  flex: 1 1 0;
  min-width: 0;
  padding: var(--sp-14);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-6);
  background: var(--c-glass-fill);
  border: .5px solid var(--c-glass-stroke);
  border-radius: var(--r-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  backdrop-filter: var(--blur-glass);
  color: var(--c-white);
}
.glass__title {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: var(--lh-normal);
}
.glass__text { font-size: var(--fs-xxs); line-height: var(--lh-normal); }

/* --------------------------------------------------------------------------
   Liste à puces « coche »
   -------------------------------------------------------------------------- */

.checklist { display: flex; flex-direction: column; gap: var(--sp-12); }
.checklist--16 { gap: var(--sp-16); }

.checklist__item {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: var(--lh-normal);
  color: var(--c-body);
}
.checklist--16 .checklist__item { font-size: var(--fs-body); }
.checklist__item img { flex: none; margin-top: 1px; }

/* --------------------------------------------------------------------------
   Carte de service (282 × 450, image de fond, angles alternés)
   Empilement en z-index positifs : image 0 → voile 1 → contenu 2.
   -------------------------------------------------------------------------- */

.svc {
  position: relative;
  isolation: isolate;
  flex: 1 1 0;
  min-width: 0;
  height: 450px;
  padding: var(--sp-20);
  display: flex;
  overflow: hidden;
  border-radius: var(--r-card) 0 var(--r-card) 0;
}
.svc:nth-child(even) { border-radius: 0 var(--r-card) 0 var(--r-card); }

.svc__media {
  position: absolute;
  inset: 0;
  z-index: var(--z-deco);
}
.svc__media img { width: 100%; height: 100%; object-fit: cover; }

.svc__veil {
  position: absolute;
  inset: 0;
  z-index: var(--z-veil);
  background: var(--g-card-47);
}
.svc:nth-child(2) .svc__veil { background: var(--g-card-53); }
.svc:nth-child(3) .svc__veil { background: var(--g-card-40); }
.svc:nth-child(4) .svc__veil { background: var(--g-card-40); }

.svc__body {
  position: relative;
  z-index: var(--z-content);
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  color: var(--c-white);
}

.svc__pin {
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-white);
  border-radius: var(--r-full);
  box-shadow: var(--sh-round);
  transition: transform var(--t-base);
}
.svc:hover .svc__pin { transform: rotate(45deg) scale(1.06); }

.svc__text { width: 100%; display: flex; flex-direction: column; gap: var(--sp-8); }
.svc__title { font-size: var(--fs-h5); line-height: var(--lh-title); color: var(--c-white); }
.svc__desc  { font-size: var(--fs-xs); font-weight: 500; line-height: var(--lh-snug); }

.svc:hover .svc__media img { transform: scale(1.05); }
.svc__media img { transition: transform var(--t-slow); }

/* --------------------------------------------------------------------------
   Étapes du parcours (282 × 180, badge or en surplomb)
   -------------------------------------------------------------------------- */

.steps { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-16); }

.step { position: relative; flex: 1 1 0; min-width: 0; padding-top: 17px; }

.step__card {
  min-height: 163px;
  padding: 40px var(--sp-16) var(--sp-24);
  background: var(--c-card);
  border-radius: var(--r-step);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-10);
  height: 100%;
}
.step__title { font-size: var(--fs-h6); line-height: var(--lh-title); text-align: center; }
.step__text  { font-size: var(--fs-xs); line-height: var(--lh-body); text-align: center; color: var(--c-body); }

.step__badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: var(--sp-12) var(--sp-24);
  background: var(--c-gold);
  border-radius: var(--r-round);
  color: var(--c-white);
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Cartes statistiques (angles alternés, la 2e en bordeaux plein)
   -------------------------------------------------------------------------- */

.stats { display: flex; align-items: stretch; gap: var(--sp-16); }

.stat {
  flex: 1 1 0;
  min-width: 0;
  padding: var(--sp-32);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-24);
  background: var(--c-white);
  border: .5px solid var(--c-gold-border);
  border-radius: var(--r-stat) 0 var(--r-stat) 0;
  text-align: center;
}
.stat--filled {
  background: var(--c-navy-mid);
  border-color: transparent;
  border-radius: 0 var(--r-stat) 0 var(--r-stat);
  color: var(--c-white);
}
.stat__icon { flex: none; }
.stat__body { display: flex; flex-direction: column; gap: var(--sp-14); }
.stat__title { font-size: var(--fs-h3); line-height: var(--lh-title); }
.stat--filled .stat__title { color: var(--c-white); }
.stat__text { font-size: var(--fs-xs); line-height: var(--lh-body); color: var(--c-body); }
.stat--filled .stat__text { color: var(--c-white); }

/* --------------------------------------------------------------------------
   Engagements (icône 64 × 70 + titre + texte)
   -------------------------------------------------------------------------- */

.pledge { display: flex; flex-direction: column; gap: var(--sp-16); }
.pledge__icon { width: 64px; height: 70px; flex: none; }
.pledge__body { display: flex; flex-direction: column; gap: var(--sp-8); }
.pledge__title { font-size: var(--fs-h4); line-height: var(--lh-title); }
.pledge__text  { font-size: var(--fs-xs); line-height: var(--lh-body); color: var(--c-body); }

/* --------------------------------------------------------------------------
   Formulaire
   -------------------------------------------------------------------------- */

/* Figma sépare le groupe de champs du bouton par 32 px, mais espace les
   rangées de champs de 24 px dans le bloc bordeaux et de 32 px dans le
   panneau de la page contact. D'où le groupe intermédiaire. */
.form { display: flex; flex-direction: column; gap: var(--sp-32); }
.form__fields { display: flex; flex-direction: column; gap: var(--sp-24); }
.contact__panel .form__fields { gap: var(--sp-32); }
.form__grid { display: flex; align-items: flex-start; gap: var(--sp-24); }
.form__col  { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-10); }

.form__label {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: var(--fs-xs);
  line-height: var(--lh-tight);
  color: var(--c-ink);
}
.form__label .req { color: var(--c-accent); }

.form__input,
.form__textarea {
  width: 100%;
  padding: 17px;
  background: var(--c-white);
  border: .5px solid var(--c-field-border);
  border-radius: var(--r-input);
  font-size: var(--fs-xs);
  line-height: var(--lh-tight);
  color: var(--c-ink);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
/* Mesuré au pixel sur la maquette : les champs de saisie font 44 px de haut,
   comme les boutons — et non 17 + interligne + 17. */
.form__input {
  height: var(--h-btn);
  padding-block: 0;
}
.form__textarea {
  height: 115px;
  padding: var(--sp-16) var(--sp-16) var(--sp-12);
  border-radius: var(--r-field);
  resize: vertical;
  line-height: var(--lh-body);
}
.form__input::placeholder,
.form__textarea::placeholder { color: var(--c-placeholder); }

.form__input:focus,
.form__textarea:focus {
  outline: none;
  border-color: var(--c-gold);
  box-shadow: 0 0 0 3px var(--c-gold-wash-strong);
}
.form__input[aria-invalid="true"],
.form__textarea[aria-invalid="true"] { border-color: var(--c-accent); }

.form__error {
  font-size: var(--fs-xxs);
  color: var(--c-accent);
  min-height: 0;
}
.form__error:empty { display: none; }

/* Champ-piège anti-robots — invisible et hors du parcours clavier */
.form__trap {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.form__status {
  padding: var(--sp-14) var(--sp-16);
  border-radius: var(--r-glass);
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
}
.form__status:empty { display: none; }
.form__status--ok  { background: var(--c-gold-wash-strong); color: var(--c-navy); }
.form__status--err { background: var(--c-navy-wash-10); color: var(--c-accent); }

/* --------------------------------------------------------------------------
   Blocs de citation (verset coranique / hadith)
   -------------------------------------------------------------------------- */

/* Le cadre Figma est un bloc FIXED de 1200 × 372 : la hauteur est portée par
   le conteneur, le contenu est calé à 102 px du haut comme dans la maquette
   (imbrication des gaps : 24 entre l'arabe et le groupe, puis 10, puis 8). */
.ayah {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: var(--w-container);
  height: 372px;
  margin-inline: auto;
}
.ayah__frame { position: absolute; inset: 0; z-index: var(--z-deco); width: 100%; height: 100%; }
.ayah__body {
  position: absolute;
  z-index: var(--z-content);
  top: 102px;
  left: 82px;
  right: 82px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
  text-align: center;
}
/* `align-self: stretch` reprend le réglage Figma : sans lui, le groupe se
   dimensionne sur son contenu et la largeur de 1010 px déborde en mobile. */
.ayah__group {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  gap: var(--sp-10);
}
.ayah__quote {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-8);
  width: 1010px;
  max-width: 100%;
}
.ayah__ar {
  font-family: var(--ff-arabic);
  font-size: var(--fs-quote);
  line-height: var(--lh-normal);
  color: var(--c-body);
  direction: rtl;
}
.ayah__fr {
  font-size: var(--fs-quote-fr);
  font-weight: 600;
  font-style: italic;
  line-height: var(--lh-quote);
  letter-spacing: var(--ls-wide);
  color: var(--c-body);
}
.ayah__rule { width: 2px; height: 19px; background: var(--c-divider); border-radius: var(--r-chip); flex: none; }
.ayah__src { font-size: var(--fs-body); font-weight: 700; line-height: var(--lh-title); color: var(--c-navy); }

.hadith {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--sp-32);
  padding: var(--sp-40) var(--sp-30);
  background: var(--c-gold-wash-strong);
  border-radius: var(--r-soft) 0 var(--r-soft) 0;
}
.hadith__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-24); }
.hadith__col--ar { align-items: flex-end; text-align: right; }
.hadith__icon {
  width: 43px; height: 43px;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-white);
  border-radius: var(--r-round);
  flex: none;
}
.hadith__text { display: flex; flex-direction: column; gap: 13px; }
.hadith__quote { font-size: var(--fs-body); font-weight: 500; font-style: italic; line-height: var(--lh-body); color: var(--c-ink); white-space: pre-line; }
.hadith__src   { font-size: var(--fs-xs); font-weight: 500; font-style: italic; line-height: var(--lh-body); color: var(--c-ink); }
.hadith__quote--ar { font-family: var(--ff-arabic); font-style: normal; font-size: var(--fs-h4); line-height: var(--lh-arabic); direction: rtl; }
.hadith__src--ar   { font-family: var(--ff-arabic); font-style: normal; font-size: var(--fs-body); direction: rtl; }
.hadith__rules { display: flex; flex-direction: column; gap: var(--sp-40); width: 1px; flex: none; }
.hadith__rules span { flex: 1; background: var(--c-gold-soft); border-radius: var(--r-round); }

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */

.footer {
  position: relative;
  isolation: isolate;
  background: var(--c-navy-footer);
  color: var(--c-white);
  overflow: hidden;
}
.footer__bg {
  position: absolute;
  inset: 0;
  z-index: var(--z-deco);
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Figma : contenu à 80 px du haut, 65 px sous le dernier bloc — l'appui
   n'est pas symétrique, le fond mesure 1440 × 627. */
.footer { min-height: 627px; }
.footer__inner {
  position: relative;
  z-index: var(--z-content);
  padding: 80px 0 65px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-72);
}
.footer__top { display: flex; gap: 76px; }
.footer__brand { width: 384px; flex: none; display: flex; flex-direction: column; gap: var(--sp-32); }
.footer__logo img { width: 221px; height: 100px; }
.footer__about { display: flex; flex-direction: column; gap: var(--sp-6); }
.footer__about-title { font-size: var(--fs-xs); font-weight: 600; line-height: var(--lh-body); }
.footer__about-text  { font-size: var(--fs-xs); line-height: var(--lh-body); }

.footer__cols { flex: 1; display: flex; justify-content: space-between; gap: var(--sp-32); }
.footer__col { display: flex; flex-direction: column; gap: var(--sp-24); }
.footer__title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: var(--fs-footer-h);
  line-height: 1;
  text-transform: uppercase;
  color: var(--c-white);
}
.footer__rule { width: 55.5px; height: 1.5px; background: var(--c-gold); border: 0; margin: 10px 0 0; }
.footer__list { display: flex; flex-direction: column; gap: var(--sp-12); }
.footer__list a {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: var(--lh-body);
}
.footer__list a:hover { color: var(--c-gold); }
.footer__list img { flex: none; }

.footer__contact { display: flex; flex-direction: column; gap: var(--sp-14); }
.footer__contact-item { display: flex; align-items: flex-start; gap: var(--sp-10); font-size: var(--fs-body); line-height: var(--lh-body); }
.footer__contact-item img { flex: none; margin-top: 7px; }
.footer__contact-item a:hover { color: var(--c-gold); }

.footer__legal { display: flex; flex-direction: column; align-items: center; gap: 30px; }
.footer__legal hr { width: 100%; height: 0; border: 0; border-top: .75px solid var(--c-rule-footer); margin: 0; }
.footer__bloctel { max-width: 1064px; font-size: var(--fs-sm); line-height: var(--lh-body); text-align: center; }
.footer__bloctel a { text-decoration: underline; text-underline-offset: 2px; }
.footer__copy {
  font-size: var(--fs-sm);
  line-height: 22.5px;
  letter-spacing: var(--ls-legal);
  text-align: center;
}
.footer__copy strong { font-weight: 600; text-transform: uppercase; }

/* --------------------------------------------------------------------------
   Bouton d'appel flottant (mobile) — la maquette mise sur l'appel immédiat
   -------------------------------------------------------------------------- */

.call-fab {
  display: none;
  position: fixed;
  right: var(--sp-16);
  bottom: var(--sp-16);
  z-index: var(--z-menu);
  align-items: center;
  gap: var(--sp-8);
  height: 52px;
  padding: 0 22px;
  background: var(--c-accent);
  color: var(--c-white);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .28);
}