/* ==========================================================================
   POLYVATECH — pages intérieures alignées sur l'accueil refondu (2026-11)
   Surcharge les anciens composants de style.css (KISTAS, services, hébergement,
   contact) sans toucher aux gabarits. Chargée après style.css et layout.css.
   Aucune valeur brute : tout vient de tokens.css (npm run check).
   ========================================================================== */

/* ---------- Socle : largeur de lecture, texte ---------- */
.wrap { max-width: var(--wrap-narrow); }
body { font-size: var(--text-md); line-height: var(--leading-body); }
[dir="rtl"] body { line-height: var(--leading-body); }
h1, h2, h3 { font-family: var(--font-sans); font-weight: var(--weight-semibold); }
.mono { font-family: var(--font-sans); font-size: var(--text-sm); letter-spacing: 0; }

/* ---------- Boutons : mêmes formes que .pv-btn ---------- */
.btn {
  min-height: 48px; padding: var(--space-3) var(--space-6);
  border-width: 1px; border-radius: var(--radius-sm);
  font-family: var(--font-sans); font-size: var(--text-md); font-weight: var(--weight-medium);
}
.btn-sm { min-height: 40px; padding: var(--space-2) var(--space-4); font-size: var(--text-sm); }
.btn-ink, .btn-warm { background: var(--accent); color: var(--on-dark); border-color: var(--accent); }
.btn-ink::before { content: none; }
.btn-ink:hover, .btn-warm:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-dark); }
.btn-line { background: var(--paper); color: var(--ink); border-color: var(--rule); }
.btn-line:hover { background: var(--paper); color: var(--ink); border-color: var(--ink); }
.btn-light { background: var(--paper); color: var(--ink); }
.btn-light:hover { background: var(--paper-2); color: var(--ink); }
.btn-ghost-light { color: var(--on-dark); border-color: var(--rule-dark); }
.btn-ghost-light:hover { background: transparent; color: var(--on-dark); border-color: var(--on-dark); }

/* ---------- Surtitres : pastille sobre au lieu du code mono ---------- */
.kicker, .sec-index {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-3); margin-block-end: var(--space-6);
  border: 1px solid var(--rule); border-radius: var(--radius-pill); background: var(--paper);
  font-family: var(--font-sans); font-size: var(--text-sm); letter-spacing: 0; text-transform: none; color: var(--muted);
}
[dir="rtl"] .kicker, [dir="rtl"] .sec-index { font-family: var(--font-sans); font-size: var(--text-sm); }
.kicker::before { width: 8px; height: 8px; border-radius: 50%; background: var(--warm); }
.sec-index .num { display: none; }
.sec-index .ring { width: 10px; height: 10px; background: var(--warm); }
.sec-index .ring--cool { background: var(--cool); }

/* ---------- Sections ---------- */
.section { padding-block: var(--space-24); }
.sec-head {
  display: block; max-width: 760px; margin-block-end: var(--space-12);
  padding-block-end: 0; border-bottom: 0;
}
.sec-head::after { content: none; }
.sec-head h2 { font-size: var(--text-2xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.sec-head p { margin-block-start: var(--space-4); font-size: var(--text-lg); color: var(--muted); }
.section--night { background: var(--ink); color: var(--on-dark-muted); }
.section--night .sec-index { background: transparent; border-color: var(--rule-dark); color: var(--on-dark-muted); }
.section--night .sec-head p { color: var(--on-dark-muted); }

/* ---------- Haut des pages intérieures ---------- */
.hero { background-image: none; background: linear-gradient(var(--paper), var(--paper-2)); padding-block-start: var(--space-16); }
.hero--page { padding-block-end: var(--space-16); border-bottom: 1px solid var(--rule); }
.hero h1 { font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); font-weight: var(--weight-semibold); }
[dir="rtl"] .hero h1 { line-height: var(--leading-tight); }
.hero h1 .warm, .hero h1 .cool { background: none; color: inherit; }
.hero-lead { font-size: var(--text-lg); color: var(--muted); max-width: 640px; margin-block-end: var(--space-8); }
.hero-actions { gap: var(--space-3); }
.breadcrumb { font-size: var(--text-sm); margin-block-end: var(--space-6); }

.page-hero-aside {
  border: 1px solid var(--rule); border-radius: var(--radius-md);
  padding: var(--space-8); box-shadow: var(--shadow-card);
}
.hero--warm .page-hero-aside { border-top-color: var(--rule); }
.page-hero-aside-head small { text-transform: none; font-size: var(--text-sm); }
.page-hero-aside-head strong { font-family: var(--font-sans); font-size: var(--text-lg); }
.page-hero-list li { font-size: var(--text-sm); color: var(--text); }
.page-hero-tag {
  border: 0; border-radius: var(--radius-pill); background: var(--paper-2);
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--muted);
}
.page-hero-aside-foot { border-top: 1px solid var(--rule); font-family: var(--font-sans); font-size: var(--text-sm); }

/* ---------- Listes de prestations et blocs ---------- */
.services-ledger, .infra-grid, .caps, .faq-list, .channels { border-top: 1px solid var(--rule); }
.ledger-row { border-bottom: 1px solid var(--rule); }
.ledger-row .mono { font-size: var(--text-sm); color: var(--muted); }
.ledger-row h3, .infra h3 { font-size: var(--text-lg); }
.ledger-row ul, .infra ul { font-size: var(--text-md); }
.infra { border-bottom: 1px solid var(--rule); }
.infra:nth-child(even) { border-inline-start: 1px solid var(--rule); }
.infra p { font-size: var(--text-md); }
.infra-code, .infra-code--warm, .section--night .infra-code, .section--night .infra-code--warm {
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: var(--paper-2); color: var(--muted);
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-medium); letter-spacing: 0;
}
.section--night .infra-code, .section--night .infra-code--warm { background: var(--rule-dark); color: var(--on-dark); }
.cap h3 { font-size: var(--text-md); }
.cap p { font-size: var(--text-md); color: var(--muted); }
.cap .mono { color: var(--muted); }

/* Réalisation Odoo : carte claire au lieu du bloc sombre */
.case {
  background: var(--paper-2); color: var(--text);
  border: 1px solid var(--rule); border-radius: var(--radius-md); padding: var(--space-12);
}
.case .mono { color: var(--muted); }
[dir="rtl"] .case .mono { font-family: var(--font-sans); font-size: var(--text-sm); }
.case h3 { color: var(--ink); font-size: var(--text-xl); }
.case p { font-size: var(--text-md); }
.flow-node { background: var(--paper); border-color: var(--rule); border-radius: var(--radius-sm); }
.flow-node.mid { border-color: var(--ink); }
.flow-node b { color: var(--ink); font-family: var(--font-sans); font-size: var(--text-md); }
.flow-node li { font-size: var(--text-sm); }
.flow-arrow { color: var(--muted); font-family: var(--font-sans); }
.case-results { border-top: 1px solid var(--rule); }
.case-results div + div { border-inline-start: 1px solid var(--rule); }
.case-results b { color: var(--ink); font-family: var(--font-sans); }
.case-results span { font-size: var(--text-sm); color: var(--muted); }

/* ---------- Hébergement (bande sombre, comme sur l'accueil) ---------- */
.pack-card { background: transparent; border-color: var(--rule-dark); border-radius: var(--radius-md); }
.pack-card:hover { border-color: var(--on-dark-muted); }
.pack-card.featured { background: var(--rule-dark); border-color: var(--on-dark-muted); }
.pack-card .pack-name { font-family: var(--font-sans); font-size: var(--text-lg); color: var(--on-dark); }
.pack-card .pack-badge { font-family: var(--font-sans); font-size: var(--text-sm); border-radius: var(--radius-pill); padding: 0 var(--space-2); background: var(--accent); color: var(--on-dark); }
.pack-card .pack-disk { font-family: var(--font-sans); font-size: var(--text-xl); color: var(--on-dark); }
.pack-card ul { font-size: var(--text-sm); color: var(--on-dark-muted); border-top-color: var(--rule-dark); }
.section--night .btn-line { background: transparent; color: var(--on-dark); border-color: var(--rule-dark); }
.section--night .btn-line:hover { background: transparent; color: var(--on-dark); border-color: var(--on-dark); }
.packs-grid, .trust, .compare, .compare-wrap { border-color: var(--rule-dark); }
.trust li { font-size: var(--text-sm); color: var(--on-dark-muted); }
.compare h3 { font-family: var(--font-sans); font-size: var(--text-xl); }

/* ---------- FAQ ---------- */
.faq-item { border-bottom: 1px solid var(--rule); padding-block: var(--space-6); }
.faq-item summary { font-family: var(--font-sans); font-size: var(--text-lg); }
.faq-item summary::after { font-family: var(--font-sans); color: var(--muted); }
.faq-item p { color: var(--muted); }

/* ---------- Contact et formulaires ---------- */
.channel { border-bottom: 1px solid var(--rule); }
.channel small { font-family: var(--font-sans); font-size: var(--text-sm); letter-spacing: 0; text-transform: none; }
[dir="rtl"] .channel small { font-family: var(--font-sans); font-size: var(--text-sm); }
.channel a.big { font-family: var(--font-sans); font-size: var(--text-xl); }
.channel a.big:hover { color: var(--accent); }
.channel p { font-size: var(--text-sm); }
.form {
  border: 1px solid var(--rule); border-radius: var(--radius-md);
  padding: var(--space-8); background: var(--paper); box-shadow: var(--shadow-card);
}
.form h3 { font-size: var(--text-xl); }
.form > p, .form-note { font-size: var(--text-sm); }
.field label { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.field input, .field select, .field textarea {
  min-height: 48px; font-size: var(--text-md);
  border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 3px var(--paper-2); }

/* ---------- Page KISTAS ---------- */
.hero-kistas { background: linear-gradient(var(--paper), var(--paper-2)); color: var(--text); padding-block: var(--space-16); }
.hero-kistas .kicker { color: var(--muted); }
.hero-kistas .kicker::before { background: var(--warm); }
.hero-kistas h1 { color: var(--ink); }
.hero-kistas .hero-lead { color: var(--muted); }
.proof-strip { border-top: 1px solid var(--rule); }
.proof-strip strong { font-family: var(--font-sans); font-size: var(--text-xl); color: var(--ink); }
.proof-strip span { font-size: var(--text-sm); color: var(--muted); }
.hero-kistas-card .kistas-demo-form {
  border: 1px solid var(--rule); border-radius: var(--radius-md);
  padding: var(--space-8); box-shadow: var(--shadow-screen);
}
.kistas-demo-form .form-title { font-size: var(--text-xl); }
.kistas-demo-form .form-status { font-size: var(--text-sm); }
.kistas-ba { border-bottom: 0; }
.ba-card, .ba-before, .ba-after { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-md); padding: var(--space-8); }
.ba-card h3 { font-size: var(--text-lg); }
.ba-card li { font-size: var(--text-md); }
.ba-before .ba-mark { background: var(--muted); }
.ba-after .ba-mark { background: var(--accent); }
.kistas-cta-card { background: var(--paper-2); color: var(--muted); border: 1px solid var(--rule); border-radius: var(--radius-md); padding: var(--space-16) var(--space-8); }
.kistas-cta-card h2 { color: var(--ink); font-size: var(--text-2xl); }
.kistas-cta-card .btn-ghost-light { color: var(--ink); border-color: var(--rule); background: var(--paper); }
.kistas-cta-card .btn-ghost-light:hover { color: var(--ink); border-color: var(--ink); }

.status, [dir="rtl"] .status {
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill);
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-medium);
}
.screens-label { font-family: var(--font-sans); font-size: var(--text-sm); letter-spacing: 0; text-transform: none; }

/* ---------- Bandeau de saison : fin, sans code mono ---------- */
.season-bar { background: var(--ink); color: var(--on-dark); border-bottom: 0; }
.season-bar-text, .season-bar-link { font-size: var(--text-sm); color: var(--on-dark); }
.season-bar-tag { background: var(--accent); border-radius: var(--radius-pill); font-family: var(--font-sans); font-size: var(--text-sm); letter-spacing: 0; text-transform: none; }

@media (max-width: 960px) {
  .section { padding-block: var(--space-16); }
  .case { padding: var(--space-8); }
}
@media (max-width: 520px) {
  .case, .form, .hero-kistas-card .kistas-demo-form, .ba-card { padding: var(--space-6); }
}