/* Tarifs : chaque formule est une carte de commande, comme dans la démo de l'accueil.
   Les garde-fous y figurent à l'identique : la sûreté n'est pas une option payante.
   Standard porte seule l'ombre de surface vedette et le bouton au dégradé. */

/* En-tête de page : la gratuité de la bêta, et le sélecteur de facturation en face. */
.pricing-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 24px 48px; padding-block: 56px 40px; }
.period { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line-strong); border-radius: 11px; background: var(--panel); }
.period label { position: relative; display: inline-flex; align-items: baseline; gap: 8px; padding: 7px 14px; border: 1px solid transparent; border-radius: 8px; font: 500 14px var(--sans); color: var(--text-3); cursor: pointer; white-space: nowrap; transition: background-color .15s ease-out, color .15s ease-out; }
.period input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.period label:hover { color: var(--text); }
.period label:has(:checked) { color: var(--text); background: var(--chip); border-color: var(--line-strong); }
.period label:has(:focus-visible) { outline: 2px solid var(--link); outline-offset: 2px; }
.period .off { font: 500 11.5px var(--mono); color: var(--ok); }

/* Les formules */
/* Chaque formule s'étend sur six rangées de la grille parente (sous-grille) : en-têtes,
   prix, lignes, garde-fous et boutons s'alignent d'une carte à l'autre. */
.plans { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding-bottom: 80px; }
.plan { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; min-width: 0; border-color: var(--line); }
.plan.featured { border-color: var(--line-strong); box-shadow: var(--shadow); }
.plan.featured .card-head .tag { background: var(--ink); color: var(--on-ink); }
.plan .card-head { padding-inline: 18px; color: var(--text-2); }

.price { padding: 20px 18px 18px; }
.plan-name { font: 600 20px/1.2 var(--display); letter-spacing: -.2px; max-width: none; }
.amount { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin-top: 10px; }
.amount b { font: 700 46px/1 var(--display); letter-spacing: -1.5px; font-variant-numeric: tabular-nums; }
.amount span { font-size: 14.5px; color: var(--text-2); }
.billed { margin-top: 8px; font-size: 13.5px; color: var(--text-3); }
.annual { display: none; }
/* Sans prise en charge de :has(), la page reste sur les prix mensuels. */
.pricing:has(#annuel:checked) .monthly { display: none; }
.pricing:has(#annuel:checked) .annual { display: block; }

.plan .kv { align-content: start; padding-inline: 18px; border-top: 1px solid var(--line); }
.plan .kv div { grid-template-columns: 116px minmax(0, 1fr); font-size: 14px; }
.gl-block { padding: 14px 18px 16px; border-top: 1px solid var(--line); }
.gl-title { font: 500 11.5px var(--mono); letter-spacing: .6px; text-transform: uppercase; color: var(--text-3); }
.gl-block .gl { padding: 10px 0 0; border-top: 0; gap: 7px; font-size: 13.5px; }
.next { padding: 14px 18px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--text-2); }
.plan .card-actions { padding: 14px 18px 18px; }
.plan .card-actions .btn { flex: 1; justify-content: center; }

/* Questions fréquentes : le titre à gauche, les réponses dépliables à droite. */
.faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 48px; align-items: start; }
.faq-list { border-bottom: 1px solid var(--line); }
.faq details { border-top: 1px solid var(--line); }
.faq summary { position: relative; padding: 18px 40px 18px 0; font: 600 17px/1.35 var(--display); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border: solid var(--text-3); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .2s ease-out; }
.faq details[open] summary::after { margin-top: -2px; transform: rotate(-135deg); }
.faq summary:hover::after { border-color: var(--text); }
.faq details p { padding-bottom: 20px; max-width: 65ch; color: var(--text-2); }

@media (max-width: 1359px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (max-width: 960px) {
  .plans { grid-template-columns: minmax(0, 1fr); max-width: 620px; }
  .plan.featured { order: -1; }
  .faq { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 560px) {
  .pricing-head { padding-block: 40px 32px; }
  .plans { padding-bottom: 56px; }
  .plan .kv div { grid-template-columns: 100px minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .faq summary::after { transition: none; }
}