.ab-cookie-banner {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 99999;
  padding: 20px;
  font-family:
    "Manrope",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

.ab-cookie-card {
  position: relative;
  width: min(
    calc(100% - 4px),
    1180px
  );
  margin: 0 auto;

  display: grid;
  grid-template-columns:
    180px
    minmax(0, 1fr)
    260px;

  gap: 26px;
  align-items: center;

  overflow: hidden;

  padding:
    22px
    24px;

  border-radius: 32px;

  background:
    linear-gradient(
      120deg,
      #fff9fc 0%,
      #fff2f7 46%,
      #fffafd 100%
    );

  border:
    1px solid
    rgba(
      183,
      110,
      138,
      0.18
    );

  box-shadow:
    0 28px 80px
    rgba(
      75,
      40,
      58,
      0.20
    );

  backdrop-filter:
    blur(20px);
}

.ab-cookie-card::before {
  content: "";

  position: absolute;

  width: 340px;
  height: 340px;

  left: -120px;
  bottom: -180px;

  border-radius: 50%;

  background:
    rgba(
      232,
      164,
      191,
      0.15
    );

  pointer-events: none;
}

.ab-cookie-card::after {
  content: "";

  position: absolute;

  width: 260px;
  height: 260px;

  right: 26%;
  top: -180px;

  border-radius: 50%;

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

  filter:
    blur(18px);

  pointer-events: none;
}

/* COOKIE */

.ab-cookie-visual {
  position: relative;
  z-index: 2;

  min-height: 150px;

  display: grid;
  place-items: center;
}

.ab-cookie-cookie-glow {
  position: absolute;

  width: 135px;
  height: 135px;

  border-radius: 50%;

  background:
    rgba(
      228,
      130,
      168,
      0.18
    );

  filter:
    blur(28px);
}

.ab-cookie-image {
  position: relative;
  z-index: 3;

  display: block;

  width: 165px;
  max-width: 100%;
  height: auto;

  object-fit: contain;

  transform:
    rotate(-6deg);

  filter:
    drop-shadow(
      0 18px 22px
      rgba(
        118,
        52,
        79,
        0.20
      )
    );

  transition:
    transform
    0.25s
    ease;
}

.ab-cookie-card:hover
.ab-cookie-image {
  transform:
    rotate(-3deg)
    translateY(-3px);
}

.ab-cookie-heart {
  position: absolute;

  z-index: 4;

  color: #d86e98;

  font-size: 17px;

  opacity: 0.85;
}

.ab-cookie-heart-one {
  top: 9px;
  left: 18px;

  transform:
    rotate(-14deg);
}

.ab-cookie-heart-two {
  bottom: 12px;
  right: 12px;

  font-size: 12px;

  color: #e292b0;
}

/* CONTENT */

.ab-cookie-content {
  position: relative;
  z-index: 3;

  min-width: 0;
}

.ab-cookie-badge {
  display: inline-flex;

  align-items: center;

  gap: 7px;

  margin-bottom: 11px;

  padding:
    7px
    13px;

  border-radius: 999px;

  color: #ae5778;

  background:
    rgba(
      224,
      139,
      173,
      0.14
    );

  font-size: 10px;

  font-weight: 850;

  letter-spacing: 0.09em;

  text-transform: uppercase;
}

.ab-cookie-badge span {
  font-size: 12px;

  color: #c9688d;
}

.ab-cookie-title-line {
  display: flex;

  align-items: baseline;

  flex-wrap: wrap;

  gap:
    10px
    18px;
}

.ab-cookie-content h2 {
  margin:
    0
    0
    4px;

  color: #281d27;

  font-family:
    "Outfit",
    "Manrope",
    sans-serif;

  font-size: 1.55rem;

  line-height: 1.05;

  font-weight: 850;

  letter-spacing:
    -0.035em;
}

/*
 * Écriture manuscrite sans dépendance externe.
 *
 * macOS :
 * Snell Roundhand
 *
 * Windows :
 * Segoe Script / Brush Script
 */
.ab-cookie-handwritten,
.ab-cookie-handwritten-subtitle {
  font-family:
    "Snell Roundhand",
    "Segoe Script",
    "Brush Script MT",
    cursive;

  color: #d26791;

  font-weight: 500;
}

.ab-cookie-handwritten {
  font-size: 1.72rem;

  line-height: 1;
}

.ab-cookie-handwritten span {
  margin-left: 3px;

  font-size: 1.35rem;
}

.ab-cookie-handwritten-subtitle {
  position: relative;

  display: inline-flex;

  align-items: center;

  gap: 8px;

  margin-bottom: 13px;

  font-size: 1.7rem;

  line-height: 1.05;
}

.ab-cookie-handwritten-subtitle::after {
  content: "";

  position: absolute;

  left: 2px;
  right: 20px;
  bottom: -4px;

  height: 2px;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      #d26791,
      rgba(
        210,
        103,
        145,
        0.15
      )
    );

  transform:
    rotate(-1deg);
}

.ab-cookie-handwritten-subtitle
span {
  font-size: 12px;

  color: #d56f96;
}

.ab-cookie-description {
  margin: 0;

  max-width: 620px;

  color: #6f5e69;

  font-size: 0.82rem;

  line-height: 1.5;
}

.ab-cookie-information {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap:
    5px
    9px;

  margin-top: 12px;

  color: #87727f;

  font-size: 0.78rem;

  line-height: 1.45;
}

.ab-cookie-shield {
  display: grid;

  place-items: center;

  width: 24px;
  height: 24px;

  flex: 0 0 24px;

  border-radius: 9px;

  color: #bd607f;

  background:
    rgba(
      214,
      112,
      151,
      0.10
    );

  font-weight: 900;
}

.ab-cookie-information a {
  margin-left: 4px;

  color: #b55879;

  font-weight: 800;

  text-decoration: underline;

  text-decoration-thickness:
    1px;

  text-underline-offset:
    3px;
}

.ab-cookie-information a span {
  margin-left: 3px;
}

/* ACTIONS */

.ab-cookie-actions {
  position: relative;
  z-index: 3;

  display: grid;

  grid-template-columns:
    1fr;

  gap: 10px;

  min-width: 0;
}

.ab-cookie-button {
  width: 100%;

  min-height: 52px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 9px;

  padding:
    11px
    18px;

  border-radius: 999px;

  font: inherit;

  font-size: 0.88rem;

  font-weight: 850;

  cursor: pointer;

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.ab-cookie-button:hover {
  transform:
    translateY(-1px);
}

.ab-cookie-button-icon {
  font-size: 18px;

  line-height: 1;
}

.ab-cookie-accept {
  border:
    1px solid
    #c66087;

  color: #ffffff;

  background:
    linear-gradient(
      135deg,
      #b9577c,
      #db7fa2
    );

  box-shadow:
    0 12px 28px
    rgba(
      190,
      86,
      127,
      0.24
    );
}

.ab-cookie-accept:hover {
  box-shadow:
    0 15px 32px
    rgba(
      190,
      86,
      127,
      0.30
    );
}

.ab-cookie-reject {
  border: 1px solid rgba(52, 38, 48, 0.08);

  color: #342630;

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

  box-shadow:
    0 9px 20px
    rgba(
      77,
      39,
      57,
      0.05
    );
}

.ab-cookie-reject:hover {
  background: #ffffff;
}

.ab-cookie-button:focus-visible,
.ab-cookie-information
a:focus-visible {
  outline:
    3px solid
    rgba(
      190,
      86,
      127,
      0.28
    );

  outline-offset: 3px;
}

/* TABLET */

@media (
  max-width: 900px
) {
  .ab-cookie-card {
    grid-template-columns:
      120px
      minmax(0, 1fr);

    gap: 18px;

    padding: 18px;
  }

  .ab-cookie-visual {
    min-height: 110px;
  }

  .ab-cookie-image {
    width: 112px;
  }

  .ab-cookie-actions {
    grid-column:
      1 / -1;

    grid-template-columns:
      1fr
      1fr;
  }
}

/* MOBILE */

@media (
  max-width: 620px
) {
  .ab-cookie-banner {
    padding: 9px;
  }

  .ab-cookie-card {
    grid-template-columns:
      86px
      minmax(0, 1fr);

    gap: 11px;

    padding: 15px;

    border-radius: 25px;
  }

  .ab-cookie-visual {
    min-height: 88px;

    align-self: start;
  }

  .ab-cookie-image {
    width: 84px;
  }

  .ab-cookie-heart-one {
    top: 2px;
    left: 2px;
  }

  .ab-cookie-heart-two {
    display: none;
  }

  .ab-cookie-badge {
    margin-bottom: 7px;

    padding:
      5px
      9px;

    font-size: 8px;
  }

  .ab-cookie-title-line {
    display: block;
  }

  .ab-cookie-content h2 {
    font-size: 1.12rem;
  }

  .ab-cookie-handwritten {
    display: inline-block;

    margin-top: 2px;

    font-size: 1.3rem;
  }

  .ab-cookie-handwritten-subtitle {
    margin-top: -1px;

    margin-bottom: 10px;

    font-size: 1.25rem;
  }

  .ab-cookie-description {
    font-size: 0.8rem;

    line-height: 1.48;
  }

  .ab-cookie-information {
    grid-column:
      1 / -1;

    margin-top: 9px;

    font-size: 0.72rem;
  }

  .ab-cookie-actions {
    grid-column:
      1 / -1;

    grid-template-columns:
      1fr
      1fr;

    gap: 8px;
  }

  .ab-cookie-button {
    min-height: 46px;

    padding:
      9px
      10px;

    font-size: 0.79rem;
  }
}

/* TRÈS PETIT MOBILE */

@media (
  max-width: 390px
) {
  .ab-cookie-card {
    grid-template-columns:
      72px
      minmax(0, 1fr);

    padding: 13px;
  }

  /*
   * Contrairement à l'ancienne version,
   * le cookie reste visible.
   */
  .ab-cookie-visual {
    display: grid;

    min-height: 72px;
  }

  .ab-cookie-image {
    width: 70px;
  }

  .ab-cookie-content h2 {
    font-size: 1rem;
  }

  .ab-cookie-handwritten {
    font-size: 1.15rem;
  }

  .ab-cookie-handwritten-subtitle {
    font-size: 1.12rem;
  }

  .ab-cookie-description {
    grid-column:
      1 / -1;
  }

  .ab-cookie-actions {
    grid-template-columns:
      1fr
      1fr;
  }
}