/* ==========================================================================
   PAGES INTÉRIEURES — composants absents de la page d'accueil
   Chargé après sections.css, avant animations.css et responsive.css.
   ========================================================================== */

/* Les pages intérieures utilisent un conteneur de 1312 px (gouttière 64 px)
   pour les grandes cartes éditoriales, et 1200 px pour le reste. */
.container--wide { max-width: 1312px; }

/* --------------------------------------------------------------------------
   Bannière de page — frame FIXED 1440 × 420 (450 sur « Guide des familles »)
   padding 72 / 211 / 73 / 212 dans la maquette
   -------------------------------------------------------------------------- */

.pbanner {
  position: relative;
  isolation: isolate;
  height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 72px 73px;
  overflow: hidden;
  background: var(--c-navy);
}
.pbanner--tall { height: 450px; }

.pbanner__media { position: absolute; inset: 0; z-index: var(--z-deco); }
.pbanner__media picture { display: block; width: 100%; height: 100%; }
.pbanner__media img { width: 100%; height: 100%; object-fit: cover; }
.pbanner__veil { position: absolute; inset: 0; z-index: var(--z-veil); background: rgba(0, 0, 0, .26); }
.pbanner__veil--light { background: rgba(0, 0, 0, .05); }
.pbanner__veil--mid   { background: rgba(0, 0, 0, .20); }
.pbanner__veil--guide { background: rgba(0, 0, 0, .25); }

.pbanner__inner {
  position: relative;
  z-index: var(--z-content);
  width: 1017px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-32);
  text-align: center;
}
.pbanner__inner--narrow { width: 789px; }

.pbanner__head { display: flex; flex-direction: column; align-items: center; gap: var(--sp-16); width: 100%; }
.pbanner__title { color: var(--c-white); font-size: var(--fs-h2); }
.pbanner__lead {
  width: 679px;
  max-width: 100%;
  color: var(--c-white);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.pbanner__inner--narrow .pbanner__lead { width: 100%; }

/* Pastilles flottantes en verre (page « Guide des familles ») */
.pbanner__chip {
  position: absolute;
  z-index: var(--z-content);
  padding: var(--sp-12);
  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-step);
  -webkit-backdrop-filter: var(--blur-glass);
  backdrop-filter: var(--blur-glass);
  color: var(--c-white);
  text-align: left;
}
.pbanner__chip-title {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: var(--lh-normal);
}
.pbanner__chip-text { font-size: var(--fs-xxs); line-height: var(--lh-normal); }

.pbanner__chip--tl { left: 45px;   top: 194px; width: 222px; }
.pbanner__chip--tr { right: 45px;  top: 194px; }
.pbanner__chip--bl { left: 119px;  top: 325px; }
.pbanner__chip--br { right: 82px;  top: 325px; }

/* --------------------------------------------------------------------------
   Bandeau de citation sous la bannière (« Tradition prophétique »)
   -------------------------------------------------------------------------- */

.qstrip {
  padding-block: var(--sp-32);
  background: var(--c-gold-wash);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .08);
  border-radius: 0 0 var(--r-stat) var(--r-stat);
}
.qstrip__row { display: flex; align-items: stretch; }

.qstrip__cell {
  flex: 1 1 0;
  min-width: 0;
  padding: var(--sp-20);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--sp-10);
}
.qstrip__cell--accent { background: var(--c-accent); color: var(--c-white); border-radius: 26px 0 0 26px; }
.qstrip__cell--plain  { background: var(--c-white); border: .5px solid #F8F3EC; border-radius: 0 26px 26px 0; }

.qstrip__body { width: 100%; display: flex; flex-direction: column; gap: var(--sp-16); }
.qstrip__icon {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10.43px;
  flex: none;
}
.qstrip__icon--light { background: var(--c-white); }
.qstrip__icon--accent { background: var(--c-accent); }
.qstrip__title { font-size: var(--fs-h6); font-weight: 600; line-height: var(--lh-title); font-family: var(--ff-body); }
.qstrip__text  { font-size: var(--fs-xs); line-height: 1.39; }
.qstrip__cell--plain .qstrip__body { align-items: center; text-align: center; }
.qstrip__cell--plain .qstrip__title { color: var(--c-ink); font-weight: 500; }

/* --------------------------------------------------------------------------
   Bandeau d'accès rapide (« Guide des familles »)
   -------------------------------------------------------------------------- */

.gstrip { display: flex; align-items: stretch; }

.gstrip__lead {
  width: 430px;
  flex: none;
  padding: var(--sp-16);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-8);
  background: var(--c-accent);
  color: var(--c-white);
  border-radius: var(--r-step) 0 0 var(--r-step);
}
.gstrip__lead-icon {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-white);
  border-radius: 10.43px;
}
.gstrip__lead-title { font-size: var(--fs-h6); font-weight: 600; line-height: var(--lh-title); }
.gstrip__lead-text  { font-size: var(--fs-xs); line-height: 1.39; }

.gstrip__item {
  flex: 1 1 0;
  min-width: 0;
  padding: var(--sp-16) 11px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--sp-12);
  background: var(--c-white);
  border: .5px solid #F8F3EC;
  text-align: center;
  transition: background-color var(--t-fast), transform var(--t-fast);
}
.gstrip__item:last-child { border-radius: 0 var(--r-step) var(--r-step) 0; }
.gstrip__item:hover { background: var(--c-cream); transform: translateY(-2px); }
.gstrip__icon {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-accent);
  border-radius: 10.43px;
  flex: none;
}
.gstrip__label { font-size: 11px; font-weight: 500; line-height: var(--lh-title); color: var(--c-ink); }

/* --------------------------------------------------------------------------
   Grande carte éditoriale (pages « Tradition » et « Guide »)
   -------------------------------------------------------------------------- */

.ecard {
  padding: var(--sp-56);
  background: #FAFAFA;
  border: .5px solid #E0E0E0;
  border-radius: 0 var(--r-media) 0 var(--r-media);
}
.ecard--flip { border-radius: var(--r-media) 0 var(--r-media) 0; }

.ecard__stack { display: flex; flex-direction: column; gap: var(--sp-64); }
/* space-between : Figma cale le média au bord du contenu (l'écart réel vaut
   alors 104 px sur « derniers instants »), le gap n'est qu'un minimum. */
.ecard__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-48); }
.ecard__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-32); }
.ecard__media { flex: none; display: block; }
.ecard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ecard__sub { font-family: var(--ff-body); font-size: var(--fs-h4); font-weight: 500; line-height: var(--lh-title); color: var(--c-navy); }

/* --------------------------------------------------------------------------
   Citation encadrée (filet vertical framboise)
   -------------------------------------------------------------------------- */

.pull {
  padding: var(--sp-20) var(--sp-16);
  background: var(--c-navy-wash-5); /* Figma 1:10011 : #0B1937 à 5 % */
  border-radius: 0 24px 0 24px;
  display: flex;
  align-items: center;
  gap: var(--sp-24);
}
.pull--plain { background: var(--c-white); border-radius: var(--sp-20); }
.pull::before {
  content: "";
  align-self: stretch;
  width: 2px;
  flex: none;
  background: var(--c-navy);
  border-radius: 2px;
}
.pull__body { display: flex; flex-direction: column; gap: 19px; }
.pull__quote {
  font-size: var(--fs-lead);
  font-weight: 600;
  font-style: italic;
  line-height: var(--lh-body);
  color: var(--c-navy);
}
.pull__src { font-size: var(--fs-body); font-weight: 500; font-style: italic; line-height: var(--lh-body); color: var(--c-gold); }

/* --------------------------------------------------------------------------
   Frise numérotée (« Tradition prophétique »)
   -------------------------------------------------------------------------- */

.tline { position: relative; display: flex; flex-direction: column; gap: var(--sp-40); }
.tline::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 0; bottom: 0;
  width: 0;
  border-left: 1px dashed #DBDBDB;
  z-index: var(--z-deco);
}
.tline__item { position: relative; z-index: var(--z-content); display: flex; flex-direction: column; gap: var(--sp-4); }
.tline__head { display: flex; align-items: center; gap: var(--sp-10); }
.tline__num {
  width: 36px; height: 36px;
  flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-accent);
  border: 1px solid #DBDBDB;
  border-radius: 34px;
  color: var(--c-white);
  font-size: var(--fs-body);
  font-weight: 700;
}
.tline__title { font-family: var(--ff-display); font-size: var(--fs-h6); font-weight: 700; color: var(--c-navy); }
.tline__body { padding-left: 46px; display: flex; flex-direction: column; gap: var(--sp-10); }
.tline__text { font-size: var(--fs-body); line-height: var(--lh-body); color: #474749; }
.tline__list { display: flex; flex-direction: column; gap: 7px; }
.tline__list li { display: flex; align-items: center; gap: var(--sp-8); font-size: var(--fs-xs); font-weight: 600; line-height: var(--lh-normal); color: var(--c-body); }
.tline__list img { flex: none; }
.tline__note { font-size: var(--fs-xs); line-height: var(--lh-body); color: #474749; }
.tline__note strong { font-weight: 600; color: var(--c-navy); display: block; margin-bottom: 4px; }
.tline__note ul { margin-top: 2px; }
.tline__note li { position: relative; padding-left: 14px; font-weight: 500; }
.tline__note li::before { content: "–"; position: absolute; left: 0; }

/* --------------------------------------------------------------------------
   Carte prestation détaillée (« Notre devoir », grille 2 × 2)
   -------------------------------------------------------------------------- */

.dgrid { display: flex; flex-direction: column; gap: var(--sp-32); }
.dgrid__row { display: flex; gap: var(--sp-24); align-items: stretch; }

.dcard {
  flex: 1 1 0;
  min-width: 0;
  padding: var(--sp-16);
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  box-shadow: 0 1px 22px rgba(0, 0, 0, .06);
  border-radius: 24px;
}
.dcard__inner { display: flex; flex-direction: column; justify-content: center; gap: var(--sp-24); height: 100%; }
.dcard__media { height: 350px; flex: none; border-radius: var(--r-step); overflow: hidden; display: block; }
.dcard__media img { width: 100%; height: 100%; object-fit: cover; }
.dcard__body { display: flex; flex-direction: column; gap: 28px; flex: 1; }
.dcard__text { display: flex; flex-direction: column; gap: var(--sp-14); }
.dcard__head { display: flex; flex-direction: column; gap: var(--sp-8); }
.dcard__title { font-size: 22px; line-height: var(--lh-title); }
.dcard__desc { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-body); }
.dcard__list { display: flex; flex-direction: column; gap: 9px; }
.dcard__list li { display: flex; align-items: center; gap: var(--sp-8); font-size: var(--fs-xs); font-weight: 500; line-height: var(--lh-normal); color: var(--c-body); }
.dcard__list img { flex: none; }
.dcard .btn { margin-top: auto; }

/* --------------------------------------------------------------------------
   Rangée « média + texte » générique (pages intérieures)
   -------------------------------------------------------------------------- */

.mrow { display: flex; align-items: center; gap: var(--sp-64); }
.mrow--44 { gap: 44px; }
.mrow__col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-32); }
.mrow__media { flex: none; display: block; overflow: hidden; }
.mrow__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mrow__media--mission {
  width: 424px;
  height: 554px;
  border: 12px solid rgba(194, 165, 107, .5);
  background: var(--c-photo-bg);
}
/* Figma : boîte de layout 504×376, trait de 15 px ALIGNÉ EXTÉRIEUR (visuel
   534×406, débordant de 15 px). Reproduit par border-box + marges négatives. */
.mrow__media--engagement {
  width: 534px;
  height: 406px;
  margin: -15px;
  border: 15px solid var(--c-frame-stroke);
  border-radius: 105px 0 105px 0;
}

/* --------------------------------------------------------------------------
   Cartes « pourquoi nous faire confiance » (« Notre devoir »)
   -------------------------------------------------------------------------- */

.trust { position: relative; isolation: isolate; }
.trust__deco {
  position: absolute;
  right: 0; top: 0;
  z-index: var(--z-deco);
  width: 555px;
  max-width: none;
  pointer-events: none;
}
.trust__inner { position: relative; z-index: var(--z-content); width: 894px; max-width: 100%; display: flex; flex-direction: column; gap: var(--sp-48); padding-block: 27px; }
.trust__head { width: 764px; max-width: 100%; }
.trust__grid { display: flex; flex-direction: column; gap: var(--sp-24); }
.trust__row { display: flex; align-items: stretch; gap: var(--sp-24); }
.tcard {
  flex: 1 1 0;
  min-width: 0;
  padding: var(--sp-24);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--sp-16);
  background: #FEFEFE;
  border: .5px solid #EDEDED;
  border-radius: var(--r-step);
  text-align: center;
}
.tcard__icon { height: 32px; flex: none; width: auto; }
.tcard__title { font-size: var(--fs-h6); line-height: var(--lh-title); }
.tcard__text { font-size: var(--fs-xs); font-weight: 500; line-height: var(--lh-body); color: var(--c-body); }

/* --------------------------------------------------------------------------
   Bloc « notre promesse » coupé en deux (« Notre devoir »)
   -------------------------------------------------------------------------- */

.split { display: flex; align-items: stretch; }
/* Bases 50 % (Figma : répartition exacte 656/656) — une base 0 serait
   plafonnée par le padding en border-box, cf. .contact__panel. */
.split__text {
  flex: 1 1 50%;
  min-width: 0;
  padding: 43px 60px 43px 61px;
  background: var(--c-cream);
  border-radius: 0 0 0 var(--r-round);
  display: flex;
  flex-direction: column;
  gap: var(--sp-32);
}
.split__media {
  flex: 1 1 50%;
  min-width: 0;
  display: block;
  border-radius: 0 var(--r-round) 0 0;
  overflow: hidden;
}
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__quote {
  padding: var(--sp-20);
  background: var(--c-white);
  border-radius: var(--sp-20);
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.split__quote p,
.split__quote blockquote { font-size: var(--fs-body); font-weight: 500; font-style: italic; line-height: var(--lh-body); color: var(--c-ink); white-space: pre-line; }
.split__quote cite { font-size: var(--fs-xs); font-weight: 500; font-style: italic; color: var(--c-ink); }

/* --------------------------------------------------------------------------
   Cartes « documents » (« Guide des familles »)
   -------------------------------------------------------------------------- */

.docgrid { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-16); }
.docgrid__row { display: flex; align-items: stretch; gap: var(--sp-16); }
.doccard {
  flex: 1 1 0;
  min-width: 0;
  padding: var(--sp-16);
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
  background: var(--c-white);
  border-radius: 20px 20px 0 20px;
}
.doccard:nth-child(2) { border-radius: 20px 20px 20px 0; }
.docgrid__row:last-child .doccard:first-child { border-radius: 20px 0 20px 20px; }
.docgrid__row:last-child .doccard:nth-child(2) { border-radius: 0 20px 20px 20px; }
.doccard__icon { width: 53px; height: 58px; flex: none; }
.doccard__title { font-family: var(--ff-body); font-size: var(--fs-h5); font-weight: 600; line-height: var(--lh-title); color: var(--c-ink); }
.doccard__text { font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--c-body); }

/* Encadré photo + CTA téléphone à gauche de la grille de documents */
.docaside {
  width: 531px;
  flex: none;
  position: relative;
  isolation: isolate;
  padding: var(--sp-24);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--sp-24);
  overflow: hidden;
  border-radius: var(--r-media) 0 var(--r-media) 0;
}
.docaside__media { position: absolute; inset: 0; z-index: var(--z-deco); display: block; }
.docaside__media img { width: 100%; height: 100%; object-fit: cover; }
.docaside::after {
  content: "";
  position: absolute; inset: 0;
  z-index: var(--z-veil);
  background: linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.75) 90%);
}
.docaside__body { position: relative; z-index: var(--z-content); display: flex; flex-direction: column; gap: var(--sp-24); }
.docaside__title { font-family: var(--ff-body); font-size: 26px; font-weight: 600; line-height: var(--lh-title); color: var(--c-white); }
.docaside__text { font-size: var(--fs-xs); line-height: var(--lh-normal); color: var(--c-white); }

/* --------------------------------------------------------------------------
   Bloc d'invocation (« Guide des familles »)
   -------------------------------------------------------------------------- */

.invoc {
  position: relative;
  isolation: isolate;
  min-height: 391px;
  padding: var(--sp-40);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-72);
  overflow: hidden;
  border-radius: var(--r-media) 0 var(--r-media) 0;
  color: var(--c-white);
}
.invoc__media { position: absolute; inset: 0; z-index: var(--z-deco); display: block; }
.invoc__media img { width: 100%; height: 100%; object-fit: cover; }
.invoc::after {
  content: "";
  position: absolute; inset: 0;
  z-index: var(--z-veil);
  background: linear-gradient(90deg, rgba(11,25,55,.95) 0%, rgba(11,25,55,.5) 50%, rgba(11,25,55,.95) 100%); /* Figma 1:30306 */
}
.invoc__inner { position: relative; z-index: var(--z-content); display: flex; flex-direction: column; gap: var(--sp-72); }
.invoc__title { font-family: var(--ff-display); font-size: var(--fs-quote); line-height: var(--lh-title); text-align: center; color: var(--c-white); }
.invoc__pair { display: flex; justify-content: center; align-items: center; gap: 57px; }
.invoc__col { width: 493px; max-width: 100%; }
.invoc__tr { font-size: var(--fs-h4); font-weight: 600; line-height: var(--lh-quote); letter-spacing: var(--ls-wide); }
.invoc__ar { font-family: var(--ff-arabic); font-size: var(--fs-h3); line-height: var(--lh-body); text-align: right; direction: rtl; }
.invoc__rule { width: 2px; height: 46px; flex: none; background: rgba(255, 255, 255, .65); }
.invoc__fr { font-size: 21px; font-weight: 600; line-height: var(--lh-quote); letter-spacing: var(--ls-wide); text-align: center; }

/* --------------------------------------------------------------------------
   Accordéon FAQ (page Contact)
   -------------------------------------------------------------------------- */

.acc { display: flex; flex-direction: column; gap: var(--sp-24); }

.acc__item {
  padding: var(--sp-32);
  background: var(--c-navy-wash-2);
  border-left: 7px solid var(--c-navy-wash-25);
  border-radius: 4px var(--r-step) var(--r-step) 4px;
  box-shadow: 0 1px 4px rgba(25, 33, 61, .06);
  transition: background-color var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.acc__item[open] {
  background: var(--c-navy-wash-5);
  border-left-width: 6px;
  border-left-color: var(--c-accent);
  box-shadow: 0 5px 15px rgba(74, 58, 255, .06);
}

.acc__q {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  cursor: pointer;
  list-style: none;
  font-family: var(--ff-body);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.35;
  color: #121A26;
}
.acc__q::-webkit-details-marker { display: none; }
.acc__item[open] .acc__q { font-weight: 600; color: var(--c-accent); }

.acc__chevron {
  width: 34.42px; height: 34.42px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px;
  border-radius: var(--r-round);
  transition: transform var(--t-base);
}
.acc__item[open] .acc__chevron { transform: rotate(180deg); }

.acc__a { padding: var(--sp-24) 0 0 44px; }
.acc__a p { font-size: var(--fs-body); line-height: var(--lh-body); color: #33312E; }
.acc__a p + p { margin-top: var(--sp-12); }

/* --------------------------------------------------------------------------
   Image large en pleine section (page Contact)
   -------------------------------------------------------------------------- */

.wideshot { display: block; width: 100%; height: 450px; border-radius: 42px; overflow: hidden; }
.wideshot img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   Fil d'Ariane
   -------------------------------------------------------------------------- */

.crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-8);
  font-size: var(--fs-xxs);
  color: var(--c-placeholder);
}
.crumbs a:hover { color: var(--c-navy); }
.crumbs li + li::before { content: "›"; margin-right: var(--sp-8); color: var(--c-gold); }
.crumbs li { display: flex; align-items: center; }
.crumbs [aria-current="page"] { color: var(--c-navy); font-weight: 600; }