:root{--bg:#f9fafb;--card:#fff;--tx:#1b2430;--mut:#6b7785;--br:#e4e9ee;--pri:#f5a300;--pri-d:#c98400;--dark:#16212e;--ok:#1f9d55;--warn:#d98a00;--dng:#d64545;--safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px)}
/* Mode sombre : suit le système par défaut, sauf préférence choisie explicitement via le bouton (data-theme). */
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#141b23;--card:#1c2630;--tx:#e8edf2;--mut:#93a0ae;--br:#2c3946;--dark:#0b1016}}
:root[data-theme="dark"]{--bg:#141b23;--card:#1c2630;--tx:#e8edf2;--mut:#93a0ae;--br:#2c3946;--dark:#0b1016}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0}
body{font:15px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--tx);overscroll-behavior-y:none;position:relative}
/* ---------- fond animé (derrière le contenu, sous les cartes/en-têtes qui restent opaques) ---------- */
body::before{content:"";position:fixed;inset:-15%;z-index:0;pointer-events:none;
  background:
    radial-gradient(circle at 18% 22%, rgba(245,163,0,.16) 0%, transparent 42%),
    radial-gradient(circle at 82% 15%, rgba(245,163,0,.10) 0%, transparent 46%),
    radial-gradient(circle at 70% 85%, rgba(22,33,46,.14) 0%, transparent 50%),
    radial-gradient(circle at 15% 80%, rgba(245,163,0,.08) 0%, transparent 46%);
  animation:bg-drift 26s ease-in-out infinite alternate}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) body::before{background:
    radial-gradient(circle at 18% 22%, rgba(245,163,0,.14) 0%, transparent 42%),
    radial-gradient(circle at 82% 15%, rgba(245,163,0,.09) 0%, transparent 46%),
    radial-gradient(circle at 70% 85%, rgba(245,163,0,.07) 0%, transparent 50%),
    radial-gradient(circle at 15% 80%, rgba(245,163,0,.06) 0%, transparent 46%)}}
:root[data-theme="dark"] body::before{background:
    radial-gradient(circle at 18% 22%, rgba(245,163,0,.14) 0%, transparent 42%),
    radial-gradient(circle at 82% 15%, rgba(245,163,0,.09) 0%, transparent 46%),
    radial-gradient(circle at 70% 85%, rgba(245,163,0,.07) 0%, transparent 50%),
    radial-gradient(circle at 15% 80%, rgba(245,163,0,.06) 0%, transparent 46%)}
@keyframes bg-drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-3%,2.5%) scale(1.08)}100%{transform:translate(2.5%,-3%) scale(1.04)}}
@media(prefers-reduced-motion:reduce){body::before{animation:none}}
#app{position:relative;z-index:1}
.hidden{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
button{touch-action:manipulation}
.btn{background:var(--pri);color:#1b1300;border:0;border-radius:10px;padding:12px 16px;font-weight:600;cursor:pointer;min-height:44px}
.btn:active{background:var(--pri-d)}
.btn.sec{background:transparent;border:1px solid var(--br);color:var(--tx)}
.btn.dng{background:var(--dng);color:#fff}
.btn.sm{padding:8px 12px;font-size:13px;min-height:36px}
input,select,textarea{width:100%;padding:12px 10px;border:1px solid var(--br);border-radius:10px;background:var(--card);font-size:16px}
label{display:block;font-size:13px;color:var(--mut);margin:12px 0 4px}
/* ---------- Select2 (listes déroulantes avec recherche) ---------- */
.select2-container{width:100% !important}
.select2-container--default .select2-selection--single{height:46px;border:1px solid var(--br);border-radius:10px;background:var(--card);display:flex;align-items:center}
.select2-container--default .select2-selection--single .select2-selection__rendered{color:var(--tx);font-size:16px;line-height:1.3;padding:0 34px 0 10px}
.select2-container--default .select2-selection--single .select2-selection__placeholder{color:var(--mut)}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:44px;right:8px}
.select2-container--default .select2-selection--single .select2-selection__arrow b{border-color:var(--mut) transparent transparent transparent}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent var(--mut) transparent}
.select2-container--default.select2-container--open .select2-selection--single{border-color:var(--pri)}
.select2-dropdown{background:var(--card);border:1px solid var(--br);border-radius:10px;overflow:hidden;box-shadow:0 10px 30px #0004;z-index:1100}
.select2-search--dropdown{padding:8px;background:var(--card)}
.select2-search--dropdown .select2-search__field{background:var(--bg);color:var(--tx);border:1px solid var(--br);border-radius:8px;padding:8px 10px;font-size:14px;outline:none}
.select2-results__option{padding:9px 12px;font-size:14px;color:var(--tx)}
.select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--pri);color:#1b1300}
.select2-container--default .select2-results__option[aria-selected=true]{background:var(--br)}
.select2-results__message{color:var(--mut);padding:9px 12px}
.select2-container--default .select2-selection--single .select2-selection__clear{color:var(--mut);margin-right:6px}
/* ---------- connexion ---------- */
.welcome{position:relative;min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:16px;overflow:hidden;background:#0b0f14}
.bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 75%;z-index:0}
.bg-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,#0b0f14cc 0%,#0b0f1499 35%,#0b0f14e6 100%)}
.welcome-content{position:relative;z-index:2;width:100%;display:flex;flex-direction:column;align-items:center;text-align:center}
.brand-xl{font-size:38px;font-weight:800;color:#fff;letter-spacing:.5px;text-shadow:0 2px 20px #000a;display:flex;align-items:center;justify-content:center;gap:14px}
.brand-logo-xl{height:76px;width:auto;border-radius:12px;background:#fff;padding:3px;box-shadow:0 4px 18px #000a}
.tagline{color:#dbe2ea;font-size:15px;line-height:1.5;margin:10px 0 26px;text-shadow:0 1px 8px #000a}
.login-card{background:var(--card);border:1px solid var(--br);border-radius:16px;padding:28px 24px;width:100%;max-width:380px;box-shadow:0 10px 40px #0007}
.login-card h1{margin:0 0 4px;font-size:24px;display:flex;align-items:center;gap:10px}.login-card p{color:var(--mut);margin:0 0 12px}
.brand-logo-sm{height:34px;width:auto;border-radius:8px}
.err{color:var(--dng);font-size:14px;margin-top:10px;min-height:1em}
/* ---------- en-tête ---------- */
.top{background:var(--dark);color:#fff;position:sticky;top:0;z-index:5;padding-top:var(--safe-t)}
.top-row1{display:flex;align-items:center;gap:10px;padding:10px 14px}
.brand{font-weight:700;color:var(--pri);font-size:16px;display:flex;align-items:center;gap:8px}
.brand-logo-top{height:26px;width:auto;border-radius:6px}
.who{font-size:13px;opacity:.85;flex:1;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.icon-btn{background:#ffffff1a;border:0;color:#fff;border-radius:50%;width:36px;height:36px;font-size:16px;cursor:pointer;flex-shrink:0}
.spaces{display:flex;gap:6px;overflow-x:auto;padding:0 14px 10px;-ms-overflow-style:none;scrollbar-width:none}
.spaces::-webkit-scrollbar{display:none}
.spaces button{background:#ffffff14;color:#fff;border:0;border-radius:20px;padding:7px 15px;cursor:pointer;text-transform:capitalize;white-space:nowrap;flex-shrink:0}
.spaces button.on{background:var(--pri);color:#1b1300;font-weight:600}
/* Onglets en pilules : fond plein (couleur de marque) sur la page active */
.tabs{display:flex;gap:6px;overflow-x:auto;background:var(--card);border-bottom:1px solid var(--br);padding:9px 10px;-ms-overflow-style:none;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{background:none;border:0;border-radius:999px;padding:9px 16px;cursor:pointer;color:var(--mut);white-space:nowrap;display:flex;align-items:center;gap:7px;transition:background .25s ease,color .25s ease}
.tabs button.on{background:var(--pri);color:#1b1300;font-weight:600}
.tabs .tb-ic{font-size:15px;line-height:1;display:inline-block;transform:scale(1);transition:transform .25s cubic-bezier(.34,1.56,.64,1),font-size .25s ease}
.tabs button.on .tb-ic{transform:scale(1.1)}
/* barre de navigation basse (mobile) */
.bottomnav{display:none}
main{padding:14px;padding-bottom:30px;max-width:1200px;margin:0 auto}
/* ================= BUREAU LARGE : barre latérale fixe ================= */
@media(min-width:901px){
  .tabs{position:fixed;top:0;left:0;bottom:0;width:230px;flex-direction:column;align-items:stretch;gap:3px;
    overflow-x:visible;overflow-y:auto;border-bottom:0;border-right:1px solid var(--br);
    padding:calc(var(--header-h,72px) + 16px) 12px 16px;z-index:4}
  .tabs button{justify-content:flex-start;padding:10px 14px}
  .tabs .tb-ic{font-size:17px}
  .tabs button.on .tb-ic{transform:scale(1.05)}
  main{margin-left:230px;max-width:none}
}
/* ---------- contenu ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:16px}
.stat{background:var(--card);border:1px solid var(--br);border-radius:12px;padding:14px}
.stat b{display:block;font-size:24px}.stat span{color:var(--mut);font-size:12px}
.card{background:var(--card);border:1px solid var(--br);border-radius:12px;padding:14px;margin-bottom:16px}
.card h3{margin:0 0 10px;font-size:16px}
.bar{display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.bar input{max-width:280px;flex:1}
.bar .sp{flex:1;min-width:0}
.bar .btn,.bar .btn.sec{flex:1 1 auto;white-space:nowrap}
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--br);vertical-align:top}
th{color:var(--mut);font-weight:600;font-size:12px;text-transform:uppercase}
.tag{display:inline-block;padding:3px 9px;border-radius:12px;font-size:12px;background:var(--br)}
.tag.ok{background:#1f9d5528;color:var(--ok)}.tag.warn{background:#d98a0030;color:var(--warn)}.tag.dng{background:#d6454528;color:var(--dng)}
.alert{padding:10px 12px;border-radius:8px;margin-bottom:6px;font-size:14px}
.alert.warn{background:#d98a0025;border-left:4px solid var(--warn)}.alert.danger{background:#d6454522;border-left:4px solid var(--dng)}
.empty{color:var(--mut);padding:18px;text-align:center}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.act{display:flex;gap:6px;flex-wrap:wrap}
.thumb{position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:10px;overflow:hidden;background:var(--br);font-size:20px;flex-shrink:0;cursor:pointer}
.thumb:not(:has(img)){cursor:default}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;cursor:pointer}
.pieces{display:flex;gap:12px;flex-wrap:wrap;margin:6px 0 4px}
.pieces figure{margin:0;width:120px;cursor:pointer}
.pieces img{width:120px;height:90px;object-fit:cover;border-radius:10px;border:1px solid var(--br);display:block;background:var(--bg)}
.pieces figcaption{font-size:12px;color:var(--mut);text-align:center;margin-top:4px}
.full-img{width:100%;max-height:70vh;object-fit:contain;border-radius:10px;display:block;background:var(--bg)}
/* ---------- bascule afficher/scanner le QR ---------- */
.seg{display:flex;border:1px solid var(--br);border-radius:10px;overflow:hidden;margin-bottom:12px}
.seg button{flex:1;background:var(--card);border:0;padding:10px;cursor:pointer;color:var(--mut);font-weight:600;font-size:13px}
.seg button.on{background:var(--pri);color:#1b1300}
.qr-wrap{text-align:center}
.qr-img{width:200px;height:200px;background:#fff;border-radius:10px;padding:8px;border:1px solid var(--br)}
.qr-cap{color:var(--mut);font-size:13px;margin-top:10px}
#qr-video,#ep-qr-video{width:100%;max-width:320px;aspect-ratio:1/1;object-fit:cover;border-radius:12px;background:#000}
.scan-card{display:flex;gap:12px;align-items:center;text-align:left;background:var(--bg);border:1px solid var(--br);border-radius:12px;padding:12px;margin-bottom:12px}
.scan-card .thumb{width:54px;height:54px;font-size:26px}
/* ---------- formules d'épargne : carrousel ---------- */
.formule-carousel{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:2px;-webkit-overflow-scrolling:touch;padding:2px 2px 10px}
.formule-carousel::-webkit-scrollbar{height:6px}
.formule-carousel::-webkit-scrollbar-thumb{background:var(--br);border-radius:3px}
.formule-card{scroll-snap-align:start;flex:0 0 230px;background:var(--bg);border:1px solid var(--br);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.formule-card-img{height:100px;display:flex;align-items:center;justify-content:center;background:var(--br);font-size:32px;overflow:hidden;cursor:pointer}
.formule-card-img img{width:100%;height:100%;object-fit:cover}
.formule-card-body{padding:12px;display:flex;flex-direction:column;gap:6px}
.formule-card-body h4{margin:0;font-size:15px}
.formule-card-meta{display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--mut)}
.formule-card-desc{margin:0;font-size:12px;color:var(--mut);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.formule-card-act{margin-top:2px}
@media(max-width:420px){.formule-card{flex-basis:78vw}}
/* ---------- progression d'un contrat d'épargne ---------- */
.progress{width:100px;height:7px;border-radius:4px;background:var(--br);overflow:hidden;margin-bottom:3px}
.progress-bar{height:100%;background:var(--pri);border-radius:4px;transition:width .3s}
/* ---------- reçu imprimable ---------- */
.recu{background:#fff;color:#111;padding:4px;border-radius:8px}
.recu-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.recu-logo{height:48px;width:auto;border-radius:8px}
.recu-table{width:100%;border-collapse:collapse;font-size:14px}
.recu-table td{padding:7px 4px;border-bottom:1px solid #ddd}
.recu-table td:first-child{color:#666;width:38%}
.recu-foot{font-size:12px;color:#888;margin-top:12px}
@media print{
  body *{visibility:hidden}
  #recu-print,#recu-print *{visibility:visible}
  #recu-print{position:absolute;left:0;top:0;width:100%;padding:20px}
  .modal-foot{display:none}
}
/* ---------- véhicules : vue mosaïque ---------- */
.veh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.veh-card{background:var(--card);border:1px solid var(--br);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.veh-card-img{height:130px;display:flex;align-items:center;justify-content:center;background:var(--br);font-size:40px;overflow:hidden;cursor:pointer}
.veh-card-img img{width:100%;height:100%;object-fit:cover}
.veh-card-body{padding:12px;display:flex;flex-direction:column;gap:6px}
.veh-card-top{font-size:16px}
.veh-card-model{color:var(--mut);font-size:13px}
.veh-card-meta{display:flex;flex-direction:column;gap:2px;font-size:13px;margin-top:4px}
.veh-card-meta span{color:var(--mut);margin-right:4px}
.veh-card-meta span::after{content:" : "}
.veh-card-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.veh-card-act{margin-top:6px}
/* ---------- contrôle d'accès (permissions agent) ---------- */
.chk{display:flex;align-items:center;gap:9px;font-size:14px;margin:9px 0;cursor:pointer}
.chk input{width:auto;accent-color:var(--pri)}
.perm-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 14px;padding:10px 12px;border:1px solid var(--br);border-radius:10px;background:var(--bg)}
.perm-grid .chk{margin:6px 0}
@media(max-width:420px){.perm-grid{grid-template-columns:1fr}}
/* Un bloc par module d'accès agent, avec ses actions précises (créer/modifier/supprimer, etc.) */
.perm-mods{display:flex;flex-direction:column;gap:8px}
.perm-mod{border:1px solid var(--br);border-radius:10px;background:var(--bg);padding:8px 12px}
.perm-mod-title{font-size:13px;font-weight:600;color:var(--mut);margin-bottom:2px}
.perm-mod-acts{display:flex;flex-wrap:wrap;gap:4px 16px}
.perm-mod-acts .chk{margin:4px 0}
/* ---------- modale & toast ---------- */
.modal{position:fixed;inset:0;margin:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:20;padding:16px;overflow:auto;box-sizing:border-box}
.modal-box{background:var(--card);border-radius:14px;padding:20px;width:100%;max-width:520px;max-height:92vh;overflow:auto}
.modal-box h3{margin:0 0 6px}.modal-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:16px;position:sticky;bottom:-20px;background:var(--card);padding-top:8px}
.toast{position:fixed;bottom:calc(18px + var(--safe-b));left:50%;transform:translateX(-50%);background:var(--dark);color:#fff;padding:11px 18px;border-radius:10px;z-index:30;max-width:90vw}
.toast.bad{background:var(--dng)}

/* ================= MOBILE ================= */
@media(max-width:680px){
  main{padding:10px;padding-bottom:calc(88px + var(--safe-b))}
  .tabs{display:none}
  .toast{bottom:calc(88px + var(--safe-b))}
  /* dock flottant, détaché des bords, avec pilule pleine sur l'onglet actif */
  .bottomnav{display:flex;position:fixed;left:12px;right:12px;bottom:calc(10px + var(--safe-b));background:var(--card);
    border:1px solid var(--br);border-radius:22px;z-index:10;padding:6px;justify-content:space-around;gap:2px;
    box-shadow:0 10px 30px #0004}
  .bottomnav button{flex:1;background:none;border:0;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;color:var(--mut);padding:7px 2px;min-width:0;transition:background .25s ease,color .25s ease}
  .bottomnav button.on{background:var(--pri);color:#1b1300}
  .bottomnav .bn-ic{font-size:18px;line-height:1;display:inline-block;transform:scale(1);transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
  .bottomnav button.on .bn-ic{transform:scale(1.08)}
  .bottomnav .bn-lb{font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;transition:opacity .2s ease}
  .bottomnav button.on .bn-lb{font-weight:700}
  .row2{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
  .bar{flex-direction:column;align-items:stretch}
  .bar .sp{display:none}
  .bar input{max-width:none}
  /* tableaux -> cartes empilées */
  .tw table,.tw thead,.tw tbody,.tw th,.tw tr,.tw td{display:block;width:100%}
  .tw thead{display:none}
  .tw tr{border:1px solid var(--br);border-radius:12px;padding:10px 12px;margin-bottom:10px;background:var(--bg)}
  .tw td{border:none;padding:6px 0;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;text-align:right}
  .tw td[data-label=""]{justify-content:flex-end}
  .tw td::before{content:attr(data-label);font-weight:600;color:var(--mut);font-size:11px;text-transform:uppercase;text-align:left;flex-shrink:0}
  .tw td[data-label=""]::before{content:none}
  .tw td.act{justify-content:flex-end}
  .modal{padding:0;align-items:flex-end}
  .modal-box{border-radius:16px 16px 0 0;max-height:94dvh;max-width:100%;padding-bottom:calc(20px + var(--safe-b))}
}
@media(min-width:681px) and (max-width:900px){.grid{grid-template-columns:repeat(3,1fr)}}