/*
 * custom.css — ECOPAE
 * Fichier unique pour tous les styles personnalisés du thème.
 * À éditer directement. Chargé après Bootstrap (main.css).
 */


/* ============================================================
   POLICES GOOGLE FONTS
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700&family=Hind:wght@400;500;600;700&family=Zen+Kaku+Gothic+New:wght@300;400;500;600;700;900&display=swap");


/* ============================================================
   TYPOGRAPHIE GÉNÉRALE
   ============================================================ */
h1 {
  font-family: 'Hind', sans-serif !important;
  font-size: 50px !important;
}

h2 {
  font-family: 'Zen Kaku Gothic New', sans-serif !important;
  font-weight: 700 !important;
  margin-bottom: 20px !important;
  margin-top: 10px !important;
}

h3 {
  font-family: 'Zen Kaku Gothic New', sans-serif !important;
  color: var(--bs-blue);
  font-size: 24px;
  font-weight: 700 !important;
  margin-bottom: 15px !important;
}

p, li, ul {
  font-family: 'Zen Kaku Gothic New', sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: 18px !important;
  line-height: 30px !important;
  color: var(--bs-gray) !important;
}

strong {
  display: inline !important;
}


/* ============================================================
   CLASSES UTILITAIRES
   ============================================================ */
.ecp-highlight-white {
  background-color: rgba(255, 255, 255, 0.7) !important;
  color: var(--bs-dark);
  padding: 0 -0.1em;
  border-radius: 0.1em;
  display: inline;
}

.ecp-highlight-green {
  background-color: rgba(var(--bs-success-rgb), 1) !important;
  color: var(--bs-white);
  padding: 0 0.5em;
  border-radius: 0.5em;
  display: inline;
}


/* ============================================================
   MASQUAGE D'ÉLÉMENTS
   ============================================================ */
.entry-header {
  display: none;
}

.time-updated-separator,
.updated,
.byline {
  display: none;
}


/* ============================================================
   PRELOADER
   ============================================================ */
.spinner-border {
  width: 75px !important;
  height: 75px !important;
  border-radius: 50% !important;
  border-width: 6px !important;
}


/* ============================================================
   MENU / NAVBAR
   ============================================================ */
.site-header {
  background-color: #ffffff !important;
  padding-bottom: 0 !important;
  padding-top: 0 !important;
}

.ecp-shadow-top {
  background-color: #ffffff;
  box-shadow: 0px 5px 21px 0px rgba(100, 100, 100, 0.2);
  z-index: 99;
  padding: 15px 0;
}

.navbar {
  padding: 0 !important;
  position: relative;
}

.navbar .navbar-brand img {
  max-width: 200px;
}

.navbar .navbar-toggler .toggler-icon {
  width: 30px;
  height: 2px;
  display: block;
  background-color: #ffffff !important;
  margin: 5px 0;
}

.navbar .navbar-nav .nav-item {
  margin-right: 30px;
}

.navbar .navbar-nav .nav-item a {
  color: #646464;
  font-family: 'Hind', sans-serif !important;
  font-size: 15px;
  text-transform: uppercase;
  font-weight: 700;
  transition: all 0.4s ease-out 0s;
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
  color: var(--bs-blue) !important;
}

.navbar .navbar-nav .nav-item.active a,
.navbar .navbar-nav .nav-item:hover a {
  color: var(--bs-blue);
}

/* Dropdown */
.dropdown:hover .dropdown-menu {
  display: block !important;
  margin-top: 0;
}

.navbar .dropdown-item {
  color: #646464 !important;
}

.navbar .dropdown-item:hover,
.dropdown-item:focus {
  background-color: #ffffff !important;
  color: var(--bs-blue) !important;
}

.navbar .dropdown-item.active {
  background-color: #ffffff !important;
  color: var(--bs-blue) !important;
}

/* Responsive navbar */
@media (max-width: 767px) {
  .navbar .navbar-collapse {
    position: absolute;
    top: 128%;
    width: 100%;
    left: 0;
    background-color: #fff;
    padding: 5px 15px;
    z-index: 9;
    box-shadow: 0px 5px 25px 0px rgba(100, 100, 100, 0.3);
  }

  .navbar .navbar-nav .nav-item {
    margin: 5px 0;
  }

  .navbar .navbar-btn {
    position: absolute;
    right: 70px;
    top: 0;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar .navbar-nav .nav-item {
    margin: 5px 0;
  }

  .navbar .navbar-btn {
    position: absolute;
    right: 70px;
    top: 0;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .navbar .navbar-nav .nav-item {
    margin-right: 25px;
  }

  .navbar .navbar-nav .nav-item a {
    font-size: 13px;
  }
}


/* ============================================================
   BOUTONS
   ============================================================ */
.btn {
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  border-radius: 30px !important;
}


/* ============================================================
   SERVICES (cartes)
   ============================================================ */
.ecp-service-row {
  row-gap: 1.5rem; /* même valeur que g-4 (gap horizontal) */
}
.ecp-service-card {
  padding: 50px 30px !important;
  background-color: #fff;
  align-items: stretch;
}

.ecp-service-card a {
  text-decoration: none !important;
  color: #646464 !important;
}

.ecp-service-card:hover {
  background-color: #135498;
}

.ecp-service-card:hover p,
.ecp-service-card:hover p a {
  color: #ffffff !important;
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .ecp-service-card { padding: 30px 10px !important; }
}

@media (max-width: 767px) {
  .ecp-service-card { padding: 30px 10px !important; }
}


/* ============================================================
   CARTES ARTICLES (shortcode bs-grid-actu)
   ============================================================ */
.ecp-post-card {
  background-color: #fff;
  padding: 30px !important;
  align-items: stretch;
}

.ecp-post-card a {
  text-decoration: none !important;
  color: #646464 !important;
}

.ecp-post-card .ecp-post-card__header a:hover {
  background-color: var(--bs-blue) !important;
  color: #ffffff !important;
  padding: 5px 10px;
  border-radius: 5px;
  display: block;
}


/* ============================================================
   ARCHIVES / CARTES ARTICLES
   ============================================================ */
.ecp-card-image {
  height: 180px !important;
  width: 100% !important;
  object-fit: cover !important;
  object-position: top !important;
  display: block !important;
  vertical-align: top !important;
  border-radius: 15px 15px 0px 0px !important;
  overflow: hidden !important;
  border: 0px solid #000;
}

.ecp-card-row {
  align-items: stretch !important;
}

.ecp-card-box {
  box-shadow: 0 8px 24px 0px rgba(0, 0, 0, 0.1);
  padding: 0px !important;
  height: 100% !important;
  background: white;
  border-radius: 15px;
  border: 0px solid #000;
  position: relative;
}

.ecp-card-footer {
  position: absolute;
  bottom: 0;
  right: 0;
}

.card-text {
  padding-bottom: 50px !important;
}


/* ============================================================
   BADGES CATÉGORIES
   ============================================================ */
.badge {
  padding: 5px 10px;
  border-radius: 12px;
  color: white;
  font-size: 0.85em;
  display: inline-block;
  margin-right: 5px;
}

.ecp-badge-actualite {
  background-color: #0073aa;
}

.ecp-badge-test {
  background-color: #d54e21;
}

.ecp-badge-ressources {
  background-color: #46b450;
}


/* ============================================================
   SWIPER (carrousel)
   ============================================================ */

/* Flèches navigation */
.swiper-button-next,
.swiper-button-prev {
  color: var(--bs-blue) !important;
}

/* Conteneur de chaque carte */
.bs-swiper .card {
}

/* Image en haut de la carte */
.bs-swiper .card-img-top {
  width: 300px !important;
  height: 150px !important;
  object-fit: cover !important;
  object-position: top !important;
}

/* Corps de la carte */
.bs-swiper .card-body {
}

/* Titre de la carte */
.bs-swiper .card-title {
}

/* Excerpt / texte */
.bs-swiper .card-text {
}

/* Badge catégorie dans la carte */
.bs-swiper .badge {
}

/* Lien "Lire la suite" */
.bs-swiper .card-link {
}


/* ============================================================
   DIVERS
   ============================================================ */