/* Granvo · « Combien de temps jusqu'à mon travail ? » — styles génériques v1.0 (2026-10-10)
   Une ligne + une barre de recherche dans le même bloc que le plan « Le quartier » (Ced, 2026-10-10), démarquée par un filet
   et un pictogramme. Après le choix d'une adresse : deux pastilles (à pied ou en auto, puis autobus), la carte Google du trajet,
   une ligne d'infos (départ, lien Google Maps). Aucune donnée d'immeuble ici. Mentions Google : .tt-pied, au pied de page.
   Mobile d'abord ; cibles ≥ 44 px ; texte ≥ 12 px. */
.tt-sec{
  --tt-ink:var(--ink,#171614);--tt-cream:var(--cream,#F4F0E8);--tt-acc:#F0B79F;
  --tt-sans:var(--sans,system-ui,-apple-system,'Segoe UI',sans-serif);
  background:var(--water,#24404C);color:#fff;padding:18px 0 84px
}
.qm-sec:has(+ .tt-sec){padding-bottom:0}
.tt-sec :focus-visible{outline:2px solid var(--tt-acc);outline-offset:3px}
.tt-in{display:grid;gap:12px;padding-top:24px;border-top:1px solid rgba(255,255,255,.16)}
.tt{display:grid;gap:10px;margin:0}
.tt-q{display:flex;align-items:center;gap:10px;font:600 1rem/1.3 var(--tt-sans);color:#fff}
.tt-q .tt-i{width:20px;height:20px;color:var(--tt-acc)}
.tt-champ{position:relative}
.tt input[type=text]{width:100%;min-height:48px;padding:11px 52px 11px 18px;border:0;border-radius:999px;background:#fff;color:var(--tt-ink);font:500 1rem/1.3 var(--tt-sans)}
.tt input[hidden]{display:none}
.tt-go{position:absolute;top:2px;right:2px;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--tt-ink);color:#fff;cursor:pointer}
.tt-go .tt-x{width:18px;height:18px}
.tt-cle .tt-go{display:none}
/* saisie d'adresse Google (web component) : seules les propriétés que Google expose */
.tt-pac{display:block;width:100%;color-scheme:light;background-color:#fff;color:var(--tt-ink);border:0;border-radius:999px;font-family:var(--tt-sans);font-size:16px;line-height:1.3}
.tt-x{width:14px;height:14px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tt-res[hidden],.tt-err[hidden],.tt-msg[hidden],.tt-fr[hidden],.tt-tu[hidden]{display:none}
.tt-res{display:grid;gap:10px;padding-top:2px}
.tt-tuiles{display:flex;flex-wrap:wrap;gap:6px}
.tt-tu{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;gap:5px;min-height:44px;padding:0 11px 0 10px;border:1px solid rgba(255,255,255,.3);border-radius:999px;background:transparent;color:#fff;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tt-tu[aria-pressed=true]{background:var(--tt-cream);border-color:var(--tt-cream);color:var(--tt-ink)}
.tt-i{width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tt-v{font:600 .95rem/1 var(--tt-sans);font-variant-numeric:lining-nums tabular-nums}
.tt-n{font:400 .8rem/1 var(--tt-sans)}
.tt-vide .tt-v{font-weight:500}
.tt-err{margin:0;font:600 .85rem/1.4 var(--tt-sans);color:var(--tt-acc)}
.tt-fr{position:relative;aspect-ratio:16/10;background:rgba(255,255,255,.08);border-radius:12px;overflow:hidden}
.tt-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-4px 0 0;font:400 12px/1.3 var(--tt-sans);color:rgba(255,255,255,.7)}
.tt-gm{display:inline-flex;align-items:center;gap:5px;min-height:44px;color:rgba(255,255,255,.88);font-weight:500;text-decoration:none;white-space:nowrap}
.tt-gm:hover{color:#fff}
.ft .tt-pied a{color:inherit}
@media(min-width:560px){.tt-in{max-width:620px}}
@media(min-width:900px){.tt-sec{padding-bottom:120px}}
@media(min-width:1024px){
  /* sous le plan du quartier : aligné sur sa colonne (quartier.css : .qm-grid 5fr / 7fr, écart 56 px) ;
     seul sur la page (sans plan) : toute la largeur du bloc */
  .qm-sec + .tt-sec .tt-in{max-width:none;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:56px;border-top:0;padding-top:0}
  .qm-sec + .tt-sec .tt-in>*{grid-column:2}
  .qm-sec + .tt-sec .tt{padding-top:24px;border-top:1px solid rgba(255,255,255,.16)}
  .tt-sec .tt-in{max-width:none}
}