/* styles.css — « La 138 comme fil conducteur ». Carnet de voyage visuel.
   Palette fleuve/écume/sable/bouée/épinette/jaune-scolaire. Typo Bricolage Grotesque + Public Sans. */

:root {
  --fleuve: #14313F;        /* fond sombre, bleu nuit */
  --fleuve-2: #1c4152;      /* variante */
  --ecume: #F5F1E8;         /* fond clair, cartes */
  --sable: #D9C7A7;         /* surfaces secondaires */
  --bouee: #0FB5D6;         /* accent CYAN : boutons, liens, actif */
  --bouee-fonce: #0A8CA8;
  --epinette: #0E7E96;      /* cyan foncé : succès / gratuit / jalons */
  --jaune: #FFCE1F;         /* JAUNE : autobus, progression, alertes */
  --texte: #14313F;
  --texte-inv: #F5F1E8;
  --gris: #5a6b73;
  --rayon: 18px;
  --ombre: 0 10px 30px rgba(10, 25, 33, .16);
  --ombre-sm: 0 4px 14px rgba(10, 25, 33, .12);
  font-size: 17px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font-family: 'Public Sans', -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  background: var(--ecume);
  color: var(--texte);
  display: flex; flex-direction: column;
  overscroll-behavior: none;
  font-size: 16px; font-weight: 500; line-height: 1.5;
}
h1,h2,h3,.display { font-family: 'Bricolage Grotesque', 'Public Sans', sans-serif; }

/* Accessibilité : focus visible, cibles tactiles */
:focus-visible { outline: 3px solid var(--bouee); outline-offset: 2px; border-radius: 6px; }
button, .btn, .nav-btn, a { min-height: 0; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---- En-tête minimal ---- */
.entete {
  background: var(--fleuve); color: var(--texte-inv);
  padding: calc(env(safe-area-inset-top) + 12px) 18px 12px;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 50;
}
.logo { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 1.3rem; letter-spacing: -.3px; }
.btn-ia {
  background: var(--bouee); color: #fff; border: none;
  width: 48px; height: 48px; border-radius: 50%; font-size: 1.4rem;
  box-shadow: var(--ombre-sm); cursor: pointer;
}
.btn-ia:active { transform: scale(.94); }

/* ---- Zone de vue ---- */
.vue { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.vue.pad { padding: 18px 15px 96px; }
.ecran { padding: 18px 15px 4px; }
.titre { font-size: 1.9rem; font-weight: 800; letter-spacing: -.5px; margin: 4px 0 6px; }
.sous { color: var(--gris); margin: 0 0 12px; font-weight: 600; }

/* ---- Navigation du bas (pouce) ---- */
.nav {
  display: flex; background: var(--fleuve);
  padding-bottom: env(safe-area-inset-bottom);
  position: sticky; bottom: 0; z-index: 50;
}
.nav-btn {
  flex: 1; border: none; background: none; color: #8fa6ad;
  font-size: .7rem; font-weight: 700; padding: 10px 2px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-height: 56px;
}
.nav-btn span { font-size: 1.4rem; }
.nav-btn.actif { color: var(--jaune); }
.nav-btn.actif span { transform: translateY(-1px) scale(1.1); }

/* ---- Boutons ---- */
.btn {
  background: var(--bouee); color: #fff; border: none; border-radius: 14px;
  padding: 15px 18px; font-size: 1.05rem; font-weight: 700; cursor: pointer;
  box-shadow: var(--ombre-sm); min-height: 52px; letter-spacing: .2px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform .1s;
}
.btn:active { transform: translateY(2px); }
.btn.contour { background: transparent; color: var(--fleuve); border: 2px solid var(--fleuve); box-shadow: none; }
.btn.sur-photo { background: var(--bouee); color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.btn.large-full { display: flex; width: 100%; margin: 12px 0; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.actions .btn { flex: 1; }

/* ============ AUJOURD'HUI ============ */
.hero {
  position: relative; height: 62vh; min-height: 420px; width: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  color: #fff; overflow: hidden;
}
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-ombre { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,49,63,.10) 0%, rgba(20,49,63,.15) 45%, rgba(20,49,63,.92) 100%); }
.hero-contenu { position: relative; padding: 20px 18px calc(env(safe-area-inset-bottom) + 20px); }
.hero-kicker { display: inline-block; background: var(--bouee); color: #fff; font-weight: 700; font-size: .78rem; letter-spacing: .5px; text-transform: uppercase; padding: 4px 12px; border-radius: 20px; margin-bottom: 12px; }
.hero-nom { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 2.6rem; line-height: 1.02; letter-spacing: -1px; margin: 0 0 12px; text-shadow: 0 2px 20px rgba(0,0,0,.4); }
.hero-stats { display: flex; gap: 20px; font-weight: 700; font-size: 1.05rem; margin-bottom: 16px; }
.hero-stats .val { font-family: 'Bricolage Grotesque', sans-serif; }
.hero .btn { width: 100%; font-size: 1.15rem; padding: 17px; }
.hero-vide { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 1.4rem; font-weight: 700; padding: 30px; text-align: center; background: linear-gradient(160deg, var(--fleuve), var(--epinette)); }

.rangee { display: flex; gap: 10px; padding: 16px 15px 0; }
.mini-carte {
  flex: 1 1 0; min-width: 0; background: #fff; border-radius: var(--rayon); padding: 12px;
  box-shadow: var(--ombre-sm); min-height: 96px;
}
.mini-carte .mc-ico { font-size: 1.4rem; }
.mini-carte .mc-titre { font-weight: 700; font-size: .68rem; color: var(--gris); text-transform: uppercase; letter-spacing: .3px; margin: 6px 0 3px; }
.mini-carte .mc-val { font-weight: 700; font-size: .9rem; color: var(--texte); line-height: 1.25; }
.mini-carte.alerte-diesel { background: var(--jaune); color: var(--fleuve); }
.mini-carte.alerte-diesel .mc-titre, .mini-carte.alerte-diesel .mc-val { color: var(--fleuve); }

.bloc { padding: 16px 15px 0; }
.suggestion { background: var(--sable); border-radius: var(--rayon); padding: 14px; font-weight: 600; margin-bottom: 12px; }

/* ============ ITINÉRAIRE — route-timeline ============ */
.jour-section { margin-bottom: 24px; }
.jour-banniere {
  position: relative; height: 150px; border-radius: var(--rayon); overflow: hidden;
  display: flex; align-items: flex-end; color: #fff; box-shadow: var(--ombre-sm);
  margin: 0 0 4px;
}
.jour-banniere img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.jour-banniere .jb-ombre { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,49,63,.15), rgba(20,49,63,.85)); }
.jour-banniere .jb-txt { position: relative; padding: 14px 16px; width: 100%; }
.jour-banniere.no-img { background: linear-gradient(150deg, var(--fleuve), var(--epinette)); }
.jb-jour { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 1.6rem; line-height: 1; letter-spacing: -.5px; }
.jb-meta { font-weight: 600; font-size: .85rem; opacity: .92; margin-top: 4px; }
.jb-alerte { display: inline-block; background: var(--jaune); color: var(--fleuve); font-weight: 800; font-size: .78rem; padding: 3px 10px; border-radius: 12px; margin-top: 8px; }

/* La route : rail à gauche (asphalte + ligne pointillée) + colonne d'arrêts */
.jour-route { position: relative; display: grid; grid-template-columns: 58px 1fr; gap: 0; padding-top: 10px; }
.route-rail { position: relative; }
.route-rail svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.route-bus {
  position: absolute; left: 50%; top: 0; width: 40px; height: 40px; margin-left: -20px; margin-top: -20px;
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem; z-index: 3;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.35)); transition: top .6s cubic-bezier(.4,0,.2,1);
}
.route-arrets { display: flex; flex-direction: column; }

.arret {
  display: flex; gap: 12px; align-items: center;
  background: #fff; border-radius: 14px; box-shadow: var(--ombre-sm);
  padding: 10px; margin: 0 0 12px; min-height: 84px; transition: opacity .2s;
}
.arret.fait { opacity: .55; }
.arret .vign { position: relative; width: 72px; height: 72px; border-radius: 12px; overflow: hidden; flex: 0 0 72px; background: var(--sable); }
.arret .vign img { width: 100%; height: 100%; object-fit: cover; }
.vign-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: #fff; }
.arret .vign .coche-ov { position: absolute; inset: 0; background: rgba(15,181,214,.78); display: flex; align-items: center; justify-content: center; font-size: 2rem; color: #fff; }
.arret-txt { flex: 1; min-width: 0; }
.arret-nom { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 1.08rem; line-height: 1.15; color: var(--texte); }
.arret-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.badge { font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: 20px; letter-spacing: .2px; }
.b-gratuit { background: var(--epinette); color: #fff; }
.b-cout { background: var(--sable); color: #5a4a2a; }
.b-bus-ok { background: #e3ece9; color: var(--epinette); }
.b-bus-serre { background: var(--jaune); color: var(--fleuve); }
.b-cat { background: var(--fleuve); color: #fff; }
.b-verif { background: transparent; color: var(--gris); border: 1px solid #c9c2b3; }
.arret-check { flex: 0 0 auto; width: 48px; height: 48px; border: none; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.arret-check .box { width: 28px; height: 28px; border-radius: 8px; border: 2.5px solid var(--epinette); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; }
.arret.fait .arret-check .box { background: var(--epinette); }

/* ============ CARTE ============ */
.carte-wrap { position: relative; height: calc(100vh - 150px); min-height: 380px; }
#map { position: absolute; inset: 0; }
.carte-controls { position: absolute; top: 12px; right: 12px; z-index: 500; display: flex; flex-direction: column; gap: 8px; }
.carte-controls .btn { padding: 11px 14px; font-size: .9rem; min-height: 44px; }
.carte-controls .btn.actif { background: var(--epinette); }
.filtres { position: absolute; bottom: 12px; left: 12px; right: 12px; z-index: 500; display: flex; gap: 7px; overflow-x: auto; padding-bottom: 4px; }
.filtre { flex: 0 0 auto; background: #fff; border: none; border-radius: 20px; padding: 9px 14px; font-weight: 700; font-size: .82rem; cursor: pointer; box-shadow: var(--ombre-sm); color: var(--fleuve); min-height: 40px; }
.filtre.actif { background: var(--fleuve); color: #fff; }
.info-prochain { position: absolute; top: 12px; left: 12px; z-index: 500; background: var(--fleuve); color: #fff; padding: 9px 13px; border-radius: 12px; font-weight: 700; font-size: .85rem; max-width: 58%; box-shadow: var(--ombre); }

/* Pins photo ronds */
.pin-photo { width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--c); overflow: hidden; background: var(--c); box-shadow: 0 3px 8px rgba(0,0,0,.35); }
.pin-photo img { width: 100%; height: 100%; object-fit: cover; }
.pin-photo .pin-emoji { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: #fff; }
.pin-photo.visite { border-color: var(--jaune); }
.pin-photo.visite::after { content: '✓'; position: absolute; right: -3px; bottom: -3px; width: 20px; height: 20px; background: var(--jaune); color: var(--fleuve); border-radius: 50%; font-size: .8rem; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }
.leaflet-div-icon { background: none; border: none; }
.pin-bus-live { font-size: 2rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }

/* ============ SOUVENIRS ============ */
.km-compteur { background: var(--fleuve); color: #fff; border-radius: var(--rayon); padding: 18px; margin: 0 0 18px; text-align: center; }
.km-compteur .km-val { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 2.6rem; color: var(--jaune); line-height: 1; }
.km-compteur .km-lbl { font-weight: 600; margin-top: 4px; opacity: .9; }
.souv-jour-titre { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 1.3rem; margin: 20px 0 10px; }
.galerie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gal-item { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--sable); }
.gal-item img { width: 100%; height: 100%; object-fit: cover; }
.gal-video { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; color: var(--fleuve); cursor: pointer; }
.souv-vide { padding: 30px; text-align: center; color: var(--gris); font-weight: 600; }

/* ============ RÉGLAGES ============ */
.trajet-card { background: #fff; border-radius: var(--rayon); padding: 16px; box-shadow: var(--ombre-sm); margin-bottom: 16px; }
.trajet-pt { display: flex; align-items: center; gap: 12px; }
.trajet-pt .tp-ico { font-size: 1.4rem; width: 30px; text-align: center; }
.trajet-pt small { display: block; color: var(--gris); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.trajet-pt b { font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.1rem; }
.trajet-fleche { color: var(--sable); font-size: 1.2rem; margin: 2px 0 2px 13px; }
.trajet-card .btn { margin-top: 14px; }
.mini-note { color: var(--gris); font-size: .82rem; font-weight: 500; }

.reglages { background: #fff; border-radius: var(--rayon); padding: 18px; box-shadow: var(--ombre-sm); display: flex; flex-direction: column; gap: 18px; }
.champ { display: flex; flex-direction: column; gap: 9px; font-weight: 700; }
.champ input[type=date] { padding: 13px; border: 2px solid #e0dccf; border-radius: 12px; font-size: 1rem; font-family: inherit; min-height: 48px; }
.champ input[type=range] { width: 100%; accent-color: var(--bouee); height: 30px; }
.toggle { display: flex; gap: 10px; }
.toggle button { flex: 1; padding: 14px; border: 2px solid #e0dccf; background: #fff; border-radius: 12px; font-weight: 700; cursor: pointer; font-family: inherit; min-height: 48px; }
.toggle button.actif { background: var(--fleuve); color: #fff; border-color: var(--fleuve); }

/* ---- IA ---- */
.ia-filtres { display: flex; gap: 10px; margin: 12px 0; }
.ia-form { display: flex; gap: 8px; margin-bottom: 10px; }
.ia-form input { flex: 1; padding: 13px; border: 2px solid #e0dccf; border-radius: 12px; font-size: 1rem; font-family: inherit; min-height: 48px; }
.ia-etat { color: var(--gris); font-weight: 600; margin: 8px 0; min-height: 1.2em; }
.ia-carte { background: #fff; border-radius: var(--rayon); padding: 15px; box-shadow: var(--ombre-sm); margin-bottom: 12px; border-left: 4px solid var(--bouee); }
.ia-carte h3 { margin: 0 0 6px; font-size: 1.15rem; }
.ia-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: .85rem; font-weight: 700; color: var(--epinette); margin-top: 8px; }

/* ---- Checklist bus ---- */
.checklist { background: #fff; border-radius: var(--rayon); box-shadow: var(--ombre-sm); overflow: hidden; }
.check-item { display: flex; align-items: center; gap: 12px; padding: 15px 16px; border-bottom: 1px solid #eee6d6; font-weight: 600; min-height: 56px; }
.check-item.ok { color: var(--gris); text-decoration: line-through; }
.check-item input { width: 26px; height: 26px; accent-color: var(--epinette); }
.check-item span { flex: 1; }
.check-item .supp { background: none; border: none; color: #c9c2b3; font-size: 1.1rem; cursor: pointer; min-width: 44px; min-height: 44px; }
.ajout-item { display: flex; gap: 8px; margin: 14px 0; }
.ajout-item input { flex: 1; padding: 13px; border: 2px solid #e0dccf; border-radius: 12px; min-height: 48px; }

/* ---- Modale fiche lieu ---- */
.modale-fond { position: fixed; inset: 0; background: rgba(20,49,63,.55); z-index: 100; display: flex; align-items: flex-end; justify-content: center; }
.modale { background: var(--ecume); width: 100%; max-width: 640px; max-height: 92vh; overflow-y: auto; border-radius: 22px 22px 0 0; position: relative; box-shadow: 0 -10px 40px rgba(0,0,0,.3); }
.modale-photo { position: relative; height: 200px; }
.modale-photo img { width: 100%; height: 100%; object-fit: cover; }
.modale-photo .mp-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 3rem; color: #fff; }
.modale-corps { padding: 18px 18px calc(env(safe-area-inset-bottom) + 20px); }
.modale .fermer { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(255,255,255,.92); font-size: 1.1rem; box-shadow: var(--ombre-sm); cursor: pointer; font-weight: 700; z-index: 2; }
.badge-cat { display: inline-block; color: #fff; padding: 5px 14px; border-radius: 20px; font-weight: 700; font-size: .82rem; }
.modale h2 { margin: 12px 0 2px; font-size: 1.6rem; font-weight: 800; letter-spacing: -.5px; }
.secteur { color: var(--gris); margin: 0 0 10px; font-weight: 700; }
.fiche-infos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
.fiche-infos > div { background: #fff; border-radius: 12px; padding: 12px; font-size: .88rem; }
.fiche-infos b { font-weight: 700; }
.modale hr { border: none; border-top: 1px solid #e0dccf; margin: 18px 0; }
.modale h3 { font-size: 1.15rem; font-weight: 700; }
.medias-lieu { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.vign-m { width: 84px; height: 84px; border-radius: 12px; object-fit: cover; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: var(--fleuve); box-shadow: var(--ombre-sm); }
.note { width: 100%; min-height: 92px; border: 2px solid #e0dccf; border-radius: 12px; padding: 13px; font-size: 1rem; font-family: inherit; resize: vertical; }

.banniere-regen { position: fixed; top: calc(env(safe-area-inset-top) + 62px); left: 12px; right: 12px; z-index: 200; background: var(--fleuve); color: #fff; padding: 14px; border-radius: 14px; box-shadow: var(--ombre); font-weight: 700; display: flex; align-items: center; gap: 10px; }
.banniere-regen button { margin-left: auto; background: var(--jaune); color: var(--fleuve); border: none; border-radius: 10px; padding: 8px 13px; font-weight: 800; min-height: 40px; }

.alerte { background: var(--jaune); color: var(--fleuve); border-radius: 12px; padding: 12px; font-weight: 700; margin: 12px 0; }

/* ============ ONBOARDING ============ */
.onb { position: fixed; inset: 0; z-index: 300; background: var(--fleuve); color: #fff; display: flex; align-items: center; justify-content: center; padding: 24px; }
.onb-inner { width: 100%; max-width: 460px; }
.onb-progress { display: flex; gap: 8px; margin-bottom: 22px; }
.onb-progress span { flex: 1; height: 6px; border-radius: 6px; background: rgba(255,255,255,.18); }
.onb-progress span.on { background: var(--jaune); }
.onb-num { font-weight: 700; color: var(--jaune); letter-spacing: .5px; font-size: .85rem; }
.onb-titre { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 2.2rem; line-height: 1.05; letter-spacing: -.5px; margin: 8px 0 22px; }
.onb-champ { width: 100%; padding: 16px; border-radius: 14px; border: none; font-size: 1.15rem; font-family: inherit; margin-bottom: 12px; color: var(--fleuve); font-weight: 600; }
.onb-lbl { display: block; font-weight: 700; margin: 14px 0 6px; }
.onb input[type=range] { width: 100%; accent-color: var(--jaune); height: 34px; }
.onb-aide { color: #b9cdd4; font-weight: 500; margin: 6px 0 22px; }
.onb-actions { display: flex; gap: 12px; }
.onb-actions .btn { flex: 1; }
.onb-actions .btn.contour { color: #fff; border-color: rgba(255,255,255,.5); }

/* ============ MA JOURNÉE ============ */
.jour-form { display: flex; flex-direction: column; gap: 20px; }
.jf-bloc { background: #fff; border-radius: var(--rayon); padding: 16px; box-shadow: var(--ombre-sm); }
.jf-lbl { display: block; font-weight: 800; margin-bottom: 12px; }
.jf-bloc input[type=range] { width: 100%; accent-color: var(--bouee); height: 30px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { background: var(--ecume); border: 2px solid #e0dccf; border-radius: 22px; padding: 10px 14px; font-weight: 700; font-size: .92rem; cursor: pointer; min-height: 44px; }
.chip.on { background: var(--bouee); color: #fff; border-color: var(--bouee); }
.seg { display: flex; gap: 8px; }
.seg button { flex: 1; padding: 13px 6px; border: 2px solid #e0dccf; background: #fff; border-radius: 12px; font-weight: 700; cursor: pointer; min-height: 48px; font-size: .92rem; }
.seg button.on { background: var(--fleuve); color: #fff; border-color: var(--fleuve); }
.carte-info-j { background: var(--jaune); color: var(--fleuve); border-radius: var(--rayon); padding: 16px; font-weight: 700; }
.jour-ok { background: #fff; border-radius: var(--rayon); padding: 24px; text-align: center; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 1.4rem; box-shadow: var(--ombre-sm); color: var(--epinette); }
.jour-ok small { display: block; margin-top: 8px; font-family: 'Public Sans'; font-weight: 600; color: var(--gris); font-size: .95rem; }

/* Propositions de la journée */
.prop-arret { display: flex; gap: 12px; background: #fff; border-radius: var(--rayon); box-shadow: var(--ombre-sm); padding: 12px; margin-bottom: 12px; }
.prop-arret.ok { outline: 3px solid var(--epinette); }
.pa-vign { width: 76px; height: 76px; border-radius: 12px; overflow: hidden; flex: 0 0 76px; background: var(--sable); }
.pa-vign img { width: 100%; height: 100%; object-fit: cover; }
.pa-txt { flex: 1; min-width: 0; }
.pa-nom { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 1.1rem; line-height: 1.15; }
.pa-desc { color: var(--gris); font-size: .85rem; margin: 4px 0 6px; }
.pa-actions { display: flex; gap: 8px; margin-top: 8px; }
.pa-actions .btn { flex: 1; }
.prop-diesel { background: var(--jaune); color: var(--fleuve); border-radius: 12px; padding: 12px 14px; font-weight: 700; margin-bottom: 12px; }
.prop-dodo { background: var(--fleuve); color: #fff; border-radius: var(--rayon); padding: 16px; margin-bottom: 14px; }
.pd-head { font-weight: 800; color: var(--jaune); text-transform: uppercase; letter-spacing: .5px; font-size: .8rem; }
.pd-nom { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 1.25rem; margin: 4px 0; }
.pd-type { display: inline-block; background: var(--jaune); color: var(--fleuve); font-weight: 800; font-size: .78rem; padding: 3px 12px; border-radius: 20px; text-transform: capitalize; }
.pd-infos { display: flex; gap: 16px; flex-wrap: wrap; margin: 10px 0; font-weight: 600; font-size: .9rem; }
.pd-terego { display: inline-block; color: var(--jaune); font-weight: 700; margin-bottom: 10px; text-decoration: underline; }
.prop-dodo .pa-actions .btn.contour { color: #fff; border-color: rgba(255,255,255,.5); }

/* ============ À VISITER ICI (fiche) ============ */
.av-section { margin: 16px 0; }
.av-section h3 { font-size: 1.15rem; font-weight: 800; margin-bottom: 10px; }
.av-item { background: #fff; border-radius: 12px; padding: 12px; margin-bottom: 8px; box-shadow: var(--ombre-sm); }
.av-nom { font-weight: 700; font-size: 1rem; }
.av-meta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 5px; font-size: .82rem; font-weight: 600; color: var(--gris); }
.av-cout { color: var(--bouee-fonce); font-weight: 800; }
.av-cout.g { color: var(--epinette); }
.av-load, .av-vide { color: var(--gris); font-weight: 600; padding: 6px 0; }
.dodo-box { background: var(--fleuve); color: #fff; border-radius: 14px; padding: 14px; margin: 12px 0; }
.dodo-type { display: inline-block; background: var(--jaune); color: var(--fleuve); font-weight: 800; padding: 3px 12px; border-radius: 20px; font-size: .82rem; text-transform: capitalize; }
.dodo-serv { margin-top: 8px; font-weight: 600; font-size: .9rem; }
.dodo-box .pd-terego { margin-top: 8px; }

/* ============ DIESEL (GasBuddy-style) ============ */
.diesel-maj { color: var(--gris); font-weight: 600; font-size: .82rem; margin-bottom: 12px; }
.diesel-item { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 14px; box-shadow: var(--ombre-sm); padding: 14px; margin-bottom: 10px; cursor: pointer; }
.diesel-item.moins-cher { outline: 3px solid var(--epinette); }
.di-txt { flex: 1; min-width: 0; }
.di-nom { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 1.1rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.di-badge { background: var(--epinette); color: #fff; font-family: 'Public Sans'; font-weight: 800; font-size: .68rem; padding: 2px 8px; border-radius: 12px; }
.di-note { color: var(--gris); font-size: .84rem; margin-top: 3px; }
.di-prix { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 1.35rem; color: var(--fleuve); white-space: nowrap; }
.diesel-item.moins-cher .di-prix { color: var(--epinette); }

/* ============ Choix dodo + badges pas cher ============ */
.prop-sect { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 1.15rem; margin: 6px 0 10px; }
.b-pascher { background: #d6eef2; color: var(--epinette); }
.pd-choisi { display: inline-block; color: var(--jaune); font-weight: 800; font-size: .8rem; margin: 4px 0; }
.dodo-alt { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 14px; box-shadow: var(--ombre-sm); padding: 12px; margin-bottom: 10px; }
.da-txt { flex: 1; min-width: 0; }
.da-nom { font-weight: 700; font-size: 1rem; }
.da-meta { color: var(--gris); font-size: .82rem; margin-top: 4px; }
.pd-type-sm { background: var(--sable); color: #5a4a2a; font-weight: 700; padding: 2px 8px; border-radius: 12px; text-transform: capitalize; }
.da-choisir { flex: 0 0 auto; }
.dodo-ai-liste { margin-bottom: 12px; }
.prop-diesel { cursor: pointer; }

/* ---- Diesel : détail par station ---- */
.diesel-ville { margin-bottom: 10px; }
.diesel-ville .diesel-item { margin-bottom: 0; }
.di-chevron { color: var(--gris); font-size: 1.1rem; margin-left: 4px; }
.di-stations { background: #fff; border-radius: 0 0 14px 14px; margin-top: 2px; padding: 6px 12px 10px; box-shadow: var(--ombre-sm); }
.di-station { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #eee6d6; }
.di-station:last-of-type { border-bottom: none; }
.di-station.st-cheap .di-st-prix { color: var(--epinette); }
.di-st-txt { flex: 1; min-width: 0; }
.di-st-nom { font-weight: 700; font-size: .95rem; }
.di-st-meta { color: var(--gris); font-size: .8rem; margin-top: 2px; }
.di-st-src { color: #9aa4ae; font-size: .72rem; margin-top: 2px; font-style: italic; }
.di-st-prix { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 1.1rem; white-space: nowrap; }
.di-st-nav { flex: 0 0 auto; min-height: 40px; padding: 8px 10px; }
.di-st-note { color: var(--gris); font-size: .8rem; font-weight: 600; padding: 8px 0 2px; }

/* ---- Google Maps intégré (onglet Carte) ---- */
.gmap-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: none; border-radius: var(--rayon); box-shadow: var(--ombre); background: #e8e8e8; }
.carte-controls .btn.contour.actif { background: var(--jaune) !important; color: var(--fleuve); border-color: var(--jaune); }

/* ---- Météo ---- */
.meteo-carte { background: linear-gradient(135deg, #1c4152, var(--fleuve)); color: #fff; border-radius: var(--rayon); padding: 14px 16px; margin-bottom: 16px; box-shadow: var(--ombre-sm); }
.meteo-carte.vide { background: #fff; color: var(--gris); font-weight: 600; }
.mc-now { display: flex; align-items: center; gap: 10px; }
.mc-emoji { font-size: 2rem; }
.mc-temp { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 2rem; color: var(--jaune); }
.mc-lbl { font-weight: 700; }
.mc-extra { margin-top: 6px; font-weight: 600; font-size: .88rem; opacity: .92; }
.meteo-bande { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.mb-jour { flex: 1 0 60px; background: #fff; border-radius: 12px; padding: 10px 6px; text-align: center; box-shadow: var(--ombre-sm); }
.mb-nom { font-weight: 800; font-size: .72rem; text-transform: uppercase; color: var(--gris); }
.mb-emoji { font-size: 1.5rem; margin: 4px 0; }
.mb-t { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 1.05rem; }
.mb-tmin { color: var(--gris); font-size: .8rem; font-weight: 600; }
.mb-pp { color: var(--bouee-fonce); font-size: .68rem; font-weight: 700; min-height: 1em; }

/* ---- Fiche : items cliquables + note titre ---- */
.av-item.lien { cursor: pointer; }
.av-item.lien:active { transform: translateY(1px); }
.av-desc-sm { color: var(--gris); font-size: .82rem; margin-top: 3px; }
.h3-note { font-family: 'Public Sans'; font-weight: 600; color: var(--gris); font-size: .72rem; margin-left: 6px; }

/* ============ Mini-hero photo (Ma journée) ============ */
.mini-hero { position: relative; height: 190px; display: flex; align-items: flex-end; color: #fff; overflow: hidden; margin: -18px -15px 16px; }
.vue.pad .mini-hero { border-radius: 0 0 22px 22px; }
.mini-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mh-ombre { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,49,63,.15), rgba(20,49,63,.85)); }
.mini-hero:not(:has(img)) .mh-ombre { background: linear-gradient(150deg, var(--fleuve), var(--epinette)); }
.mh-txt { position: relative; padding: 16px 18px; }
.mh-titre { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 2rem; margin: 0; letter-spacing: -.5px; text-shadow: 0 2px 14px rgba(0,0,0,.4); }
.mh-sous { margin: 4px 0 0; font-weight: 600; opacity: .95; }

/* ============ Tuiles d'envies ============ */
.envies-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.envie-tuile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: var(--ecume); border: 2px solid #e0dccf; border-radius: 16px;
  padding: 14px 6px; cursor: pointer; min-height: 86px; transition: transform .1s, background .15s;
  font-family: inherit;
}
.envie-tuile:active { transform: scale(.96); }
.envie-tuile .et-emoji { font-size: 1.9rem; line-height: 1; }
.envie-tuile .et-lbl { font-weight: 700; font-size: .78rem; color: var(--texte); text-align: center; line-height: 1.1; }
.envie-tuile.on { background: var(--bouee); border-color: var(--bouee); box-shadow: 0 6px 14px rgba(4,134,168,.35); }
.envie-tuile.on .et-lbl { color: #fff; }

/* ============ En-têtes utilitaires colorés ============ */
.util-hero { position: relative; border-radius: var(--rayon); padding: 18px 16px 16px 64px; color: #fff; margin-bottom: 14px; box-shadow: var(--ombre); overflow: hidden; }
.uh-vert { background: linear-gradient(140deg, #0E7E96, #0a5e70); }
.uh-jaune { background: linear-gradient(140deg, #e9a80c, #b97e00); }
.uh-emoji { position: absolute; right: -6px; bottom: -14px; font-size: 5.2rem; opacity: .28; transform: rotate(-8deg); }
.uh-titre { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 1.7rem; margin: 6px 0 2px; line-height: 1.05; letter-spacing: -.4px; }
.uh-sous { margin: 0; font-weight: 600; font-size: .88rem; opacity: .95; }
.uh-back { position: absolute; top: 12px; left: 12px; background: rgba(255,255,255,.22); color: #fff; box-shadow: none; min-height: 40px; width: 40px; padding: 0; border-radius: 50%; font-size: 1.2rem; }

/* ============ Items commerces (avatar + distance) ============ */
.cm-item { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 16px; box-shadow: var(--ombre-sm); padding: 12px; margin-bottom: 10px; cursor: pointer; }
.cm-item:active { transform: translateY(1px); }
.cm-av { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; box-shadow: var(--ombre-sm); }
.cm-txt { flex: 1; min-width: 0; }
.cm-nom { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 1.02rem; line-height: 1.15; }
.cm-type { font-weight: 800; }
.cm-dist { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 1.15rem; color: var(--fleuve); white-space: nowrap; }
.cm-dist small { font-size: .7rem; font-weight: 700; color: var(--gris); margin-left: 1px; }