/* Orthodontie enfants — styles de page.
   Construit section par section depuis layout-plan + nœuds Figma. Validation à l'œil.
   Rythme inter-sections = 160px (mesuré sur l'absolu Figma, identique aux autres pages). */

/* ── HERO (frame-427321420, 1440×543) ───────────────────────────────────────
   Photo insérée (marge 20px), MIROIR horizontal (imageTransform a=-0.98) + échelle
   verticale d=0.526 → bg 1428×952, posY -269. Calque ::before (texte non retourné).
   Titre Nunito 200 80/88 blanc bas-gauche, CTA A3 bas-droite. Pas de sous-titre. */
.enf-hero {
  padding: 66px 20px 0;                      /* image top calé sur les autres pages */
}
.enf-hero__media {
  position: relative;
  height: 501px;
  overflow: hidden;
  background-color: var(--c-blue);           /* repli avant chargement */
}
.enf-hero__media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('../img/enf-hero.webp') no-repeat;
  background-size: 1428px 952px;             /* photo-css : |a|=0.98, d=0.526 */
  background-position: 0 -269px;
  transform: scaleX(-1);                     /* miroir horizontal (source) */
}
.enf-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;                     /* counterAxis MAX = bas */
  justify-content: space-between;            /* primaryAxis SPACE_BETWEEN */
  gap: 192px;
  height: 100%;
  padding: 200px 80px 80px;
}
.enf-hero__title {
  margin: 0;
  max-width: 937px;
  font-family: var(--font-heading);          /* Nunito */
  font-weight: 200;                          /* ExtraLight (maître) */
  font-size: 80px;
  line-height: 88px;
  color: var(--neutral-0);
}

/* ── Texte courant des paragraphes (Inter 300 16/24, gras = <strong> 700) ──── */
.enf-intro__body p,
.enf-why__body p,
.enf-age__body p,
.enf-card__body p {
  margin: 0;
  font-family: var(--font-body);             /* Inter */
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: var(--neutral-900);                 /* #202020 */
}
.enf-intro__body p + p,
.enf-why__body p + p,
.enf-age__body p + p,
.enf-card__body p + p {
  margin-top: 24px;                          /* ligne vide (saut de paragraphe source) */
}
.enf-intro__body strong,
.enf-why__body strong,
.enf-age__body strong,
.enf-card__body strong { font-weight: 700; }

/* Titres de section H2 (Nunito 300 40/48) ─────────────────────────────────── */
.enf-sec__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 40px;
  line-height: 48px;
  color: var(--neutral-900);
}

/* ── INTRO (frame-427321437, 1440×280) — texte 715 + image 485×280 r16 ─────── */
.enf-intro {
  display: flex;
  align-items: flex-start;                   /* contenu calé en haut (frame texte top-packed) */
  gap: 80px;
  padding: 0 80px;
}
.enf-intro__text {
  flex: 0 0 715px;
  display: flex;
  flex-direction: column;
  gap: 48px;                                 /* H2 → paragraphe (source) */
}
.enf-intro__title,
.enf-age__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 40px;
  line-height: 48px;
  color: var(--neutral-900);
}
.enf-intro__media {
  flex: 0 0 485px;
  height: 280px;
  border-radius: 16px;
  background-color: var(--c-blue);
}

/* ── POURQUOI (orthodontie-pour-tous, 1440×336) — carte navy r20 pad48 ─────── */
.enf-why {
  padding: 0 80px;
}
.enf-why__card {
  box-sizing: border-box;
  padding: 48px;
  border-radius: 20px;
  background: var(--c-blue);                 /* #2B5273 */
  display: flex;
  flex-direction: column;
  gap: 48px;                                 /* H2 → corps (source) */
}
.enf-why__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 40px;
  line-height: 48px;
  color: var(--neutral-0);
}
.enf-why__body p { color: var(--neutral-0); }  /* texte blanc sur navy */

/* ── À QUEL ÂGE (frame-427321453, 1440×304) — image 485×304 r16 + texte 715 ── */
.enf-age {
  display: flex;
  align-items: flex-start;
  gap: 80px;
  padding: 0 80px;
}
.enf-age__media {
  flex: 0 0 485px;
  height: 304px;
  border-radius: 16px;
  background-color: var(--c-blue);
}
.enf-age__text {
  flex: 0 0 715px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* ── GALERIE (orthodontie-pour-tous, 1440×222) — 3 photos gap32 r16 ────────── */
.enf-gallery {
  padding: 0 80px;
}
.enf-gallery__row {
  display: flex;
  gap: 32px;
}
.enf-gal {
  height: 222px;
  border-radius: 16px;
  background-color: var(--c-blue);
  background-repeat: no-repeat;
}
.enf-gal--w372 { flex: 0 0 372px; }
.enf-gal--w491 { flex: 0 0 491px; }
.enf-gal--w353 { flex: 0 0 353px; }

/* ── RANGÉES (classiques + invisibles) ────────────────────────────────────── */
.enf-classic,
.enf-invisible {
  padding: 0 80px;
}
.enf-row {
  display: flex;
  gap: 80px;
  margin-top: 80px;                          /* H2 → 1re rangée / rangée → rangée (source 80) */
}
.enf-row--gap48 { margin-top: 48px; }            /* invisibles : rangée1→rangée2 = 48 (source) */
.enf-row__img {
  border-radius: 16px;
  background-color: var(--c-blue);
  background-repeat: no-repeat;
}
.enf-img--h444 { flex: 0 0 364px; height: 444px; }
.enf-img--h228 { flex: 0 0 618px; height: 228px; }
.enf-img--h324 { flex: 0 0 640px; height: 324px; }
.enf-img--h312 { flex: 0 0 548px; height: 312px; }

/* Carte (light biege / navy), r12 ─────────────────────────────────────────── */
.enf-card {
  box-sizing: border-box;
  padding: 32px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 32px;                                 /* H3 → corps (source) */
}
.enf-card--pad20 { padding: 20px; }
.enf-card--light { background: var(--c-biege); }   /* #FEFCF9 */
.enf-card--navy { background: var(--c-blue); }     /* #2B5273 */
.enf-card--444 { flex: 0 0 824px; height: 444px; }
.enf-card--228 { flex: 0 0 570px; height: 228px; }
.enf-card--324 { flex: 0 0 548px; height: 324px; }
.enf-card__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 28px;
  line-height: 36px;
  color: var(--neutral-900);
}
.enf-card__title--light { color: var(--neutral-0); }
.enf-card__body--light p { color: var(--neutral-0); }

/* Invisibles — rangée 2 : image 548 + colonne texte+CTA (640), centrée vert. ─ */
.enf-invisible__col {
  flex: 0 0 640px;
  display: flex;
  flex-direction: column;
  justify-content: center;                   /* primaryAxis CENTER (source) */
  gap: 32px;                                 /* paragraphe → CTA (source) */
}
.enf-invisible__cta { align-self: flex-start; }

/* ── Recadrages photo (photo-css : STRETCH spécifiques) ───────────────────── */
.enf-img--intro {
  background-image: url('../img/enf-intro.webp');
  background-size: 680.61px 453.63px;
  background-position: -161.91px -154.67px;
}
.enf-img--age {
  background: url('../img/enf-age.webp') center / cover no-repeat;
}
.enf-img--gal1 { background-image: url('../img/enf-gal-1.webp'); background-size: cover; background-position: center; }
.enf-img--gal2 { background-image: url('../img/enf-gal-2.webp'); background-size: cover; background-position: center; }
.enf-img--gal3 {
  background-image: url('../img/enf-gal-3.webp');
  background-size: 409px 613.5px;
  background-position: 0 -211.48px;
}
.enf-img--ceramique {
  background: url('../img/enf-classiques-ceramique.webp') center / cover no-repeat;
}
.enf-img--kids {
  background-image: url('../img/enf-classiques-kids.webp');
  background-size: 725px 471.02px;
  background-position: -53.64px -201.75px;
}
.enf-img--inv1 {
  background-image: url('../img/enf-invisible-1.webp');
  background-size: 639.92px 351.59px;
  background-position: 0.07px -13.8px;
}
.enf-img--inv2 {
  background-image: url('../img/enf-invisible-2.webp');
  background-size: 687px 458.06px;
  background-position: 0 -96.59px;
}

/* ── Rythme inter-sections (160px, mesuré sur l'absolu Figma) ──────────────── */
main > section + section { margin-top: 160px; }
main + .site-footer { margin-top: 160px; }

/* ═════════════════════════════════════════════════════════════════════════
   RESPONSIVE Orthodontie enfants — base flex, empilement colonne sur mobile.
   Dans chaque rangée la carte/texte passe AVANT l'image (order).
   ═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  main > section + section { margin-top: 80px; }
  main + .site-footer { margin-top: 80px; }

  /* HERO */
  .enf-hero { padding: 66px 12px 0; }
  .enf-hero__media { height: auto; min-height: 420px; border-radius: 20px; }
  .enf-hero__media::before { background-image: url('../img/enf-hero-m.webp'); } /* variante mobile 1000px (LCP), même crop */
  .enf-hero__inner { flex-direction: column; align-items: flex-start; gap: 24px; padding: 120px 24px 32px; }
  .enf-hero__title { max-width: 100%; font-size: 40px; line-height: 46px; }

  /* Titres de section réduits */
  .enf-sec__title, .enf-intro__title, .enf-age__title,
  .enf-why__title { font-size: 32px; line-height: 38px; }

  /* INTRO */
  .enf-intro { flex-direction: column; gap: 24px; padding: 0 24px; }
  .enf-intro__text { flex: 1 1 auto; gap: 24px; }
  .enf-intro__media { flex: 0 0 auto; width: 100%; height: 240px; }

  /* POURQUOI (carte navy) */
  .enf-why { padding: 0 24px; }
  .enf-why__card { padding: 32px 24px; gap: 32px; }

  /* À QUEL ÂGE */
  .enf-age { flex-direction: column; gap: 24px; padding: 0 24px; }
  .enf-age__media { flex: 0 0 auto; width: 100%; height: 240px; }
  .enf-age__text { flex: 1 1 auto; gap: 24px; }

  /* GALERIE */
  .enf-gallery { padding: 0 24px; }
  .enf-gallery__row { flex-direction: column; gap: 16px; }
  .enf-gal { flex: 0 0 auto !important; width: 100%; height: 200px; }

  /* RANGÉES classiques + invisibles : carte d'abord, image ensuite */
  .enf-classic, .enf-invisible { padding: 0 24px; }
  .enf-row, .enf-row--gap48 { flex-direction: column; gap: 24px; margin-top: 24px; }
  .enf-card, .enf-invisible__col { order: 1; }
  .enf-row__img { order: 2; }
  .enf-card { flex: 0 0 auto !important; width: 100%; height: auto !important; padding: 24px; }
  .enf-card--pad20 { padding: 20px; }
  .enf-card__title { font-size: 24px; line-height: 32px; }
  .enf-invisible__col { flex: 0 0 auto; width: 100%; gap: 24px; }
  .enf-row__img { flex: 0 0 auto !important; width: 100%; height: 240px !important; background-size: cover !important; background-position: center !important; }
}

@media (max-width: 560px) {
  .enf-hero__title { font-size: 32px; line-height: 38px; }
  .enf-sec__title, .enf-intro__title, .enf-age__title,
  .enf-why__title { font-size: 28px; line-height: 34px; }
}