/* Le cabinet — styles de page.
   Construit section par section depuis les composants maîtres (Components).
   Chaque section ajoutée après validation à l'œil. */

/* ── HERO (section frame-427321441, 1440×543) ───────────────────────────────
   Image insérée (marge latérale 20px, top 42px), angles CARRÉS (source cornerRadius=0).
   Texte blanc + CTA OnDark superposés, alignés en BAS (counterAxis MAX du maître),
   répartis (SPACE_BETWEEN). Photo figée depuis photo-css (mode STRETCH). Pas de scrim. */
.cab-hero {
  padding: 66px 20px 0;                     /* image top calé sur Home (66px) : la capsule nav flottante s'intègre à l'identique (consigne « même nav sur le hero que la home, valable pour toutes les pages ») — source cab=42, relevé à 66 pour cohérence inter-pages */
}
.cab-hero__media {
  position: relative;
  height: 501px;
  background-image: url('../img/cabinet-hero.webp');
  background-repeat: no-repeat;
  background-size: 1400px 972.26px;         /* photo-css : STRETCH */
  background-position: 0 -378.17px;
  background-color: var(--c-blue);          /* repli avant chargement */
}
.cab-hero__inner {
  display: flex;
  align-items: flex-end;                    /* counterAxis MAX = bas */
  justify-content: space-between;           /* primaryAxis SPACE_BETWEEN */
  gap: 192px;                               /* itemSpacing maître */
  height: 100%;
  padding: 200px 80px 80px;                 /* pad maître 200/80/80/80 */
}
.cab-hero__text {
  display: flex;
  flex-direction: column;
  gap: 32px;                                /* itemSpacing bloc texte (maître) */
  max-width: 807px;
}
.cab-hero__title {
  margin: 0;
  font-family: var(--font-heading);         /* Nunito */
  font-weight: 200;                         /* maître ExtraLight */
  font-size: 80px;
  line-height: 88px;
  color: var(--neutral-0);
}
.cab-hero__sub {
  margin: 0;
  font-family: var(--font-body);            /* Inter */
  font-weight: 300;
  font-size: 18px;
  line-height: 28px;
  color: var(--neutral-0);
}

/* ── INTRO « Bienvenue » (section intro, 1440×472) ──────────────────────────
   2 colonnes : texte (629) + image (571), gap 80, marges latérales 80.
   Colonne texte centrée verticalement (image 472 fixe la hauteur de rangée).
   Espacements internes 48px (source : H2 y32→128, par. y176, CTA y392). */
.cab-intro {
  display: flex;
  align-items: center;                      /* colonne texte centrée vs image */
  gap: 80px;
  padding: 0 80px;
}
.cab-intro__text {
  flex: 0 0 629px;
  display: flex;
  flex-direction: column;
  gap: 48px;                                /* H2→par.→CTA : 48px (source) */
}
.cab-intro__title {
  margin: 0;
  font-family: var(--font-heading);         /* Nunito */
  font-weight: 300;
  font-size: 40px;
  line-height: 48px;
  color: #000;                              /* source #000000 */
}
.cab-intro__desc {
  margin: 0;
  font-family: var(--font-body);            /* Inter */
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: #000;                              /* source #000000 */
}
.cab-intro .cta { align-self: flex-start; } /* CTA hug-content, pas étiré */
.cab-intro__media {
  flex: 0 0 571px;
  height: 472px;
  border-radius: 16px;                      /* convention photo contenu (cf. Home) */
  background: url('../img/cabinet-intro.webp') center / cover no-repeat;
}

/* ── Rythme inter-sections (160px, identique à la Home) ─────────────────────
   Mesuré sur l'absolu Figma : intro→section équipe = 160. Appliqué à toutes
   les frontières de section + avant le footer. */
main > section + section { margin-top: 160px; }
main + .site-footer { margin-top: 160px; }

/* ── SECTION ÉQUIPE (frame-427321443, 1440×947) ─────────────────────────────
   Marges contenu 80/80 (largeur 1280), aucun padding vertical (947 = 432+112+403).
   2 sous-blocs séparés de 112px : praticien (photo+carte) puis traitements (en-tête+5 cartes). */
.cab-team {
  padding: 0 80px;
  display: flex;
  flex-direction: column;
  gap: 112px;                               /* écart entre praticien et traitements */
}

/* Praticien : photo 585×432 (r16) + gap 32 + carte biege 663×432 (r20, pad 48) */
.cab-prat {
  display: flex;
  gap: 32px;
}
.cab-prat__photo {
  flex: 0 0 585px;
  height: 432px;
  border-radius: 16px;
  background: url('../img/praticien-assayag.webp') center / cover no-repeat;
  background-color: var(--c-blue);          /* photo-css : FILL cover/center (node 4652:2351) */
}
.cab-prat__card {
  flex: 0 0 663px;
  height: 432px;
  box-sizing: border-box;
  padding: 48px;
  border-radius: 20px;
  background: var(--c-biege);               /* #FEFCF9 */
  display: flex;
  flex-direction: column;
  gap: 48px;                                /* en-tête → diplômes */
}
.cab-prat__head {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.cab-prat__name {
  margin: 0;
  font-family: var(--font-heading);         /* Nunito */
  font-weight: 300;
  font-size: 40px;
  line-height: 48px;
  color: var(--neutral-900);                /* #202020 */
}
.cab-prat__role {
  margin: 0;
  font-family: var(--font-heading);         /* Nunito */
  font-weight: 300;
  font-size: 24px;
  line-height: 28px;
  color: var(--neutral-900);
}
.cab-prat__diplomas {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 512px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cab-prat__diplomas li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--font-body);            /* Inter */
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: var(--neutral-900);
}
.cab-prat__arrow {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-top: 2px;                           /* recale la flèche sur la 1re ligne de texte (24px) */
  background: url('../img/arrow-diploma.svg') no-repeat center / contain;
}

/* Traitements : en-tête (texte + CTA navy) puis rangée de 5 cartes équipe */
.cab-tx {
  display: flex;
  flex-direction: column;
  gap: 48px;                                /* en-tête → cartes */
}
.cab-tx__head {
  display: flex;
  align-items: flex-start;                  /* CTA aligné en haut du H2 */
  justify-content: space-between;
  gap: 40px;
}
.cab-tx__title {
  margin: 0;
  max-width: 915px;
  font-family: var(--font-heading);         /* Nunito */
  font-weight: 300;
  font-size: 40px;
  line-height: 48px;
  color: #000;
}
.cab-tx__head .cta { flex: 0 0 auto; }

/* Rangée de 5 cartes (1280 plein, space-between → gap ≈ 22.5px) */
.cab-tx__cards {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
}

/* Carte équipe : photo plein-cadre (238×307, r12) + bloc titre épinglé en bas (pad 12) */
.team-card {
  position: relative;
  width: 238px;
  height: 307px;
  border-radius: 12px;
  overflow: hidden;
  box-sizing: border-box;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;                /* primaryAxis MAX = titre en bas */
  background: var(--c-blue);                /* repli avant chargement photo */
}
.team-card__photo {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;                    /* photo-css : FILL cover/center (Cards/Team) */
  background-position: center;
}
.team-card__title {
  position: relative;
  z-index: 1;
  width: 214px;
  display: flex;
  flex-direction: column;
}
.team-card__name {
  font-family: var(--font-heading);         /* Nunito */
  font-weight: 300;
  font-size: 28px;
  line-height: 36px;
  color: var(--neutral-0);
}
.team-card__job {
  font-family: var(--font-body);            /* Inter */
  font-weight: 300;
  font-size: 14px;
  line-height: 20px;
  color: var(--neutral-0);
}

/* ── POURQUOI NOUS CHOISIR (section intro, 1440×316) ────────────────────────
   Marges 80/80. Colonne gauche (H2 haut + CTA bas, répartis) + 3 lignes à droite. */
.cab-why {
  padding: 0 80px;
  display: flex;
  justify-content: space-between;           /* écart gauche→droite ≈ 265px (source) */
}
.cab-why__left {
  flex: 0 0 404px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;           /* H2 en haut, CTA en bas (col 316px) */
}
.cab-why__title {
  margin: 0;
  font-family: var(--font-heading);         /* Nunito */
  font-weight: 300;
  font-size: 40px;
  line-height: 48px;
  color: #000;
}
.cab-why__left .cta { align-self: flex-start; }
.cab-why__list {
  flex: 0 0 611px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;                                /* 112 - 92 (source) */
}
.cab-feat {
  height: 92px;
  box-sizing: border-box;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.cab-feat__icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;               /* icône 24 centrée dans le sélecteur 40 */
}
.cab-feat__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cab-feat__title {
  margin: 0;
  font-family: var(--font-heading);         /* Nunito */
  font-weight: 300;
  font-size: 24px;
  line-height: 28px;
  color: var(--neutral-900);                /* #202020 */
}
.cab-feat__desc {
  margin: 0;
  font-family: var(--font-body);            /* Inter */
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: var(--neutral-900);
}

/* ── DÉCOUVREZ LE CABINET (section orthodontie-pour-tous, 1440×720) ──────────
   En-tête centré + galerie 2 rangées (gap 32). Marges 80/80. */
.cab-discover {
  padding: 0 80px;
}
.cab-discover__head {
  max-width: 530px;
  margin: 0 auto 48px;                      /* centré ; 48px avant la galerie (source) */
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: center;
}
.cab-discover__title {
  margin: 0;
  font-family: var(--font-heading);         /* Nunito */
  font-weight: 300;
  font-size: 40px;
  line-height: 48px;
  color: #000;
}
.cab-discover__sub {
  margin: 0;
  font-family: var(--font-body);            /* Inter */
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: #000;
}
.cab-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}
.gal {
  height: 262px;
  border-radius: 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;                    /* défaut FILL (photo-css) */
  background-color: var(--c-blue);
}
.gal--w329 { flex: 0 0 329px; }
.gal--w558 { flex: 0 0 558px; }
.gal--w491 { flex: 0 0 491px; }
.gal--w345 { flex: 0 0 345px; }
.gal--w380 { flex: 0 0 380px; }
/* Recadrages STRETCH spécifiques (photo-css) */
.gal--s2 { background-size: 347.53px 262px; background-position: -9.27px 0; }
.gal--s3 { background-size: 558px 837px; background-position: 0 -339.6px; }

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

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

  /* INTRO */
  .cab-intro { flex-direction: column; align-items: stretch; gap: 24px; padding: 0 24px; }
  .cab-intro__text { flex: 1 1 auto; gap: 24px; }
  .cab-intro__title { font-size: 32px; line-height: 38px; }
  .cab-intro__media { flex: 0 0 auto; width: 100%; height: 260px; }

  /* ÉQUIPE */
  .cab-team { padding: 0 24px; gap: 64px; }
  .cab-prat { flex-direction: column; gap: 16px; }
  .cab-prat__photo { flex: 0 0 auto; width: 100%; height: 320px; background-size: cover; background-position: center top; }
  .cab-prat__card { flex: 0 0 auto; width: 100%; height: auto; padding: 32px 24px; gap: 32px; }
  .cab-prat__name { font-size: 32px; line-height: 38px; }
  .cab-prat__diplomas { width: auto; }

  .cab-tx__head { flex-direction: column; align-items: flex-start; gap: 24px; }
  .cab-tx__title { font-size: 32px; line-height: 38px; }
  .cab-tx__cards { flex-wrap: wrap; justify-content: center; gap: 16px; }
  .team-card { width: calc(50% - 8px); height: 300px; }

  /* POURQUOI NOUS CHOISIR */
  .cab-why { flex-direction: column; gap: 32px; padding: 0 24px; }
  .cab-why__left { flex: 1 1 auto; gap: 24px; }
  .cab-why__title { font-size: 32px; line-height: 38px; }
  .cab-why__list { flex: 1 1 auto; }
  .cab-feat { height: auto; padding: 0; align-items: flex-start; }

  /* DÉCOUVREZ LE CABINET */
  .cab-discover { padding: 0 24px; }
  .cab-discover__title { font-size: 32px; line-height: 38px; }
  .cab-gallery { flex-direction: column; gap: 16px; }
  .gal { flex: 0 0 auto !important; width: 100%; height: 220px; background-size: cover !important; background-position: center !important; }
}

@media (max-width: 560px) {
  .cab-hero__title { font-size: 32px; line-height: 38px; }
  .team-card { width: 100%; height: 320px; }
  .cab-intro__title, .cab-prat__name, .cab-tx__title,
  .cab-why__title, .cab-discover__title { font-size: 28px; line-height: 34px; }
}