/* SD ONE · lot 31 (24/10/2026, Hassan) : fenêtres Météo et Info trafic plus complètes. Bleu nuit, bleu, argent. */
.sd31-boite { width: min(980px, calc(100vw - 24px)) !important; max-height: calc(100vh - 32px); display: flex; flex-direction: column; }
.sd31-corps { padding: 14px 18px 18px; overflow-y: auto; display: grid; gap: 14px; color: #0F2A4A; font: 500 14px Manrope, "Segoe UI", Arial, sans-serif; }
/* le contenu ne déborde jamais de la fenêtre (les bandes heure par heure défilent à l'intérieur) */
.sd31-boite { overflow: hidden; }
.sd31-corps { grid-template-columns: minmax(0, 1fr); overflow-x: hidden; }
.sd31-corps > * { min-width: 0; }
.sd31-haut { position: relative; }
.sd31-rech { display: flex; gap: 8px; }
.sd31-in { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 14px; border: 1px solid #C4D3E6; border-radius: 12px; background: #fff; color: #0F2A4A; font: 600 14px Manrope, sans-serif; box-sizing: border-box; }
.sd31-in:focus { outline: 2px solid #3C7BD0; outline-offset: 1px; border-color: #3C7BD0; }
.sd31-b { min-height: 44px; padding: 0 16px; border: 1px solid #C4D3E6; border-radius: 12px; background: #fff; color: #0F2A4A; font: 700 13px Manrope, sans-serif; cursor: pointer; white-space: nowrap; }
.sd31-b.fonce { background: linear-gradient(180deg, #1E5AA8, #0F2A4A); color: #fff; border-color: #1E5AA8; }
.sd31-b:hover { filter: brightness(1.08); }
.sd31-res { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5; background: #fff; border: 1px solid #C4D3E6; border-radius: 12px; box-shadow: 0 12px 30px rgba(15, 42, 74, .25); padding: 4px; max-height: 300px; overflow-y: auto; }
.sd31-o { display: flex; flex-direction: column; align-items: flex-start; width: 100%; min-height: 44px; padding: 6px 12px; border: 0; border-radius: 8px; background: none; color: #0F2A4A; text-align: left; cursor: pointer; font: inherit; }
.sd31-o:hover, .sd31-o:focus { background: #EEF4FC; }
.sd31-o small { color: #5B6B80; font-size: 12px; }
.sd31-favs { display: flex; flex-wrap: wrap; gap: 6px; }
.sd31-c { min-height: 36px; padding: 0 12px; border: 1px solid #C4D3E6; border-radius: 18px; background: #F4F7FB; color: #0F2A4A; font: 700 12.5px Manrope, sans-serif; cursor: pointer; }
.sd31-c:hover { background: #E3ECF8; border-color: #9DB5D6; }
.sd31-c[data-ici] { background: #0F2A4A; color: #fff; border-color: #0F2A4A; }
.sd31-vide { margin: 8px 0; color: #5B6B80; }
/* météo */
.sd31-now { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 18px; padding: 16px 18px; border-radius: 16px; background: linear-gradient(135deg, #0F2A4A, #1E5AA8); color: #fff; }
.sd31-big { width: 72px; height: 72px; color: #DCE6F2; }
.sd31-t { display: block; font: 800 44px/1 Montserrat, sans-serif; }
.sd31-now > div > span { color: #C9D6E6; font-weight: 700; }
.sd31-det { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 14px; font-size: 13px; color: #C9D6E6; }
.sd31-det b { color: #fff; }
.sd31-h { margin: 4px 0 0; font: 700 12px Montserrat, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #5B6B80; }
.sd31-heures { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.sd31-hr, .sd31-j { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 58px; padding: 8px 6px; border-radius: 12px; background: #F4F7FB; border: 1px solid #E1E8F2; }
.sd31-hr small, .sd31-j small { color: #5B6B80; font-weight: 700; }
.sd31-ic { width: 28px; height: 28px; color: #1E5AA8; }
.sd31-hr em, .sd31-j em, .sd31-j i { font-style: normal; font-size: 12px; color: #5B6B80; }
.sd31-jours { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
/* trafic */
.sd31-carte { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid #C4D3E6; background: #EEF2F7; }
.sd31-carte iframe { display: block; width: 100%; height: min(56vh, 520px); border: 0; }
.sd31-iti { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px; border-radius: 14px; background: #F4F7FB; border: 1px solid #E1E8F2; }
.sd31-iti > b { font: 700 13px Montserrat, sans-serif; margin-right: 4px; }
.sd31-iti .sd31-in { flex: 1 1 220px; }
@media (max-width: 760px) {
  .sd31-boite { width: 100vw !important; max-height: 100vh; border-radius: 0 !important; }
  .sd31-corps { padding: 12px; }
  .sd31-now { grid-template-columns: auto 1fr; }
  .sd31-det { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sd31-jours { display: flex; overflow-x: auto; }
  .sd31-c { min-height: 44px; }
  .sd31-carte iframe { height: 50vh; }
}
/* téléphone en portrait ou en paysage : fenêtre plein écran, croix toujours visible, boutons de 44 px */
@media (max-width: 760px) {
  .sd31-fond { padding: 0 !important; }
  .sd31-boite { height: 100dvh; max-height: 100dvh; }
}
@media (pointer: coarse) { .sd31-c { min-height: 44px; } }