/* Reset & base */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: #0b1220;
  background: #0b0f17;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.site-header { height: 16px; }

.background { position: fixed; inset: 0; overflow: hidden; z-index: -1; }
.gradient {
  position: absolute; width: 60vw; height: 60vw; filter: blur(80px); opacity: 0.35;
}
.gradient-1 {
  left: -10vw; top: -10vw;
  background: radial-gradient(50% 50% at 50% 50%, rgba(168,85,247,0.8) 0%, rgba(168,85,247,0) 70%);
  transform: rotate(15deg);
}
.gradient-2 {
  right: -10vw; bottom: -10vw;
  background: radial-gradient(50% 50% at 50% 50%, rgba(14,165,233,0.8) 0%, rgba(14,165,233,0) 70%);
  transform: rotate(-10deg);
}
.noise {
  position: absolute; inset: 0; opacity: 0.04; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

.container {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 40px 16px;
}

.card {
  width: 100%;
  max-width: 720px;
  background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.06) 100%);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 10px 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
  border-radius: 20px;
  padding: 32px;
  color: #E6EDF3;
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

.with-illustration { padding-right: 220px; }
.illustration {
  position: absolute; 
  right: 8px; 
  bottom: 0px; 
  width: 220px; 
  height: auto; 
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,0.45));
}

@media (max-width: 720px) {
  .with-illustration { padding-right: 16px; }
  .illustration { 
    position: static; 
    display: block; 
    margin: 12px auto 0; 
    width: min(56vw, 220px); 
  }
  .card {
    padding-bottom: 0px;
  }
  .contact {
    margin: 8px 0 0 0;
  }
  .footnote {
    margin: 12px 0 0 0;
  }
  .primary, .secondary {
    font-size: 14px;
    padding: 0 12px;
    height: 36px;
    border-radius: 16px;
  }
}

.header-row {
  margin-bottom: 20px;
}

.logo-brut { 
  width: 160px; 
  height: auto; 
  display: block;
  border-radius: 8px;
}

.incident-label {
  color: #ef4444;
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.title {
  margin: 14px 0 8px 0;
  font-size: clamp(24px, 4.2vw, 36px);
  line-height: 1.15;
  font-weight: 700;
  color: #F8FAFC;
}

.subtitle {
  margin: 0 0 20px 0;
  font-size: clamp(15px, 2.3vw, 18px);
  line-height: 1.6;
  color: #C7D2FE;
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.75; }
  100% { transform: scale(1); opacity: 1; }
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 22px 0 8px 0;
}

.primary, .secondary {
  appearance: none;
  border: none;
  height: 44px;
  padding: 0 16px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  gap: 8px;
}

.refresh-icon {
  width: 16px;
  height: 16px;
}

.primary .dot {
  width: 10px; 
  height: 10px; 
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.2);
  animation: pulse 1.8s ease-in-out infinite;
}

.primary {
  color: #0b1220;
  background: linear-gradient(90deg, #a855f7 0%, #0ea5e9 100%);
  box-shadow: 0 10px 24px rgba(168,85,247,0.25), 0 6px 18px rgba(14,165,233,0.22);
}
.primary:hover { filter: brightness(1.07); }
.primary:active { transform: translateY(1px); }

.primary.red {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #fca5a5;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.1);
}

.secondary {
  color: #e2e8f0;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  font-size: 16px;
  font-weight: 600;
}
.secondary:hover { background: rgba(255,255,255,0.12); }
.secondary:active { transform: translateY(1px); }

.contact {
  margin: 12px 0 0 0;
  font-size: 13px;
  color: #cbd5e1;
  opacity: 0.9;
}

@media (max-width: 720px) {
  .contact {
    margin: 8px 0 0 0;
  }
}

.contact a {
  color: #ffffff;
  text-decoration: underline;
  font-weight: 500;
}

.contact a:hover {
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  .gradient, .primary .dot { animation: none; }
}