/* stylelint-disable color-no-hex */

*,
::after,
::before {
  box-sizing: border-box;
}

* {
  margin: 0;
}

@media (prefers-reduced-motion: no-preference) {

  html {
    /* stylelint-disable-next-line property-no-unknown */
    interpolate-size: allow-keywords;
  }
}

body {
  font-size: 16px;
  line-height: 1.28;
  -webkit-font-smoothing: antialiased;
  font-family: Figtree, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

canvas,
img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  overflow-wrap: break-word;
}

p {
  text-wrap: pretty;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

#__next,
#root {
  isolation: isolates;
}

:root {
  --brand-main-color: #15355f;
  --brand-second-color: #d30d1f;
  --cxc-color-light: 47%;
  --cxc-color-action-hs: 212, 92%;
  --cxc-color-action: hsl(var(--cxc-color-action-hs), var(--cxc-color-light));
  --cxc-color-stantard: #fff;
  --cxc-icon-main-color: #264f9a;
  --cxc-icon-size: clamp(3rem, 2.7832rem + 0.9249vw, 3.5rem);
  --cxc-icon-size-large: clamp(4rem, 2.9162rem + 4.6243vw, 6.5rem);
  --cxc-bg-color-standard: #fff;
  --cxc-bg-color-primary: #f5faff;
  --cxc-bg-color-secondary: #e5f3ff;
  --cxc-bg-color-tertiary: #0f2a4f;
  --cxc-pattern-bg-color: var(--cxc-bg-color-primary);
  --cxc-border-radius-action: 0.25rem;
  --cxc-border-radius-medium: 1rem;
  --cxc-border-radius-large: 1.5rem;
  --cxc-border-color: #e1eaf2;
  --cxc-push-card-border-color: rgba(18, 18, 18, 0.16);
  --cxc-push-card-color: #1C0F00;
  --cxc-push-card-bg-color: var(--cxc-bg-color-standard);
  --cxc-box-shadow: 2px 2px 8px 0 var(--cxc-push-card-border-color);
  --cxc-content-width: min(100%, 65rem);
  --cxc-item-rayon-size: clamp(6.5rem, 4.8929rem + 5.3571vw, 8.375rem);
  --cxc-item-rayon-visual-size: 5rem;
  --cxc-banner-visual-image: url('/assets/banner.jpg');
}

svg.cxc-svg {
  display: none;
}

.cxc-flex {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

.cxc-content {
  width: 100%;
  max-width: var(--cxc-content-width);

  >h2 {
    margin-bottom: 0.75rem;
  }
}

.cxc-hero,
.cxc-zone {
  padding-inline: 1.25rem;

  .cxc-content {
    gap: clamp(1.5rem, 1.3916rem + 0.4624vw, 1.75rem);
  }
}

.cxc-zone {
  background-color: var(--cxc-bg-color-primary);
  padding-block: clamp(2rem, 0.9162rem + 4.6243vw, 4.5rem) calc(clamp(2rem, 0.9162rem + 4.6243vw, 4.5rem) + 1rem);
  gap: 2rem;

  &[class*='--accent'] {
    background-color: var(--brand-main-color);
  }

  &[class*='--secondary'] {
    background-color: var(--cxc-bg-color-secondary);
  }

  &[class*='--tertiary'] {
    background-color: var(--cxc-bg-color-tertiary);
    padding: 0;
  }

  &[class*='--grid'] {
    padding-block: 1rem;
  }
}

.cxc-hero {
  padding-block: clamp(3rem, 0.8324rem + 9.2486vw, 8rem);

  @media only screen and (min-width: 1024px) {
    height: clamp(32.75rem, 20.2136rem + 26.1516vw, 43.75rem);
  }
}

.cxc-pattern-background {
  background-color: var(--cxc-pattern-bg-color);

  &[class*='--hero'] {
    --cxc-pattern-bg-color: var(--cxc-bg-color-secondary);
  }

  @media only screen and (min-width: 1024px) {
    --cxc-pattern-bg-image-left: url('/assets/pattern-left-livraison.svg');
    --cxc-pattern-bg-image-right: url('/assets/pattern-right.svg');

    background-image: var(--cxc-pattern-bg-image-left), var(--cxc-pattern-bg-image-right);
    background-repeat: repeat-y;
    background-position: left top, right top;
    background-size: contain;

    &[class*='--hero'] {
      --cxc-pattern-bg-image-left: url('/assets/hero-pattern-left.svg');
      --cxc-pattern-bg-image-right: url('/assets/hero-pattern-right.svg');
    }

    &[class*='--secondary'] {
      --cxc-pattern-bg-image-left: url('/assets/pattern-left-variant.svg');
      --cxc-pattern-bg-image-right: url('/assets/pattern-left-variant.svg');
    }
  }
}

.cxc-logo {

  &[class*='--hp'] {
    width: clamp(9.8958rem, 8.3333rem + 6.6667vw, 13.5rem);
  }

  &[class*='--prospectus'] {
    width: clamp(6.5rem, 5.6329rem + 3.6994vw, 8.5rem);
  }

  &[class*='--drive'] {
    width: clamp(13.5rem, 8.4603rem + 21.5029vw, 25.125rem);
  }
}

.cxc-text {
  font-size: clamp(0.875rem, 0.8208rem + 0.2312vw, 1rem);

  &[class*='--semibold'] {
    font-weight: 800;
    line-height: 1.15;
  }

  &[class*='--bold'] {
    font-weight: 900;
    line-height: 1.1;
  }

  &[class*='--size-hero'] {
    font-size: clamp(2.5rem, 2.0665rem + 1.8497vw, 3.5rem);
  }

  &[class*='--size-title'] {
    font-size: clamp(2rem, 1.7832rem + 0.9249vw, 2.5rem);
  }

  &[class*='--size-xl'] {
    font-size: clamp(1.25rem, 0.9249rem + 1.3873vw, 2rem);
  }

  &[class*='--size-l'] {
    font-size: clamp(1.125rem, 0.9624rem + 0.6936vw, 1.5rem);
  }

  &[class*='--size-m'] {
    font-size: clamp(1rem, 0.8916rem + 0.4624vw, 1.25rem);

    b {
      font-weight: 900;
    }
  }

  &[class*='--size-s'] {
    font-size: 0.875em;
  }

  &[class*='--brand-color'] {
    color: var(--brand-main-color);

    span {
      color: var(--brand-second-color);
    }
  }

  &[class*='--accent-color'] {
    color: var(--cxc-color-stantard);
  }
}

.cxc-icon {
  width: 2rem;
  aspect-ratio: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cxc-link {
  display: flex;
  gap: 0.5rem;
  text-decoration: none;
  font-weight: 800;
  align-items: center;
  color: hsl(var(--cxc-color-action-hs), var(--cxc-color-light));

  &:last-child {
    margin-top: auto;
    margin-bottom: 1rem;
  }

  &:hover {
    --cxc-color-light: 37%;
    text-decoration: underline;
  }
}

.cxc-nav {
  text-align: center;
  color: var(--cxc-color-stantard);

  a {
    color: currentColor;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    display: inline-block;
    padding-block: 1rem;
  }
}

.cxc-button {
  background-color: hsl(var(--cxc-color-action-hs), var(--cxc-color-light));
  display: block;
  width: fit-content;
  border-radius: var(--cxc-border-radius-action);
  color: var(--cxc-color-stantard);
  font-weight: 700;
  padding: 1rem 1.5rem;
  text-decoration: none;
  transition: background-color ease 150ms;

  &[class*='--square'] {
    padding: 0;
    aspect-ratio: 1;
    width: var(--cxc-icon-size);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
  }

  &[class*='--light'] {
    background-color: var(--cxc-color-stantard);
    color: hsl(var(--cxc-color-action-hs), var(--cxc-color-light));
    width: auto;
  }

  &:hover {
    --cxc-color-light: 37%;
  }

  &[class*='--full'] {
    width: 100%;

    @media only screen and (min-width: 412px) {
      width: fit-content;
    }
  }
}

.cxc-column {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
  justify-content: center;

  &[class*='--first'] {
    order: 3;
  }

  &[class*='--second'] {
    order: 1;
  }

  &[class*='--third'] {
    order: 2;
  }

  @media only screen and (min-width: 767px) {
    flex: 1 0 calc(100%/3 - 1rem);

    &[class*='--first'],
    &[class*='--second'],
    &[class*='--third'] {
      order: initial;
    }
  }
}

.cxc-list {
  list-style: none;
  padding: 0;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: stretch;

  &[class*='--column'] {
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
  }

  &[class*='--narrow'] {
    gap: clamp(0.5rem, 0.0714rem + 1.4286vw, 1rem);
  }

  &[class*='--scrollable'] {
    justify-content: flex-start;
    max-width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: 1rem;

    @media only screen and (min-width: 1224px) {
      overflow: auto;
      flex-wrap: wrap;
      gap: 1.5rem;
    }
  }

  &[class*='--bullet'] {
    padding-block: clamp(0.5rem, 0.0714rem + 1.4286vw, 1rem);
  }

  &[class*='--masonry'] {
    gap: 1.5rem;
    padding-inline: 0rem;
    margin-top: calc(-1 * clamp(2rem, 0.6994rem + 5.5491vw, 5rem));

    @media only screen and (min-width: 1024px) {
      padding-inline: 4rem;
    }
  }
}

.cxc-card {
  width: min(100%, 18.75rem);
  border-radius: var(--cxc-border-radius-medium);

  .cxc-card__wrapper {
    border-radius: var(--cxc-border-radius-medium);
    background-color: var(--cxc-bg-color-standard);
    text-align: left;
    align-items: flex-start;
    padding: 1rem;
    gap: 1rem;
    justify-content: flex-start;
    flex-wrap: wrap;
    text-decoration: none;
    color: inherit;
    height: 100%;
    width: 100%;
  }

  .cxc-card__body {
    gap: 1rem;
    text-align: left;
    align-items: flex-start;
  }

  .cxc-card__cover {
    background-color: var(--cxc-bg-color-primary);
    border-radius: var(--cxc-border-radius-medium);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 10rem;
    margin: 0 auto;
  }

  &[class*='--service'] {
    width: 39rem;
    max-width: 100%;
    box-shadow: var(--cxc-box-shadow);

    .cxc-card__wrapper {
      flex-direction: row;
      align-items: center;
      gap: clamp(1rem, 0.7832rem + 0.9249vw, 1.5rem);
    }

    .cxc-card__cover {
      background-color: transparent;
      border-radius: var(--cxc-border-radius-medium);
      width: var(--cxc-icon-size-large);
      height: auto;
      aspect-ratio: 1;
      flex-shrink: 0;
    }

    .cxc-card__body {
      gap: 0.5rem;
    }

    .cxc-button:last-child {
      margin-left: auto;
    }
  }

  &[class*='--narrow'] {
    width: clamp(18.75rem, 13.3929rem + 17.8571vw, 25rem);
    box-shadow: none;
    flex-shrink: 0;

    .cxc-card__wrapper {
      gap: 1rem;
    }

    .cxc-card__cover {
      background-color: var(--cxc-bg-color-secondary);
      width: var(--cxc-icon-size-large);
      height: auto;
      flex-shrink: 0;
      padding: 1rem;
    }

    .cxc-card__body {
      align-self: flex-start;
      gap: 0.25rem;
    }

    @media only screen and (min-width: 1224px) {
      width: calc(50% - 1rem);
    }
  }

  &[class*='--wrap'] {
    width: 100%;

    @media only screen and (min-width: 767px) {
      width: calc(50% - 1rem);
    }
  }

  &[class*='--push-app'] {

    .cxc-card__wrapper {
      gap: 0.5rem;
    }

    .cxc-card__cover {
      height: 5rem;
      width: 5rem;
    }
  }

  @media only screen and (min-width: 375px) {

    .cxc-card__wrapper {
      flex-wrap: nowrap;
    }

    .cxc-card__cover {
      margin: 0;
    }

    &[class*='--service'] {

      .cxc-card__cover {
        width: var(--cxc-icon-size);
      }
    }

    &[class*='--narrow'] {

      .cxc-card__cover {
        width: var(--cxc-icon-size-large);
      }
    }
  }
}

.cxc-push-card {
  text-transform: uppercase;
  padding: 1rem 2rem;
  border-radius: var(--cxc-border-radius-medium);
  background-color: var(--cxc-push-card-bg-color);
  border: 2px solid var(--cxc-push-card-border-color);
  color: var(--cxc-push-card-color);
  width: 100%;

  .cxc-push-card__wrapper {
    color: currentColor;
    text-decoration: none;
    gap: 1rem;
  }

  .cxc-push-card__display {
    font-size: 7.5rem;
    display: block;
    line-height: 0.85;

    span {
      display: inline-block;
      margin-right: -1rem;
      position: relative;
      vertical-align: middle;
      font-size: 70%;
    }

    sup {
      font-size: 50%;
      display: inline-block;
      margin-left: -0.875rem;
      -webkit-text-stroke: 2px var(--cxc-push-card-bg-color);
    }

    &[class*='--symbol'] {
      sup {
        -webkit-text-stroke: 0;
        text-shadow:
          -2px -2px var(--cxc-push-card-bg-color),
          -2px 2px var(--cxc-push-card-bg-color);
      }
    }
  }

  .cxc-button {
    border-radius: 0;
    background-color: transparent;
    border-top: 2px solid var(--cxc-push-card-border-color);
    color: inherit;
    text-transform: none;
    width: 100%;
    padding-top: 1rem;
    padding-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
  }

  .cxc-text {
    font-size: 1.25rem;

    > span {
      display: inline-block;
      margin-bottom: 1rem;
    }
  }

  &[class*='--variant-1'] {
    --cxc-push-card-color: #A0000F;
    --cxc-push-card-bg-color: #F6B317;
  }

  &[class*='--variant-2'] {
    --cxc-push-card-color: #010101;
    --cxc-push-card-bg-color: #63C1C5;
  }

  &[class*='--variant-3'] {
    --cxc-push-card-color: #ADCCF1;
    --cxc-push-card-bg-color: #273583;
  }

  &[class*='--variant-4'] {
    --cxc-push-card-color: #010101;
    --cxc-push-card-bg-color: #159045;
  }

  &[class*='--variant-5'] {
    --cxc-push-card-color: #5B2885;
    --cxc-push-card-bg-color: #F6992C;
  }

  &[class*='--variant-6'] {
    --cxc-push-card-color: #F8A119;
    --cxc-push-card-bg-color: #274F22;
  }

  &[class*='--variant-7'] {
    --cxc-push-card-color: #E8D3FA;
    --cxc-push-card-bg-color: #44248E;
  }
}

.cxc-item-list {
  flex-direction: row;
  justify-content: flex-start;
  gap: 1rem;
  width: 100%;

  .cxc-icon {
    align-self: baseline;
  }

  .cxc-text--bold {
    line-height: 2rem;
  }

  .cxc-card__body {
    gap: 0.25rem;
  }
}

.cxc-item-rayon {
  width: var(--cxc-item-rayon-size);

  .cxc-item-rayon__visual {
    background-color: var(--cxc-bg-color-primary);
    border-radius: var(--cxc-border-radius-large);
    border: 1px solid var(--cxc-border-color);
    aspect-ratio: 1;
    width: 100%;
    transition: background-color ease 150ms, border-color ease 150ms;

    img {
      width: var(--cxc-item-rayon-visual-size);
      aspect-ratio: 1;
    }
  }

  .cxc-item-rayon__link {
    text-decoration: none;
    gap: 0.5rem;
    padding-bottom: 0.25rem;

    &:hover {
      text-decoration: underline;

      .cxc-item-rayon__visual {
        background-color: var(--cxc-bg-color-standard);
        border: 3px solid var(--cxc-color-action);
      }
    }
  }
}

.cxc-banner {
  position: relative;
  padding-top: 50%;
  padding-inline: 1rem;

  .cxc-banner__visual {
    background-image: var(--cxc-banner-visual-image);
    background-size: cover;
    background-position: left center;
    border-radius: var(--cxc-border-radius-medium);
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16 / 10;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .cxc-card {
    position: relative;
    z-index: 1;
    width: 100%;
  }

  @media only screen and (min-width: 767px) {
    padding-left: 48%;
    padding-block: 2rem;
    padding-right: 0;

    .cxc-banner__visual {
      aspect-ratio: auto;
      width: 60%;
      right: auto;
      bottom: 0;
      border-radius: var(--cxc-border-radius-large);
    }
  }

  &[class*='--pass'] {
    .cxc-banner__visual {
      background-size: contain;
      background-image: url('/assets/pass-cards.png');

      @media only screen and (min-width: 767px) {
        background-color: #0F2A4F;
      }
    }
  }

}

.cxc-push {
  border-radius: var(--cxc-border-radius-medium);
  overflow: hidden;
  width: 100%;

  .cxc-push__wrapper {
    border-radius: var(--cxc-border-radius-medium);
    overflow: hidden;
    width: 100%;
    justify-content: flex-end;
    align-items: flex-end;
    text-decoration: none;
    color: inherit;
  }

  .cxc-card {
    width: 100%;

    .cxc-card__body {
      gap: 0.5rem;
    }

    .cxc-button:last-child {
      margin-top: auto;
    }
  }

  &[class*='--hidden'] {
    display: none;
  }

  @media only screen and (min-width: 767px) {
    background-image: url('/assets/push-app.jpg');
    background-size: cover;
    background-position: center center;
    padding: 1rem 1.25rem;

    .cxc-card {
      width: clamp(51%, 100%, 20rem);
    }

    &[class*='--hidden'] {
      display: flex;
    }
  }
}

.cxc-hidden {

  @media only screen and (min-width: 767px) {
    display: none;
  }
}

.cxc-zoom {

  @media only screen and (min-width: 375px) {
    scale: 1.5;
  }
}