/* Jean Narivelo */
:root {
  /* Couleurs principales */
  --color-background-start: #21C0CA;
  --color-background-end: #437EC2;
  --color-text: white;
  --color-title: #004c95;

  /* Styles de texte */
  --font-title-size: 18px;
  --font-title-weight: bold;

  /* Ombres */
  --box-shadow-card: 
    rgba(17, 17, 26, 0.1) 0px 4px 16px, 
    rgba(17, 17, 26, 0.1) 0px 8px 24px, 
    rgba(17, 17, 26, 0.1) 0px 16px 56px;
  --box-shadow-alert: 
    rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, 
    rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, 
    rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;

  /* Effets de flou */
  --glass-blur-filter: blur(10px);
  --glass-blur-overlay: rgba(255, 255, 255, 0.05);

  /* Autres */
  --border-radius-card: 10px;
  --border-radius-glass: 2px;
  --min-width: 250px;
  --z-index-base: 1;
}

/* Utilisation des variables */
body {
  background: radial-gradient(circle at center, var(--color-background-start), var(--color-background-end));
  flex: 1;
  min-width: var(--min-width);
  color: var(--color-text);
  z-index: var(--z-index-base);
}

.card {
  border-radius: var(--border-radius-card);
  box-shadow: var(--box-shadow-card);
}

.glass-blur {
  position: relative;
  background: inherit;
  border-radius: var(--border-radius-glass);
  overflow: hidden;
}

.glass-blur:after {
  content: '';
  background: inherit;
  position: absolute;
  box-shadow: inset 0 0 0 200px var(--glass-blur-overlay);
  filter: var(--glass-blur-filter);
}

span.title {
  font-size: var(--font-title-size) !important;
  font-weight: var(--font-title-weight);
  color: var(--color-title);
}

.alert {
  box-shadow: var(--box-shadow-alert);
}