:root {
  --cassiopeia-color-primary: #005420;
  --cassiopeia-color-link: #005420;
  --cassiopeia-color-hover: #2D8455;
  --link-color: #005420;
}

.pagination {
  --pagination-active-bg: #005420;
  --pagination-active-border-color: #005420;
}


h1 {
  font-size: 1.5rem;
}

h2 {
  font-size: 1.3rem;
}

h3 {
  font-size: 1.1rem;
}

.side-menu {
  font-weight: bold;
  width: 300px;
  margin-right: auto;
  margin-left: auto;
}

.side-menu-list {
  margin-left: 1rem;
}

.side-menu-title {
  color: white;
  background-color: #005420;
  padding: 0.5rem 1rem 0.5rem 1rem;
  font-size: 1.3rem;
}


.sous-titre {
  font-weight: normal;
  font-size: 1rem;
}

.flex-image {
  width: 100%;
  max-width: 100%;
}

.round-3 {
  border-radius: 3px;
}

.round-5 {
  border-radius: 5px;
}

.cadre {
  padding: 0.7rem 1rem 0.7rem 1rem;
  margin-bottom: 1rem;
  border: solid 1px grey;
  font-size: 0.9rem;
}

/* ---HEADER--- */

.container-header {
  background-color: white;
  background-image: none;
  border-bottom: solid 1px white;
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.5);
}

.container-header .container-nav {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  padding-bottom: 0;
  width: 310px;
  
}

#mainmenugrinalbert {
  color: var(--body-color);
  font-weight: 700;
  font-size: 1.1rem;
  justify-content: flex-end;
  margin: 1rem 0 1rem 0;
}

#mainmenugrinalbert li {
  padding: 8px 14px 8px 14px;
  max-width: 310px;
}

#mainmenugrinalbert .active {
  color: #fff;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.6);
  text-shadow: 0 0 2px rgba(0,84,32,0.6);
  border-radius: 5px;
  background-color: #005420;
  background-image: url(../images/readon-vert.png);
  box-shadow: 0 4px 2px #ffffff, 0 0 0 3px rgba(225, 225, 225, 0.5);
}

/* ---FOOTER--- */

.g-footer {
  color: #fff;
}

.g-footer-content {
  margin-left: 2.5rem;
}

a.g-footer:hover {
  color: white;
}

/* ---CONTENU--- */

.g-article {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: center;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.g-article-reverse {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.g-article-column {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-top: 2rem;
  margin-bottom: 2rem;
  gap: 1rem;
}

  
.w50-left {
  flex-wrap: wrap;
  }
    
.w50-right {
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
  }


/* ---CATALOGUE--- */

.row-start {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
}

.row-reverse {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
}

.column-end {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
}

.column-reverse-end {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
}

.w72.catalogue h1 + p {
  font-weight: bold;
  margin-top: -0.5rem;
}

.w72.catalogue > h2 {
  margin-top: 1.5rem;
}

.grille-catalogue {
  padding: 0 0.5rem 0 0.5rem;
  max-width: 318px;
}

.grille-catalogue-titre > p {
  margin-top: 1rem;
  margin-bottom: 0;
  font-weight: bold;
}

.grille-catalogue-image {
  height: 430px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
}

a.grille-catalogue {
  color: black;
  text-decoration: none;
}

a.grille-catalogue:hover, a.grille-catalogue:visited {
  color: black;
  text-decoration: none;
}

.intro-texte-catalogue {
  max-height: 175px;
}

.intro-texte-catalogue > h1 {
  margin-top: -0.5rem;
}

.intro-texte-catalogue > p {
  font-size: 1.1rem;
  font-weight: bold;
  margin-top: 1rem;
  line-height: 1.5rem;
}

.intro-image-catalogue {
  height: 430px;
  justify-content: flex-end;
}

.fiche-technique {
  font-size: 0.9rem;
  margin-top: 1rem;
  text-align: right;
}

.age {
  width: 200px;
  padding: 0.5rem 1rem 0.5rem 1rem;
  margin-bottom: 1rem;
  font-weight: bold;
  color: #ffffff;
  background-color: var(--cassiopeia-color-primary)
}

/* ---ARTISTES--- */

.artistes-image {
  max-width: 318px;
}

/* AFFICHAGE  >= 768px*/

@media (min-width: 768px) { 

.container-header .container-nav {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  padding-bottom: 0;
  width: 700px;
  gap: 2rem;
}

  .container-header .mod-menu {
  flex: 1 0 50%
}
  
.g-article {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 2.5rem;
}
  
.g-article-reverse {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 2rem;
}
  
  .g-article-reversez {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-content: center;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.row-start {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 1rem;
}


.row-reverse {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 1rem;
}

.w50-left {
  flex-basis: 50%;
  padding: 0 1rem 0 0;
  flex-wrap: nowrap;
  }
    
.w50-right {
  flex-basis: 50%;
  padding: 0 0 0 1rem;
  flex-wrap: nowrap;
  margin-bottom: 0.5rem;
  }

.w72 {
  flex-basis: 72%;
  padding: 0 0.25rem 0 0.25rem;
}
  
.w28-image {
  flex-basis: 28%;
}

}

/* AFFICHAGE  >= 992px*/

@media (min-width:992px) {

.container-header .container-nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  padding-bottom: 0;
  margin-bottom: 1rem;
  gap: 0;
}

#mainmenugrinalbert {
  color: var(--body-color);
  font-weight: 700;
  font-size: 1.1rem;
  justify-content: flex-end;
  align-self: end;
  margin: 0 2rem 0.5rem 2rem;
}

#mainmenugrinalbert li {
  padding: 8px 14px 8px 14px;
  margin: 0 0 0 0.6rem;
  max-width: 310px;
}

}