/* Bouton principal personnalisé */
a.md-button.md-button--primary {
  background-color: #007eff;  /* ta couleur principale HEX */
  color: white;               /* couleur du texte */
  border: none;
}

a.md-button.md-button--primary:hover {
  background-color: #00ffcf;  /* couleur au survol */
}

/* Changer la couleur du lien actif dans la navigation de gauche */
.md-nav__item--active > .md-nav__link {
  color: #6eb7ff !important;
  font-weight: normal;
}

.md-nav__link--active {
  color: #6eb7ff !important;  /* ta couleur personnalisée */
  font-weight: normal;
}

.md-content a:not(.md-button) {
  color: #6eb7ff;
  text-decoration: none;  /* Enlève le soulignement */
}

.md-content a:not(.md-button):hover {
  color: #ffaa00;
  text-decoration: none;
}

@media screen and (max-width: 76.2344em) {
    .md-nav--primary .md-nav__title[for=__drawer] {
        background-color: #6eb7ff !important;  /* ta couleur de fond */
        color: #ffffff !important;             /* ta couleur de texte */
        font-weight: 700;
    }
}

/* Étend la largeur max de la zone centrale */
.md-grid {
    max-width: 1400px;  /* ajuste selon ce que tu veux */
}

/* Optionnel : centre encore mieux sur très grands écrans */
.md-main__inner {
    margin: 0 auto;
}

/* body {
    color: #000000;  /* remplace par la couleur que tu veux */
/*} */

.md-header {
    background-color: #0080ff91 !important;  /* Bleu marine par exemple */
}

/* Couleur du texte/logo dans le bandeau */
.md-header .md-header__title,
.md-header .md-header__button {
    color: #ffffff !important;
}

figure.wide-caption {
  width: 100%;
  text-align: left;
}

figure.wide-caption figcaption {
  display: block;
  max-width: 100%;
  margin-top: 0.5em;
  font-style: italic;
  color: #5a5a5a;
}

.card {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
  padding: 15px;
  margin-bottom: 20px; /* Espace entre les cartes */
}

.card img {
  height: auto;
  display: block;
  margin: 0 auto 0px auto;
}

.card a {
  display: block;
  font-weight: bold;
  text-decoration: none;
  color: #3f51b5;
  font-size: 1.1em;
}

.card:hover {
  box-shadow: 0 0 12px rgba(0,0,0,0.2);
}

.card-title {
  font-weight: bold;
  font-size: 1.1em;
  margin-bottom: 5px;
  color: #3f51b5;
  text-decoration: none;
}

.card-description {
  font-size: 0.9em;
  color: #444;
}

/* ✅ Ajout pour forcer largeur 100% */
.card.fullwidth {
  width: 100%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}