/* Orthodontie invisible — styles de page.
   Construit section par section depuis les composants maîtres. Validation à l'œil. */

/* ── HERO (frame-427321420, 1440×543) ───────────────────────────────────────
   Image insérée (marge 20px), MIROIR horizontal (source imageTransform a=-1) appliqué
   sur un calque ::before pour ne pas retourner le texte. Échelle verticale d=0.5356
   → bgH≈935, posY≈-54. Titre Nunito 200 80/88 + sous-titre Inter 300 18/28, blancs,
   alignés en bas. CTA = skin A3 (héros). */
.inv-hero {
  padding: 66px 20px 0;                      /* image top calé sur Home/cabinet (66px) */
}
.inv-hero__media {
  position: relative;
  height: 501px;
  overflow: hidden;
  background-color: var(--c-blue);           /* repli avant chargement */
}
.inv-hero__media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('../img/invisible-hero.webp') no-repeat;
  background-size: 1403px 935px;             /* photo-css : a=-1, d=0.5356 */
  background-position: 0 -54px;
  transform: scaleX(-1);                     /* miroir horizontal (source) */
}
.inv-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;
}
.inv-hero__text {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 807px;
}
.inv-hero__title {
  margin: 0;
  font-family: var(--font-heading);          /* Nunito */
  font-weight: 200;                          /* ExtraLight (maître) */
  font-size: 80px;
  line-height: 88px;
  color: var(--neutral-0);
}
.inv-hero__sub {
  margin: 0;
  font-family: var(--font-body);             /* Inter */
  font-weight: 300;
  font-size: 18px;
  line-height: 28px;
  color: var(--neutral-0);
}

/* ── SECTION #1 « Qu’est-ce que… » (frame-427321448, 1440×872) ───────────────
   2 rangées texte/image alternées, séparées de 80px. Marges 80/80 (contenu 1280).
   R1 : texte 569 (gauche) + image 631 (droite, h424). R2 : image 569 (gauche, h368)
   + texte 631 (droite) avec CTA. Photos r16. */
.inv-what {
  padding: 0 80px;
  display: flex;
  flex-direction: column;
  gap: 80px;
}
.inv-what__row {
  display: flex;
  gap: 80px;
}
.inv-what__text {
  display: flex;
  flex-direction: column;
  gap: 24px;                                 /* espacement inter-paragraphes = ligne vide (lh 24) du nœud texte source */
}
.inv-what__row:not(.inv-what__row--rev) .inv-what__text { flex: 0 0 569px; }
.inv-what__row:not(.inv-what__row--rev) .inv-what__media { flex: 0 0 631px; height: 424px; }
.inv-what__row--rev .inv-what__media { flex: 0 0 569px; height: 368px; }
.inv-what__row--rev .inv-what__text { flex: 0 0 631px; justify-content: center; }
.inv-what__title {
  margin: 0 0 24px;                          /* +gap 24 = 48px H2→texte (conteneur source VERTICAL gap 48) */
  font-family: var(--font-heading);          /* Nunito */
  font-weight: 300;
  font-size: 40px;
  line-height: 48px;
  color: #000;
}
.inv-what__desc {
  margin: 0;
  font-family: var(--font-body);             /* Inter */
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: #000;
}
.inv-what__row--rev .cta { align-self: flex-start; margin-top: 8px; } /* +gap 24 = 32px texte→CTA (source : desc y792 → bouton y824) */
.inv-what__media {
  border-radius: 16px;
  background-color: var(--c-blue);           /* repli avant chargement */
  background-repeat: no-repeat;
}
.inv-what__media--aligneur {                 /* photo-css : STRETCH 779.9×424, pos -0.28 0 */
  background-image: url('../img/inv-s1-aligneur.webp');
  background-size: 779.9px 424px;
  background-position: -0.28px 0;
}
.inv-what__media--lunettes {                 /* photo-css : FILL */
  background-image: url('../img/inv-s1-lunettes.webp');
  background-size: cover;
  background-position: center;
}

/* ── SECTION #2 « Pourquoi choisir… » (frame-427321450, 1440×1108) ───────────
   Sous-bloc A (haut) : carte CRÈME (H2 + 3 bénéfices) 800 + photo 448 (h748, r16),
   gap 32. Sous-bloc B (bas, +80px) : carte NAVY 1280 (pad 48) : titre+CTA ghost à
   gauche, checklist 5 items (flèche crème + texte blanc) à droite. */
.inv-why { padding: 0 80px; }
.inv-why__top {
  display: flex;
  align-items: stretch;
  gap: 32px;
}
.inv-why__card {
  flex: 1 1 auto;
  box-sizing: border-box;
  padding: 48px;
  border-radius: 20px;
  background: var(--c-biege);                /* #FEFCF9 */
  display: flex;
  flex-direction: column;
  gap: 48px;                                 /* H2 → liste bénéfices */
}
.inv-why__title {
  margin: 0;
  font-family: var(--font-heading);          /* Nunito */
  font-weight: 300;
  font-size: 40px;
  line-height: 48px;
  color: var(--c-blue);                      /* navy (source) */
}
.inv-benefits {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.inv-benefit {
  display: flex;
  align-items: center;                       /* source counterAxis CENTER : icône centrée vs bloc texte */
  gap: 16px;
  padding: 16px;                             /* instance « Cards / iconstape » pad 16 (source) */
}
.inv-benefit__icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40px 40px;                 /* SVG viewBox 40 (icône 24 centrée) */
}
.inv-benefit__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.inv-benefit__title {
  margin: 0;
  font-family: var(--font-heading);          /* Nunito */
  font-weight: 300;
  font-size: 24px;
  line-height: 28px;
  color: var(--c-blue);
}
.inv-benefit__desc {
  margin: 0;
  font-family: var(--font-body);             /* Inter */
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: var(--neutral-900);                 /* #202020 */
}
.inv-why__media {
  flex: 0 0 448px;
  height: 748px;
  border-radius: 16px;
  background: url('../img/inv-s2-bouche.webp') center / cover no-repeat;
  background-color: var(--c-blue);
}
.inv-why__cases {
  margin-top: 80px;
  box-sizing: border-box;
  padding: 48px;
  border-radius: 20px;
  background: var(--c-blue);                 /* navy */
  display: flex;
  justify-content: space-between;
  gap: 40px;
}
.inv-cases__left {
  flex: 0 0 497px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;            /* titre en haut, CTA en bas */
}
.inv-cases__title {
  margin: 0;
  font-family: var(--font-heading);          /* Nunito */
  font-weight: 300;
  font-size: 28px;
  line-height: 36px;
  color: var(--neutral-0);
}
.inv-cases__left .cta { align-self: flex-start; }
.inv-cases__list {
  flex: 0 0 576px;                           /* source : icône x736 → texte-droite 1312 */
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;                                 /* pas 40px (source) − 24px texte = 16px */
}
.inv-cases__list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;                                  /* icône fin x760 → texte x768 (source) */
  font-family: var(--font-body);             /* Inter */
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: var(--neutral-0);
}
.inv-case__arrow {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  background: no-repeat center / 24px 24px;   /* inv-check.svg : flèche crème */
}

/* ── SECTION #3 « Un traitement en quatre étapes » (intro, 1440×588) ─────────
   Gauche : H2 + paragraphe (569). Droite : 4 « accordéons » (631, gap 20) :
   badge navy r8 numéroté (40) + corps (titre 20/400 + par.) + toggle cercle (40). */
.inv-steps {
  padding: 0 80px;
  display: flex;
  gap: 80px;
}
.inv-steps__intro {
  flex: 0 0 569px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.inv-steps__title {
  margin: 0;
  font-family: var(--font-heading);          /* Nunito */
  font-weight: 300;
  font-size: 40px;
  line-height: 48px;
  color: #000;
}
.inv-steps__desc {
  margin: 0;
  font-family: var(--font-body);             /* Inter */
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: #000;
}
.inv-steps__list {
  flex: 0 0 631px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.inv-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 12px;                             /* instance « Accordion » pad 12 (source) */
  border-radius: 12px;                       /* cornerRadius 12 (source) */
  background: var(--c-biege);                /* fond carte #FEFCF9 (source) */
}
.inv-step__num {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #497793;                        /* badge navy clair (source fill #497793) */
  color: var(--neutral-0);
  font-family: var(--font-heading);          /* Nunito */
  font-weight: 300;
  font-size: 24px;
  line-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.inv-step__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.inv-step__title {
  margin: 0;
  font-family: var(--font-heading);          /* Nunito */
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
  color: var(--neutral-900);
}
.inv-step__desc {
  margin: 0;
  font-family: var(--font-body);             /* Inter */
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: var(--neutral-900);
}
.inv-step__toggle {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  background: url('../img/inv-step-toggle.svg') no-repeat center / 40px 40px;
}

/* ── SECTION #4 « Une solution pour chaque âge » (traitements, 1440×440) ──────
   En-tête (H2 gauche + CTA A1 droite) puis 3 cartes (photo r16 h250 + légende
   Nunito 24/300). Marges 80/80 (contenu 1280). */
.inv-ages { padding: 0 80px; }
.inv-ages__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 48px;
}
.inv-ages__title {
  margin: 0;
  font-family: var(--font-heading);          /* Nunito */
  font-weight: 300;
  font-size: 40px;
  line-height: 48px;
  color: #000;
}
.inv-ages__cards {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 24px;
}
.inv-age-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.inv-age-card:nth-child(1) { flex: 0 0 413px; }
.inv-age-card:nth-child(2),
.inv-age-card:nth-child(3) { flex: 0 0 406px; }
.inv-age-card__media {
  height: 250px;
  border-radius: 16px;
  background-color: var(--c-blue);
  background-repeat: no-repeat;
}
.inv-age-card__media--enfant {              /* FILL */
  background-image: url('../img/inv-card-enfant.webp');
  background-size: cover;
  background-position: center;
}
.inv-age-card__media--ado {                 /* FILL */
  background-image: url('../img/inv-card-ado.webp');
  background-size: cover;
  background-position: center;
}
.inv-age-card__media--adulte {              /* photo-css : STRETCH 405.31×339.04, pos 0.1 -0.39 */
  background-image: url('../img/inv-card-adulte.webp');
  background-size: 405.31px 339.04px;
  background-position: 0.1px -0.39px;
}
.inv-age-card__cap {
  margin: 0;
  font-family: var(--font-heading);          /* Nunito */
  font-weight: 300;
  font-size: 24px;
  line-height: 28px;
  color: var(--neutral-900);
}

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

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

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

  /* SECTION #1 « Qu'est-ce que » */
  .inv-what { padding: 0 24px; gap: 64px; }
  .inv-what__row, .inv-what__row--rev { flex-direction: column; gap: 24px; }
  .inv-what__row:not(.inv-what__row--rev) .inv-what__text,
  .inv-what__row--rev .inv-what__text { flex: 1 1 auto; }
  .inv-what__row:not(.inv-what__row--rev) .inv-what__media,
  .inv-what__row--rev .inv-what__media { flex: 0 0 auto; width: 100%; height: 240px; background-size: cover; background-position: center; }
  .inv-what__title { font-size: 32px; line-height: 38px; }

  /* SECTION #2 « Pourquoi choisir » */
  .inv-why { padding: 0 24px; }
  .inv-why__top { flex-direction: column; gap: 16px; }
  .inv-why__card { padding: 32px 24px; gap: 32px; }
  .inv-why__title { font-size: 32px; line-height: 38px; }
  .inv-benefit { padding: 0; }
  .inv-why__media { flex: 0 0 auto; width: 100%; height: 320px; }
  .inv-why__cases { flex-direction: column; gap: 24px; padding: 32px 24px; }
  .inv-cases__left, .inv-cases__list { flex: 1 1 auto; }
  .inv-cases__left { gap: 20px; }

  /* SECTION #3 « Quatre étapes » */
  .inv-steps { flex-direction: column; gap: 32px; padding: 0 24px; }
  .inv-steps__intro, .inv-steps__list { flex: 1 1 auto; }
  .inv-steps__title { font-size: 32px; line-height: 38px; }

  /* SECTION #4 « Une solution pour chaque âge » */
  .inv-ages { padding: 0 24px; }
  .inv-ages__head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .inv-ages__title { font-size: 32px; line-height: 38px; }
  .inv-ages__cards { flex-direction: column; gap: 24px; }
  .inv-age-card { flex: 0 0 auto !important; }
  .inv-age-card__media { background-size: cover !important; background-position: center !important; }
}

@media (max-width: 560px) {
  .inv-hero__title { font-size: 32px; line-height: 38px; }
  .inv-what__title, .inv-why__title, .inv-steps__title, .inv-ages__title { font-size: 28px; line-height: 34px; }
}