/* ---------------------------------------------------------
   PPDLV — Styles du formulaire et des résultats
   (Commentaires FR, aucune modification fonctionnelle)
   --------------------------------------------------------- */

/* ===================== Variables & conteneur ===================== */
/* Palette/variables utilisées par le formulaire et les cartes */
#ppdl-portal{
  --bg:#ffffff;           /* Couleur de fond générale (non utilisée directement) */
  --panel:#ffffff;        /* Fond du panneau/formulaire */
  --fg:#0f172a;           /* Couleur de texte principale */
  --muted:#64748b;        /* Texte atténué (labels, hints) */
  --border:#e5e7eb;       /* Couleur des bordures */
  --accent:#0b5bd3;       /* Couleur principale (bouton, focus) */
  --accent-ink:#0a3c8c;   /* Variante plus foncée pour dégradé bouton */
  --danger:#ef4444;       /* Couleur d’erreur (invalid) */
  --ok:#16a34a;           /* Couleur succès (si besoin) */
  --shadow:0 12px 28px rgba(2,6,23,.10), 0 2px 6px rgba(2,6,23,.04); /* Ombres panel */
}

/* Contrainte max + padding du conteneur portail */
#ppdl-portal{
  max-width:900px;
  margin:0 auto;
  padding:24px;
}

/* ===================== Card / Formulaire ===================== */
#ppdl-form{
  /* Police système pour un rendu natif et rapide */
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;

  /* Couleurs */
  color:var(--fg);
  background:linear-gradient(180deg, rgba(11,91,211,.03), transparent 120%), var(--panel);

  /* Apparence du panneau */
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow);

  /* Layout */
  padding:22px;
  display:grid;
  gap:16px;
}

/* ===================== Helpers de grille ===================== */
.grid{ display:grid; gap:12px; }

/* Ligne : [From] [Swap] [To] */
.grid-3{
  grid-template-columns:1fr 56px 1fr;
  align-items:end;             /* Aligne les champs avec le bouton swap */
}

/* Ligne : [Date] [Heure] */
.grid-2{ grid-template-columns:1fr 1fr; }

/* Adaptation mobile : réduis la largeur du bouton et passe la 2e grille en une colonne */
@media (max-width:680px){
  .grid-3{ grid-template-columns:1fr 48px 1fr; }
  .grid-2{ grid-template-columns:1fr; }
}

/* ===================== Groupes de champs ===================== */
/* Positionnement nécessaire au label flottant */
.fg{ position:relative; }

/* Inputs & Selects (taille, padding, base visuelle) */
.fg select,
.fg input[type="date"],
.fg input[type="time"]{
  width:100%;
  min-height:52px;
  padding:16px 14px 12px 14px;
  background:#fff;
  color:var(--fg);

  border:1px solid var(--border);
  border-radius:12px;
  outline:none;

  /* micro animations : focus/hover */
  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    background .15s ease,
    transform .06s ease;
}

/* Label flottant (position initiale par-dessus le champ) */
.fg label{
  position:absolute;
  left:14px;
  top:14px;
  font-size:.95rem;
  color:var(--muted);
  pointer-events:none;

  /* petit “cache” blanc pour éviter de couper la bordure sur overlap */
  background:linear-gradient(180deg, transparent 40%, #fff 41%);
  padding:0 4px 0 0;

  transform-origin:left top;
  transition:
    top .12s ease,
    font-size .12s ease,
    color .12s ease,
    transform .12s ease,
    background .12s ease;
}

/* États “focus” et “rempli” pour faire remonter/rétrécir le label (CSS :has) */
.fg:has(select:focus) label,
.fg:has(input:focus) label,
.fg:has(select:not([value=""])) label,
.fg:has(input[value]:not([value=""])) label{
  top:-8px;
  font-size:.78rem;
  color:var(--accent);
  /* Préserve l’illusion du label flottant sur fond de panel */
  background:linear-gradient(180deg, transparent 40%, var(--panel) 41%);
}

/* ===================== Select : flèche custom minimaliste ===================== */
.fg select{
  appearance:none;           /* cache l’UI native */
  cursor:pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, #94a3b8 50%),
    linear-gradient(135deg, #94a3b8 50%, transparent 50%),
    linear-gradient(to right, #cbd5e1, #cbd5e1);
  background-position:
    calc(100% - 18px) 52%,
    calc(100% - 13px) 52%,
    calc(100% - 36px) 50%;
  background-size:
    5px 5px, 5px 5px, 1px 60%;
  background-repeat:no-repeat;
}

/* ===================== Focus ring / Accessibilité ===================== */
.fg select:focus,
.fg input:focus{
  border-color:color-mix(in oklab, var(--accent) 78%, #0000);
  box-shadow:
    0 0 0 4px color-mix(in oklab, var(--accent) 20%, #0000),
    inset 0 0 0 1px color-mix(in oklab, var(--accent) 55%, #0000);
}

/* ===================== État invalid (validation simple) ===================== */
.invalid select,
.invalid input{
  border-color: color-mix(in oklab, var(--danger) 75%, #0000);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger) 18%, #0000);
}

/* ===================== Hint (petit texte d’aide) ===================== */
.hint{
  font-size:.86rem;
  color:var(--muted);
}

/* ===================== Bouton SWAP (inverser départ/arrivée) ===================== */
#ppdl_swap{
  min-height:52px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;

  transition:
    transform .06s ease,
    background .15s ease,
    border-color .15s ease,
    box-shadow .15s ease;

  box-shadow: 0 1px 2px rgba(2,6,23,.06);
}

/* État hover : un peu de relief */
#ppdl_swap:hover{
  background:#f8fafc;
  border-color:#dbe3ee;
  box-shadow: 0 4px 12px rgba(2,6,23,.08);
}

/* État active : micro “press” */
#ppdl_swap:active{ transform: scale(.98); }

/* Icône swap : taille et opacité */
#ppdl_swap svg{
  width:22px;
  height:22px;
  opacity:.9;
}

/* ===================== Bouton “Rechercher” (CTA principal) ===================== */
#ppdl_go{
  appearance:none;
  border:0;
  border-radius:12px;
  background:linear-gradient(180deg, var(--accent), var(--accent-ink));
  color:#fff;

  font-weight:700;
  letter-spacing:.01em;

  min-height:52px;
  padding:14px 18px;
  cursor:pointer;

  box-shadow:0 10px 22px color-mix(in oklab, var(--accent) 28%, #0000);
  transition: filter .12s ease, transform .04s ease, box-shadow .15s ease;
}

/* Hover : petite élévation */
#ppdl_go:hover{
  filter:brightness(.98);
  box-shadow:0 12px 26px color-mix(in oklab, var(--accent) 35%, #0000);
}

/* Active : effet “press” */
#ppdl_go:active{ transform: translateY(1px); }

/* Disabled : look désactivé (pendant chargement) */
#ppdl_go[disabled]{
  opacity:.65;
  cursor:not-allowed;
  box-shadow:none;
}

/* ===================== Mode sombre (préférences OS) ===================== */
@media (prefers-color-scheme: dark){
  #ppdl-portal{
    --bg:#0b1220;
    --panel:#0c1323;
    --fg:#e5e7eb;
    --muted:#a3aab8;
    --border:#1f2937;
    --shadow:0 10px 26px rgba(0,0,0,.36), 0 1px 4px rgba(0,0,0,.25);
  }

  .fg select,
  .fg input{
    background:#0b1220;
    color:var(--fg);
    border-color:var(--border);
  }

  #ppdl_swap{
    background:#0b1220;
    border-color:var(--border);
  }

  /* Le cache du label doit matcher la couleur du panel sombre */
  .fg label{
    background:linear-gradient(180deg, transparent 40%, #0c1323 41%);
  }
}

/* ===================== Loader (spinner utilisé dans le bouton) ===================== */
@keyframes spin{
  to{ transform:rotate(360deg); }
}
.loader{
  display:inline-block;
  width:14px; height:14px;
  border:2px solid #fff;                 /* cercle blanc */
  border-right-color:transparent;         /* segment transparent pour l’effet spinner */
  border-radius:50%;
  vertical-align:-2px;
  animation:spin .7s linear infinite;
  margin-left:8px;                        /* espace après le libellé */
}

/* ===================== Résultats : conteneur de cartes ===================== */
.ppdl-results{
  margin-top:14px;
  display:grid;
  gap:10px;
}

/* Carte trajet (container) */
.tripcard{
  border:1px solid var(--pp-border, #e5e7eb);
  border-radius:14px;
  background:#fff;
  overflow:hidden;
}

/* En-tête de carte (ligne, durée, heures, timeline) */
.tripcard__head{
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-auto-rows:min-content;
  gap:6px 12px;
  padding:12px 14px;
  align-items:center;
  cursor:pointer;             /* surface cliquable pour ouvrir/fermer les détails */
}

/* Date en haut à droite (si fournie) */
.tripcard__date{
  grid-column:1 / -1;
  justify-self:end;
  white-space:nowrap;
  font-weight:800;
  color:var(--pp-muted, #64748b);
  margin-bottom:2px;
}

/* Ligne : badge + libellé tronqué */
.tripcard__line{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  grid-column:1 / 3;
}

/* Badge de ligne (code ligne/légende)  */
.line-badge{
  flex:0 0 auto;
  min-width:2.2rem;
  text-align:center;
  padding:3px 8px;
  border-radius:6px;
  font-weight:900;
  font-size:14px;
  background:var(--pp-accent, #0b5bd3);
  color:#fff;
}

/* Libellé de ligne (tronqué si trop long) */
.line-head{
  flex:1 1 auto;
  min-width:0;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-weight:800;
}

/* Durée (à droite) */
.tripcard__dur{
  grid-column:3;
  justify-self:end;
  align-self:center;
  font-weight:800;
  color:var(--pp-muted, #64748b);
}

/* Ligne heures + timeline */
.tripcard__time{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  gap:10px;
}

/* Heures en police tabulaire */
.t{
  font-weight:900;
  font-size:16px;
  font-variant-numeric:tabular-nums;
}

/* Timeline (barre + points) */
.timeline{
  position:relative;
  flex:1;
  height:12px;
  display:flex;
  align-items:center;
}
.timeline .bar{
  position:absolute;
  left:0px; right:0px;
  height:2px;
  background:#111827;
  opacity:.85;
}
.dot{
  width:12px; height:12px;
  border-radius:50%;
  background:#111827;
  position:relative;
}
.dot--start{ background:#dc2626; } /* point de départ rouge */
.dot--end{ margin-left:auto; }     /* point d’arrivée aligné à droite */

/* ===================== Détails : liste des arrêts ===================== */
.tripcard__details{
  border-top:1px solid #f3f4f6;
  background:#fafafa;
  padding:12px 14px;
}

/* Une ligne par arrêt */
.stoprow{
  display:grid;
  grid-template-columns:18px 1fr; /* [rail] [nom arrêt] */
  gap:10px;
}

/* Variantes de points (couleurs) */
.stopdot--red{ background:#dc2626; }

/* Barre verticale du “rail” entre les arrêts */
.stopbar{
  position:absolute;
  left:8px;
  top:12px;     /* ↑ augmenter cette valeur = barre plus courte au-dessus du point */
  bottom:-10px;  /* ↑ rapprocher de 0 (ex: -2px) = barre plus courte vers le bas
                   ↓ rendre plus négatif (ex: -10px) = barre plus longue */
  width:2px;    /* épaisseur de la barre */
  background:#9ca3af;
}

/* Mise en avant du premier et/ou dernier arrêt */
.stoprow__name.strong{ font-weight:900; }

/* Grille d’arrêts (détails) */
.detail__stops{ display:grid; gap:8px; }

/* Premier arrêt = rouge */
.detail__stops .stoprow:first-child  .stopdot{ background:#dc2626; }
/* Dernier arrêt = noir */
.detail__stops .stoprow:last-child   .stopdot{ background:#111827; }
/* Arrêts intermédiaires = gris */
.detail__stops .stoprow:not(:first-child):not(:last-child) .stopdot{ background:#9ca3af; }

/* Rail + points (dimensions/position) */
.stoprow__rail{
  position:relative;
  min-height:16px;
}
.stopdot{
  width:10px; height:10px;
  border-radius:50%;
  display:block;
  margin:2px 4px;
  position:relative;
  z-index:1;
}
/* =========================================================
   Smartphone — optimisations < 480px
   (Empilement vertical, cibles tactiles + grandes, lisibilité)
   ========================================================= */
@media (max-width: 480px){

  /* Conteneur global : marges/paddings compacts */
  #ppdl-portal{
    padding: 12px;
  }

  /* Carte formulaire : rayons et espacements réduits */
  #ppdl-form{
    border-radius: 14px;
    padding: 14px;
    gap: 12px;
  }

  /* Ligne De | Swap | À -> on empile tout en 1 colonne */
  .grid-3{
    grid-template-columns: 1fr;   /* 1 seule colonne sur mobile */
    gap: 10px;
  }

  /* Bouton d’inversion : pleine largeur + hauteur confortable */
  #ppdl_swap{
    width: 100%;
    min-height: 48px;
    border-radius: 10px;
  }
  #ppdl_swap svg{
    width: 20px;
    height: 20px;
  }

  /* Ligne Date | Heure -> 1 colonne */
  .grid-2{
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* Champs : tailles tactiles + empêcher zoom iOS (>=16px) */
  .fg select,
  .fg input[type="date"],
  .fg input[type="time"]{
    min-height: 52px;
    font-size: 16px;                 /* évite le zoom automatique iOS */
    padding: 14px 12px 10px 12px;    /* padding un peu réduit */
  }

  /* Label flottant : position adaptée au padding mobile */
  .fg label{
    left: 12px;
    top: 12px;
  }
  .fg:has(select:focus) label,
  .fg:has(input:focus) label,
  .fg:has(select:not([value=""])) label,
  .fg:has(input[value]:not([value=""])) label{
    top: -7px;
    font-size: .8rem;
  }

  /* Bouton Rechercher : pleine largeur + lisible au pouce */
  #ppdl_go{
    width: 100%;
    min-height: 52px;
    font-size: 16px;                 /* lisibilité + anti-zoom iOS */
  }

  /* Texte d’aide plus compact */
  .hint{
    font-size: .82rem;
  }
}

/* =========================================================
   Très petits écrans — < 360px
   (Affinage des tailles pour les formats étroits)
   ========================================================= */
@media (max-width: 360px){
  #ppdl-portal{
    padding: 10px;
  }
  #ppdl-form{
    padding: 12px;
    gap: 10px;
  }
  #ppdl_swap{
    min-height: 46px;
  }
  .fg select,
  .fg input[type="date"],
  .fg input[type="time"]{
    min-height: 50px;
    font-size: 16px;   /* on garde 16px pour iOS */
  }
  #ppdl_go{
    min-height: 50px;
    font-size: 16px;
  }
}

/* =========================================================
   Améliorations tactiles générales (optiques)
   ========================================================= */

/* Réduit le flash bleu lors du tap sur mobile */
#ppdl-form button,
#ppdl-form select,
#ppdl-form input{
  -webkit-tap-highlight-color: transparent;
}

/* Espace respirant entre le formulaire et les résultats sur mobile */
@media (max-width: 480px){
  .ppdl-results{
    margin-top: 12px;
    gap: 8px;
  }
}
/* Conteneur du champ */
#ppdl-portal .fg { position: relative; }

/* Input texte du typeahead */
#ppdl-portal .ppdl-ta {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--fg);
}

/* Liste des résultats */
#ppdl-portal .ppdl-ta-list {
  position: absolute;
  z-index: 30;
  left: 0; right: 0; top: calc(100% + 4px);
  max-height: 260px;
  overflow: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

/* Élément résultat */
#ppdl-portal .ppdl-ta-item {
  display: block;
  width: 100%;
  padding: 10px 12px;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}

#ppdl-portal .ppdl-ta-item:hover,
#ppdl-portal .ppdl-ta-item:focus {
  background: #f8fafc;
  outline: none;
}

/* Petites adaptations responsive */
@media (max-width: 640px){
  #ppdl-portal .grid.grid-3 { grid-template-columns: 1fr auto 1fr; gap: 10px; }
  #ppdl-portal #ppdl_swap { align-self: end; height: 42px; }
}
/* ================== Mobile-first layout ================== */
#ppdl-portal{
  --bg:#fff; --panel:#fff; --fg:#0f172a; --muted:#64748b; --border:#e5e7eb;
  --accent:#0b5bd3; --accent-ink:#0a3c8c;
  --shadow:0 12px 28px rgba(2,6,23,.10), 0 2px 6px rgba(2,6,23,.04);
  --gap:12px; --radius:12px;
  max-width: 900px;
  margin: 0 auto;
  padding: 16px;
}

#ppdl-form{ display:grid; gap: var(--gap); }

/* Grilles génériques */
#ppdl-portal .grid{ display:grid; gap: var(--gap); }

/* Par défaut (mobile) : tout en 1 colonne */
#ppdl-portal .grid.grid-3{ grid-template-columns: 1fr; }
#ppdl-portal .grid.grid-2{ grid-template-columns: 1fr; }

/* Champs (taille de police >= 16px pour éviter le zoom iOS) */
#ppdl-portal input[type="text"],
#ppdl-portal input[type="date"],
#ppdl-portal input[type="time"],
#ppdl-portal select{
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--fg);
  font-size: 16px;
  line-height: 1.2;
}

/* Bouton inverser : centré et tactile sur mobile */
#ppdl-portal #ppdl_swap{
  justify-self: center;
  width: 46px; height: 46px;
  border: 1px solid var(--border);
  border-radius: 9999px;
  background: var(--panel);
  display: grid; place-items: center;
  box-shadow: var(--shadow);
  cursor: pointer;
  touch-action: manipulation;
}
#ppdl-portal #ppdl_swap svg{ width: 22px; height: 22px; }

/* Bouton rechercher : plein écran sur mobile */
#ppdl-portal #ppdl_go{
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
#ppdl-portal #ppdl_go:active{ transform: translateY(1px); }

/* Autocomplete (typeahead) */
#ppdl-portal .fg{ position: relative; }
#ppdl-portal .ppdl-ta{ /* input texte pour les arrêts */
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--fg);
  font-size: 16px;
}
#ppdl-portal .ppdl-ta-list{
  position: absolute; z-index: 30;
  left: 0; right: 0; top: calc(100% + 6px);
  max-height: 40vh;
  overflow: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
#ppdl-portal .ppdl-ta-item{
  display:block; width:100%;
  padding: 12px;
  text-align:left;
  background: transparent; border:0; cursor:pointer;
}
#ppdl-portal .ppdl-ta-item:hover,
#ppdl-portal .ppdl-ta-item:focus{ background:#f8fafc; outline:none; }

/* Cartes de résultats */
#ppdl-portal .ppdl-card{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  box-shadow: var(--shadow);
  margin: 12px 0;
}
#ppdl-portal .ppdl-row{
  display:flex; flex-wrap:wrap;
  justify-content: space-between; align-items:center;
  gap: 8px; margin-bottom: 6px;
}
#ppdl-portal .ppdl-time{ font-size: 1.05rem; }
#ppdl-portal .ppdl-dur{ color: var(--muted); }
#ppdl-portal .ppdl-line{
  display:inline-block; min-width:2.2em; text-align:center;
  padding:2px 8px; border-radius:999px; font-weight:600;
  background: var(--line, #0B5BD3); color:#fff;
}
#ppdl-portal .ppdl-title{ margin-left: 6px; }
#ppdl-portal .ppdl-headsign{ margin-left:auto; color: var(--muted); }
#ppdl-portal .ppdl-stops summary{ cursor:pointer; color: var(--accent-ink); }
#ppdl-portal .ppdl-stops-list{ list-style:none; padding-left:0; margin:8px 0 0; }
#ppdl-portal .ppdl-stops-list li em{ color: var(--muted); font-style:normal; margin-left:6px; }
#ppdl-portal .ppdl-loading, #ppdl-portal .ppdl-empty, #ppdl-portal .ppdl-error{
  padding:10px 12px; border-radius:12px; border:1px dashed var(--border);
}

/* Accessibilité focus */
#ppdl-portal :focus-visible{
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* ================== Breakpoints ================== */
@media (min-width: 640px){
  #ppdl-portal{ padding: 24px; }
  #ppdl-portal .grid.grid-3{
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
  }
  #ppdl-portal .grid.grid-2{ grid-template-columns: 1fr 1fr; }
  #ppdl-portal #ppdl_go{ width: auto; justify-self: end; padding: 0 18px; }
  #ppdl-portal #ppdl_swap{ align-self: end; }
}

/* Libellé pour la section "Récents" dans la liste */
#ppdl-portal .ppdl-ta-legend{
  padding: 6px 10px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted, #64748b);
  border-bottom: 1px solid var(--border, #e5e7eb);
}
/* conteneur relatif autour des inputs */
#ppdl-portal .fg { position: relative; }

/* bouton "×" */
#ppdl-portal .ppdl-clear{
  position: absolute;
  right: 10px;
  top: 50%;                 /* <<--- IMPORTANT */
  transform: translateY(-50%);
  width: 34px; height: 34px;
  display: grid;
  opacity: .6;            /* visible seulement quand il y a du texte */
  place-items: center;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 999px;
  background: var(--panel, #fff);
  cursor: pointer;
  box-shadow: var(--shadow, 0 12px 28px rgba(2,6,23,.10), 0 2px 6px rgba(2,6,23,.04));
  z-index: 50;              /* <<--- AU-DESSUS de la liste d’autocomplétion */
  
}
/* La croix est toujours visible et au-dessus du champ */
#ppdl-portal .ppdl-clear { 
  display: grid !important;  /* écrase d'éventuels display:none plus haut */
  pointer-events: auto;
  z-index: 999;
  opacity: 1;
}
#ppdl-portal .fg { position: relative; }               /* conteneur référent */
#ppdl-portal .ppdl-clear svg { width:16px; height:16px; }

/* Flatpickr (calendrier) dans le bloc portail */
#ppdl-portal .flatpickr-calendar {
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(17,24,39,.15);
  font-family: inherit;

}
#ppdl-portal .flatpickr-months,
#ppdl-portal .flatpickr-weekdays {
  border-radius: 14px 14px 0 0;
}
#ppdl-portal .flatpickr-day.today { border-color: var(--ppdl-accent, #0B5BD3); }
#ppdl-portal .flatpickr-day.selected,
#ppdl-portal .flatpickr-day.startRange,
#ppdl-portal .flatpickr-day.endRange {
  background: var(--ppdl-accent, #0B5BD3);
  border-color: var(--ppdl-accent, #0B5BD3);
  color: #fff;
}
#ppdl-portal .flatpickr-time input {
  font-size: 14px;
}
/* ====== Typo uniquement pour les messages "Aucun service" ====== */
/* Portée stricte : dans #ppdl-portal, bloc résultats, classes .ppdl-empty* */

#ppdl-portal #ppdl_results .ppdl-empty,
#ppdl-portal .ppdl-results .ppdl-empty {
  font-size: clamp(0.96rem, 0.92rem + 0.2vw, 1.06rem);
  line-height: 1.45;
  /* Pas de margin/padding/layout modifiés */
}

/* Raison (jour sans service / plus de bus) */
#ppdl-portal #ppdl_results .ppdl-empty-reason,
#ppdl-portal .ppdl-results .ppdl-empty-reason {
  color: var(--fg, #334155);
  font-weight: 600;
  letter-spacing: .015em;
}

/* Prochain service (mise en valeur) */
#ppdl-portal #ppdl_results .ppdl-empty-next,
#ppdl-portal .ppdl-results .ppdl-empty-next {
  color: var(--accent, #0b5bd3);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  letter-spacing: .015em;
}

/* Mettre encore plus en avant les éléments en <strong> */
#ppdl-portal #ppdl_results .ppdl-empty strong,
#ppdl-portal .ppdl-results .ppdl-empty strong {
  font-weight: 800;
}

/* Optionnel : lecture confortable en dark mode (couleurs texte uniquement) */
@media (prefers-color-scheme: dark) {
  #ppdl-portal #ppdl_results .ppdl-empty-reason,
  #ppdl-portal .ppdl-results .ppdl-empty-reason {
    color: #e5e7eb;
  }
  #ppdl-portal #ppdl_results .ppdl-empty-next,
  #ppdl-portal .ppdl-results .ppdl-empty-next {
    color: #93c5fd;
  }
}