/* Charte graphique inspirée de valabre.com :
   navy #202b53 (jumbotron/liens), rouge #e6352b (warning), orange #eb9316 (boutons) */
:root {
  --valabre-navy: #202b53;
  --valabre-red: #e6352b;
  --valabre-orange: #eb9316;
  --valabre-orange-light: #f0ad4e;
}

* { box-sizing: border-box; }

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  max-width: 560px;
  margin: 0 auto;
  padding: 0 20px 40px;
  color: #202020;
  background: #f5f5f5;
}

.site-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 0;
  border-bottom: 3px solid var(--valabre-navy);
  margin-bottom: 24px;
}
.site-header img { height: 64px; width: auto; }
.site-header h1 {
  font-family: Raleway, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--valabre-navy);
  margin: 0;
  line-height: 1.3;
}

label { display: block; margin-top: 16px; font-weight: bold; color: var(--valabre-navy); }
input[type=text] {
  width: 100%; padding: 8px; margin-top: 4px;
  border: 1px solid #ccc; border-radius: 4px; font-size: 1rem;
}
input[type=text]:focus { outline: none; border-color: var(--valabre-navy); }

.radio-group label, .checkbox-group label {
  font-weight: normal; color: #202020; display: inline-flex; align-items: center;
  gap: 6px; margin-right: 16px; margin-top: 8px;
}

.error { color: var(--valabre-red); font-size: 0.9rem; margin-top: 4px; }

.avertissement {
  color: #fff; background: var(--valabre-red); font-weight: bold;
  padding: 10px 14px; border-radius: 4px; margin: 12px 0;
}

button, .btn {
  margin-top: 24px; padding: 10px 28px; font-size: 1rem; font-weight: bold;
  cursor: pointer; border: none; border-radius: 4px; color: #fff;
  background: linear-gradient(to bottom, var(--valabre-orange-light), var(--valabre-orange));
}
button:hover, .btn:hover { filter: brightness(0.95); }

a { color: var(--valabre-navy); }
a.retour { display: inline-block; margin-top: 16px; }

table { width: 100%; border-collapse: collapse; margin-top: 16px; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #ddd; font-size: 0.9rem; }
th { color: var(--valabre-navy); }
.succes { color: #1e7e34; font-weight: bold; }
.erreur { color: var(--valabre-red); font-weight: bold; }

.spinner {
  width: 48px; height: 48px; margin: 0 auto 24px;
  border: 5px solid #ddd; border-top-color: var(--valabre-navy);
  border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.pipeline-error {
  text-align: left; white-space: pre-wrap; font-family: monospace;
  font-size: 0.85rem; background: #fdecea; color: var(--valabre-red);
  padding: 10px; border-radius: 4px;
}