/* =========================================================================
   LE PAIEMENT SUR UNE PAGE — planches « Paiement v2 » (Ludovic, 30/09)

   Canevas « Design Antithèse 2 », page « Compte et paiement » ; recopiées
   dans outils/design-paiement/planches/. Le gabarit est
   theme/antithese/memberpress/checkout/spc_form.php, la page paiement.php.

   Sobre : le récapitulatif à gauche, un filet vertical, le formulaire à
   droite ; des champs groupés dans un cadre, le bouton NOIR — ici le rouge
   ne dit pas « payez », le noir dit « c'est à vous ». Sous 992 px, une
   colonne de 560 px, le récapitulatif d'abord et « Compris » replié.

   Le formulaire garde les classes de MemberPress (`mepr-*`, `mp-form-row`)
   pour ses scripts, pas pour ses styles : la page n'a pas de `.mp_wrapper`,
   et rien d'abonnement.css ne s'y applique.
   ========================================================================= */

.paiement-page { padding-bottom: 96px; }

.paiement-grille {
  display: grid;
  grid-template-columns: minmax(0, 420fr) 1px minmax(0, 540fr);
  column-gap: 72px;
  align-items: start;
  max-width: var(--largeur-paiement);
  margin: 0 auto;
  padding-top: 56px;
}
.paiement-filet { align-self: stretch; background: var(--paiement-filet); }

/* Les erreurs que MemberPress pose en tête du formulaire (un e-mail déjà
   pris, un paiement refusé) : sur toute la largeur, au-dessus des colonnes. */
.paiement-grille > .mepr-top-error,
.paiement-page .mepr_error {
  grid-column: 1 / -1;
  margin-bottom: 24px;
  padding: 12px 16px;
  border-left: 3px solid var(--accent);
  background: var(--fond-action);
  font-size: 14px;
  line-height: 1.5;
}
.paiement-grille > .mepr-top-error ul,
.paiement-page .mepr_error ul { margin: 0; padding: 0; list-style: none; }

.paiement-masque {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --- Le récapitulatif ----------------------------------------------------- */
.paiement-recap { font-family: var(--police-meta); color: var(--gris-texte); }
.paiement-retour {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; color: var(--paiement-texte);
}
.paiement-retour svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.paiement-retour:hover { color: var(--gris-texte); }
.paiement-surtitre { margin: 28px 0 0; font-size: 15px; color: var(--paiement-texte); }
/* Le titre de la formule : PT Serif, pas League Gothic — la page parle bas. */
.paiement-titre {
  margin-top: 6px;
  font-family: var(--police-titre);
  font-size: 30px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em;
  text-transform: none;
}
.paiement-prix { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 14px 0 0; }
.paiement-montant { font-size: 40px; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.paiement-unite { font-size: 15px; line-height: 1.3; color: var(--paiement-texte); white-space: nowrap; }
.paiement-puis { margin: 8px 0 0; font-size: 15px; line-height: 1.45; color: var(--paiement-texte); }

.paiement-lignes { margin-top: 28px; border-top: 1px solid var(--paiement-filet); }
.paiement-ligne {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--paiement-filet);
  font-size: 15px;
}
.paiement-ligne-nom { color: var(--paiement-texte); }
.paiement-total { font-weight: 700; border-bottom: 0; }
.paiement-pastille {
  display: inline-block; margin-left: 8px; padding: 1px 7px;
  background: var(--paiement-pastille); font-size: 12px; color: var(--gris-texte);
}

/* Les commandes du code : des boutons qui se lisent comme des liens soulignés. */
.paiement-retirer,
.paiement-lien-code,
.paiement-code-appliquer {
  font: inherit; background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--paiement-texte);
  text-decoration: underline; text-decoration-color: var(--paiement-souligne);
  text-underline-offset: 3px;
}
.paiement-retirer { margin-left: 8px; font-size: 13px; color: var(--gris-texte-secondaire); }
.paiement-lien-code { font-size: 14px; }
.paiement-retirer:hover,
.paiement-lien-code:hover,
.paiement-code-appliquer:hover { color: var(--gris-texte); text-decoration-color: currentColor; }
.paiement-ligne-code { display: block; padding: 12px 0; }
.paiement-lien-code[aria-expanded="true"] { display: none; }
.paiement-code { display: flex; align-items: center; gap: 12px; }
.paiement-code[hidden] { display: none; }
.paiement-code-champ {
  flex: 1 1 auto; min-width: 0; height: 40px; box-sizing: border-box;
  padding: 0 12px;
  border: 1px solid var(--paiement-bord); border-radius: var(--rayon); background: var(--c-blanc);
  font: inherit; font-size: 16px; color: var(--gris-texte);
  text-transform: uppercase;
}
.paiement-code-champ::placeholder { color: var(--paiement-indice); text-transform: none; }
.paiement-code-champ:focus { outline: none; border-color: var(--gris-texte); }
.paiement-code-appliquer { flex: none; font-size: 14px; min-height: 40px; }
.paiement-code-erreur { margin: 8px 0 0; font-size: 13px; color: var(--accent); }
.paiement-code-erreur[hidden] { display: none; }
[data-recap].est-en-calcul { opacity: .5; transition: opacity var(--duree-survol); }

/* « Compris dans l'abonnement » : ouvert au bureau, son résumé n'y est
   qu'un titre ; replié sous 992 px (la planche tablette) — c'est le script
   qui le replie, sans lui tout reste lisible. */
.paiement-compris { margin-top: 32px; }
.paiement-compris summary {
  display: flex; justify-content: space-between; align-items: center;
  list-style: none; cursor: default; pointer-events: none;
  font-size: 13px; font-weight: 500; color: var(--paiement-texte);
}
.paiement-compris summary::-webkit-details-marker { display: none; }
.paiement-chevron { display: none; width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.paiement-compris ul { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.paiement-compris li { display: flex; gap: 10px; margin: 0; font-size: 14px; line-height: 1.45; color: var(--paiement-texte); }
.paiement-compris li::before { content: none; }
.paiement-compris li svg { flex: none; width: 14px; height: 14px; margin-top: 3px; fill: none; stroke: var(--gris-texte-secondaire); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* --- Le formulaire -------------------------------------------------------- */
.paiement-formulaire { font-family: var(--police-meta); color: var(--gris-texte); }
.paiement-bloc + .paiement-bloc { margin-top: 32px; }
.paiement-bloc-titre { font-family: var(--police-meta); font-size: 16px; font-weight: 500; line-height: 1.3; }
.paiement-connecte { margin: 16px 0 0; font-size: 14px; color: var(--paiement-texte); }

.paiement-formulaire .mp-form-row { margin: 0; }
.paiement-formulaire .mp-form-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.paiement-libelle {
  display: block; margin: 16px 0 6px; padding: 0;
  font-size: 14px; font-weight: 400; color: var(--paiement-texte);
}
.paiement-carte { margin: 0; padding: 0; border: 0; min-width: 0; }
.paiement-carte > legend.paiement-libelle { margin-bottom: 6px; }

/* Les champs groupés : un cadre, des rangs séparés par un filet. */
.paiement-groupe { border: 1px solid var(--paiement-bord); border-radius: var(--rayon); background: var(--c-blanc); }
.paiement-rang { display: grid; position: relative; }
.paiement-rang + .paiement-rang { border-top: 1px solid var(--paiement-bord); }
.paiement-rang-deux { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

.paiement-groupe input {
  width: 100%; height: 46px; box-sizing: border-box; margin: 0;
  padding: 0 14px;
  border: 0; border-radius: 0; background: transparent;
  font: inherit; font-size: 16px; color: var(--gris-texte);
}
.paiement-groupe input::placeholder { color: var(--paiement-indice); }
.paiement-groupe .paiement-rang-deux > * + * { border-left: 1px solid var(--paiement-bord); } /* après la règle des champs, qui l'effaçait */
/* Le focus se voit dans le cadre, sans le déborder. */
.paiement-groupe input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--gris-texte); }
/* MemberPress peint un champ invalide d'un fond rouge vif et d'un cadre de
   2 px (`ui/theme.css`, `.mepr-form input.invalid`), en `!important` — seul
   un `!important` le reprend : ici, un filet rouge dans le cadre, le message
   dessous. */
.paiement-groupe input.invalid { background: transparent !important; border: 0 !important; box-shadow: inset 0 0 0 1px var(--accent); }
.paiement-avec-oeil input { padding-right: 52px; }
.paiement-oeil {
  position: absolute; right: 2px; top: 1px;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--paiement-indice);
}
.paiement-oeil svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.paiement-oeil:hover,
.paiement-oeil[aria-pressed="true"] { color: var(--gris-texte); }

.paiement-aide { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: var(--gris-texte-secondaire); }
.paiement-lien { color: var(--gris-texte); text-decoration: underline; text-decoration-color: var(--paiement-souligne); text-underline-offset: 3px; }
.paiement-lien:hover { text-decoration-color: currentColor; }

/* LES ERREURS : MemberPress marque un champ `invalid` ; son message à lui
   ne sait pas se placer sous un cadre groupé, le thème pose le sien, que la
   marque allume. Les erreurs du serveur (`mepr-validation-error`) se posent
   à côté du libellé. */
.paiement-erreur { display: none; margin: 6px 0 0; font-size: 13px; color: var(--accent); }
.paiement-champ:has(input[name="user_first_name"].invalid) .paiement-erreur-prenom,
.paiement-champ:has(input[name="user_last_name"].invalid) .paiement-erreur-nom,
.paiement-champ:has(.mepr-password.invalid) .paiement-erreur-mdp,
.paiement-champ:has(.mepr-password-confirm.invalid) .paiement-erreur-confirmation,
.paiement-champ:has(input[type="email"].invalid) .paiement-erreur,
.paiement-champ:has(input[name="user_login"].invalid) .paiement-erreur { display: block; }
.paiement-formulaire .mepr-validation-error { font-size: 13px; color: var(--accent); }

/* Les cases : une case noire, le texte à côté, l'aide dessous. */
.paiement-case {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start;
  margin-top: 16px;
  font-size: 14px; line-height: 1.45; color: var(--gris-texte);
  cursor: pointer;
}
.paiement-case input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--gris-texte); }
.paiement-case .paiement-aide { display: block; margin-top: 2px; }
.paiement-formulaire label.paiement-case.invalid { background: none !important; border: 0 !important; padding: 0; }
.paiement-case.invalid > span { color: var(--accent); }

/* La carte de Stripe : son cadre est chez Stripe, on ne règle que l'air
   autour ; les icônes de cartes de MemberPress ne sont pas sur la planche. */
.paiement-carte .mepr-payment-methods-icons { display: none; }
.paiement-carte .mepr-payment-method,
.paiement-carte .mepr-payment-method-desc-text { margin: 0; padding: 0; }
.paiement-carte .mepr-stripe-card-errors:not(:empty) { margin-top: 8px; font-size: 13px; color: var(--accent); }

.paiement-envoi { margin: 0; }
.paiement-payer {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 52px; margin-top: 24px;
  padding: 0 24px;
  border: 0; border-radius: var(--rayon);
  background: var(--gris-texte); color: var(--c-blanc);
  font-family: var(--police-meta); font-size: 16px; font-weight: 500;
  cursor: pointer;
  transition: background var(--duree-survol);
}
.paiement-payer:hover { background: #000; }
.paiement-payer:disabled { opacity: .6; cursor: progress; }
.paiement-envoi .mepr-loading-gif { display: block; margin: 12px auto 0; }
.paiement-envoi .mepr-form-has-errors { display: none; margin-top: 12px; font-size: 13px; color: var(--accent); text-align: center; }
.paiement-sur {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin: 14px 0 0; font-size: 13px; color: var(--gris-texte-secondaire);
}
.paiement-sur svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Les erreurs du serveur que MemberPress pose AVANT le formulaire. */
.paiement-page > .mepr_error { max-width: var(--largeur-paiement); margin: 32px auto 0; }

/* Un message de MemberPress à la place du formulaire. */
.paiement-message { max-width: var(--largeur-lecture); margin: 0 auto; padding-top: 56px; font-size: 16px; }
.paiement-message .paiement-titre { margin-bottom: 24px; }

/* LE RÉCAPITULATIF RESTE EN VUE au bureau, sous l'en-tête — quand l'écran
   est assez haut pour le montrer entier. Il suit l'en-tête qui s'escamote,
   comme le rail d'une leçon. */
@media (min-width: 992px) and (min-height: 860px) {
  .paiement-recap { position: sticky; top: calc(var(--hauteur-entete) + 24px); transition: top .25s ease; }
  body:has(.entete.escamote) .paiement-recap { top: calc(var(--hauteur-rangee-2) + 24px); }
}

/* TABLETTE ET TÉLÉPHONE — une colonne, le récapitulatif d'abord. */
@media (max-width: 991px) {
  .paiement-page { padding-bottom: 64px; }
  .paiement-grille { grid-template-columns: minmax(0, 1fr); max-width: 560px; padding-top: 32px; }
  .paiement-filet { display: none; }
  .paiement-surtitre { margin-top: 20px; }
  .paiement-formulaire { margin-top: 32px; }
  .paiement-bloc + .paiement-bloc { margin-top: 28px; }

  .paiement-compris { margin-top: 12px; }
  .paiement-compris summary {
    min-height: 48px; cursor: pointer; pointer-events: auto;
    font-size: 14px;
    border-top: 1px solid var(--paiement-filet); border-bottom: 1px solid var(--paiement-filet);
  }
  .paiement-compris[open] summary { border-bottom: 0; }
  .paiement-compris[open] .paiement-chevron { transform: rotate(180deg); }
  .paiement-chevron { display: block; }
  .paiement-compris ul { margin-top: 0; }
}

@media (max-width: 767px) {
  .paiement-grille { padding-top: 20px; }
  .paiement-titre { font-size: 26px; }
  .paiement-montant { font-size: 34px; }
  .paiement-puis { font-size: 14px; }
  .paiement-lignes { margin-top: 22px; }
  .paiement-ligne { font-size: 14px; }
  .paiement-payer { min-height: 54px; }
}