/* -------------------------------------------------------------------------
   Page Paiement en ligne

   Deux cartes : le formulaire à gauche, le virement à droite. Le formulaire
   est celui de PayForm ; on le repeint, on ne le remplace pas.
   ------------------------------------------------------------------------- */

.exo2-pay-hero { text-align: center; padding-bottom: 46px; }
.exo2-pay-hero .exo2-display { margin-bottom: 16px; }
.exo2-pay-intro {
	max-width: 62ch; margin: 0 auto;
	font-size: 16.5px; line-height: 1.66; color: var(--exo2-meta);
}

.exo2-pay-cols {
	display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: 26px; align-items: start;
}
.exo2-pay-form { padding: 30px 32px 28px; }
.exo2-pay-virement { padding: 28px 28px 26px; }

.exo2-pay-cols h2 {
	font: italic 700 17px var(--exo2-police-titre); letter-spacing: .04em;
	text-transform: uppercase; color: #fff; margin: 0 0 16px;
}

@media (max-width: 959px) { .exo2-pay-cols { grid-template-columns: minmax(0, 1fr); } }

/* ---------- ce qui rassure, sous le bouton ---------- */
.exo2-pay-trust { margin: 12px 0 0; text-align: center; font-size: 12.5px; color: var(--exo2-meta); }
.exo2-pay-trust a { color: var(--exo2-corail); }
.exo2-pay-sep { opacity: .4; margin: 0 4px; }
.exo2-pay-repli { margin: 0; color: var(--exo2-meta); }
.exo2-pay-repli a { color: var(--exo2-corail); }

/* ---------- le virement ---------- */
/*
 * Le bloc des coordonnées porte un filet corail à gauche : c'est ce qu'on
 * vient copier, il doit se trouver d'un coup d'oeil dans la page.
 */
.exo2-pay-iban {
	display: grid; gap: 3px;
	margin: 14px 0;
	padding: 15px 16px;
	background: var(--exo2-fond-profond);
	border: 1px solid var(--exo2-ligne);
	border-left: 3px solid var(--exo2-corail);
	font-size: 14px; line-height: 1.55;
}
.exo2-pay-iban b { color: #fff; font-weight: 600; }
/* L'IBAN se lit chiffre par chiffre quand on le recopie : une chasse fixe
   evite de confondre un 1 et un l. */
.exo2-pay-iban-num {
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 13.5px; color: #fff; letter-spacing: .02em;
}
.exo2-pay-detect { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--exo2-meta); }
.exo2-pay-cgv { margin: 18px 0 0; font-size: 13px; }
.exo2-pay-cgv a { color: var(--exo2-corail); }

/* -------------------------------------------------------------------------
   Le formulaire de PayForm, repeint

   Il rend une grille Bootstrap : une ligne par champ, l'étiquette dans une
   colonne, le champ dans l'autre. Trois pièges déjà rencontrés sur les pages
   Bon cadeau et Coaching en ligne, et le même remède.
   ------------------------------------------------------------------------- */

/* Le conteneur pose une gouttière négative de 13 px qui fait déborder le
   formulaire des marges de sa carte. */
.exo2-paiement .pf-container,
.exo2-paiement .convertforms,
.exo2-paiement #os_form .row,
.exo2-paiement #os_form .row-fluid { margin-left: 0; margin-right: 0; }
.exo2-paiement .pf-container { display: block; }

/* Deux rembourrages de 12,75 px, compensation de la gouttière Bootstrap :
   celui du formulaire et celui de « .controls ». Ils mangeaient 51 px, et un
   champ de 224 px flottait dans une carte de 275. */
.exo2-paiement #os_form,
.exo2-paiement #os_form .controls { padding-left: 0; padding-right: 0; }

/* Les étiquettes passent au-dessus des champs : en colonne, elles tombaient
   à 45 px de large et s'empilaient un mot par ligne. */
.exo2-paiement #os_form .form-group,
.exo2-paiement #os_form .form-row {
	display: block; margin: 0 0 16px; padding: 0; width: 100%;
}
.exo2-paiement #os_form .form-control-label,
.exo2-paiement #os_form [class*="col-md-"] {
	display: block; width: 100%; max-width: none; flex: none; padding: 0;
}
.exo2-paiement #os_form label {
	display: block; margin-bottom: 6px;
	font: 600 11.5px var(--exo2-police); letter-spacing: .9px; text-transform: uppercase;
	color: var(--exo2-meta);
}
.exo2-paiement #os_form .required { color: var(--exo2-corail); }

.exo2-paiement #os_form input[type="text"],
.exo2-paiement #os_form input[type="email"],
.exo2-paiement #os_form input[type="number"],
.exo2-paiement #os_form select,
.exo2-paiement #os_form textarea {
	width: 100%; height: 44px; padding: 0 14px;
	background: var(--exo2-fond-profond); color: #fff;
	border: 1px solid var(--exo2-ligne); border-radius: 0;
	font: 15px var(--exo2-police);
}
.exo2-paiement #os_form textarea { height: auto; padding: 12px 14px; }
.exo2-paiement #os_form input:focus,
.exo2-paiement #os_form select:focus,
.exo2-paiement #os_form textarea:focus { outline: 0; border-color: var(--exo2-corail); }

/*
 * Le total, les frais de carte et le montant brut.
 *
 * PayForm les calcule et les rend dans trois champs en lecture seule. On ne
 * les recalcule pas - deux calculs qui divergeraient seraient pires qu'un
 * seul faux - on les habille en récapitulatif : fond sombre, pas de bordure
 * de saisie, et le montant brut en gros, puisque c'est ce qui sera débité.
 */
.exo2-paiement #os_form input[readonly],
.exo2-paiement #os_form input#total_amount,
.exo2-paiement #os_form input#payment_processing_fee,
.exo2-paiement #os_form input#gross_amount {
	background: transparent; border: 0; height: auto; padding: 0;
	color: #fff; font: 600 15px var(--exo2-police);
}
.exo2-paiement #os_form input#gross_amount {
	font: italic 700 22px var(--exo2-police-titre); letter-spacing: .5px;
}
.exo2-paiement #os_form .input-group { display: flex; align-items: baseline; gap: 6px; }
.exo2-paiement #os_form .input-group-text { color: var(--exo2-meta); font-size: 13px; }

/*
 * Le récapitulatif : montant, frais de carte, total.
 *
 * PayForm les calcule et les rend dans trois lignes de formulaire, en lecture
 * seule. On ne les recalcule pas - deux calculs qui divergeraient seraient
 * pires qu'un seul faux - on les rassemble en un bloc qui se lit d'un coup :
 * le libellé à gauche, la valeur à droite, et le total en gros, puisque c'est
 * la somme qui sera débitée.
 */
.exo2-paiement #os_form .form-group:has(#total_amount),
.exo2-paiement #os_form .form-group:has(#payment_processing_fee),
.exo2-paiement #os_form .form-group:has(#gross_amount) {
	display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
	margin: 0; padding: 9px 14px;
	background: var(--exo2-fond-profond);
	border: 1px solid var(--exo2-ligne); border-bottom: 0;
}
.exo2-paiement #os_form .form-group:has(#total_amount) { border-radius: 0; margin-top: 4px; }
.exo2-paiement #os_form .form-group:has(#gross_amount) {
	border-bottom: 1px solid var(--exo2-ligne);
	border-top-color: var(--exo2-corail);
	padding-top: 12px; padding-bottom: 12px;
	margin-bottom: 18px;
}
.exo2-paiement #os_form .form-group:has(#total_amount) .form-control-label,
.exo2-paiement #os_form .form-group:has(#payment_processing_fee) .form-control-label,
.exo2-paiement #os_form .form-group:has(#gross_amount) .form-control-label {
	width: auto; margin: 0;
	font: 600 11.5px var(--exo2-police); letter-spacing: .9px; text-transform: uppercase;
	color: var(--exo2-meta);
}
.exo2-paiement #os_form .form-group:has(#total_amount) [class*="col-md-"]:not(.form-control-label),
.exo2-paiement #os_form .form-group:has(#payment_processing_fee) [class*="col-md-"]:not(.form-control-label),
.exo2-paiement #os_form .form-group:has(#gross_amount) [class*="col-md-"]:not(.form-control-label) { width: auto; }

/* Le suffixe de devise porte le rembourrage de Bootstrap : il faisait une
   ligne de 79 px pour une valeur de 18. */
.exo2-paiement #os_form .form-group:has(#total_amount) .input-group,
.exo2-paiement #os_form .form-group:has(#payment_processing_fee) .input-group,
.exo2-paiement #os_form .form-group:has(#gross_amount) .input-group { min-height: 0; }
.exo2-paiement #os_form .input-group-text {
	padding: 0; margin: 0; border: 0; background: none; line-height: 1;
}
.exo2-paiement #os_form .input-group > * { min-height: 0; }

/* ---------- le choix du moyen de paiement ---------- */
/*
 * Le rendre au visiteur.
 *
 * PayForm pose lui-même un « display: none » en ligne sur cette ligne au
 * chargement : les deux moyens existent, la carte est cochée, mais le
 * virement est hors d'atteinte. Ce n'est pas un choix - les paiements
 * enregistrés montrent des virements jusqu'en juin 2026, et le composant
 * garde ses trois textes de courriel « paiement hors ligne », en français, en
 * anglais et en allemand. C'est une régression du composant.
 *
 * Un style en ligne ne se contredit qu'avec !important. La maquette validée
 * montre les deux boutons : les voici.
 */
.exo2-paiement #os_form .form-group.payment_information:has([name="payment_method"]) {
	display: block !important;
	margin-bottom: 18px;
}
.exo2-paiement #os_form label.d-block {
	display: flex; align-items: center; gap: 10px;
	margin-bottom: 9px;
	font: 15px var(--exo2-police); letter-spacing: 0; text-transform: none;
	color: var(--exo2-texte); cursor: pointer;
}
.exo2-paiement #os_form input[type="radio"] { accent-color: var(--exo2-corail); margin: 0; flex: none; }

/* ---------- les conditions ---------- */
.exo2-paiement #os_form label.checkbox {
	display: flex; align-items: flex-start; gap: 10px;
	font: 13.5px/1.5 var(--exo2-police); letter-spacing: 0; text-transform: none;
	color: var(--exo2-meta);
}
.exo2-paiement #os_form label.checkbox input { accent-color: var(--exo2-corail); margin-top: 3px; flex: none; }
.exo2-paiement #os_form label.checkbox a { color: var(--exo2-corail); }

/* ---------- le bouton ---------- */
.exo2-paiement #os_form .form-actions { margin: 20px 0 0; padding: 0; background: none; border: 0; }
.exo2-paiement #os_form #btn-submit,
.exo2-paiement #os_form input[type="submit"] {
	display: block; width: 100%; height: 48px; padding: 0 24px 2px;
	border: 0; border-radius: 0;
	background-image: var(--exo2-degrade); color: #fff;
	font: italic 700 13px var(--exo2-police-titre); letter-spacing: 2px; text-transform: uppercase;
	cursor: pointer; box-shadow: var(--exo2-ombre);
}
.exo2-paiement #os_form #btn-submit:hover,
.exo2-paiement #os_form input[type="submit"]:hover { background-image: var(--exo2-degrade-survol); }

/* Les messages d'erreur du composant, au ton de la maison. */
.exo2-paiement #os_form #errors,
.exo2-paiement #os_form .alert { color: var(--exo2-corail); font-size: 13.5px; margin-top: 12px; }