/* Mise en page propre à la famille "Pour qui ?" (moltow-08-2026/pour-qui/*) :
   hero éditorial 2 colonnes avec carte prix superposée sur l'image, stats en
   ligne dans le hero, ajustements mobile dédiés. Bloc identique en MD5 sur
   5/9 pages sources, quasi-identique sur les 4 autres. Nécessite tokens.css
   et content-page.css (chargés avant). */

/* Police système plutôt que Poppins sur ce lot précisément (demande de
   Katia 2026-08-28, confirmée explicitement après clarification — écart
   assumé avec le reste du site, qui reste en Poppins) : le 800 (ExtraBold)
   de Poppins rend visiblement plus épais que le 800 de la police système,
   ce qui n'apparaît pas dans la maquette (dont le body ne charge jamais
   Poppins). Chargé après content-page.css : gagne par ordre de source,
   scopé aux 9 pages "pour qui" uniquement — content-page.css garde Poppins
   pour ses autres pages (contact/faq/légales/pourquoi-moltow/...). */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: var(--step-0);
}

/* Titre du hero : taille maîtrisée */
main > section[aria-label='Introduction'] h1 {
  font-size: clamp(1.9rem, 1.45rem + 1.7vw, 2.55rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  max-width: 16ch;
}
main > section[aria-label='Introduction'] > hgroup > p:last-child {
  font-size: var(--step-0);
}
@media (min-width: 769px) {
  main > section:first-of-type {
    padding-block: 2rem 2.6rem;
  }
  main > section:first-of-type h1 {
    font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.6rem);
  }
}

/* Hero éditorial en deux colonnes */
main > section[aria-label='Introduction'] {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  grid-template-areas: 'head img' 'actions img' 'stats img';
  column-gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
}
main > section[aria-label='Introduction'] > hgroup {
  grid-area: head;
  text-align: left;
  margin: 0 0 1.6rem;
  max-width: none;
}
main > section[aria-label='Introduction'] > hgroup > p {
  margin-inline: 0;
}
main > section[aria-label='Introduction'] > hgroup > p:last-child {
  font-size: var(--step-0);
  color: var(--ink-soft);
  max-width: 34rem;
}
main > section[aria-label='Introduction'] > nav {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-self: start;
}
main > section[aria-label='Introduction'] > figure {
  grid-area: img;
  margin: 0;
  position: relative;
}
main > section[aria-label='Introduction'] > figure > img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  width: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}
@media (max-width: 60rem) {
  main > section[aria-label='Introduction'] {
    grid-template-columns: 1fr;
    grid-template-areas: 'head' 'actions' 'stats' 'img';
    row-gap: 1.6rem;
  }
}

/* Carte prix superposée sur l'image du hero */
main > section[aria-label='Introduction'] > figure > figcaption {
  position: absolute;
  inset-block-end: 1.1rem;
  inset-inline-start: -1.1rem;
  margin: 0;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  border-radius: 18px;
  padding: 0.95rem 1.35rem;
  display: grid;
  gap: 0.15rem;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-soft);
  max-width: min(85%, 22rem);
}
main > section[aria-label='Introduction'] > figure > figcaption > b {
  font-size: var(--step-2);
  font-weight: 900;
  color: var(--terra);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
main > section[aria-label='Introduction'] > figure > figcaption > small {
  font-weight: 500;
  font-size: 0.72rem;
  color: var(--ink-mute);
}
@media (max-width: 40rem) {
  main > section[aria-label='Introduction'] > figure > figcaption {
    inset-inline-start: 0.8rem;
    inset-inline-end: 0.8rem;
  }
}

/* Mini-stats en ligne dans le hero */
main dl[data-stats] {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.4rem 0 !important;
  align-items: stretch;
  margin: 1.8rem 0;
}
main dl[data-stats] > dt {
  display: none;
}
main dl[data-stats] > dd {
  margin: 0 !important;
  padding: 0.1rem 1.5rem !important;
  font-weight: 800;
  font-size: 1.02rem !important;
  border-left: 1px solid var(--line);
  white-space: nowrap;
}
main dl[data-stats] > dd:first-of-type {
  padding-left: 0 !important;
  border-left: 0;
}
main dl[data-stats] > dd::after {
  content: attr(data-label);
  display: block;
  margin-top: 0.2rem;
  font-size: 0.6rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  color: var(--ink-mute);
  white-space: nowrap;
}
main dl[data-stats] a:hover {
  color: var(--terra);
}

/* CTA hero en 2 versions (texte long/court) — utilisé par bail-mobilite ;
   sans effet sur les pages qui n'ont pas ces classes dans leur nav du hero. */
.cta-sm {
  display: none;
}
@media (max-width: 760px) {
  .cta-lg {
    display: none;
  }
  .cta-sm {
    display: inline;
  }
}

/* Ajustements mobile du hero */
@media (max-width: 760px) {
  main section[aria-label='Introduction'] {
    padding: 1.7rem 1.2rem 1.7rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  main section[aria-label='Introduction'] [data-eyebrow] {
    display: none !important;
  }
  main section[aria-label='Introduction'] hgroup {
    margin: 0 !important;
  }
  main section[aria-label='Introduction'] h1 {
    font-size: clamp(1.55rem, 7vw, 1.9rem) !important;
    line-height: 1.15 !important;
    margin: 0 0 0.35em !important;
  }
  main section[aria-label='Introduction'] hgroup p:last-of-type {
    font-size: 0.95rem !important;
    line-height: 1.45 !important;
    margin: 0 0 1rem !important;
  }
  main section[aria-label='Introduction'] > nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    gap: 0.6rem;
    width: 100%;
    margin: 0 0 1.1rem !important;
  }
  main section[aria-label='Introduction'] > nav a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    padding: 0.75rem 0.4rem;
    font-size: 0.86rem;
    white-space: nowrap;
  }
  main section[aria-label='Introduction'] > dl {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: auto auto;
    grid-auto-flow: column;
    column-gap: 0.8rem;
    row-gap: 0.05rem;
    width: 100%;
    max-width: 100%;
    margin: 0 0 0.9rem !important;
    padding: 0.2rem 0 0 !important;
    border: 0 !important;
  }
  main section[aria-label='Introduction'] > dl dt {
    grid-row: 2;
    font-size: 0.64rem;
    line-height: 1.25;
    color: var(--ink-mute);
    margin: 0;
    white-space: normal;
  }
  main section[aria-label='Introduction'] > dl dd {
    grid-row: 1;
    font-size: 0.92rem;
    font-weight: 800;
    margin: 0;
    white-space: normal;
  }
  /* évite un double-liseré entre étiquette et valeur sur certaines pages */
  main section[aria-label='Introduction'] > dl dt,
  main section[aria-label='Introduction'] > dl dd {
    border: 0 !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
  main section[aria-label='Introduction'] > figure {
    position: relative;
    margin: 0.4rem 0 0 !important;
    padding: 0 !important;
  }
  main section[aria-label='Introduction'] > figure img {
    width: 100%;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 14px;
  }
  main section[aria-label='Introduction'] > figure figcaption {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    margin: 0.65rem 0 0 !important;
    max-width: none !important;
    box-shadow: 0 6px 18px rgba(23, 24, 74, 0.08);
  }
  /* bandeaux de stats ailleurs dans la page : 2 colonnes qui ne débordent plus */
  main section:not([aria-label='Introduction']) > dl {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;
    gap: 1rem;
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    justify-items: center;
    text-align: center !important;
  }
  main section:not([aria-label='Introduction']) > dl dt {
    display: none !important;
  }
  main section:not([aria-label='Introduction']) > dl dd {
    white-space: normal !important;
    margin: 0 !important;
    text-align: center !important;
    font-weight: 800;
    font-size: 1.15rem;
    border: 0 !important;
    padding: 0 !important;
    width: 100%;
  }
  main section:not([aria-label='Introduction']) > dl dd::after {
    display: block;
    white-space: normal !important;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--ink-mute);
    margin-top: 0.15rem;
    text-transform: none;
  }
  main dl dd::after {
    white-space: normal !important;
  }
  main dl dd {
    white-space: normal !important;
  }
}