@media only screen {.preview-mode-theme-mismatch-warning {display: none !important;}
}

 :root {
  --primary: #00b4d8;           /* turquoise clair */
  --primary-dark: #0077b6;      /* bleu océan */
  --accent-bg: #e0f7fa;         /* bleu très pâle */
  --text: #033e56;
  --subtle: #5e7b8b;
  --background: #f0fbfd;
  --card: #ffffff;
  --radius: 16px;
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: "Segoe UI", Roboto, -apple-system, sans-serif;
  background: var(--background);
  color: var(--text);
}

header {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));color: #ffffff;text-align: center;padding: 1.5rem 1rem;font-weight: 600;font-size: 1.5rem;box-shadow: var(--shadow);border-bottom: none;border-radius: 0 0 var(--radius) var(--radius);}main {padding: 1.2rem;padding-bottom: 5rem;max-width: 640px;margin: auto;}h2 {font-size: 1.2rem;margin-bottom: 0.7rem;font-weight: 600;color: var(--primary-dark);}.grid {display: grid;grid-template-columns: repeat(2, 1fr);gap: 16px;margin-bottom: 2.5rem;}.card {background: var(--card);border-radius: var(--radius);padding: 1.3rem 1rem;text-align: center;text-decoration: none;color: var(--primary-dark);box-shadow: var(--shadow);font-weight: 500;transition: transform 0.2s, background 0.2s;display: flex;flex-direction: column;align-items: center;}.card:hover {transform: translateY(-3px);background: #d1f4ff;}.card-icon {font-size: 2rem;background-color: #ffffff;border-radius: 50%;padding: 0.8rem;margin-bottom: 0.6rem;box-shadow: 0 2px 6px rgba(0,0,0,0.08);display: inline-flex;align-items: center;justify-content: center;color: var(--primary);}.notification {background: #d6f4fa;/* bleu clair plus marqué */  padding: 1rem 1.2rem;border-radius: var(--radius);margin-bottom: 0.8rem;font-size: 0.95rem;color: #083d52;/* texte bleu foncé pour un bon contraste */  box-shadow: var(--shadow);border-left: 4px solid var(--primary);}.notification a {color: var(--primary-dark);font-weight: 600;text-decoration: underline;}nav {position: fixed;bottom: 0;width: 100%;z-index: 1000;display: flex;border-top: 1px solid #cdeaf3;background: #ffffff;box-shadow: 0 -3px 6px rgba(0, 0, 0, 0.04);border-radius: var(--radius) var(--radius) 0 0;}nav a {flex: 1;text-align: center;padding: 0.7rem 0.4rem;font-size: 0.8rem;color: var(--subtle);text-decoration: none;display: flex;flex-direction: column;align-items: center;transition: color 0.2s;}nav a.active {color: var(--primary-dark);font-weight: 600;}nav a span {font-size: 1.4rem;}#details {max-height: 400px;overflow-y: auto;padding: 1rem;border: 1px solid #cdeaf3;background: #ffffff;border-radius: var(--radius);box-shadow: var(--shadow);}