/* L'achat des programmes (Steve, 29/10/2026) : ce qui s'ajoute à parcours.css et programmes.css
   (case de renonciation, bouton en attente, bande-annonce Bunny, page acheter.html, colonne des espaces dans le parcours). */

.renonciation { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; line-height: 1.45; color: var(--doux); cursor: pointer; }
.renonciation input { margin-top: 2px; accent-color: var(--papier); flex: none; width: 16px; height: 16px; }
.debloquer .actions .btn { width: 100%; justify-content: center; }
.btn:disabled { background: var(--carte); color: var(--sourd); cursor: default; }
.retour-achat { margin: 0; font-size: 14px; color: var(--papier-2); }
.attente-btn { position: relative; color: transparent !important; }
.attente-btn::after { content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--sourd); border-top-color: var(--texte); animation: tourne .8s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
body.confirmation [data-debloquer] { pointer-events: none; opacity: .6; }
body.confirmation .heros.verrou .verrou-ic, body.confirmation .debloquer-bandeau svg { animation: pouls 1.2s ease-in-out infinite; }
@keyframes pouls { 50% { opacity: .35; } }

/* La bande-annonce Bunny (iframe) en fond du héros, recadrée comme une vidéo « cover » (programmes.js : ajusterBandes). */
.bande-bunny { overflow: hidden; pointer-events: none; }
.bande-bunny iframe { position: absolute; border: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .6s; }
.bande-bunny.prete iframe { opacity: 1; }
.bande-bunny:not(.prete) + .son { display: none; }

/* Les cartes de la colonne des espaces (communes au parcours et aux programmes) */
.espace.espace-programmes { background-position: center 30%; }
button.avatar { border: 0; cursor: pointer; font: inherit; }
.compte .debloquer-corps { padding-top: 22px; }
.compte p { margin: 0; color: var(--doux); word-break: break-all; }

/* ---------- acheter.html : le récapitulatif et « Créez votre accès » ---------- */
.achat { position: relative; min-height: 100vh; min-height: 100dvh; display: grid; align-content: start; }
.achat-fond { position: fixed; inset: 0; z-index: -1; background: #0e0e0d 62% 25% / cover no-repeat; }
.achat-fond::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, var(--fond) 20%, rgba(14,14,13,.82) 60%, rgba(14,14,13,.45) 100%), linear-gradient(to right, rgba(14,14,13,.9), rgba(14,14,13,.2) 80%); }
.achat-haut { padding: 22px var(--gouttiere); }
.achat-corps { padding: 6vh var(--gouttiere) 48px; display: grid; }
.achat-carte { width: 100%; max-width: 520px; display: grid; gap: 14px; }
.achat-carte h1 { font-size: clamp(34px, 7vw, 54px); }
.achat-carte .champ { display: block; }
.achat-carte .champ span { display: block; font-size: 13px; color: var(--doux); margin-bottom: 6px; }
.achat-carte .champ input { width: 100%; padding: 15px 16px; border-radius: var(--r); border: 1px solid var(--trait);
  background: rgba(30,30,27,.85); color: var(--texte); font: 16px var(--corps); outline: none; }
.achat-carte .champ input:focus { border-color: var(--papier-2); }
.achat-carte .champ input[readonly] { color: var(--doux); }
.achat-carte .btn { width: 100%; justify-content: center; }
.btn-lien { display: block; width: 100%; padding: 8px; border: 0; background: none; color: var(--doux); font: 14px var(--corps);
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.btn-lien:hover { color: var(--texte); }
.achat-pied { padding: 18px var(--gouttiere) calc(18px + env(safe-area-inset-bottom, 0px)); font-size: 13px; color: var(--sourd); }
.achat-pied a { text-decoration: underline; text-underline-offset: 3px; }