/*
 Theme Name:   Bricks - SkyCenter
 Theme URI:    https://station-creative.fr
 Description:  Thème de SkyCenter.
 Author:       Bricks + Station Créative
 Author URI:   https://station-creative.fr/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--sky-ink);
  background: var(--sky-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection {
  background: var(--sky-main);
  color: #fff;
}

label {
  color: var(--sky-accent-d-4);
  font-size: var(--fs-base);
  font-weight: 500;
}

input,
select,
textarea {
  padding-inline: var(--space-xs) !important;
  margin-bottom: var(--space-2xs) !important;
  border-color: var(--sky-border) !important;
  border-radius: calc(var(--r-md) / 2) !important;
}

input:focus {
  outline-color: var(--sky-accent);
}

/* Méthodes de paiement */
input[type="radio"] {
  margin-bottom: unset !important;
  + label {
    font-size: var(--fs-lg) !important;
    font-weight: 500 !important;
    padding-left: var(--space-s);
  }
  + label:hover {
    color: var(--sky-muted);
  }

  &:checked + label,
  & + label:focus {
    color: var(--sky-accent);
  }
}

.wc_payment_method {
  margin-bottom: var(--space-xs);
}

/* Layout */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}
.container--narrow {
  max-width: var(--container-narrow);
}

.section {
  padding-inline: var(--section-py);
}

.section__soft {
  background: var(--sky-bg-soft);
}
.section__dark {
  background: var(--sky-dark);
  color: var(--white);
}
.section__r-bottom {
  border-radius: 0 0 var(--r-xl) var(--r-xl);
}

/* Titres */
.sky-h1,
.sky-h2,
.sky-h3,
.sky-h4 {
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1.05;
  margin-block: 0 var(--space-m);
  text-wrap: balance;
}

.sky-h1 {
  font-size: var(--fs-h1);
  letter-spacing: -0.035em;
  color: var(--white);
}

.sky-h2 {
  font-size: var(--fs-h2);
  letter-spacing: 0.045em;
  color: var(--sky-accent-d-4);
}

/* Variante H2 utilisée sur fond sombre (ex. bloc "Nos autres expériences") */
.sky-h2--on-dark {
  color: var(--white);
}

.sky-h3 {
  font-size: var(--fs-h3);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--sky-ink);
}

/* Variante H3 utilisée en titre de carte visuelle (ex. "Simulateur Mirage 2000") */
.sky-h3--card {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* Variante H3 utilisée pour un nom propre (ex. auteur d'un témoignage) */
.sky-h3--name {
  font-size: var(--fs-lg);
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  color: var(--sky-dark);
}

.sky-h4 {
  font-size: var(--fs-h4);
  font-weight: 600;
  color: var(--sky-dark);
}

.sky-body {
  font-size: var(--fs-base);
  color: var(--sky-ink);
}
.sky-body-lg {
  font-size: var(--fs-md);
  color: var(--sky-ink);
}
.sky-body-sm {
  font-size: var(--fs-sm);
  color: var(--sky-ink);
}
.sky-text-muted {
  color: var(--sky-ink-muted);
}

/* Texte */
.md-text-center {
  text-align: unset;
}

@media (max-width: 767px) {
  .md-text-center {
    text-align: center;
  }
}

/* Boutons */

.btn,
.bricks-button,
button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: none;
  text-decoration: none;
  border-radius: var(--r-pill);
  padding: var(--space-xs) var(--space-s);
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background-color var(--t-base),
    border-color var(--t-base),
    color var(--t-base),
    transform var(--t-fast);
}

.btn:hover,
.bricks-button:hover {
  transform: translateY(-1px);
}
.btn-primaire,
.bricks-background-primary {
  background: var(--sky-accent);
  border-color: var(--sky-accent-d-1);
  color: var(--sky-white);
}

.btn-primaire svg,
.bricks-background-primary svg {
  color: var(--sky-white);
  fill: var(--sky-white);
}

.btn-primaire:hover,
.bricks-background-primary:hover {
  background: var(--sky-accent-hover);
  border-color: var(--sky-accent-hover);
}

.btn-secondaire,
.bricks-background-secondary {
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(8px);
}

.btn-secondaire:hover,
.bricks-background-secondary:hover {
  background: rgba(255, 255, 255, 0.26);
}

.bricks-background-light {
  color: var(--sky-main);
  background: rgba(255, 255, 255, 0.18);
  border-color: var(--sky-main);
}

.bricks-background-light:hover {
  color: white;
  background: var(--sky-dark);
}

:where(p) {
  margin-block: 0 var(--space-s);
}

:where(p: last-of-type) {
  margin-block-end: 0;
}

p a {
  color: var(--sky-accent-d-2);
  border-bottom: 1px solid transparent;
}

p a:hover {
  color: var(--sky-accent);
  border-bottom: 1px solid blue;
  transition: var(--t-base);
}

.wp-content ol,
.wp-content ul {
  padding-left: var(--space-m);
  margin-block: var(--space-xs);
}

.wp-content li {
  list-style: square;
}

.wp-content li::marker {
  color: var(--sky-accent);
}

/* Tiles : Hover */

@media (hover: hover) and (pointer: fine) {
  /* Transitions */
  .tile__background {
    transition: transform 700ms ease;
  }

  .tile::before {
    transition: background 400ms ease;
  }

  .tile .tile__content {
    transform: translateY(70%);
    transition: transform 420ms ease;
  }

  .tile__text,
  .tile__button {
    opacity: 0 !important;
    transform: translateY(100px) !important;
    transition:
      opacity 320ms ease,
      transform 420ms ease;
  }

  /* Mega tile toujours déployée */
  .tile__mega .tile__content {
    transform: translateY(0) !important;
  }

  .tile__mega .tile__text,
  .tile__mega .tile__button {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  /* États hover */
  .tile:hover .tile__content {
    transform: translateY(0);
  }

  .tile:hover .tile__text,
  .tile:hover .tile__button {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  .tile:hover .tile__background {
    transform: scale(1);
  }

  .tile:hover::before {
    background: linear-gradient(
      to bottom,
      rgba(0, 60, 90, 0.16) 0%,
      rgba(0, 60, 90, 0.42) 45%,
      rgba(0, 60, 90, 0.86) 100%
    );
  }

  /* Focus clavier */
  .tile:focus-within .tile__content {
    transform: translateY(0) !important;
  }

  .tile:focus-within .tile__text,
  .tile:focus-within .tile__button {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  .tile:focus-within .tile__background {
    transform: scale(1);
  }
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce) {
  .tile__background,
  .tile__content,
  .tile__text,
  .tile__button,
  .tile::before {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

@media not all and (hover: hover) {
  .tile .tile__text {
    opacity: 1 !important;
    transform: translateY(0) !important;
    visibility: visible !important;
  }
}

.splide__track {
  overflow: visible !important;
}

.splide__pagination__page {
  background: #cbd5e1;
  width: 8px;
  height: 8px;
  border-radius: 50px;
  margin-inline: 3px;
  transition: all 0.3s ease;
}

.splide__pagination__page.is-active {
  background: #1e6bff;
  width: var(--space-l);
  transform: none;
}

/** Consent **/

.cky-consent-container .cky-consent-bar {
  border-radius: var(--r-md) !important;
}

button.cky-btn {
  border-radius: calc(var(--r-md) / 2) !important;
}