/*
  CSS Boite à outils
*/
:root {
  --color-actionsecoresponsables: 0, 158, 135;
  --color-activitesetateliers: 240, 134, 155;
  --color-communication: 177, 32, 22;
  --color-decompte: 255, 0, 0;
  --color-exemplesdactivites: 16, 113, 169;
  --color-organisation: 250, 196, 71;
  --color-reglementation: 177, 32, 22;
  --color-transmissiondesvaleurs: 36, 49, 97;
}
.responsive-banner {
  height: auto;
  max-width: 1000px;
}
div.cardfiche {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.cardfiche div {
  text-align: left;
}
div.card-labels {
  margin: 0.1em auto 0;
  text-align: center;
}
.card-labels,
.card-title {
  flex: 0 0 auto;
}
.cardfiche div span.label {
  border-radius: 5px;
  color: white;
  font-size: small;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 3px 10px;
  text-transform: uppercase;
}
.label-decompte {
  background-color: rgb(var(--color-decompte));
}
.label-communication {
  background-color: rgb(var(--color-communication));
}
.label-reglementation {
  background-color: rgb(var(--color-reglementation));
}
.label-exemplesdactivites {
  background-color: rgb(var(--color-exemplesdactivites));
}
.label-organisation {
  background-color: rgb(var(--color-organisation));
  color: #000 !important;
}
.label-transmissiondesvaleurs {
  background-color: rgb(var(--color-transmissiondesvaleurs));
}
.label-actionsecoresponsables {
  background-color: rgba(var(--color-actionsecoresponsables), 0.5);
  color: #000 !important;
}
.label-activitesetateliers {
  background-color: rgba(var(--color-activitesetateliers), 0.5);
  color: #000 !important;
}
div#content {
  padding-top: 0;
}
.full-width-blue-banner {
  background-color: #212e79 !important;
}
.full-width-blue-banner .row {
  margin: 0;
}
.text-highlight {
  border-radius: 0.75rem;
  display: inline-block;
  padding: 0 0.3em;
  position: relative;
}
.highlight-yellow {
  background-color: rgba(var(--color-organisation), 0.2);
}
.highlight-red {
  background-color: rgba(var(--color-reglementation), 0.2);
}
.highlight-pink {
  background-color: rgba(var(--color-activitesetateliers), 0.2);
}
.highlight-teal {
  background-color: rgba(var(--color-actionsecoresponsables), 0.2);
}
.highlight-blue {
  background-color: rgba(var(--color-exemplesdactivites), 0.2);
}
.card-col {
  padding: 5px;
}
.custom-card {
  border-radius: 0.5em;
  padding: 0.5rem;
}
.custom-card-body {
  align-items: center;
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 0.5rem;
}
@media screen and (max-width: 768px) {
  .custom-card-body {
    max-width: 150px;
    padding: 0;
  }
}
.custom-card-inner {
  align-items: center;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-around;
}
.custom-btn {
  background-color: #efefef;
  border: 1px solid #333;
  color: #000000 !important;
  flex: 0 0 auto;
  font-size: large;
  margin: 0 auto;
  margin-top: auto;
}
.custom-divider {
  margin: 1rem 0;
  text-align: center;
}
.custom-divider-img {
  height: 50px;
}
.card-reglementation {
  background-color: rgba(var(--color-communication), 0.05);
  border-color: rgba(var(--color-communication));
}
.card-exemplesdactivites {
  background-color: rgba(var(--color-exemplesdactivites), 0.05);
  border-color: rgba(var(--color-exemplesdactivites));
}
.card-organisation {
  background-color: rgba(var(--color-organisation), 0.05);
  border-color: rgba(var(--color-organisation));
}
.card-transmissiondesvaleurs {
  background-color: rgba(var(--color-transmissiondesvaleurs), 0.05);
  border-color: rgba(var(--color-transmissiondesvaleurs), 1);
}
.card-actionsecoresponsables {
  background-color: rgba(var(--color-actionsecoresponsables), 0.05);
  border-color: rgba(var(--color-actionsecoresponsables), 1);
}
.card-activitesetateliers {
  background-color: rgba(var(--color-activitesetateliers), 0.05);
  border-color: rgba(var(--color-activitesetateliers), 1);
}
.card-communication {
  background-color: rgba(var(--color-communication), 0.05);
  border-color: rgba(var(--color-communication), 1);
}
.card-decompte {
  background-color: rgba(var(--color-decompte), 0.05);
  border-color: rgba(var(--color-decompte), 1);
}
.card-decompte:hover {
  box-shadow: 3px 3px 8px 2px rgba(var(--color-decompte), 0.2);
  transform: scale(1.01);
  transition: transform 0.2s ease-out;
}
.card-exemplesdactivites:hover {
  box-shadow: 3px 3px 8px 2px rgba(var(--color-exemplesdactivites), 0.2);
  transform: scale(1.01);
  transition: transform 0.2s ease-out;
}
.card-organisation:hover {
  box-shadow: 3px 3px 8px 2px rgba(var(--color-organisation), 0.2);
  transform: scale(1.01);
  transition: transform 0.2s ease-out;
}
.card-transmissiondesvaleurs:hover {
  box-shadow: 3px 3px 8px 2px rgba(var(--color-transmissiondesvaleurs), 0.2);
  transform: scale(1.01);
  transition: transform 0.2s ease-out;
}
.card-actionsecoresponsables:hover {
  box-shadow: 3px 3px 8px 2px rgba(var(--color-actionsecoresponsables), 0.2);
  transform: scale(1.01);
  transition: transform 0.2s ease-out;
}
.card-activitesetateliers:hover {
  box-shadow: 3px 3px 8px 2px rgba(var(--color-activitesetateliers), 0.2);
  transform: scale(1.01);
  transition: transform 0.2s ease-out;
}
h3.card-title {
  font-size: 2.5rem;
  font-weight: 500;
  text-align: center;
}
p.cardtext {
  text-align: left;
}
.filter-btn {
  background: white;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  margin-right: 0.5em;
  margin-top: 0.5em;
}
.filter-btn.active {
  background: rgba(var(--color-actionsecoresponsables), 0.2);
}
.filter-btn:hover {
  background: rgba(var(--color-organisation), 0.2);
}
.filter-buttons {
  margin: 0 0.8em 1.5em 0;
}
.card-reglementation:hover,
.card-communication:hover {
  box-shadow: 3px 3px 8px 2px rgba(var(--color-communication), 0.2);
  transform: scale(1.01);
  transition: transform 0.2s ease-out;
}
@media only screen and (max-width: 767px) {
  #fichescontainer {
    grid-gap: 10px;
    grid-template-columns: repeat(2, minmax(150px, 1fr));
  }
}
@media only screen and (min-width: 768px) {
  #fichescontainer {
    grid-gap: 18px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}
#fichescontainer {
  align-items: stretch;
  display: grid;
  grid-auto-flow: dense;
  grid-auto-rows: minmax(200px, auto);
  margin: 0;
  padding: 0;
}
.cardparent {
  align-items: center;
  background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Calque_2" data-name="Calque 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 291.49 291.49"><defs><style> .cls-1 { fill: none; } .cls-1,.cls-2 { stroke-width: 0px; } .cls-2 { fill: %23ffffff; } </style></defs><g id="Calque_2-2" data-name="Calque 2"><g><path class="cls-2" d="m0,291.06s5.17-86.54,94.73-104.2c0,0,107.64-7.32,124-118.83,0,0,6.46-68.03,72.76-68.03v291.49l-291.49-.43Z"/><path class="cls-1" d="m0,291.06s5.17-86.54,94.73-104.2c0,0,107.64-7.32,124-118.83,0,0,6.46-68.03,72.76-68.03v291.49l-291.49-.43Z"/></g></g></svg>');
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: 25%;
  border: solid 1px #212e7920;
  border-radius: 1em;
  display: flex;
  overflow: hidden;
}
.card {
  width: 100%;
}
@media (min-width: 768px) {
  #fichescontainer {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
}
@media (min-width: 1024px) {
  #fichescontainer {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}
.custom-section {
  background-color: white;
}
.custom-container {
  display: grid;
  gap: 1rem;
  grid-template-columns: 7fr 5fr;
  margin: 0 auto;
  padding: 4rem 0.8rem;
}
.custom-content {
  align-self: center;
  margin-right: auto;
  z-index: 1;
}
.custom-content h1 {
  font-size: 4.5rem;
  font-weight: 800;
  margin-bottom: 1.4rem;
}
.custom-content p {
  color: #000;
  font-size: 1.6rem;
  font-weight: 500;
  margin-bottom: 2rem;
  z-index: 10;
}
.custom-primary-btn,
.custom-secondary-btn {
  align-items: center;
  border-radius: 0.5rem;
  display: inline-flex;
  font-size: 1.5rem;
  margin-right: 1rem;
  padding: 1.5rem 4rem;
}
.custom-primary-btn {
  background-color: #007bff;
  color: white;
}
.custom-secondary-btn {
  border: 1px solid #e0e0e0;
  color: #333333;
}
.custom-image {
  display: flex;
}
.image-container {
  padding-top: 56.25%;
  position: relative;
  width: 100%;
}
.image-container img {
  height: 100%;
  left: 0;
  object-fit: contain;
  position: absolute;
  top: 0;
  width: 100%;
}
@media screen and (max-width: 1024px) {
  .custom-image {
    display: none;
  }
}
.left-image,
.right-image,
.bottom-image {
  position: absolute;
}
.left-image {
  left: -330px;
  scale: 0.35;
  top: 80%;
  transform: translateY(-50%);
  transform: scaleX(-1);
}
.right-image {
  right: -550px;
  scale: 0.5;
  top: 50%;
  transform: translateY(-50%);
}
.bottom-image {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
@media (max-width: 1024px) {
  .left-image,
  .right-image,
  .bottom-image {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .custom-container {
    gap: 0;
    grid-template-columns: 1fr;
  }
  div.card-labels span.label {
    display: inline-block;
    white-space: pre-wrap;
  }
  @media screen and (max-width: 768px) {
    div.card-labels {
      scale: 0.8;
    }
  }
  P.card-text {
    display: none;
  }
  div.card-body {
    text-align: center;
  }
  div.cardfiche {
    margin: 0 auto;
  }
  .cardparent {
    margin: 0 auto;
    width: 100% !important;
  }
  div.card-body h3.card-title {
    font-size: 2.2rem;
  }
  a.custom-btn {
    font-weight: 600;
    margin: 0;
    scale: 0.8;
  }
  .custom-image {
    display: flex;
    order: -1;
  }
}