/* Espace client — Transferts Cab Services. Monde « Registre de service »
   (design.json fait autorité : encre #08111f, papier #f4f0e8, or #b8862f,
   succès #28705a, ambre #d97706, rouge #a23f35). Ton hôtesse : respiration
   généreuse, aucune densité opérationnelle. Composition autoritaire :
   .impeccable/mockups/client/galerie-client.html (APPROUVÉE propriétaire). */

:root{
  --ink:#08111f; --ink-70:rgba(8,17,31,.7); --ink-50:rgba(8,17,31,.5); --ink-30:rgba(8,17,31,.3);
  --paper:#f4f0e8; --paper-95:#faf8f3; --card:#fffdf8; --line:#e3dccd; --line-strong:#b9af9f;
  --gold:#b8862f; --gold-soft:#f2e7cf; --success:#28705a; --success-soft:#e3ede8;
  --warning:#d97706; --warning-soft:#f9edd9; --danger:#a23f35; --danger-soft:#f4e2df;
  --shadow-rest:0 10px 28px rgba(8,17,31,.055); --shadow-ledger:0 10px 24px rgba(8,17,31,.045);
}
/* Mode nuit : chaque token dérivé est REdéfini explicitement (valeur
   calculée — aucune indirection var() ici, leçon admin dark mode). */
body.dark-mode{
  --ink:#ece7db; --ink-70:rgba(236,231,219,.72); --ink-50:rgba(236,231,219,.52); --ink-30:rgba(236,231,219,.32);
  --paper:#0b1522; --paper-95:#0e1a29; --card:#12202f; --line:#26334a; --line-strong:#3d4c66;
  --gold:#c99a3d; --gold-soft:rgba(201,154,61,.16); --success:#5ba98e; --success-soft:rgba(40,112,90,.22);
  --warning:#e08b2d; --warning-soft:rgba(217,119,6,.16); --danger:#c96a5f; --danger-soft:rgba(162,63,53,.22);
  --shadow-rest:0 10px 28px rgba(0,0,0,.35); --shadow-ledger:0 10px 24px rgba(0,0,0,.3);
}
*{margin:0;padding:0;box-sizing:border-box}
body.client-body{background:var(--paper);color:var(--ink);font:400 14px/1.6 Montserrat,system-ui,sans-serif;-webkit-font-smoothing:antialiased;min-height:100vh}
.display{font-family:Forum,serif;font-weight:400;letter-spacing:.01em}
.label{font:600 10.5px/1.4 Montserrat,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-50)}
a{color:inherit}

/* ---------- chrome ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line);background:var(--paper-95)}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none}
.brand .mark{width:30px;height:30px;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;font-family:Forum,serif;font-size:15px;color:var(--gold);background:var(--card)}
.brand .name{font-family:Forum,serif;font-size:16px;line-height:1.1}
.brand .sub{font:600 9px/1.4 Montserrat,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-50)}
.top-actions{display:flex;gap:14px;align-items:center}
.lang-btn{background:none;border:1px solid var(--line);border-radius:50%;width:32px;height:32px;display:grid;place-items:center;cursor:pointer;color:var(--ink-70);font:600 10px/1 Montserrat,sans-serif;letter-spacing:.4px;padding:0;margin-right:8px}
.lang-btn:hover{border-color:var(--gold);color:var(--gold)}
.theme-btn{background:none;border:1px solid var(--line);border-radius:50%;width:32px;height:32px;display:grid;place-items:center;cursor:pointer;color:var(--ink-70)}
.theme-btn:hover{border-color:var(--gold);color:var(--gold)}
.theme-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.wrap{max-width:600px;margin:0 auto;padding:26px 20px 90px}
.wrap.wide{max-width:1100px}

/* desktop nav (≥900px) sur les pages navigateur */
.d-nav{display:none}
.bottom-nav{display:flex;position:fixed;left:0;right:0;bottom:0;border-top:1px solid var(--line);background:var(--paper-95);z-index:20}
.bottom-nav a{flex:1;text-align:center;padding:12px 0 14px;font:600 11px/1.4 Montserrat,sans-serif;color:var(--ink-50);text-decoration:none;border-top:2px solid transparent}
.bottom-nav a.on{color:var(--ink);border-top-color:var(--gold)}
@media(min-width:900px){
  .wrap.wide{padding:30px 28px 40px}
  .bottom-nav{display:none}
  .d-nav{display:flex;gap:24px;align-items:center;font:600 12.5px Montserrat,sans-serif}
  .d-nav a{color:var(--ink-70);text-decoration:none}
  .d-nav a.on{color:var(--ink);border-bottom:2px solid var(--gold);padding-bottom:4px}
  .d-nav .cta{padding:8px 14px;background:#0b1727;color:#fff;border-radius:2px;font-size:12px}
  body.dark-mode .d-nav .cta{background:var(--gold);color:#08111f;border-color:var(--gold)}
}

/* ---------- composants ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font:600 11px/1.5 Montserrat,sans-serif;border:1px solid}
.pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.wait{color:var(--warning);border-color:var(--warning);background:var(--warning-soft)}
.pill.ok{color:var(--success);border-color:var(--success);background:var(--success-soft)}
.pill.driver{color:#0b1727;border-color:#0b1727;background:#fff}
.pill.done{color:var(--ink-50);border-color:var(--line-strong);background:var(--paper)}
.pill.cancel{color:var(--danger);border-color:var(--danger);background:var(--danger-soft)}
body.dark-mode .pill.driver{color:#ece7db;border-color:#ece7db;background:transparent}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px 18px;border-radius:2px;font:600 13px/1.55 Montserrat,sans-serif;cursor:pointer;border:1px solid transparent}
.btn-primary{background:#0b1727;border-color:#0b1727;color:#fff}
body.dark-mode .btn-primary{background:var(--gold);border-color:var(--gold);color:#08111f}
.btn-ghost{background:var(--card);border-color:var(--line-strong);color:var(--ink)}
.btn-ghost:hover{border-color:var(--gold)}
.btn-link{background:none;border:none;color:var(--ink-70);font:600 12.5px/1.5 Montserrat,sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.btn-link:hover{color:var(--gold)}

.field{margin-bottom:14px}
.field label{display:block;margin-bottom:6px;font:600 12px/1.4 Montserrat,sans-serif;color:#334155}
body.dark-mode .field label{color:var(--ink-70)}
.field input{width:100%;padding:11px 13px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;font:400 13.5px/1.5 Montserrat,sans-serif;color:var(--ink)}
body.dark-mode .field input{background:#0b1522;border-color:var(--line-strong);color:var(--ink)}
.field input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(184,134,47,.15)}
.field .hint{margin-top:5px;font-size:11px;color:var(--ink-50)}

.card{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-ledger)}
.rule{border:none;border-top:1px solid var(--line);margin:16px 0}
.form-error{margin:10px 0 0;color:var(--danger);font-size:13px;font-weight:500}
.form-note{margin:10px 0 0;color:var(--ink-50);font-size:12.5px}

/* ---------- connexion / inscription ---------- */
.auth-hero{padding:8px 0 18px;text-align:left}
.auth-hero .kicker{margin-bottom:8px}
.auth-hero h2{font-size:27px;line-height:1.2}
.auth-hero p{margin-top:6px;color:var(--ink-70);font-size:13px}
.auth-foot{margin-top:16px;text-align:center;font-size:12.5px;color:var(--ink-70)}
.legal{margin-top:18px;font-size:11px;color:var(--ink-50);text-align:center}

/* ---------- mes trajets ---------- */
.next-hero{padding:20px;position:relative}
.next-hero .ref{font:600 10.5px/1 Montserrat,sans-serif;letter-spacing:.12em;color:var(--ink-50)}
.next-hero .when{margin-top:10px;font-family:Forum,serif;font-size:25px;line-height:1.15}
.next-hero .route{margin-top:14px;display:flex;flex-direction:column;gap:9px}
.leg{display:flex;gap:10px;align-items:flex-start;font-size:13px}
.leg .pt{width:8px;height:8px;border-radius:50%;border:2px solid var(--gold);margin-top:5px;flex:0 0 auto;background:var(--card)}
.leg .pt.arrive{background:var(--ink);border-color:var(--ink)}
.leg .addr{color:var(--ink);font-weight:500}
.leg .meta{color:var(--ink-50);font-size:11.5px}
.hero-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.chauffeur-line{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line-strong);display:flex;gap:10px;align-items:center;font-size:12.5px;color:var(--ink-70)}
.chauffeur-line .avatar{width:28px;height:28px;border-radius:50%;background:var(--gold-soft);color:#7a5a1e;display:grid;place-items:center;font:600 11px Montserrat,sans-serif;flex:0 0 auto}
body.dark-mode .chauffeur-line .avatar{color:var(--gold)}
.section{margin-top:22px}
.section .head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.trip-row{display:flex;justify-content:space-between;gap:12px;padding:13px 16px;align-items:center}
.trip-row + .trip-row{border-top:1px solid var(--line)}
.trip-row .t{font-weight:600;font-size:13px}
.trip-row .d{color:var(--ink-50);font-size:11.5px;margin-top:2px}
.trip-row a{text-decoration:none}
.empty-state{padding:22px 20px;text-align:center;color:var(--ink-70);font-size:13px}
.reserve-cta{margin-top:20px;padding:14px;border:1px dashed var(--line-strong);border-radius:12px;text-align:center;background:transparent}
.reserve-cta p{font-size:12px;color:var(--ink-70);margin-bottom:10px}

/* ---------- détail ---------- */
.backlink{display:inline-flex;align-items:center;gap:6px;color:var(--ink-70);font:600 12px Montserrat,sans-serif;text-decoration:none;margin-bottom:14px}
.backlink:hover{color:var(--gold)}
.detail-head h2{font-size:24px;line-height:1.2;margin-top:6px}
.detail-head .refline{margin-top:8px;display:flex;gap:10px;align-items:center;font-size:12px;color:var(--ink-50)}
.steps{margin:18px 0;padding:16px 18px}
.step{display:flex;gap:12px;position:relative;padding-bottom:16px}
.step:last-child{padding-bottom:0}
.step:before{content:"";position:absolute;left:7px;top:18px;bottom:0;width:1px;background:var(--line)}
.step:last-child:before{display:none}
.step .pt{width:15px;height:15px;border-radius:50%;border:2px solid var(--line-strong);background:var(--card);flex:0 0 auto;margin-top:2px}
.step.done .pt{background:var(--success);border-color:var(--success)}
.step.current .pt{border-color:var(--gold);box-shadow:0 0 0 3px rgba(184,134,47,.18)}
.step .st{font-weight:600;font-size:13px}
.step .sd{font-size:11.5px;color:var(--ink-50)}
.kv{display:flex;justify-content:space-between;gap:14px;padding:9px 16px;font-size:13px}
.kv .k{color:var(--ink-50)}
.kv .v{font-weight:500;text-align:right}
.block-title{padding:12px 16px 4px}
.change-note{margin-top:16px;padding:14px 16px;border-radius:12px;background:var(--gold-soft);font-size:12px;color:#5c4a20;line-height:1.55}
body.dark-mode .change-note{color:var(--ink-70)}
.cancel-note{margin-top:16px;padding:14px 16px;border-radius:12px;background:var(--danger-soft);font-size:12.5px;color:var(--danger);line-height:1.55}

/* ---------- profil ---------- */
.profile-id{display:flex;align-items:center;gap:14px;padding:20px}
.profile-id .avatar{width:54px;height:54px;border-radius:50%;background:#0b1727;color:#fff;display:grid;place-items:center;font-family:Forum,serif;font-size:22px}
body.dark-mode .profile-id .avatar{background:var(--gold);color:#08111f}
.profile-id h3{font-size:19px}
.profile-id p{font-size:12px;color:var(--ink-50)}

/* ---------- mes trajets bureau (≥900px) : deux colonnes ---------- */
.d-body{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:900px){
  .d-body{grid-template-columns:1.15fr .85fr;align-items:start}
  .d-body .d-col h2{font-size:21px;margin-bottom:14px}
  .next-hero .when{font-size:27px}
}
@media(min-width:900px){.mobile-only{display:none}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}