.positionnement { background: #f1ede5; color: #24221f; padding: 3rem clamp(1rem, 3vw, 3rem); scroll-margin-top: 5rem; }
.positionnement__eyebrow { margin: 0; text-align: center; font-size: .8rem; letter-spacing: .08em; color: #625c54; }
.positionnement iframe { display: block; width: 100%; max-width: 1440px; height: 1000px; margin: auto; border: 0; background: transparent; }
.positionnement__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem 2rem; margin-top: 1.5rem; }
.positionnement__actions a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-underline-offset: .3em; }
@media (max-width: 700px) { .positionnement { padding: 2rem .5rem; } .positionnement iframe { height: 1550px; } .positionnement__actions { padding-inline: 1rem; } }

/* Keep the original touch presentation; the desktop copy lives beside the diagram. */
.positionnement__title, .positionnement__description { display: none; }
@media (min-width: 1024px), (hover: hover) and (pointer: fine) {
  .maison-page .positionnement {
    box-sizing: border-box;
    height: calc(100svh - var(--site-header-height, 6rem));
    display: grid;
    grid-template-columns: minmax(0, .36fr) minmax(0, .64fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "copy visual" "actions visual";
    gap: clamp(16px, 2vw, 32px);
    padding: clamp(16px, 3vh, 40px) var(--material-gutter);
    scroll-margin-top: var(--site-header-height, 6rem);
  }
  .positionnement__copy { grid-area: copy; align-self: end; }
  .positionnement__eyebrow { text-align: left; margin-bottom: 24px; font-size: .875rem; letter-spacing: 0; }
  .maison-page .positionnement__title { display: block; font-size: clamp(2rem, 3.2vw, 3.8rem); line-height: 1.08; letter-spacing: -.04em; }
  .positionnement__title span { display: block; color: #82705a; }
  .positionnement__description { display: block; max-width: 27rem; margin: 24px 0 0; color: #625c54; font-size: 1rem; line-height: 1.6; }
  .maison-page .positionnement iframe { grid-area: visual; height: 100%; min-height: 0; min-width: 0; }
  .maison-page .positionnement__actions {
    grid-area: actions; align-self: start; justify-content: flex-start;
    flex-direction: column; align-items: flex-start; gap: 0; margin: 0; padding: 0;
    font-size: .9375rem;
  }
}
/* Follow the site's stacked sections in a narrow desktop preview, while keeping
   the editorial copy left aligned and the complete diagram within one screen. */
@media (max-width: 899px) and (hover: hover) and (pointer: fine) {
  .maison-page .positionnement {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "copy" "visual" "actions";
    gap: 8px; padding: 12px var(--material-gutter);
  }
  .positionnement__eyebrow { margin-bottom: 10px; font-size: .75rem; }
  .maison-page .positionnement__title { font-size: clamp(1.375rem, 3.7vw, 2rem); }
  .positionnement__description { margin-top: 10px; font-size: .875rem; }
  .maison-page .positionnement__actions { flex-direction: row; gap: 0 24px; font-size: .8125rem; }
}

/* Touch devices keep the editorial title outside the compact animation too. */
@media (max-width: 1023px) and (hover: none) {
  .maison-page .positionnement { padding: 16px 12px; scroll-margin-top: var(--site-header-height, 6rem); }
  .positionnement__copy { padding-inline: 12px; }
  .positionnement__eyebrow { text-align: left; margin-bottom: 12px; font-size: .75rem; letter-spacing: 0; }
  .maison-page .positionnement__title { display: block; font-size: 1.5rem; line-height: 1.1; }
  .positionnement__title span { display: block; color: #82705a; }
  .positionnement__description { display: block; margin: 12px 0 8px; font-size: .875rem; line-height: 1.5; color: #625c54; }
  .maison-page .positionnement iframe { height: 580px; }
  .maison-page .positionnement__actions { justify-content: flex-start; gap: 0 16px; margin-top: 8px; padding-inline: 12px; font-size: .75rem; }
}