/*
Theme Name: Azur Graphique
Author: Romain Bourdichon
Description: Thème vitrine personnalisé pour Azur Graphique, basé sur Gutenberg.
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.0
Version: 0.9.47
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: azur
Tags: custom-colors, custom-logo, editor-style
*/

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("assets/fonts/BricolageGrotesque-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
}

:root {
  --azur-color-black: #000000;
  --azur-color-white: #ffffff;
  --azur-color-creation: #6f6fd1;
  --azur-color-digital: #222275;
  --azur-color-conseil: #8abdbd;
  --azur-color-production: #fa6b6b;
  --azur-color-installation: #969686;
  --azur-radius: 8px;
  --azur-font-body: "Bricolage Grotesque", sans-serif;
  --azur-body-font-size: 18px;
  --azur-global-padding: 5rem;
  --azur-section-padding: 8rem;
  --azur-anchor-offset: 27vh;
  --azur-font-size-xs: 0.875rem;
  --azur-font-size-sm: 1.125rem;
  --azur-font-size-md: 1.25rem;
  --azur-font-size-lg: 2rem;
  --azur-font-size-xl: 3rem;
  --azur-font-size-h4: 1.125rem;
  --azur-font-size-h5: 1rem;
  --azur-font-size-h6: 0.875rem;
  --azur-heading-h1-size: 128px;
  --azur-heading-h2-size: 40px;
  --azur-heading-h3-size: 24px;
  --azur-heading-h4-size: 18px;
}

@media (max-width: 960px) {
  :root {
    --azur-global-padding: 2.5rem;
    --azur-section-padding: 6rem;
    --azur-font-size-xs: 0.875rem;
    --azur-font-size-sm: 1.125rem;
    --azur-font-size-md: 1.125rem;
    --azur-font-size-lg: 1.75rem;
    --azur-font-size-xl: 2.5rem;
    --azur-font-size-h4: 1.0625rem;
    --azur-font-size-h5: 1rem;
    --azur-font-size-h6: 0.875rem;
    --azur-heading-h1-size: 96px;
  }
}

@media (max-width: 782px) {
  :root {
    --azur-body-font-size: 16px;
    --azur-global-padding: 1.25rem;
    --azur-section-padding: 4rem;
    --azur-font-size-xs: 0.875rem;
    --azur-font-size-sm: 1.125rem;
    --azur-font-size-md: 1.125rem;
    --azur-font-size-lg: 1.5rem;
    --azur-font-size-xl: 2.25rem;
    --azur-font-size-h4: 1rem;
    --azur-font-size-h5: 1rem;
    --azur-font-size-h6: 0.8125rem;
    --azur-heading-h1-size: 64px;
    --azur-heading-h2-size: 36px;
  }
}

@media (max-width: 480px) {
  :root {
    --azur-global-padding: 1.25rem;
    --azur-font-size-xs: 0.875rem;
    --azur-font-size-sm: 1.125rem;
    --azur-font-size-md: 1.125rem;
    --azur-font-size-lg: 1.5rem;
    --azur-font-size-xl: 2rem;
    --azur-font-size-h4: 0.9375rem;
    --azur-font-size-h5: 1rem;
    --azur-font-size-h6: 0.75rem;
    --azur-heading-h1-size: 48px;
    --azur-heading-h2-size: 32px;
  }
}

* {
  box-sizing: border-box;
}

html {
  background-color: var(--azur-color-white);
  scroll-behavior: auto;
}

/* Keep anchored content clear of the fixed header controls. */
.main [id] {
  scroll-margin-top: var(--azur-anchor-offset);
}

html,
body {
  margin: 0;
}

a,
a:visited,
a:hover,
a:focus,
a:active {
  text-decoration: none !important;
}

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.site {
  min-height: 100vh;
  background: var(--azur-color-white);
  color: var(--azur-color-black);
  font-family: var(--azur-font-body);
  font-size: var(--azur-body-font-size);
  font-weight: 200;
  line-height: 1.5;
  letter-spacing: 0;
}

.editor-styles-wrapper {
  font-size: var(--azur-body-font-size);
}

.main {
  min-height: calc(100vh - 8rem);
}

.container {
  width: 100%;
}

.container-small {
  width: min(100%, 780px);
  margin-inline: auto;
  z-index: 1;
}

.has-xs-font-size {
  font-size: var(--azur-font-size-xs) !important;
}

.has-sm-font-size {
  font-size: var(--azur-font-size-sm) !important;
}

.has-md-font-size {
  font-size: var(--azur-font-size-md) !important;
}

.has-lg-font-size {
  font-size: var(--azur-font-size-lg) !important;
}

.has-xl-font-size {
  font-size: var(--azur-font-size-xl) !important;
}

h1,
.editor-styles-wrapper h1 {
  font-size: var(--azur-heading-h1-size);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -2px;
  text-transform: none;
}

h2,
.editor-styles-wrapper h2 {
  font-size: var(--azur-heading-h2-size);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -2px;
  text-transform: none;
}

h3,
.editor-styles-wrapper h3 {
  font-size: var(--azur-heading-h3-size);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -1px;
  text-transform: none;
}

h4,
.editor-styles-wrapper h4 {
  font-size: var(--azur-heading-h4-size);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: uppercase;
}

.wp-block-heading.is-style-azur-h1,
.editor-styles-wrapper .wp-block-heading.is-style-azur-h1 {
  font-size: var(--azur-heading-h1-size);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -2px;
  text-transform: none;
}

.wp-block-heading.is-style-azur-h2,
.editor-styles-wrapper .wp-block-heading.is-style-azur-h2 {
  font-size: var(--azur-heading-h2-size);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -2px;
  text-transform: none;
}

.wp-block-heading.is-style-azur-h3,
.editor-styles-wrapper .wp-block-heading.is-style-azur-h3 {
  font-size: var(--azur-heading-h3-size);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -1px;
  text-transform: none;
}

.wp-block-heading.is-style-azur-h4,
.editor-styles-wrapper .wp-block-heading.is-style-azur-h4 {
  font-size: var(--azur-heading-h4-size);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: uppercase;
}

.wp-block-heading .azur-lift-word-mask,
.footer-cta__title .azur-lift-word-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.wp-block-heading .azur-lift-word,
.footer-cta__title .azur-lift-word {
  display: block;
}

.wp-block-heading .azur-lift-word.azur-text-underline,
.footer-cta__title .azur-lift-word.azur-text-underline {
  text-decoration: underline;
}

/* Keep animated titles out of the first paint until GSAP has split their
   content and applied its initial transforms. Scoped to the front end so the
   Gutenberg editor always remains directly editable. */
.azur-frontend:not(.azur-title-animations-ready) .azur-section-heading,
.azur-frontend:not(.azur-title-animations-ready) .wp-block-azur-eyebrow.azur-eyebrow,
.azur-frontend:not(.azur-title-animations-ready) .wp-block-heading,
.azur-frontend:not(.azur-title-animations-ready) .footer-cta__title {
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .azur-frontend:not(.azur-title-animations-ready) .azur-section-heading,
  .azur-frontend:not(.azur-title-animations-ready) .wp-block-azur-eyebrow.azur-eyebrow,
  .azur-frontend:not(.azur-title-animations-ready) .wp-block-heading,
  .azur-frontend:not(.azur-title-animations-ready) .footer-cta__title {
    visibility: visible;
  }
}

h5,
.editor-styles-wrapper h5 {
  font-size: var(--azur-font-size-h5);
}

h6,
.editor-styles-wrapper h6 {
  font-size: var(--azur-font-size-h6);
}

.global-padding {
  padding-left: var(--azur-global-padding);
  padding-right: var(--azur-global-padding);
}

.section {
  padding-top: var(--azur-section-padding);
  padding-bottom: var(--azur-section-padding);
  position: relative;
}

.section.section-wrapped {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
}

.no-underline,
.no-underline>* {
  text-decoration: none !important;
}

.section-full-height {
  min-height: 100vh;
}

.min-height-80vh {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 80vh;
}

.min-height-200vh {
  min-height: 200vh;
  min-height: 200svh;
  padding-top: var(--azur-section-padding);
  padding-bottom: var(--azur-section-padding);
}

.is-sticky {
  position: sticky;
  top: var(--azur-sticky-top, var(--azur-section-padding));
  z-index: 1;
}

.min-height-200vh .is-sticky {
  min-height: 0;
}

.section-full-height:not(.is-layout-flex) {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.editor-styles-wrapper .is-style-section,
.editor-styles-wrapper .is-style-section-wrapped,
.editor-styles-wrapper .is-style-section-full-height {
  padding-top: var(--azur-section-padding);
  padding-bottom: var(--azur-section-padding);
  padding-left: var(--azur-global-padding);
  padding-right: var(--azur-global-padding);
  position: relative;
}

.editor-styles-wrapper .is-style-section-wrapped {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
}

.editor-styles-wrapper .is-style-section-full-height {
  min-height: 100vh;
}

.editor-styles-wrapper .is-style-section-full-height:not(.is-layout-flex) {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.editor-styles-wrapper .is-style-section-full-height.is-layout-flex {
  align-items: center;
}

.wp-block-columns.columns-content-media-split {
  align-items: stretch !important;
}

.wp-block-columns.columns-content-media-split>.wp-block-column {
  display: flex;
  flex-direction: column;
}

.wp-block-columns.columns-content-media-split>.wp-block-column.column-content-center {
  justify-content: center;
  padding-top: 80px;
  padding-bottom: 80px;
}

.wp-block-columns.columns-content-media-split>.wp-block-column.column-media-cover {
  min-height: 100%;
}

.wp-block-columns.columns-content-media-split>.wp-block-column.column-media-cover>.wp-block-image {
  margin: 0;
  height: 100%;
}

.wp-block-columns.columns-content-media-split>.wp-block-column.column-media-cover>.wp-block-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Gutenberg image style: fill the complete height of its parent column. */
.wp-block-column:has(> .wp-block-image.is-style-column-full-height) {
  display: flex;
  flex-direction: column;
}

.wp-block-image.is-style-column-full-height {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin-block: 0;
}

.wp-block-image.is-style-column-full-height > a {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.wp-block-image.is-style-column-full-height img {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}

/*
 * Let the adjacent column define the row height, then fit the image into it.
 * Removing the figure from normal flow prevents a tall source image from
 * increasing the height of both columns.
 */
@media (min-width: 783px) {
  .wp-block-columns:has(> .wp-block-column > .wp-block-image.is-style-match-adjacent-column-height) {
    align-items: stretch;
  }

  .wp-block-column:has(> .wp-block-image.is-style-match-adjacent-column-height) {
    position: relative;
    min-height: 0;
  }

  .wp-block-column > .wp-block-image.is-style-match-adjacent-column-height {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
  }

  .wp-block-image.is-style-match-adjacent-column-height > a {
    display: block;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
  }

  .wp-block-image.is-style-match-adjacent-column-height img {
    display: block;
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
  }
}

.editor-styles-wrapper .wp-block-columns.columns-content-media-split>.wp-block-column.column-media-cover>.wp-block-image,
.editor-styles-wrapper .wp-block-columns.columns-content-media-split>.wp-block-column.column-media-cover>.block-editor-media-placeholder {
  height: 100%;
}

.is-inline-flex {
  display: inline-flex !important;
}

.space-between {
  justify-content: space-between;
  width: 100%;
}

/* Reusable CTA: select “CTA Azur” in the Gutenberg button styles,
   or use .azur-button / .azur-button--light in custom markup. */
.azur-button,
.wp-block-button.is-style-azur-cta .wp-block-button__link,
.wp-block-button.is-style-azur-cta-light .wp-block-button__link {
  --azur-button-color: var(--azur-color-black);
  --azur-button-hover-background: var(--azur-color-black);
  --azur-button-hover-color: var(--azur-color-white);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  padding: 16px;
  overflow: hidden;
  border: 0;
  border-radius: var(--azur-radius);
  background: transparent;
  color: var(--azur-button-color);
  font-family: var(--azur-font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: uppercase;
  isolation: isolate;
  transition: color 300ms ease-out;
}

.azur-button--light,
.wp-block-button.is-style-azur-cta-light .wp-block-button__link {
  --azur-button-color: var(--azur-color-white);
  --azur-button-hover-background: var(--azur-color-white);
  --azur-button-hover-color: var(--azur-color-black);
}

.azur-button::before,
.azur-button::after,
.wp-block-button.is-style-azur-cta .wp-block-button__link::before,
.wp-block-button.is-style-azur-cta .wp-block-button__link::after,
.wp-block-button.is-style-azur-cta-light .wp-block-button__link::before,
.wp-block-button.is-style-azur-cta-light .wp-block-button__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
}

.azur-button::before,
.wp-block-button.is-style-azur-cta .wp-block-button__link::before,
.wp-block-button.is-style-azur-cta-light .wp-block-button__link::before {
  border: 1px solid var(--azur-button-color);
  background: transparent;
  box-shadow: none;
  transform: scale(1);
  transition: transform 300ms cubic-bezier(0, 0.25, 0, 1) 167ms;
}

.azur-button::after,
.wp-block-button.is-style-azur-cta .wp-block-button__link::after,
.wp-block-button.is-style-azur-cta-light .wp-block-button__link::after {
  background: var(--azur-button-hover-background);
  transform: translateY(105%);
  transform-origin: center bottom;
  transition: transform 300ms cubic-bezier(0.9, 0, 1, 1);
}

.azur-button__label,
.azur-button__icon {
  position: relative;
  z-index: 1;
}

.azur-button__icon {
  display: block;
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  background: currentColor;
  -webkit-mask: url("assets/SVG/arrow-right.svg") center / contain no-repeat;
  mask: url("assets/SVG/arrow-right.svg") center / contain no-repeat;
}

.azur-button:hover,
.azur-button:focus-visible,
.wp-block-button.is-style-azur-cta .wp-block-button__link:hover,
.wp-block-button.is-style-azur-cta .wp-block-button__link:focus-visible,
.wp-block-button.is-style-azur-cta-light .wp-block-button__link:hover,
.wp-block-button.is-style-azur-cta-light .wp-block-button__link:focus-visible {
  color: var(--azur-button-hover-color);
  text-decoration: none;
  transition-delay: 90ms;
}

.azur-button:hover::before,
.azur-button:focus-visible::before,
.wp-block-button.is-style-azur-cta .wp-block-button__link:hover::before,
.wp-block-button.is-style-azur-cta .wp-block-button__link:focus-visible::before,
.wp-block-button.is-style-azur-cta-light .wp-block-button__link:hover::before,
.wp-block-button.is-style-azur-cta-light .wp-block-button__link:focus-visible::before {
  transform: scale(0.9);
  transition-delay: 0s;
  transition-timing-function: cubic-bezier(0.9, 0, 1, 1);
}

.azur-button:hover::after,
.azur-button:focus-visible::after,
.wp-block-button.is-style-azur-cta .wp-block-button__link:hover::after,
.wp-block-button.is-style-azur-cta .wp-block-button__link:focus-visible::after,
.wp-block-button.is-style-azur-cta-light .wp-block-button__link:hover::after,
.wp-block-button.is-style-azur-cta-light .wp-block-button__link:focus-visible::after {
  transform: translateY(0);
  transition-delay: 167ms;
  transition-timing-function: cubic-bezier(0, 0.25, 0, 1);
}

.azur-button:focus-visible,
.wp-block-button.is-style-azur-cta .wp-block-button__link:focus-visible,
.wp-block-button.is-style-azur-cta-light .wp-block-button__link:focus-visible {
  outline: 2px solid var(--azur-button-color);
  outline-offset: 4px;
}

@media (max-width: 782px) {
  .azur-button,
  .wp-block-button.is-style-azur-cta .wp-block-button__link,
  .wp-block-button.is-style-azur-cta-light .wp-block-button__link {
    font-size: 14px;
    line-height: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .azur-button,
  .azur-button::before,
  .azur-button::after,
  .wp-block-button.is-style-azur-cta .wp-block-button__link,
  .wp-block-button.is-style-azur-cta .wp-block-button__link::before,
  .wp-block-button.is-style-azur-cta .wp-block-button__link::after,
  .wp-block-button.is-style-azur-cta-light .wp-block-button__link,
  .wp-block-button.is-style-azur-cta-light .wp-block-button__link::before,
  .wp-block-button.is-style-azur-cta-light .wp-block-button__link::after {
    transition: none;
  }

}

/* Contact Form 7 — formulaire de contact Azur. */
.azur-contact-form {
  width: 100%;
}

.azur-contact-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 48px;
  row-gap: 24px;
}

.azur-contact-form__field {
  min-width: 0;
}

.azur-contact-form__field--full {
  grid-column: 1 / -1;
}

.azur-contact-form__field p {
  margin: 0;
}

.azur-contact-form__field label {
  display: block;
  margin: 0 0 6px;
  font-family: var(--azur-font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
}

/* CF7 peut injecter un retour à la ligne entre le label et son champ. */
.azur-contact-form__field > br,
.azur-contact-form__field p > br {
  display: none;
}

.azur-contact-form .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

.azur-contact-form input[type="text"],
.azur-contact-form input[type="email"],
.azur-contact-form input[type="tel"],
.azur-contact-form textarea {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid rgb(204 211 223);
  border-radius: var(--azur-radius);
  outline: 0;
  background: var(--azur-color-white);
  color: rgb(102 112 133);
  font-family: var(--azur-font-body);
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
  letter-spacing: 0;
  transition: border-color 180ms ease-out, box-shadow 180ms ease-out;
}

.azur-contact-form textarea {
  min-height: 240px;
  padding: 12px;
  resize: vertical;
}

.azur-contact-form input::placeholder,
.azur-contact-form textarea::placeholder {
  color: rgb(102 112 133);
  opacity: 1;
}

.azur-contact-form input[type="text"]:focus,
.azur-contact-form input[type="email"]:focus,
.azur-contact-form input[type="tel"]:focus,
.azur-contact-form textarea:focus {
  border-color: var(--azur-color-black);
  box-shadow: 0 0 0 1px var(--azur-color-black);
}

.azur-contact-form .wpcf7-not-valid {
  border-color: var(--azur-color-production);
}

.azur-contact-form .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  color: var(--azur-color-production);
  font-size: 14px;
  font-weight: 300;
  line-height: 20px;
}

.azur-contact-form__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}

.azur-contact-form__actions > div {
  width: 100%;
}

.azur-contact-form__actions p {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  margin: 0;
}

.azur-contact-form__actions > br,
.azur-contact-form__actions p > br,
.azur-contact-form__actions .azur-contact-form__submit > br {
  display: none;
}

.azur-contact-form__actions .wpcf7-form-control-wrap[data-name="hcap-cf7"],
.azur-contact-form__actions .wpcf7-form-control-wrap:has(.h-captcha) {
  width: auto;
  max-width: 100%;
}

.azur-contact-form .azur-contact-form__submit {
  display: inline-flex;
  width: 100% !important;
  max-width: 262px;
  min-width: 0;
  flex: 0 0 auto;
  padding-right: 16px;
  padding-left: 16px;
  white-space: nowrap;
  cursor: pointer;
}

/* Carte de contact intégrable depuis un bloc HTML personnalisé. */
.azur-contact-map {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 400px;
  overflow: hidden;
  border-radius: var(--azur-radius);
  background: rgb(234 232 240);
}

.wp-block-columns:has(.azur-contact-map) {
  align-items: stretch;
}

.wp-block-column:has(.azur-contact-map) {
  display: flex;
  flex-direction: column;
}

.wp-block-column > .wp-block-html:has(> .azur-contact-map) {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 400px;
  margin: 0;
}

.azur-contact-map iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.azur-contact-form__submit:disabled,
.wpcf7-form.submitting .azur-contact-form__submit {
  cursor: wait;
}

.azur-contact-form + .wpcf7-response-output,
.wpcf7 form .azur-contact-form ~ .wpcf7-response-output {
  margin: 24px 0 0;
  padding: 12px;
  border-width: 1px;
  border-radius: var(--azur-radius);
  font-size: 14px;
  line-height: 20px;
}

@media (max-width: 782px) {
  .azur-contact-form__grid {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    row-gap: 24px;
  }

  .azur-contact-form__field--full {
    grid-column: 1;
  }

  .azur-contact-form__actions {
    justify-content: center;
    margin-top: 24px;
  }

  .azur-contact-form__actions p {
    align-items: center;
    justify-content: center;
  }
}

/* Header and compact navigation. */
.header {
  position: absolute;
  inset: 0 0 auto;
  pointer-events: none;
  padding-block: 2rem;
  background: transparent;
  color: var(--azur-color-white);
  transition: color 180ms ease-out;
}

.header[data-header-color="black"] {
  color: var(--azur-color-black);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.site-branding {
  position: relative;
  pointer-events: auto;
  display: block;
  width: 243px;
  max-width: 60%;
  flex-shrink: 1;
}

.site-branding img {
  display: block;
  width: 100%;
  height: auto;
}

.site-branding__logo {
  position: relative;
  z-index: 30;
  transition: opacity 180ms ease-out;
}

.site-branding__logo--black {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.header[data-header-color="black"] .site-branding__logo--white {
  opacity: 0;
}

.header[data-header-color="black"] .site-branding__logo--black {
  opacity: 1;
}

.header__menu {
  z-index: 30;
  pointer-events: auto;
  position: relative;
  flex-shrink: 0;
}

.menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid currentColor;
  border-radius: var(--azur-radius);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.02em;
  font-weight: 500;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 180ms ease-out;
}

.header[data-header-color="black"] .menu-toggle {
  background: var(--azur-color-white);
}

.header[data-header-color="white"] .menu-toggle {
  background: var(--azur-color-black);
}

.menu-toggle[hidden] {
  display: none;
}

.menu-toggle__icon {
  display: block;
  position: relative;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}

.menu-toggle__icon span {
  position: absolute;
  left: 2.5px;
  top: 9.25px;
  width: 15px;
  height: 1.5px;
  background: currentColor;
  transform-origin: center;
}

.menu-toggle__icon span:first-child {
  transform: translateY(-4.25px);
}

.menu-toggle__icon span:last-child {
  transform: translateY(4.25px);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon span:first-child {
  transform: rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon span:nth-child(2) {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon span:last-child {
  transform: rotate(-45deg);
}

.menu-panel {
  width: min(280px, calc(100vw - 2 * var(--azur-global-padding)));
  padding: 4px 16px;
  border: 1px solid currentColor;
  border-radius: var(--azur-radius);
  background: transparent;
  color: inherit;
  transform-origin: top right;
  max-height: calc(100dvh - 140px);
  overflow-y: auto;
  overscroll-behavior: contain;
  transition: background-color 180ms ease-out;
}

/* Prevent the server-rendered navigation from flashing before menu.js has
   applied its initial closed state. It remains visible when JS is disabled. */
.js .header:not(.is-menu-ready) .menu-panel {
  display: none;
}

.header[data-header-color="black"] .menu-panel {
  background: var(--azur-color-white);
}

.header[data-header-color="white"] .menu-panel {
  background: var(--azur-color-black);
}

.header[data-header-color="hero"] .menu-panel {
  background: rgb(0 0 0 / 30%);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.header.is-menu-ready .menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
}

.menu-panel[hidden] {
  display: none;
}

.menu-panel[inert] {
  pointer-events: none;
}

.menu-panel.is-animating {
  overflow-y: hidden;
}

.navigation__list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: navigation;
}

.navigation__list>li {
  counter-increment: navigation;
}

.navigation__list>li+li {
  border-top: 1px solid color-mix(in srgb, currentColor 50%, transparent);
}

.navigation__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  padding-block: 12px;
  color: inherit;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 16px;
  line-height: 18px;
  letter-spacing: -0.02em;
  font-weight: 500;
}

.navigation__list a::after {
  content: counter(navigation, decimal-leading-zero);
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.navigation__label {
  position: relative;
  display: block;
  min-width: 0;
  height: 18px;
  overflow: hidden;
  line-height: 18px;
}

.navigation__label-text {
  display: block;
  transform: translateY(0);
  transition: transform 450ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.navigation__label-text--duplicate {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
}

.navigation__list a:hover .navigation__label-text,
.navigation__list a:focus-visible .navigation__label-text {
  transform: translateY(-100%);
}

.menu-toggle:focus-visible,
.site-branding:focus-visible,
.navigation__list a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .navigation__label-text {
    transition: none;
  }

  .navigation__list a:hover .navigation__label-text,
  .navigation__list a:focus-visible .navigation__label-text {
    transform: none;
  }
}

@media (max-width: 480px) {
  .header__inner {
    gap: 12px;
  }

  .site-branding {
    width: 190px;
  }
}

.entry-content>*:first-child {
  margin-top: 0;
}

.entry-content>*:last-child {
  margin-bottom: 0;
}

.footer {
  overflow: hidden;
  background: var(--azur-color-black);
  color: var(--azur-color-white);
}

.footer a {
  color: inherit;
}

.footer-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 3rem;
  padding-block: 96px;
  border-bottom: 1px solid rgb(255 255 255 / 70%);
}

.footer-cta__title {
  max-width: 1220px;
  margin: 0;
  color: inherit;
  font-size: 40px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -2px;
  text-transform: none;
}

.footer-cta__action {
  display: flex;
  justify-content: flex-end;
}

.footer-catalogues {
  display: grid;
  align-items: center;
  justify-items: end;
}

.footer-catalogues__trigger,
.footer-catalogues__links {
  grid-area: 1 / 1;
}

.footer-catalogues__trigger {
  cursor: pointer;
  transform-origin: right center;
  will-change: transform, opacity, filter;
}

.footer-catalogues__links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  filter: blur(8px);
  transform: scaleX(0.2) scaleY(0.9);
  transform-origin: right center;
  will-change: transform, opacity, filter;
}

.footer-catalogues__link {
  white-space: nowrap;
}

.footer-catalogues__close {
  position: relative;
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: var(--azur-radius);
  background: transparent;
  color: var(--azur-color-white);
  cursor: pointer;
  transition:
    color 260ms ease,
    background-color 260ms ease;
}

.footer-catalogues__close span::before,
.footer-catalogues__close span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 17px;
  height: 1px;
  background: currentColor;
}

.footer-catalogues__close span::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.footer-catalogues__close span::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.footer-catalogues__close:hover,
.footer-catalogues__close:focus-visible {
  background: var(--azur-color-white);
  color: var(--azur-color-black);
}

.footer-catalogues__close:focus-visible {
  outline: 2px solid var(--azur-color-white);
  outline-offset: 4px;
}

.footer-catalogues.is-open .footer-catalogues__trigger {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  filter: blur(8px);
  transform: scaleX(1.5) scaleY(0.9);
}

.footer-catalogues.is-open .footer-catalogues__links {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  filter: blur(0);
  transform: scaleX(1) scaleY(1);
}

.footer-directory {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 6rem);
  padding-block: 96px;
}

.footer-directory::after {
  content: "";
  position: absolute;
  right: var(--azur-global-padding);
  bottom: 0;
  left: var(--azur-global-padding);
  height: 1px;
  background: rgb(255 255 255 / 70%);
}

.footer-directory__column {
  min-width: 0;
}

.footer-directory__heading-link {
  display: block;
  width: fit-content;
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.footer-directory__heading-link:hover {
  color: inherit;
  text-decoration: none;
  opacity: 0.7;
}

.footer-directory__heading-link:focus-visible {
  outline: 2px solid currentcolor;
  outline-offset: 6px;
}

.footer-directory__icon {
  display: block;
  width: 43px;
  height: 43px;
  margin-bottom: 12px;
  object-fit: contain;
}

.footer-directory__eyebrow,
.footer-directory__title {
  display: block;
  margin: 0;
  color: inherit;
}

.footer-directory__eyebrow {
  font-size: 16px;
  font-weight: 200;
  line-height: 22px;
  letter-spacing: 0.3px;
}

.footer-directory__title {
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: none;
}

.footer-directory__nav {
  margin-top: 24px;
}

.footer-directory__links,
.footer-meta__links,
.footer-social__links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-directory__links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-directory__links a,
.footer-meta,
.footer-meta__links a {
  font-size: 16px;
  font-weight: 200;
  line-height: 22px;
  letter-spacing: 0.3px;
}

.footer-directory__links a,
.footer-meta__links a {
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.footer-directory__links a:hover,
.footer-meta__links a:hover,
.footer-social__links a:hover {
  opacity: 0.7;
  color: inherit;
  text-decoration: none;
}

.footer-meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  justify-content: space-between;
  padding-block: 48px;
}

.footer-meta__copyright {
  margin: 0;
  white-space: nowrap;
}

.footer-meta__links {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 5vw, 6rem);
}

.footer-social__links {
  display: flex;
  align-items: center;
  gap: 24px;
  justify-content: flex-end;
}

.footer-social__links a {
  display: block;
  width: 21px;
  height: 21px;
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  color: transparent;
  font-size: 0;
  transition: opacity 0.2s ease;
}

.footer-social__links .social-instagram a,
.footer-social__links a[href*="instagram.com"] {
  background-image: url("assets/SVG/instagram.svg");
}

.footer-social__links .social-linkedin a,
.footer-social__links a[href*="linkedin.com"] {
  background-image: url("assets/SVG/linkedin.svg");
}

.footer-social__links .social-facebook a,
.footer-social__links a[href*="facebook.com"] {
  background-image: url("assets/SVG/facebook.svg");
}

.footer-signature {
  padding-top: 48px;
  color: var(--azur-color-white);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}

.footer-signature__text {
  display: inline-block;
  position: relative;
  font-size: calc(16.22963vw + 4px);
  font-weight: 300;
  font-optical-sizing: none;
  line-height: 1;
  letter-spacing: -0.028846em;
  margin-bottom: -2.57143vw;
}

@media (max-width: 1100px) {
  .footer-directory {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 4rem;
  }

  .footer-meta {
    grid-template-columns: 1fr auto;
    gap: 18px;
  }

  .footer-meta__legal {
    grid-column: 1 / -1;
    grid-row: 1;
  }
}

@media (max-width: 782px) {
  .navigation__list {
    flex-direction: column;
  }

  .footer-cta,
  .footer-directory {
    padding-block: 64px;
  }

  .footer-cta {
    grid-template-columns: 1fr;
  }

  .footer-cta__action,
  .footer-catalogues {
    width: 100%;
    justify-content: flex-end;
    justify-items: end;
  }

  .footer-catalogues__links {
    width: 100%;
    justify-content: flex-end;
  }

  .footer-cta__title {
    font-size: clamp(2rem, 8vw, 2.5rem);
  }

  .footer-directory {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-meta__links {
    flex-wrap: wrap;
    row-gap: 1rem;
  }
}

@media (max-width: 520px) {
  .footer-catalogues__links {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 48px;
  }

  .footer-catalogues__link {
    min-width: 0;
    padding-inline: 10px;
    gap: 8px;
  }

  .footer-catalogues__close {
    width: 48px;
    height: 56px;
    min-width: 0;
    flex-basis: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-catalogues__trigger,
  .footer-catalogues__links {
    will-change: auto;
  }
}

@media (max-width: 520px) {
  .footer-directory {
    grid-template-columns: 1fr;
  }

  .footer-meta {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .footer-meta__legal,
  .footer-meta__copyright,
  .footer-social {
    grid-column: 1;
  }

  .footer-meta__legal {
    grid-row: auto;
  }

  .footer-meta__links {
    justify-content: flex-start;
  }
}

.error-404 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: var(--azur-section-padding);
  padding-bottom: var(--azur-section-padding);
  text-align: center;
}

.error-404__content {
  width: min(100%, 1200px);
  margin-inline: auto;
}

.error-404__eyebrow {
  margin: 0 0 24px;
  font-size: 24px;
  font-weight: 200;
  line-height: 1.2;
  letter-spacing: -1px;
  text-transform: uppercase;
}

.error-404__title {
  margin: 0;
  font-size: var(--azur-heading-h2-size);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -2px;
  text-transform: none;
}

.error-404__description {
  width: min(100%, 580px);
  margin: 32px auto 0;
}

.error-404__action {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

@media (max-width: 782px) {

  .container,
  .container-small {
    width: 100%;
  }

  .global-padding {
    padding-left: var(--azur-global-padding);
    padding-right: var(--azur-global-padding);
  }

  .editor-styles-wrapper .is-style-section,
  .editor-styles-wrapper .is-style-section-full-height {
    padding-left: var(--azur-global-padding);
    padding-right: var(--azur-global-padding);
  }

  .wp-block-columns.columns-content-media-split>.wp-block-column.column-content-center {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .wp-block-columns.columns-content-media-split>.wp-block-column.column-media-cover>.wp-block-image img {
    min-height: 320px;
  }

  .header {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .section {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

}

body,
.editor-styles-wrapper {
  font-family: var(--azur-font-body);
  font-optical-sizing: auto;
}

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

body.admin-bar .header {
  top: 32px;
}

@media (max-width: 782px) {
  body.admin-bar .header {
    top: 46px;
  }
}

@media (max-width: 600px) {
  body.admin-bar #wpadminbar {
    position: fixed;
  }
}

/* Keep the visible header controls fixed while their structural wrapper
   remains in the document flow. */
.header {
  --header-top: 2rem;
  --header-logo-width: 243px;
  --header-logo-height: 44px;
  --header-admin-offset: 0px;
}

.site-branding .site-branding__logo {
  position: fixed;
  inset: auto;
  top: calc(var(--header-top) + var(--header-admin-offset) + 28px - var(--header-logo-height) / 2);
  left: var(--azur-global-padding);
  width: var(--header-logo-width);
  height: var(--header-logo-height);
  object-fit: contain;
}

.header__menu {
  position: fixed;
  top: calc(var(--header-top) + var(--header-admin-offset));
  right: var(--azur-global-padding);
}

body.admin-bar .header {
  --header-admin-offset: 32px;
}

@media (max-width: 782px) {
  .header {
    --header-top: 1.5rem;
  }

  body.admin-bar .header {
    --header-admin-offset: 46px;
  }
}

@media (max-width: 480px) {
  .header {
    --header-logo-width: min(190px, calc(100vw - 168px));
    --header-logo-height: 34.38px;
  }
}
