/* ============================================================
   Mises en page — variations d'agencement de la Variante B
   Le style visuel (couleurs/typo/arrondi) ne change pas.
   Activé par une classe sur .page : layout-centre / layout-zigzag / layout-mag
   Tout est sous @media (min-width:981px) pour ne pas casser le mobile.
   ============================================================ */

@media (min-width: 981px) {

/* =========================================================
   A · CENTRÉ — colonne unique, symétrie, bandeaux larges
   ========================================================= */
.layout-centre .section-head {
  grid-template-columns: 1fr; justify-items: center; text-align: center;
  gap: 22px; max-width: 760px; margin: 0 auto;
}
.layout-centre .section-head .lede { margin: 0 auto; }
.layout-centre .eyebrow { justify-content: center; }

/* hero */
.layout-centre .hero-grid {
  grid-template-columns: 1fr; gap: 0; max-width: 940px; margin: 0 auto; text-align: center;
}
.layout-centre .hero-grid > div:first-child { display: flex; flex-direction: column; align-items: center; }
.layout-centre .hero h1 { max-width: 14ch; }
.layout-centre .hero .lede { margin-left: auto; margin-right: auto; }
.layout-centre .hero-actions { justify-content: center; }
.layout-centre .trust-strip { justify-content: center; flex-wrap: wrap; }
.layout-centre .hero-portrait {
  width: 100%; aspect-ratio: 16 / 7; margin-top: 52px;
}
.layout-centre .hero-meta { justify-content: center; gap: 56px; }

/* studio */
.layout-centre .studio-inner {
  grid-template-columns: 1fr; max-width: 880px; margin: 0 auto; text-align: center; gap: 48px;
}
.layout-centre .studio-gallery { height: 440px; max-width: 760px; margin: 0 auto; width: 100%; }
.layout-centre .studio-stats { justify-content: center; }

/* bénéfices — cartes centrées */
.layout-centre .benefice { text-align: center; align-items: center; }
.layout-centre .benefice .b-head { width: 100%; justify-content: center; gap: 18px; align-items: center; }
.layout-centre .benefice .b-list { text-align: left; }
.layout-centre .benefice .b-tag { align-self: center; }

/* simulateur empilé et centré */
.layout-centre .sim { grid-template-columns: 1fr; max-width: 820px; margin: 0 auto; }
.layout-centre .sim-controls { border-right: 0; border-bottom: 1px solid var(--sable); }

/* preuves + callback centrés */
.layout-centre .callback-inner {
  grid-template-columns: 1fr; max-width: 720px; margin: 0 auto; text-align: center;
}
.layout-centre .callback .eyebrow { justify-content: center; }
.layout-centre .callback-inner > div:first-child > div { justify-content: center; }
.layout-centre .cb-form { text-align: left; }

/* =========================================================
   B · ALTERNÉ (ZIGZAG) — quinconce horizontal
   ========================================================= */
/* hero inversé : image à gauche, texte à droite */
.layout-zigzag .hero-grid { grid-template-columns: 1.1fr 1.2fr; }
.layout-zigzag .hero-grid > div:first-child { order: 2; }
.layout-zigzag .hero-portrait { order: 1; }

/* studio inversé : texte à gauche, galerie à droite */
.layout-zigzag .studio-gallery { order: 2; }
.layout-zigzag .studio-inner > div:last-child { order: 1; }

/* bénéfices : grandes lignes horizontales alternées */
.layout-zigzag .benefices-grid { grid-template-columns: 1fr; gap: 20px; }
.layout-zigzag .benefice {
  display: grid; grid-template-columns: 260px 1fr; column-gap: 52px;
  align-items: center; padding: 44px 48px;
}
.layout-zigzag .benefice .b-head { grid-column: 1; grid-row: 1 / -1; flex-direction: column; align-items: flex-start; gap: 18px; }
.layout-zigzag .benefice .b-num { font-size: 80px; }
.layout-zigzag .benefice h3,
.layout-zigzag .benefice p,
.layout-zigzag .benefice .b-list,
.layout-zigzag .benefice .b-tag { grid-column: 2; }
.layout-zigzag .benefice .b-tag { margin-top: 10px; padding-top: 0; }
/* lignes paires : numéro à droite */
.layout-zigzag .benefice:nth-child(even) { grid-template-columns: 1fr 260px; }
.layout-zigzag .benefice:nth-child(even) .b-head { grid-column: 2; align-items: flex-end; text-align: right; }
.layout-zigzag .benefice:nth-child(even) h3,
.layout-zigzag .benefice:nth-child(even) p,
.layout-zigzag .benefice:nth-child(even) .b-list,
.layout-zigzag .benefice:nth-child(even) .b-tag { grid-column: 1; }

/* simulateur inversé : résultats à gauche */
.layout-zigzag .sim { grid-template-columns: 1.05fr 1fr; }
.layout-zigzag .sim-controls { order: 2; border-right: 0; border-left: 1px solid var(--sable); }
.layout-zigzag .sim-result { order: 1; }

/* callback inversé : formulaire à gauche */
.layout-zigzag .callback-inner > div:first-child { order: 2; }
.layout-zigzag .cb-form { order: 1; }

/* =========================================================
   C · MAGAZINE — grille asymétrique, dense
   ========================================================= */
/* hero : texte large + image haute étroite */
.layout-mag .hero-grid { grid-template-columns: 1.7fr 0.85fr; gap: 56px; align-items: stretch; }
.layout-mag .hero-portrait { aspect-ratio: auto; height: 100%; min-height: 540px; }
.layout-mag .hero h1 { font-size: clamp(54px, 6vw, 96px); }

/* studio : léger décalage asymétrique */
.layout-mag .studio-inner { grid-template-columns: 1.15fr 1fr; gap: 72px; }

/* bénéfices : une grande carte + deux empilées */
.layout-mag .benefices-grid { grid-template-columns: 1.5fr 1fr; grid-auto-rows: auto; align-items: stretch; }
.layout-mag .benefice:nth-child(1) { grid-row: 1 / span 2; justify-content: center; padding: 56px 48px; }
.layout-mag .benefice:nth-child(1) .b-num { font-size: 72px; }
.layout-mag .benefice:nth-child(1) h3 { font-size: 34px; }

/* simulateur : résultats plus larges */
.layout-mag .sim { grid-template-columns: 0.85fr 1.15fr; }

/* preuves : première carte mise en avant */
.layout-mag .results-grid { grid-template-columns: 1.4fr 1fr 1fr; }

}