/* ============================================================================
   AfriLove World — Thème "Soft" (clair · aéré · marron léger)
   Inspiration : dashboards épurés type SaaS. Beaucoup de blanc, ombres douces,
   le marron n'est qu'un accent discret. Surcouche par-dessus Bootstrap :
   aucune classe n'est supprimée, on ne fait qu'embellir. Données intactes.
   ============================================================================ */

:root {
  --af-bg        : #F4F2EE;   /* fond de page, blanc cassé très légèrement chaud */
  --af-bg-2      : #FBFAF8;
  --af-card      : #FFFFFF;
  --af-ink       : #1F1A16;   /* texte principal, presque noir */
  --af-ink-soft  : #6B645C;
  --af-muted     : #9A938A;
  --af-line      : #ECE7DF;   /* bordures très claires */
  --af-line-2    : #F2EEE7;

  /* Accent marron LÉGER */
  --af-brown     : #B08968;
  --af-brown-ink : #8A6A4B;   /* pour texte/contraste */
  --af-brown-soft: rgba(176,137,104,.12);
  --af-brown-tint: #F3ECE3;

  /* Couleurs sémantiques discrètes (badges) */
  --af-green     : #46A86B;
  --af-green-bg  : #E7F4ec;
  --af-amber     : #C98A1E;
  --af-amber-bg  : #FBF1DD;
  --af-blue      : #5B86C9;
  --af-blue-bg   : #EAF1FB;
  --af-pink      : #C7689E;
  --af-pink-bg   : #FBEAF4;

  --af-r-sm : 14px;
  --af-r-md : 20px;
  --af-r-lg : 26px;

  --af-shadow   : 0 1px 2px rgba(31,26,22,.05), 0 6px 18px rgba(31,26,22,.04);
  --af-shadow-2 : 0 10px 30px rgba(31,26,22,.10);

  --af-ease : cubic-bezier(.22,1,.36,1);
}

/* ----------------------------------------------------------------- Base --- */
body {
  background: var(--af-bg) !important;
  color: var(--af-ink) !important;
  font-family: "Montserrat", system-ui, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Garde-fou : Font Awesome garde toujours sa police d'icônes. */
.fa, .fas, .far, .fal, .fad, .fab, .fa-solid, .fa-regular, .fa-brands,
[class^="fa-"], [class*=" fa-"] {
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 5 Free", "FontAwesome" !important;
}
.fab, .fa-brands { font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands" !important; }

.page-body { position: relative; z-index: 1; }

/* ============================================================ DASHBOARD === */

/* En-tête d'accueil ------------------------------------------------------- */
.afri-greeting {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  animation: af-rise .6s var(--af-ease) both;
}
.afri-greeting-sub { font-size: .9rem; margin: 4px 0 0; }
.afri-greeting-date { padding: 9px 18px; font-size: .82rem; }
.afri-section-label {
  display: block; font-size: .72rem; text-transform: uppercase;
  margin: 20px 0 4px;
}
.afri-greeting-title {
  font-size: clamp(1.35rem, 2.2vw, 1.75rem) !important;
  font-weight: 800 !important;
  letter-spacing: -.02em;
  color: var(--af-ink) !important;
  -webkit-text-fill-color: var(--af-ink);
}
.afri-greeting-sub { color: var(--af-muted) !important; }
.afri-greeting-date {
  background: var(--af-card) !important;
  border: 1px solid var(--af-line) !important;
  border-radius: 12px !important;
  color: var(--af-ink-soft) !important;
  box-shadow: var(--af-shadow);
  font-weight: 600 !important;
}
.afri-section-label {
  color: var(--af-muted) !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
}

/* Grille Bento ------------------------------------------------------------ */
.afri-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 22px;
  margin-top: 8px;
}
.afri-bento > * { grid-column: span 3; min-width: 0; }
.afri-bento .b-span-6 { grid-column: span 6; }
.afri-bento .b-span-4 { grid-column: span 4; }
.afri-bento .b-span-12 { grid-column: span 12; }

@media (max-width: 1199px){ .afri-bento > *{grid-column:span 4} .afri-bento .b-span-6{grid-column:span 6} }
@media (max-width: 991px) { .afri-bento > *{grid-column:span 6} .afri-bento .b-span-6,.afri-bento .b-span-4{grid-column:span 6} }
@media (max-width: 575px) { .afri-bento > *,.afri-bento .b-span-6,.afri-bento .b-span-4{grid-column:span 12} }

/* Carte de base ----------------------------------------------------------- */
.bento-card {
  position: relative;
  background: var(--af-card);
  border: 1px solid var(--af-line);
  border-radius: var(--af-r-md);
  padding: 24px;
  box-shadow: var(--af-shadow);
  overflow: hidden;
  transition: transform .4s var(--af-ease), box-shadow .4s var(--af-ease);
  animation: af-rise .6s var(--af-ease) both;
}
.bento-card:hover { transform: translateY(-4px); box-shadow: var(--af-shadow-2); }

/* Entrée échelonnée */
.afri-bento > *:nth-child(1){animation-delay:.02s}
.afri-bento > *:nth-child(2){animation-delay:.05s}
.afri-bento > *:nth-child(3){animation-delay:.08s}
.afri-bento > *:nth-child(4){animation-delay:.11s}
.afri-bento > *:nth-child(5){animation-delay:.14s}
.afri-bento > *:nth-child(6){animation-delay:.17s}
.afri-bento > *:nth-child(7){animation-delay:.20s}
.afri-bento > *:nth-child(8){animation-delay:.23s}
.afri-bento > *:nth-child(9){animation-delay:.26s}
.afri-bento > *:nth-child(10){animation-delay:.29s}
.afri-bento > *:nth-child(11){animation-delay:.32s}
.afri-bento > *:nth-child(12){animation-delay:.35s}
.afri-bento > *:nth-child(13){animation-delay:.38s}
.afri-bento > *:nth-child(14){animation-delay:.41s}

/* Tuile statistique (épurée) --------------------------------------------- */
.bento-stat { display:flex; flex-direction:column; gap:18px; min-height:138px; }
.bento-stat .b-top { display:flex; align-items:center; justify-content:space-between; }
.bento-stat .b-icon{
  width:46px; height:46px; border-radius:13px;
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
  background: var(--af-brown-soft); color: var(--af-brown-ink);
  transition: transform .4s var(--af-ease);
}
.bento-card:hover .b-icon{ transform: translateY(-2px); }
.bento-stat .b-trend{
  font-size:.7rem; font-weight:700; display:inline-flex; align-items:center; gap:4px;
  padding:4px 9px; border-radius:999px; color:var(--af-green); background:var(--af-green-bg);
}
.bento-stat .b-value{
  font-size:clamp(1.7rem,2.4vw,2.15rem); font-weight:800; line-height:1;
  color:var(--af-ink); letter-spacing:-.025em; font-variant-numeric:tabular-nums;
}
.bento-stat .b-label{
  font-size:.82rem; font-weight:600; color:var(--af-muted); margin-top:7px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Carte "Aperçu" large (claire) ------------------------------------------ */
.bento-hero{ display:flex; flex-direction:column; justify-content:space-between; min-height:210px; }
.bento-hero .h-kicker{ font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--af-brown-ink); }
.bento-hero .h-title{ font-size:clamp(1.25rem,2.2vw,1.6rem); font-weight:800; letter-spacing:-.02em; color:var(--af-ink); margin:.5rem 0 .3rem; }
.bento-hero .h-sub{ color:var(--af-muted); font-size:.9rem; max-width:48ch; line-height:1.55; }
.bento-hero .h-foot{ display:flex; gap:14px; flex-wrap:wrap; margin-top:24px; }
.bento-hero .h-stat{
  flex:1; min-width:120px; background:var(--af-bg-2); border:1px solid var(--af-line-2);
  border-radius:15px; padding:16px 18px;
}
.bento-hero .h-stat .v{ font-size:1.5rem; font-weight:800; color:var(--af-ink); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.bento-hero .h-stat .k{ font-size:.74rem; font-weight:600; color:var(--af-muted); margin-top:3px; }
.bento-hero .h-stat.is-brown{ background:var(--af-brown-tint); border-color:#EBDFD2; }

/* Carte Revenu (claire, accent marron) ----------------------------------- */
.bento-earning{ display:flex; flex-direction:column; justify-content:space-between; min-height:210px; }
.bento-earning .e-coin{
  width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:var(--af-brown-soft); color:var(--af-brown-ink); font-size:1.25rem;
}
.bento-earning .e-label{ font-size:.82rem;font-weight:600;color:var(--af-muted);margin-bottom:6px; }
.bento-earning .e-value{ font-size:clamp(1.4rem,2vw,1.8rem); font-weight:800; letter-spacing:-.02em; color:var(--af-ink); line-height:1.15; white-space:nowrap; }
.bento-earning .e-pill{
  align-self:flex-start; margin-top:14px; font-size:.72rem; font-weight:700;
  color:var(--af-green); background:var(--af-green-bg); padding:5px 11px; border-radius:999px;
}

/* Carte répartition ------------------------------------------------------- */
.bento-split .s-head{ font-size:.82rem; font-weight:600; color:var(--af-muted); }
.bento-split .s-total{ font-size:1.7rem; font-weight:800; color:var(--af-ink); letter-spacing:-.02em; margin-top:4px; }
.bento-split .s-row{ display:flex; align-items:center; gap:12px; margin-top:16px; }
.bento-split .s-dot{ width:9px;height:9px;border-radius:50%; }
.bento-split .s-meter{ flex:1; height:7px; border-radius:999px; background:var(--af-line); overflow:hidden; }
.bento-split .s-meter > i{ display:block; height:100%; border-radius:999px; transform-origin:left; animation: af-bar 1.1s var(--af-ease) both; }
.bento-split .s-val{ font-weight:700; font-size:.86rem; color:var(--af-ink-soft); min-width:42px; text-align:right; font-variant-numeric:tabular-nums; }

/* Animations -------------------------------------------------------------- */
@keyframes af-rise { from { opacity:0; transform: translateY(16px); } to { opacity:1; transform:none; } }
@keyframes af-bar  { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ===================================================== Habillage global === */
/* (s'applique à toutes les pages existantes, sans toucher au markup) */

/* Cartes Bootstrap */
.card {
  border: 1px solid var(--af-line) !important;
  border-radius: var(--af-r-md) !important;
  box-shadow: var(--af-shadow) !important;
  background: var(--af-card) !important;
}
.card-header { background: transparent !important; border-bottom: 1px solid var(--af-line) !important; }

/* Boutons : accent marron léger, sobre */
.btn-primary, .btn-secondary {
  background: var(--af-brown) !important; border:1px solid var(--af-brown) !important;
  color:#fff !important; font-weight:600 !important; border-radius:12px !important;
  box-shadow:none !important;
  transition: transform .25s var(--af-ease), filter .25s var(--af-ease) !important;
}
.btn-primary:hover, .btn-secondary:hover { filter:brightness(1.06); transform: translateY(-1px) !important; color:#fff !important; }
.btn-danger  { background:#C2503A !important; border-color:#C2503A !important; border-radius:12px !important; }
.btn-success { background:var(--af-green) !important; border-color:var(--af-green) !important; border-radius:12px !important; }
.btn-light, .btn-outline-primary { border-radius:12px !important; }

/* Tables */
.table thead th {
  color:var(--af-muted) !important; text-transform:uppercase; font-size:.72rem; letter-spacing:.05em;
  font-weight:700 !important; border-color:var(--af-line) !important; background:transparent !important;
}
.table tbody tr { transition: background .2s var(--af-ease); }
.table tbody tr:hover { background: var(--af-bg) !important; }
.table td, .table th { border-color:var(--af-line) !important; color:var(--af-ink) !important; }

/* Champs */
.form-control, .form-select {
  border:1px solid var(--af-line) !important; border-radius:12px !important;
  color:var(--af-ink) !important; background:#fff !important;
  transition: border-color .25s var(--af-ease), box-shadow .25s var(--af-ease) !important;
}
.form-control:focus, .form-select:focus {
  border-color: var(--af-brown) !important;
  box-shadow: 0 0 0 4px var(--af-brown-soft) !important;
}
.col-form-label, label { color: var(--af-ink-soft) !important; }

/* Badges sémantiques discrets */
.badge.bg-primary  { background: var(--af-brown) !important; }
.badge.bg-success  { background: var(--af-green) !important; }
.badge.bg-warning  { background: var(--af-amber) !important; color:#fff !important; }

/* Petits badges "pill" réutilisables */
.af-pill{ display:inline-flex; align-items:center; gap:5px; font-size:.72rem; font-weight:700; padding:4px 10px; border-radius:999px; }
.af-pill.green{ color:var(--af-green); background:var(--af-green-bg); }
.af-pill.amber{ color:var(--af-amber); background:var(--af-amber-bg); }
.af-pill.brown{ color:var(--af-brown-ink); background:var(--af-brown-soft); }

/* Liens */
a { color: var(--af-brown-ink); }
a:hover { color: var(--af-brown); }
a.sidebar-link, a.sidebar-link:hover { color: inherit; }

/* Scrollbar */
*::-webkit-scrollbar { width:10px; height:10px; }
*::-webkit-scrollbar-thumb { background:#E2DACF; border-radius:999px; }
*::-webkit-scrollbar-thumb:hover { background:var(--af-brown); }

/* ============================================================== LOGIN === */
/* Le panneau de marque devient clair (marron léger), plus de noir lourd */
.login-form-card { animation: af-rise .7s var(--af-ease) both; box-shadow: var(--af-shadow-2) !important; }
.login-form-card .form-group { animation: af-rise .6s var(--af-ease) both; }
.login-form-card .form-group:nth-of-type(1){animation-delay:.08s}
.login-form-card .form-group:nth-of-type(2){animation-delay:.14s}
.login-form-card .form-group:nth-of-type(3){animation-delay:.20s}
.login-form-card .form-group:nth-of-type(4){animation-delay:.26s}
.login-form-card .btn-login{ animation: af-rise .6s var(--af-ease) both; animation-delay:.32s; }
.login-brand-logo{ animation: af-rise .8s var(--af-ease) both; }

/* ============================ Overrides de l'ancien thème (color-1.css) ====
   On allège le marron foncé / l'or trop présents. Le thème étant chargé en
   dernier, on remet la main avec des valeurs claires. ====================== */

/* Panneau de marque du login : marron chaud MOYEN (plus de quasi-noir) */
.login-brand-panel {
  background: linear-gradient(160deg, #8A6A4B 0%, #6E523A 60%, #5A4230 100%) !important;
}
.login-page-wrapper { background: var(--af-bg) !important; }
.login-form-panel   { background: var(--af-bg) !important; }
.login-form-card .btn-login {
  background: var(--af-brown) !important;
  box-shadow: 0 6px 18px var(--af-brown-soft) !important;
}
.login-form-card .btn-login:hover { filter: brightness(1.06); box-shadow: 0 10px 26px rgba(176,137,104,.35) !important; }

/* Sidebar / Navbar : logo horizontal propre (et on masque l'ancien texte dupliqué) */
.page-wrapper .sidebar-wrapper .logo-wrapper a img,
.sidebar-wrapper .logo-wrapper img.for-light,
.page-header .logo-header-main img.for-light{
  max-width:180px !important; max-height:58px !important;
  width:auto !important; height:auto !important; object-fit:contain !important;
}
.afri-brand-name{ display:none !important; }

/* Sidebar : accent marron léger au lieu de l'or */
.sidebar-links .sidebar-list .sidebar-link:hover span,
.sidebar-links .sidebar-list.active > .sidebar-link span,
.sidebar-submenu li a:hover { color: var(--af-brown-ink) !important; }
.sidebar-links .sidebar-list .sidebar-link:hover svg path,
.sidebar-links .sidebar-list.active > .sidebar-link svg path { fill: var(--af-brown-ink) !important; }
.sidebar-links .sidebar-list .sidebar-link:hover,
.sidebar-links .sidebar-list.active > .sidebar-link {
  background: var(--af-brown-soft) !important;
  border-left: 3px solid var(--af-brown) !important;
}
.page-wrapper .page-header .header-wrapper .nav-right ul li:hover svg path { fill: var(--af-brown) !important; }
.bg-primary-gradien { background: var(--af-brown) !important; }
.txt-primary { color: var(--af-brown-ink) !important; }
a { color: var(--af-brown-ink) !important; }
a:hover { color: var(--af-brown) !important; }
a.sidebar-link, a.sidebar-link:hover { color: inherit !important; }

/* ============================================================================
   LOGIN v2 — maquette claire (classes .afl-*, indépendantes de l'ancien CSS)
   ============================================================================ */
.afl-login{
  min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr;
  background:var(--af-bg); font-family:"Montserrat",system-ui,sans-serif;
}
@media (max-width:900px){ .afl-login{ grid-template-columns:1fr; } .afl-left{ display:none !important; } }

/* ---- Panneau gauche (clair + motif discret) ---- */
.afl-left{
  position:relative; overflow:hidden; padding:54px 60px;
  display:flex; flex-direction:column;
  background:
    radial-gradient(1100px 700px at 18% 30%, #FBF7F1 0%, #F4ECE0 55%, #EFE5D6 100%);
}
.afl-left::before{ /* carte du monde / halo doux */
  content:""; position:absolute; inset:0; z-index:0; opacity:.5;
  background:
    radial-gradient(420px 420px at 62% 42%, rgba(176,137,104,.10), transparent 70%),
    radial-gradient(280px 280px at 30% 78%, rgba(200,148,26,.08), transparent 70%);
}
.afl-left::after{ /* motif losange discret en bas-gauche (sans mask : compatible partout) */
  content:""; position:absolute; left:0; bottom:0; width:42%; height:38%; z-index:0; opacity:.35;
  background-image:
    linear-gradient(135deg, rgba(176,137,104,.14) 1px, transparent 1px),
    linear-gradient(45deg,  rgba(176,137,104,.14) 1px, transparent 1px);
  background-size:26px 26px; background-position:0 100%;
}
.afl-left > *{ position:relative; z-index:1; }

/* ---- Logo AFRILOVE WORLD (image horizontale propre) ---- */
.afl-logo{ display:flex; align-items:center; margin-bottom:auto; animation:af-rise .7s var(--af-ease) both; }
.afl-logo img{ width:clamp(220px,22vw,290px); height:auto; display:block; }

/* ---- Accroche ---- */
.afl-hero{ margin:48px 0; animation:af-rise .7s var(--af-ease) .06s both; }
.afl-hero h1{
  font-size:clamp(2rem,3.4vw,2.9rem); font-weight:800; line-height:1.12; letter-spacing:-.02em;
  color:var(--af-ink); margin:0;
}
.afl-hero h1 em{ font-style:normal; color:var(--af-brown-ink); }
.afl-hero .afl-rule{ width:64px; height:4px; border-radius:4px; background:var(--af-brown); margin:26px 0 24px; }
.afl-hero p{ color:var(--af-ink-soft); font-size:1rem; line-height:1.6; max-width:42ch; margin:0; }

/* ---- Features ---- */
.afl-feats{ display:flex; gap:34px; flex-wrap:wrap; margin-top:6px; animation:af-rise .7s var(--af-ease) .12s both; }
.afl-feat{ display:flex; align-items:center; gap:13px; }
.afl-feat .ic{
  width:48px; height:48px; border-radius:50%; background:#fff; color:var(--af-brown-ink);
  display:flex; align-items:center; justify-content:center; font-size:1.05rem;
  box-shadow:0 6px 16px rgba(31,26,22,.07);
}
.afl-feat b{ display:block; font-size:.9rem; font-weight:700; color:var(--af-ink); }
.afl-feat span{ font-size:.8rem; color:var(--af-muted); }
.afl-copy{ margin-top:auto; padding-top:40px; font-size:.78rem; color:var(--af-muted); }

/* ---- Panneau droit + carte ---- */
.afl-right{ display:flex; align-items:center; justify-content:center; padding:40px 36px; }
.afl-card{
  width:100%; max-width:440px; background:#fff; border:1px solid var(--af-line);
  border-radius:26px; padding:42px 40px; box-shadow:0 24px 60px rgba(31,26,22,.10);
  animation:af-rise .7s var(--af-ease) .04s both;
}
.afl-card h2{ font-size:1.7rem; font-weight:800; color:var(--af-ink); margin:0 0 6px; letter-spacing:-.01em; }
.afl-card .afl-lead{ color:var(--af-muted); font-size:.92rem; margin:0 0 26px; }

.afl-field{ margin-bottom:18px; }
.afl-field > label{ display:block; font-size:.84rem; font-weight:700; color:var(--af-ink); margin-bottom:8px; }
.afl-input{ position:relative; display:flex; align-items:center; }
.afl-input .lead{ position:absolute; left:16px; color:var(--af-muted); font-size:.95rem; pointer-events:none; }
.afl-input input, .afl-input select{
  width:100%; height:52px; border:1.5px solid var(--af-line); border-radius:14px;
  padding:0 16px 0 46px; font-size:.95rem; color:var(--af-ink); background:#fff;
  font-family:inherit; transition:border-color .2s var(--af-ease), box-shadow .2s var(--af-ease);
  -webkit-appearance:none; appearance:none;
}
.afl-input select{ cursor:pointer; }
.afl-input input:focus, .afl-input select:focus{
  outline:none; border-color:var(--af-brown); box-shadow:0 0 0 4px var(--af-brown-soft);
}
.afl-input .eye{
  position:absolute; right:14px; background:none; border:none; cursor:pointer;
  color:var(--af-muted); font-size:1rem; padding:6px; line-height:1;
}
.afl-input .eye:hover{ color:var(--af-brown-ink); }
.afl-input .caret{ position:absolute; right:16px; color:var(--af-muted); pointer-events:none; font-size:.8rem; }

.afl-row{ display:flex; align-items:center; justify-content:space-between; margin:6px 0 22px; }
.afl-check{ display:flex; align-items:center; gap:9px; font-size:.86rem; color:var(--af-ink-soft); cursor:pointer; user-select:none; }
.afl-check input{ position:absolute; opacity:0; width:0; height:0; }
.afl-check .box{
  width:20px; height:20px; border-radius:6px; border:1.5px solid var(--af-line);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:.7rem;
  background:#fff; transition:.2s;
}
.afl-check input:checked + .box{ background:var(--af-brown); border-color:var(--af-brown); }
.afl-link{ font-size:.85rem; font-weight:600; color:var(--af-brown-ink); text-decoration:none; }
.afl-link:hover{ color:var(--af-brown); }

.afl-btn{
  width:100%; height:56px; border:none; border-radius:15px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:12px;
  font-size:1rem; font-weight:700; color:#fff; letter-spacing:.01em;
  background:linear-gradient(135deg,#C9952B 0%,#A6702E 100%);
  box-shadow:0 12px 26px rgba(166,112,46,.30);
  transition:transform .22s var(--af-ease), box-shadow .22s var(--af-ease), filter .22s var(--af-ease);
}
.afl-btn:hover{ transform:translateY(-2px); filter:brightness(1.04); box-shadow:0 16px 34px rgba(166,112,46,.38); }
.afl-btn .arr{ transition:transform .22s var(--af-ease); }
.afl-btn:hover .arr{ transform:translateX(4px); }

.afl-sep{ display:flex; align-items:center; gap:14px; margin:26px 0 18px; color:var(--af-muted); font-size:.8rem; }
.afl-sep::before, .afl-sep::after{ content:""; flex:1; height:1px; background:var(--af-line); }
.afl-secure{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.afl-secure .lock{
  width:46px; height:46px; border-radius:50%; background:#fff; border:1px solid var(--af-line);
  display:flex; align-items:center; justify-content:center; color:var(--af-brown-ink);
  box-shadow:0 6px 16px rgba(31,26,22,.06);
}
.afl-secure span{ font-size:.84rem; color:var(--af-ink-soft); font-weight:600; }

/* ============================================================================
   SIDEBAR / NAVBAR — correctif layout
   Le template replie la sidebar (.close_icon) dès ≤1385px, ce qui casse
   l'affichage. On force une sidebar FIXE toujours ouverte sur desktop,
   on supprime le logo violet et les boutons de repli.
   ============================================================================ */

/* Logo : jamais le carré violet par défaut */
.page-wrapper .page-body-wrapper .logo-icon-wrapper{ display:none !important; }
.logo-icon-wrapper .icon-box-sidebar{ background:var(--af-brown) !important; }

/* Boutons de repli/back qui cassent l'affichage */
.sidebar-wrapper .back-btn,
.page-header .header-wrapper .toggle-sidebar{ display:none !important; }

@media (min-width: 992px){
  /* Sidebar fixe 260px, blanche, toujours visible (même si .close_icon) */
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper,
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon{
    width:260px !important; left:0 !important; transform:none !important;
    background:#fff !important; border-right:1px solid var(--af-line) !important;
    box-shadow:0 0 24px rgba(31,26,22,.05) !important;
  }
  /* Header + contenu décalés de 260px */
  .page-wrapper.compact-wrapper .page-header,
  .page-wrapper.compact-wrapper .page-header.close_icon{
    margin-left:260px !important; width:calc(100% - 260px) !important;
  }
  .page-wrapper.compact-wrapper .page-body-wrapper .page-body{
    margin-left:260px !important;
  }
  /* Forcer l'état "ouvert" : libellés, titres et logo visibles même en .close_icon */
  .page-wrapper.compact-wrapper .sidebar-wrapper.close_icon .logo-wrapper{ display:flex !important; align-items:center; opacity:1 !important; }
  .page-wrapper.compact-wrapper .sidebar-wrapper.close_icon .sidebar-main .sidebar-links .sidebar-list .sidebar-link span,
  .page-wrapper.compact-wrapper .sidebar-wrapper.close_icon .sidebar-link .according-menu,
  .page-wrapper.compact-wrapper .sidebar-wrapper.close_icon .sidebar-title,
  .page-wrapper.compact-wrapper .sidebar-wrapper.close_icon .menu-title{
    display:inline-block !important; opacity:1 !important; visibility:visible !important; width:auto !important;
  }
  .page-wrapper.compact-wrapper .sidebar-wrapper.close_icon .sidebar-main .sidebar-links{ height:auto !important; }
}

/* Mobile : sidebar masquée par défaut, ouverte via le bouton (.close_icon) */
@media (max-width: 991px){
  .page-header .header-wrapper .toggle-sidebar{ display:inline-flex !important; }
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper{
    transform:translateX(-100%) !important; transition:transform .3s !important;
    width:260px !important; background:#fff !important; z-index:99 !important;
  }
  .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper.close_icon{
    transform:translateX(0) !important;
  }
  .page-wrapper.compact-wrapper .page-header,
  .page-wrapper.compact-wrapper .page-header.close_icon,
  .page-wrapper.compact-wrapper .page-body-wrapper .page-body{
    margin-left:0 !important; width:100% !important;
  }
}