:root {
  --cassiopeia-color-primary: #163524;
  --cassiopeia-color-link: #10281b;
  --cassiopeia-color-hover: #000000;

  --cassiopeia-font-family-body:
    "Inter",
    "Segoe UI",
    system-ui,
    sans-serif;

  --cassiopeia-font-family-headings:
    "Inter",
    "Segoe UI",
    system-ui,
    sans-serif;

  --eco-bg: #f3f4f5;
  --eco-soft: #eceeef;
  --eco-dark: #163524;
  --eco-gold: #8e8e8e;
}

/* Fond général */
body {
  background: var(--eco-bg);
  color: #202124;
  font-size: 1.05rem;
  line-height: 1.7;
  font-family: var(--cassiopeia-font-family-body);
}

/* Titres plus modernes */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  font-family: var(--cassiopeia-font-family-headings);
  letter-spacing: -0.02em;
}

/* H1 */
h1, .h1 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  color: #111111;
  font-weight: 750;
  line-height: 1.1;
}

/* H2 */
h2, .h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  color: #163524;
  font-weight: 700;
  border-left: 4px solid #d7dadd;
  padding-left: .7rem;
  margin-top: 2rem;
}

/* H3 */
h3, .h3 {
  color: #1f2b24;
  font-weight: 650;
}

/* Liens */
a {
  color: #10281b;
  text-decoration: none !important;
  transition: color .2s ease;
}

a:hover {
  color: #000000;
  text-decoration: none !important;
}

/* Menu */
.container-header .mod-menu > li > a {
  text-decoration: none !important;
}

/* Cartes */
.card,
.blog-item,
.item-page {
  background: #ffffff;
  border: 1px solid #e2e5e7;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.04);
}

/* Ambiance “écologie” sur les blocs intro */
.banner,
.container-banner {
  background: linear-gradient(135deg, rgba(18,60,36,.88), rgba(36,122,74,.78)),
              url("/images/ecologie-hero.jpg") center/cover no-repeat;
  color: #fff;
  padding: 5rem 1.5rem;
  border-radius: 0 0 34px 34px;
}



/* Header clair premium */
.container-header {
  background: linear-gradient(135deg, #f7f6f2, #efeee9);
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
  border-bottom: 1px solid #e3e3df;
}

/* Footer */
.footer {
  background: #1b1d1e;
  color: #d7dbdd;
}

/* Breadcrumb */
.breadcrumb {
  background: #e9ebec;
  border-radius: 999px;
}

/* Boutons */
.btn-primary,
button.btn-primary,
input[type="submit"] {
  background: #163524;
  border-color: #163524;
  border-radius: 999px;
  font-weight: 700;
}

.btn-primary:hover,
button.btn-primary:hover,
input[type="submit"]:hover {
  background: #000000;
  border-color: #000000;
}

/* Images */
img {
  border-radius: 14px;
}

/* Supprime l’effet verdâtre des modules */
.card-header,
.sidebar-right .card,
.sidebar-left .card {
  background: #f7f7f7;
}

/* Réduction des H1 globaux */
h1,
.h1 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.15;
}

/* Réduction spécifique des H2 dans les articles du blog */
.blog-item h2,
.blog-item .h2 {
  font-size: 1.35rem;
  line-height: 1.3;
  border-left: 3px solid #d7dadd;
  padding-left: .55rem;
}

/* Liens des titres d’articles */
.blog-item h2 a {
  color: #10281b;
  font-weight: 700;
}

/* Version mobile */
@media (max-width: 768px) {

  h1,
  .h1 {
    font-size: 1.55rem;
  }

  .blog-item h2,
  .blog-item .h2 {
    font-size: 1.15rem;
  }
}

/* Marge intérieure pour les chapeaux/articles */
.blog-item .item-content,
.blog-item .article-body,
.blog-item .introtext {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
}

/* Espace sous le titre */
.blog-item h2,
.blog-item .h2 {
  margin-bottom: 0.8rem;
}

/* Espace du texte d’introduction */
.blog-item .introtext p:first-child {
  margin-top: 0.4rem;
}

/* Réduction de la taille du logo */
.navbar-brand img {
  max-height: 70px;
  width: auto;
  transition: all 0.2s ease;
}

/* Mobile */
@media (max-width: 768px) {
  .navbar-brand img {
    max-height: 40px;
  }
}

/* CUSTOM 2025 05 */
.container-header {
  background:#fff;
}
#mod-menu121 { /* MAIN MENU */
	max-width: fit-content!important;
	margin: auto!important;
	position: relative;
	top:-6em;
	color: #b4b5ba!important;
	text-transform: uppercase;
  letter-spacing: 2px;
	font-size:11px;
  height:0px;
  ul { color: #b4b5ba; padding:15px; }
  a { margin: 2px 15px; display: inline-block; line-height: 1.2em }
  li.parent:hover > ul {
    display: block !important;
    visibility: visible !important;
    opacity: 1;
  }
}
.container-nav { padding: 0!important;}
.top-a, .bottom-b {
  background-color: initial;
  box-shadow: none;
  border: none;
  .card-header {
    font-size: 20px;
    font-weight: initial;
    background-color: initial;
    border-bottom: none;
    padding-bottom: 0.5em;;
  }
  .card-body {
    padding-top: 0;
    a { color:initial; }
    .icon-chevron-down { display: none; }
    .mod-menu .parent > ul {
      display: block !important;
      visibility: visible !important;
      opacity: 1;
    }
  }
}
.blog-item .item-image { margin: 0; }
.com-content-article { padding: 1.5em; }