/* Pages d'abonnement (formulaire, remerciement) et conditions : chargé après style.css */
[hidden] { display: none !important; }
.page-simple { max-width: 68rem; margin: 0 auto; padding: clamp(2.2rem, 6vw, 4.5rem) var(--marge) clamp(3rem, 8vw, 6rem); }
.page-simple .titre-section { max-width: 18ch; margin: .4rem 0 1rem; }
.entete-retour { margin-left: auto; font-weight: 600; font-size: .95rem; text-decoration: none; padding: .6rem 0; }

.abonnement-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem; margin-top: 2rem; align-items: start; }
@media (min-width: 900px) { .abonnement-grille { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 2.4rem; } }

.carte { background: var(--papier); border: 1px solid var(--trait); border-radius: var(--rayon, 18px); padding: clamp(1.3rem, 4vw, 2.2rem); }
.carte-grise { background: var(--gris); border-color: transparent; }

.formulaire { display: grid; gap: 1.15rem; }
.champ { display: grid; gap: .4rem; }
.champ label { font-weight: 600; font-size: .97rem; }
.champ .aide { font-size: .88rem; color: var(--gris-texte); }
.champ input {
  font: inherit; font-size: 1.0625rem; color: var(--encre); width: 100%; min-height: 50px;
  padding: .7rem .9rem; border: 1px solid var(--trait); border-radius: 12px; background: #fff;
}
.champ input:focus-visible { outline: 3px solid rgb(0 113 227 / .35); outline-offset: 1px; border-color: var(--bleu, #0071e3); }
.case { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem; align-items: start; font-size: .95rem; }
.case input { width: 22px; height: 22px; margin: .15rem 0 0; accent-color: var(--bleu, #0071e3); }
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.formulaire .bouton { width: 100%; justify-content: center; min-height: 52px; font-size: 1.05rem; }
.rassure { font-size: .88rem; color: var(--gris-texte); text-align: center; }

.message { border-radius: 12px; padding: .9rem 1rem; font-size: .95rem; background: #fff4f2; color: #9a2a1a; border: 1px solid #f3cfc8; }
.message[hidden] { display: none; }
.message-doux { background: var(--gris); color: var(--encre); border-color: transparent; }

.recap-prix { display: flex; align-items: baseline; gap: .4rem; margin: .3rem 0 1rem; }
.recap-prix strong { font-size: clamp(2.4rem, 6vw, 3.2rem); letter-spacing: -.03em; line-height: 1; }
.recap h2 { font-size: 1.15rem; }
.liste-coche { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: .55rem; font-size: .97rem; }
.liste-coche li { display: grid; grid-template-columns: 1.2rem minmax(0, 1fr); gap: .5rem; }
.liste-coche li::before { content: "✓"; font-weight: 800; color: var(--bleu, #0071e3); }
.etapes-suite { counter-reset: e; list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; font-size: .95rem; }
.etapes-suite li { counter-increment: e; display: grid; grid-template-columns: 1.9rem minmax(0, 1fr); gap: .6rem; align-items: start; }
.etapes-suite li::before {
  content: counter(e); display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: var(--encre); color: #fff; font-weight: 700; font-size: .85rem;
}
.sous-titre { font-size: 1.05rem; margin: 1.4rem 0 .8rem; }

/* remerciement */
.etat { display: grid; gap: 1rem; max-width: 40rem; }
.etat .bouton { justify-self: start; }
.roue { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--trait); border-top-color: var(--bleu, #0071e3); animation: tourne 1s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .roue { animation-duration: 3s; } }
.ligne-attente { display: flex; align-items: center; gap: .7rem; color: var(--gris-texte); }

/* conditions */
.texte-legal { max-width: 46rem; }
.texte-legal h2 { font-size: 1.2rem; margin: 2rem 0 .6rem; }
.texte-legal p, .texte-legal li { color: #333; margin: 0 0 .7rem; }
.texte-legal ul { padding-left: 1.2rem; }
.texte-legal .date { color: var(--gris-texte); font-size: .9rem; }

@media (max-width: 899px) {
  .page-simple { text-align: center; }
  .page-simple .titre-section, .page-simple .chapeau { margin-left: auto; margin-right: auto; }
  .carte, .texte-legal { text-align: left; }
  .etat { margin: 0 auto; justify-items: center; text-align: center; }
  .etat .bouton { justify-self: center; }
  .texte-legal { margin: 0 auto; }
}
button.bouton { border: 0; font: inherit; font-size: 1.05rem; font-weight: 500; cursor: pointer; }
.etat .etapes-suite { text-align: left; }