/* Orthodontie adolescents — styles de page.
   Construit section par section depuis layout-plan + type-map + photo-css.
   Rythme inter-sections = 160px (identique aux autres pages).
   Images : galerie (enf-gal-1/2/3) + céramique (enf-classiques-ceramique) réutilisées
   (imageRefs identiques à enfants). hero, intro, métallique, gouttières, invisible-2,
   linguale et cas-traités n'ont PAS d'image extraite → placeholder navy (à remplacer). */

/* ── HERO (frame-427321420, 1440×543) ───────────────────────────────────────
   imageRef b67f6eb0 NON extrait (miroir + d=0.63, hors-scope) → placeholder navy.
   Titre Nunito 200 80/88 blanc bas-gauche, CTA rdv bas-droite. */
.ado-hero {
  padding: 66px 20px 0;
}
.ado-hero__media {
  position: relative;
  height: 501px;
  overflow: hidden;
  background-color: var(--c-blue);          /* repli avant chargement */
}
.ado-hero__media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('../img/ado-hero.webp') no-repeat;
  background-size: 1400px 798.76px;          /* photo-css STRETCH : |a|≈1, d=0.6272 */
  background-position: 0 -68.24px;
  transform: scaleX(-1);                     /* miroir horizontal (source a=-1) */
}
.ado-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 192px;
  height: 100%;
  padding: 200px 80px 80px;
}
.ado-hero__title {
  margin: 0;
  max-width: 937px;
  font-family: var(--font-heading);
  font-weight: 200;
  font-size: 80px;
  line-height: 88px;
  color: var(--neutral-0);
}

/* ── Texte courant (Inter 300 16/24, gras = <strong> 700) ───────────────────── */
.ado-intro__body p,
.ado-quel__body p,
.ado-feature__text p,
.ado-card__body p,
.ado-numbered__body p,
.ado-linguale__body p,
.ado-cas__desc p {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: var(--neutral-900);
}
.ado-intro__body p + p,
.ado-card__body p + p { margin-top: 24px; }
.ado-intro__body strong,
.ado-quel__body strong,
.ado-card__body strong,
.ado-linguale__body strong { font-weight: 700; }

/* Titres de section H2 (Nunito 300 40/48) ─────────────────────────────────── */
.ado-sec__title,
.ado-intro__title,
.ado-quel__title,
.ado-duree__title,
.ado-cas__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×328) — texte 715 + image 485×328 r16 ─────── */
.ado-intro {
  display: flex;
  align-items: flex-start;
  gap: 80px;
  padding: 0 80px;
}
.ado-intro__text {
  flex: 0 0 715px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.ado-intro__media {
  flex: 0 0 485px;
  height: 328px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--c-blue) url('../img/ado-intro.webp') no-repeat;   /* STRETCH : 634.45×423.02, pos -73.89/0.4 */
  background-size: 634.45px 423.02px;
  background-position: -73.89px 0.4px;
}

/* ── QUEL TRAITEMENT (orthodontie-pour-tous, 1440×456) ───────────────────────
   Carte navy (gauche, texte blanc) + 3 atouts (droite, icône + paragraphe foncé). */
.ado-quel {
  display: flex;
  align-items: stretch;
  gap: 80px;
  padding: 0 80px;
}
.ado-quel__card {
  box-sizing: border-box;
  flex: 0 0 575px;
  padding: 48px;
  border-radius: 20px;
  background: var(--c-blue);
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.ado-quel__card .ado-quel__title { color: var(--neutral-0); }
.ado-quel__body p { color: var(--neutral-0); }
.ado-quel__features {
  flex: 1;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
}
.ado-feature {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.ado-feature__ic {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  color: var(--c-light-blue);
}

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

/* ── QUELLE DURÉE (traitements, 1440×336) — texte+CTA (469) | 2 cartes num. ─── */
.ado-duree {
  display: flex;
  align-items: flex-start;
  gap: 80px;
  padding: 0 80px;
}
.ado-duree__left {
  flex: 0 0 469px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
}
.ado-duree__cards {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.ado-numbered {
  display: flex;
  gap: 28px;
}
.ado-numbered__badge {
  flex: 0 0 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--c-blue);
  color: var(--neutral-0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 24px;
  line-height: 36px;
}
.ado-numbered__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ado-numbered__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
  color: var(--neutral-900);
}

/* ── Titres de carte H3 (Nunito 300 28/36) ─────────────────────────────────── */
.ado-card__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 28px;
  line-height: 36px;
  color: var(--neutral-900);
}
.ado-card__title--light { color: var(--neutral-0); }
.ado-card__body--light p { color: var(--neutral-0); }

/* ── RANGÉES (classiques + invisibles) ─────────────────────────────────────── */
.ado-classic,
.ado-invisible {
  padding: 0 80px;
}
.ado-row {
  display: flex;
  align-items: stretch;
  gap: 80px;
  margin-top: 80px;
}
.ado-row--gap48 { margin-top: 48px; }
.ado-row--gap128 { margin-top: 128px; }
.ado-row__img {
  border-radius: 16px;
  background-color: var(--c-blue);
  background-repeat: no-repeat;
}

/* Carte (light / navy), r12 pad32 ─────────────────────────────────────────── */
.ado-card {
  box-sizing: border-box;
  padding: 32px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.ado-card--pad20 { padding: 20px; }
.ado-card--light { background: var(--c-biege); }
.ado-card--navy { background: var(--c-blue); }
.ado-card--824 { flex: 0 0 824px; }
.ado-card--570 { flex: 0 0 570px; }
.ado-card--548 { flex: 0 0 548px; }

/* Images des rangées (placeholder navy sauf céramique) ─────────────────────── */
.ado-img--cera  { flex: 0 0 364px; height: 444px;
  background: url('../img/enf-classiques-ceramique.webp') center / cover no-repeat; }
.ado-img--metal { flex: 0 0 618px; height: 228px;     /* STRETCH : 618×412.05, pos 0/-130.24 */
  background-image: url('../img/ado-metal.webp'); background-size: 618px 412.05px; background-position: 0 -130.24px; }
.ado-img--gout  { flex: 0 0 640px; height: 324px;     /* STRETCH : 640×426.72, pos 0/-102.3 */
  background-image: url('../img/ado-gout.webp'); background-size: 640px 426.72px; background-position: 0 -102.3px; }
.ado-img--inv2  { flex: 0 0 548px; height: 312px;
  background-image: url('../img/ado-inv2.webp'); background-size: cover; background-position: center; }
.ado-img--ling  { flex: 0 0 509px; height: 300px;     /* STRETCH : 509×339.37, pos 0/-19.69 */
  background-image: url('../img/ado-ling.webp'); background-size: 509px 339.37px; background-position: 0 -19.69px; }

/* Galerie : recadrages (mêmes images que enfants) ──────────────────────────── */
.ado-img--gal1 { background-image: url('../img/enf-gal-1.webp'); background-size: cover; background-position: center; }
.ado-img--gal2 { background-image: url('../img/enf-gal-2.webp'); background-size: cover; background-position: center; }
.ado-img--gal3 {
  background-image: url('../img/enf-gal-3.webp');
  background-size: 409px 613.5px;
  background-position: 0 -211.48px;
}

/* Invisibles — rangée 2 : image + colonne texte+CTA centrée ────────────────── */
.ado-invisible__col {
  flex: 0 0 640px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
}
.ado-invisible__cta { align-self: flex-start; }

/* Linguale — rangée 3 : carte navy (691) + image 509 ───────────────────────── */
.ado-linguale__card {
  box-sizing: border-box;
  flex: 0 0 691px;
  padding: 48px;
  border-radius: 20px;
  background: var(--c-blue);
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.ado-linguale__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 28px;
  line-height: 36px;
  color: var(--neutral-0);
}
.ado-linguale__body p { color: var(--neutral-0); }

/* ── EXEMPLES DE CAS TRAITÉS (frame-427321460, 1440×698) ─────────────────────
   Carte crème : info (gauche, centrée vert.) + image 372×442 flanquée de 2 flèches.
   CTA « Découvrez tous nos cas avant/après » → avant-apres.html sous la carte.
   ⚠ Le carrousel n'est PAS dans le prototype Figma : les flèches sont décoratives. */
.ado-cas {
  padding: 0 80px;
}
.ado-cas__panel {
  box-sizing: border-box;
  margin-top: 48px;
  padding: 32px;
  border-radius: 12px;
  background: var(--c-biege);
  display: flex;
  align-items: center;
  gap: 48px;
}
.ado-cas__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.ado-cas__case-title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 40px;
  line-height: 48px;
  color: var(--neutral-900);
}
.ado-cas__desc {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.ado-cas__desc-ic {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  color: var(--c-light-blue);
}
.ado-cas__carousel {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.ado-cas__arrow {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: var(--c-blue);
  color: var(--neutral-0);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}
.ado-cas__arrow svg { width: 16px; height: 16px; }
.ado-cas__img {
  flex: 0 0 372px;
  height: 442px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--c-blue) url('../img/ado-cas.webp') no-repeat;   /* STRETCH : 520.7×442, pos -60.77/0 */
  background-size: 520.7px 442px;
  background-position: -60.77px 0;
}
.ado-cas__cta { margin-top: 48px; }

/* ── Rythme inter-sections (160px) ─────────────────────────────────────────── */
main > section + section { margin-top: 160px; }
main + .site-footer { margin-top: 160px; }

/* ═════════════════════════════════════════════════════════════════════════
   RESPONSIVE Orthodontie adolescents — base flex, empilement colonne sur mobile.
   ═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  main > section + section { margin-top: 80px; }
  main + .site-footer { margin-top: 80px; }

  /* HERO */
  .ado-hero { padding: 66px 12px 0; }
  .ado-hero__media { height: auto; min-height: 420px; border-radius: 20px; }
  .ado-hero__inner { flex-direction: column; align-items: flex-start; gap: 24px; padding: 120px 24px 32px; }
  .ado-hero__title { max-width: 100%; font-size: 40px; line-height: 46px; }

  /* Titres réduits */
  .ado-sec__title, .ado-intro__title, .ado-quel__title,
  .ado-duree__title, .ado-cas__title, .ado-cas__case-title { font-size: 32px; line-height: 38px; }

  /* INTRO */
  .ado-intro { flex-direction: column; gap: 24px; padding: 0 24px; }
  .ado-intro__text { flex: 1 1 auto; gap: 24px; }
  .ado-intro__media { flex: 0 0 auto; width: 100%; height: 240px; background-size: cover; background-position: center; }

  /* QUEL TRAITEMENT */
  .ado-quel { flex-direction: column; gap: 24px; padding: 0 24px; }
  .ado-quel__card { flex: 0 0 auto; padding: 32px 24px; gap: 32px; }
  .ado-quel__features { flex: 1 1 auto; }

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

  /* QUELLE DURÉE */
  .ado-duree { flex-direction: column; gap: 32px; padding: 0 24px; }
  .ado-duree__left, .ado-duree__cards { flex: 1 1 auto; }

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

  /* EXEMPLES DE CAS : info, image (flèches déco masquées) */
  .ado-cas { padding: 0 24px; }
  .ado-cas__panel { flex-direction: column; align-items: stretch; gap: 24px; padding: 24px; }
  .ado-cas__info { flex: 1 1 auto; }
  .ado-cas__carousel { display: none; }
  .ado-cas__img { flex: 0 0 auto; width: 100%; height: 360px; background-size: cover; background-position: center; }
}

@media (max-width: 560px) {
  .ado-hero__title { font-size: 32px; line-height: 38px; }
  .ado-sec__title, .ado-intro__title, .ado-quel__title,
  .ado-duree__title, .ado-cas__title, .ado-cas__case-title { font-size: 28px; line-height: 34px; }
}