/* MMO Vigilance — styles propres à Météo-Montagne */

:root {
  --mmo-vigi-green: #2e7d32;
  --mmo-vigi-yellow: #ffd600;
  --mmo-vigi-orange: #f57c00;
  --mmo-vigi-red: #cf2e2e;
  --mmo-vigi-blue: #4aaae4;
  --mmo-vigi-card-border: rgba(0, 0, 0, .16);
}

@media (prefers-color-scheme: dark) {
  :root {
    --mmo-vigi-card-border: rgba(255, 255, 255, .18);
  }
}

/* Repli autonome si le shortcode n'est pas placé dans un Groupe Gutenberg. */
.vigilance-meteo {
  --mmo-vigi-accent: var(--mmo-vigi-blue);
  box-sizing: border-box;
  border: 1px solid var(--mmo-vigi-card-border);
  border-left: 6px solid var(--mmo-vigi-accent);
  border-radius: 10px;
  padding: var(--wp--preset--spacing--10, 1.25rem);
  background: var(--wp--preset--color--base-2, #f7f8f9);
}

.vigilance-meteo.mm-vigi--green  { --mmo-vigi-accent: var(--mmo-vigi-green); }
.vigilance-meteo.mm-vigi--yellow { --mmo-vigi-accent: var(--mmo-vigi-yellow); }
.vigilance-meteo.mm-vigi--orange { --mmo-vigi-accent: var(--mmo-vigi-orange); }
.vigilance-meteo.mm-vigi--red    { --mmo-vigi-accent: var(--mmo-vigi-red); }

/*
 * Sur les pages existantes, le fond, l'arrondi et l'espacement appartiennent
 * au Groupe Gutenberg parent. Le conteneur interne est donc neutralisé pour
 * éviter un double cadre tout en conservant la barre latérale dynamique.
 */
.wp-block-group:has(> .vigilance-meteo) {
  --mmo-vigi-accent: var(--mmo-vigi-blue);
  box-sizing: border-box;
  border: 1px solid var(--mmo-vigi-card-border) !important;
  border-left: 6px solid var(--mmo-vigi-accent) !important;
}

.wp-block-group:has(> .vigilance-meteo.mm-vigi--green)  { --mmo-vigi-accent: var(--mmo-vigi-green); }
.wp-block-group:has(> .vigilance-meteo.mm-vigi--yellow) { --mmo-vigi-accent: var(--mmo-vigi-yellow); }
.wp-block-group:has(> .vigilance-meteo.mm-vigi--orange) { --mmo-vigi-accent: var(--mmo-vigi-orange); }
.wp-block-group:has(> .vigilance-meteo.mm-vigi--red)    { --mmo-vigi-accent: var(--mmo-vigi-red); }

.wp-block-group:has(> .vigilance-meteo) > .vigilance-meteo {
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

.vigilance-meteo .mm-vigi-badge {
  display: inline-block;
  padding: 0 .4em;
  border-radius: 999px;
}

.vigilance-meteo .mm-vigi-badge--jaune {
  color: #000;
  background-color: var(--mmo-vigi-yellow);
}

.vigilance-meteo .mm-vigi-badge--orange {
  color: #000;
  background-color: var(--mmo-vigi-orange);
}

.vigilance-meteo .mm-vigi-badge--rouge {
  color: #fff;
  background-color: var(--mmo-vigi-red);
}

.mmo-vigi-bulletin {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--mm-border, rgba(0, 0, 0, .08));
}

.mmo-vigi-bulletin h3 {
  margin: 0 0 .3rem;
  font-size: 1.1rem;
}

.mmo-vigi-bulletin__meta {
  margin: 0 0 .6rem;
  color: var(--mm-text-muted, #666);
  font-size: .85rem;
}

.mmo-vigi-bulletin__preview {
  margin-bottom: .6rem;
}

.mmo-vigi-bulletin__details {
  margin-top: .5rem;
}

.mmo-vigi-bulletin__details summary {
  color: var(--mmo-vigi-blue);
  cursor: pointer;
  font-weight: 600;
}

.mmo-vigi-bulletin__details summary:hover {
  text-decoration: underline;
}

.mmo-vigi-bulletin__details summary:focus-visible {
  outline: 2px solid var(--mmo-vigi-blue);
  outline-offset: 3px;
}

.mmo-vigi-bulletin__details[open] summary {
  margin-bottom: .8rem;
}

.mmo-vigi-bulletin__details h4 {
  margin: .9rem 0 .35rem;
  font-size: 1rem;
}

.mmo-vigi-bulletin__heading {
  margin-top: .75rem;
}

@media (max-width: 640px) {
  .mmo-vigi-bulletin {
    margin-top: .85rem;
    padding-top: .8rem;
  }
}