/* =======================================================
   style.css — QUINTET PRIVATE BANK / page de connexion (index.php)
   ======================================================= */

:root {
    --bleu-principal: #0b3d91;
    --bleu-fonce: #072a66;
    --accent: #2ccdc3;
    --gris-texte: #4a4a4a;
    --gris-clair: #f4f6fa;
    /* Rouge d'erreur harmonisé avec la nouvelle palette (voir plus bas) —
       couleur sémantique, donc partagée entre espace client et admin. */
    --rouge-erreur: #DC2626;

    /* Couleur du bandeau supérieur (menu) : même bleu que le reste du
       site, pour une identité visuelle cohérente sur toutes les pages. */
    --entete-bg: var(--bleu-fonce);
    --entete-bg-clair: #123f8f;
    --entete-texte: #eef2fb;

    /* Variante du bandeau supérieur pour l'espace admin — un graphite
       distinct du bleu client, pour qu'on ne confonde jamais les deux
       espaces au premier coup d'œil (voir includes/header.php). */
    --entete-admin-bg: #1c2534;
    --entete-admin-bg-clair: #2b3548;
    --accent-admin: #d99a1b;
}

/* ============================================================
   Thème "espace client" — palette violette.
   Surcharge uniquement les variables ci-dessus, dans le contexte
   <body class="espace-client"> (posée par includes/header.php). Comme
   tout le CSS existant lit déjà ces variables (jamais de couleur en
   dur), ce seul bloc suffit à retexturer tout l'espace client sans
   toucher à l'espace admin, qui garde le thème graphite/or d'origine.
   ============================================================ */
body.espace-client {
    --bleu-principal: #5B18E8;   /* violet principal */
    --bleu-fonce: #4810C7;       /* violet foncé (hover, dégradés) */
    --accent: #7C3AED;           /* violet accent */
    --gris-texte: #171321;       /* texte principal, noir bleuté doux */
    --gris-clair: #F1EFF5;       /* fond secondaire (cartes légères) */

    /* Bandeau supérieur client désormais blanc, texte foncé — le
       violet devient une couleur d'action, pas une couleur de fond. */
    --entete-bg: #ffffff;
    --entete-bg-clair: #F3EEFF;
    --entete-texte: #171321;

    /* Variables supplémentaires propres à cette palette (teinte très
       pâle, violet doux pour les états légers, bouton désactivé) —
       utilisées avec une valeur de repli ailleurs dans le CSS/HTML,
       donc absentes ici = comportement d'origine (ex: espace admin). */
    --violet-pale: #F3EEFF;
    --violet-doux: #A78BFA;
    --bouton-desactive: #C9BFF0;

    background: #FAF9FC;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
}

img {
    max-width: 100%;
}

body {
    font-family: 'Segoe UI', Arial, sans-serif;
    background: linear-gradient(135deg, var(--gris-clair) 0%, #e6ebf5 100%);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: var(--gris-texte);
}

/* ---------- En-tête / menu ---------- */

header {
    background-color: var(--entete-bg);
    padding: 18px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    border-bottom: 3px solid transparent;
}

/* Espace admin : bandeau graphite + liseré doré, pour qu'on ne
   confonde jamais visuellement les deux espaces (voir includes/header.php). */
header.header-admin {
    background-color: var(--entete-admin-bg);
    border-bottom-color: var(--accent-admin);
}

/* Header blanc côté client : une ombre légère suffit à le détacher du
   contenu, pas besoin de l'ombre plus marquée héritée de l'ancien
   bandeau bleu/graphite. */
body.espace-client header {
    box-shadow: 0 1px 3px rgba(23, 19, 33, 0.06);
    border-bottom-color: #F1EFF5;
}

.badge-espace-admin {
    background-color: var(--accent-admin);
    color: #2b2205;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 3px 8px;
    border-radius: 4px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--entete-texte);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 0.5px;
    text-decoration: none;
}

.logo-image {
    height: 42px;
    width: auto;
}

.logo-image-carte {
    height: 48px;
    width: auto;
    margin: 0 auto 12px;
    display: block;
}

/* Bloc "connecté" (bonjour + déconnexion), affiché uniquement quand
   $_SESSION['client_connecte'] est vrai — voir includes/header.php */
.nav-connecte {
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--entete-texte);
    font-size: 13px;
}

.nav-connecte .bonjour {
    font-weight: 600;
    white-space: nowrap;
}

.nav-connecte .lien-deconnexion {
    color: var(--entete-texte);
    background-color: var(--entete-bg-clair);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.nav-connecte .lien-deconnexion:hover {
    background-color: var(--bleu-principal);
}

/* Emplacement du sélecteur de langue GTranslate (dropdown) */
.gtranslate_wrapper {
    min-width: 130px;
}

/* Habillage du dropdown GTranslate pour matcher le header crème foncé.
   GTranslate génère un <select> ou un <div> selon le style choisi ;
   ces règles ciblent son conteneur générique. */
.gtranslate_wrapper select,
.gt_selector {
    background-color: var(--entete-bg-clair) !important;
    color: var(--entete-texte) !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer;
}

/* ---------- Contenu principal ---------- */

main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

/* ---------- Zone connexion/inscription : illustration + carte ---------- */

.zone-auth {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    width: 100%;
    max-width: 920px;
}

.panneau-illustration {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    min-width: 0;
}

.illustration-image {
    width: 100%;
    max-width: 380px;
    border-radius: 18px;
    margin-bottom: 24px;
    box-shadow: 0 20px 45px rgba(11, 61, 145, 0.18);
}

.illustration-svg-secours {
    width: 100%;
    max-width: 280px;
    height: auto;
    margin-bottom: 24px;
}

.accroche-panneau {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--bleu-fonce);
    max-width: 380px;
    margin-bottom: 10px;
}

.sous-accroche-panneau {
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--gris-texte);
    max-width: 360px;
}

.carte-connexion {
    background: #ffffff;
    /* flex (et non width:100%) : cette carte partage désormais un
       conteneur flex (.zone-auth) avec .panneau-illustration. Avec
       width:100%, elle chercherait à prendre toute la largeur du
       conteneur ET à s'étirer via flex — comportement fragile qu'on a
       déjà eu comme bug ailleurs. flex-basis:420px + flex-shrink:1 lui
       donne une taille cible claire, qui peut rétrécir sur un écran
       étroit sans pour autant grandir au détriment du panneau. */
    flex: 0 1 420px;
    border-radius: 14px;
    box-shadow: 0 10px 35px rgba(11, 61, 145, 0.15);
    overflow: hidden;
}

/* Plus de champs qu'à la connexion : on laisse un peu plus de largeur. */
.carte-inscription {
    flex-basis: 480px;
}

/* ---------- Étapes du formulaire d'inscription ---------- */

.etapes-progression {
    display: flex;
    justify-content: space-between;
    padding: 22px 30px 0;
    gap: 6px;
}

.etape-progression {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
    font-size: 11px;
    font-weight: 600;
    color: #a3adbd;
    text-align: center;
}

.etape-numero {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: var(--gris-clair);
    color: #a3adbd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    font-weight: 700;
}

.etape-progression.actif {
    color: var(--bleu-principal);
}

.etape-progression.actif .etape-numero {
    background-color: var(--bleu-principal);
    color: #ffffff;
}

.actions-etape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 6px;
}

.actions-etape .bouton-etape-final,
.actions-etape .bouton-etape-suivant {
    margin-left: auto;
}

.bouton-etape {
    background: none;
    border: none;
    padding: 12px 4px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.bouton-etape-suivant {
    background-color: var(--bleu-principal);
    color: #ffffff;
    padding: 12px 22px;
    border-radius: 8px;
    transition: background-color 0.15s ease;
}

.bouton-etape-suivant:hover {
    background-color: var(--bleu-fonce);
}

.bouton-etape-precedent {
    color: var(--gris-texte);
}

.bouton-etape-precedent:hover {
    text-decoration: underline;
}

.bouton-etape-final {
    width: auto;
    padding: 12px 26px;
}

.carte-header {
    background: linear-gradient(120deg, var(--bleu-principal), var(--bleu-fonce));
    padding: 28px 30px 24px;
    text-align: center;
}

/* Côté client uniquement : bandeau blanc plutôt que le dégradé — sur
   un fond de couleur, un logo de la même teinte (ex: violet sur
   violet) devient quasiment invisible. Le blanc garantit un bon
   contraste quelle que soit la couleur du logo déposé par l'utilisateur.
   (L'admin garde son propre bandeau graphite via .carte-header-admin.) */
body.espace-client .carte-header {
    background: #ffffff;
    border-bottom: 1px solid #F1EFF5;
}

body.espace-client .carte-header h1 {
    color: var(--gris-texte);
}

body.espace-client .carte-header .accroche {
    color: #7c8698;
}

.illustration-bancaire {
    width: 110px;
    height: auto;
    display: block;
    margin: 0 auto 10px;
}

.carte-header h1 {
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 6px;
}

.accroche {
    color: #dce6f7;
    font-size: 13.5px;
    line-height: 1.5;
    max-width: 320px;
    margin: 0 auto;
}

form {
    padding: 28px 30px 30px;
}

.erreur {
    background-color: #fdecea;
    border-left: 4px solid var(--rouge-erreur);
    color: var(--rouge-erreur);
    padding: 10px 14px;
    font-size: 13px;
    border-radius: 4px;
    margin-bottom: 18px;
}

.succes {
    background-color: #e7f6ee;
    border-left: 4px solid #16A34A;
    color: #16A34A;
    padding: 10px 14px;
    font-size: 13px;
    border-radius: 4px;
    margin-bottom: 18px;
}

.champ {
    margin-bottom: 18px;
}

.ligne-champs {
    display: flex;
    gap: 14px;
}

.ligne-champs .champ {
    flex: 1;
    min-width: 0;
}

.champ-checkbox .se-souvenir {
    align-items: flex-start;
    line-height: 1.4;
}

.champ-checkbox input[type="checkbox"] {
    margin-top: 3px;
}

.champ-checkbox a {
    color: var(--bleu-principal);
    font-weight: 600;
}

.champ label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--bleu-fonce);
    margin-bottom: 6px;
}

.champ input[type="text"],
.champ input[type="password"],
.champ input[type="email"],
.champ input[type="tel"],
.champ input[type="date"],
.champ select {
    width: 100%;
    padding: 12px 13px;
    border: 1.5px solid #d5dce8;
    border-radius: 8px;
    font-size: 16px;
    transition: border-color 0.15s ease;
    background-color: #fbfcfe;
    font-family: inherit;
    color: var(--gris-texte);
}

.champ select {
    cursor: pointer;
}

.champ input[type="file"] {
    width: 100%;
    padding: 10px;
    border: 1.5px dashed #d5dce8;
    border-radius: 8px;
    font-size: 13.5px;
    background-color: #fbfcfe;
}

.aide-champ {
    font-size: 12px;
    color: #7c8698;
    margin-top: 6px;
}

.champ input:focus {
    outline: none;
    border-color: var(--bleu-principal);
    background-color: #ffffff;
}

.ligne-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 22px;
    font-size: 12.5px;
}

.se-souvenir {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--gris-texte);
}

.ligne-options a {
    color: var(--bleu-principal);
    text-decoration: none;
    font-weight: 600;
}

.ligne-options a:hover {
    text-decoration: underline;
}

button.connexion {
    width: 100%;
    background-color: var(--bleu-principal);
    color: #ffffff;
    border: none;
    padding: 13px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

button.connexion:hover {
    background-color: var(--bleu-fonce);
}

.securite {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11.5px;
    color: #7c8698;
    margin-top: 16px;
}

.cadenas {
    width: 12px;
    height: 12px;
    fill: #7c8698;
}

.separateur {
    border-top: 1px solid #ecf0f6;
    margin: 4px 30px;
}

.pied-carte {
    padding: 20px 30px 26px;
    text-align: center;
    font-size: 13px;
    color: var(--gris-texte);
}

.pied-carte a {
    color: var(--bleu-principal);
    font-weight: 700;
    text-decoration: none;
}

.pied-carte a:hover {
    text-decoration: underline;
}

/* ---------- Disposition générale du tableau de bord (dashboard/) ---------- */
/* .dashboard-layout est ouvert par includes/menu_dashboard.php (qui y
   place la sidebar), et refermé par chaque page de dashboard/ juste
   après son </main>. */

.dashboard-layout {
    /* "width: 100%" est essentiel ici : body est en display:flex avec
       flex-direction:column (pour le pied de page collé en bas des
       pages de connexion), et .dashboard-layout en est un enfant
       direct. Sans largeur explicite, les marges "auto" ci-dessous
       annulent l'étirement automatique du flex (comportement standard
       du CSS) et ramènent l'élément à la taille de son contenu au lieu
       de remplir l'écran — c'était la cause du problème d'affichage.
       Identique sur tous les navigateurs, donc invisible en changeant
       de navigateur ou en vidant le cache. */
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 30px 30px 50px;
    display: flex;
    align-items: flex-start;
    gap: 26px;
}

/* ---------- Menu du tableau de bord — sidebar verticale ---------- */

.menu-dashboard {
    flex: 0 0 220px;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 10px 35px rgba(11, 61, 145, 0.08);
    padding: 18px 14px;
    position: sticky;
    top: 20px;
}

.menu-dashboard-titre {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #a3adbd;
    padding: 4px 12px 12px;
}

.menu-dashboard-groupe {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #a3adbd;
    padding: 14px 12px 4px;
}

.menu-dashboard-interieur {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.menu-dashboard a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 12px;
    border-radius: 8px;
    color: var(--gris-texte);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.menu-dashboard a.sous-lien {
    padding-left: 20px;
    font-size: 13.5px;
}

.menu-dashboard a:hover {
    background-color: var(--gris-clair);
    color: var(--bleu-principal);
}

/* Bouton de déconnexion (formulaire POST) : même apparence qu'un lien du menu. */
.form-deconnexion {
    margin: 0;
}

.menu-dashboard button.sous-lien {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 11px 12px 11px 20px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--gris-texte);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.menu-dashboard button.sous-lien:hover {
    background-color: var(--gris-clair);
    color: var(--bleu-principal);
}

.menu-dashboard a.actif {
    background-color: var(--bleu-principal);
    color: #ffffff;
}

/* Sidebar admin : même logique mais teinte graphite, cohérente avec
   le bandeau supérieur admin (voir header.header-admin). */
.menu-admin a.actif {
    background-color: var(--entete-admin-bg);
    color: #ffffff;
}

.menu-admin .menu-dashboard-titre {
    color: var(--accent-admin);
}

.icone-menu {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    fill: currentColor;
}

/* ---------- Pages du tableau de bord (dashboard/) ---------- */

.page-dashboard {
    /* La règle générique "main" (utilisée par les pages de connexion,
       plus haut dans ce fichier) applique display:flex + justify-
       content:center + un padding — pensée pour centrer une seule
       carte de connexion. On neutralise tout ça ici explicitement,
       sinon le contenu du dashboard reste centré/réduit à sa taille
       naturelle au lieu de s'étirer sur toute la largeur disponible. */
    display: block;
    justify-content: normal;
    align-items: normal;
    padding: 0;
    flex: 1;
    min-width: 0;
}

.conteneur-dashboard {
    width: 100%;
}

.conteneur-etroit {
    max-width: 620px;
}

.grille-dashboard {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

/* Carte blanche générique, réutilisée pour tous les blocs de contenu
   du tableau de bord (solde, infos, formulaire, historique, détail...). */
.carte {
    width: 100%;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 10px 35px rgba(11, 61, 145, 0.08);
    padding: 26px 28px;
    transition: box-shadow 0.2s ease;
}

.carte:hover {
    box-shadow: 0 14px 40px rgba(11, 61, 145, 0.12);
}

.carte h2 {
    font-size: 16px;
    color: var(--bleu-fonce);
    margin-bottom: 18px;
}

.sous-titre-carte {
    font-size: 13px;
    color: #7c8698;
    margin-top: -12px;
    margin-bottom: 20px;
}

.sous-titre-formulaire {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--bleu-principal);
    margin: 22px 0 12px;
}

.sous-titre-formulaire:first-child {
    margin-top: 0;
}

.optionnel {
    font-weight: 400;
    color: #a3adbd;
    text-transform: none;
    letter-spacing: normal;
}

.detail-contrepartie {
    display: block;
    font-size: 11.5px;
    color: #a3adbd;
    font-weight: 500;
}

.carte-solde-principale {
    background: linear-gradient(120deg, var(--bleu-principal), var(--bleu-fonce));
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}

.libelle-solde {
    color: #dce6f7;
    font-size: 13px;
    font-weight: 600;
}

.montant-solde {
    color: #ffffff;
    font-size: 32px;
    font-weight: 700;
}

.boutons-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
}

.bouton-action {
    background-color: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.4);
    color: #ffffff;
    padding: 9px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.bouton-action:hover {
    background-color: rgba(255,255,255,0.28);
}

.bouton-action-secondaire {
    background-color: transparent;
    border-color: rgba(255,255,255,0.3);
}

/* ---------- Accroche de l'accueil ---------- */

.entete-accueil {
    margin-bottom: 20px;
}

.titre-accueil {
    font-size: 22px;
    color: var(--bleu-fonce);
    margin-bottom: 4px;
}

.sous-titre-accueil {
    font-size: 14px;
    color: #7c8698;
}

/* ---------- Transactions récentes (accueil) ---------- */

.carte-transactions-recentes {
    margin-top: 22px;
}

/* ---------- Vue d'ensemble (donut Envoyé / Reçu) ---------- */

.carte-vue-ensemble {
    margin-top: 22px;
}

/* ---------- Admin : sauvegardes ---------- */

.actions-sauvegarde {
    display: flex;
    flex-wrap: wrap;
    gap: 22px 32px;
    align-items: flex-start;
}

.actions-sauvegarde form {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.aide-sauvegarde {
    font-size: 12px;
    color: #7c8698;
}

.form-en-ligne {
    display: inline;
    margin-left: 12px;
}

.lien-supprimer {
    padding: 0;
    border: 0;
    background: none;
    color: var(--rouge-erreur);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.lien-supprimer:hover {
    text-decoration: underline;
}

.liste-conseils-sauvegarde {
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 14px;
    line-height: 1.6;
    color: #4a4a4a;
}

/* ---------- Accueil : carte du solde (version complète) ---------- */

.carte-solde-pro {
    position: relative;
    overflow: hidden;
    justify-content: space-between;
    gap: 14px;
    background:
        radial-gradient(circle at 92% -10%, rgba(255, 255, 255, 0.22), transparent 48%),
        radial-gradient(circle at 0% 120%, rgba(255, 255, 255, 0.10), transparent 50%),
        linear-gradient(120deg, var(--bleu-principal), var(--bleu-fonce));
}

/* Anneaux concentriques discrets, comme sur la carte bancaire. */
.carte-solde-pro::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 18px);
    pointer-events: none;
}

.carte-solde-pro > * {
    position: relative;
}

.solde-haut {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.solde-type {
    padding: 3px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.25);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.solde-montant-ligne {
    display: flex;
    align-items: center;
    gap: 12px;
}

.carte-solde-pro .montant-solde {
    display: inline-flex;
    align-items: baseline;
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    transition: filter 0.2s ease;
}

.solde-decimales {
    font-size: 22px;
    font-weight: 700;
    opacity: 0.8;
}

.solde-devise {
    margin-left: 7px;
    font-size: 22px;
    font-weight: 600;
    opacity: 0.9;
}

/* Solde masqué (confidentialité à l'écran) : simple floutage visuel. */
.solde-masque {
    filter: blur(10px);
    user-select: none;
}

.solde-oeil {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    cursor: pointer;
}

.solde-oeil:hover {
    background: rgba(255, 255, 255, 0.25);
}

.solde-oeil svg {
    width: 18px;
    height: 18px;
}

.solde-compte {
    font-size: 12.5px;
    letter-spacing: 0.04em;
    color: #dce6f7;
    font-variant-numeric: tabular-nums;
}

.solde-date {
    opacity: 0.75;
}

.carte-solde-pro .boutons-cta {
    margin-top: auto;
}

.bouton-action-principal {
    background-color: #ffffff;
    border-color: #ffffff;
    color: var(--bleu-fonce);
}

.bouton-action-principal:hover {
    background-color: #eef3ff;
}

/* ---------- Accueil : aperçu de la carte bancaire ---------- */

.carte-apercu-carte {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.apercu-entete {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}

.apercu-entete h2 {
    margin-bottom: 0;
}

.lien-apercu {
    font-size: 13px;
    font-weight: 600;
    color: var(--bleu-principal);
    text-decoration: none;
}

.lien-apercu:hover {
    text-decoration: underline;
}

.apercu-lien {
    display: block;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    border-radius: 18px;
    transition: transform 0.2s ease;
}

.apercu-lien:hover {
    transform: translateY(-3px);
}

.apercu-note {
    text-align: center;
    font-size: 12.5px;
    color: #7c8698;
}

.apercu-vide {
    margin: auto 0;
    padding: 34px 20px;
    border: 2px dashed #d6dcea;
    border-radius: 16px;
    text-align: center;
    font-size: 14px;
    line-height: 1.6;
    color: #7c8698;
}

/* ---------- Accueil : cartes de chiffres ---------- */

.grille-accueil-haut {
    align-items: stretch;
}

.grille-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 22px;
    margin-top: 22px;
}

.carte-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    transition: transform 0.15s ease;
}

.carte-stat:hover {
    transform: translateY(-2px);
}

.stat-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
}

.stat-icone svg {
    width: 22px;
    height: 22px;
}

.stat-icone-recu    { background: #e8f7ee; color: #16A34A; }
.stat-icone-envoye  { background: #fdecec; color: #DC2626; }
.stat-icone-encours { background: #fff4e0; color: #d97706; }
.stat-icone-cartes  { background: #ece9ff; color: var(--bleu-principal); }

.stat-corps {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.stat-libelle {
    font-size: 12.5px;
    font-weight: 600;
    color: #7c8698;
}

.stat-valeur {
    font-size: 20px;
    font-weight: 800;
    color: var(--bleu-fonce);
    white-space: nowrap;
}

.stat-note {
    font-size: 11.5px;
    color: #a3adbd;
}

/* Donut + barres mensuelles côte à côte (une colonne sur petit écran, voir plus bas). */
.grille-dashboard-bas {
    margin-top: 22px;
}

.grille-dashboard-bas .carte-vue-ensemble {
    margin-top: 0;
}

.graphique-barres {
    display: block;
    width: 100%;
    height: auto;
}

.legende-barres {
    display: flex;
    justify-content: center;
    gap: 22px;
    margin-top: 6px;
    font-size: 13px;
    color: var(--gris-texte);
}

.legende-barres > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.donut-conteneur {
    display: flex;
    align-items: center;
    gap: 36px;
    flex-wrap: wrap;
    padding: 6px 0;
}

.donut-graphique {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.donut-centre {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.donut-pourcentage {
    font-size: 21px;
    font-weight: 700;
    color: var(--bleu-fonce);
}

.donut-libelle {
    font-size: 11px;
    color: #a3adbd;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.donut-legende {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.donut-legende-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.donut-puce {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.donut-puce-envoye {
    background-color: var(--rouge-erreur);
}

.donut-puce-recu {
    background-color: #16A34A;
}

.donut-puce-en-cours {
    background-color: var(--bleu-principal);
}

.stats-secondaires-admin {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #ecf0f6;
}

.stat-secondaire-admin {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 180px;
}

.chiffre-stat-admin-petit {
    font-size: 22px;
}

.donut-legende-titre {
    display: block;
    font-size: 12px;
    color: #7c8698;
}

.donut-legende-montant {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--gris-texte);
}

.liste-transactions-recentes {
    display: flex;
    flex-direction: column;
}

.ligne-transaction-recente {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 4px;
    border-bottom: 1px solid #ecf0f6;
    text-decoration: none;
    color: var(--gris-texte);
    font-size: 13.5px;
}

.ligne-transaction-recente:last-child {
    border-bottom: none;
}

.ligne-transaction-recente:hover {
    background-color: var(--gris-clair);
}

.compte-transaction-recente {
    flex: 1;
    color: var(--gris-texte);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.date-transaction-recente {
    color: #a3adbd;
    font-size: 12.5px;
    white-space: nowrap;
}

/* ---------- Mes cartes ---------- */

.grille-cartes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 400px));
    gap: 34px 32px;
}

/* Une carte + ses informations + ses boutons, regroupés dans un même bloc. */
.carte-element {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 400px;
}

/* ----- La carte bancaire (classes .cb-*) ----- */
.cb {
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: 400px;
    aspect-ratio: 1.586 / 1;          /* proportions d'une vraie carte (85,6 x 54 mm) */
    padding: 20px 24px;
    border-radius: 18px;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    /* Carte de DÉBIT : bleu de la banque, avec un reflet doux. */
    background:
        radial-gradient(circle at 88% -8%, rgba(255, 255, 255, 0.30), transparent 46%),
        radial-gradient(circle at 0% 115%, rgba(44, 205, 195, 0.28), transparent 52%),
        linear-gradient(135deg, #0a2a6b 0%, #0b3d91 55%, #1857c9 100%);
    box-shadow:
        0 20px 38px -16px rgba(7, 42, 102, 0.60),
        inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

/* Anneaux concentriques discrets (motif de sécurité décoratif). */
.cb::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: repeating-radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 16px);
}

/* Reflet diagonal. */
.cb::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.11) 50%, transparent 62%);
}

/* Carte de CRÉDIT : graphite profond et or, plus "premium". */
.cb-credit {
    background:
        radial-gradient(circle at 88% -8%, rgba(217, 183, 101, 0.34), transparent 46%),
        radial-gradient(circle at 0% 115%, rgba(217, 183, 101, 0.14), transparent 52%),
        linear-gradient(135deg, #0e1117 0%, #1d2330 55%, #2d3547 100%);
    box-shadow:
        0 20px 38px -16px rgba(10, 12, 18, 0.70),
        inset 0 0 0 1px rgba(217, 183, 101, 0.28);
}

/* Carte BLOQUÉE : passée en gris, avec un sceau bien visible. */
.cb-bloquee {
    filter: grayscale(1) brightness(0.92);
}

.cb-haut {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.cb-marque {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cb-logo {
    width: 30px;
    height: 30px;
    flex: none;
}

/* Votre propre logo (assets/img/logo.*), posé sur une pastille blanche
   pour rester lisible sur la carte bleue comme sur la carte graphite. */
.cb-logo-img {
    display: block;
    height: 32px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
    padding: 4px 9px;
    border-radius: 9px;
    background: #ffffff;
}

.cb-nom {
    display: flex;
    flex-direction: column;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1;
    text-transform: uppercase;
}

.cb-nom-bank {
    margin-top: 3px;
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: 0.5em;
    opacity: 0.8;
}

.cb-statut {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.22);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.cb-statut::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ade80;
}

.cb-statut-bloquee::before {
    background: #f87171;
}

.cb-milieu {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cb-puce {
    width: 42px;
    height: auto;
}

.cb-sans-contact {
    width: 24px;
    height: 24px;
    opacity: 0.85;
}

.cb-numero {
    font-family: ui-monospace, "SF Mono", Consolas, "Courier New", monospace;
    font-size: clamp(16px, 5.4vw, 22px);
    font-weight: 600;
    letter-spacing: 0.13em;
    white-space: nowrap;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35), 0 0 2px rgba(255, 255, 255, 0.25);
}

.cb-complet .cb-numero {
    font-size: clamp(14px, 4.6vw, 19px);
    letter-spacing: 0.09em;
}

.cb-bas {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
}

.cb-titulaire-bloc {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cb-etiquette {
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.7;
}

.cb-titulaire {
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cb-type {
    font-size: 15px;
    font-weight: 800;
    font-style: italic;
    letter-spacing: 0.12em;
    opacity: 0.92;
}

.cb-credit .cb-type,
.cb-credit .cb-etiquette {
    color: #e6c77a;
    opacity: 1;
}

.cb-sceau {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-14deg);
    padding: 4px 18px;
    border: 3px solid rgba(255, 255, 255, 0.75);
    border-radius: 8px;
    font-size: 26px;
    font-weight: 900;
    letter-spacing: 0.18em;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(0, 0, 0, 0.28);
    pointer-events: none;
}

/* Petit récapitulatif sous la carte (plafond / solde). */
.carte-infos {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: #ffffff;
    border: 1px solid #e6eaf2;
    border-radius: 12px;
    font-size: 14px;
}

.carte-infos .info-libelle {
    display: block;
    margin-bottom: 2px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #7c8698;
}

.carte-infos strong {
    color: var(--bleu-fonce);
}

.actions-carte {
    display: flex;
    gap: 10px;
}

.actions-carte .form-toggle-carte,
.actions-carte .bouton-voir-carte {
    flex: 1;
}

.bouton-voir-carte {
    display: block;
    text-align: center;
    background-color: var(--gris-clair);
    color: var(--bleu-principal);
}

.bouton-voir-carte:hover {
    background-color: #e4e9f2;
}

.bouton-toggle {
    width: 100%;
    padding: 11px 16px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 700;
    border: none;
    cursor: pointer;
}

.bouton-bloquer {
    background-color: #fdecea;
    color: var(--rouge-erreur);
}

.bouton-bloquer:hover {
    background-color: #fbd9d5;
}

.bouton-debloquer {
    background-color: #e7f6ee;
    color: #16A34A;
}

.bouton-debloquer:hover {
    background-color: #d3f0e1;
}

/* ---------- Assistance (profil) ---------- */

.carte-assistance {
    margin-top: 22px;
}

.ligne-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #ecf0f6;
    font-size: 13.5px;
}

.ligne-info:last-child {
    border-bottom: none;
}

.libelle-info {
    color: #7c8698;
}

.valeur-info {
    color: var(--gris-texte);
    font-weight: 600;
    text-align: right;
}

/* ---------- Historique des virements ---------- */

.aucun-resultat {
    color: #7c8698;
    font-size: 14px;
    padding: 10px 0;
}

.etat-vide {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 16px;
    color: #a3adbd;
}

.etat-vide-icone {
    width: 44px;
    height: 44px;
    fill: #ced4e0;
    margin-bottom: 12px;
}

.etat-vide p {
    font-size: 14px;
    max-width: 320px;
}

.tableau-scroll {
    overflow-x: auto;
}

.tableau-virements {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.tableau-virements th {
    text-align: left;
    color: #7c8698;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 10px 8px;
    border-bottom: 2px solid #ecf0f6;
    white-space: nowrap;
}

.tableau-virements td {
    padding: 12px 8px;
    border-bottom: 1px solid #ecf0f6;
    white-space: nowrap;
}

.tableau-virements a {
    color: var(--bleu-principal);
    font-weight: 600;
    text-decoration: none;
}

.tableau-virements a:hover {
    text-decoration: underline;
}

.montant-positif {
    color: #16A34A;
    font-weight: 700;
}

.montant-negatif {
    color: var(--rouge-erreur);
    font-weight: 700;
}

.badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 700;
}

.badge-envoye {
    background-color: #fdecea;
    color: var(--rouge-erreur);
}

.badge-recu {
    background-color: #e7f6ee;
    color: #16A34A;
}

.badge-statut-execute {
    background-color: #e7f6ee;
    color: #16A34A;
}

.badge-statut-refuse {
    background-color: #fdecea;
    color: var(--rouge-erreur);
}

.badge-statut-attente {
    background-color: #fff6e6;
    color: #8a5a06;
}

.badge-statut-en_cours {
    background-color: #e8eef9;
    color: var(--bleu-principal);
}

.lien-reprendre {
    color: var(--bleu-principal);
    font-weight: 700;
    text-decoration: none;
}

.lien-reprendre:hover {
    text-decoration: underline;
}

/* ---------- Écran de progression (virement-en-cours.php) ---------- */

.carte-progression {
    text-align: center;
    padding: 40px 28px;
}

.cercle-progression-conteneur {
    position: relative;
    width: 180px;
    height: 180px;
    margin: 0 auto 24px;
}

.cercle-progression-svg circle#cercleProgression {
    transition: stroke-dashoffset 0.2s ease;
}

.pourcentage-progression {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 30px;
    font-weight: 700;
    color: var(--bleu-fonce);
}

.etape-progression-texte {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--gris-texte);
    min-height: 20px;
}

/* ---------- Blocage de sécurité (virement externe) ---------- */

.bloc-controle-securite {
    margin-top: 26px;
    text-align: left;
}

.alerte-controle {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background-color: #fff6e6;
    border-left: 4px solid #d99a1b;
    border-radius: 6px;
    padding: 14px 16px;
    margin-bottom: 14px;
}

.icone-alerte {
    width: 22px;
    height: 22px;
    fill: #d99a1b;
    flex-shrink: 0;
    margin-top: 2px;
}

.motif-controle {
    font-weight: 700;
    color: #8a5a06;
    font-size: 14px;
    margin-bottom: 4px;
}

.reference-controle {
    font-size: 12.5px;
    color: #8a5a06;
}

.instruction-controle {
    font-size: 13px;
    color: var(--gris-texte);
    line-height: 1.5;
    margin-bottom: 18px;
}

.form-code-controle .champ input {
    text-align: center;
    letter-spacing: 4px;
    font-size: 20px;
    font-weight: 700;
}

/* ---------- Espace admin temporaire ---------- */

.carte-admin {
    max-width: 420px;
}

.carte-header-admin {
    background: linear-gradient(120deg, #4a3f2e, #2f271b);
}

.entete-admin {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
    flex-wrap: wrap;
    gap: 10px;
}

.titre-admin {
    font-size: 22px;
    color: var(--bleu-fonce);
    margin-bottom: 4px;
}

.form-recherche-admin {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
}

.form-recherche-admin .champ {
    flex: 1;
    min-width: 220px;
    margin-bottom: 0;
}

.form-recherche-admin button {
    width: auto;
    padding: 12px 22px;
}

.code-genere {
    display: inline-block;
    background-color: var(--gris-clair);
    color: var(--bleu-fonce);
    font-weight: 700;
    letter-spacing: 2px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 13px;
}

/* ---------- Détail d'un virement ---------- */

.statut-grand {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 18px;
}

.lien-retour {
    display: inline-block;
    margin-top: 20px;
    color: var(--bleu-principal);
    font-weight: 600;
    text-decoration: none;
    font-size: 13.5px;
}

.lien-retour:hover {
    text-decoration: underline;
}

/* ---------- Espace admin : listes, filtres, statistiques ---------- */

.filtres-admin {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.filtre-admin {
    padding: 8px 16px;
    border-radius: 20px;
    background-color: var(--gris-clair);
    color: var(--gris-texte);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.filtre-admin:hover {
    background-color: #e4e9f2;
}

.filtre-admin.actif {
    background-color: var(--bleu-principal);
    color: #ffffff;
}

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

.carte-stat-admin {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-decoration: none;
    transition: transform 0.15s ease;
}

.carte-stat-admin:hover {
    transform: translateY(-2px);
}

.chiffre-stat-admin {
    font-size: 32px;
    font-weight: 700;
    color: var(--bleu-fonce);
}

.carte-alerte-admin {
    margin-top: 22px;
    background-color: #fff6e6;
    border-left: 4px solid #d99a1b;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.carte-alerte-admin p {
    color: #8a5a06;
    font-size: 14px;
}

.bouton-action-sombre {
    display: inline-block;
    margin-top: 12px;
    background-color: var(--bleu-principal);
    color: #ffffff;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.bouton-action-sombre:hover {
    background-color: var(--bleu-fonce);
}

.carte-apercu-email {
    background-color: #fbfcfe;
}

.apercu-email-iframe {
    width: 100%;
    height: 520px;
    border: 1px solid #ecf0f6;
    border-radius: 8px;
    margin-top: 10px;
    background-color: #f4f6fa;
}

.form-plafond-inline {
    display: flex;
    align-items: center;
    gap: 6px;
}

.form-plafond-inline input {
    width: 90px;
    padding: 6px 8px;
    border: 1.5px solid #d5dce8;
    border-radius: 6px;
    font-size: 13px;
}

.form-plafond-inline button {
    background-color: var(--gris-clair);
    border: none;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--bleu-principal);
    cursor: pointer;
    white-space: nowrap;
}

.form-plafond-inline button:hover {
    background-color: #e4e9f2;
}

.carte-zone-danger {
    border: 1.5px solid #fdecea;
}

.carte-zone-danger h2 {
    color: var(--rouge-erreur);
}

footer {
    text-align: center;
    padding: 16px;
    font-size: 11.5px;
    color: #9aa4b5;
}

/* ---------- Responsive ---------- */

/* Tablette et petits laptops : la sidebar passe au-dessus du contenu
   (empilée), sur toute la largeur, au lieu de rester à côté. */
@media (max-width: 768px) {
    main {
        padding: 30px 16px;
    }

    .dashboard-layout {
        flex-direction: column;
        padding: 20px 16px 40px;
        gap: 18px;
    }

    .menu-dashboard {
        flex: none;
        width: 100%;
        position: static;
    }

    .grille-dashboard {
        grid-template-columns: 1fr;
    }

    .grille-stats-admin {
        grid-template-columns: 1fr 1fr;
    }

    /* Connexion/inscription : l'illustration passe au-dessus du
       formulaire (au lieu d'être à côté), et se réduit. En colonne,
       flex-basis s'appliquerait à la HAUTEUR (pas la largeur) de la
       carte : on repasse donc en dimensionnement classique ici. */
    .zone-auth {
        flex-direction: column;
        gap: 28px;
    }

    .carte-connexion {
        flex: none;
        width: 100%;
        max-width: 420px;
    }

    .panneau-illustration {
        order: -1;
        align-items: center;
        text-align: center;
    }

    .illustration-image,
    .illustration-svg-secours {
        max-width: 220px;
        margin-bottom: 16px;
    }

    .accroche-panneau {
        font-size: 21px;
        max-width: 100%;
    }

    .sous-accroche-panneau {
        max-width: 100%;
    }
}

/* Mobile */
@media (max-width: 480px) {
    header {
        padding: 12px 16px;
    }

    .nav-connecte .bonjour {
        display: none;
    }

    .donut-conteneur {
        justify-content: center;
        text-align: center;
    }

    .donut-legende-item {
        justify-content: center;
    }

    .page-dashboard {
        padding: 0;
    }

    .menu-dashboard {
        padding: 14px 10px;
    }

    .montant-solde {
        font-size: 26px;
    }

    .carte {
        padding: 20px 18px;
    }

    .gtranslate_wrapper {
        min-width: auto;
    }

    main {
        padding: 20px 12px;
        align-items: flex-start;
        padding-top: 30px;
    }

    .carte-connexion {
        max-width: 100%;
        border-radius: 12px;
    }

    .carte-header {
        padding: 22px 20px 18px;
    }

    .carte-header h1 {
        font-size: 17px;
    }

    .accroche {
        font-size: 13px;
    }

    form {
        padding: 20px 18px 22px;
    }

    .separateur {
        margin: 4px 18px;
    }

    .pied-carte {
        padding: 16px 18px 22px;
    }

    button.connexion {
        padding: 14px;
        font-size: 16px;
    }
}

/* Très petits écrans (vieux téléphones, écrans pliables fermés) */
@media (max-width: 360px) {
    .logo {
        font-size: 18px;
    }

    .logo-image {
        height: 28px;
    }

    .carte-header {
        padding: 18px 16px 16px;
    }

    form {
        padding: 18px 14px 20px;
    }
}