/* Geist (Vercel), licence SIL OFL 1.1, hébergée sur le site : aucune requête vers Google Fonts */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/geist-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/geist-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ===== Styles du site multipage, ajoutés à app.css ===== */

/* ----- Typographie ----- */
body { font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3 { letter-spacing: -.02em; text-wrap: balance; }
h2 { font-weight: 700; }
.card-head h2 { font-size: 1.375rem; letter-spacing: -.025em; }
.route-time, .st-price, .direct-num, .al-when { font-variant-numeric: tabular-nums; }

/* ----- Surfaces : cartes blanches, filet fin, ombre à peine visible ----- */
.card { border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); padding: 20px; }
:root[data-theme="dark"] .card { box-shadow: none; }
.btn { transition: transform .15s ease, filter .15s ease; }
.btn:active { transform: scale(.98); }

/* ----- Barre du haut translucide : « Actualiser » puis « Mis à jour à » ----- */
@media (min-width: 640px) {
  .topbar-inner .refresh { order: 1; margin-left: auto; }
  .topbar-inner .updated { order: 2; margin-left: 0; align-self: center; font-size: .9375rem; }
  .topbar-inner .theme-toggle { order: 3; }
  .updated .live-dot, .updated .upd-sub { display: none; }
  .upd-label { font-weight: 400; color: var(--muted); }
}
.topbar { background: color-mix(in srgb, var(--surface) 85%, transparent); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); }

/* ----- Navigation par pages ----- */
.topnav a { padding: 0 10px; }
.topnav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--text); font-weight: 600; }
.shortcuts a[aria-current="page"], .menu-grid a[aria-current="page"] { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.tabbar a[aria-current="page"] { color: var(--primary); }
/* 7 rubriques : le menu du haut ne tient qu'en grand écran, les pastilles prennent le relais en dessous */
@media (max-width: 1199px) { .topnav { display: none; } }
@media (min-width: 1200px) { .shortcuts { display: none; } }

/* ----- Titre des pages intérieures ----- */
.page-head { margin: 12px 2px 24px; }
.page-head h1 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); line-height: 1.1; font-weight: 800; letter-spacing: -.035em; }
.page-head p { max-width: 62ch; margin: 6px 0 0; font-size: 1.0625rem; color: var(--muted); text-wrap: pretty; }
.faq-single { grid-template-columns: 1fr; }

/* ===== Accueil : en-tête (titre, état de la rocade, pont Chaban, météo) ===== */
.tr-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 32px; margin: 2px 2px 14px; }
.tr-title { margin-right: auto; }
.tr-title h1 { font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.05; font-weight: 800; letter-spacing: -.04em; }
.tr-status { --lvl: var(--unknown); display: flex; align-items: flex-start; gap: 12px; }
.tr-status.lvl-ok { --lvl: var(--ok); }
.tr-status.lvl-warn { --lvl: var(--warn); }
.tr-status.lvl-bad { --lvl: var(--bad); }
.tr-dot { width: 12px; height: 12px; flex: none; margin-top: 6px; border-radius: 50%; background: var(--lvl); box-shadow: 0 0 0 4px color-mix(in srgb, var(--lvl) 16%, transparent); }
.tr-status strong { display: block; font-size: 1.0625rem; line-height: 1.3; color: var(--lvl); }
.tr-status span span, .tr-status div > span { font-size: .9375rem; color: var(--muted); }
.tr-facts { display: flex; }
.tr-fact { display: flex; align-items: center; gap: 12px; padding: 4px 24px; border-left: 1px solid var(--border); color: var(--text); }
.tr-fact:hover { text-decoration: none; }
.tr-fact:hover strong { text-decoration: underline; }
.tr-fact > svg { width: 30px; height: 30px; flex: none; fill: currentColor; }
.tr-fact > span { display: flex; flex-direction: column; font-size: .9375rem; color: var(--muted); line-height: 1.35; }
.tr-fact strong { font-size: 1rem; color: var(--text); }
.tr-fact strong.is-ok { color: var(--ok); }
.tr-fact strong.is-bad { color: var(--bad); }
@media (max-width: 639px) {
  .tr-head { gap: 8px 20px; margin-top: 0; }
  .tr-title { flex-basis: 100%; }
  .tr-facts { flex-basis: 100%; }
  .tr-fact:first-child { padding-left: 0; border-left: 0; }
  .tr-fact > svg { width: 26px; height: 26px; }
}

/* ===== Accueil : prévisions du trafic sous la carte ===== */
.tr-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tr-side > .card { margin-bottom: 0; }
.tr-side .forecast { position: relative; margin: 0; padding: 14px 44px 14px 16px; gap: 10px 14px; }
.tr-side .forecast .q-ico { width: 34px; height: 34px; }
.tr-side .forecast .q-ico svg { width: 18px; height: 18px; }
.tr-side .forecast .fc-txt h2 { font-size: 1rem; letter-spacing: -.02em; }
.tr-side .forecast .fc-txt p { font-size: .8125rem; }
/* Le graphique prend toute la hauteur disponible sous le titre */
.tr-side .forecast { display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: center; column-gap: 12px; }
.tr-side .forecast .fc-chart { grid-column: 1 / -1; display: flex; flex-direction: column; align-self: stretch; }
.tr-side .forecast .fc-bars { flex: 1; min-height: 36px; gap: 2px; }
.tr-side .forecast .fc-axis { font-size: .75rem; }
.tr-side .forecast > .q-chev { position: absolute; top: 18px; right: 14px; }

/* ===== Accueil : temps de parcours et carte côte à côte ===== */
/* Les deux colonnes finissent à la même hauteur : les prévisions comblent le reste */
@media (min-width: 900px) {
  .grid-trafic { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: stretch; }
  .grid-trafic #parcours { display: flex; flex-direction: column; }
  .tr-side .forecast { flex: 1; }
}

/* Filtre Tous / Favoris : contrôle segmenté discret */
#parcours .seg { gap: 4px; margin-bottom: 0; padding: 4px; border-radius: 12px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
#parcours .seg button { height: 34px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); transition: background .15s ease, color .15s ease; }
#parcours .seg button[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(15, 23, 42, .1); }
:root[data-theme="dark"] #parcours .seg button[aria-selected="true"] { background: var(--primary-soft); box-shadow: none; }

.route-group { margin: 8px 0 0; padding: 5px 10px; border-radius: 8px; background: var(--surface-2); color: var(--text); font-size: .875rem; font-weight: 600; }
.route-group span { font-size: .8125rem; }
.route { padding: 4px 6px; gap: 8px; }
.route-name { font-size: .9375rem; line-height: 1.25; }
.route-time { font-size: 1.0625rem; font-weight: 700; color: var(--ok); }
.route .fav { opacity: .55; transition: opacity .15s ease; }
.route .fav:hover, .route .fav[aria-pressed="true"] { opacity: 1; }

/* Carte à ses proportions d'origine (534 × 500) : étirée en hauteur, elle était rognée sur les côtés */
.mp-map .map { border-radius: 12px; }
.mp-map-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 20px; margin-top: 14px; }
.mp-legend { display: flex; gap: 20px; font-size: .9375rem; }
.mp-legend span { display: inline-flex; align-items: center; gap: 8px; }
.mp-legend i { width: 12px; height: 12px; border-radius: 50%; }
.mp-legend .lg-ok { background: #16a34a; }
.mp-legend .lg-warn { background: #f59e0b; }
.mp-legend .lg-bad { background: #dc2626; }
.mp-map-foot .more-link svg { width: 20px; height: 20px; fill: currentColor; }

/* ===== Accueil : alertes et travaux en lignes ===== */
.mp-alerts .card-head { margin-bottom: 8px; }
.al-count {
  display: inline-block; margin-left: 10px; padding: 3px 10px; border-radius: 999px; vertical-align: 3px;
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); color: var(--muted); font-size: .8125rem; font-weight: 600; letter-spacing: 0;
}
.al-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 24px; }
.al-list { list-style: none; margin: 0; padding: 0; }
.al-row { border-top: 1px solid var(--border); }
.al-row summary {
  display: grid; grid-template-columns: 28px 170px minmax(0, 1fr) minmax(0, 1.4fr) 210px 18px; align-items: center; gap: 6px 18px;
  padding: 11px 6px; border-radius: 8px; cursor: pointer; list-style: none;
}
.al-row summary::-webkit-details-marker { display: none; }
.al-row summary:hover { background: var(--surface-2); }
.al-list:not(.is-all) .is-more { display: none; }
.al-ico { width: 26px; height: 26px; fill: currentColor; }
.al-bad .al-ico { color: var(--bad); }
.al-warn .al-ico { color: var(--warn); }
.al-type { justify-self: start; padding: 4px 11px; border-radius: 999px; font-size: .8125rem; font-weight: 600; white-space: nowrap; }
.al-bad .al-type { color: var(--bad); background: var(--bad-soft); }
.al-warn .al-type { color: var(--warn); background: var(--warn-soft); }
.al-name { font-size: .96875rem; font-weight: 600; }
.al-sub { overflow: hidden; font-size: .875rem; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.al-when { font-size: .9375rem; font-weight: 600; white-space: nowrap; text-align: right; }
.al-chev, main .forecast > .q-chev { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--muted); }
.al-chev { transition: transform .2s ease; }
.al-row details[open] .al-chev { transform: rotate(90deg); }
.al-more { padding: 2px 6px 14px 52px; font-size: .9375rem; line-height: 1.5; }
.al-more p { margin: 0 0 6px; }
.al-more ul { margin: 4px 0; padding-left: 18px; }
@media (max-width: 899px) { .al-ico { width: 22px; height: 22px; } .al-more { padding-left: 36px; } }

/* ===== Accueil : chiffres du moment, un seul panneau découpé par des filets ===== */
.direct { margin: 28px 0 20px; }
.direct-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; margin: 0 2px 14px; }
.direct-head h2 { font-size: 1.375rem; letter-spacing: -.025em; }
.direct-grid { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
@media (min-width: 560px) { .direct-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .direct-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.direct-item { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px 18px; background: var(--surface); color: var(--text); transition: background .2s ease; }
.direct-item:hover { text-decoration: none; background: var(--surface-2); }
.direct-top { display: flex; align-items: center; gap: 8px; font-size: .9375rem; font-weight: 500; color: var(--muted); }
.direct-top svg { width: 20px; height: 20px; flex: none; fill: var(--primary); }
.direct-num { margin-top: 6px; font-size: 2.25rem; line-height: 1; font-weight: 700; letter-spacing: -.04em; }
.direct-sub { text-wrap: pretty; }
.direct-go { margin-top: auto; padding-top: 12px; font-size: .9375rem; font-weight: 600; color: var(--primary); }
.direct-go span { display: inline-block; transition: transform .2s ease; }
.direct-item:hover .direct-go span { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .btn, .direct-go span, .al-chev { transition: none; }
}

/* Dernier trajet : pas de filet ni de marge en bas, pour que le vide sous la liste égale celui sous les prévisions */
#parcours .route:last-of-type { border-bottom: 0; }

/* Carte entière, à ses proportions d'origine ; la liste répartit son espace pour finir à la même hauteur */
@media (min-width: 900px) {
  .grid-trafic .routes:not(.fav-only) { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
  .tr-side .forecast { flex: none; }
  .tr-side { justify-content: space-between; }
}

/* ===== Alertes à gauche, actualités à droite ===== */
.grid-alertes { align-items: start; }
@media (min-width: 900px) {
  .grid-alertes { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
  /* Colonne plus étroite : ligne sur deux niveaux (type · lieu · horaire, puis précisions) */
  .grid-alertes .al-row summary { grid-template-columns: 26px minmax(0, 1fr) auto 18px; grid-template-areas: "ico name when chev" "ico type sub sub"; align-items: center; gap: 4px 12px; }
  .grid-alertes .al-ico { grid-area: ico; align-self: start; margin-top: 2px; }
  .grid-alertes .al-name { grid-area: name; }
  .grid-alertes .al-when { grid-area: when; font-size: .875rem; }
  .grid-alertes .al-chev { grid-area: chev; }
  .grid-alertes .al-type { grid-area: type; }
  .grid-alertes .al-sub { grid-area: sub; }
  .grid-alertes .al-more { padding-left: 38px; }
}
.mp-news .news, #actus .news { margin: 0; }

/* Pastille de type sur la même ligne que le lieu (« Travaux  Rocade intérieure ») */
@media (min-width: 900px) {
  .grid-alertes .al-row summary { grid-template-columns: 26px auto minmax(0, 1fr) auto 18px; grid-template-areas: "ico type name when chev" "ico . sub sub sub"; }
  .grid-alertes .al-type { justify-self: start; }
  .grid-alertes .al-sub { text-align: left; padding-top: 0; }
}
@media (max-width: 899px) {
  .al-row summary { grid-template-columns: 26px auto minmax(0, 1fr) 18px; grid-template-areas: "ico type name chev" "ico when when when" "ico sub sub sub"; align-items: center; gap: 4px 10px; }
  .al-ico { grid-area: ico; align-self: start; margin-top: 2px; }
  .al-type { grid-area: type; }
  .al-name { grid-area: name; }
  .al-when { grid-area: when; text-align: left; white-space: normal; }
  .al-sub { grid-area: sub; white-space: normal; }
  .al-chev { grid-area: chev; }
}

/* Intertitres « Rocade intérieure / extérieure » mis en valeur */
.route-group {
  display: flex; align-items: center; gap: 8px; margin: 12px 0 2px; padding: 8px 12px;
  border-radius: 10px; background: var(--primary-soft); color: var(--primary);
  font-size: 1rem; font-weight: 700; letter-spacing: -.01em;
  box-shadow: inset 3px 0 0 var(--primary);
}
.route-group:first-child { margin-top: 6px; }

/* Menu du haut : 7 rubriques dont « Alternatives transports » doivent tenir dans 1200 px */
.topnav { gap: 0; margin-left: 12px; }
.topnav a { padding: 0 9px; font-size: .875rem; }

/* ----- Survol des menus ----- */
.topnav a { transition: color .15s ease, background-color .15s ease, border-color .15s ease; }
.topnav a:hover:not([aria-current]) { color: var(--text); background: var(--surface-2); border-bottom-color: var(--muted); text-decoration: none; }
.topnav a[aria-current]:hover { background: var(--surface-2); }
.topnav a:focus-visible { outline-offset: -3px; }
.shortcuts a, .menu-grid a { transition: border-color .15s ease, background-color .15s ease, color .15s ease; }
.shortcuts a:hover:not([aria-current]), .menu-grid a:hover:not([aria-current]) { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); text-decoration: none; }
.tabbar a { transition: color .15s ease; }
.tabbar a:hover { color: var(--primary); }
@media (prefers-reduced-motion: reduce) { .topnav a, .shortcuts a, .menu-grid a, .tabbar a { transition: none; } }

/* Barre du bas sur téléphone : 5 rubriques + « Plus », libellés courts sur une ou deux lignes */
.tabbar { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.tabbar a { padding: 0 2px; gap: 2px; }
.tabbar a span { font-size: .625rem; line-height: 1.1; text-align: center; overflow-wrap: anywhere; }
.tabbar svg { width: 22px; height: 22px; }

/* ===== État de la rocade par secteur : une ligne par secteur, deux colonnes (chaussée intérieure / extérieure) ===== */
.sectors .sector-head, .sectors .route { display: grid; grid-template-columns: minmax(0, 1fr) 96px 96px 32px; align-items: center; gap: 8px; }
.sectors .sector-head { padding: 4px 6px; font-size: .75rem; font-weight: 600; letter-spacing: .02em; color: var(--muted); }
.sectors .sector-head span:nth-child(n+2) { text-align: center; }
.sectors .route { padding: 7px 6px; }
.sector-state { justify-self: center; min-width: 64px; padding: 2px 10px; border-radius: 999px; text-align: center; font-size: .8125rem; font-weight: 700; }
.sector-state.st-ok { color: var(--ok); background: var(--ok-soft); }
.sector-state.st-warn { color: var(--warn); background: var(--warn-soft); }
.sector-state.st-bad { color: var(--bad); background: var(--bad-soft); }
.sector-state.st-unknown { color: var(--muted); background: var(--surface-2); }
.mp-src { margin: 10px 2px 0; }
@media (max-width: 420px) { .sectors .sector-head, .sectors .route { grid-template-columns: minmax(0, 1fr) 68px 68px 30px; gap: 4px; } .sector-state { min-width: 0; padding: 2px 6px; font-size: .75rem; } }

/* Lien Webcams au-dessus des prévisions du trafic */
.tr-side .cam-quick { position: relative; margin: 0; padding: 12px 44px 12px 16px; gap: 12px; }
.tr-side .cam-quick .q-ico { width: 34px; height: 34px; }
.tr-side .cam-quick .q-ico svg { width: 18px; height: 18px; }
.tr-side .cam-quick .q-txt strong { font-size: 1rem; letter-spacing: -.02em; }
.tr-side .cam-quick > .q-chev { position: absolute; top: 50%; right: 14px; width: 20px; height: 20px; transform: translateY(-50%); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--muted); }
.tr-side .cam-quick:hover { text-decoration: none; border-color: var(--primary); }


.sector-total { margin: 4px 2px 10px; font-size: .9375rem; color: var(--muted); }
.sector-total strong { color: var(--text); }
.sectors .route-name small { display: block; margin-top: 1px; font-size: .75rem; font-weight: 400; color: var(--muted); }
.sector-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.sector-cell small { font-size: .6875rem; line-height: 1.1; color: var(--muted); white-space: nowrap; }
@media (max-width: 420px) { .sectors .sector-head, .sectors .route { grid-template-columns: minmax(0, 1fr) 76px 76px 30px; } }

/* En-tête : le résumé de l'état ne doit pas faire passer le pont Chaban et la météo à la ligne */
@media (min-width: 900px) {
  .tr-head { flex-wrap: nowrap; }
  .tr-status { flex: 0 1 auto; min-width: 0; }
  .tr-facts { flex: none; }
}

/* Bloc sans titre : le bilan ouvre la carte, l'heure de la mesure est à sa droite */
#parcours .sector-total { margin: 0 2px 12px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; }
.sector-time { font-size: .8125rem; color: var(--muted); }

/* En-tête sans l'état global : le titre à gauche, pont Chaban et météo à droite */
.tr-head { justify-content: space-between; }

/* Téléphone : pas de météo dans l'en-tête (elle reste dans sa carte plus bas) */
@media (max-width: 639px) {
  .tr-fact[href="#meteo"] { display: none; }
}

/* Téléphone : bilan raccourci (« 2,7 km ralentis (3 %) »), le détail reste sur ordinateur */
@media (max-width: 639px) {
  .sector-more { display: none; }
  #parcours .sector-total { flex-wrap: nowrap; align-items: baseline; }
}

/* Téléphone et tablette étroite : la carte passe avant la liste des secteurs, le lien webcams et les prévisions restent après */
@media (max-width: 899px) {
  .grid-trafic .tr-side { display: contents; }
  .grid-trafic .mp-map { order: -1; }
  .grid-trafic > .card, .grid-trafic .tr-side > .card { margin: 0; }
}

/* Téléphone : titre de la page masqué à l'écran (il reste lu par les lecteurs d'écran et les moteurs de recherche) */
@media (max-width: 639px) {
  .tr-title { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; flex-basis: auto; }
  .tr-head { margin-top: 6px; margin-bottom: 12px; }
}