/* =====================================================================
   enhance.css — Couche d'embellissement GLOBALE (chargée en dernier).
   S'applique à toutes les pages (public, client, admin, auth) SANS changer
   le markup ni la logique : apparition au défilement, entrée de page,
   décors doux, survols soignés, en-tête dynamique, formulaires & tableaux
   raffinés. 100% hors-ligne. Respecte prefers-reduced-motion.
   ===================================================================== */

/* ---------- Apparition au défilement (révélée par anim.js) ---------- */
.anim-ready [data-reveal=""] {
  opacity: 0; transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.anim-ready [data-reveal=""].in { opacity: 1; transform: none; }

/* ---------- Entrée de page douce (pur CSS, sans dépendance JS) ---------- */
@keyframes pageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* « backwards » (et non « both ») : une fois l'animation terminée, aucun transform ne
   reste appliqué au conteneur — sinon les modales (position: fixed) y restent
   confinées au lieu de couvrir tout l'écran. Rendu visuel identique. */
main.page, .client-main, .admin-main, .auth-shell, .auth-wrap, .auth-panel {
  animation: pageIn .5s cubic-bezier(.2,.7,.2,1) backwards;
}

/* ---------- Décor doux global (très subtil, derrière le contenu) ----------
   Dégradé non "fixed" (évite le jank de scroll sur mobile/iOS). */
body {
  background:
    radial-gradient(900px 440px at 100% -6%, rgba(159,232,112,.06), transparent 60%),
    radial-gradient(760px 420px at -8% 108%, rgba(159,232,112,.045), transparent 60%),
    var(--bg);
  background-repeat: no-repeat;
}

/* ---------- Boutons : profondeur + survol ---------- */
.btn { box-shadow: 0 1px 2px rgba(10,20,0,.06); }
.btn-primary, .btn-accent { box-shadow: 0 6px 16px rgba(25,80,10,.18); }
.btn-primary:hover, .btn-accent:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(25,80,10,.24); }
.btn-outline:hover, .btn-ghost:hover { transform: translateY(-1px); }

/* ---------- Cartes ----------
   Par défaut SOBRE : aucune carte .card ne bouge au survol (pages financières
   lisibles et rassurantes). Le soulèvement est OPT-IN via la classe .lift
   (utilisée pour les cartes « marketing »), et .no-lift force l'immobilité. */
.card { transition: box-shadow var(--transition), border-color var(--transition); }
.card.lift { transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.card.lift:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card.no-lift:hover { transform: none; box-shadow: var(--shadow-xs); }

.feature-card { transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.feature-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--accent); }
.feature-card .fc-icon { transition: transform var(--transition), background var(--transition); }
.feature-card:hover .fc-icon { transform: scale(1.08) rotate(-4deg); }

/* ---------- Formulaires : focus lumineux ---------- */
.input, .select, .textarea { transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition); }
.input:focus, .select:focus, .textarea:focus { box-shadow: 0 0 0 3px rgba(59,122,30,.18), 0 2px 10px rgba(25,80,10,.08); }

/* ---------- Tableaux : lignes réactives ---------- */
.table tbody tr { transition: background var(--transition); }
.table tbody tr:hover { background: var(--surface-2); }

/* ---------- En-tête public : collant + léger flou + état défilé ---------- */
.public-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.90);
  transition: box-shadow var(--transition), background var(--transition);
}
.public-header.scrolled { background: rgba(255,255,255,.95); box-shadow: 0 4px 18px rgba(10,20,0,.06); }
/* Le flou (coûteux) n'est appliqué que s'il est supporté ; sinon fond opaque. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .public-header { background: rgba(255,255,255,.72); -webkit-backdrop-filter: saturate(1.4) blur(8px); backdrop-filter: saturate(1.4) blur(8px); }
  .public-header.scrolled { background: rgba(255,255,255,.90); }
}

/* Liens de nav : soulignage animé */
.public-nav a { position: relative; }
.public-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: var(--accent); border-radius: 2px; transform: scaleX(0); transform-origin: left;
  transition: transform var(--transition);
}
.public-nav a:hover { text-decoration: none; }
.public-nav a:hover::after { transform: scaleX(1); }

/* En-têtes client & admin : ombre légère au défilement */
.client-topbar, .admin-topbar { transition: box-shadow var(--transition); }
.client-topbar.scrolled, .admin-topbar.scrolled { box-shadow: 0 4px 18px rgba(10,20,0,.08); }

/* ---------- Petites touches ---------- */
.badge { transition: transform var(--transition); }
.quick-action:hover .qa-icon { transform: translateY(-3px) scale(1.04); }

/* Titre de section : filet d'accent — UNIQUEMENT sur le site public (main.page),
   jamais dans l'espace client/admin (qui doit rester sobre). */
main.page .section .text-center > h1::after,
main.page .section .text-center > h2::after {
  content: ""; display: block; width: 54px; height: 4px; border-radius: 3px;
  background: var(--accent); margin: var(--sp-4) auto 0;
}

/* ---------- Tableaux : défilement horizontal si trop larges (mobile) ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Décor réutilisable : blobs de section (option via markup) ---------- */
.sec-decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.sec-decor .blob {
  position: absolute; display: block; filter: blur(10px); opacity: .18;
  background: radial-gradient(circle at 40% 40%, var(--accent), transparent 70%);
  animation: blobMorph 16s ease-in-out infinite alternate;
}
@keyframes blobMorph {
  0%   { border-radius: 42% 58% 63% 37% / 42% 45% 55% 58%; }
  50%  { border-radius: 60% 40% 38% 62% / 55% 58% 42% 45%; }
  100% { border-radius: 38% 62% 55% 45% / 62% 38% 62% 38%; }
}
.has-decor { position: relative; }
.has-decor > .container { position: relative; z-index: 1; }

/* ---------- Respect de la réduction de mouvement ---------- */
@media (prefers-reduced-motion: reduce) {
  .anim-ready [data-reveal=""] { opacity: 1 !important; transform: none !important; transition: none; }
  main.page, .client-main, .admin-main, .auth-shell, .auth-wrap, .auth-panel, .auth-inner { animation: none; }
  .btn-primary:hover, .btn-accent:hover, .card.lift:hover, .feature-card:hover { transform: none; }
  .auth-aside::after { animation: none; }
}

/* =====================================================================
   Finitions ciblées (sans modifier le markup).
   ===================================================================== */

/* ---------- Pages d'authentification : décor vivant ---------- */
.auth-aside { position: relative; overflow: hidden; }
.auth-aside::after {
  content: ""; position: absolute; right: -90px; bottom: -110px; width: 320px; height: 320px;
  background: radial-gradient(circle at 40% 40%, var(--accent), transparent 68%);
  opacity: .28; filter: blur(8px); pointer-events: none;
  animation: blobMorph 15s ease-in-out infinite alternate;
}
.auth-aside > * { position: relative; z-index: 1; }
.auth-panel { position: relative; }
.auth-inner { animation: pageIn .6s .05s cubic-bezier(.2,.7,.2,1) both; }
.auth-card { box-shadow: var(--shadow-lg); }

/* ---------- Carte solde client : décor STATIQUE (sobre, sans pulsation) ----------
   Une carte financière ne doit pas « clignoter » : pas d'animation sur le solde. */
.hero-card { position: relative; overflow: hidden; }
.hero-card::after {
  content: ""; position: absolute; left: -40px; bottom: -60px; width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(159,232,112,.14), transparent 70%); pointer-events: none;
}

/* ---------- Tuiles d'actions rapides : apparition échelonnée (si JS) ---------- */
.anim-ready .quick-action { transition: transform var(--transition); }

/* ---------- Liens actifs de navigation inférieure (mobile) ---------- */
.bottom-nav a, .client-bottomnav a { transition: color var(--transition), transform var(--transition); }
.bottom-nav a:active, .client-bottomnav a:active { transform: translateY(1px); }

/* ---------- Alertes : liseré d'accent ---------- */
.alert { position: relative; }

/* ---------- Scrollbar discrète (navigateurs compatibles) ---------- */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); background-clip: content-box; }

/* =====================================================================
   Durcissement responsive de l'en-tête public (anti-débordement).
   Objectif : zéro défilement horizontal de 320px à 768px.
   ===================================================================== */
.public-header-inner { min-width: 0; gap: var(--sp-3); }
.public-header .brand { min-width: 0; flex: 0 1 auto; overflow: hidden; }
.public-header .brand-lockup { min-width: 0; }
.public-header .brand-logo-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* En dessous de 861px : on bascule sur le menu burger (évite la nav + 2 boutons
   trop larges sur tablette). Au-dessus : la nav desktop s'affiche normalement. */
@media (max-width: 860px) {
  .public-header .public-nav { display: none !important; }
  .public-header #mobileMenuBtn { display: inline-flex !important; }
  .public-header-actions .btn-primary.hide-mobile { display: none !important; } /* « Ouvrir un compte » */
}
@media (min-width: 861px) {
  .public-nav-mobile { display: none !important; }
}
/* Entre 641 et 860px, le menu mobile doit pouvoir s'ouvrir (ui.js enlève [hidden]). */
@media (max-width: 860px) {
  .public-nav-mobile:not([hidden]) { display: flex !important; }
}

/* Très petits écrans : on resserre les actions et on borne le nom de marque. */
@media (max-width: 380px) {
  .public-header-actions { gap: 6px; }
  .public-header .brand-logo-text { font-size: var(--fs-md); max-width: 46vw; }
  .public-header .btn-sm { padding: 0 var(--sp-3); }
}

/* ---------- Barre inférieure client : 6 onglets tiennent sur petits écrans ---------- */
.bottom-nav a { flex: 1 1 0; min-width: 0; }
.bottom-nav a > span:last-child { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* =====================================================================
   En-tête client sur ordinateur : 7 entrées de menu tiennent sans
   chevauchement (le menu « Bénéficiaires » a été ajouté).
   ===================================================================== */
@media (min-width: 900px) {
  .client-topbar .ct-nav { gap: 2px; min-width: 0; flex: 1 1 auto; justify-content: center; }
  .client-topbar .ct-nav a { font-size: var(--fs-sm); padding: 6px 6px; }
  .client-topbar .ct-brand .brand-logo-text { max-width: 112px; overflow: hidden; text-overflow: ellipsis; }
  /* Les icônes rapides (cloche, messages) sont redondantes avec le menu : on les
     masque en desktop pour libérer de la place ; l'avatar (profil) est conservé. */
  .client-topbar .ct-right > a.icon-btn { display: none; }
}
/* Desktop étroit (900–1150px) : menu en icônes seules (libellés masqués). */
@media (min-width: 900px) and (max-width: 1150px) {
  .client-topbar .ct-nav a > span:not(.count-badge) { display: none; }
  .client-topbar .ct-nav a { padding: 8px; }
}

/* =====================================================================
   Texte multi-ligne saisi par l'admin/l'utilisateur : préserver les
   espaces, les retours à la ligne et les paragraphes à l'affichage.
   (Les données ne changent pas ; seul le rendu respecte la mise en forme.)
   ===================================================================== */
.prewrap { white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word; }
/* Description d'étape injectée en JS dans les modales (dépôt/virement/retrait/opérations). */
#stepBody { white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word; }

/* =====================================================================
   Masque le bandeau / la barre d'outils Google Translate (partout).
   ===================================================================== */
.VIpgJd-ZVi9od-ORHb, .VIpgJd-ZVi9od-ORHb-OEVmcd { display: none !important; }
.goog-te-banner-frame, .goog-te-banner-frame.skiptranslate { display: none !important; }
body { top: 0 !important; }   /* Google décale le body de 40px : on l'annule. */