/* ===========================================================================
   Transferts Festival — feuille de style de l'application (v2)
   ---------------------------------------------------------------------------
   Ce fichier remplace deux choses :
     - le compilateur Tailwind téléchargé depuis Internet et exécuté dans le
       navigateur à chaque ouverture (≈400 ko) ;
     - le bloc <style> qui vivait dans index.html.

   Rien n'appelle plus de service extérieur en dehors des polices Google.

   Sommaire :
     1-4. Styles historiques, repris tels quels de la version en ligne
     5.   Utilitaires de mise en page (le sous-ensemble de Tailwind utilisé)
     6.   Feuille de route et porte chauffeur (nouveau)
   =========================================================================== */

  :root{
    --bg:#12151b;
    --panel:#1a1f27;
    --panel-2:#212833;
    --border:#2b323d;
    --border-soft:#232a34;
    --text:#f3f1ec;
    --text-dim:#9aa3b2;
    --text-faint:#6b7280;
    --todo:#64748b;
    --progress:#f0a83c;
    --done:#34d399;
    --alert:#ff5d7d;
    --alert-bg:rgba(255,93,125,0.10);
    --alert-border:rgba(255,93,125,0.45);
    --text-invert:#12151b;
    --date-accent:#7dd3fc;
  }

  body[data-theme="light"]{
    --text-invert:#ffffff;
    --bg:#f4f5f7;
    --panel:#ffffff;
    --panel-2:#eef0f3;
    --border:#d7dbe2;
    --border-soft:#e4e7ec;
    --text:#1b1f27;
    --text-dim:#4b5563;
    --text-faint:#8a94a6;
    --todo:#64748b;
    --progress:#c17a0a;
    --done:#059669;
    --alert:#dc2f57;
    --alert-bg:rgba(220,47,87,0.08);
    --alert-border:rgba(220,47,87,0.35);
    --date-accent:#0284c7;
  }
  *{box-sizing:border-box;}
  html,body{background:var(--bg);color:var(--text);}
  body{font-family:'Inter',sans-serif; -webkit-font-smoothing:antialiased;}
  .font-display{font-family:'Oswald',sans-serif; letter-spacing:0.02em;}
  .font-mono{font-family:'JetBrains Mono',monospace;}
  .font-date-badge{font-family:'Oswald',sans-serif; letter-spacing:0.04em; text-transform:uppercase;}
  ::-webkit-scrollbar{width:8px;height:8px;}
  ::-webkit-scrollbar-thumb{background:var(--border);border-radius:8px;}
  ::-webkit-scrollbar-track{background:transparent;}
  .scrollbar-thin{scrollbar-width:thin;}

  .panel{background:var(--panel);border:1px solid var(--border-soft);}
  .panel-2{background:var(--panel-2);border:1px solid var(--border);}

  select, input[type="text"], input[type="date"], input[type="time"], input[type="number"], textarea{
    background:var(--panel-2);
    border:1px solid var(--border);
    color:var(--text);
    border-radius:8px;
  }
  select:focus, input:focus, textarea:focus{
    outline:none;
    border-color:#5b6472;
    box-shadow:0 0 0 3px rgba(255,255,255,0.06);
  }
  select option{background:var(--panel-2); color:var(--text);}

  /* route line signature element */
  .route-line{
    display:flex;align-items:center;gap:0;
    height:16px;
  }
  .route-dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--text-faint);border:2px solid var(--bg);box-shadow:0 0 0 1px var(--border);}
  .route-dash{
    flex:1;
    height:2px;
    background-image:linear-gradient(to right, var(--border) 50%, transparent 0%);
    background-size:8px 2px;
    background-repeat:repeat-x;
    margin:0 4px;
  }
  .route-dash.status-progress{background-image:linear-gradient(to right, var(--progress) 50%, transparent 0%);}
  .route-dash.status-done{background-image:linear-gradient(to right, var(--done) 50%, transparent 0%); }
  .route-dot.status-progress{background:var(--progress);}
  .route-dot.status-done{background:var(--done);}

  .card{
    background:var(--panel);
    border:1px solid var(--border-soft);
    border-left:3px solid var(--todo);
    border-radius:10px;
  }
  .card.status-progress{border-left-color:var(--progress);}
  .card.status-done{border-left-color:var(--done);}
  .card.alert{border-left-color:var(--alert); background:linear-gradient(to right, var(--alert-bg), var(--panel) 12%);}

  .badge{
    display:inline-flex;align-items:center;gap:5px;
    font-size:12px;font-weight:600;
    padding:3px 9px;border-radius:999px;
    line-height:1.4;
  }
  .seg-btn{
    font-size:12px;font-weight:600;
    padding:6px 10px;border-radius:7px;
    border:1px solid var(--border);
    background:var(--panel-2);
    color:var(--text-dim);
    transition:all .12s ease;
    white-space:nowrap;
  }
  .seg-btn.active-todo{background:rgba(100,116,139,0.22); border-color:var(--todo); color:#cbd5e1;}
  .seg-btn.active-progress{background:rgba(240,168,60,0.18); border-color:var(--progress); color:#fbbf24;}
  .seg-btn.active-done{background:rgba(52,211,153,0.16); border-color:var(--done); color:#6ee7b7;}

  .icon-btn{
    width:32px;height:32px;border-radius:8px;
    display:inline-flex;align-items:center;justify-content:center;
    color:var(--text-faint); border:1px solid transparent;
    transition:all .12s ease;
  }
  .icon-btn:hover{background:var(--panel-2); color:var(--text); border-color:var(--border);}

  .modal-backdrop{background:rgba(8,10,14,0.72); backdrop-filter:blur(2px);}
  .driver-chip{
    cursor:pointer; user-select:none;
    display:inline-flex; align-items:center; gap:6px;
    padding:6px 11px; border-radius:999px; font-size:13px; font-weight:500;
    border:1px solid var(--border); background:var(--panel-2); color:var(--text-dim);
    transition:all .12s ease;
  }
  .driver-chip.selected{ color:#0d0f12; border-color:transparent; }

  /* Puces de choix du temps imparti (radio stylisés) */
  .duration-chip{
    cursor:pointer; user-select:none;
    display:inline-flex; align-items:center; gap:6px;
    padding:6px 13px; border-radius:999px; font-size:13px; font-weight:600;
    border:1px solid var(--border); background:var(--panel-2); color:var(--text-dim);
    transition:all .12s ease;
  }
  .duration-chip input{ display:none; }
  .duration-chip.selected{
    background:rgba(240,168,60,0.18); border-color:var(--progress); color:#fbbf24;
  }
  .duration-chip:active{ transform:scale(0.94); }

  .stub-notch{position:relative;}
  .stub-notch::before, .stub-notch::after{
    content:"";position:absolute;left:-3px;width:12px;height:12px;border-radius:50%;
    background:var(--bg); border:1px solid var(--border-soft);
  }
  .stub-notch::before{top:-6px;}
  .stub-notch::after{bottom:-6px;}

  @media (max-width: 640px){
    .hide-mobile{display:none;}
  }

  /* --- animations : modales --- */
  @keyframes modalFadeIn{ from{opacity:0;} to{opacity:1;} }
  @keyframes modalSlideUp{ from{ transform:translateY(24px); opacity:0; } to{ transform:translateY(0); opacity:1; } }
  .modal-backdrop{ animation:modalFadeIn .16s ease-out; }
  .modal-backdrop > div{ animation:modalSlideUp .18s cubic-bezier(.2,.8,.2,1); }

  /* --- animations : cartes --- */
  @keyframes cardIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }
  .card{ animation:cardIn .22s ease-out; transition:transform .12s ease, box-shadow .12s ease, border-color .15s ease; }
  .card:hover{ box-shadow:0 6px 20px -10px rgba(0,0,0,0.4); }
  .seg-btn, .icon-btn, .driver-chip{ transition:all .12s ease; }
  .seg-btn:active, .icon-btn:active{ transform:scale(0.94); }

  /* --- bouton flottant (mobile, création rapide) --- */
  .fab-create{
    display:none;
    position:fixed; right:18px; bottom:22px; z-index:40;
    width:56px; height:56px; border-radius:50%;
    align-items:center; justify-content:center;
    background:var(--text); color:var(--text-invert);
    box-shadow:0 10px 24px -6px rgba(0,0,0,0.5);
    transition:transform .12s ease;
  }
  .fab-create:active{ transform:scale(0.92); }
  @media (max-width:640px){
    .fab-create{ display:flex; }
    .create-btn-inline{ display:none; }
  }

  /* --- zone d'impression --- */
  #print-header{ display:none; }
  .print-only{ display:none; }

  @media print{
    body{ background:#fff !important; }
    .no-print{ display:none !important; }
    #print-header{ display:block !important; margin-bottom:8px !important; }
    #print-header p{ margin-bottom:3px !important; }
    #app{ max-width:none; padding:0; margin:0; }
    :root, body[data-theme]{
      --bg:#fff; --panel:#fff; --panel-2:#f3f3f3; --border:#ccc; --border-soft:#ddd;
      --text:#000; --text-dim:#333; --text-faint:#555;
      --todo:#666; --progress:#8a5a00; --done:#0a6b3f; --alert:#a3123a; --alert-bg:#fdeef1; --alert-border:#a3123a;
    }
    .sticky{ position:static !important; box-shadow:none !important; }
    .modal-backdrop, .fab-create{ display:none !important; }
    .print-content{ padding-left:6px !important; padding-right:6px !important; margin-top:0 !important; }

    /* --- à l'impression, les cartes laissent place à un tableau : bien plus
       dense, ce qui réduit fortement le nombre de pages tout en restant
       lisible. --- */
    .card-groups{ display:none !important; }
    .print-only{ display:table !important; width:100%; border-collapse:collapse; table-layout:fixed; }
    #print-table thead{ display:table-header-group; } /* répète l'en-tête du tableau sur chaque page */
    #print-table tr{ break-inside:avoid; }
    #print-table th, #print-table td{
      border:1px solid #999; padding:4px 6px; text-align:left; vertical-align:top;
      font-size:10px; line-height:1.35; word-wrap:break-word;
    }
    #print-table th{ background:#eee !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; font-size:8.5px; text-transform:uppercase; letter-spacing:0.03em; font-weight:700; }
    #print-table .route-precision{ font-size:8.5px; color:#666; margin-top:1px; font-style:italic; }
    #print-table col.col-date{ width:15%; }
    #print-table col.col-time{ width:10%; }
    #print-table col.col-route{ width:38%; }
    #print-table col.col-pax{ width:9%; }
    #print-table col.col-drivers{ width:28%; }
  }

  @media (max-width: 640px){
    /* cibles tactiles plus grandes pour un usage chauffeur en extérieur */
    .icon-btn{ width:38px; height:38px; }
    .seg-btn{ padding:9px 8px; font-size:12.5px; }
    .status-btn-row{ display:grid; grid-template-columns:repeat(3, 1fr); width:100%; }
    .status-btn-row .seg-btn{ text-align:center; }
    .card .route-and-labels{ flex-direction:column; align-items:flex-start; gap:2px; }
    .card .route-and-labels p.text-right{ text-align:left; }
    .card .route-arrow-mobile{ display:inline !important; color:var(--text-faint); }
  }

  /* --- header compact sur mobile --- */
  @media (max-width: 640px){
    header.app-header{ padding-top:12px !important; padding-bottom:10px !important; }
    .festival-brand{ font-size:9.5px !important; letter-spacing:0.06em !important; }
    .view-only-note{ margin-top:2px !important; }
  }

  /* --- menu "plus d'actions" (regroupe les actions secondaires sur mobile/tablette) --- */
  .header-more-wrap{ position:relative; display:inline-flex; }
  .more-menu-btn{ display:none; }
  .header-more-panel{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
  @media (max-width: 1023px){
    .more-menu-btn{ display:inline-flex; }
    .header-more-panel{
      display:none; position:absolute; right:0; top:calc(100% + 8px); z-index:50;
      flex-direction:column; align-items:stretch; gap:4px; padding:6px;
      background:var(--panel); border:1px solid var(--border); border-radius:10px;
      box-shadow:0 12px 28px -8px rgba(0,0,0,0.5); min-width:210px;
    }
    .header-more-panel.open{ display:flex; }
    .header-more-panel .icon-btn{ width:100% !important; justify-content:flex-start !important; }
    .header-more-panel .hide-mobile{ display:inline !important; }
  }

  /* --- navigation entre les 2 pages (Saisie / Résultats) --- */
  .view-nav{ display:flex; gap:6px; }
  .view-tab{
    font-family:'Oswald',sans-serif; letter-spacing:0.03em; text-transform:uppercase;
    font-size:12.5px; font-weight:600;
    padding:8px 14px; border-radius:8px 8px 0 0;
    color:var(--text-dim); border:1px solid transparent;
    text-decoration:none; display:inline-flex; align-items:center; gap:6px;
    transition:all .12s ease;
  }
  .view-tab:hover{ color:var(--text); background:var(--panel-2); }
  .view-tab.active{
    color:var(--text); background:var(--panel);
    border:1px solid var(--border-soft); border-bottom-color:var(--panel);
  }
  .results-summary-bar{
    display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  }
  .saisie-preview{
    text-align:center; padding:28px 20px;
  }
  @media print{ .view-nav{ display:none !important; } }

/* ===========================================================================
   5. Utilitaires de mise en page
   ---------------------------------------------------------------------------
   Remplacent le compilateur Tailwind qui était téléchargé depuis Internet et
   exécuté dans le navigateur à chaque ouverture (≈400 ko). Seules les classes
   réellement présentes dans la page sont définies ici.
   =========================================================================== */

.block{display:block}
.hidden{display:none}
.flex{display:flex}
.inline-flex{display:inline-flex}
.grid{display:grid}
.relative{position:relative}
.fixed{position:fixed}
.sticky{position:sticky}
.inset-0{top:0;right:0;bottom:0;left:0}
.top-0{top:0}
.z-30{z-index:30}
.z-40{z-index:40}
.z-50{z-index:50}

.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.flex-nowrap{flex-wrap:nowrap}
.flex-1{flex:1 1 0%}
.flex-none{flex:none}
.items-start{align-items:flex-start}
.items-center{align-items:center}
.items-end{align-items:flex-end}
.items-baseline{align-items:baseline}
.justify-between{justify-content:space-between}
.justify-center{justify-content:center}
.justify-end{justify-content:flex-end}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.gap-1{gap:.25rem}
.gap-1\.5{gap:.375rem}
.gap-2{gap:.5rem}
.gap-3{gap:.75rem}

.w-full{width:100%}
.w-1\.5{width:.375rem}
.w-2{width:.5rem}
.w-4{width:1rem}
.h-1\.5{height:.375rem}
.h-2{height:.5rem}
.h-4{height:1rem}
.min-w-0{min-width:0}
.min-h-screen{min-height:100vh}
.max-w-5xl{max-width:64rem}
.max-h-\[92vh\]{max-height:92vh}

.mx-auto{margin-left:auto;margin-right:auto}
.mx-4{margin-left:1rem;margin-right:1rem}
.mt-0\.5{margin-top:.125rem}
.mt-1{margin-top:.25rem}
.mt-1\.5{margin-top:.375rem}
.mt-2{margin-top:.5rem}
.mt-2\.5{margin-top:.625rem}
.mt-3{margin-top:.75rem}
.mt-4{margin-top:1rem}
.-mt-1{margin-top:-.25rem}
.mb-1{margin-bottom:.25rem}
.mb-2{margin-bottom:.5rem}
.mb-3{margin-bottom:.75rem}
.mb-4{margin-bottom:1rem}
.mb-5{margin-bottom:1.25rem}
.mb-6{margin-bottom:1.5rem}

.p-0{padding:0}
.p-3{padding:.75rem}
.p-4{padding:1rem}
.p-5{padding:1.25rem}
.p-10{padding:2.5rem}
.px-1{padding-left:.25rem;padding-right:.25rem}
.px-1\.5{padding-left:.375rem;padding-right:.375rem}
.px-2{padding-left:.5rem;padding-right:.5rem}
.px-2\.5{padding-left:.625rem;padding-right:.625rem}
.px-3{padding-left:.75rem;padding-right:.75rem}
.px-4{padding-left:1rem;padding-right:1rem}
.py-1{padding-top:.25rem;padding-bottom:.25rem}
.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}
.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem}
.pt-3{padding-top:.75rem}
.pt-4{padding-top:1rem}
.pb-1{padding-bottom:.25rem}
.pb-4{padding-bottom:1rem}
.pb-24{padding-bottom:6rem}
.pr-10{padding-right:2.5rem}

.text-center{text-align:center}
.text-right{text-align:right}
.text-\[10px\]{font-size:10px}
.text-\[11px\]{font-size:11px}
.text-xs{font-size:12px}
.text-sm{font-size:14px}
.text-xl{font-size:20px}
.text-3xl{font-size:30px;line-height:1.15}
.font-medium{font-weight:500}
.font-semibold{font-weight:600}
.font-bold{font-weight:700}
.uppercase{text-transform:uppercase}
.tracking-widest{letter-spacing:.1em}
.leading-snug{line-height:1.375}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.whitespace-nowrap{white-space:nowrap}

.overflow-x-auto{overflow-x:auto}
.overflow-y-auto{overflow-y:auto}
.rounded-md{border-radius:6px}
.rounded-lg{border-radius:8px}
.rounded-xl{border-radius:12px}
.rounded-full{border-radius:9999px}
.rounded-t-2xl{border-top-left-radius:16px;border-top-right-radius:16px}
.border-b{border-bottom-width:1px;border-bottom-style:solid;border-color:var(--border-soft)}

@media (min-width:640px){
  .sm\:flex-row{flex-direction:row}
  .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sm\:items-center{align-items:center}
  .sm\:max-w-sm{max-width:24rem}
  .sm\:max-w-md{max-width:28rem}
  .sm\:max-w-lg{max-width:32rem}
  .sm\:mx-6{margin-left:1.5rem;margin-right:1.5rem}
  .sm\:p-4{padding:1rem}
  .sm\:p-6{padding:1.5rem}
  .sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}
  .sm\:rounded-2xl{border-radius:16px}
}

/* ===========================================================================
   6. La feuille de route (direction A) et la porte chauffeur (direction C)
   ---------------------------------------------------------------------------
   Cette couche vient après les styles historiques et les redéfinit là où c'est
   nécessaire. Principe : la date sort des lignes pour devenir un en-tête de
   journée collant, l'heure passe en colonne à gauche, et le statut devient une
   arête de couleur lisible du coin de l'œil.
   =========================================================================== */

/* --- 6.0 Corrections de base ---------------------------------------------- */

body{
  font-size:16px;          /* lisible dehors et la nuit ; 14 px auparavant */
  line-height:1.45;
  overflow-x:hidden;       /* aucun défilement latéral, y compris en 320 px */
}

/* Le gris estompé servait aux horaires, aux durées et aux nombres de passagers
   en 11 px — soit exactement ce qu'on lit dehors, la nuit, à bout de bras. Il
   plafonnait à 3,4:1 en thème sombre et 4,1:1 en clair, sous le seuil de 4,5:1.
   Ces deux valeurs le ramènent au-dessus, sans changer la teinte. */
:root{ --text-faint:#7C8794; }              /* sombre : 4,5:1 sur le panneau */
body[data-theme="light"]{ --text-faint:#656F7C; }  /* clair : 4,7:1 sur le fond */

/* Repère de couleur commun aux deux directions. */
:root{ --focus:rgba(240,168,60,0.55); }
body[data-theme="light"]{ --focus:rgba(193,122,10,0.45); }

:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }

.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;
}

/* Cibles tactiles : le doigt d'un chauffeur, pas la souris d'un graphiste. */
select,input[type="text"],input[type="password"],input[type="date"],
input[type="time"],input[type="number"]{ min-height:44px; }

/* Le logo du festival et les deux onglets ne tiennent pas côte à côte sur un
   écran de 320 px : la ligne débordait et faisait défiler toute la page
   latéralement. On réduit le logo plutôt que de le supprimer. */
.view-nav{ flex-wrap:wrap; }
.view-nav img{ max-width:34vw; height:auto; }
@media (max-width:400px){
  .view-nav img{ height:20px !important; }
}

/* Bouton HOME : présent sur tous les écrans, il ramène à la page Critères
   sans aucun filtre. Volontairement discret — c'est un recours, pas une
   destination fréquente. */
.home-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:8px;
  border:1px solid var(--border);background:var(--panel-2);color:var(--text-dim);
  flex:none;cursor:pointer;
  transition:background .12s ease,color .12s ease,border-color .12s ease;
}
.home-btn:hover{ background:var(--panel);color:var(--text);border-color:var(--text-faint); }
.home-btn:active{ transform:scale(0.96); }

/* --- 6.1 En-tête de journée ----------------------------------------------- */

.day-head{
  position:sticky;
  top:var(--sticky-offset,0px);
  z-index:20;
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:9px 14px;
  margin:0 0 2px;
  background:var(--panel-2);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  border-radius:6px 6px 0 0;
}
.day-head .day-name{
  font-family:'Oswald',sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:0.04em;
  font-size:15px;color:var(--text);
}
.day-head .day-name .day-today{ color:var(--progress); }
.day-head .day-count{
  font-family:'JetBrains Mono',monospace;font-size:11px;
  color:var(--text-faint);text-align:right;min-width:0;
}
.day-head .day-total{ white-space:nowrap; }
/* Sur un écran étroit, le détail par statut ferait déborder la ligne : on ne
   garde que le nombre de courses. L'arête de couleur de chaque ligne dit déjà
   où en est la journée. */
@media (max-width:479px){
  .day-head .day-detail{ display:none; }
}
@media (min-width:480px){
  .day-head .day-detail{ white-space:nowrap; }
}

/* --- 6.2 La ligne de course ----------------------------------------------- */

.trip{
  display:grid;
  grid-template-columns:54px 1fr 9px;
  gap:12px;
  padding:11px 14px;
  border-bottom:1px solid var(--border-soft);
  align-items:start;
  background:var(--panel);
  position:relative;
}
.trip:last-child{ border-bottom:0; border-radius:0 0 6px 6px; }
.trip.is-now{ background:linear-gradient(90deg,rgba(240,168,60,0.10),transparent 60%); }
.trip.alert{ background:linear-gradient(90deg,var(--alert-bg),transparent 55%); }

.trip-time{
  font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;
  font-size:17px;font-weight:700;letter-spacing:-0.02em;
  padding-top:1px;color:var(--text);
}
.trip-time .trip-time-note{
  display:block;margin-top:2px;
  font-family:'Oswald',sans-serif;font-weight:500;
  font-size:9.5px;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--text-faint);
  white-space:normal;line-height:1.25;
}
.trip-main{ min-width:0; }
.trip-route{
  font-size:16px;font-weight:600;line-height:1.3;
  overflow-wrap:anywhere;    /* « Arrivée Poretta — vol Marseille » passe à la ligne */
}
.trip-route .arrow{ color:var(--text-faint);padding:0 4px;font-weight:400; }
.trip-meta{ display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:5px; }
.trip-note{
  font-size:13.5px;color:var(--text-dim);margin-top:5px;line-height:1.4;
  overflow-wrap:anywhere;
}
.trip-note.is-alert{ color:var(--alert); }

/* L'arête de statut : on la lit sans lire le mot. */
.trip-state{ align-self:stretch;border-radius:3px;background:var(--todo);min-height:26px; }
.trip-state.status-progress{ background:var(--progress); }
.trip-state.status-done{ background:var(--done); }
.trip.status-done .trip-time,
.trip.status-done .trip-route{ opacity:0.62; }

/* Actions de régie : une seconde ligne, sous l'itinéraire. */
.trip-admin{
  grid-column:2 / 3;
  display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  margin-top:8px;
}
.trip-admin .seg-btn{ padding:7px 10px;font-size:12px; }
.trip-admin .icon-btn{ width:34px;height:34px; }

/* --- 6.2 bis  Régie en poche : le panneau d'actions ------------------------
   Sous 1024 px, les boutons de statut quittent la ligne : trois cibles serrées
   dans une carte sont intouchables au pouce, et on en déclenche une par erreur
   en faisant défiler d'une main. Un appui sur la ligne ouvre le panneau. */

@media (max-width:1023px){
  .trip-admin{ display:none; }
  .trip.is-tappable{ cursor:pointer; }
  .trip.is-tappable:active{ background:var(--panel-2); }
}
@media (min-width:1024px){
  /* Sur grand écran, la souris est précise : les boutons restent sur la ligne
     et l'appui sur la ligne n'ouvre rien. */
  .trip.is-tappable{ cursor:default; }
}

.sheet-backdrop{
  position:fixed; inset:0; z-index:50;
  display:flex; align-items:flex-end; justify-content:center;
}
.sheet{
  width:100%; max-width:560px;
  background:var(--panel);
  border-top:1px solid var(--border);
  border-radius:16px 16px 0 0;
  padding:10px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  display:flex; flex-direction:column; gap:14px;
  box-shadow:0 -12px 34px -14px rgba(0,0,0,0.8);
  max-height:88vh; overflow-y:auto;
}
.grab{ width:38px;height:4px;border-radius:99px;background:var(--border);margin:0 auto 2px;flex:none; }
.sheet-route{
  font-size:17px;font-weight:700;line-height:1.3;margin:3px 0 3px;
  overflow-wrap:anywhere;
}
.sheet-route .arrow{ color:var(--text-faint);padding:0 5px;font-weight:400; }

.stat-tiles{ display:grid;grid-template-columns:repeat(3,1fr);gap:8px; }
.stat-tile{
  padding:13px 6px;border-radius:9px;text-align:center;min-height:48px;
  border:1px solid var(--border);background:var(--panel-2);color:var(--text-dim);
  font-size:12.5px;font-weight:600;line-height:1.3;cursor:pointer;
}
.stat-tile .stat-symbol{ display:block;font-size:17px;margin-bottom:3px;font-weight:400; }
.stat-tile.is-todo{ background:rgba(124,139,158,0.22);border-color:var(--todo);color:var(--text); }
.stat-tile.is-progress{ background:rgba(240,168,60,0.18);border-color:var(--progress);color:var(--progress); }
.stat-tile.is-done{ background:rgba(63,211,160,0.16);border-color:var(--done);color:var(--done); }

.sheet-act{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:13px 2px;min-height:48px;
  border-top:1px solid var(--border-soft);
  font-size:15px;color:var(--text);text-align:left;cursor:pointer;
}
.sheet-act.is-danger{ color:var(--alert); }

@media (prefers-reduced-motion:no-preference){
  @keyframes sheetUp{ from{ transform:translateY(100%); } to{ transform:translateY(0); } }
  /* Sélecteur assez spécifique pour battre `.modal-backdrop > div`, qui
     applique sinon l'animation des modales centrées. */
  .modal-backdrop > .sheet{ animation:sheetUp .2s cubic-bezier(.2,.8,.2,1); }
}

/* --- 6.3 Le repère « maintenant » ----------------------------------------- */

.now-line{ display:flex;align-items:center;gap:8px;padding:5px 14px;background:var(--panel); }
.now-line .bar{ flex:1;height:1px;background:var(--progress); }
.now-line .now-label{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.14em;
  color:var(--progress);white-space:nowrap;
}

/* --- 6.4 Pastilles ---------------------------------------------------------
   Les chauffeurs ne sont plus colorés au hasard : neuf teintes tirées d'un
   hachage entraient en collision avec les couleurs de statut (le vert
   « Terminé » et le vert d'un prénom se confondaient). La couleur ne sert
   désormais qu'à l'état d'une course. */

/* Le chauffeur sélectionné. Le bleu est la seule teinte encore libre : gris,
   ambre, vert et rose sont pris par les quatre états d'une course. La réserver
   à « c'est vous » évite de rejouer la confusion des pastilles colorées au
   hasard, où le vert d'un prénom se confondait avec le vert « Terminé ».

   Pastille pleine, et non un simple contour : sur une puce de cette taille, un
   liseré d'un pixel se remarque à peine au milieu de trois autres prénoms. */
:root{ --on-accent-blue:#0A1922; }
body[data-theme="light"]{ --on-accent-blue:#FFFFFF; }

.badge.is-driver.is-me{
  background:var(--date-accent);
  border-color:var(--date-accent);
  color:var(--on-accent-blue);
  font-weight:700;
  letter-spacing:0.01em;
}

.badge.is-driver{
  background:var(--panel-2);
  color:var(--text);
  border:1px solid var(--border);
  font-weight:600;
}
.badge.is-alert{ background:var(--alert-bg);color:var(--alert);border:1px solid var(--alert-border); }
.meta-text{
  font-family:'JetBrains Mono',monospace;font-size:11px;
  color:var(--text-faint);white-space:nowrap;
}

/* --- 6.4 bis  Tableau de régie (≥ 1024 px) ---------------------------------
   Sur l'ordinateur de régie, la journée tient à l'écran sans défilement.
   Faire avancer une course revient à la glisser d'une colonne à l'autre. */

.regie{ display:flex;flex-direction:column;gap:14px;margin-bottom:24px; }

.reg-hero{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:14px 18px;border-radius:10px;
  background:linear-gradient(90deg,rgba(240,168,60,0.16),rgba(240,168,60,0.02));
  border:1px solid var(--border);
}
.reg-hero-route{
  font-family:'Oswald',sans-serif;font-weight:700;font-size:24px;line-height:1.15;
  margin:2px 0;text-transform:uppercase;letter-spacing:0.01em;
}
.reg-hero-route .arrow{ color:var(--text-faint);padding:0 8px;font-weight:400; }
.reg-kpi{ display:flex;gap:22px;flex-wrap:wrap; }
.reg-kpi div{ display:flex;flex-direction:column;gap:2px; }
.reg-kpi b{
  font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;
  font-size:22px;font-weight:600;line-height:1;
}

.reg-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;align-items:start;
}
.reg-col{
  display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--border-soft);border-radius:10px;
  padding:10px;min-height:180px;
  transition:background .12s ease,border-color .12s ease;
}
.reg-col.is-over{ border-color:var(--progress);background:var(--panel-2); }
.reg-colhead{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding-bottom:8px;margin-bottom:10px;border-bottom:2px solid var(--border);
}
.reg-colhead.is-todo{ border-bottom-color:var(--todo); }
.reg-colhead.is-progress{ border-bottom-color:var(--progress); }
.reg-colhead.is-done{ border-bottom-color:var(--done); }
.reg-coltitle{
  font-family:'Oswald',sans-serif;font-weight:600;font-size:15px;
  text-transform:uppercase;letter-spacing:0.04em;
}
.reg-colhead.is-todo .reg-coltitle{ color:var(--todo); }
.reg-colhead.is-progress .reg-coltitle{ color:var(--progress); }
.reg-colhead.is-done .reg-coltitle{ color:var(--done); }
.reg-colbody{ display:flex;flex-direction:column;gap:8px; }

.reg-card{
  background:var(--panel-2);border:1px solid var(--border-soft);
  border-left:3px solid var(--todo);border-radius:6px;
  padding:9px 11px;display:flex;flex-direction:column;gap:4px;
  cursor:grab;
}
.reg-card:active{ cursor:grabbing; }
.reg-card.status-progress{ border-left-color:var(--progress);background:rgba(240,168,60,0.07); }
.reg-card.status-done{ border-left-color:var(--done);opacity:0.66; }
.reg-card.alert{ border-left-color:var(--alert); }
.reg-card.is-dragging{ opacity:0.45; }
.reg-card-top{ display:flex;align-items:baseline;justify-content:space-between;gap:8px; }
.reg-card-time{ font-size:15px;font-weight:700;font-variant-numeric:tabular-nums; }
.reg-card-route{ font-size:14px;font-weight:600;line-height:1.3;overflow-wrap:anywhere; }
.reg-card-route .arrow{ color:var(--text-faint);padding:0 4px;font-weight:400; }
.reg-card-alert{ font-size:12.5px;color:var(--alert);line-height:1.35;overflow-wrap:anywhere; }

.reg-add{
  border:1px dashed var(--border);border-radius:6px;
  padding:11px;text-align:center;color:var(--text-faint);
  font-size:13.5px;cursor:pointer;background:transparent;
}
.reg-add:hover{ color:var(--text);border-color:var(--text-faint); }
.reg-hint{
  text-align:center;padding:22px 8px;line-height:1.6;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:0.06em;
  color:var(--text-faint);
}
.reg-foot{ text-align:center; }

/* --- 6.5 Porte chauffeur --------------------------------------------------- */

.ch-wrap{ padding:0 0 24px; }

.ch-switch{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;border-bottom:1px solid var(--border-soft);
}
.ch-who{ font-family:'Oswald',sans-serif;font-weight:600;font-size:17px;letter-spacing:0.02em; }

.ch-hero{
  padding:20px 16px 18px;
  background:linear-gradient(160deg,rgba(240,168,60,0.20),transparent 70%);
  border-bottom:1px solid var(--border);
  display:flex;flex-direction:column;gap:10px;
}
.ch-kicker{ font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--text-dim); }
.ch-kicker .soon{ color:var(--progress);font-weight:700; }
.ch-time{
  font-family:'Oswald',sans-serif;font-weight:700;
  font-size:52px;line-height:0.85;letter-spacing:-0.01em;
}
.ch-route{ font-size:21px;font-weight:700;line-height:1.3;overflow-wrap:anywhere; }
.ch-route .sep{ color:var(--text-faint);font-weight:400; }
.ch-state{ display:flex;align-items:center;gap:8px;flex-wrap:wrap; }

.btn-quiet{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 18px;border-radius:9px;width:100%;
  background:transparent;border:1px solid var(--border);color:var(--text-dim);
  font-weight:600;font-size:14px;cursor:pointer;
}

.ch-section{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px 8px;
}
.ch-section .ch-section-title{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--text-faint);
}
.ch-empty{ padding:34px 20px;text-align:center;color:var(--text-dim);line-height:1.6; }

/* Choix du prénom : ce n'est pas une connexion, juste un réglage d'affichage. */
.ch-pick{ display:flex;flex-wrap:wrap;gap:8px;padding:14px; }
.ch-pick .driver-chip{ min-height:44px;font-size:14px;padding:8px 14px; }

/* --- 6.6 Impression -------------------------------------------------------- */

@media print{
  .day-head{ position:static !important;break-after:avoid; }
  .trip{ break-inside:avoid; }
  .now-line,.ch-hero,.ch-switch,.ch-pick{ display:none !important; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
}