/* L'abonnement (lot 2) : la page #/abonnement et le bandeau d'essai.

   Une feuille par lot : personne d'autre ne la touche, et style.css, personne.
   Tout passe par les jetons de style.css (--fond-carte, --bordure, --accent…),
   qui changent d'eux-mêmes en thème sombre : aucune couleur écrite ici. */

/* Les messages de retour de Stripe et d'erreur, au-dessus des cartes. */
.abonnement-messages { width: min(62rem, 100%); margin: 0 auto; }
.abonnement-messages:empty { display: none; }

/* La page : des cartes empilées, lisibles à 390 px comme à 1024. */
.abonnement { display: grid; gap: 1rem; width: min(62rem, 100%); margin: 0 auto; }
.abonnement .carte { margin: 0; }
.abonnement .message { margin-bottom: 0; }
/* Un message qui suit des boutons (erreur, confirmation) ne colle pas à eux. */
.abonnement [aria-live] .message { margin-top: .8rem; }
.abonnement .message p + p { margin-top: .4rem; }

/* L'état : une ligne de plus en gros, c'est ce qu'on vient lire. */
.carte-abonnement .message { font-size: 1.05rem; }

/* Le choix mensuel / annuel : deux cartes cliquables, l'une des deux est cochée. */
.choix-prix { border: 0; margin: 0 0 1rem; padding: 0; min-width: 0; }
.choix-prix legend { padding: 0; margin-bottom: .6rem; font-weight: 600; }
.choix-prix { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.choix-prix legend { grid-column: 1 / -1; }
.choix-prix-option {
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: "radio montant" "radio unite";
  align-items: center; column-gap: .7rem;
  padding: .8rem 1rem; cursor: pointer;
  background: var(--fond-carte); border: 2px solid var(--bordure); border-radius: var(--rayon);
}
.choix-prix-option input { grid-area: radio; width: 1.2rem; height: 1.2rem; margin: 0; accent-color: var(--accent); }
.choix-prix-montant { grid-area: montant; font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.choix-prix-unite { grid-area: unite; color: var(--texte-doux); font-size: .9rem; }
.choix-prix-option:hover { border-color: var(--accent); }
.choix-prix-option:has(input:checked) { border-color: var(--accent); background: var(--accent-doux); }
.choix-prix-option:has(input:focus-visible) { box-shadow: var(--halo); }

/* La case de l'exécution immédiate : le texte est long, la case ne doit pas se perdre. */
.champ-case { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; }
.champ-case input { width: 1.2rem; height: 1.2rem; margin: .15rem 0 0; accent-color: var(--accent); }
.champ-case label { font-weight: 400; line-height: 1.4; }

/* Les boutons d'une carte : à la ligne sur un petit écran. */
.abonnement .barre-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.abonnement .barre-actions .bouton { min-height: 2.75rem; }

/* La résiliation en deux temps. */
.confirmation-resiliation {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; flex: 1 1 100%;
  padding: .7rem 1rem; border: 1px solid var(--rouge); border-radius: var(--rayon); background: var(--rouge-clair);
}
.confirmation-resiliation p { flex: 1 1 100%; margin: 0; }

.liens-legaux { margin-bottom: 0; }
.liens-legaux a { color: var(--accent); }

/* Le bandeau d'essai (public/js/menus/abonnement.js) : le texte d'abord, le lien à droite. */
#bandeau-abonnement { justify-content: space-between; }
#bandeau-abonnement strong { font-weight: 600; }

@media (max-width: 30rem) {
  .choix-prix { grid-template-columns: 1fr; }
  #bandeau-abonnement .bouton { margin-left: 0; }
}