/* ============================================================
   PFM Lyon — page Guide des familles (Figma 22:17509, frame 1440x8347)
   Sections : hero, accès rapide, étapes, documents, prévoir son
   inhumation / testament, rapatriement, patience, inhumation,
   formulaire de contact.
   ============================================================ */

/* ================= Hero (bandeau .page-hero) ================= */
.guide-hero { height: 401px; display: flex; align-items: center; }
.guide-hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* TODO token : dégradé horizontal spécifique à ce hero, absent de --g-hero-veil */
  background: linear-gradient(90deg, rgba(0,0,0,0.77) 0%, rgba(0,0,0,0.2) 100%);
}
.guide-hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 56px;
}
.guide-hero__col { display: flex; flex-direction: column; gap: 16px; max-width: 620px; }
.guide-hero__tag { color: var(--c-white); }
.guide-hero__tag-dot { width: 7px; height: 7px; border-radius: var(--r-input); background: var(--c-primary); flex: none; }
.guide-hero__title {
  /* TODO token : titre hero 46/59.8 Cinzel, proche de --t-h1 (50/67.4) sans y correspondre */
  font: 700 46px/59.8px var(--f-title);
  color: var(--c-white);
}
.guide-hero__text { font: var(--t-body); color: var(--c-white); }
.guide-hero__actions { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 8px; }

.guide-hero__card {
  flex: none;
  width: 414px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,0.85);
  border-radius: 0 22px 0 22px;
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}
.guide-hero__list { display: flex; flex-direction: column; gap: 12px; }
.guide-hero__list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font: var(--t-label-15);
  color: var(--c-body);
}
.guide-hero__list img { flex: none; margin-top: 3px; }

/* ================= Accès rapide (quicknav) ================= */
.guide-quicknav { background: var(--c-cream); border-radius: 0 0 50px 50px; padding-block: 56px; }
.guide-quicknav__grid { display: flex; gap: 8px; align-items: stretch; height: 170px; }
.guide-quicknav__card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  background: var(--c-white);
  border: 0.5px solid #F1EDE4; /* TODO token : filet non présent dans tokens.css */
  transition: transform .2s, box-shadow .2s;
}
.guide-quicknav__card:first-child { border-radius: 24px 0 0 24px; }
.guide-quicknav__card:last-child { border-radius: 0 24px 24px 0; }
.guide-quicknav__card:hover { transform: translateY(-4px); box-shadow: var(--sh-card); }
.guide-quicknav__card--active {
  background: var(--c-ink);
  border-color: var(--c-ink);
}
.guide-quicknav__icon {
  width: 32px; height: 32px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--c-primary);
}
.guide-quicknav__card--active .guide-quicknav__icon { background: var(--c-white); }
.guide-quicknav__body { display: flex; flex-direction: column; gap: 4px; }
.guide-quicknav__title {
  /* TODO token : Cinzel 700 17/22.1, proche de --t-h6 (17/25.5) sans correspondre exactement */
  font: 700 17px/22.1px var(--f-title);
  color: var(--c-title);
}
.guide-quicknav__card--active .guide-quicknav__title { color: var(--c-white); }
.guide-quicknav__desc { font: var(--t-small); color: var(--c-body); }
.guide-quicknav__card--active .guide-quicknav__desc { color: var(--c-white); }

/* ================= Conteneur des sections (cartes 1312px) ================= */
.guide-sections {
  max-width: 1312px;
  margin-inline: auto;
  padding: 80px 24px 64px;
  display: flex;
  flex-direction: column;
  gap: 64px;
}
@media (min-width: 1360px) { .guide-sections { padding-inline: 0; } }

.guide-card {
  background: #F9F9F9; /* TODO token : gris de fond de carte, proche de --c-grey-bg (#FAFAFA) sans correspondre */
  border-radius: 60px;
  padding: 56px;
  display: flex;
  flex-direction: column;
  gap: 56px;
}

/* Correctif de spécificité : `.section-head p` (components.css) écrase la police de
   `.eyebrow` quand l'eyebrow est un <p> imbriqué dans .section-head. On restaure ici
   la police eyebrow avec une spécificité supérieure, sans toucher au fichier partagé. */
.section-head .eyebrow {
  font: 700 16px/18.8px var(--f-body);
  letter-spacing: 0.32px;
  color: var(--c-primary);
}

/* Bloc titre + texte réutilisé dans plusieurs sous-sections */
.guide-prevoir__block { display: flex; flex-direction: column; gap: 8px; }
.guide-prevoir__block h3 {
  /* TODO token : Raleway 700 18/23.4, absent des tokens */
  font: 700 18px/23.4px var(--f-body);
  color: #102551; /* TODO token : bleu de sous-titre proche de --c-ink sans correspondre */
}
.guide-prevoir__block p { font: var(--t-body); color: var(--c-body); }

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

/* Boutons — variante contour marine (sur fond clair) */
.btn--outline-ink {
  background: transparent;
  color: var(--c-ink);
  border: 1px solid var(--c-ink);
}
.btn--outline-ink:hover { background: var(--c-ink-02); }

/* Photo avec bloc crème décoratif en arrière-plan */
.guide-photo-card { position: relative; flex: none; width: 477px; margin-bottom: 15px; }
.guide-photo-card::before {
  content: "";
  position: absolute;
  inset: 16px -16px -16px 16px;
  background: #F4E1BC; /* TODO token : crème doré absent des tokens */
  border-radius: 0 32px 0 32px;
  z-index: 0;
}
.guide-photo-card img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  border-radius: 0 32px 0 32px;
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.2);
}
.guide-photo-card--corners::before { display: none; }
.guide-photo-card--corners { width: 476px; margin-bottom: 18px; }
.guide-photo-card--corners::after {
  content: "";
  position: absolute;
  top: -16px; left: -16px;
  width: 40px; height: 40px;
  background: #F4E1BC;
  border-radius: 12px;
  z-index: -1;
}
.guide-photo-card--corners img { position: relative; border-radius: 30px; }

/* ================= 1. Premières démarches essentielles ================= */
.guide-etapes .section-head { gap: 24px; }
.guide-etapes__top { display: flex; align-items: center; gap: 48px; }
.guide-etapes__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.guide-etapes__img { flex: none; width: 576px; height: 447px; object-fit: cover; border-radius: 30px 0 30px 0; }
.guide-etapes__actions { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 16px; }

.guide-etapes .guide-steps {
  display: flex;
  align-items: stretch;
  gap: 24px;
  padding-top: 20px;
  position: relative;
}
.guide-steps__item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px;
  background: var(--c-white);
  border-radius: var(--r-card);
}
.guide-steps__item h3 { margin-top: 18px; }
.guide-steps__icon {
  width: 46px; height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  background: var(--c-primary);
}
.guide-steps__item h3 {
  /* TODO token : Cinzel 700 18/23.4, proche de --t-h6 (17/25.5) sans correspondre */
  font: 700 18px/23.4px var(--f-title);
  color: var(--c-title);
}
.guide-steps__item p { font: var(--t-small-lh22); color: var(--c-body); }

/* ================= 2. Documents et formalités ================= */
.guide-documents__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; }
.guide-documents__intro {
  font: var(--t-small-lh22);
  color: var(--c-body);
  max-width: 401px;
  flex: none;
}
.guide-documents__grid { display: flex; gap: 24px; align-items: stretch; margin-top: -17px; }

.guide-cta-photo {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  border-radius: var(--r-box);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.guide-cta-photo > img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.guide-cta-photo__veil {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.75) 100%);
}
.guide-cta-photo__content {
  position: relative;
  z-index: 2;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.guide-cta-photo__content h3 {
  /* TODO token : Cinzel 700 28/36.4, absent des tokens */
  font: 700 28px/36.4px var(--f-title);
  color: var(--c-white);
}
.guide-cta-photo__content p { font: var(--t-small-lh22); color: var(--c-white); }

.guide-doc-cards {
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.guide-doc-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  background: var(--c-white);
  border-radius: var(--r-img);
}
.guide-doc-card__icon {
  width: 54px; height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: var(--c-ink);
  border: 1px solid var(--c-ink);
}
.guide-doc-card h3 {
  /* TODO token : Cinzel 700 20/26, proche police de --t-h5 mais famille Raleway attendue ici */
  font: 700 20px/26px var(--f-title);
  color: var(--c-title);
}
.guide-doc-card p { font: var(--t-small-lh22); color: var(--c-body); }

/* ================= 3. Prévoir son inhumation / Testament ================= */
.guide-prevoir__row { display: flex; align-items: center; gap: 56px; }
.guide-prevoir__row--reverse { flex-direction: row-reverse; margin-top: 17px; }
.guide-prevoir__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.guide-prevoir__col .section-head { margin-bottom: 8px; }
.guide-prevoir__cta { margin-top: 16px; }

.guide-quran-quote {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 20px 16px;
  background: #FDFBF5; /* TODO token : blanc cassé absent des tokens */
  border-radius: var(--r-img);
  border-left: 2.5px solid var(--c-primary);
}
.guide-quran-quote p {
  font: 600 16px/25.6px var(--f-body); /* TODO token : Raleway 600 16/25.6 absent des tokens */
  color: var(--c-ink);
}
.guide-quran-quote cite {
  display: block;
  font: 500 16px/25.6px var(--f-body);
  font-style: normal;
  color: var(--c-primary);
}
.guide-prevoir__cta { align-self: flex-start; }
.guide-prevoir__cta .ic-arrow path { fill: var(--c-white); }

/* ================= 4. Rapatriement international ================= */
.guide-rapatriement__row { display: flex; align-items: center; gap: 48px; }
.guide-rapatriement__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.guide-rapatriement__col > .guide-checklist { margin-top: -6px; }
.guide-rapatriement__col > .guide-etapes__actions { margin-top: 8px; }

/* ================= 5. La patience ================= */
.guide-patience__row { display: flex; align-items: center; gap: 48px; }
.guide-patience__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.guide-patience__col > .guide-etapes__actions { margin-top: 8px; }
.guide-patience__photo {
  position: relative;
  flex: none;
  width: 576px;
  height: 388px;
  border-radius: var(--r-card-lg);
  overflow: hidden;
}
.guide-patience__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.guide-patience__veil {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.87) 100%);
}
.guide-patience__badge {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  width: 340px;
  padding: 24px 40px;
  border-radius: var(--r-img);
  display: flex;
  align-items: center;
  justify-content: center;
}
.guide-patience__badge img { width: 260px; height: auto; display: block; }

.guide-quotes { display: flex; gap: 32px; }
.guide-quote-card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  background: var(--c-cream);
  border-radius: var(--r-box);
  overflow: hidden;
}
.guide-quote-card--dark { background: var(--c-white); text-align: right; }
.guide-quote-card__icon {
  width: 43px; height: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: var(--c-white);
  align-self: flex-start;
}
.guide-quote-card--dark .guide-quote-card__icon { background: var(--c-ink); align-self: flex-end; }
.guide-quote-card p { font: var(--t-body-med); color: var(--c-title); }
.guide-quote-card--dark p { font: var(--t-arabic-20); color: var(--c-body); }
.guide-quote-card cite {
  display: block;
  margin-top: -11px;
  font: var(--t-small-med);
  font-style: normal;
  color: var(--c-title);
}
.guide-quote-card--dark cite { font: var(--t-arabic-16); color: var(--c-body); }

.guide-invocation {
  position: relative;
  padding: 40px;
  border-radius: 50px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.guide-invocation__bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.guide-invocation__veil { position: absolute; inset: 0; z-index: 1; background: rgba(0,0,0,0.75); }
.guide-invocation__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  text-align: center;
  max-width: 1120px;
}
.guide-invocation__content h3 {
  /* TODO token : Cinzel 700 26/33.8, absent des tokens */
  font: 700 26px/33.8px var(--f-title);
  color: var(--c-white);
}
.guide-invocation__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 57px;
}
.guide-invocation__translit {
  /* TODO token : Raleway 600 20/33 ls0.4, absent des tokens */
  font: 600 20px/33px var(--f-body);
  letter-spacing: 0.4px;
  color: var(--c-white);
  text-align: left;
  max-width: 493px;
}
.guide-invocation__sep { width: 2px; height: 46px; background: rgba(255,255,255,0.65); flex: none; }
.guide-invocation__arabic { font: var(--t-arabic-16); font-size: 24px; line-height: 38.4px; color: var(--c-white); max-width: 493px; }
.guide-invocation__translation {
  /* TODO token : Raleway 600 21/34.6 ls0.42, absent des tokens */
  font: 600 21px/34.6px var(--f-body);
  letter-spacing: 0.42px;
  color: var(--c-white);
}

/* ================= 6. Le déroulement d’une inhumation ================= */
.guide-inhumation__row { display: flex; align-items: stretch; gap: 40px; }
.guide-inhumation__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.guide-inhumation__list { display: flex; flex-direction: column; gap: 24px; }
.guide-inhumation__list li { display: flex; flex-direction: column; gap: 10px; }
.guide-inhumation__list h3 {
  /* TODO token : Raleway 700 20/26, absent des tokens */
  font: 700 20px/26px var(--f-body);
  color: #102551; /* TODO token : voir .guide-prevoir__block h3 */
}
.guide-inhumation__list p { font: var(--t-body); color: var(--c-body); }
.guide-inhumation__img { flex: none; width: 446px; height: 897px; object-fit: cover; border-radius: 85px 0 85px 0; }

/* ================= 7. Formulaire de contact ================= */
.guide-contact__head { max-width: 895px; margin-inline: auto; margin-bottom: 41px; }

.contact-form__row { display: flex; align-items: stretch; gap: 32px; }
.contact-form__card {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 32px;
  background: var(--c-cream);
  border-radius: var(--r-card-lg);
}
.contact-form__fields { display: flex; flex-direction: column; gap: 32px; }
.contact-form__grid { display: flex; gap: 24px; }
.field { flex: 1 1 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.field__label { font: var(--t-eyebrow); color: var(--c-ink); }
.field__control { background: var(--c-white); border-radius: var(--r-pill); padding: 13px 17px; }
.field--message .field__control { border-radius: 22px; padding: 16px 16px 12px; } /* TODO token : rayon 22px absent */
.field__input {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: 400 14px/16.8px var(--f-body); /* TODO token : absent des tokens */
  color: var(--c-ink);
}
.field__input::placeholder { color: var(--c-muted); }
.field__textarea { min-height: 110px; resize: vertical; line-height: 21px; }

.contact-form__actions { display: flex; justify-content: flex-end; }
.contact-form__rule { display: block; height: 1px; width: 100%; background: #DACFB9; } /* TODO token : filet absent */
.contact-form__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.contact-form__meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font: var(--t-small);
  color: var(--c-ink);
  padding-right: 12px;
  border-right: 1px solid rgba(11,25,55,0.15);
}
.contact-form__meta-item:last-child { border-right: 0; padding-right: 0; }
.contact-form__meta-item img { flex: none; }
.contact-form__meta-item a:hover { color: var(--c-primary); }
.contact-form__meta-dot { width: 8px; height: 8px; border-radius: var(--r-input); background: var(--c-primary); flex: none; }

.contact-form__media {
  position: relative;
  flex: none;
  width: 396px;
  height: 596px;
  margin: 0;
  border-radius: var(--r-card-lg);
  overflow: hidden;
}
.contact-form__media img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.contact-form__media-veil { position: absolute; inset: 0; z-index: 1; background: rgba(0,0,0,0.1); }
.contact-form__badge {
  position: absolute;
  z-index: 2;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: 260px;
  height: 117px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border-radius: var(--r-pill);
  background: rgba(0,0,0,0.04);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.contact-form__badge img {
  position: static;
  inset: auto;
  z-index: auto;
  width: 220px;
  height: 77px;
  object-fit: fill;
  filter: drop-shadow(0 0 13px rgba(0,0,0,0.62));
}

/* ================================================================
   Responsive — points de rupture propres à cette page
   ================================================================ */
@media (max-width: 1240px) {
  .guide-hero__inner { gap: 32px; }
  .guide-hero__card { width: 360px; }
  .guide-documents__grid,
  .guide-etapes__top,
  .guide-prevoir__row,
  .guide-rapatriement__row,
  .guide-patience__row,
  .guide-inhumation__row { gap: 32px; }
  .guide-steps { gap: 16px; }
}

@media (max-width: 1024px) {
  .guide-hero { height: auto; padding-block: 48px; }
  .guide-hero__inner { flex-direction: column; align-items: flex-start; }
  .guide-hero__card { width: 100%; }

  .guide-quicknav__grid { flex-wrap: wrap; }
  .guide-quicknav__card { flex: 1 1 calc(33.333% - 8px); }
  .guide-quicknav__card:first-child,
  .guide-quicknav__card:last-child { border-radius: 24px; }

  .guide-card { padding: 40px 24px; border-radius: 40px; }
  .guide-etapes__top,
  .guide-prevoir__row,
  .guide-prevoir__row--reverse,
  .guide-rapatriement__row,
  .guide-patience__row,
  .guide-inhumation__row { flex-direction: column; align-items: stretch; }
  .guide-etapes__img,
  .guide-patience__photo,
  .guide-inhumation__img { width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .guide-inhumation__img { aspect-ratio: 3 / 4; }

  .guide-steps { flex-wrap: wrap; }
  .guide-steps__item { flex: 1 1 calc(50% - 12px); }

  .guide-documents__head { flex-direction: column; align-items: flex-start; }
  .guide-documents__intro { max-width: none; }
  .guide-documents__grid { flex-direction: column; }
  .guide-doc-cards { grid-template-columns: 1fr 1fr; }

  .guide-quotes { flex-direction: column; }
  /* En colonne, la flex-basis 0 deviendrait une hauteur figée/nulle */
  .guide-documents__grid > *,
  .guide-doc-cards,
  .guide-quote-card { flex-basis: auto; }
  .guide-invocation__row { flex-direction: column; gap: 24px; }
  .guide-invocation__sep { width: 100%; height: 2px; }
  .guide-invocation__translit,
  .guide-invocation__arabic { max-width: none; text-align: center; }

  .contact-form__row { flex-direction: column; }
  .contact-form__media { width: 100%; height: 420px; order: -1; }
}

@media (max-width: 820px) {
  .guide-hero__title { font-size: 34px; line-height: 42px; }
  /* Largeurs fixes Figma des visuels : pleine largeur une fois en colonne */
  .guide-photo-card,
  .guide-photo-card--corners,
  .guide-photo-card img,
  .guide-photo-card--corners img,
  .guide-cta-photo,
  .guide-patience__photo { width: 100%; max-width: 576px; height: auto; }
  .guide-photo-card--corners img,
  .guide-patience__photo img { height: auto; }
  .guide-quicknav__card { flex: 1 1 calc(50% - 8px); }
  .guide-sections { gap: 40px; padding-top: 40px; }
  .guide-card { gap: 40px; }
  .guide-steps__item { flex: 1 1 100%; }
  .guide-doc-cards { grid-template-columns: 1fr; }
  .contact-form__grid { flex-direction: column; gap: 24px; }
}

@media (max-width: 600px) {
  .guide-hero__actions,
  .guide-etapes__actions { flex-direction: column; align-items: stretch; }
  .guide-quicknav__card { flex: 1 1 100%; }
  .guide-card { padding: 32px 20px; border-radius: 28px; }
  .guide-invocation { padding: 24px; }
}

@media (max-width: 480px) {
  .guide-hero__title { font-size: 28px; line-height: 36px; }
  .guide-quran-quote { flex-direction: column; gap: 12px; border-left: 0; border-top: 2.5px solid var(--c-primary); }
}