*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 18px; }

body {
  font-family: Georgia, serif;
  background: #f4f0e6;
  color: #1a1a1a;
  min-height: 100dvh;
}

/* ── Header ── */
header {
  background: #1a5276;
  color: white;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 10px rgba(0,0,0,.4);
}
header h1 { font-size: 24px; flex: 1; line-height: 1.1; }
header p  { font-size: 14px; opacity: .75; margin-top: 3px; }

#btn-refresh {
  width: 50px; height: 50px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: 2px solid rgba(255,255,255,.35);
  color: white; font-size: 24px; cursor: pointer;
  display: grid; place-items: center; flex-shrink: 0;
}
#btn-refresh.tourne { animation: tourne .7s linear infinite; }

@keyframes tourne { to { transform: rotate(360deg); } }

/* ── Statut & layout ── */
#statut {
  text-align: center;
  padding: 12px 16px;
  font-size: 16px;
  color: #555;
  background: #ebe6d8;
  border-bottom: 1px solid #d4ccba;
}
#statut.erreur { color: #c0392b; background: #fde8e8; }
#statut:empty  { display: none; }

#contenu {
  max-width: 680px;
  margin: 0 auto;
  padding: 16px 12px 60px;
}

.spinner {
  width: 48px; height: 48px;
  border: 5px solid #ccc;
  border-top-color: #1a5276;
  border-radius: 50%;
  animation: tourne .8s linear infinite;
  margin: 70px auto;
}

/* ── Cartes panneaux ── */
.panneau {
  background: white;
  border-radius: 14px;
  border-left: 6px solid #1a5276;
  box-shadow: 0 2px 12px rgba(0,0,0,.1);
  margin-bottom: 20px;
  overflow: hidden;
}
.panneau-entete {
  padding: 14px 18px 10px;
  background: #eaf0f6;
  border-bottom: 1px solid #d0dce8;
}
.panneau-titre {
  font-size: 21px; font-weight: bold;
  color: #1a3a52; line-height: 1.25; margin-bottom: 5px;
}
.panneau-date { font-size: 14px; color: #666; }

.panneau-corps {
  padding: 14px 18px;
  font-size: 18px; line-height: 1.7; color: #1a1a1a;
  overflow-x: hidden; word-wrap: break-word; overflow-wrap: break-word;
}
.panneau-corps p      { margin-bottom: 10px; }
.panneau-corps ul     { margin: 8px 0 8px 20px; }
.panneau-corps li     { margin-bottom: 4px; }
.panneau-corps a      { color: #1a5276; }
.panneau-corps strong { font-weight: bold; }
.panneau-corps em     { font-style: italic; }

.panneau-img {
  width: 100%; display: block;
  max-height: 460px; object-fit: contain;
  background: #f0ebe0;
  border-top: 1px solid #e0ddd4;
}
img.panneau-img[src$=".svg"],
img.panneau-img[src*="/sign/"] { display: none; }

/* ── Types de panneaux ── */
.panneau.travaux  { border-left-color: #e67e22; }
.panneau.travaux  .panneau-entete { background: #fef5e7; border-color: #f5cba7; }
.panneau.travaux  .panneau-titre  { color: #7d4100; }

.panneau.alerte   { border-left-color: #c0392b; }
.panneau.alerte   .panneau-entete { background: #fde8e8; border-color: #f5b7b1; }
.panneau.alerte   .panneau-titre  { color: #7b241c; }

.panneau.evenement { border-left-color: #1e8449; }
.panneau.evenement .panneau-entete { background: #eafaf1; border-color: #a9dfbf; }
.panneau.evenement .panneau-titre  { color: #155a30; }

/* ── Barres (notif / install) ── */
.barre {
  display: none; align-items: center; gap: 10px;
  padding: 13px 18px; color: white; font-size: 17px;
}
#barre-notif   { background: #1e8449; }
#barre-install { background: #154360; }

.barre button {
  margin-left: auto; flex-shrink: 0;
  background: white; border: none; border-radius: 8px;
  padding: 8px 16px; font-size: 16px; font-weight: bold; cursor: pointer;
}
#barre-notif   button { color: #1e8449; }
#barre-install button { color: #154360; }

.btn-x {
  background: transparent !important; color: white !important;
  font-size: 22px; padding: 0 !important; margin-left: 4px !important;
}

/* ── Toast ── */
#toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: #1a5276; color: white;
  padding: 12px 22px; border-radius: 999px; font-size: 17px;
  z-index: 999; box-shadow: 0 4px 16px rgba(0,0,0,.3);
  opacity: 0; transition: opacity .3s;
  pointer-events: none; white-space: nowrap;
}
#toast.visible { opacity: 1; }

/* ── Modal notification ── */
#notif-modal {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.65);
  z-index: 500; overflow-y: auto;
  padding: 20px 12px 40px;
}
.notif-modal-inner {
  background: #f4f0e6;
  border-radius: 14px; max-width: 640px;
  margin: 30px auto; overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,.45);
}
.notif-modal-entete {
  background: #1a5276; color: white;
  padding: 12px 16px;
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; font-family: sans-serif;
}
.notif-modal-entete button {
  margin-left: auto; background: none; border: none;
  color: white; font-size: 24px; cursor: pointer;
  line-height: 1; padding: 0 2px; flex-shrink: 0;
}
#notif-modal-content .panneau       { border-radius: 0; box-shadow: none; margin: 0; }
#notif-modal-content .panneau-titre-absent {
  padding: 24px 18px; font-size: 18px;
  color: #555; font-style: italic; font-family: Georgia, serif;
}

/* ── Footer reset notifications ── */
#footer-reset {
  text-align: center;
  padding: 24px 16px 40px;
  border-top: 1px solid #d4ccba;
  margin-top: 8px;
}
#footer-reset button {
  background: none;
  border: none;
  color: #888;
  font-size: 13px;
  cursor: pointer;
  font-family: sans-serif;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: color .2s;
}
#footer-reset button:hover { color: #c0392b; }

/* ── Surbrillance panneau ── */
@keyframes highlight-pulse {
  0%, 100% { outline-color: #f39c12; }
  50%       { outline-color: transparent; }
}
.panneau.highlight-actif {
  outline: 3px solid #f39c12; outline-offset: 2px;
  animation: highlight-pulse 1.2s ease-in-out 3;
}