/* ==========================================================================
   JOSBFIN - Responsive (téléphones et tablettes)
   Chargé en dernier sur toutes les mises en page : site public, espace
   client, administration et pages de connexion. Sur mobile, tout le contenu
   reste visible : les colonnes s'empilent, le menu latéral s'ouvre avec le
   bouton ☰ et les tableaux deviennent des fiches lisibles.
   ========================================================================== */

/* ---------- Bases valables partout ---------- */
body { max-width: 100%; overflow-x: clip; }
img, video, iframe, canvas, svg { max-width: 100%; }
input, select, textarea, button { max-width: 100%; }
.content, .app__main, .card, .admin-card { min-width: 0; }
.card, .admin-card, .stat-card, .stat { overflow-wrap: anywhere; }

/* Sélecteur de langue (toutes les mises en page) */
.lang-select {
    display: inline-flex; align-items: center; gap: 6px; color: var(--navy-800);
    border: 1px solid var(--line); border-radius: 8px; padding: 0 4px 0 9px; background: var(--surface);
}
.lang-select select {
    border: 0; background: transparent; font-family: var(--font-body); font-size: .85rem; font-weight: 600;
    color: var(--navy-800); padding: 7px 4px; cursor: pointer; max-width: 150px;
}
.lang-select select:focus { outline: none; }
.lang-select:focus-within { border-color: var(--teal-500); box-shadow: 0 0 0 3px rgba(15,181,166,.15); }
.auth__topbar { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-bottom: 20px; }
.auth__mobile-brand { display: none; margin-right: auto; }
.admin-login__lang { display: flex; justify-content: flex-end; margin: -16px -12px 14px 0; }

/* Le fond sombre du menu mobile n'existe que sur petit écran */
.app__backdrop { display: none; }

/* ======================================================================
   Tablettes et petits portables (≤ 1024 px)
   ====================================================================== */
@media (max-width: 1024px) {
    .container { padding-left: 20px; padding-right: 20px; }

    .hero__inner { gap: 40px; }
    .cards-3, .grid--3, .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .grid--4, .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .stats__grid { grid-template-columns: repeat(2, 1fr); }
    .steps { grid-template-columns: repeat(2, 1fr); }
    .steps::before { display: none; }
    .footer__grid { grid-template-columns: 1.3fr 1fr 1fr; }
    .footer__grid .footer__col:last-child { grid-column: 1 / -1; }

    /* --- Espace client / admin : le menu latéral devient un tiroir --- */
    .app { grid-template-columns: 1fr; }
    .sidebar {
        position: fixed; top: 0; left: 0; bottom: 0;
        width: 280px; max-width: 86vw; height: 100vh; height: 100dvh;
        transform: translateX(-100%);
        transition: transform .25s ease, box-shadow .25s ease;
        z-index: 1200;
        -webkit-overflow-scrolling: touch;
    }
    .sidebar.is-open { transform: translateX(0); box-shadow: var(--shadow-lg); }
    .app__backdrop {
        display: block; position: fixed; inset: 0; background: rgba(7, 20, 38, .5);
        opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s; z-index: 1100;
    }
    .app__backdrop.is-open { opacity: 1; visibility: visible; }
    body.sidebar-open { overflow: hidden; }

    .topbar__burger { display: inline-flex !important; padding: 10px 8px; margin-left: -8px; flex: none; }
    .topbar { padding: 12px 20px; gap: 12px; }
    .topbar__title { font-size: 1.1rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .topbar__right { gap: 12px; }
    .content { padding: 22px 20px; }

    .stats, .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .admin-grid--2 { grid-template-columns: 1fr; }
}

/* ======================================================================
   Tablettes en portrait (≤ 860 px)
   ====================================================================== */
@media (max-width: 860px) {
    .grid-2, .grid-3, .grid-4, .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
    .cards-3, .trust-grid, .testi-grid, .partners-grid { grid-template-columns: 1fr; }
    .stats__grid { grid-template-columns: repeat(2, 1fr); }
    .hero__inner { grid-template-columns: 1fr; text-align: center; }
    .hero__text { max-width: none; }
    .hero__note { justify-content: center; }
    .hero__visual { max-width: 480px; margin-inline: auto; width: 100%; padding: 0; }
    .hero__cta, .hero__trust { justify-content: center; }
    .section__head { padding-inline: 8px; }
    .sim { grid-template-columns: 1fr; }
    .field-row, .form-row { grid-template-columns: 1fr; }
    .footer__grid { grid-template-columns: 1fr 1fr; }
    .footer__brand { grid-column: 1 / -1; }
    .cta-band__inner { flex-direction: column; text-align: center; }
    .cta-band__inner h2, .cta-band__inner p { text-align: center; margin-inline: auto; }

    /* Les petites bulles flottantes du visuel d'accueil restent visibles, sous la carte */
    .hero__floaty {
        display: inline-flex !important; position: static; animation: none;
        margin: 14px 6px 0; box-shadow: var(--shadow-sm);
    }

    /* Pages de connexion : le formulaire d'abord, la présentation ensuite */
    .auth { grid-template-columns: 1fr; min-height: 0; }
    .auth__main { order: 1; padding: 24px 16px 32px; min-height: 100vh; min-height: 100dvh; align-items: flex-start; }
    .auth__aside { order: 2; display: flex !important; padding: 36px 24px; gap: 24px; }
    .auth__aside h2 { margin-top: 0 !important; font-size: 1.4rem; }
    .auth__aside .navbar__brand { display: none; }
    .auth__mobile-brand { display: inline-flex; }

    /* Menu du site public : panneau déroulant sous la barre */
    .navbar__links {
        position: absolute; top: 100%; left: 0; right: 0;
        display: flex; flex-direction: column; align-items: stretch; gap: 4px;
        background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-md);
        padding: 12px 20px 20px; max-height: 0; overflow: hidden; opacity: 0; visibility: hidden;
        transition: max-height .28s ease, opacity .2s ease;
    }
    .navbar__links.is-open { max-height: calc(100vh - 72px); opacity: 1; visibility: visible; overflow-y: auto; }
    .navbar__links > a:not(.btn) { padding: 12px 10px; border-radius: 8px; }
    .navbar__links .navbar__lang { order: 5; margin: 6px 0; }
    .navbar__links .navbar__lang select { width: 100%; padding: 10px; }
    .navbar__links .btn { margin-top: 4px; }
    .navbar__burger { display: inline-flex; }
    .navbar__inner { position: relative; }

    /* Messagerie : liste puis conversation */
    .chat { grid-template-columns: 1fr; height: auto; }
    .chat__list { border-right: 0; border-bottom: 1px solid var(--line); max-height: 240px; }
    .chat__body { min-height: 60vh; }
    .chat-card { height: 75vh; height: 75dvh; }
    .bubble, .chat-bubble { max-width: 88%; }

    .kyc-grid, .dl, .detail-list { grid-template-columns: 1fr; }
    .print-doc { padding: 24px 18px; }
    .print-head { flex-direction: column; align-items: flex-start; gap: 8px; }
}

@media (min-width: 861px) {
    .navbar__links { display: flex !important; position: static; max-height: none; opacity: 1; visibility: visible; box-shadow: none; padding: 0; }
}

/* ======================================================================
   Téléphones (≤ 640 px)
   ====================================================================== */
@media (max-width: 640px) {
    body { font-size: 15px; }
    .container { padding-left: 16px; padding-right: 16px; }
    .section { padding: 44px 0; }
    .section__head { margin-bottom: 30px; }

    .stats__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .stats__grid > div { padding: 16px 8px; }
    .steps { grid-template-columns: 1fr; flex-direction: column; }
    .footer__grid { grid-template-columns: 1fr; gap: 28px; }
    .footer__bottom { flex-direction: column; text-align: center; }
    .card, .admin-card { padding: 18px; }
    .card--pad-lg { padding: 22px; }
    .hero__trust { gap: 18px; }
    .btn--lg, .hero__cta .btn { width: 100%; }
    .btn { white-space: normal; text-align: center; line-height: 1.25; }
    .hero__mockup { padding: 22px; }
    .quote-card__total strong { font-size: 1.5rem; }
    .cta-band { padding: 28px 20px; }

    /* Espace client / admin */
    .topbar { padding: 10px 14px; gap: 8px; }
    .topbar__title { font-size: 1rem; }
    .topbar__name { display: none; }
    .topbar__right { gap: 8px; }
    .topbar .btn--ghost { padding: 7px 10px; }
    .lang-select { padding-left: 7px; }
    .lang-select select { max-width: 64px; font-size: .8rem; padding: 6px 2px; }
    .content { padding: 16px 14px; }
    .content__head, .page-title, .admin-page-head, .card__head, .admin-card__head, .row--between {
        flex-direction: column; align-items: stretch;
    }
    .content__head .btn, .page-title .btn, .admin-page-head > .btn { width: 100%; }
    .stats, .stat-grid { grid-template-columns: 1fr; gap: 12px; }
    .stat__value, .stat-card__value { font-size: 1.55rem; }
    .balance-card { padding: 22px; }
    .balance-card__amount { font-size: 2rem; }
    .balance-card__actions .btn, .balance-card__actions a { flex: 1 1 100%; }
    .callout { flex-direction: column; }
    .callout .btn { width: 100%; }
    .offer-item, .offer-item__end, .doc-list__item, .kyc-upload, .card-actions, .decision-form__actions, .inline-actions, .inline-credit {
        flex-direction: column; align-items: stretch;
    }
    .offer-item__end .btn, .card-actions .btn, .decision-form__actions .btn { width: 100%; }
    .admin-search { flex-direction: column; }
    .admin-search .input { min-width: 0; width: 100%; }
    .admin-filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
    .chip { white-space: nowrap; }
    .row-menu__panel { position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; max-height: 80vh; overflow-y: auto; }
    .notif__panel { position: fixed; left: 10px; right: 10px; top: 64px; width: auto; max-width: none; }
    .steps__item { min-width: 0; flex: 1 1 100%; }
    .chat-form, .chat-composer, .chat__compose { padding: 10px; }
    .estimate { padding: 2px 14px; }

    /* Pages de connexion */
    .auth-card { padding: 24px 18px; border-radius: var(--radius); }
    .auth-card__head h1 { font-size: 1.45rem; }
    .otp-input { letter-spacing: .3em; font-size: 1.35rem; }
    .admin-login { padding: 28px 20px; margin: 14px; }
    .admin-login__lang { margin: -8px -6px 12px 0; }

    /* Messages flash : pleine largeur */
    .flash { left: 10px; right: 10px; transform: none; max-width: none; top: 10px; }
    @keyframes flashIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }

    /* --- Tableaux : chaque ligne devient une fiche « intitulé : valeur » --- */
    .table-wrap { overflow: visible; border: 0; background: transparent; border-radius: 0; }
    table.is-stackable { min-width: 0 !important; width: 100%; border: 0; }
    table.is-stackable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    table.is-stackable, table.is-stackable tbody, table.is-stackable tr, table.is-stackable td { display: block; width: 100%; }
    table.is-stackable tr {
        background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
        box-shadow: var(--shadow-sm); padding: 6px 14px; margin-bottom: 12px;
    }
    table.is-stackable tbody tr:hover { background: var(--surface); }
    table.is-stackable td {
        display: flex; justify-content: space-between; align-items: center; gap: 14px;
        padding: 10px 0 !important; border-bottom: 1px dashed var(--line) !important;
        white-space: normal !important; text-align: right; overflow-wrap: anywhere;
    }
    table.is-stackable td:last-child { border-bottom: 0 !important; }
    table.is-stackable td::before {
        content: attr(data-label); flex: none; max-width: 48%; text-align: left;
        font-family: var(--font-head); font-size: .74rem; font-weight: 700; letter-spacing: .03em;
        text-transform: uppercase; color: var(--muted);
    }
    table.is-stackable td:not([data-label])::before, table.is-stackable td[data-label=""]::before { display: none; }
    table.is-stackable td[colspan] { justify-content: center; text-align: center; }
    table.is-stackable td .data-table__actions, table.is-stackable td form { justify-content: flex-end; flex-wrap: wrap; }
    table.is-stackable td .btn { margin: 0; }

    /* Tableaux sans en-tête : défilement horizontal */
    table:not(.is-stackable):not(.print-table) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .print-table th, .print-table td { display: block; width: 100%; border-bottom: 0; padding: 4px 0; }
    .print-table tr { display: block; border-bottom: 1px solid var(--line); padding: 8px 0; }
}

/* ======================================================================
   Très petits écrans (≤ 380 px)
   ====================================================================== */
@media (max-width: 380px) {
    .stats__grid { grid-template-columns: 1fr; }
    h1 { font-size: 1.75rem; }
    .lang-select svg { display: none; }
    table.is-stackable td { flex-direction: column; align-items: flex-start; text-align: left; gap: 2px; }
    table.is-stackable td::before { max-width: none; }
}

/* ---------- Ajustements home v2 (marquee, vagues, mockup) ---------- */
@media (max-width: 860px) {
    .marquee__track { gap: 12px; }
    .partner-logo { padding: 11px 18px; font-size: .9rem; }
    .wave-divider { height: 30px; }
}
@media (max-width: 560px) {
    .icon-badge { width: 42px; height: 42px; border-radius: 12px; }
    .icon-badge svg { width: 20px; height: 20px; }
    .wave-divider { height: 20px; }
    .hero__chart svg { height: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar, .app__backdrop, .navbar__links { transition: none !important; }
}