html, body {
	margin: 0;
	padding: 0;
	height: 100%;
  font-family: "Capriola", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.full-height2 {
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: sans-serif;
  background: hsla(308, 57%, 34%, 1);

  background: linear-gradient(315deg, hsla(308, 57%, 34%, 1) 28%, hsla(310, 49%, 38%, 1) 42%, hsla(314, 34%, 49%, 1) 64%, hsla(327, 44%, 71%, 1) 100%);

  background: -moz-linear-gradient(315deg, hsla(308, 57%, 34%, 1) 28%, hsla(310, 49%, 38%, 1) 42%, hsla(314, 34%, 49%, 1) 64%, hsla(327, 44%, 71%, 1) 100%);

  background: -webkit-linear-gradient(315deg, hsla(308, 57%, 34%, 1) 28%, hsla(310, 49%, 38%, 1) 42%, hsla(314, 34%, 49%, 1) 64%, hsla(327, 44%, 71%, 1) 100%);

  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#89257B", endColorstr="#923282", GradientType=1 );
}

.landing {
  display: flex;
  flex-direction: column;
  height: 100vh;
  font-family: sans-serif;
}

.landing-small {
  display: flex;
  flex-direction: column;
  font-family: sans-serif;
}

.landing-top {
  padding: 50px;
  text-align: center;
}

.landing-center {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.grad {
	background: hsla(308, 57%, 34%, 1);

	background: linear-gradient(135deg, hsla(308, 57%, 34%, 1) 46%, hsla(342, 83%, 38%, 1) 100%);

	background: -moz-linear-gradient(135deg, hsla(308, 57%, 34%, 1) 46%, hsla(342, 83%, 38%, 1) 100%);

	background: -webkit-linear-gradient(135deg, hsla(308, 57%, 34%, 1) 46%, hsla(342, 83%, 38%, 1) 100%);

	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#89257B", endColorstr="#b01041", GradientType=1 );
	
	color: white;
}

.che {
	font-size: 3em;
}

.title {
	color: white;
  font-family: "Capriola", sans-serif;
  font-weight: 400;
  font-style: normal;
  text-align: center;
  display: inline-grid;
  line-height: 2em;

  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

/* Grands écrans (desktop) */
@media (min-width: 1024px) {
  .title {
    font-size: 3em;
  }
}



.centered {
	display: flex;
	justify-content: center;
	align-items: center;
}

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  padding: 20px;
  align-items: center;
}

.card-container-remove-gap {
  gap: 0px
}

.card {
  flex: 1 1 250px;
  max-width: 300px;
  padding: 16px;
  transition: transform 0.2s ease;
}

.card-wide {
  flex: 1 1 250px;
  padding: 16px;
  transition: transform 0.2s ease;
}

.more-line-spacing {
  line-height: 115%;
}

.signature {
  float: right;
}

.portrait {
  text-align: center;
}
.portrait > img {
  object-fit: cover;
  border-radius: 50% / 50%;
}

.card-activities {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  max-width: 300px;
  text-align: center;
}

.card-head {
  max-width: 100px;
}

.card-head > a {
  color: white;
  font-size: large;
  text-decoration: none
}

.card-head > a::before {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: white;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.card-head > a:hover::before {
  transform: scaleX(1);
}

.secondary {
	background-color: #41403B;
	color: white;
	padding: 1em;
}

.bottom {
	background-color: #89257B;
	color: white;
	padding: 1em;
}

.break {
  flex-basis: 100%;
  height: 0;
}

.bottom-column {
  padding: 20px;
  text-align: center;
}

.heading-title > span {
 background:
   linear-gradient(-225deg,#0000 10px,#89257B 10px) bottom left,
   linear-gradient(-45deg ,#0000 10px,#89257B 10px) bottom right;
 background-size: 60% 10px;
 background-repeat: no-repeat;
 padding: 0 15px 5px;
 -webkit-box-decoration-break: clone;
 box-decoration-break: clone; 
 
 font-size:25px;
 font-weight:bold;
 line-height: 200%;
}