/* css/pricing.css
   Public pricing page. It borrows the sign-in page's furniture -- brand,
   headings, language bar -- but not its card: a comparison table with one
   column per plan needs considerably more room than a login form. */

.pricing-page {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 32px 16px 48px;
}

.pricing-card {
    width: 100%;
    max-width: 900px;
    background: var(--card-bg, transparent);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 28px 24px 20px;
}

/* Reorganised 28.09.2026 (Greg: "L'affichage n'est pas tres lisible"): the
   cards had lost their styles when the billing window moved to its own card
   classes, and name, period, price and saving ran along one line. */

/* Yearly / Monthly: a two-part switch, centred above the cards. */
.pr-toggle {
    display: flex;
    justify-content: center;
    width: max-content;
    margin: 20px auto 0;
    padding: 4px;
    gap: 4px;
    border: 1px solid var(--line);
    border-radius: 999px;
}
.pr-toggle-opt {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 8px 22px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    color: var(--text);
}
.pr-toggle-opt input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}
/* The site's own filled colours, as the "Se connecter" button: readable in
   both themes (white on the light gold of the dark theme was not). */
.pr-toggle-opt.selected { background: var(--md-primary, var(--gold)); color: var(--md-on-primary, #fff); }
.pr-toggle-opt:focus-within { outline: 2px solid var(--md-primary, var(--gold)); outline-offset: 2px; }

/* One card per plan, side by side, each in its plan's colour. */
.pricing-card .acc-plan-grid {
    display: grid;
    grid-template-columns: repeat(var(--acc-plan-cols, 3), minmax(0, 1fr));
    gap: 16px;
    margin-top: 20px;
}
.pr-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 20px 14px 18px;
    border: 1px solid var(--plan-tone-border, var(--line));
    border-top: 4px solid var(--plan-tone, var(--gold));
    border-radius: 14px;
    background: var(--plan-tone-tint, transparent);
}
.pr-card .pr-name { font-size: 13px; padding: 3px 14px; margin-bottom: 8px; }
.pr-price { line-height: 1.1; }
.pr-amount { font-size: 38px; font-weight: 800; letter-spacing: -0.01em; }
.pr-cur { font-size: 16px; font-weight: 700; opacity: 0.8; }
.pr-per { font-size: 13px; opacity: 0.75; }
.pr-vat { font-size: 11px; opacity: 0.6; }
/* Reserved on every card, filled only where there is something to save, so the
   three cards keep the same height. */
.pr-note {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--status-active, #2e7d32);
    min-height: 1.4em;
}

/* The comparison table, readable: larger type, plan names in their colour. */
.pricing-card .acc-cmp-wrap { margin-top: 28px; }
.pricing-card .acc-cmp { font-size: 14px; }
.pricing-card .acc-cmp th,
.pricing-card .acc-cmp td { padding: 10px 8px; }
.pricing-card .acc-cmp thead th { font-size: 14px; font-weight: 700; }
.pricing-card .acc-cmp thead th[class*="plan-tone-"] { color: var(--plan-tone); width: 96px; }
.pricing-card .acc-cmp td { text-align: center; }
.pricing-card .acc-cmp tbody tr:nth-child(even) { background: var(--card-bg2, rgba(127, 127, 127, 0.06)); }
.pricing-card .acc-cmp-yes { font-size: 16px; }

@media (max-width: 640px) {
    .pricing-card { padding: 22px 14px 18px; }
    .pricing-card .acc-plan-grid { grid-template-columns: 1fr; }
    .pr-amount { font-size: 32px; }
    .pricing-card .acc-cmp { font-size: 13px; }
    .pricing-card .acc-cmp thead th[class*="plan-tone-"] { width: 64px; }
}

.pricing-vat {
    font-size: 11px;
    opacity: 0.7;
    margin-top: 16px;
    text-align: center;
}

.pricing-sep {
    display: inline-block;
    width: 1px;
    height: 12px;
    background: var(--line);
    margin: 0 10px;
    vertical-align: middle;
}