/* =============================================================
   Mobilité Rurale — Widget lecture seule [mobilite_display]
   Thème sombre, optimisé écran TV/kiosque (paysage fixe)
   Typographie lisible à 2–3 m — pas de media queries responsive
   ============================================================= */

/* ---- Variables — Thème sombre (défaut) ---- */
#mob-display-root,
#mob-display-root[data-theme="dark"] {
  --disp-bg:          #0d1117;
  --disp-bg-card:     #161b22;
  --disp-bg-card-alt: #1c2128;
  --disp-border:      #30363d;
  --disp-text:        #e6edf3;
  --disp-muted:       #8b949e;
  --disp-muted-2:     #58a6ff;
  --disp-accent:      #2563eb;
  --disp-green:       #3fb950;
  --disp-red:         #f85149;
  --disp-amber:       #d29922;
  --disp-radius:      12px;
  --disp-clock-size:  96px;
}

/* ---- Variables — Thème clair (theme="light") ---- */
#mob-display-root[data-theme="light"] {
  --disp-bg:          #f5f5f5;
  --disp-bg-card:     #ffffff;
  --disp-bg-card-alt: #f0f0f0;
  --disp-border:      #d0d7de;
  --disp-text:        #1a1a1a;
  --disp-muted:       #57606a;
  --disp-muted-2:     #0969da;
  --disp-accent:      #0969da;
  --disp-green:       #1a7f37;
  --disp-red:         #cf222e;
  --disp-amber:       #9a6700;
  --disp-radius:      12px;
  --disp-clock-size:  96px;
}

/* ---- Reset de base scopé ---- */
#mob-display-root,
#mob-display-root * {
  box-sizing: border-box;
  margin: 0;
}

/* ---- Wrapper racine ---- */
#mob-display-root {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--disp-bg);
  color: var(--disp-text);
  font-family: system-ui, -apple-system, "Helvetica Neue", sans-serif;
  font-size: 20px;
  line-height: 1.4;
  padding: 20px 28px 16px;
  gap: 16px;
  overflow: hidden;
}

/* =============================================================
   EN-TÊTE
   ============================================================= */

.mob-disp-header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--disp-border);
  flex-shrink: 0;
}

.mob-disp-clock {
  width:  var(--disp-clock-size);
  height: var(--disp-clock-size);
  flex-shrink: 0;
}

.mob-disp-header-title {
  flex: 1 1 0;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--disp-text);
  letter-spacing: -.3px;
  line-height: 1.2;
  padding: 0 16px;
}

.mob-disp-clock-face      { fill: none; stroke: var(--disp-border); stroke-width: 2; }
.mob-disp-clock-tick      { stroke: var(--disp-muted); stroke-width: 1.5; stroke-linecap: round; }
.mob-disp-clock-tick-major{ stroke: var(--disp-text);  stroke-width: 2.5; stroke-linecap: round; }
.mob-disp-clock-hour      { stroke: var(--disp-text);  stroke-width: 3.5; stroke-linecap: round; }
.mob-disp-clock-min       { stroke: var(--disp-text);  stroke-width: 2.5; stroke-linecap: round; }
.mob-disp-clock-sec       { stroke: var(--disp-red);   stroke-width: 1.5; stroke-linecap: round; }
.mob-disp-clock-center    { fill: var(--disp-red); }

.mob-disp-datetime {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-end;
  flex-shrink: 0;
}

.mob-disp-date {
  font-size: 1.1rem;
  color: var(--disp-muted);
  text-transform: capitalize;
  letter-spacing: .3px;
}

.mob-disp-time {
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: -1px;
  color: var(--disp-text);
  line-height: 1;
}

/* .mob-disp-branding supprimé en v0.6.11 — remplacé par .mob-disp-header-title */

/* =============================================================
   CORPS — DEUX COLONNES
   ============================================================= */

.mob-disp-columns {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0 24px;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

.mob-disp-divider {
  background: var(--disp-border);
  align-self: stretch;
}

.mob-disp-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}

.mob-disp-col-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}

.mob-disp-col-title {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--disp-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  display: flex;
  align-items: baseline;
  gap: .4em;
  flex-wrap: wrap;
}

.mob-disp-col-title-pre {
  font-size: 1rem;
  font-weight: 400;
  color: var(--disp-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.mob-disp-col-title-zone {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--disp-text);
  text-transform: uppercase;
  letter-spacing: .3px;
}

.mob-disp-col-stats {
  font-size: .85rem;
  color: var(--disp-amber);
  white-space: nowrap;
}

.mob-disp-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--disp-border) transparent;
}

.mob-disp-cards::-webkit-scrollbar       { width: 4px; }
.mob-disp-cards::-webkit-scrollbar-track { background: transparent; }
.mob-disp-cards::-webkit-scrollbar-thumb { background: var(--disp-border); border-radius: 2px; }

/* =============================================================
   CARTE DE TRAJET
   ============================================================= */

.mob-disp-card {
  display: flex;
  align-items: stretch;
  background: var(--disp-bg-card);
  border: 1px solid var(--disp-border);
  border-radius: var(--disp-radius);
  overflow: hidden;
  flex-shrink: 0;
}

.mob-disp-card--soon-60 { border-left: 4px solid var(--disp-amber); }
.mob-disp-card--soon-30 { border-left: 4px solid #e07b00; }
.mob-disp-card--soon-15 { border-left: 4px solid var(--disp-red); }

.mob-disp-card-body {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 24px;
}

.mob-disp-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.mob-disp-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
}

.mob-disp-badge--driver {
  background: rgba(248, 81, 73, .12);
  color: var(--disp-red);
  border: 1px solid rgba(248, 81, 73, .3);
}

.mob-disp-badge--passenger {
  background: rgba(37, 99, 235, .12);
  color: var(--disp-accent);
  border: 1px solid rgba(37, 99, 235, .3);
}

.mob-disp-card-seats { font-size: .82rem; color: var(--disp-muted); }

/* prénom — secondaire, inline dans la ligne meta */
.mob-disp-card-name {
  font-size: .85rem;
  font-weight: 500;
  color: var(--disp-muted);
}

/* trajet — héro */
.mob-disp-card-route {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--disp-text);
  line-height: 1.2;
}

.mob-disp-card-time {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--disp-text);
  font-variant-numeric: tabular-nums;
}

.mob-disp-card-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px 24px;
  background: var(--disp-bg-card-alt);
  border-left: 1px solid var(--disp-border);
  flex-shrink: 0;
  min-width: 110px;
}

.mob-disp-card-qr canvas {
  display: block;
  width:  80px !important;
  height: 80px !important;
  image-rendering: pixelated;
  border-radius: 4px;
  background: #fff;
  padding: 4px;
}

.mob-disp-qr-hint {
  font-size: .7rem;
  color: var(--disp-muted);
  text-align: center;
  line-height: 1.2;
}

/* =============================================================
   COLONNE VIDE
   ============================================================= */

.mob-disp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  gap: 14px;
  padding: 32px 16px;
  border: 1px dashed var(--disp-border);
  border-radius: var(--disp-radius);
}

.mob-disp-empty canvas {
  display: block;
  width:  140px !important;
  height: 140px !important;
  image-rendering: pixelated;
  border-radius: 8px;
  background: #fff;
  padding: 6px;
}

.mob-disp-empty-label { font-size: 1rem; color: var(--disp-muted); }
.mob-disp-empty-cta   { font-size: 1rem; font-weight: 600; color: var(--disp-text); }

/* =============================================================
   PIED DE PAGE — QR CODE GLOBAL
   ============================================================= */

.mob-disp-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 14px;
  border-top: 1px solid var(--disp-border);
  gap: 16px;
  flex-shrink: 0;
  width: 100%;
}

.mob-disp-footer-qr-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
}

.mob-disp-footer-qr {
  display: block;
  width:  72px !important;
  height: 72px !important;
  image-rendering: pixelated;
  border-radius: 6px;
  background: #fff;
  padding: 4px;
  flex-shrink: 0;
}

.mob-disp-footer-label {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--disp-text);
  line-height: 1.3;
  white-space: nowrap;
}

.mob-disp-footer-label--left  { text-align: right; }
.mob-disp-footer-label--right { text-align: left; }

/* =============================================================
   INTERSTITIEL ?contact=TRIP_ID
   ============================================================= */

.mob-disp-interstitial {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.mob-disp-interstitial-box {
  background: var(--disp-bg-card);
  border: 1px solid var(--disp-border);
  border-radius: var(--disp-radius);
  padding: 40px 48px;
  max-width: 600px;
  width: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.mob-disp-interstitial-intro {
  font-size: 1.2rem;
  color: var(--disp-muted);
  line-height: 1.5;
}

.mob-disp-interstitial-intro strong {
  color: var(--disp-text);
  font-size: 1.6rem;
  display: block;
  margin: 6px 0 2px;
}

.mob-disp-interstitial-route { font-size: 1rem; color: var(--disp-muted); }

.mob-disp-interstitial-btn {
  appearance: none;
  background: var(--disp-accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 14px 36px;
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  transition: filter .15s;
}

.mob-disp-interstitial-btn:hover { filter: brightness(1.12); }

.mob-disp-interstitial-not-found { font-size: 1rem; color: var(--disp-red); }

/* =============================================================
   ÉTAT DE CHARGEMENT
   ============================================================= */

.mob-disp-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  font-size: 1rem;
  color: var(--disp-muted);
  gap: 10px;
}

.mob-disp-spinner {
  width: 22px;
  height: 22px;
  border: 2px solid var(--disp-border);
  border-top-color: var(--disp-accent);
  border-radius: 50%;
  animation: mob-disp-spin .7s linear infinite;
}

@keyframes mob-disp-spin {
  to { transform: rotate(360deg); }
}

/* =============================================================
   PAGINATION — DOTS + BOUTONS NAV (v0.6.13)
   ============================================================= */

/* Conteneur contrôles sous chaque colonne */
.mob-disp-page-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 28px;
  padding: 4px 0 6px;
}

/* Points indicateurs de page */
.mob-disp-dots {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mob-disp-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--disp-border);
  transition: background .25s;
  flex-shrink: 0;
}

.mob-disp-dot--active {
  background: var(--disp-accent);
}

/* Boutons ← → : visibles en mode PC (tvscreen="off"), masqués en mode TV */
.mob-disp-nav-btn {
  display: none; /* masqué par défaut — activé ci-dessous si PAS tv-screen */
  appearance: none;
  background: transparent;
  border: 1px solid var(--disp-border);
  color: var(--disp-text);
  border-radius: 6px;
  width: 32px;
  height: 32px;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  flex-shrink: 0;
}

.mob-disp-nav-btn:hover {
  background: var(--disp-border);
}

/* Visible sur PC (tvscreen="off") — root SANS la classe mob-display--tv-screen */
#mob-display-root:not(.mob-display--tv-screen) .mob-disp-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Masqué si une seule page (JS ajoute la classe .mob-disp-page-controls--single) */
.mob-disp-page-controls--single .mob-disp-nav-btn {
  display: none !important;
}

/* Lien "Proposer un trajet" en mode PC (tvscreen="off") — aligné à droite */
.mob-disp-footer-link {
  margin-left: auto;
  font-size: .9rem;
  font-weight: 600;
  color: var(--disp-accent);
  text-decoration: none;
  white-space: nowrap;
  padding-right: 4px;
}

.mob-disp-footer-link:hover {
  text-decoration: underline;
}