/* ==========================================================================
   SECTIONS — mise en page propre à chaque bloc de la maquette
   Les largeurs et hauteurs FIXED de Figma sont reproduites en dur : sans
   elles, le texte fait dériver les cartes et la recette pixel échoue.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HÉROS — frame 1440 × 650, padding 55/120, contenu 792
   -------------------------------------------------------------------------- */

/* Frame Figma FIXED 1440 × 650 : la hauteur est imposée, le contenu est
   centré. Sans hauteur figée, le bloc dérive de quelques pixels et décale
   toute la page. */
.hero {
  position: relative;
  isolation: isolate;
  height: 650px;
  background: var(--c-navy); /* filet de sécurité : texte blanc jamais sur blanc */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 55px;
  overflow: hidden;
}

.hero__media { position: absolute; inset: 0; z-index: var(--z-deco); }
/* Le <picture> intermédiaire doit être dimensionné, sinon le height:100% de
   l'img ne se résout pas et l'image retombe sur sa hauteur intrinsèque —
   fond coupé dès que la hauteur du bloc dépasse largeur × ratio (mobile). */
.hero__media picture,
.band__media picture { display: block; width: 100%; height: 100%; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

.hero__inner { position: relative; z-index: var(--z-content); }

.hero__col {
  width: 792px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--sp-48);
}

.hero__head { width: 758px; max-width: 100%; display: flex; flex-direction: column; gap: var(--sp-24); }
.hero__intro { display: flex; flex-direction: column; gap: var(--sp-16); }

.hero__pill {
  align-self: flex-start;
  padding: var(--sp-14) 26px;
  background: var(--c-glass-fill-2);
  border: .5px solid var(--c-white);
  border-radius: var(--r-round);
  -webkit-backdrop-filter: var(--blur-glass);
  backdrop-filter: var(--blur-glass);
  color: var(--c-white);
  font-size: var(--fs-micro);
  font-weight: 500;
  line-height: 1.45;          /* Figma : interligne auto, pas le 1.6 du corps */
  letter-spacing: var(--ls-wide);
}

.hero__title { color: var(--c-white); font-size: var(--fs-hero); }
.hero__lead  { color: var(--c-white); font-size: var(--fs-body); font-weight: 500; line-height: var(--lh-body); }

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

/* Médaillon calligraphique — x = 985 dans une frame de 1440 → 80 px du bord droit */
.hero__badge {
  position: absolute;
  z-index: var(--z-content);
  top: 252px;
  right: 80px;
  width: 375px;
  padding: 21px 31px;
  display: flex;
  justify-content: center;
  background: var(--c-glass-fill-3);
  border: .5px solid var(--c-glass-stroke-2);
  border-radius: var(--r-badge);
  -webkit-backdrop-filter: var(--blur-glass);
  backdrop-filter: var(--blur-glass);
}
.hero__badge img { width: 295.43px; height: auto; filter: drop-shadow(var(--sh-calli)); }

/* --------------------------------------------------------------------------
   « Vous n'êtes pas seuls » — fond or très pâle, padding 88/120
   -------------------------------------------------------------------------- */

.support { padding-block: var(--sp-88); background: var(--c-gold-wash); }
.support__inner { display: flex; flex-direction: column; gap: var(--sp-88); }

.support__row { position: relative; display: flex; gap: var(--sp-72); }

.support__deco {
  position: absolute;
  left: -68px;
  top: 168px;
  width: 111.7px;
  opacity: .6;
  z-index: var(--z-deco);
  pointer-events: none;
}

.support__media { position: relative; width: 438px; flex: none; }
.support__photo {
  display: block;
  width: 438px;
  height: 542px;
  overflow: hidden;
  border-radius: 0 var(--r-media-l) 0 var(--r-media-l);
}
.support__photo img { width: 100%; height: 100%; object-fit: cover; }
.support__calli {
  position: absolute;
  left: 96px;
  top: 458px;
  width: 245.21px;
  filter: drop-shadow(var(--sh-badge));
}

.support__col { width: 690px; flex: none; display: flex; flex-direction: column; gap: var(--sp-48); }
.support__body { display: flex; flex-direction: column; gap: var(--sp-24); }
.support__grid { display: flex; align-items: center; gap: var(--sp-24); }
.support__list { flex: 1; min-width: 0; }

/* Médaillon « +15 ans d'expérience » */
.seal {
  position: relative;
  width: 209px; height: 209px;
  flex: none;
  display: grid;
  place-items: center;
  text-align: center;
}
.seal__ring { position: absolute; inset: 0; z-index: var(--z-deco); }
.seal__body { position: relative; z-index: var(--z-content); width: 121px; }
.seal__num {
  font-family: var(--ff-numeral);
  font-weight: 700;
  line-height: var(--lh-title);
  color: var(--c-ink);
  font-size: 32px;
}
.seal__num b { font-size: var(--fs-numeral); color: var(--c-gold); font-weight: 700; }
.seal__num i { font-size: var(--fs-quote); font-style: normal; }
.seal__label { font-size: var(--fs-h6); font-weight: 500; line-height: var(--lh-body); color: var(--c-body); }

/* --------------------------------------------------------------------------
   Bloc contact bordeaux (1200 × auto, rayon 34)
   -------------------------------------------------------------------------- */

.callout {
  padding: var(--sp-32) var(--sp-40);
  background: var(--c-navy);
  border-radius: var(--r-block);
  box-shadow: var(--sh-block);
}
.callout__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-32); }
.callout__col { width: 482px; flex: none; display: flex; flex-direction: column; gap: var(--sp-48); }
.callout__body { display: flex; flex-direction: column; gap: var(--sp-24); }
.callout__title { color: var(--c-white); font-size: var(--fs-h2-xl); }
.callout__lead  { color: var(--c-white); font-size: var(--fs-body); line-height: var(--lh-body); }
.callout__actions { display: flex; align-items: center; gap: var(--sp-16); }
.callout__actions .btn { flex: 1 1 0; min-width: 0; }

.callout__panel {
  width: 572px;
  flex: none;
  padding: var(--sp-20);
  background: var(--c-white);
  border-radius: var(--r-panel);
}

/* --------------------------------------------------------------------------
   Nos prestations — 4 cartes de 282 × 450
   -------------------------------------------------------------------------- */

.services { display: flex; flex-direction: column; align-items: center; gap: var(--sp-48); }
.services__head { width: 778px; max-width: 100%; }
.services__wrap { display: flex; flex-direction: column; align-items: center; gap: var(--sp-32); }
.services__grid { display: flex; align-items: center; gap: var(--sp-24); width: 100%; }

/* --------------------------------------------------------------------------
   Guide des familles (image 504 × 435 + colonne 640)
   -------------------------------------------------------------------------- */

.guide { display: flex; flex-direction: column; align-items: center; gap: var(--sp-56); }
.guide__row { display: flex; align-items: center; justify-content: center; gap: var(--sp-56); width: 100%; }

.guide__media { position: relative; width: 504px; height: 435px; flex: none; }
.guide__photo {
  display: block;
  width: 504px; height: 435px;
  overflow: hidden;
  border-radius: var(--r-media) 0 var(--r-media) 0;
}
.guide__photo img { width: 100%; height: 100%; object-fit: cover; }
.guide__deco { position: absolute; left: -41.4px; top: -37.43px; width: 114.85px; z-index: var(--z-content); }
.guide__calli {
  position: absolute;
  left: 107px; top: 315px;
  width: 290px;
  padding: var(--sp-20);
  display: flex;
  justify-content: center;
  background: rgba(0, 0, 0, .07);
  -webkit-backdrop-filter: var(--blur-badge);
  backdrop-filter: var(--blur-badge);
  border-radius: var(--r-round);
}
.guide__calli img { width: 229px; filter: drop-shadow(var(--sh-calli-lg)); }

.guide__col { width: 640px; flex: none; display: flex; flex-direction: column; gap: var(--sp-32); }
.guide__body { display: flex; flex-direction: column; gap: var(--sp-24); }
.guide__list { width: 564px; max-width: 100%; display: flex; flex-direction: column; gap: var(--sp-14); }

.guide__item { display: flex; align-items: center; gap: var(--sp-12); }
.guide__chip {
  width: 32px; height: 32px;
  flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-chip);
  border-radius: var(--r-chip);
}
.guide__label { font-size: var(--fs-lead); font-weight: 500; line-height: var(--lh-normal); color: var(--c-body); }

/* --------------------------------------------------------------------------
   Nos engagements — 343 | image 395 × 462 | 342
   -------------------------------------------------------------------------- */

.pledges { display: flex; flex-direction: column; align-items: center; gap: var(--sp-48); }
.pledges__head { width: 969px; max-width: 100%; }
.pledges__row { display: flex; align-items: center; gap: var(--sp-60); width: 100%; }
.pledges__col { width: 343px; flex: none; display: flex; flex-direction: column; gap: var(--sp-56); }
.pledges__col--right { width: 342px; }
.pledges__media {
  display: block;
  width: 395px; height: 462px;
  flex: none;
  border: 5px solid var(--c-gold);
  border-image: radial-gradient(ellipse at 5% 23%, #C2A56B 0%, #D7B46D 99%) 1;
}
.pledges__media img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   Parcours en 4 étapes
   -------------------------------------------------------------------------- */

.journey { display: flex; flex-direction: column; align-items: center; gap: var(--sp-48); }
.journey__head { width: 790px; max-width: 100%; }
.journey__wrap { display: flex; flex-direction: column; align-items: center; gap: var(--sp-24); width: 100%; }
.journey__line { width: 925px; max-width: 100%; }

/* --------------------------------------------------------------------------
   Bande d'appel bordeaux (1440 × 420)
   -------------------------------------------------------------------------- */

/* Frame Figma FIXED 1440 × 420, contenu calé à 67 px du haut (et non centré :
   la maquette laisse davantage d'air en bas). */
.band {
  position: relative;
  isolation: isolate;
  height: 420px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-block: 67px 0;
  overflow: hidden;
  background: var(--c-navy);
}
.band__media { position: absolute; inset: 0; z-index: var(--z-deco); }
.band__media img { width: 100%; height: 100%; object-fit: cover; }
.band__veil { position: absolute; inset: 0; z-index: var(--z-veil); background: var(--c-navy-veil); }
.band__deco { position: absolute; top: 0; z-index: var(--z-veil); height: 100%; width: 468px; pointer-events: none; }
.band__deco--left  { left: 0; }
.band__deco--right { right: 0; }
.band__deco img { height: 100%; width: 100%; object-fit: cover; }

.band__inner {
  position: relative;
  z-index: var(--z-content);
  width: 807px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-40);
  text-align: center;
}
/* Imbrication Figma : gap 10 entre le sur-titre et le titre, gap 24 avant le
   chapô. Un gap 24 uniforme ajouterait 14 px et décalerait la suite. */
.band__body { display: flex; flex-direction: column; gap: var(--sp-24); align-items: center; }
.band__head { display: flex; flex-direction: column; gap: var(--sp-10); align-items: center; }
.band__title { color: var(--c-white); font-size: var(--fs-h2); }
.band__lead  { color: var(--c-white); font-size: var(--fs-body); font-weight: 500; line-height: var(--lh-body); }

/* --------------------------------------------------------------------------
   Présence locale + chiffres clés (fond crème, padding 90/120)
   -------------------------------------------------------------------------- */

.local { padding-block: var(--sp-90); background: var(--c-cream); }
.local__inner { display: flex; flex-direction: column; gap: var(--sp-104); }

.local__row { display: flex; align-items: center; gap: var(--sp-56); }
.local__col { width: 640px; flex: none; display: flex; flex-direction: column; gap: var(--sp-32); }
.local__body { display: flex; flex-direction: column; gap: var(--sp-24); }
/* Dans Figma les puces sont des textes HUG : elles tiennent sur une ligne et
   débordent au besoin de leur boîte de 564 px. On leur laisse ici toute la
   largeur de la colonne pour reproduire ce rendu sans recourir à nowrap,
   qui casserait le repli mobile. */
.local__list { width: 100%; }

/* L'image est en fill/fill : sa hauteur suit la colonne, elle ne doit pas
   imposer de minimum. */
.local__media {
  display: block;
  flex: 1 1 0;
  min-width: 0;
  align-self: stretch;
  overflow: hidden;
  border: 16px solid var(--c-frame-stroke);
  border-radius: var(--r-media-xl) 0 var(--r-media-xl) 0;
}
.local__media img { width: 100%; height: 100%; object-fit: cover; }

.figures { display: flex; flex-direction: column; align-items: center; gap: var(--sp-48); }
.figures__head { width: 790px; max-width: 100%; }

/* --------------------------------------------------------------------------
   Formulaire de contact + visuel (panneau 40 px de rayon, coupé en deux)
   -------------------------------------------------------------------------- */

.contact { display: flex; flex-direction: column; align-items: center; gap: var(--sp-48); }
.contact__head { width: 895px; max-width: 100%; }
.contact__row { display: flex; align-items: stretch; gap: var(--sp-16); width: 100%; }

/* Figma répartit la rangée de 1200 px en 735 (panneau) + 16 (gap) + 449
   (visuel). Bases en px et non `flex: 735 1 0` : en border-box, une base 0
   est plafonnée par le padding du panneau (64 px), ce qui décalait la
   répartition de 25 px. */
.contact__panel {
  flex: 1 1 735px;
  min-width: 0;
  padding: var(--sp-32);
  background: var(--c-navy-wash);
  border-radius: var(--r-form) 0 0 var(--r-form);
  display: flex;
  flex-direction: column;
  gap: var(--sp-32);
}
.contact__panel .form__input,
.contact__panel .form__textarea { border-color: transparent; }
.contact__panel .form__textarea { height: 138px; }
.contact__panel .form__label { color: var(--c-navy-deep); }

.contact__rule { height: 1px; background: var(--c-navy-rule); border: 0; margin: 0; }

.contact__meta { display: flex; align-items: center; gap: var(--sp-12); flex-wrap: wrap; }
.contact__meta-item { display: flex; align-items: center; gap: var(--sp-8); font-size: var(--fs-xs); line-height: var(--lh-normal); color: var(--c-navy-deep); }
.contact__meta-rule { width: 1px; align-self: stretch; min-height: 21px; background: var(--c-navy-rule); }
.contact__dot { width: 8.22px; height: 8.22px; border-radius: var(--r-dot); background: var(--c-gold); flex: none; }

.contact__media {
  position: relative;
  isolation: isolate;
  flex: 1 1 449px;
  min-width: 0;
  min-height: 596px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-block: 45px;
  overflow: hidden;
  border-radius: 0 var(--r-form) var(--r-form) 0;
}
.contact__photo { position: absolute; inset: 0; z-index: var(--z-deco); display: block; }
.contact__photo img { width: 100%; height: 100%; object-fit: cover; }
.contact__media::after { content: ""; position: absolute; inset: 0; z-index: var(--z-veil); background: rgba(0, 0, 0, .10); }
.contact__media-calli { position: relative; z-index: var(--z-content); width: 219.78px; filter: drop-shadow(var(--sh-mask)); }

/* --------------------------------------------------------------------------
   Partenariats — le décor déborde à 1544 px, le contenu reste à 1200 px
   -------------------------------------------------------------------------- */

/* Groupe Figma de 678 px (contenu calé à 125 px du haut) suivi du gap 104
   de l'auto-layout parent, porté ici par une marge pour ne pas altérer la
   hauteur du bloc. */
.partners {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: 125px;
  min-height: 678px;
  margin-bottom: var(--sp-104);
  display: flex;
  align-items: center;
}
.partners__bg {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-deco);
  width: 1544px;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.partners__inner { position: relative; z-index: var(--z-content); }
.partners__row { display: flex; align-items: center; gap: var(--sp-72); }
.partners__media {
  display: block;
  width: 432px; height: 428px;
  flex: none;
  background: var(--c-photo-bg);
  border: 9px solid var(--c-frame-stroke-soft);
}
.partners__media img { width: 100%; height: 100%; object-fit: cover; }
.partners__col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-32); }
.partners__body { display: flex; flex-direction: column; gap: var(--sp-16); }