/* Le plateau technique — styles de page.
   Construit section par section depuis layout-plan.json + type-map.json + photo-css.json.
   JAMAIS à la lecture visuelle du desktop.png. Validation à l'œil (harness).
   Rythme inter-sections = 160px (identique aux autres pages). */

/* ── Corps de paragraphe (Inter 300 16/24 #202020 ; blanc sur navy) ────────── */
.pla-body p {
  margin: 0;
  font-family: var(--font-body);             /* Inter */
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: var(--neutral-900);                 /* #202020 */
}
.pla-body p + p { margin-top: 24px; }

/* ── Titres de section (Nunito 300 40/48 #202020 ; variantes blanches) ─────── */
.pla-intro__title,
.pla-diag__title,
.pla-scan__title,
.pla-imaging__title,
.pla-tech__title,
.pla-hygiene__title {
  margin: 0;
  font-family: var(--font-heading);          /* Nunito */
  font-weight: 300;
  font-size: 40px;
  line-height: 48px;
  color: var(--neutral-900);
}

/* ── HERO (frame-427321420, 1440×431) ───────────────────────────────────────
   Image insérée (marge 20px), FILL cover/center (photo-css 4871:2334).
   Titre Nunito 200 80/88 blanc bas-gauche, CTA bas-droite. Pas de sous-titre.
   Fond peint en direct (eager) : LCP + visible au harness. */
.pla-hero {
  padding: 66px 20px 0;                       /* marge sup. alignée sur la HOME (.hero__media top:66px) pour que la nav fixe « flotte » pareil. Diverge du y42 de la réf plateau : décision Pou (home = réf nav). Marge latérale 20 (layout-plan). */
}
.pla-hero__media {
  position: relative;                        /* ancre le voile */
  height: 389px;                             /* layout-plan h389 */
  border-radius: 0;
  background: url('../img/plateau-hero.webp') center / cover no-repeat;
  background-color: var(--c-blue);           /* repli avant chargement */
}
/* Voile assombrissant UNIFORME (lisibilité titre) : non capté par photo-css (filters:null).
   Décision Pou : une seule couche constante, calée pour ramener le HAUT ~105 (réf). */
.pla-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  pointer-events: none;
}
.pla-hero__inner {
  position: relative;                        /* au-dessus du voile */
  z-index: 1;
  display: flex;
  align-items: flex-end;                     /* contenu calé en bas */
  justify-content: space-between;            /* titre gauche / CTA droite */
  gap: 80px;
  height: 100%;
  padding: 200px 80px 80px;                  /* titre bas à 80 du bas, marge 80 (layout-plan) */
}
.pla-hero__title {
  margin: 0;
  max-width: 987px;                          /* layout-plan w987 */
  font-family: var(--font-heading);
  font-weight: 200;                          /* ExtraLight (maître) */
  font-size: 80px;
  line-height: 88px;
  color: var(--neutral-0);
}

/* ── INTRO (frame-427321437, 1440×472) — texte 715 + image 485×472 r16 ─────── */
.pla-intro {
  display: flex;
  align-items: center;                       /* bloc texte centré vert. (32 haut = 32 bas) */
  gap: 80px;
  padding: 0 80px;
}
.pla-intro__text {
  flex: 0 0 715px;
  display: flex;
  flex-direction: column;
  gap: 48px;                                 /* H2 → corps → CTA (source 48) */
}
.pla-intro__media {
  flex: 0 0 485px;
  height: 472px;
  border-radius: 16px;
  background-color: var(--c-blue);
}
.pla-intro__cta { align-self: flex-start; }

/* ── DIAGNOSTIC (orthodontie-pour-tous, 1440×312) — bande navy r20 pad48 ─────
   Grille : titre pleine largeur (row1) ; row2 = CTA (col1, bas) + corps (col2). */
.pla-diag { padding: 0 80px; }
.pla-diag__card {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 416px 768px;        /* corps démarre à x416 (layout-plan) */
  column-gap: 0;
  row-gap: 48px;
  padding: 48px;
  border-radius: 20px;
  background: var(--c-blue);                 /* #2B5273 */
}
.pla-diag__title {
  grid-column: 1 / -1;
  color: var(--neutral-0);
}
.pla-diag__cta { align-self: end; justify-self: start; }   /* col1 row2, calé bas */
.pla-diag__body p { color: var(--neutral-0); }             /* texte blanc sur navy */

/* ── SCANNERS (frame-427321453, 1440×428) — image 485×428 r16 + texte 715 ─── */
.pla-scan {
  display: flex;
  align-items: center;                       /* bloc texte centré vert. (70 haut = 70 bas) */
  gap: 80px;
  padding: 0 80px;
}
.pla-scan__media {
  flex: 0 0 485px;
  height: 428px;
  border-radius: 16px;
  background-color: var(--c-blue);
}
.pla-scan__text {
  flex: 0 0 715px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.pla-scan__cta { align-self: flex-start; }

/* ── IMAGERIE (orthodontie-pour-tous, 1440×312) — carte navy 575 + carte crème 625 */
.pla-imaging {
  display: flex;
  align-items: stretch;                      /* deux cartes pleine hauteur 312 */
  gap: 80px;
  padding: 0 80px;
}
.pla-imaging__navy {
  box-sizing: border-box;
  flex: 0 0 575px;
  display: flex;
  flex-direction: column;
  gap: 48px;                                 /* titre → intro (source) */
  padding: 48px;
  border-radius: 20px;
  background: var(--c-blue);
}
.pla-imaging__title { color: var(--neutral-0); }
.pla-imaging__intro p { color: var(--neutral-0); }
.pla-imaging__cream {
  box-sizing: border-box;
  flex: 0 0 625px;
  display: flex;
  flex-direction: column;
  gap: 24px;                                 /* liste → paragraphe de clôture (source) */
  padding: 42px 24px;
  border-radius: 20px;
  background: var(--c-biege);                /* #FEFCF9 */
}
.pla-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 24px;                                 /* pitch de rang 52 = 28 (icône) + 24 */
}
.pla-list li {
  display: flex;
  align-items: center;
  gap: 8px;                                  /* icône → libellé (759+28 → 795) */
  min-height: 28px;
}
.pla-list__ic { flex: 0 0 28px; width: 28px; height: 28px; line-height: 0; }
.pla-list__txt {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: var(--neutral-900);
}

/* ── TECHNOLOGIE (frame-427321454, 1440×304) — image STRETCH 526×304 r16 + texte 674 */
.pla-tech {
  display: flex;
  align-items: center;                       /* bloc texte centré vert. dans le nœud h304 */
  gap: 80px;
  padding: 0 80px;
}
.pla-tech__media {
  flex: 0 0 526px;
  height: 304px;
  border-radius: 16px;
  background-color: var(--c-blue);
}
.pla-tech__text {
  flex: 0 0 674px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* ── HYGIÈNE (orthodontie-pour-tous, 1440×408) — carte crème 705 + image 481×408 r16
   Colonnes non symétriques (image s'arrête à 94 du bord droit) → flex-start. */
.pla-hygiene {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: 80px;
  padding: 0 80px;
}
.pla-hygiene__card {
  box-sizing: border-box;
  flex: 0 0 705px;
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: 48px;
  border-radius: 20px;
  background: var(--c-biege);
}
.pla-hygiene__cta { align-self: flex-start; }
.pla-hygiene__media {
  flex: 0 0 481px;
  height: 408px;
  border-radius: 16px;
  background-color: var(--c-blue);
}

/* ── Recadrages photo (photo-css : FILL cover, sauf S6 STRETCH) ────────────── */
.pla-img--intro {
  background: url('../img/plateau-s2.webp') center / cover no-repeat;
}
.pla-img--scan {
  background: url('../img/plateau-s4.webp') center / cover no-repeat;
}
.pla-img--tech {
  background: url('../img/plateau-s6.webp') no-repeat;
  background-size: 526px 621.52px;           /* photo-css STRETCH (4873:2659) */
  background-position: 0 -256.56px;
}
.pla-img--hygiene {
  background: url('../img/plateau-s7.webp') center / cover no-repeat;
}

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

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

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

  /* Titres de section réduits */
  .pla-intro__title, .pla-diag__title, .pla-scan__title,
  .pla-imaging__title, .pla-tech__title, .pla-hygiene__title {
    font-size: 32px; line-height: 38px;
  }

  /* INTRO */
  .pla-intro { flex-direction: column; align-items: stretch; gap: 24px; padding: 0 24px; }
  .pla-intro__text { flex: 1 1 auto; gap: 24px; order: 1; }
  .pla-intro__media { flex: 0 0 auto; order: 2; width: 100%; height: 260px; }

  /* DIAGNOSTIC (carte navy) → colonne unique */
  .pla-diag { padding: 0 24px; }
  .pla-diag__card { grid-template-columns: 1fr; row-gap: 24px; padding: 32px 24px; }
  .pla-diag__cta { justify-self: start; align-self: start; }

  /* SCANNERS : texte d'abord, image ensuite */
  .pla-scan { flex-direction: column; align-items: stretch; gap: 24px; padding: 0 24px; }
  .pla-scan__text { flex: 1 1 auto; gap: 24px; order: 1; }
  .pla-scan__media { flex: 0 0 auto; order: 2; width: 100%; height: 260px; }

  /* IMAGERIE : cartes empilées */
  .pla-imaging { flex-direction: column; align-items: stretch; gap: 16px; padding: 0 24px; }
  .pla-imaging__navy, .pla-imaging__cream { flex: 0 0 auto; width: 100%; }
  .pla-imaging__navy { padding: 32px 24px; gap: 32px; }

  /* TECHNOLOGIE : texte d'abord, image ensuite */
  .pla-tech { flex-direction: column; align-items: stretch; gap: 24px; padding: 0 24px; }
  .pla-tech__text { flex: 1 1 auto; gap: 24px; order: 1; }
  .pla-tech__media {
    flex: 0 0 auto; order: 2; width: 100%; height: 260px;
    background-size: cover; background-position: center;   /* mobile : recadrage simple */
  }

  /* HYGIÈNE : carte d'abord, image ensuite */
  .pla-hygiene { flex-direction: column; align-items: stretch; gap: 24px; padding: 0 24px; }
  .pla-hygiene__card { flex: 0 0 auto; width: 100%; padding: 32px 24px; gap: 32px; }
  .pla-hygiene__media { flex: 0 0 auto; order: 2; width: 100%; height: 260px; }
}

@media (max-width: 560px) {
  .pla-hero__title { font-size: 32px; line-height: 38px; }
  .pla-intro__title, .pla-diag__title, .pla-scan__title,
  .pla-imaging__title, .pla-tech__title, .pla-hygiene__title {
    font-size: 28px; line-height: 34px;
  }
}