/* ------------------------------------ *\
  CONTENTS
\* ------------------------------------ */

/**
 * CONTENTS..............You’re reading it!
 * FRONTEND EDITING .......................
 * CARDS STYLE DEFAULT ....................
 * CARD LINKS .............................
*/

.paragraph.paragraph--type--card-square figure,
.paragraph.paragraph--type--card figure,
.paragraph.paragraph--type--card-links figure {
  margin-bottom: 0;
}

.paragraph.paragraph--type--card-square.bg--cyan
  a.card__link:hover
  ~ .card__body,
.paragraph--type--card.bg--cyan a.card__link:hover ~ .card__body {
  background-color: var(--bs-cyan);
}

.paragraph.paragraph--type--card-square.bg--jaune
  a.card__link:hover
  ~ .card__body,
.paragraph--type--card.bg--jaune a.card__link:hover ~ .card__body {
  background-color: var(--bs-yellow);
}

.paragraph.paragraph--type--card-square.bg--orange
  a.card__link:hover
  ~ .card__body,
.paragraph--type--card.bg--orange a.card__link:hover ~ .card__body {
  background-color: var(--bs-orange);
}

.paragraph.paragraph--type--card-square.bg--pink
  a.card__link:hover
  ~ .card__body,
.paragraph--type--card.bg--pink a.card__link:hover ~ .card__body {
  background-color: var(--bs-pink);
}

.paragraph.paragraph--type--card-square.bg--vert
  a.card__link:hover
  ~ .card__body,
.paragraph--type--card.bg--vert a.card__link:hover ~ .card__body {
  background-color: var(--bs-green);
}

.paragraph.paragraph--type--card-square.bg--violet
  a.card__link:hover
  ~ .card__body,
.paragraph--type--card.bg--violet a.card__link:hover ~ .card__body {
  background-color: var(--bs-violet);
}

.paragraph--type--card.bg--black .card__body.card__body--arrow:after,
.paragraph--type--card-square.bg--black .card__body.card__body--arrow:after,
.paragraph.paragraph--type--card-square.bg--black .card__body *,
.paragraph--type--card.bg--black .card__body * {
  color: var(--bs-black);
}

.paragraph.paragraph--type--card-square .card__body.card__body--arrow,
.paragraph.paragraph--type--card .card__body.card__body--arrow {
  padding: 1.3rem 2.5rem 1.75rem;
}

.paragraph .card__body.card__body--arrow .card__text .overflow,
.paragraph .card__body.card__body--arrow .card__title .overflow {
  font-size: calc(1.5rem - 0.5vw);
}

.paragraph.paragraph--type--card-square.bg--black
  a.card__link:hover
  ~ .card__body,
.paragraph--type--card.bg--black a.card__link:hover ~ .card__body {
  background-color: var(--bs-black);
  color: var(--bs-white);
}

.paragraph--type--card.bg--black a.card__link:hover ~ .card__body *,
.paragraph--type--card.bg--black
  a.card__link:hover
  ~ .card__body.card__body--arrow:after,
.paragraph--type--card-square.bg--black
  a.card__link:hover
  ~ .card__body.card__body--arrow:after,
.paragraph.paragraph--type--card-square.bg--black
  a.card__link:hover
  ~ .card__body
  * {
  color: var(--bs-white);
}

.paragraph.paragraph--type--card-square.bg--white
  a.card__link:hover
  ~ .card__body,
.paragraph--type--card.bg--white a.card__link:hover ~ .card__body {
  background-color: var(--bs-white);
  color: var(--bs-black);
}

.paragraph.paragraph--type--card-square.bg--black
  a.card__link:hover
  ~ .card__body
  .cta--link:after,
.paragraph--type--card.bg--black
  a.card__link:hover
  ~ .card__body
  .cta--link:after {
  color: var(--bs-yellow);
}

/* ------------------------------------ *\
  ==FRONTEND EDITING
\* ------------------------------------ */
.layout-paragraphs-component-form .media-library-item__remove {
  background-color: var(--bs-white);
}

/* ------------------------------------ *\
  ==CARD STYLE
\* ------------------------------------ */
.paragraph.paragraph--type--card-square,
.paragraph.paragraph--type--card {
  background: #fff 0 0 no-repeat padding-box;
  border: 0;
  border-radius: 0;
}

.paragraph.paragraph--type--card-square .image-style-image-card,
.paragraph.paragraph--type--card-links .image-style-image-card,
.paragraph.paragraph--type--card .image-style-image-card {
  width: 100%;
}

.paragraph.paragraph--type--card-square .card__body,
.paragraph.paragraph--type--card .card__body {
  display: flex;
  flex-direction: column;
  align-content: space-between;
  justify-content: space-between;
  padding: 1.3rem 2.3rem 1.75rem;
  transition: all 0.5s;
  position: absolute;
  bottom: -1px;
  right: 0;
  width: 70%;
  height: auto;
  z-index: 0;
  background-color: var(--bs-white);
}

.paragraph.paragraph--type--card-square .card__body.card__body--arrow:after,
.paragraph.paragraph--type--card .card__body.card__body--arrow:after {
  font: var(--fa-font-light);
  content: '\f061';
  position: absolute;
  right: 2rem;
  top: 50%;
  transform: translate(50%, -50%);
  transition: right 0.3s cubic-bezier(0.76, 0, 0.24, 1);
}

.paragraph--type--card-square:not(.no-animation)
  a.card__link:hover
  ~ .card__body.card__body--arrow:after,
.paragraph--type--card-square
  a.card__link:focus
  ~ .card__body.card__body--arrow:after,
.paragraph--type--card-square
  a.card__link:active
  ~ .card__body.card__body--arrow:after,
.paragraph--type--card a.card__link:focus ~ .card__body.card__body--arrow:after,
.paragraph--type--card
  a.card__link:active
  ~ .card__body.card__body--arrow:after,
.paragraph--type--card:not(.no-animation)
  a.card__link:hover
  ~ .card__body.card__body--arrow:after {
  right: 1rem;
}

.paragraph.paragraph--type--card-square .card__image,
.paragraph.paragraph--type--card .card__image {
  overflow: hidden;
  transition: all 0.5s;
}

.paragraph.paragraph--type--card-square .card__image img,
.paragraph.paragraph--type--card .card__image img {
  transition: transform 0.3s cubic-bezier(0.76, 0, 0.24, 1);
}

.paragraph.paragraph--type--card-square:not(.no-animation)
  a.card__link:hover
  ~ .card__image
  img,
.paragraph.paragraph--type--card:not(.no-animation)
  a.card__link:hover
  ~ .card__image
  img {
  transform: translateY(-14.2135px) scale(1.15);
}

.paragraph.paragraph--type--card-square .card__body .card__title a,
.paragraph.paragraph--type--card-square .card__body .card__title a:focus,
.paragraph.paragraph--type--card-square .card__body .card__title a:active,
.paragraph.paragraph--type--card-square .card__body .card__title a:hover,
.paragraph.paragraph--type--card .card__body .card__title a:focus,
.paragraph.paragraph--type--card .card__body .card__title a:active,
.paragraph.paragraph--type--card .card__body .card__title a:hover {
  text-decoration: none;
}

.paragraph:where(
    .paragraph--type--card-links,
    .paragraph--type--card,
    .paragraph--type--card-square
  )
  .card__title
  h2,
.paragraph:where(
    .paragraph--type--card-links,
    .paragraph--type--card,
    .paragraph--type--card-square
  )
  .card__title
  h3,
.paragraph:where(
    .paragraph--type--card-links,
    .paragraph--type--card,
    .paragraph--type--card-square
  )
  .card__title
  h4,
.paragraph:where(
    .paragraph--type--card-links,
    .paragraph--type--card,
    .paragraph--type--card-square
  )
  .card__title
  h5 {
  margin: 0;
  font-size: inherit;
}

.paragraph:where(
    .paragraph--type--card-links,
    .paragraph--type--card,
    .paragraph--type--card-square
  )
  .card__title
  h2
  a,
.paragraph:where(
    .paragraph--type--card-links,
    .paragraph--type--card,
    .paragraph--type--card-square
  )
  .card__title
  h3
  a,
.paragraph:where(
    .paragraph--type--card-links,
    .paragraph--type--card,
    .paragraph--type--card-square
  )
  .card__title
  h4
  a,
.paragraph:where(
    .paragraph--type--card-links,
    .paragraph--type--card,
    .paragraph--type--card-square
  )
  .card__title
  h5
  a {
  font-size: 1.5rem;
  line-height: 1.2;
  margin-bottom: 0;
  text-decoration: none;
}

.paragraph:where(
    .paragraph--type--card-links,
    .paragraph--type--card,
    .paragraph--type--card-square
  )
  .card__body
  p:last-of-type {
  margin: 0;
  line-height: 1.2;
  font-size: 1rem;
}

.card__body {
  position: relative;
  z-index: 0;
}

/* ==CARD LINKS ------------------------- *\
\* -------------------------------------- */
.paragraph.paragraph--type--card-links {
  background: var(--bs-yellow);
  border: 0;
  border-radius: 0;
}

.paragraph.paragraph--type--card-links .card__body > div {
  display: flex;
  flex-direction: row;
  align-items: start;
}

.paragraph.paragraph--type--card-links .card__text {
  padding-right: 1rem;

  /* ajout ellipse quand le texte est plus long que 4 lignes */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.paragraph.paragraph--type--card-links .card__links {
  flex: 1 0 36%;
  align-self: start;
}

.paragraph.paragraph--type--card-links .card__links ul li::marker {
  color: var(--bs-blue);
}

.paragraph.paragraph--type--card-links .card__links a {
  color: var(--bs-blue);
  font-size: 1rem;
  text-decoration: none;
}

.paragraph.paragraph--type--card .card__title a:where(:hover, :focus, :active),
.paragraph.paragraph--type--card-links
  .card__links
  a:where(:hover, :focus, :active) {
  text-decoration: underline;
}

.paragraph.paragraph--type--card-links .card__body {
  display: flex;
  flex-direction: column;
  align-content: space-between;
  justify-content: space-between;
  height: 100%;
  padding: 2.75rem 2.5rem;
  transition: all 0.5s;
}

.paragraph:where(.paragraph--type--card-links) .card__body p:first-of-type {
  margin-top: 0;
}

@media screen and (min-width: 768px) {
  .paragraph.section--no-gut .paragraph.paragraph--type--card-links {
    border: 1px solid var(--bs-yellow);
  }

  .paragraph.section--no-gut
    .paragraph.paragraph--type--card-links
    .card__body
    .card__links
    ul {
    margin-bottom: 0;
  }
}

@media screen and (max-width: 768px) {
  .paragraph:where(.paragraph--type--card, .paragraph--type--card-square)
    .card__title
    h1,
  .paragraph:where(.paragraph--type--card-links) .card__body h1,
  .paragraph:where(.paragraph--type--card, .paragraph--type--card-square)
    .card__title
    h2,
  .paragraph:where(.paragraph--type--card-links) .card__body h2,
  .paragraph:where(.paragraph--type--card, .paragraph--type--card-square)
    .card__title
    h3,
  .paragraph:where(.paragraph--type--card-links) .card__body h3,
  .paragraph:where(.paragraph--type--card, .paragraph--type--card-square)
    .card__title
    h4,
  .paragraph:where(.paragraph--type--card-links) .card__body h4,
  .paragraph:where(.paragraph--type--card, .paragraph--type--card-square)
    .card__title
    h5,
  .paragraph:where(.paragraph--type--card-links) .card__body h5 {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .paragraph.paragraph--type--card-square .card__body,
  .paragraph.paragraph--type--card .card__body {
    padding: 1.563rem 1.25rem;
    font-size: 1.2rem;
  }

  .paragraph.paragraph--type--card-links .card__body {
    padding: 1.5rem 1.25rem 2.125rem;
  }

  .paragraph.paragraph--type--card-links .card__body > div {
    flex-direction: column;
  }

  .paragraph.paragraph--type--card-links .card__links {
    align-self: flex-start;
    margin-top: 1.125rem;
  }

  .paragraph.paragraph--type--card-links .card__links ul {
    margin-bottom: 0;
  }
}