/* === Checkout (tunnel d'abonnement) — styles spécifiques ===
   Le « chrome » (logo, footer, fond, typographie, .box, .input, .button,
   .columns, .select…) vient de _LayoutLight + du bundle "login" (Bulma + charte).
   Ce fichier ne porte QUE la mise en page propre au tunnel, alignée sur la
   charte (primaire = $primary = #1B6389), ainsi que les sélecteurs pilotés
   par le JavaScript (.step, .out, #payment-element, .spin). */

:root {
    --tp-primary: #1B6389;
    --tp-border: #e3e7ef;
    --tp-muted: #6b7280;
    --tp-ink: #1a2233;
}

/* ── Adaptation du layout _LayoutLight (calibré pour un PETIT panneau login) ──
   MainLight.scss force #mainContent à width:320px, fond blanc, sur un body à
   fond illustré en position:absolute/height:100%, contenu centré. On vise ici
   un rendu épuré "comme le site dl" : fond BLANC uni (pas de deux-tons), en-tête
   aligné à gauche, contenu aéré. checkout.css n'étant chargé QUE sur /Checkout,
   ces overrides ne touchent pas les pages de login. */
body#bodyApp {
    background-image: none !important;
    background-color: #ffffff !important;
    position: static !important;
    height: auto !important;
    min-height: 100vh !important;     /* sticky-footer : la page fait au moins la hauteur écran */
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;            /* neutralise le padding:20px du body app (espace parasite en haut) */
    overflow: visible !important;     /* le body app le met en overflow:auto → bloquait le scroll fenêtre */
}
/* #mainContent : pleine largeur, totalement plat (aucun panneau résiduel) */
#mainContent {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    flex: 1 0 auto;                   /* grandit pour pousser le footer en bas ; déborde si long → scroll */
    display: flex !important;         /* conteneur flex colonne : bandeau en haut, contenu centré dessous */
    flex-direction: column !important;
}
/* Bandeau d'en-tête BLANC pleine largeur, logo en haut à gauche (style site download) */
#mainContent .blocMarque {
    display: block;
    text-align: left;
    background: #ffffff;
    padding: 10px 32px;
    border-bottom: 1px solid #e8ebf2;
}
#mainContent #imgMarque { max-width: 300px; height: auto; }
.checkout .title, .checkout .subtitle { text-align: left; }

/* Le sous-titre remonte contre le titre (règle « .title + .subtitle » de la charte, qui
   applique une marge haute négative) : on rétablit un peu d'air sous le titre du tunnel. */
.checkout .title { margin-bottom: .75rem; }
.checkout .title + .subtitle { margin-top: 0; }

/* Sticky-footer flexbox (body en colonne) : le login met le footer en
   position:absolute (bottom:0) → il chevauche le contenu sur petit écran ET
   laisse une bande blanche sous lui sur grand écran. Page-scopé (checkout.css) :
   #mainContent (flex:1) pousse le footer en bas ; si le contenu dépasse la
   fenêtre, la page scrolle et le footer suit. */
.footer { position: static !important; flex: 0 0 auto; }

/* Largeur de contenu + grille 2 colonnes (formulaire / récapitulatif).
   margin:auto sur cet item flex de #mainContent → centre le bloc VERTICALEMENT
   dans l'espace sous le bandeau (et horizontalement). Si le contenu dépasse,
   les marges auto retombent à 0 → flux normal + scroll, sans rien couper. */
.checkout { max-width: 1040px; width: 100%; margin: auto; padding: 20px 24px 56px; text-align: left; }
.checkout-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 26px;
    align-items: start;
    margin-top: 8px;
}
.checkout-summary { position: sticky; top: 20px; }

/* Sur mobile : une seule colonne, récap au-dessus du formulaire */
@media (max-width: 768px) {
    .checkout-grid { grid-template-columns: 1fr; }
    .checkout-summary { order: -1; position: static; }
}

/* Espacement entre cartes Bulma */
.checkout .box + .box { margin-top: 18px; }

/* En-tête de carte (remplace les <h2> maison) */
.box-title {
    font-size: 13px; margin: 0 0 14px; text-transform: uppercase;
    letter-spacing: .4px; color: var(--tp-muted); font-weight: 700;
}

/* Astérisque « obligatoire » sur les labels */
.label.req::after { content: " *"; color: var(--tp-primary); }

/* Boutons d'action pleine largeur */
.checkout .button.is-primary { margin-top: 18px; }

/* Tag produit dans le récapitulatif */
#prodTag {
    display: inline-block; background: #eaf3f7; color: var(--tp-primary);
    font-weight: 700; font-size: 12px; padding: 4px 10px; border-radius: 999px; margin-bottom: 12px;
}

/* Case CGV */
.cgv { margin-top: 16px; font-size: 13px; }
/* Liens CGV / confidentialité : le bundle login force #mainContent a { display:block;
   text-decoration:none; color:#4a4a4a } → chaque lien passait à la ligne et n'était pas
   souligné. On rétablit un rendu de lien EN LIGNE, souligné, à la couleur charte.
   #mainContent .cgv a (spécificité 1,1,1) bat #mainContent a (1,0,1) sans !important. */
#mainContent .cgv a,
#mainContent .cgv a:hover { display: inline; color: var(--tp-primary); text-decoration: underline; }

/* Périodicité segmentée (radios masqués + libellés cliquables) */
.seg { display: flex; border: 1px solid var(--tp-border); border-radius: 6px; overflow: hidden; margin: 6px 0 14px; }
.seg label { flex: 1; margin: 0; text-align: center; padding: 9px 0; cursor: pointer; font-weight: 600; color: var(--tp-muted); background: #fff; }
.seg input { display: none; }
.seg label:has(input:checked) { background: var(--tp-primary); }
.seg input:checked + span { color: #fff; }
.seg label span { display: block; font-size: 13px; }

/* Lignes de prix du récapitulatif */
.price-line { display: flex; justify-content: space-between; font-size: 14px; padding: 6px 0; color: #444; }
.price-line.total { border-top: 1px solid var(--tp-border); margin-top: 8px; padding-top: 12px; font-size: 19px; font-weight: 800; color: var(--tp-ink); }
.price-muted { color: var(--tp-muted); font-size: 12px; }

/* Zones de message (état piloté par JS via className : "out ok|err|info") */
.out { margin-top: 14px; padding: 11px 13px; border-radius: 6px; font-size: 13px; display: none; white-space: pre-wrap; }
.out.ok   { background: #e7f6ec; color: #11663a; display: block; }
.out.err  { background: #fdecea; color: #8a1c14; display: block; }
.out.info { background: #eaf3f7; color: var(--tp-primary); display: block; }

/* Bandeau rendu par le serveur (toujours visible, contrairement aux zones .out) */
.banner { margin-bottom: 16px; padding: 12px 14px; border-radius: 6px; font-size: 13px; line-height: 1.5; }
.banner.warn { background: #fff6e5; color: #8a5a00; border: 1px solid #f0d9a8; }
.banner a { color: inherit; text-decoration: underline; }

/* Encart Stripe Elements */
#payment-element { margin-top: 8px; padding: 14px; border: 1px solid var(--tp-border); border-radius: 6px; min-height: 44px; background: #fff; }

/* Stepper (affichage des étapes piloté par JS) */
.step { display: none; }
.step.active { display: block; }

/* Spinner de finalisation */
.spin { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--tp-primary); border-top-color: transparent; border-radius: 50%; animation: tpspin .7s linear infinite; vertical-align: -3px; margin-right: 8px; }
@keyframes tpspin { to { transform: rotate(360deg); } }

.securenote { font-size: 11.5px; color: var(--tp-muted); margin-top: 14px; text-align: center; }

/* ── Étape 3 : panneau « vérifiez votre email » (identifiants envoyés par mail) ── */
.done-mail { text-align: center; padding: 6px 4px 2px; }
.mail-badge { width: 52px; height: 52px; margin: 4px auto 14px; border-radius: 50%; background: #e8f0f5; color: var(--tp-primary); display: flex; align-items: center; justify-content: center; }
.done-mail-title { font-size: 19px; font-weight: 700; color: var(--tp-ink); margin-bottom: 6px; }
.done-mail-sub { font-size: 13.5px; color: var(--tp-muted); margin-bottom: 10px; }
.email-box { background: #f3f5f9; border-radius: 6px; padding: 10px 14px; font-weight: 600; color: var(--tp-ink); margin-bottom: 12px; word-break: break-all; }
.done-mail-help { font-size: 12.5px; color: var(--tp-muted); margin-bottom: 14px; }
.done-mail .button { margin-bottom: 14px; }
.hintbox { text-align: left; background: #fff8e6; border: 1px solid #f0d48a; border-radius: 6px; padding: 11px 13px; font-size: 12.5px; color: #7a5a13; }
.hintbox-title { font-weight: 700; margin-bottom: 6px; }
.hintbox ul { margin: 0; padding-left: 18px; }
.hintbox li { margin-bottom: 3px; }