@import './_variables.css';
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--forest);color:var(--fg);font-family:var(--f-body);-webkit-font-smoothing:antialiased}
button{cursor:pointer;font-family:var(--f-body)}
input,select,textarea{font-family:var(--f-mono);background:var(--forest-2);border:1px solid var(--line-2);color:var(--fg);padding:9px 12px;border-radius:3px;width:100%;font-size:13px;outline:none;transition:border .15s;-webkit-appearance:none;appearance:none}
input[type="checkbox"],input[type="radio"]{-webkit-appearance:auto;appearance:auto;width:16px;height:16px;padding:0;border:0;background:transparent;cursor:pointer;accent-color:var(--green-vif);vertical-align:middle;flex:none;margin-right:6px}
input[type="hidden"]{display:none!important}
form[hidden]{display:none!important}
input:focus,select:focus,textarea:focus{border-color:var(--green-vif)}
select option{background:var(--forest-2)}
label{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);margin-bottom:5px}
::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:var(--forest)}::-webkit-scrollbar-thumb{background:var(--forest-3);border-radius:2px}

/* MOBILE BURGER & OVERLAY */
.mh-burger{display:none;background:transparent;border:1px solid var(--line-2);width:36px;height:36px;border-radius:3px;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0;margin-right:10px}
.mh-burger span{display:block;width:16px;height:2px;background:var(--cream);transition:.25s;border-radius:1px}
.mh-burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.mh-burger.open span:nth-child(2){opacity:0}
.mh-burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.sb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:80}
.sb-overlay.on{display:block}

/* BOUTON RETOUR SITE */
.sb-back{padding:10px 18px;border-top:1px solid var(--line)}
.btn-back-site{display:flex;align-items:center;gap:7px;background:transparent;border:1px solid var(--line-2);color:var(--fg-2);font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;cursor:pointer;transition:all .15s;padding:8px 10px;border-radius:3px;width:100%;justify-content:center}
.btn-back-site:hover{border-color:var(--gold);color:var(--gold)}

/* RESPONSIVE MOBILE */
@media(max-width:900px){
  :root{--sb:260px}
  .sb{position:fixed;top:0;left:-100%;height:100vh;z-index:100;transition:left .3s ease;width:var(--sb)}
  .sb.on{left:0;box-shadow:4px 0 24px rgba(0,0,0,.4)}
  .mh-burger{display:flex}
  .mh{padding:14px 14px;flex-wrap:wrap;gap:8px}
  .mh-title{font-size:18px}
  .u-avatar{width:28px;height:28px;font-size:13px}
  .u-name{display:none}
  .content{padding:14px}
  .stats-g{grid-template-columns:repeat(2,1fr);gap:8px}
  .s-val{font-size:26px}
  .s-val-plan{font-size:15px}
  .s-card{padding:12px 14px}
  .sec{display:none}
  .sec.on{display:block}
  .fleet-g{grid-template-columns:1fr;gap:10px}
  .vc-img{height:120px}
  .vc-name{font-size:17px}
  .msg-layout{grid-template-columns:1fr;height:calc(100vh - 130px);min-height:0;position:relative}
  .msg-list{border-right:0;border-bottom:none;overflow-y:auto;position:absolute;inset:0;z-index:2;background:var(--forest-2);transition:transform .25s ease}
  .msg-list.hidden{transform:translateX(-100%);pointer-events:none}
  .msg-thread{position:absolute;inset:0;z-index:1;height:100%;display:flex;flex-direction:column;overflow:hidden;transition:transform .25s ease;transform:translateX(100%)}
  .msg-thread.visible{transform:translateX(0);z-index:3}
  .mt-bubbles{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
  .mt-reply{flex-direction:column;gap:6px;padding:10px 12px}
  .mt-reply textarea{width:100%;height:72px;font-size:15px;resize:none}
  .btn-send{width:100%;padding:12px;font-size:13px}
  .bub{max-width:88%;font-size:14px;padding:10px 13px}
  .mt-hd{padding:10px 12px;display:flex;align-items:center;gap:10px}
  .btn-msg-back{display:flex;align-items:center;gap:5px;background:transparent;border:1px solid var(--line-2);color:var(--fg-2);font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;padding:6px 10px;border-radius:3px;flex-shrink:0;cursor:pointer;transition:all .15s}
  .btn-msg-back:hover{border-color:var(--green-vif);color:var(--green-vif)}
  .mt-hd-info{flex:1;min-width:0}
  .profile-g{grid-template-columns:1fr;gap:12px}
  .f-row{grid-template-columns:1fr;gap:0}
  .pt{font-size:12px}
  .pt th,.pt td{padding:6px 5px}
  .veh-sel{gap:5px}
  .modal{max-width:100%;margin:0;border-radius:0;min-height:100vh}
  .modal-ov{padding:0}
  .modal-hd{border-radius:0}
  /* Enregistrer/Annuler toujours atteignables : la modale vehicule fait 2530px
     de haut sur un 375x812, le pied se trouvait a 3 ecrans du champ en erreur. */
  .modal-ft{position:sticky;bottom:0;z-index:2;background:var(--forest-2);border-top:1px solid var(--line-2)}
/* Bandeau d'erreur de la modale vehicule : colle juste sous l'entete (elle-meme
   sticky). Le decalage `top` est pose en JS depuis la hauteur reelle de
   l'entete -- elle varie selon la langue et le dashboard. */
.modal-err{position:sticky;z-index:2;margin:0;padding:11px 20px;background:#3a1714;border-bottom:1px solid rgba(214,67,42,.55);color:#ff8a8a;font-size:13px;line-height:1.45;font-weight:600}
  .cal-mo{font-size:18px}
  .cd{min-height:32px;font-size:11px}
}
@media(max-width:480px){
  .stats-g{grid-template-columns:1fr}
  .mh{padding:12px}
  .content{padding:12px 10px}
  .sh-title{font-size:16px}
  .btn-add{padding:7px 12px;font-size:11px}
}

/* LOGIN */
#loginScreen{position:fixed;inset:0;background:var(--forest);display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:40px 16px;box-sizing:border-box;z-index:999;background-image:radial-gradient(circle at 70% 30%,rgba(26,122,94,.08) 0%,transparent 60%)}
.login-box{width:380px;padding:40px;background:var(--forest-2);border:1px solid var(--line-2);border-radius:4px}
.login-logo{font-family:var(--f-disp);font-size:28px;font-weight:900;font-style:italic;letter-spacing:3px;text-transform:uppercase;color:var(--cream);margin-bottom:2px}
.login-logo span{color:var(--green-vif)}
.login-sub{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;color:var(--fg-3);text-transform:uppercase;margin-bottom:32px}
.login-field{margin-bottom:14px}
.btn-login{width:100%;padding:13px;background:var(--green-vif);border:0;color:var(--forest);font-family:var(--f-mono);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;border-radius:3px;margin-top:10px;transition:opacity .15s}
.btn-login:hover{opacity:.86}
.btn-demo{width:100%;padding:10px;background:transparent;border:1px solid var(--line-2);color:var(--fg-3);font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;border-radius:3px;margin-top:8px;transition:all .15s}
.btn-demo:hover{border-color:var(--gold);color:var(--gold)}
.login-err{font-family:var(--f-mono);font-size:11px;color:var(--rally);margin-top:8px;display:none}
.login-hint{font-family:var(--f-mono);font-size:11px;color:var(--fg-4);margin-top:12px;text-align:center;line-height:1.5}

/* LAYOUT */
#app{display:none;height:100vh;overflow:hidden}
.layout{display:flex;height:100%}

/* SIDEBAR */
.sb{width:var(--sb);background:var(--forest-2);border-right:1px solid var(--line);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto}
.sb-logo{padding:20px 20px 16px;border-bottom:1px solid var(--line)}
.sb-logo-text{font-family:var(--f-disp);font-size:18px;font-weight:900;font-style:italic;letter-spacing:2px;color:var(--cream)}
.sb-logo-text span{color:var(--green-vif)}
.sb-logo-sub{font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;color:var(--fg-4);text-transform:uppercase;margin-top:3px}
.sb-nav{flex:1;padding:10px 0}
.sb-item{display:flex;align-items:center;gap:10px;padding:10px 18px;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);background:transparent;border:0;width:100%;text-align:left;transition:all .15s;position:relative;cursor:pointer}
.sb-item:hover{color:var(--fg);background:rgba(255,255,255,.025)}
.sb-item.on{color:var(--green-vif);background:rgba(34,168,122,.07)}
.sb-item.on::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--green-vif)}
.sb-ico{width:16px;text-align:center;font-size:13px;flex-shrink:0}
.sb-notif{background:var(--rally);color:#fff;font-size:10px;font-family:var(--f-mono);font-weight:700;padding:1px 5px;border-radius:8px;min-width:16px;text-align:center;margin-left:auto}
.sb-plan{margin:0 12px 12px;padding:10px 12px;background:var(--gold-pale);border:1px solid rgba(212,166,73,.2);border-radius:3px}
.sb-plan-label{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;color:var(--fg-3);text-transform:uppercase}
.sb-plan-val{font-family:var(--f-disp);font-size:18px;font-weight:900;color:var(--gold);line-height:1.1;margin-top:2px}
.sb-logout{padding:12px 18px;border-top:1px solid var(--line)}
.btn-logout{display:flex;align-items:center;gap:7px;background:transparent;border:0;color:var(--fg-4);font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;cursor:pointer;transition:color .15s;padding:0}
.btn-logout:hover{color:var(--rally)}

/* MAIN */
.main{flex:1;overflow-y:auto;background:var(--forest);display:flex;flex-direction:column}
.mh{padding:18px 28px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;background:var(--forest-2);position:sticky;top:0;z-index:10;flex-shrink:0}
.mh-title{font-family:var(--f-disp);font-size:26px;font-weight:900;font-style:italic;text-transform:uppercase;color:var(--cream);line-height:1}
.mh-title span{color:var(--green-vif)}
.user-chip{display:flex;align-items:center;gap:8px}
.u-avatar{width:30px;height:30px;background:var(--green);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--f-disp);font-size:14px;font-weight:900;color:var(--cream);flex-shrink:0}
.u-name{font-family:var(--f-mono);font-size:11px;color:var(--fg-3)}
.content{padding:24px 28px;flex:1}
.sec{display:none}
.sec.on{display:block}

/* STATS */
.stats-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:10px;margin-bottom:22px}
.s-card{background:var(--forest-2);border:1px solid var(--line-2);border-radius:3px;padding:16px 18px}
.s-val{font-family:var(--f-disp);font-size:38px;font-weight:900;font-style:italic;color:var(--cream);line-height:1}
.s-val.g{color:var(--green-vif)}.s-val.go{color:var(--gold)}.s-val.r{color:var(--rally)}
.s-val-plan{font-family:var(--f-disp);font-size:clamp(16px,2.2vw,22px);font-weight:900;font-style:italic;color:var(--fg-2);line-height:1.1;word-break:break-word}
.s-lbl{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);margin-top:4px}

/* SECTION HEADER */
.sh{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.sh-title{font-family:var(--f-disp);font-size:20px;font-weight:900;font-style:italic;text-transform:uppercase;color:var(--cream)}
.btn-add{background:var(--green-vif);border:0;color:var(--forest);font-family:var(--f-mono);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:9px 16px;border-radius:3px;display:inline-flex;align-items:center;gap:5px;transition:opacity .15s}
.btn-add:hover{opacity:.86}

/* VEHICLE CARDS */
.fleet-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(275px,1fr));gap:14px}
.vc{background:var(--forest-2);border:1px solid var(--line-2);border-radius:3px;overflow:hidden;transition:border-color .2s}
.vc:hover{border-color:var(--green)}
.vc-img{height:148px;background:var(--forest-3);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.vc-img img{width:100%;height:100%;object-fit:cover;display:block}
.vc-ph{font-size:40px;opacity:.25}
.vc-status{position:absolute;top:8px;right:8px;font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:2px}
.vc-on{background:rgba(34,168,122,.2);color:var(--green-vif);border:1px solid rgba(34,168,122,.3)}
.vc-off{background:rgba(214,67,42,.15);color:var(--rally);border:1px solid rgba(214,67,42,.3)}
.vc-status.vc-unsynced{background:rgba(214,67,42,.9);color:#fff}
.vc-body{padding:14px}
.vc-name{font-family:var(--f-disp);font-size:19px;font-weight:900;font-style:italic;text-transform:uppercase;color:var(--cream)}
.vc-cat{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--green-vif);margin-top:1px}
.vc-tags{display:flex;gap:5px;flex-wrap:wrap;margin:8px 0 6px}
.tag{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;padding:2px 7px;background:var(--forest-3);border-radius:2px;color:var(--fg-2)}
.vc-price{font-family:var(--f-disp);font-size:20px;font-weight:700;color:var(--gold)}
.vc-price small{font-family:var(--f-mono);font-size:11px;color:var(--fg-3);font-weight:400}
.vc-caution{font-family:var(--f-mono);font-size:11px;color:var(--fg-4);margin-top:3px}
.vc-foot{display:flex;gap:5px;padding:10px 14px;border-top:1px solid var(--line);background:rgba(0,0,0,.08);flex-wrap:wrap}
/* "Ma fiche publique" sur sa propre ligne : 5 boutons sur une seule rangee
   devenaient illisibles sous 400px (libelles tronques a 3-4 lettres). */
.vc-foot-break{flex:1 0 100%;height:0}
.btn-veh.btn-veh-full{flex:1 1 auto}
/* ✕ garde une largeur fixe : sans cela il occupait toute une rangee a lui
   seul apres le passage a la ligne -- un bouton Supprimer pleine largeur. */
.btn-veh.d{flex:0 0 46px}
.btn-veh{flex:1;background:transparent;border:1px solid var(--line-2);color:var(--fg-3);font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:7px 4px;border-radius:2px;transition:all .15s}
.btn-veh:hover{border-color:var(--green-vif);color:var(--green-vif)}
.btn-veh.d:hover{border-color:var(--rally);color:var(--rally)}

/* MODAL */
.modal-ov{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:500;display:none;align-items:flex-start;justify-content:center;padding:24px 16px;overflow-y:auto}
.modal-ov.open{display:flex}
.modal{background:var(--forest-2);border:1px solid var(--line-2);border-radius:4px;width:100%;max-width:640px;position:relative}
.modal-hd{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--forest-2);z-index:1;border-radius:4px 4px 0 0}
.modal-t{font-family:var(--f-disp);font-size:18px;font-weight:900;font-style:italic;text-transform:uppercase;color:var(--cream)}
.btn-x{background:transparent;border:0;color:var(--fg-3);font-size:18px;cursor:pointer;padding:2px 6px;line-height:1;transition:color .15s;border-radius:2px}
.btn-x:hover{color:var(--fg);background:rgba(255,255,255,.05)}
.modal-bd{padding:20px}
.modal-ft{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end;background:rgba(0,0,0,.1)}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:0}
.fg{margin-bottom:13px}
.f-sec{font-family:var(--f-disp);font-size:13px;font-weight:700;text-transform:uppercase;color:var(--gold);letter-spacing:1px;margin:20px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--gold-pale)}
.chk-g{display:flex;gap:14px;flex-wrap:wrap}
.chk{display:flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:12px;color:var(--fg-2);cursor:pointer}
.chk input{width:auto;accent-color:var(--green-vif)}
.radio-g{display:flex;gap:8px}
.radio-i{display:flex;align-items:center;gap:7px;font-family:var(--f-mono);font-size:12px;color:var(--fg-2);cursor:pointer;padding:8px 12px;border:1px solid var(--line-2);border-radius:3px;flex:1;transition:all .15s}
.radio-i input{width:auto;accent-color:var(--green-vif)}
.radio-i:has(input:checked){border-color:var(--green-vif);background:rgba(34,168,122,.06);color:var(--green-vif)}
.btn-save{background:var(--green-vif);border:0;color:var(--forest);font-family:var(--f-mono);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:10px 20px;border-radius:3px;transition:opacity .15s}
.btn-save:hover{opacity:.86}
.btn-cancel{background:transparent;border:1px solid var(--line-2);color:var(--fg-3);font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:10px 16px;border-radius:3px;transition:all .15s}
.btn-cancel:hover{color:var(--fg);border-color:var(--fg-3)}

/* VEH SELECTOR */
.veh-sel{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}
.vsel-btn{font-family:var(--f-mono);font-size:11px;letter-spacing:.07em;padding:6px 13px;background:var(--forest-2);border:1px solid var(--line-2);color:var(--fg-3);border-radius:2px;transition:all .15s;cursor:pointer}
.vsel-btn.on{background:rgba(34,168,122,.1);border-color:var(--green-vif);color:var(--green-vif)}

/* PRICING */
.pt{width:100%;border-collapse:collapse;margin-top:10px}
.pt th{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);padding:8px 10px;text-align:left;border-bottom:1px solid var(--line-2);white-space:nowrap}
.pt td{padding:7px 10px;border-bottom:1px solid var(--line)}
.pt td input{padding:6px 8px;font-size:13px}
.pt tr:hover td{background:rgba(255,255,255,.015)}
.box{background:var(--forest-2);border:1px solid var(--line-2);border-radius:3px;padding:20px}

/* CALENDAR */
.cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.cal-mo{font-family:var(--f-disp);font-size:22px;font-weight:900;font-style:italic;text-transform:uppercase;color:var(--cream)}
.cal-btn{background:transparent;border:1px solid var(--line-2);color:var(--fg-3);padding:6px 13px;border-radius:2px;font-size:15px;transition:all .15s;cursor:pointer}
.cal-btn:hover{border-color:var(--fg-3);color:var(--fg)}
.cal-btn:disabled{opacity:.3;cursor:not-allowed}
.cal-btn:disabled:hover{border-color:var(--line-2);color:var(--fg-3)}
.cal-dh{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:3px}
.cal-dh div{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-4);text-align:center;padding:4px 0}
.cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cd{min-height:38px;display:flex;align-items:center;justify-content:center;font-family:var(--f-mono);font-size:12px;border-radius:2px;cursor:pointer;transition:all .15s;border:1px solid transparent;color:var(--fg-2)}
.cd:hover:not(.empty){background:rgba(255,255,255,.04);border-color:var(--line-2)}
.cd.empty{cursor:default;color:transparent}
.cd.today{border-color:var(--fg-3)!important}
.cd.available{background:rgba(34,168,122,.18);color:var(--green-vif);font-weight:700}
.cd.booked{background:rgba(214,67,42,.18);color:var(--rally);font-weight:700}
/* DISPO ENRICHIE BETA */
.cd.maint{background:rgba(212,166,73,.20);color:var(--gold);font-weight:700}
.cd.transport{background:rgba(102,140,200,.22);color:#a3c3ff;font-weight:700}
.cd.ao{background:rgba(214,67,42,.28);color:var(--rally);font-weight:800;border-color:var(--rally)}
.cd.indispo{background:rgba(120,120,120,.25);color:var(--fg-3);font-weight:600;text-decoration:line-through}
.cd.range-hover{outline:2px dashed var(--green-vif);outline-offset:-2px}
.cal-mode-bar{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.cal-mode-bar button{padding:6px 12px;background:var(--forest-3);border:1px solid var(--line-2);color:var(--fg-2);font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;border-radius:2px;cursor:pointer;transition:all .15s}
.cal-mode-bar button.on{background:var(--green-vif);color:var(--forest);border-color:var(--green-vif);font-weight:700}
.cal-mode-bar button:hover{border-color:var(--green-vif)}
/* Modal plage */
.range-modal{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:9999;display:none;align-items:center;justify-content:center;padding:20px}
.range-modal.open{display:flex}
.range-modal-box{background:var(--forest-2);border:1px solid var(--line-2);border-radius:var(--r-md,8px);padding:24px;max-width:480px;width:100%}
.range-modal-box h3{font-family:var(--f-display);font-size:18px;font-style:italic;text-transform:uppercase;color:var(--cream);margin:0 0 16px}
.range-modal-box label{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);margin:12px 0 4px}
.range-modal-box input,.range-modal-box select{width:100%;padding:8px 10px;background:var(--forest-3);border:1px solid var(--line-2);color:var(--fg-1);font-family:var(--f-mono);font-size:13px;border-radius:2px}
.range-modal-box input:focus,.range-modal-box select:focus{outline:3px solid var(--green-vif);outline-offset:-1px}
.range-modal-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}
.range-modal-foot button{padding:9px 16px;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;border-radius:2px;cursor:pointer;border:0}
.range-modal-foot .cancel{background:var(--forest-3);color:var(--fg-2);border:1px solid var(--line-2)}
.range-modal-foot .save{background:var(--green-vif);color:var(--forest);font-weight:700}
.range-modal-foot .del{background:rgba(214,67,42,.2);color:var(--rally);border:1px solid var(--rally);margin-right:auto}

.cal-leg{display:flex;gap:16px;margin-top:12px;flex-wrap:wrap}
.cal-leg-i{display:flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;color:var(--fg-3);text-transform:uppercase}
.cal-dot{width:10px;height:10px;border-radius:1px}


/* RALLY INDICATORS */
/* RALLY FILTER + LEVELS */
.cal-filter{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.cal-filter button{padding:4px 10px;background:var(--forest-3);border:1px solid var(--line-2);color:var(--fg-2);font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;border-radius:2px;cursor:pointer;transition:all .15s}
.cal-filter button.on{background:var(--green-vif);color:var(--forest);border-color:var(--green-vif);font-weight:700}
.cal-filter button:hover{border-color:var(--green-vif)}
.cal-rally-level{font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;padding:2px 5px;border-radius:2px;font-weight:700;flex-shrink:0}
.cal-rally-level.lv-I{background:rgba(214,67,42,.2);color:var(--rally)}
.cal-rally-level.lv-N{background:rgba(34,168,122,.15);color:var(--green-vif)}
.cal-rally-level.lv-R{background:rgba(212,166,73,.2);color:var(--gold)}

.cal-rallies{margin-top:16px}
.cal-rallies-title{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:8px;font-weight:700}
.cal-rally-item{display:flex;align-items:center;gap:10px;padding:5px 0;border-bottom:1px solid var(--line);font-size:12px}
.cal-rally-date{font-family:var(--f-mono);font-size:11px;color:var(--fg-3);min-width:40px}
.cal-rally-name{color:var(--cream);font-weight:600;flex:1}
.cal-rally-meta{font-family:var(--f-mono);font-size:10px;color:var(--fg-4);letter-spacing:.08em;text-transform:uppercase}

/* MESSAGES */
.msg-layout{display:grid;grid-template-columns:270px 1fr;background:var(--forest-2);border:1px solid var(--line-2);border-radius:3px;overflow:hidden;height:calc(100vh - 190px);min-height:400px}
.msg-list{border-right:1px solid var(--line);overflow-y:auto;display:flex;flex-direction:column}
.msg-lh{padding:11px 14px;border-bottom:1px solid var(--line);font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);flex-shrink:0}
.msg-item{padding:12px 14px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .15s}
.msg-item:hover{background:rgba(255,255,255,.025)}
.msg-item.on{background:rgba(34,168,122,.06)}
.msg-item.read{opacity:.7}
.msg-item.unread{border-left:3px solid var(--green-vif)}
.btn-link-small{background:transparent;border:1px solid var(--line-2);color:var(--green-vif);font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;padding:3px 8px;border-radius:2px;cursor:pointer;transition:all .15s}
.btn-link-small:hover{background:rgba(34,168,122,.1);border-color:var(--green-vif)}
.msg-sender{font-family:var(--f-mono);font-size:12px;color:var(--fg-2);display:flex;align-items:center;justify-content:space-between;gap:6px}
.msg-sender strong{color:var(--cream)}
.msg-dot{width:6px;height:6px;background:var(--green-vif);border-radius:50%;flex-shrink:0}
.msg-subj{font-size:12px;color:var(--fg-3);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg-dt{font-family:var(--f-mono);font-size:11px;color:var(--fg-4);margin-top:2px}
.msg-thread{display:flex;flex-direction:column;height:100%;overflow:hidden}
.mt-hd{padding:13px 18px;border-bottom:1px solid var(--line);flex-shrink:0}
.mt-subj{font-family:var(--f-disp);font-size:16px;font-weight:700;text-transform:uppercase;color:var(--cream)}
.mt-pilot{font-family:var(--f-mono);font-size:11px;color:var(--fg-3);margin-top:2px}
.mt-bubbles{flex:1;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.bub{max-width:82%;padding:11px 14px;border-radius:4px;font-size:14px;line-height:1.6;word-break:break-word;overflow-wrap:break-word}
.bub.pilot{background:var(--forest-3);align-self:flex-start;border-left:2px solid var(--line-2);color:var(--fg)}
.bub.pro{background:rgba(34,168,122,.12);color:var(--fg);align-self:flex-end;border-right:2px solid var(--green-vif)}
.bub-meta{font-family:var(--f-mono);font-size:11px;color:var(--fg-4);margin-top:5px}
.mt-reply{padding:12px 18px;border-top:1px solid var(--line);display:flex;gap:8px;flex-shrink:0}
.mt-reply textarea{flex:1;resize:none;height:58px;font-size:13px}
.btn-send{background:var(--green-vif);border:0;color:var(--forest);font-family:var(--f-mono);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:0 16px;border-radius:3px;white-space:nowrap;cursor:pointer}
.msg-empty{display:flex;align-items:center;justify-content:center;height:100%;flex-direction:column;gap:10px;color:var(--fg-4);font-family:var(--f-mono);font-size:12px}
.btn-msg-back{display:none}

/* PROFILE */
.profile-g{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.prof-card{background:var(--forest-2);border:1px solid var(--line-2);border-radius:3px;padding:20px}
.prof-ct{font-family:var(--f-disp);font-size:15px;font-weight:700;text-transform:uppercase;color:var(--gold);margin-bottom:14px;letter-spacing:1px}
.ewrc-a{display:inline-flex;align-items:center;gap:7px;margin-top:8px;font-family:var(--f-mono);font-size:12px;color:var(--green-vif);text-decoration:none;transition:opacity .15s}
.ewrc-a:hover{opacity:.75}
.badge{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;background:var(--gold-pale);border:1px solid rgba(212,166,73,.3);border-radius:3px;font-family:var(--f-mono);font-size:12px;color:var(--gold);font-weight:700;letter-spacing:.1em;text-transform:uppercase}

/* ACTIVITY */
.act-list{background:var(--forest-2);border:1px solid var(--line-2);border-radius:3px;overflow:hidden}
.act-h{padding:10px 16px;border-bottom:1px solid var(--line);font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.act-item{padding:11px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;font-size:13px;color:var(--fg-2)}
.act-item:last-child{border-bottom:0}
.act-ico{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.act-time{font-family:var(--f-mono);font-size:11px;color:var(--fg-4);margin-left:auto;white-space:nowrap}

/* EMPTY STATE */
.empty{text-align:center;padding:48px 20px;color:var(--fg-4);font-family:var(--f-mono);font-size:12px}
.empty .ei{font-size:36px;margin-bottom:12px;opacity:.3;display:block}
.empty p{line-height:1.7}

/* TOAST */
.toast{position:fixed;bottom:24px;right:24px;background:var(--forest-2);border:1px solid var(--green-vif);color:var(--green-vif);font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;padding:11px 18px;border-radius:3px;z-index:1000;transform:translateY(16px);opacity:0;transition:all .28s;pointer-events:none}
.toast.show{transform:translateY(0);opacity:1}
.toast.err{border-color:var(--rally);color:var(--rally)}
/* Modale ouverte : le pied est desormais colle en bas sur mobile, le toast
   venait donc recouvrir Annuler/Enregistrer. On le remonte au-dessus. */
.modal-ov.open ~ .toast{bottom:96px}

/* FORM VALIDATION */
input.invalid,select.invalid,textarea.invalid{border-color:var(--rally)}
.field-err{font-family:var(--f-mono);font-size:11px;color:var(--rally);margin-top:4px;display:none}
.field-err.on{display:block}

/* ═══════════ V2 — Optimisation typographique (override CSS uniquement) ═══════════ */
:root{
  --f-ui:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;
  --fg-2:#c8dcd0;
  --fg-3:#9ab0a0;
  --fg-4:#5a7868;
  --t-xs:12px;--t-sm:14px;--t-base:16px;--t-md:18px;--t-lg:22px;--t-xl:32px;
}
body{font-family:var(--f-ui)}
button{font-family:var(--f-ui)}

/* NAV desktop ─ texte courant Inter, fini le mono uppercase */
.nav-link{font-family:var(--f-ui);font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;padding:0 16px;color:rgba(240,236,228,0.3);transition:color 0.3s, border-color 0.3s}
.nav-link:hover{color:rgba(240,236,228,0.8)}
.nav-link.on{font-weight:600;color:var(--cream)}
.lang-btn{font-family:var(--f-ui);font-size:13px;font-weight:600;letter-spacing:.02em}
.lang-sw{border-radius:6px}

/* BOUTONS génériques */
.btn{font-family:var(--f-ui);font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;padding:10px 18px;border-radius:6px;gap:7px}
.btn-gold{font-weight:700}

/* DRAWER mobile ─ items lisibles, sections groupées */
.mob-drawer{padding:6px 0;width:min(340px,88vw)}
.mob-drawer .mob-link{font-family:var(--f-ui);font-size:15px;font-weight:500;letter-spacing:0;text-transform:none;padding:13px 22px;min-height:48px;gap:14px;color:var(--fg);border-left-width:3px}
.mob-drawer .mob-link.on{font-weight:600;background:rgba(34,168,122,.10)}
.mob-drawer-section{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-4);padding:16px 22px 6px;font-weight:500;display:flex;align-items:center;gap:10px}
.mob-drawer-section::after{content:"";flex:1;height:1px;background:var(--line)}
.mob-drawer-section:first-child{padding-top:14px}

/* SIDEBAR dashboard ─ texte Inter, sections groupées */
.sb-item{font-family:var(--f-ui);font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;padding:11px 22px;gap:12px;min-height:42px}
.sb-item.on{font-weight:600}
.sb-section{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-4);padding:14px 22px 4px;font-weight:500;display:flex;align-items:center;gap:10px}
.sb-section::after{content:"";flex:1;height:1px;background:var(--line)}
.sb-section:first-child{padding-top:10px}
.sb-ico{width:18px;font-size:15px}
.sb-notif{font-family:var(--f-ui);font-size:12px;font-weight:700;padding:2px 7px;border-radius:10px;letter-spacing:0;min-width:20px}
.sb-logo-text{letter-spacing:1.5px}
.sb-logo-sub{font-family:var(--f-ui);font-size:12px;font-weight:500;letter-spacing:.04em;text-transform:none;color:var(--fg-3)}

/* HEADER de page dashboard */
.mh-title{font-size:30px;letter-spacing:.5px}
.u-name{font-family:var(--f-ui);font-size:13px;font-weight:500;color:var(--fg-2)}
.u-avatar{width:34px;height:34px;font-size:13px}

/* STATS cards */
.s-card{padding:18px 20px;border-radius:6px}
.s-val{font-size:36px;font-feature-settings:"tnum"}
.s-lbl{font-family:var(--f-ui);font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--fg-3);margin-top:6px}

/* SECTION TITLES */
.sh-title{font-family:var(--f-ui);font-size:20px;font-weight:700;letter-spacing:0;text-transform:none;font-style:normal;color:var(--cream)}

/* FORMS ─ inputs Inter, focus visible costaud */
label{font-family:var(--f-ui);font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--fg-2);margin-bottom:6px}
input,select,textarea{font-family:var(--f-ui);font-size:14px;padding:11px 14px;border-radius:6px}
input:focus,select:focus,textarea:focus{outline:3px solid rgba(34,168,122,.32);outline-offset:1px}
button:focus-visible{outline:3px solid rgba(34,168,122,.4);outline-offset:2px}

/* TAGS / PILLS */
.tag{font-family:var(--f-ui);font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;padding:3px 10px;border-radius:14px}
.pill{font-family:var(--f-ui);font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;padding:6px 12px;border-radius:16px}

/* CARDS véhicules ─ home + dashboards */
.fc-name{letter-spacing:.5px}
.fc-team{font-family:var(--f-ui);font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--fg-3)}
.fc-price{font-feature-settings:"tnum"}
.vc-name{letter-spacing:.5px}
.vc-cat{font-family:var(--f-ui);font-size:13px;font-weight:500;letter-spacing:0;text-transform:none}
.vc-price{font-feature-settings:"tnum"}
.vc-price small{font-family:var(--f-ui);font-size:13px;font-weight:500}
.vc-status{font-family:var(--f-ui);font-size:12px;font-weight:600;letter-spacing:0}
.vc-caution{font-family:var(--f-ui);font-size:13px;font-weight:500;color:var(--fg-3)}

/* EYEBROW */
.eyebrow{font-size:13px;letter-spacing:.18em;font-weight:500}

/* HERO stats */
.stat-num{font-feature-settings:"tnum"}
.stat-label{font-family:var(--f-ui);font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--fg-3);margin-top:6px}

/* SEARCH CARD */
.sc-header-title{font-family:var(--f-ui);font-size:14px;font-weight:700;letter-spacing:.5px;text-transform:none;font-style:normal}
.sc-badge{font-family:var(--f-ui);font-size:12px;font-weight:600;letter-spacing:.1em}

/* VERIF modal */
.verif-foot-txt{font-family:var(--f-ui);font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--fg-3)}
.verif-text small{font-family:var(--f-ui);font-size:13px}

/* GEO / PROXIMITY */
.geo-bar-label{font-family:var(--f-ui);font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--fg-3)}
.geo-bar select{font-family:var(--f-ui);font-size:14px}
.geo-indicator{font-family:var(--f-ui);font-size:12px;font-weight:600;letter-spacing:0}
.prox-legend-item{font-family:var(--f-ui);font-size:13px;font-weight:500;letter-spacing:0;color:var(--fg-3)}
.prox-badge{font-family:var(--f-ui);font-size:12px;font-weight:600;letter-spacing:0;text-transform:none}
.catpills-header,.ao-catgrp-lbl{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--fg-3);text-transform:uppercase}

/* SIDEBAR FREE / PLAN */
.sb-free-lbl,.sb-plan-label{font-family:var(--f-ui);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--fg-3)}
.sb-free-val,.sb-plan-val{font-feature-settings:"tnum"}

/* MATCH BADGE */
.match-text{font-family:var(--f-ui);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:none}
.match-ring-n{font-feature-settings:"tnum"}

/* BADGES PRO */
.badge-pro,.badge-prem{font-family:var(--f-ui);font-size:11px;font-weight:700;letter-spacing:.06em}

/* PACE STRIPE */
.pace-inner span{font-size:12px;letter-spacing:.14em}

/* BOUTONS retour site / logout */
.btn-back-site{font-family:var(--f-ui);font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;padding:8px 14px;border-radius:6px}
.btn-logout{font-family:var(--f-ui);font-size:13px;font-weight:500;letter-spacing:0;text-transform:none}

/* LOGIN screen */
.login-logo{letter-spacing:2px}
.login-sub{font-family:var(--f-ui);font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:none;color:var(--fg-3)}
.btn-login{font-family:var(--f-ui);font-size:14px;font-weight:700;letter-spacing:0;text-transform:none;border-radius:6px;padding:13px}
.btn-demo{font-family:var(--f-ui);font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;border-radius:6px}
.login-err{font-family:var(--f-ui);font-size:13px}
.login-hint{font-family:var(--f-ui);font-size:13px;color:var(--fg-3)}
.login-back{font-family:var(--f-ui);font-size:13px;color:var(--fg-3)}

/* PROFIL cards (dashboards) */
.prof-ct,.ewrc-ct,.f-sec{font-family:var(--f-ui);font-weight:600;letter-spacing:0;text-transform:none;font-style:normal}

/* BTN add */
.btn-add{font-family:var(--f-ui);font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;border-radius:6px;padding:10px 16px}

/* CHIFFRES tabulaires globaux */
.s-val,.fc-price,.match-ring-n,.sb-free-val,.sb-plan-val,.vc-price,.stat-num,.tarif-price{font-feature-settings:"tnum"}

/* TEXT-WRAP propre sur titres + paragraphes */
.hero-sub,.verif-sub{text-wrap:pretty;line-height:1.6}
.hero-h1,.sec-title,.mh-title,.sh-title,h1,h2,h3{text-wrap:balance}

/* CHK form (pilote profile) */
.chk{font-family:var(--f-ui);font-size:13px;letter-spacing:0;text-transform:none}

/* MOBILE responsive ─ items drawer plus gros */
@media(max-width:768px){
  .mob-drawer .mob-link{font-size:16px;padding:14px 22px;min-height:52px}
  .mob-drawer-section{font-size:12px;padding:16px 22px 6px}
  .hero-h1{font-size:46px}
}

/* CHAT bubble (messagerie dashboards) */
.bub{font-family:var(--f-ui);font-size:14px;line-height:1.5}
.btn-msg-back{font-family:var(--f-ui);font-size:13px;font-weight:500;letter-spacing:0;text-transform:none}


/* ═════ V3 — Breadcrumb + transitions + touch hardening ═════ */
.mh-titles{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.mh-crumb{font-family:var(--f-ui);font-size:13px;font-weight:500;color:var(--fg-3);letter-spacing:0;line-height:1.2;text-transform:none}
.mh-burger{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.sb-overlay{touch-action:manipulation}
.sb-item{transition:background-color .15s,color .15s}
/* Transition fade des sections dashboard (sec.on) */
.sec.on{animation:secFadeV3 .2s ease-out}
@keyframes secFadeV3{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
/* Zebra discrète sur les listes (cartes véhicules, demandes, devis) */
.veh-cards .vc, .ao-list>*, .msg-list>*{transition:background-color .15s}
@media(max-width:768px){
  .mh-crumb{font-size:12px}
  .mh-title{font-size:20px}
  .mh-titles{flex:1 1 100%}
}
@media(max-width:900px){
  .sb.on{box-shadow:6px 0 28px rgba(0,0,0,.5)}
}


/* ═══════════════════════════════════════════════════
   V2 POLISH LAYER — Dashboard (additive, override)
   ═══════════════════════════════════════════════════ */

:root{
  --surface-0:#0d1a14;--surface-1:#131f19;--surface-2:#1a2e22;--surface-3:#213428;--surface-4:#2a3d34;
  --sp-1:8px;--sp-2:16px;--sp-3:24px;--sp-4:32px;--sp-6:48px;
  --r-sm:8px;--r-md:12px;--r-lg:16px;--r-pill:999px;
  --f-body-v2:'Inter',system-ui,-apple-system,sans-serif;
}

/* Body Inter, plus aéré */
html,body{font-family:var(--f-body-v2);font-size:14.5px;line-height:1.55}
button{font-family:var(--f-body-v2)}
label{font-family:var(--f-mono);letter-spacing:.12em}

/* Inputs / selects / textarea V2 */
input,select,textarea{
  font-family:var(--f-body-v2);font-size:14px;
  background:var(--surface-3);border:1px solid var(--surface-4);
  border-radius:var(--r-sm);padding:11px 14px;
  transition:border-color .15s,box-shadow .15s,outline .15s
}
input:focus,select:focus,textarea:focus{
  border-color:var(--green-vif);
  outline:3px solid rgba(34,168,122,.18);outline-offset:1px
}
select option{background:var(--surface-2)}

/* Scrollbar */
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-thumb{background:var(--surface-4);border-radius:3px}

/* LOGIN — box arrondie, ombrée */
.login-box{border-radius:var(--r-lg);box-shadow:0 24px 64px rgba(0,0,0,.4);background:var(--surface-2);border-color:var(--surface-4)}
.btn-login{
  font-family:var(--f-body-v2);font-size:14px;font-weight:600;
  letter-spacing:0;text-transform:none;
  padding:14px;border-radius:var(--r-sm);
  transition:all .2s
}
.btn-login:hover{background:#28c48e;transform:translateY(-1px);box-shadow:0 8px 24px rgba(34,168,122,.25);opacity:1}
.btn-demo{
  font-family:var(--f-body-v2);font-size:13px;font-weight:500;
  letter-spacing:0;text-transform:none;padding:11px;border-radius:var(--r-sm);
  transition:all .2s
}
.btn-demo:hover{transform:translateY(-1px)}
.login-logo{font-family:var(--f-display);letter-spacing:3px}

/* SIDEBAR V2 — accent pill sur active */
.sb{background:var(--surface-1);border-right:1px solid var(--surface-4)}
.sb-logo{padding:22px 20px 18px;border-bottom-color:var(--surface-4)}
.sb-logo-text{font-family:var(--f-display);letter-spacing:2px}
.sb-item{
  font-family:var(--f-body-v2);font-size:13px;font-weight:500;
  letter-spacing:0;text-transform:none;
  padding:11px 18px;color:var(--fg-2);
  border-radius:0;
  transition:all .15s
}
.sb-item:hover{color:var(--cream);background:rgba(255,255,255,.04)}
.sb-item.on{color:var(--green-vif);background:rgba(34,168,122,.09);font-weight:600}
.sb-item.on::before{width:3px;background:var(--green-vif)}

/* SIDEBAR footer */
.sb-back{border-top-color:var(--surface-4)}
.btn-back-site{
  font-family:var(--f-body-v2);font-size:13px;font-weight:500;
  letter-spacing:0;text-transform:none;
  padding:10px 12px;border-radius:var(--r-sm);
  border-color:var(--surface-4);transition:all .2s
}
.btn-back-site:hover{transform:translateY(-1px)}

/* MAIN HEADER */
.mh{border-bottom-color:var(--surface-4)}
.mh-title{font-family:var(--f-display);letter-spacing:1px}

/* Section headers */
.sh-title,.sh-sub{font-family:var(--f-display)}

/* STAT CARDS */
.s-card,.stats-g .s-card{
  background:var(--surface-1);border:1px solid var(--surface-4);
  border-radius:var(--r-md);
  transition:border-color .2s,transform .2s,box-shadow .2s
}
.s-card:hover{border-color:var(--green-vif);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.25)}
.s-val{font-family:var(--f-display);font-style:italic}

/* CARDS génériques (vc-, msg-, etc.) */
.vc,.msg-card,.profile-card,.f-card,.opt-card,.kpi-card,.pal-card,.search-card-dash,.comp-card{
  border-radius:var(--r-md);transition:border-color .2s,transform .15s,box-shadow .2s
}
.vc:hover,.msg-card:hover{border-color:var(--green-vif);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.2)}

/* BOUTONS dashboard V2 */
.btn-add,.btn-save,.btn-veh,.btn-cancel,.btn-cta,.btn-send,.btn-x{
  font-family:var(--f-body-v2);font-size:13px;font-weight:600;
  letter-spacing:0;text-transform:none;
  border-radius:var(--r-sm);
  transition:all .2s cubic-bezier(.4,0,.2,1);
  position:relative;overflow:hidden
}
.btn-add{padding:9px 16px}
.btn-add:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(34,168,122,.2)}
.btn-save{padding:10px 18px}
.btn-save:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(34,168,122,.2)}
.btn-cancel{padding:10px 18px;background:transparent;color:var(--fg-2)}
.btn-veh{padding:7px 12px;font-size:13px}
.btn-veh:hover{transform:translateY(-1px)}
.btn-x{border-radius:var(--r-sm);width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center}
.btn-cta{padding:12px 22px;font-size:14px;border-radius:var(--r-sm)}
.btn-cta:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(34,168,122,.3)}
.btn-send{padding:11px 18px;border-radius:var(--r-sm)}
.btn-send:hover{transform:translateY(-1px)}

/* Tags */
.tag{
  font-family:var(--f-body-v2);font-size:11.5px;font-weight:500;
  letter-spacing:0;text-transform:none;
  padding:3px 9px;border-radius:var(--r-pill);
  border:1px solid var(--surface-4);color:var(--fg-3)
}

/* Modals */
.modal{border-radius:var(--r-lg);box-shadow:0 24px 64px rgba(0,0,0,.5)}
.modal-hd{border-top-left-radius:var(--r-lg);border-top-right-radius:var(--r-lg);border-bottom-color:var(--surface-4)}
.modal-ov{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

/* Tables */
.pt th{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--fg-3)}
.pt td{font-family:var(--f-body-v2);font-size:13px}

/* Messages bubbles */
.bub{border-radius:var(--r-md)}

/* Calendar cells */
.cd{border-radius:var(--r-sm)}

/* Burger mobile */
.mh-burger{border-radius:var(--r-sm);border-color:var(--surface-4)}

/* Mobile drawer */
@media(max-width:900px){
  .sb.on{box-shadow:8px 0 32px rgba(0,0,0,.5)}
  .btn-msg-back{border-radius:var(--r-sm);font-family:var(--f-body-v2);font-size:13px;letter-spacing:0;text-transform:none;padding:7px 12px}
}

/* Ripple anim */
.btn-add .ripple,.btn-save .ripple,.btn-cta .ripple,.btn-veh .ripple,.btn-login .ripple,.btn-send .ripple{
  position:absolute;border-radius:50%;background:rgba(255,255,255,.25);
  transform:scale(0);animation:rippleAnim .5s ease-out;pointer-events:none
}
@keyframes rippleAnim{to{transform:scale(4);opacity:0}}

/* Skeleton */
.skeleton{background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 50%,var(--surface-2) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--r-sm)}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}


/* ══ PHOTO UPLOADER ══ */
.photo-uploader{margin-top:8px}
.photo-uploader-drop{border:2px dashed var(--border,#2a3a32);border-radius:10px;padding:18px;text-align:center;cursor:pointer;background:rgba(34,168,122,.04);transition:all .2s}
.photo-uploader-drop:hover{border-color:var(--accent,#22a87a);background:rgba(34,168,122,.08)}
.photo-uploader-drop.disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
.photo-uploader-drop .pu-icon{font-size:28px;display:block;margin-bottom:6px}
.photo-uploader-drop .pu-txt{font-size:13px;color:var(--text-dim,#9ab)}
.photo-uploader-drop .pu-hint{font-size:11px;color:var(--text-muted,#678);margin-top:4px}
.photo-uploader input[type=file]{display:none}
.photo-err{margin-top:8px;padding:9px 11px;border-radius:6px;background:rgba(214,67,42,.1);border:1px solid rgba(214,67,42,.4);color:#ff9b8a;font-size:12px;line-height:1.5}
.photo-err ul{margin:5px 0 0;padding-left:16px}
.photo-err li{margin-bottom:3px}
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;margin-top:10px}
.photo-thumb{position:relative;aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:#0a1410;border:1px solid var(--border,#2a3a32)}
.photo-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.photo-thumb .pt-main{position:absolute;top:4px;left:4px;background:var(--accent,#22a87a);color:#000;font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;letter-spacing:.5px}
.photo-thumb .pt-actions{position:absolute;top:4px;right:4px;display:flex;gap:3px}
.photo-thumb .pt-btn{background:rgba(0,0,0,.7);color:#fff;border:none;width:22px;height:22px;border-radius:4px;cursor:pointer;font-size:11px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0}
.photo-thumb .pt-btn:hover{background:rgba(220,53,69,.9)}
.photo-thumb .pt-btn.move{background:rgba(0,0,0,.55)}
.photo-thumb .pt-btn.move:hover{background:var(--accent,#22a87a);color:#000}
.photo-thumb .pt-order{position:absolute;bottom:4px;left:4px;background:rgba(0,0,0,.7);color:#fff;font-size:10px;padding:1px 5px;border-radius:3px}
.photo-counter{font-size:12px;color:var(--text-dim,#9ab);margin-top:6px;text-align:right}
.photo-counter.full{color:var(--accent,#22a87a);font-weight:600}


/* ══ V1 PACKS ══ */
.packs-editor{display:grid;gap:12px;margin-top:8px}
.pack-card{border:1px solid var(--bd,rgba(255,255,255,.08));border-radius:12px;padding:14px;background:rgba(255,255,255,.02);transition:.2s}
.pack-card.active{border-color:#22a87a;background:rgba(34,168,122,.06)}
.pack-card-hd{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none}
.pack-card-hd .pc-medal{font-size:24px;line-height:1}
.pack-card-hd .pc-info{flex:1}
.pack-card-hd .pc-title{font-weight:700;font-size:15px}
.pack-card-hd .pc-sub{font-size:12px;color:var(--fg-4,rgba(255,255,255,.6));margin-top:2px}
.pack-card-hd .pc-toggle{position:relative;width:42px;height:24px;background:rgba(255,255,255,.1);border-radius:999px;transition:.2s;flex-shrink:0}
.pack-card-hd .pc-toggle::after{content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;background:#fff;border-radius:50%;transition:.2s}
.pack-card.active .pc-toggle{background:#22a87a}
.pack-card.active .pc-toggle::after{left:20px}
.pack-card-body{margin-top:12px;padding-top:12px;border-top:1px dashed rgba(255,255,255,.08);display:none}
.pack-card.active .pack-card-body{display:block}
.pack-card-body .pc-prix{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.pack-card-body .pc-prix input{width:120px}
.pc-briques{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px;margin-top:8px}
.pc-brique{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:6px;background:rgba(255,255,255,.03);font-size:12px;cursor:pointer;user-select:none}
.pc-brique input{margin:0}
.pc-brique.excluded{opacity:.4;text-decoration:line-through}
.modules-editor{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin-top:8px}
.module-card{border:1px solid rgba(255,255,255,.06);border-radius:8px;padding:10px;background:rgba(255,255,255,.02)}
.module-card.active{border-color:#d4a649;background:rgba(212,166,73,.05)}
.module-card-hd{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
.module-card-hd .mc-picto{font-size:18px}
.module-card-hd .mc-lbl{flex:1;font-weight:600;font-size:13px}
.module-card-hd input[type=checkbox]{margin:0}
.module-card-prix{margin-top:8px;display:none}
.module-card.active .module-card-prix{display:flex;align-items:center;gap:6px}
.module-card-prix input{flex:1;font-size:12px;padding:4px 6px}
.module-card-desc{font-size:11px;color:var(--fg-4,rgba(255,255,255,.55));margin-top:4px;line-height:1.3}
.vc-medals{display:flex;gap:4px;margin-top:6px}
.vc-medal{font-size:16px;opacity:.25;transition:.2s;cursor:default}
.vc-medal.on{opacity:1;filter:drop-shadow(0 0 4px rgba(255,215,0,.4))}
.pack-optional-hint{padding:10px 12px;border-radius:8px;background:rgba(34,168,122,.06);border:1px solid rgba(34,168,122,.25);color:var(--fg-3);font-size:12.5px;line-height:1.5;margin-top:10px}
/* ── MOD TOGGLES (additive) ── */
.grp-mod-toggle{display:inline-flex;align-items:center;gap:5px;cursor:pointer;background:transparent;border:1px solid var(--line-2);border-radius:3px;padding:3px 8px;font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;color:var(--fg-3);transition:all .15s;white-space:nowrap}
.grp-mod-toggle:hover{border-color:var(--green-vif);color:var(--fg-2)}
.grp-mod-toggle.off{opacity:.5;border-color:rgba(255,255,255,.06)}
.grp-mod-toggle.off:hover{opacity:.8;border-color:var(--line-2)}
.grp-mod-toggle .mt-dot{width:7px;height:7px;border-radius:50%;background:var(--green-vif);flex-shrink:0;transition:.2s}
.grp-mod-toggle.off .mt-dot{background:var(--fg-4)}

/* ═══ DESIGN SYSTEM V2 — additive ═══ */
.card, .featured-card, .testi-card, .cta-card, .beginner-card, .search-card, .verif-card { border-radius:var(--r-card); }
.fi, .fi2, input.fi2, select.fi2, textarea.fi2 { border-radius:var(--r-input); }
.btn, .btn-big { border-radius:var(--r-btn); }
.pill, .tag { border-radius:var(--r-pill); }

.card, .featured-card, .testi-card, .cta-card {
  transition:border-color 0.35s, transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s;
}
.card:hover, .featured-card:hover, .testi-card:hover, .cta-card:hover {
  border-color:var(--green-vif);
  transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(0,0,0,0.3);
  transition:all 0.35s cubic-bezier(0.16,1,0.3,1);
}

.btn { position:relative; overflow:hidden; }
.btn::after {
  content:'';
  position:absolute;
  top:0; left:-100%; width:100%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transition:left 0.5s;
  pointer-events:none;
}
.btn:hover::after { left:100%; }
.btn-primary:hover, .btn-green-vif:hover {
  transform:translateY(-1px);
  box-shadow:0 8px 24px rgba(34,168,122,0.3);
}
.btn-gold:hover {
  transform:translateY(-1px);
  box-shadow:0 8px 24px rgba(212,166,73,0.25);
}

.pill { transition:all 0.25s cubic-bezier(0.34,1.56,0.64,1); }
.pill.on { box-shadow:0 0 16px rgba(34,168,122,0.25); }
.pill:not(.on):hover { transform:scale(1.04); }

.fi:focus, .fi2:focus {
  outline:3px solid rgba(34,168,122,0.15);
  outline-offset:2px;
  border-color:var(--green-vif);
  box-shadow:0 0 0 1px var(--green-vif);
}

.reveal { opacity:0; transform:translateY(12px); transition:opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity:1; transform:none; }

@media (max-width:768px) {
  .reveal { opacity:1; transform:none; transition:none; }
  .card:hover, .featured-card:hover, .btn:hover { transform:none; box-shadow:none; }
  .pill:not(.on):hover { transform:none; }
  .btn::after { display:none; }
}

/* ══════ PREMIUM UPGRADE v3 ══════ */

/* --- Border-radius upgrade --- */
.card, .featured-card, .testi-card, .cta-card, .beginner-card,
.search-card, .verif-card, .vc, .loueur-card, .s-card,
.login-box, .sb-plan, .modal {
  border-radius: var(--r-card, 14px) !important;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
select, textarea, .fi, .fi2 {
  border-radius: var(--r-input, 10px) !important;
}
.btn, .btn-add, .btn-login, .btn-demo, .btn-veh, .btn-back-site,
.btn-print, .btn-send, .btn-msg-back, .hero-cta, .nav-cta {
  border-radius: var(--r-btn, 10px) !important;
}
.pill, .tag, .nps-btn {
  border-radius: var(--r-pill-v2, 20px) !important;
}

/* --- Card hover premium --- */
.card, .featured-card, .testi-card, .cta-card, .vc, .loueur-card, .s-card {
  transition: border-color var(--duration-normal, 0.35s),
              transform var(--duration-normal, 0.35s) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
              box-shadow var(--duration-normal, 0.35s) !important;
}
.card:hover, .featured-card:hover, .testi-card:hover,
.cta-card:hover, .vc:hover, .loueur-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.3) !important;
}

/* --- Button shine + lift --- */
.btn, .btn-add, .btn-login, .btn-green-vif, .btn-primary,
.btn-gold, .hero-cta, .nav-cta, .btn-send {
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.25s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
              box-shadow 0.3s,
              background 0.2s,
              opacity 0.15s !important;
}
.btn::after, .btn-add::after, .btn-login::after,
.btn-green-vif::after, .btn-primary::after, .btn-gold::after,
.hero-cta::after, .nav-cta::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transition: left 0.5s;
  pointer-events: none;
}
.btn:hover::after, .btn-add:hover::after, .btn-login:hover::after,
.btn-green-vif:hover::after, .btn-primary:hover::after,
.btn-gold:hover::after, .hero-cta:hover::after, .nav-cta:hover::after {
  left: 100%;
}
.btn-green-vif:hover, .btn-primary:hover, .btn-login:hover, .btn-add:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 24px rgba(34,168,122,0.3) !important;
}
.btn-gold:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 24px rgba(212,166,73,0.25) !important;
}

/* --- Pill spring animation --- */
.pill {
  transition: all 0.25s var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) !important;
}
.pill.on {
  box-shadow: 0 0 16px rgba(34,168,122,0.25);
}
.pill:not(.on):hover {
  transform: scale(1.04);
}

/* --- Input focus glow --- */
input:focus:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select:focus, textarea:focus, .fi:focus, .fi2:focus {
  outline: 3px solid rgba(34,168,122,0.15) !important;
  outline-offset: 2px !important;
  border-color: var(--green-vif, #22a87a) !important;
  box-shadow: 0 0 0 1px var(--green-vif, #22a87a) !important;
}

/* --- Reveal on scroll --- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--duration-slow, 0.6s) ease,
              transform var(--duration-slow, 0.6s) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
}
.reveal.visible {
  opacity: 1;
  transform: none;
}

/* --- Pulse animation (reusable) --- */
@keyframes rxr-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* --- Skeleton loader (reusable) --- */
.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.03) 75%);
  background-size: 200% 100%;
  animation: rxr-shimmer 1.5s infinite;
  border-radius: var(--r-input, 10px);
}
@keyframes rxr-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* --- Mobile: disable motion --- */
@media (max-width: 768px) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .card:hover, .featured-card:hover, .vc:hover, .loueur-card:hover,
  .testi-card:hover, .cta-card:hover,
  .btn:hover, .btn-green-vif:hover, .btn-primary:hover,
  .btn-gold:hover, .btn-add:hover, .pill:not(.on):hover {
    transform: none !important;
    box-shadow: none !important;
  }
  .btn::after, .btn-add::after, .btn-login::after,
  .btn-green-vif::after, .btn-primary::after, .btn-gold::after,
  .hero-cta::after, .nav-cta::after {
    display: none !important;
  }
}
/* ══════ /PREMIUM UPGRADE v3 ══════ */

/* ══════ DASHBOARD PREMIUM ══════ */

/* --- Sidebar accent upgrade --- */
.sb-item.on::before {
  width: 3px !important;
  background: var(--green-vif) !important;
  border-radius: 0 2px 2px 0;
}
.sb-item {
  transition: all 0.2s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) !important;
  border-radius: 0 8px 8px 0;
  margin-right: 8px;
}
.sb-item:hover {
  background: rgba(255,255,255,0.035) !important;
}
.sb-item.on {
  background: rgba(34,168,122,0.08) !important;
}

/* --- Login box premium --- */
.login-box {
  border-radius: 16px !important;
  border: 1px solid rgba(42,61,52,0.5) !important;
  position: relative;
  overflow: hidden;
}
.login-box::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 20%;
  right: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34,168,122,0.4), transparent);
  pointer-events: none;
}

/* --- Stats cards --- */
.s-card {
  border-radius: var(--r-card, 14px) !important;
  transition: border-color 0.3s, transform 0.3s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) !important;
}
.s-card:hover {
  border-color: var(--green-vif, #22a87a) !important;
  transform: translateY(-2px) !important;
}

/* --- Vehicle cards in fleet --- */
.vc {
  border-radius: var(--r-card, 14px) !important;
  overflow: hidden;
  transition: border-color 0.35s, transform 0.35s var(--ease-out-expo), box-shadow 0.35s !important;
}
.vc:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.3) !important;
  border-color: var(--green-vif, #22a87a) !important;
}

/* --- Modal premium --- */
.modal {
  border-radius: 16px !important;
  border: 1px solid rgba(42,61,52,0.4) !important;
}
.modal-ov {
  background: rgba(0,0,0,0.6) !important;
  backdrop-filter: blur(4px);
}
.modal-hd {
  border-radius: 16px 16px 0 0 !important;
}

/* --- Section headers --- */
.sh-title {
  position: relative;
  padding-left: 16px;
}
.sh-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 3px;
  background: var(--green-vif, #22a87a);
  border-radius: 2px;
}

/* --- Table premium --- */
.pt {
  border-radius: var(--r-card, 14px) !important;
  overflow: hidden;
}
.pt th {
  background: rgba(34,168,122,0.06) !important;
}

/* --- Notification badge --- */
.sb-notif {
  border-radius: 10px !important;
  min-width: 20px;
  font-size: 10px;
  padding: 2px 6px;
}

/* --- Main header sticky bar --- */
.mh {
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  backdrop-filter: blur(8px);
}

/* --- User avatar --- */
.u-avatar {
  transition: transform 0.2s;
}
.u-avatar:hover {
  transform: scale(1.08);
}

/* ══════ /DASHBOARD PREMIUM ══════ */

@media (max-width: 900px) {
  .s-card:hover, .vc:hover { transform: none !important; box-shadow: none !important; }
  .sb-item { border-radius: 0 !important; margin-right: 0 !important; }
  .modal { border-radius: 0 !important; }
  .modal-hd { border-radius: 0 !important; }
}