/* Charte KoadBooth « Serpentins », simplifiée : ses couleurs seulement (vert,
   bordeaux rare, blanc et gris sans teinte), polices inchangées. Au survol
   une couleur s'assombrit, elle ne change jamais de teinte.

   Les deux polices sont SERVIES PAR CE SERVEUR, jamais par Google : la page
   de confidentialité affirme deux écrans plus bas « aucune publicité, aucun
   pistage » — or un appel à fonts.gstatic.com livre l'adresse IP de chaque
   invité à un tiers. */
@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --primary: #0a6a2c;
  --primary-dark: #06471c;
  --secondary: #8a1538;
  --bg-main: #ffffff;
  --bg-sand: #f4f5f3;
  --border: #dfe3de;
  --ink: #0d1f13;
  --ink-light: #4b5a50;
  --radius-card: 12px;
  --radius-btn: 4px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Archivo", system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg-sand);
  line-height: 1.5;
}

.site-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-main);
}

.brand {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--primary);
  text-decoration: none;
  letter-spacing: 0.5px;
}

main {
  max-width: 620px;
  margin: 0 auto;
  padding: 40px 24px 64px;
}

main.wide {
  max-width: 1100px;
}

h1 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 700;
  font-size: clamp(28px, 5vw, 40px);
  margin: 8px 0 4px;
  color: var(--primary-dark);
}

h2 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 20px;
  margin: 0 0 8px;
  color: var(--primary-dark);
}

.lead {
  color: var(--ink-light);
  margin: 0 0 24px;
  font-size: 17px;
}

.badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  background: var(--secondary);
  padding: 4px 12px;
  border-radius: 999px;
  margin: 0 0 12px;
}

.muted {
  color: var(--ink-light);
}

.error {
  color: var(--secondary);
  font-weight: 500;
}

.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 24px;
  margin: 16px 0;
  box-shadow: 0 1px 3px rgba(13, 31, 19, 0.05);
}

.card.empty {
  text-align: center;
  padding: 48px 24px;
}

/* Boutons du site : 4px de rayon, 2px de bord — jamais des pastilles. */
.kb-btn {
  display: inline-block;
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 600;
  font-size: 15px;
  padding: 10px 18px;
  border-radius: var(--radius-btn);
  border: 2px solid var(--primary);
  color: var(--primary);
  background: transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.kb-btn:hover {
  background: var(--primary);
  color: #fff;
}

.kb-btn.primary {
  background: var(--primary);
  color: #fff;
}

.kb-btn.primary:hover {
  background: var(--primary-dark);
}

.kb-btn.ghost {
  border-color: var(--border);
  color: var(--ink-light);
}

.kb-btn.ghost:hover {
  background: var(--bg-sand);
  color: var(--ink);
}

.kb-btn.download {
  padding: 7px 14px;
  font-size: 13px;
  margin-top: 8px;
}

/* Galerie */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 18px;
  margin-top: 24px;
}

.photo {
  margin: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 10px;
  text-align: center;
}

.photo img,
.photo video {
  width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
}

/* Formulaire */
.form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 500;
  font-size: 14px;
}

.form input {
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  background: var(--bg-main);
}

.form input:focus {
  outline: none;
  border-color: var(--primary);
}

/* Espace loueur */
.apikey {
  display: block;
  margin-top: 8px;
  padding: 12px;
  background: var(--bg-sand);
  border-radius: var(--radius-btn);
  font-family: ui-monospace, monospace;
  font-size: 14px;
  word-break: break-all;
}

table.events {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

table.events th,
table.events td {
  text-align: left;
  padding: 10px 8px;
  border-bottom: 1px solid var(--border);
}

table.events th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-light);
}

.num {
  text-align: right;
}

.site-footer {
  text-align: center;
  color: var(--ink-light);
  font-size: 13px;
  padding: 24px;
}

.site-footer p {
  margin: 0;
}