/* ============================================================
   MISE EN PAGE B — « Éditorial »
   Hero ouvert (sans panneau), filets typographiques, cartes en liste,
   témoignages en grandes citations, nav soulignée, ordre des sections inchangé (la numérotation des sur-titres fait partie des textes).
   Ne dépend que des repères data-sec / data-ui du gabarit et des tokens du thème.
   ============================================================ */

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 : liens simples, l'onglet actif est souligné */
[data-ui="nav"] { background: transparent !important; padding: 0 !important; gap: 26px !important; }
[data-ui="nav"] a { padding: 8px 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; border-bottom: 2px solid transparent; }
[data-ui="nav"] a[style*="box-shadow"] { border-bottom-color: var(--ink); }

/* Sur-titres : filet pleine largeur au-dessus */
main > [data-sec] > span:first-child,
[data-sec="faq"] > div:first-child > span:first-child { display: block; padding-top: 16px; border-top: 1px solid var(--ink); }

/* Hero ouvert : on rebascule les tokens « sur fond foncé » vers ceux de la page */
[data-sec="hero"], [data-sec="cta"], [data-sec="about-cta"] {
  --brand-dark: transparent;
  --on-dark-strong: var(--ink); --on-dark-bg: var(--text-strong); --on-dark-text: var(--text);
  --on-dark-muted: var(--muted); --on-dark-soft: var(--text); --on-dark-line: var(--line);
  --on-dark-border: var(--ink); --on-dark: var(--bg);
}
/* l'accent utilisé comme couleur de texte passe en --accent-2 (lisible sur fond clair) */
[data-sec="hero"] [style*="color: var(--accent)"], [data-sec="cta"] [style*="color: var(--accent)"],
[data-sec="about-cta"] [style*="color: var(--accent)"] { color: var(--accent-2) !important; }
main [data-ui="hero-panel"] { padding: 56px 0 8px !important; border-radius: 0 !important; border-bottom: 3px solid var(--ink); }
main [data-ui="hero-panel"] h1 { font-size: 84px !important; line-height: .98 !important; max-width: 1050px !important; }
main [data-ui="cta-panel"] { border-radius: 0 !important; padding: 44px 0 !important; border-top: 3px solid var(--ink); border-bottom: 1px solid var(--line); }

/* Problèmes : 2 colonnes de lignes numérotées, sans cartes */
[data-sec="problems"] > div:last-child { grid-template-columns: repeat(2, 1fr) !important; gap: 0 48px !important; }
[data-sec="problems"] > div:last-child > div { background: transparent !important; border: 0 !important; border-top: 1px solid var(--line) !important; border-radius: 0 !important; padding: 26px 0 30px !important; display: grid !important; grid-template-columns: 72px 1fr; column-gap: 18px; }
[data-sec="problems"] > div:last-child > div > span:first-child { grid-row: 1 / span 2; font-size: 46px !important; line-height: 1 !important; }

/* Services : colonnes ouvertes séparées par un filet */
[data-sec="services"] > div:last-child { gap: 0 !important; }
[data-sec="services"] > div:last-child > div { background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 8px 40px 8px 0 !important; }
[data-sec="services"] > div:last-child > div + div { padding: 8px 0 8px 40px !important; border-left: 1px solid var(--line) !important; }

/* Témoignages : grandes citations sur une colonne */
[data-sec="testimonials"] > div:last-child { grid-template-columns: 1fr !important; gap: 0 !important; max-width: 900px; }
[data-sec="testimonials"] > div:last-child > div { background: transparent !important; border: 0 !important; border-top: 1px solid var(--line) !important; border-radius: 0 !important; padding: 30px 0 !important; }
[data-sec="testimonials"] > div:last-child > div > p { font-family: var(--serif) !important; font-size: 25px !important; line-height: 1.45 !important; color: var(--ink) !important; }

/* Honoraires : cartes à filet haut, la formule mise en avant garde sa surface */
[data-sec="pricing"] > div:last-child > div:not([style*="var(--brand-dark)"]) { background: transparent !important; border: 0 !important; border-top: 3px solid var(--ink) !important; border-radius: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }

@media (max-width: 820px) {
  main [data-ui="hero-panel"] { padding: 36px 0 8px !important; }
  main [data-ui="hero-panel"] h1 { font-size: clamp(36px, 10.5vw, 50px) !important; }
  [data-ui="nav"] { gap: 18px !important; }
  [data-sec="problems"] > div:last-child { grid-template-columns: 1fr !important; }
  [data-sec="problems"] > div:last-child > div { grid-template-columns: 56px 1fr; }
  [data-sec="problems"] > div:last-child > div > span:first-child { font-size: 36px !important; }
  [data-sec="services"] > div:last-child > div, [data-sec="services"] > div:last-child > div + div { padding: 18px 0 !important; border-left: 0 !important; border-top: 1px solid var(--line) !important; }
  [data-sec="testimonials"] > div:last-child > div > p { font-size: 20px !important; }
  main [data-ui="cta-panel"] { padding: 32px 0 !important; }
}