@charset "UTF-8";
:root {
  --site-width: var(--wp--style--global--wide-size, 1400rem);
  --site-width-narrow: var(--wp--style--global--content-size, 900rem);
  --header-height: 133rem;
  --typo-title: var(--wp--preset--font-family--title);
  --typo-text: var(--wp--preset--font-family--text);
  --typo-kick: var(--wp--preset--font-family--kick);
  --color-black: var(--wp--preset--color--black);
  --color-white: var(--wp--preset--color--white);
  --color-ardoise: var(--wp--preset--color--ardoise);
  --color-ardoise-medium: var(--wp--preset--color--ardoise-medium);
  --color-ardoise-light: var(--wp--preset--color--ardoise-light);
  --color-vert: var(--wp--preset--color--vert);
  --color-glaz: var(--wp--preset--color--glaz);
  --color-glaz-light: var(--wp--preset--color--glaz-light);
  --color-jaune: var(--wp--preset--color--jaune);
  --color-text: var(--wp--preset--color--texte);
  --border-radius-s: 4rem;
}

.cpage-details, .cpage-steps, .cpage-hero__wrap {
  width: var(--site-width);
  margin-inline: auto;
}

.cpage-kick {
  display: flex;
  align-items: center;
  gap: 10rem;
  margin: 0 0 20rem;
  font-family: var(--typo-kick);
  font-size: 18rem;
  text-transform: uppercase;
  color: var(--color-jaune);
}
.cpage-kick::before {
  content: "";
  flex: 0 0 auto;
  width: 22rem;
  height: 22rem;
  background: url("../media/pictos/picto-cercle.png") center/contain no-repeat;
}

.cpage-hero {
  padding: 50rem 0 60rem;
  background: var(--wp--preset--gradient--glaz-jaune);
}
.cpage-hero__title {
  margin: 0;
  font-size: 64rem;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: var(--color-white);
}
.cpage-hero__title span {
  color: var(--color-ardoise);
}

.cpage-intro {
  display: flex;
  align-items: flex-start;
  gap: 70rem;
  padding-left: calc((100% - var(--site-width)) / 2);
  margin: 30rem 0 30rem;
}
.cpage-intro__content {
  flex: 0 0 960rem;
  padding-top: 50rem;
}
.cpage-intro__title {
  margin: 0 0 20rem;
  font-size: 42rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: var(--color-ardoise);
}
.cpage-intro__title span {
  color: var(--color-glaz-light);
}
.cpage-intro__text {
  margin: 0 0 40rem;
  font-size: 22rem;
  line-height: 1.75;
  color: var(--color-text);
}
.cpage-intro__quote {
  margin-left: 300rem;
  font-family: var(--typo-title);
  font-size: 26rem;
  line-height: 1.6;
  letter-spacing: 0.03em;
  color: var(--color-ardoise);
}
.cpage-intro__picture {
  flex: 1 1 auto;
  min-width: 0;
}
.cpage-intro__picture img {
  display: block;
  width: 100%;
  height: 460rem;
  object-fit: cover;
  object-position: 30% 50%;
  border-radius: var(--border-radius-s) 0 0 var(--border-radius-s);
}

.cpage-steps {
  margin-bottom: 60rem;
}
.cpage-steps > .cpage-kick {
  margin-left: -45rem;
}
.cpage-steps__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 50rem;
  margin: 0 0 0 -45rem;
  padding: 0 0 20rem 30rem;
  border-left: 3rem solid var(--color-ardoise-light);
}

.cpage-step {
  list-style: none;
}
.cpage-step__index {
  display: block;
  margin-bottom: 14rem;
  font-family: var(--typo-title);
  font-size: 55rem;
  line-height: 1;
  color: var(--color-ardoise-light);
}
.cpage-step__title {
  margin: 0 0 20rem;
  font-size: 28rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--color-ardoise);
}
.cpage-step p {
  margin: 0;
  font-size: 20rem;
  line-height: 1.7;
  color: var(--color-text);
}

.cpage-details {
  display: grid;
  grid-template-columns: 330rem 1fr;
  gap: 70rem;
  align-items: start;
  margin-bottom: 40rem;
}
.cpage-details__picto {
  margin: 0 0 0 -45rem;
}
.cpage-details__picto img {
  display: block;
  width: 100%;
}
.cpage-details__content {
  max-width: 1000rem;
  padding-top: 50rem;
}
.cpage-details__block {
  margin-bottom: 60rem;
}
.cpage-details__block:last-child {
  margin-bottom: 0;
}
.cpage-details__block p {
  margin: 0;
  font-size: 22rem;
  line-height: 1.7;
  color: var(--color-text);
}
.cpage-details__block ul {
  margin: 0;
  font-size: 22rem;
  line-height: 1.7;
  color: var(--color-text);
}
.cpage-details__block ul li {
  list-style: none;
}
.cpage-details__block ul li::before {
  content: "•";
  margin-right: 8rem;
}

.cpage-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28rem;
  padding: 55rem 0 50rem;
  background-color: var(--color-glaz-light);
}
.cpage-cta__text {
  margin: 0;
  font-family: var(--typo-kick);
  font-size: 18rem;
  text-transform: uppercase;
  font-size: 22rem;
  color: var(--color-ardoise-light);
}
.cpage-cta .btn {
  min-width: 290rem;
  text-align: center;
}
.cpage-cta .btn:hover {
  background-color: var(--color-ardoise-medium);
}