.site-header {
  border-bottom: 1px solid var(--ink);
}
.site-header .outline {
  min-width: 44px;
  border-color: var(--line-strong);
  color: var(--on-dark);
}
.site-footer {
  font-size: .875rem;
}
#global-message:empty {
  display: none;
}
body[data-page] {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
body[data-page] #app {
  width: 100%;
  flex: 1;
}
.entry-panel {
  width: min(100%, 34rem);
  margin: clamp(1rem, 6vh, 5rem) auto;
  padding: clamp(1.2rem, 5vw, 2.25rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 1.5rem;
}
.entry-heading {
  margin-bottom: 1.7rem;
}
.entry-heading h1 {
  margin: .65rem 0 .55rem;
  font-size: clamp(3.2rem, 9vw, 4.3rem);
}
.entry-heading p, .vehicle-heading p {
  color: var(--muted);
  margin: 0;
}
.entry-mark, .drawer-mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border: 1px solid var(--accent-text);
  border-radius: 50%;
  background: var(--dark);
  color: var(--on-dark-accent);
  font: 2.05rem/1 var(--display);
}
.entry-back {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: 1.3rem;
  color: var(--ink);
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
}
.entry-back:hover {
  text-decoration: underline;
}
.entry-back svg, .entry-arrow svg, .drawer-link svg, .client-tabs svg,
.driver-tabs svg, .vehicle-section svg, .time-choice svg, .icon-button svg,
.entry-choice-icon svg, .map-preview-pin svg {
  width: 1.3rem;
  height: 1.3rem;
  flex: none;
}
.entry-choices {
  display: grid;
  gap: .75rem;
}
.entry-choice {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .85rem;
  padding: clamp(.85rem, 3vw, 1.15rem);
  background: var(--surface-2);
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: .9rem;
}
.entry-choice:hover {
  background: var(--surface-2);
  border-color: var(--line);
}
.entry-choice strong, .entry-choice small {
  display: block;
}
.entry-choice strong {
  font-size: 1.06rem;
}
.entry-choice small {
  margin-top: .2rem;
  line-height: 1.4;
}
.entry-choice-icon, .vehicle-heading-icon {
  display: grid;
  place-items: center;
  width: 2.65rem;
  height: 2.65rem;
  color: var(--ink);
  background: var(--surface-2);
  border-radius: .7rem;
}
.entry-arrow {
  color: var(--ink);
}

body:is([data-page="book"],[data-page="review"],[data-page="history"],[data-page="track"]) .site-footer {
  display: none;
}
body:is([data-page="book"],[data-page="review"],[data-page="history"],[data-page="track"]) #app {
  max-width: 72rem;
  padding-bottom: 6rem;
}
.booking-map {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: clamp(30rem, 68svh, 46rem);
  padding: clamp(.75rem, 2vw, 1.1rem);
  border-radius: 1.4rem;
  background: var(--surface-2);
}
.booking-map .map {
  position: absolute;
  inset: 0;
  height: 100%;
  z-index: 0;
  border-radius: inherit;
  background: var(--surface-2);
}
.booking-map .map img {
  filter: saturate(.77);
}
.booking-map .map[data-placing="true"] {
  cursor: crosshair;
}
.booking-map .map-label {
  right: .5rem;
  bottom: 5.55rem;
  max-width: 90%;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border-radius: .25rem;
  color: var(--ink);
  padding: .18rem .4rem;
  text-align: right;
  font-size: .66rem;
}
.map-view-fallback, .map-pattern {
  position: absolute;
  inset: 0;
}
.map-pattern {
  overflow: hidden;
  background:
    radial-gradient(ellipse at 74% 27%,var(--success-bg) 0 14%,transparent 14.4%),
    radial-gradient(ellipse at 22% 69%,var(--surface-2) 0 12%,transparent 12.4%),
    repeating-linear-gradient(23deg,transparent 0 45px,var(--surface) 46px 51px,transparent 52px 76px),
    repeating-linear-gradient(110deg,var(--surface-2) 0 51px,var(--surface-2) 52px 59px,var(--surface-2) 60px 100px);
}
.map-pattern span, .map-pattern i, .map-pattern b {
  position: absolute;
  border-radius: 50%;
  width: 76%;
  height: 58%;
  transform: rotate(-20deg);
}
.map-pattern span {
  top: 20%;
  left: -14%;
  border: .65rem solid transparent;
  border-bottom-color: #a3c8cb;
}
.map-pattern i {
  top: 16%;
  left: 15%;
  border: .28rem solid transparent;
  border-left-color: var(--line);
  border-top-color: var(--line);
}
.map-pattern b {
  top: 17%;
  right: -13%;
  border: .45rem solid transparent;
  border-right-color: var(--line);
  border-bottom-color: var(--line);
}
.map-preview-pin {
  position: absolute;
  z-index: 1;
  top: 59%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border: 3px solid var(--line);
  border-radius: 50%;
  background: var(--dark);
  color: var(--on-dark-accent);
  box-shadow: 0 .3rem .8rem var(--shadow-color);
}
.booking-map .pin {
  width: 1.9rem;
  height: 1.9rem;
  font-weight: 700;
}
.route-panel, .booking-modes {
  position: relative;
  width: min(100%, 32rem);
  align-self: center;
  background: var(--dark);
  color: var(--on-dark);
  border: 1px solid var(--ink);
  border-radius: 1rem;
  box-shadow: 0 .55rem 1.7rem var(--shadow-color);
}
.route-panel {
  padding: .7rem .85rem .65rem;
}
.route-heading {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: .25rem;
}
.route-heading h1, .client-content h1 {
  font: 700 clamp(1.2rem, 4vw, 1.55rem)/1.15 var(--text);
  letter-spacing: -.025em;
  margin: 0;
}
.client-content h1 {
  margin-bottom: 1rem;
}
.profile-label {
  margin-left: auto;
  color: var(--on-dark-accent);
  font-weight: 700;
  font-size: .72rem;
}
.icon-button {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
}
.route-heading .icon-button {
  background: var(--dark);
  color: var(--on-dark);
}
.route-field {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .23rem .25rem;
  min-width: 0;
}
.route-field.to,
.address-results:empty + .route-field {
  border-top: 1px solid var(--ink);
}
.route-dot {
  width: .82rem;
  height: .82rem;
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--line);
}
.route-dot.to {
  border-color: var(--accent);
}
.route-input {
  display: grid;
  min-width: 0;
  flex: 1;
}
.route-input > span {
  padding-left: .45rem;
  color: var(--on-dark);
  font-weight: 600;
  font-size: .73rem;
}
.route-input input {
  width: 100%;
  border: 0;
  min-height: 2.45rem;
  border-radius: .35rem;
  background: transparent;
  color: var(--on-dark);
  padding: .1rem .45rem;
  font-size: 1rem;
  font-weight: 600;
}
.route-input input::placeholder {
  color: var(--on-dark-muted);
  opacity: 1;
}
.address-results:not(:empty) {
  padding: .25rem 0 .5rem 1.7rem;
}
.address-results .chips {
  display: grid;
  gap: .25rem;
  max-height: 10.5rem;
  overflow: auto;
}
.address-results button {
  justify-content: flex-start;
  text-align: left;
  font-size: .8rem;
}
.address-results small {
  color: var(--on-dark);
}
.map-controls {
  position: relative;
  display: flex;
  gap: .5rem;
  align-self: flex-end;
  margin: auto 0 1rem;
}
.map-controls .locate, .map-controls summary {
  background: var(--dark);
  color: var(--on-dark-accent);
  box-shadow: 0 .35rem .9rem var(--shadow-color);
}
.map-picker {
  margin: 0;
}
.map-picker summary {
  border-radius: .7rem;
}
.map-picker summary::-webkit-details-marker {
  display: none;
}
.map-picker > div {
  position: absolute;
  right: 0;
  bottom: calc(100% + .45rem);
  display: grid;
  width: max-content;
  gap: .25rem;
  padding: .4rem;
  border-radius: .75rem;
  background: var(--surface);
  box-shadow: 0 .35rem .9rem var(--shadow-color);
}
.map-message:empty {
  display: none;
}
.map-message {
  position: relative;
  align-self: center;
  background: var(--surface);
  color: var(--ink);
  padding: .45rem .65rem;
  margin: 0 0 .5rem;
  border-radius: .4rem;
  font-size: .83rem;
}
.booking-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: .3rem;
}
.time-choice {
  justify-content: flex-start;
  text-align: left;
  background: transparent;
  color: var(--on-dark-accent);
  padding: .55rem .6rem;
  min-width: 0;
  min-height: 3.65rem;
}
.time-choice + .time-choice {
  border-left: 1px solid var(--ink);
}
.time-choice:not(:disabled):hover, .time-choice[aria-pressed="true"] {
  background: var(--dark);
}
.time-choice:disabled {
  cursor: default;
}
.time-choice small, .time-choice strong {
  display: block;
}
.time-choice small {
  color: var(--on-dark);
  font-size: .73rem;
  font-weight: 500;
}
.booking-details, .client-content {
  width: min(100%, 37rem);
  margin: 1rem auto 0;
  scroll-margin-top: .8rem;
}
.booking-details-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .8rem;
}
.booking-details-head h2 {
  font-size: clamp(1.8rem,5vw,2.45rem);
  margin-bottom: 0;
}

.client-tabs {
  position: fixed;
  bottom: 0;
  left: 50%;
  z-index: 3;
  transform: translateX(-50%);
  width: min(100%, 38rem);
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
  padding: .4rem .6rem max(.55rem,env(safe-area-inset-bottom));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 1rem 1rem 0 0;
  box-shadow: 0 -.35rem 1.65rem var(--shadow-color);
}
.client-tab {
  background: transparent;
  color: var(--ink);
  min-height: 2.9rem;
}
.client-tab:hover, .client-tab[aria-current="page"] {
  background: var(--surface-2);
  color: var(--ink);
}
#client-drawer {
  position: fixed;
  inset: 0 auto 0 0;
  margin: 0;
  width: min(88vw, 23rem);
  max-width: none;
  height: 100%;
  max-height: none;
  padding: 0;
  border: 0;
  background: var(--dark);
  color: var(--on-dark);
}
#client-drawer::backdrop {
  background: var(--backdrop);
}
.drawer-top {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: max(1rem,env(safe-area-inset-top)) .85rem 1.4rem;
  padding-top: max(1.4rem,env(safe-area-inset-top));
  border-bottom: 1px solid var(--ink);
  background: var(--dark);
}
.drawer-top h2 {
  font: 700 clamp(.95rem,4vw,1.12rem)/1.2 var(--text);
  margin: 0 0 .25rem;
}
.drawer-top p {
  margin: 0;
  color: var(--on-dark-accent);
  font-size: .8rem;
}
.drawer-mark {
  width: 2.8rem;
  height: 2.8rem;
  font-size: 1.75rem;
}
.drawer-close {
  margin-left: auto;
  background: var(--dark);
  color: var(--on-dark);
}
.drawer-nav {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  justify-content: stretch;
  align-items: stretch;
  gap: .2rem;
  margin: 0;
  padding: .65rem .6rem;
}
.drawer-link {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: .75rem;
  text-decoration: none;
  background: transparent;
  color: inherit;
  padding: .65rem .75rem;
  min-height: 3.2rem;
  border-radius: .55rem;
  text-align: left;
  font-weight: 700;
}
.drawer-link[aria-current="page"], .drawer-link:hover {
  background: var(--dark);
  color: var(--on-dark-accent);
}
.drawer-home {
  border-top: 1px solid var(--ink);
  margin-top: .5rem;
}

.driver-login {
  max-width: 29rem;
  margin-top: clamp(1rem,6vh,5rem);
}
.driver-login .entry-back {
  margin: 1rem 0 0;
}
.driver-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
}
.driver-top h1 {
  margin-bottom: 0;
}
.driver-top button {
  padding-inline: .65rem;
  font-size: .83rem;
}
.driver-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .35rem;
  margin: 1rem 0;
  padding: .3rem;
  border: 1px solid var(--line);
  border-radius: .8rem;
  background: var(--surface-2);
}
.driver-tab {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .45rem;
  min-height: 2.75rem;
  padding: .45rem;
  border-radius: .58rem;
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
}
.driver-tab[aria-current="page"] {
  background: var(--dark);
  color: var(--on-dark);
}
.driver-tab:not([aria-current]):hover {
  background: var(--surface-2);
}
.vehicle-section {
  margin: 1.65rem 0 .3rem;
}
.vehicle-offer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .35rem 1rem;
  padding: .45rem .8rem;
  border-radius: .65rem;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: .875rem;
}
.vehicle-offer a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--ink);
  font-weight: 700;
}
.vehicle-heading {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-bottom: 1.3rem;
}
.vehicle-heading h2 {
  margin: 0 0 .25rem;
  font-size: clamp(1.9rem,5vw,2.55rem);
}
.vehicle-heading p {
  font-size: .875rem;
}
.vehicle-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.vehicle-grid label > span {
  display: flex;
  align-items: center;
  gap: .38rem;
}
.vehicle-grid label svg {
  color: var(--muted);
  width: 1rem;
  height: 1rem;
}
#vehicle-status:not(:empty) {
  display: block;
  margin-top: 1rem;
  color: var(--ink);
  font-weight: 700;
}
@media(max-width: 650px) {
  body[data-page="book"] #app {
    padding: 0 0 calc(3.75rem + env(safe-area-inset-bottom));
    min-height: 0;
  }
  body[data-page="book"] #global-message {
    padding-inline: .75rem;
  }
  .booking-map {
    min-height: max(28.7rem,calc(100svh - 7.35rem - env(safe-area-inset-bottom)));
    border-radius: 0;
  }
  .booking-details {
    width: calc(100% - 1.4rem);
  }
  .booking-details input, .booking-details select, .booking-details textarea {
    font-size: 1rem;
  }
  .map-controls {
    margin-bottom: 1.3rem;
  }
  .site-header {
    min-height: 3.5rem;
    padding-block: .4rem;
  }
  .site-header .logo {
    width: 2.2rem;
    height: 2.2rem;
    font-size: 1.45rem;
  }
}
@media(max-width: 490px) {
  .vehicle-grid {
    grid-template-columns: 1fr;
  }
  .route-panel {
    padding-inline: .55rem;
  }
}
@media(max-width: 365px) {
  .time-choice {
    gap: .3rem;
    padding-inline: .35rem;
    font-size: .88rem;
  }
  .entry-choice {
    gap: .55rem;
  }
}
/* Comptes : connexion, inscription, profil */
.account-panel .entry-heading h1 {
  font-size: clamp(2.5rem, 8vw, 3.4rem);
}
.account-form {
  display: grid;
  gap: .9rem;
  margin-top: 1rem;
  padding: clamp(1rem, 4vw, 1.4rem);
  border-radius: 1.1rem;
}
.account-form h2 {
  margin: 0;
  font-size: 1.9rem;
}
.account-form label > span {
  font-weight: 700;
}
.account-form .primary {
  margin-top: .2rem;
}
.account-status:empty {
  display: none;
}
.account-status {
  margin: 0;
  padding: .75rem;
  border-radius: .65rem;
  background: var(--surface-2);
  font-size: .92rem;
}
.account-status.error {
  background: var(--danger-bg);
}
.account-links, .account-hint, .entry-account {
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
}
.entry-account {
  margin-top: 1.2rem;
}
.account-links a, .entry-account a, .account-form .notice a {
  color: var(--ink);
  font-weight: 700;
}
.account-alternatives {
  display: grid;
  gap: .9rem;
  margin-top: 1.2rem;
}
.account-alternatives .button, .account-alternatives button {
  width: 100%;
  justify-content: center;
}
.account-guest {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 44px;
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}
.account-guest:hover {
  text-decoration: underline;
}
.account-guest svg {
  width: 1.2rem;
  height: 1.2rem;
}
/* Équipe (gérant) et suppression de compte */
.team-section {
  margin-top: 1.2rem;
}
.team-member {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
}
.team-member p {
  margin: 0 0 .2rem;
  overflow-wrap: anywhere;
}
.team-member small {
  font-weight: 400;
}
.team-disabled {
  opacity: .65;
}
.team-form {
  display: grid;
  gap: .8rem;
}
.driver-login form {
  display: grid;
  gap: .8rem;
}
.account-delete {
  margin-top: 1.4rem;
  color: var(--muted);
  font-size: .9rem;
}
.account-delete summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.account-delete .primary {
  background: var(--danger-bg);
}
/* Spécificités d'une course et entreprises */
.ride-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0 0 .7rem;
}
.ride-tag {
  display: inline-flex;
  align-items: center;
  min-height: 1.7rem;
  padding: .15rem .65rem;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink);
  font-size: .82rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.ride-tag-pdm {
  background: var(--pdm-bg);
  color: var(--pdm);
  letter-spacing: .04em;
}
.ride-tag-alert {
  background: var(--danger-bg);
  color: var(--danger);
}
.ride-card-top .ride-tags {
  margin: 0;
}
.company-card h3 {
  margin-bottom: .3rem;
}
.company-pending {
  border-color: var(--accent);
}
.company-suspended {
  opacity: .7;
}
.company-members {
  margin: 0 0 .8rem;
  padding-left: 1.1rem;
  overflow-wrap: anywhere;
}
/* Relevé mensuel, à l'écran et à l'impression */
.statement {
  margin-top: 1.2rem;
}
.statement-page {
  max-width: 50rem;
  margin: 1rem auto;
}
.statement-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 0;
  margin: 1.2rem 0 1rem;
  background: none;
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
}
.statement-head h2 {
  margin: 0;
  font-size: 2.1rem;
}
.statement-head p {
  margin: .2rem 0 .7rem;
  color: var(--muted);
}
.statement-mark {
  font: 1.5rem var(--display);
  color: var(--accent-text) !important;
  text-align: right;
}
.statement-parties {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.2rem;
}
.statement-party h3 {
  margin: 0 0 .35rem;
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.statement-party p {
  margin: 0;
  font-size: .92rem;
  overflow-wrap: anywhere;
}
.statement-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
.statement-table th, .statement-table td {
  padding: .55rem .4rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.statement-table th {
  font-size: .78rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}
.statement-table td:first-child {
  white-space: nowrap;
}
.statement-table tfoot td {
  border-top: 2px solid var(--ink);
  border-bottom: 0;
  font-weight: 700;
}
.statement-amount {
  text-align: right !important;
  white-space: nowrap;
}
.statement-missing {
  color: var(--danger);
  font-weight: 700;
}
.statement-foot {
  margin: .8rem 0 0;
  color: var(--muted);
  font-size: .85rem;
}
@media (max-width: 34rem) {
  .statement-parties {
    grid-template-columns: 1fr;
  }
}
@media print {
  .site-header, .site-footer, .driver-top, .driver-tabs, .statement-tools, .vehicle-offer, #global-message, .client-tabs, #lang {
    display: none !important;
  }
  body, body[data-page] #app, main {
    background: var(--surface);
    padding: 0;
    margin: 0;
    max-width: none;
  }
  .panel, .driver-shell, .statement-page {
    border: 0;
    padding: 0;
    margin: 0;
    max-width: none;
    background: var(--surface);
  }
  .statement-table tr {
    break-inside: avoid;
  }
  .statement-settled {
    display: block !important;
    background: none;
    padding: 0;
    font-weight: 700;
  }
}
/* Attribution : file d'attente, en service, chauffeur attribué */
.tab-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.4rem;
  height: 1.4rem;
  margin-left: .35rem;
  padding: 0 .35rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: .78rem;
  font-weight: 700;
}
.duty-on::before, .duty-off::before {
  content: "";
  width: .6rem;
  height: .6rem;
  margin-right: .45rem;
  border-radius: 50%;
  background: var(--success-fill);
}
.duty-off::before {
  background: var(--surface-3);
}
.ride-wait {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ride-driver {
  line-height: 1.5;
}
.ride-plate {
  display: inline-block;
  margin-top: .25rem;
  padding: .1rem .55rem;
  border: 1px solid var(--ink);
  border-radius: .35rem;
  background: var(--surface);
  font-weight: 700;
  letter-spacing: .06em;
}
/* Espace administrateur */
.admin-shell {
  max-width: 64rem;
}
.admin-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: .7rem;
  margin: 1rem 0;
}
.admin-tile {
  display: grid;
  gap: .2rem;
  padding: .9rem;
  border: 1px solid var(--line);
  border-radius: .9rem;
  background: var(--surface);
}
.admin-tile strong {
  font-size: 1.7rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.admin-tile span {
  color: var(--muted);
  font-size: .85rem;
}
.admin-tile-alert {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.admin-team {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .45rem;
}
.duty-dot {
  display: inline-block;
  width: .6rem;
  height: .6rem;
  margin-right: .45rem;
  border-radius: 50%;
  background: var(--surface-3);
}
.duty-dot-on {
  background: var(--success-fill);
}
.admin-filter {
  display: grid;
  gap: .7rem;
  margin: 1rem 0;
}
.admin-ride {
  border: 1px solid var(--line);
  border-radius: .9rem;
  background: var(--surface);
  margin-top: .6rem;
  padding: .2rem .8rem;
}
.admin-ride > summary {
  display: grid;
  grid-template-columns: 9.5rem 9rem 1fr auto;
  gap: .3rem .8rem;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
  font-size: .92rem;
}
.admin-ride-when {
  font-weight: 700;
}
.admin-ride-route {
  overflow-wrap: anywhere;
}
.admin-ride[open] {
  padding-bottom: .8rem;
}
.admin-assign {
  margin: .6rem 0;
  align-items: end;
}
@media (max-width: 46rem) {
  .admin-ride > summary {
    grid-template-columns: 1fr 1fr;
    padding: .45rem 0;
  }
  .admin-ride-route {
    grid-column: 1 / -1;
  }
}
/* Lot 5D/5E : historique chauffeur, fiche en trois pages, avis client, theme nuit */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.ride-eta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin: .6rem 0 0;
}
.ride-eta select {
  width: auto;
  min-width: 7rem;
}
.ride-review {
  color: var(--accent-text);
  font-weight: 700;
}
.ride-gps {
  margin: .4rem 0;
}
.notify-on::before {
  content: "";
  width: .6rem;
  height: .6rem;
  margin-right: .45rem;
  border-radius: 50%;
  background: var(--success-fill);
}
.history-day {
  margin: 1.1rem 0 .4rem;
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.history-day::first-letter {
  text-transform: uppercase;
}
.history-row {
  display: grid;
  grid-template-columns: 3.4rem 1fr auto;
  grid-template-areas: "time kind tag" "time from tag" "time name tag";
  align-items: center;
  gap: .1rem .75rem;
  width: 100%;
  min-height: 4.2rem;
  margin: .4rem 0;
  padding: .65rem .8rem .65rem 1rem;
  border: 1px solid var(--line);
  border-left: .4rem solid var(--immediate, var(--success));
  border-radius: .8rem;
  background: var(--surface, var(--surface));
  color: var(--ink);
  font-weight: 400;
  text-align: left;
  justify-content: stretch;
}
.history-reserved {
  border-left-color: var(--reserved, var(--accent-text));
}
.history-time {
  grid-area: time;
  font-size: 1.15rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.history-kind {
  grid-area: kind;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--immediate, var(--success));
}
.history-reserved .history-kind {
  color: var(--reserved, var(--accent-text));
}
.history-row strong {
  grid-area: from;
  overflow-wrap: anywhere;
}
.history-name {
  grid-area: name;
  color: var(--muted);
  font-size: .88rem;
}
.history-row .ride-tag {
  grid-area: tag;
}
.ride-sheet {
  width: min(calc(100% - 1.5rem), 32rem);
  max-height: calc(100dvh - 2rem);
  border: 1px solid var(--line);
  border-radius: 1rem;
  padding: 1rem;
  color: var(--ink);
  background: var(--surface, var(--surface));
  overflow-wrap: anywhere;
}
.ride-sheet::backdrop {
  background: var(--backdrop);
}
.sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  margin-bottom: .6rem;
}
.sheet-pages {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.sheet-pages::-webkit-scrollbar {
  display: none;
}
.sheet-page {
  flex: 0 0 100%;
  scroll-snap-align: start;
  min-width: 0;
  padding: .2rem .1rem .6rem;
}
.sheet-page h3 {
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.sheet-label {
  margin: .8rem 0 .15rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}
.sheet-address {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.35;
}
.sheet-log {
  margin: 0;
}
.sheet-log div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .42rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .92rem;
}
.sheet-log dt {
  color: var(--muted);
}
.sheet-log dd {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.sheet-dots {
  display: flex;
  justify-content: center;
  gap: .45rem;
  margin: .5rem 0 .2rem;
}
.sheet-dots span {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--line);
}
.sheet-dots .on {
  width: 1.3rem;
  border-radius: 999px;
  background: var(--accent);
}
/* Espace client : heure d'arrivee, avis, mes courses */
.ride-arrival {
  display: inline-block;
  margin-top: .35rem;
  font-size: 1.1rem;
  font-weight: 700;
}
.review-box {
  margin: 1rem 0;
  padding: 1rem;
  border: 1px solid var(--accent);
  border-radius: 1rem;
  background: var(--accent-soft);
}
.review-box h2 {
  font-size: 1.7rem;
  margin-bottom: .6rem;
}
.review-box form {
  display: grid;
  gap: .8rem;
}
.stars {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem;
  border: 0;
  padding: 0;
}
.stars legend {
  padding: 0;
  margin-bottom: .3rem;
}
.star {
  position: relative;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  font-size: 2.3rem;
  line-height: 1;
  color: var(--on-dark-muted);
  cursor: pointer;
}
.star input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.star:has(input:checked), .star:has(~ .star input:checked) {
  color: var(--accent-text);
}
.star:has(input:focus-visible) {
  outline: 3px solid var(--accent-text);
  outline-offset: 2px;
  border-radius: .5rem;
}
.review-stars {
  font-size: 1.8rem;
  line-height: 1;
  color: var(--accent-text);
}
.review-stars span {
  color: var(--on-dark-muted);
}
.review-google {
  width: 100%;
}
.review-page {
  max-width: 36rem;
  margin: 1rem auto;
}
.history-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .4rem;
  margin: .8rem 0;
  padding: .3rem;
  border-radius: .9rem;
  background: var(--surface-2);
}
.history-tab {
  background: transparent;
  color: var(--ink);
  border-radius: .65rem;
}
.history-tab[aria-selected="true"] {
  background: var(--fill);
  color: var(--on-fill);
}
.client-ride-top {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: .5rem;
  font-size: .875rem;
}


/* Lot 6A : carte qui se glisse et se zoome, resume client court */
.booking-map .map {
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.booking-map .map[data-dragging="true"] {
  cursor: grabbing;
}
.map-layer {
  position: absolute;
  inset: 0;
  will-change: transform;
}
.map-zoom {
  display: grid;
  gap: .3rem;
}
.map-zoom button {
  background: var(--surface);
  color: var(--ink);
  font-size: 1.4rem;
  line-height: 1;
  box-shadow: 0 .35rem .9rem var(--shadow-color);
}
.map-controls {
  align-items: flex-end;
}
.ride-brief {
  margin: .8rem 0;
  display: grid;
  gap: .5rem;
}
.ride-brief div {
  display: grid;
  gap: .1rem;
}
.ride-brief dt {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}
.ride-brief dd {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.ride-brief .ride-brief-price {
  font-size: 1.5rem;
}
.client-steps {
  list-style: none;
  margin: .6rem 0;
  padding: 0;
  font-size: .92rem;
}
.client-steps li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .35rem 0;
  border-bottom: 1px solid var(--line);
}
.client-steps time {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  white-space: nowrap;
}
.history-more {
  margin: .8rem 0 0;
  color: var(--muted);
  font-size: .88rem;
}
/* Lots 6B a 6D : recapitulatif, supplements, ticket, archives */
.supplement-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: .6rem;
}
.ride-receipt {
  margin: .6rem 0;
  padding-top: .4rem;
  border-top: 1px solid var(--line);
}
.receipt-pick {
  position: relative;
  cursor: pointer;
}
.ride-tag-ok {
  background: var(--success-bg);
  color: var(--success);
}
.review-list, .request-list {
  list-style: none;
  margin: .5rem 0;
  padding: 0;
  display: grid;
  gap: .5rem;
}
.review-list li, .request-list li {
  padding: .7rem .8rem;
  border: 1px solid var(--line);
  border-radius: .8rem;
  background: var(--surface, var(--surface));
  display: grid;
  gap: .2rem;
}
.review-list p {
  margin: 0;
}
.request-list small {
  color: var(--muted);
}
.period-browser h3 {
  margin-bottom: .3rem;
}
.period-trail {
  margin: 0 0 .6rem;
  color: var(--muted);
}
.link-button {
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
}
.period-row {
  display: grid;
  grid-template-columns: minmax(8rem, 1.2fr) 2fr auto;
  align-items: center;
  gap: .3rem .9rem;
  width: 100%;
  margin: .3rem 0;
  padding: .55rem .8rem;
  border: 1px solid var(--line);
  border-radius: .7rem;
  background: var(--surface);
  color: var(--ink);
  font-weight: 400;
  text-align: left;
}
.period-row strong::first-letter {
  text-transform: uppercase;
}
.period-row span {
  color: var(--muted);
  font-size: .9rem;
}
.period-on {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.period-amount {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (max-width: 34rem) {
  .period-row {
    grid-template-columns: 1fr auto;
  }
  .period-row span:not(.period-amount) {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}


/* ——— Socle Guidero (lot G1) ——— */
.header-tools {
  display: flex;
  gap: .5rem;
}
#theme {
  min-width: 44px;
  padding-inline: 0;
  font-size: 1.15rem;
}
button, .button {
  border-radius: 14px;
  transition: transform .12s ease, background-color .12s ease, border-color .12s ease;
}
button:active:not(:disabled), .button:active {
  transform: scale(.98);
}
/* L'action principale d'un écran est corail ; les autres boutons pleins restent sombres. */
.primary, .ride-primary {
  background: var(--action);
  color: var(--on-action);
}
.driver-tab[aria-current="page"], .history-tab[aria-selected="true"] {
  background: var(--fill);
  color: var(--on-fill);
}
.panel, .card, .ride-card, .admin-tile {
  border-radius: var(--radius);
}
:focus-visible {
  outline-color: var(--action-text);
}
/* Feuille basse : panneau qui remonte du bas de l'écran, à tirer par sa poignée. */
.sheet {
  position: relative;
  background: var(--surface);
  color: var(--ink);
  border-radius: 24px 24px 0 0;
  padding: .6rem 1rem 1rem;
  box-shadow: 0 -.5rem 1.5rem var(--shadow-color);
  animation: sheet-up .35s ease both;
}
.sheet::before {
  content: "";
  display: block;
  width: 2.75rem;
  height: .3rem;
  margin: 0 auto .75rem;
  border-radius: 999px;
  background: var(--line-strong);
}
/* Barre d'onglets basse, pour le pouce. */
.tabbar {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: .35rem .25rem calc(.5rem + env(safe-area-inset-bottom));
}
.tabbar a, .tabbar button {
  display: grid;
  justify-items: center;
  gap: .15rem;
  min-height: 3rem;
  padding: .25rem;
  border: 0;
  border-radius: .8rem;
  background: none;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 700;
  text-decoration: none;
}
.tabbar [aria-current="page"], .tabbar [aria-selected="true"] {
  color: var(--ink);
  background: var(--surface-2);
}
/* Squelette de chargement : une forme grise à la place du contenu qui arrive. */
.skeleton {
  min-height: 1rem;
  border-radius: .5rem;
  color: transparent;
  background: var(--surface-2);
  animation: skeleton-pulse 1.2s ease-in-out infinite alternate;
}
/* Fenêtres : même forme pour l'alerte de course, la fiche et les confirmations. */
dialog {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
}
dialog::backdrop {
  background: var(--backdrop);
}
dialog[open] {
  animation: sheet-up .25s ease both;
}
/* Un changement d'état de course se remarque sans distraire. */
.ride-state {
  animation: state-in .4s ease both;
}
@keyframes sheet-up {
  from { transform: translateY(1.5rem); opacity: 0; }
}
@keyframes skeleton-pulse {
  to { background: var(--surface-3); }
}
@keyframes state-in {
  from { opacity: .2; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}
/* Les tuiles du plan ressortent trop en thème nuit : elles sont assombries. */
:root[data-theme="night"] .map img {
  filter: brightness(.72) saturate(.7) contrast(1.05);
}

/* ——— Lot G2 : espace client, carte plein écran et feuille basse ——— */
body[data-page="book"] #app {
  max-width: none;
  padding: 0 0 calc(3.9rem + env(safe-area-inset-bottom));
}
body[data-page="book"] #global-message:not(:empty) {
  position: fixed;
  z-index: 6;
  top: 4.2rem;
  left: .75rem;
  right: .75rem;
}
.booking-home {
  min-height: max(34rem, calc(100svh - 7.6rem - env(safe-area-inset-bottom)));
  padding: 0;
  border-radius: 0;
  background: var(--surface-2);
}
.booking-home .map {
  border-radius: 0;
}
.map-top {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  padding: .75rem;
  pointer-events: none;
}
.map-top > * {
  pointer-events: auto;
}
.map-top .icon-button, .booking-home .map-zoom button {
  background: var(--surface);
  color: var(--ink);
  border-radius: 50%;
  box-shadow: 0 .3rem .9rem var(--shadow-color);
}
.map-top .profile-label {
  padding: .35rem .8rem;
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: .8rem;
  font-weight: 700;
  box-shadow: 0 .3rem .9rem var(--shadow-color);
}
.booking-home .map-controls {
  margin: auto .75rem .75rem auto;
}
.booking-home .map-controls .locate, .booking-home .map-controls summary {
  border-radius: 50%;
  background: var(--fill);
  color: var(--on-fill);
}
.booking-home .map-message {
  margin: 0 .75rem .5rem;
  align-self: stretch;
  text-align: center;
  border-radius: .8rem;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 .3rem .9rem var(--shadow-color);
}
.booking-sheet {
  width: min(100%, 36rem);
  margin: 0 auto;
}
.booking-sheet h1 {
  font: 700 1.55rem/1.15 var(--display);
  letter-spacing: -.02em;
  margin-bottom: .7rem;
}
.when-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .25rem;
  padding: .25rem;
  margin-bottom: .7rem;
  border-radius: 999px;
  background: var(--surface-2);
}
.when-toggle button {
  min-height: 2.6rem;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
}
.when-toggle button[aria-pressed="true"] {
  background: var(--fill);
  color: var(--on-fill);
}
.when-toggle button:disabled {
  color: var(--muted);
  cursor: not-allowed;
}
.when-note {
  margin: -.3rem 0 .6rem;
  font-size: .85rem;
}
.booking-sheet .route-field {
  margin-bottom: .45rem;
  padding: .3rem .8rem;
  border: 0;
  border-radius: 14px;
  background: var(--surface-2);
}
.booking-sheet .route-dot {
  border: 0;
  background: var(--ink);
}
.booking-sheet .route-dot.to {
  border-radius: 3px;
  background: var(--action);
}
.booking-sheet .route-input > span {
  color: var(--muted);
}
.booking-sheet .route-input input {
  min-height: 2.1rem;
  color: var(--ink);
}
.booking-sheet .route-input input::placeholder, .booking-sheet .address-results small {
  color: var(--muted);
}
.booking-sheet .address-results:not(:empty) {
  padding: 0 0 .45rem;
}
.place-chips {
  display: flex;
  gap: .4rem;
  margin: .55rem 0 .8rem;
  padding-bottom: .15rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.place-chips::-webkit-scrollbar {
  display: none;
}
.place-chip {
  flex: none;
  min-height: 2.3rem;
  max-width: 14rem;
  padding: 0 .9rem;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink);
  font-size: .86rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.place-empty {
  background: transparent;
  border: 1px dashed var(--line-strong);
  color: var(--muted);
}
.places-edit {
  margin: -.3rem 0 .6rem;
  font-size: .88rem;
}
.places-edit p {
  margin: .25rem 0;
  overflow-wrap: anywhere;
}
.booking-sheet .primary {
  margin-top: 0;
  min-height: 3.4rem;
  font-size: 1.05rem;
}
/* Étapes 2 et 3 : détails puis confirmation */
body[data-page="book"] .booking-details {
  margin: .8rem auto 0;
  padding-bottom: 0;
}
.booking-details-head {
  justify-content: flex-start;
}
.booking-details-head h1, .booking-details-head h2 {
  flex: 1;
  margin: 0;
  font-size: clamp(1.35rem, 5vw, 1.8rem);
}
.step-label {
  flex: none;
  padding: .2rem .65rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: .8rem;
  font-weight: 700;
}
.order-recap {
  display: grid;
  gap: .1rem;
  margin: 0 0 .9rem;
  padding: .7rem .9rem;
  border-radius: 14px;
  background: var(--surface-2);
  overflow-wrap: anywhere;
}
.order-recap small {
  color: var(--muted);
}
.order-bar {
  position: sticky;
  bottom: calc(3.9rem + env(safe-area-inset-bottom));
  z-index: 2;
  display: grid;
  gap: .5rem;
  margin: 1rem -.4rem 0;
  padding: .8rem .4rem;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.order-bar .primary {
  margin-top: 0;
}
.order-bar .price {
  font-family: var(--display);
}
.client-tabs {
  grid-template-columns: repeat(3, 1fr);
}
/* Suivi : carte de la position du chauffeur */
.track-map {
  position: relative;
  height: 13rem;
  margin: .8rem 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
}
.track-map img {
  position: absolute;
  width: 256px;
  height: 256px;
  max-width: none;
}
.track-map .map-label {
  position: absolute;
  right: .3rem;
  bottom: .3rem;
  padding: .1rem .35rem;
  border-radius: .25rem;
  background: var(--surface);
  font-size: .62rem;
}
.track-car {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.4rem;
  height: 1.4rem;
  margin: -.7rem 0 0 -.7rem;
  border: .25rem solid var(--surface);
  border-radius: 50%;
  background: var(--action);
  box-shadow: 0 0 0 .6rem color-mix(in srgb, var(--action) 25%, transparent);
}
:root[data-theme="night"] .track-map img {
  filter: brightness(.72) saturate(.7) contrast(1.05);
}
.client-content h1 {
  font-size: clamp(1.7rem, 6vw, 2.3rem);
}
.history-tabs-3 {
  grid-template-columns: repeat(3, 1fr);
}
.history-tabs-3 .history-tab {
  padding-inline: .4rem;
  font-size: .9rem;
}
.client-follow {
  grid-template-columns: repeat(2, 1fr);
}
.booking-sheet .address-results + .route-field, .booking-sheet .route-field.to {
  border-top: 0;
}
.client-tabs {
  gap: .25rem;
}
.client-tab {
  padding-inline: .3rem;
  font-size: .92rem;
  white-space: nowrap;
}

/* ——— Lot G3 : espace chauffeur ——— */
/* Onglets en bas de l'écran, à portée de pouce (l'administration garde ses onglets en haut). */
body[data-page="driver"] .driver-tabs:not(.admin-tabs) {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 4;
  transform: translateX(-50%);
  width: min(100%, 40rem);
  margin: 0;
  grid-template-columns: repeat(4, 1fr);
  gap: .2rem;
  padding: .35rem .35rem max(.5rem, env(safe-area-inset-bottom));
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 1rem 1rem 0 0;
  background: var(--surface);
  box-shadow: 0 -.4rem 1.2rem var(--shadow-color);
}
body[data-page="driver"] .driver-tabs:not(.admin-tabs) .driver-tab {
  flex-direction: column;
  gap: .1rem;
  min-height: 3.1rem;
  padding: .2rem;
  font-size: .76rem;
  position: relative;
}
body[data-page="driver"] .driver-tabs:not(.admin-tabs) .tab-count {
  position: absolute;
  top: .1rem;
  right: 18%;
  margin: 0;
}
body[data-page="driver"] .driver-shell:not(.admin-shell) {
  padding-bottom: 5.5rem;
}
body[data-page="driver"]:has(.driver-tabs:not(.admin-tabs)) .site-footer {
  display: none;
}
/* Grand interrupteur de disponibilité */
.duty-switch {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 4.6rem;
  margin: .2rem 0 .8rem;
  padding: .7rem 1rem;
  border-radius: 1.2rem;
  background: var(--surface-2);
  color: var(--ink);
  text-align: left;
  font: 600 1.25rem var(--display);
}
.duty-switch small {
  display: block;
  margin-top: .15rem;
  color: var(--muted);
  font: 400 .85rem var(--text);
}
.duty-switch i {
  position: relative;
  flex: none;
  width: 3.6rem;
  height: 2.1rem;
  border-radius: 999px;
  background: var(--line-strong);
  transition: background-color .15s ease;
}
.duty-switch i::after {
  content: "";
  position: absolute;
  top: .25rem;
  left: .25rem;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--surface);
  transition: transform .15s ease;
}
.duty-switch-on {
  background: var(--success-bg);
  color: var(--success);
}
.duty-switch-on small {
  color: var(--success);
}
.duty-switch-on i {
  background: var(--success-fill);
}
.duty-switch-on i::after {
  transform: translateX(1.5rem);
}
/* Bouton à glisser */
.swipe {
  --swipe: 0;
  position: relative;
  flex: 1 1 100%;
  width: 100%;
  height: 3.8rem;
  padding: .25rem;
  border-radius: 999px;
  background: var(--fill);
  color: var(--on-fill);
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  overflow: hidden;
}
.swipe-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-left: 3.2rem;
  font-weight: 700;
  opacity: calc(1 - var(--swipe) * 1.4);
  pointer-events: none;
}
.swipe-thumb {
  position: relative;
  z-index: 1;
  width: 3.3rem;
  height: 3.3rem;
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  background: var(--action);
  color: var(--on-action);
  font-size: 1.8rem;
  line-height: 1;
  cursor: grab;
  touch-action: none;
}
.swipe-done .swipe-thumb {
  background: var(--success-fill);
}
.swipe-hint .swipe-thumb {
  animation: swipe-nudge .5s ease;
}
@keyframes swipe-nudge {
  40% { transform: translateX(1.6rem); }
}
.ride-offer-buttons {
  grid-template-columns: 1fr;
}
/* Choix de période et graphique */
.period-levels .history-tab[aria-pressed="true"] {
  background: var(--fill);
  color: var(--on-fill);
}
.period-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .6rem;
  margin: .2rem 0 .8rem;
}
.period-nav strong {
  font: 600 1.05rem var(--display);
  text-align: center;
}
.period-nav strong::first-letter {
  text-transform: uppercase;
}
.period-nav .icon-button {
  font-size: 1.5rem;
  border-radius: 50%;
}
.bars {
  margin: .8rem 0 1rem;
}
.bars-plot {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 6.5rem;
  padding: .4rem .4rem 0;
  border-radius: var(--radius-small);
  background: var(--surface-2);
}
.bar {
  flex: 1;
  min-width: 2px;
  border-radius: 4px 4px 0 0;
  background: var(--action);
}
.bars figcaption {
  margin-top: .35rem;
  color: var(--muted);
  font-size: .82rem;
}

/* ——— Lot G4 : tableau de bord du gérant ——— */
.stat-change {
  display: block;
  margin-top: .2rem;
  color: var(--muted);
  font-size: .78rem;
}
.stat-up {
  color: var(--success);
}
.stat-down {
  color: var(--danger);
}
.admin-tile strong {
  font-family: var(--display);
}
.driver-stats {
  margin-bottom: 1rem;
}
.driver-stats .team-section {
  margin-top: 0;
}

/* ——— Lot G5 : aperçu des e-mails ——— */
.mail-sample iframe {
  display: block;
  width: 100%;
  height: 34rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: #FFF9F2;
}

/* ——— Lot G6 : marque Guidero ——— */
.logo-mark {
  width: 2.2rem;
  height: 2.2rem;
  flex: none;
}
.brand {
  font: 700 1.35rem var(--display);
  letter-spacing: -.02em;
  gap: .6rem;
}
.brand em {
  color: var(--action);
}

/* ——— Accueil futuriste (lot G8) : scène sombre animée, cartes en verre, animation d'entrée ——— */
body:has(.entry-scene) {
  background: var(--scene);
  isolation: isolate;
}
body:has(.entry-scene) .site-header {
  background: transparent;
  border-bottom-color: transparent;
}
body:has(.entry-scene) .site-footer {
  background: transparent;
  border-color: color-mix(in srgb, var(--on-dark) 12%, transparent);
  color: var(--on-dark-muted);
}
body:has(.entry-scene) .site-footer a {
  color: var(--on-dark-muted);
}
.entry-future {
  position: relative;
  width: min(100%, 31rem);
  margin: clamp(.5rem, 4vh, 3.5rem) auto;
  padding: clamp(1rem, 5vw, 2rem);
  background: transparent;
  border: 0;
  color: var(--on-dark);
}
.entry-scene {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: radial-gradient(120% 80% at 50% 0%, var(--scene-2), var(--scene) 70%);
}
.entry-glow {
  position: absolute;
  width: 60vmax;
  height: 60vmax;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .32;
  animation: entry-drift 14s ease-in-out infinite alternate;
}
.entry-glow.g1 {
  top: -30vmax;
  right: -22vmax;
  background: var(--action);
}
.entry-glow.g2 {
  bottom: -38vmax;
  left: -26vmax;
  background: var(--accent);
  opacity: .16;
  animation-delay: -7s;
}
.entry-grid {
  position: absolute;
  left: -60%;
  right: -60%;
  bottom: -4%;
  height: 78%;
  background-image:
    linear-gradient(color-mix(in srgb, var(--action) 55%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--action) 55%, transparent) 1px, transparent 1px);
  background-size: 46px 46px;
  transform: perspective(360px) rotateX(56deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 15%, transparent 95%);
  mask-image: linear-gradient(to top, #000 15%, transparent 95%);
  animation: entry-grid 2.6s linear infinite;
}
.entry-routes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.entry-routes .route {
  fill: none;
  stroke: color-mix(in srgb, var(--accent) 38%, transparent);
  stroke-width: 1.2;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: entry-draw 2.2s .2s ease-out forwards;
}
.entry-routes .pulse {
  fill: var(--action);
  filter: drop-shadow(0 0 6px var(--action));
}
.entry-future > :not(.entry-scene) {
  animation: entry-rise .7s cubic-bezier(.2, .8, .2, 1) both;
}
.entry-future > .entry-choices {
  animation-delay: .18s;
}
.entry-future > .entry-account {
  animation-delay: .3s;
}
.entry-future .entry-heading {
  margin-bottom: 1.6rem;
}
.entry-orb {
  position: relative;
  display: grid;
  place-items: center;
  width: 5.25rem;
  height: 5.25rem;
  margin-bottom: 1.2rem;
}
.entry-orb svg, .launch-core svg {
  width: 62%;
  height: 62%;
  overflow: visible;
}
.entry-orb path, .launch-core path {
  fill: none;
  stroke: var(--on-dark);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.entry-orb circle, .launch-core circle {
  fill: var(--action);
}
.orb-g {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: entry-draw 1.1s .15s cubic-bezier(.6, 0, .2, 1) forwards;
}
.orb-dot {
  transform-origin: 36px 15px;
  animation: entry-beat 2.4s 1.2s ease-in-out infinite;
  filter: drop-shadow(0 0 5px var(--action));
}
.orb-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--on-dark) 22%, transparent);
  border-top-color: var(--action);
  animation: entry-spin 6s linear infinite;
}
.orb-ring.b {
  inset: -.55rem;
  border-color: color-mix(in srgb, var(--on-dark) 10%, transparent);
  border-bottom-color: var(--accent);
  animation-duration: 11s;
  animation-direction: reverse;
}
.entry-eyebrow {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.entry-future .entry-heading .entry-eyebrow {
  color: var(--on-dark-accent);
}
.entry-live {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--action);
  box-shadow: 0 0 0 0 var(--action);
  animation: entry-ping 2s ease-out infinite;
}
.entry-future .entry-heading h1 {
  margin: .5rem 0 .6rem;
  font-size: clamp(2.7rem, 12vw, 4.2rem);
  line-height: 1.02;
  background: linear-gradient(100deg, var(--on-dark) 25%, var(--accent) 65%, var(--action));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.entry-future .entry-heading p {
  color: var(--on-dark-muted);
}
.entry-future .entry-back {
  color: var(--on-dark);
}
.entry-future .entry-choices {
  gap: .85rem;
}
.entry-future .entry-choice {
  position: relative;
  overflow: hidden;
  padding: clamp(1rem, 3.5vw, 1.25rem);
  background: color-mix(in srgb, var(--on-dark) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--on-dark) 18%, transparent);
  border-radius: 1.15rem;
  color: var(--on-dark);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.entry-future .entry-choice::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, color-mix(in srgb, var(--on-dark) 16%, transparent) 50%, transparent 65%);
  transform: translateX(-110%);
  transition: transform .6s ease;
  pointer-events: none;
}
.entry-future .entry-choice:is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--on-dark) 11%, transparent);
  border-color: var(--action);
  box-shadow: 0 0 0 1px var(--action), 0 18px 44px -18px var(--action);
  transform: translateY(-2px);
}
.entry-future .entry-choice:is(:hover, :focus-visible)::after {
  transform: translateX(110%);
}
.entry-future .entry-choice:active {
  transform: scale(.985);
}
.entry-future .entry-choice small {
  color: var(--on-dark-muted);
}
.entry-future .entry-choice-icon {
  width: 2.9rem;
  height: 2.9rem;
  border-radius: .9rem;
  background: linear-gradient(135deg, var(--action), var(--accent));
  color: var(--on-action);
}
.entry-future .entry-arrow {
  color: var(--on-dark-accent);
  transition: transform .2s ease;
}
.entry-future .entry-choice:is(:hover, :focus-visible) .entry-arrow {
  transform: translateX(4px);
}
.entry-future .entry-account {
  color: var(--on-dark-muted);
}
.entry-future .entry-account a {
  color: var(--on-dark-accent);
}
/* Départ : le contenu s'efface, la grille accélère, le signe prend l'écran. */
.entry-future.is-launching > :not(.entry-scene) {
  animation: entry-leave .45s ease forwards;
}
.entry-future.is-launching .entry-grid {
  animation-duration: .3s;
}
.entry-launch, .entry-reveal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  place-content: center;
  gap: 1.1rem;
  color: var(--on-dark);
}
.entry-launch {
  animation: launch-veil .9s ease forwards;
}
.entry-launch p {
  margin: 0;
  font: 600 1.05rem var(--display);
  letter-spacing: .04em;
  animation: entry-rise .5s .15s both;
}
.launch-core {
  display: grid;
  place-items: center;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background: var(--scene-2);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--on-dark) 18%, transparent), 0 0 60px -6px var(--action);
}
.entry-launch .launch-core {
  animation: launch-core .9s cubic-bezier(.2, .8, .2, 1) both;
}
.launch-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6rem;
  height: 6rem;
  margin: -3rem 0 0 -3rem;
  border: 2px solid var(--action);
  border-radius: 50%;
  opacity: 0;
  animation: launch-ring .9s ease-out forwards;
}
.launch-ring:nth-child(2) {
  animation-delay: .16s;
  border-color: var(--accent);
}
.launch-ring:nth-child(3) {
  animation-delay: .32s;
}
.launch-bar {
  width: 7.5rem;
  height: 3px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--on-dark) 16%, transparent);
  overflow: hidden;
}
.launch-bar::after {
  content: "";
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--action));
  transform-origin: 0 50%;
  animation: launch-fill .85s ease-in-out forwards;
}
.entry-reveal {
  background: var(--scene);
  pointer-events: none;
  animation: launch-reveal .55s .3s ease forwards;
}
@keyframes entry-grid { to { background-position: 0 46px; } }
@keyframes entry-draw { to { stroke-dashoffset: 0; } }
@keyframes entry-spin { to { transform: rotate(360deg); } }
@keyframes entry-beat { 50% { transform: scale(1.35); } }
@keyframes entry-ping { to { box-shadow: 0 0 0 .6rem transparent; } }
@keyframes entry-drift { to { transform: translate3d(-6vmax, 5vmax, 0) scale(1.12); } }
@keyframes entry-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes entry-leave { to { opacity: 0; transform: scale(.94); filter: blur(6px); } }
@keyframes launch-veil { from { background: transparent; } 55%, to { background: var(--scene); } }
@keyframes launch-core { from { opacity: 0; transform: scale(.4); } 45% { opacity: 1; transform: scale(1.08); } to { transform: scale(1); } }
@keyframes launch-ring { from { opacity: .9; transform: scale(.7); } to { opacity: 0; transform: scale(11); } }
@keyframes launch-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes launch-reveal { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .entry-scene *, .entry-future *, .entry-future > *, .entry-launch, .entry-launch *, .entry-reveal {
    animation: none !important;
    transition: none !important;
  }
  .entry-routes .route, .orb-g { stroke-dashoffset: 0; }
  .entry-routes .pulse { display: none; }
}

/* Pages de connexion : carte en verre posée sur le décor animé. */
.entry-stage {
  position: relative;
  color: var(--ink);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--on-dark) 16%, transparent);
  box-shadow: 0 30px 80px -40px var(--action);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  animation: entry-rise .7s cubic-bezier(.2, .8, .2, 1) both;
}
.entry-stage .entry-orb {
  width: 4.4rem;
  height: 4.4rem;
  margin-bottom: .9rem;
}
.entry-stage :is(.entry-heading h1, h1) {
  background: linear-gradient(100deg, var(--on-dark) 25%, var(--accent) 65%, var(--action));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.entry-stage .entry-back {
  color: var(--ink);
}
.entry-stage .account-form {
  background: color-mix(in srgb, var(--surface-2) 60%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .entry-stage, .entry-stage * {
    animation: none !important;
  }
}

.driver-login.entry-stage {
  min-height: 0;
}

/* Carte de l'accueil chauffeur et page de préférences (lot G9) */
.driver-map {
  height: 11.5rem;
  margin: .85rem 0 .3rem;
}
.driver-map-idle .track-car {
  display: none;
}
.driver-map-note {
  margin: 0 0 .9rem;
  font-size: .85rem;
}
.prefs-panel fieldset {
  display: grid;
  gap: .35rem;
  margin-bottom: .9rem;
}
.prefs-panel .check {
  font-weight: 500;
}
.prefs-panel input[type=radio] {
  width: 1.2rem;
  min-height: 1.2rem;
  margin: 0;
  accent-color: var(--action);
}

/* ——— Feuille « Où allez-vous ? » repliable (lot G10) ——— */
.booking-sheet::before {
  display: none;
}
.booking-sheet {
  transition: transform .22s ease;
}
.sheet-top {
  margin: -.6rem -1rem 0;
  padding: 0 1rem;
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.sheet-grip {
  display: block;
  width: 100%;
  min-height: 1.9rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: grab;
}
.sheet-grip::before {
  content: "";
  display: block;
  width: 2.75rem;
  height: .3rem;
  margin: 0 auto;
  border-radius: 999px;
  background: var(--line-strong);
}
.booking-sheet.sheet-down > :not(.sheet-top) {
  display: none;
}
.booking-sheet.sheet-down h1 {
  margin-bottom: .15rem;
}
.booking-sheet.sheet-down .sheet-top::after {
  content: attr(data-hint);
  display: block;
  padding-bottom: .5rem;
  color: var(--muted);
  font-size: .85rem;
}

/* ——— Espace chauffeur immersif (lot G10) : décor sombre, verre, carte en tête ——— */
.entry-scene.scene-calm * {
  animation: none !important;
}
.driver-immersive {
  color: var(--ink);
  background: transparent;
  border: 0;
  box-shadow: none;
  padding-inline: clamp(.75rem, 3vw, 1.5rem);
}
.driver-immersive .driver-top h1 {
  font-size: clamp(1.5rem, 6vw, 2.1rem);
  background: linear-gradient(100deg, var(--on-dark) 25%, var(--accent) 65%, var(--action));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.driver-immersive .driver-top .actions :is(a, button) {
  min-height: 2.4rem;
  padding: .3rem .85rem;
  border: 1px solid color-mix(in srgb, var(--on-dark) 18%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--on-dark) 7%, transparent);
  color: var(--on-dark);
  font-size: .82rem;
}
.driver-hero {
  position: relative;
  margin: .9rem 0 0;
}
.driver-immersive .driver-map {
  height: clamp(14rem, 38svh, 22rem);
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--on-dark) 16%, transparent);
  border-radius: 1.6rem;
  box-shadow: 0 34px 80px -42px var(--action);
}
.driver-immersive .driver-map::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(to top, var(--scene) 2%, transparent 48%);
  pointer-events: none;
}
.driver-immersive .track-map img {
  filter: brightness(.72) saturate(.7) contrast(1.05);
}
.driver-immersive .driver-map .map-label {
  z-index: 1;
  top: .4rem;
  bottom: auto;
  opacity: .8;
}
.driver-immersive .driver-map-note {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 2.9rem;
  margin: 0;
  color: var(--on-dark);
  font-size: .85rem;
  text-shadow: 0 1px 6px var(--scene);
}
.driver-immersive .driver-hero + .duty-switch {
  position: relative;
  margin-top: -2.3rem;
  width: calc(100% - 1.5rem);
  margin-inline: .75rem;
}
.driver-immersive .duty-switch {
  border: 1px solid color-mix(in srgb, var(--on-dark) 18%, transparent);
  background: color-mix(in srgb, var(--surface) 74%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.driver-immersive .duty-switch-on {
  border-color: var(--success-fill);
  box-shadow: 0 0 0 1px var(--success-fill), 0 0 44px -10px var(--success-fill);
  animation: duty-glow 2.8s ease-in-out infinite;
}
@keyframes duty-glow {
  50% { box-shadow: 0 0 0 1px var(--success-fill), 0 0 60px -4px var(--success-fill); }
}
.driver-immersive .driver-tools :is(button, a) {
  border: 1px solid color-mix(in srgb, var(--on-dark) 16%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--on-dark) 6%, transparent);
  color: var(--on-dark);
  font-size: .85rem;
}
.driver-immersive :is(.ride-card, .card, .ride-utility, .vehicle-section, .ride-history) {
  border: 1px solid color-mix(in srgb, var(--on-dark) 14%, transparent);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.driver-immersive .ride-section h3 {
  color: var(--on-dark-accent);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .8rem;
}
body[data-page="driver"] .driver-immersive .driver-tabs:not(.admin-tabs) {
  border-top: 1px solid color-mix(in srgb, var(--on-dark) 16%, transparent);
  background: color-mix(in srgb, var(--scene-2) 80%, transparent);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.driver-immersive .driver-tab {
  color: var(--on-dark-muted);
}
.driver-immersive .driver-tab[aria-current="page"] {
  background: transparent;
  color: var(--accent);
}
.driver-immersive .driver-tab[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: -.3rem;
  left: 28%;
  right: 28%;
  height: 3px;
  border-radius: 3px;
  background: var(--action);
  box-shadow: 0 0 14px 1px var(--action);
}
.driver-immersive #ride-offer {
  border: 1px solid var(--action);
  box-shadow: 0 0 70px -12px var(--action);
}
@media (prefers-reduced-motion: reduce) {
  .driver-immersive .duty-switch-on { animation: none; }
  .booking-sheet { transition: none; }
}
.driver-immersive .driver-top {
  flex-direction: column;
  align-items: stretch;
  gap: .55rem;
}
.driver-immersive .driver-top .actions {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.driver-immersive .driver-top .actions :is(a, button) {
  flex: none;
  white-space: nowrap;
}
.driver-immersive .driver-top .actions {
  gap: .35rem;
}
.driver-immersive .driver-top .actions :is(a, button) {
  padding-inline: .65rem;
  font-size: .78rem;
}

/* ——— Carte du chauffeur déplaçable et zoomable (lot G11) ——— */
.driver-map {
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.driver-map[data-dragging="true"] {
  cursor: grabbing;
}
.spot-layer {
  position: absolute;
  inset: 0;
}
.spot-layer img {
  pointer-events: none;
}
.spot-layer .track-car {
  z-index: 1;
}
.spot-zoom {
  position: absolute;
  z-index: 2;
  top: .6rem;
  right: .6rem;
  display: grid;
  gap: .4rem;
}
.spot-zoom button, .spot-traffic {
  border: 1px solid color-mix(in srgb, var(--on-dark) 20%, transparent);
  background: color-mix(in srgb, var(--scene-2) 82%, transparent);
  color: var(--on-dark);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.spot-zoom button {
  width: 2.6rem;
  min-height: 2.6rem;
  padding: 0;
  border-radius: 50%;
  font-size: 1.25rem;
}
.spot-zoom svg {
  width: 1.2rem;
  height: 1.2rem;
}
.spot-traffic {
  position: absolute;
  z-index: 2;
  top: .6rem;
  left: .6rem;
  padding: .45rem .8rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
  text-decoration: none;
}
.spot-traffic:is(:hover, :focus-visible) {
  border-color: var(--action);
}
.driver-immersive .driver-map .map-label {
  top: 3.3rem;
  left: .6rem;
  right: auto;
  bottom: auto;
}

/* ——— Circulation sur la carte du chauffeur (lot G12) ——— */
.driver-immersive .track-map img.traffic-tile {
  filter: none;
}
button.spot-traffic {
  min-height: 2.3rem;
  cursor: pointer;
}
button.spot-traffic::before {
  content: "";
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  background: var(--on-dark-muted);
}
button.spot-traffic[aria-pressed="true"] {
  border-color: var(--success-fill);
}
button.spot-traffic[aria-pressed="true"]::before {
  background: var(--success-fill);
  box-shadow: 0 0 8px var(--success-fill);
}

/* ——— Onglet Récap du chauffeur, réorganisé ——— */
.recap {
  display: grid;
  gap: .9rem;
}
.recap > * {
  margin: 0;
}
.recap-todo {
  padding: .8rem 1rem;
  border-left: 4px solid var(--accent-text);
  border-radius: .9rem;
  background: var(--accent-soft);
  color: var(--ink);
}
.recap-todo-urgent {
  border-left-color: var(--danger);
  background: var(--danger-bg);
  color: var(--danger);
}
.recap-todo a {
  display: inline-block;
  margin-left: .3rem;
  color: inherit;
  font-weight: 700;
}
.recap-hero {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.1rem;
  border: 1px solid var(--line);
  border-radius: 1.4rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--action) 20%, var(--surface)), var(--surface) 70%);
}
.recap-ring {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 6.6rem;
  height: 6.6rem;
}
.recap-ring svg {
  position: absolute;
  inset: 0;
  overflow: visible;
  transform: rotate(-90deg);
}
.recap-ring circle {
  fill: none;
  stroke-width: 9;
}
.ring-track {
  stroke: var(--surface-3);
}
.ring-value {
  stroke: var(--action);
  stroke-linecap: round;
  animation: ring-fill .8s ease-out both;
}
@keyframes ring-fill {
  from { stroke-dasharray: 0 100; }
}
.recap-ring span {
  text-align: center;
  line-height: 1.15;
}
.recap-ring strong {
  display: block;
  font: 700 1.3rem var(--display);
}
.recap-ring small {
  font-size: .68rem;
}
.recap-count {
  display: block;
  font: 700 clamp(2.8rem, 13vw, 3.8rem)/1 var(--display);
  letter-spacing: -.03em;
}
.recap-main span {
  font-weight: 700;
}
.recap-main small {
  display: block;
  margin-top: .2rem;
}
.recap-chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .6rem;
}
.recap-chip {
  padding: .8rem .5rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--surface-2);
  text-align: center;
}
.recap-chip strong {
  display: block;
  font: 700 1.05rem var(--display);
  white-space: nowrap;
}
.recap-chip span {
  display: block;
  margin-top: .15rem;
  color: var(--muted);
  font-size: .72rem;
}
.recap-activity, .recap-split {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 1.2rem;
  background: var(--surface);
}
.recap-activity figcaption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem;
  margin-bottom: .9rem;
}
.recap-activity figcaption span {
  color: var(--muted);
  font-size: .78rem;
}
.recap-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 7.5rem;
  padding-bottom: 1.15rem;
}
.recap-bar {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.recap-bar i {
  display: block;
  height: var(--h);
  min-height: 2px;
  border-radius: 4px 4px 0 0;
  background: color-mix(in srgb, var(--action) 42%, var(--surface-3));
}
.recap-bar.peak i {
  background: var(--action);
}
.recap-bar.now::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -.35rem;
  width: .3rem;
  height: .3rem;
  margin-left: -.15rem;
  border-radius: 50%;
  background: var(--accent-text);
}
.recap-bar b {
  position: absolute;
  left: 50%;
  bottom: -1.15rem;
  transform: translateX(-50%);
  color: var(--muted);
  font: 500 .62rem var(--text);
  white-space: nowrap;
}
.recap-split-bar {
  height: .7rem;
  border-radius: 999px;
  background: var(--accent);
  overflow: hidden;
}
.recap-split-bar i {
  display: block;
  height: 100%;
  background: var(--action);
}
.recap-split p {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: .7rem 0 0;
  font-size: .88rem;
}
.recap-dot {
  display: inline-block;
  width: .6rem;
  height: .6rem;
  margin-right: .35rem;
  border-radius: 50%;
  background: var(--action);
}
.recap-dot-later {
  background: var(--accent);
}
.recap-title {
  margin-top: .3rem;
}
.recap-foot {
  font-size: .8rem;
}
/* Dans l'espace chauffeur immersif : verre et halo. */
.driver-immersive .recap-hero {
  border-color: color-mix(in srgb, var(--on-dark) 16%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--action) 26%, transparent), color-mix(in srgb, var(--surface) 70%, transparent) 70%);
  box-shadow: 0 30px 70px -44px var(--action);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.driver-immersive .ring-value {
  filter: drop-shadow(0 0 6px var(--action));
}
.driver-immersive :is(.recap-chip, .recap-activity, .recap-split, .recap .review-list li) {
  border: 1px solid color-mix(in srgb, var(--on-dark) 14%, transparent);
  background: color-mix(in srgb, var(--surface) 76%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.driver-immersive .recap h2 {
  background: linear-gradient(100deg, var(--on-dark) 25%, var(--accent) 65%, var(--action));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (prefers-reduced-motion: reduce) {
  .ring-value { animation: none; }
}