/* ============================================================
   abonnement.css — page Tarifs / Abonnement (oct. 2026)
   Jetons --fq-* (app-parity.css chargé par header.php), clair + sombre.
   Même sélecteur à deux segments que la page Créer (.fq-segment).
   ============================================================ */

body.page-abonnement { background: var(--fq-bg); color: var(--fq-text); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.ab { padding: 32px 0 72px; }
.ab-container { max-width: 560px; margin: 0 auto; padding: 0 16px; display: flex; flex-direction: column; gap: 18px; }

.ab-head { text-align: center; padding: 8px 0 6px; }
.hm-eyebrow.ab-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fq-primary); background: var(--fq-primary-light); padding: 6px 12px; border-radius: 999px; margin-bottom: 14px; }
.ab-h1 { font-family: var(--fq-font-title); font-weight: 700; font-size: clamp(28px, 5vw, 38px); line-height: 1.1; margin: 0 0 10px; letter-spacing: -.01em; }
.ab-sub { color: var(--fq-text-secondary); font-size: 16px; line-height: 1.5; margin: 0 auto; max-width: 460px; }

.ab-card { padding: 22px 20px 20px; display: flex; flex-direction: column; gap: 14px; }
.ab-card[aria-busy="true"] .ab-price { opacity: .55; }
.ab-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ab-plan-name { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--fq-primary); }

/* Sélecteur : conteneur gris, rayon 16, padding 4, segment actif en primary */
.ab-segment { max-width: none; margin: 0; border-radius: 16px; background: var(--fq-input-bg, var(--fq-bg-secondary)); }
.ab-segment .fq-segment__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; padding: 12px 10px; }
.ab-segment .fq-segment__btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.ab-segment__pill { font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 999px; background: var(--fq-success-light); color: var(--fq-success); white-space: nowrap; }
.ab-segment .fq-segment__btn.is-active .ab-segment__pill { background: rgba(255, 255, 255, .22); color: #fff; }

.ab-price { text-align: center; padding: 6px 0 2px; }
.ab-price__main { margin: 0; font-family: var(--fq-font-title); font-weight: 700; font-size: 44px; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; }
.ab-price__main small { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 600; color: var(--fq-text-secondary); }
.ab-price__compare { margin: 8px 0 0; font-size: 15px; color: var(--fq-text-secondary); display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; }
.ab-price__compare s { opacity: .8; }
.ab-save { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; background: var(--fq-success-light); color: var(--fq-success); font-size: 12px; font-weight: 800; }
.ab-price__eq { margin: 6px 0 0; font-size: 14px; color: var(--fq-text-secondary); font-weight: 600; }

.ab-trial { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--fq-success-light); color: var(--fq-success); font-weight: 700; font-size: 14px; }
.ab-trial svg { width: 18px; height: 18px; flex-shrink: 0; }

.ab-cta { padding: 15px 18px; font-size: 16px; }
.ab-error { margin: 0; font-size: 13px; }
.ab-fine { margin: 0; font-size: 12px; line-height: 1.5; color: var(--fq-text-secondary); text-align: center; }
.ab-fine:empty { display: none; }
.ab-legal a { color: var(--fq-text-secondary); text-decoration: underline; }
.ab-legal a:hover { color: var(--fq-primary); }

.ab-features { list-style: none; margin: 6px 0 0; padding: 14px 0 0; border-top: 1px solid var(--fq-card-border); display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; font-size: 14px; font-weight: 500; }
.ab-features li { display: flex; align-items: flex-start; gap: 8px; }
.ab-check { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; margin-top: 1px; background: var(--fq-primary-light); position: relative; }
.ab-check::after { content: ''; position: absolute; left: 6px; top: 3px; width: 4px; height: 8px; border: solid var(--fq-primary); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* Gestion */
.ab-h2 { font-family: var(--fq-font-title); font-size: 20px; font-weight: 700; margin: 0; }
.ab-manage__status { margin: 0; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.ab-manage__status::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--fq-success); }
.ab-manage__date { margin: 0; color: var(--fq-text-secondary); font-size: 14px; }
.ab-manage__date:empty { display: none; }
.ab-manage__actions { display: flex; flex-direction: column; gap: 10px; }
.ab-manage__actions:empty { display: none; }

.ab-free { text-align: center; font-size: 14px; color: var(--fq-text-secondary); display: flex; flex-direction: column; gap: 2px; padding: 4px 0; }
.ab-free strong { color: var(--fq-text); }

.ab a:focus-visible, .ab button:focus-visible { outline: 3px solid var(--fq-primary); outline-offset: 3px; border-radius: 12px; }

@media (max-width: 480px) {
  .ab { padding-top: 20px; }
  .ab-card { padding: 18px 16px 16px; }
  .ab-features { grid-template-columns: 1fr; }
  .ab-price__main { font-size: 38px; }
  .ab-segment .fq-segment__btn { font-size: 13px; padding: 11px 6px; gap: 6px; }
}

/* L'attribut hidden doit gagner sur les display des composants (badge, bandeau essai, segment) */
.ab [hidden] { display: none !important; }