/* Fonts of the theme, hosted with the site (fonts/, from Google Fonts): Encode Sans (headings, buttons) and Open Sans (menu, texts).
   The mirrored declarations pointed to 404 urls, the pages fell back to the system sans-serif.
   Variable fonts (one file for all the weights), latin and latin-ext subsets (French accents, ligatures, euro sign...) */
@font-face {
  font-family: "Encode Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/encode-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Encode Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/encode-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/open-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/open-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Open Sans";
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/open-sans-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Open Sans";
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/open-sans-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Header logo (home button) -> hover & press animation, ported from the _ARCHIVE project */
.site-logo-img .custom-logo-link {
  display: inline-flex;
  flex-direction: column; /* desktop & tablet views -> header__logo-subtitle below header__logo-title */
  align-items: center;
  gap: 0.18rem; /* 0.2rem -10% */
  transition: all 0.2s;
}

.site-logo-img .custom-logo-link img {
  transition: all 0.2s;
  position: relative;
}

.site-logo-img .custom-logo-link .custom-logo {
  display: none; /* desktop & tablet views -> the header__logo-title replaces the logo image */
  height: 2.45rem; /* height of the logo (3.5rem -30%) */
  width: auto;
}

.site-logo-img .custom-logo-link .header__logo-title {
  height: 2.205rem; /* 2.45rem (height of the logo image in the mobile views) -10% */
  width: auto;
  max-width: 33.75vw; /* (37.5vw -10%) keeps the title within the header on small screens */
  object-fit: contain;
}

/* copy of the RENOVATION title image, below header__logo-title with the same width */
.site-logo-img .custom-logo-link .header__logo-subtitle {
  height: 1.0287rem; /* (1.143rem -10%) 2.205rem x (255/548) x (4462/4450) -> same width as header__logo-title */
  width: auto;
  max-width: 33.75vw;
  object-fit: contain;
}

/* the shadow is set on the link so it covers the visible home button image */
.site-logo-img .custom-logo-link:hover {
  /* brighter + slight blue glow, then the original shadow */
  filter: brightness(1.6) drop-shadow(0 0 6px rgba(90, 150, 255, 0.55)) drop-shadow(0 10px 20px rgba(0, 0, 0, 0.2)); /* Ombre X Y blur color&transparency button hovered*/
}

.site-logo-img .custom-logo-link:hover img {
  transform: translateY(-3px);
}

.site-logo-img .custom-logo-link:active {
  /* strongly brighter + strong blue glow, then the original shadow */
  filter: brightness(2.3) drop-shadow(0 0 8px rgba(120, 175, 255, 0.95)) drop-shadow(0 0 20px rgba(120, 175, 255, 0.7)) drop-shadow(0 5px 10px rgba(0, 0, 0, 0.2)); /* Ombre X Y blur color&transparency button pressed*/
}

.site-logo-img .custom-logo-link:active img {
  transform: translateY(-1px);
}

/* Tablet & mobile views (as soon as the mobile menu button shows, under 922px) -> the logo image as home button,
   without the header__logo-title & header__logo-subtitle */
@media (max-width: 921px) {
  .site-logo-img .custom-logo-link {
    flex-direction: row;
    gap: 1rem;
  }

  .site-logo-img .custom-logo-link .custom-logo {
    display: inline-block;
  }

  .site-logo-img .custom-logo-link .header__logo-title,
  .site-logo-img .custom-logo-link .header__logo-subtitle {
    display: none;
  }
}

/* Footer logo -> white copies of the home button images (SCUDERI above RENOVATION) */
.footer__logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.16rem; /* 0.2rem -20% */
}

.footer__logo .footer__logo-title {
  height: 1.96rem; /* 2.45rem -20% */
  width: auto;
}

.footer__logo .footer__logo-subtitle {
  height: 0.9144rem; /* 1.143rem -20%, same width as footer__logo-title */
  width: auto;
}

/* Footer main row (logo, menu, social) -> top padding divided by 2 (45px of astra -> 22.5px), no bottom padding */
#colophon .site-primary-footer-wrap {
  padding-top: 22.5px;
  padding-bottom: 0;
}

/* Footer copyright row -> no separator line above it (1px #d1d1d1 border of astra), top and bottom padding divided by 2 (25px -> 12.5px) */
#colophon .site-below-footer-wrap {
  border-top: none;
  padding-top: 12.5px;
  padding-bottom: 12.5px;
}

/* Home page hero -> 90vh tall, its content scaling with the viewport (scale set by js/custom.js) */
.elementor-9 .elementor-element.elementor-element-2339f9d {
  margin-top: 4.5vh; /* moved down by 5% of its height (90vh), the gap filled with plaster by its ::after band */
  height: 90vh;
  height: 90dvh;
  justify-content: center; /* content vertically centered */
  overflow-x: clip;
  overflow-y: visible; /* lets the hero image rise in front of the navigation bar */
}

.elementor-element-2339f9d > .e-con-inner {
  zoom: var(--hero-scale, 1);
}

/* the bottom wave shape keeps its real size, only the content is scaled */
.elementor-element-2339f9d > .e-con-inner > .elementor-shape {
  zoom: var(--hero-unscale, 1);
}

/* Home page hero image -> at the bottom of the hero and 7% beyond its right border (desktop & tablet views) */
@media (min-width: 768px) {
  .elementor-9 .elementor-element.elementor-element-11546b8 {
    position: static; /* the image is positioned relative to the hero, not to its column */
    /* elementor gives this column (a flex item) z-index 1, which creates a stacking context and kept the image (z-index 100)
       below the navigation bar (z-index 99): without it the top of the image shows in front of the navigation bar */
    --z-index: auto;
    z-index: auto;
  }

  .elementor.elementor-9 .e-con > .elementor-element.elementor-element-aa662c8 {
    position: absolute;
    bottom: 0; /* on the bottom of the hero (moved 5% down, then back 5% up) */
    right: calc(-7% + var(--hero-img-shift, 0px)); /* 7% beyond the right border (clipped by the hero), moved by js/custom.js so that the hair is just at the right of the "Offres" link */
    width: 981.6px; /* 794px (size in the column) +20% +3%, scaled with the hero content (the 2 next carousel pictures follow its height) */
    max-width: 68%; /* (55% +20%) +3% tablet views -> keeps the image clear of the text column */
    /* stacking order: navigation bar (99) < image (100) < next section & hero text (101) < bottom wave (102) */
    z-index: 100;
    pointer-events: none; /* the menu links behind the image stay clickable */
  }

  .elementor-9 .elementor-element.elementor-element-f308bff {
    --z-index: 101;
    z-index: 101; /* text column above the image */
  }

  .elementor-9 .elementor-element.elementor-element-ae40ffb {
    --z-index: 101;
    z-index: 101; /* next section in front of the image */
  }

  .elementor-9 .elementor-element.elementor-element-2339f9d > .e-con-inner > .elementor-shape.elementor-shape-bottom {
    z-index: 102; /* bottom wave in front of the image */
  }

  .elementor-9 .elementor-element.elementor-element-aa662c8 > .elementor-widget-container {
    margin: 0;
  }

  .elementor-9 .elementor-element.elementor-element-aa662c8 img {
    display: block;
    width: 100%;
    height: auto;
    max-height: var(--hero-inner-height, none); /* never higher than the top of the page (set by js/custom.js) */
    object-fit: contain;
    object-position: right bottom;
    will-change: transform; /* scroll parallax set by js/custom.js */
    transform-origin: right top; /* the enlargement keeps the top and right edges in place */
  }
}

/* Home page hero image -> carousel of 3 pictures (js/custom.js), one after the other: the painter (wp-image-700, the base picture: its size,
   place and animations unchanged), then Michele (Stand-Michele-01), then Artur (Stand-Artur-01-Re), WebP copies of the PNG cut-outs; the 2 next
   pictures are placed over the first one (js/custom.js: same top-left corner and height as the painter picture, same parallax transform);
   the carousel moves from left to right: the next picture comes in from slightly to the left while fading in, the previous one goes out
   to the right while fading out */
.elementor-9 .elementor-element.elementor-element-aa662c8 > .elementor-widget-container {
  position: relative; /* reference of the placed pictures */
}

.elementor-9 .elementor-element.elementor-element-aa662c8 img.scuderi-hero-layer {
  opacity: 0;
  translate: -6% 0;
  transition: opacity 1.2s ease, translate 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.elementor-9 .elementor-element.elementor-element-aa662c8 img.scuderi-hero-layer.is-active {
  opacity: 1;
  translate: 0 0;
}

.elementor-9 .elementor-element.elementor-element-aa662c8 img.scuderi-hero-layer.is-out {
  opacity: 0;
  translate: 6% 0;
}

/* while the third picture (Artur) comes in and is shown (body class set by js/custom.js, removed when the painter starts coming in): the desktop header bar (z-index 4) above the hero picture
   (z-index 100), so that he appears behind the "Offre Spéciale" button and its pumpkin (and the menu); the painter and Michele stay in
   front of the header as before */
body.home.scuderi-hero-behind-header #ast-desktop-header .ast-primary-header-bar {
  z-index: 101;
}

/* the next pictures: placed and sized by js/custom.js (left, top, height), their own proportions */
.elementor-9 .elementor-element.elementor-element-aa662c8 img.scuderi-hero-slide {
  position: absolute;
  width: auto;
  max-width: none;
  max-height: none;
  object-fit: fill;
}

@media (prefers-reduced-motion: reduce) {
  .elementor-9 .elementor-element.elementor-element-aa662c8 img.scuderi-hero-layer {
    transition: none;
  }
}

/* Home page hero image, mobile portrait view (up to 767px wide, taller than wide) -> the 3 carousel pictures 5% bigger, then 3%, then 5%:
   the picture widget scaled x 1.1356 (1.05 x 1.03 x 1.05, "scale", combined with its slide-in transform) from its bottom center (centered,
   still standing on the bottom) */
@media (max-width: 767px) and (orientation: portrait) {
  .elementor.elementor-9 .e-con > .elementor-element.elementor-element-aa662c8 {
    translate: 0 2%; /* 2% (of the picture widget height) lower */
    scale: 1.1356;
    transform-origin: center bottom;
  }
}

/* mobile portrait view: the bigger pictures reaching up to the schedule -> the hero texts drawn above the pictures (the schedule stays
   readable over the hair), the pictures (also the invisible waiting ones of the carousel) letting the taps through */
@media (max-width: 767px) and (orientation: portrait) {
  .elementor.elementor-9 .e-con > .elementor-element.elementor-element-aa662c8 {
    pointer-events: none;
  }

  .elementor-9 .elementor-element.elementor-element-f308bff {
    z-index: 2;
  }
}

/* Home page hero image, tablet portrait view (768px to 1024px wide, taller than wide) -> the 3 carousel pictures 1.5 times as big and
   centered: the picture widget scaled x 1.5 ("scale", combined with its slide-in transform) from its bottom center (they still stand on
   the bottom of the hero), and centered in the hero instead of at its right (left 50%, moved back by half its width), then moved 20% (of
   the size of the picture widget) to the right and 20% up (-50% + 20%, -20%) */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .elementor.elementor-9 .e-con > .elementor-element.elementor-element-aa662c8 {
    left: 50%;
    right: auto;
    translate: -25% -5%; /* then 5% (of the picture widget width) more to the right; then 10% + 5% (of its height) down (-20% -> -5%) */
    scale: 1.725; /* 1.5, then 15% bigger */
    transform-origin: center bottom;
    pointer-events: none; /* the taps go through to the buttons below the pictures */
  }

  /* the bigger pictures reaching the texts -> the hero texts drawn in front of them (pictures z-index 100, bottom wave 102) */
  #page .elementor-9 .elementor-element.elementor-element-f308bff {
    z-index: 101;
  }
}

/* tablet portrait view -> the first carousel picture (the painter, wp-image-700) 5% (of the screen width) more to the right, alone: added to
   the "translate" of its carousel states (waiting -6%, shown 0, going out 6%), not to its box, from which js/custom.js places Michele and
   Artur; the screen distance divided by the zoom of the hero content and by the "scale" of the picture widget (1.725) */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .elementor-9 .elementor-element.elementor-element-aa662c8 img.wp-image-700.scuderi-hero-layer {
    --scuderi-painter-x: calc(5vw / var(--hero-scale, 1) / 1.725);
    translate: calc(-6% + var(--scuderi-painter-x)) 0;
  }

  .elementor-9 .elementor-element.elementor-element-aa662c8 img.wp-image-700.scuderi-hero-layer.is-active {
    translate: var(--scuderi-painter-x) 0;
  }

  .elementor-9 .elementor-element.elementor-element-aa662c8 img.wp-image-700.scuderi-hero-layer.is-out {
    translate: calc(6% + var(--scuderi-painter-x)) 0;
  }
}

/* Home page hero image -> soft shadow following the outline of the photo, cast to the bottom right (light from the top left like the plaster) */
.elementor-9 .elementor-element.elementor-element-aa662c8 img {
  filter: drop-shadow(16px 20px 22px rgba(0, 0, 0, 0.38));
}

/* Home page hero image -> slides in from the extreme left of the screen, fast at the start and slowing down at the end */
.elementor-9 .elementor-element.elementor-element-aa662c8 {
  animation: heroImageSlideIn 1.6s cubic-bezier(0.34, 1, 0.36, 1) both; /* slower start, same slowing down at the end as cubic-bezier(0.22, 1, 0.36, 1) */
}

@keyframes heroImageSlideIn {
  from {
    transform: translateX(calc(-100vw - 100%)); /* fully outside the left edge of the screen */
  }
  to {
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .elementor-9 .elementor-element.elementor-element-aa662c8 {
    animation: none;
  }
}

/* Home page hero text -> each element rises in like the _ARCHIVE header buttons (moveInBottom, ease-out, hidden before its start),
   starting right after the middle of the hero image animation (1.6s / 2 = 0.8s), one after the other from top to bottom (every 0.15s) */
.elementor-9 .elementor-element-f308bff .elementor-element.elementor-element-3e9635d,
.elementor-9 .elementor-element-f308bff .elementor-element.elementor-element-64e8f55,
.elementor-9 .elementor-element-f308bff .elementor-element.elementor-element-d4779b1,
.elementor-9 .elementor-element-f308bff .elementor-element.elementor-element-280ff2e {
  animation-name: moveInBottom;
  animation-duration: 0.55s;
  animation-timing-function: ease-out;
  animation-fill-mode: backwards; /* invisible before its animation starts */
}

.elementor-9 .elementor-element-f308bff .elementor-element.elementor-element-3e9635d {
  animation-delay: 0.85s; /* "5/5 rating" line */
}

.elementor-9 .elementor-element-f308bff .elementor-element.elementor-element-64e8f55 {
  animation-delay: 1.00s; /* heading */
}

.elementor-9 .elementor-element-f308bff .elementor-element.elementor-element-d4779b1 {
  animation-delay: 1.15s; /* paragraph */
}

.elementor-9 .elementor-element-f308bff .elementor-element.elementor-element-280ff2e {
  animation-delay: 1.30s; /* opening hours (bottom row) */
}

/* Home page hero opening hours (280ff2e), mobile -> the schedule text on the right of the clock icon, vertically centered on it, like on
   desktop and tablet (elementor puts the icon above the text on mobile: elementor-mobile-position-top) */
@media (max-width: 767px) {
  .elementor-9 .elementor-element.elementor-element-280ff2e .elementor-icon-box-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: start;
    gap: 15px;
  }

  .elementor-9 .elementor-element.elementor-element-280ff2e .elementor-icon-box-icon {
    margin: 0;
  }
}

/* mobile portrait view -> the clock icon and the schedule text on its right centered together in the hero text column (the text keeps
   its own width instead of filling the rest of the row) */
@media (max-width: 767px) and (orientation: portrait) {
  .elementor-9 .elementor-element.elementor-element-280ff2e .elementor-icon-box-wrapper {
    justify-content: center;
  }

  .elementor-9 .elementor-element.elementor-element-280ff2e .elementor-icon-box-content {
    flex-grow: 0;
    width: auto; /* elementor sets it to 100% */
    align-self: center; /* vertically centered on the icon (elementor aligns it at the top) */
  }

  /* the 2 schedule lines closer together (line height 1.5 -> 1.2), and the icon box exactly as tall as the round icon (its line height made
     it 3px taller, the icon sat higher than the middle of the text) */
  .elementor-9 .elementor-element.elementor-element-280ff2e .elementor-icon-box-description {
    line-height: 1.2;
  }

  .elementor-9 .elementor-element.elementor-element-280ff2e .elementor-icon-box-icon {
    display: flex;
  }

  /* closer to the buttons above (30px gap of the column, and the space under the buttons): about 4px between the buttons and the
     schedule on screen */
  .elementor-9 .elementor-element-f308bff .elementor-element.elementor-element-280ff2e {
    margin-top: -51px;
  }

  /* the clock icon hidden: the schedule text alone, centered (its 2 lines too) */
  .elementor-9 .elementor-element.elementor-element-280ff2e .elementor-icon-box-icon {
    display: none;
  }

  .elementor-9 .elementor-element.elementor-element-280ff2e .elementor-icon-box-description {
    text-align: center;
  }

  /* the schedule on one line: "Lun-Ven (8h-17h) · Sam-Dim (fermé)" (the line break hidden, the separator shown) */
  .elementor-9 .elementor-element.elementor-element-280ff2e .scuderi-hours-break {
    display: none;
  }

  .elementor-9 .elementor-element.elementor-element-280ff2e .scuderi-hours-sep {
    display: inline;
  }
}

@media (prefers-reduced-motion: reduce) {
  .elementor-9 .elementor-element-f308bff .elementor-element {
    animation: none;
  }
}

/* Quote buttons -> same rise-in, continuing the hero text sequence after its last element (1.45s):
   after a short pause (0.3s): hero "Get a Free Quote" at 1.90s, then header "Get Quote" (desktop) at 2.05s;
   the mobile header home button (logo) and menu toggle rise in together right away (0s); its block wrapper (.site-branding) is animated
   (the inline .site-logo-img span ignores transforms), not its link, whose images keep their own hover & press transforms */
.elementor-9 .elementor-element-f308bff .elementor-element.elementor-element-1206274,
#ast-desktop-header .ast-builder-button-wrap .ast-custom-button,
#ast-mobile-header .site-branding,
#ast-mobile-header .ast-button-wrap {
  animation-name: moveInBottom;
  animation-duration: 0.55s;
  animation-timing-function: ease-out;
  animation-fill-mode: backwards; /* invisible before its animation starts */
}

.elementor-9 .elementor-element-f308bff .elementor-element.elementor-element-1206274 {
  animation-delay: 1.9s;
}

.home #ast-desktop-header .ast-builder-button-wrap .ast-custom-button {
  animation-delay: 2.2s; /* after the navy "Get a Free Quote" button (2.05s) */
}

/* other pages: after their 3 hero text elements (last one at 1.15s) with the same rhythm as the home page (+0.6s) */
body:not(.home) #ast-desktop-header .ast-builder-button-wrap .ast-custom-button {
  animation-delay: 1.75s;
}

/* mobile header home button and menu toggle -> no delay on every page, both rising in at the same time */
#ast-mobile-header .site-branding,
#ast-mobile-header .ast-button-wrap {
  animation-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
  #ast-desktop-header .ast-builder-button-wrap .ast-custom-button,
  #ast-mobile-header .site-branding,
  #ast-mobile-header .ast-button-wrap {
    animation: none;
  }
}

/* All red buttons (hero "Get a Free Quote", header "Get Quote", "Know More", "View All Services", "Get Quote Now", contact form "Submit"...) -> red frosted glass (semi-transparent, blurring what is behind it),
   hover & press animation identical to the _ARCHIVE header buttons (lift + shadow, and a copy of the button that expands and fades like a shock wave) */
#page .elementor-element-1206274 .elementor-button,
#page .elementor-element-d95c48c .elementor-button,
#page .elementor-element-5a03e5c .elementor-button,
#page .elementor-element-0e5cf5c .elementor-button,
#page .elementor-element-6e1837c .elementor-button,
#page .scuderi-offer__cta .elementor-button,
#page .elementor-element-f6134ed .elementor-button,
#page .elementor-element-bc884a0 .elementor-button,
#page .elementor-element-7df760a .elementor-button,
#page .elementor-element-9b84f10 .elementor-button,
#page .elementor-element-4785412 .elementor-button,
#page .elementor-element-7d8ea66 .elementor-button,
#page .elementor-element-3140b9f .elementor-button,
#page .elementor-element-6fb2963 .wpforms-submit,
#ast-desktop-header .ast-builder-button-wrap .ast-custom-button {
  position: relative;
  z-index: 0; /* keeps the ::after copy behind the button text */
  transition: all 0.2s;
  /* see-through red glass that keeps exactly the theme red of the buttons (#e7194f):
     the plaster seen through it is slightly blurred and turned into the same red (its relief stays visible as light / dark variations),
     then a light layer of the red on top (filter values fitted on the plaster texture) */
  background-color: rgba(231, 25, 79, 0.3);
  -webkit-backdrop-filter: blur(2px) brightness(0.2) sepia(1) saturate(18) hue-rotate(-33deg) brightness(1.15);
  backdrop-filter: blur(2px) brightness(0.2) sepia(1) saturate(18) hue-rotate(-33deg) brightness(1.15);
  /* no outline around the glass (an empty shadow so that the hover & press shadows below stay valid) */
  --glass-edge: 0 0 0 0 transparent;
  box-shadow: var(--glass-edge);
}

#page .elementor-element-1206274 .elementor-button::after,
#page .elementor-element-d95c48c .elementor-button::after,
#page .elementor-element-5a03e5c .elementor-button::after,
#page .elementor-element-0e5cf5c .elementor-button::after,
#page .elementor-element-6e1837c .elementor-button::after,
#page .scuderi-offer__cta .elementor-button::after,
#page .elementor-element-f6134ed .elementor-button::after,
#page .elementor-element-bc884a0 .elementor-button::after,
#page .elementor-element-7df760a .elementor-button::after,
#page .elementor-element-9b84f10 .elementor-button::after,
#page .elementor-element-4785412 .elementor-button::after,
#page .elementor-element-7d8ea66 .elementor-button::after,
#page .elementor-element-3140b9f .elementor-button::after,
#page .elementor-element-6fb2963 .wpforms-submit::after,
#ast-desktop-header .ast-builder-button-wrap .ast-custom-button::after {
  content: "";
  display: inline-block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background-color: inherit; /* always the current color of the button (also its hover color) */
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0; /* hidden at rest, otherwise it would make the glass look opaque */
}

#page .elementor-element-1206274 .elementor-button:hover,
#page .elementor-element-d95c48c .elementor-button:hover,
#page .elementor-element-5a03e5c .elementor-button:hover,
#page .elementor-element-0e5cf5c .elementor-button:hover,
#page .elementor-element-6e1837c .elementor-button:hover,
#page .scuderi-offer__cta .elementor-button:hover,
#page .elementor-element-f6134ed .elementor-button:hover,
#page .elementor-element-bc884a0 .elementor-button:hover,
#page .elementor-element-7df760a .elementor-button:hover,
#page .elementor-element-9b84f10 .elementor-button:hover,
#page .elementor-element-4785412 .elementor-button:hover,
#page .elementor-element-7d8ea66 .elementor-button:hover,
#page .elementor-element-3140b9f .elementor-button:hover,
#page .elementor-element-6fb2963 .wpforms-submit:hover,
#ast-desktop-header .ast-builder-button-wrap .ast-custom-button:hover {
  transform: translateY(-3px);
  box-shadow: var(--glass-edge), 0 10px 20px rgba(0, 0, 0, 0.2); /* Ombre X Y blur color&transparency button hovered*/
  background-color: rgba(231, 25, 79, 0.5); /* same red glass, a bit denser, instead of the theme hover color */
  filter: brightness(1.15); /* brighter on hover */
}

#page .elementor-element-1206274 .elementor-button:hover::after,
#page .elementor-element-d95c48c .elementor-button:hover::after,
#page .elementor-element-5a03e5c .elementor-button:hover::after,
#page .elementor-element-0e5cf5c .elementor-button:hover::after,
#page .elementor-element-6e1837c .elementor-button:hover::after,
#page .scuderi-offer__cta .elementor-button:hover::after,
#page .elementor-element-f6134ed .elementor-button:hover::after,
#page .elementor-element-bc884a0 .elementor-button:hover::after,
#page .elementor-element-7df760a .elementor-button:hover::after,
#page .elementor-element-9b84f10 .elementor-button:hover::after,
#page .elementor-element-4785412 .elementor-button:hover::after,
#page .elementor-element-7d8ea66 .elementor-button:hover::after,
#page .elementor-element-3140b9f .elementor-button:hover::after,
#page .elementor-element-6fb2963 .wpforms-submit:hover::after,
#ast-desktop-header .ast-builder-button-wrap .ast-custom-button:hover::after {
  animation: glassButtonPulse 0.4s ease-out; /* shock wave: expands and fades */
}

@keyframes glassButtonPulse {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scaleX(1.4) scaleY(1.6);
    opacity: 0;
  }
}

#page .elementor-element-1206274 .elementor-button:active,
#page .elementor-element-d95c48c .elementor-button:active,
#page .elementor-element-5a03e5c .elementor-button:active,
#page .elementor-element-0e5cf5c .elementor-button:active,
#page .elementor-element-6e1837c .elementor-button:active,
#page .scuderi-offer__cta .elementor-button:active,
#page .elementor-element-f6134ed .elementor-button:active,
#page .elementor-element-bc884a0 .elementor-button:active,
#page .elementor-element-7df760a .elementor-button:active,
#page .elementor-element-9b84f10 .elementor-button:active,
#page .elementor-element-4785412 .elementor-button:active,
#page .elementor-element-7d8ea66 .elementor-button:active,
#page .elementor-element-3140b9f .elementor-button:active,
#page .elementor-element-6fb2963 .wpforms-submit:active,
#ast-desktop-header .ast-builder-button-wrap .ast-custom-button:active {
  transform: translateY(-1px);
  /* red glow + Ombre X Y blur color&transparency button pressed */
  box-shadow: var(--glass-edge), 0 0 16px rgba(240, 20, 70, 0.95), 0 0 36px rgba(240, 20, 70, 0.65), 0 5px 10px rgba(0, 0, 0, 0.2);
  background-color: rgba(185, 18, 63, 0.65); /* same red (#e7194f x 0.8), darker and denser when pressed, the text stays white */
  filter: none;
}

/* Red buttons in the "Ready to Transform your Space" banner (dark photo behind) -> same red glass, with the filters fitted on the dark photo:
   the photo seen through the glass is turned light (grayscale + invert) before being turned into the same red */
#page .elementor-element-6e1837c .elementor-button,
#page .elementor-element-f6134ed .elementor-button,
#page .elementor-element-7d8ea66 .elementor-button,
#page .elementor-element-3140b9f .elementor-button {
  -webkit-backdrop-filter: blur(2px) grayscale(1) invert(1) brightness(0.18) sepia(1) saturate(20) hue-rotate(-33deg) brightness(1.35);
  backdrop-filter: blur(2px) grayscale(1) invert(1) brightness(0.18) sepia(1) saturate(20) hue-rotate(-33deg) brightness(1.35);
}

/* Home page "Devis Gratuit" buttons with an icon (hero 1206274, banner above the animated gif 6e1837c) -> text and icon visually centered:
   the text box trimmed to the capital letters (instead of the font line box, which leaves the letters ~1px high) and centered with the icon,
   on the height of the former line box (1lh) so the button keeps its size */
@supports (text-box: trim-both cap alphabetic) {
  #page .elementor-element-1206274 .elementor-button-content-wrapper,
  #page .elementor-element-6e1837c .elementor-button-content-wrapper {
    align-items: center;
    min-height: 1lh;
  }

  #page .elementor-element-1206274 .elementor-button-text,
  #page .elementor-element-6e1837c .elementor-button-text {
    text-box: trim-both cap alphabetic;
  }

  /* optical centering: the chevron circle is exactly centered on the capital letters, but "Devis Gratuit" is mostly lowercase,
     whose weight sits lower (measured on a 4x render: ink of the text centered 0.85px below the capitals) -> the text looked
     lower than the icon; the icon moved down by the same amount */
  #page .elementor-element-1206274 .elementor-button-icon svg,
  #page .elementor-element-6e1837c .elementor-button-icon svg {
    transform: translateY(0.85px);
  }
}

/* About page "Meet the Team" photos (cut-outs since, see below; formerly wp-image-313: Spurring.Scuderi_11, 1365 x 2048; wp-image-314:
   Spurring.Scuderi_06, 1536 x 2048; 774px copies) in the proportions of the original team photos (387 x 520), centered (almost all of
   them shown: 90% of their height, nearly 100% for wp-image-314), so that the three photos keep the same size */
#page img.wp-image-312,
#page img.wp-image-313,
#page img.wp-image-314 {
  aspect-ratio: 387 / 520;
  height: auto;
  object-fit: cover;
}

/* "Meet the Team" photos -> seated cut-outs on a transparent background (WebP copies of the PNGs): wp-image-312 Team-Artur-01 (788 x 1180),
   wp-image-313 Team-Ivana-01 (774 x 1123), wp-image-314 Team-Michele-01 (899 x 1130): the whole figures shown (not cropped: no cut through
   the hair or the chairs), standing on the bottom of their frames */
#page img.wp-image-312,
#page img.wp-image-313,
#page img.wp-image-314 {
  object-fit: contain;
  object-position: 50% 100%;
}

/* About page hero image (wp-image-832) -> Stand-Artur-01-Re (906 x 1178 cut-out on a transparent background, WebP copy of the PNG: 143 KB
   instead of 2.3 MB; the face on the left, clear of the "Offre Spéciale" button) in the square of the photo it replaces
   (590 x 590), so that the hero keeps its layout; the upper 75% of its height shown (centered, the top of the head was cut) */
#page img.wp-image-832 {
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  object-position: 50% 0%;
  scale: 1.1; /* 10% bigger ("scale", combined with the parallax transform of js/custom.js, layout unchanged) */
  transform-origin: left center; /* desktop: growing from its left edge, away from the texts next to it */
}

@media (max-width: 1024px) {
  #page img.wp-image-832 {
    transform-origin: right center; /* tablet: room on its left, not on its right (it would go beyond the screen) */
  }
}

@media (max-width: 767px) {
  #page img.wp-image-832 {
    transform-origin: center center; /* mobile: below the texts */
  }
}

/* mobile portrait view -> 5% bigger again (1.1 x 1.05) */
@media (max-width: 767px) and (orientation: portrait) {
  #page img.wp-image-832 {
    scale: 1.155;
  }
}

/* tablet portrait view -> mirrored horizontally (Artur facing the other way) and twice as big (1.1 x 2 = 2.2): "scale" -2.2 2.2 from its
   right center; the mirror alone would throw the picture to the right of that edge (from 1 to 3.2 times its width), so it is moved back left
   by 2.2 times its width ("translate", applied before the scale): its right edge stays where it was, it grows to the left and around its
   middle height. The parallax transform of js/custom.js is kept */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  #page img.wp-image-832 {
    scale: -2.2 2.2;
    translate: -220% 55%; /* then 20% + 5% (of its shown height, 2.2 times its box: 55% of the box) lower */
    /* the parallax shift of js/custom.js (its transform, applied inside this scale) divided by the scale, so that the picture moves as much
       as on the other pages (10% of the scroll) instead of 2.2 times more: its bottom never rises above the bottom of the hero */
    --scuderi-parallax-unscale: 2.2;
  }

  /* its lower part then reaching below the hero -> the navy "Notre Histoire" section below (d34f822) drawn in front of it, as in the mobile
     portrait view */
  body.page-id-12 #page .elementor-element.elementor-element-d34f822 {
    z-index: 2;
  }

  /* the bigger picture reaching the texts -> the hero text column drawn in front of it (the picture widget is at z-index 1) */
  body.page-id-12 #content .elementor > .e-con.e-parent:first-child > .e-con-inner > .e-con:first-child {
    position: relative;
    z-index: 2;
  }
}

/* Services page hero image (wp-image-834) -> Stand-Michele-03 (573 x 1168 cut-out on a transparent background, the drop shadow following
   its outline; formerly Spurring.Scuderi_07) in the square of the photo it
   replaces (590px wide), 25% taller than that square (4 x 5: the upper 83% of the photo shown), its top border where it was as a square;
   26% bigger (10% + 10%, then 5%: "scale", combined with the parallax transform of js/custom.js, layout unchanged), growing from its left edge so
   that it does not cover the title next to it (desktop), from its right edge on tablet (room on its left, not on its right: it would go
   beyond the screen), from its center on mobile (below the texts). The taller frame on desktop and tablet only (on mobile, the hero being
   one column, a taller photo made the whole hero content smaller, js/custom.js fitting it to the screen): vertically scaled from 40% of
   its height (half its width), the top border stays 10% of the width above the top of the box, as with the square scaled from its middle,
   and the box, vertically centered in its column, would rise by half the added height (12.5% of the width = 10% of the new height):
   moved down by as much ("translate", combined with the parallax transform) */
#page img.wp-image-834 {
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  object-position: 50% 0%;
  scale: 1.26; /* 1.2 + 5% */
  transform-origin: left center;
}

@media (min-width: 768px) {
  #page img.wp-image-834 {
    aspect-ratio: 4 / 5;
    transform-origin: left 40%;
    translate: 0 10%;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  #page img.wp-image-834 {
    transform-origin: right 40%;
  }
}

@media (max-width: 767px) {
  #page img.wp-image-834 {
    transform-origin: center center;
  }
}

/* mobile portrait view -> 5% (of its width) to the right; 10% smaller, twice (1.26 x 0.9 x 0.9 = 1.0206) while keeping its horizontal center
   and its top border in place: scaled from its top center, moved up by the 13% (of its height) the former scale from its center had lifted
   its top ((1.26 - 1) / 2) */
@media (max-width: 767px) and (orientation: portrait) {
  #page img.wp-image-834 {
    scale: 1.0206;
    transform-origin: center top;
    translate: 5% -13%;
  }
}

/* tablet portrait view -> the whole height of the photo (its own 590 x 1202 ratio instead of the 4 x 5 frame: nothing cut at the bottom),
   same width so the same size on the screen, without making the header taller: the added height (1202 / 590 - 5 / 4 = 78.73% of the width,
   the image as wide as its widget) taken back by a negative bottom margin (a % margin is a % of that width). Its top kept: the 4 x 5 frame,
   scaled 1.26 from 40% of its height (half its width) and moved down 10% of its height (12.5% of the width), had its top 0.5% of the width
   higher than its box; now scaled from its top right corner (still growing to the left) and moved up by those 0.5% of the width (0.25% of
   the new height). Its lower part goes behind the wave (z-index 2 in the hero) and the navy cards section below (24b6ae4, z-index 2) */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  #page img.wp-image-834 {
    aspect-ratio: 590 / 1202;
    margin-bottom: -78.73%;
    transform-origin: right top;
    translate: 3% -0.25%; /* then 3% (of its width) to the right */
    scale: 1.323; /* 1.26, then 5% bigger (still from its top right corner) */
  }

  body.page-id-14 #page .elementor-element.elementor-element-24b6ae4 {
    position: relative;
    z-index: 2;
  }
}

/* mobile portrait view -> the whole height of the photo (its own 590 x 1202 ratio instead of the square: nothing cut at the bottom), same width
   so the same size on the screen, its top in place (scaled from its top), without making the header taller: the added height (1202 / 590 - 1
   = 103.73% of the width, the image as wide as its widget) taken back by a negative bottom margin (a % margin is a % of that width). Its
   lower part goes behind the wave (z-index 2 in the hero, the image widget 1) and behind the navy cards section below (24b6ae4, z-index 2).
   Moved up by the same distance as the square (13% of the width = 13% x 590 / 1202 = 6.38% of the new height) */
@media (max-width: 767px) and (orientation: portrait) {
  #page img.wp-image-834 {
    aspect-ratio: 590 / 1202;
    margin-bottom: -103.73%;
    translate: 5% -6.38%;
  }
}

/* About page "Our Story" image (wp-image-285) -> Stand-Michele-01 (611 x 1138 cut-out on a transparent background, WebP copy of the PNG):
   in the width of the photo it replaces (530px), its height doubled (525px -> 1050px: almost the whole cut-out shown, a few % of its sides
   cut), from the top of the photo (the whole head shown) */
#page img.wp-image-285 {
  aspect-ratio: 530 / 1050;
  height: auto;
  object-fit: cover;
  object-position: 50% 0%;
}

/* desktop and tablet (photo next to the texts): the whole cut-out shown (its own proportions, 611 x 1138), 8.3% wider than its column
   (20% wider, then 5% and 5% narrower: 1.2 x 0.95 x 0.95), growing 4.15% on each side (room on its left and in the gap before the texts),
   moved up by 10% of its height ("translate", combined with the slide-in and the parallax of js/custom.js); the section ends above the
   bottom of the photo: the negative bottom margin lifts the "15+ Years of Experience" box under it and the end of the section, so that the
   lower part of the photo stays below the section (clipped there, see the section below), the section 10% shorter than with the photo
   at 114% (1056px -> 950px at 1440px): 72.2% of the width + 210px (box 129px tall, 41px over the photo, 120px padding of the section;
   tablet: 105px box, 80px padding -> 145px); the parallax of the photo is capped at 120px (js/custom.js), less than the hidden part
   (at least 167px at 1440px, 77px at 900px after the full parallax, measured): the bottom of the photo never shows on scroll */
@media (min-width: 768px) {
  #page img.wp-image-285 {
    width: 108.3%;
    max-width: none;
    margin-left: -4.15%;
    aspect-ratio: 611 / 1138;
    object-position: 50% 0%;
    translate: 0 -10%;
    margin-bottom: calc(-72.2% - 210px);
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  #page img.wp-image-285 {
    margin-bottom: calc(-72.2% - 145px);
  }
}

/* "Notre Histoire" section (d34f822) -> on desktop and tablet, everything below its bottom edge hidden (the lower part of the photo),
   nothing clipped on its other sides (the photo rising over the top of the section on scroll stays whole) */
@media (min-width: 768px) {
  #page .elementor-element.elementor-element-d34f822 {
    clip-path: inset(-3000px -3000px 0 -3000px);
  }
}

/* "Notre Histoire" section, mobile -> less space between the top of the section and the "// Notre Histoire" label: top padding divided by 2
   (150px -> 75px) */
@media (max-width: 767px) {
  .elementor-12 .elementor-element.elementor-element-d34f822 {
    --padding-top: 75px;
  }
}

/* About page image (wp-image-285) and "15+ Years of Experience" box, Contact page image (wp-image-161, from the right) -> same appearance as the hero images,
   Services page images (wp-image-250 to wp-image-253) -> rise in from below
   (slide in from the left, fast at the start and slowing down at the end), started when they come into view on scrolling (classes set by js/custom.js) */
#page .elementor-element.elementor-element-bb91ad8.reveal-pending,
#page .elementor-element.elementor-element-e573b43.reveal-pending,
#page .elementor-element.elementor-element-6f0a8ab.reveal-pending,
#page .elementor-element.elementor-element-63c9957.reveal-pending,
#page .elementor-element.elementor-element-6031aa8.reveal-pending,
#page .elementor-element.elementor-element-5286b17.reveal-pending,
#page .elementor-element.elementor-element-d0042eb.reveal-pending,
#page .elementor-element.elementor-element-254e9dd.reveal-pending,
#page .elementor-element.elementor-element-ee4938a.reveal-pending,
#page .elementor-element.elementor-element-1dc8100.reveal-pending,
#page .elementor-element.elementor-element-3605977.reveal-pending,
#page .elementor-element.elementor-element-a5191f7.reveal-pending,
#page .elementor-element.elementor-element-d02e764.reveal-pending,
#page .elementor-element.elementor-element-461c64a.reveal-pending,
#page .elementor-element.elementor-element-b7bfc07.reveal-pending,
#page .elementor-element.elementor-element-64c476f.reveal-pending,
#page .elementor-element.elementor-element-2a6c860.reveal-pending,
#page .elementor-element.elementor-element-90cc1be.reveal-pending {
  opacity: 0; /* invisible until it comes into view */
}

#page .elementor-element.elementor-element-bb91ad8.reveal-visible,
#page .elementor-element.elementor-element-e573b43.reveal-visible,
#page .elementor-element.elementor-element-254e9dd.reveal-visible,
#page .elementor-element.elementor-element-ee4938a.reveal-visible {
  animation: heroImageSlideIn 1.6s cubic-bezier(0.34, 1, 0.36, 1) both;
}

#page .elementor-element.elementor-element-ee4938a.reveal-visible {
  animation-delay: 0.3s; /* Home page wp-image-364 slides in slightly after wp-image-360 below it */
}

/* Home page "Nos Services" cards -> appear like the "Réalisations Récentes" project tiles (moveInBottom, see the rows block),
   each card image first and its card slightly after (0.15s, the step of the rows). The image being inside its card, the card itself
   is never hidden: its background and border are drawn by a ::before layer, which rises in with the texts of the card */
#page .elementor-element.elementor-element-520d552,
#page .elementor-element.elementor-element-c7a4126,
#page .elementor-element.elementor-element-94e8880 {
  background-color: transparent;
  border-color: transparent;
  isolation: isolate; /* keeps the ::before layer behind the content of the card */
}

#page .elementor-element.elementor-element-520d552::before,
#page .elementor-element.elementor-element-c7a4126::before,
#page .elementor-element.elementor-element-94e8880::before {
  content: "";
  display: block;
  position: absolute;
  inset: -1px; /* over the 1px border */
  z-index: -1;
  background-color: var(--e-global-color-astglobalcolor5);
  border: 1px solid var(--e-global-color-astglobalcolor6);
  border-radius: 12px;
  opacity: 1;
  mix-blend-mode: normal;
}

#page .elementor-element.elementor-element-520d552.reveal-pending::before,
#page .elementor-element.elementor-element-c7a4126.reveal-pending::before,
#page .elementor-element.elementor-element-94e8880.reveal-pending::before,
#page .elementor-element.elementor-element-520d552.reveal-pending > .elementor-element:not(.elementor-widget-image),
#page .elementor-element.elementor-element-c7a4126.reveal-pending > .elementor-element:not(.elementor-widget-image),
#page .elementor-element.elementor-element-94e8880.reveal-pending > .elementor-element:not(.elementor-widget-image) {
  opacity: 0; /* invisible until the card comes into view */
}

#page .elementor-element.elementor-element-1dc8100.reveal-visible,
#page .elementor-element.elementor-element-3605977.reveal-visible,
#page .elementor-element.elementor-element-a5191f7.reveal-visible,
#page .elementor-element.elementor-element-d02e764.reveal-visible,
#page .elementor-element.elementor-element-461c64a.reveal-visible,
#page .elementor-element.elementor-element-b7bfc07.reveal-visible,
#page .elementor-element.elementor-element-64c476f.reveal-visible,
#page .elementor-element.elementor-element-2a6c860.reveal-visible,
#page .elementor-element.elementor-element-90cc1be.reveal-visible,
#page .elementor-element.elementor-element-520d552.reveal-visible::before,
#page .elementor-element.elementor-element-c7a4126.reveal-visible::before,
#page .elementor-element.elementor-element-94e8880.reveal-visible::before,
#page .elementor-element.elementor-element-520d552.reveal-visible > .elementor-element:not(.elementor-widget-image),
#page .elementor-element.elementor-element-c7a4126.reveal-visible > .elementor-element:not(.elementor-widget-image),
#page .elementor-element.elementor-element-94e8880.reveal-visible > .elementor-element:not(.elementor-widget-image) {
  animation: moveInBottom 0.55s ease-out backwards;
}

#page .elementor-element.elementor-element-520d552.reveal-visible::before,
#page .elementor-element.elementor-element-c7a4126.reveal-visible::before,
#page .elementor-element.elementor-element-94e8880.reveal-visible::before,
#page .elementor-element.elementor-element-520d552.reveal-visible > .elementor-element:not(.elementor-widget-image),
#page .elementor-element.elementor-element-c7a4126.reveal-visible > .elementor-element:not(.elementor-widget-image),
#page .elementor-element.elementor-element-94e8880.reveal-visible > .elementor-element:not(.elementor-widget-image) {
  animation-delay: 0.15s; /* the card slightly after its image */
}

/* About page "Meet the Team" photos one after the other: wp-image-313 slightly after wp-image-312, wp-image-314 slightly after wp-image-313 */
#page .elementor-element.elementor-element-2a6c860.reveal-visible {
  animation-delay: 0.15s;
}

#page .elementor-element.elementor-element-90cc1be.reveal-visible {
  animation-delay: 0.3s;
}

/* Home page contact section image (wp-image-161) -> Group-02 (1151 x 912 cut-out of the team on a transparent background, landscape;
   formerly Spurring.Scuderi_13) in the proportions of the photo it replaces (530 x 551), so that the section keeps its layout; about 80% of
   its width shown, centered */
#page img.wp-image-161 {
  aspect-ratio: 530 / 551;
  height: auto;
  object-fit: cover;
}

/* Home page contact section -> the column of the text and the image below it (af3e663) 15% (10% + 5%) of the height of the form (748px
   desktop, 712px tablet) lower than the form and 2% of its width (554px desktop, 342px tablet) closer to it (to the left); desktop and tablet (next to the form; below it on mobile); "translate" so it adds to the animations of
   its elements */
@media (min-width: 1025px) {
  .elementor-9 .elementor-element.elementor-element-af3e663 {
    translate: -11px 112px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-9 .elementor-element.elementor-element-af3e663 {
    translate: -7px 107px;
  }
}

/* Home page contact section -> the team picture (6031aa8) at the bottom of its column, its lower edge on the bottom of the navy section:
   desktop and tablet, the column stretched to the height of the row (as tall as the form column), the picture pushed to its bottom
   (margin-top: auto), then moved down by the bottom padding of the section content (120px desktop, 80px tablet) + 80px, less the column
   offset above (112px / 107px): it reaches 80px below the section, where it is hidden (clip-path of the section below); its parallax
   (js/custom.js) is capped at 80px, so its visible lower edge always stays on the bottom of the section; mobile (no parallax): moved down
   by the bottom padding (64px), its lower edge exactly on the bottom of the section */
@media (min-width: 768px) {
  .elementor-9 .elementor-element.elementor-element-af3e663 {
    align-self: stretch;
  }

  /* the heading above it ("Nous revenons vers vous…", 6a3ddf2) pushed down with it: right above the picture, at the gap of the column,
     moved by the same offset (and parallax, capped the same way in js/custom.js) */
  #page .elementor-9 .elementor-element.elementor-element-6a3ddf2 {
    margin-top: auto;
  }

  #page .elementor-9 .elementor-element.elementor-element-6a3ddf2,
  #page .elementor-9 .elementor-element.elementor-element-6031aa8 {
    translate: 0 88px; /* 120px + 80px - 112px */
  }

  .elementor-9 .elementor-element.elementor-element-310f7aa {
    clip-path: inset(-3000px -3000px 0 -3000px); /* only below the section */
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  #page .elementor-9 .elementor-element.elementor-element-6a3ddf2,
  #page .elementor-9 .elementor-element.elementor-element-6031aa8 {
    translate: 0 53px; /* 80px + 80px - 107px */
  }
}

@media (max-width: 767px) {
  #page .elementor-9 .elementor-element.elementor-element-6a3ddf2,
  #page .elementor-9 .elementor-element.elementor-element-6031aa8 {
    translate: 0 64px;
  }
}

/* mobile portrait view -> the team picture (6031aa8, wp-image-161) over the whole width of the screen (beyond the 24px side paddings of
   the section: as wide as the screen, centered on it), closer to the heading above it: no longer moved down over the 64px bottom padding
   of the section content, that padding removed instead (its bottom still on the bottom of the section), and 24px higher (about 20px
   between the heading and the picture instead of 108px) */
@media (max-width: 767px) and (orientation: portrait) {
  #page .elementor-9 .elementor-element.elementor-element-6031aa8 {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: -24px;
    translate: none;
  }

  /* the height it had at 95% of the screen width (95vw x 551 / 530 = 98.76vw) kept over the whole width: a wider frame showing more of the
     sides of the photo (less cropped) instead of a bigger picture */
  #page .elementor-9 .elementor-element-6031aa8 img.wp-image-161 {
    aspect-ratio: 100 / 98.76;
  }

  .elementor-9 .elementor-element.elementor-element-310f7aa > .e-con-inner {
    padding-bottom: 0;
  }
}

/* mobile portrait view -> the heading ("Nous revenons vers vous sous 1 à 2 jours ouvrés") closer to the form above it: not moved down with
   the picture (64px) but 14px up (about 25px between the form and the heading instead of 103px); the picture stays on the bottom of the
   section */
@media (max-width: 767px) and (orientation: portrait) {
  #page .elementor-9 .elementor-element.elementor-element-6a3ddf2 {
    translate: 0 -14px;
  }
}

/* desktop and tablet -> 10% wider, same height (583 x 551 instead of 530 x 551: more of the width of the group shown), growing into the gap
   next to the form on desktop (100px), on both sides on tablet (40px gap only); full width already on mobile */
@media (min-width: 768px) {
  #page img.wp-image-161 {
    aspect-ratio: 583 / 551;
    width: 110%;
    max-width: none;
    margin-left: -10%;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  #page img.wp-image-161 {
    margin-left: -5%;
  }
}

/* desktop -> 10% wider again, twice (33% wider than the original, same height: 705 x 551), the added width growing to the right (45px left
   next to the form), never closer than 16px to the edge of the screen (the space on the right of the section content: its 40px padding or
   the margin around the 1200px content); tablet: no room left, it keeps the first 10% */
@media (min-width: 1025px) {
  #page img.wp-image-161 {
    aspect-ratio: 705 / 551;
    width: min(133.1%, calc(110% + max(40px, (100vw - 1200px) / 2) - 24px)); /* 16px + half of a 15px scrollbar counted in 100vw */
  }
}

/* Home page contact section team picture (wp-image-161) -> rises from the bottom of the section when it comes into view: it starts fully
   below the bottom edge of the section (hidden there by the clip-path of the section) and comes up to its place, standing on that edge
   (fast at the start, slowing down at the end, like the hero images) */
#page .elementor-element.elementor-element-6031aa8.reveal-visible {
  animation: imageRiseFromBottom 1.6s cubic-bezier(0.34, 1, 0.36, 1) both;
}

@keyframes imageRiseFromBottom {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

/* mobile too: nothing shown below the section while the picture rises (desktop and tablet: clip-path set with the picture placement) */
@media (max-width: 767px) {
  .elementor-9 .elementor-element.elementor-element-310f7aa {
    clip-path: inset(-3000px -3000px 0 -3000px);
  }
}

/* its section clips the image while it comes from beyond the right edge (no horizontal scroll, also on mobile) */
#page .elementor-element.elementor-element-310f7aa {
  overflow-x: clip;
  overflow-y: visible;
}

/* Offres page -> hero bottom wave (navy, the color of the form section below) visible: elementor puts the svg of the shape at z-index -1,
   below the background of its section unless the section forms its own stacking context, which the Offres hero did not
   (the plaster of the hero covered the wave) */
body.page-id-16 #content .elementor > .e-con.e-parent:first-child {
  isolation: isolate;
}

/* Offres page form section -> "// Profitez de l’Offre" label (copy of the hero label 0493cc0: red "//", uppercase) and heading above
   the form, in white on the navy background (the heading through the white headings of the section); the label 12px above the heading
   (40px gap of the section - the -28px margin of the label), like the hero label above its title; the heading 40px above the form */
#page .scuderi-form-label .uael-dual-heading-text.uael-third-text {
  color: #ffffff;
}

#page .scuderi-form-heading {
  text-align: left;
}

/* Offres page form, desktop view -> fields two by two: "Nom" and "E-mail" on the first row, "Téléphone" and "Offre souhaitée" on the
   second one, "Information(s) Complémentaire(s)" over the full width (the hidden anti-spam field 5 is absolutely positioned: not in the grid) */
@media (min-width: 1025px) {
  body.page-id-16 #formulaire-offre .wpforms-field-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
  }

  body.page-id-16 #formulaire-offre .wpforms-field-textarea {
    grid-column: 1 / -1;
  }
}

/* Offres page form section -> the column with the heading (af3e663, its image removed) below the form (6e36b26) instead of next to it,
   on all screen widths (elementor stacks them only on mobile), with the 40px gap of the mobile layout */
body.page-id-16 #page .elementor-element.elementor-element-310f7aa {
  --flex-direction: column;
  --row-gap: 40px;
}

@keyframes heroImageSlideInRight {
  from {
    transform: translateX(calc(100vw + 100%)); /* fully outside the right edge of the screen */
  }
  to {
    transform: translateX(0);
  }
}

/* Services page card images (wp-image-250: Services-peinture-02-1000x2141.jpeg, a 1000px copy of Services-peinture-02..jpeg, 1868 x 4000;
   wp-image-251: Services-facade-02.jpeg, 1200 x 1600, an ASCII-named copy of
   Services-façade-02.jpeg, whose accent is stored decomposed by macOS and would not match the url on a web server;
   wp-image-252: Services-platrerie-02.jpg, 1920 x 1080; wp-image-253: Services-renovation-03.jpeg, 4000 x 1800, a 1600px copy) in the proportions of the original card images (490 x 340), cropped around their center, so that the four cards keep the same
   image height */
#page img.wp-image-250,
#page img.wp-image-251,
#page img.wp-image-252,
#page img.wp-image-253 {
  aspect-ratio: 490 / 340;
  height: auto;
  object-fit: cover;
}

/* Services page images (wp-image-250, then wp-image-251; wp-image-252, then wp-image-253) -> rise in from below once in view
   (fast at the start, slowing down at the end) */
#page .elementor-element.elementor-element-6f0a8ab.reveal-visible,
#page .elementor-element.elementor-element-63c9957.reveal-visible,
#page .elementor-element.elementor-element-5286b17.reveal-visible,
#page .elementor-element.elementor-element-d0042eb.reveal-visible {
  animation: imageRiseIn 1.2s cubic-bezier(0.34, 1, 0.36, 1) both;
}

#page .elementor-element.elementor-element-63c9957.reveal-visible,
#page .elementor-element.elementor-element-d0042eb.reveal-visible {
  animation-delay: 0.3s; /* wp-image-251 / wp-image-253 appear after wp-image-250 / wp-image-252 */
}

@keyframes imageRiseIn {
  from {
    opacity: 0;
    transform: translateY(80px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* About page "Our Story" text column (3071cc9): back at its place (formerly moved up by 20% of its height, then down by as much) */

/* About page "Our Story" text column -> its elements rise in one after the other like the hero texts (moveInBottom 0.55s ease-out),
   from 0.85s after the image next to it starts sliding in (classes set by js/custom.js) */
#page .elementor-element-3071cc9.reveal-pending > .elementor-element {
  opacity: 0; /* invisible until the group comes into view */
}

#page .elementor-element-3071cc9.reveal-visible > .elementor-element {
  animation-name: moveInBottom;
  animation-duration: 0.55s;
  animation-timing-function: ease-out;
  animation-fill-mode: backwards; /* invisible before its animation starts */
}

#page .elementor-element-3071cc9.reveal-visible > .elementor-element:nth-child(1) {
  animation-delay: 0.85s;
}

#page .elementor-element-3071cc9.reveal-visible > .elementor-element:nth-child(2) {
  animation-delay: 1.00s;
}

#page .elementor-element-3071cc9.reveal-visible > .elementor-element:nth-child(3) {
  animation-delay: 1.15s;
}

#page .elementor-element-3071cc9.reveal-visible > .elementor-element:nth-child(4) {
  animation-delay: 1.30s;
}

#page .elementor-element-3071cc9.reveal-visible > .elementor-element:nth-child(5) {
  animation-delay: 1.45s;
}

#page .elementor-element-3071cc9.reveal-visible > .elementor-element:nth-child(6) {
  animation-delay: 1.60s;
}

/* scroll parallax set by js/custom.js */
#page .elementor-element-bb91ad8 > .elementor-widget-container,
#page .elementor-element-e573b43 > .elementor-widget-container,
#page .elementor-element-6f0a8ab > .elementor-widget-container,
#page .elementor-element-63c9957 > .elementor-widget-container,
#page .elementor-element-6031aa8 > .elementor-widget-container,
#page .elementor-element-938763f > .elementor-widget-container,
#page .elementor-element-c7c0e28 > .elementor-widget-container,
#page .elementor-element-bc884a0 > .elementor-widget-container,
#page .elementor-element-70ad58d > .elementor-widget-container,
#page .elementor-element-5af7409 > .elementor-widget-container,
#page .elementor-element-7df760a > .elementor-widget-container,
#page .elementor-element-5286b17 > .elementor-widget-container,
#page .elementor-element-ef87275 > .elementor-widget-container,
#page .elementor-element-f338e26 > .elementor-widget-container,
#page .elementor-element-9b84f10 > .elementor-widget-container,
#page .elementor-element-d0042eb > .elementor-widget-container,
#page .elementor-element-55b16c0 > .elementor-widget-container,
#page .elementor-element-83eaa20 > .elementor-widget-container,
#page .elementor-element-4785412 > .elementor-widget-container,
.home .elementor-element-6a3ddf2 > .elementor-widget-container,
#page .elementor-element-254e9dd > .elementor-widget-container,
#page .elementor-element-ee4938a > .elementor-widget-container,
#page .elementor-element-1dc8100 > .elementor-widget-container,
#page .elementor-element-3605977 > .elementor-widget-container,
#page .elementor-element-a5191f7 > .elementor-widget-container,
#page .elementor-element-5a03e5c > .elementor-widget-container,
#page .elementor-element-64c476f > .elementor-widget-container,
#page .elementor-element-2a6c860 > .elementor-widget-container,
#page .elementor-element-90cc1be > .elementor-widget-container {
  will-change: transform;
  transition: none; /* elementor transitions the transform of widget containers, the parallax follows the scroll directly like the hero image */
}

/* Home & Contact "Coordonnées" boxes -> white like the other cards (transparent in elementor, on a white section), so that their
   drop shadow (below) is the one of the box and not of its texts and icons */
#page .elementor-element.elementor-element-019a505,
#page .elementor-element.elementor-element-1e9b33e,
#page .elementor-element.elementor-element-4447901 {
  background-color: #fff;
}

/* Home page "Réalisations Récentes" -> first project tile (e2ca410): kitchen photo before the works (projet-kitchen-before, 4000 x 1868,
   a 2000px copy) instead of the demo photo (projects-01.jpg, elementor background), same cover & center */
#page .elementor-element.elementor-element-e2ca410 {
  background-image: url("../wp-content/uploads/sites/1522/2025/03/projet-kitchen-before-2000x934.jpeg");
}

/* Home page "Réalisations Récentes" -> second project tile (a68b501): animated before / after picture of a façade (420 x 560 gif) instead of
   the demo photo (projects-02.jpg, elementor background), same cover & center */
#page .elementor-element.elementor-element-a68b501 {
  background-image: url("../wp-content/uploads/sites/1522/2025/03/facade-avant-apres.gif");
}

/* Home page "Réalisations Récentes" -> third project tile (96940e6): vertical before / after slider of a staircase (scuderi-compare,
   js/custom.js) instead of the demo photo (elementor background): the "after" photo fills the tile, the "before" photo over it is cut at
   the horizontal line (--compare-pos from the top), "Avant" above the line, "Après" below it; the line is moved up and down by dragging it
   (mouse: anywhere on the photos; touch: the round handle, so that swiping over the photos still scrolls the page), tapping / clicking
   the photos, or the keyboard (arrow keys on the handle, a focusable slider) */
#page .elementor-element.elementor-element-96940e6 {
  background-image: none;
  position: relative;
}

.scuderi-compare {
  position: absolute;
  inset: 0;
  border-radius: inherit; /* rounded corners of the tile */
  overflow: hidden;
  cursor: ns-resize;
  user-select: none;
  -webkit-user-select: none;
}

/* #page: above elementor's ".elementor img { height: auto }", which made the photos taller than the tile, so that the cut of the "before"
   photo (a % of its own height) was below the line (a % of the tile height) */
#page .scuderi-compare .scuderi-compare__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover; /* same crop for both photos (same size), so that they line up */
  pointer-events: none; /* no native image drag */
}

#page .scuderi-compare .scuderi-compare__before {
  clip-path: inset(0 0 calc(100% - var(--compare-pos, 50%)) 0); /* only above the line */
}

/* phones: the project tiles one below the other, wide and only 240px tall -> the portrait pictures taller, so that they show properly:
   the façade gif tile (a68b501) in the gif proportions (420 x 560: the whole gif), the staircase slider tile (96940e6) 2 x 3 (70% of
   the height of the photos, as much as on desktop) */
@media (max-width: 767px) {
  #page .elementor-element.elementor-element-a68b501 {
    aspect-ratio: 420 / 560;
    height: auto;
  }

  #page .elementor-element.elementor-element-96940e6 {
    aspect-ratio: 2 / 3;
    height: auto;
  }
}

.scuderi-compare__label {
  position: absolute;
  left: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background-color: rgba(0, 32, 91, 0.75); /* theme navy (#00205b) */
  color: #ffffff;
  font-family: "Encode Sans", sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  pointer-events: none;
}

.scuderi-compare__label--before {
  top: 12px;
}

.scuderi-compare__label--after {
  bottom: 12px;
}

/* the line, its hit area 44px tall (finger size), and the round handle with its up / down arrows in its middle */
.scuderi-compare__handle {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--compare-pos, 50%);
  height: 44px;
  margin-top: -22px;
  touch-action: none; /* dragging the handle does not scroll the page */
  outline: none;
}

.scuderi-compare__handle::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
  background-color: #ffffff;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.45);
}

.scuderi-compare__knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  background: #ffffff url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%2300205b'%20d='M12%203l5%206H7zM12%2021l-5-6h10z'/%3E%3C/svg%3E") no-repeat center / 22px 22px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s;
}

.scuderi-compare__handle:hover .scuderi-compare__knob,
.scuderi-compare.is-dragging .scuderi-compare__knob {
  transform: scale(1.1);
}

.scuderi-compare__handle:focus-visible .scuderi-compare__knob {
  box-shadow: 0 0 0 3px #e7194f, 0 2px 8px rgba(0, 0, 0, 0.35); /* keyboard focus in the theme red */
}

/* Home page "Réalisations Récentes" -> kitchen photo (projet-kitchen, 4000 x 1868) in place of wp-image-419: kept in the proportions of the
   photo it replaces (488 x 320), cropped around its center, so that the row keeps the same height as before */
#page .elementor-element-e9b2a93 img.scuderi-project-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 488 / 320;
  object-fit: cover;
}

/* horizontal before / after slider (Home page "Réalisations Récentes" bathroom photo, in place of wp-image-418 in the 3616ccf image widget)
   -> the "before" photo on the left of the vertical line (--compare-pos from the left), the "after" photo on its right; in an image widget
   (not a sized tile): the box takes the proportions of the photo it replaces (692 x 320), its rounded corners and its drop shadow
   (the shadow of the photos of the widget set on the box, see the shadows below) */
.scuderi-compare.scuderi-compare--horizontal {
  position: relative;
  inset: auto;
  width: 100%;
  aspect-ratio: 692 / 320;
  border-radius: 12px;
  cursor: ew-resize;
  filter: drop-shadow(16px 20px 22px rgba(0, 0, 0, 0.38));
}

#page .elementor-element-3616ccf .scuderi-compare__img {
  filter: none; /* the shadow is on the box */
}

#page .scuderi-compare--horizontal .scuderi-compare__before {
  clip-path: inset(0 calc(100% - var(--compare-pos, 50%)) 0 0); /* only on the left of the line */
}

.scuderi-compare--horizontal .scuderi-compare__label--after {
  top: 12px;
  bottom: auto;
  left: auto;
  right: 12px;
}

/* the vertical line, its hit area 44px wide, the handle with left / right arrows */
.scuderi-compare--horizontal .scuderi-compare__handle {
  top: 0;
  bottom: 0;
  left: var(--compare-pos, 50%);
  right: auto;
  width: 44px;
  height: auto;
  margin: 0 0 0 -22px;
}

.scuderi-compare--horizontal .scuderi-compare__handle::before {
  top: 0;
  bottom: 0;
  left: 50%;
  right: auto;
  width: 3px;
  height: auto;
  margin: 0 0 0 -1.5px;
}

.scuderi-compare--horizontal .scuderi-compare__knob {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%2300205b'%20d='M3%2012l6-5v10zM21%2012l-6%205V7z'/%3E%3C/svg%3E");
}

/* same drop shadow as the hero image (Home page "Réalisations Récentes": the 3 project tiles e2ca410, a68b501, 96940e6, wp-image-418 and wp-image-419,
   "Témoignages": the 3 testimonial cards 2e7f483, 3b0e20e, 120a465, Home & Contact "Coordonnées" boxes 019a505, 1e9b33e, 4447901,
   About page process cards d02e764 (card of af2785a), 461c64a, b7bfc07, "Meet the Team" photos (wp-image-312, 313, 314 in 4319833)
   and their name boxes 0b73048, 79e2dd3, 339ef9c, like wp-image-372) */
#page .elementor-element-bb91ad8 img,
#page .elementor-element-6f0a8ab img,
#page .elementor-element-63c9957 img,
#page .elementor-element-5286b17 img,
#page .elementor-element-d0042eb img,
#page .elementor-element-6031aa8 img,
#page .elementor-element-254e9dd img,
#page .elementor-element-ee4938a img,
#page .elementor-element-d45ba6c img.wp-image-372,
#page .elementor-element-d45ba6c img.wp-image-373,
#page .elementor-element-d45ba6c img.wp-image-374,
#page .elementor-element.elementor-element-520d552,
#page .elementor-element.elementor-element-c7a4126,
#page .elementor-element.elementor-element-94e8880,
#page .elementor-element.elementor-element-e2ca410,
#page .elementor-element.elementor-element-a68b501,
#page .elementor-element.elementor-element-96940e6,
#page .elementor-element-3616ccf img,
#page .elementor-element-e9b2a93 img,
#page .elementor-element.elementor-element-2e7f483,
#page .elementor-element.elementor-element-3b0e20e,
#page .elementor-element.elementor-element-120a465,
#page .elementor-element.elementor-element-019a505,
#page .elementor-element.elementor-element-1e9b33e,
#page .elementor-element.elementor-element-4447901,
#page .elementor-element.elementor-element-d02e764,
#page .elementor-element.elementor-element-461c64a,
#page .elementor-element.elementor-element-b7bfc07,
#page .elementor-element-64c476f img,
#page .elementor-element-2a6c860 img,
#page .elementor-element-90cc1be img,
#page .elementor-element.elementor-element-0b73048,
#page .elementor-element.elementor-element-79e2dd3,
#page .elementor-element.elementor-element-339ef9c,
#page .elementor-element-e573b43 > .elementor-widget-container {
  filter: drop-shadow(16px 20px 22px rgba(0, 0, 0, 0.38));
}

/* Home page "Nos Services" "Plâtrerie" and "Rénovation" card images (wp-image-373: Services-platrerie.jpg, 1200 x 742; wp-image-374:
   Services-renovation.jpg, 500 x 500, an ASCII-named copy of Services-Rénovation.jpg, whose accent is stored decomposed by macOS and would not
   match the url on a web server) in the proportions of the original card images (459 x 339), cropped around their center, so that the
   three cards keep the same image height */
#page .elementor-element-d45ba6c img.wp-image-373,
#page .elementor-element-d45ba6c img.wp-image-374 {
  aspect-ratio: 459 / 339;
  height: auto;
  object-fit: cover;
}

/* Home page "Nos Services" card images (wp-image-372, 373, 374) -> 5% (of their height) higher over the top of their card
   ("translate" so it adds to the parallax transform of the widget container) */
#page .elementor-element-d45ba6c img.wp-image-372,
#page .elementor-element-d45ba6c img.wp-image-373,
#page .elementor-element-d45ba6c img.wp-image-374 {
  translate: 0 -5%;
}

/* Home page "Qui sommes-nous" front photo (wp-image-364) -> 25% (5% + 10% + 10%, of its height) lower over the back photo (wp-image-360,
   which does not move): "translate" on the image itself, so that it adds to the slide-in and parallax transforms of its widget */
#page .elementor-element.elementor-element-ee4938a img.wp-image-364 {
  translate: 0 25%;
}

/* Home page wp-image-364 -> no white border around the image (12px from elementor), its rounded corners kept */
#page .elementor-element.elementor-element-ee4938a img {
  border: none;
}

/* the "15+ Years of Experience" box (About page) and the wp-image-364 image (Home page) stay superposed above the image below them */
#page .elementor-element.elementor-element-e573b43,
#page .elementor-element.elementor-element-ee4938a {
  z-index: 2;
}

/* About page, tablet portrait view -> the "15+ Années d’expérience" box (e573b43) 10% (of its height) lower ("translate": its slide-in
   and parallax kept) */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  #page .elementor-element.elementor-element-e573b43 {
    translate: 0 10%;
  }
}

/* Home page "About Us" images column (wp-image-360 and wp-image-364) -> moved down by 20% of its height (10% + 10%), with both images;
   a transform of the column itself, so that it adds to the slide-in and parallax transforms of the images without changing the layout */
#page .elementor-element.elementor-element-252c5ae {
  transform: translateY(20%);
}

/* Services page, second card of the second row (wp-image-253, its heading, text and button) -> moved down by 5% of its height (10% - 5%);
   a transform of the card itself, like the Home "About Us" images column above (layout unchanged, animations of its content kept) */
#page .elementor-element.elementor-element-837b3a2 {
  transform: translateY(5%);
}

/* About, Services & Contact heroes -> same behaviour as the home page hero, 110vh tall:
   content scaling with the viewport (js/custom.js), image sliding in from the left with parallax (js/custom.js) and shadow,
   text elements rising in one after the other after the middle of the image animation, moving bottom wave (js/custom.js) */
body:not(.home) #content .elementor > .e-con.e-parent:first-child {
  height: 110vh;
  height: 110dvh;
  justify-content: center; /* content vertically centered */
  overflow-x: clip;
  overflow-y: visible;
}

/* About and Services pages -> hero 75vh tall (content scaled to fit by js/custom.js) */
body.page-id-12 #content .elementor > .e-con.e-parent:first-child,
body.page-id-14 #content .elementor > .e-con.e-parent:first-child {
  height: 75vh;
  height: 75dvh;
}

/* About page, tablet portrait view -> the hero 10% lower, twice (75vh -> 67.5vh -> 60.75vh); its texts column (1332eee) at its place
   (moved 10% up, 10% down, 10% down, then 10% up) */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  body.page-id-12 #content .elementor > .e-con.e-parent:first-child {
    height: 60.75vh;
    height: 60.75dvh;
  }
}

/* About and Services pages, mobile portrait view -> the whole top area (mobile header bar 79px, 70px under 545px + hero) equal to 95vh,
   like the Home page */
@media (max-width: 767px) and (orientation: portrait) {
  body.page-id-12 #content .elementor > .e-con.e-parent:first-child,
  body.page-id-14 #content .elementor > .e-con.e-parent:first-child {
    height: calc(95vh - 79px);
    height: calc(95dvh - 79px);
  }
}

@media (max-width: 544px) and (orientation: portrait) {
  body.page-id-12 #content .elementor > .e-con.e-parent:first-child,
  body.page-id-14 #content .elementor > .e-con.e-parent:first-child {
    height: calc(95vh - 70px);
    height: calc(95dvh - 70px);
  }
}

/* Services page, mobile portrait view -> its top area 97vh (instead of 95vh) */
@media (max-width: 767px) and (orientation: portrait) {
  body.page-id-14 #content .elementor > .e-con.e-parent:first-child {
    height: calc(97vh - 79px);
    height: calc(97dvh - 79px);
  }
}

@media (max-width: 544px) and (orientation: portrait) {
  body.page-id-14 #content .elementor > .e-con.e-parent:first-child {
    height: calc(97vh - 70px);
    height: calc(97dvh - 70px);
  }
}

/* Services page hero title, desktop view -> "Peinture, Façade, Plâtrerie et Rénovation :" on 2 lines ("Peinture, Façade," /
   "Plâtrerie et Rénovation :"), then "Une Offre Complète", same font and size: the text box set to 620px (in the scaled units of
   the hero content), between the width of "Plâtrerie et Rénovation :" (601px, Encode Sans bold 52px) and the one of "Peinture, Façade, Plâtrerie"
   (654px), wider than its column (570px): it reaches slightly to the right of it; without elementor's 80px right padding */
@media (min-width: 1025px) {
  /* #content: above elementor's ".elementor.elementor .e-con > .elementor-widget { max-width: 100% }" */
  body.page-id-14 #content .elementor-element.elementor-element-3fc490b {
    width: 620px;
    max-width: none;
  }

  body.page-id-14 #content .elementor-element.elementor-element-3fc490b > .elementor-widget-container {
    padding-right: 0;
  }
}

body:not(.home) #content .elementor > .e-con.e-parent:first-child > .e-con-inner {
  zoom: var(--hero-scale, 1);
  align-items: center; /* columns vertically centered in the hero */
  align-content: center;
  transform: translateY(-20%); /* content moved up by 20% (2 x 10%) */
}

/* phones held sideways (short landscape screens), Home page -> the hero grows with its content instead of shrinking it to the screen height
   (js/custom.js: scaled with the width only, as on the Services page: the same sizes of the texts and buttons) */
@media (orientation: landscape) and (max-height: 500px) {
  body.home #page #content .elementor > .e-con.e-parent:first-child {
    height: auto;
    min-height: 90vh; /* 10% lower than the screen (it was as tall as the screen) */
  }
}

/* same, the hero 10% lower: from 768px wide (texts next to the pictures, the texts column making the height), less empty space below the
   texts (bottom padding of the texts column 120px -> 73px: 390px -> 351px at 844 x 390); narrower (pictures below the texts), the pictures
   87px further under the bottom wave (905px -> 818px at 740 x 360) */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 768px) {
  #page .elementor-9 .elementor-element.elementor-element-f308bff {
    padding-bottom: 73px;
  }
}

@media (orientation: landscape) and (max-height: 500px) and (max-width: 767px) {
  #page .elementor-9 .elementor-element.elementor-element-11546b8 {
    margin-bottom: -87px;
  }
}

/* same, the hero pictures (from 768px wide, next to the texts): the hero content being much larger than when it was shrunk to the screen
   height, without the 1.485 enlargement of the landscape view (made for that small content) and within the right half of the hero, clear
   of the texts */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 768px) {
  #page .elementor.elementor-9 .e-con > .elementor-element.elementor-element-aa662c8 {
    scale: 1;
    max-width: 50%;
  }
}

/* phones held sideways (short landscape screens), Services page -> the hero grows with its content instead of shrinking it to the screen
   height (js/custom.js: scaled with the width only: readable texts and buttons, the sizes of the About page hero at the same width), below
   the fixed header buttons and above the bottom wave; no upward shift (the About page keeps its 70vh hero, its content fitted in it) */
@media (orientation: landscape) and (max-height: 500px) {
  body.page-id-14 #page #content .elementor > .e-con.e-parent:first-child {
    height: auto;
    min-height: 100vh;
    padding-top: 0; /* the texts starting at the same height as in the About page hero */
    padding-bottom: 90px;
  }

  body.page-id-14 #page #content .elementor > .e-con.e-parent:first-child > .e-con-inner {
    transform: none;
    padding-top: 0; /* 80px of elementor */
    align-items: flex-start; /* the texts at the top of the hero, not centered on the (taller) image column */
  }
}

/* same, Services page hero on the narrower phones (photo below the texts; from 768px wide, its height is set by the min-height rules of the
   landscape header further down) -> 10% lower, twice (1043px -> 939px -> about 845px at 740 x 360): no bottom padding and the photo
   column further under the bottom wave */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 767px) {
  body.page-id-14 #page #content .elementor > .e-con.e-parent:first-child {
    padding-bottom: 0;
  }

  body.page-id-14 #page .elementor-element.elementor-element-11ce73c {
    margin-bottom: -108px;
  }
}

/* same, Services page heading "Une Offre Complète" (3fc490b) -> on one line (it wrapped before "Complète" from 768px wide) */
@media (orientation: landscape) and (max-height: 500px) {
  .elementor-14 .elementor-element-3fc490b .elementor-heading-title {
    white-space: nowrap;
  }
}

/* same, wider phones (tablet layout from 768px): the texts column slightly higher, at the height of the About page texts */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 768px) {
  body.page-id-14 #page .elementor-element.elementor-element-578d8e2 {
    margin-top: -17px;
  }
}

/* small screens (text above the image): no upward shift, it would push the first lines under the header and off the screen */
@media (max-width: 767px) {
  body:not(.home) #content .elementor > .e-con.e-parent:first-child > .e-con-inner {
    transform: none;
  }
}

/* a bottom wave placed inside the moved content is attached to the hero by js/custom.js (full width, at the bottom of the hero) */

/* the bottom wave keeps its real size, only the content is scaled */
body:not(.home) #content .elementor > .e-con.e-parent:first-child > .e-con-inner > .elementor-shape {
  zoom: var(--hero-unscale, 1);
}

/* the white top shape of the section after the hero was made for the former white hero: the hero bottom wave replaces it */
body:not(.home) #content .elementor > .e-con.e-parent:first-child + .e-con > .elementor-shape-top,
body:not(.home) #content .elementor > .e-con.e-parent:first-child + .e-con > .e-con-inner > .elementor-shape-top {
  display: none;
}

/* wave added by js/custom.js on the pages without one (same heights as the home page wave) */
.elementor-shape.scuderi-added-wave {
  z-index: 2;
  pointer-events: none;
}

.elementor-shape.scuderi-added-wave svg {
  height: 55px;
}

@media (max-width: 1024px) {
  .elementor-shape.scuderi-added-wave svg {
    height: 42px;
  }
}

@media (max-width: 767px) {
  .elementor-shape.scuderi-added-wave svg {
    height: 30px;
  }
}

body:not(.home) #content .elementor > .e-con.e-parent:first-child .elementor-widget-image {
  animation: heroImageSlideIn 1.6s cubic-bezier(0.34, 1, 0.36, 1) both;
}

body:not(.home) #content .elementor > .e-con.e-parent:first-child .elementor-widget-image img {
  filter: drop-shadow(16px 20px 22px rgba(0, 0, 0, 0.38));
  will-change: transform; /* scroll parallax set by js/custom.js */
}

body:not(.home) #content .elementor > .e-con.e-parent:first-child > .e-con-inner > .e-con:first-child > .elementor-element,
body:not(.home) #content .elementor > .e-con.e-parent:first-child > .e-con-inner > .elementor-shape + .e-con > .elementor-element {
  animation-name: moveInBottom;
  animation-duration: 0.55s;
  animation-timing-function: ease-out;
  animation-fill-mode: backwards; /* invisible before its animation starts */
}

body:not(.home) #content .elementor > .e-con.e-parent:first-child > .e-con-inner > .e-con:first-child > .elementor-element:nth-child(1),
body:not(.home) #content .elementor > .e-con.e-parent:first-child > .e-con-inner > .elementor-shape + .e-con > .elementor-element:nth-child(1) {
  animation-delay: 0.85s;
}

body:not(.home) #content .elementor > .e-con.e-parent:first-child > .e-con-inner > .e-con:first-child > .elementor-element:nth-child(2),
body:not(.home) #content .elementor > .e-con.e-parent:first-child > .e-con-inner > .elementor-shape + .e-con > .elementor-element:nth-child(2) {
  animation-delay: 1.00s;
}

body:not(.home) #content .elementor > .e-con.e-parent:first-child > .e-con-inner > .e-con:first-child > .elementor-element:nth-child(3),
body:not(.home) #content .elementor > .e-con.e-parent:first-child > .e-con-inner > .elementor-shape + .e-con > .elementor-element:nth-child(3) {
  animation-delay: 1.15s;
}

body:not(.home) #content .elementor > .e-con.e-parent:first-child > .e-con-inner > .e-con:first-child > .elementor-element:nth-child(4),
body:not(.home) #content .elementor > .e-con.e-parent:first-child > .e-con-inner > .elementor-shape + .e-con > .elementor-element:nth-child(4) {
  animation-delay: 1.30s;
}

body:not(.home) #content .elementor > .e-con.e-parent:first-child > .e-con-inner > .e-con:first-child > .elementor-element:nth-child(5),
body:not(.home) #content .elementor > .e-con.e-parent:first-child > .e-con-inner > .elementor-shape + .e-con > .elementor-element:nth-child(5) {
  animation-delay: 1.45s;
}

body:not(.home) #content .elementor > .e-con.e-parent:first-child > .e-con-inner > .e-con:first-child > .elementor-element:nth-child(6),
body:not(.home) #content .elementor > .e-con.e-parent:first-child > .e-con-inner > .elementor-shape + .e-con > .elementor-element:nth-child(6) {
  animation-delay: 1.60s;
}

@media (prefers-reduced-motion: reduce) {
  body:not(.home) #content .elementor > .e-con.e-parent:first-child .elementor-widget-image,
  body:not(.home) #content .elementor > .e-con.e-parent:first-child > .e-con-inner > .e-con:first-child > .elementor-element,
body:not(.home) #content .elementor > .e-con.e-parent:first-child > .e-con-inner > .elementor-shape + .e-con > .elementor-element {
    animation: none;
  }
}

/* About, Services & Contact sections below the hero -> sub-elements rising in one after the other like the hero texts
   when the section comes into view (classes and delays set by js/custom.js) */
#page .elementor-element.stagger-pending {
  opacity: 0; /* invisible until the section comes into view */
}

#page .elementor-element.stagger-visible {
  animation-name: moveInBottom;
  animation-duration: 0.55s;
  animation-timing-function: ease-out;
  animation-fill-mode: backwards; /* invisible before its animation starts */
}

/* Single elements rising in from below when they come into view (classes set by js/custom.js), e.g. Home "Why Choose Us" heading */
#page .elementor-element.rise-pending {
  opacity: 0; /* invisible until it comes into view */
}

#page .elementor-element.rise-visible {
  animation: moveInBottom 0.55s ease-out both;
}

/* "Ready to Transform your Space" banners -> animated GIF of the painter (wp-content/uploads/sites/1522/2025/03/peintre-boucle.gif) instead of the footer-bg.jpg photo,
   below the dark overlay of the banner; loaded like the photo, once the banner gets near the screen (elementor e-lazyloaded class) */
#page .elementor-element.elementor-element-6f2cd9c.e-lazyloaded,
#page .elementor-element.elementor-element-7e3ea76.e-lazyloaded,
#page .elementor-element.elementor-element-2e65852.e-lazyloaded,
#page .elementor-element.elementor-element-da38838.e-lazyloaded {
  background-image: url(../wp-content/uploads/sites/1522/2025/03/peintre-boucle.gif);
  background-size: cover;
  background-position: 50% 50%;
}

/* About page "Meet the BrushWorks Team" section -> same flat light grey background as the "Our Story" section (d34f822) */
#page .elementor-element.elementor-element-02d12be {
  background-color: var(--ast-global-color-4); /* #f1f6fa */
  background-image: none;
}

/* About page "Our Simplified Painting Process" section on the plaster background -> its white texts in the dark navy of the other headings */
#page .elementor-element-058315a .uael-after-heading,
#page .elementor-element-058315a .uael-after-heading .uael-dual-heading-text,
#page .elementor-element-058315a h2.elementor-heading-title {
  color: var(--ast-global-color-2);
}

/* Contact page form section (310f7aa) -> theme navy background (#00205b) and its heading in white (the form keeps its white card) */
#page .elementor-element.elementor-element-310f7aa {
  background-color: var(--ast-global-color-2); /* #00205b */
}

#page .elementor-element-310f7aa .elementor-heading-title.elementor-size-default {
  color: #ffffff;
}

/* Services page cards section (24b6ae4) -> theme navy background (#00205b), the white cards keep their texts */
#page .elementor-element.elementor-element-24b6ae4 {
  background-color: var(--ast-global-color-2); /* #00205b */
}

/* About page "Our Story" section (d34f822) -> theme navy background (#00205b), its texts in white except the red "//"
   (the checkmarks of the list in white too so that they stay visible; the "15+" box keeps its own colors) */
#page .elementor-element.elementor-element-d34f822 {
  background-color: var(--ast-global-color-2); /* #00205b */
}

#page .elementor-element-3071cc9 .uael-after-heading,
#page .elementor-element-3071cc9 .uael-after-heading .uael-dual-heading-text,
#page .elementor-element-3071cc9 .elementor-heading-title,
#page .elementor-element-3071cc9 .elementor-widget-text-editor,
#page .elementor-element-3071cc9 .elementor-widget-text-editor *,
#page .elementor-element-3071cc9 .elementor-icon-list-text {
  color: #ffffff;
}

#page .elementor-element-3071cc9 .elementor-icon-list-icon svg {
  fill: #ffffff;
}

#page .elementor-element-3071cc9 .elementor-icon-list-icon i {
  color: #ffffff;
}

/* About page "15+ Years of Experience" box -> light grey background of the "Our Story" section (d34f822) and texts in the theme navy;
   its icon in navy too (on a light navy circle) so that it stays visible on the light background */
#page .elementor-element-e573b43 > .elementor-widget-container {
  background-color: var(--ast-global-color-4); /* #f1f6fa */
}

#page .elementor-element-e573b43 .elementor-icon-box-content .elementor-icon-box-title,
#page .elementor-element-e573b43 .elementor-icon-box-content .elementor-icon-box-title *,
#page .elementor-element-e573b43 .elementor-icon-box-content .elementor-icon-box-description {
  color: var(--ast-global-color-2); /* #00205b */
}

#page .elementor-element-e573b43 .elementor-icon {
  color: var(--ast-global-color-2);
  fill: var(--ast-global-color-2);
  background-color: rgba(0, 32, 91, 0.1);
}

#page .elementor-element-e573b43 .elementor-icon svg {
  fill: var(--ast-global-color-2);
}

/* About page "Une démarche simple, de l’idée à la réalisation" heading (14d198e) -> left and right padding reduced by 10% (30% -> 27%),
   desktop and tablet (no padding on mobile) */
@media (min-width: 768px) {
  #page .elementor-element.elementor-element-14d198e > .elementor-widget-container {
    padding-left: 27%;
    padding-right: 27%;
  }
}

/* Services page cards -> their white background and border drawn by a ::before layer, so that it moves on scroll with the texts of the
   card (--bg-shift, set by the parallax of js/custom.js) and rises in with its heading (same delay, --bg-delay) instead of staying still */
#page .elementor-element.elementor-element-c02d05f,
#page .elementor-element.elementor-element-7a275e9,
#page .elementor-element.elementor-element-d092ab2,
#page .elementor-element.elementor-element-837b3a2 {
  background-color: transparent;
  border-color: transparent;
  isolation: isolate; /* keeps the ::before layer behind the content of the card */
}

#page .elementor-element.elementor-element-c02d05f::before,
#page .elementor-element.elementor-element-7a275e9::before,
#page .elementor-element.elementor-element-d092ab2::before,
#page .elementor-element.elementor-element-837b3a2::before {
  content: "";
  display: block;
  position: absolute;
  inset: -1px; /* over the 1px border */
  z-index: -1;
  background-color: #fff;
  border: 1px solid #d1d1d1;
  border-radius: 12px;
  opacity: 1;
  mix-blend-mode: normal;
  translate: 0 var(--bg-shift, 0px);
}

#page .elementor-element.elementor-element-c02d05f:has(> .elementor-widget-heading.stagger-pending)::before,
#page .elementor-element.elementor-element-7a275e9:has(> .elementor-widget-heading.stagger-pending)::before,
#page .elementor-element.elementor-element-d092ab2:has(> .elementor-widget-heading.stagger-pending)::before,
#page .elementor-element.elementor-element-837b3a2:has(> .elementor-widget-heading.stagger-pending)::before {
  opacity: 0; /* invisible until the heading rises in */
}

#page .elementor-element.elementor-element-c02d05f:has(> .elementor-widget-heading.stagger-visible)::before,
#page .elementor-element.elementor-element-7a275e9:has(> .elementor-widget-heading.stagger-visible)::before,
#page .elementor-element.elementor-element-d092ab2:has(> .elementor-widget-heading.stagger-visible)::before,
#page .elementor-element.elementor-element-837b3a2:has(> .elementor-widget-heading.stagger-visible)::before {
  animation: moveInBottom 0.55s ease-out var(--bg-delay, 0s) backwards;
}

/* Halloween pumpkin sticker (wp-content/uploads/sites/1522/2025/03/citrouille-halloween.svg, its candle light flickering by itself), Offres page hero image and Home page
   "Offre Spéciale" button: its orange glow around it varies in intensity like the candle */
.scuderi-pumpkin {
  position: absolute;
  background: url("../wp-content/uploads/sites/1522/2025/03/citrouille-halloween.svg") no-repeat center / contain;
  rotate: 8deg;
  pointer-events: none;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.35)) drop-shadow(0 0 14px rgba(255, 140, 0, 0.55));
  animation: pumpkinGlow 2.8s linear infinite;
}

/* Offres page hero image -> the pumpkin on the top right corner of the image, mostly on it (30% of its width beyond the right edge and 30% of
   its height above the top edge: formerly centered on the corner, half outside), following the
   slide-in (inside the widget) and the parallax of the image (--hero-img-y, set by js/custom.js) */
body.page-id-16 .elementor-element-b908d1d > .elementor-widget-container {
  position: relative;
}

body.page-id-16 .scuderi-pumpkin {
  z-index: 2;
  top: 0;
  right: 0;
  width: 168px; /* 280 x 270 drawing (pumpkin 260 x 250 + its 12-unit white border) */
  height: 162px;
  translate: 30% calc(-30% + var(--hero-img-y, 0px));
}

/* Home, About and Services pages "Offre Spéciale" button (desktop view) -> the same pumpkin centered on the bottom right corner of the
   button, below it (z-index -1 in the layer of the button wrapper, behind the star and its neon outline), moving with the button;
   inside the wrapper scaled 2.1375 x: 168 x 162 / 2.1375 -> same size on screen as on the Offres page; it comes in with the button
   (same moveInTop: Home 2.2s, About 1.75s, Services 1.9s), then the candle glow */
body.home #ast-desktop-header .ast-builder-button-wrap .scuderi-pumpkin,
body.page-id-12 #ast-desktop-header .ast-builder-button-wrap .scuderi-pumpkin,
body.page-id-14 #ast-desktop-header .ast-builder-button-wrap .scuderi-pumpkin {
  z-index: -1;
  right: 5%; /* 10% closer to the center of the button: 5% of its width and height from the corner */
  bottom: 5%;
  width: 78.6px;
  height: 75.8px;
  translate: 50% 50%;
  animation: moveInTop 1s ease-out 2.2s backwards, pumpkinGlow 2.8s linear 3.2s infinite;
}

body.page-id-12 #ast-desktop-header .ast-builder-button-wrap .scuderi-pumpkin {
  animation: moveInTop 1s ease-out 1.75s backwards, pumpkinGlow 2.8s linear 2.75s infinite;
}

body.page-id-14 #ast-desktop-header .ast-builder-button-wrap .scuderi-pumpkin {
  animation: moveInTop 1s ease-out 1.9s backwards, pumpkinGlow 2.8s linear 2.9s infinite;
}

@media (max-width: 921px) {
  body.home #ast-desktop-header .ast-builder-button-wrap .scuderi-pumpkin,
  body.page-id-12 #ast-desktop-header .ast-builder-button-wrap .scuderi-pumpkin,
  body.page-id-14 #ast-desktop-header .ast-builder-button-wrap .scuderi-pumpkin {
    display: none; /* the desktop header and its button are hidden */
  }
}

@keyframes pumpkinGlow {
  0%, 100% { filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.35)) drop-shadow(0 0 14px rgba(255, 140, 0, 0.55)); }
  11% { filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.35)) drop-shadow(0 0 22px rgba(255, 150, 0, 0.8)); }
  31% { filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.35)) drop-shadow(0 0 6px rgba(255, 120, 0, 0.3)); }
  35% { filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.35)) drop-shadow(0 0 16px rgba(255, 140, 0, 0.6)); }
  57% { filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.35)) drop-shadow(0 0 9px rgba(255, 130, 0, 0.4)); }
  61% { filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.35)) drop-shadow(0 0 26px rgba(255, 160, 0, 0.85)); }
  83% { filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.35)) drop-shadow(0 0 15px rgba(255, 140, 0, 0.6)); }
}

/* tablet and mobile: the image reaches nearly the edge of the screen -> smaller pumpkin, less of it outside the image (stays on screen); then
   all 3 sizes moved toward the inside of the image (desktop 50% -> 30%, tablet 24% -> 14%, mobile 18% -> 10% beyond the right edge; 50% ->
   30% above the top edge) */
@media (max-width: 1024px) {
  body.page-id-16 .scuderi-pumpkin {
    width: 112px;
    height: 108px;
    translate: 14% calc(-30% + var(--hero-img-y, 0px));
  }
}

@media (max-width: 767px) {
  body.page-id-16 .scuderi-pumpkin {
    width: 99px;
    height: 95px;
    translate: 10% calc(-30% + var(--hero-img-y, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  body.page-id-16 .scuderi-pumpkin,
  body.home #ast-desktop-header .ast-builder-button-wrap .scuderi-pumpkin,
  body.page-id-12 #ast-desktop-header .ast-builder-button-wrap .scuderi-pumpkin,
  body.page-id-14 #ast-desktop-header .ast-builder-button-wrap .scuderi-pumpkin {
    animation: none;
  }
}

/* Offres page offers (scuderi-offer-2: second offer to come, copy of the first one) -> in a row below the texts of the hero (stacked on mobile),
   each with its "Profiter de l’Offre" button (scuderi-offer__cta: same red glass as the other red buttons, same size and font as the header
   buttons) under its image, aligned left; the hero grows with its content instead of shrinking it (js/custom.js: width scaling only) */
body.page-id-16 .elementor-element.elementor-element-b908d1d > .elementor-widget-container {
  position: relative;
  margin-bottom: 0; /* no negative margin of elementor (made for one image overlapping the wave) */
}

body.page-id-16 .elementor-element-b908d1d img {
  display: block;
}

.scuderi-offer__cta {
  margin-top: 24px;
  text-align: left;
}

.scuderi-offer__cta .elementor-button {
  zoom: var(--hero-unscale, 1); /* same size as the header buttons, outside the zoomed hero content */
  padding: 15px 30px;
  font-family: "Encode Sans", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  border-radius: 5px;
  white-space: nowrap;
}

@media (max-width: 1024px) {
  .scuderi-offer__cta .elementor-button {
    padding: 15px 20px; /* like the header button on tablet */
  }
}

/* Offres page, Halloween and Black Friday offers -> their "Profiter de l’Offre Halloween" / "Profiter de l’Offre Black Friday" buttons inside
   the top left corner of their offer image (wp-image-833), instead of under it: placed over the image in its box (the widget container,
   positioned), 20px (on the screen, divided by the zoom of the hero content) from its top and left edges, in front of it; the pumpkin stays
   on the top right corner of the Halloween image */
body.page-id-16 .scuderi-offer__cta--halloween,
body.page-id-16 .scuderi-offer__cta--black-friday {
  position: absolute;
  top: calc(20px / var(--hero-scale, 1));
  left: calc(20px / var(--hero-scale, 1));
  z-index: 2;
  margin: 0;
}

/* Halloween offer button (scuderi-offer__cta--halloween) -> same glass, hover and press animation as the red buttons, in orange (#f57c00):
   backdrop filters fitted on the plaster texture like the red ones (measured: #f37a00 through the glass, for #f57c00);
   hover a bit denser, pressed darker (#f57c00 x 0.8) with an orange glow */
#page .scuderi-offer__cta--halloween .elementor-button {
  background-color: rgba(245, 124, 0, 0.3);
  -webkit-backdrop-filter: blur(2px) brightness(0.2) sepia(1) saturate(24) hue-rotate(36deg) brightness(1.65);
  backdrop-filter: blur(2px) brightness(0.2) sepia(1) saturate(24) hue-rotate(36deg) brightness(1.65);
}

#page .scuderi-offer__cta--halloween .elementor-button:hover {
  background-color: rgba(245, 124, 0, 0.5);
}

#page .scuderi-offer__cta--halloween .elementor-button:active {
  box-shadow: var(--glass-edge), 0 0 16px rgba(255, 140, 0, 0.95), 0 0 36px rgba(255, 140, 0, 0.65), 0 5px 10px rgba(0, 0, 0, 0.2);
  background-color: rgba(196, 99, 0, 0.65);
}

/* Black Friday offer button (scuderi-offer__cta--black-friday) -> same glass, hover and press animation as the red buttons, in black
   (the theme #111111: the plaster seen through the glass turned gray and dark, its relief still visible, measured #111111) with the
   gold text of the offer image ("FRIDAY", #d4b263); pressed darker with a gold glow */
#page .scuderi-offer__cta--black-friday .elementor-button {
  background-color: rgba(17, 17, 17, 0.3);
  -webkit-backdrop-filter: blur(2px) grayscale(1) brightness(0.07);
  backdrop-filter: blur(2px) grayscale(1) brightness(0.07);
}

#page .scuderi-offer__cta--black-friday .elementor-button,
#page .scuderi-offer__cta--black-friday .elementor-button:hover,
#page .scuderi-offer__cta--black-friday .elementor-button:focus,
#page .scuderi-offer__cta--black-friday .elementor-button:active {
  color: #d4b263;
}

/* Black Friday offer not active yet -> hover & pressed styles below commented out; to enable the offer, uncomment them and remove the
   "inactive" block after them (with href / aria-disabled in offer/index.html)
#page .scuderi-offer__cta--black-friday .elementor-button:hover {
  background-color: rgba(17, 17, 17, 0.5);
}

#page .scuderi-offer__cta--black-friday .elementor-button:active {
  box-shadow: var(--glass-edge), 0 0 16px rgba(212, 178, 99, 0.95), 0 0 36px rgba(212, 178, 99, 0.65), 0 5px 10px rgba(0, 0, 0, 0.2);
  background-color: rgba(0, 0, 0, 0.65);
}
*/

/* inactive offer button (aria-disabled, no link) -> none of the hover & press effects shared by the red buttons (lift, shadow, denser glass,
   brightness, shock wave), looks the same as at rest */
#page .scuderi-offer__cta .elementor-button[aria-disabled="true"],
#page .scuderi-offer__cta .elementor-button[aria-disabled="true"]:hover,
#page .scuderi-offer__cta .elementor-button[aria-disabled="true"]:active {
  cursor: default;
  transform: none;
  box-shadow: var(--glass-edge);
  filter: none;
}

#page .scuderi-offer__cta--black-friday .elementor-button[aria-disabled="true"]:hover,
#page .scuderi-offer__cta--black-friday .elementor-button[aria-disabled="true"]:active {
  background-color: rgba(17, 17, 17, 0.3);
}

#page .scuderi-offer__cta .elementor-button[aria-disabled="true"]:hover::after {
  animation: none;
}

/* offers appearing one after the other from the right when they come into view (classes set by js/custom.js), instead of the slide-in
   from the left of the hero images on load */
body.page-id-16 #content .elementor > .e-con.e-parent:first-child .elementor-element-b908d1d {
  animation: none;
}

body.page-id-16 #content .elementor > .e-con.e-parent:first-child .elementor-element-b908d1d.offer-pending {
  opacity: 0;
}

body.page-id-16 #content .elementor > .e-con.e-parent:first-child .elementor-element-b908d1d.offer-visible {
  animation: heroImageSlideInRight 1.6s cubic-bezier(0.34, 1, 0.36, 1) both;
}

/* mobile: the offers one below the other */
body.page-id-16 .elementor-element.elementor-element-b908d1d.scuderi-offer-2 {
  margin-top: 40px;
}

@media (min-width: 768px) {
  /* texts on their own line, the row of offers below over the full width */
  body.page-id-16 #content .elementor > .e-con.e-parent:first-child > .e-con-inner {
    flex-wrap: wrap;
    row-gap: 60px;
  }

  body.page-id-16 .elementor-element.elementor-element-3b13edb {
    --width: 100%;
    width: 100%;
    flex-direction: row;
    align-items: flex-start;
    column-gap: 100px; /* room for the outer half of the pumpkin on the corner of the first image */
  }

  body.page-id-16 .elementor-element-3b13edb > .elementor-element.elementor-element-b908d1d {
    flex: 1 1 0;
    width: auto;
    max-width: none;
    margin-top: 0;
  }
}

body.page-id-16 #content .elementor > .e-con.e-parent:first-child {
  height: auto;
  min-height: 110vh;
  min-height: 110dvh;
  padding-top: 60px;
  padding-bottom: 140px; /* room for the bottom wave */
}

/* mobile portrait view: the texts starting at exactly the same place as on the About and Services pages (32px below the top bar) */
@media (max-width: 767px) and (orientation: portrait) {
  body.page-id-16 #content .elementor > .e-con.e-parent:first-child {
    padding-top: 32px;
  }
}

/* tablet and desktop: upper padding divided by 2 (60px -> 30px) */
@media (min-width: 768px) {
  body.page-id-16 #content .elementor > .e-con.e-parent:first-child {
    padding-top: 30px;
  }
}

body.page-id-16 #content .elementor > .e-con.e-parent:first-child > .e-con-inner {
  transform: none; /* no upward shift: the content starts below the header */
  padding-top: 0; /* 90px of elementor */
}

/* tablet portrait view -> the "// Offres en cours" label closer to the top of the hero (187px below the header bar at 768 x 1024, the
   content vertically centered in the 110vh hero): the content at the top of the hero, 30px below the header bar (its top padding), all the
   elements below moving up with the label (same distances to it); the hero keeps its height */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  body.page-id-16 #content .elementor > .e-con.e-parent:first-child > .e-con-inner {
    align-content: flex-start;
  }

  /* the hero as tall as its content (no minimum height: 110vh, then 77vh): the 30px top padding, the texts and offers, and below the offer
     buttons 60px (the gap between the texts and the offers) above the 42px bottom wave (bottom padding 140px -> 102px) */
  body.page-id-16 #content .elementor > .e-con.e-parent:first-child {
    min-height: 0;
    padding-bottom: 102px;
  }
}

/* Offres page -> no header button (each offer has its own "Profiter de l’Offre" button under its image) */
@media (min-width: 922px) {
  body.page-id-16 #ast-desktop-header .ast-builder-button-wrap {
    display: none;
  }
}

/* Offres page contact form section (310f7aa, below the offers) -> top padding divided by 2 (240px -> 120px desktop, 150px -> 75px tablet,
   120px -> 60px mobile) */
.elementor-16 .elementor-element.elementor-element-310f7aa {
  --padding-top: 120px;
}

@media (max-width: 1024px) {
  .elementor-16 .elementor-element.elementor-element-310f7aa {
    --padding-top: 75px;
  }
}

@media (max-width: 767px) {
  .elementor-16 .elementor-element.elementor-element-310f7aa {
    --padding-top: 60px;
  }
}

/* Offres page offer form (#formulaire-offre, 6e36b26) and the heading column below it (af3e663) -> over the full width of the section
   (50% in elementor; full width on mobile already) */
@media (min-width: 768px) {
  .elementor-16 .elementor-element.elementor-element-6e36b26,
  .elementor-16 .elementor-element.elementor-element-af3e663 {
    --width: 100%;
  }
}

/* Offres page hero -> text column over the full width, above the row of offers (50% in elementor; full width on mobile already),
   without its upper padding (40px in elementor on desktop, already 0 on tablet) */
@media (min-width: 768px) {
  #page .elementor-element.elementor-element-8a24dfa {
    --width: 100%;
    --padding-top: 0px;
  }
}

/* Services page "Peinture" card -> description justified */
#page .elementor-element.elementor-element-c7c0e28 {
  text-align: justify;
}

/* Services page first row of services -> "Outdoor Painting" column (7a275e9, wp-image-251 and its texts) 10% (of its height) lower, into
   the space between the two rows, "Interior Painting" column (c02d05f, wp-image-250 and its texts) 10% higher; desktop and tablet
   (2 columns; stacked on mobile); "translate" so it adds to the transforms of their elements */
@media (min-width: 768px) {
  #page .elementor-element.elementor-element-7a275e9 {
    translate: 0 10%;
  }

  #page .elementor-element.elementor-element-c02d05f {
    translate: 0 -10%;
  }

  /* second row: first card (d092ab2, wp-image-252 and its texts) 5% higher */
  #page .elementor-element.elementor-element-d092ab2 {
    translate: 0 -5%;
  }

  /* second row: second card ("Rénovation", 837b3a2) 10% lower, in addition to its 5% (transform above) -> 15% lower: as far below
     "Plâtrerie" as "Façade" below "Peinture" in the first row (20% of the card height) */
  #page .elementor-element.elementor-element-837b3a2 {
    translate: 0 10%;
  }
}

/* About page "Meet the Team" name boxes -> one column over the full width (their LinkedIn icon, in the 2nd column, was removed) */
#page .elementor-element.elementor-element-0b73048,
#page .elementor-element.elementor-element-79e2dd3,
#page .elementor-element.elementor-element-339ef9c {
  grid-template-columns: 1fr;
}

/* name boxes -> space between the name and the job title divided by 2 (8px between the texts -> 4px: no 4px margin below the name) */
#page .elementor-element-0b73048 .elementor-icon-box-title,
#page .elementor-element-79e2dd3 .elementor-icon-box-title,
#page .elementor-element-339ef9c .elementor-icon-box-title {
  margin-bottom: 0;
}

/* About page "Meet the Team" -> the 3 photos (wp-image-312, 313, 314) lower with their name boxes: wp-image-313 8% (15% - 7%), wp-image-314
   5% lower than wp-image-313, wp-image-312 10% lower than wp-image-313 (their containers moved by % of their height, the same for the 3);
   desktop and tablet (photos side by side; stacked on mobile); "translate" so it adds to the appearing and parallax transforms of the
   photos and boxes */
@media (min-width: 768px) {
  #page .elementor-element.elementor-element-b031136 {
    translate: 0 18%;
  }

  #page .elementor-element.elementor-element-ccedf81 {
    translate: 0 8%;
  }

  #page .elementor-element.elementor-element-4319833 {
    translate: 0 13%;
  }
}

/* About page process cards -> all 3 cards 10% (of the card height, the same for the 3 cards) lower, and in steps: the 2nd card (461c64a)
   5% lower than the 1st one (d02e764), the 3rd card (b7bfc07) 5% lower than the 2nd one; desktop and tablet (cards side by side;
   stacked on mobile); "translate" so it adds to the rise-in transform, through --parallax-base kept by the parallax of js/custom.js */
@media (min-width: 768px) {
  #page .elementor-element.elementor-element-d02e764 {
    --parallax-base: 10%;
    translate: 0 var(--parallax-base);
  }

  #page .elementor-element.elementor-element-461c64a {
    --parallax-base: 15%;
    translate: 0 var(--parallax-base);
  }

  #page .elementor-element.elementor-element-b7bfc07 {
    --parallax-base: 20%;
    translate: 0 var(--parallax-base);
  }
}

/* Home page "Nos Services" -> "Rénovation" card (94e8880) 4% (2% + 2%, of the card height) lower, with its image (wp-image-374) inside it;
   desktop and tablet (cards side by side), same way as the About page process cards above */
@media (min-width: 768px) {
  #page .elementor-element.elementor-element-94e8880 {
    --parallax-base: 4%;
    translate: 0 var(--parallax-base);
  }
}

/* tablet portrait view -> the 3 "Nos Services" cards (520d552, c7a4126, 94e8880), with their images inside them, 10% (of the card height)
   lower: the offset kept under the parallax shift of js/custom.js (--parallax-base, the "Rénovation" card 4% + 10%) */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  #page .elementor-element.elementor-element-520d552,
  #page .elementor-element.elementor-element-c7a4126 {
    --parallax-base: 10%;
    translate: 0 var(--parallax-base);
  }

  #page .elementor-element.elementor-element-94e8880 {
    --parallax-base: 14%;
  }
}

/* About page "Our Simplified Painting Process" cards (d02e764, 461c64a, b7bfc07) -> theme navy background (#00205b) and white texts,
   the red squares of the icons unchanged */
#page .elementor-element.elementor-element-d02e764,
#page .elementor-element.elementor-element-461c64a,
#page .elementor-element.elementor-element-b7bfc07 {
  background-color: var(--ast-global-color-2); /* #00205b */
}

#page .elementor-element-d02e764 .elementor-heading-title,
#page .elementor-element-461c64a .elementor-heading-title,
#page .elementor-element-b7bfc07 .elementor-heading-title,
#page .elementor-element-d02e764 .elementor-widget-text-editor,
#page .elementor-element-461c64a .elementor-widget-text-editor,
#page .elementor-element-b7bfc07 .elementor-widget-text-editor,
#page .elementor-element-d02e764 .elementor-widget-text-editor *,
#page .elementor-element-461c64a .elementor-widget-text-editor *,
#page .elementor-element-b7bfc07 .elementor-widget-text-editor * {
  color: #ffffff;
}

/* Home page contact form section -> intro copied from the Contact page hero, above the form and left aligned with it,
   texts in white on the navy background (the "//" stays red) */
.scuderi-contact-intro {
  width: 100%;
  max-width: 1200px; /* same width as the content of the section: starts at the left edge of the form */
  margin: 0 auto;
  padding: 140px 0 0; /* below the top wave */
  text-align: left;
  position: relative;
  z-index: 3; /* above the top wave */
}

/* mobile portrait view -> the "// Contact" label closer to the top of the section (140px -> 80px, still below the 30px top wave) */
@media (max-width: 767px) and (orientation: portrait) {
  .scuderi-contact-intro {
    padding-top: 80px;
  }
}

.scuderi-contact-intro .elementor-element {
  margin-bottom: 16px;
  max-width: 640px; /* lines about as long as in the Contact page hero column */
}

/* same typography as the "// Recent Projects" title of the Home page: the heading is an h2 (44px, line height 1.2), 3px spacing in the label,
   12px between the label and the heading */
#page .scuderi-contact-intro .uael-dual-heading-text {
  letter-spacing: 3px;
}

#page .scuderi-contact-intro .elementor-element-0493cc0 {
  margin-bottom: 12px;
}

#page .scuderi-contact-intro .elementor-element-0493cc0 > .elementor-widget-container,
#page .scuderi-contact-intro .elementor-element-0493cc0 .uael-module-content > * {
  margin-bottom: 0; /* the 25.6px margin of the inner heading tag would collapse through the widget */
}

/* no side padding (80px on the right of the heading on the Contact page): the width is set by the max-width above */
#page .scuderi-contact-intro .elementor-element > .elementor-widget-container {
  padding-left: 0;
  padding-right: 0;
}

/* less space above the form row (240px on the Contact page, below its hero): the intro is now at the top of the section */
.home #page .elementor-element.elementor-element-310f7aa {
  --padding-top: 60px;
}

.scuderi-contact-intro .uael-after-heading,
.scuderi-contact-intro .uael-after-heading .uael-dual-heading-text,
.scuderi-contact-intro .elementor-heading-title,
.scuderi-contact-intro .elementor-widget-text-editor,
.scuderi-contact-intro .elementor-widget-text-editor * {
  color: #ffffff;
}

/* About and Services heroes -> "Get a Free Quote" button copied from the Home hero, rising in after the texts with a short pause
   like on the Home page (About: texts until 1.15s -> 1.60s, Services: texts and list until 1.30s -> 1.75s),
   followed by the header "Get Quote" button (About 1.75s, Services 1.90s) */
body.page-id-12:not(.home) #content .elementor > .e-con.e-parent:first-child > .e-con-inner > .e-con:first-child > .elementor-element.elementor-element-1206274 {
  animation-delay: 1.6s;
}

body.page-id-14:not(.home) #content .elementor > .e-con.e-parent:first-child > .e-con-inner > .e-con:first-child > .elementor-element.elementor-element-1206274 {
  animation-delay: 1.75s;
}

body.page-id-14 #ast-desktop-header .ast-builder-button-wrap .ast-custom-button {
  animation-delay: 1.9s;
}

/* Home page hero -> navy copy of the "Get a Free Quote" button, to the right of the red one: same style and animation as the source button
   (glass, hover and press effects, rise-in), in the theme navy (#00205b); the backdrop filter values are fitted on the plaster texture
   so that the see-through glass gives exactly the navy (like the red glass gives exactly #e7194f) */
.scuderi-hero-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0 16px;
}

#page .elementor-element-1206274.scuderi-quote-navy .elementor-button {
  background-color: rgba(0, 32, 91, 0.3);
  -webkit-backdrop-filter: blur(2px) brightness(0.15) sepia(1) saturate(19) hue-rotate(-156deg) brightness(0.65);
  backdrop-filter: blur(2px) brightness(0.15) sepia(1) saturate(19) hue-rotate(-156deg) brightness(0.65);
}

#page .elementor-element-1206274.scuderi-quote-navy .elementor-button:hover {
  background-color: rgba(0, 32, 91, 0.5); /* same navy glass, a bit denser (brighter with the hover filter of the source button) */
}

#page .elementor-element-1206274.scuderi-quote-navy .elementor-button:active {
  background-color: rgba(0, 24, 70, 0.65); /* darker navy when pressed */
  box-shadow: var(--glass-edge), 0 0 16px rgba(40, 95, 210, 0.95), 0 0 36px rgba(40, 95, 210, 0.65), 0 5px 10px rgba(0, 0, 0, 0.2); /* blue glow */
}

.elementor-9 .elementor-element-f308bff .elementor-element.elementor-element-1206274.scuderi-quote-navy {
  animation-delay: 2.05s; /* rises in just after the red button (1.90s) */
}

/* "Call" button: text and telephone icon vertically centered to one another, icon mirrored horizontally
   (the icon box sat 1.6px lower than the visual middle of the letters) */
#page .elementor-element-1206274.scuderi-quote-navy .elementor-button-content-wrapper {
  align-items: center;
}

#page .elementor-element-1206274.scuderi-quote-navy .elementor-button-icon svg {
  transform: translateY(-1.6px) scaleX(-1);
}

/* with the text trimmed to the capital letters (see the "Devis Gratuit" buttons), the icon box is already centered on the letters:
   the 1.6px lift above put it 1.6px too high (measured on a 4x render) -> only the mirroring kept */
@supports (text-box: trim-both cap alphabetic) {
  #page .elementor-element-1206274.scuderi-quote-navy .elementor-button-icon svg {
    transform: scaleX(-1);
  }
}

/* Mobile navigation (tablet & mobile header) -> full screen menu of the _ARCHIVE project, opened by the current mobile menu button
   (elements added by js/custom.js): a circle growing from the button with the plaster background of the header
   (a full screen layer revealed by a growing clip-path circle, so that the texture keeps its real scale),
   then the links fading in at the center, in the theme navy */
.scuderi-mnav__background {
  position: fixed;
  inset: 0;
  background-color: #faf9f7;
  background-image: var(--plaster-texture);
  background-repeat: repeat;
  background-size: 600px 600px;
  z-index: 1000;
  clip-path: circle(0px at var(--scuderi-mnav-x, 100%) var(--scuderi-mnav-y, 0));
  transition: clip-path 0.7s cubic-bezier(0.86, 0, 0.07, 1);
  pointer-events: none;
}

.scuderi-mnav__nav {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  height: 100dvh;
  width: 0; /* no width while closed: the invisible links cannot be clicked */
  opacity: 0;
  z-index: 1500;
  overflow: hidden;
  transition: all 0.7s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}

.scuderi-mnav__list {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  text-align: center;
}

.scuderi-mnav__item {
  margin: 20px;
}

.scuderi-mnav__link,
.scuderi-mnav__link:link,
.scuderi-mnav__link:visited {
  display: inline-block;
  font-family: "Open Sans", sans-serif; /* same font as the top navigation menu */
  font-size: 30px;
  font-weight: 700; /* bold like the top navigation menu */
  padding: 10px 20px;
  color: var(--ast-global-color-2); /* #00205b */
  text-decoration: none;
  text-transform: uppercase;
  background-image: linear-gradient(120deg, transparent 0%, transparent 50%, var(--ast-global-color-2) 50%); /* navy sweep */
  background-size: 240%;
  transition: all 0.4s;
}

.scuderi-mnav__link:hover,
.scuderi-mnav__link:active,
.scuderi-mnav__link:focus-visible {
  background-position: 100%;
  color: #ffffff; /* white on the navy sweep */
  transform: translateX(10px);
}

/* open: the header above the whole page, the circle covering the screen, the links visible, the menu button above the menu */
body.scuderi-mnav-open #masthead {
  z-index: 3000;
}

body.scuderi-mnav-open .scuderi-mnav__background {
  clip-path: circle(var(--scuderi-mnav-radius, 150vmax) at var(--scuderi-mnav-x, 100%) var(--scuderi-mnav-y, 0));
}

/* mobile menu button (menu and close icons, outline) in the theme navy */
#ast-mobile-header .menu-toggle,
#ast-mobile-header .menu-toggle:hover,
#ast-mobile-header .menu-toggle:focus {
  color: var(--ast-global-color-2);
  border-color: var(--ast-global-color-2);
}

#ast-mobile-header .menu-toggle .ast-mobile-svg {
  fill: var(--ast-global-color-2);
}

/* fixed header bar -> light white glow around the home button and the menu button (outline and icon), so that the navy buttons
   stay visible above the navy sections scrolling below them; the hover & press filters of the home button replace it (own glow) */
#ast-mobile-header .site-logo-img .custom-logo-link:not(:hover):not(:active),
#ast-mobile-header .menu-toggle {
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 6px rgba(255, 255, 255, 0.6));
}

body.scuderi-mnav-open .scuderi-mnav__nav {
  opacity: 1;
  width: 100%;
}

/* the mobile header bar (z-index 4, its own stacking context) above the menu, so that the button stays visible and closes it */
body.scuderi-mnav-open #ast-mobile-header .ast-primary-header-bar {
  z-index: 2000;
}

/* tablet & mobile views -> the mobile header bar (home logo button and menu button) fixed at the top of the screen, not affected by scrolling
   (the open mobile menu still covers it, apart from its buttons);
   its place in the page is kept (79px, 70px under 545px) and the header is above the page sections */
@media (max-width: 921px) {
  #masthead {
    z-index: 1000;
  }

  #ast-mobile-header .ast-main-header-wrap {
    height: 79px;
  }

  /* the header area keeps the plaster look, drawn by the hero below it (a band reaching up behind the header):
     the header itself is transparent, so it does not cover what rises above the hero (e.g. the Home hero logo images) */
  body #page #masthead {
    background: transparent;
  }

  #content .elementor > .e-con.e-parent:first-child::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 400px; /* up to the top of the page whatever the space above the hero (header 79px / 70px, + the 4.5vh margin of the Home page
                      hero: with 90px, the white page background showed in a band at the top of the Home page); nothing is shown above the
                      top of the page */
    background-color: #faf9f7;
    background-image: var(--plaster-texture);
    background-repeat: repeat;
    background-size: 600px 600px;
    z-index: -1;
    pointer-events: none;
  }

  /* transparent background: only the logo and the menu button float above the page
     (when the menu button is pressed, the open menu shows its plaster background behind them) */
  #ast-mobile-header .ast-primary-header-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
    box-shadow: none;
    pointer-events: none; /* its empty area lets the clicks through to the page scrolling below it */
  }

  /* the home button as far from the left border as from the top border (16px), instead of astra's 40px / 24px
     (two IDs: astra's rule ".ast-header-break-point #masthead .ast-primary-header-bar.main-header-bar" is more specific than one) */
  #masthead #ast-mobile-header .ast-primary-header-bar {
    padding-left: 16px;
    padding-right: 13.0625px; /* the menu button as far from the right border as from the top border (centered in the bar), instead of 32px / 24px */
  }

  #ast-mobile-header .ast-primary-header-bar .custom-logo-link,
  #ast-mobile-header .ast-primary-header-bar .menu-toggle {
    pointer-events: auto;
  }
}

@media (max-width: 544px) {
  #ast-mobile-header .ast-main-header-wrap {
    height: 70px;
  }
}

/* desktop views too -> the mobile header bar (small home logo button and menu button) shown above the desktop header, fixed at the top
   of the screen like on mobile and taking no space in the page; the desktop header content is moved in from the right to make room
   for the menu button; the header no longer forms its own layer, so that the fixed bar stays above the hero image */
@media (min-width: 922px) {
  #masthead #ast-mobile-header {
    display: block !important;
  }

  #masthead {
    z-index: auto;
  }

  #ast-mobile-header .ast-main-header-wrap {
    height: 0;
  }

  #ast-mobile-header .ast-primary-header-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;
    background: transparent;
    box-shadow: none;
    border: 0;
    padding-left: 16px; /* the home button as far from the left border as from the top border (16px) */
    padding-right: 13.59375px; /* the menu button as far from the right border as from the top border (centered in the bar) */
    pointer-events: none; /* its empty area lets the clicks through to the desktop menu and "This Month Offer" button below */
  }

  #ast-mobile-header .ast-primary-header-bar .custom-logo-link,
  #ast-mobile-header .ast-primary-header-bar .menu-toggle {
    pointer-events: auto; /* only the logo and the menu button catch the clicks */
  }

  #ast-desktop-header .ast-primary-header-bar > .site-primary-header-wrap {
    padding-right: 110px;
  }

  /* small logo version of the home button in this bar */
  #ast-mobile-header .site-logo-img .custom-logo-link {
    flex-direction: row;
    gap: 1rem;
  }

  #ast-mobile-header .site-logo-img .custom-logo-link .custom-logo {
    display: inline-block;
  }

  #ast-mobile-header .site-logo-img .custom-logo-link .header__logo-title,
  #ast-mobile-header .site-logo-img .custom-logo-link .header__logo-subtitle {
    display: none;
  }
}

/* the Astra dropdown is replaced by this menu */
#ast-mobile-header .ast-mobile-header-content {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .scuderi-mnav__background,
  .scuderi-mnav__nav,
  .scuderi-mnav__link {
    transition: none;
  }
}

/* Home page hero -> copy of the desktop home button images (SCUDERI above RENOVATION) slightly above the rating line, left aligned with it.
   It does not move the elements below: a zero height placeholder whose negative margin cancels the 16px gap of the column,
   the images hanging above it; 1.5 times the size of the home button images (the hero content scale is cancelled) */
.scuderi-hero-logo {
  position: relative;
  height: 0;
  margin-bottom: -16px; /* cancels the gap of the column after this element */
  z-index: 2;
}

.scuderi-hero-logo__images {
  position: absolute;
  left: 0;
  bottom: 18px; /* slightly above the rating line */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.27rem; /* 1.5 x the home button gap */
  zoom: var(--hero-unscale, 1); /* real size */
}

/* same animation as the "Why Choose Us" title images (header__box-title--scuderi / --renovation):
   moving in from the left / right in 1s, then the neon tube loop (brightness and glow) */
#page .scuderi-hero-logo .scuderi-hero-logo__images img {
  display: block;
  width: auto;
  max-width: none;
  filter: brightness(1.2) drop-shadow(0 0 6px rgba(255, 255, 255, 0.7)) drop-shadow(0 0 14px rgba(255, 255, 255, 0.4));
}

#page .scuderi-hero-logo .scuderi-hero-logo__title {
  height: 3.3075rem; /* 1.5 x the home button title (2.205rem) */
  animation: moveInLeft 1s ease-out, neonTube 7.5s linear 1s infinite;
}

#page .scuderi-hero-logo .scuderi-hero-logo__subtitle {
  height: 1.543rem; /* 1.5 x the home button subtitle (1.0287rem): same width as the title */
  animation: moveInRight 1s ease-out, neonTube 8s linear 1s infinite;
}

/* small screens: not enough room above the rating line below the fixed mobile logo -> the home button size (1 x) */
@media (max-width: 767px) {
  .scuderi-hero-logo__images {
    gap: 0.18rem;
  }

  #page .scuderi-hero-logo .scuderi-hero-logo__title {
    height: 2.205rem;
  }

  #page .scuderi-hero-logo .scuderi-hero-logo__subtitle {
    height: 1.0287rem;
  }
}

/* mobile portrait view -> the 2 logo images (SCUDERI, RENOVATION SARL) centered in the hero text column, and the 2 buttons ("Devis Gratuit",
   "Appeler") centered under the text; the other texts stay aligned on the left */
@media (max-width: 767px) and (orientation: portrait) {
  .scuderi-hero-logo__images {
    left: 50%;
    translate: -50% 0;
    align-items: center;
  }

  .scuderi-hero-buttons {
    justify-content: center;
  }
}

/* tablet portrait view -> the 2 logo images placed in the whole hero (2339f9d) instead of above the rating line: their top 5% of the hero
   height above its top border (15% below it, then 5% + 5% + 5% + 5% higher), their center at the horizontal center of the hero. They stay positioned from their placeholder (the text
   column keeps its 10% "top" shift, which needs it positioned): js/custom.js sets the offsets from the placeholder to that point
   (--scuderi-logo-top / --scuderi-logo-left, screen pixels: the images are at real size); the texts below do not move (the images are out
   of the flow) */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .elementor-9 .scuderi-hero-logo__images {
    top: var(--scuderi-logo-top, -100px);
    bottom: auto;
    left: var(--scuderi-logo-left, 0px);
    translate: -50% 0;
    align-items: center;
    scale: 1.1; /* 10% bigger, from its top center: same top, still centered */
    transform-origin: center top;
  }
}

@media (prefers-reduced-motion: reduce) {
  #page .scuderi-hero-logo .scuderi-hero-logo__images img {
    animation: none;
  }
}

/* Home page, desktop view -> the whole top area (navigation bar 80px + 4.5vh gap + hero) equal to 95vh: the hero itself shorter */
@media (min-width: 922px) {
  .elementor-9 .elementor-element.elementor-element-2339f9d {
    height: calc(95vh - 4.5vh - 80px);
    height: calc(95dvh - 4.5vh - 80px);
  }
}

/* Home page, mobile portrait view -> the same: the whole top area (mobile header bar 79px, 70px under 545px + 4.5vh gap + hero) equal
   to 95vh (instead of the bar + 4.5vh + a 90vh hero, taller than the screen) */
@media (max-width: 767px) and (orientation: portrait) {
  .elementor-9 .elementor-element.elementor-element-2339f9d {
    height: calc(95vh - 4.5vh - 79px);
    height: calc(95dvh - 4.5vh - 79px);
  }
}

@media (max-width: 544px) and (orientation: portrait) {
  .elementor-9 .elementor-element.elementor-element-2339f9d {
    height: calc(95vh - 4.5vh - 70px);
    height: calc(95dvh - 4.5vh - 70px);
  }
}

/* Home page, tablet portrait view (768px to 1024px wide, taller than wide) -> the same: the whole top area (header bar 79px, the 108px
   desktop header from 922px wide + 4.5vh gap + hero) equal to 95vh */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .elementor-9 .elementor-element.elementor-element-2339f9d {
    height: calc(95vh - 4.5vh - 79px);
    height: calc(95dvh - 4.5vh - 79px);
  }
}

@media (min-width: 922px) and (max-width: 1024px) and (orientation: portrait) {
  .elementor-9 .elementor-element.elementor-element-2339f9d {
    height: calc(95vh - 4.5vh - 108px);
    height: calc(95dvh - 4.5vh - 108px);
  }
}

/* Home page hero text column (logo images, rating, heading, text, buttons, hours) -> moved down by 10% of the hero height (2 x 5%) */
.elementor-9 .elementor-element.elementor-element-f308bff {
  position: relative;
  top: 10%;
}

/* mobile portrait view -> all the texts 10% (of the hero height) higher: back to their place in the hero (the hero logo images stay below
   the fixed header bar) */
@media (max-width: 767px) and (orientation: portrait) {
  .elementor-9 .elementor-element.elementor-element-f308bff {
    top: 0;
  }
}

/* tablet portrait view -> all the texts and the "Devis Gratuit" / "Appeler" buttons 5% + 5% + 5% (of the hero height) higher (10% lower than
   their place -> 5% higher; the logo images stay where js/custom.js places them in the hero) */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .elementor-9 .elementor-element.elementor-element-f308bff {
    top: -5%;
  }
}

/* Home page hero text column, desktop view -> wider: 40% -> 48.6% (4 x 5%) -> 53.5% (+10%) of the hero content width */
@media (min-width: 922px) {
  .elementor-9 .elementor-element.elementor-element-f308bff {
    --width: 53.5%;
  }
}

/* Home page hero -> its side padding 30% smaller (40px -> 28px, 24px -> 17px on phones);
   the margins around its content box are reduced by js/custom.js */
.elementor-9 .elementor-element.elementor-element-2339f9d {
  --padding-left: 28px;
  --padding-right: 28px;
}

@media (max-width: 767px) {
  .elementor-9 .elementor-element.elementor-element-2339f9d {
    --padding-left: 17px;
    --padding-right: 17px;
  }
}

/* Home and Services pages hero paragraph (d4779b1, cb37fd8) -> "Peinture · Façade · Plâtrerie · Rénovation" line in the red of the active
   navigation link, twice the size of the paragraph text */
.elementor-9 .elementor-element-d4779b1 .scuderi-hero-trades,
.elementor-14 .elementor-element-cb37fd8 .scuderi-hero-trades {
  color: var(--ast-global-color-0); /* #e7194f */
  font-size: 2em;
  line-height: 1.3; /* its own line height (the paragraph one is set for the smaller text) */
}

/* Services page, all views -> kept on one line at the same font size (its text column is narrower than on Home, so "Rénovation"
   wrapped on desktop, tablet and mobile landscape; the line overflows the column, on tablet and mobile landscape over the photo) */
.elementor-14 .elementor-element-cb37fd8 .scuderi-hero-trades {
  white-space: nowrap;
}

/* Services page header, tablet portrait view -> the hero text column (578d8e2: label, heading, red line, paragraph, check list and "Devis
   Gratuit" button) 5% of the screen height lower ("translate": layout unchanged, the photo does not move) */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .elementor-14 .elementor-element.elementor-element-578d8e2 {
    translate: 0 calc(5vh / var(--hero-scale, 1));
  }
}

/* same view -> the hero 7% less tall (75vh -> 69.75vh: 5.25vh less, about 49px on a 768 x 1024 tablet, the photo top then still below the
   header bar), everything in it at the same distance from its bottom: the centered content only rises by 30% of the removed height (measured),
   so the text column (578d8e2) and the photo column (11ce73c) are moved up by the other 70% (3.675vh on the screen, divided by the zoom of
   the hero content; the text column: 5vh - 3.675vh = 1.325vh lower) */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  body.page-id-14 #content .elementor > .e-con.e-parent:first-child {
    height: 69.75vh;
    height: 69.75dvh;
  }

  .elementor-14 .elementor-element.elementor-element-578d8e2 {
    translate: 0 calc(1.325vh / var(--hero-scale, 1));
  }

  .elementor-14 .elementor-element.elementor-element-11ce73c {
    translate: 0 calc(-3.675vh / var(--hero-scale, 1));
  }
}

/* same view -> the "Devis Gratuit" button (1206274) slightly lower: 20px on the screen ("translate", divided by the zoom of the hero content;
   its rise-in animation and the layout unchanged) */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .elementor-14 .elementor-element.elementor-element-1206274 {
    translate: 0 calc(20px / var(--hero-scale, 1));
  }
}

/* Services page hero text column (578d8e2) -> drawn in front of the photo column (later in the DOM, so painted over it), so the end
   of the one-line "Peinture · Façade · Plâtrerie · Rénovation" stays visible where it overflows onto the photo */
.elementor-14 .elementor-element.elementor-element-578d8e2 {
  z-index: 2;
}

/* mobile portrait view (photo below the texts, its top behind the "Devis Gratuit" button) -> the photo column (11ce73c) in front of the
   texts column, so the photo covers the bottom of the button (the trades line is on 2 lines there, inside the column): both columns at
   z-index 1, the photo column painted over the texts column (later in the DOM), the bottom wave (z-index 2) still in front of the photo */
@media (max-width: 767px) and (orientation: portrait) {
  .elementor-14 .elementor-element.elementor-element-578d8e2,
  .elementor-14 .elementor-element.elementor-element-11ce73c {
    z-index: 1;
  }
}

/* mobile portrait view -> 20% smaller (2em -> 1.6em) */
@media (max-width: 767px) and (orientation: portrait) {
  .elementor-9 .elementor-element-d4779b1 .scuderi-hero-trades,
  .elementor-14 .elementor-element-cb37fd8 .scuderi-hero-trades {
    font-size: 1.6em;
  }
}

/* Services page, line break after "Plâtrerie ·" (services/index.html) -> only in the mobile portrait view: the line on 2 lines
   ("Peinture · Façade · Plâtrerie ·" / "Rénovation") instead of overflowing the narrow column; one line on the other views */
.scuderi-hero-trades__break {
  display: none;
}

@media (max-width: 767px) and (orientation: portrait) {
  .elementor-14 .elementor-element-cb37fd8 .scuderi-hero-trades__break {
    display: inline;
  }
}

/* same in the tablet portrait view (the red line broken after "Plâtrerie ·"), and the heading "Une Offre Complète" (3fc490b) on one line
   there (it wrapped before "Complète" in the narrow text column) */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .elementor-14 .elementor-element-cb37fd8 .scuderi-hero-trades__break {
    display: inline;
  }

  .elementor-14 .elementor-element-3fc490b .elementor-heading-title {
    white-space: nowrap;
  }
}

/* Home page "A Propos de Nous" feature boxes ("Savoir-Faire Expert", "Axe Client") -> title vertically centered on its icon
   (icon on the left; on phones the icon is above the title) */
@media (min-width: 768px) {
  #page .elementor-9 .elementor-element.elementor-element-fb56f92 .elementor-icon-box-wrapper,
  #page .elementor-9 .elementor-element.elementor-element-3b62b23 .elementor-icon-box-wrapper {
    align-items: center;
  }
}

/* Home page hero moved down: plaster band reaching up behind the gap (and behind the header) on all screens */
.elementor-9 .elementor-element.elementor-element-2339f9d::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: calc(90px + 4.5vh);
  background-color: #faf9f7;
  background-image: var(--plaster-texture);
  background-repeat: repeat;
  background-size: 600px 600px;
  z-index: -1;
  pointer-events: none;
}

/* Home page contact form container -> target of the "Devis Gratuit" buttons (#formulaire-devis), Offres page form container -> target of the
   "Profiter de l’Offre" button (#formulaire-offre): stops 120px below the top of the screen,
   clear of the fixed header buttons, with a smooth scroll to it; Services page "Peinture", "Plâtrerie" and "Rénovation" cards -> targets
   of the Home page "Nos Services" "Découvrir" buttons (services/index.html#peinture...), same stop */
#formulaire-devis,
#formulaire-offre,
#peinture,
#platrerie,
#renovation {
  scroll-margin-top: 120px;
}

html:has(#formulaire-devis),
html:has(#formulaire-offre) {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html:has(#formulaire-devis),
  html:has(#formulaire-offre) {
    scroll-behavior: auto;
  }
}

/* contact form -> less space between each field name and its field (15px -> 6px) */
#page #wpforms-form-162 .wpforms-field-label {
  margin-bottom: 6px;
}

/* contact form -> "Service souhaité" drop-down list (built by js/custom.js) in the style of the text fields of the form:
   same box (50px, 12px padding, 1px #d1d1d1 border, 5px corners, light shadow, Open Sans 15px / 24px, #475569 text) with a chevron at the right,
   and its options in a list of the same style under it, instead of the system menu of the browser */
#page .scuderi-select {
  position: relative;
}

/* native select kept for the form data and the validation, invisible over the button */
#page .scuderi-select select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

#page .scuderi-select__button {
  display: flex;
  align-items: center;
  width: 100%;
  height: 50px;
  margin: 0;
  padding: 12px 40px 12px 12px;
  border: 1px solid #d1d1d1;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  color: #475569;
  font-family: "Open Sans", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  cursor: pointer;
  transition: border-color 0.2s linear;
}

#page .scuderi-select__button:hover,
#page .scuderi-select__button:focus {
  border-color: #d1d1d1;
  background: #fff;
  color: #475569;
  outline: none;
}

#page .scuderi-select__button:focus-visible,
#page .scuderi-select.is-open .scuderi-select__button {
  border-color: var(--ast-global-color-2); /* navy #00205b while it is used */
}

#page .scuderi-select.is-invalid .scuderi-select__button {
  border-color: var(--ast-global-color-0); /* red #e7194f when sent without a service */
}

#page .scuderi-select__value {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* chevron in the text color, turned up while the list is open */
#page .scuderi-select__button::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 12px;
  height: 8px;
  margin-top: -4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23475569' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 12px 8px;
  transition: transform 0.2s ease;
}

#page .scuderi-select.is-open .scuderi-select__button::after {
  transform: rotate(180deg);
}

#page .scuderi-select__list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  border: 1px solid #d1d1d1;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 10px 24px rgba(0, 32, 91, 0.14);
}

#page .scuderi-select__list[hidden] {
  display: none;
}

#page .scuderi-select__option {
  margin: 0;
  padding: 10px 12px;
  list-style: none;
  color: #475569;
  font-family: "Open Sans", sans-serif;
  font-size: 15px;
  line-height: 24px;
  cursor: pointer;
}

#page .scuderi-select__option.is-active {
  background: var(--ast-global-color-4); /* light grey #f1f6fa */
  color: var(--ast-global-color-2);
}

#page .scuderi-select__option[aria-selected="true"] {
  color: var(--ast-global-color-2);
  font-weight: 600;
}

/* Header title (SCUDERI / RENOVATION + subtitle) -> ported from the _ARCHIVE project */
.scuderi-title {
  display: flex;
  justify-content: center;
  text-align: center;
  width: 100%;
  /* 28px cancels the -28px bottom margin of the heading above (elementor-element-3623737)
     + 40px of space above the title, the 12px section gap applies on both sides (60px margin below the title) */
  margin-top: 68px;
}

.header__box-title {
  width: 47.25dvw; /* 60dvw -25%, then +5% */
  z-index: 0;
  margin-bottom: 60px; /* This margin provides spaces between the title and the content below (40px + 20px) */
}

/* Home page "Pourquoi nous choisir" section (ae40ffb) -> what goes beyond its sides clipped: the RENOVATION image of the animated title
   waits 100px on the right of its place before sliding in (moveInRight), beyond the right edge of the screen when the title is wide
   (mobile views): the page was wider than the screen (a white band on the right, the page scrolling sideways) */
.elementor-9 .elementor-element.elementor-element-ae40ffb {
  overflow-x: clip;
}

/* mobile portrait view -> the animated title 90% of the screen width */
@media (max-width: 767px) and (orientation: portrait) {
  .header__box-title {
    width: 90vw;
    width: 90dvw;
  }
}

/* tablet portrait view -> the animated title 15% bigger, twice: 47.25dvw -> 54.34dvw -> 62.49dvw */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .header__box-title {
    width: 62.49vw;
    width: 62.49dvw;
  }
}

/* mobile landscape view (landscape, at most 500px tall) -> the animated title 10% bigger, 3 times: 47.25dvw -> 51.975dvw -> 57.17dvw
   -> 62.89dvw */
@media (orientation: landscape) and (max-height: 500px) {
  .header__box-title {
    width: 62.89vw;
    width: 62.89dvw;
    margin-bottom: 30.5px; /* 50px between the subtitle and the heading below (60px: 79.5px) */
  }

  /* 50px between the "// Pourquoi nous choisir" label and the SCUDERI image (68px: 77.2px), the same as below the title */
  .scuderi-title {
    margin-top: 40.8px;
  }

  /* the "// Pourquoi nous choisir" label closer to the top of the section (top padding of the section content 120px -> 50px) */
  .elementor-9 .elementor-element.elementor-element-ae40ffb > .e-con-inner {
    padding-top: 50px;
  }

  /* the heading below the title ("L'exigence d'un travail haut de gamme, la transparence d'un devis clair.") on 2 lines: over the whole
     width of the section (without the 15% side paddings of elementor), its 2 lines balanced */
  .elementor-9 .elementor-element.elementor-element-5d67ae2 > .elementor-widget-container {
    padding-left: 0;
    padding-right: 0;
  }

  .elementor-9 .elementor-element.elementor-element-5d67ae2 .elementor-heading-title {
    text-wrap: balance;
  }
}

.header__box-title--scuderi {
  display: block;
  width: 100%;
  animation-name: moveInLeft;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  line-height: 1;
  z-index: 1;
}

.header__box-title--renovation {
  display: block;
  width: 100%;
  animation: moveInRight 1s ease-out;
}

/* brighter images with a light glow */
.header__box-title img {
  filter: brightness(1.2) drop-shadow(0 0 6px rgba(255, 255, 255, 0.7)) drop-shadow(0 0 14px rgba(255, 255, 255, 0.4));
}

/* neon tube effect -> loops once the move-in animation (1s) is over, different durations so both tubes flicker independently */
.header__box-title img.header__box-title--scuderi {
  animation: moveInLeft 1s ease-out, neonTube 7.5s linear 1s infinite;
}

.header__box-title img.header__box-title--renovation {
  animation: moveInRight 1s ease-out, neonTube 8s linear 1s infinite;
}

@media (prefers-reduced-motion: reduce) {
  .header__box-title img.header__box-title--scuderi,
  .header__box-title img.header__box-title--renovation {
    animation: none;
  }
}

/* animations wait on their first frame until the title comes into view (is-waiting removed by js/custom.js) */
.scuderi-title .header__box-title.is-waiting,
.scuderi-title .header__box-title.is-waiting * {
  animation-play-state: paused;
}

.scuderi-title .header-primary {
  margin: 0;
  font-family: "Lato", sans-serif;
  color: #ffffff; /* brighter than the archive #ece7e7d6 */
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.7), 0 0 14px rgba(255, 255, 255, 0.4); /* light glow */
  line-height: 0.6em; /* half the theme h1 line-height (1.2em) -> halves the height of header-primary */
  text-transform: uppercase;
  backface-visibility: hidden; /* to be used on an element where the animation flickers of blicks at the end of the animation */
}

.scuderi-title .header-primary--sub {
  display: block;
  text-transform: capitalize;
  font-size: 1.378dvw; /* 1.05dvw +25%, then +5% */
  font-weight: 400;
  letter-spacing: 0.77dvw; /* fallback, js/custom.js fits it to the width of header__box-title--scuderi */
  white-space: nowrap; /* keeps the subtitle on one line */
  animation: moveInBottom 0.5s ease-out 0.4s;
  animation-fill-mode: backwards; /* Makes the subtitle invisible prior the animation starts*/
}

/* like moveInLeft (scuderi-hero-logo__title), coming from the top, with a small bounce at the end ("Offre Speciale" button) */
@keyframes moveInTop {
  0% {
    opacity: 0;
    transform: translateY(-100px);
  }
  55% {
    opacity: 1;
    transform: translateY(8px);
  }
  70% {
    transform: translateY(-4px);
  }
  82% {
    transform: translateY(2px);
  }
  92% {
    transform: translateY(-1px);
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}

@keyframes moveInLeft {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }
  80% {
    transform: translateX(10px);
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}

@keyframes moveInRight {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }
  80% {
    transform: translateX(-10px);
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}

@keyframes moveInBottom {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}

@keyframes neonTube {
  0% {
    filter: brightness(1.2) drop-shadow(0 0 6px rgba(255, 255, 255, 0.7)) drop-shadow(0 0 14px rgba(255, 255, 255, 0.4)); /* steady glow */
  }
  18% {
    filter: brightness(1.35) drop-shadow(0 0 8px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 22px rgba(255, 255, 255, 0.6)); /* slow swell */
  }
  32% {
    filter: brightness(1.2) drop-shadow(0 0 6px rgba(255, 255, 255, 0.7)) drop-shadow(0 0 14px rgba(255, 255, 255, 0.4));
  }
  40% {
    filter: brightness(1.2) drop-shadow(0 0 6px rgba(255, 255, 255, 0.7)) drop-shadow(0 0 14px rgba(255, 255, 255, 0.4)); /* flicker */
  }
  40.6% {
    filter: brightness(0.75) drop-shadow(0 0 1px rgba(255, 255, 255, 0.15)) drop-shadow(0 0 2px rgba(255, 255, 255, 0));
  }
  41.2% {
    filter: brightness(1.35) drop-shadow(0 0 8px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 22px rgba(255, 255, 255, 0.6));
  }
  41.8% {
    filter: brightness(0.75) drop-shadow(0 0 1px rgba(255, 255, 255, 0.15)) drop-shadow(0 0 2px rgba(255, 255, 255, 0));
  }
  42.4% {
    filter: brightness(1.05) drop-shadow(0 0 4px rgba(255, 255, 255, 0.5)) drop-shadow(0 0 10px rgba(255, 255, 255, 0.25));
  }
  43.4% {
    filter: brightness(0.75) drop-shadow(0 0 1px rgba(255, 255, 255, 0.15)) drop-shadow(0 0 2px rgba(255, 255, 255, 0));
  }
  44.6% {
    filter: brightness(1.2) drop-shadow(0 0 6px rgba(255, 255, 255, 0.7)) drop-shadow(0 0 14px rgba(255, 255, 255, 0.4));
  }
  60% {
    filter: brightness(1.05) drop-shadow(0 0 4px rgba(255, 255, 255, 0.5)) drop-shadow(0 0 10px rgba(255, 255, 255, 0.25)); /* slow fade */
  }
  74% {
    filter: brightness(1.35) drop-shadow(0 0 8px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 22px rgba(255, 255, 255, 0.6)); /* slow swell */
  }
  86% {
    filter: brightness(1.2) drop-shadow(0 0 6px rgba(255, 255, 255, 0.7)) drop-shadow(0 0 14px rgba(255, 255, 255, 0.4)); /* short flicker */
  }
  86.5% {
    filter: brightness(0.75) drop-shadow(0 0 1px rgba(255, 255, 255, 0.15)) drop-shadow(0 0 2px rgba(255, 255, 255, 0));
  }
  87.2% {
    filter: brightness(1.2) drop-shadow(0 0 6px rgba(255, 255, 255, 0.7)) drop-shadow(0 0 14px rgba(255, 255, 255, 0.4));
  }
  100% {
    filter: brightness(1.2) drop-shadow(0 0 6px rgba(255, 255, 255, 0.7)) drop-shadow(0 0 14px rgba(255, 255, 255, 0.4));
  }
}

/* same blinking as neonTube (header__box-title--scuderi) for the white text of the "Offre Speciale" button:
   white letters with a medium glow, only slightly changing in brightness (slightly dimmer at the dark moments of the flickers) */
@keyframes neonTextWhite {
  0% {
    color: #ffffff; text-shadow: 0 0 2px rgba(255, 255, 255, 0.75), 0 0 6px rgba(255, 205, 215, 0.4); /* steady glow */
  }
  18% {
    color: #ffffff; text-shadow: 0 0 3px rgba(255, 255, 255, 0.85), 0 0 8px rgba(255, 205, 215, 0.5); /* slow swell */
  }
  32% {
    color: #ffffff; text-shadow: 0 0 2px rgba(255, 255, 255, 0.75), 0 0 6px rgba(255, 205, 215, 0.4);
  }
  40% {
    color: #ffffff; text-shadow: 0 0 2px rgba(255, 255, 255, 0.75), 0 0 6px rgba(255, 205, 215, 0.4); /* flicker */
  }
  40.6% {
    color: rgba(255, 255, 255, 0.82); text-shadow: 0 0 1px rgba(255, 255, 255, 0.4);
  }
  41.2% {
    color: #ffffff; text-shadow: 0 0 3px rgba(255, 255, 255, 0.85), 0 0 8px rgba(255, 205, 215, 0.5);
  }
  41.8% {
    color: rgba(255, 255, 255, 0.82); text-shadow: 0 0 1px rgba(255, 255, 255, 0.4);
  }
  42.4% {
    color: #f7eef0; text-shadow: 0 0 2px rgba(255, 255, 255, 0.6), 0 0 5px rgba(255, 205, 215, 0.3);
  }
  43.4% {
    color: rgba(255, 255, 255, 0.82); text-shadow: 0 0 1px rgba(255, 255, 255, 0.4);
  }
  44.6% {
    color: #ffffff; text-shadow: 0 0 2px rgba(255, 255, 255, 0.75), 0 0 6px rgba(255, 205, 215, 0.4);
  }
  60% {
    color: #f7eef0; text-shadow: 0 0 2px rgba(255, 255, 255, 0.6), 0 0 5px rgba(255, 205, 215, 0.3); /* slow fade */
  }
  74% {
    color: #ffffff; text-shadow: 0 0 3px rgba(255, 255, 255, 0.85), 0 0 8px rgba(255, 205, 215, 0.5); /* slow swell */
  }
  86% {
    color: #ffffff; text-shadow: 0 0 2px rgba(255, 255, 255, 0.75), 0 0 6px rgba(255, 205, 215, 0.4); /* short flicker */
  }
  86.5% {
    color: rgba(255, 255, 255, 0.82); text-shadow: 0 0 1px rgba(255, 255, 255, 0.4);
  }
  87.2% {
    color: #ffffff; text-shadow: 0 0 2px rgba(255, 255, 255, 0.75), 0 0 6px rgba(255, 205, 215, 0.4);
  }
  100% {
    color: #ffffff; text-shadow: 0 0 2px rgba(255, 255, 255, 0.75), 0 0 6px rgba(255, 205, 215, 0.4);
  }
}


/* same blinking as neonTube (header__box-title--scuderi), with a vivid red neon glow, stronger and wider ("Offre du Mois" button) */
@keyframes neonTubeRed {
  0% {
    filter: brightness(1.15) drop-shadow(0 0 8px rgba(255, 40, 80, 0.9)) drop-shadow(0 0 22px rgba(255, 20, 60, 0.65)); /* steady glow */
  }
  18% {
    filter: brightness(1.35) drop-shadow(0 0 12px rgba(255, 60, 100, 1)) drop-shadow(0 0 34px rgba(255, 20, 60, 0.9)); /* slow swell */
  }
  32% {
    filter: brightness(1.15) drop-shadow(0 0 8px rgba(255, 40, 80, 0.9)) drop-shadow(0 0 22px rgba(255, 20, 60, 0.65));
  }
  40% {
    filter: brightness(1.15) drop-shadow(0 0 8px rgba(255, 40, 80, 0.9)) drop-shadow(0 0 22px rgba(255, 20, 60, 0.65)); /* flicker */
  }
  40.6% {
    filter: brightness(0.7) drop-shadow(0 0 1px rgba(255, 40, 80, 0.15)) drop-shadow(0 0 2px rgba(255, 20, 60, 0));
  }
  41.2% {
    filter: brightness(1.35) drop-shadow(0 0 12px rgba(255, 60, 100, 1)) drop-shadow(0 0 34px rgba(255, 20, 60, 0.9));
  }
  41.8% {
    filter: brightness(0.7) drop-shadow(0 0 1px rgba(255, 40, 80, 0.15)) drop-shadow(0 0 2px rgba(255, 20, 60, 0));
  }
  42.4% {
    filter: brightness(1.0) drop-shadow(0 0 5px rgba(255, 40, 80, 0.55)) drop-shadow(0 0 12px rgba(255, 20, 60, 0.3));
  }
  43.4% {
    filter: brightness(0.7) drop-shadow(0 0 1px rgba(255, 40, 80, 0.15)) drop-shadow(0 0 2px rgba(255, 20, 60, 0));
  }
  44.6% {
    filter: brightness(1.15) drop-shadow(0 0 8px rgba(255, 40, 80, 0.9)) drop-shadow(0 0 22px rgba(255, 20, 60, 0.65));
  }
  60% {
    filter: brightness(1.0) drop-shadow(0 0 5px rgba(255, 40, 80, 0.55)) drop-shadow(0 0 12px rgba(255, 20, 60, 0.3)); /* slow fade */
  }
  74% {
    filter: brightness(1.35) drop-shadow(0 0 12px rgba(255, 60, 100, 1)) drop-shadow(0 0 34px rgba(255, 20, 60, 0.9)); /* slow swell */
  }
  86% {
    filter: brightness(1.15) drop-shadow(0 0 8px rgba(255, 40, 80, 0.9)) drop-shadow(0 0 22px rgba(255, 20, 60, 0.65)); /* short flicker */
  }
  86.5% {
    filter: brightness(0.7) drop-shadow(0 0 1px rgba(255, 40, 80, 0.15)) drop-shadow(0 0 2px rgba(255, 20, 60, 0));
  }
  87.2% {
    filter: brightness(1.15) drop-shadow(0 0 8px rgba(255, 40, 80, 0.9)) drop-shadow(0 0 22px rgba(255, 20, 60, 0.65));
  }
  100% {
    filter: brightness(1.15) drop-shadow(0 0 8px rgba(255, 40, 80, 0.9)) drop-shadow(0 0 22px rgba(255, 20, 60, 0.65));
  }
}

/* Navigation bar -> transparent background */
.ast-primary-header-bar,
.ast-primary-header-bar.main-header-bar {
  background-color: transparent;
  background-image: none;
}

/* Navigation menu -> font size +25% in the desktop view (16px -> 20px) */
#ast-desktop-header .main-header-menu .menu-item > .menu-link {
  font-size: 20px;
}

/* Navigation menu -> bold font (desktop header and tablet / mobile menu) */
#masthead .main-header-menu .menu-item > .menu-link {
  font-weight: 700;
}

/* Navigation menu -> links in their standard state in the theme navy (#00205b), like the mobile home and menu buttons
   (the active page link stays red, the hover color unchanged) */
#ast-desktop-header .main-header-menu .menu-item:not(.current-menu-item) > .menu-link:not(:hover):not(:focus) {
  color: var(--ast-global-color-2);
}

/* Navigation menu -> active page link brighter (#c20e42 -> #e7194f, the "Get Quote" color) */
#masthead .main-header-menu .current-menu-item > .menu-link,
#masthead .main-header-menu .current-menu-item > .menu-link:hover {
  color: var(--ast-global-color-0);
}

/* Navigation menu -> no underline effect on hover */
#ast-desktop-header .main-header-menu.ast-menu-hover-style-underline > .menu-item > .menu-link::before {
  content: none;
}

/* Desktop view -> top of the "Get Quote" button aligned with the top of the navigation font (capital letters) */
#ast-desktop-header .ast-builder-button-wrap {
  position: relative;
  top: 12.72px; /* menu cap top (32.05px) - button top (19.33px) */
}

#ast-desktop-header .ast-builder-button-wrap .ast-custom-button {
  white-space: nowrap; /* same button height on all desktop widths */
}

/* desktop view, Home, About and Services pages -> the "Offre du Mois" button leaves the navigation bar: 20% of the screen height lower, 5% to the left
   and 1.5 times bigger (size and font), behind the hero image (the header bar is at z-index 4, the hero images above it) */
@media (min-width: 922px) {
  body.home #ast-desktop-header .ast-builder-button-wrap,
  body.page-id-12 #ast-desktop-header .ast-builder-button-wrap,
  body.page-id-14 #ast-desktop-header .ast-builder-button-wrap {
    transform: translate(0, 15vh) scale(2.1375); /* 15% of the screen height lower, 2.25 x - 5% */
    transform-origin: center center;
  }

  /* Home page -> the button keeps the same place on the hero image whatever the screen size and scroll (offsets set by js/custom.js),
     15% of the screen height lower without JS */
  body.home #ast-desktop-header .ast-builder-button-wrap {
    transform: translate(var(--offer-x, 0px), var(--offer-y, 15vh)) scale(2.1375);
  }

  /* the button (glass star, text and neon outline) comes from the top like the hero logo title (moveInLeft from the left), as the last
     element of the header; then the neon loops. Red neon tube loop blinking like the "Why Choose Us" title image (header__box-title--scuderi): brightness and red glow varying with flickers,
     starting once the rise-in of the button is over (Home 2.2s, About 1.75s, Services 1.9s + 0.55s) */
  body.home #ast-desktop-header .ast-builder-button-wrap .ast-custom-button {
    animation: moveInTop 1s ease-out 2.2s backwards, neonTextWhite 7.5s linear 3.2s infinite;
  }

  body.page-id-12 #ast-desktop-header .ast-builder-button-wrap .ast-custom-button {
    animation: moveInTop 1s ease-out 1.75s backwards, neonTextWhite 7.5s linear 2.75s infinite;
  }

  body.page-id-14 #ast-desktop-header .ast-builder-button-wrap .ast-custom-button {
    animation: moveInTop 1s ease-out 1.9s backwards, neonTextWhite 7.5s linear 2.9s infinite;
  }
}

@media (min-width: 922px) and (prefers-reduced-motion: reduce) {
  body.home #ast-desktop-header .ast-builder-button-wrap::before,
  body.page-id-12 #ast-desktop-header .ast-builder-button-wrap::before,
  body.page-id-14 #ast-desktop-header .ast-builder-button-wrap::before,
  body.home #ast-desktop-header .ast-builder-button-wrap .ast-custom-button,
  body.page-id-12 #ast-desktop-header .ast-builder-button-wrap .ast-custom-button,
  body.page-id-14 #ast-desktop-header .ast-builder-button-wrap .ast-custom-button {
    animation: none;
  }

  /* About & Services: their hero content (moved up with a transform, its own layer) in front of the header bar (z-index 4);
     its empty area lets the clicks through to the menu */
  body.page-id-12 #content .elementor > .e-con.e-parent:first-child > .e-con-inner,
  body.page-id-14 #content .elementor > .e-con.e-parent:first-child > .e-con-inner {
    position: relative;
    z-index: 5;
    pointer-events: none;
  }

  body.page-id-12 #content .elementor > .e-con.e-parent:first-child > .e-con-inner > *,
  body.page-id-14 #content .elementor > .e-con.e-parent:first-child > .e-con-inner > * {
    pointer-events: auto;
  }
}

/* desktop view, Home, About and Services pages -> "Offre du Mois" button shaped like a red starburst (16 points, with a lighter
   star slightly turned behind it) with a white text; the shape is a background image, so the red neon glow (filter of the button)
   follows its points; the rectangular glass background and shadows of the other red buttons are not used,
   the hover pulse expands in the same shape */
:root {
  --offer-flower: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Cpolygon%20fill='%23e7194f'%20fill-opacity='0.4'%20points='58.73,4.35%2064.59,15.86%2076.14,10.09%2077.15,22.97%2090.04,22.06%2086.04,34.35%2098.29,38.44%2089.90,48.26%2099.65,56.73%2088.14,62.59%2093.91,74.14%2081.03,75.15%2081.94,88.04%2069.65,84.04%2065.56,96.29%2055.74,87.90%2047.27,97.65%2041.41,86.14%2029.86,91.91%2028.85,79.03%2015.96,79.94%2019.96,67.65%207.71,63.56%2016.10,53.74%206.35,45.27%2017.86,39.41%2012.09,27.86%2024.97,26.85%2024.06,13.96%2036.35,17.96%2040.44,5.71%2050.26,14.10'/%3E%3Cpolygon%20fill='%23e7194f'%20points='49.00,3.00%2056.02,13.69%2066.60,6.50%2069.00,19.07%2081.53,16.47%2078.93,29.00%2091.50,31.40%2084.31,41.98%2095.00,49.00%2084.31,56.02%2091.50,66.60%2078.93,69.00%2081.53,81.53%2069.00,78.93%2066.60,91.50%2056.02,84.31%2049.00,95.00%2041.98,84.31%2031.40,91.50%2029.00,78.93%2016.47,81.53%2019.07,69.00%206.50,66.60%2013.69,56.02%203.00,49.00%2013.69,41.98%206.50,31.40%2019.07,29.00%2016.47,16.47%2029.00,19.07%2031.40,6.50%2041.98,13.69'/%3E%3C/svg%3E");
}

@media (min-width: 922px) {
  body.home #ast-desktop-header .ast-builder-button-wrap .ast-custom-button,
  body.page-id-12 #ast-desktop-header .ast-builder-button-wrap .ast-custom-button,
  body.page-id-14 #ast-desktop-header .ast-builder-button-wrap .ast-custom-button {
    width: 108px;
    height: 108px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: normal;
    font-size: 15px;
    line-height: 1.1;
    color: #ffffff; /* white text */
    text-shadow: none;
    font-weight: 700;
    border: 0;
    border-radius: 0;
    /* see-through red glass with a very slight blur, cut to the star shape: an intense red kept over the center (until 62%),
       fading only close to the points to a slightly lighter and more transparent red (closest-side: 100% = the points) */
    background: radial-gradient(circle closest-side at 50% 50%, rgba(205, 0, 28, 0.8) 0%, rgba(205, 0, 28, 0.72) 62%, rgba(212, 18, 52, 0.45) 86%, rgba(230, 60, 90, 0.2) 100%) !important;
    -webkit-backdrop-filter: blur(1.5px) !important;
    backdrop-filter: blur(1.5px) !important;
    box-shadow: none !important;
    clip-path: polygon(49.00% 3.00%, 56.02% 13.69%, 66.60% 6.50%, 69.00% 19.07%, 81.53% 16.47%, 78.93% 29.00%, 91.50% 31.40%, 84.31% 41.98%, 95.00% 49.00%, 84.31% 56.02%, 91.50% 66.60%, 78.93% 69.00%, 81.53% 81.53%, 69.00% 78.93%, 66.60% 91.50%, 56.02% 84.31%, 49.00% 95.00%, 41.98% 84.31%, 31.40% 91.50%, 29.00% 78.93%, 16.47% 81.53%, 19.07% 69.00%, 6.50% 66.60%, 13.69% 56.02%, 3.00% 49.00%, 13.69% 41.98%, 6.50% 31.40%, 19.07% 29.00%, 16.47% 16.47%, 29.00% 19.07%, 31.40% 6.50%, 41.98% 13.69%);
  }

  body.home #ast-desktop-header .ast-builder-button-wrap .ast-custom-button:hover,
  body.page-id-12 #ast-desktop-header .ast-builder-button-wrap .ast-custom-button:hover,
  body.page-id-14 #ast-desktop-header .ast-builder-button-wrap .ast-custom-button:hover {
    background: radial-gradient(circle closest-side at 50% 50%, rgba(205, 0, 28, 0.88) 0%, rgba(205, 0, 28, 0.8) 62%, rgba(212, 18, 52, 0.55) 86%, rgba(230, 60, 90, 0.28) 100%) !important;
  }

  body.home #ast-desktop-header .ast-builder-button-wrap .ast-custom-button:active,
  body.page-id-12 #ast-desktop-header .ast-builder-button-wrap .ast-custom-button:active,
  body.page-id-14 #ast-desktop-header .ast-builder-button-wrap .ast-custom-button:active {
    background: radial-gradient(circle closest-side at 50% 50%, rgba(150, 0, 20, 0.92) 0%, rgba(150, 0, 20, 0.85) 62%, rgba(175, 10, 40, 0.62) 86%, rgba(200, 40, 70, 0.38) 100%) !important;
  }

  /* neon outline of the star behind the glass (a separate layer: a glow on the button itself would be cut by its star shape) */
  body.home #ast-desktop-header .ast-builder-button-wrap::before,
  body.page-id-12 #ast-desktop-header .ast-builder-button-wrap::before,
  body.page-id-14 #ast-desktop-header .ast-builder-button-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Cpolygon%20fill='%239e0026'%20fill-opacity='0.22'%20points='58.73,4.35%2064.59,15.86%2076.14,10.09%2077.15,22.97%2090.04,22.06%2086.04,34.35%2098.29,38.44%2089.90,48.26%2099.65,56.73%2088.14,62.59%2093.91,74.14%2081.03,75.15%2081.94,88.04%2069.65,84.04%2065.56,96.29%2055.74,87.90%2047.27,97.65%2041.41,86.14%2029.86,91.91%2028.85,79.03%2015.96,79.94%2019.96,67.65%207.71,63.56%2016.10,53.74%206.35,45.27%2017.86,39.41%2012.09,27.86%2024.97,26.85%2024.06,13.96%2036.35,17.96%2040.44,5.71%2050.26,14.10'/%3E%3Cpolygon%20fill='none'%20stroke='%23b3002a'%20stroke-width='2.2'%20stroke-linejoin='round'%20points='49.00,3.00%2056.02,13.69%2066.60,6.50%2069.00,19.07%2081.53,16.47%2078.93,29.00%2091.50,31.40%2084.31,41.98%2095.00,49.00%2084.31,56.02%2091.50,66.60%2078.93,69.00%2081.53,81.53%2069.00,78.93%2066.60,91.50%2056.02,84.31%2049.00,95.00%2041.98,84.31%2031.40,91.50%2029.00,78.93%2016.47,81.53%2019.07,69.00%206.50,66.60%2013.69,56.02%203.00,49.00%2013.69,41.98%206.50,31.40%2019.07,29.00%2016.47,16.47%2029.00,19.07%2031.40,6.50%2041.98,13.69'/%3E%3C/svg%3E") center / contain no-repeat;
    pointer-events: none;
  }

  body.home #ast-desktop-header .ast-builder-button-wrap::before {
    animation: moveInTop 1s ease-out 2.2s backwards, neonTubeRed 7.5s linear 3.2s infinite;
  }

  body.page-id-12 #ast-desktop-header .ast-builder-button-wrap::before {
    animation: moveInTop 1s ease-out 1.75s backwards, neonTubeRed 7.5s linear 2.75s infinite;
  }

  body.page-id-14 #ast-desktop-header .ast-builder-button-wrap::before {
    animation: moveInTop 1s ease-out 1.9s backwards, neonTubeRed 7.5s linear 2.9s infinite;
  }

  body.home #ast-desktop-header .ast-builder-button-wrap .ast-custom-button::after,
  body.page-id-12 #ast-desktop-header .ast-builder-button-wrap .ast-custom-button::after,
  body.page-id-14 #ast-desktop-header .ast-builder-button-wrap .ast-custom-button::after {
    content: none; /* the pulse copy would be cut by the star shape */
  }
}

/* narrower desktop screens -> less side padding so the one-line "Get Quote" button fits next to the menu */
@media (max-width: 1200px) {
  #ast-desktop-header .ast-builder-button-wrap .ast-custom-button {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Header -> left & right margins of the header container 50% smaller (margins = (width - 1240px) / 4 instead of / 2) */
#ast-desktop-header .ast-primary-header-bar > .site-primary-header-wrap {
  max-width: calc((100% + 1240px) / 2);
}


/* Header + first section of each page + Home page "About Us" and "Recent Projects" sections + About page "Our Simplified Painting Process" section
   -> textured background like a white synthetic / sandblasted plaster
   (seamless SVG relief: rounded noise lumps lit from the top left with feDiffuseLighting, mapped to light whites) */
:root {
  --plaster-texture: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%27600%27%20height=%27600%27%3E%3Cfilter%20id=%27p%27%20filterUnits=%27userSpaceOnUse%27%20primitiveUnits=%27userSpaceOnUse%27%20x=%27-16%27%20y=%27-16%27%20width=%27632%27%20height=%27632%27%20color-interpolation-filters=%27sRGB%27%3E%3CfeTurbulence%20type=%27fractalNoise%27%20baseFrequency=%270.13%27%20numOctaves=%274%27%20seed=%275%27%20stitchTiles=%27stitch%27%20x=%270%27%20y=%270%27%20width=%27600%27%20height=%27600%27%20result=%27n%27/%3E%3CfeTile%20in=%27n%27%20result=%27t%27/%3E%3CfeComponentTransfer%20in=%27t%27%20result=%27h%27%3E%3CfeFuncA%20type=%27table%27%20tableValues=%270%200.05%200.25%200.7%200.95%201%27/%3E%3C/feComponentTransfer%3E%3CfeDiffuseLighting%20in=%27h%27%20surfaceScale=%272.2%27%20diffuseConstant=%271%27%20lighting-color=%27%23ffffff%27%20result=%27l%27%3E%3CfeDistantLight%20azimuth=%27225%27%20elevation=%2760%27/%3E%3C/feDiffuseLighting%3E%3CfeComponentTransfer%20in=%27l%27%3E%3CfeFuncR%20type=%27linear%27%20slope=%270.18%27%20intercept=%270.83%27/%3E%3CfeFuncG%20type=%27linear%27%20slope=%270.18%27%20intercept=%270.826%27/%3E%3CfeFuncB%20type=%27linear%27%20slope=%270.18%27%20intercept=%270.818%27/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect%20x=%27-16%27%20y=%27-16%27%20width=%27632%27%20height=%27632%27%20filter=%27url%28%23p%29%27/%3E%3C/svg%3E");
}

#masthead,
#content .elementor > .e-con.e-parent:first-child,
#page .elementor-element.elementor-element-e7b49a5,
#page .elementor-element.elementor-element-d0d2859,
#page .elementor-element.elementor-element-058315a {
  background-color: #faf9f7; /* average tone of the texture */
  background-image: var(--plaster-texture);
  background-repeat: repeat;
  background-size: 600px 600px;
}

/* Home page "Témoignages" section -> testimonial texts justified (elementor centers the whole card: the names stay centered),
   the last line of each text aligned to the left */
#page .elementor-testimonial-wrapper .elementor-testimonial-content {
  text-align: justify;
}

/* Home page "Témoignages" section -> place and type of work after the name (", Pully, Peinture") in regular weight, the name stays bold */
#page .elementor-testimonial-name .scuderi-testimonial-place {
  font-weight: 400;
}

/* Services page -> description texts of the 4 service cards (c7c0e28, 5af7409, f338e26, 83eaa20) justified,
   the last line of each text aligned to the left */
body.page-id-14 #page .elementor-element-c7c0e28,
body.page-id-14 #page .elementor-element-5af7409,
body.page-id-14 #page .elementor-element-f338e26,
body.page-id-14 #page .elementor-element-83eaa20 {
  text-align: justify;
}

/* Home & Contact pages "Coordonnées" section -> phone number as a call link (tel:, same number as the hero "Appeler" button)
   and e-mail address as a mailto: link, looking like the other contact details (no link color or underline) */
#page .scuderi-phone-link,
#page .scuderi-phone-link:hover,
#page .scuderi-phone-link:focus,
#page .scuderi-email-link,
#page .scuderi-email-link:hover,
#page .scuderi-email-link:focus {
  color: inherit;
  text-decoration: none;
}

/* Home page "Pourquoi nous choisir" section (ae40ffb), mobile portrait, mobile landscape and tablet portrait views -> the 3 feature boxes
   (ca2d859, de09516, debaa35: icon above its title and text) centered like the 2 headings above them (elementor aligns them on the left) */
@media (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-height: 500px), (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .elementor-9 .elementor-element.elementor-element-ca2d859 .elementor-icon-box-wrapper,
  .elementor-9 .elementor-element.elementor-element-de09516 .elementor-icon-box-wrapper,
  .elementor-9 .elementor-element.elementor-element-debaa35 .elementor-icon-box-wrapper {
    align-items: center;
    text-align: center;
  }
}

/* Home page "Qui sommes-nous" section, mobile portrait, mobile landscape and tablet portrait views -> the "Savoir-Faire Expert" and
   "Axé Client" feature boxes (fb56f92, 3b62b23, with their icons) hidden: their whole row (ed06a52, nothing else in it), so that no empty
   gap of the column stays */
@media (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-height: 500px),
  (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .elementor-9 .elementor-element.elementor-element-ed06a52 {
    display: none;
  }
}

/* Home page "Qui sommes-nous" section, mobile portrait view -> the 2 pictures (images column 252c5ae) 20% (of its height) higher
   (5% + 10% + 5%): 20% -> 0 */
@media (max-width: 767px) and (orientation: portrait) {
  #page .elementor-element.elementor-element-252c5ae {
    transform: none;
  }
}

/* "Coordonnées" boxes (Home & Offres pages: address f05115e, e-mail 46999e2, phone 586df24), mobile portrait and landscape views -> their titles
   ("Adresse", "E-mail", "Téléphone") hidden, the value ("1008 Prilly", the e-mail address, the phone number) on the right of its icon,
   vertically centered on it, the pair centered in the box (elementor puts the icon above the texts on mobile) */
@media (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-height: 500px) {
  #page .elementor-element.elementor-element-f05115e .elementor-icon-box-title,
  #page .elementor-element.elementor-element-46999e2 .elementor-icon-box-title,
  #page .elementor-element.elementor-element-586df24 .elementor-icon-box-title {
    display: none;
  }

  #page .elementor-element.elementor-element-f05115e .elementor-icon-box-wrapper,
  #page .elementor-element.elementor-element-46999e2 .elementor-icon-box-wrapper,
  #page .elementor-element.elementor-element-586df24 .elementor-icon-box-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: start;
    gap: 15px;
  }

  #page .elementor-element.elementor-element-f05115e .elementor-icon-box-icon,
  #page .elementor-element.elementor-element-46999e2 .elementor-icon-box-icon,
  #page .elementor-element.elementor-element-586df24 .elementor-icon-box-icon {
    display: flex;
    margin: 0;
  }

  #page .elementor-element.elementor-element-f05115e .elementor-icon-box-content,
  #page .elementor-element.elementor-element-46999e2 .elementor-icon-box-content,
  #page .elementor-element.elementor-element-586df24 .elementor-icon-box-content {
    flex-grow: 0;
    width: auto;
    align-self: center;
  }

  #page .elementor-element.elementor-element-f05115e .elementor-icon-box-description,
  #page .elementor-element.elementor-element-46999e2 .elementor-icon-box-description,
  #page .elementor-element.elementor-element-586df24 .elementor-icon-box-description {
    margin: 0;
    white-space: nowrap; /* the e-mail address on one line (it broke at its hyphen in the narrower landscape boxes) */
  }

  /* the 3 widgets over the whole width of their box (the address one was only as wide as its content, on the left of its box) */
  #page .elementor-element.elementor-element-f05115e,
  #page .elementor-element.elementor-element-46999e2,
  #page .elementor-element.elementor-element-586df24 {
    width: 100%;
    max-width: 100%;
    align-self: stretch;
  }
}

/* About page, mobile portrait view -> the hero image (wp-image-832, z-index 1 in the hero) reaching below the hero: the navy "Notre
   Histoire" section below it (d34f822) drawn in front of it, so that its lower part goes behind the navy background */
@media (max-width: 767px) and (orientation: portrait) {
  body.page-id-12 #page .elementor-element.elementor-element-d34f822 {
    z-index: 2;
  }

  /* same on the Services page: its navy cards section (24b6ae4) in front of the hero image (wp-image-834) */
  body.page-id-14 #page .elementor-element.elementor-element-24b6ae4 {
    position: relative;
    z-index: 2;
  }
}

/* About and Services pages, mobile portrait view -> the hero texts starting at exactly the same place on both pages: the hero content
   aligned at the top of the hero (instead of vertically centered: its position then depended on the amount of text and on the hero
   height) with 32px above it on the screen (its top padding divided by the zoom of the hero content, set by js/custom.js) */
@media (max-width: 767px) and (orientation: portrait) {
  body.page-id-12 #content .elementor > .e-con.e-parent:first-child > .e-con-inner,
  body.page-id-14 #content .elementor > .e-con.e-parent:first-child > .e-con-inner {
    align-content: flex-start;
    padding-top: calc(32px / var(--hero-scale, 1));
  }
}

/* About page "Notre Histoire" section (d34f822), mobile portrait view -> the texts (3071cc9) above the picture (column 9512c27: Michele
   cut-out and the "15+ Années d'expérience" box); the picture standing on the bottom of the navy section: the column moved down over
   the 64px bottom padding of the section content and 30px beyond the section, its bottom hidden there (clip-path of the section, nothing
   clipped on its other sides); the "15+" box placed over the lower right of the picture (absolute) so that it does not add to the column
   height and stays visible (its bottom 50px above the visible bottom of the picture: 30px hidden + 20px) */
@media (max-width: 767px) and (orientation: portrait) {
  body.page-id-12 #page .elementor-element.elementor-element-3071cc9 {
    order: -1;
  }

  body.page-id-12 #page .elementor-element.elementor-element-9512c27 {
    margin-bottom: -94px; /* 64px + 30px */
  }

  body.page-id-12 #page .elementor-element.elementor-element-e573b43 {
    position: absolute;
    right: 5%; /* 5% (of the picture column width) to the left of the right edge */
    bottom: 50px;
    margin: 0;
  }

  body.page-id-12 #page .elementor-element.elementor-element-d34f822 {
    clip-path: inset(-3000px -3000px 0 -3000px);
  }
}

/* About page "Notre Histoire" section, mobile portrait view -> the texts 5% (of their height) higher ("translate", layout unchanged);
   in the "15+ Années d'expérience" box, "15+" on the right of the paint roller icon (vertically centered on it), "Années d'expérience"
   below them (a grid: icon and title on the first row, the description over the whole width on the second) */
@media (max-width: 767px) and (orientation: portrait) {
  body.page-id-12 #page .elementor-element.elementor-element-3071cc9 {
    translate: 0 -5%;
  }

  body.page-id-12 #page .elementor-element.elementor-element-e573b43 .elementor-icon-box-wrapper {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 12px;
    row-gap: 2px; /* 15px from elementor */
    text-align: start;
  }

  body.page-id-12 #page .elementor-element.elementor-element-e573b43 .elementor-icon-box-content {
    display: contents;
  }

  /* the icon over both rows, vertically centered on the 2 lines of text ("15+" and "Années d'expérience") */
  body.page-id-12 #page .elementor-element.elementor-element-e573b43 .elementor-icon-box-icon {
    display: flex;
    margin: 0;
    grid-row: 1 / span 2;
    align-self: center;
  }

  /* the round icon 10% bigger: 40px -> 44px (the roller 16px -> 17.6px, the padding around it 12px -> 13.2px) */
  body.page-id-12 #page .elementor-element.elementor-element-e573b43 .elementor-icon {
    font-size: 17.6px;
    padding: 13.2px;
  }

  /* "15+" and "Années d'expérience" one under the other in the second column, together centered on the icon */
  body.page-id-12 #page .elementor-element.elementor-element-e573b43 .elementor-icon-box-title {
    margin: 0;
    grid-column: 2;
    grid-row: 1;
    align-self: end;
  }

  /* "Années d'expérience" under "15+", at the same distance from the left border (second column) */
  body.page-id-12 #page .elementor-element.elementor-element-e573b43 .elementor-icon-box-description {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin-top: 0;
  }
}

/* Home page hero schedule -> the " · " separator only shown on one line (mobile portrait view, see the schedule rules above) */
.scuderi-hours-sep {
  display: none;
}

/* About page "Notre Équipe" name boxes (0b73048, 79e2dd3, 339ef9c), mobile portrait view -> the job title under each name with a smaller
   line height (1.5 -> 1.2), closer lines when it wraps */
@media (max-width: 767px) and (orientation: portrait) {
  #page .elementor-element-0b73048 .elementor-icon-box-description,
  #page .elementor-element-79e2dd3 .elementor-icon-box-description,
  #page .elementor-element-339ef9c .elementor-icon-box-description {
    line-height: 1.2;
  }
}

/* Services page cards section (24b6ae4), mobile portrait view -> the first card ("Peinture", its image overhanging the top of the card)
   closer to the top of the section: top padding of the section content 220px -> 140px */
@media (max-width: 767px) and (orientation: portrait) {
  body.page-id-14 #page .elementor-element.elementor-element-24b6ae4 > .e-con-inner {
    padding-top: 140px;
  }
}

/* Home page hero, mobile landscape view (phones turned sideways: landscape, at most 500px tall) -> the texts on the left of the hero (its
   content box, narrow at this zoom, no longer centered: against the left padding of the hero) and the 3 carousel pictures 35% bigger
   ("scale", from their bottom right corner: they grow to the left and up, still standing on the bottom of the hero) and moved left
   (their right edge 12% of the hero content width inside the hero instead of 7% beyond it) */
@media (orientation: landscape) and (max-height: 500px) {
  .elementor-9 .elementor-element.elementor-element-2339f9d > .e-con-inner {
    margin-left: 0;
  }

  /* the texts starting at the right edge of the home button of the fixed header bar (16px from the left + its logo, 46.8px wide;
     51.3px from 922px wide) */
  .elementor-9 .elementor-element.elementor-element-2339f9d {
    --padding-left: 62.8px;
  }
}

@media (orientation: landscape) and (max-height: 500px) and (min-width: 922px) {
  .elementor-9 .elementor-element.elementor-element-2339f9d {
    --padding-left: 67.3px;
  }
}

/* the pictures: only where they stand next to the texts (768px wide and more; narrower, the mobile layout stacks them below the texts);
   35% bigger then 10% (1.35 x 1.1 = 1.485), their right edge 2% of the hero width inside it (12% - 10%: moved to the right) */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 768px) {
  .elementor.elementor-9 .e-con > .elementor-element.elementor-element-aa662c8 {
    right: 2%;
    scale: 1.485;
    transform-origin: right bottom;
  }

  /* the first picture (painter) 10% (of the picture widget width) more to the right (5% + 5%), the second one (Michele) 5%: the painter
     picture moved by its left margin (the next pictures are placed from it by js/custom.js: Michele moved back by half of it, Artur by
     all of it) */
  .elementor-9 .elementor-element.elementor-element-aa662c8 img.wp-image-700 {
    margin-left: 10%;
    margin-right: -10%;
  }
}

/* Home page "Qui sommes-nous" section, mobile landscape view (landscape, at most 500px tall) -> the front picture (wp-image-364, over
   wp-image-360) 20% smaller, around its center ("scale": the slide-in and parallax transforms of its widget kept, layout unchanged) */
@media (orientation: landscape) and (max-height: 500px) {
  #page .elementor-element.elementor-element-ee4938a img.wp-image-364 {
    scale: 0.8;
    transform-origin: center center;
  }
}

/* Home page "Pourquoi nous choisir" section, mobile landscape view -> the texts of the 3 feature boxes (under their icons and titles)
   with a smaller line height (elementor 1.5 -> 1.25) */
@media (orientation: landscape) and (max-height: 500px) {
  .elementor-9 .elementor-element.elementor-element-ca2d859 .elementor-icon-box-description,
  .elementor-9 .elementor-element.elementor-element-de09516 .elementor-icon-box-description,
  .elementor-9 .elementor-element.elementor-element-debaa35 .elementor-icon-box-description {
    line-height: 1.25;
  }

  /* the titles closer to their texts (16px below the titles -> 6px) */
  .elementor-9 .elementor-element.elementor-element-ca2d859 .elementor-icon-box-title,
  .elementor-9 .elementor-element.elementor-element-de09516 .elementor-icon-box-title,
  .elementor-9 .elementor-element.elementor-element-debaa35 .elementor-icon-box-title {
    margin-bottom: 6px;
  }
}

/* Home page "Témoignages" section, mobile portrait, mobile landscape and tablet portrait views -> the testimonial texts of the 3 cards with
   a smaller line height (1.25) */
@media (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-height: 500px), (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  #page .elementor-testimonial-wrapper .elementor-testimonial-content {
    line-height: 1.25;
  }
}

/* Home page "Qui sommes-nous" section check list (35c6ff6), mobile portrait, mobile landscape and tablet portrait views -> the lines closer
   together (line height 1.5 -> 1.25) and each check icon centered on the first line of its text (at the top of its item: centered on a box
   as tall as one line, instead of on the whole text when it takes 2 lines) */
@media (max-width: 767px) and (orientation: portrait), (orientation: landscape) and (max-height: 500px), (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .elementor-9 .elementor-element.elementor-element-35c6ff6 .elementor-icon-list-item {
    align-items: flex-start;
  }

  .elementor-9 .elementor-element.elementor-element-35c6ff6 .elementor-icon-list-text {
    line-height: 1.25;
  }

  .elementor-9 .elementor-element.elementor-element-35c6ff6 .elementor-icon-list-icon {
    display: flex;
    align-items: center;
    height: var(--scuderi-list-line, 18.24px); /* one line of the text: 14.592px x 1.25 */
  }
}

/* Services page header, mobile landscape view (landscape, at most 500px tall, 768px wide and more: texts and image side by side) -> the texts
   and the image at the same places on the screen as in the About page header: the hero content (more text than on the About page, more
   reduced to fit the hero) no longer centered but starting 98px from the left of the screen like on the About page; the image column taken
   out of the row and placed over the same screen square as the About page image (313.6px box, top right at 746px / 33.7px, scaled 1.1 from
   its right center like it), all the sizes divided by the zoom of the hero content (--hero-scale) to be screen sizes */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 768px) {

  body.page-id-14 #content .elementor > .e-con.e-parent:first-child > .e-con-inner {
    margin-left: 0;
    position: relative;
  }

  body.page-id-14 #content .elementor > .e-con.e-parent:first-child > .e-con-inner > .e-con:nth-child(2) {
    position: absolute;
    left: calc((432.4px - var(--scuderi-hero-text-left)) / var(--hero-scale, 1)); /* 432.4px on the screen, from the left padding */
    top: 0;
    width: calc(313.6px / var(--hero-scale, 1));
    --width: calc(313.6px / var(--hero-scale, 1));
    margin: 0;
    padding: 0;
  }

  /* the image widget and the image over the whole column */
  body.page-id-14 #content .elementor > .e-con.e-parent:first-child > .e-con-inner > .e-con:nth-child(2) > .elementor-widget {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  /* the whole height of the photo shown (its own 590 x 1202 ratio instead of 1 / 1.3: nothing cut at the bottom), same width, so the same size
     on the screen, and its top where it was with the 1 / 1.3 frame (scaled 1.1 from its right center and moved down 10% of its height: top
     6.5% of the width lower than the box): now scaled from its right top, moved down by those 6.5% of the width (3.2% of the new height);
     30% (of its width) to the right (10% + 10% + 10%); 10% (of its height) up (3.2% - 10%) */
  body.page-id-14 #page img.wp-image-834 {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 590 / 1202;
    translate: 30% -6.8%;
    scale: 1.1;
    transform-origin: right top;
  }

  /* the hero (the image column being out of the row, it would only be as tall as the texts) 20%, then 10%, then 10% less tall (0.8 x 0.9 x 0.9 = 0.648) than
     when it reached the image bottom (hero = its content + its 90px bottom padding, the content as tall as the image bottom: 0.065 + 1.1 x
     1202 / 590 = 2.306 times the 313.6px width of the image column): content 0.648 x (2.306 x 313.6px + 90px) - 90px tall on the screen; the lower part of the photo goes
     behind the wave (z-index 2 in the hero) and behind the navy cards section below */
  body.page-id-14 #content .elementor > .e-con.e-parent:first-child > .e-con-inner {
    min-height: calc((0.648 * (2.306 * 313.6px + 90px) - 90px) / var(--hero-scale, 1));
  }

  /* the navy cards section (24b6ae4) in front of the hero image (as in the mobile portrait view) */
  body.page-id-14 #page .elementor-element.elementor-element-24b6ae4 {
    position: relative;
    z-index: 2;
  }

  /* the texts starting at the same height as on the About page (98px from the top of the screen: 15px lower) */
  body.page-id-14 #content .elementor > .e-con.e-parent:first-child > .e-con-inner > .e-con:first-child {
    translate: 0 calc(15px / var(--hero-scale, 1));
  }
}

/* the same for the wider phones (900px wide and more, measured at 932 x 430: the About page header there larger): texts from 122px left /
   109px top, image box 333px from 477px left / 65px top (8px below the top of the hero content) */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 900px) {
  body.page-id-14 #content .elementor > .e-con.e-parent:first-child > .e-con-inner > .e-con:nth-child(2) {
    left: calc((477px - var(--scuderi-hero-text-left)) / var(--hero-scale, 1));
    top: calc(8px / var(--hero-scale, 1));
    width: calc(333px / var(--hero-scale, 1));
    --width: calc(333px / var(--hero-scale, 1));
  }

  /* the hero 20%, then 10%, then 10% less tall (0.648) than when its content reached the image bottom (8px + 2.306 x 333px, see above) */
  body.page-id-14 #content .elementor > .e-con.e-parent:first-child > .e-con-inner {
    min-height: calc((0.648 * (8px + 2.306 * 333px + 90px) - 90px) / var(--hero-scale, 1));
  }

  body.page-id-14 #content .elementor > .e-con.e-parent:first-child > .e-con-inner > .e-con:first-child {
    translate: 0 calc(1px / var(--hero-scale, 1));
  }
}

/* About and Services pages header, mobile landscape view (landscape, at most 500px tall) -> the texts aligned on the left, their left edge
   at the right edge of the home button of the fixed header bar, as on the Home page (16px from the left + its logo, 46.8px wide: 62.8px;
   67.3px from 922px wide), the images staying where they were */
@media (orientation: landscape) and (max-height: 500px) {
  body.page-id-12,
  body.page-id-14 {
    --scuderi-hero-text-left: 62.8px;
  }

  body.page-id-12 #content .elementor > .e-con.e-parent:first-child > .e-con-inner > .e-con:first-child,
  body.page-id-14 #content .elementor > .e-con.e-parent:first-child > .e-con-inner > .e-con:first-child {
    text-align: left;
  }

  /* Services: the hero content starting at the left padding of the hero (its image column placed from it, compensated above) */
  body.page-id-14 #content .elementor > .e-con.e-parent:first-child {
    --padding-left: var(--scuderi-hero-text-left);
  }

  /* About: the hero content (zoomed by --hero-scale, centered: at most 1200px wide, less when the screen minus the 2 x 32px paddings of the
     hero is narrower than 1200px x zoom: taller screens, bigger zoom) stays in place, so that the image does not move: only the text column
     moved left, from the left edge of the centered content (50vw - half its width x zoom on the screen) to the button edge, in the units of
     the zoomed content (screen sizes divided by --hero-scale) */
  body.page-id-12 #content .elementor > .e-con.e-parent:first-child > .e-con-inner > .e-con:first-child {
    translate: calc(var(--scuderi-hero-text-left) / var(--hero-scale, 1) - 50vw / var(--hero-scale, 1) + min(600px, (50vw - 32px) / var(--hero-scale, 1))) 0;
  }
}

/* same, About page, texts beside the image (768px wide and more) -> the texts never over the image: the text box narrowed (right padding of
   the text column, its width and the place of the image column unchanged) so that it ends 20px (screen) before the image. In zoomed units:
   the 2 columns (W/2 - 20px wide each, W the content width, 40px apart, centered on the screen) and the image 1.1 times its column wide,
   from its right edge (10% of the column beyond its left edge): image left = 50vw / zoom + 20px - 0.1 x column; text right = button edge /
   zoom + column - padding -> padding = 1.1 x column - 50vw / zoom - 20px + (20px + button edge) / zoom (none when already narrow enough) */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 768px) {
  body.page-id-12 #content .elementor > .e-con.e-parent:first-child > .e-con-inner > .e-con:first-child {
    padding-right: max(0px, calc(1.1 * (min(600px, (50vw - 32px) / var(--hero-scale, 1)) - 20px) - 50vw / var(--hero-scale, 1) - 20px + (20px + var(--scuderi-hero-text-left)) / var(--hero-scale, 1)));
  }
}

/* narrower phones (below 768px wide: mobile layout, the texts above the image, the About hero content at most 767px wide instead of 1200px,
   24px hero paddings) -> the same move with half of 767px */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 767px) {
  body.page-id-12 #content .elementor > .e-con.e-parent:first-child > .e-con-inner > .e-con:first-child {
    translate: calc(var(--scuderi-hero-text-left) / var(--hero-scale, 1) - 50vw / var(--hero-scale, 1) + min(383.5px, (50vw - 24px) / var(--hero-scale, 1))) 0;
  }
}

@media (orientation: landscape) and (max-height: 500px) and (min-width: 922px) {
  body.page-id-12,
  body.page-id-14 {
    --scuderi-hero-text-left: 67.3px;
  }
}

/* Home page header, mobile landscape view (landscape, at most 500px tall) -> the rating line ("Noté 5/5 par Nos Clients (40 avis).", 3e9635d)
   hidden, the logo above it (scuderi-hero-logo, hanging above its placeholder) then just above the title; the title ("Donnez Une Nouvelle
   Vie à Votre Habitat", 64e8f55) on 2 lines as wide as the logo images (scuderi-hero-logo__images, real size: the SCUDERI image 179 x 22
   at 3.3075rem tall = 26.911rem wide; 2.205rem tall = 17.94rem below 768px wide): its first line "Donnez Une Nouvelle" being 10.254 times
   the font size wide, the font size 26.911rem / 10.254 = 2.6244rem on the screen (1.7496rem below 768px), divided by the zoom of the hero
   content; the title box as wide as the logo (+ 1px against rounding), so that "Vie à Votre Habitat" (shorter) goes to the second line */
@media (orientation: landscape) and (max-height: 500px) {
  .elementor-9 .elementor-element.elementor-element-3e9635d {
    display: none;
  }

  #page .elementor-9 .elementor-element.elementor-element-64e8f55 { /* #page: beats ".elementor.elementor .e-con > .elementor-widget" (max-width 100%) */
    width: calc((26.911rem + 1px) / var(--hero-scale, 1));
    max-width: none;
  }

  /* the title at the size of the About page title ("Vos artisans de confiance") in the same view: about 8.1% of the screen height on the
     screen (from 768px wide; formerly 2.6244rem, the size making "Donnez Une Nouvelle" as wide as the logo), divided by the zoom of the
     hero content */
  .elementor-9 .elementor-element.elementor-element-64e8f55 .elementor-heading-title {
    font-size: calc(8.1vh / var(--hero-scale, 1));
  }
}

/* same, the logo images (scuderi-hero-logo__images) 20% smaller ("scale", from their bottom left corner: still starting at the button edge
   and at the same distance above the title; the moveInLeft / moveInRight animations of the images kept); the title, the red line and the
   paragraph keep the former logo width (26.911rem / 17.94rem) */
@media (orientation: landscape) and (max-height: 500px) {
  .elementor-9 .scuderi-hero-logo__images {
    scale: 0.8;
    transform-origin: left bottom;
  }
}

/* same, the paragraph below the title (d4779b1) as wide as the logo, its red "Peinture · Façade · Plâtrerie · Rénovation" line on one line
   over that whole width: the line being 18.8235 times its font size wide, the font size 26.911rem / 18.8235 = 1.4296rem on the screen
   (0.9531rem below 768px), divided by the zoom of the hero content */
@media (orientation: landscape) and (max-height: 500px) {
  #page .elementor-9 .elementor-element.elementor-element-d4779b1 {
    width: calc((26.911rem + 1px) / var(--hero-scale, 1));
    max-width: none;
  }

  #page .elementor-9 .elementor-element.elementor-element-d4779b1 .scuderi-hero-trades {
    font-size: calc(1.4296rem / var(--hero-scale, 1));
    white-space: nowrap;
  }
}

@media (orientation: landscape) and (max-height: 500px) and (max-width: 767px) {
  #page .elementor-9 .elementor-element.elementor-element-64e8f55,
  #page .elementor-9 .elementor-element.elementor-element-d4779b1 {
    width: calc((17.94rem + 1px) / var(--hero-scale, 1));
  }

  #page .elementor-9 .elementor-element.elementor-element-d4779b1 .scuderi-hero-trades {
    font-size: calc(0.9531rem / var(--hero-scale, 1));
  }

  /* the title at the size of the About page title below 768px wide: 4.12% of the screen height (formerly 1.7496rem) */
  .elementor-9 .elementor-element.elementor-element-64e8f55 .elementor-heading-title {
    font-size: calc(4.12vh / var(--hero-scale, 1));
  }
}

/* Home page header, mobile landscape view (landscape, at most 500px tall) -> less vertical space between the texts, so that the "Devis
   Gratuit" and "Appeler" buttons are fully visible on the first screen (measured in a 303px tall view at 844px wide, 288px at 667px, 343px
   at 932px): the hero content starting higher (top padding 88px -> 20px, zoomed: the logo images hanging above the texts then beside the
   home button of the header, not under it; none below 768px wide, the content not zoomed there; 30px from 922px wide, the logo staying below
   the navigation links of the desktop header), the logo 8px
   above the title (18px), 6px between the texts and the buttons (16px: the logo placeholder cancelling as much), no 24px margin above the
   buttons, and smaller line heights: title 1.2 -> 1.05, red line 1.3 -> 1.1, paragraph 1.5 -> 1.3 */
@media (orientation: landscape) and (max-height: 500px) {
  #page .elementor-9 .elementor-element.elementor-element-2339f9d > .e-con-inner {
    padding-top: 20px;
  }

  #page .elementor-9 .scuderi-hero-buttons .elementor-widget-container {
    margin-top: 0;
  }

  .elementor-9 .scuderi-hero-logo__images {
    bottom: 23px; /* 8px -> 23px: more space between the logo and the title (about 16px on the screen instead of 4px) */
  }

  /* the texts column with the logo (all the texts, the buttons and the logo images) 5% of the screen height lower ("translate", divided by
     the zoom of the hero content; layout and animations unchanged) */
  #page .elementor-9 .elementor-element.elementor-element-f308bff {
    translate: 0 calc(5vh / var(--hero-scale, 1));
  }

  /* the 3 hero pictures (their widget, aa662c8: the painter, Michele, Artur) 5% of the screen height higher (same way) */
  #page .elementor.elementor-9 .e-con > .elementor-element.elementor-element-aa662c8 {
    translate: 0 calc(-5vh / var(--hero-scale, 1));
  }

  #page .elementor-9 .elementor-element.elementor-element-f308bff {
    row-gap: 6px;
  }

  #page .elementor-9 .scuderi-hero-logo {
    margin-bottom: -6px; /* cancels the gap of the column after this element */
  }

  #page .elementor-9 .elementor-element.elementor-element-64e8f55 .elementor-heading-title {
    line-height: 1.05;
  }

  #page .elementor-9 .elementor-element.elementor-element-d4779b1 .elementor-widget-container {
    line-height: 1.3;
  }

  #page .elementor-9 .elementor-element.elementor-element-d4779b1 .scuderi-hero-trades {
    line-height: 1.1;
  }
}

@media (orientation: landscape) and (max-height: 500px) and (min-width: 922px) {
  #page .elementor-9 .elementor-element.elementor-element-2339f9d > .e-con-inner {
    padding-top: 20px; /* 30px - 10px: room for the 14px spaces around the buttons (below) */
  }
}

@media (orientation: landscape) and (max-height: 500px) and (max-width: 767px) {
  #page .elementor-9 .elementor-element.elementor-element-2339f9d > .e-con-inner {
    padding-top: 0;
  }
}

/* Home page header, mobile landscape view (landscape, at most 500px tall) -> the clock icon of the schedule hidden; the same 18px (screen)
   space between the paragraph and the "Devis Gratuit" / "Appeler" buttons (4.5px before, the 6px gap of the column) and between the buttons
   and the schedule text (38px before, the 40px margin of the schedule box + the gap; 18px: the most that keeps the buttons fully visible on a
   932 x 430 phone): the margins added to the 6px gap of the column, screen sizes divided by the zoom of the hero content (for the schedule,
   measured to the top of its letters) */
@media (orientation: landscape) and (max-height: 500px) {
  #page .elementor-9 .scuderi-hero-buttons {
    margin-top: calc(18px / var(--hero-scale, 1) - 6px);
  }

  /* the schedule then slightly closer to the buttons: 12px (18px - 6px) */
  #page .elementor-9 .elementor-element.elementor-element-4b00251 {
    margin-top: calc(12px / var(--hero-scale, 1) - 6px);
  }

  #page .elementor-9 .elementor-element.elementor-element-280ff2e .elementor-icon-box-icon {
    display: none;
  }

  /* the schedule on one line, "Lun-Ven (8h-17h) - Sam-Dim (fermé)" (the line break hidden; the " · " separator of the mobile portrait view
     shown as " - ": its text hidden, " - " written in its place at the size of the schedule text, 1rem), vertically centered on the clock icon */
  #page .elementor-9 .elementor-element.elementor-element-280ff2e .elementor-icon-box-wrapper {
    align-items: center;
  }

  #page .elementor-9 .elementor-element.elementor-element-280ff2e .elementor-icon-box-content {
    align-self: center; /* elementor aligns it at the top below 768px wide (mobile layout) */
  }

  #page .elementor-9 .elementor-element.elementor-element-280ff2e .elementor-icon-box-description {
    white-space: nowrap;
  }

  #page .elementor-9 .elementor-element.elementor-element-280ff2e .scuderi-hours-break {
    display: none;
  }

  #page .elementor-9 .elementor-element.elementor-element-280ff2e .scuderi-hours-sep {
    display: inline;
    font-size: 0;
  }

  #page .elementor-9 .elementor-element.elementor-element-280ff2e .scuderi-hours-sep::before {
    content: "\00a0-\00a0";
    font-size: 1rem;
  }
}

/* Footer menu (Accueil, À Propos, Services, Offres), mobile portrait view -> on one centered row instead of one link per line (the theme makes
   it a one-column grid on mobile: astra-footer-mobile-vertical-menu), each link on one line; the side padding of the links reduced
   (20px -> 10px) so that the 4 links fit in the width of a phone */
@media (max-width: 767px) and (orientation: portrait) {
  .site-footer #astra-footer-menu {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
  }

  .site-footer #astra-footer-menu .menu-item > .menu-link {
    padding: 5px 10px;
    white-space: nowrap;
  }
}

/* narrowest phones (under 360px wide: 320px, about 272px inside the footer padding; the 4 links were 286px wide) -> less space between
   the links (10px -> 6px on each side: 254px) */
@media (max-width: 359px) and (orientation: portrait) {
  .site-footer #astra-footer-menu .menu-item > .menu-link {
    padding: 5px 6px;
  }
}

/* Footer, mobile and tablet views (up to 921px wide: the logo, the menu and the social icons one below the other) -> less space above and
   below the menu links (34px / 37px between the logo, the link texts and the icons), and the same above and below: no 10px bottom margin
   of the logo and menu sections, 14px gap of the grid instead of 24px, the vertical padding of the links (5px on mobile) removed, the
   menu row as tall as its text ("#colophon": the theme rules use the data-section attribute of the footer rows) */
@media (max-width: 921px) {
  #colophon .site-primary-footer-wrap .ast-builder-grid-row {
    row-gap: 14px;
  }

  #colophon .site-primary-footer-wrap .site-footer-section-1,
  #colophon .site-primary-footer-wrap .site-footer-section-2 {
    margin-bottom: 0;
  }

  #colophon #astra-footer-menu .menu-item > .menu-link {
    padding-top: 0;
    padding-bottom: 0;
  }

  /* the social icons row 5px higher: the link box is 1.9px taller than its text and the icons sit 3.1px below the top of their row, so
     that the space below the link texts equals the space above them (14px) */
  #colophon .site-primary-footer-wrap .site-footer-section-3 {
    margin-top: -5px;
  }
}

/* Footer, tablet portrait view where it is stacked (768px to 921px wide; from 922px the logo, the menu and the icons are already side by
   side) -> the menu links and the social icons on the same row, centered under the logo (logo row over the 2 columns), 40px apart,
   vertically centered on each other (no -5px raise of the icons row, made for the stacked layout) */
@media (min-width: 768px) and (max-width: 921px) and (orientation: portrait) {
  #colophon .site-primary-footer-wrap .ast-builder-grid-row {
    grid-template-columns: auto auto;
    justify-content: center;
    align-items: center;
    column-gap: 40px;
  }

  #colophon .site-primary-footer-wrap .site-footer-section-1 {
    grid-column: 1 / -1;
  }

  /* the icons 3px lower: their middle on the middle of the link texts (the row centers the boxes, the icons sat 2.9px higher) */
  #colophon .site-primary-footer-wrap .site-footer-section-3 {
    position: relative;
    top: 3px;
    margin-top: 0;
  }

  /* the same 14px between the logo and the link texts as in the stacked layout (the centered row adds 5px above them) */
  #colophon .site-primary-footer-wrap .ast-builder-grid-row {
    row-gap: 9px;
  }
}