/* ============================================================
   MISE EN PAGE D — « Bandes »
   Sections en bandes pleine largeur alternées, titres centrés, hero centré
   bord à bord, témoignages sur la couleur de marque, FAQ sur une colonne,
   nav en contour, 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 */

/* Nav en contour */
[data-ui="nav"] { background: transparent !important; border: 1px solid var(--line-2); }

/* Chaque section de l'accueil devient une bande pleine largeur */
main > [data-sec="hero"], main > [data-sec="problems"], main > [data-sec="services"], main > [data-sec="steps"],
main > [data-sec="pricing"], main > [data-sec="testimonials"], main > [data-sec="faq"], main > [data-sec="cta"] {
  max-width: none !important; padding: 84px max(40px, calc((100% - 1160px) / 2)) !important;
}
main > [data-sec="steps"], main > [data-sec="services"], main > [data-sec="faq"] { background: var(--surface); }
main > [data-sec="hero"] { padding: 0 !important; }
main > [data-sec="cta"] { padding: 0 !important; }

/* Titres de section centrés */
main > :is([data-sec="problems"],[data-sec="services"],[data-sec="steps"],[data-sec="pricing"],[data-sec="testimonials"]) > span:first-child { display: block; text-align: center; }
main > :is([data-sec="problems"],[data-sec="services"],[data-sec="steps"],[data-sec="pricing"],[data-sec="testimonials"]) > h2 { text-align: center; }
main > :is([data-sec="problems"],[data-sec="services"],[data-sec="steps"],[data-sec="pricing"],[data-sec="testimonials"]) > p { text-align: center; margin-left: auto !important; margin-right: auto !important; }
[data-sec="steps"] > div:nth-of-type(1) { margin-left: auto !important; margin-right: auto !important; }

/* Hero centré, bord à bord */
main [data-ui="hero-panel"] { border-radius: 0 !important; padding: 104px max(40px, calc((100% - 1000px) / 2)) 88px !important; text-align: center; }
main [data-ui="hero-panel"] > div > div { align-items: center !important; }
main [data-ui="hero-panel"] h1, main [data-ui="hero-panel"] p { margin-left: auto !important; margin-right: auto !important; }
main [data-ui="hero-panel"] > div > div > div { justify-content: center; }

/* Cartes sans bordure sur les bandes */
[data-sec="problems"] > div:last-child > div, [data-sec="services"] > div:last-child > div { border-color: transparent !important; }
[data-sec="steps"] > div:last-child > div { text-align: center; align-items: center; }

/* Témoignages : bande sur la couleur de marque (tokens rebasculés) */
main > [data-sec="testimonials"] {
  background: var(--brand-dark); color: var(--text-strong);
  --ink: var(--on-dark-strong); --text: var(--on-dark-text); --text-strong: var(--on-dark-soft);
  --muted: var(--on-dark-muted); --card: var(--on-dark-card); --line: var(--on-dark-line);
}
[data-sec="testimonials"] > div:last-child > div { border-color: transparent !important; }

/* FAQ : une seule colonne centrée */
main > [data-sec="faq"] { grid-template-columns: 1fr !important; justify-items: center; }
[data-sec="faq"] > div { width: 100%; max-width: 820px; }
[data-sec="faq"] > div:first-child { align-items: center; text-align: center; }
[data-sec="faq"] > div:first-child > a { align-self: center !important; }

/* Appel final : bandeau bord à bord centré */
main [data-ui="cta-panel"] { border-radius: 0 !important; padding: 80px max(40px, calc((100% - 1000px) / 2)) !important; flex-direction: column; text-align: center; justify-content: center !important; }

@media (max-width: 820px) {
  main > [data-sec="problems"], main > [data-sec="services"], main > [data-sec="steps"],
  main > [data-sec="pricing"], main > [data-sec="testimonials"], main > [data-sec="faq"] { padding: 52px 20px !important; }
  main [data-ui="hero-panel"] { padding: 56px 20px 48px !important; }
  main [data-ui="cta-panel"] { padding: 48px 20px !important; }
}