/* ============================================================
   PFM Lyon — page « Tradition prophétique »
   Source Figma : frame 22:19191 (1440 x 5317)
   ============================================================ */

/* Le glyphe ﷺ (ligature arabe) utilise une police de repli aux métriques hors
   normes qui gonfle la boîte de ligne (+13px) malgré le line-height du parent. */
[lang="ar"] { line-height: 1; }

/* ================= Hero ================= */
.tp-hero {
  height: 401px;
  display: flex;
  align-items: center;
}
.tp-hero__veil {
  /* dégradé gauche→droite propre à ce hero (texte à gauche, image visible à
     droite) : différent de --g-hero-veil (vertical), absent des tokens. */
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.77) 0%, rgba(0, 0, 0, 0.2) 100%);
}
.tp-hero__col {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 713px;
}
.tp-hero__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tp-hero__eyebrow.eyebrow { color: var(--c-white); }
.tp-hero__title {
  font: 700 46px/59.8px var(--f-title); /* TODO token : taille hero propre à cette page (≠ --t-h1) */
  color: var(--c-white);
}
.tp-hero__lead { font: var(--t-body); color: var(--c-white); }

/* Variante eyebrow : un seul point, avant le libellé (pas de point après) */
.eyebrow--single::after { display: none; }

/* Correctif : `.section-head p` (components.css) est plus spécifique que `.eyebrow`
   seul et écrasait sa police (16/18.8, 700) par celle du corps de texte (16/25.6, 400)
   quand l'eyebrow est un <p> dans un .section-head. On restaure la police d'origine. */
.section-head .eyebrow {
  font: 700 16px/18.8px var(--f-body);
  letter-spacing: 0.32px;
  line-height: 11px; /* boîte resserrée au Figma (texte non tronqué, juste la ligne) */
}

/* ================= Accès rapide (cartes d'ancrage) ================= */
.tp-quicknav {
  background: var(--c-cream);
  padding-block: 56px;
  border-radius: 0 0 50px 50px;
}
.tp-quicknav__row {
  display: flex;
  gap: 8px;
}
.tp-quicknav__card {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
  min-height: 170px;
  transition: transform 0.2s;
}
/* La hauteur Figma (170px, desktop) laisse un vide une fois le contenu resserré */
@media (max-width: 1200px) {
  .tp-quicknav__card { min-height: 0; }
}
.tp-quicknav__card:hover { transform: translateY(-3px); }
.tp-quicknav__card--dark {
  background: var(--c-ink);
  border: 1.5px solid #f1b542; /* TODO token : filet or spécifique à cette carte */
  border-radius: var(--r-card) 0 0 var(--r-card);
}
.tp-quicknav__card--light {
  background: var(--c-white);
  border: 0.5px solid #f1ede4; /* TODO token */
  border-radius: 0 var(--r-card) var(--r-card) 0;
}
.tp-quicknav__icon {
  flex: none;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px; /* TODO token : rayon 11px, absent de tokens.css */
}
.tp-quicknav__icon--light { background: var(--c-white); }
.tp-quicknav__icon--dark { background: var(--c-primary); }
.tp-quicknav__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tp-quicknav__title { font: 700 18px/23.4px var(--f-title); } /* TODO token */
.tp-quicknav__desc { font: 500 14px/21px var(--f-body); }
.tp-quicknav__card--dark .tp-quicknav__title,
.tp-quicknav__card--dark .tp-quicknav__desc { color: var(--c-white); }
.tp-quicknav__card--light .tp-quicknav__title { color: var(--c-title); }
.tp-quicknav__card--light .tp-quicknav__desc { color: var(--c-body); }

/* ================= Conteneur large des sections (1314px) ================= */
.tp-wrap {
  max-width: 1314px;
  margin: 80px auto 64px; /* 80 après le hero (Frame2147232101 gap80), 64 avant le footer (gap64) */
  padding-inline: 24px;
  display: flex;
  flex-direction: column;
  gap: 64px;
}
@media (min-width: 1362px) { .tp-wrap { padding-inline: 0; } }

.tp-card {
  position: relative;
  overflow: hidden;
  background: #f9f9f9; /* TODO token : gris clair des cartes, absent de tokens.css */
  border-radius: 60px;
  padding: 56px;
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.tp-ornament {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: auto;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}
.tp-card > *:not(.tp-ornament) { position: relative; z-index: 1; }

/* ================= Section « Derniers instants » : intro + image ================= */
.tp-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}
.tp-intro__text {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 570px;
}
.tp-intro__lead { font: 400 18px/28.8px var(--f-body); color: var(--c-body); } /* TODO token */
.tp-intro__figure {
  flex: none;
  width: 508px;
  height: 359px; /* cadre Figma (image 341 + décroché décoratif ≈18px, non reproduit) */
}
.tp-intro__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-img);
}

/* Regroupe sous-cartes + hadith (gap 64, distinct du gap 56 entre l'intro et ce bloc) */
.tp-instants-body {
  display: flex;
  flex-direction: column;
  gap: 64px;
}

/* Sous-cartes (attestation de foi / douceur) */
.tp-subcards {
  display: flex;
  gap: 24px;
}
.tp-subcard {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  background: var(--c-white);
  border-radius: var(--r-card);
  padding: 18px;
}
.tp-subcard__icon {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-primary);
  border-radius: 15px; /* TODO token : rayon 15px, absent de tokens.css */
}
.tp-subcard__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tp-subcard__body h3 { font: var(--t-h5); color: var(--c-title); }
.tp-subcard__body p { font: var(--t-body-24); color: var(--c-body); }

/* Hadith de la Chahada */
.tp-hadith {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 767px;
}
.tp-hadith__intro { font: 600 16px/25.6px var(--f-body); color: var(--c-body); }
.tp-hadith__box {
  display: flex;
  flex-direction: column;
  padding: 24px 24px 24px 48px;
  margin: 0;
  background: #fcfaf2; /* TODO token */
  border: 0.75px solid #f4edd1; /* TODO token */
  border-left: 2.5px solid var(--c-primary);
  border-radius: var(--r-img);
}
.tp-hadith__quote { font: 600 18px/30.6px var(--f-body); color: var(--c-ink); margin: 0 0 11px; }
.tp-hadith__ref { font: 500 16px/25.6px var(--f-body); font-style: normal; color: var(--c-primary); }
.tp-hadith__note { font: 400 18px/28.8px var(--f-body); color: var(--c-body); } /* TODO token */

/* ================= Section « Inhumation » : timeline ================= */
.tp-card--steps .section-head { max-width: 984px; margin-inline: auto; }
.tp-timeline {
  position: relative;
  max-width: 984px;
  margin-inline: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 40px;
  counter-reset: none;
}
.tp-timeline::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #dbdbdb; /* TODO token */
}
.tp-timeline__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tp-timeline__head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tp-timeline__num {
  position: relative;
  z-index: 1;
  flex: none;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-primary);
  color: var(--c-white);
  font: 900 16px/21.6px var(--f-title);
  border-radius: var(--r-pill);
}
.tp-timeline__head h3 { font: 700 18px/24.3px var(--f-title); color: var(--c-ink); } /* TODO token */
.tp-timeline__content {
  padding-left: 46px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tp-timeline__content > p { font: 400 16px/25.6px var(--f-body); color: #474749; } /* TODO token couleur */
.tp-timeline__quote {
  margin: 0;
  background: var(--c-white);
  border-radius: var(--r-img);
  padding: 16px;
}
.tp-timeline__quote p {
  margin: 0;
  padding-left: 24px;
  border-left: 2.5px solid var(--c-primary);
  font: 600 16px/27.2px var(--f-body);
  color: var(--c-ink);
}

.tp-checklist { display: flex; flex-direction: column; gap: 8px; }
.tp-checklist li {
  display: flex;
  align-items: center;
  gap: 8px;
  font: var(--t-small-600);
  color: var(--c-body);
}
.tp-checklist img { flex: none; }

.tp-callout {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 510px; /* colonne resserrée du Figma (texte en \n), fait porter le retour à la ligne au même endroit */
}
.tp-callout__label { margin: 0; font: 400 14px/22.4px var(--f-body); color: #474749; } /* TODO token */
.tp-callout ul { display: flex; flex-direction: column; gap: 0; }
.tp-callout li {
  position: relative;
  padding-left: 14px;
  font: 400 14px/22.4px var(--f-body); /* TODO token couleur */
  color: #474749;
}
.tp-callout li::before { content: "•"; position: absolute; left: 0; color: var(--c-primary); }
.tp-callout--plain { max-width: none; } /* liste pleine largeur (938px), pas de colonne resserrée */
.tp-callout--plain li { font-weight: 500; }

/* ================= Section contact ================= */
.tp-contact > .container {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.tp-contact .section-head { max-width: 895px; margin-inline: auto; }
.tp-contact__row {
  display: flex;
  gap: 32px;
  align-items: center;
}
.tp-contact__form-card {
  flex: 1;
  max-width: 772px;
  background: var(--c-cream);
  border-radius: var(--r-card-lg);
  padding: 32px;
}
.tp-contact__form {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.tp-contact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 24px; /* row-gap 32 (Frame2147231425) / column-gap 24 (Frame2147231421/1422) */
}
.tp-field { display: flex; flex-direction: column; gap: 10px; }
.tp-field label { font: var(--t-eyebrow); letter-spacing: 0; color: var(--c-ink); }
.tp-field__control {
  background: var(--c-white);
  border-radius: var(--r-pill);
  padding: 13px 17px; /* hauteur Figma 44px (le texte y est mesuré HUG, plus étroit que la line-height CSS) */
}
.tp-field__control input {
  display: block;
  width: 100%;
  border: 0;
  background: none;
  font: 400 14px/16.8px var(--f-body);
  color: var(--c-title);
}
.tp-field__control input::placeholder { color: var(--c-muted); }
.tp-field__control--textarea {
  height: 138px; /* hauteur fixe Figma (Frame2147231424, szV:FIXED) */
  border-radius: 22px;
  padding: 16px 16px 12px;
}
.tp-field__control--textarea textarea {
  display: block;
  width: 100%;
  height: 100%;
  resize: vertical;
  border: 0;
  background: none;
  font: 400 14px/16.8px var(--f-body);
  color: var(--c-title);
}
.tp-field__control--textarea textarea::placeholder { color: var(--c-muted); }
.tp-field--message { display: flex; flex-direction: column; gap: 10px; }

.tp-contact__submit {
  align-self: flex-end;
  padding-block: 11.5px; /* hauteur Figma 44px (le .btn partagé, 55px, est trop haut pour cette instance) */
}

.tp-contact__rule {
  display: block;
  width: 100%;
  height: 1px;
  background: #dacfb9; /* TODO token */
}
.tp-contact__strip {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0;
  font: 400 14px/21px var(--f-body);
  color: var(--c-ink);
}
.tp-contact__strip-item { display: flex; align-items: center; gap: 8px; }
.tp-contact__strip-sep { width: 1px; height: 21px; background: rgba(11, 25, 55, 0.15); }
.tp-contact__dot { width: 8px; height: 8px; border-radius: var(--r-input); background: var(--c-primary); flex: none; }

.tp-contact__photo {
  position: relative;
  flex: none;
  width: 396px;
  height: 596px;
  border-radius: var(--r-card-lg);
  overflow: hidden;
  display: flex;
  align-items: flex-start; /* badge ancré en haut (pad60 Figma), pas centré verticalement */
  justify-content: center;
  padding-top: 60px;
}
.tp-contact__photo > img {
  /* combinateur direct : ne doit viser QUE la photo de fond, pas l'image du
     badge calligraphie imbriqué plus bas (sinon son position:absolute la
     sort du flux et écrase la taille du badge, hug-content, à 40x40). */
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tp-contact__photo-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.1);
}
.tp-contact__badge {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.04);
  backdrop-filter: blur(7px);
  border-radius: var(--r-pill);
}
.tp-contact__badge img {
  border-radius: var(--r-box);
  box-shadow: 0 0 13px rgba(0, 0, 0, 0.62); /* TODO token */
}

/* ============================================================
   Responsive — media queries de page (1240, 1024, 820, 600, 480)
   ============================================================ */

@media (max-width: 1240px) {
  .tp-intro__figure { width: 420px; }
}

@media (max-width: 1024px) {
  .tp-hero { height: auto; padding-block: 48px; }
  .tp-hero__col { max-width: 100%; }

  .tp-quicknav__row { flex-direction: column; }
  .tp-quicknav__card--dark { border-radius: var(--r-card) var(--r-card) 0 0; }
  .tp-quicknav__card--light { border-radius: 0 0 var(--r-card) var(--r-card); }

  .tp-intro { flex-direction: column; align-items: stretch; }
  .tp-intro__text { max-width: 100%; }
  .tp-intro__figure { width: 100%; }
  .tp-intro__figure img { height: 300px; }

  .tp-subcards { flex-direction: column; }

  .tp-contact__row { flex-direction: column; }
  .tp-contact__form-card { max-width: 100%; width: 100%; }
  .tp-contact__photo { width: 100%; height: 360px; }
}

@media (max-width: 820px) {
  .tp-card { padding: 32px 24px; gap: 40px; border-radius: 40px; }
  .tp-wrap { gap: 40px; margin: 56px auto; }

  .tp-hero__title { font-size: 34px; line-height: 44px; }

  .tp-timeline__head h3 { font-size: 17px; line-height: 22.5px; }
  .tp-timeline__content { padding-left: 0; }
  .tp-timeline::before { display: none; }

  .tp-contact__grid { grid-template-columns: 1fr; }
  .tp-contact__submit { align-self: stretch; justify-content: center; }
  .tp-contact__strip { flex-direction: column; align-items: flex-start; gap: 8px; }
  .tp-contact__strip-sep { display: none; }
}

@media (max-width: 600px) {
  .tp-hero__title { font-size: 28px; line-height: 36px; }
  .tp-hadith__box { padding: 20px; border-left: none; border-top: 2.5px solid var(--c-primary); }
  .tp-hadith__quote { font-size: 16px; line-height: 26px; }
}

@media (max-width: 480px) {
  .tp-quicknav__card { flex-direction: column; align-items: flex-start; min-height: 0; }
  .tp-card { padding: 24px 16px; border-radius: 28px; }
  .tp-contact__form-card { padding: 20px; }
  .tp-contact__grid { gap: 16px; }
}