/* =========================================================
   Accueil — Hero
   ========================================================= */

.rd-home-hero {
  min-height: calc(100vh - 92px);

  display: grid;
  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(0, 0.92fr);

  position: relative;

  background: var(--wp--preset--color--muted);

  overflow: hidden;
}

/* Cercle décoratif */

.rd-home-hero::after {
  content: "";

  position: absolute;

  width: 560px;
  height: 560px;

  right: -180px;
  bottom: -230px;

  border: 52px solid rgba(18, 200, 212, 0.22);

  border-left-color: rgba(0, 59, 130, 0.2);

  border-radius: 50%;

  pointer-events: none;
}

/* Image */

.rd-home-hero__media {
  min-height: 680px;
  margin: 0;
  padding: 0;
}

.rd-home-hero__media .wp-block-cover__image-background {
  object-fit: cover;
  object-position: center;
}

.rd-home-hero__media::after {
  content: "";

  position: absolute;
  inset: 0;

  background: linear-gradient(
    90deg,
    rgba(6, 43, 93, 0.18),
    rgba(6, 43, 93, 0.02)
  );

  pointer-events: none;
}

/* Panneau */

.rd-home-hero__panel {
  align-self: center;

  width: min(650px, calc(100% - 44px));

  margin-left: -110px !important;

  padding: 64px !important;

  position: relative;
  z-index: 2;

  background: rgba(255, 255, 255, 0.94);

  border-radius: 0 var(--wp--custom--radius--card)
    var(--wp--custom--radius--card) 0;

  box-shadow: var(--wp--custom--shadow--hero);
}

.rd-home-hero__panel::before {
  content: "";

  position: absolute;

  left: 0;
  top: 48px;

  width: 7px;
  height: 120px;

  background: linear-gradient(
    var(--wp--preset--color--blue),
    var(--wp--preset--color--cyan)
  );

  border-radius: 0 8px 8px 0;
}

/* Titre */

.rd-home-hero__panel h1 {
  margin: 0 0 28px !important;

  color: var(--wp--preset--color--blue-dark);

  font-family: var(--wp--preset--font-family--title);

  font-size: clamp(40px, 5vw, 64px);

  line-height: 1.04;

  letter-spacing: -0.04em;
}

/* Texte */

.rd-home-hero__text {
  margin: 0 0 34px !important;

  color: #38465a;

  font-size: 22px;

  line-height: 1.55;
}

@media (max-width: 980px) {
  .rd-home-hero {
    grid-template-columns: 1fr;

    min-height: auto;
  }

  .rd-home-hero__media {
    min-height: 390px;
  }

  .rd-home-hero__panel {
    width: min(650px, calc(100% - 44px));

    margin: -70px auto 70px !important;

    padding: 42px !important;

    border-radius: var(--wp--custom--radius--card);
  }
}

@media (max-width: 560px) {
  .rd-home-hero__panel {
    width: calc(100% - 28px);

    padding: 34px 28px !important;
  }

  .rd-home-hero__panel h1 {
    font-size: 38px;
  }

  .rd-home-hero__text {
    font-size: 20px;
  }
}

.rd-container {
  width: min(1180px, calc(100% - 44px));

  max-width: none !important;

  margin-inline: auto !important;
}

@media (max-width: 560px) {
  .rd-container {
    width: min(1180px, calc(100% - 28px));
  }
}

/* =========================================================
   Accueil — Introduction groupe
   ========================================================= */

/* =========================================================
   Accueil — Intro : décor du média
   ========================================================= */

.rd-intro-media {
  position: relative;
  z-index: 0;
}

.rd-intro-media::before {
  content: "";

  position: absolute;

  left: -32px;
  bottom: -28px;

  width: 150px;
  height: 150px;

  border: 18px solid rgba(18, 200, 212, 0.28);

  border-radius: 50%;

  z-index: -1;

  pointer-events: none;
}

/* =========================================================
   Accueil — Manifesto
   ========================================================= */

.rd-manifesto {
  position: relative;
  overflow: hidden;
}

.rd-manifesto::before {
  content: "";

  position: absolute;

  width: 430px;
  height: 430px;

  left: -140px;
  top: -130px;

  border: 42px solid rgba(18, 200, 212, 0.23);
  border-top-color: rgba(255, 255, 255, 0.16);

  border-radius: 50%;

  pointer-events: none;
}

/* =========================================================
   Accueil — Filiales
   ========================================================= */

.rd-filiale-logo {
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 190px;
}

.rd-filiale-logo .wp-block-image {
  width: 100%;
  margin: 0;
}

.rd-filiale-logo .wp-block-image img {
  display: block;

  width: 100%;
  max-width: 360px;
  max-height: 130px;

  margin: 0 auto;

  object-fit: contain;
}

.rd-filiale-card {
  position: relative;
  overflow: hidden;
}

.rd-filiale-card::after {
  content: "";
  position: absolute;

  width: 290px;
  height: 290px;

  right: -80px;
  bottom: -150px;

  border: 30px solid rgba(18, 200, 212, 0.12);
  border-radius: 50%;

  pointer-events: none;
}

/* Alizés RH */
.rd-filiale-card--alizes::after {
  border-color: rgba(18, 200, 212, 0.12);
}

/* Hellapaye */
.rd-filiale-card--hellapaye::after {
  border-color: rgba(242, 183, 5, 0.16);
}

/* Sen'Paye */
.rd-filiale-card--senpaye::after {
  border-color: rgba(0, 59, 130, 0.12);
}

/* =========================================================
   Accueil — Citation
   ========================================================= */

.rd-home-quote {
  align-items: center;
  gap: 80px;
}

.rd-home-quote__content {
  position: relative;
}

.rd-home-quote__statement {
  position: relative;
}

.rd-home-quote__statement::before,
.rd-home-quote__statement::after {
  color: var(--wp--preset--color--cyan);

  font-family: var(--wp--preset--font-family--title);
  font-size: 54px;
  font-weight: 800;

  line-height: 1;
}

.rd-home-quote__statement::before {
  content: "“";
  margin-right: 8px;
}

.rd-home-quote__statement::after {
  content: "”";
  margin-left: 8px;
}

.rd-home-quote__media {
  position: relative;
}

.rd-home-quote__media .wp-block-image {
  position: relative;
  overflow: hidden;

  margin: 0;

  border-radius: 28px;
}

.rd-home-quote__media .wp-block-image::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      135deg,
      rgba(6, 43, 93, 0.18),
      rgba(18, 200, 212, 0.12)
    );

  pointer-events: none;
}