/* Gabarit des pages hub du site public (spec 2026-08-18, § 4.2).
   Charte identique à la home : valeurs en dur, pas de variables externes. */
.hub-bc { max-width: 1100px; margin: 0 auto; padding: 1.2rem 2rem 0; color: #8b8a9b; font-size: .85rem; }
.hub-bc a { color: #8b8a9b; text-decoration: none; }
.hub-bc a:hover { color: #f1f0f5; }
.hub-bc b { color: #a78bfa; font-weight: 600; }

.hub-hero { text-align: center; padding: 3rem 2rem 2.4rem; position: relative; }
.hub-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(124,58,237,.28), transparent 70%); }
.hub-h1 { font-size: clamp(1.7rem, 4vw, 2.5rem); font-weight: 800; letter-spacing: -.02em;
  line-height: 1.15; max-width: 760px; margin: 0 auto .8rem; position: relative; }
.hub-h1 em { font-style: normal; background: linear-gradient(135deg, #a78bfa, #fff);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.hub-sub { color: #8b8a9b; font-size: 1.05rem; max-width: 560px; margin: 0 auto; position: relative; }

.hub-grid { max-width: 1100px; margin: 0 auto; padding: 1rem 2rem 3rem;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.hub-card { background: #12121a; border: 1px solid #1e1e2e; border-radius: 14px;
  padding: 1.3rem 1.3rem 1.1rem; display: flex; flex-direction: column; }
.hub-card:hover { border-color: #7c3aed55; }
.hub-badge { display: inline-block; align-self: flex-start; background: rgba(124,58,237,.13);
  color: #a78bfa; font-size: .78rem; font-weight: 700; border-radius: 7px;
  padding: .15rem .55rem; margin-bottom: .7rem; }
.hub-card h2 { font-size: 1.05rem; margin: 0 0 .35rem; letter-spacing: -.01em; }
.hub-card p { color: #8b8a9b; font-size: .9rem; line-height: 1.55; margin: 0 0 .9rem; }
.hub-link { margin-top: auto; color: #a78bfa; text-decoration: none; font-size: .9rem; font-weight: 600; }
.hub-link:hover { color: #f1f0f5; }

.hub-cta { text-align: center; background: #12121a; border-top: 1px solid #1e1e2e; padding: 2.6rem 2rem; }
.hub-cta h2 { font-size: 1.35rem; margin: 0 0 .4rem; }
.hub-cta p { color: #8b8a9b; margin: 0 0 1.3rem; }

/* ── Page Tarifs ── */
.pack-grid { max-width: 1100px; margin: 0 auto; padding: 1rem 2rem 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.1rem; align-items: stretch; }
.pack-card { background: #12121a; border: 1px solid #1e1e2e; border-radius: 16px;
  padding: 1.5rem 1.4rem 1.3rem; display: flex; flex-direction: column; gap: .6rem; }
.pack-card--hi { border-color: #7c3aed; box-shadow: 0 0 34px rgba(124,58,237,.16); }
.pack-card h2 { margin: 0; font-size: 1.2rem; display: flex; align-items: center; }
.pack-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; margin-right: .5rem; flex: none; }
.pack-mode { color: #8b8a9b; font-size: .85rem; }
.pack-card ul { margin: .3rem 0 0; padding-left: 1.15rem; color: #c9c6d8; font-size: .9rem; line-height: 1.8; }
.pack-ask { margin-top: auto; text-align: center; border-top: 1px dashed #1e1e2e;
  padding-top: .95rem; font-size: .92rem; color: #a78bfa; font-weight: 600; }
.opt-row { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; padding: 1.6rem 2rem 0; }
.opt-row span { border: 1px solid #1e1e2e; background: #12121a; color: #b9b6c9;
  border-radius: 999px; padding: .4rem 1rem; font-size: .85rem; }

.faq { max-width: 720px; margin: 0 auto; padding: 2.6rem 2rem 3rem; }
.faq h2 { text-align: center; font-size: 1.3rem; margin: 0 0 1.4rem; }
.faq details { background: #12121a; border: 1px solid #1e1e2e; border-radius: 12px;
  padding: .9rem 1.2rem; margin-bottom: .7rem; }
.faq summary { cursor: pointer; font-weight: 600; font-size: .95rem; }
.faq details p { color: #8b8a9b; font-size: .9rem; line-height: 1.6; margin: .7rem 0 0; }

/* ── Tableau générique des hubs (gamme, conformité) ── */
.hub-tablewrap { max-width: 1100px; margin: 0 auto; padding: 0 2rem 2.6rem; }
.hub-table { border: 1px solid #1e1e2e; border-radius: 14px; overflow-x: auto; background: #12121a; }
.hub-table table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 520px; }
.hub-table th { padding: .7rem 1rem; text-align: left; border-bottom: 1px solid #1e1e2e; background: #16161f; }
.hub-table th:first-child { color: #8b8a9b; font-weight: 400; }
.hub-table td { padding: .65rem 1rem; border-bottom: 1px solid #16161f; color: #c9c6d8; }
.hub-table tr:last-child td { border-bottom: none; }
.hub-table td:first-child { color: #8b8a9b; }
.hub-ok { color: #34d399; font-weight: 600; }
.hub-num { font-variant-numeric: tabular-nums; color: #a78bfa; font-weight: 700; }
.hub-method { max-width: 1100px; margin: 0 auto 2.6rem; padding: 0 2rem; }
.hub-method > div { border: 1px solid #1e1e2e; background: #12121a; border-radius: 12px;
  padding: 1rem 1.3rem; color: #8b8a9b; font-size: .88rem; line-height: 1.6; }
.hub-method b { color: #f1f0f5; }
.hub-section-t { text-align: center; font-size: 1.35rem; font-weight: 700; margin: 1.4rem 0 .3rem; letter-spacing: -.01em; }
.hub-section-s { text-align: center; color: #8b8a9b; font-size: .95rem; max-width: 620px; margin: 0 auto 1.4rem; padding: 0 2rem; }