/* Mon espace : onglets défilants, messagerie, tableaux, formulaires en fenêtre. */
.muted{color:var(--muted)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.coche{display:flex;gap:8px;align-items:center;font-weight:600;font-size:14.5px;padding:4px 0}
.coche input{width:18px;height:18px;accent-color:var(--blue)}
.info.ok{background:#E6F7EF;color:#0B5C3A}
.field .aide{color:var(--muted);font-size:12.5px}

.bdg{font-style:normal;background:var(--amber);color:var(--amber-ink);border-radius:999px;min-width:20px;height:20px;display:inline-grid;place-items:center;padding-inline:6px;font-size:12px;margin-left:7px;vertical-align:middle}
.moi-actions{align-items:center}

.sous{font:800 18px var(--f-display);margin:22px 0 10px;color:var(--ink)}
.sous small{font:500 14px var(--f-body)}
.opp{cursor:pointer}
.opp:hover{border-color:var(--blue)}

/* messagerie */
.conv{text-align:left;font:inherit;color:inherit;cursor:pointer;width:100%}
.conv:hover{border-color:var(--blue)}
.fil{display:grid;gap:12px}
.fil-tete{display:flex;gap:14px;align-items:center}
.bulles{background:var(--bg);border:1px solid var(--line);border-radius:24px;padding:16px;min-height:260px;max-height:55vh;overflow:auto;display:flex;flex-direction:column;gap:10px}
.bulle{max-width:82%;align-self:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:18px 18px 18px 6px;padding:10px 14px;overflow-wrap:anywhere}
.bulle.moi{align-self:flex-end;background:var(--blue);color:#fff;border-color:var(--blue);border-radius:18px 18px 6px 18px}
.bulle small{display:block;opacity:.65;font-size:11.5px;margin-top:3px}
.bulle img{max-width:100%;max-height:240px;border-radius:12px;display:block}
.bulle a{color:inherit;text-decoration:underline}
.envoi{display:flex;gap:8px;align-items:flex-end}
.envoi textarea{flex:1;min-height:46px;max-height:140px;resize:vertical;border-radius:18px}
.joindre{cursor:pointer;display:inline-grid;place-items:center;min-height:46px}
.notif{text-align:left;font:inherit;color:inherit;cursor:pointer;width:100%}
.notif.nonlue{border-left:5px solid var(--amber)}

/* portefeuille */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.stats div{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:16px 18px;display:grid;gap:2px}
.stats b{font:800 26px var(--f-display);color:var(--blue-deep)}
.stats span{color:var(--muted);font-weight:600;font-size:13.5px}
@media (max-width:560px){.stats{grid-template-columns:1fr}}
.barres{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;height:150px;align-items:end;margin-top:10px}
.barres div{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:6px}
.barres i{display:block;width:100%;max-width:44px;background:linear-gradient(180deg,#4F8BFF,var(--blue));border-radius:10px 10px 4px 4px;min-height:4px}
.barres span{font-size:12.5px;color:var(--muted);font-weight:600}
.table .ligne{display:grid;grid-template-columns:90px 1fr auto;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);align-items:center}
.table .ligne span:nth-child(2){overflow-wrap:anywhere}
.pos{color:#0B7A4B}.neg{color:#B3261E}

/* divers */
.histo{border-top:1px solid var(--line);padding-top:10px;font-size:14.5px}
.histo summary{cursor:pointer;font-weight:700;color:var(--blue)}
.suivi{padding-left:18px;display:grid;gap:6px;margin-top:8px}
.gps-bloc{display:grid;gap:8px}
.gps{background:var(--bg);border-radius:16px;padding:10px 14px;font-size:14.5px;overflow-wrap:anywhere}
.gps a{font-weight:700;color:var(--blue)}
.conf{color:var(--muted)}
.code{display:flex;gap:12px;align-items:center;background:var(--soft);border-radius:18px;padding:12px 16px;width:fit-content}
.code b{font:800 28px var(--f-display);letter-spacing:.18em;color:var(--blue-deep)}
.reponse{background:#E6F7EF;border-radius:12px;padding:8px 12px;margin-top:6px;font-size:14px}
.devis-l .ini svg{width:20px;height:20px}

/* ---- suivi du transport, preuve de livraison, infos privées ---- */
.suivi-t{display:grid;gap:12px;margin-top:6px}
.etapes-t{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.etapes-t li{position:relative;padding-top:20px;text-align:center;font-size:12px;font-weight:700;color:var(--muted)}
.etapes-t li::before{content:"";position:absolute;top:0;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--soft);box-shadow:0 0 0 2px var(--soft)}
.etapes-t li.ok{color:var(--ink)}.etapes-t li.ok::before{background:var(--ok,#1E9E6A);box-shadow:0 0 0 2px var(--ok,#1E9E6A)}
.etapes-t li.now{color:var(--blue-deep)}.etapes-t li.now::before{background:var(--blue,#1F6BFF);box-shadow:0 0 0 4px rgba(31,107,255,.2)}
.btn-ok{background:var(--ok,#1E9E6A);color:#fff;border-color:transparent}
canvas.signature{width:100%;height:180px;border-radius:16px;background:var(--soft);border:1px dashed var(--line,#C9D3E6);color:var(--ink);display:block;cursor:crosshair}
.preuve,.prive{background:var(--soft);border-radius:18px;padding:14px;display:grid;gap:8px}
.preuve h4,.prive h4{margin:0;font:800 16px var(--f-display)}
.preuve dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0}.preuve dt{color:var(--muted)}.preuve dd{margin:0;font-weight:600}
.preuve-imgs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.preuve-img{display:grid;gap:4px;font-size:12px}.preuve-img img{width:100%;height:120px;object-fit:cover;border-radius:12px;background:#fff}
/* ---- planning & tournée ---- */
.plan-t{display:grid;gap:12px;margin-bottom:14px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin:10px 0}
.stat{background:var(--soft);border-radius:16px;padding:12px;display:grid;gap:2px}.stat b{font:800 20px var(--f-display)}.stat span{font-size:12px;color:var(--muted);font-weight:600}
.stat.ok b{color:#17805A}.stat.warn b{color:#B26A00}
.jour-t{font:800 17px var(--f-display);margin:22px 0 10px}.jour-t small{font:600 13px var(--f-body,inherit);color:var(--muted);margin-left:8px}
.jour-t.retard{color:#C0392B}.jour-t.auj{color:var(--blue-deep)}
.optim{width:100%;text-align:left;display:grid;gap:2px;padding:16px 18px;border:0;border-radius:20px;background:linear-gradient(135deg,#071735,#0B2A6B);color:#fff;cursor:pointer;margin-bottom:6px}
.optim b{font:800 18px var(--f-display)}.optim span{color:#B5C4E2;font-size:14px}
.etapes-3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.etapes-3 .et{display:grid;justify-items:center;gap:4px;font-size:12px;font-weight:700;color:var(--muted)}
.etapes-3 .et span{width:28px;height:28px;border-radius:50%;background:var(--soft);display:grid;place-items:center;font-weight:800}
.etapes-3 .et.ok{color:var(--ink)}.etapes-3 .et.ok span{background:#D9F3E8;color:#17805A}
.cand{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:12px;border:1px solid var(--line,#DCE4F2);border-radius:16px}
.tournee-svg{width:100%;height:auto;max-height:260px;background:var(--soft);border-radius:18px;color:var(--blue-deep)}
.tournee-svg .rep circle{fill:var(--blue,#1F6BFF)}.tournee-svg .rep.base circle{fill:#071735}.tournee-svg .rep.livraison circle{fill:#1E9E6A}
.tournee-svg text{fill:#fff;font:800 12px sans-serif}
.etapes-liste{list-style:none;margin:12px 0 0;padding:0 0 0 14px;border-left:2px solid var(--line,#DCE4F2);display:grid;gap:12px}
.etapes-liste li{display:grid;position:relative}.etapes-liste li::before{content:"";position:absolute;left:-21px;top:5px;width:12px;height:12px;border-radius:50%;background:var(--blue,#1F6BFF)}
.etapes-liste li.livraison::before{background:#1E9E6A}.etapes-liste li.depart::before,.etapes-liste li.retour::before{background:#071735}
@media (max-width:520px){.etapes-t li{font-size:11px}.preuve-imgs{grid-template-columns:1fr}}

/* Mon espace : menu latéral groupé (ordinateur) / onglets à icônes (téléphone) */
.espace-grille{display:grid;grid-template-columns:248px minmax(0,1fr);gap:28px;align-items:start;margin-top:26px}
.espace-col{min-width:0}
.espace-col .filtres{margin:0 0 16px}
.espace-col .filtres:empty{display:none}
.menu-e{position:sticky;top:84px;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:10px;display:flex;flex-direction:column;gap:2px;max-height:calc(100vh - 104px);overflow-y:auto}
.menu-e .mg-t{font:700 13px var(--f-body);color:var(--muted);padding:14px 12px 6px}
.menu-e .mg-t:first-child{padding-top:6px}
.menu-e .tab{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px 12px;border-radius:12px;background:transparent;color:var(--ink);font:600 14.5px var(--f-body);box-shadow:none;position:relative}
.menu-e .tab svg{width:20px;height:20px;flex:none;color:var(--muted)}
.menu-e .tab .tl{flex:1;min-width:0}
.menu-e .tab:hover{background:var(--bg)}
.menu-e .tab[aria-selected="true"]{background:var(--soft);color:var(--blue-deep);box-shadow:none}
.menu-e .tab[aria-selected="true"] svg{color:var(--blue)}
.menu-e .tab[aria-selected="true"]::before{content:"";position:absolute;left:-10px;top:9px;bottom:9px;width:4px;border-radius:0 4px 4px 0;background:var(--blue)}
.menu-e .tab:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.menu-e .bdg{margin-left:8px}
@media (max-width:899px){
  .espace-grille{grid-template-columns:minmax(0,1fr);gap:16px;margin-top:18px}
  .menu-e{position:sticky;top:64px;z-index:5;flex-direction:row;gap:6px;padding:8px;border-radius:18px;overflow-x:auto;overflow-y:hidden;max-height:none;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  .menu-e::-webkit-scrollbar{display:none}
  .menu-e .mg-t{display:none}
  .menu-e .tab{width:auto;flex:none;flex-direction:column;gap:4px;padding:8px 14px;min-width:76px;text-align:center;font-size:12.5px;scroll-snap-align:center}
  .menu-e .tab .tl{flex:none;white-space:nowrap}
  .menu-e .tab[aria-selected="true"]::before{left:14px;right:14px;top:auto;bottom:2px;width:auto;height:3px;border-radius:3px}
  .menu-e .bdg{position:absolute;top:2px;right:6px;margin:0;min-width:18px;height:18px;font-size:11px}
}

/* Moyens de paiement : cartes bancaires */
.moyens-t{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}
.moyens-t h2{font:800 22px var(--f-display)}
.secu{display:inline-flex;align-items:center;gap:7px;background:var(--soft);color:var(--blue-deep);border-radius:999px;padding:7px 14px;font-weight:600;font-size:13.5px}
.secu svg{width:15px;height:15px}
.cb-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:22px;margin-bottom:22px}
.cb-w{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.cb{position:relative;width:100%;aspect-ratio:1.586;border-radius:22px;padding:22px 24px;color:#fff;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(135deg,#071735,#0B2A6B 55%,#1F5FE0);box-shadow:0 22px 40px -22px rgba(7,23,53,.7)}
.cb.mastercard{background:linear-gradient(135deg,#071735,#26324A)}
.cb.amex{background:linear-gradient(135deg,#0B2A6B,#2F7BD6)}
.cb.cartes_bancaires{background:linear-gradient(135deg,#071735,#0B2A6B)}
.cb::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,0) 50%,rgba(255,255,255,.06))}
.cb::after{content:"";position:absolute;right:-60px;top:-70px;width:190px;height:190px;border-radius:50%;background:rgba(255,255,255,.07)}
.cb>*{position:relative;z-index:1}
.cb-haut{display:flex;justify-content:space-between;align-items:center}
.cb-haut b{font:800 18px var(--f-display)}
.cb-haut span{font-weight:700;font-size:14px;opacity:.92}
.cb-num{font:600 clamp(18px,2.4vw,22px) ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;white-space:nowrap}
.cb-bas{display:flex;justify-content:space-between;gap:12px}
.cb-bas small{display:block;font-size:11px;opacity:.7;margin-bottom:2px}
.cb-bas b{font-size:14px;font-weight:700}
.cb-sup{display:inline-flex;align-items:center;gap:8px}
.cb-sup svg{width:16px;height:16px}
.cb-ajout{aspect-ratio:1.586;border-radius:22px;border:1.6px dashed var(--blue);background:var(--soft);color:var(--blue-deep);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;cursor:pointer;font:inherit;font-size:15px}
.cb-ajout .plus{width:54px;height:54px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:30px;line-height:1}
.cb-ajout:hover{background:#DCE8FC}
.cb-ajout:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.rassur{display:flex;flex-direction:column;gap:10px}
.rassur p{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--muted);margin:0}
.rassur svg{flex:none;width:34px;height:34px;padding:8px;border-radius:50%;background:#E6F7EF;color:#0B5C3A}
.etat-m{text-align:center;padding:36px 24px}
.btn-danger{background:#D92D20;color:#fff;border:0}.btn-danger:hover{background:#B42318}
.choix-cartes{display:flex;flex-direction:column;gap:8px;margin:14px 0 4px}
.choix-c{display:flex;gap:12px;align-items:center;border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;cursor:pointer;background:var(--surface)}
.choix-c:has(input:checked){border-color:var(--blue);background:var(--soft)}
.choix-c input{accent-color:var(--blue);width:18px;height:18px;flex:none}
.choix-c span{display:flex;flex-direction:column;gap:2px}
.choix-c small{color:var(--muted);font-size:13px}

/* Profil public, suivi partagé */
.prof-id{display:flex;gap:16px;align-items:center}
.prof-id .ini{display:grid;place-items:center;border-radius:50%;background:var(--soft);color:var(--blue-deep);font-weight:800;width:64px;height:64px;font-size:28px;flex:none}
.pchs{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.prof-t .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:20px}
.hist{list-style:none;padding:0;display:grid;gap:8px}
.hist li{display:flex;justify-content:space-between;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px 14px}
.lien-profil{color:inherit;text-decoration:none}.lien-profil:hover{text-decoration:underline;color:var(--blue)}
.prof-crit{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.prof-crit div{background:var(--soft,#EEF3FB);border-radius:14px;padding:8px 12px;display:flex;gap:8px;align-items:baseline;font-size:14px}
.prof-crit span{color:var(--muted)}
.exports{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.exports[hidden]{display:none}