/* ===========================================================================
   pricing-tests-langues-ergonomie.css
   Couche ADDITIVE, chargée APRÈS css/pricing-tests-langues.css.

   S'appuie sur les tokens déjà définis par ce dernier :
   --ink, --ink-mid, --ink-light, --border, --border-hover, --bg-page,
   --bg-card, --bg-row, --bg-row-hover, --accent, --accent-dk, --accent-bg,
   --radius-card, --radius-btn, --shadow-card, --font-ui.

   Règle de conduite : aucune propriété existante des cartes, des lignes de
   prix ou de la grille n'est écrasée, en dehors des deux cas explicités
   (section 3 pour la tablette, section 5 pour les marges de description).
   Un seul réglage à faire : --pt-sticky-top (hauteur de la navbar si fixe).
   =========================================================================== */

.pricing-page {
  --pt-sticky-top: 0px;
}

/* Utilitaire lecteur d'écran ------------------------------------------------ */
.pricing-page .pt-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ===========================================================================
   1. Barre de repérage collante : filtre par test
   =========================================================================== */
.pricing-page .pricing-toolbar {
  position: sticky;
  top: var(--pt-sticky-top);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: .7rem clamp(1.5rem, 5vw, 3rem);
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-ui);
}
.pricing-page .pricing-toolbar[hidden] { display: none; }

.pricing-page .pricing-toolbar__row {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-width: 0;
  width: 100%;
  max-width: 1260px;
  margin: 0 auto;
}
.pricing-page .pricing-toolbar__label {
  flex: 0 0 auto;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-light);
}
.pricing-page .pricing-toolbar__status {
  width: 100%;
  max-width: 1260px;
  margin: 0 auto;
  font-size: .75rem;
  color: var(--ink-light);
  min-height: 1em;
}

/* Les puces passent à la ligne : jamais de défilement horizontal, donc
   jamais de contenu caché hors écran sans indication. */
.pricing-page .pricing-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  min-width: 0;
}
.pricing-page .pricing-chip {
  flex: 0 0 auto;
  cursor: pointer;
  padding: .35rem .8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  background: #fff;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .01em;
  white-space: nowrap;
  transition: background .2s, border-color .2s, color .2s;
}
.pricing-page .pricing-chip:hover { border-color: var(--border-hover); background: var(--bg-row); }
.pricing-page .pricing-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pricing-page .pricing-chip.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
/* Sélecteur natif : masqué par défaut, il remplace les puces sous 700 px */
.pricing-page .pricing-select {
  display: none;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-width: 0;
  padding: .45rem 2rem .45rem .75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  background-color: #fff;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
                    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 1rem) 50%, calc(100% - .7rem) 50%;
  background-size: .32rem .32rem, .32rem .32rem;
  background-repeat: no-repeat;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.4;
}
.pricing-page .pricing-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 700px) {
  .pricing-page .pricing-toolbar { padding: .6rem 1rem; gap: 0; }
  .pricing-page .pricing-toolbar__row { gap: .6rem; }
  .pricing-page .pricing-chips { display: none; }
  .pricing-page .pricing-select { display: block; flex: 1 1 auto; }
  /* Le sélecteur affiche déjà le test courant : le compte reste annoncé aux
     lecteurs d'écran mais ne prend plus de place dans la barre collante. */
  .pricing-page .pricing-toolbar__status {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* ===========================================================================
   2. Vue d'ensemble : les 5 offres et leur prix d'appel en un écran
   =========================================================================== */
.pricing-page .pricing-overview {
  max-width: 1260px;
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 5vw, 3rem) 0;
  font-family: var(--font-ui);
}
.pricing-page .pricing-overview__title {
  margin: 0 0 .75rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink);
}
.pricing-page .pricing-overview__list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.pricing-page .pricing-overview__item { display: block; margin: 0; }
.pricing-page .pricing-overview__item::before { content: none; }
.pricing-page .pricing-overview__item + .pricing-overview__item { border-top: 1px solid var(--border); }

.pricing-page .pricing-overview__link {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto;
  align-items: baseline;
  gap: .15rem 1.25rem;
  padding: .8rem 1.25rem;
  text-decoration: none;
  color: inherit;
  transition: background .2s;
}
.pricing-page .pricing-overview__link:hover,
.pricing-page .pricing-overview__link:focus-visible { background: var(--bg-row-hover); }
.pricing-page .pricing-overview__link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.pricing-page .pricing-overview__name  { font-size: .9375rem; font-weight: 700; color: var(--ink); }
.pricing-page .pricing-overview__use   { font-size: .8125rem; color: var(--ink-light); }
.pricing-page .pricing-overview__price { white-space: nowrap; color: var(--ink); font-variant-numeric: tabular-nums; }
.pricing-page .pricing-overview__price strong { font-size: 1.0625rem; font-weight: 800; letter-spacing: -.025em; }
.pricing-page .pricing-overview__from,
.pricing-page .pricing-overview__per   { font-size: .75rem; font-weight: 600; color: var(--ink-light); }
.pricing-page .pricing-overview__note  { margin: .6rem .15rem 0; font-size: .75rem; font-style: italic; color: var(--ink-light); }

@media (max-width: 720px) {
  .pricing-page .pricing-overview__link { grid-template-columns: minmax(0, 1fr) auto; }
  .pricing-page .pricing-overview__use  { grid-column: 1 / -1; }
}

/* ===========================================================================
   3. Grille : la grille auto-fit existante est conservée telle quelle.
      Seul ajout : deux colonnes entre 780 et 1100 px, là où le CSS actuel
      retombe à une colonne unique de 620 px sur tablette.
      Le mode .single-product est explicitement exclu de cette règle.
   =========================================================================== */
@media (min-width: 780px) and (max-width: 1100px) {
  .pricing-page .pricing-container:not(.single-product) {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    max-width: 1000px;
  }
}

/* Cible du défilement : la carte ne se colle pas sous la barre collante */
.pricing-page .pricing-card { scroll-margin-top: calc(var(--pt-sticky-top) + 7rem); }

/* ===========================================================================
   4. Masquage piloté par le JS
      Un seul attribut, et on ne fait que masquer : le display:flex d'origine
      de .pricing-card n'est jamais réécrit. Les lignes de prix ne sont pas
      concernées, toutes les durées restent affichées.
   =========================================================================== */
.pricing-page .pricing-card[data-pt-hidden] { display: none !important; }

.pricing-page .pricing-empty {
  max-width: 1260px;
  margin: 0 auto;
  padding: 2rem clamp(1.5rem, 5vw, 3rem);
  font-family: var(--font-ui);
  font-size: .9375rem;
  color: var(--ink-light);
  text-align: center;
}
.pricing-page .pricing-empty[hidden] { display: none; }

/* Retour à toutes les offres : réutilise .back-to-all-section et
   .back-to-all-btn, déjà stylés dans le CSS existant. */
.pricing-page .back-to-all-section[hidden] { display: none; }

/* La vue d'ensemble sert à choisir : elle s'efface une fois le choix fait. */
.pricing-page .pricing-overview[hidden] { display: none; }

/* ===========================================================================
   5. Carte compacte
   =========================================================================== */
.pricing-page .card-claim {
  margin: 0 0 .5rem;
  font-family: var(--font-ui);
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--ink);
}
/* La description devient une accroche : le pavé passe dans .card-more.
   Seule propriété écrasée : la marge basse (1.5rem -> .75rem). */
.pricing-page .card-description { margin: 0 0 .75rem; }

.pricing-page .card-more {
  margin: 0 0 1.25rem;
  font-family: var(--font-ui);
  font-size: .875rem;
}
.pricing-page .card-more > summary {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .1rem 0;
  color: var(--accent);
  font-weight: 500;
  list-style: none;
  transition: gap .18s, color .18s;
}
.pricing-page .card-more > summary::-webkit-details-marker { display: none; }
.pricing-page .card-more > summary::after { content: "▾"; font-size: .7em; }
.pricing-page .card-more[open] > summary::after { content: "▴"; }
.pricing-page .card-more > summary:hover { gap: .5rem; color: var(--accent-dk); }
.pricing-page .card-more > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pricing-page .card-more > p {
  margin: .5rem 0 0;
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--ink-mid);
}

/* Fonctionnalités sur deux colonnes uniquement quand une seule offre est
   affichée : dans la grille à 3 colonnes les cartes sont trop étroites. */
.pricing-page .single-product .features-list--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.5rem;
}
.pricing-page .single-product .features-list--grid .features-list__heading,
.pricing-page .single-product .features-list--grid .features-see-all { grid-column: 1 / -1; }
@media (max-width: 560px) {
  .pricing-page .single-product .features-list--grid { grid-template-columns: 1fr; }
}

/* ===========================================================================
   6. Confort
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .pricing-page .pricing-chip,
  .pricing-page .card-more > summary,
  .pricing-page .pricing-overview__link { transition: none; }
}

@media print {
  .pricing-page .pricing-toolbar,
  .pricing-page .back-to-all-section { display: none; }
  .pricing-page .pricing-card[data-pt-hidden] { display: flex !important; }
  .pricing-page .card-more > p { display: block !important; }
}