/*
 * La page de règlement d'un dossier.
 *
 * Le champ « Précisez » d'un autre moyen, l'échéancier du chèque 3×, les
 * moyens sur deux colonnes, le bandeau de répartition, la double
 * confirmation, la vue verrouillée, les prélèvements refusés ou
 * remboursés.
 *
 * Écrans : le règlement d'un dossier dans le tunnel ([cnpr_inscriptions]) ;
 * « Précisez » et l'échéancier servent aussi au règlement groupé.
 *
 * Sa place dans la cascade est fixée par cnpr_insc_feuilles_front()
 * (includes/front-tunnel-core.php) : toutes les feuilles du front se
 * chargent partout où l'extension s'affiche, dans cet ordre, avant le thème.
 */

/* « Précisez » : le champ libre qui nomme « Autre moyen ». Même retrait que
   l'échéancier du chèque 3× (flex-basis: 100% + marge de 30px) : il passe à la
   ligne sous sa case, jamais à côté du montant. Masqué par l'attribut `hidden`,
   que le JS pose et retire — d'où la règle explicite, une règle `display` sur
   la classe l'emporterait autrement sur le comportement natif de `hidden`. */
.cnpr-insc-paydetail {
    flex-basis: 100%;
    margin: 8px 0 0 30px;
    font-size: 13px;
}
.cnpr-insc-paydetail[hidden] { display: none; }
.cnpr-insc-paydetail__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--cnpr-couleur-texte-doux, #4c5f80);
}
.cnpr-insc-paydetail input[type="text"] {
    width: 220px;
    max-width: 100%;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid var(--cnpr-filet, #d3eefb);
    background: var(--cnpr-fond, #ffffff);
    font-size: 14px;
    color: var(--cnpr-couleur-texte, #16284f);
}
.cnpr-insc-paydetail input[type="text"]:focus {
    outline: none;
    border-color: var(--cnpr-couleur-lien, #0a6fb2);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cnpr-couleur-lien, #0a6fb2) 15%, transparent);
}

/* Chèque 3x cashing schedule (octobre / janvier / avril). */
.cnpr-insc-pay-schedule {
    flex-basis: 100%;
    margin: 8px 0 0 30px;
    font-size: 13px;
}
.cnpr-insc-pay-schedule ul {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
}
.cnpr-insc-pay-schedule li { white-space: nowrap; }
.cnpr-insc-pay-schedule strong { color: var(--cnpr-couleur-titre, #1e3f94); }

.cnpr-insc-pay-cheque-note { margin-top: 14px; }

/* Desktop: lay the payment methods out on two columns to cut the tall single
   column in half. The legend and the thank-you note span both columns; the two
   card methods (CB 1x + CB 3x) now sit side by side like the other methods (CB
   rendered first → column 1, carte_3x → column 2). The chèque-3x schedule lives
   INSIDE its card, so the grid never splits it. Below the breakpoint everything
   falls back to one column. */
@media (min-width: 720px) {
    .cnpr-insc-paymethods {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .cnpr-insc-paymethods > legend,
    .cnpr-insc-pay-thanks {
        grid-column: 1 / -1;
    }
    .cnpr-insc-paymethod { margin: 0; }
}

/* --- Règlement page: live distribution banner (recap-tarif Slice 1) -------- */
/* Les jetons --c-border / --c-bg-soft / --radius-sm venaient du bureau
   (assets/css/admin/), que le front ne charge pas : seuls leurs replis gris
   s'affichaient. Le bandeau prend les jetons du contrat — filet et aplat clair —
   et garde son arrondi de 8px en dur (le contrat n'a que celui des cartes). */
.cnpr-insc-repartition {
    margin: 18px 0 12px;
    padding: 14px 16px;
    border: 1px solid var(--cnpr-filet, #d3eefb);
    border-radius: 8px;
    background: var(--cnpr-fond-doux, #eaf7fd);
}
.cnpr-insc-repartition__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 3px 0;
}
/* [hidden] must win over the flex display above: the UA rule [hidden]{display:none}
   has specificity 0,0,0 and would otherwise lose to the 0,1,0 flex rule, leaving
   a masked row visible at "0.00 €". This 0,2,0 rule restores the hide. */
.cnpr-insc-repartition__row[hidden],
.cnpr-insc-repartition__card[hidden] { display: none; }
.cnpr-insc-repartition__row--remaining {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px dashed var(--cnpr-filet, #d3eefb);
    font-weight: 600;
}
/* Over-assignment: the on-site amounts exceed the total. The final line then
   carries only the "Montant trop élevé" label (no amount), so colour both. */
.cnpr-insc-repartition__row--over,
.cnpr-insc-repartition__row--over strong { color: var(--cnpr-insc-erreur-vif); }
.cnpr-insc-pay-round-note { margin: 6px 0 0; }

/* Double opt-in that locks the choice. */
.cnpr-insc-optin {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 16px 0 4px;
}

/* Confirm button disabled until the distribution is complete. */
.cnpr-insc-actions .btn.is-disabled,
.cnpr-insc-actions .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Locked (read-only) règlement view. */
.cnpr-insc-lock-confirmed { margin-top: 16px; }
/* `.cnpr-insc .cnpr-insc-notice` (0,2,0) zeroes every notice's top margin, so
   these two sat flush against whatever precedes them. On the LOCKED règlement
   view the tip note follows the pay form, whose actions row carries no bottom
   margin, and the theme's `0 12px 24px` button shadow landed across the
   callout. On the OPEN view the same class now sits INSIDE the form, between
   the distribution banner and the actions row, where the flush edge reads as a
   glued block rather than a separate remark. One margin, two placements, same
   cause. This selector only equals the reset's specificity and wins by later
   source order; moving it above the reset near line 1042 would silently break
   this margin. */
.cnpr-insc .cnpr-insc-installment-note,
.cnpr-insc .cnpr-insc-tip-note { margin-top: 22px; }
.cnpr-insc-pay-summary {
    list-style: none;
    margin: 8px 0;
    padding: 0;
}
.cnpr-insc-pay-summary li {
    padding: 6px 0;
    border-bottom: 1px solid var(--cnpr-filet, #d3eefb);
    font-weight: 600;
}
.cnpr-insc-deposit-msg { margin-top: 14px; }

/* A prélèvement that did NOT go through, on the member's own règlement page.
   Every other row of that list is routine — an amount and a date — so a failure
   worded differently but drawn identically is a failure the member skims past.
   Same danger palette as `.cnpr-insc-notice--warn`, this plugin's existing
   "the club is short" colour, plus a left rule so the line reads as an
   exception without turning the list into a wall of red. */
.cnpr-insc-echeancier__item--echoue {
    padding-left: 10px;
    border-left: 3px solid var(--cnpr-insc-erreur);
    background: var(--cnpr-insc-erreur-fond);
    color: var(--cnpr-insc-erreur);
    font-weight: 600;
}

/* A prélèvement that DID go through and was then undone — refunded, being
   refunded, or contested. Drawn like the failure above (same left rule, same
   weight) because it is the same kind of line: an exception in a list of
   routine ones. Drawn in the plugin's AMBER rather than its red
   (`.cnpr-insc-badge--warn`) because it is not the same severity: nothing is
   missing from the club's accounts, and the member has nothing to regularise.
   Painting it red would put a refund and a refusal at the same level of alarm,
   and the refusal is the one that may need someone. */
.cnpr-insc-echeancier__item--rembourse {
    padding-left: 10px;
    border-left: 3px solid var(--cnpr-insc-alerte);
    background: var(--cnpr-insc-alerte-fond);
    color: var(--cnpr-insc-alerte);
    font-weight: 600;
}