/* ============================================================
   style.css — Styles non-critiques (chargement différé)
   Complète le CSS critique inline de index.php
   ============================================================ */

/* Transitions douces sur les éléments interactifs */
.btn, .btn-icone, .chip-filtre, .carte-trajet, .barre-recherche-compacte {
  transition: background .15s ease, border-color .15s ease, transform .1s ease, opacity .15s ease;
}
.btn:active, .btn-icone:active, .chip-filtre:active {
  transform: scale(0.97);
}

/* État actif visuel (feedback tactile immédiat) */
.btn-icone:active, .chip-filtre:active, .mini-carte-similaire:active {
  background: #F1F3F5;
}

/* Focus visible clavier (accessibilité) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--vert, #009E60);
  outline-offset: 2px;
}

/* Scrollbars discrètes pour les carousels tactiles */
.carousel-similaires::-webkit-scrollbar,
.autocomplete-liste__options::-webkit-scrollbar,
.drawer-filtres__contenu::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
.carousel-similaires::-webkit-scrollbar-thumb,
.autocomplete-liste__options::-webkit-scrollbar-thumb,
.drawer-filtres__contenu::-webkit-scrollbar-thumb {
  background: #D1D5DB;
  border-radius: 4px;
}

/* Message "connexion lente" (affiché par app.js après timeout AJAX) */
.message-connexion-lente {
  text-align: center;
  font-size: 13px;
  color: var(--texte-2, #4A4A68);
  padding: 12px;
  background: #FFFBEA;
  border-radius: 12px;
  margin: 12px 16px;
}

/* Toast léger (favoris, partage, etc.) */
.toast-gc {
  position: fixed;
  left: 50%;
  bottom: 76px;
  transform: translateX(-50%);
  background: #111;
  color: #fff;
  font-size: 13px;
  padding: 10px 16px;
  border-radius: 10px;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, bottom .2s ease;
}
.toast-gc.visible {
  opacity: 1;
  bottom: 90px;
}
@media (min-width: 900px) {
  .toast-gc { bottom: 24px; }
  .toast-gc.visible { bottom: 40px; }
}

/* Bottom sheet de partage */
.sheet-partage {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: none;
}
.sheet-partage.ouvert { display: block; }
.sheet-partage__fond {
  position: absolute; inset: 0; background: rgba(0,0,0,.4);
}
.sheet-partage__panneau {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: #fff; border-radius: 20px 20px 0 0; padding: 20px 16px 28px;
}
.sheet-partage__titre {
  font-weight: 600; font-size: 15px; margin-bottom: 14px; text-align: center;
}
.sheet-partage__options {
  display: flex; justify-content: space-around; gap: 8px;
}
.sheet-partage__options button {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 12px; color: var(--texte-2, #4A4A68);
  min-width: 64px; min-height: 64px; justify-content: center;
}
.sheet-partage__options button span {
  font-size: 26px;
}

/* Impression (rarement utile, mais évite un rendu cassé) */
@media print {
  .header-mobile, .bottom-nav-mobile, .barre-recherche-compacte,
  .drawer-filtres, .modal-recherche, .cta-publier { display: none !important; }
}


/* ============ CSS CRITIQUE (above-the-fold, mobile-first) ============ */
:root{
  --vert:#009E60; --vert-dark:#007A4D; --vert-light:#E6F7F1;
  --rouge:#CE1126; --rouge-light:#FDECEA;
  --jaune:#FCD116; --jaune-light:#FFFBEA;
  --noir:#111111; --texte-2:#4A4A68; --texte-3:#9CA3AF;
  --bordure:#E2E8F0;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  font-family:'Poppins',sans-serif; color:var(--noir); background:#F7F9FA;
  padding-bottom:64px; /* place pour bottom-nav */
}
a{text-decoration:none;color:inherit;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
img{max-width:100%;display:block;}

/* Header mobile */
.header-mobile{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;background:#fff;position:sticky;top:0;z-index:40;
  border-bottom:1px solid var(--bordure);
}
.header-mobile .btn-menu{font-size:22px;min-width:48px;min-height:48px;}
.header-mobile .logo{font-weight:700;font-size:20px;color:var(--vert-dark);}
.header-mobile .logo span{color:var(--noir);}
.header-mobile .btn-profil{font-size:20px;min-width:48px;min-height:48px;text-align:right;}

.nav-desktop{display:none;}

/* Boutons génériques */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:52px;border-radius:16px;padding:0 20px;font-weight:600;font-size:15px;gap:8px;
  min-height:48px;
}
.btn--principal{background:var(--vert);color:#fff;flex:1 1 auto;}
.btn--principal:active{background:var(--vert-dark);}
.btn--secondaire{background:#fff;border:1px solid var(--bordure);color:var(--noir);flex:1 1 auto;}
.btn--attente{background:var(--jaune-light);color:#8a6d00;border:1px solid var(--jaune);flex:1 1 auto;}
.btn-icone{
  width:48px;height:48px;border-radius:14px;background:#fff;border:1px solid var(--bordure);
  display:flex;align-items:center;justify-content:center;font-size:18px;
}
.btn i,
.btn-icone i,
.btn-menu i,
.btn-profil i,
.resume-recherche__modifier i,
.barre-recherche-compacte__icone i,
.btn-ouvrir-filtres i,
.drawer-filtres__header button i,
.modal-recherche__header button i{
  line-height:1;
}
.btn-menu,
.btn-profil,
.drawer-filtres__header button,
.modal-recherche__header button{
  display:inline-grid;place-items:center;border-radius:14px;color:var(--texte-2);
}
.btn-menu:hover,
.btn-profil:hover,
.drawer-filtres__header button:hover,
.modal-recherche__header button:hover{
  background:#F3F4F6;color:var(--vert-dark);
}
.btn-favori.est-favori{color:var(--rouge);border-color:var(--rouge-light);background:var(--rouge-light);}

/* Zone recherche résumé */
.resume-recherche{
  position:sticky;top:0;z-index:35;background:#fff;padding:10px 16px;
  border-bottom:1px solid var(--bordure);display:flex;align-items:center;gap:10px;
}
.resume-recherche__texte{flex:1;font-size:14px;line-height:1.4;}
.resume-recherche__texte b{font-size:15px;}
.resume-recherche__modifier{font-size:13px;color:var(--vert-dark);font-weight:600;white-space:nowrap;}

/* Barre recherche rapide (carte compacte -> modal plein écran) */
.barre-recherche-compacte{
  margin:12px 16px;background:#fff;border:1px solid var(--bordure);border-radius:14px;
  padding:14px 16px;display:flex;align-items:center;gap:10px;box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.barre-recherche-compacte__icone{font-size:18px;}
.barre-recherche-compacte__texte{color:var(--texte-3);font-size:14px;}

.modal-recherche{
  position:fixed;inset:0;background:#fff;z-index:100;display:none;flex-direction:column;
  overflow-y:auto;padding:16px;
}
.modal-recherche.ouverte{display:flex;}
.modal-recherche__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;}
.modal-recherche__header h2{font-size:18px;margin:0;}
.champ{margin-bottom:14px;}
.champ label{display:block;font-size:13px;color:var(--texte-2);margin-bottom:6px;font-weight:500;}
.champ input, .champ select{
  width:100%;height:48px;border:1px solid var(--bordure);border-radius:12px;padding:0 14px;
  font-size:15px;font-family:inherit;background:#fff;
}
.champ-inverser{display:flex;justify-content:center;margin:-4px 0 10px;}
.champ-inverser button{width:40px;height:40px;border-radius:50%;background:var(--vert-light);color:var(--vert-dark);font-size:16px;}
.champs-rapides{display:flex;gap:8px;margin-top:8px;}
.champs-rapides button{
  flex:1;height:40px;border-radius:10px;border:1px solid var(--bordure);background:#fff;font-size:13px;
}
.stepper{display:flex;align-items:center;gap:14px;justify-content:center;}
.stepper button{width:40px;height:40px;border-radius:50%;border:1px solid var(--bordure);font-size:18px;background:#fff;}
.stepper span{font-size:18px;font-weight:600;min-width:24px;text-align:center;}
.autocomplete-liste{
  position:relative;
}
.autocomplete-liste__options{
  position:absolute;left:0;right:0;top:52px;background:#fff;border:1px solid var(--bordure);
  border-radius:12px;box-shadow:0 4px 16px rgba(0,0,0,.08);z-index:5;max-height:220px;overflow-y:auto;display:none;
}
.autocomplete-liste__options.visible{display:block;}
.autocomplete-liste__options button{
  width:100%;text-align:left;padding:12px 14px;font-size:14px;background:none;border:none;border-bottom:1px solid #F1F3F5;
}

/* Bouton filtres sticky */
.barre-filtres-tri{
  position:sticky;top:0;z-index:30;background:#F7F9FA;padding:10px 16px;
  display:flex;gap:8px;align-items:center;border-bottom:1px solid var(--bordure);
}
.btn-ouvrir-filtres{
  flex:0 0 auto;height:44px;border-radius:12px;border:1px solid var(--bordure);background:#fff;
  padding:0 14px;font-size:14px;font-weight:600;display:flex;align-items:center;gap:6px;
}
.btn-ouvrir-filtres .badge-nb{
  background:var(--vert);color:#fff;border-radius:20px;font-size:11px;padding:2px 7px;font-weight:700;
}
.compteur-resultats{flex:1;font-size:13px;color:var(--texte-2);}
.select-tri{
  height:44px;border-radius:12px;border:1px solid var(--bordure);background:#fff;font-size:13px;padding:0 10px;
}

/* Drawer filtres mobile */
.drawer-filtres{
  position:fixed;inset:0;z-index:110;display:none;
}
.drawer-filtres.ouvert{display:block;}
.drawer-filtres__fond{position:absolute;inset:0;background:rgba(0,0,0,.4);}
.drawer-filtres__panneau{
  position:absolute;left:0;right:0;bottom:0;top:8%;background:#fff;border-radius:20px 20px 0 0;
  display:flex;flex-direction:column;overflow:hidden;
}
.drawer-filtres__header{
  display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid var(--bordure);
}
.drawer-filtres__contenu{
  flex:1;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  touch-action:pan-y;
  padding:8px 16px 16px;
}
.drawer-filtres__footer{
  display:flex;gap:10px;padding:12px 16px;border-top:1px solid var(--bordure);background:#fff;
}
.groupe-filtre{border-bottom:1px solid #F1F3F5;padding:14px 0;}
.groupe-filtre summary{font-weight:600;font-size:14px;list-style:none;display:flex;align-items:center;gap:10px;cursor:pointer;}
.groupe-filtre summary::-webkit-details-marker{display:none;}
.groupe-filtre[open] summary{margin-bottom:10px;}
.groupe-filtre summary i{
  width:30px;height:30px;border-radius:10px;display:inline-grid;place-items:center;
  background:#F3F8F5;color:var(--vert-dark);font-size:13px;flex:0 0 30px;
}
.options-filtre{display:flex;flex-wrap:wrap;gap:8px;}
.chip-filtre{
  border:1px solid var(--bordure);border-radius:20px;padding:8px 14px;font-size:13px;background:#fff;
}
.chip-filtre.actif{background:var(--vert);color:#fff;border-color:var(--vert);}
label.case-filtre{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:14px;}
.slider-prix{display:flex;gap:10px;align-items:center;}
.slider-prix input[type=range]{flex:1;}

/* Zone résultats */
.zone-resultats{padding:4px 16px 24px;}
.liste-trajets{display:flex;flex-direction:column;gap:14px;margin-top:12px;}

/* Skeleton */
.skeleton-carte{
  height:280px;border-radius:14px;background:linear-gradient(90deg,#eee 25%,#f5f5f5 37%,#eee 63%);
  background-size:400% 100%;animation:pulse 1.4s ease infinite;
}
@keyframes pulse{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* Carte trajet */
.carte-trajet{
  background:#fff;border-radius:14px;box-shadow:0 1px 3px rgba(0,0,0,.05);padding:16px;
  display:flex;flex-direction:column;gap:12px;
}
.carte-trajet--complet{opacity:.75;}
.carte-trajet__badges{display:flex;flex-wrap:wrap;gap:6px;}
.badge{
  font-size:11px;font-weight:600;padding:4px 8px;border-radius:8px;display:inline-flex;align-items:center;gap:4px;
}
.badge i{font-size:10px;}
.badge--feu{background:#FFF1E0;color:#B45309;}
.badge--info{background:var(--vert-light);color:var(--vert-dark);}
.badge--alerte{background:var(--rouge-light);color:var(--rouge);}
.badge--jour{background:var(--vert-light);color:var(--vert-dark);margin-left:6px;}
.badge--imminent{background:#FFF1E0;color:#B45309;margin-left:6px;}
.badge--escales{background:#F1F3F5;color:var(--texte-2);}
.badge--colis{background:var(--jaune-light);color:#8a6d00;}
.badge-inline{font-size:11px;font-weight:600;border-radius:8px;padding:2px 6px;margin-left:6px;}
.badge-inline--verifie{background:var(--vert-light);color:var(--vert-dark);}
.badge-inline--nouveau{background:#E7F0FF;color:#1D4ED8;}

.carte-trajet__conducteur{display:flex;gap:10px;align-items:flex-start;}
.avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;background:#eee;}
.carte-trajet__conducteur-nom{font-weight:600;font-size:14px;}
.carte-trajet__note{font-size:13px;color:var(--texte-2);}
.carte-trajet__note i{color:#D97706;font-size:12px;margin-right:3px;}
.carte-trajet__note a{font-size:13px;color:var(--texte-2);}
.carte-trajet__confiance{font-size:12px;color:var(--texte-2);margin-top:2px;}
.text-muted{color:var(--texte-3);}

.carte-trajet__itineraire{display:flex;flex-direction:column;gap:2px;padding-left:4px;}
.itineraire__point{display:flex;gap:10px;align-items:flex-start;font-size:14px;}
.point{width:10px;height:10px;border-radius:50%;margin-top:5px;flex:0 0 auto;}
.point--vert{background:var(--vert);}
.point--rouge{background:var(--rouge);}
.itineraire__ligne{
  margin-left:4px;padding-left:15px;border-left:2px dashed var(--bordure);
  min-height:20px;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--texte-3);
}

.carte-trajet__horaires{font-size:13px;color:var(--texte-2);display:flex;flex-wrap:wrap;align-items:center;gap:4px;}
.carte-trajet__compte-rebours{font-size:12px;color:var(--vert-dark);font-weight:600;margin-left:6px;}

.carte-trajet__vehicule{font-size:13px;color:var(--texte-2);display:flex;align-items:center;gap:7px;margin-top:6px;}
.carte-trajet__vehicule i,
.itineraire__ligne i{
  color:var(--vert-dark);font-size:12px;
}

.disponibilite{font-weight:600;font-size:13px;}
.disponibilite--orange{color:#B45309;}
.disponibilite--critique{color:var(--rouge);}
.disponibilite--complet{color:var(--texte-3);}
.barre-progression{height:6px;background:#F1F3F5;border-radius:6px;margin-top:6px;overflow:hidden;}
.barre-progression__remplissage{height:100%;background:var(--vert);}

.carte-trajet__options{display:flex;gap:8px;flex-wrap:wrap;}
.option-icone{
  width:34px;height:34px;border-radius:11px;display:inline-grid;place-items:center;
  background:#F8FAFC;border:1px solid var(--bordure);color:var(--vert-dark);font-size:14px;
}

.carte-trajet__paiement, .carte-trajet__annulation{font-size:12px;color:var(--texte-2);}

.carte-trajet__prix{
  background:var(--vert-light);border-radius:12px;padding:12px 14px;text-align:center;
}
.prix__montant{font-size:20px;font-weight:700;color:var(--vert-dark);}
.prix__montant span{font-size:13px;font-weight:400;color:var(--texte-2);}
.prix__mention{font-size:11px;color:var(--texte-2);}

.carte-trajet__actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}

/* État aucun résultat */
.etat-vide{text-align:center;padding:34px 16px 28px;}
.etat-vide__icone{
  width:64px;height:64px;margin:0 auto 14px;border-radius:18px;
  display:grid;place-items:center;background:#F3F4F6;border:1px solid var(--bordure);
  color:var(--vert-dark);font-size:28px;
}
.etat-vide h2{font-size:18px;margin-bottom:6px;}
.etat-vide p{font-size:14px;color:var(--texte-2);}
.suggestions-vide{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:14px 0;}
.suggestions-vide button{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--bordure);border-radius:999px;padding:8px 13px;font-size:13px;background:#fff;color:var(--texte);
  min-height:38px;
}
.boutons-etat-vide{display:flex;gap:10px;justify-content:center;margin-top:10px;flex-wrap:wrap;}
.ui-icon{
  width:24px;height:24px;border-radius:999px;display:inline-grid;place-items:center;
  background:var(--vert-light);color:var(--vert-dark);font-size:12px;flex:0 0 24px;
}
.ui-icon i{line-height:1;}
.ui-icon--light{background:rgba(255,255,255,.18);color:#fff;}

/* Similaires */
.section-similaires{padding:8px 0 16px;}
.section-similaires h3{font-size:15px;padding:0 16px;margin-bottom:10px;}
.carousel-similaires{display:flex;gap:12px;overflow-x:auto;padding:0 16px 4px;scroll-snap-type:x mandatory;}
.mini-carte-similaire{
  flex:0 0 200px;scroll-snap-align:start;background:#fff;border:1px solid var(--bordure);border-radius:12px;padding:12px;
}
.mini-carte-similaire strong{font-size:13px;}
.mini-carte-similaire .prix{color:var(--vert-dark);font-weight:700;font-size:14px;margin-top:6px;}
.mini-carte-similaire .prochain{font-size:11px;color:var(--texte-3);margin-top:2px;}

/* CTA publier */
.cta-publier{
  margin:16px;background:#fff;border:1px dashed var(--bordure);border-radius:14px;padding:16px;text-align:center;
}
.cta-publier h3{font-size:15px;margin:0 0 4px;}
.cta-publier p{font-size:13px;color:var(--texte-2);margin:0 0 12px;}

/* Sécurité */
.bloc-securite{
  background:#fff;margin:16px;padding:16px;border-radius:14px;border:1px solid var(--bordure);
}
.bloc-securite h3{font-size:15px;margin:0 0 10px;}
.bloc-securite ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--texte-2);}
.bloc-securite li{display:flex;align-items:center;gap:8px;}
.bloc-securite li i{
  width:22px;height:22px;border-radius:999px;display:inline-grid;place-items:center;
  background:var(--vert-light);font-size:11px;flex:0 0 22px;
}

/* Pagination */
.pagination-mobile{padding:8px 16px 16px;}
.pagination-mobile .btn{width:100%;background:#fff;border:1px solid var(--bordure);color:var(--noir);}
.pagination-desktop{display:none;}

/* Bottom nav mobile */
.bottom-nav-mobile{
  position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--bordure);
  display:flex;z-index:50;
}
.bottom-nav-mobile a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:8px 0;font-size:10px;color:var(--texte-3);gap:2px;min-height:48px;
}
.bottom-nav-mobile a.actif{color:var(--vert-dark);font-weight:600;}
.bottom-nav-mobile a span.icone{
  width:28px;height:24px;border-radius:999px;display:inline-grid;place-items:center;font-size:15px;
}
.bottom-nav-mobile a.actif span.icone{background:var(--vert-light);}

.footer-desktop{display:none;}

/* ============ DESKTOP (>= 900px) ============ */
@media (min-width:900px){
  body{padding-bottom:0;}
  .header-mobile,.bottom-nav-mobile{display:none;}
  .nav-desktop{
    display:flex;justify-content:space-between;align-items:center;padding:16px 40px;
    background:#fff;border-bottom:1px solid var(--bordure);position:sticky;top:0;z-index:40;
  }
  .nav-desktop .liens{display:flex;gap:24px;font-size:14px;font-weight:500;}
  .nav-desktop .logo{font-weight:700;font-size:22px;color:var(--vert-dark);}
  .nav-desktop .logo span{color:var(--noir);}
  .nav-desktop .actions{display:flex;gap:12px;}

  .page-container{
    display:flex;gap:24px;max-width:1200px;margin:0 auto;padding:24px 40px;align-items:flex-start;
  }
  .colonne-filtres{
    flex:0 0 280px;position:sticky;top:90px;background:#fff;border:1px solid var(--bordure);
    border-radius:16px;padding:20px;
  }
  .colonne-resultats{flex:1;min-width:0;}
  .drawer-filtres{position:static;display:block !important;}
  .drawer-filtres__fond{display:none;}
  .drawer-filtres__panneau{position:static;border-radius:0;top:auto;}
  .drawer-filtres__footer{position:sticky;bottom:0;}
  .btn-ouvrir-filtres,.modal-recherche{display:none;}
  .barre-recherche-compacte{display:none;}
  .barre-recherche-desktop{
    display:flex;gap:10px;background:#fff;border:1px solid var(--bordure);border-radius:16px;
    padding:14px;max-width:1200px;margin:16px auto 0;align-items:center;
  }
  .barre-recherche-desktop .champ{margin:0;flex:1;}
  .barre-filtres-tri{position:static;background:none;border:none;padding:0 0 12px;}
  .liste-trajets{margin-top:0;}
  .carte-trajet{flex-direction:row;flex-wrap:wrap;}
  .carte-trajet__conducteur{flex:0 0 220px;}
  .carte-trajet__itineraire{flex:1 1 260px;}
  .carte-trajet__prix{flex:0 0 180px;}
  .carte-trajet__actions{flex:0 0 100%;justify-content:flex-end;}
  .pagination-mobile{display:none;}
  .pagination-desktop{
    display:flex;gap:8px;justify-content:center;padding:24px 0;
  }
  .pagination-desktop a{
    width:40px;height:40px;border-radius:10px;border:1px solid var(--bordure);display:flex;
    align-items:center;justify-content:center;font-size:13px;background:#fff;
  }
  .pagination-desktop a.actif{background:var(--vert);color:#fff;border-color:var(--vert);}
  .footer-desktop{
    display:block;background:#111;color:#ccc;padding:40px;margin-top:32px;font-size:13px;
  }
}