/* ═══════════════════════════════════════════════════
   JMK-Web — tarifs.css (page-specific)
   ═══════════════════════════════════════════════════ */

.page-header { background: var(--navy); padding: 10rem 0 5rem; position: relative; overflow: hidden; }
.page-header-grid { position: absolute; inset: 0; opacity: 0.03; background-image: linear-gradient(var(--accent) 1px, transparent 1px), linear-gradient(90deg, var(--accent) 1px, transparent 1px); background-size: 64px 64px; }
.page-header-line { position: absolute; top: 0; left: calc(5% + 100px); width: 1px; height: 100%; background: linear-gradient(to bottom, transparent 0%, rgba(61,133,212,0.25) 40%, transparent 100%); }
.page-header-content { position: relative; z-index: 1; }
.page-header .section-title { color: var(--white); margin-bottom: 1rem; }
.page-header .section-sub { color: #8aa8c4; margin-bottom: 0; }

#tarifs { padding: 6rem 0; background: #f4f7fa; }
.tarifs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.2rem; }
.t-card { background: var(--white); border: 1px solid #e2eaf4; border-radius: 8px; padding: 2.2rem 1.8rem; position: relative; transition: transform 0.22s, border-color 0.22s; }
.t-card:hover { transform: translateY(-3px); }
.t-card.star { border: 2px solid var(--accent); }
.t-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--accent); color: var(--white); padding: 3px 16px; border-radius: 3px; font-size: 0.67rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.t-name { font-family: 'Syne', sans-serif; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text); margin-bottom: 1rem; }
.t-price { font-family: 'Syne', sans-serif; font-size: 2.4rem; font-weight: 800; color: var(--navy); line-height: 1; margin-bottom: 0.3rem; }
.t-price sup { font-size: 1.1rem; vertical-align: super; }
.t-note { font-size: 0.78rem; color: #7a96b0; margin-bottom: 1.8rem; }
.t-list { list-style: none; margin-bottom: 2rem; }
.t-list li { padding: 0.5rem 0; font-size: 0.85rem; color: #3d5a78; font-weight: 400; border-bottom: 1px solid rgba(61,133,212,0.07); display: flex; align-items: center; gap: 0.6rem; }
.t-list li::before { content: ''; width: 5px; height: 5px; background: var(--accent); border-radius: 50%; flex-shrink: 0; }
.t-btn { display: block; text-align: center; padding: 0.8rem; border: 1.5px solid var(--accent); border-radius: 5px; color: var(--accent); font-size: 0.86rem; font-weight: 500; text-decoration: none; transition: all 0.2s; }
.t-btn:hover, .t-card.star .t-btn { background: var(--accent); color: var(--white); }

/* Variante compacte pour les boutons du tableau comparatif */
.t-btn-compact {
  display: inline-block;
  padding: 0.5rem 1.2rem;
  font-size: 0.78rem;
  border: 1.5px solid var(--accent);
  border-radius: 5px;
  color: var(--accent);
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s;
}
.t-btn-compact:hover { background: var(--accent); color: var(--white); }
.t-btn-compact-filled {
  background: var(--accent);
  color: var(--white);
  border-color: var(--accent);
}
.t-btn-compact-filled:hover { background: #2d6eb8; border-color: #2d6eb8; }

.tarif-footer { margin-top: 2.5rem; display: flex; align-items: flex-start; gap: 12px; font-size: 0.84rem; color: #3d5a78; padding: 1rem 1.2rem; background: var(--white); border-radius: 6px; border: 1px solid #e2eaf4; font-weight: 400; }
.tarif-footer::before { content: '💡'; font-size: 0.9rem; flex-shrink: 0; margin-top: 1px; }

#compare { padding: 6rem 0; background: var(--white); }
.compare-wrap { overflow-x: auto; border: 1px solid #e2eaf4; border-radius: 8px; }
.compare-table { width: 100%; border-collapse: collapse; min-width: 700px; }
.compare-table thead th { background: var(--navy); color: var(--white); font-family: 'Syne', sans-serif; font-size: 0.85rem; font-weight: 700; padding: 1.2rem 1rem; text-align: center; letter-spacing: 0.03em; }
.compare-table thead th:first-child { text-align: left; font-family: 'Inter', sans-serif; font-weight: 400; font-size: 0.78rem; color: #bdd0e2; text-transform: uppercase; letter-spacing: 0.1em; }
.compare-table thead th.star-col { background: var(--blue); position: relative; }
.compare-table thead th.star-col::after { content: '★'; position: absolute; top: 6px; right: 8px; font-size: 0.6rem; color: var(--accent-light); }
.compare-table tbody td { padding: 0.85rem 1rem; font-size: 0.84rem; color: #3d5a78; font-weight: 400; text-align: center; border-bottom: 1px solid #e2eaf4; }
.compare-table tbody td:first-child { text-align: left; color: var(--text); font-weight: 500; }
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table tbody tr:hover { background: #f4f7fa; }
.compare-table .star-col { background: rgba(61,133,212,0.04); }
.check { display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; border-radius: 50%; background: rgba(61,133,212,0.1); }
.check svg { width: 12px; height: 12px; stroke: var(--accent); fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.dash { display: inline-block; width: 12px; height: 1.5px; background: #d0dde9; border-radius: 1px; }

#faq { padding: 6rem 0; background: #f4f7fa; }
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #e2eaf4; border: 1px solid #e2eaf4; border-radius: 8px; overflow: hidden; }
.faq-item { background: var(--white); padding: 1.8rem; }
.faq-q { font-family: 'Syne', sans-serif; font-size: 0.97rem; font-weight: 700; color: var(--text); margin-bottom: 0.6rem; }
.faq-a { font-size: 0.88rem; color: #3d5a78; line-height: 1.75; font-weight: 400; }

#cta-banner { background: var(--navy); padding: 5rem 0; position: relative; overflow: hidden; }
.cta-grid-bg { position: absolute; inset: 0; opacity: 0.025; background-image: linear-gradient(var(--accent) 1px, transparent 1px), linear-gradient(90deg, var(--accent) 1px, transparent 1px); background-size: 64px 64px; }
.cta-content { position: relative; z-index: 1; text-align: center; max-width: 600px; margin: 0 auto; }
.cta-content .section-title { color: var(--white); margin-bottom: 1rem; }
.cta-sub { font-size: 0.95rem; font-weight: 400; color: #8aa8c4; line-height: 1.75; margin-bottom: 2.2rem; }
.cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

@media (max-width: 900px) { .faq-grid { grid-template-columns: 1fr; } }