
/* Zen Vigile — bandeaux municipaux publics */
.vigile-banniere{display:flex;align-items:flex-start;gap:14px;padding:18px 22px;margin:16px 0;border-radius:12px;font-family:inherit;line-height:1.5;box-shadow:0 4px 18px rgba(16,56,74,.08);border:1px solid rgba(16,56,74,.08);border-left:5px solid currentColor}
.vigile-banniere .vigile-icon{font-size:26px;line-height:1.25;flex:0 0 auto}
.vigile-banniere .vigile-text{min-width:0;flex:1}
.vigile-banniere .vigile-text strong{display:block;font-size:16px;font-weight:800;line-height:1.35;margin:0 0 5px}
.vigile-banniere .vigile-periode{font-size:12px;font-weight:650;opacity:.78;margin:0 0 6px}
.vigile-banniere .vigile-message{font-size:14px;line-height:1.6;overflow-wrap:anywhere}
.vigile-banniere.vigile-vert{background:#16803C;color:#FFFFFF;border-left:8px solid #075B27;border-color:#075B27}
.vigile-banniere.vigile-jaune{background:#FFD400;color:#17233B;border-left:8px solid #B88700;border-color:#B88700}
.vigile-banniere.vigile-orange{background:#F07800;color:#FFFFFF;border-left:8px solid #A84400;border-color:#A84400}
.vigile-banniere.vigile-rouge{background:#D71920;color:#FFFFFF;border-left:8px solid #8E1015;border-color:#8E1015}
@media(max-width:600px){.vigile-banniere{padding:14px 15px;gap:10px}.vigile-banniere .vigile-icon{font-size:22px}.vigile-banniere .vigile-text strong{font-size:15px}}

/* Zen Vigile 2.4.4 — alertes medium-foncées et icônes plus visibles */
.vigile-banniere{align-items:center;gap:16px;padding:18px 22px;border-radius:12px;box-shadow:0 5px 16px rgba(6,27,73,.14);border:0;border-left:7px solid rgba(0,0,0,.28)}
.vigile-banniere .vigile-icon{display:flex;align-items:center;justify-content:center;flex:0 0 64px;width:64px;height:64px;font-size:38px;line-height:1;background:#FFFFFF;color:#061B49;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.vigile-banniere .vigile-text strong{font-size:17px;font-weight:850}
.vigile-banniere .vigile-periode{color:inherit;opacity:.94}
.vigile-banniere .vigile-message{font-weight:500}
.vigile-banniere.vigile-vert{background:#55A96E;color:#FFFFFF;border-left-color:#145B2D}
.vigile-banniere.vigile-jaune{background:#F7D94F;color:#17233B;border-left-color:#A47A00}
.vigile-banniere.vigile-orange{background:#EF914D;color:#FFFFFF;border-left-color:#98400A}
.vigile-banniere.vigile-rouge{background:#DC6268;color:#FFFFFF;border-left-color:#801820}
@media(max-width:600px){.vigile-banniere .vigile-icon{flex-basis:52px;width:52px;height:52px;font-size:31px;border-radius:10px}.vigile-banniere{padding:14px;gap:11px}}

/* 2.4.7 — bandeaux un tiers plus pâles, toujours très visibles */
.vigile-banniere.vigile-vert{background:#55A96E!important;color:#FFFFFF!important;border-left-color:#287A43!important}
.vigile-banniere.vigile-jaune{background:#F7D94F!important;color:#17233B!important;border-left-color:#B38B08!important}
.vigile-banniere.vigile-orange{background:#EF914D!important;color:#512607!important;border-left-color:#A94F13!important}
.vigile-banniere.vigile-rouge{background:#DC6268!important;color:#FFFFFF!important;border-left-color:#9F2029!important}

.vigile-icon .vigile-fire-ban-icon{display:block;width:100%;height:100%;max-width:64px;max-height:64px;}


/* Zen Vigile 2.9.22 — photos locales pour les alertes illustrées */
.vigile-banniere .vigile-icon {
  display: block;
  width: 88px;
  flex: 0 0 88px;
  font-size: 26px;
  line-height: 1.25;
}
.vigile-banniere .vigile-alert-photo {
  display: block;
  width: 88px;
  height: 76px;
  max-width: 100%;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 2px 7px rgba(0,0,0,.15);
}
.vigile-banniere .vigile-fire-ban-icon {
  display: block;
  width: 64px;
  height: 64px;
}
@media (max-width: 520px) {
  .vigile-banniere { gap: 10px; padding: 14px; }
  .vigile-banniere .vigile-icon { width: 68px; flex-basis: 68px; }
  .vigile-banniere .vigile-alert-photo { width: 68px; height: 64px; }
}

/* Zen Vigile 2.9.31 — bandeau photo diagonale, texte agrandi */
.vigile-banniere{
  position:relative!important;display:flex!important;align-items:stretch!important;gap:0!important;
  min-height:190px;padding:28px 30px 28px 35%!important;overflow:hidden!important;
  border:0!important;border-radius:12px!important;box-shadow:0 8px 24px rgba(16,36,55,.16)!important;
}
.vigile-banniere .vigile-icon{
  position:absolute!important;left:0!important;top:0!important;bottom:0!important;width:34%!important;height:100%!important;
  display:block!important;padding:0!important;margin:0!important;flex:none!important;background:transparent!important;
  border-radius:0!important;box-shadow:none!important;overflow:hidden!important;clip-path:polygon(0 0,100% 0,84% 100%,0 100%);
  z-index:1;
}
.vigile-banniere .vigile-alert-photo{
  width:100%!important;height:100%!important;max-width:none!important;object-fit:cover!important;border-radius:0!important;box-shadow:none!important;
}
.vigile-banniere .vigile-icon:not(:has(.vigile-alert-photo)){
  width:34%!important;display:flex!important;align-items:center!important;justify-content:center!important;
}
.vigile-banniere .vigile-text{
  position:relative;z-index:2;min-width:0;flex:1;align-self:center;padding-left:4px;
}
.vigile-banniere .vigile-text strong{font-size:clamp(23px,2.1vw,30px)!important;line-height:1.22!important;font-weight:850!important;margin:0 0 12px!important;overflow-wrap:anywhere}
.vigile-banniere .vigile-periode{font-size:clamp(15px,1.25vw,18px)!important;line-height:1.4!important;font-weight:700!important;margin:0 0 12px!important;opacity:1!important}
.vigile-banniere .vigile-message{font-size:clamp(16px,1.35vw,19px)!important;line-height:1.55!important;font-weight:500!important;overflow-wrap:anywhere}
@media(max-width:650px){
 .vigile-banniere{min-height:145px;padding:18px 15px 18px 35%!important;border-radius:9px!important}
 .vigile-banniere .vigile-icon{width:35%!important}
 .vigile-banniere .vigile-text strong{font-size:clamp(18px,4.5vw,23px)!important;margin-bottom:8px!important}
 .vigile-banniere .vigile-periode{font-size:14px!important;margin-bottom:7px!important}
 .vigile-banniere .vigile-message{font-size:15px!important;line-height:1.4!important}
}
@media(max-width:390px){.vigile-banniere{padding-right:12px!important;padding-left:32%!important;min-height:130px}.vigile-banniere .vigile-icon{width:33%!important}.vigile-banniere .vigile-text strong{font-size:17px!important}.vigile-banniere .vigile-periode{font-size:12px!important}.vigile-banniere .vigile-message{font-size:14px!important}}

/* Zen Vigile 2.9.32 — adaptation mobile : photo en bandeau supérieur */
@media (max-width: 650px) {
  .vigile-banniere {
    display: block !important;
    position: relative !important;
    min-height: 0 !important;
    padding: 142px 18px 20px !important;
    overflow: hidden !important;
    border-radius: 10px !important;
  }
  .vigile-banniere .vigile-icon {
    position: absolute !important;
    inset: 0 0 auto 0 !important;
    width: 100% !important;
    height: 126px !important;
    min-height: 126px !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    clip-path: none !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    background: rgba(0,0,0,.06) !important;
  }
  .vigile-banniere .vigile-alert-photo {
    display: block !important;
    width: 100% !important;
    height: 126px !important;
    object-fit: cover !important;
    object-position: center 45% !important;
  }
  .vigile-banniere .vigile-icon:not(:has(.vigile-alert-photo)) {
    width: 100% !important;
    height: 126px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 48px !important;
  }
  .vigile-banniere .vigile-text {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .vigile-banniere .vigile-text strong {
    font-size: clamp(20px, 5.2vw, 24px) !important;
    line-height: 1.25 !important;
    margin: 0 0 8px !important;
  }
  .vigile-banniere .vigile-periode {
    font-size: 14px !important;
    line-height: 1.45 !important;
    margin: 0 0 8px !important;
    overflow-wrap: anywhere !important;
  }
  .vigile-banniere .vigile-message {
    font-size: 16px !important;
    line-height: 1.5 !important;
    overflow-wrap: anywhere !important;
  }
}
@media (max-width: 380px) {
  .vigile-banniere { padding: 132px 14px 17px !important; }
  .vigile-banniere .vigile-icon,
  .vigile-banniere .vigile-alert-photo,
  .vigile-banniere .vigile-icon:not(:has(.vigile-alert-photo)) { height: 116px !important; min-height: 116px !important; }
  .vigile-banniere .vigile-text strong { font-size: 19px !important; }
  .vigile-banniere .vigile-periode { font-size: 13px !important; }
  .vigile-banniere .vigile-message { font-size: 15px !important; }
}
