/* Page publique /tarifs — s'appuie sur les variables et classes de nav.css/landing.css */

.tarifs-hero { text-align: center; padding: 6.5rem 2rem 3.5rem; }
.tarifs-hero .lead { max-width: 560px; margin: .9rem auto 0; }

/* ── Tableau comparatif ── */
.compare-wrap { overflow-x: auto; margin-top: 2.6rem; border: 1.5px solid var(--border); border-radius: 20px; background: white; box-shadow: var(--sh-sm); }
.compare { width: 100%; border-collapse: collapse; min-width: 640px; font-size: .875rem; }
.compare th, .compare td { padding: .85rem 1.3rem; text-align: left; border-bottom: 1px solid var(--border); }

/* En-têtes : noms de plan + prix, colonne Plus teintée sur toute la hauteur */
.compare thead th { background: white; border-bottom: 2px solid var(--border); vertical-align: bottom; padding-top: 1.2rem; }
.compare-feat { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.compare-plan { font-size: 1rem; font-weight: 800; color: var(--forest); }
.compare-plan span { display: block; font-size: .72rem; font-weight: 600; color: var(--muted); margin-top: .2rem; }
.compare thead th:nth-child(2), .compare thead th:nth-child(3),
.compare td:nth-child(2), .compare td:nth-child(3) { text-align: center; width: 170px; }
.compare-plan--plus, .compare td:nth-child(3) { background: var(--peach-pale); }

.compare tbody th[scope="row"] { font-weight: 500; color: var(--forest); }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: none; }

/* Lignes de catégorie : simple intitulé, sans bandeau plein */
.compare .compare-cat td { border-bottom: 1px solid var(--border); padding: 1.5rem 1.3rem .5rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--peach-dark); }

/* Inclus : coche en pastille ; non inclus : simple tiret discret */
.compare .oui svg { font-size: 1.5rem; color: var(--forest-soft); background: rgba(45, 114, 101, .1); border-radius: 50%; padding: .24rem; }
.compare .non svg { font-size: 1.1rem; color: rgba(17, 48, 42, .25); }
.compare .precision { font-size: .8rem; font-weight: 600; color: var(--forest); }

.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── Fonctionnalités à venir (hors comparatif, non contractuel) ── */
.tarifs-soon { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 2rem; }
.tarifs-soon-item {
display: inline-flex; align-items: center; gap: .5rem;
background: white; border: 1.5px dashed var(--border); border-radius: 100px;
padding: .6rem 1.1rem; font-size: .85rem; font-weight: 600; color: var(--muted);
}
.tarifs-soon-item svg { color: var(--peach-dark); }
.tarifs-note { text-align: center; font-size: .78rem; color: var(--muted); margin-top: 1rem; }
.tarifs-note a { color: var(--forest); }

/* ── Bloc transparence ── */
.savoir-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 2.6rem; }
.savoir-card { background: white; border: 1.5px solid var(--border); border-radius: 16px; padding: 1.3rem 1.4rem; }
.savoir-card h3 { font-size: .92rem; color: var(--forest); margin-bottom: .45rem; }
.savoir-card p { font-size: .845rem; color: var(--muted); line-height: 1.65; }

@media (max-width: 960px) {
.savoir-grid { grid-template-columns: 1fr; }
.tarifs-hero { padding: 5.5rem 1.5rem 2.5rem; }
}

/* ── Comparatif sur mobile : lignes empilées, zéro scroll horizontal ──
 Le tableau se réorganise : libellé en pleine largeur, puis les deux
 valeurs côte à côte avec leur mini-étiquette Gratuit/Plus. Tout est
 visible sans geste (le scroll horizontal caché n'était pas découvrable). */
@media (max-width: 700px) {
/* overflow hidden : le contenu reste clippé dans la carte arrondie */
.compare-wrap { overflow: hidden; }
/* La grille vit sur <table>, et tbody/tr passent en display:contents :
 leurs enfants (th/td) se placent directement dans la grille. WebKit
 gère mal un display de bloc/grid posé sur des lignes de tableau
 (débordement à droite constaté sur iPhone alors que Chrome rendait
 juste) ; sans boîte de ligne, le quirk n'a plus de prise. minmax(0,1fr)
 garantit deux colonnes strictement égales. */
.compare { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-width: 0; width: 100%; }
.compare thead { display: none; }
.compare tbody, .compare tbody tr { display: contents; }

.compare tbody th[scope="row"], .compare tbody td { display: block; }
.compare tbody th[scope="row"] {
grid-column: 1 / -1; border-bottom: none;
padding: .9rem 1.1rem .35rem; font-size: .85rem;
}
.compare tbody td { width: auto; border-bottom: 1px solid var(--border); padding: .4rem .8rem .9rem; text-align: center; }
.compare tbody td::before {
display: block; font-size: .62rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .07em;
color: var(--muted); margin-bottom: .3rem;
}
.compare tbody td:nth-child(2)::before { content: "Gratuit"; }
.compare tbody td:nth-child(3)::before { content: "Plus"; color: var(--peach-dark); }

.compare .compare-cat td:first-child { grid-column: 1 / -1; padding: 1.4rem 1.1rem .45rem; }
.compare .compare-cat td:first-child::before { display: none; }
.compare .compare-cat td[aria-hidden] { display: none; }

.compare tbody tr:last-child td { border-bottom: none; }
}