/* ===== Thème Gris/Noir/Blanc – alu-vcard ===== */

/* Couleurs & tokens */
:root{
  --bg: #1c1c1e;           /* Fond anthracite */
  --panel: #242426;        /* Cartes/panneaux */
  --panel-2: #2e2e31;      /* Hover/alt */
  --stroke: #3a3a3d;       /* Bordures */
  --text: #f2f3f5;         /* Texte principal */
  --muted: #b0b3b8;        /* Texte secondaire */
  --accent: #e0e0e0;       /* Boutons gris clair */
  --accent-text: #1c1c1e;  /* Texte sur boutons */
  --focus: 0 0 0 3px rgba(255,255,255,.3); /* halo clair */
}


/* Reset doux */
*{ box-sizing: border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Liens */
a{ color: #fff; text-decoration: none; }
a:hover{ text-decoration: underline; }

/* Layout */
.header{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 16px; border-bottom:1px solid var(--stroke);
  position: sticky; top:0; background: rgba(14,15,18,.7); backdrop-filter: blur(6px);
}
.header strong{ letter-spacing:.3px; }
.container{ max-width: 960px; margin: 18px auto; padding: 0 16px; }

/* Cartes / panneaux */
.card{
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}

/* Grille simple */
.grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 720px){ .grid{ grid-template-columns: 1fr; } }

/* Titres */
h1,h2,h3{ margin: 0 0 10px; }
.muted{ color: var(--muted); }

/* Formulaires */
label{ display:block; margin:10px 0 2px; color: var(--muted); font-size:.95rem; }
input, textarea{
  width:100%; padding:12px 12px; border-radius: 12px;
  border: 1px solid var(--stroke);
  background: #0f1218; color: var(--text);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
input::placeholder, textarea::placeholder{ color:#808899; }
input:focus, textarea:focus{
  outline: none; border-color:#3a3f4d; box-shadow: var(--focus);
  background:#0f131a;
}

/* Boutons */
button, .btn {
  display:inline-block;
  border:0;
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  background: var(--accent);
  color: var(--accent-text);
  transition: transform .12s ease, opacity .12s ease, filter .12s ease;
}

.btn.secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--stroke);
}

button:hover, .btn:hover {
  filter: brightness(0.9);
  transform: translateY(-1px);
}


/* Tableaux */
table{ width:100%; border-collapse: collapse; }
th, td{ text-align:left; padding: 10px 8px; border-bottom:1px solid var(--stroke); }
th{ color: var(--muted); font-weight:700; font-size:.95rem; letter-spacing:.2px; }
tbody tr:hover td{ background: var(--panel-2); }

/* Flash messages */
.flash{ list-style:none; padding:0; margin:10px 0; }
.flash li{
  background:#141a21; border:1px solid #2a2f3a; padding:10px 12px; border-radius:12px;
}

/* QR + médias */
.qr{
  width: 140px; height: 140px; background:#fff; padding:8px; border-radius: 10px;
  box-shadow: 0 3px 12px rgba(0,0,0,.35);
}
.logo{ display:block; max-height:72px; margin: 0 auto 10px; }

/* Utilitaires */
.center{ text-align:center; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto; background:#0b0b0c; color:#f2f2f2; }
a { color:#7ee0ff; text-decoration:none; }
.header { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid #222; }
.container { max-width:1000px; margin: 16px auto; padding: 0 16px; }
.card { background:#101214; border:1px solid #1e1f22; border-radius:10px; padding:16px; }
.grid { display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
label { display:block; margin:8px 0; }
input, textarea { width:100%; padding:10px; border-radius:8px; border:1px solid #2a2c30; background:#0f1113; color:#f2f2f2; }
button, .btn { background:#7ee0ff; color:#0b0b0c; border:0; padding:10px 14px; border-radius:8px; font-weight:700; cursor:pointer; }
.btn.secondary { background:transparent; color:#f2f2f2; border:1px solid #2a2c30; }
table { width:100%; border-collapse:collapse; }
th, td { padding:8px 6px; border-bottom:1px solid #222; text-align:left; font-size:.95rem; }
.flash { list-style:none; padding:0; margin:10px 0; }
.flash li { background:#0f2a36; border:1px solid #1f3d49; padding:8px 10px; border-radius:8px; }
.qr { width:120px; height:120px; background:#fff; padding:6px; border-radius:6px; }
.center { text-align:center; }
/* ===== Splash logo à l'ouverture ===== */
#splash {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  z-index: 9999;
  animation: fadeOutSplash 1s ease forwards;
  animation-delay: 2s; /* durée avant disparition du splash */
}
.splash-logo {
  max-width: 60%;
  max-height: 60%;
  animation: logoZoom 1.8s ease forwards;
}
@keyframes logoZoom {
  0%   { transform: scale(1.15); opacity: 0; }
  20%  { opacity: 1; }
  80%  { transform: scale(1.00); opacity: 1; }
  100% { transform: scale(0.90); opacity: 0; }
}
@keyframes fadeOutSplash {
  to { opacity: 0; visibility: hidden; }
}
/* cacher le contenu pendant le splash, puis le révéler */
body.splash-active main { opacity: 0; transition: opacity .5s ease; }
body.splash-done main   { opacity: 1; }