/* ═══════════════════════════════════════════════════════════════
   UNIDET v2 — PORTAIL DÉBITEUR /payer/
   CSS autonome — scope : body.unidet-payer-body
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════
   01. RESET BODY + NEUTRALISATION ELEMENTOR
   ═══════════════════════════════════════════════ */
html, body.unidet-payer-body {
    margin: 0 !important;
    padding: 0 !important;
    background: #fafaf7 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    color: #0a0e17 !important;
    overflow-x: hidden !important;
}
body.unidet-payer-body #wpadminbar { display: none !important; }
body.unidet-payer-body.admin-bar { top: 0 !important; }

body.unidet-payer-body header,
body.unidet-payer-body footer,
body.unidet-payer-body .site-header,
body.unidet-payer-body .site-footer,
body.unidet-payer-body .elementor-location-header,
body.unidet-payer-body .elementor-location-footer {
    display: none !important;
}

html body.unidet-payer-body #page,
html body.unidet-payer-body #content,
html body.unidet-payer-body #primary,
html body.unidet-payer-body #main,
html body.unidet-payer-body .site,
html body.unidet-payer-body .site-content,
html body.unidet-payer-body .entry-content,
html body.unidet-payer-body main,
html body.unidet-payer-body article,
html body.unidet-payer-body .elementor,
html body.unidet-payer-body .elementor-section,
html body.unidet-payer-body .elementor-container,
html body.unidet-payer-body .elementor-column,
html body.unidet-payer-body .elementor-column-wrap,
html body.unidet-payer-body .elementor-widget-wrap,
html body.unidet-payer-body .elementor-widget,
html body.unidet-payer-body .elementor-widget-container,
html body.unidet-payer-body .elementor-shortcode,
html body.unidet-payer-body .e-con,
html body.unidet-payer-body .e-con-inner,
html body.unidet-payer-body .e-con-boxed,
html body.unidet-payer-body .e-con-full {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
}

/* ═══════════════════════════════════════════════
   02. LAYOUT 2 COLONNES
   ═══════════════════════════════════════════════ */
body.unidet-payer-body .unidet-reg-page {
    display: grid;
    grid-template-columns: 42% 1fr;
    min-height: 100vh;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

@media (min-width: 901px) {
    body.unidet-payer-body .unidet-reg-page {
        grid-template-columns: 36% 1fr;
        height: 100dvh;
        max-height: 100dvh;
        overflow: hidden;
    }
}

/* ═══════════════════════════════════════════════
   03. PANNEAU GAUCHE — Branding sombre
   Valeurs copiées EXACTEMENT de style.css
   ═══════════════════════════════════════════════ */
body.unidet-payer-body .unidet-reg-left {
    position: relative;
    background: linear-gradient(160deg, #0a0e17 0%, #0d1420 60%, #111827 100%);
    overflow: hidden;
    display: flex;
}

body.unidet-payer-body .unidet-reg-left-bg {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(160deg,
            rgba(10, 14, 23, 0.62) 0%,
            rgba(13, 20, 32, 0.42) 45%,
            rgba(17, 24, 39, 0.68) 100%),
        url('http://app.unidet.fr/wp-content/uploads/2026/09/unidet_auth_pages.webp');
    background-size: cover;
    background-position: 55% 50%;
    background-repeat: no-repeat;
    opacity: 1;
    filter: brightness(1.05) contrast(0.92) saturate(0.75);
    z-index: 0;
    pointer-events: none;
}

body.unidet-payer-body .unidet-reg-left-glow {
    position: absolute;
    top: -180px;
    right: -180px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 163, 115, 0.15) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

body.unidet-payer-body .unidet-reg-left-inner {
    position: relative;
    z-index: 2;
    padding: 48px 52px 32px !important;
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    color: #fff;
}

@media (min-width: 901px) {
    body.unidet-payer-body .unidet-reg-left-inner {
        padding: 42px 44px 32px !important;
        height: 100%;
        gap: 0;
    }
}

/* Logo */
body.unidet-payer-body .unidet-reg-brand {
    display: inline-flex;
    align-items: center;
    gap: 0;
    margin: 0 0 68px 0;
    align-self: flex-start;
    text-decoration: none;
}

body.unidet-payer-body .unidet-reg-brand-name { display: none !important; }

body.unidet-payer-body .unidet-reg-logo {
    width: 84px;
    height: 84px;
    min-width: 84px;
    max-width: 84px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    flex-shrink: 0;
}

body.unidet-payer-body .unidet-reg-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: none;
}

/* Hero */
body.unidet-payer-body .unidet-reg-hero { margin: 0; padding: 0; }

body.unidet-payer-body .unidet-reg-tag {
    display: block;
    font-size: 11px;
    color: #d4a373;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 600;
    margin: 0 0 20px;
    padding: 0 0 14px;
    border-bottom: 1px solid rgba(212, 163, 115, 0.35);
    width: 100%;
}

body.unidet-payer-body .unidet-reg-h1 {
    font-size: clamp(30px, 2.8vw, 42px);
    font-weight: 500;
    line-height: 1.12;
    color: #fff;
    margin: 0 0 16px;
    letter-spacing: -0.8px;
}

body.unidet-payer-body .unidet-reg-accent {
    color: #d4a373;
    font-weight: 500;
}

body.unidet-payer-body .unidet-reg-lead {
    font-size: 14.5px;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.65;
    margin: 0 0 28px;
    max-width: 380px;
}

body.unidet-payer-body .unidet-reg-features {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

body.unidet-payer-body .unidet-reg-feat {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 14.5px;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 500;
    line-height: 1.4;
}

body.unidet-payer-body .unidet-reg-check {
    width: 34px;
    height: 34px;
    min-width: 34px;
    max-width: 34px;
    background: linear-gradient(135deg, #d4a373 0%, #b8895c 100%);
    color: #0a0e17;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 900;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(212, 163, 115, 0.35);
    line-height: 1;
}

/* Citation */
body.unidet-payer-body .unidet-reg-quote {
    margin: auto 0 0 0;
    padding: 24px 0 20px 0;
}

body.unidet-payer-body .unidet-reg-quote p {
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: 15px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.88);
    margin: 0 0 12px;
}

body.unidet-payer-body .unidet-reg-quote::after {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    background: linear-gradient(90deg, #d4a373, #b8895c);
    border-radius: 2px;
}

/* Footer 3 mots */
body.unidet-payer-body .unidet-reg-left-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    width: 100%;
}

body.unidet-payer-body .unidet-reg-left-footer span {
    padding: 0 18px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 2.5px;
    text-transform: uppercase;
    font-weight: 600;
    position: relative;
}

body.unidet-payer-body .unidet-reg-left-footer span:first-child { padding-left: 0; }
body.unidet-payer-body .unidet-reg-left-footer span:last-child  { padding-right: 0; }

body.unidet-payer-body .unidet-reg-left-footer span:not(:last-child)::after {
    content: '|';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.25);
    font-weight: 300;
    font-size: 12px;
    line-height: 1;
}

/* ═══════════════════════════════════════════════
   04. PANNEAU DROIT — Contenu
   ═══════════════════════════════════════════════ */
body.unidet-payer-body .unidet-reg-right {
    padding: 32px 48px;
    display: flex;
    /* ⭐ ANCRAGE HAUT (décision client) : plus de centrage vertical. Le contenu
       ne « saute » plus d'une étape à l'autre quand sa hauteur change, et le
       premier bloc lisible est toujours au même endroit. */
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    background: #fafaf7;
    box-sizing: border-box;
}

body.unidet-payer-body .unidet-reg-right-inner {
    width: 100%;
    max-width: 560px;
    /* ⭐ `margin:auto` centrait le bloc verticalement dans la colonne : c'est
       exactement ce qui le faisait « sauter » entre les étapes. Ancrée en haut. */
    margin: 0 auto;
    /* ⚠️ Le panneau droit était jugé trop grand : on réduit légèrement
       l'échelle de son contenu (titre, champ, bouton) sans toucher aux
       largeurs ni aux paliers responsives ci-dessous.
       `zoom` est appliqué au conteneur INTERNE, pas à `.unidet-reg-right` :
       zoomer le panneau lui-même réduirait aussi son fond, ce qui laisserait
       apparaître des bandes non couvertes sur les côtés. */
    zoom: 0.95;
}

@media (min-width: 901px) {
    body.unidet-payer-body .unidet-reg-right {
        padding: 40px 56px;
        height: 100dvh;
        max-height: 100dvh;
        overflow-y: auto;
    }
    body.unidet-payer-body .unidet-reg-right-inner {
        max-width: 620px;
    }
}

/* Topbar */
body.unidet-payer-body .unidet-reg-topbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    margin-bottom: 22px;
    font-size: 13px;
    color: #64748b;
}

body.unidet-payer-body .unidet-reg-topbar-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #a0824d;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px dotted #a0824d;
    padding-bottom: 1px;
    transition: all 0.2s;
}

body.unidet-payer-body .unidet-reg-topbar-link:hover {
    color: #d4a373;
    border-bottom-color: #d4a373;
}

body.unidet-payer-body .unidet-arrow {
    display: inline-block;
    transition: transform 0.2s;
}

body.unidet-payer-body .unidet-reg-topbar-link:hover .unidet-arrow {
    transform: translateX(3px);
}

/* Headings */
body.unidet-payer-body .unidet-reg-heading {
    text-align: center;
    margin-bottom: 24px;
}

body.unidet-payer-body .unidet-reg-h2 {
    font-size: 24px;
    font-weight: 800;
    color: #0a0e17;
    margin: 0 0 8px;
    letter-spacing: -0.6px;
    line-height: 1.25;
}

body.unidet-payer-body .unidet-reg-h2-sub {
    font-size: 13.5px;
    /* 5,6:1 sur le fond crème : les sous-titres de 13,5 px restent lisibles. */
    color: #55606f;
    margin: 0;
    line-height: 1.5;
}

/* Submit */
body.unidet-payer-body .unidet-reg-submit,
body.unidet-payer-body .unidet-reg-submit.active {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 14px 24px !important;
    height: 52px !important;
    min-height: 52px !important;
    background: #0a0e17 !important;
    background-image: none !important;
    color: #fff !important;
    border: none !important;
    border-radius: 11px !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
    text-align: center !important;
    text-decoration: none !important;
}

body.unidet-payer-body .unidet-reg-submit.active:hover,
body.unidet-payer-body .unidet-reg-submit:hover:not(:disabled) {
    background: #1a1f2e !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 22px rgba(10, 14, 23, 0.22) !important;
}

body.unidet-payer-body .unidet-reg-submit:disabled {
    opacity: 0.65 !important;
    cursor: wait !important;
}

body.unidet-payer-body .unidet-reg-submit .unidet-arrow { font-size: 16px; }
body.unidet-payer-body .unidet-reg-submit.active:hover .unidet-arrow { transform: translateX(3px); }

body.unidet-payer-body .unidet-reg-secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 14px 0 0;
    font-size: 12px;
    color: #94a3b8;
    font-weight: 500;
}

/* ═══════════════════════════════════════════════
   05. STEPPER
   ═══════════════════════════════════════════════ */
body.unidet-payer-body .upayer-stepper-compact {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0 0 12px;
    padding: 0 0 9px;
    border-bottom: 1px solid #eef2f6;
}

/* ⭐ STEPPER COMPACT (décision client) : une ligne de ~17 px aux étapes 2 et 3,
   sans rien supprimer. Les trois étapes restent nommées, numérotées, et
   conservent leurs états `is-active` / `is-done` posés par payer.js. */
body.unidet-payer-body .upayer-sc-step {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    opacity: 0.55;
    transition: opacity 0.25s;
    white-space: nowrap;
}

body.unidet-payer-body .upayer-sc-step.is-active { opacity: 1; }
body.unidet-payer-body .upayer-sc-step.is-done   { opacity: 0.85; }

body.unidet-payer-body .upayer-sc-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #64748b;
    font-size: 9px;
    font-weight: 900;
    line-height: 1;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
}

body.unidet-payer-body .upayer-sc-step.is-active .upayer-sc-num {
    background: #0a0e17;
    color: #c9a227;
}

body.unidet-payer-body .upayer-sc-step.is-done .upayer-sc-num {
    background: #0a0e17;
    color: #c9a227;
    font-size: 0;
}

body.unidet-payer-body .upayer-sc-step.is-done .upayer-sc-num::before {
    content: '✓';
    font-size: 9px;
    font-weight: 900;
}

body.unidet-payer-body .upayer-sc-label {
    display: inline-block;
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #64748b;
}

body.unidet-payer-body .upayer-sc-step.is-active .upayer-sc-label { color: #0a0e17; }
body.unidet-payer-body .upayer-sc-step.is-done .upayer-sc-label   { color: #64748b; }

body.unidet-payer-body .upayer-sc-line {
    display: block;
    width: 14px;
    height: 1px;
    background: #cbd5e1;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════
   06. FORMULAIRE — champ code d'accès
   ═══════════════════════════════════════════════ */
body.unidet-payer-body .unidet-reg-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

body.unidet-payer-body .unidet-reg-field label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #0a0e17;
}

body.unidet-payer-body .unidet-reg-field .req { color: #e74c3c; }

body.unidet-payer-body #upayer-code {
    width: 100%;
    font-family: 'Courier New', 'SF Mono', Consolas, monospace;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 800;
    font-size: 17px;
    text-align: center;
    background: #f8fafc;
    border: 2px dashed #e5e9f0;
    /* ⚠️ Hauteur : était `16px 18px` → champ de 60 px, jugé trop haut.
       `12px 18px` donne ~52 px (le contenu fait 24 px : 52 = 24 + 12×2 + 2×2).
       À ajuster ici si besoin, la valeur est la SEULE source de la hauteur. */
    padding: 12px 18px;
    box-sizing: border-box;
    color: #0a0e17;
    border-radius: 12px;
    transition: all 0.2s;
    outline: none;
}

body.unidet-payer-body #upayer-code::placeholder {
    color: #cbd5e1;
    letter-spacing: 3px;
    font-weight: 700;
}

body.unidet-payer-body #upayer-code:focus {
    background: #fff;
    border: 2px solid #0a0e17;
    border-style: solid;
    box-shadow: 0 0 0 4px rgba(10,14,23,0.06);
}

body.unidet-payer-body #upayer-code.is-valid {
    border-color: #10b981;
    border-style: solid;
    background: #ecfdf5;
}

body.unidet-payer-body #upayer-code.is-invalid {
    border-color: #ef4444;
    border-style: solid;
    background: #fef2f2;
}

body.unidet-payer-body .upayer-format-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 11.5px;
    color: #94a3b8;
    font-weight: 600;
}

body.unidet-payer-body .upayer-format-hint code {
    background: #f1f5f9;
    padding: 3px 10px;
    border-radius: 5px;
    color: #475569;
    font-weight: 800;
    letter-spacing: 1.5px;
    font-family: 'Courier New', monospace;
    transition: all 0.2s;
}

body.unidet-payer-body .unidet-error-msg {
    display: none;
    margin-top: 4px;
    font-size: 11.5px;
    font-weight: 600;
    color: #e74c3c;
    line-height: 1.4;
}

/* ═══════════════════════════════════════════════
   07. PANEL 2 — Détails du dossier (vue compacte)
   ───────────────────────────────────────────────
   Objectif client : moins de blocs empilés, aucun défilement de la
   colonne de droite sur desktop. Un seul élément dominant (le reste
   à payer), une ligne d'identité, puis une liste « libellé / valeur »
   sans cadre individuel. Les anciennes cartes (référence sombre,
   montant initial, échéance/échéancier/remise) sont fusionnées ici.
   Contraste : encre sombre sur l'or (≥ 4,5:1), plus de blanc sur or.
   ═══════════════════════════════════════════════ */

/* En-tête de dossier : titre + référence sur UNE ligne (décision client) */
body.unidet-payer-body .upayer-dossier-head {
    text-align: center;
    margin-bottom: 11px;
}

body.unidet-payer-body .upayer-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 3px;
    font-size: 19px;
    font-weight: 900;
    letter-spacing: -0.3px;
    color: #0a0e17;
    line-height: 1.2;
}

body.unidet-payer-body .upayer-ref {
    font-family: 'Courier New', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    background: #f1f5f9;
    color: #475569;
    border-radius: 6px;
    padding: 3px 8px;
}

body.unidet-payer-body .upayer-help {
    margin: 0;
    font-size: 10.5px;
    color: #64748b;
    line-height: 1.45;
    font-weight: 600;
}

body.unidet-payer-body .upayer-help a {
    color: #85652f;
    font-weight: 800;
    text-decoration: none;
    border-bottom: 1px dotted #a0824d;
}

/* ═══════════════════════════════════════════════
   B48 — CODE D'ACCÈS (information PRINCIPALE de la vue débiteur)
   ───────────────────────────────────────────────
   Hiérarchie demandée par le client : le code domine, la référence
   reste lisible mais discrète (correspondance de virement / téléphone).
   Bordure COMPLÈTE uniquement — aucune bordure latérale colorée.
   ═══════════════════════════════════════════════ */
body.unidet-payer-body .upayer-code-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    margin: 0 0 14px;
    padding: 14px 18px 13px;
    text-align: center;
    background: linear-gradient(135deg, #fffdf5 0%, #fdf6e3 100%);
    border: 1px solid #f0e2b6;
    border-radius: 14px;
}

body.unidet-payer-body .upayer-code-card-label {
    font-size: 9.5px;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #85652f;
}

body.unidet-payer-body .upayer-code-card-value {
    font-family: 'Courier New', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 26px;
    font-weight: 900;
    letter-spacing: 0.12em;
    line-height: 1.15;
    color: #0a0e17;
}

/* ─── B48 — « Copier » le code d'accès ───
   Collé à la valeur, discret (pilule dorée, aucun aplat plein), et sans
   bordure latérale colorée : la règle permanente du client vaut ici aussi.
   L'état « Copié ✓ » dure 2 s et reste annoncé par la zone aria-live
   voisine (#upayer-copy-live-*), qui est vide par défaut. */
body.unidet-payer-body .upayer-code-card-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

body.unidet-payer-body .upayer-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px 13px;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #85652f;
    background: #ffffff;
    border: 1px solid #e3cf92;
    border-radius: 999px;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}

body.unidet-payer-body .upayer-copy-btn:hover {
    color: #6d5222;
    background: #fffaf0;
    border-color: #C9A227;
}

body.unidet-payer-body .upayer-copy-btn:focus-visible {
    outline: 2px solid #C9A227;
    outline-offset: 2px;
}

body.unidet-payer-body .upayer-copy-btn.is-copied {
    /* État « Copié ✓ » dans la charte (or + bleu nuit), pas de vert hors palette. */
    color: #6d5222;
    background: #FEFCF7;
    border-color: #C9A227;
}

body.unidet-payer-body .upayer-copy-btn[disabled] {
    opacity: .45;
    cursor: not-allowed;
}

body.unidet-payer-body .upayer-copy-live {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    color: #64748B;
}

body.unidet-payer-body .upayer-copy-live:empty { display: none; }

/* Même bouton dans le récapitulatif de paiement : la valeur et le bouton
   restent sur une seule ligne, le libellé passe au-dessus. */
body.unidet-payer-body .upayer-success-code-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* ⭐ LE BLOC DÉCISION — deux nombres, une action, une équation.
   C'est le seul bloc que le débiteur doit lire pour agir : il tient au-dessus
   de la ligne de flottaison à 900 px comme à 768 px (mesuré, voir le harnais). */
body.unidet-payer-body .upayer-hero {
    background: #fff;
    border: 1px solid #e6e9ef;
    border-radius: 14px;
    padding: 11px 13px 10px;
    box-shadow: 0 2px 10px rgba(10, 14, 23, 0.05);
}

body.unidet-payer-body .upayer-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: stretch;
}

body.unidet-payer-body .upayer-hero.is-no-cta .upayer-hero-grid { grid-template-columns: 1fr; }
body.unidet-payer-body .upayer-hero.is-no-cta .upayer-pay       { display: none; }

body.unidet-payer-body .upayer-kpi {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2px 3px;
    min-width: 0;
}

body.unidet-payer-body .upayer-kpi-label {
    font-size: 9.5px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
    line-height: 1.3;
}

body.unidet-payer-body .upayer-kpi-value {
    font-size: clamp(23px, 3.3vh, 30px);
    font-weight: 900;
    color: #0a0e17;
    line-height: 1.05;
    margin: 4px 0 5px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.8px;
}

body.unidet-payer-body .upayer-kpi-sub {
    font-size: 10.5px;
    color: #64748b;
    line-height: 1.4;
    font-weight: 600;
}

body.unidet-payer-body .upayer-kpi-sub .upayer-amount-note-sub {
    display: block;
    margin-top: 1px;
    font-size: 9.5px;
    color: #64748b;
    font-weight: 600;
}

/* Bloc bleu nuit : le montant payable et SON action (CTA or), décision client. */
body.unidet-payer-body .upayer-pay {
    background: #0a0e17;
    border-radius: 11px;
    padding: 10px 11px 11px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

body.unidet-payer-body .upayer-pay .upayer-kpi-label { color: rgba(255, 255, 255, 0.72); }

body.unidet-payer-body .upayer-pay-value {
    font-size: clamp(23px, 3.3vh, 30px);
    font-weight: 900;
    color: #c9a227;
    line-height: 1.05;
    margin: 4px 0 8px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.8px;
}

/* CTA OR — un seul style de bouton d'action, sur fond bleu nuit. */
body.unidet-payer-body .unidet-reg-submit.upayer-cta-gold {
    background: #c9a227 !important;
    background-image: none !important;
    color: #0a0e17 !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
    font-size: 12.5px !important;
    font-weight: 900 !important;
    letter-spacing: 0.2px !important;
    margin-top: auto !important;
}

body.unidet-payer-body .unidet-reg-submit.upayer-cta-gold:hover,
body.unidet-payer-body .unidet-reg-submit.upayer-cta-gold.active:hover {
    background: #d4a373 !important;
    transform: none !important;
    box-shadow: none !important;
}

body.unidet-payer-body .unidet-reg-submit.upayer-cta-gold .unidet-arrow { font-size: 13px; }

/* ⭐ L'ÉQUATION, EN CLAIR : elle relie les montants au lieu de les empiler.
   Chaque terme masqué disparaît avec son opérateur (le « − » est DANS le terme). */
body.unidet-payer-body .upayer-eq {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #eef2f6;
    font-size: 10.5px;
    color: #64748b;
    text-align: center;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.5;
}

body.unidet-payer-body .upayer-eq-term { display: inline; }
body.unidet-payer-body .upayer-eq-term.is-hidden { display: none; }
body.unidet-payer-body .upayer-eq i {
    font-style: normal;
    color: #94a3b8;
    margin: 0 4px;
    font-weight: 800;
}
body.unidet-payer-body .upayer-eq-op {
    color: #94a3b8;
    margin: 0 5px;
    font-weight: 800;
}
body.unidet-payer-body .upayer-eq-result,
body.unidet-payer-body .upayer-eq-result b {
    color: #0a0e17;
    font-weight: 900;
}

/* ⭐ MÉTA-LIGNE : échéance · échéancier · remise (les cinq lignes de détail
   sont remplacées par cette seule ligne + l'équation). */
body.unidet-payer-body .upayer-meta {
    margin-top: 7px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    font-size: 10px;
    color: #64748b;
    font-weight: 600;
    line-height: 1.5;
}

body.unidet-payer-body .upayer-meta-item {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    white-space: nowrap;
}

body.unidet-payer-body .upayer-meta-item.is-hidden { display: none; }

body.unidet-payer-body .upayer-meta-item::after {
    content: '·';
    color: #cbd5e1;
    margin: 0 7px;
    font-weight: 800;
}

body.unidet-payer-body .upayer-meta-item.is-last::after { content: none; }

body.unidet-payer-body .upayer-meta-label { color: #64748b; }
body.unidet-payer-body .upayer-meta-value { color: #0a0e17; font-weight: 800; }
body.unidet-payer-body .upayer-meta-value.is-gold  { color: #85652f; }
body.unidet-payer-body .upayer-meta-value.is-muted { color: #64748b; font-weight: 700; font-style: italic; }

/* ═══════════════════════════════════════════════
   08. PANEL 3 — Choix du montant
   ═══════════════════════════════════════════════ */
/* ⭐ BANDEAU DE CONTEXTE — les trois montants sur UNE ligne.
   Remplace le bloc bleu nuit de 3 lignes (« reste à payer » + « dont » +
   « montant que vous pouvez régler ») par un contexte compact et lisible. */
body.unidet-payer-body .upayer-context {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    padding: 8px 11px;
    background: #f8fafc;
    border: 1px solid #eef2f6;
    border-radius: 10px;
    font-size: 10.5px;
    font-weight: 700;
    color: #334155;
    font-variant-numeric: tabular-nums;
    margin-bottom: 12px;
}

body.unidet-payer-body .upayer-ctx-item {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    white-space: nowrap;
}

body.unidet-payer-body .upayer-ctx-item b {
    font-size: 8.5px;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #64748b;
}

body.unidet-payer-body .upayer-ctx-item.is-pending {
    color: #b45309;
    font-weight: 800;
    font-size: 10px;
}

body.unidet-payer-body .upayer-ctx-item.is-key {
    background: #0a0e17;
    color: #fff;
    border-radius: 6px;
    padding: 3px 8px;
    margin-left: auto;
    font-weight: 800;
}

body.unidet-payer-body .upayer-ctx-item.is-key b { color: #c9a227; }

body.unidet-payer-body .upayer-choice-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

body.unidet-payer-body .upayer-choice-title {
    display: block;
    font-size: 9.5px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #0a0e17;
    line-height: 1.3;
}

body.unidet-payer-body .upayer-choice-hint {
    font-size: 9.5px;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
}

/* Options rapides : 4 tuiles compactes sur UNE ligne (25 / 50 / 75 / 100 %). */
body.unidet-payer-body .upayer-preset-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
}

body.unidet-payer-body .upayer-preset {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 4px;
    min-height: 44px;
    background: #fff;
    border: 1.5px solid #e5e9f0;
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    text-align: center;
    color: #0a0e17;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
}

body.unidet-payer-body .upayer-preset:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
}

body.unidet-payer-body .upayer-preset.is-selected {
    border-color: #0a0e17;
    background: #0a0e17;
    color: #fff;
}

/* L'option « tout » ne prend plus toute la largeur : elle est la 4e tuile.
   Le cas « un seul bouton » (paiement partiel désactivé) reste pleine largeur. */
body.unidet-payer-body .upayer-preset.is-full {
    grid-column: auto;
    min-height: 44px;
}

body.unidet-payer-body .upayer-preset.is-full:only-child {
    grid-column: 1 / -1;
}

body.unidet-payer-body .upayer-preset-pct {
    display: block;
    font-size: 8.5px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    margin: 0;
    line-height: 1.2;
}

body.unidet-payer-body .upayer-preset.is-selected .upayer-preset-pct {
    color: rgba(255, 255, 255, 0.6);
}

body.unidet-payer-body .upayer-preset-amount {
    display: block;
    font-size: 12px;
    font-weight: 800;
    color: inherit;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
}

body.unidet-payer-body .upayer-preset.is-selected .upayer-preset-amount {
    color: #c9a227;
}

/* Montant libre : toujours visible, une seule ligne de 44 px. */
body.unidet-payer-body .upayer-amount-input {
    display: flex;
    align-items: stretch;
    border: 1.5px solid #e5e9f0;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    height: 44px;
}

body.unidet-payer-body .upayer-amount-prefix {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    background: #f8fafc;
    color: #64748b;
    font-weight: 800;
    font-size: 12.5px;
    /* Séparateur INTERNE neutre dans un conteneur déjà bordé : ce n'est pas une
       barre latérale colorée. Même valeur que la bordure du conteneur. */
    border-right: 1.5px solid #e5e9f0;
    min-width: 44px;
}

body.unidet-payer-body .upayer-amount-input input {
    flex: 1;
    min-width: 0;
    border: none;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 800;
    font-family: 'Courier New', ui-monospace, monospace;
    letter-spacing: 0.04em;
    background: transparent;
    color: #0a0e17;
    outline: none;
    margin: 0;
    height: 100%;
}

/* ═══════════════════════════════════════════════
   09. ERREURS INLINE + RETOUR
   ═══════════════════════════════════════════════ */
/* ⭐ Règle client permanente : AUCUNE barre latérale colorée. L'erreur est
   signalée par une bordure COMPLÈTE, un fond teinté et une icône. */
body.unidet-payer-body .upayer-inline-error {
    display: none;
    align-items: flex-start;
    gap: 8px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    padding: 10px 13px;
    border-radius: 10px;
    color: #7f1d1d;
    font-size: 12.5px;
    line-height: 1.5;
    margin: 12px 0;
}

body.unidet-payer-body .upayer-inline-error-icon {
    font-size: 15px;
    flex-shrink: 0;
}

/* Note AVANT redirection vers GoCardless : dire au débiteur que la page
   hébergée pré-remplit devise et pays depuis son dossier (et qu'il doit les
   vérifier). Texte discret, jamais un avertissement anxiogène. */
body.unidet-payer-body .upayer-redirect-note {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.55;
    color: #64748b;
    text-align: left;
}

body.unidet-payer-body .upayer-back-link {
    display: block;
    width: 100%;
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    padding: 14px 0 6px;
    margin: 0 auto;
    transition: color 0.15s;
    font-family: inherit;
    text-align: center;
    box-shadow: none;
    outline: none;
}

body.unidet-payer-body .upayer-back-link:hover,
body.unidet-payer-body .upayer-back-link:focus,
body.unidet-payer-body .upayer-back-link:active {
    color: #0a0e17;
    background: transparent;
    text-decoration: none;
    transform: none;
}

/* ═══════════════════════════════════════════════
   10. SUCCÈS (PANEL 4)
   ═══════════════════════════════════════════════ */
body.unidet-payer-body .upayer-success-wrap {
    text-align: center;
    padding: 0;
}

body.unidet-payer-body .upayer-success-hero { margin-bottom: 12px; text-align: center; }

body.unidet-payer-body .upayer-success-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 9px;
    background: #ecfdf5;
    color: #059669;
}

body.unidet-payer-body .upayer-success-title {
    font-size: 20px;
    font-weight: 900;
    color: #0a0e17;
    letter-spacing: -0.3px;
    margin: 0 0 5px;
    line-height: 1.25;
}

body.unidet-payer-body .upayer-success-sub {
    margin: 0 auto;
    max-width: 46ch;
    font-size: 12px;
    line-height: 1.5;
    color: #64748b;
    font-weight: 600;
}

/* ⭐ Récapitulatif : UN montant payé dominant, puis la situation, puis la
   référence. Aucune action nouvelle n'est ajoutée : les seules actions de cet
   écran restent le reçu et le retour (décision client). */
body.unidet-payer-body .upayer-success-block {
    background: #fff;
    border: 1px solid #e6e9ef;
    border-radius: 14px;
    padding: 11px 13px 12px;
    box-shadow: 0 2px 10px rgba(10, 14, 23, 0.05);
    text-align: left;
}

body.unidet-payer-body .upayer-success-main {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 8px;
    border-bottom: 1px dashed #e6e9ef;
}

body.unidet-payer-body .upayer-success-main-label {
    font-size: 9.5px;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #64748b;
}

body.unidet-payer-body .upayer-success-main-value {
    font-size: 25px;
    font-weight: 900;
    color: #0a0e17;
    letter-spacing: -0.6px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

body.unidet-payer-body .upayer-success-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding-top: 8px;
}

body.unidet-payer-body .upayer-success-row {
    display: block;
    padding: 0;
    border: none;
}

body.unidet-payer-body .upayer-success-row-label {
    display: block;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
    line-height: 1.35;
}

body.unidet-payer-body .upayer-success-row-value {
    display: block;
    margin-top: 2px;
    font-size: 15px;
    font-weight: 900;
    color: #0a0e17;
    font-variant-numeric: tabular-nums;
}

body.unidet-payer-body .upayer-success-row.is-pending .upayer-success-row-value { color: #b45309; }

/* B49 — écran de succès : le code d'accès est le SEUL identifiant affiché.
   (Le conteneur portait aussi la mise en page de l'ancienne ligne « référence ».) */
body.unidet-payer-body .upayer-success-code {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin-top: 9px;
    padding-top: 8px;
    border-top: 1px solid #f1f5f9;
}

body.unidet-payer-body .upayer-success-code-value {
    font-family: 'Courier New', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 19px;
    font-weight: 900;
    color: #0a0e17;
    letter-spacing: 0.12em;
    line-height: 1.2;
}

body.unidet-payer-body .upayer-success-note {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f0f8ff;
    border-radius: 10px;
    padding: 14px 16px;
    text-align: left;
    font-size: 12px;
    color: #1a5276;
    line-height: 1.5;
    margin-bottom: 4px;
}

body.unidet-payer-body .upayer-success-note-icon {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 8px;
    background: #fff;
    color: #0073aa;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 15px;
}

body.unidet-payer-body .upayer-receipt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 24px;
    margin-top: 12px;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    color: #0a0e17;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.18s ease;
    font-family: inherit;
}

body.unidet-payer-body .upayer-receipt-btn:hover {
    background: #0a0e17;
    border-color: #0a0e17;
    color: #d4a373;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(10,14,23,0.15);
}

/* Reçu — deux actions : télécharger le PDF (principale) et imprimer la MÊME
   page en HTML (secondaire). Aucun gabarit JS : les deux URLs pointent vers
   receipt-pdf.php, qui rend un seul et même document. */
body.unidet-payer-body .upayer-receipt-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

body.unidet-payer-body .upayer-receipt-actions .upayer-receipt-btn {
    margin-top: 0;
}

body.unidet-payer-body .upayer-receipt-print {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 12px;
    color: #64748b;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    border-radius: 10px;
}

body.unidet-payer-body .upayer-receipt-print:hover {
    color: #0a0e17;
}

body.unidet-payer-body .upayer-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: upayerSpin 0.7s linear infinite;
    margin-right: 6px;
    vertical-align: middle;
}

@keyframes upayerSpin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════
   11. RESPONSIVE
   ═══════════════════════════════════════════════ */
@media (max-width: 900px) {
    body.unidet-payer-body .unidet-reg-page {
        display: block;
        height: auto;
        max-height: none;
        min-height: 100vh;
        overflow: visible;
    }
    body.unidet-payer-body .unidet-reg-left {
        border-radius: 0 0 24px 24px;
        min-height: auto;
    }
    body.unidet-payer-body .unidet-reg-left-inner {
        padding: 32px 28px 30px !important;
        height: auto;
        gap: 20px;
        justify-content: flex-start;
    }
    body.unidet-payer-body .unidet-reg-brand {
        margin: 0 0 8px 0;
        justify-content: flex-start;
    }
    body.unidet-payer-body .unidet-reg-logo {
        width: 68px; height: 68px;
        min-width: 68px; max-width: 68px;
    }
    body.unidet-payer-body .unidet-reg-h1 { font-size: 26px; line-height: 1.2; }
    body.unidet-payer-body .unidet-reg-lead { font-size: 13.5px; margin-bottom: 18px; max-width: 100%; }
    body.unidet-payer-body .unidet-reg-features {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px 16px;
    }
    body.unidet-payer-body .unidet-reg-feat { font-size: 12.5px; gap: 10px; }
    body.unidet-payer-body .unidet-reg-check { width: 24px; height: 24px; min-width: 24px; font-size: 11px; }
    body.unidet-payer-body .unidet-reg-quote {
        margin: 12px 0 0 0;
        padding: 18px 0 0 0;
        border-top: 1px solid rgba(212, 163, 115, 0.18);
    }
    body.unidet-payer-body .unidet-reg-quote p { font-size: 13.5px; margin: 0 0 10px; }
    body.unidet-payer-body .unidet-reg-left-footer {
        justify-content: flex-start;
        margin: 4px 0 0 0;
    }
    body.unidet-payer-body .unidet-reg-left-footer span {
        padding: 0 14px;
        font-size: 9.5px;
        letter-spacing: 2px;
    }
    body.unidet-payer-body .unidet-reg-left-footer span:first-child { padding-left: 0; }

    body.unidet-payer-body .unidet-reg-right {
        padding: 32px 28px 48px;
        height: auto;
        max-height: none;
        display: block;
        overflow: visible;
    }
    body.unidet-payer-body .unidet-reg-right-inner {
        max-width: 560px;
        margin: 0 auto;
        padding-left: 0;
        padding-right: 0;
    }
    body.unidet-payer-body .unidet-reg-topbar { margin-bottom: 22px; justify-content: center; }
    body.unidet-payer-body .unidet-reg-heading { margin-bottom: 24px; }
    body.unidet-payer-body .unidet-reg-h2 { font-size: 22px; }
    body.unidet-payer-body .unidet-reg-h2-sub { font-size: 13px; }
    body.unidet-payer-body .upayer-sc-label { display: none; }
    body.unidet-payer-body .upayer-sc-line  { width: 24px; }
}

@media (max-width: 560px) {
    body.unidet-payer-body .unidet-reg-left { border-radius: 0 0 20px 20px; }
    body.unidet-payer-body .unidet-reg-left-inner { padding: 22px 20px 24px !important; gap: 14px; }
    body.unidet-payer-body .unidet-reg-logo { width: 56px; height: 56px; min-width: 56px; max-width: 56px; }
    body.unidet-payer-body .unidet-reg-tag {
        font-size: 9.5px;
        letter-spacing: 1.8px;
        margin-bottom: 10px;
        padding-bottom: 8px;
    }
    body.unidet-payer-body .unidet-reg-h1 { font-size: 22px; margin-bottom: 8px; }
    body.unidet-payer-body .unidet-reg-lead { font-size: 12.5px; margin-bottom: 14px; }
    body.unidet-payer-body .unidet-reg-features { grid-template-columns: 1fr 1fr; gap: 8px 10px; }
    body.unidet-payer-body .unidet-reg-feat { font-size: 11.5px; gap: 8px; }
    body.unidet-payer-body .unidet-reg-check { width: 20px; height: 20px; min-width: 20px; font-size: 10px; }
    body.unidet-payer-body .unidet-reg-quote { display: none; }
    body.unidet-payer-body .unidet-reg-left-footer { justify-content: flex-start; margin-top: 2px; }
    body.unidet-payer-body .unidet-reg-left-footer span {
        padding: 0 10px;
        font-size: 9px;
        letter-spacing: 1.5px;
    }

    body.unidet-payer-body .unidet-reg-right { padding: 28px 18px 40px; }
    body.unidet-payer-body .unidet-reg-right-inner { max-width: 100%; }

    body.unidet-payer-body .unidet-reg-topbar { margin-bottom: 18px; font-size: 12.5px; }
    body.unidet-payer-body .unidet-reg-heading { margin-bottom: 20px; }
    body.unidet-payer-body .unidet-reg-h2 { font-size: 20px; }
    body.unidet-payer-body .unidet-reg-h2-sub { font-size: 12.5px; }
    body.unidet-payer-body #upayer-code {
        font-size: 15px;
        letter-spacing: 2px;
        padding: 14px;
    }
    body.unidet-payer-body .upayer-code-card-value { font-size: 22px; }
    body.unidet-payer-body .upayer-success-code-value { font-size: 17px; }
    body.unidet-payer-body .upayer-success-title { font-size: 20px; }
    body.unidet-payer-body .upayer-success-icon { width: 68px; height: 68px; }
}

@media (min-width: 901px) and (max-height: 800px) {
    body.unidet-payer-body .unidet-reg-left-inner { padding: 32px 44px 24px !important; }
    body.unidet-payer-body .unidet-reg-brand { margin-bottom: 40px; }
    body.unidet-payer-body .unidet-reg-h1 { font-size: 30px; }
    body.unidet-payer-body .unidet-reg-right { padding: 24px 48px; }
    body.unidet-payer-body .unidet-reg-topbar { margin-bottom: 14px; }
    body.unidet-payer-body .unidet-reg-heading { margin-bottom: 14px; }
}

@media (min-width: 901px) and (max-height: 700px) {
    body.unidet-payer-body .unidet-reg-brand { margin-bottom: 28px; }
    body.unidet-payer-body .unidet-reg-h1 { font-size: 26px; }
    body.unidet-payer-body .unidet-reg-lead { margin-bottom: 20px; font-size: 13.5px; }
    body.unidet-payer-body .unidet-reg-features { gap: 10px; }
    body.unidet-payer-body .unidet-reg-quote p { font-size: 14px; }
}

/* ═══════════════════════════════════════════════
   12. ONGLETS PAIEMENT (bloc / échéance)
   ═══════════════════════════════════════════════ */
body.unidet-payer-body .upayer-payment-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: #f1f5f9;
    border-radius: 10px;
    margin-bottom: 12px;
}

body.unidet-payer-body .upayer-ptab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    background: transparent;
    border: none;
    border-radius: 7px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
}

body.unidet-payer-body .upayer-ptab:hover {
    color: #0a0e17;
}

body.unidet-payer-body .upayer-ptab.active {
    background: #fff;
    color: #0a0e17;
    font-weight: 900;
    box-shadow: 0 1px 4px rgba(10,14,23,.16), 0 0 0 1px rgba(10,14,23,.04);
}

body.unidet-payer-body .upayer-ptab-icon {
    font-size: 13px;
    line-height: 1;
}

body.unidet-payer-body .upayer-ptab-label {
    letter-spacing: 0.1px;
}

/* ═══════════════════════════════════════════════
   13. CARTES ÉCHÉANCIER
   ═══════════════════════════════════════════════ */
/* Trois cartes sur UNE ligne : le nombre de mois reste le chiffre dominant,
   la mensualité est écrite en clair dessous (« 2 × 937,50 € »). */
body.unidet-payer-body .upayer-installment-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

body.unidet-payer-body .upayer-installment-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 7px 5px;
    min-height: 76px;
    background: #fff;
    border: 1.5px solid #e5e9f0;
    border-radius: 12px;
    cursor: pointer;
    font-family: inherit;
    text-align: center;
    transition: border-color 0.15s, background 0.15s;
    position: relative;
    overflow: hidden;
    outline: none;
}

body.unidet-payer-body .upayer-installment-card:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
}

body.unidet-payer-body .upayer-installment-card.is-selected {
    border-color: #0a0e17;
    background: #0a0e17;
}

body.unidet-payer-body .upayer-installment-months {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    margin-bottom: 5px;
}

body.unidet-payer-body .upayer-installment-num {
    font-size: 22px;
    font-weight: 900;
    color: #0a0e17;
    line-height: 1;
    letter-spacing: -0.5px;
}

body.unidet-payer-body .upayer-installment-unit {
    font-size: 8.5px;
    font-weight: 900;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

body.unidet-payer-body .upayer-installment-detail {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

body.unidet-payer-body .upayer-installment-monthly {
    font-size: 10.5px;
    font-weight: 800;
    color: #64748b;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

body.unidet-payer-body .upayer-installment-card.is-selected .upayer-installment-num { color: #c9a227; }
body.unidet-payer-body .upayer-installment-card.is-selected .upayer-installment-unit { color: rgba(255, 255, 255, 0.55); }
body.unidet-payer-body .upayer-installment-card.is-selected .upayer-installment-monthly { color: #fff; }

body.unidet-payer-body .upayer-installment-empty {
    grid-column: 1 / -1;
    padding: 24px;
    text-align: center;
    color: #94a3b8;
    font-style: italic;
    background: #f8fafc;
    border-radius: 12px;
    font-size: 13px;
}

/* Responsive */
@media (max-width: 560px) {
    body.unidet-payer-body .upayer-installment-grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════
   14. TRANSITIONS PANELS
   ═══════════════════════════════════════════════ */
body.unidet-payer-body .upayer-panel:not([style*="display:none"]) {
    animation: upayerPanelIn 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes upayerPanelIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Montants qui s'animent au chargement */
body.unidet-payer-body .upayer-kpi-value,
body.unidet-payer-body .upayer-pay-value,
body.unidet-payer-body .upayer-success-main-value {
    animation: upayerAmountIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes upayerAmountIn {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1); }
}

/* Hover subtil sur les badges de statut */
body.unidet-payer-body .upayer-sc-step.is-done .upayer-sc-num {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
body.unidet-payer-body .upayer-sc-step.is-done:hover .upayer-sc-num {
    transform: scale(1.12);
}


/* ═══════════════════════════════════════════════
   15. PLAN D'ÉCHÉANCE (panel 4)
   ═══════════════════════════════════════════════ */
body.unidet-payer-body .upayer-success-plan {
    background: #fff;
    border: 1px solid #eef2f6;
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 16px;
    text-align: left;
    box-shadow: 0 1px 3px rgba(15,23,42,.03);
}

body.unidet-payer-body .upayer-plan-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #f0f4f8;
    flex-wrap: wrap;
}

body.unidet-payer-body .upayer-plan-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 800;
    color: #0a0e17;
    letter-spacing: -0.1px;
}
body.unidet-payer-body .upayer-plan-title svg {
    color: #C9A227;
    flex-shrink: 0;
}

body.unidet-payer-body .upayer-plan-summary {
    font-size: 11.5px;
    font-weight: 700;
    color: #64748b;
    background: #f1f5f9;
    padding: 4px 10px;
    border-radius: 100px;
    white-space: nowrap;
}

body.unidet-payer-body .upayer-plan-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 320px;
    overflow-y: auto;
    padding-right: 4px;
}
body.unidet-payer-body .upayer-plan-list::-webkit-scrollbar { width: 5px; }
body.unidet-payer-body .upayer-plan-list::-webkit-scrollbar-thumb {
    background: #cbd5e1; border-radius: 3px;
}

body.unidet-payer-body .upayer-plan-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #eef2f6;
    background: #fafbfc;
    transition: all 0.15s;
}
body.unidet-payer-body .upayer-plan-item.is-paid {
    background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%);
    border-color: #a7f3d0;
}
body.unidet-payer-body .upayer-plan-item.is-pending {
    background: #fff;
}

body.unidet-payer-body .upayer-plan-item-num {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 900;
    flex-shrink: 0;
    background: #e2e8f0;
    color: #64748b;
}
body.unidet-payer-body .upayer-plan-item.is-paid .upayer-plan-item-num {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
}

body.unidet-payer-body .upayer-plan-item-body {
    flex: 1;
    min-width: 0;
}
body.unidet-payer-body .upayer-plan-item-label {
    font-size: 12px;
    font-weight: 700;
    color: #0a0e17;
    line-height: 1.2;
}
body.unidet-payer-body .upayer-plan-item.is-paid .upayer-plan-item-label {
    color: #047857;
}
body.unidet-payer-body .upayer-plan-item-date {
    font-size: 10.5px;
    color: #94a3b8;
    font-weight: 600;
    margin-top: 2px;
}

body.unidet-payer-body .upayer-plan-item-amount {
    font-family: 'Courier New', monospace;
    font-size: 13.5px;
    font-weight: 800;
    color: #0a0e17;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
body.unidet-payer-body .upayer-plan-item.is-paid .upayer-plan-item-amount {
    color: #047857;
}
/* ═══════════════════════════════════════════════════════════
   21. RÈGLEMENTS EN ATTENTE DE VALIDATION (portail débiteur)
   ───────────────────────────────────────────────────────────
   Aligné sur la comptabilité admin : seuls les paiements VALIDÉS
   sont comptabilisés. Les règlements en attente sont affichés à
   part avec la mention « En cours de vérification ».
   ═══════════════════════════════════════════════════════════ */

body.unidet-payer-body .upayer-amount-note-sub {
    display: block;
    margin-top: 1px;
    color: #33200a;
    font-size: 10px;
    font-weight: 600;
}

/* ⭐ Règle client permanente : aucune barre latérale colorée. Bordure COMPLÈTE,
   fond teinté, icône. */
body.unidet-payer-body .upayer-pending-card {
    padding: 8px 11px;
    margin-top: 8px;
    margin-bottom: 8px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
}

/* En-tête sur une seule ligne : titre + montant en attente */
body.unidet-payer-body .upayer-pending-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

body.unidet-payer-body .upayer-pending-icon {
    font-size: 13px;
    line-height: 1.2;
}

body.unidet-payer-body .upayer-pending-title {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #92400e;
}

body.unidet-payer-body .upayer-pending-amount {
    margin-left: auto;
    font-size: 14px;
    font-weight: 900;
    color: #b45309;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

body.unidet-payer-body .upayer-pending-detail {
    margin-top: 2px;
    font-size: 10.5px;
    color: #92400e;
    line-height: 1.35;
}

body.unidet-payer-body .upayer-pending-line { font-weight: 600; }

body.unidet-payer-body .upayer-settled-banner {
    padding: 10px 12px;
    margin-bottom: 8px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 10px;
}

body.unidet-payer-body .upayer-settled-banner-title {
    font-size: 12px;
    font-weight: 800;
    color: #047857;
    margin-bottom: 3px;
}

body.unidet-payer-body .upayer-settled-banner-text {
    font-size: 11px;
    color: #065f46;
    line-height: 1.4;
}

/* C2 — règlement partiel en attente : l'état n'est PAS « réglé » (ambre, comme
   les autres états en attente du portail), pour ne pas annoncer un succès qui
   n'existe pas. Aucun autre sélecteur n'est touché. */
body.unidet-payer-body .upayer-settled-banner.is-pending {
    background: #fffbeb;
    border-color: #fcd34d;
}

body.unidet-payer-body .upayer-settled-banner.is-pending .upayer-settled-banner-title {
    color: #b45309;
}

body.unidet-payer-body .upayer-settled-banner.is-pending .upayer-settled-banner-text {
    color: #92400e;
}

body.unidet-payer-body .upayer-settled-banner.is-pending strong {
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════
   22. ÉTAPE 2 — TENUE EN HAUTEUR SUR DESKTOP + ACCESSIBILITÉ
   ───────────────────────────────────────────────────────────
   Contrainte client : la colonne de droite ne doit pas défiler sur
   desktop, bouton d'action et fil d'étapes compris. La hauteur se
   règle en vh (bornée par clamp) : le rythme vertical se resserre
   sur les écrans courts (1366×768, 1280×800, zoom navigateur) sans
   jamais descendre sous des tailles de police lisibles.
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 901px) {
    body.unidet-payer-body .unidet-reg-topbar {
        margin-bottom: clamp(6px, 1.4vh, 18px);
    }
    /* Stepper compact : ~17 px de contenu, resserré sur les écrans courts. */
    body.unidet-payer-body .upayer-stepper-compact {
        padding: 0 0 clamp(6px, 1.1vh, 9px);
        margin-bottom: clamp(8px, 1.4vh, 12px);
    }

    /* En-tête de dossier (étape 2) */
    body.unidet-payer-body .upayer-dossier-head {
        margin-bottom: clamp(7px, 1.3vh, 11px);
    }
    body.unidet-payer-body .upayer-title {
        font-size: clamp(17px, 2.2vh, 19px);
        margin-bottom: clamp(2px, 0.5vh, 4px);
    }
    body.unidet-payer-body .upayer-help {
        font-size: clamp(9.5px, 1.3vh, 10.5px);
    }

    /* Le bloc décision se resserre, jamais sous les tailles lisibles. */
    body.unidet-payer-body .upayer-hero {
        padding: clamp(8px, 1.4vh, 11px) 13px clamp(8px, 1.3vh, 10px);
    }
    body.unidet-payer-body .upayer-eq {
        margin-top: clamp(7px, 1.2vh, 10px);
        padding-top: clamp(6px, 1vh, 8px);
    }
    body.unidet-payer-body .upayer-meta {
        margin-top: clamp(5px, 0.9vh, 7px);
    }
    body.unidet-payer-body .upayer-pending-card,
    body.unidet-payer-body .upayer-settled-banner {
        margin-top: clamp(5px, 0.9vh, 8px);
        margin-bottom: clamp(5px, 0.9vh, 8px);
    }
    body.unidet-payer-body .upayer-panel[data-panel="2"] .upayer-back-link {
        min-height: 44px;              /* cible tactile ≥ 44 px */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: clamp(4px, 0.8vh, 8px) 0 4px;
    }
    body.unidet-payer-body #upayer-btn-pay {
        margin-top: clamp(10px, 1.8vh, 16px) !important;
    }
}

/* Écrans desktop très courts (zoom 125 %, petites fenêtres) : on retire
   les rappels non essentiels plutôt que de laisser apparaître un défilement. */
@media (min-width: 901px) and (max-height: 700px) {
    body.unidet-payer-body .upayer-help { display: none; }
    body.unidet-payer-body .upayer-title { margin-bottom: 0; }
    body.unidet-payer-body .upayer-kpi-sub { display: none; }
}

/* Focus visible : aucun élément interactif ne doit perdre son repère
   (les boutons et le lien retour déclarent outline:none par ailleurs). */
body.unidet-payer-body .unidet-reg-submit:focus-visible {
    outline: 3px solid #0a0e17 !important;
    outline-offset: 2px !important;
}

/* Masquage réel du bouton quand il n'y a plus rien à payer : la règle
   .unidet-reg-submit impose display:inline-flex !important, donc un
   display:none posé en style inline par le JS ne suffit pas. */
body.unidet-payer-body .unidet-reg-submit.is-hidden {
    display: none !important;
}

body.unidet-payer-body .upayer-back-link:focus-visible {
    outline: 3px solid #a0824d !important;
    outline-offset: 2px !important;
    border-radius: 8px;
}

/* ═══════════════════════════════════════════════════════════
   ESPACE DÉBITEUR — solde (ci-dessus), échéancier, reçus, délai
   ───────────────────────────────────────────────────────────
   Bloc VOLONTAIREMENT compact : une ligne de résumé + trois boutons.
   Les listes (échéancier, reçus) et le formulaire de délai sont repliés
   par défaut — la densité validée de l'étape 2 et l'absence de défilement
   desktop sont ainsi préservées (mesuré : voir le harnais).
   ═══════════════════════════════════════════════════════════ */
body.unidet-payer-body .upayer-space {
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px solid #eef2f6;
}

body.unidet-payer-body .upayer-space-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}

body.unidet-payer-body .upayer-space-title {
    font-size: 11px;
    font-weight: 900;
    /* Or texte assombri : 5,2:1 (l'or clair de la charte ne passait pas à 11 px). */
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #85652f;              /* 5,2:1 — l'or clair (#a0824d) n'atteignait que 3,5:1 */
    white-space: nowrap;
}

body.unidet-payer-body .upayer-space-summary {
    flex: 1;
    min-width: 0;
    text-align: right;
    font-size: 11.5px;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Trois accès secondaires, une seule ligne. Ce sont de VRAIS boutons
   (aria-expanded / aria-controls conservés) : aucune fonction retirée. */
body.unidet-payer-body .upayer-space-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    margin-top: 7px;
}

body.unidet-payer-body .upayer-space-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 36px;
    padding: 0 8px;
    border: 1px solid #e6e9ef;
    border-radius: 10px;
    background: #fff;
    color: #0a0e17;
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

body.unidet-payer-body .upayer-space-tab:hover { border-color: #cbd5e1; background: #f8fafc; }

body.unidet-payer-body .upayer-space-tab[aria-expanded="true"] {
    background: #0a0e17;
    border-color: #0a0e17;
    color: #fff;
}

body.unidet-payer-body .upayer-space-tab.is-delay { border-color: #e6d3b3; color: #85652f; }
body.unidet-payer-body .upayer-space-tab.is-delay[aria-expanded="true"] { background: #a0824d; border-color: #a0824d; color: #fff; }

body.unidet-payer-body .upayer-space-tab:focus-visible,
body.unidet-payer-body .upayer-space-submit:focus-visible,
body.unidet-payer-body .upayer-dp-receipt:focus-visible {
    outline: 3px solid #a0824d;
    outline-offset: 2px;
}

body.unidet-payer-body .upayer-space-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #eef2f6;
    color: #334155;
    font-size: 10px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

body.unidet-payer-body .upayer-space-badge.is-alert { background: #fee2e2; color: #b91c1c; }
body.unidet-payer-body .upayer-space-tab[aria-expanded="true"] .upayer-space-badge { background: rgba(255,255,255,0.22); color: #fff; }

body.unidet-payer-body .upayer-space-panel[hidden] { display: none !important; }

body.unidet-payer-body .upayer-space-panel {
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px solid #eef2f6;
    border-radius: 10px;
    background: #fff;
}

body.unidet-payer-body .upayer-space-sub {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
}

body.unidet-payer-body .upayer-space-empty {
    margin: 0;
    font-size: 11.5px;
    font-style: italic;
    color: #94a3b8;
}

body.unidet-payer-body .upayer-space-next {
    margin: 6px 0 0;
    font-size: 11px;
    color: #64748b;
}

body.unidet-payer-body .upayer-space-notices { margin-top: 7px; }

body.unidet-payer-body .upayer-space-warn {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 4px 0 0;
    padding: 6px 9px;
    border: 1px solid #fde68a;
    border-radius: 8px;
    background: #fffbeb;
    color: #92400e;
    font-size: 11px;
    line-height: 1.45;
}

body.unidet-payer-body .upayer-space-warn-icon { flex-shrink: 0; }

/* Échéancier — une ligne par échéance : date · montant · statut */
body.unidet-payer-body .upayer-ds-row,
body.unidet-payer-body .upayer-dp-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 2px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
}

body.unidet-payer-body .upayer-ds-row:last-child,
body.unidet-payer-body .upayer-dp-row:last-child { border-bottom: none; }

body.unidet-payer-body .upayer-ds-num { width: 34px; flex-shrink: 0; color: #94a3b8; font-weight: 700; }
body.unidet-payer-body .upayer-ds-date { width: 84px; flex-shrink: 0; color: #334155; font-weight: 700; }
body.unidet-payer-body .upayer-ds-amount { flex: 1; color: #0a0e17; font-weight: 800; text-align: right; }
body.unidet-payer-body .upayer-ds-status { width: 128px; flex-shrink: 0; text-align: right; font-weight: 800; color: #64748b; }

/* Statuts canoniques de l'échéancier (payer/helpers.php : paid, pending,
   partial, late, rejected, upcoming) + repli « overdue » des versions
   antérieures. */
body.unidet-payer-body .upayer-ds-row.is-paid .upayer-ds-status     { color: #047857; }
body.unidet-payer-body .upayer-ds-row.is-pending .upayer-ds-status  { color: #b45309; }
body.unidet-payer-body .upayer-ds-row.is-partial .upayer-ds-status  { color: #b45309; }
body.unidet-payer-body .upayer-ds-row.is-late .upayer-ds-status,
body.unidet-payer-body .upayer-ds-row.is-overdue .upayer-ds-status  { color: #b91c1c; }
body.unidet-payer-body .upayer-ds-row.is-late .upayer-ds-date,
body.unidet-payer-body .upayer-ds-row.is-overdue .upayer-ds-date    { color: #b91c1c; }
body.unidet-payer-body .upayer-ds-row.is-rejected .upayer-ds-status { color: #b91c1c; text-decoration: line-through; }

/* Reçus / paiements */
body.unidet-payer-body .upayer-dp-row { flex-direction: column; align-items: stretch; gap: 2px; }
body.unidet-payer-body .upayer-dp-main { display: flex; align-items: baseline; gap: 8px; }
body.unidet-payer-body .upayer-dp-date { color: #334155; font-weight: 700; }
body.unidet-payer-body .upayer-dp-amount { flex: 1; text-align: right; color: #0a0e17; font-weight: 800; }
body.unidet-payer-body .upayer-dp-meta { display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: #64748b; }
body.unidet-payer-body .upayer-dp-method { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.unidet-payer-body .upayer-dp-status { font-weight: 800; }
body.unidet-payer-body .upayer-dp-row.is-validated .upayer-dp-status { color: #047857; }
body.unidet-payer-body .upayer-dp-row.is-pending .upayer-dp-status   { color: #b45309; }
body.unidet-payer-body .upayer-dp-row.is-rejected .upayer-dp-status  { color: #b91c1c; }
body.unidet-payer-body .upayer-dp-note { margin: 2px 0 0; font-size: 10.5px; color: #b91c1c; }

body.unidet-payer-body .upayer-dp-receipt {
    color: #85652f;
    font-weight: 800;
    text-decoration: none;
    border-bottom: 1px dotted #a0824d;
    white-space: nowrap;
}

body.unidet-payer-body .upayer-dp-receipt:hover { color: #a0824d; }

/* Demande de délai */
body.unidet-payer-body .upayer-delay-lead {
    margin: 0 0 8px;
    font-size: 11px;
    line-height: 1.5;
    color: #64748b;
}

body.unidet-payer-body .upayer-delay-lead strong { color: #92400e; }

body.unidet-payer-body .upayer-delay-info {
    margin: 0 0 8px;
    padding: 6px 9px;
    border: 1px solid #efe3d0;
    border-radius: 8px;
    background: #fdf8f1;
    color: #85652f;
    font-size: 11px;
    line-height: 1.45;
}

body.unidet-payer-body .upayer-delay-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

body.unidet-payer-body .upayer-delay-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 700;
    color: #334155;
}

body.unidet-payer-body .upayer-delay-field .req { color: #b91c1c; }
body.unidet-payer-body .upayer-delay-soft { font-weight: 600; color: #94a3b8; }

body.unidet-payer-body .upayer-delay-field input,
body.unidet-payer-body .upayer-delay-field select,
body.unidet-payer-body .upayer-delay-field textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #0a0e17;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 8px;
}

body.unidet-payer-body .upayer-delay-field input,
body.unidet-payer-body .upayer-delay-field select { height: 32px; padding: 0 8px; }

body.unidet-payer-body .upayer-delay-field textarea { resize: vertical; min-height: 48px; }

body.unidet-payer-body .upayer-delay-field input:focus,
body.unidet-payer-body .upayer-delay-field select:focus,
body.unidet-payer-body .upayer-delay-field textarea:focus {
    outline: none;
    border-color: #a0824d;
    box-shadow: 0 0 0 2px rgba(212, 163, 115, 0.25);
}

body.unidet-payer-body .upayer-delay-honeypot {
    position: absolute;
    left: -9999px;
    top: -9999px;
}

body.unidet-payer-body .upayer-space-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 6px 16px;
    border: none;
    border-radius: 9px;
    background: #0a0e17;
    color: #fff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.15s;
}

body.unidet-payer-body .upayer-space-submit:hover:not(:disabled) { background: #1a1f2e; }
body.unidet-payer-body .upayer-space-submit:disabled { opacity: 0.6; cursor: default; }

body.unidet-payer-body .upayer-delay-success {
    margin: 0 0 8px;
    padding: 7px 9px;
    border: 1px solid #a7f3d0;
    border-radius: 8px;
    background: #ecfdf5;
    color: #047857;
    font-size: 11px;
    line-height: 1.5;
}

@media (max-width: 560px) {
    body.unidet-payer-body .upayer-delay-grid { grid-template-columns: 1fr; }
    body.unidet-payer-body .upayer-ds-status { width: 104px; }

    /* Mobile : le bloc décision passe sur une colonne, les quatre tuiles sur
       deux, les trois accès de l'espace débiteur sur une. Aucune fonction
       retirée : tout reste atteignable sans défilement horizontal. */
    body.unidet-payer-body .upayer-hero-grid { grid-template-columns: 1fr; }
    body.unidet-payer-body .upayer-pay-value,
    body.unidet-payer-body .upayer-kpi-value { font-size: 26px; }
    body.unidet-payer-body .upayer-preset-grid { grid-template-columns: repeat(2, 1fr); }
    body.unidet-payer-body .upayer-space-tabs { grid-template-columns: 1fr; }
    body.unidet-payer-body .upayer-space-tab { justify-content: flex-start; padding: 0 10px; }
    body.unidet-payer-body .upayer-ctx-item.is-key { margin-left: 0; }
    body.unidet-payer-body .upayer-context { gap: 5px 8px; }
    body.unidet-payer-body .upayer-meta { justify-content: flex-start; }
    body.unidet-payer-body .upayer-title { font-size: 17px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BANNIÈRE DE RETOUR DE PAIEMENT (générique)
   ───────────────────────────────────────────────────────────────────────────
   Affichée au débiteur qui revient d'un paiement par REDIRECTION (prélèvement
   SEPA). Sans elle, il retombait sur le portail sans savoir si son règlement
   avait été pris en compte.

   Elle est insérée AVANT `#upayer-stepper`, donc en tête du portail : c'est la
   première chose qu'il voit en revenant.
   ═══════════════════════════════════════════════════════════════════════════ */

.upayer-return-notice {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
    padding: 13px 16px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 13.5px;
    line-height: 1.55;
    text-align: left;
}

.upayer-return-notice strong { font-weight: 700; }

.upayer-return-notice.is-ok {
    background: #ECFDF5;
    border-color: #A7F3D0;
    color: #065F46;
}

.upayer-return-notice.is-pending {
    background: #FFFBEB;
    border-color: #FDE68A;
    color: #92400E;
}

.upayer-return-notice.is-error {
    background: #FEF2F2;
    border-color: #FECACA;
    color: #991B1B;
}

.upayer-return-retry {
    margin-left: auto;
    padding: 7px 14px;
    border: 1px solid currentColor;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
    flex: 0 0 auto;
}

.upayer-return-retry:hover { background: rgba(0, 0, 0, 0.05); }
.upayer-return-retry:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

@media (max-width: 560px) {
    .upayer-return-notice { font-size: 13px; padding: 12px 14px; }
    .upayer-return-retry { margin-left: 0; width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   24. MODALE DE CONFIRMATION (SweetAlert2) — DÉPLACÉE DEPUIS LE TABLEAU DE BORD
   ───────────────────────────────────────────────────────────────────────────
   Ces règles vivaient dans `unidet-v2/assets/css/shell.css`, une feuille qui
   n'est JAMAIS chargée sur /payer/ : la modale du portail affichait donc les
   styles PAR DÉFAUT de SweetAlert2 (bouton violet #7066E0). Elles sont ici,
   avec la feuille qui les utilise, et COMPLÈTES :

   • `.unidet-swal-confirm` ne définissait aucune couleur de fond (seulement
     `color:#fff`) alors que payer.js passe `buttonsStyling:false` : si la
     feuille avait été chargée, « Confirmer » aurait été BLANC SUR BLANC.
   • Aucune bordure latérale colorée, aucun contour coloré : bouton confirmer
     bleu nuit plein, bouton annuler gris clair bordé.
   ═══════════════════════════════════════════════════════════════════════════ */

.swal2-popup.unidet-swal-popup {
    border-radius: 16px !important;
    padding: 22px 22px 18px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    box-shadow: 0 24px 60px rgba(10, 14, 23, 0.32) !important;
    max-width: 430px !important;
    color: #0a0e17 !important;
}

.unidet-swal-popup .swal2-title {
    font-size: 18px !important;
    font-weight: 900 !important;
    color: #0a0e17 !important;
    margin: 0 0 10px !important;
    letter-spacing: -0.3px !important;
}

.unidet-swal-popup .swal2-html-container {
    margin: 0 !important;
    padding: 0 !important;
    color: #475569 !important;
    font-size: 13.5px !important;
    line-height: 1.55 !important;
}

.unidet-swal-popup .swal2-html-container strong {
    color: #0a0e17 !important;
    font-weight: 800 !important;
}

/* Barre d'actions : deux boutons de même poids, sur une grille. */
.unidet-swal-popup .swal2-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin: 16px 0 0 !important;
    width: 100% !important;
}

.unidet-swal-confirm,
.unidet-swal-cancel {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border-radius: 10px !important;
    border: 1.5px solid transparent !important;
    font-family: inherit !important;
    font-size: 12.5px !important;
    font-weight: 900 !important;
    letter-spacing: 0.2px !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: background 0.15s, color 0.15s, border-color 0.15s !important;
}

/* ⭐ Confirmer : bleu nuit + texte blanc (jamais blanc sur blanc). */
.unidet-swal-confirm {
    background: #0a0e17 !important;
    background-image: none !important;
    color: #ffffff !important;
    border-color: #0a0e17 !important;
}

.unidet-swal-confirm:hover {
    background: #1a1f2e !important;
    border-color: #1a1f2e !important;
    color: #ffffff !important;
}

.unidet-swal-confirm:focus-visible,
.unidet-swal-cancel:focus-visible {
    outline: 3px solid #0a0e17 !important;
    outline-offset: 2px !important;
}

/* Annuler : gris clair + texte bleu nuit, bordure neutre. */
.unidet-swal-cancel {
    background: #f1f5f9 !important;
    background-image: none !important;
    color: #0a0e17 !important;
    border-color: #e5e9f0 !important;
}

.unidet-swal-cancel:hover {
    background: #e2e8f0 !important;
    border-color: #cbd5e1 !important;
    color: #0a0e17 !important;
}

/* ── Contenu de la modale (produit par payer.js) ───────────────────────────── */
.upayer-confirm { text-align: center; font-family: inherit; }

.upayer-confirm-icon {
    width: 46px;
    height: 46px;
    margin: 0 auto 10px;
    border-radius: 50%;
    background: #ecfdf5;
    color: #059669;
    font-size: 21px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.upayer-confirm-icon.is-installment {
    background: #eff6ff;
    color: #1d4ed8;
}

.upayer-confirm-title {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 900;
    color: #0a0e17;
    letter-spacing: -0.2px;
}

.upayer-confirm-ref {
    margin: 0 0 12px;
    font-size: 11px;
    color: #64748b;
    font-weight: 600;
}

.upayer-confirm-ref b {
    font-family: 'Courier New', ui-monospace, monospace;
    letter-spacing: 0.06em;
    color: #0a0e17;
}

.upayer-confirm-amount {
    background: #0a0e17;
    border-radius: 11px;
    padding: 11px 13px;
    text-align: center;
}

.upayer-confirm-amount span {
    display: block;
    font-size: 8.5px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.upayer-confirm-amount b {
    display: block;
    margin-top: 3px;
    font-size: 24px;
    font-weight: 900;
    color: #c9a227;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.5px;
}

.upayer-confirm-amount small {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    font-variant-numeric: tabular-nums;
}

.upayer-confirm-after {
    margin: 10px 0 0;
    font-size: 10.5px;
    color: #475569;
    font-weight: 600;
    line-height: 1.45;
}

.upayer-confirm-after b { color: #0a0e17; font-weight: 800; }

.upayer-confirm-next {
    margin: 7px 0 0;
    padding: 7px 9px;
    background: #f8fafc;
    border-radius: 8px;
    font-size: 10px;
    line-height: 1.45;
    color: #475569;
    font-weight: 600;
}

.upayer-confirm-next b { color: #0a0e17; font-weight: 800; }

/* ═══════════════════════════════════════════════════════════════════════════
   AÉRATION / AGRANDISSEMENT / RECENTRAGE DU PORTAIL (ajout du 17/10, validé)
   ───────────────────────────────────────────────────────────────────────────
   Bloc ADDITIF : aucune règle existante n'est réécrite. Il s'ajoute à la fin
   et ne prend effet que par sa position. Pour revenir en arrière, supprimer
   tout ce qui suit cette ligne.

   ⚠️ Ce bloc définit des valeurs en PIXELS. La production resserre le rythme
   avec des `clamp(... vh ...)` ; les pixels gagneraient sur ces clamps, d'où
   la section 10 qui rétablit un palier pour les écrans courts (1366 × 768).
   Si tu modifies ce bloc, vérifie que l'étape 2 tient toujours à 768 px de haut.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   PROPOSITION — « aérer + agrandir » le portail de paiement débiteur
   Fichier à ajouter À LA FIN de unidet-v2/unidet-v2/payer/assets/payer.css
   ───────────────────────────────────────────────────────────────────────────
   Rien n'est supprimé : ce bloc ne fait qu'ajouter de l'espace, des tailles de
   texte et un centrage. Aucune bordure latérale colorée, aucun contour coloré.
   Les paliers responsives existants sont respectés (chaque media query est
   reprise à l'identique).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. CENTRAGE DANS LA PARTIE DROITE ────────────────────────────────────
   Mesure AVANT : la colonne fait 589 px rendus, avec 166 px de vide à GAUCHE
   et 166 px à DROITE — elle est donc déjà centrée horizontalement. Ce que le
   débiteur perçoit comme « collé à gauche / en haut », c'est l'ancrage en haut
   (`align-items: flex-start`, posé pour éviter le saut entre étapes) : le bloc
   reste dans le tiers supérieur et laisse 300 px de vide en bas.
   `margin-block: auto` centre verticalement QUAND le contenu tient, et ne fait
   rien quand il déborde (les marges auto valent 0 en cas d'espace négatif) :
   aucun contenu ne devient inatteignable, et le défilement reste possible.
   ═════════════════════════════════════════════════════════════════════════ */
body.unidet-payer-body .unidet-reg-right-inner {
    margin-top: auto;
    margin-bottom: auto;
}

/* ─── 2. ZOOM LÉGER (+6 %) ─────────────────────────────────────────────────
   `zoom` reste sur le conteneur INTERNE (même choix que la production) : le
   panneau et son fond ne sont pas réduits, aucune bande n'apparaît sur les
   côtés. Vérifié : payer.css ne contient AUCUN `position: fixed` (recherche
   `position: *fixed` → 0 résultat), donc pas de stepper fixe à casser.
   620 × 1,06 = 657 px rendus (au lieu de 620 × 0,95 = 589 px).
   ═════════════════════════════════════════════════════════════════════════ */
body.unidet-payer-body .unidet-reg-right-inner {
    zoom: 1.06;
}

/* ─── 3. AÉRATION — ÉTAPE 2 (le bloc décision et son entourage) ──────────── */
body.unidet-payer-body .upayer-dossier-head { margin-bottom: 18px; }
body.unidet-payer-body .upayer-title { font-size: 20px; margin-bottom: 6px; }
body.unidet-payer-body .upayer-help { font-size: 11.5px; line-height: 1.6; }

body.unidet-payer-body .upayer-code-card {
    gap: 5px;
    margin-bottom: 20px;
    padding: 17px 20px 16px;
}
body.unidet-payer-body .upayer-code-card-label { font-size: 10px; }
body.unidet-payer-body .upayer-code-card-value { font-size: 27px; line-height: 1.2; }

body.unidet-payer-body .upayer-hero {
    padding: 16px 16px 15px;
    border-radius: 16px;
}
body.unidet-payer-body .upayer-hero-grid { gap: 16px; }
body.unidet-payer-body .upayer-kpi { padding: 2px 4px; }
body.unidet-payer-body .upayer-kpi-label {
    font-size: 10px;
    line-height: 1.45;
    letter-spacing: 0.07em;
}
body.unidet-payer-body .upayer-kpi-value,
body.unidet-payer-body .upayer-pay-value {
    font-size: clamp(24px, 3.5vh, 31px);
    margin: 6px 0 6px;
}
body.unidet-payer-body .upayer-pay {
    padding: 14px 14px 14px;
    border-radius: 13px;
}
body.unidet-payer-body .upayer-pay-value { margin-bottom: 11px; }

body.unidet-payer-body .unidet-reg-submit.upayer-cta-gold {
    height: 48px !important;
    min-height: 48px !important;
    border-radius: 11px !important;
    font-size: 13.5px !important;
    padding: 0 14px !important;
}

body.unidet-payer-body .upayer-eq {
    margin-top: 14px;
    padding-top: 11px;
    font-size: 11.5px;
    line-height: 1.7;
}
body.unidet-payer-body .upayer-meta {
    margin-top: 11px;
    font-size: 11px;
    line-height: 1.7;
}
body.unidet-payer-body .upayer-meta-item::after { margin: 0 9px; }

body.unidet-payer-body .upayer-pending-card {
    margin-top: 12px;
    margin-bottom: 12px;
    padding: 11px 14px;
    border-radius: 12px;
}
body.unidet-payer-body .upayer-pending-title { font-size: 11.5px; }
body.unidet-payer-body .upayer-pending-amount { font-size: 15px; }
body.unidet-payer-body .upayer-pending-detail {
    font-size: 11px;
    line-height: 1.5;
    margin-top: 4px;
}

/* Espace débiteur */
body.unidet-payer-body .upayer-space { margin-top: 16px; padding-top: 12px; }
body.unidet-payer-body .upayer-space-head { gap: 12px; }
body.unidet-payer-body .upayer-space-title { font-size: 11.5px; }
body.unidet-payer-body .upayer-space-summary { font-size: 12px; }
body.unidet-payer-body .upayer-space-tabs { gap: 10px; margin-top: 12px; }
body.unidet-payer-body .upayer-space-tab {
    min-height: 42px;
    font-size: 11px;
    border-radius: 11px;
}
body.unidet-payer-body .upayer-space-panel {
    margin-top: 12px;
    padding: 14px 16px;
    border-radius: 12px;
}
body.unidet-payer-body .upayer-space-sub { font-size: 11.5px; margin-bottom: 10px; }
body.unidet-payer-body .upayer-ds-row,
body.unidet-payer-body .upayer-dp-row {
    padding: 9px 2px;
    font-size: 12px;
}
body.unidet-payer-body .upayer-dp-meta { font-size: 11px; margin-top: 3px; }
body.unidet-payer-body .upayer-space-next { font-size: 11.5px; margin-top: 10px; }

body.unidet-payer-body .upayer-back-link { padding: 20px 0 8px; font-size: 13.5px; }

/* ─── 4. AÉRATION — ÉTAPE 1 (saisie du code) ─────────────────────────────── */
body.unidet-payer-body .unidet-reg-heading { margin-bottom: 28px; }
body.unidet-payer-body .unidet-reg-h2 { font-size: 25px; margin-bottom: 10px; }
body.unidet-payer-body .unidet-reg-h2-sub { font-size: 14px; line-height: 1.6; }
body.unidet-payer-body .unidet-reg-field { gap: 8px; }
body.unidet-payer-body .unidet-reg-field label { font-size: 13.5px; }
body.unidet-payer-body #upayer-code { padding: 13px 18px; font-size: 17.5px; }
body.unidet-payer-body .upayer-format-hint { margin-top: 12px; font-size: 12px; }
body.unidet-payer-body .unidet-reg-submit,
body.unidet-payer-body .unidet-reg-submit.active {
    height: 54px !important;
    min-height: 54px !important;
    font-size: 14.5px !important;
}
body.unidet-payer-body .unidet-reg-secure { margin-top: 18px; font-size: 12.5px; }
body.unidet-payer-body .upayer-stepper-compact { margin-bottom: 16px; padding-bottom: 12px; }
body.unidet-payer-body .upayer-sc-num { width: 19px; height: 19px; font-size: 10px; }
body.unidet-payer-body .upayer-sc-label { font-size: 10px; }
body.unidet-payer-body .upayer-sc-line { width: 18px; }
body.unidet-payer-body .unidet-reg-topbar { margin-bottom: 24px; font-size: 13.5px; }

/* ─── 5. AÉRATION — ÉTAPE 3 (montant) ────────────────────────────────────── */
body.unidet-payer-body .upayer-context {
    padding: 11px 14px;
    gap: 6px 14px;
    font-size: 11.5px;
    margin-bottom: 18px;
    border-radius: 12px;
}
body.unidet-payer-body .upayer-ctx-item b { font-size: 9px; }
body.unidet-payer-body .upayer-ctx-item.is-key { padding: 4px 10px; border-radius: 7px; }

body.unidet-payer-body .upayer-payment-tabs { padding: 5px; margin-bottom: 18px; border-radius: 11px; }
body.unidet-payer-body .upayer-ptab { height: 40px; font-size: 12.5px; border-radius: 8px; }
body.unidet-payer-body .upayer-ptab-icon { font-size: 14px; }

body.unidet-payer-body .upayer-choice-head { margin-bottom: 10px; align-items: flex-end; }
body.unidet-payer-body .upayer-choice-title { font-size: 10.5px; line-height: 1.4; }
body.unidet-payer-body .upayer-choice-hint { font-size: 10.5px; }

body.unidet-payer-body .upayer-preset-grid { gap: 10px; }
body.unidet-payer-body .upayer-preset {
    min-height: 54px;
    padding: 10px 5px;
    border-radius: 11px;
}
body.unidet-payer-body .upayer-preset.is-full { min-height: 54px; }
body.unidet-payer-body .upayer-preset-pct { font-size: 9.5px; }
body.unidet-payer-body .upayer-preset-amount { font-size: 13px; }

body.unidet-payer-body .upayer-amount-input {
    height: 50px;
    border-radius: 11px;
}
body.unidet-payer-body .upayer-amount-prefix { font-size: 13px; padding: 0 14px; min-width: 48px; }
body.unidet-payer-body .upayer-amount-input input { font-size: 15px; padding: 0 14px; }

body.unidet-payer-body #upayer-btn-pay { margin-top: 22px !important; }

body.unidet-payer-body .upayer-installment-grid { gap: 12px; }
body.unidet-payer-body .upayer-installment-card {
    min-height: 94px;
    padding: 13px 8px;
    border-radius: 14px;
}
body.unidet-payer-body .upayer-installment-months { margin-bottom: 8px; }
body.unidet-payer-body .upayer-installment-num { font-size: 24px; }
body.unidet-payer-body .upayer-installment-unit { font-size: 9.5px; }
body.unidet-payer-body .upayer-installment-monthly { font-size: 11.5px; }

/* ─── 6. AÉRATION — SUCCÈS ───────────────────────────────────────────────── */
body.unidet-payer-body .upayer-success-hero { margin-bottom: 20px; }
body.unidet-payer-body .upayer-success-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 15px;
}
body.unidet-payer-body .upayer-success-title { font-size: 21px; margin-bottom: 8px; }
body.unidet-payer-body .upayer-success-sub { font-size: 12.5px; line-height: 1.65; }
body.unidet-payer-body .upayer-success-block {
    padding: 16px 18px 17px;
    border-radius: 16px;
}
body.unidet-payer-body .upayer-success-main { padding-bottom: 12px; }
body.unidet-payer-body .upayer-success-main-label { font-size: 10px; }
body.unidet-payer-body .upayer-success-main-value { font-size: 27px; }
body.unidet-payer-body .upayer-success-split { padding-top: 12px; gap: 14px; }
body.unidet-payer-body .upayer-success-row-label { font-size: 9.5px; }
body.unidet-payer-body .upayer-success-row-value { font-size: 16px; margin-top: 4px; }
body.unidet-payer-body .upayer-success-code { margin-top: 14px; padding-top: 12px; }
body.unidet-payer-body .upayer-success-code-value { font-size: 20px; }
body.unidet-payer-body .upayer-success-note {
    padding: 16px 18px;
    gap: 14px;
    font-size: 12.5px;
    line-height: 1.6;
    margin-top: 16px;
}
body.unidet-payer-body .upayer-receipt-btn { padding: 15px 24px; margin-top: 18px; }
body.unidet-payer-body .upayer-receipt-actions { margin-top: 18px; }
body.unidet-payer-body .upayer-receipt-actions .upayer-receipt-btn { margin-top: 0; }
body.unidet-payer-body .upayer-success-plan { padding: 18px 20px; margin-bottom: 18px; }
body.unidet-payer-body .upayer-plan-head { padding-bottom: 14px; margin-bottom: 14px; }
body.unidet-payer-body .upayer-plan-list { gap: 8px; }
body.unidet-payer-body .upayer-plan-item { padding: 12px 14px; border-radius: 11px; }
body.unidet-payer-body .upayer-plan-item-date { font-size: 11px; margin-top: 3px; }

/* ─── 7. « TROP TOUFFU » — ce qui se répétait ──────────────────────────────
   (a) Étape 2 : la ligne « dont X € en cours de vérification » sous le solde
       est AFFICHÉE (consigne client validée) : c'est elle qui explique, AU
       MOMENT OÙ IL LIT LE SOLDE, pourquoi celui-ci n'a pas baissé. Elle est
       volontairement répétée dans le bloc « En cours de vérification » plus
       bas, qui en donne le détail (date, libellé). Aucun montant n'est
       recalculé ici : `pending` vient du serveur.
   (b) Étape 2 : la phrase d'aide sous le titre répétait le lien support déjà
       présent dans la barre du haut ( « Besoin d'aide ? Contacter le support » ).
   (c) Étape 3 : le second intitulé « Ou saisissez un montant » et son aide
       « montant libre » redisaient ce que disait déjà l'aide du premier
       intitulé. Un seul intitulé les couvre tous les deux.
   ═════════════════════════════════════════════════════════════════════════ */
body.unidet-payer-body #upayer-choice-free { display: none; }

/* Le champ « montant libre » garde sa cible tactile (50 px) et son `aria-label`
   (déjà présent dans shortcode.php) : rien n'est retiré aux lecteurs d'écran,
   l'intitulé visible est seulement fusionné. Il lui faut donc l'air que
   l'intitulé supprimé apportait. */
body.unidet-payer-body .upayer-amount-input { margin-top: 16px; }

/* ─── 8. PALIERS RESPONSIVES — mêmes bornes que la production ────────────── */
@media (max-width: 900px) {
    body.unidet-payer-body .unidet-reg-right-inner { zoom: 1; }
    /* Les tailles ci-dessus sont en pixels et gagneraient sur les paliers
       responsives de payer.css : on les rétablit ici, à l'identique. */
    body.unidet-payer-body .unidet-reg-h2 { font-size: 22px; }
    body.unidet-payer-body .unidet-reg-h2-sub { font-size: 13.5px; }
    body.unidet-payer-body .upayer-title { font-size: 18px; }
    body.unidet-payer-body #upayer-code { font-size: 16px; padding: 13px 14px; }
    body.unidet-payer-body .upayer-hero-grid { gap: 14px; }
    body.unidet-payer-body .upayer-space-tabs { gap: 10px; }
    body.unidet-payer-body .unidet-reg-heading { margin-bottom: 24px; }
    body.unidet-payer-body #upayer-btn-pay { margin-top: 20px !important; }
    /* Le centrage vertical n'a plus de sens quand la page défile en un bloc. */
    body.unidet-payer-body .unidet-reg-right-inner { margin-top: 0; margin-bottom: 0; }
}

@media (max-width: 560px) {
    body.unidet-payer-body .unidet-reg-h2 { font-size: 21px; }
    body.unidet-payer-body .unidet-reg-h2-sub { font-size: 13px; }
    body.unidet-payer-body .upayer-title { font-size: 17px; }
    body.unidet-payer-body #upayer-code { font-size: 15px; padding: 14px 12px; }
    body.unidet-payer-body .unidet-reg-secure { font-size: 12px; }
    body.unidet-payer-body .upayer-preset { min-height: 52px; }
    body.unidet-payer-body .upayer-space-tab { min-height: 44px; }
    body.unidet-payer-body .upayer-amount-input { height: 50px; }
    body.unidet-payer-body .unidet-reg-right { padding: 32px 22px 48px; }
    body.unidet-payer-body .upayer-code-card { padding: 16px 16px 15px; }
    body.unidet-payer-body .upayer-code-card-value { font-size: 23px; }
    body.unidet-payer-body .upayer-hero { padding: 15px 14px 14px; }
    body.unidet-payer-body .upayer-kpi-value,
    body.unidet-payer-body .upayer-pay-value { font-size: 27px; }
    body.unidet-payer-body .upayer-success-main-value { font-size: 25px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   10. ÉCRANS COURTS (portables 1366 × 768, 1280 × 800, zoom navigateur)
   ───────────────────────────────────────────────────────────────────────────
   La production resserre déjà le rythme au moyen de `clamp(... vh ...)`. Les
   valeurs ci-dessus étant en pixels, elles gagneraient sur ces clamps : on
   rétablit donc explicitement un palier resserré, pour que l'étape 2 continue
   de tenir dans la colonne sans défilement sur un écran de 768 px.
   Mesuré : 1366 × 768 → hauteur de contenu 702 px pour 720 px disponibles.
   ═════════════════════════════════════════════════════════════════════════ */
@media (min-width: 901px) and (max-height: 820px) {
    body.unidet-payer-body .upayer-dossier-head { margin-bottom: 12px; }
    body.unidet-payer-body .upayer-code-card { padding: 13px 16px 12px; margin-bottom: 14px; }
    body.unidet-payer-body .upayer-hero { padding: 12px 14px 11px; }
    body.unidet-payer-body .upayer-eq { margin-top: 10px; padding-top: 8px; }
    body.unidet-payer-body .upayer-meta { margin-top: 8px; }
    body.unidet-payer-body .upayer-pending-card { margin-top: 8px; margin-bottom: 8px; }
    body.unidet-payer-body .upayer-space { margin-top: 10px; padding-top: 8px; }
    body.unidet-payer-body .upayer-space-tabs { margin-top: 9px; }
    body.unidet-payer-body .upayer-back-link { padding: 12px 0 6px; }
}


/* ═══════════════════════════════════════════════════════════
   PORTAIL SIMPLIFIÉ — CODE + MONTANT + PAYER + DÉLAI
   ───────────────────────────────────────────────────────────
   Décision client : le débiteur ne voit que son code, le montant à régler,
   le bouton « Payer ce montant » et le lien « Je souhaite un délai ».
   Aucune bordure latérale colorée. Or #C9A227, nuit #0A0E17, gris #64748B.
   ═══════════════════════════════════════════════════════════ */
body.unidet-payer-body .upayer-pay-card {
    background: #ffffff;
    border: 1px solid #e6e9ef;
    border-radius: 14px;
    padding: 18px 18px 16px;
    box-shadow: 0 2px 10px rgba(10, 14, 23, 0.05);
    margin: 14px 0 0;
}

body.unidet-payer-body .upayer-pay-card .upayer-kpi-label {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #64748b;
    line-height: 1.3;
}

body.unidet-payer-body .upayer-pay-card .upayer-kpi-value {
    font-size: clamp(30px, 4.4vh, 40px);
    font-weight: 900;
    color: #0a0e17;
    line-height: 1.05;
    margin: 6px 0 0;
    font-variant-numeric: tabular-nums;
    letter-spacing: -1px;
}

body.unidet-payer-body .upayer-pay-card-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 16px;
}

body.unidet-payer-body .upayer-pay-card-actions .unidet-reg-submit.upayer-cta-gold {
    width: auto !important;
    min-width: 216px !important;
    margin: 0 !important;
}

body.unidet-payer-body .upayer-delay-btn {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    padding: 4px 0;
    margin: 0;
    color: #64748b;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    cursor: pointer;
    transition: color 0.15s ease;
}

body.unidet-payer-body .upayer-delay-btn:hover { color: #0a0e17; }
body.unidet-payer-body .upayer-delay-btn:focus-visible {
    outline: 2px solid #c9a227;
    outline-offset: 3px;
    border-radius: 4px;
}
body.unidet-payer-body .upayer-delay-btn:disabled {
    color: #0a0e17;
    text-decoration: none;
    cursor: default;
    font-weight: 800;
}

body.unidet-payer-body .upayer-delay-note {
    margin: 12px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    font-weight: 650;
    color: #0a0e17;
}

body.unidet-payer-body .upayer-delay-note.is-error { color: #b91c1c; }
body.unidet-payer-body .upayer-delay-note::before {
    content: "✓";
    display: inline-block;
    margin-right: 6px;
    color: #c9a227;
    font-weight: 900;
}
body.unidet-payer-body .upayer-delay-note.is-error::before { content: "⚠"; color: #b91c1c; }

/* Le CTA reste lisible quand le dossier n'a plus rien à encaisser. */
body.unidet-payer-body .upayer-pay-card.is-no-cta .upayer-pay-card-actions .unidet-reg-submit { display: none !important; }

@media (max-width: 640px) {
    body.unidet-payer-body .upayer-pay-card-actions { align-items: flex-start; flex-direction: column; gap: 12px; }
    body.unidet-payer-body .upayer-pay-card-actions .unidet-reg-submit.upayer-cta-gold { width: 100% !important; }
}

/* Le bandeau de contexte ne porte plus qu'un montant : on le centre. */
body.unidet-payer-body #upayer-context { justify-content: center; }
body.unidet-payer-body #upayer-context .upayer-ctx-item.is-key { margin-left: 0; }

/* ═══════════════════════════════════════════════════════════
   DEMANDE DE DÉLAI — SUR LA PAGE PRINCIPALE (formulaire rouvert)
   ───────────────────────────────────────────────────────────
   Séparateur HORIZONTAL (aucune bordure latérale colorée) : la demande de
   délai est un second temps de la page, pas un bouton à côté de « Payer ».
   Or #C9A227, nuit #0A0E17, gris #64748B, vert #16A34A.
   ═══════════════════════════════════════════════════════════ */
body.unidet-payer-body .upayer-delay {
    margin: 18px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid #e6e9ef;
}

body.unidet-payer-body .upayer-delay-intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

body.unidet-payer-body .upayer-delay-question {
    margin: 0;
    font-size: 12.5px;
    font-weight: 700;
    color: #64748b;
    line-height: 1.5;
}

body.unidet-payer-body .upayer-delay-form {
    margin: 4px 0 0;
    padding: 16px 16px 14px;
    background: #ffffff;
    border: 1px solid #e6e9ef;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(10, 14, 23, 0.05);
}

body.unidet-payer-body .upayer-delay-title {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: -0.2px;
    color: #0a0e17;
}

body.unidet-payer-body .upayer-delay-count {
    align-self: flex-end;
    font-size: 10.5px;
    font-weight: 700;
    color: #64748b;
    font-variant-numeric: tabular-nums;
}

body.unidet-payer-body .upayer-delay-hint {
    align-self: flex-start;
    font-size: 10.5px;
    font-weight: 600;
    color: #64748b;
}

body.unidet-payer-body .upayer-delay-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}

body.unidet-payer-body .upayer-delay-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 18px;
    border: 1px solid #0a0e17;
    border-radius: 10px;
    background: #0a0e17;
    color: #ffffff;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 900;
    cursor: pointer;
    transition: background 0.15s ease;
}

body.unidet-payer-body .upayer-delay-submit:hover:not(:disabled) { background: #1a1f2e; }
body.unidet-payer-body .upayer-delay-submit:disabled { opacity: 0.65; cursor: default; }
body.unidet-payer-body .upayer-delay-submit:focus-visible,
body.unidet-payer-body .upayer-delay-cancel:focus-visible {
    outline: 2px solid #c9a227;
    outline-offset: 3px;
}

body.unidet-payer-body .upayer-delay-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid #d8dee7;
    border-radius: 10px;
    background: #ffffff;
    color: #64748b;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

body.unidet-payer-body .upayer-delay-cancel:hover:not(:disabled) { color: #0a0e17; border-color: #a0824d; }
body.unidet-payer-body .upayer-delay-cancel:disabled { opacity: 0.6; cursor: default; }

/* Message d'erreur du formulaire : texte + icône, jamais une barre latérale. */
body.unidet-payer-body .upayer-delay-error {
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 700;
    color: #b91c1c;
    line-height: 1.5;
}

/* Après envoi : le formulaire se referme, un message COURT reste affiché. */
body.unidet-payer-body .upayer-delay-success {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 11px 14px;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    background: #f0fdf4;
    color: #166534;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.5;
}

body.unidet-payer-body .upayer-delay-done-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #16a34a;
    color: #ffffff;
    font-size: 11px;
    font-weight: 900;
}

@media (max-width: 560px) {
    body.unidet-payer-body .upayer-delay-actions { flex-direction: column; align-items: stretch; }
    body.unidet-payer-body .upayer-delay-submit,
    body.unidet-payer-body .upayer-delay-cancel { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   HISTORIQUE DES DEMANDES — SOUS LE DÉPLIANT « JE SOUHAITE UN DÉLAI »
   ───────────────────────────────────────────────────────────
   Demandes du DÉBITEUR et réponses de l'ÉQUIPE, dans l'ordre du fil
   (`_unidet_debtor_thread`, payer/debtor-thread.php).
   Le rendu d'un message est CELUI de l'ancienne carte de messages : mêmes
   classes (`.upayer-msg`, `.upayer-msg-meta`, `.upayer-msg-who`,
   `.upayer-msg-when`, `.upayer-msg-body`), seule la destination change.
   Le bloc n'est visible que s'il contient au moins un message (payer.js) :
   aucun cadre vide, aucun état « 0 message ».
   Charte : or #C9A227, nuit #0A0E17, gris #64748B, ambre #D97706. Aucune
   bordure latérale colorée : l'identité de l'auteur est portée par
   l'alignement, le nom et le fond de la bulle.
   ═══════════════════════════════════════════════════════════ */
body.unidet-payer-body .upayer-delay-history {
    margin: 14px 0 0;
    padding: 16px 16px 14px;
    background: #ffffff;
    border: 1px solid #e6e9ef;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(10, 14, 23, 0.05);
}

body.unidet-payer-body .upayer-delay-history-title {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #0a0e17;
}

body.unidet-payer-body .upayer-delay-history-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 340px;
    overflow-y: auto;
    padding: 2px 2px 4px;
    scrollbar-width: thin;
}

body.unidet-payer-body .upayer-msg {
    max-width: min(86%, 520px);
    padding: 10px 13px 11px;
    border-radius: 12px;
    border: 1px solid #e6e9ef;
    background: #f8fafc;
}

body.unidet-payer-body .upayer-msg.is-debtor {
    align-self: flex-end;
    background: #fbf6e6;
    border-color: #ecdcae;
}

/* RÉPONSE DE L'ÉQUIPE : alignée à gauche, fond bleu-gris, libellé
   « 📩 Réponse Unidet » — visuellement distincte de la demande du débiteur. */
body.unidet-payer-body .upayer-msg.is-team {
    align-self: flex-start;
    background: #f4f7fb;
    border-color: #dbe4ef;
}

body.unidet-payer-body .upayer-msg-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 5px;
}

body.unidet-payer-body .upayer-msg-who {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #0a0e17;
}

body.unidet-payer-body .upayer-msg.is-debtor .upayer-msg-who { color: #8a6d14; }

body.unidet-payer-body .upayer-msg-when {
    font-size: 10.5px;
    font-weight: 600;
    color: #94a3b8;
    white-space: nowrap;
}

body.unidet-payer-body .upayer-msg-body {
    font-size: 13px;
    line-height: 1.6;
    color: #1e293b;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Pièces jointes du fil — miniature cliquable, documents, fichier absent.
   Règle client permanente : border-radius: 0. */
body.unidet-payer-body .upayer-msg-atts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    white-space: normal;
}
body.unidet-payer-body .upayer-msg-att {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 5px 9px;
    border: 1px solid #e2e8f0;
    border-radius: 0;
    background: #ffffff;
    color: #0a0e17;
    font-size: 11.5px;
    text-decoration: none;
}
body.unidet-payer-body .upayer-msg-att:hover { border-color: #c9a227; }
body.unidet-payer-body .upayer-msg-att-thumb {
    width: 38px;
    height: 38px;
    min-width: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 0;
    background: #f8fafc;
}
body.unidet-payer-body .upayer-msg-att-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
}
body.unidet-payer-body .upayer-msg-att-ic {
    width: 24px;
    height: 24px;
    min-width: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    background: #eef2f7;
    color: #334155;
}
body.unidet-payer-body .upayer-msg-att-ext {
    font-size: 8.5px;
    font-weight: 900;
    letter-spacing: 0.02em;
}
body.unidet-payer-body .upayer-msg-att-txt {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
body.unidet-payer-body .upayer-msg-att-txt b {
    font-size: 11.5px;
    font-weight: 800;
    overflow-wrap: anywhere;
}
body.unidet-payer-body .upayer-msg-att-txt small {
    font-size: 9.5px;
    font-weight: 600;
    color: #64748b;
}
body.unidet-payer-body .upayer-msg-att.is-missing {
    border-style: dashed;
    background: #f8fafc;
    color: #64748b;
    cursor: default;
}
body.unidet-payer-body .upayer-msg-att .upayer-msg-att-ic.is-missing {
    background: #fef2f2;
    color: #b42318;
    font-weight: 900;
}
body.unidet-payer-body .upayer-msg-att.is-missing .upayer-msg-att-txt b { color: #0a0e17; }
body.unidet-payer-body .upayer-msg-att.is-missing .upayer-msg-att-txt small {
    color: #b42318;
    font-weight: 800;
}

/* Après envoi : message COURT, hors du panneau qui se referme. */
body.unidet-payer-body .upayer-delay-sent {
    margin: 10px 0 0;
    padding: 9px 12px;
    border: 1px solid #bbf7d0;
    border-radius: 9px;
    background: #f0fdf4;
    color: #166534;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
}

@media (max-width: 560px) {
    body.unidet-payer-body .upayer-delay-history { padding: 14px 12px 12px; }
    body.unidet-payer-body .upayer-msg { max-width: 100%; }
}


/* ═══════════════════════════════════════════════════════════
   CAPTURE 1 — « MONTANT À RÉGLER » : CONTENU CENTRÉ
   ───────────────────────────────────────────────────────────
   Constat : le libellé, le montant et le bouton étaient collés à
   gauche (le bouton était à 194 px du centre de la carte) et un
   grand vide occupait la droite.
   Le contenu est centré horizontalement. Le bouton GARDE sa taille
   naturelle (width:auto de la règle « pay-card-actions ») : il n'est
   pas étiré. À 390 px, la règle mobile ci-dessous le passe en pleine
   largeur — comportement voulu sur petit écran.
   ═══════════════════════════════════════════════════════════ */
body.unidet-payer-body .upayer-pay-card { text-align: center; }

body.unidet-payer-body .upayer-pay-card .upayer-kpi {
    text-align: center;
    align-items: center;
}

body.unidet-payer-body .upayer-pay-card .upayer-pay-card-actions {
    justify-content: center;
    align-items: center;
}

@media (max-width: 640px) {
    body.unidet-payer-body .upayer-pay-card .upayer-pay-card-actions {
        align-items: stretch;
    }
}

/* ═══════════════════════════════════════════════════════════
   CAPTURE 2 — « JE SOUHAITE UN DÉLAI » : VRAI DÉPLIANT
   ───────────────────────────────────────────────────────────
   Le bouton est un contrôle de divulgation (aria-expanded /
   aria-controls). Le panneau n'est JAMAIS retiré du DOM : il est
   masqué par défaut (hauteur 0 + opacité 0 + visibilité différée),
   ce qui le sort du focus clavier et des lecteurs d'écran tant
   qu'il est fermé, puis l'ouvre par une transition douce.
   Aucun `display:none` : la hauteur est animée (max-height mesurée
   par payer.js), l'opacité accompagne, la visibilité est différée
   en fermeture seulement.
   ═══════════════════════════════════════════════════════════ */
body.unidet-payer-body .upayer-delay-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid #e6e9ef;
    border-radius: 10px;
    background: #ffffff;
    color: #0a0e17;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(10, 14, 23, 0.04);
}

body.unidet-payer-body .upayer-delay-btn:hover {
    color: #0a0e17;
    border-color: #c9a227;
    background: #fffdf5;
}

body.unidet-payer-body .upayer-delay-btn[aria-expanded="true"] {
    border-color: #c9a227;
    background: #fffdf5;
}

body.unidet-payer-body .upayer-delay-arrow {
    display: inline-block;
    width: 12px;
    font-size: 15px;
    line-height: 1;
    text-align: center;
    color: #c9a227;
    transform: rotate(0deg);
    transition: transform 0.22s ease;
}

body.unidet-payer-body .upayer-delay-btn[aria-expanded="true"] .upayer-delay-arrow {
    transform: rotate(90deg);
}

body.unidet-payer-body .upayer-delay-panel {
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transition: max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.24s ease,
                visibility 0s linear 0.32s;
}

body.unidet-payer-body .upayer-delay-panel.is-open {
    opacity: 1;
    visibility: visible;
    transition: max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.24s ease 0.04s,
                visibility 0s;
}

body.unidet-payer-body .upayer-delay-panel-inner {
    margin: 12px 0 0;
    padding: 16px 16px 14px;
    background: #ffffff;
    border: 1px solid #e6e9ef;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(10, 14, 23, 0.05);
}

/* ═══ FORMULAIRE DE DÉLAI (motif + date) DANS LE DÉPLIANT ═══
   Le cadre est porté par `.upayer-delay-panel-inner` : le formulaire ne
   redessine donc ni carte, ni bordure. Charte : or #C9A227, nuit #0A0E17,
   gris #64748B. Aucune bordure latérale colorée. */
body.unidet-payer-body .upayer-delay-panel .upayer-delay-form {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

body.unidet-payer-body .upayer-delay-panel .upayer-delay-title {
    margin: 0 0 14px;
    font-size: 14px;
}

body.unidet-payer-body .upayer-delay-panel .upayer-delay-field {
    gap: 6px;
    margin-bottom: 12px;
    font-size: 12.5px;
}

body.unidet-payer-body .upayer-delay-panel .upayer-delay-field label {
    color: #0a0e17;
    font-weight: 800;
}

body.unidet-payer-body .upayer-delay-panel .upayer-delay-field input,
body.unidet-payer-body .upayer-delay-panel .upayer-delay-field textarea {
    border-color: #dbe1ea;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    padding: 10px 12px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.unidet-payer-body .upayer-delay-panel .upayer-delay-field input { height: 42px; padding: 0 12px; }
body.unidet-payer-body .upayer-delay-panel .upayer-delay-field textarea { min-height: 84px; line-height: 1.6; }

body.unidet-payer-body .upayer-delay-panel .upayer-delay-field input:focus,
body.unidet-payer-body .upayer-delay-panel .upayer-delay-field textarea:focus {
    border-color: #c9a227;
    box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.18);
}

body.unidet-payer-body .upayer-delay-panel .upayer-delay-count { font-size: 11.5px; }
body.unidet-payer-body .upayer-delay-panel .upayer-delay-hint { font-size: 11.5px; }

@media (max-width: 560px) {
    body.unidet-payer-body .upayer-delay-panel-inner { padding: 14px 14px 12px; }
}

@media (prefers-reduced-motion: reduce) {
    body.unidet-payer-body .upayer-delay-panel,
    body.unidet-payer-body .upayer-delay-btn,
    body.unidet-payer-body .upayer-delay-arrow { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   VISIONNEUSE INTÉGRÉE DES PIÈCES JOINTES — PORTAIL DÉBITEUR
   Plein écran, au-dessus du portail. Aucun nouvel onglet, aucune
   librairie. Règle client permanente : border-radius: 0.
   ═══════════════════════════════════════════════════════════ */
html.upayer-viewer-open { overflow: hidden; }

#upayer-viewer {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
}
#upayer-viewer[hidden] { display: none; }

#upayer-viewer .upayer-viewer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 12, 20, .92);
}

#upayer-viewer .upayer-viewer-box {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 14px 20px 18px;
    box-sizing: border-box;
    color: #ffffff;
}

#upayer-viewer .upayer-viewer-head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    flex: 0 0 auto;
}
#upayer-viewer .upayer-viewer-title {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 800;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#upayer-viewer .upayer-viewer-count {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, .72);
    font-variant-numeric: tabular-nums;
}

#upayer-viewer .upayer-viewer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 0;
    background: rgba(255, 255, 255, .06);
    color: #ffffff;
    font-family: inherit;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    flex: 0 0 auto;
}
#upayer-viewer .upayer-viewer-btn:hover { border-color: #c9a227; }
#upayer-viewer .upayer-viewer-btn:focus-visible,
#upayer-viewer .upayer-viewer-download:focus-visible {
    outline: 2px solid #c9a227;
    outline-offset: 2px;
}

#upayer-viewer .upayer-viewer-stage {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 0;
    position: relative;
}
#upayer-viewer .upayer-viewer-img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 0;
}
#upayer-viewer .upayer-viewer-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    background: #ffffff;
}

#upayer-viewer .upayer-viewer-fallback {
    max-width: 560px;
    padding: 22px 24px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 0;
    background: rgba(255, 255, 255, .06);
    text-align: center;
}
#upayer-viewer .upayer-viewer-fallback-title {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.5;
    color: #ffffff;
}
#upayer-viewer .upayer-viewer-fallback-hint {
    margin: 0;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.6;
    color: rgba(255, 255, 255, .72);
}

#upayer-viewer .upayer-viewer-foot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding-top: 10px;
}
#upayer-viewer .upayer-viewer-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 14px;
    margin-left: 6px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 0;
    background: rgba(255, 255, 255, .06);
    color: #ffffff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
}
#upayer-viewer .upayer-viewer-download:hover { border-color: #c9a227; }
#upayer-viewer .upayer-viewer-download[hidden] { display: none; }

@media (max-width: 640px) {
    #upayer-viewer .upayer-viewer-box { padding: 10px 12px 14px; }
    #upayer-viewer .upayer-viewer-title { font-size: 12px; }
    #upayer-viewer .upayer-viewer-count { font-size: 11px; }
    #upayer-viewer .upayer-viewer-btn { width: 36px; height: 36px; }
    #upayer-viewer .upayer-viewer-download { height: 36px; padding: 0 11px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   C05 — MOYEN DE PAIEMENT ET ÉCHÉANCIER, ANNONCÉS AVANT LA CONFIRMATION
   ───────────────────────────────────────────────────────────────────────────
   Bloc ADDITIF : aucune règle existante n'est réécrite. Angles DROITS
   (`border-radius: 0`) sur tout ce qui est ajouté ici, comme exigé par la
   charte du portail. Les libellés viennent du serveur (passerelle active) ;
   ce fichier ne fixe que la mise en forme.
   ═══════════════════════════════════════════════════════════════════════════ */

body.unidet-payer-body .upayer-method,
body.unidet-payer-body .upayer-schedule {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0;
    padding: 14px 16px;
    margin: 0 0 14px;
    text-align: left;
}

body.unidet-payer-body .upayer-method-head,
body.unidet-payer-body .upayer-schedule-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

body.unidet-payer-body .upayer-method-title,
body.unidet-payer-body .upayer-schedule-title {
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #64748b;
}

body.unidet-payer-body .upayer-method-badge {
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 0;
    padding: 2px 7px;
}

body.unidet-payer-body .upayer-method-name {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    color: #0a0e17;
}

body.unidet-payer-body .upayer-method-name strong { font-weight: 900; }

body.unidet-payer-body .upayer-method-provider {
    display: inline-block;
    margin-left: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
}

body.unidet-payer-body .upayer-method-mode {
    margin: 0 0 8px;
    padding: 6px 9px;
    border: 1px solid #fde68a;
    border-radius: 0;
    background: #fffbeb;
    font-size: 11.5px;
    font-weight: 700;
    color: #92400e;
}

body.unidet-payer-body .upayer-method-facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 12px;
    margin: 0 0 8px;
    font-size: 12px;
}

body.unidet-payer-body .upayer-method-facts dt {
    margin: 0;
    color: #64748b;
    font-weight: 700;
    white-space: nowrap;
}

body.unidet-payer-body .upayer-method-facts dd {
    margin: 0;
    color: #0a0e17;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

body.unidet-payer-body .upayer-method-next,
body.unidet-payer-body .upayer-method-delay {
    margin: 0 0 4px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.45;
    color: #475569;
}

body.unidet-payer-body .upayer-method-limits {
    margin: 8px 0 0;
    padding-top: 8px;
    border-top: 1px solid #f1f5f9;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.5;
    color: #64748b;
}

body.unidet-payer-body .upayer-method-limits a {
    color: #0a0e17;
    font-weight: 800;
    text-decoration: underline;
}

body.unidet-payer-body .upayer-schedule-summary {
    font-size: 11px;
    font-weight: 800;
    color: #475569;
}

body.unidet-payer-body .upayer-schedule-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 240px;
    overflow-y: auto;
}

body.unidet-payer-body .upayer-schedule-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid #eef2f6;
    border-radius: 0;
    background: #fafbfc;
}

body.unidet-payer-body .upayer-schedule-item.is-paid {
    background: #f0fdf4;
    border-color: #d1fae5;
}

body.unidet-payer-body .upayer-schedule-item.is-due {
    background: #fffdf5;
    border-color: #f4e6b8;
}

body.unidet-payer-body .upayer-schedule-item.is-late {
    background: #fef2f2;
    border-color: #fecaca;
}

body.unidet-payer-body .upayer-schedule-item-num {
    width: 24px;
    height: 24px;
    min-width: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    background: #e2e8f0;
    color: #475569;
    font-size: 11px;
    font-weight: 900;
}

body.unidet-payer-body .upayer-schedule-item.is-paid .upayer-schedule-item-num {
    background: #10b981;
    color: #ffffff;
}

body.unidet-payer-body .upayer-schedule-item.is-due .upayer-schedule-item-num {
    background: #c9a227;
    color: #ffffff;
}

body.unidet-payer-body .upayer-schedule-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

body.unidet-payer-body .upayer-schedule-item-label {
    font-size: 11.5px;
    font-weight: 800;
    color: #0a0e17;
}

body.unidet-payer-body .upayer-schedule-item-meta {
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
}

body.unidet-payer-body .upayer-schedule-item-amount {
    font-size: 12.5px;
    font-weight: 900;
    color: #0a0e17;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

body.unidet-payer-body .upayer-schedule-note {
    margin: 8px 0 0;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.5;
    color: #64748b;
}

@media (max-width: 640px) {
    body.unidet-payer-body .upayer-method,
    body.unidet-payer-body .upayer-schedule { padding: 12px 13px; }

    body.unidet-payer-body .upayer-method-facts { grid-template-columns: 1fr; }

    body.unidet-payer-body .upayer-schedule-item { padding: 7px 8px; }
    body.unidet-payer-body .upayer-schedule-item-amount { font-size: 11.5px; }
}