/* Page /livre-or — complète content-page.css déjà chargé (eyebrow/hgroup,
   CTA final, data-note, base de ul[data-quotes]/ul[data-logos] : déjà
   couverts). Cette page a ses propres variantes plus riches (photo +
   masonry pour les témoignages, libellé sous les logos partenaires,
   bandeau partenaires compact) — surchargées ici avec les mêmes sélecteurs.
   Repris de moltow-08-2026/livre-or/index.html. */

/* content-page.css pose Poppins sur body (voulu pour ses autres pages, voir
   son propre commentaire) mais la maquette de cette page a la police
   système (comme shop/home/styles-collections, déjà corrigés ce chantier —
   décision Poppins générale toujours en attente, voir memory
   moltow_css_redesign). */
body {
  margin: 0;
  line-height: 1.6;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

main > section[aria-label='Introduction'] {
  padding-block: 2.2rem 2.4rem;
  text-align: center;
}
main > section[aria-label='Introduction'] > hgroup {
  margin-bottom: 0;
}
main > section[aria-label='Introduction'] h1 {
  font-size: clamp(1.65rem, 1.35rem + 1.2vw, 2.25rem);
}
/* content-page.css donne var(--step-1) (24px) via `hgroup > p:last-child`
   (:last-child compte comme une pseudo-classe, donc plus spécifique qu'un
   simple `hgroup > p` — piège déjà rencontré ailleurs ce chantier avec
   :first-of-type, voir memory moltow_css_redesign). Même piège trouvé sur la
   règle `[data-bande-partenaires] hgroup > p` plus bas (déjà présente mais
   sans :last-child, donc battue en silence par content-page.css — corrigé
   là aussi). La maquette resserre le lead du hero à 1.02rem — scopé à cette
   seule section plutôt qu'un `main section > hgroup > p` générique. */
main > section[aria-label='Introduction'] hgroup > p:last-child {
  font-size: 1.02rem;
}

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

/* Logos partenaires avec libellé sous chaque logo (variante enrichie) */
main ul[data-logos] {
  align-items: end;
}
main ul[data-logos] > li {
  display: grid;
  justify-items: center;
  gap: 0.45rem;
  text-align: center;
}
main ul[data-logos] img {
  opacity: 0.75;
}
main ul[data-logos] small {
  font-size: 0.72rem;
  color: var(--ink-mute);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
main ul[data-logos] small > b {
  color: var(--terra);
  font-size: 0.95rem;
}

/* Bandeau partenaires compact (juste après le hero) */
[data-bande-partenaires] {
  padding-block: 1.6rem 1.8rem !important;
  border-block: 1px solid var(--line);
  background: var(--bg) !important;
}
[data-bande-partenaires] hgroup {
  text-align: center;
  margin-bottom: 1rem !important;
  max-width: none !important;
}
[data-bande-partenaires] [data-eyebrow] {
  display: none;
}
[data-bande-partenaires] h2 {
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-mute) !important;
  margin: 0 0 0.2rem;
}
/* Maquette : eyebrow + lead du hgroup masqués dans ce bandeau compact (seul
   le h2 reste visible) — display:none!important repris tel quel. Le
   display:block!important qui était ici avant écrasait ce masquage pour
   tout hgroup>p (dont l'eyebrow, déjà visé par la règle [data-eyebrow]
   ci-dessus, donc rendue sans effet) — repéré par Katia. */
[data-bande-partenaires] hgroup > p,
[data-bande-partenaires] hgroup > p:last-child {
  display: none !important;
}
[data-bande-partenaires] ul {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start !important;
  gap: 0.6rem clamp(1.6rem, 3.5vw, 3.2rem);
}
[data-bande-partenaires] li {
  text-align: center;
}
[data-bande-partenaires] img {
  height: 20px !important;
  width: auto !important;
  margin-inline: auto;
  filter: grayscale(1);
  opacity: 0.7;
  transition: 0.15s;
}
[data-bande-partenaires] li:hover img {
  filter: none;
  opacity: 1;
}
/* Maquette : ces règles ciblent <li> b (le nombre de logements, en gras),
   pas <li> small (l'élément qui l'entoure, déjà à .72rem par la règle
   générique ul[data-logos] small plus haut, correcte) — mauvais sélecteur
   au premier portage, repéré par Katia. */
[data-bande-partenaires] li b {
  margin: 0.3rem 0 0;
  font-size: 0.62rem !important;
  color: var(--ink-mute);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}
/* Maquette : <p data-note> masqué dans ce bandeau compact — même piège de
   display:block!important que hgroup>p ci-dessus. */
[data-bande-partenaires] > p {
  display: none !important;
}

/* Témoignages : masonry en colonnes CSS (au lieu de la grille générique),
   avec photo optionnelle et note d'avis en étoiles */
main ul[data-quotes] {
  display: block;
  columns: 19rem 3;
  column-gap: var(--gutter);
}
main ul[data-quotes] > li {
  break-inside: avoid;
  margin: 0 0 var(--gutter);
  display: block;
}
main ul[data-quotes] figure {
  display: block;
  height: auto;
  padding: 1.4rem 1.35rem;
}
main ul[data-quotes] figure > img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 1rem;
  display: block;
}
main ul[data-quotes] blockquote {
  margin: 0 0 1rem;
  /* content-page.css met var(--step-0) (18.08px) ; la maquette de cette page
     resserre à var(--step--1) (14.72px). */
  font-size: var(--step--1);
}
main ul[data-quotes] blockquote::before {
  content: none;
}
main ul[data-quotes] blockquote p {
  margin-bottom: 0.6em;
}
main ul[data-quotes] figcaption {
  border-top: 1px solid var(--line);
  padding-top: 0.8rem;
}
main ul[data-quotes] figcaption [data-note-avis] {
  display: block;
  color: var(--amber);
  letter-spacing: 0.15em;
  font-size: 0.82rem;
  margin-bottom: 0.2rem;
}
main ul[data-quotes] figcaption [data-note-avis] mark {
  background: none;
  color: var(--amber);
}
main ul[data-quotes] figcaption small {
  display: block;
  font-style: italic;
  margin-top: 0.15rem;
}
main ul[data-quotes] figcaption a {
  display: inline-block;
  margin-top: 0.5rem;
}

/* content-page.css met var(--step-3) (52.8px) au h2 générique ; la maquette
   resserre celui du bandeau CTA final de cette page à ce clamp plus petit. */
main section h2 {
  font-size: clamp(1.45rem, 1.15rem + 1.1vw, 1.9rem);
}