/*
 * Feuille de style personnalisée pour Muftox Studio
 *
 * Cette feuille complète le thème sombre Darkly de Bootswatch en appliquant
 * une palette anthracite et des dégradés subtils pour un rendu moderne et
 * élégant. Les directives sont inspirées des meilleures pratiques en matière
 * de design pour les sites en mode sombre, notamment l'utilisation de gris
 * foncés (#121212) en fond et d'un texte off‑white (#E0E0E0) pour un
 * contraste confortable【182291464788480†L324-L344】. Nous évitons les noirs
 * purs et les blancs absolus, privilégions des couleurs atténuées et
 * remplaçons les ombres par des lueurs douces ou des dégradés【812861850961498†L246-L286】.
 */

/* Couleurs de base et typographie */
body {
  background-color: #121212; /* gris anthracite au lieu de noir pur pour réduire la fatigue visuelle【812861850961498†L246-L251】 */
  color: #E0E0E0;           /* texte off‑white pour éviter un contraste trop dur【812861850961498†L253-L259】 */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
}

/* Navigation */
/* Navigation */
.navbar-brand {
  font-weight: 700;
}

/* Lien de navigation actif ou survolé */
.nav-link.active,
.nav-link:hover {
  text-decoration: underline;
}

/* Barre de navigation personnalisée
 * Utilise un dégradé sombre cohérent avec le reste du site au lieu du bleu par défaut. */
.navbar-custom {
  background: linear-gradient(135deg, #1e1e2f 0%, #24243e 100%);
}

/* Héros : sections d'entête. Chaque page a une classe dédiée pour personnaliser le fond. */
.hero-home,
.hero-page,
.hero-applyzo,
.hero-contact {
  /* Dégradé violet‑bleu anthracite inspiré des palettes modernes */
  background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
  color: #E0E0E0;
  padding: 100px 0;
  text-align: center;
}

/* Sections de contenu */
.container section {
  background-color: transparent;
}

/* Listes et éléments */
.list-unstyled li i {
  margin-right: 0.5rem;
}

/* Cartes sombres pour encadrer le contenu si besoin */
.card-dark {
  background-color: #1e1e1e;
  border: none;
  border-radius: 0.75rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
}

/* Boutons personnalisés : dégradé subtil entre deux nuances du bleu primaire pour un effet moderne. */
.btn-secondary {
  background-image: linear-gradient(135deg, #375a7f, #496ba1);
  border: none;
  color: #E0E0E0;
}
.btn-secondary:hover {
  background-image: linear-gradient(135deg, #2e4c6e, #3c5c8f);
  color: #ffffff;
}

/* Liens personnalisés */
a {
  color: #9AC1F4;
  text-decoration: none;
}
a:hover {
  color: #BDD7F3;
  text-decoration: underline;
}

/* Formulaire de contact */
form .form-control,
form .form-control:focus {
  background-color: #1f1f1f;
  border-color: #3f3f3f;
  color: #E0E0E0;
}

form .form-label {
  color: #E0E0E0;
}

/* Footer */
footer {
  background-color: #0f0f0f;
  color: #8a8a8a;
}
footer a {
  color: #9AC1F4;
}
footer a:hover {
  color: #BDD7F3;
}