/* ============================================================
   MISE EN PAGE C — « Scission »
   Hero pleine largeur coupé en deux colonnes, en-têtes de section asymétriques
   (titre à gauche, chapeau à droite), étapes en frise verticale, cartes pleines,
   nav alignée à droite, ordre des sections inchangé (la numérotation des sur-titres fait partie des textes).
   ============================================================ */

main { display: flex; flex-direction: column; }
main > [data-sec] { width: 100%; }   /* en colonne flex, un bloc à marges auto se rétrécirait à son contenu */

/* Header : logo à gauche, nav + bouton regroupés à droite */
header > div { justify-content: flex-start !important; }
[data-ui="nav"] { margin-left: auto; background: transparent !important; border: 1px solid var(--line); }

/* Hero : bandeau bord à bord, deux colonnes */
main [data-sec="hero"] { max-width: none !important; padding: 0 !important; }
main [data-ui="hero-panel"] { border-radius: 0 !important; padding: 92px max(40px, calc((100% - 1160px) / 2)) 72px !important; }
main [data-ui="hero-panel"] > div > div { display: grid !important; grid-template-columns: 1.15fr .85fr; column-gap: 64px; row-gap: 22px !important; align-items: end; }
main [data-ui="hero-panel"] > div > div > span { grid-column: 1; grid-row: 1; }
main [data-ui="hero-panel"] > div > div > h1 { grid-column: 1; grid-row: 2 / span 2; align-self: start; }
main [data-ui="hero-panel"] > div > div > p { grid-column: 2; grid-row: 2; }
main [data-ui="hero-panel"] > div > div > div:nth-of-type(1) { grid-column: 2; grid-row: 3; align-self: start; }
main [data-ui="hero-panel"] > div > div > div:nth-of-type(2) { grid-column: 1 / -1; grid-row: 4; justify-content: space-between; }

/* En-têtes asymétriques : sur-titre + titre à gauche, chapeau à droite */
[data-sec="problems"], [data-sec="services"], [data-sec="pricing"] {
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; align-items: end;
}
[data-sec="problems"] > span, [data-sec="services"] > span, [data-sec="pricing"] > span { grid-column: 1; }
[data-sec="problems"] > h2, [data-sec="services"] > h2, [data-sec="pricing"] > h2 { grid-column: 1; margin-bottom: 36px !important; }
[data-sec="problems"] > p, [data-sec="services"] > p, [data-sec="pricing"] > p { grid-column: 2; grid-row: 1 / span 2; margin-bottom: 36px !important; }
[data-sec="problems"] > div:last-child, [data-sec="services"] > div:last-child, [data-sec="pricing"] > div:last-child { grid-column: 1 / -1; }

/* Cartes pleines (surface), sans bordure */
[data-sec="problems"] > div:last-child > div,
[data-sec="services"] > div:last-child > div,
[data-sec="testimonials"] > div:last-child > div { background: var(--surface) !important; border-color: transparent !important; }
[data-sec="problems"] > div:last-child > div > span:first-child { font-size: 38px !important; line-height: 1 !important; }

/* Étapes : frise verticale numérotée */
[data-sec="steps"] > div:last-child { grid-template-columns: 1fr !important; gap: 0 !important; max-width: 860px; }
[data-sec="steps"] > div:last-child > div { display: grid !important; grid-template-columns: 96px 1fr; column-gap: 24px; padding: 26px 0 !important; border-top: 1px solid var(--line) !important; }
[data-sec="steps"] > div:last-child > div > span:first-child { grid-row: 1 / span 2; font-size: 64px !important; }

/* Appel final : bandeau bord à bord */
main [data-sec="cta"] { max-width: none !important; padding: 64px 0 0 !important; }
main [data-ui="cta-panel"] { border-radius: 0 !important; padding: 64px max(40px, calc((100% - 1160px) / 2)) !important; }

@media (max-width: 820px) {
  [data-ui="nav"] { margin-left: 0; }
  main [data-ui="hero-panel"] { padding: 44px 20px 40px !important; }
  main [data-ui="hero-panel"] > div > div { display: flex !important; flex-direction: column; align-items: stretch; }
  main [data-ui="hero-panel"] > div > div > div:nth-of-type(2) { justify-content: flex-start; }
  [data-sec="problems"], [data-sec="services"], [data-sec="pricing"] { display: block; }
  [data-sec="problems"] > h2, [data-sec="services"] > h2, [data-sec="pricing"] > h2 { margin-bottom: 14px !important; }
  [data-sec="steps"] > div:last-child > div { grid-template-columns: 64px 1fr; column-gap: 14px; }
  [data-sec="steps"] > div:last-child > div > span:first-child { font-size: 44px !important; }
  main [data-ui="cta-panel"] { padding: 40px 20px !important; }
  main [data-sec="cta"] { padding-top: 40px !important; }
}