/* Copie de chromatik-travel/frontend/static/travel.css au 29/08/2026.
   Les deux outils partagent la grammaire visuelle sans partager le fichier :
   une divergence future doit être visible, pas subie. */
/* Chromatik Travel — compléments au socle Statistik (styles.css). */

.wrap { padding: 16px 18px 40px; max-width: 1100px; margin: 0 auto; }

.topbar { display: flex; align-items: center; gap: 14px; padding: 14px 18px;
  border-bottom: 1px solid var(--line); background: rgba(13,11,20,.6);
  backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 10; }
.topbar .meta a.quiet { color: var(--muted); text-decoration: none; }
.topbar .meta a.quiet:hover { color: var(--accent-2); }
/* La déconnexion est un POST (elle détruit la session côté serveur) : c'est un
   bouton dans un form, déguisé en lien pour ne rien changer visuellement. */
.topbar .meta form.logout { display: inline; }
.topbar .meta button.quiet { background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--muted); }
.topbar .meta button.quiet:hover { color: var(--accent-2); }

.mono { font-family: var(--mono); font-size: 12px; }

/* Statuts du cycle de vie */
.pill { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px;
  font-family: var(--mono); letter-spacing: .04em; border: 1px solid var(--line);
  background: var(--card-2); color: var(--muted); white-space: nowrap; }
.pill.pos { color: var(--pos); border-color: rgba(70,214,160,.35); }
.pill.neu { color: var(--neu); border-color: rgba(255,180,84,.35); }
.pill.neg { color: var(--neg); border-color: rgba(255,107,107,.35); }

/* Tables */
.tscroll { overflow-x: auto; }
table.dv th { text-align: left; color: var(--muted); font-weight: 500; font-size: 12px;
  padding: 8px 10px; border-bottom: 1px solid var(--line); }
table.dv td { padding: 9px 10px; border-bottom: 1px solid rgba(42,36,56,.55); }
table.dv tbody tr:hover { background: rgba(139,92,246,.05); }

/* Formulaire */
.form-panel { max-width: 640px; margin: 0 auto; }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .frow { grid-template-columns: 1fr; } }
.field textarea { width: 100%; padding: 11px 13px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05);
  color: var(--txt); font-size: 14px; outline: none; font-family: var(--sans); resize: vertical; }
.field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(139,92,246,.2); }
.btn.slim { width: auto; display: inline-block; padding: 10px 18px; text-decoration: none; }

/* État vide */
.empty { text-align: center; padding: 36px 0 28px; color: var(--muted); }
.empty p { margin: 0 0 16px; }

/* ── Tranche 2 ─────────────────────────────────────────────────────────────── */
.tab i, .hic { width: 15px; height: 15px; vertical-align: -2px; }
.hintlab { color: var(--muted); font-weight: 400; font-size: 11px; }
.muted2 { color: var(--muted); }
table.dv.rowlinks tbody tr { cursor: pointer; }
.inline { display: inline; }
.backlink { display: inline-flex; align-items: center; gap: 6px; color: var(--muted);
  text-decoration: none; font-size: 12px; margin-bottom: 10px; }
.backlink:hover { color: var(--accent-2); }
.backlink i { width: 14px; height: 14px; }

.field select { width: 100%; padding: 11px 13px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14); background: #14111d;
  color: var(--txt); font-size: 14px; outline: none; }
.field select:focus { border-color: var(--accent); }

.notice { border-radius: 10px; padding: 10px 14px; font-size: 13px; margin: 10px 0; }
.notice.warn { background: rgba(255,180,84,.1); border: 1px solid rgba(255,180,84,.35); color: var(--neu); }
.notice.ok { background: rgba(70,214,160,.1); border: 1px solid rgba(70,214,160,.35); color: var(--pos); }

/* Panneau alertes péremption */
.warnpanel { border-color: rgba(255,180,84,.35); }

/* Cartes documents */
.doccard { border: 1px solid var(--line); border-radius: 12px; margin: 10px 0; background: var(--card-2); }
.doccard summary { display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  cursor: pointer; list-style: none; flex-wrap: wrap; }
.doccard summary::-webkit-details-marker { display: none; }
.dockind { font-weight: 600; text-transform: capitalize; }
.docform { padding: 4px 14px 14px; border-top: 1px solid var(--line); }
.docmeta { color: var(--muted); font-size: 12px; padding-top: 22px; }
.docactions { display: flex; gap: 10px; align-items: center; }
.iconbtn.danger:hover { border-color: var(--neg); color: var(--neg); }
.uploadrow { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 16px;
  padding: 14px; border: 1px dashed var(--line); border-radius: 12px; }
.uplabel { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.uplabel i { width: 16px; height: 16px; }
.uploadrow input[type=file] { color: var(--muted); font-size: 12px; }

/* Détail déplacement */
.triphead { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pill.big { font-size: 13px; padding: 5px 14px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; margin-top: 10px; }
@media (max-width: 700px) { .grid2 { grid-template-columns: 1fr; } }
.kv { display: flex; gap: 10px; padding: 5px 0; font-size: 13px; }
.kv span { color: var(--muted); min-width: 110px; }
.riderrow { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 14px;
  background: rgba(139,92,246,.07); border: 1px solid rgba(139,92,246,.25); border-radius: 10px;
  flex-wrap: wrap; font-size: 13px; }
.riderrow i { width: 15px; height: 15px; color: var(--accent-2); }
.riderlink { color: var(--accent-2); text-decoration: none; word-break: break-all; }
.actionrow { display: flex; flex-direction: column; gap: 12px; }
.commentfield { padding: 11px 13px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05); color: var(--txt); font-size: 14px; outline: none; }
.commentfield:focus { border-color: var(--accent); }
.btnrow { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-danger { background: linear-gradient(120deg, #7f1d1d, #dc2626 60%, #f87171); box-shadow: 0 6px 20px rgba(220,38,38,.25); }
.btn-pos { background: linear-gradient(120deg, #065f46, #10b981 60%, #46d6a0); box-shadow: 0 6px 20px rgba(16,185,129,.25); }
.empty-ic { width: 34px; height: 34px; color: var(--accent-2); opacity: .7; margin-bottom: 8px; }

/* ── Rider (mobile-first) ──────────────────────────────────────────────────── */
.riderbody { background:
  radial-gradient(900px 480px at 80% -10%, rgba(139,92,246,.12), transparent 60%),
  radial-gradient(700px 420px at -10% 20%, rgba(76,29,149,.09), transparent 55%),
  var(--bg); }
.riderwrap { max-width: 480px; margin: 0 auto; padding: 26px 16px 40px; }
.riderhead { text-align: center; margin-bottom: 18px; }
.riderhead .brand-logo { height: 26px; }
.ridertag { font-family: var(--mono); font-size: 10px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--accent-2); margin-top: 8px; }
.ridercard { background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 18px; margin-bottom: 14px; }
.ridercard.focus { text-align: center; background: linear-gradient(160deg, rgba(139,92,246,.14), var(--card) 60%);
  border-color: rgba(139,92,246,.4); }
.ridercard h2 { font-size: 13px; margin: 0 0 10px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--accent-2); }
.ridermode { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.riderbig { font-size: 30px; font-weight: 700; letter-spacing: -.5px; margin: 4px 0; }
.ridersub { color: var(--muted); font-size: 13px; margin-bottom: 8px; }
.riderhint { color: var(--muted); font-size: 12.5px; line-height: 1.5; margin: 0 0 10px; }
.riderupload { display: flex; flex-direction: column; gap: 10px; }
.riderupload input[type=file] { color: var(--muted); font-size: 12px; }
.riderupload input[name=note] { padding: 11px 13px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05);
  color: var(--txt); font-size: 14px; outline: none; }
.calbtn { margin-top: 10px; text-align: center; }
.riderfoot { text-align: center; font-family: var(--mono); font-size: 9px;
  letter-spacing: .22em; text-transform: uppercase; color: #5d5470; margin-top: 18px; }

/* Inputs fichier lisibles */
input[type=file] { width: 100%; }
input[type=file]::file-selector-button {
  padding: 9px 14px; border-radius: 9px; border: 1px solid rgba(139,92,246,.4);
  background: rgba(139,92,246,.12); color: var(--accent-3); font-size: 13px;
  cursor: pointer; margin-right: 10px; font-family: var(--sans);
}
input[type=file]::file-selector-button:hover { background: rgba(139,92,246,.2); }

/* Chips "à réserver" (train/avion/hôtel/location) */
.needchips { display: flex; gap: 10px; flex-wrap: wrap; }
.needchip input { display: none; }
.needchip span { display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px;
  border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05);
  color: var(--muted); font-size: 13px; cursor: pointer; transition: all .15s; user-select: none; }
.needchip span i { width: 16px; height: 16px; }
.needchip:hover span { border-color: rgba(139,92,246,.4); color: var(--txt); }
.needchip input:checked + span { border-color: var(--accent); background: rgba(139,92,246,.16);
  color: var(--accent-3); box-shadow: 0 0 0 3px rgba(139,92,246,.12); }
.needicons { margin-left: 8px; color: var(--accent-2); white-space: nowrap; }
.needicons i { width: 13px; height: 13px; vertical-align: -2px; margin-right: 3px; }
.needtag { display: inline-flex; align-items: center; gap: 5px; margin-right: 10px; }
.needtag i { width: 14px; height: 14px; color: var(--accent-2); }

/* File de validation du référent */
.validbanner { display: flex; align-items: center; gap: 10px; padding: 13px 18px; margin-bottom: 14px;
  border-radius: 12px; border: 1px solid rgba(255,180,84,.45); background: rgba(255,180,84,.08);
  color: var(--neu); text-decoration: none; font-size: 14px; transition: background .15s; }
.validbanner:hover { background: rgba(255,180,84,.14); }
.validbanner i { width: 17px; height: 17px; }
.filterrow { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 4px; }
.fchip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 18px;
  border: 1px solid var(--line); background: var(--card-2); color: var(--muted);
  font-size: 12.5px; text-decoration: none; transition: all .15s; }
.fchip:hover { color: var(--txt); border-color: rgba(139,92,246,.4); }
.fchip.active { color: var(--txt); border-color: var(--accent); background: rgba(139,92,246,.14); }
.fchip.hot:not(.active) { border-color: rgba(255,180,84,.45); color: var(--neu); }
.fcount { font-family: var(--mono); font-size: 11px; padding: 1px 7px; border-radius: 10px;
  background: rgba(255,255,255,.07); }

.editbtn { margin-top: 12px; margin-right: 10px; }
.btn-ghost { background: var(--card-2); border: 1px solid var(--line); box-shadow: none; color: var(--txt); }
.btn-ghost:hover { border-color: var(--accent); }

.filelink { display: block; padding: 10px 12px; margin: 6px 0; border-radius: 10px;
  border: 1px solid var(--line); background: var(--card-2); color: var(--accent-3);
  text-decoration: none; font-size: 14px; }
.filelink:hover { border-color: var(--accent); }

.aicard { border-color: rgba(139,92,246,.45); background: linear-gradient(165deg, rgba(139,92,246,.08), var(--card) 55%); }

/* Toast */
.toast { position: fixed; bottom: 26px; left: 50%; transform: translate(-50%, 20px); z-index: 100;
  background: #1b1726; border: 1px solid rgba(70,214,160,.4); color: var(--pos);
  padding: 12px 22px; border-radius: 12px; font-size: 14px; opacity: 0;
  transition: all .35s ease; box-shadow: 0 12px 34px rgba(0,0,0,.5); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Stepper du cycle de vie */
.stepper { display: flex; gap: 0; margin: 14px 0 6px; overflow-x: auto; padding-bottom: 4px; }
.stepper .step { display: flex; flex-direction: column; align-items: center; min-width: 76px; position: relative; }
.stepper .step:not(:last-child)::after { content: ""; position: absolute; top: 7px; left: 50%;
  width: 100%; height: 2px; background: var(--line); z-index: 0; }
.stepper .step.done:not(:last-child)::after { background: var(--accent); }
.stepper .step .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--card-2);
  border: 2px solid var(--line); z-index: 1; }
.stepper .step.done .dot { background: var(--accent); border-color: var(--accent-2); }
.stepper .step .slabel { font-size: 10.5px; color: var(--muted); margin-top: 6px; font-family: var(--mono); }
.stepper .step.done .slabel { color: var(--accent-3); }

/* Fil d'échanges */
.commentform { display: flex; gap: 10px; margin-bottom: 14px; }
.commentform .commentfield { flex: 1; }
.timeline { display: flex; flex-direction: column; gap: 8px; }
.tl-item { display: flex; align-items: baseline; gap: 10px; font-size: 13px; flex-wrap: wrap;
  padding: 7px 10px; border-radius: 9px; }
.tl-item.comment { background: rgba(139,92,246,.06); border: 1px solid rgba(139,92,246,.18); }
.tl-when { color: var(--muted); font-size: 11px; white-space: nowrap; }
.tl-who { font-weight: 600; }
.tl-msg { flex: 1; min-width: 200px; }

/* Météo rider */
.wx { margin-top: 10px; font-size: 15px; color: var(--txt); }

/* ── Pack sexy : avatars, KPI, bandeau destination, boarding pass, motion ── */
.avatar{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;margin-right:8px;border-radius:50%;font-size:11px;font-weight:700;letter-spacing:.02em;vertical-align:middle;color:#fff;background:linear-gradient(135deg,hsl(var(--h,270) 45% 38%),hsl(calc(var(--h,270) + 40) 50% 30%));box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.avatar.sm{width:20px;height:20px;font-size:9px;margin-right:6px}

.kpirow{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:16px}
.kpitile{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border-radius:14px;text-decoration:none;background:linear-gradient(160deg,rgba(91,33,182,.28),rgba(20,14,36,.6));border:1px solid rgba(196,181,253,.16);transition:transform .18s ease,border-color .18s ease}
.kpitile:hover{transform:translateY(-2px);border-color:rgba(196,181,253,.4)}
.kpitile svg{width:18px;height:18px;color:#c4b5fd;opacity:.8}
.kv-num{font-size:30px;font-weight:800;line-height:1;color:#ede9fe;font-variant-numeric:tabular-nums}
.kv-lab{font-size:12px;color:#a99fc6;text-transform:uppercase;letter-spacing:.08em}

.destband{position:relative;overflow:hidden;border-radius:14px;padding:18px 20px 14px;margin-bottom:14px;background:linear-gradient(120deg,hsl(var(--h,270) 55% 22%),hsl(calc(var(--h,270) + 55) 60% 16%) 55%,#100a1e);border:1px solid hsl(var(--h,270) 40% 38% / .45)}
.destband::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 85% -20%,hsl(calc(var(--h,270) + 30) 80% 60% / .25),transparent 60%)}
.destcodes{display:flex;align-items:center;gap:14px;font-size:26px;font-weight:800;letter-spacing:.12em;color:#f5f3ff;font-variant-numeric:tabular-nums}
.destarc{flex:0 0 70px;height:2px;background:repeating-linear-gradient(90deg,rgba(245,243,255,.7) 0 6px,transparent 6px 12px);position:relative}
.destarc::after{content:"";position:absolute;right:-2px;top:-4px;width:0;height:0;border-left:8px solid rgba(245,243,255,.85);border-top:5px solid transparent;border-bottom:5px solid transparent}
.destname{margin-top:2px;font-size:12px;text-transform:uppercase;letter-spacing:.22em;color:hsl(var(--h,270) 70% 82%)}

/* boarding pass rider */
.bpass{position:relative;border-radius:18px;overflow:hidden;margin-bottom:18px;background:linear-gradient(150deg,hsl(var(--h,270) 50% 20%),#140e24 70%);border:1px solid hsl(var(--h,270) 45% 45% / .4);box-shadow:0 12px 40px rgba(0,0,0,.45)}
.bpass-top{padding:22px 22px 16px;position:relative}
.bpass-top::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 90% -30%,hsl(calc(var(--h,270) + 40) 85% 62% / .22),transparent 55%);pointer-events:none}
.bpass-codes{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.bpc{display:flex;flex-direction:column;min-width:0}
.bpc:last-child{align-items:flex-end;text-align:right}
.bpc-code{font-size:34px;font-weight:800;letter-spacing:.1em;color:#f5f3ff;line-height:1}
.bpc-city{font-size:11px;color:#b6abd8;text-transform:uppercase;letter-spacing:.14em;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}
.bpc-arc{flex:1;display:flex;align-items:center;gap:6px;min-width:60px}
.bpc-dot{width:6px;height:6px;border-radius:50%;background:#c4b5fd}
.bpc-line{flex:1;height:2px;background:repeating-linear-gradient(90deg,rgba(196,181,253,.65) 0 5px,transparent 5px 11px)}
.bpc-plane{font-size:15px;line-height:1}
.bpass-big{font-size:32px;font-weight:800;color:#ede9fe;font-variant-numeric:tabular-nums}
.bpass-tear{position:relative;height:0;border-top:2px dashed rgba(196,181,253,.28);margin:0 0}
.bpass-tear::before,.bpass-tear::after{content:"";position:absolute;top:-9px;width:18px;height:18px;border-radius:50%;background:var(--bg,#0b0714)}
.bpass-tear::before{left:-9px}
.bpass-tear::after{right:-9px}
.bpass-bottom{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:flex-end;padding:16px 22px 20px;background:rgba(10,7,18,.35)}
.bpf{display:flex;flex-direction:column;gap:2px}
.bpf span{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:#9a8fc0}
.bpf b{font-size:14px;color:#ede9fe;font-weight:600}
.bpass-barcode{flex:1;min-width:110px;height:34px;align-self:center;background:repeating-linear-gradient(90deg,rgba(237,233,254,.85) 0 2px,transparent 2px 5px,rgba(237,233,254,.85) 5px 6px,transparent 6px 10px,rgba(237,233,254,.85) 10px 13px,transparent 13px 16px);border-radius:2px;opacity:.75}

/* micro-animations */
@media (prefers-reduced-motion: no-preference){
  .panel,.bpass,.kpitile,.destband{animation:rise .45s ease both}
  .panel:nth-of-type(2){animation-delay:.06s}
  .panel:nth-of-type(3){animation-delay:.12s}
  .stepper .step .dot{animation:popin .4s ease both}
  .stepper .step:nth-child(2) .dot{animation-delay:.08s}
  .stepper .step:nth-child(3) .dot{animation-delay:.16s}
  .stepper .step:nth-child(4) .dot{animation-delay:.24s}
  .stepper .step:nth-child(5) .dot{animation-delay:.32s}
  .stepper .step:nth-child(6) .dot{animation-delay:.4s}
  .stepper .step:nth-child(7) .dot{animation-delay:.48s}
}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes popin{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
@media (max-width:640px){.kpirow{grid-template-columns:1fr 1fr 1fr;gap:8px}.kpitile{padding:12px}.kv-num{font-size:22px}.bpc-code{font-size:26px}}

.bpc-plane svg{width:18px;height:18px;color:#c4b5fd}
.wx svg{width:15px;height:15px;vertical-align:-3px;color:#c4b5fd}
.bpass-big svg{width:26px;height:26px;vertical-align:-2px;color:#86efac}
.calbtn svg{width:16px;height:16px;vertical-align:-3px}

.catchips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.catchip input{position:absolute;opacity:0}
.catchip span{display:inline-block;padding:7px 13px;border-radius:999px;font-size:13px;cursor:pointer;color:#c9c0e8;background:rgba(91,33,182,.14);border:1px solid rgba(196,181,253,.22);transition:all .15s ease}
.catchip input:checked+span{background:linear-gradient(135deg,#5b21b6,#7c3aed);color:#fff;border-color:#a78bfa}
.catchip input:focus-visible+span{outline:2px solid #a78bfa;outline-offset:2px}

.auth-icons{display:flex;justify-content:center;gap:18px;margin-top:14px}
.auth-icons svg{width:17px;height:17px;color:rgba(196,181,253,.55)}

/* Coût du déplacement */
.costrow{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:8px 0 4px}
.costcell{display:flex;flex-direction:column;gap:3px;padding:14px 16px;border-radius:12px;background:rgba(91,33,182,.12);border:1px solid rgba(196,181,253,.16)}
.costcell span{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#a99fc6}
.costcell b{font-size:22px;font-weight:800;color:#ede9fe;font-variant-numeric:tabular-nums}
.costcell i{font-size:11px;color:#8b80a8;font-style:normal}
.costcell.total{background:linear-gradient(135deg,rgba(124,58,237,.28),rgba(20,14,36,.5));border-color:rgba(196,181,253,.4)}
.costcell.total b{color:#c4b5fd}
@media(max-width:640px){.costrow{grid-template-columns:1fr}}
/* Ligne montant + note du rider */
.uprow{display:flex;gap:8px}
.upamount{max-width:140px}
.upcur{max-width:110px}
@media(max-width:480px){.uprow{flex-wrap:wrap}.upamount{flex:1 1 55%;max-width:none}
  .upcur{flex:1 1 35%}.uprow>input[name=note]{flex:1 1 100%}}
/* Bandeau doublon */
.dupwarn{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;margin-bottom:14px;background:rgba(202,138,4,.12);border:1px solid rgba(234,179,8,.4);color:#fde68a;font-size:13.5px}
.dupwarn svg{width:18px;height:18px;flex:0 0 18px;margin-top:1px}
.dupwarn a{color:#fef3c7;font-weight:600}
.inlineform{display:inline-block;margin:0;vertical-align:middle}

.svcrow{display:flex;gap:14px;margin-right:18px;align-items:center}
.svc{display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#8d84a8;cursor:default}
.svcdot{width:8px;height:8px;border-radius:50%;display:inline-block}
.svc.ok .svcdot{background:#4ade80;box-shadow:0 0 6px rgba(74,222,128,.6)}
.svc.down .svcdot{background:#f87171;box-shadow:0 0 6px rgba(248,113,113,.6)}
.svc.setup .svcdot{background:#8d84a8}
/* Mobile : l'état des services reste visible (demande explicite) mais compact —
   pastille seule quand tout va bien, libellé de retour dès qu'un service tombe. */
@media (max-width:640px){
  .svcrow{gap:9px;margin-right:10px}
  .svc{font-size:0;gap:0}
  .svc.down{font-size:10px;gap:5px}
}

.agentbtn{display:inline-flex;align-items:center;gap:8px;margin-bottom:6px;font-weight:600;
  background:linear-gradient(120deg,#4c1d95,#7c3aed 55%,#a78bfa);border:1px solid #a78bfa;
  box-shadow:0 6px 20px rgba(124,58,237,.35)}
.iacard{border-color:rgba(196,181,253,.22)}

/* Les messages et transitions ne doivent jamais déborder de la tuile */
.timeline{max-width:100%}
.tl-item{flex-wrap:wrap;align-items:flex-start}
.tl-msg,.tl-item .pill{white-space:normal;overflow-wrap:anywhere;word-break:break-word;
  max-width:100%;line-height:1.5;text-align:left}
.tl-item .pill{display:inline-block;padding:6px 10px}
.kv b,.ptag{overflow-wrap:anywhere}
/* Pastille « messages non lus » sur le board */
.unread{display:inline-flex;align-items:center;gap:4px;margin-left:8px;padding:2px 8px;
  border-radius:999px;font-size:11px;font-weight:700;background:#7c3aed;color:#fff;
  box-shadow:0 0 0 2px rgba(124,58,237,.25)}
.unread svg{width:12px;height:12px}

/* Mes voyages — ligne de synthèse du prochain départ */
.nextline{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:2px 0 14px}
.nextj{font-size:26px;font-weight:800;color:var(--accent-2);font-variant-numeric:tabular-nums;line-height:1}
.nextdate{color:var(--muted);font-size:13px}

/* Référence du déplacement — même code dans Monday, sur la fiche et dans le Drive */
.trvcode{font-size:13px;color:var(--accent-2);background:var(--card-2);border:1px solid var(--line);border-radius:6px;padding:2px 8px;margin-right:8px;cursor:pointer;letter-spacing:.03em}
.trvcode:hover{border-color:var(--accent)}

/* Budget voyage */
.rt{text-align:right}
.frow.wrap{flex-wrap:wrap}
.field.small{min-width:150px;flex:0 1 170px}
.chkrow{gap:10px;flex-wrap:wrap}
.chk{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border:1px solid var(--line);
  border-radius:10px;background:var(--card-2);cursor:pointer;font-size:13px;user-select:none}
.chk:has(input:checked){border-color:var(--accent);color:var(--accent-2)}
.chk i{width:15px;height:15px}
.chk input{accent-color:var(--accent)}
table.dv tr.sep td{border-top:1px solid var(--line);color:var(--muted)}
table.dv tr.tot td{border-top:2px solid var(--line);font-size:15px}
td .pill{margin-left:7px}
table.dv.persons input{width:100%;min-width:120px;padding:7px 10px;border-radius:8px;
  border:1px solid var(--line);background:var(--card-2);color:var(--txt);font-size:13px;
  font-family:var(--sans);outline:none}
table.dv.persons input:focus{border-color:var(--accent)}
table.dv.persons td{padding:5px 6px}
.devisbloc{margin-top:12px;padding:14px;border:1px dashed var(--line);border-radius:10px;
  background:var(--card-2);color:var(--muted);font-family:var(--mono);font-size:12px;
  white-space:pre-wrap;overflow-x:auto}
.subh{margin:22px 0 6px;font-size:14px;color:var(--muted);font-weight:600}

.infosform{margin:10px 0 4px}
.btnfield{display:flex;align-items:flex-end}

.manualadd summary{display:flex;align-items:center;gap:8px;padding:12px 14px;color:var(--muted);cursor:pointer}
.manualadd summary i{width:15px;height:15px}
.manualadd{margin-top:10px}

/* Aide « ? » des titres de section, sur mobile : la bulle se cale sur la largeur
   du titre au lieu d'être centrée sur l'icône. Centrée, elle dépassait du côté
   gauche dès que l'icône approchait du bord de la carte (rider iPhone). */
@media (max-width: 560px) {
  .panel h3, .panel h4, .ridercard h2 { position: relative; }
  .panel h3 > .help, .panel h4 > .help, .ridercard h2 > .help { position: static; }
  .panel h3 > .help .help-bubble,
  .panel h4 > .help .help-bubble,
  .ridercard h2 > .help .help-bubble {
    left: 0; right: 0; width: auto; max-width: none; transform: none;
  }
}

/* Page « mon mot de passe » : formulaire étroit (un champ par ligne, pas de
   grille à deux colonnes qui ferait croire à deux saisies indépendantes). */
.pwpanel { max-width: 620px; }
.pwform .field { margin-bottom: 14px; }
.pwform .hintlab { display: block; margin-top: 6px; line-height: 1.45; }
.howto { margin: 6px 0 0; padding-left: 20px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.howto li { margin-bottom: 8px; }
.howto b { color: var(--txt); }
.topbar .meta a.quiet { white-space: nowrap; }

/* « J'ai perdu mon mot de passe » : une action secondaire, pas un troisième
   bouton plein qui concurrencerait les deux vraies façons de se connecter. */
.linkbtn { display: block; width: 100%; margin-top: 12px; padding: 6px; background: none;
  border: 0; color: var(--muted); font: inherit; font-size: 12.5px; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; }
.linkbtn:hover { color: var(--accent-2); }

/* Colonne d'actions de Personnes : trois boutons (inviter, récupération,
   activer/désactiver) qui doivent rester sur une ligne. Sans ça la cellule
   se rétrécit et les empile verticalement dès que la fenêtre est étroite. */
table.dv td:last-child { white-space: nowrap; }
table.dv td:last-child .iconbtn { margin-right: 4px; }

/* Règles de compaction en fin de fichier : voir la note ci-dessus, une
   spécificité égale se départage par l'ordre, jamais par la présence d'un
   media query. */
/* Sur un viewport bas (fenêtre non maximisée, portable), le contenu de la page
   d'authentification (logo + tagline + icônes + carte + pied Darkvalley)
   dépasse la hauteur visible : le pied, avec le logo Darkvalley, sort du cadre
   et n'est atteignable qu'en défilant. Repéré par Julien le 30/08/2026 sur la
   page de connexion. Le socle partagé (styles.css, copié de Travel) porte le
   même défaut ; resserré ici sans y toucher, pour que la divergence reste
   locale et visible plutôt que silencieuse. */
/* ⚠️ Le premier palier doit être AU-DESSUS de la hauteur naturelle du contenu
   (874px mesurés), pas en dessous. Posé d'abord à 820px, il laissait une
   fenêtre de 54px — entre 820 et 874 — où la page débordait sans qu'aucune
   compaction ne s'applique : exactement le cas de Julien en plein écran
   Safari, où le logo Darkvalley se retrouvait coupé. Un palier se choisit sur
   une mesure, jamais sur une valeur ronde qui semble raisonnable. */
@media (max-height: 900px) {
  .auth-top { padding-top: 24px; gap: 8px; }
  .auth-stack { padding-top: 20px; padding-bottom: 16px; gap: 10px; }
  .auth-icons { display: none; }             /* purement décoratif : le premier sacrifié */
  .auth-card { padding: 20px 22px; }
  .auth-card p.hint { margin-bottom: 12px; font-size: 12.5px; line-height: 1.45; }
  .auth-card .field { margin-bottom: 10px; }
  .auth-card .btn { padding: 10px; }
  .linkbtn { margin-top: 6px; }
}
@media (max-height: 720px) {
  .chromatik-logo { width: 260px; }
  .auth-tagline { display: none; }
  .auth-card h1 { margin-bottom: 2px; }
  .auth-card p.hint { display: none; }       /* le libellé du bouton suffit à cette hauteur */
  .auth-foot { transform: scale(.85); margin-top: -6px; }
}