/* style-ecran.css
 *
 * Extrait de dist/index.html et de dist/app.js, sans retouche : les
 * declarations sont celles d avant, au meme ordre. Blocs 3 a 5 du document (apres tailwind), puis les blocs injectes par app.js, puis cap-finance.
 *
 * Deplacer du CSS dans un fichier ne change pas la cascade SI ET
 * SEULEMENT SI l ordre des sources reste celui d avant. Ces blocs
 * etaient de part et d autre de tailwind-static.css, d ou deux
 * fichiers et non un seul.
 */

/* --- bloc 3 du document --- */

/* v46: Coupe le pull-to-refresh NATIF du navigateur mobile.
   Sans ce declaration, le navigateur avait SON refresh (spinner bleu →
   rechargement complet → page blanche) en plus du SyncIndicator vert de
   l'app : 2 refreshes au meme geste. Le handler custom dans app.js
   capte le meme geste et ne declenche que la sync verte. */
html { overscroll-behavior-y: none; }

#raya-boot{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;
      background:transparent;transition:opacity .2s ease}
    #raya-boot.rb-boot--plein{background:#f8fafc}
    #raya-boot.raya-boot--cache{opacity:0;pointer-events:none}
    /* Ecran precedent : fige, inerte, attenue. Evite l ecran blanc au refresh. */
    #raya-boot .rb-prev{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:.45}
    #raya-boot .rb-prev *{pointer-events:none!important;user-select:none}
    #raya-boot .rb-spinner{position:relative;z-index:1;width:42px;height:42px;border:4px solid #e2e8f0;
      border-top-color:#059669;border-radius:50%;animation:rb-spin .8s linear infinite}
    #raya-boot .rb-error{display:none;position:absolute;text-align:center}
    #raya-boot .rb-error p{margin:0 0 10px;font:500 13px system-ui,-apple-system,sans-serif;color:#64748b}
    #raya-boot .rb-error button{padding:8px 18px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;
      color:#334155;font:600 12.5px system-ui,-apple-system,sans-serif;cursor:pointer}
    #raya-boot .rb-error button:hover{background:#f1f5f9}
    @keyframes rb-spin{to{transform:rotate(360deg)}}
    @media (prefers-reduced-motion:reduce){#raya-boot .rb-spinner{animation-duration:2.4s}}

/* --- bloc 4 du document --- */
/* ============================================================
   NOTIFICATIONS — messages temporaires
   ------------------------------------------------------------
   Feuille autonome, volontairement ecrite sans aucune classe
   Tailwind. La zone de messages doit rester correcte meme si la
   feuille principale echoue a se charger : c est exactement ce
   qui est arrive quand le bloc de style de la page de connexion
   n etait pas referme.
   ============================================================ */
#toastContainer {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(380px, calc(100vw - 32px));
    pointer-events: none;
}
#toastContainer .toast { pointer-events: auto; }

.toast {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 12px 15px 14px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid var(--nt-bord, #e2e8f0);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 10px 28px -10px rgba(15, 23, 42, .22);
    overflow: hidden;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #0f172a;
    opacity: 0;
    transform: translateX(24px);
    transition: opacity .22s ease, transform .24s cubic-bezier(.22, 1, .36, 1);
}
.toast.est-visible { opacity: 1; transform: none; }
.toast.est-part {
    opacity: 0;
    transform: translateX(24px) scale(.97);
    transition: opacity .18s ease, transform .18s ease;
}

/* Liseré de couleur a gauche : le type se lit sans lire le texte. */
.toast::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--nt-teinte);
}

/* Pastille d icone */
.toast__puce {
    flex: 0 0 auto;
    width: 26px; height: 26px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: var(--nt-fond);
    color: var(--nt-teinte);
}
.toast__puce svg { width: 16px; height: 16px; stroke-width: 2.25; }

.toast__corps { flex: 1 1 auto; min-width: 0; padding-top: 1px; }
.toast__titre {
    margin: 0 0 2px;
    font-size: 13.5px;
    font-weight: 650;
    line-height: 1.3;
    letter-spacing: -.01em;
}
.toast__texte {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: #475569;
    overflow-wrap: anywhere;
}
.toast__texte:empty { display: none; }

/* Bouton de fermeture */
.toast__fermer {
    flex: 0 0 auto;
    width: 26px; height: 26px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background .15s ease, color .15s ease;
}
.toast__fermer:hover { background: #f1f5f9; color: #334155; }
.toast__fermer:focus-visible { outline: 2px solid var(--nt-teinte); outline-offset: 1px; }
.toast__fermer svg { width: 15px; height: 15px; }

/* Barre de temps restant : elle se vide, elle ne bouge pas. */
.toast__jauge {
    position: absolute;
    left: 0; bottom: 0;
    height: 2px; width: 100%;
    background: var(--nt-teinte);
    opacity: .5;
    transform-origin: left center;
    transition: opacity .15s ease;
}
.toast:hover .toast__jauge, .toast:focus-within .toast__jauge { opacity: .85; }

/* Un message identique qui revient ne s empile pas : il se_rafflechi. */
.toast.est-repete { animation: nt-flechissement .5s ease; }
@keyframes nt-flechissement {
    0%   { transform: none; }
    35%  { transform: translateX(-4px); }
    70%  { transform: translateX(3px); }
    100% { transform: none; }
}

/* Teintes par type */
.toast--success { --nt-teinte: #059669; --nt-fond: #ecfdf5; --nt-bord: #a7f3d0; }
.toast--error   { --nt-teinte: #dc2626; --nt-fond: #fef2f2; --nt-bord: #fecaca; }
.toast--warning { --nt-teinte: #d97706; --nt-fond: #fffbeb; --nt-bord: #fde68a; }
.toast--info    { --nt-teinte: #2563eb; --nt-fond: #eff6ff; --nt-bord: #bfdbfe; }

/* Sur telephone : pleine largeur, marges reduites. */
@media (max-width: 639px) {
    #toastContainer { top: 12px; left: 12px; right: 12px; width: auto; }
    .toast { padding: 12px 11px 14px 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .toast, .toast__jauge, .toast__fermer { transition: none !important; }
    .toast.est-repete { animation: none; }
}

/* --- bloc 5 du document --- */
/* ============================================================
   SAISIE D'UNE LIGNE
   ------------------------------------------------------------
   Remplace les prompt() du navigateur, qui ouvraient une boite
   grise du systeme, sans lien visuel avec l application.
   Meme langage que les messages : surface blanche, liseré de
   couleur, action principale verte.
   ============================================================ */
.ui-saisie-fond {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(3px);
    animation: ui-saisie-apparition .16s ease;
}
@keyframes ui-saisie-apparition {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.ui-saisie {
    position: relative;
    width: min(460px, 100%);
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 24px 60px -18px rgba(15, 23, 42, .38);
    overflow: hidden;
    animation: ui-saisie-montee .2s cubic-bezier(.22, 1, .36, 1);
}
@keyframes ui-saisie-montee {
    from { opacity: 0; transform: translateY(10px) scale(.985); }
    to   { opacity: 1; transform: none; }
}
.ui-saisie::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--saisie-teinte, #059669);
}

.ui-saisie__tete { padding: 18px 20px 0; }
.ui-saisie__titre {
    margin: 0;
    font: 650 15px/1.3 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    letter-spacing: -.01em;
    color: #0f172a;
}
.ui-saisie__note {
    margin: 5px 0 0;
    font: 400 13px/1.45 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #64748b;
}

.ui-saisie__corps { padding: 15px 20px 0; }
.ui-saisie__label {
    display: block;
    margin-bottom: 6px;
    font: 600 12.5px/1.3 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #334155;
}
.ui-saisie__label .est-obligatoire { color: #dc2626; }

.ui-saisie__champ {
    display: block;
    width: 100%;
    min-height: 86px;
    resize: vertical;
    padding: 10px 12px;
    font: 400 13.5px/1.5 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #0f172a;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.ui-saisie__champ::placeholder { color: #94a3b8; }
/* Champ sur une seule ligne : hauteur normale, pas une zone multiligne. */
.ui-saisie__champ--ligne { min-height: 44px; }

.ui-saisie__champ:focus {
    background: #ffffff;
    border-color: var(--saisie-teinte, #059669);
    box-shadow: 0 0 0 3px rgba(5, 150, 105, .16);
}
.ui-saisie--danger .ui-saisie__champ:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, .15); }
.ui-saisie__champ.est-erreur { border-color: #dc2626; }
.ui-saisie__champ.est-erreur:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, .15); }

.ui-saisie__aide {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 18px;
    margin-top: 7px;
    font: 400 12px/1.4 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #94a3b8;
}
.ui-saisie__aide.est-erreur { color: #dc2626; }

.ui-saisie__pied {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 20px 18px;
}
.ui-saisie__bouton {
    padding: 9px 16px;
    border: 0;
    border-radius: 10px;
    font: 600 13px/1 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    cursor: pointer;
    transition: background .15s ease;
}
.ui-saisie__bouton--secondaire { background: #f1f5f9; color: #334155; }
.ui-saisie__bouton--secondaire:hover { background: #e2e8f0; }
.ui-saisie__bouton--principal { background: #059669; color: #ffffff; }
.ui-saisie__bouton--principal:hover { background: #047857; }
.ui-saisie--danger { --saisie-teinte: #dc2626; }
.ui-saisie--danger .ui-saisie__bouton--principal { background: #dc2626; }
.ui-saisie--danger .ui-saisie__bouton--principal:hover { background: #b91c1c; }
.ui-saisie__bouton:focus-visible { outline: 2px solid #0f172a; outline-offset: 2px; }

/* ---------- Confirmation : meme carte que la saisie ---------- */
.ui-saisie--confirmation .ui-saisie__tete { padding-bottom: 0; }
.ui-saisie__message {
    margin: 0;
    padding: 15px 20px 0;
    font: 400 13.5px/1.55 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #334155;
    overflow-wrap: anywhere;
}
.ui-saisie__details {
    margin: 12px 20px 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    font: 400 12.5px/1.5 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #475569;
    overflow-wrap: anywhere;
}
.ui-saisie--danger .ui-saisie__details {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

/* Sur telephone : la boite remonte du bas, comme une feuille. */
@media (max-width: 639px) {
    .ui-saisie-fond { align-items: flex-end; padding: 0; }
    .ui-saisie { width: 100%; border-radius: 16px 16px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    .ui-saisie-fond, .ui-saisie { animation: none; }
}

/* --- app.js, bloc 1 sur 14 --- */
.lcc-num{font-variant-numeric:tabular-nums;letter-spacing:-0.01em}

/* --- app.js, bloc 2 sur 14 --- */
.newprod-cq { container-type: inline-size; }
                    @container (min-width: 480px) {
                        .cq-form-2col { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
                    }

/* --- app.js, bloc 3 sur 14 --- */
.lcc-num{font-variant-numeric:tabular-nums;letter-spacing:-0.01em}

/* --- app.js, bloc 4 sur 14 --- */
.newprod-cq { container-type: inline-size; }
                    @container (min-width: 480px) {
                        .cq-form-2col { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
                    }

/* --- app.js, bloc 5 sur 14 --- */
.lcc-num{font-variant-numeric:tabular-nums;letter-spacing:-0.01em}

/* --- app.js, bloc 6 sur 14 --- */
.transfer-cq { container-type: inline-size; }
                    @container (min-width: 540px) {
                        .cq-2col { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
                    }

/* --- app.js, bloc 7 sur 14 --- */
.reappro-cq { container-type: inline-size; }
                    @container (min-width: 480px) {
                        .cq-2col { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
                    }
                    @container (min-width: 640px) {
                        .cq-3col { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
                    }
                    @container (min-width: 700px) {
                        .cq-4col { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
                    }

/* --- app.js, bloc 8 sur 14 --- */
.tf-cq { container-type: inline-size; }
                    @container (min-width: 540px) { .cq-2col-tf { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* --- app.js, bloc 9 sur 14 --- */
.transfer-cq { container-type: inline-size; }
                    @container (min-width: 540px) {
                        .cq-2col { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
                    }

/* --- app.js, bloc 10 sur 14 --- */
.dash-cq { container-type: inline-size; }
                        @container (min-width: 540px) { .cq-4col { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }

/* --- app.js, bloc 11 sur 14 --- */
.hist-cq { container-type: inline-size; }
                    @container (min-width: 600px) { .cq-5col { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } }
                    @container (min-width: 540px) { .cq-2col-lg { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* --- app.js, bloc 12 sur 14 --- */
.analysis-cq { container-type: inline-size; }
                    @container (min-width: 540px) { .cq-4col-a { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }

/* --- app.js, bloc 13 sur 14 --- */
@keyframes spin{to{transform:rotate(360deg)}}

/* --- app.js, bloc 14 sur 14 --- */
@keyframes oauthSpin{to{transform:rotate(360deg)}}

/* --- app.js, cap-finance-styles --- */
@keyframes capPulse{0%{r:4.5;opacity:1}50%{r:9;opacity:.45}100%{r:4.5;opacity:1}}.cap-pulse{animation:capPulse 1.1s ease-out 3}@keyframes capFlash{0%{box-shadow:0 0 0 3px rgba(16,185,129,.55)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}.cap-flash{animation:capFlash 1.2s ease-out 1}@keyframes capLive{0%,100%{opacity:1}50%{opacity:.35}}.cap-live-dot{animation:capLive 1.6s ease-in-out infinite}