/* ============================================================
   123Pozicky.eu — app.css
   Espace client (auth + pages connectées). Chargé après theme/public.
   ============================================================ */

/* ------------------------------------------------------------ flash */

.flash{
  padding:12px 16px;
  border-radius:var(--radius-sm);
  font-size:14px; font-weight:500;
  margin-bottom:14px;
  word-break:break-word;
}
.flash a{ font-weight:600; }
.flash-success{ background:var(--status-approved-bg); color:var(--status-approved-text); }
.flash-error{ background:var(--status-rejected-bg); color:var(--status-rejected-text); }
.flash-info{ background:var(--green-soft); color:var(--pine); }

/* ------------------------------------------------------------ auth */

/* CENTRÉ verticalement : la carte et le logo étaient calés en haut (flex-start
   + 48px de retrait), ce qui laissait tout le bas vide sur un téléphone.
   dvh et non vh : sur iPhone, 100vh ignore la barre d'outils de Safari et le
   centrage se décalait vers le bas.
   Au-delà de 860px, .auth-split reprend align-items:stretch pour sa mise en
   page à deux colonnes — cette règle-ci ne concerne donc que le mobile. */
.auth-body{
  /* GÉOMÉTRIE COMMUNE aux deux pages de connexion — client et administration.
     Elle était écrite deux fois, dans deux feuilles, et a aussitôt divergé :
     corriger l'une laissait l'autre en arrière. La page admin porte
     « class="auth-body adl-body" » et admin-login.css est chargée après
     celle-ci : elle hérite donc de ces valeurs. Une seule à changer. */
  --auth-bar-top:28px;      /* distance de la barre au haut de la page */
  --auth-bar-space:104px;   /* place réservée : hauteur de la barre + respiration */

  position:relative;                  /* repère de la barre des réglages */
  min-height:100vh; min-height:100dvh;
  display:flex; align-items:center; justify-content:center;
  /* Le retrait haut réserve la place de la barre ET l'espace qui la sépare de
     la carte : ancrée en haut de page, elle ne doit ni la toucher ni flotter
     au-dessus d'elle. */
  padding:var(--auth-bar-space) 16px 40px;
}
.auth-wrap{ width:100%; max-width:560px; }

/* ── Barre des réglages, en tête de la carte ──
   Thème à gauche, langue à droite, sur la MÊME largeur que la carte : les deux
   marges extérieures sont donc rigoureusement égales. Auparavant la langue
   était en position:fixed contre le bord de l'écran (14px) alors que la carte
   respecte une gouttière de 16px — aucune symétrie n'était possible. */
/* HORS du flux centré : la page centre son contenu verticalement, si bien que
   la barre suivait la carte et restait collée à elle. Ancrée en haut, elle
   respire — et garde la gouttière de 16px de la carte, donc des marges
   rigoureusement égales de part et d'autre.
   absolute et non fixed : sur un formulaire d'inscription plus haut que
   l'écran, la barre doit défiler avec la page et non flotter par-dessus. */
/* UN SEUL composant, deux positions selon la largeur — le CSS déplace, le HTML
   ne duplique pas. Rendre deux interrupteurs dont un masqué mettait deux
   role="switch" dans la page pour un seul réglage : un lecteur d'écran en
   annonçait deux, et tout code cherchant [data-theme-toggle] au singulier
   n'aurait câblé que le premier. */
/* fixed, et NON absolute — c'est la correction du défaut qui collait la barre
   à la carte. En absolu, elle se cale sur l'ancêtre positionné le plus proche :
   or « .auth-body > *{ position:relative } », posée plus bas pour faire passer
   le contenu au-dessus du décor, fait de .auth-wrap un conteneur positionné.
   La barre se référait donc à .auth-wrap — centré verticalement avec la carte —
   au lieu de la page : top:28px était bien respecté, mais compté depuis le haut
   de la CARTE. En fixed, elle ne dépend que de la fenêtre, et aucune règle
   voisine ne peut plus lui voler son repère. */
.auth-bar{
  position:fixed; top:var(--auth-bar-top); left:16px; right:16px; z-index:80;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:auto; max-width:560px; margin:0 auto;
}
.auth-bar .auth-lang{ position:static; top:auto; right:auto; }

/* ── Décor « famille » des pages de connexion et d'inscription ──
   Sous 860 px, la colonne verte disparaît et il ne restait qu'un fond uni : la
   page semblait nue là où la version bureau est soignée. Ce décor la rhabille.

   ⚠️ SVG encodé dans la feuille, pas une photographie : aucune requête
   supplémentaire, net sur tous les écrans, et — surtout — la CSP interdit toute
   image externe. Un motif vectoriel suit aussi le mode sombre, ce qu'une photo
   ne saurait faire.

   Les silhouettes restent une TEXTURE : très diluées, largement espacées, et
   recouvertes d'un voile qui s'épaissit derrière la carte. Un décor qui gêne la
   lecture d'un mot de passe est un décor raté. */
.auth-body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-color:var(--bg);
  background-image:
    radial-gradient(1000px 520px at 50% -8%, var(--green-soft), transparent 68%),
    radial-gradient(760px 420px at 106% 104%, var(--gold-soft), transparent 64%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cg fill='none' stroke='%230B4F3C' stroke-opacity='.11' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='58' cy='46' r='11'/%3E%3Cpath d='M40 82c0-11 8-19 18-19s18 8 18 19'/%3E%3Ccircle cx='92' cy='52' r='9'/%3E%3Cpath d='M77 82c0-9 7-16 15-16s15 7 15 16'/%3E%3Ccircle cx='75' cy='72' r='7'/%3E%3Cpath d='M64 95c0-7 5-12 11-12s11 5 11 12'/%3E%3Cpath d='M212 74l26-22 26 22v30a5 5 0 01-5 5h-42a5 5 0 01-5-5z'/%3E%3Cpath d='M230 109V88h16v21'/%3E%3Cpath d='M150 205c-13-11-26-19-26-32a14 14 0 0126-7 14 14 0 0126 7c0 13-13 21-26 32z'/%3E%3Ccircle cx='238' cy='212' r='11'/%3E%3Cpath d='M220 248c0-11 8-19 18-19s18 8 18 19'/%3E%3Ccircle cx='62' cy='218' r='9'/%3E%3Cpath d='M47 248c0-9 7-16 15-16s15 7 15 16'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat, no-repeat, repeat;
  background-size:auto, auto, 300px 300px;
  /* Le motif s'efface vers le centre : la carte n'est jamais posée dessus. */
  -webkit-mask-image:radial-gradient(120% 90% at 50% 45%, rgba(0,0,0,.28) 0%, #000 72%);
  mask-image:radial-gradient(120% 90% at 50% 45%, rgba(0,0,0,.28) 0%, #000 72%);
}
/* La carte et tout ce qui l'accompagne passent au-dessus du décor. */
.auth-body > *{ position:relative; z-index:1; }

/* Carte opaque et détachée : sur un fond texturé, une carte translucide ou sans
   ombre se confond avec le décor et la saisie devient pénible. */
.auth-body .auth-card{
  background:var(--bg-panel);
  border:1px solid var(--line);
  box-shadow:0 24px 60px -28px rgba(7,51,40,.45), 0 2px 8px rgba(7,51,40,.06);
}

/* Mode sombre : le motif passe en clair pour rester perceptible sur fond noir,
   et le voile s'épaissit — un décor trop présent fatigue davantage sur sombre. */
:root[data-theme="dark"] .auth-body::before{
  background-image:
    radial-gradient(1000px 520px at 50% -8%, var(--green-soft), transparent 68%),
    radial-gradient(760px 420px at 106% 104%, var(--gold-soft), transparent 64%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cg fill='none' stroke='%237CE3A6' stroke-opacity='.10' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='58' cy='46' r='11'/%3E%3Cpath d='M40 82c0-11 8-19 18-19s18 8 18 19'/%3E%3Ccircle cx='92' cy='52' r='9'/%3E%3Cpath d='M77 82c0-9 7-16 15-16s15 7 15 16'/%3E%3Ccircle cx='75' cy='72' r='7'/%3E%3Cpath d='M64 95c0-7 5-12 11-12s11 5 11 12'/%3E%3Cpath d='M212 74l26-22 26 22v30a5 5 0 01-5 5h-42a5 5 0 01-5-5z'/%3E%3Cpath d='M230 109V88h16v21'/%3E%3Cpath d='M150 205c-13-11-26-19-26-32a14 14 0 0126-7 14 14 0 0126 7c0 13-13 21-26 32z'/%3E%3Ccircle cx='238' cy='212' r='11'/%3E%3Cpath d='M220 248c0-11 8-19 18-19s18 8 18 19'/%3E%3Ccircle cx='62' cy='218' r='9'/%3E%3Cpath d='M47 248c0-9 7-16 15-16s15 7 15 16'/%3E%3C/g%3E%3C/svg%3E");
}
:root[data-theme="dark"] .auth-body .auth-card{
  box-shadow:0 24px 60px -28px rgba(0,0,0,.8), 0 2px 10px rgba(0,0,0,.4);
}
.auth-logo{ justify-content:center; margin-bottom:18px; display:flex; }
/* Sélecteur de langue des pages d'authentification : toujours en haut à
   droite, mobile comme desktop. Il est fixe et non posé dans le flux, sinon
   il défilerait avec un formulaire d'inscription plus haut que l'écran. */
.auth-lang{ position:fixed; top:14px; right:14px; z-index:80; width:max-content; }
.auth-card{ padding:34px; }
.auth-title{ font-size:28px; margin-bottom:6px; }
.auth-sub{ color:var(--ink-soft); font-size:14.5px; margin-bottom:24px; }
.auth-type{
  display:flex; gap:4px; width:100%; margin-bottom:22px;
  background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-pill); padding:4px;
}
.auth-type label{
  flex:1; text-align:center; cursor:pointer;
  padding:10px 8px; border-radius:var(--radius-pill);
  font-size:13.5px; font-weight:600; color:var(--ink-soft);
  transition:background .14s ease, color .14s ease;
}
.auth-type label.active{ background:var(--pine); color:#fff; box-shadow:var(--shadow-card); }
.auth-type input{ position:absolute; opacity:0; pointer-events:none; }
.auth-consent{
  display:flex; gap:10px; align-items:flex-start;
  font-size:13.5px; color:var(--ink-soft); font-weight:400;
  margin:20px 0;
  cursor:pointer;
}
.auth-consent input{ width:auto; margin-top:3px; }
.auth-submit{ width:100%; margin-top:4px; }
.auth-alt{ text-align:center; font-size:14px; color:var(--ink-soft); margin:20px 0 0; }
.auth-forgot{ text-align:right; font-size:13px; margin:8px 0 18px; }

/* ============================================================
   Shell dashboard : sidebar + topbar + bottom-nav (modèle Eurofunded)
   ============================================================ */

.dash-body{ background:var(--bg); }
.dash-layout{ display:flex; min-height:100vh; }

/* ------------------------------------------------------------ sidebar (fond pin sombre) */

.sidebar{
  width:262px; flex-shrink:0;
  background:linear-gradient(185deg, var(--surface-deep) 0%, #052720 100%);
  display:flex; flex-direction:column;
  position:fixed; top:0; left:0; bottom:0; z-index:60;
}
.sidebar-header{
  height:68px; padding:0 22px; flex-shrink:0;
  display:flex; align-items:center;
  border-bottom:1px solid rgba(255,255,255,.07);
}
/* Logo des barres latérales (client et admin) : version BLANCHE du logo du site
   — carré blanc « 123 » vert, « pozicky » blanc, « .eu » menthe. Au survol il
   se dore entièrement au lieu de disparaître : le a:hover général le passait
   en vert foncé, invisible sur le fond pin, et le carré « 123 » n'avait aucun
   style ici (public.css n'est pas chargé dans ces espaces). */
.sidebar-logo{
  display:inline-flex; align-items:center; gap:5px;   /* même écart que le logo du site public */
  font-family:var(--font-display); font-weight:700; font-size:19px; color:#fff;
  letter-spacing:-.015em; white-space:nowrap;
}
.sidebar-logo .logo-mark{
  width:30px; height:30px; border-radius:8px; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff; color:var(--surface-deep);
  font-family:var(--font-mono); font-size:13px; font-weight:700; letter-spacing:0;
  transition:background .2s ease, color .2s ease, box-shadow .2s ease;
}
.sidebar-logo .logo-word{ color:#fff; transition:color .2s ease; }
.sidebar-logo .logo-tld{ color:var(--mint-glow); transition:color .2s ease; }
.sidebar-logo:hover, .sidebar-logo:focus-visible{ color:var(--gold); }
.sidebar-logo:hover .logo-mark, .sidebar-logo:focus-visible .logo-mark{
  background:var(--gold); color:var(--surface-deep); box-shadow:0 6px 16px -8px rgba(201,162,75,.7);
}
.sidebar-logo:hover .logo-word, .sidebar-logo:hover .logo-tld,
.sidebar-logo:focus-visible .logo-word, .sidebar-logo:focus-visible .logo-tld{ color:var(--gold); }
.sidebar-nav{ flex:1; overflow-y:auto; padding:14px 12px; }
.sidebar-section-label{
  font-size:10.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:rgba(255,255,255,.32); padding:16px 12px 8px;
}
.sidebar-item{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border-radius:var(--radius-sm); margin-bottom:2px;
  color:rgba(255,255,255,.66); font-size:14px; font-weight:500;
  border-left:3px solid transparent;
  transition:background .14s ease, color .14s ease;
}
/* Le libellé prend la place libre et reste sur une ligne ; la pastille garde sa
   taille. Avant, « .sidebar-item span{flex:1} » étirait aussi la pastille (un
   span) : elle s'élargissait en barre et renvoyait le libellé à la ligne. */
.sidebar-item span{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-item:hover{ background:rgba(255,255,255,.06); color:#fff; }
.sidebar-item.active{
  background:rgba(201,162,75,.16); color:var(--gold); font-weight:600;
  border-left-color:var(--gold);
}
.sidebar-item svg{ flex-shrink:0; }
.sidebar-lock{ display:flex; color:rgba(255,255,255,.3); margin-left:auto; }
.sidebar-lock svg{ width:15px; height:15px; }
/* flex-shrink:0 : la barre latérale est un flex en colonne haut de 100vh, et
   sans ce garde-fou le pied se comprime dès que la navigation déborde de
   l'écran — le défaut corrigé au même endroit dans PoziPay. */
.sidebar-footer{ padding:12px; flex-shrink:0; border-top:1px solid rgba(255,255,255,.07); }

/* ---- Retour au site principal ----
   Même traitement que le lien vers l'espace client au bas de PoziPay
   (.pay-sb-ef) : pastille de marque, destination écrite en clair sur deux
   lignes, et l'icône de lien sortant qui annonce le changement de site.
   Classe DÉDIÉE et non .sidebar-item : la règle « .sidebar-item span{flex:1} »
   étirerait le bloc de texte, le même piège que celui déjà noté plus haut pour
   la pastille de comptage. */
.sidebar-ef{
  display:flex; align-items:center; gap:10px;
  padding:10px; border-radius:var(--radius-sm);
  background:rgba(255,255,255,.05);
  transition:background .14s ease;
}
.sidebar-ef:hover{ background:rgba(255,255,255,.09); }
.sidebar-ef-icon{
  width:34px; height:34px; border-radius:9px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--gold); color:var(--surface-deep);
  font-family:var(--font-mono); font-weight:700; font-size:12px;
}
.sidebar-ef-text{
  display:flex; flex-direction:column; min-width:0;
  font-size:11px; color:rgba(255,255,255,.5); line-height:1.3;
}
.sidebar-ef-text strong{ color:#fff; font-size:13px; }
.sidebar-ef svg{ width:16px; height:16px; flex-shrink:0; color:rgba(255,255,255,.3); margin-left:auto; }
.admin-tag{ font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.1em; background:var(--gold); color:var(--surface-deep); padding:2px 6px; border-radius:5px; }
.sidebar-item .sidebar-badge, .sidebar-badge{
  flex:0 0 auto; margin-left:auto; min-width:20px; height:20px; padding:0 6px; box-sizing:border-box;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--gold); color:var(--surface-deep); font-size:11px; font-weight:700; line-height:1;
  border-radius:999px; overflow:visible; text-overflow:clip;
}

/* tableaux admin denses */
.admin-table-wrap{ overflow-x:auto; }
.admin-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
.stat-tile{ background:var(--bg-panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-card); padding:20px; }
.stat-tile .stat-label{ font-size:12.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; font-weight:600; margin-bottom:8px; }
.stat-tile .stat-value{ font-family:var(--font-mono); font-size:30px; font-weight:600; color:var(--pine-deep); }
.doc-link{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; }
@media (max-width:980px){ .stat-row{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .stat-row{ grid-template-columns:1fr 1fr; } }

.sidebar-overlay{
  position:fixed; inset:0; background:rgba(7,51,40,.4); z-index:55;
  opacity:0; visibility:hidden; transition:opacity .2s ease;
}
.sidebar-overlay.show{ opacity:1; visibility:visible; }

/* ------------------------------------------------------------ main + topbar */

.dash-main{ flex:1; margin-left:262px; display:flex; flex-direction:column; min-width:0; }
.dash-topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:16px;
  height:68px; padding:0 28px;
  background:var(--bg-panel);
  border-bottom:1px solid var(--line);
}
.topbar-burger{ display:none; background:none; border:none; color:var(--pine-deep); cursor:pointer; padding:4px; }
.topbar-title{ font-family:var(--font-display); font-weight:600; font-size:18px; color:var(--pine-deep); flex:1; }
/* margin-left:auto plutôt que de compter sur le titre : sous 600px le titre est
   masqué, et sans lui la cloche et l'avatar retombaient à gauche, collés au burger. */
.topbar-actions{ display:flex; align-items:center; gap:12px; margin-left:auto; }

.topbar-icon-btn{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  border:1px solid var(--line); background:var(--bg-panel); color:var(--pine-deep); cursor:pointer;
}
.topbar-icon-btn:hover{ border-color:var(--pine); }
.topbar-notif-badge{
  position:absolute; top:-3px; right:-3px;
  min-width:18px; height:18px; padding:0 4px;
  background:var(--gold); color:var(--surface-deep);
  border-radius:999px; font-size:11px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}

.topbar-dd-wrap{ position:relative; }
.topbar-user{
  display:flex; align-items:center; gap:10px;
  background:none; border:1px solid transparent; border-radius:var(--radius-pill);
  padding:5px 8px 5px 5px; cursor:pointer;
}
.topbar-user:hover{ border-color:var(--line); }
.topbar-avatar{
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  background:var(--pine); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600;
}
.topbar-user-info{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.25; }
.topbar-user-name{ font-size:13.5px; font-weight:600; color:var(--ink); }
.topbar-user-badge{ font-size:11.5px; color:var(--green-mid); font-weight:500; }

.topbar-dd{
  position:absolute; top:calc(100% + 10px); right:0; width:320px;
  background:var(--bg-panel); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-card); overflow:hidden;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .15s ease, transform .15s ease; z-index:50;
}
.topbar-dd.show{ opacity:1; visibility:visible; transform:translateY(0); }
.topbar-dd-right{ width:240px; }
.topbar-dd-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid var(--line);
}
.topbar-dd-head h4{ margin:0; font-size:14px; }
.topbar-dd-head button, .topbar-dd-head a{
  background:none; border:none; cursor:pointer;
  font-size:12.5px; color:var(--green-mid); font-weight:600; font-family:var(--font-body);
}
.topbar-dd-list{ max-height:340px; overflow-y:auto; }
.topbar-dd-empty{ padding:22px 16px; text-align:center; color:var(--ink-faint); font-size:13.5px; margin:0; }
.notif-item{ display:flex; gap:12px; padding:13px 16px; border-bottom:1px solid var(--line); }
.notif-item:last-child{ border-bottom:none; }
.notif-item.unread{ background:var(--green-soft); }
.notif-dot{ width:8px; height:8px; border-radius:50%; background:var(--line-strong); margin-top:5px; flex-shrink:0; }
.notif-item.unread .notif-dot{ background:var(--green-mid); }
.notif-text{ margin:0 0 3px; font-size:13.5px; color:var(--ink); line-height:1.45; }
.notif-time{ margin:0; font-size:11.5px; color:var(--ink-faint); }

.user-menu{ padding:8px; }
.user-menu-item{
  display:flex; align-items:center; gap:11px; width:100%;
  padding:10px 12px; border-radius:var(--radius-sm);
  background:none; border:none; cursor:pointer; text-align:left;
  font-family:var(--font-body); font-size:14px; color:var(--ink-soft);
}
.user-menu-item:hover{ background:var(--bg); color:var(--pine-deep); }
.user-menu-item.danger{ color:var(--status-rejected-text); }
.user-menu-item.danger:hover{ background:var(--status-rejected-bg); }
.user-menu-divider{ height:1px; background:var(--line); margin:6px 0; }

/* ------------------------------------------------------------ content */

.dash-content{ flex:1; padding:32px 28px 80px; max-width:1200px; width:100%; }
.app-head{ margin-bottom:26px; }
.app-head-row{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.app-title{ font-size:clamp(23px,2.6vw,32px); color:var(--pine-deep); margin-bottom:4px; }
/* (.btn-sm est défini dans theme.css — ne pas le redéfinir ici : cela cassait
   la hauteur et le rythme des boutons premium sur l'admin et l'espace client.) */

.verify-banner{ background:var(--gold-soft); border-bottom:1px solid var(--line); }
.verify-banner-inner{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:10px 28px; font-size:13.5px; color:var(--status-pending-text); font-weight:500;
}

/* Sélecteur de langue : voir assets/css/lang.css (feuille unique). */

/* ------------------------------------------------------------ dashboard cards */

.dash-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:18px; }
.dash-card{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.dash-card-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%; margin-bottom:10px; }
.dash-card-head h3{ margin:0; }
.dash-card .btn{ margin-top:14px; }
.dash-card-locked{ opacity:.75; }
.dash-card-locked svg{ color:var(--ink-faint); }
.kyc-note{ font-size:13px; color:var(--status-rejected-text); background:var(--status-rejected-bg); padding:8px 12px; border-radius:var(--radius-sm); }

.empty-state{ text-align:center; padding:48px 24px; display:flex; flex-direction:column; align-items:center; gap:14px; }
.empty-icon{
  width:64px; height:64px; border-radius:50%;
  background:var(--green-soft); color:var(--pine);
  display:flex; align-items:center; justify-content:center;
}
.empty-state .text-soft{ max-width:420px; }

/* ------------------------------------------------------------ kyc / profil */

.kyc-grid, .profile-grid{ grid-template-columns:1fr 1fr; }
.kyc-form{ width:100%; margin-top:10px; display:flex; flex-direction:column; gap:12px; }
.kyc-form input[type=file]{ border:1px dashed var(--line-strong); border-radius:var(--radius-sm); padding:18px 14px; font-size:13.5px; color:var(--ink-soft); background:var(--bg); }
.kyc-form .btn{ align-self:flex-start; }
.kyc-filename{ font-size:13px; }

/* ------------------------------------------------------------ bottom-nav mobile */

.bottom-nav{ display:none; }

/* La barre du bas apparaît dès que le menu latéral se replie, et non plus sous
   600 px seulement. Entre 600 et 980 px — tablette, téléphone à l'horizontale —
   le menu était déjà caché derrière le burger alors que la barre ne s'affichait
   pas encore : il n'y avait plus aucune navigation visible. La messagerie la
   masque toujours (.is-chat), c'est voulu. */
@media (max-width:980px){
  .bottom-nav{
    display:flex; position:fixed; bottom:0; left:0; right:0; z-index:45;
    background:var(--bg-panel); border-top:1px solid var(--line);
    padding:6px 0 max(6px, env(safe-area-inset-bottom));
  }
  .bottom-nav-item{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
    font-size:10.5px; font-weight:600; color:var(--ink-faint); padding:6px 0;
  }
  .bottom-nav-item.active{ color:var(--pine); }
  .dash-content{ padding-bottom:90px; }   /* le contenu ne passe pas sous la barre */
}

/* ------------------------------------------------------------ responsive */

@media (max-width:980px){
  .sidebar{ transform:translateX(-100%); transition:transform .25s ease; box-shadow:var(--shadow-float); }
  .sidebar.open{ transform:translateX(0); }
  .dash-main{ margin-left:0; }
  .topbar-burger{ display:flex; }
  .dash-grid{ grid-template-columns:1fr 1fr; }
  .kyc-grid, .profile-grid{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  .dash-topbar{ padding:12px 16px; gap:10px; }
  .dash-content{ padding:24px 16px 90px; }
  .topbar-title{ display:none; }
  .topbar-user-info{ display:none; }
  /* L'interrupteur de thème quitte la barre du haut : la place y est comptée
     — le titre et le nom du client en partent déjà — et la barre latérale en
     porte un. app.css étant également chargée par l'administration, la règle
     vaut pour les deux espaces, qui ont tous deux leur interrupteur au bas de
     leur barre latérale. */
  .dash-topbar .theme-bar{ display:none; }
  /* Le sélecteur de langue reste visible sur mobile : il y était masqué faute
     de place, ce qui privait le client d'un choix. Sa version compacte
     (drapeau + code) tient dans la barre, et son panneau devient une feuille. */
  .topbar-dd{ width:calc(100vw - 32px); position:fixed; top:64px; right:16px; }
  .dash-grid{ grid-template-columns:1fr; }
  .verify-banner-inner{ flex-direction:column; align-items:flex-start; padding:10px 16px; }
}

/* ------------------------------------------------------------ auth split (Eurofunded) */

@media (min-width:860px){
  /* Au-delà de 860 px, la colonne verte reprend le rôle du décor : on l'efface,
     sinon deux fonds se superposeraient derrière le formulaire. */
  .auth-body::before{ display:none; }
  .auth-body .auth-card{ box-shadow:none; }

  .auth-body.auth-split{ padding:0; height:100vh; height:100dvh; overflow:hidden; align-items:stretch; }
  /* Hauteur figée et minmax(0,…) sur les colonnes : sans lui, une colonne en
     « fr » ne descend jamais sous la largeur de son contenu, et un formulaire
     un peu large repoussait la moitié verte en décalant toute la page. */
  .auth-split .auth-wrap{
    max-width:none; width:100%; height:100%;
    display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
    overflow:hidden;
  }
  .auth-split .auth-aside{
    display:flex; flex-direction:column; justify-content:center;
    height:100%; padding:64px; color:#fff;
    background:
      radial-gradient(900px 380px at 15% 12%, rgba(47,143,91,.32), transparent 60%),
      radial-gradient(820px 400px at 100% 100%, rgba(201,162,75,.16), transparent 60%),
      linear-gradient(155deg, var(--surface-deep) 0%, #063127 55%, var(--pine) 130%);
    position:relative; overflow:hidden;
  }
  .auth-split .auth-aside::before{
    content:""; position:absolute; inset:0;
    background-image:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size:44px 44px;
    -webkit-mask-image:radial-gradient(70% 70% at 40% 40%, #000, transparent 100%);
    mask-image:radial-gradient(70% 70% at 40% 40%, #000, transparent 100%);
    pointer-events:none;
  }
  .auth-split .auth-aside > *{ position:relative; z-index:1; }
  .auth-split .auth-aside-foot{ position:absolute; left:64px; bottom:40px; z-index:1; }
  /* Seule cette colonne défile : la moitié verte reste immobile pendant que
     le client remplit le formulaire.
     « safe center » centre le contenu court sans jamais rendre le haut
     inatteignable quand il déborde — ce que ferait un centrage ordinaire.
     scrollbar-gutter réserve la barre pour que son apparition ne décale rien. */
  /* La colonne du formulaire reçoit le MÊME décor que la version mobile — les
     deux mêmes halos, vert puis doré — au lieu d'un aplat uni. Ils passent par
     --green-soft et --gold-soft, donc ils suivent le thème : doux et chaleureux
     en clair, profonds en sombre, sans règle propre à chaque mode. */
  .auth-split .auth-card-col{
    display:flex; flex-direction:column; align-items:center;
    justify-content:safe center;
    height:100%; overflow-y:auto; overscroll-behavior:contain;
    scrollbar-gutter:stable; padding:96px 40px 48px;
    background:
      radial-gradient(900px 520px at 72% -12%, var(--green-soft), transparent 62%),
      radial-gradient(760px 440px at 112% 112%, var(--gold-soft), transparent 58%),
      var(--bg);
  }
  /* La carte se matérialise comme en mobile : sur un fond qui a désormais de la
     matière, un formulaire posé à nu s'y dissout. */
  .auth-split .auth-card{
    width:100%; max-width:440px; padding:32px;
    background:var(--bg-panel); border:1px solid var(--line);
    border-radius:var(--radius-lg);
    box-shadow:0 24px 60px -30px rgba(7,51,40,.35), 0 2px 8px rgba(7,51,40,.05);
  }
  :root[data-theme="dark"] .auth-split .auth-card{
    box-shadow:0 24px 60px -28px rgba(0,0,0,.8), 0 2px 10px rgba(0,0,0,.4);
  }
  .auth-split .auth-logo{ margin-bottom:28px; }

  /* Les réglages passent À DROITE, du côté où l'on agit : posés sur la colonne
     décorative, ils désignaient du contenu passif et obligeaient l'œil à
     traverser la page pour les retrouver.
     fixed et non absolute : .auth-card-col porte overflow-y:auto, une barre en
     absolue y défilerait avec un formulaire d'inscription long et sortirait de
     l'écran. La colonne touchant le bord droit, right:40px l'aligne exactement
     sur la gouttière du formulaire (padding:… 40px) — la symétrie est obtenue
     par construction, pas par réglage. */
  .auth-split .auth-bar{
    display:flex; position:fixed; top:30px; right:40px; left:auto;
    width:auto; max-width:none; margin:0;
    justify-content:flex-end; gap:12px;
  }
  .auth-split .auth-lang{ position:static; }
}
.auth-aside{ display:none; }
.auth-aside > div:first-child{ max-width:420px; }
.auth-aside-eyebrow{ font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--mint-glow); margin-bottom:18px; }
.auth-aside h2{ font-family:var(--font-display); font-weight:600; font-size:36px; color:#fff; line-height:1.12; margin-bottom:18px; letter-spacing:-.01em; }
.auth-aside p{ color:rgba(255,255,255,.72); font-size:15px; line-height:1.65; max-width:400px; }
.auth-aside-points{ list-style:none; padding:0; margin:30px 0 0; display:flex; flex-direction:column; gap:15px; }
.auth-aside-points li{ display:flex; align-items:center; gap:12px; font-size:14.5px; color:rgba(255,255,255,.92); }
.auth-aside-points svg{ color:var(--mint-glow); flex-shrink:0; }
.auth-aside-foot{ font-size:12.5px; color:rgba(255,255,255,.45); }


/* ============================================================
   Lot 3 — Demandes de crédit (stepper, sliders, timeline, détail)
   ============================================================ */

/* segmented control (partagé formulaire demande) */
.sim-mode{
  display:flex; gap:4px; background:var(--bg); border:1px solid var(--line);
  border-radius:var(--radius-pill); padding:4px; width:max-content; max-width:100%;
}
.sim-mode button{
  border:none; background:none; cursor:pointer;
  padding:9px 20px; border-radius:var(--radius-pill);
  font-family:var(--font-body); font-size:13.5px; font-weight:600; color:var(--ink-soft);
  transition:background .14s ease, color .14s ease;
}
.sim-mode button.active{ background:var(--pine); color:#fff; box-shadow:var(--shadow-card); }

/* stepper */
.demande-form{ max-width:640px; }
.stepper{ display:flex; gap:8px; margin-bottom:28px; }
.stepper-step{
  flex:1; display:flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; color:var(--ink-faint);
  padding-bottom:12px; border-bottom:2px solid var(--line);
}
.stepper-num{
  width:24px; height:24px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--line); color:var(--bg-panel); font-size:12px; font-weight:700;
}
.stepper-step.active{ color:var(--pine-deep); border-bottom-color:var(--gold); }
.stepper-step.active .stepper-num{ background:var(--pine); }
.stepper-step.done{ color:var(--green-mid); border-bottom-color:var(--green-mid); }
.stepper-step.done .stepper-num{ background:var(--green-mid); }

.demande-panel{ display:none; }
.demande-panel.active{ display:block; animation:fadeIn .18s ease; }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }

.demande-field{ margin-top:18px; }
.sim-field-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.sim-field-head output{ font-weight:600; color:var(--pine-deep); }
input[type=range]{
  width:100%; -webkit-appearance:none; appearance:none; height:6px; border-radius:999px;
  background:var(--line-strong); outline:none; padding:0; border:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:22px; height:22px; border-radius:50%;
  background:var(--pine); border:3px solid #fff; box-shadow:var(--shadow-card); cursor:pointer;
}
input[type=range]::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%;
  background:var(--pine); border:3px solid #fff; box-shadow:var(--shadow-card); cursor:pointer;
}

.demande-est{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:22px; padding:16px 18px; border-radius:var(--radius);
  background:var(--green-soft); color:var(--pine-deep); font-size:14px; font-weight:500;
}
.demande-est strong{ font-size:24px; }

.demande-nav{ display:flex; justify-content:space-between; align-items:center; margin-top:26px; gap:12px; }

.demande-recap{ margin:18px 0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.demande-recap-row{ padding:12px 16px; border-bottom:1px solid var(--line); font-weight:600; color:var(--pine-deep); }
.demande-recap-row:last-child{ border-bottom:none; }

/* détail demande (client + admin) */
.demande-detail{ display:grid; grid-template-columns:1.4fr 1fr; gap:18px; align-items:start; }
.demande-detail > div{ min-width:0; }
.kv{ display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-bottom:1px solid var(--line); font-size:14px; }
.kv:last-child{ border-bottom:none; }
.kv > span:first-child{ color:var(--ink-soft); }
.kv-block{ flex-direction:column; gap:6px; }
.kv-block p{ margin:0; color:var(--ink); }

/* timeline */
.timeline{ list-style:none; margin:0; padding:0; position:relative; }
.timeline-item{ position:relative; padding:0 0 20px 26px; }
.timeline-item:not(:last-child)::before{
  content:""; position:absolute; left:6px; top:16px; bottom:0; width:2px; background:var(--line);
}
.timeline-dot{
  position:absolute; left:0; top:4px; width:14px; height:14px; border-radius:50%;
  background:#fff; border:3px solid var(--green-mid);
}
.timeline-status{ margin:0; font-weight:600; font-size:14px; color:var(--pine-deep); }
.timeline-note{ margin:4px 0 0; font-size:13.5px; color:var(--ink-soft); }
.timeline-time{ margin:4px 0 0; font-size:12px; color:var(--ink-faint); }

@media (max-width:860px){
  .demande-detail{ grid-template-columns:1fr; }
}

/* ============================================================
   Popup « Nouvelle demande » (workflow Eurofunded, thème pin/or)
   ============================================================ */
.modal-overlay{
  position:fixed; inset:0; z-index:100;
  background:rgba(7,51,40,.55); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; visibility:hidden; transition:opacity .18s ease;
}
.modal-overlay.open{ opacity:1; visibility:visible; }
.modal{
  width:100%; max-width:720px; max-height:92vh; overflow-y:auto;
  background:var(--bg-panel); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-float);
  transform:translateY(12px) scale(.98); transition:transform .2s ease;
}
.modal-overlay.open .modal{ transform:none; }
.modal-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:24px 28px 0;
}
.modal-title{ font-size:24px; color:var(--pine-deep); margin:4px 0 0; }
.modal-close{
  flex-shrink:0; width:38px; height:38px; border-radius:50%;
  border:1px solid var(--line); background:var(--bg); color:var(--ink-soft);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.modal-close:hover{ border-color:var(--pine); color:var(--pine-deep); }
.modal-body{ padding:18px 28px 28px; }
.modal-intro{ color:var(--ink-soft); font-size:14.5px; margin:0 0 18px; }
.modal-body .sim-mode{ margin-bottom:18px; }
.modal-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:16px; align-items:start; }
.modal-field{ margin-top:16px; }
.modal-summary{
  /* --surface-deep et non --pine-deep : ce dernier s'inverse en sombre pour les
     titres, et le récapitulatif du simulateur virait au blanc, texte blanc. */
  background:var(--surface-deep); border-radius:var(--radius); padding:20px; color:#fff;
  align-self:stretch; display:flex; flex-direction:column; justify-content:center;
}
.modal-monthly-label{ font-size:12.5px; color:rgba(255,255,255,.6); text-transform:uppercase; letter-spacing:.04em; font-weight:600; }
.modal-monthly{ font-size:34px; font-weight:600; margin:4px 0 14px; }
.modal-sumrow{ display:flex; justify-content:space-between; font-size:13px; padding:7px 0; border-top:1px solid rgba(255,255,255,.1); }
.modal-sumrow span:first-child{ color:rgba(255,255,255,.6); }
.modal-foot{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-top:20px; }
.modal-foot-btns{ display:flex; gap:10px; margin-left:auto; }
@media (max-width:600px){
  .modal-grid{ grid-template-columns:1fr; }
  .modal-summary{ order:-1; }
  .modal-head{ padding:20px 18px 0; }
  .modal-body{ padding:16px 18px 22px; }
  .modal-foot-btns{ width:100%; }
  .modal-foot-btns .btn{ flex:1; }
}

/* tableau d'amortissement dans le popup demande */
.modal-schedule{ margin:4px 0 16px; }
.modal-schedule .sim-schedule-title{ font-size:12.5px; font-weight:600; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px; }
.modal-schedule table{ width:100%; border-collapse:collapse; font-size:13px; }
.modal-schedule th{ text-align:left; color:var(--ink-faint); font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; padding:6px 8px; border-bottom:1px solid var(--line); }
.modal-schedule td{ padding:8px; border-bottom:1px solid var(--line); font-family:var(--font-mono); font-size:12.5px; }
.modal-schedule tr:last-child td{ border-bottom:none; }

/* Zone défilante : 6 échéances sont générées, la hauteur reste celle de ~3
   lignes pour que la carte du popup ne grandisse pas. L'en-tête reste visible
   pendant le défilement. */
.modal-schedule-scroll{
  max-height:132px; overflow-y:auto; overscroll-behavior:contain;
  border:1px solid var(--line); border-radius:var(--radius-sm);
  -webkit-overflow-scrolling:touch;
}
.modal-schedule-scroll table{ margin:0; }
.modal-schedule-scroll thead th{
  position:sticky; top:0; z-index:1;
  background:var(--bg-panel); border-bottom:1px solid var(--line);
}
.modal-schedule-scroll td{ border-bottom:1px solid var(--line-soft, var(--line)); }
/* barre de défilement discrète, dans la charte */
.modal-schedule-scroll{ scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent; }
.modal-schedule-scroll::-webkit-scrollbar{ width:8px; }
.modal-schedule-scroll::-webkit-scrollbar-track{ background:transparent; }
.modal-schedule-scroll::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:999px; border:2px solid var(--bg-panel); }
.modal-schedule-scroll::-webkit-scrollbar-thumb:hover{ background:var(--ink-faint); }

/* ============================================================
   Lot 5 — Compte bancaire (carte solde + IBAN)
   ============================================================ */
.account-card{
  border-radius:var(--radius-lg); padding:26px 28px; margin-bottom:20px; color:#fff;
  background:
    radial-gradient(600px 240px at 90% -20%, rgba(201,162,75,.28), transparent 60%),
    linear-gradient(150deg, var(--surface-deep) 0%, var(--pine) 70%, var(--green-mid) 160%);
  box-shadow:var(--shadow-card);
}
.account-card-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.account-card-label{ font-size:13px; color:rgba(255,255,255,.7); text-transform:uppercase; letter-spacing:.05em; font-weight:600; }
.account-badge{ background:rgba(124,227,166,.18); color:var(--mint-glow); font-size:12px; font-weight:700; padding:4px 11px; border-radius:999px; }
.account-balance{ font-size:40px; font-weight:600; letter-spacing:-.01em; margin-bottom:22px; }
.account-iban{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding-top:16px; border-top:1px solid rgba(255,255,255,.12); }
.account-iban-label{ font-size:12px; color:rgba(255,255,255,.6); text-transform:uppercase; letter-spacing:.06em; font-weight:600; }
.account-iban-value{ font-size:16px; letter-spacing:.02em; }
.account-copy{
  background:rgba(255,255,255,.12); color:#fff; border:none; cursor:pointer;
  font-family:var(--font-body); font-size:12.5px; font-weight:600;
  padding:6px 12px; border-radius:var(--radius-pill); transition:background .14s ease;
}
.account-copy:hover{ background:rgba(255,255,255,.22); }

/* carte d'accès PoziPay sur le dashboard */
.pay-entry{
  color:#fff; border:none; text-align:left;
  background:
    radial-gradient(420px 180px at 90% -30%, rgba(201,162,75,.3), transparent 60%),
    linear-gradient(150deg, var(--surface-deep) 0%, var(--pine) 70%, var(--green-mid) 170%);
  transition:transform .16s ease, box-shadow .16s ease;
}
.pay-entry:hover{ transform:translateY(-3px); box-shadow:var(--shadow-float); }
.pay-entry h3{ color:#fff; font-family:var(--font-display); }
.pay-entry p{ color:rgba(255,255,255,.72); font-size:13.5px; margin:0; }
.pay-entry-mark{ width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.14); color:#fff; margin-bottom:14px; }

/* codes de virement admin (bleu = autorise, rouge = rejette) */
.admin-codes-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.admin-code{ border-radius:var(--radius); padding:14px; display:flex; flex-direction:column; gap:2px; border:1px solid var(--line); }
.admin-code.blue{ background:rgba(37,99,235,.07); border-color:rgba(37,99,235,.25); }
.admin-code.red{ background:rgba(220,38,38,.06); border-color:rgba(220,38,38,.22); }
.admin-code-tag{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.admin-code.blue .admin-code-tag{ color:#1d4ed8; }
.admin-code.red .admin-code-tag{ color:#b91c1c; }
.admin-code-val{ font-family:var(--font-display); font-weight:700; font-size:30px; letter-spacing:6px; color:var(--pine-deep); }
.admin-code-hint{ font-size:11.5px; color:var(--ink-faint); }
@media (max-width:520px){ .admin-codes-row{ grid-template-columns:1fr; } }

/* ------------------------------------------------------------ cadran OTP + anti-spam + oeil mot de passe */
.otp-cadran{
  width:100%; text-align:center; font-family:var(--font-mono); font-weight:600;
  font-size:clamp(24px,6vw,30px); letter-spacing:14px;
  padding:18px 6px 18px 20px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--bg); color:var(--pine-deep);
}
.otp-cadran::placeholder{ color:var(--ink-faint); }
.otp-cadran:focus{ border-color:var(--pine); box-shadow:0 0 0 4px rgba(47,143,91,.12); outline:none; }

.otp-spam{ display:flex; gap:10px; align-items:flex-start; margin-top:16px; padding:12px 14px; border-radius:var(--radius-sm); background:var(--green-soft); color:var(--pine); font-size:12.5px; line-height:1.5; }
.otp-spam svg{ width:18px; height:18px; flex-shrink:0; margin-top:1px; }
.otp-spam b{ font-weight:600; }

.pw-field{ position:relative; }
.pw-field input{ padding-right:46px; }
.pw-toggle{ position:absolute; top:0; right:4px; height:100%; width:38px; border:none; background:none; cursor:pointer; color:var(--ink-faint); display:flex; align-items:center; justify-content:center; }
.pw-toggle:hover{ color:var(--pine); }
.pw-toggle svg{ width:20px; height:20px; }

/* ------------------------------------------------------------ finitions premium admin */
/* Actions de tableau : formulaires en ligne (sinon ils s'empilent et cassent la rangée). */
.admin-actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.admin-actions form{ margin:0; display:inline-flex; align-items:center; }
.admin-actions input[type="number"], .admin-actions select{ height:38px; }
/* KPI admin : élévation vivante au survol. */
.stat-tile{ transition:transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .18s ease, border-color .18s ease; }
.stat-tile:hover{ transform:translateY(-2px); box-shadow:0 18px 36px -22px rgba(7,51,40,.32); border-color:var(--line-strong); }
/* Messagerie admin (bulles). */
.admin-chat{ max-height:340px; overflow-y:auto; display:flex; flex-direction:column; gap:10px; padding:4px; }
.admin-msg{ max-width:78%; display:flex; flex-direction:column; gap:3px; }
.admin-msg.them{ align-self:flex-start; align-items:flex-start; }
.admin-msg.me{ align-self:flex-end; align-items:flex-end; }
.admin-msg-bubble{ padding:10px 14px; border-radius:14px; font-size:13.5px; line-height:1.45; }
.admin-msg.them .admin-msg-bubble{ background:var(--bg); border:1px solid var(--line); border-bottom-left-radius:4px; color:var(--ink); }
.admin-msg.me .admin-msg-bubble{ background:var(--pine); color:#fff; border-bottom-right-radius:4px; }
.admin-msg-time{ font-size:10.5px; color:var(--ink-faint); }

/* ============================================================
   PASSE PREMIUM — panel admin & espace client
   Densité maîtrisée, profondeur douce, hiérarchie typographique nette.
   ============================================================ */

/* ---- en-tête de page : filet or + respiration ---- */
.app-head{ position:relative; padding-bottom:18px; margin-bottom:24px; border-bottom:1px solid var(--line); }
.app-head::after{ content:""; position:absolute; left:0; bottom:-1px; width:56px; height:3px; border-radius:3px; background:linear-gradient(90deg, var(--pine), var(--gold)); }
.app-head .text-soft{ margin:0; }
.app-title{ letter-spacing:-.015em; }

/* ---- cartes : titres de section normalisés ---- */
.card > h3:first-child{ font-size:15px; font-weight:700; color:var(--pine-deep); letter-spacing:-.005em; margin-bottom:4px; }
.card > h3:first-child + .text-soft{ margin-bottom:14px; }

/* ---- tables premium : en-tête teinté, lignes vivantes, chiffres alignés ---- */
.table{ font-variant-numeric:tabular-nums; }
.table thead th{
  background:linear-gradient(180deg, var(--bg) 0%, rgba(246,248,244,.6) 100%);
  font-size:11px; letter-spacing:.06em; color:var(--ink-soft);
  padding:13px 18px; white-space:nowrap; position:sticky; top:0; z-index:1;
}
.table td{ padding:14px 18px; color:var(--ink); vertical-align:middle; }
.table tbody tr{ transition:background .14s ease, box-shadow .14s ease; }
.table tbody tr:hover td{ background:var(--bg); }
.table tbody tr:hover td:first-child{ box-shadow:inset 3px 0 0 var(--pine); }
.table td .num, .table td.num{ font-family:var(--font-mono); font-size:13px; }
.admin-table-wrap{ border-radius:var(--radius); overflow:auto; max-height:none; }
.admin-table-wrap .table{ border:none; border-radius:0; }

/* ---- badges : pastille + contour, lisibles d'un coup d'œil ---- */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 11px; border-radius:var(--radius-pill);
  font-size:11.5px; font-weight:700; letter-spacing:.01em;
  border:1px solid transparent; white-space:nowrap;
}
.badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0; }
.badge-pending { border-color:rgba(184,134,47,.25); }
.badge-approved{ border-color:rgba(31,122,77,.25); }
.badge-rejected{ border-color:rgba(178,59,59,.25); }
.badge-late    { border-color:rgba(193,66,26,.25); }
.b-success{ background:var(--status-approved-bg); color:var(--status-approved-text); border-color:rgba(31,122,77,.25); }
.b-danger { background:var(--status-rejected-bg); color:var(--status-rejected-text); border-color:rgba(178,59,59,.25); }
.b-warning{ background:var(--status-pending-bg);  color:var(--status-pending-text); border-color:rgba(184,134,47,.25); }
.b-neutral{ background:var(--bg); color:var(--ink-soft); border-color:var(--line); }
.b-blue   { background:var(--green-soft); color:var(--pine); border-color:rgba(11,79,60,.18); }

/* ---- KPI : icône + valeur + tendance (modèle premium) ---- */
.stat-row{ gap:18px; }
.stat-tile{ position:relative; overflow:hidden; padding:22px; }
.stat-tile::after{ content:""; position:absolute; right:-30px; top:-30px; width:110px; height:110px; border-radius:50%; background:radial-gradient(circle, rgba(201,162,75,.10), transparent 70%); }
.stat-tile .stat-label{ font-size:11.5px; letter-spacing:.06em; }
.stat-tile .stat-value{ font-family:var(--font-display); font-size:clamp(26px,2.6vw,32px); font-weight:700; letter-spacing:-.02em; line-height:1.1; }
.stat-tile .stat-trend{ display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:600; margin-top:8px; }
.stat-tile .stat-trend.up{ color:var(--status-approved-text); }
.stat-tile .stat-trend.down{ color:var(--status-rejected-text); }
.stat-tile a.stat-more{ display:inline-flex; align-items:center; gap:4px; margin-top:10px; font-size:12.5px; font-weight:600; color:var(--pine); }

/* ---- états vides : plus élégants ---- */
.empty-state{ padding:56px 24px; }
.empty-icon{ box-shadow:0 12px 26px -14px rgba(11,79,60,.4); }

/* ---- formulaires admin : champs alignés sur la hauteur des boutons ---- */
.card input[type="text"], .card input[type="email"], .card input[type="number"],
.card input[type="date"], .card select, .card textarea{
  border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--bg-panel);
  padding:11px 14px; font-family:var(--font-body); font-size:14px; color:var(--ink); width:100%;
  transition:border-color .14s ease, box-shadow .14s ease;
}
.card input:focus, .card select:focus, .card textarea:focus{ outline:none; border-color:var(--pine); box-shadow:0 0 0 3px rgba(47,143,91,.12); }
.card label{ display:block; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:6px; }

@media (max-width:640px){
  .table thead th, .table td{ padding:11px 12px; }
  .app-head{ padding-bottom:14px; margin-bottom:18px; }
}

/* ============================================================
   TABLEAU DE BORD CLIENT — version premium
   Carte principale sombre + indicateurs + activité + répartition.
   ============================================================ */

/* Deux colonnes INDÉPENDANTES (et non une grille à lignes partagées) : sinon la
   hauteur des indicateurs de droite étire la ligne et creuse un vide sous la
   carte principale avant « Activité récente ». */
.dash-cols{ display:grid; grid-template-columns:1.75fr 1fr; gap:20px; align-items:start; }
.dash-col{ min-width:0; display:flex; flex-direction:column; gap:20px; }

.dash-hero-grid{ display:grid; grid-template-columns:1.75fr 1fr; gap:20px; margin-bottom:20px; align-items:start; }
.dash-hero-grid > *{ min-width:0; }
.dash-bottom{ grid-template-columns:1.75fr 1fr; margin-bottom:0; }

/* ---- carte principale ---- */
.dash-hero{
  position:relative; overflow:hidden; border-radius:var(--radius-lg); padding:30px 32px; color:#fff;
  background:
    radial-gradient(620px 260px at 92% -25%, rgba(201,162,75,.34), transparent 62%),
    linear-gradient(155deg, var(--surface-deep) 0%, var(--pine) 62%, #0E5D45 130%);
  box-shadow:0 28px 56px -28px rgba(7,51,40,.62);
  animation:heroPop .5s cubic-bezier(.2,.7,.2,1);
  min-height:280px; display:flex; flex-direction:column;
}
.dash-hero::after{ content:""; position:absolute; right:-70px; bottom:-110px; width:300px; height:300px; border-radius:50%; background:rgba(255,255,255,.045); }
.dash-hero > *{ position:relative; z-index:1; }
.dash-hero-label{ font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.62); }
.dash-hero-amount{ font-family:var(--font-display); font-size:clamp(34px,4.6vw,50px); font-weight:700; letter-spacing:-.02em; line-height:1.05; margin:8px 0 10px; }
.dash-hero-meta{ font-size:12.5px; color:rgba(255,255,255,.55); letter-spacing:.02em; }
.dash-hero-progress{ margin-top:20px; max-width:460px; }
.dash-hero-bar{ height:7px; border-radius:999px; background:rgba(255,255,255,.14); overflow:hidden; }
.dash-hero-bar span{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg, var(--mint-glow), var(--gold)); transition:width .8s cubic-bezier(.2,.7,.2,1); }
.dash-hero-progress-txt{ margin-top:8px; font-size:12.5px; color:rgba(255,255,255,.6); }
.dash-hero-progress-txt .late{ color:#FFC9C9; }
.dash-hero-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:auto; padding-top:24px; }
.dash-hero-btn{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 18px;
  border-radius:var(--radius-pill); border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.10); color:#fff; cursor:pointer;
  font-family:var(--font-body); font-size:13.5px; font-weight:600; text-decoration:none;
  transition:background .16s ease, transform .16s ease;
}
.dash-hero-btn svg{ width:17px; height:17px; }
.dash-hero-btn:hover{ background:rgba(255,255,255,.19); color:#fff; transform:translateY(-1px); }
.dash-hero-btn.primary{ background:var(--gold); color:var(--surface-deep); border-color:transparent; box-shadow:0 10px 22px -10px rgba(201,162,75,.75); }
.dash-hero-btn.primary:hover{ background:#D6B45E; color:var(--surface-deep); }

/* ---- indicateurs ---- */
.dash-side{ display:flex; flex-direction:column; gap:16px; }
.dash-stat{
  background:var(--bg-panel); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-card); padding:18px 20px;
  transition:transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .18s ease, border-color .18s ease;
}
.dash-stat:hover{ transform:translateY(-2px); box-shadow:0 18px 36px -22px rgba(7,51,40,.36); border-color:var(--line-strong); }
.dash-stat-ico{ display:flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:12px; margin-bottom:12px; background:var(--green-soft); color:var(--pine); }
.dash-stat-ico svg{ width:21px; height:21px; }
.dash-stat-ico.gold{ background:var(--gold-soft); color:var(--status-pending-text); }
.dash-stat-ico.ok{ background:var(--status-approved-bg); color:var(--status-approved-text); }
.dash-stat-ico.warn{ background:var(--status-pending-bg); color:var(--status-pending-text); }
.dash-stat-label{ font-size:12px; color:var(--ink-soft); margin-bottom:3px; }
.dash-stat-value{ font-family:var(--font-display); font-size:24px; font-weight:700; color:var(--pine-deep); letter-spacing:-.015em; line-height:1.15; }
.dash-stat-trend{ margin-top:6px; font-size:12px; color:var(--ink-faint); }
.dash-stat-link{ font-weight:600; color:var(--pine); }

/* ---- sections basses ---- */
.card-flat{ padding:22px 24px; }
.dash-sec-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.dash-sec-head h3{ margin:0; font-size:16px; font-weight:700; color:var(--pine-deep); }
.dash-seeall{ font-size:13px; font-weight:600; color:var(--pine); }

.dash-act{ list-style:none; margin:0; padding:0; }
.dash-act li{ border-bottom:1px solid var(--line); animation:txIn .34s ease backwards; animation-delay:calc(var(--i,0) * .05s); }
.dash-act li:last-child{ border-bottom:none; }
.dash-act a{ display:flex; align-items:center; gap:14px; padding:13px 4px; text-decoration:none; border-radius:var(--radius-sm); transition:background .14s ease; }
.dash-act a:hover{ background:var(--bg); }
.dash-act-ico{ display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; flex-shrink:0; background:var(--green-soft); color:var(--pine); }
.dash-act-ico svg{ width:18px; height:18px; }
.dash-act-ico.in{ background:var(--status-approved-bg); color:var(--status-approved-text); }
.dash-act-ico.out{ background:var(--bg); color:var(--ink-soft); }
.dash-act-body{ flex:1; min-width:0; display:flex; flex-direction:column; }
.dash-act-body b{ font-size:14px; font-weight:600; color:var(--ink); }
.dash-act-body em{ font-style:normal; font-size:11.5px; color:var(--ink-faint); }
.dash-act-meta{ font-size:13px; font-weight:600; color:var(--ink-soft); white-space:nowrap; }
.dash-act-meta.in{ color:var(--status-approved-text); }

.dash-empty{ text-align:center; padding:26px 12px; display:flex; flex-direction:column; align-items:center; gap:12px; }
.dash-empty-ico{ display:flex; align-items:center; justify-content:center; width:54px; height:54px; border-radius:50%; background:var(--green-soft); color:var(--pine); }
.dash-empty-ico svg{ width:24px; height:24px; }
.dash-empty p{ margin:0; color:var(--ink-soft); font-size:13.5px; max-width:260px; }

.dash-donut-wrap{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.dash-donut{ width:160px; height:160px; flex-shrink:0; }
.dash-legend{ display:flex; flex-direction:column; gap:11px; flex:1; min-width:140px; }
.dash-legend-item{ display:flex; align-items:center; gap:10px; }
.dash-legend-dot{ width:11px; height:11px; border-radius:3px; flex-shrink:0; }
.dash-legend-label{ font-size:13px; color:var(--ink-soft); flex:1; }
.dash-legend-val{ font-size:13px; font-weight:700; color:var(--pine-deep); }

@media (max-width:980px){
  .dash-hero-grid, .dash-bottom{ grid-template-columns:1fr; }
  .dash-side{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
  /* une colonne : display:contents remet les 4 blocs à plat pour garder
     l'ordre d'origine (carte principale, indicateurs, activité, répartition)

     align-items:stretch est indispensable : la règle desktop pose
     align-items:start pour la grille à deux colonnes, et cette valeur survit
     au passage en flex-direction:column, où l'axe transversal devient
     l'horizontale. Les cartes prenaient alors la largeur de leur contenu —
     « Activité récente » restait serrée au lieu de tenir la pleine largeur. */
  .dash-cols{ display:flex; flex-direction:column; gap:20px; align-items:stretch; }
  .dash-col{ display:contents; }
  .dash-hero{ order:1; }
  .dash-side{ order:2; }
  .dash-col:first-child > .card{ order:3; }
  .dash-col:last-child > .card{ order:4; }
}
@media (max-width:700px){
  .dash-side{ grid-template-columns:1fr; }
  .dash-hero{ padding:24px 20px; min-height:0; }
  .dash-hero-actions{ padding-top:20px; }
  .dash-hero-btn{ flex:1 1 auto; justify-content:center; }
}

/* ============================================================
   MES DEMANDES — synthèse + dossiers en cartes avec parcours
   ============================================================ */

.dem-summary{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; margin-bottom:20px; box-shadow:var(--shadow-card);
}
.dem-sum-item{ background:var(--bg-panel); padding:18px 22px; display:flex; flex-direction:column; gap:4px; }
.dem-sum-label{ font-size:11.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); }
.dem-sum-item b{ font-family:var(--font-display); font-size:24px; font-weight:700; color:var(--pine-deep); letter-spacing:-.015em; }
.dem-sum-item b.granted{ color:var(--status-approved-text); }

.dem-list{ display:flex; flex-direction:column; gap:16px; }
.dem-card{
  background:var(--bg-panel); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card); padding:20px 22px;
  animation:txIn .34s ease backwards; animation-delay:calc(var(--i,0) * .06s);
  transition:transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .18s ease, border-color .18s ease;
}
.dem-card:hover{ transform:translateY(-2px); box-shadow:0 20px 40px -24px rgba(7,51,40,.38); border-color:var(--line-strong); }
.dem-card.closed{ opacity:.72; }

.dem-card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:16px; }
.dem-card-id{ display:flex; align-items:center; gap:13px; min-width:0; }
.dem-card-ico{ display:flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:13px; flex-shrink:0;
  background:linear-gradient(150deg, var(--pine) 0%, var(--green-mid) 130%); color:#fff;
  box-shadow:0 10px 22px -12px rgba(11,79,60,.7); }
.dem-card-ico svg{ width:22px; height:22px; }
.dem-card-id h3{ margin:0; font-size:16.5px; font-weight:700; color:var(--pine-deep); letter-spacing:-.01em; }
.dem-card-ref{ font-size:12px; color:var(--ink-faint); }

.dem-card-figures{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-bottom:18px; }
.dem-card-figures > div{ background:var(--bg); padding:12px 14px; display:flex; flex-direction:column; gap:2px; }
.dem-card-figures em{ font-style:normal; font-size:11px; color:var(--ink-soft); }
.dem-card-figures b{ font-size:15px; font-weight:700; color:var(--pine-deep); }

/* parcours du dossier */
.dem-steps{ display:flex; align-items:flex-start; gap:0; margin-bottom:16px; }
.dem-step{ flex:1; position:relative; display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center; }
.dem-step::before{ content:""; position:absolute; top:11px; left:-50%; width:100%; height:2px; background:var(--line); z-index:0; }
.dem-step:first-child::before{ display:none; }
.dem-step.done::before, .dem-step.current::before{ background:var(--green-mid); }
.dem-step-dot{ position:relative; z-index:1; width:23px; height:23px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--bg-panel); border:2px solid var(--line); color:#fff; }
.dem-step-dot svg{ width:12px; height:12px; }
.dem-step.done .dem-step-dot{ background:var(--green-mid); border-color:var(--green-mid); }
.dem-step.current .dem-step-dot{ background:var(--gold); border-color:var(--gold); box-shadow:0 0 0 4px var(--gold-soft); }
.dem-step-lbl{ font-size:11.5px; color:var(--ink-faint); line-height:1.25; max-width:96px; }
.dem-step.done .dem-step-lbl, .dem-step.current .dem-step-lbl{ color:var(--ink); font-weight:600; }

.dem-closed-note{ display:flex; align-items:center; gap:9px; padding:11px 14px; border-radius:var(--radius-sm);
  background:var(--status-rejected-bg); color:var(--status-rejected-text); font-size:13px; font-weight:600; margin-bottom:16px; }
.dem-closed-note svg{ width:18px; height:18px; flex-shrink:0; }
/* Réactiver une demande annulée : le bouton se range à droite du bandeau,
   sans repousser le motif de clôture. */
.dem-closed-note form{ margin-left:auto; }

.dem-card-foot{ display:flex; align-items:center; justify-content:flex-end; gap:14px; flex-wrap:wrap; }
.dem-hint{ font-size:12.5px; color:var(--status-pending-text); font-weight:600; margin-right:auto; }
.dem-hint.ok{ color:var(--status-approved-text); }

@media (max-width:760px){
  .dem-summary{ grid-template-columns:1fr; }
  .dem-card-figures{ grid-template-columns:1fr 1fr; }
  .dem-step-lbl{ font-size:10.5px; }
  .dem-card-foot{ justify-content:stretch; }
  .dem-card-foot .btn{ width:100%; }
  .dem-hint{ margin-right:0; width:100%; }
}

/* ============================================================
   VÉRIFICATION D'IDENTITÉ (KYC)
   ============================================================ */

/* bandeau d'état */
.kyc-hero{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:20px 24px; margin-bottom:22px; border-radius:var(--radius-lg);
  background:var(--bg-panel); border:1px solid var(--line); box-shadow:var(--shadow-card);
  border-left:4px solid var(--line-strong);
}
.kyc-hero-approved{ border-left-color:var(--green-mid); background:linear-gradient(90deg, var(--status-approved-bg), var(--bg-panel) 40%); }
.kyc-hero-pending{ border-left-color:var(--gold); background:linear-gradient(90deg, var(--gold-soft), var(--bg-panel) 40%); }
.kyc-hero-rejected{ border-left-color:var(--status-rejected-text); background:linear-gradient(90deg, var(--status-rejected-bg), var(--bg-panel) 40%); }
.kyc-hero-ico{ display:flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:50%; flex-shrink:0; background:var(--green-soft); color:var(--pine); }
.kyc-hero-ico svg{ width:26px; height:26px; }
.kyc-hero-approved .kyc-hero-ico{ background:var(--status-approved-bg); color:var(--status-approved-text); }
.kyc-hero-pending .kyc-hero-ico{ background:var(--gold-soft); color:var(--status-pending-text); }
.kyc-hero-rejected .kyc-hero-ico{ background:var(--status-rejected-bg); color:var(--status-rejected-text); }
.kyc-hero-body{ flex:1; min-width:220px; display:flex; flex-direction:column; gap:2px; }
.kyc-hero-body b{ font-family:var(--font-display); font-size:17px; color:var(--pine-deep); }
.kyc-hero-body span{ font-size:13.5px; color:var(--ink-soft); }
.kyc-hero-note{ font-style:normal; margin-top:6px; font-size:12.5px; color:var(--status-rejected-text); font-weight:600; }
.kyc-hero-steps{ display:flex; flex-direction:column; gap:6px; align-items:flex-end; min-width:120px; }
.kyc-hero-steps > span{ font-size:13px; font-weight:700; color:var(--pine-deep); }
.kyc-hero-bar{ width:120px; height:7px; border-radius:999px; background:var(--green-soft); overflow:hidden; }
.kyc-hero-bar span{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg, var(--green-mid), var(--gold)); transition:width .8s cubic-bezier(.2,.7,.2,1); }

/* cartes de dépôt
   minmax(0,1fr) et non 1fr : « 1fr » vaut minmax(auto,1fr), et ce minimum
   « auto » est la largeur min-content de la carte. Or celle-ci contient le nom
   du fichier déposé en white-space:nowrap — « Facture_EM01056679-217_2026…pdf »
   fait à lui seul 300 px. La piste de grille grossissait donc au-delà de la
   largeur de l'écran et la carte dépassait la marge droite, sur mobile comme
   sur un nom de fichier à rallonge en desktop. Le min-width:0 posé plus bas sur
   .kyc-file-body n'y change rien : il autorise le rétrécissement à la mise en
   page, il ne réduit pas le calcul de taille intrinsèque de la grille. */
.kyc-grid2{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; }
.kyc-card{
  background:var(--bg-panel); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card); padding:22px 24px; display:flex; flex-direction:column;
  transition:transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .18s ease, border-color .18s ease;
}
.kyc-card:hover{ transform:translateY(-2px); box-shadow:0 18px 36px -22px rgba(7,51,40,.34); border-color:var(--line-strong); }
.kyc-card.st-approved{ border-color:var(--green-mid); }
.kyc-card.st-rejected{ border-color:var(--status-rejected-text); }
.kyc-card-head{ display:flex; align-items:flex-start; gap:14px; margin-bottom:16px; }
.kyc-card-ico{ display:flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:13px; flex-shrink:0; background:var(--green-soft); color:var(--pine); }
.kyc-card-ico svg{ width:23px; height:23px; }
.kyc-card.st-approved .kyc-card-ico{ background:var(--status-approved-bg); color:var(--status-approved-text); }
.kyc-card-title{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.kyc-card-title b{ font-family:var(--font-display); font-size:16px; color:var(--pine-deep); }
.kyc-card-title em{ font-style:normal; font-size:12.5px; color:var(--ink-soft); line-height:1.45; }

/* fichier déposé */
.kyc-file{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:var(--radius-sm); background:var(--bg); margin-bottom:12px; }
.kyc-file-ico{ display:flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:10px; flex-shrink:0; font-family:var(--font-mono); font-size:11px; font-weight:700; }
.kyc-file-ico.pdf{ background:var(--status-rejected-bg); color:var(--status-rejected-text); }
.kyc-file-ico.img{ background:var(--green-soft); color:var(--pine); }
.kyc-file-body{ flex:1; min-width:0; display:flex; flex-direction:column; }
.kyc-file-body b{ font-size:13.5px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kyc-file-body em{ font-style:normal; font-size:11.5px; color:var(--ink-faint); }
.kyc-file-ok{ display:flex; color:var(--status-approved-text); flex-shrink:0; }
.kyc-file-ok svg{ width:20px; height:20px; }

.kyc-reject-note{ display:flex; gap:10px; padding:12px 14px; border-radius:var(--radius-sm); background:var(--status-rejected-bg); margin-bottom:12px; }
.kyc-reject-note svg{ width:18px; height:18px; flex-shrink:0; color:var(--status-rejected-text); }
.kyc-reject-note p{ margin:0; font-size:12.5px; color:var(--ink); line-height:1.5; }

/* zone de dépôt */
.kyc-form{ margin-top:auto; display:flex; flex-direction:column; gap:12px; }
.kyc-drop{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  padding:26px 18px; border-radius:var(--radius); cursor:pointer; text-align:center;
  border:2px dashed var(--line-strong); background:var(--bg);
  transition:border-color .16s ease, background .16s ease, transform .16s ease;
}
.kyc-drop:hover{ border-color:var(--pine); background:var(--green-soft); }
.kyc-drop.over{ border-color:var(--pine); background:var(--green-soft); transform:scale(1.01); }
.kyc-drop.filled{ border-style:solid; border-color:var(--green-mid); background:var(--status-approved-bg); }
.kyc-drop.error{ border-color:var(--status-rejected-text); background:var(--status-rejected-bg); }
.kyc-drop-ico{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:var(--bg-panel); color:var(--pine); box-shadow:0 2px 8px rgba(7,51,40,.08); }
.kyc-drop-ico svg{ width:21px; height:21px; }
.kyc-drop.filled .kyc-drop-ico{ color:var(--status-approved-text); }
.kyc-drop.error .kyc-drop-ico{ color:var(--status-rejected-text); }
.kyc-drop-txt{ font-size:13.5px; font-weight:600; color:var(--pine-deep); word-break:break-word; }
.kyc-drop-hint{ font-size:11.5px; color:var(--ink-faint); }
.btn.is-loading{ opacity:.7; pointer-events:none; }

.kyc-waiting{ display:flex; align-items:center; gap:8px; margin:auto 0 0; padding-top:8px; font-size:13px; color:var(--ink-soft); }
.kyc-waiting svg{ width:17px; height:17px; color:var(--status-pending-text); flex-shrink:0; }

.kyc-secure{ display:flex; align-items:center; gap:12px; margin-top:20px; padding:14px 18px; border-radius:var(--radius); background:var(--green-soft); }
.kyc-secure svg{ width:20px; height:20px; color:var(--pine); flex-shrink:0; }
.kyc-secure p{ margin:0; font-size:12.5px; color:var(--pine); line-height:1.5; }

@media (max-width:860px){
  .kyc-grid2{ grid-template-columns:minmax(0,1fr); }
  .kyc-hero-steps{ align-items:flex-start; width:100%; }
}

/* --- mobile : compact, barre pleine largeur, rien qui se comprime --- */
@media (max-width:640px){
  .kyc-hero{
    padding:16px 18px; gap:14px; border-radius:var(--radius);
    align-items:flex-start; border-left-width:3px;
    /* dégradé vertical : sur une colonne étroite, le dégradé horizontal
       coupait la teinte en plein milieu du texte */
    background-image:none;
  }
  .kyc-hero-approved{ background:linear-gradient(180deg, var(--status-approved-bg), var(--bg-panel) 62%); }
  .kyc-hero-pending{ background:linear-gradient(180deg, var(--gold-soft), var(--bg-panel) 62%); }
  .kyc-hero-rejected{ background:linear-gradient(180deg, var(--status-rejected-bg), var(--bg-panel) 62%); }
  .kyc-hero-ico{ width:44px; height:44px; }
  .kyc-hero-ico svg{ width:22px; height:22px; }
  .kyc-hero-body{ min-width:0; }
  .kyc-hero-body b{ font-size:16px; }
  .kyc-hero-body span{ font-size:13px; }
  /* compteur + barre sur une seule ligne, la barre prend la place restante */
  .kyc-hero-steps{ flex-direction:row; align-items:center; gap:12px; min-width:0; }
  .kyc-hero-bar{ flex:1 1 auto; width:auto; }

  .kyc-grid2{ gap:14px; }
  .kyc-card{ padding:18px; border-radius:var(--radius); }
  .kyc-card:hover{ transform:none; }   /* pas d'effet de survol au doigt */
  .kyc-card-head{ gap:12px; margin-bottom:14px; flex-wrap:wrap; }
  .kyc-card-ico{ width:40px; height:40px; border-radius:11px; }
  .kyc-card-ico svg{ width:20px; height:20px; }
  .kyc-card-title{ flex:1 1 60%; }
  .kyc-card-title b{ font-size:15px; }
  .kyc-card-head .badge{ margin-left:auto; }

  .kyc-file{ padding:10px 12px; gap:10px; }
  .kyc-file-ico{ width:38px; height:38px; }
  .kyc-drop{ padding:20px 14px; }
  .kyc-drop-txt{ font-size:13px; }
  .kyc-secure{ padding:12px 14px; margin-top:16px; }
  .kyc-secure p{ font-size:12px; }
}

/* ============================================================
   DÉTAIL D'UN DOSSIER
   ============================================================ */

.dem-back{ font-size:13px; font-weight:600; color:var(--ink-soft); }
.dem-back:hover{ color:var(--pine); }

/* bandeau principal */
.dem-hero{
  position:relative; overflow:hidden; border-radius:var(--radius-lg); margin-bottom:20px;
  display:grid; grid-template-columns:1.1fr 1.4fr; gap:0; color:#fff;
  background:
    radial-gradient(560px 240px at 88% -30%, rgba(201,162,75,.32), transparent 60%),
    linear-gradient(155deg, var(--surface-deep) 0%, var(--pine) 64%, #0E5D45 135%);
  box-shadow:0 26px 52px -28px rgba(7,51,40,.6);
  animation:heroPop .45s cubic-bezier(.2,.7,.2,1);
}
.dem-hero.closed{ filter:grayscale(.45); opacity:.85; }
.dem-hero-main{ padding:26px 30px; display:flex; flex-direction:column; gap:5px; position:relative; z-index:1; }
.dem-hero-label{ font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.6); }
.dem-hero-amount{ font-family:var(--font-display); font-size:clamp(32px,4vw,44px); font-weight:700; letter-spacing:-.02em; line-height:1.05; }
.dem-hero-sub{ font-size:12.5px; color:rgba(255,255,255,.6); }
.dem-hero-figs{ display:grid; grid-template-columns:repeat(3,1fr); background:rgba(255,255,255,.07); border-left:1px solid rgba(255,255,255,.10); position:relative; z-index:1; }
.dem-hero-figs > div{ padding:24px 18px; display:flex; flex-direction:column; gap:4px; justify-content:center; border-right:1px solid rgba(255,255,255,.08); }
.dem-hero-figs > div:last-child{ border-right:none; }
.dem-hero-figs em{ font-style:normal; font-size:11px; color:rgba(255,255,255,.58); }
.dem-hero-figs b{ font-family:var(--font-display); font-size:19px; font-weight:700; }

/* appel à action : offre à accepter */
.dem-offer-cta{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:18px 22px; margin-bottom:20px; border-radius:var(--radius);
  background:var(--gold-soft); border:1px solid var(--gold);
  box-shadow:0 14px 30px -20px rgba(201,162,75,.8);
}
.dem-offer-txt{ display:flex; flex-direction:column; gap:2px; }
.dem-offer-txt b{ font-family:var(--font-display); font-size:16px; color:var(--pine-deep); }
.dem-offer-txt span{ font-size:13px; color:var(--ink-soft); }

/* récapitulatif */
.dem-kv{ display:grid; grid-template-columns:auto 1fr; gap:0; margin:14px 0 0; }
.dem-kv dt, .dem-kv dd{ padding:11px 0; border-bottom:1px solid var(--line); }
.dem-kv dt{ font-size:13.5px; color:var(--ink-soft); }
.dem-kv dd{ margin:0; text-align:right; font-weight:600; color:var(--pine-deep); font-size:14px; }
.dem-kv dt:last-of-type, .dem-kv dd:last-of-type{ border-bottom:none; }

.dem-purpose{ margin-top:16px; padding:14px 16px; border-radius:var(--radius-sm); background:var(--bg); }
.dem-purpose-label{ display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); margin-bottom:6px; }
.dem-purpose p{ margin:0; font-size:13.5px; color:var(--ink); line-height:1.55; word-break:break-word; overflow-wrap:anywhere; }

.dem-note{ display:flex; gap:10px; margin-top:14px; padding:13px 15px; border-radius:var(--radius-sm); background:var(--gold-soft); }
.dem-note svg{ width:19px; height:19px; flex-shrink:0; color:var(--status-pending-text); }
.dem-note p{ margin:0; font-size:13px; color:var(--ink); line-height:1.5; }
.dem-actions{ margin-top:18px; display:flex; gap:10px; flex-wrap:wrap; }

/* suivi du dossier */
.dem-timeline{ list-style:none; margin:16px 0 0; padding:0; }
.dem-timeline li{ position:relative; display:flex; gap:14px; padding-bottom:20px; }
.dem-timeline li::before{ content:""; position:absolute; left:13px; top:26px; bottom:0; width:2px; background:var(--line); }
.dem-timeline li:last-child{ padding-bottom:0; }
.dem-timeline li:last-child::before{ display:none; }
.dem-tl-dot{ position:relative; z-index:1; flex-shrink:0; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--green-soft); color:var(--pine); border:2px solid var(--bg-panel); box-shadow:0 0 0 2px var(--green-soft); }
.dem-tl-dot svg{ width:14px; height:14px; }
.dem-timeline li.last .dem-tl-dot{ background:var(--pine); color:#fff; box-shadow:0 0 0 4px var(--green-soft); }
.dem-timeline li.ok .dem-tl-dot{ background:var(--green-mid); color:#fff; box-shadow:0 0 0 3px var(--status-approved-bg); }
.dem-timeline li.bad .dem-tl-dot{ background:var(--status-rejected-text); color:#fff; box-shadow:0 0 0 3px var(--status-rejected-bg); }
.dem-tl-body{ display:flex; flex-direction:column; gap:2px; padding-top:3px; }
.dem-tl-body b{ font-size:14px; font-weight:600; color:var(--pine-deep); }
.dem-tl-body em{ font-style:normal; font-size:12.5px; color:var(--ink-soft); }
.dem-tl-body span{ font-size:11.5px; color:var(--ink-faint); }

/* échéancier */
.dem-sched-sum{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ink-soft); }
.dem-sched-sum b{ color:var(--pine-deep); }
.dem-sched-bar{ height:7px; border-radius:999px; background:var(--green-soft); overflow:hidden; margin-top:4px; }
.dem-sched-bar span{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg, var(--green-mid), var(--gold)); transition:width .8s cubic-bezier(.2,.7,.2,1); }
.table tr.row-next td{ background:var(--gold-soft); }
.table tr.row-late td{ background:var(--status-rejected-bg); }
.dem-proof-form{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.dem-proof-form input[type="file"]{ font-size:12px; max-width:180px; }
.dem-paid-ok{ font-size:12.5px; font-weight:600; color:var(--status-approved-text); }

@media (max-width:860px){
  .dem-hero{ grid-template-columns:1fr; }
  .dem-hero-figs{ border-left:none; border-top:1px solid rgba(255,255,255,.10); }
  .dem-hero-figs > div{ padding:16px 14px; }
  .dem-offer-cta{ flex-direction:column; align-items:stretch; }
  .dem-offer-cta .btn{ width:100%; }
}

/* chat admin (fiche compte) */
.admin-chat{ max-height:320px; overflow-y:auto; display:flex; flex-direction:column; gap:8px; padding:10px; background:var(--bg); border-radius:var(--radius-sm); border:1px solid var(--line); }
.admin-msg{ display:flex; flex-direction:column; max-width:80%; }
.admin-msg.me{ align-self:flex-end; align-items:flex-end; }
.admin-msg.them{ align-self:flex-start; align-items:flex-start; }
.admin-msg-bubble{ padding:8px 12px; border-radius:12px; font-size:13.5px; line-height:1.4; white-space:pre-wrap; word-break:break-word; }
.admin-msg.me .admin-msg-bubble{ background:var(--pine); color:#fff; }
.admin-msg.them .admin-msg-bubble{ background:#fff; border:1px solid var(--line); color:var(--ink); }
.admin-msg-time{ font-size:10px; color:var(--ink-faint); margin-top:2px; }

/* KPIs cliquables (tableau de bord banque admin) */
.bank-kpi{ text-align:left; cursor:pointer; font:inherit; transition:border-color .14s ease, box-shadow .14s ease, transform .14s ease; }
.bank-kpi:hover{ border-color:var(--pine); box-shadow:var(--shadow-float); transform:translateY(-1px); }
.bank-row td{ vertical-align:middle; }

/* ============================================================
   PROFIL — version premium
   Bandeau identité (anneau de complétude) + formulaires + état du compte.
   ============================================================ */

/* ---- bandeau identité ---- */
.pf-hero{
  position:relative; overflow:hidden; border-radius:var(--radius-lg);
  padding:26px 30px; margin-bottom:20px; color:#fff;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  background:
    radial-gradient(600px 250px at 92% -25%, rgba(201,162,75,.34), transparent 62%),
    linear-gradient(155deg, var(--surface-deep) 0%, var(--pine) 64%, #0E5D45 132%);
  box-shadow:0 26px 52px -28px rgba(7,51,40,.6);
  animation:heroPop .45s cubic-bezier(.2,.7,.2,1);
}
.pf-hero::after{
  content:""; position:absolute; right:-80px; bottom:-120px; width:300px; height:300px;
  border-radius:50%; background:rgba(255,255,255,.04); pointer-events:none;
}
.pf-hero > *{ position:relative; z-index:1; }

.pf-hero-id{ display:flex; align-items:center; gap:18px; min-width:0; }
.pf-avatar{
  flex-shrink:0; width:72px; height:72px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:25px; font-weight:600; letter-spacing:.02em; color:#fff;
  background:linear-gradient(150deg, rgba(255,255,255,.22), rgba(255,255,255,.07));
  border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 12px 26px -14px rgba(0,0,0,.6);
}
.pf-hero-txt{ min-width:0; display:flex; flex-direction:column; gap:3px; }
.pf-hero-txt h2{
  margin:0; font-family:var(--font-display); font-size:clamp(21px,2.4vw,27px);
  font-weight:700; letter-spacing:-.015em; color:#fff; line-height:1.15;
  word-break:break-word;
}
.pf-hero-mail{
  margin:0; font-size:13.5px; color:rgba(255,255,255,.62);
  word-break:break-word; overflow-wrap:anywhere;
}
.pf-chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:7px; }
.pf-chip{
  display:inline-flex; align-items:center;
  padding:4px 11px; border-radius:var(--radius-pill);
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.14);
  font-size:11.5px; font-weight:600; color:rgba(255,255,255,.86); white-space:nowrap;
}

/* anneau de complétude */
.pf-ring-wrap{ display:flex; align-items:center; gap:14px; }
.pf-ring{ position:relative; width:86px; height:86px; flex-shrink:0; }
.pf-ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.pf-ring circle{ fill:none; stroke-width:5; stroke-linecap:round; }
.pf-ring-bg{ stroke:rgba(255,255,255,.14); }
.pf-ring-fg{ stroke:var(--gold); animation:pfRing 1s cubic-bezier(.2,.7,.2,1) backwards; }
@keyframes pfRing{ from{ stroke-dashoffset:163.4; } }
.pf-ring-val{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:20px; font-weight:600; color:#fff; letter-spacing:-.02em;
}
.pf-ring-val i{ font-style:normal; font-size:12px; color:rgba(255,255,255,.6); margin-left:1px; }
.pf-ring-txt{ display:flex; flex-direction:column; gap:3px; max-width:180px; }
.pf-ring-txt b{ font-size:13.5px; font-weight:700; color:#fff; }
.pf-ring-txt span{ font-size:12px; color:rgba(255,255,255,.58); line-height:1.45; }

/* ---- grille ---- */
.pf-grid{ display:grid; grid-template-columns:1.55fr 1fr; gap:20px; align-items:start; }
.pf-grid > *{ min-width:0; }
.pf-col{ display:flex; flex-direction:column; gap:20px; min-width:0; }

.pf-card{ padding:24px 26px; border-radius:var(--radius-lg); }
.pf-card-head{ display:flex; align-items:flex-start; gap:14px; margin-bottom:20px; }
.pf-card-ico{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:44px; height:44px; border-radius:13px;
  background:var(--green-soft); color:var(--pine);
}
.pf-card-ico svg{ width:21px; height:21px; }
.pf-card-head h3{ margin:0 0 2px; font-family:var(--font-display); font-size:16.5px; font-weight:700; color:var(--pine-deep); letter-spacing:-.01em; }
.pf-card-head .text-soft{ margin:0; font-size:13px; line-height:1.45; }

/* ---- formulaires ---- */
.pf-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.pf-row:last-of-type{ margin-bottom:0; }
.pf-field{ min-width:0; display:flex; flex-direction:column; }
.pf-field label{ display:block; font-size:12.5px; font-weight:600; color:var(--ink); margin-bottom:6px; }
.pf-card .pf-field > input, .pf-card .pf-locked input{
  width:100%; border-radius:var(--radius-sm); border:1px solid var(--line);
  background:var(--bg-panel); padding:11px 14px;
  font-family:var(--font-body); font-size:14px; color:var(--ink);
  transition:border-color .14s ease, box-shadow .14s ease;
}
.pf-card .pf-field > input:focus{ outline:none; border-color:var(--pine); box-shadow:0 0 0 3px rgba(47,143,91,.12); }
.pf-hint{ margin:6px 0 0; font-size:11.5px; color:var(--ink-faint); line-height:1.4; }

/* champ en lecture seule : cadenas discret, fond mat */
.pf-locked{ position:relative; }
.pf-locked input{ padding-right:40px !important; background:var(--bg) !important; color:var(--ink-soft) !important; -webkit-text-fill-color:var(--ink-soft); opacity:1; }
.pf-lock-ico{
  position:absolute; top:0; right:12px; height:100%;
  display:flex; align-items:center; color:var(--ink-faint); pointer-events:none;
}
.pf-lock-ico svg{ width:16px; height:16px; }

.pf-sub-head{
  margin:22px 0 14px; padding-top:18px; border-top:1px solid var(--line);
  font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft);
}

/* rangée d'actions : les <form> restent en ligne (sinon les boutons s'empilent) */
.pf-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:20px; }
.pf-actions form{ margin:0; display:inline-flex; align-items:center; }

/* ---- double authentification ---- */
.pf-2fa{
  display:flex; align-items:center; gap:13px; flex-wrap:wrap;
  padding:14px 16px; margin-bottom:22px; border-radius:var(--radius);
  background:var(--green-soft); border:1px solid rgba(11,79,60,.10);
}
.pf-2fa-ico{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:38px; height:38px; border-radius:11px; background:var(--bg-panel); color:var(--pine);
  box-shadow:0 2px 8px rgba(7,51,40,.08);
}
.pf-2fa-ico svg{ width:19px; height:19px; }
.pf-2fa > div{ flex:1; min-width:160px; display:flex; flex-direction:column; gap:2px; }
.pf-2fa b{ font-size:13.5px; font-weight:700; color:var(--pine-deep); }
.pf-2fa span{ font-size:12px; color:var(--ink-soft); line-height:1.45; }

/* ---- robustesse du mot de passe ---- */
.pf-strength{ margin-top:14px; }
/* au repos la piste reste discrète : elle ne doit pas se lire comme un séparateur */
.pf-strength-bar{ height:6px; border-radius:999px; background:var(--bg); overflow:hidden; transition:background .25s ease; }
.pf-strength.s1 .pf-strength-bar, .pf-strength.s2 .pf-strength-bar,
.pf-strength.s3 .pf-strength-bar, .pf-strength.s4 .pf-strength-bar{ background:var(--line); }
.pf-strength-bar span{
  display:block; height:100%; width:0; border-radius:999px;
  background:var(--line-strong);
  transition:width .35s cubic-bezier(.2,.7,.2,1), background .25s ease;
}
.pf-strength.s1 .pf-strength-bar span{ width:25%;  background:var(--status-rejected-text); }
.pf-strength.s2 .pf-strength-bar span{ width:50%;  background:var(--status-pending-text); }
.pf-strength.s3 .pf-strength-bar span{ width:78%;  background:var(--green-mid); }
.pf-strength.s4 .pf-strength-bar span{ width:100%; background:linear-gradient(90deg, var(--green-mid), var(--gold)); }
.pf-strength-txt{ margin-top:7px; font-size:11.5px; color:var(--ink-faint); line-height:1.45; }
.pf-strength.s1 .pf-strength-txt{ color:var(--status-rejected-text); font-weight:600; }
.pf-strength.s2 .pf-strength-txt{ color:var(--status-pending-text); font-weight:600; }
.pf-strength.s3 .pf-strength-txt, .pf-strength.s4 .pf-strength-txt{ color:var(--status-approved-text); font-weight:600; }
.pf-strength.mismatch .pf-strength-txt{ color:var(--status-rejected-text); font-weight:600; }

/* ---- état du compte ---- */
.pf-checks{ list-style:none; margin:0; padding:0; }
.pf-checks li{
  display:flex; align-items:center; gap:13px;
  padding:13px 0; border-bottom:1px solid var(--line);
}
.pf-checks li:first-child{ padding-top:0; }
.pf-checks li:last-child{ border-bottom:none; padding-bottom:0; }
.pf-checks form{ margin:0; display:inline-flex; align-items:center; }
.pf-check-dot{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:32px; height:32px; border-radius:50%;
  background:var(--bg); color:var(--ink-faint);
}
.pf-check-dot svg{ width:16px; height:16px; }
.pf-checks li.ok   .pf-check-dot{ background:var(--status-approved-bg); color:var(--status-approved-text); }
.pf-checks li.todo .pf-check-dot{ background:var(--gold-soft); color:var(--status-pending-text); }
.pf-checks li.bad  .pf-check-dot{ background:var(--status-rejected-bg); color:var(--status-rejected-text); }
.pf-check-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.pf-check-body b{ font-size:13.5px; font-weight:600; color:var(--ink); }
.pf-check-body em{ font-style:normal; font-size:12px; color:var(--ink-soft); word-break:break-word; overflow-wrap:anywhere; }

/* ---- langue ----
   Grille, et non liste : dix-huit langues empilées faisaient une colonne
   interminable, sans rapport de hauteur avec « État du compte » posée en face.
   On reprend la grille de la feuille de langue (assets/css/lang.css) — drapeau
   au-dessus, nom en dessous — avec auto-fill : six colonnes dans la carte en
   desktop, trois sur un téléphone, sans point de rupture à tenir à jour. */
.pf-lang-opts{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(88px, 1fr)); gap:8px;
}
/* .pf-lang-opt est un <label> : sans cette spécificité, la règle générique
   « .card label{ display:block } » l'emporte et empile code + nom de langue. */
.pf-card .pf-lang-opt{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; cursor:pointer; margin-bottom:0; text-align:center;
  padding:10px 6px; border-radius:var(--radius); border:1px solid var(--line); background:var(--bg-panel);
  transition:border-color .14s ease, background .14s ease, box-shadow .14s ease;
}
.pf-lang-opt:hover{ border-color:var(--line-strong); background:var(--bg); }
.pf-lang-opt input{ position:absolute; opacity:0; pointer-events:none; width:0; height:0; }
/* Drapeau à la taille des cellules de la feuille de langue (18 × 12 par défaut,
   trop discret dès qu'il devient le repère principal de la cellule). */
.pf-lang-opt .lang-flag{ width:26px; height:17px; }
.pf-lang-code{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:38px; height:28px; border-radius:7px;
  background:var(--bg); border:1px solid var(--line);
  font-size:11.5px; font-weight:700; letter-spacing:.04em; color:var(--ink-soft);
}
.pf-lang-name{
  flex:0 0 auto; font-size:11.5px; font-weight:600; line-height:1.2;
  color:var(--ink-soft); overflow-wrap:anywhere;
}
.pf-lang-opt.active{ border-color:var(--pine); background:var(--green-soft); box-shadow:0 0 0 3px rgba(47,143,91,.10); }
.pf-lang-opt.active .pf-lang-code{ background:var(--pine); border-color:var(--pine); color:#fff; }
.pf-lang-opt.active .pf-lang-name{ font-weight:600; color:var(--pine-deep); }

/* ---- responsive ---- */
@media (max-width:1080px){
  .pf-grid{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .pf-hero{ padding:22px 20px; gap:20px; border-radius:var(--radius); }
  .pf-hero-id{ gap:14px; }
  .pf-avatar{ width:60px; height:60px; font-size:21px; }
  .pf-ring-wrap{ width:100%; }
  .pf-ring{ width:74px; height:74px; }
  .pf-ring-txt{ max-width:none; flex:1; }
  .pf-card{ padding:20px; border-radius:var(--radius); }
  .pf-row{ grid-template-columns:1fr; gap:14px; }
  .pf-actions .btn{ width:100%; justify-content:center; }
  .pf-actions form, .pf-actions form .btn{ width:100%; }
}
@media (max-width:520px){
  .pf-checks li{ flex-wrap:wrap; }
  .pf-checks li .btn, .pf-checks li form{ margin-left:45px; }
  .pf-check-body{ flex:1 1 60%; }
}
/* pas d'effet de survol au doigt : la carte reste « collée » après un appui */
@media (hover:none){
  .pf-lang-opt:hover{ border-color:var(--line); background:var(--bg-panel); }
}


/* ============================================================
   COFFRE À DOCUMENTS (espace client)
   Historique de tout ce qui a été échangé avec l'équipe.
   ============================================================ */
.doc-filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.doc-filter{
  display:inline-flex; align-items:center; gap:7px;
  min-height:36px; padding:0 14px; border-radius:var(--radius-pill);
  border:1px solid var(--line); background:var(--bg-panel);
  font-size:13px; font-weight:600; color:var(--ink-soft); text-decoration:none;
  transition:border-color .14s ease, background .14s ease, color .14s ease;
}
.doc-filter span{ font-size:11.5px; font-weight:700; color:var(--ink-faint); }
.doc-filter:hover{ border-color:var(--line-strong); background:var(--bg); color:var(--pine-deep); }
.doc-filter.active{ background:var(--pine); border-color:var(--pine); color:#fff; }
.doc-filter.active span{ color:rgba(255,255,255,.7); }

.doc-table-card{ padding:0; overflow:hidden; }
.doc-table{ width:100%; }
.doc-table .ta-r{ text-align:right; }
.doc-name{ display:flex; align-items:center; gap:12px; min-width:0; }
.doc-name-ico{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:38px; height:38px; border-radius:11px;
  background:var(--green-soft); color:var(--pine);
}
.doc-name-ico svg{ width:18px; height:18px; }
.doc-name-ico.kyc{ background:var(--gold-soft); color:var(--status-pending-text); }
.doc-name-ico.loan{ background:var(--status-approved-bg); color:var(--status-approved-text); }
.doc-name-ico.chat{ background:var(--bg); color:var(--ink-soft); }
.doc-name > div{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.doc-name b{ font-size:14px; font-weight:600; color:var(--ink); word-break:break-word; }
.doc-name em{ font-style:normal; font-size:11.5px; color:var(--ink-faint); }

.doc-dl{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:10px;
  border:1px solid var(--line); background:var(--bg-panel); color:var(--ink-soft);
  transition:border-color .14s ease, color .14s ease, background .14s ease;
}
.doc-dl svg{ width:17px; height:17px; }
.doc-dl:hover{ border-color:var(--pine); color:var(--pine-deep); background:var(--green-soft); }

.doc-note{
  display:flex; align-items:flex-start; gap:9px; margin:16px 0 0;
  font-size:12px; color:var(--ink-faint); line-height:1.5;
}
.doc-note svg{ width:15px; height:15px; flex-shrink:0; margin-top:1px; color:var(--green-mid); }

/* Les colonnes 2 et 3 (type et date) étaient escamotées sous 640 px : le client
   ne voyait plus la date de ses propres pièces. Elles restent, et le tableau
   défile dans son cadre (.admin-table-wrap). */
@media (hover:none){ .doc-dl:hover{ background:var(--bg-panel); } }


/* ---- Profil : onglets (navigation par URL, donc lien direct possible) ---- */
.pf-tabs{
  display:flex; gap:4px; margin:0 0 22px; padding-bottom:2px;
  border-bottom:1px solid var(--line);
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.pf-tabs::-webkit-scrollbar{ display:none; }
.pf-tab{
  position:relative; flex:0 0 auto;
  display:inline-flex; align-items:center; gap:7px;
  padding:11px 16px; border-bottom:2px solid transparent;
  font-size:14px; font-weight:600; color:var(--ink-soft); white-space:nowrap; text-decoration:none;
  transition:color .14s ease, border-color .14s ease;
}
.pf-tab:hover{ color:var(--pine-deep); }
.pf-tab.active{ color:var(--pine-deep); border-bottom-color:var(--gold); }
.pf-tab-dot{ width:7px; height:7px; border-radius:50%; background:var(--gold); flex-shrink:0; box-shadow:0 0 0 3px var(--gold-soft); }

/* pastille d'alerte sur l'entrée Profil de la sidebar */
.sidebar-alert{
  width:8px; height:8px; border-radius:50%; margin-left:auto; flex-shrink:0;
  background:var(--gold); box-shadow:0 0 0 3px rgba(201,162,75,.25);
}

/* ---- Profil : fermeture du compte ---- */
.pf-card-ico.warn{ background:var(--gold-soft); color:var(--status-pending-text); }
.pf-card-ico.danger{ background:var(--status-rejected-bg); color:var(--status-rejected-text); }
.pf-danger-live{ border-color:rgba(201,162,75,.5); }

.pf-del-count{ display:flex; align-items:baseline; gap:9px; margin:4px 0 18px; }
.pf-del-count b{ font-family:var(--font-display); font-size:38px; font-weight:700; color:var(--pine-deep); line-height:1; }
.pf-del-count span{ font-size:13px; color:var(--ink-soft); }

.pf-del-steps{ list-style:none; margin:0 0 18px; padding:0; counter-reset:step; }
.pf-del-steps li{
  position:relative; counter-increment:step;
  padding:0 0 18px 38px; display:flex; flex-direction:column; gap:2px;
}
.pf-del-steps li::before{
  content:counter(step); position:absolute; left:0; top:0;
  width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg); border:1px solid var(--line); color:var(--ink-faint);
  font-size:12px; font-weight:700;
}
.pf-del-steps li:not(:last-child)::after{
  content:""; position:absolute; left:13px; top:28px; bottom:4px; width:2px; background:var(--line);
}
.pf-del-steps li.done::before{ background:var(--green-mid); border-color:var(--green-mid); color:#fff; }
.pf-del-steps li.current::before{ background:var(--gold); border-color:var(--gold); color:var(--surface-deep); box-shadow:0 0 0 4px var(--gold-soft); }
.pf-del-steps b{ font-size:13.5px; font-weight:600; color:var(--ink); }
.pf-del-steps em{ font-style:normal; font-size:12.5px; color:var(--ink-soft); line-height:1.5; }

.pf-del-warn{
  display:flex; gap:10px; margin-bottom:18px; padding:13px 15px;
  border-radius:var(--radius); background:var(--status-rejected-bg); border:1px solid rgba(178,59,59,.2);
  font-size:12.5px; line-height:1.55; color:var(--status-rejected-text);
}
.pf-del-warn svg{ width:18px; height:18px; flex-shrink:0; margin-top:1px; }

@media (max-width:640px){
  .pf-tabs{ margin-bottom:18px; }
  .pf-tab{ padding:10px 13px; font-size:13.5px; }
}


/* ---- Profil : carte d'informations en pleine largeur ---- */
.pf-wide{ margin-bottom:20px; }
.pf-wide .pf-card{ width:100%; }

/* photo de profil */
.pf-photo{ display:flex; align-items:center; gap:16px; margin-bottom:22px; padding-bottom:20px; border-bottom:1px solid var(--line); }
.pf-photo-preview{
  display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden;
  width:68px; height:68px; border-radius:50%;
  background:linear-gradient(150deg, var(--pine) 0%, var(--green-mid) 130%); color:#fff;
  box-shadow:0 12px 24px -14px rgba(11,79,60,.8);
}
.pf-photo-preview img{ width:100%; height:100%; object-fit:cover; }
.pf-photo-preview b{ font-size:21px; font-weight:600; }
.pf-photo-txt{ min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.pf-photo-txt label{ margin:0; cursor:pointer; }
.pf-photo-txt .pf-hint{ margin:0; }

/* indicatif + numéro */
.pf-phone-row{ display:flex; gap:8px; }
.pf-phone-row select{
  flex:0 0 auto; width:auto; min-width:96px;
  border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--bg);
  padding:11px 10px; font-family:var(--font-mono); font-size:13.5px; color:var(--ink); cursor:pointer;
}
.pf-phone-row input{ flex:1; min-width:0; }
/* La liste habillée (select.js) enveloppe le <select> dans un bloc .dsel, qui
   est à width:100% par défaut (theme.css). Dans cette ligne, il réclamait donc
   TOUTE la largeur, et le numéro — autorisé à rétrécir jusqu'à zéro — était
   écrasé en un simple trait. La règle ci-dessus visait le <select>, désormais
   masqué À L'INTÉRIEUR du bloc : elle ne dimensionnait plus rien.
   L'indicatif prend la largeur de son contenu, plafonnée à 42 % pour que le
   numéro garde toujours la place principale, même sur un écran étroit. */
.pf-phone-row .dsel{ flex:0 1 auto; width:auto; min-width:104px; max-width:42%; }
.pf-card .pf-field > select{
  width:100%; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--bg-panel);
  padding:11px 14px; font-family:var(--font-body); font-size:14px; color:var(--ink); cursor:pointer;
}
.pf-card .pf-field > select:focus, .pf-phone-row select:focus{
  outline:none; border-color:var(--pine); box-shadow:0 0 0 3px rgba(47,143,91,.12);
}
.pf-card .pf-field > input[type="date"]{
  width:100%; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--bg-panel);
  padding:10px 14px; font-family:var(--font-body); font-size:14px; color:var(--ink);
}

@media (max-width:640px){
  .pf-photo{ gap:13px; }
  .pf-photo-preview{ width:58px; height:58px; }
  .pf-phone-row select{ min-width:88px; }
  .pf-phone-row .dsel{ min-width:96px; }
  .pf-phone-row .dsel-btn{ padding:12px 10px; gap:6px; }   /* quelques pixels rendus au numéro */
}


/* les deux cartes sous les informations : même largeur, côte à côte —
   et désormais même hauteur. La grille des langues rend la carte « Langue de
   l'interface » assez compacte pour se caler sur « État du compte » ; le bouton
   d'enregistrement est poussé en pied de carte par le margin-top:auto, ce qui
   aligne les deux bas de bloc au pixel. */
.pf-wide + .pf-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch; }
.pf-wide + .pf-grid > .pf-col > .pf-card{ flex:1 1 auto; display:flex; flex-direction:column; }
.pf-wide + .pf-grid .pf-lang-form{ display:flex; flex-direction:column; flex:1 1 auto; }
.pf-wide + .pf-grid .pf-lang-form .pf-actions{ margin-top:auto; padding-top:20px; }
/* Bouton « Changer la photo » : contenu centré dans son cadre.
   display:inline-flex est indispensable ici — la règle générique
   « .card label{ display:block } » est plus spécifique que « .btn » et
   remettait le label en bloc, ce qui annulait justify-content. */
.pf-card .pf-photo-txt label.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; min-width:200px; text-align:center;
}
@media (max-width:860px){ .pf-wide + .pf-grid{ grid-template-columns:minmax(0,1fr); } }


/* ---- Documents : actions par ligne ---- */
.doc-actions{ display:inline-flex; align-items:center; gap:7px; }
.doc-actions form{ margin:0; display:inline-flex; }
.doc-ic{
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; cursor:pointer;
  width:36px; height:36px; border-radius:10px;
  border:1px solid var(--line); background:var(--bg-panel); color:var(--ink-soft);
  transition:border-color .14s ease, color .14s ease, background .14s ease;
}
.doc-ic svg{ width:16px; height:16px; }
.doc-ic:hover{ border-color:var(--pine); color:var(--pine-deep); background:var(--green-soft); }
.doc-ic.danger:hover{ border-color:var(--status-rejected-text); color:var(--status-rejected-text); background:var(--status-rejected-bg); }

/* ---- Modale de l'espace client (fond pin flouté, panneau qui zoome) ---- */
.app-modal{ position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; padding:20px; }
.app-modal[hidden]{ display:none !important; }
.app-modal-back{
  position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 0%, rgba(11,79,60,.5), rgba(7,51,40,.76));
  backdrop-filter:blur(7px) saturate(1.15); -webkit-backdrop-filter:blur(7px) saturate(1.15);
}
.app-modal-box{
  position:relative; z-index:1; width:100%; max-width:480px; max-height:92vh; overflow-y:auto;
  background:var(--bg-panel); border-radius:var(--radius-lg);
  box-shadow:0 40px 80px -30px rgba(7,51,40,.75);
  animation:appModalZoom .26s cubic-bezier(.2,.8,.2,1);
}
@keyframes appModalZoom{ from{ opacity:0; transform:scale(.9) translateY(14px); } to{ opacity:1; transform:none; } }
.app-modal-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:20px 24px; border-bottom:1px solid var(--line); }
.app-modal-head h3{ margin:0; font-family:var(--font-display); font-size:18px; font-weight:700; color:var(--pine-deep); }
.app-modal-x{
  display:flex; align-items:center; justify-content:center; flex-shrink:0; cursor:pointer;
  width:34px; height:34px; border-radius:50%;
  border:1px solid var(--line); background:var(--bg); color:var(--ink-soft);
}
.app-modal-x svg{ width:17px; height:17px; }
.app-modal-x:hover{ border-color:var(--pine); color:var(--pine-deep); background:var(--green-soft); }
.app-modal-body{ padding:22px 24px; }
.app-modal-body .pf-field input, .app-modal-body .pf-field select{
  width:100%; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--bg-panel);
  padding:11px 14px; font-family:var(--font-body); font-size:14px; color:var(--ink);
}
.app-modal-foot{
  display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap;
  padding:16px 24px; border-top:1px solid var(--line); background:var(--bg);
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
}
body.app-modal-open{ overflow:hidden; }

@media (max-width:640px){
  .doc-ic{ width:34px; height:34px; }
  .app-modal-foot .btn{ flex:1 1 auto; justify-content:center; }
}
@media (hover:none){ .doc-ic:hover{ background:var(--bg-panel); } }


/* KYC : les quatre pièces en 2 × 2, cartes de hauteur égale sur chaque ligne */
.kyc-grid2{ grid-template-columns:repeat(2, minmax(0,1fr)); align-items:stretch; }
.kyc-grid2 > .kyc-card{ height:100%; min-width:0; max-width:100%; }
@media (max-width:860px){ .kyc-grid2{ grid-template-columns:minmax(0,1fr); } }

/* ------------------------------------------------------------------
   Dossier accordé — renvoi vers PoziPay et vers l'échéancier.
   L'échéancier lui-même n'est plus affiché ici : il vit dans la banque
   en ligne (manipulable) et dans « Mes emprunts » (lecture seule).
   ------------------------------------------------------------------ */
.dem-granted{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  margin-top:20px; padding:22px 24px;
  background:linear-gradient(135deg, var(--green-soft) 0%, var(--bg-panel) 70%);
  border:1px solid rgba(47,143,91,.28);
}
.dem-granted-ico{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:46px; height:46px; border-radius:50%;
  background:var(--green-mid); color:#fff;
  box-shadow:0 10px 24px -12px rgba(47,143,91,.7);
}
.dem-granted-ico svg{ width:22px; height:22px; }
.dem-granted-txt{ flex:1; min-width:220px; }
.dem-granted-txt h3{ margin:0 0 4px; font-family:var(--font-display); font-size:17px; color:var(--pine-deep); }
.dem-granted-txt p{ margin:0; font-size:13.5px; line-height:1.6; color:var(--ink-soft); }
.dem-granted-actions{ display:flex; gap:10px; flex-wrap:wrap; }

@media (max-width:640px){
  .dem-granted{ padding:18px; gap:14px; }
  .dem-granted-actions{ width:100%; }
  .dem-granted-actions .btn{ flex:1 1 auto; justify-content:center; }
}

/* ------------------------------------------------------------------
   Popup « Historique des notifications » — client et administration.
   ------------------------------------------------------------------ */
.notif-modal{ position:fixed; inset:0; z-index:1200; display:none; }
.notif-modal.open{ display:block; }
.notif-modal-back{ position:absolute; inset:0; background:rgba(7,51,40,.55); backdrop-filter:blur(2px); }
.notif-modal-box{
  position:relative; z-index:1; margin:6vh auto 0; width:min(560px, calc(100% - 32px));
  max-height:82vh; display:flex; flex-direction:column;
  background:var(--bg-panel); border-radius:var(--radius-lg);
  box-shadow:0 40px 90px -30px rgba(7,51,40,.6);
  animation:notifPop .22s cubic-bezier(.2,.7,.2,1);
}
@keyframes notifPop{ from{ opacity:0; transform:translateY(-10px) scale(.98); } to{ opacity:1; transform:none; } }
.notif-modal-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:20px 22px 16px; border-bottom:1px solid var(--line);
}
.notif-modal-head h3{ margin:0; font-family:var(--font-display); font-size:18px; color:var(--pine-deep); }
.notif-modal-x{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%; border:none; cursor:pointer;
  background:var(--bg); color:var(--ink-soft);
}
.notif-modal-x:hover{ background:var(--line); color:var(--pine-deep); }
.notif-modal-x svg{ width:17px; height:17px; }
.notif-modal-bar{ padding:14px 22px; border-bottom:1px solid var(--line); display:flex; justify-content:flex-end; }
.notif-modal-list{ overflow-y:auto; padding:6px 0; overscroll-behavior:contain; }
.notif-modal-list .notif-item{
  display:flex; gap:12px; align-items:flex-start;
  padding:13px 22px; border-bottom:1px solid var(--line-soft, var(--line));
  text-decoration:none; color:inherit;
}
.notif-modal-list .notif-item:last-of-type{ border-bottom:none; }
a.notif-item:hover{ background:var(--bg); }
.notif-ico{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:34px; height:34px; border-radius:50%;
  background:var(--green-soft); color:var(--pine);
}
.notif-ico svg{ width:17px; height:17px; }
.notif-modal-list .notif-item.unread .notif-ico{ background:var(--gold-soft); color:var(--status-pending-text); }
.notif-modal-empty{ padding:36px 22px; text-align:center; font-size:13.5px; color:var(--ink-faint); margin:0; }

/* pied du menu déroulant de la cloche : accès à l'historique */
.topbar-dd-foot{
  display:flex; align-items:center; justify-content:center; gap:7px; width:100%;
  padding:12px; border:none; border-top:1px solid var(--line); cursor:pointer;
  background:var(--bg); color:var(--pine); font-family:var(--font-body);
  font-size:13px; font-weight:600;
}
.topbar-dd-foot:hover{ background:var(--green-soft); }
.topbar-dd-foot svg{ width:15px; height:15px; }

@media (max-width:640px){
  .notif-modal-box{ margin:0; width:100%; max-height:100dvh; height:100dvh; border-radius:0; }
  .notif-modal-bar{ justify-content:stretch; }
  .notif-modal-bar .ad-select{ width:100%; justify-content:space-between; }
}

/* .ad-select est défini dans admin.css, que l'espace client ne charge pas :
   le popup d'historique a besoin du même rendu des deux côtés. */
.notif-modal .ad-select{
  display:inline-flex; align-items:center; gap:7px; margin:0;
  height:36px; padding:0 12px;
  border:1px solid var(--line); border-radius:var(--radius-pill); background:var(--bg-panel);
}
.notif-modal .ad-select span{ font-size:11.5px; font-weight:600; color:var(--ink-faint); white-space:nowrap; }
.notif-modal .ad-select select{
  height:auto; width:auto; padding:0; margin:0; border:none; background:none; box-shadow:none;
  font-family:var(--font-body); font-size:13px; font-weight:600; color:var(--pine-deep); cursor:pointer;
}
.notif-modal .ad-select select:focus{ outline:none; }

/* ------------------------------------------------------------------
   Étape « Procédure » : frais de traitement à régler par le client.
   ------------------------------------------------------------------ */
.fee-panel{
  margin:0 0 20px; padding:22px 24px;
  background:linear-gradient(135deg, var(--gold-soft) 0%, var(--bg-panel) 72%);
  border:1px solid rgba(201,162,75,.42); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
}
.fee-panel.is-sent{
  background:linear-gradient(135deg, var(--green-soft) 0%, var(--bg-panel) 72%);
  border-color:rgba(47,143,91,.3);
}
.fee-head{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.fee-ico{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:44px; height:44px; border-radius:50%;
  background:var(--gold); color:#fff;
}
.fee-panel.is-sent .fee-ico{ background:var(--green-mid); }
.fee-ico svg{ width:21px; height:21px; }
.fee-head > div{ flex:1; min-width:220px; }
.fee-head h3{ margin:0 0 3px; font-family:var(--font-display); font-size:17px; color:var(--pine-deep); }
.fee-head p{ margin:0; font-size:13.5px; line-height:1.55; color:var(--ink-soft); }
.fee-amount{
  font-family:var(--font-display); font-size:26px; font-weight:700;
  color:var(--pine-deep); white-space:nowrap;
}
.fee-steps{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px;
  margin:18px 0 0;
}
.fee-step{
  display:flex; gap:10px; padding:13px 14px;
  background:var(--bg-panel); border:1px solid var(--line); border-radius:var(--radius);
}
.fee-step-n{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:22px; height:22px; border-radius:50%;
  background:var(--pine); color:#fff; font-size:12px; font-weight:700;
}
.fee-step p{ margin:0; font-size:12.5px; line-height:1.5; color:var(--ink-soft); }
.fee-why{
  margin:16px 0 0; padding:12px 14px; border-radius:var(--radius);
  background:var(--bg); border-left:3px solid var(--gold);
  font-size:12.5px; line-height:1.6; color:var(--ink-soft);
}
.fee-reject{
  margin:14px 0 0; padding:12px 14px; border-radius:var(--radius);
  background:var(--status-rejected-bg); color:var(--status-rejected-text);
  font-size:13px; line-height:1.5;
}
.fee-actions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:18px; }
.fee-form{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0; }
.fee-form input[type="file"]{ max-width:250px; }

@media (max-width:760px){
  .fee-steps{ grid-template-columns:1fr; }
  .fee-amount{ font-size:22px; }
  .fee-actions, .fee-form{ width:100%; }
  .fee-actions .btn, .fee-form .btn{ flex:1 1 auto; justify-content:center; }
  .fee-form input[type="file"]{ max-width:none; width:100%; }
}


/* Le suivi du dossier a quitté cette page (il fait doublon avec la frise
   d'avancement du bandeau) : le récapitulatif occupe désormais toute la
   largeur. Ses paires clé/valeur passent sur deux colonnes pour rester
   lisibles et symétriques plutôt que de s'étirer sur une seule ligne. */
.demande-detail{ grid-template-columns:1fr; }
@media (min-width:760px){
  .demande-detail .dem-kv{
    grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr);
    column-gap:34px;
  }
}


/* Sélecteur de langue : voir assets/css/lang.css (feuille unique). */


/* ================= Inscription — formulaire unique, en sections ============
   Le type de compte est un champ comme un autre : plus de parcours séparé
   « particulier / pro ». Les sections aèrent un formulaire devenu long sans
   le découper en étapes, qui feraient perdre les champs déjà saisis. */
.auth-split .auth-card-col.is-wide .auth-card{ max-width:560px; }

.rg-sec{ border:none; padding:0; margin:0 0 26px; }
.rg-sec > legend{
  padding:0; margin-bottom:14px;
  font-family:var(--font-body); font-size:11.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);
}
.rg-sec .tform-row:last-child{ margin-bottom:0; }

.rg-types{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.rg-type{
  display:flex; align-items:flex-start; gap:10px;
  padding:14px 15px; cursor:pointer;
  background:var(--bg-panel); border:1px solid var(--line); border-radius:var(--radius);
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.rg-type:hover{ border-color:var(--line-strong); }
.rg-type input[type="radio"]{ margin:2px 0 0; accent-color:var(--pine); flex:0 0 auto; }
.rg-type-body{ display:block; min-width:0; }
.rg-type-body b{ display:block; font-size:14.5px; font-weight:600; color:var(--ink); }
.rg-type-body small{ display:block; margin-top:3px; font-size:12px; line-height:1.45; color:var(--ink-soft); }
.rg-type.is-on{
  border-color:var(--pine); background:var(--green-soft);
  box-shadow:0 0 0 3px rgba(47,143,91,.12);
}

.rg-hint{ margin:6px 0 0; font-size:11.5px; color:var(--ink-faint); line-height:1.45; }

@media (max-width:640px){
  .rg-types{ grid-template-columns:1fr; }
  .rg-sec{ margin-bottom:22px; }
}

/* Renvoi du code de connexion : discret, sous le bouton principal. Il ne doit
   pas concurrencer « Valider », mais rester trouvable quand le mail tarde. */
.otp-resend{ margin:14px 0 0; text-align:center; }
.otp-resend-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px; margin:0; cursor:pointer;
  background:none; border:1px solid var(--line); border-radius:var(--radius-pill);
  font-family:var(--font-body); font-size:13.5px; font-weight:600; color:var(--pine);
  transition:border-color .14s ease, background .14s ease, color .14s ease;
}
.otp-resend-btn svg{ width:15px; height:15px; flex:0 0 auto; }
.otp-resend-btn:hover:not(:disabled){ border-color:var(--pine); background:var(--green-soft); }
.otp-resend-btn:disabled{
  cursor:default; color:var(--ink-faint); border-color:var(--line);
  background:var(--bg); opacity:.85;
}
.otp-resend-btn:disabled svg{ opacity:.6; }

/* ============================================================================
   Mobile — marges égales de chaque côté

   Les cartes du tableau de bord touchaient le bord droit : un élément plus
   large que son parent (montant en très grands chiffres, ligne d'actions,
   tableau) élargit la grille, et la marge de droite disparaît. On borne donc
   les conteneurs, et le contenu large défile dans son propre cadre plutôt
   que de pousser la page — la page « Mes demandes » était déjà à ce régime.
   ========================================================================== */
@media (max-width:700px){
  html, body{ overflow-x:hidden; }

  .dash-main, .dash-content{ min-width:0; max-width:100%; }
  .dash-content > *,
  .dash-cols, .dash-col, .dash-grid, .dash-hero-grid,
  .pf-pane, .pf-pane > *, .pf-wide, .pf-grid{ min-width:0; max-width:100%; }

  /* Une carte ne dépasse jamais la largeur utile. */
  .dash-content .card,
  .dash-content .dash-hero,
  .pf-pane .card,
  .pf-hero{ max-width:100%; }

  /* Les très grands nombres se coupent au lieu d'élargir leur carte. */
  .dash-hero-amount, .pf-hero-txt h2, .stat-value{ overflow-wrap:anywhere; }

}
/* Les tableaux défilent dans leur cadre à TOUTE largeur, et non sous 700 px
   seulement : un libellé long débordait de sa carte en desktop, ou se cassait
   sur trois lignes. Le texte reste sur sa ligne (règle commune, theme.css). */
.card table, .pf-card table{ display:block; overflow-x:auto; width:100%; -webkit-overflow-scrolling:touch; }
/* Le bouton PoziPay revient à droite sur mobile : flex-wrap le renvoyait
   sous le titre, donc calé à gauche, où il se confondait avec le contenu. */
@media (max-width:700px){
  .app-head-row{ align-items:flex-end; }
  .app-head-row > .btn{ margin-left:auto; }
}
/* Les cartes sont les vrais éléments de la colonne (.dash-col passe en
   display:contents sur mobile) : sans min-width:0 elles gardent la largeur
   intrinsèque de leur contenu — une ligne « Virement reçu +27 000,00 € » —
   et débordent de la marge droite. */
@media (max-width:700px){
  .dash-cols > *, .dash-col > *, .dash-side > *, .dash-grid > *{
    min-width:0; max-width:100%;
  }
  .dash-act a{ gap:10px; padding-left:0; padding-right:0; }
  .dash-act-body b{ overflow-wrap:anywhere; }
}