/* ===== Font icons: hidden until loaded (prevents pop-in + layout shift) ===== */
.u-font-style-awesome { display: inline-block; min-width: 1em; text-align: center; visibility: hidden; }
html.fa-loaded .u-font-style-awesome { visibility: visible; }

/* ===== Webflow Base Grid & Resets (page_code_base) ===== */
:root {
  --site--max-width: min(var(--site--width), 100vw);
  --container--main: calc(var(--site--max-width) - var(--site--margin) * 2);
  --container--full: calc(100vw - var(--site--margin) * 2);
  --site--gutter-total: calc(var(--site--gutter) * (var(--site--column-count) - 1));
  --column-width--1: calc((var(--container--main) - var(--site--gutter-total)) / var(--site--column-count));
  --column-width--plus-gutter: calc(var(--column-width--1) + var(--site--gutter));
  --column-width--2: calc(var(--column-width--plus-gutter) * 2 - var(--site--gutter));
  --column-width--3: calc(var(--column-width--plus-gutter) * 3 - var(--site--gutter));
  --column-width--4: calc(var(--column-width--plus-gutter) * 4 - var(--site--gutter));
  --column-width--5: calc(var(--column-width--plus-gutter) * 5 - var(--site--gutter));
  --column-width--6: calc(var(--column-width--plus-gutter) * 6 - var(--site--gutter));
  --column-width--7: calc(var(--column-width--plus-gutter) * 7 - var(--site--gutter));
  --column-width--8: calc(var(--column-width--plus-gutter) * 8 - var(--site--gutter));
  --column-width--9: calc(var(--column-width--plus-gutter) * 9 - var(--site--gutter));
  --column-width--10: calc(var(--column-width--plus-gutter) * 10 - var(--site--gutter));
  --column-width--11: calc(var(--column-width--plus-gutter) * 11 - var(--site--gutter));
  --column-width--12: calc(var(--column-width--plus-gutter) * 12 - var(--site--gutter));
  --column-margin--1: calc(var(--column-width--plus-gutter) * 1);
  --column-margin--2: calc(var(--column-width--plus-gutter) * 2);
  --column-margin--3: calc(var(--column-width--plus-gutter) * 3);
  --column-margin--4: calc(var(--column-width--plus-gutter) * 4);
  --column-margin--5: calc(var(--column-width--plus-gutter) * 5);
  --column-margin--6: calc(var(--column-width--plus-gutter) * 6);
  --column-margin--7: calc(var(--column-width--plus-gutter) * 7);
  --column-margin--8: calc(var(--column-width--plus-gutter) * 8);
  --column-margin--9: calc(var(--column-width--plus-gutter) * 9);
  --column-margin--10: calc(var(--column-width--plus-gutter) * 10);
  --column-margin--11: calc(var(--column-width--plus-gutter) * 11);
  --column-margin--12: calc(var(--column-width--plus-gutter) * 12);
  --breakout-start: [full-start] minmax(0, 1fr) [content-start];
  --breakout-end: [content-end] minmax(0, 1fr) [full-end];
  --grid-breakout-single: var(--breakout-start) minmax(0, var(--container--main)) var(--breakout-end);
  --grid-breakout: var(--breakout-start) repeat(var(--site--column-count), minmax(0, var(--column-width--1))) var(--breakout-end);
  --grid-main: repeat(var(--site--column-count), minmax(0, 1fr));
  --grid-1: repeat(1, minmax(0, 1fr));
  --grid-2: repeat(2, minmax(0, 1fr));
  --grid-3: repeat(3, minmax(0, 1fr));
  --grid-4: repeat(4, minmax(0, 1fr));
  --grid-5: repeat(5, minmax(0, 1fr));
  --grid-6: repeat(6, minmax(0, 1fr));
  --grid-7: repeat(7, minmax(0, 1fr));
  --grid-8: repeat(8, minmax(0, 1fr));
  --grid-9: repeat(9, minmax(0, 1fr));
  --grid-10: repeat(10, minmax(0, 1fr));
  --grid-11: repeat(11, minmax(0, 1fr));
  --grid-12: repeat(12, minmax(0, 1fr));
  --_typography---text-transform--none: none;
  --_typography---text-transform--uppercase: uppercase;
  --_typography---text-transform--captialize: capitalize;
  --_typography---text-transform--lowercase: lowercase;
  --align--flex-start: flex-start;
  --align--flex-center: center;
  --align--flex-end: flex-end;
  --align--text-left: left;
  --align--text-center: center;
  --align--text-right: right;
}
* {
  vertical-align: bottom;
}
::before, ::after {
  box-sizing: border-box;
}
button {
  background-color: unset;
  padding: unset;
  text-align: inherit;
}
button:not(:disabled) {
  cursor: pointer;
}
video {
  width: 100%;
  object-fit: cover;
}
video.wf-empty {
  padding: 0;
}
svg {
  max-width: 100%;
}
section, header, footer {
  position: relative;
}
@media (prefers-color-scheme: light) {
  option {
    color: black;
  }
}
img::selection {
  background: transparent;
}
body {
  text-transform: var(--_text-style---text-transform);
  font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
}
a:not([class]) {
  text-decoration: underline;
}
h1,h2,h3,h4,h5,h6,p,blockquote,label {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-wrap: inherit;
  margin-top: 0;
  margin-bottom: 0;
}
.w-richtext a {
  position: relative;
  z-index: 4;
}
.u-line-clamp-1, .u-line-clamp-2, .u-line-clamp-3, .u-line-clamp-4 {
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.u-line-clamp-2 { -webkit-line-clamp: 2; }
.u-line-clamp-3 { -webkit-line-clamp: 3; }
.u-line-clamp-4 { -webkit-line-clamp: 4; }
.u-hide-if-empty:empty,
.u-hide-if-empty:not(:has(> :not(.w-condition-invisible))),
.u-hide-if-empty-cms:not(:has(.w-dyn-item)),
.w-richtext[class*="u-text-style-"] > :not(h1,h2,h3,h4,h5,h6,p,blockquote,ul,ol,span),
.u-embed-js,
.u-embed-css {
  display: none !important;
}
.wf-design-mode .g_clickable_wrap {
  z-index: 0;
}
.g_clickable_wrap a[href="#"] {
  display: none;
}
.g_clickable_wrap a[href="#"] ~ button {
  display: block;
}
.w-select {
    -webkit-appearance: none;
    -moz-appearance: none;
}
.w-form-formradioinput--inputType-custom.w--redirected-focus {
  box-shadow: none;
}
.w-input:focus,
.w-select:focus {
  border-color: inherit;
  outline: none;
}

/* ===== Webflow Custom Overrides (page_code_custom) ===== */
.is-calendar::-webkit-calendar-picker-indicator {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: all;
    opacity: 0;
}
.nav_menu_btn.w--open .nav_menu_btn_icon {
    opacity: 0;
}
.nav_menu_btn.w--open .nav_menu_btn_icon_close {
    opacity: 1;
}
.nav_link:hover .nav_link_border,
.nav_link.w--current .nav_link_border {
  opacity: 1;
}
.hero_form_input::-webkit-outer-spin-button,
.hero_form_input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.hero_form_input[type="number"] {
  -moz-appearance: textfield;
}
.quote-form_input_wrap.theme-pompe-chaleur:has(.w--redirected-checked) {
  border-width: var(--border-width--main);
  border-color: var(--swatch--green);
  background-color: rgba(0, 255, 136, 0.10);
}
.quote-form_input_wrap.theme-climatisation:has(.w--redirected-checked) {
  border-width: var(--border-width--main);
  border-color: var(--swatch--blue);
  background-color: rgba(36, 164, 255, 0.10);
}
.quote-form_input_wrap.theme-panneaux-solaires:has(.w--redirected-checked) {
  border-width: var(--border-width--main);
  border-color: var(--swatch--brand);
  background-color: rgba(255, 153, 0, 0.10);
}
.quote-form_input_wrap .w-radio-input.w--redirected-checked {
  border-color: transparent !important;
  background-color: transparent !important;
}
.nav_link_text::before {
  content: attr(data-text);
  display: block;
  font-weight: var(--_typography---font--primary-bold);
  height: 0;
  visibility: hidden;
  overflow: hidden;
  white-space: nowrap;
}
.quote-form_spin_input::-webkit-outer-spin-button,
.quote-form_spin_input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.quote-form_spin_input[type="number"] {
  -moz-appearance: textfield;
}
.quote-form_spin_input {
  appearance: none;
}
.quote-form_spin_input.has-unit::after {
    content: "m\00B2";
    position: absolute;
    right: 7rem;
    top: 50%;
    transform: translateY(-50%);
    color: #555;
    pointer-events: none;
    user-select: none;
}
@media screen and (max-width: 767px) {
  .quote-form_spin_input.has-unit::after {
    right: 3rem;
  }
}
.quote-form_input_no-styling {
  all: unset;
  box-sizing: border-box;
}
.quote-form_input_no-styling::-webkit-outer-spin-button,
.quote-form_input_no-styling::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.quote-form_input_no-styling[type=number] {
  -moz-appearance: textfield;
}
.wf-design-mode .quote-form_item {
  display: flex;
}
[spin] {
  animation: rotation 2s infinite linear;
}
@keyframes rotation {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.is-hidden { display: none !important; }
/* Dropdown code postal : positionner sous le champ */
.quote-form_location_list {
  top: 100%;
  bottom: auto;
  inset: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: .25rem;
}
/* Animation des tracks du processus d'installation */
.step_list_track {
  transition: background-color .4s ease;
}
/* Icônes hero form : largeur fixe pour alignement */
.hero_form_input_icon {
  width: 1em;
  text-align: center;
  flex-shrink: 0;
}
/* Transition de fondu pour les fonds hero */
.hero_bg_1, .hero_bg_2, .hero_bg_3 {
  display: block !important;
  position: absolute !important;
  inset: 0;
  transition: opacity .5s ease;
}
.hero_bg_1.is-fade-hidden, .hero_bg_2.is-fade-hidden, .hero_bg_3.is-fade-hidden {
  opacity: 0;
  pointer-events: none;
}

/* ===== Responsive Clamp Variables ===== */
:root {
  --site--margin: clamp(1rem, 0.42857142857142855rem + 2.857142857142857vw, 3rem);
  --size--2rem: clamp(1.75rem, 1.6785714285714286rem + 0.35714285714285715vw, 2rem);
  --size--2-5rem: clamp(2rem, 1.8571428571428572rem + 0.7142857142857143vw, 2.5rem);
  --size--3rem: clamp(2.25rem, 2.0357142857142856rem + 1.0714285714285714vw, 3rem);
  --size--3-5rem: clamp(2.375rem, 2.0535714285714284rem + 1.607142857142857vw, 3.5rem);
  --size--4rem: clamp(2.5rem, 2.0714285714285716rem + 2.142857142857143vw, 4rem);
  --size--4-5rem: clamp(2.75rem, 2.25rem + 2.5vw, 4.5rem);
  --size--5rem: clamp(3rem, 2.4285714285714284rem + 2.857142857142857vw, 5rem);
  --size--5-5rem: clamp(3.25rem, 2.607142857142857rem + 3.214285714285714vw, 5.5rem);
  --size--6rem: clamp(3.5rem, 2.7857142857142856rem + 3.571428571428571vw, 6rem);
  --size--6-5rem: clamp(3.75rem, 2.9642857142857144rem + 3.9285714285714284vw, 6.5rem);
  --size--7rem: clamp(4rem, 3.142857142857143rem + 4.285714285714286vw, 7rem);
  --size--7-5rem: clamp(4.25rem, 3.3214285714285716rem + 4.642857142857143vw, 7.5rem);
  --size--8rem: clamp(4.5rem, 3.5rem + 5vw, 8rem);
  --size--8-5rem: clamp(4.75rem, 3.6785714285714284rem + 5.357142857142857vw, 8.5rem);
  --size--9rem: clamp(5rem, 3.857142857142857rem + 5.714285714285714vw, 9rem);
  --size--9-5rem: clamp(5.25rem, 4.035714285714286rem + 6.071428571428571vw, 9.5rem);
  --size--10rem: clamp(5.5rem, 4.214285714285714rem + 6.428571428571428vw, 10rem);
  --size--11rem: clamp(5.75rem, 4.25rem + 7.5vw, 11rem);
  --size--12rem: clamp(6rem, 4.285714285714286rem + 8.571428571428571vw, 12rem);
  --size--13rem: clamp(6.5rem, 4.642857142857143rem + 9.285714285714286vw, 13rem);
  --size--14rem: clamp(7rem, 5rem + 10vw, 14rem);
  --size--15rem: clamp(7.5rem, 5.357142857142857rem + 10.714285714285714vw, 15rem);
  --size--16rem: clamp(8rem, 5.714285714285714rem + 11.428571428571429vw, 16rem);
}

/* ===== Espacement icônes dans les boutons du menu ===== */
.btn_main_text .u-font-style-awesome {
  margin-right: 5px;
}

/* ===== Fix: Forcer le masquage des icônes secondaires dans le héro ===== */
.hero_form_input_icon.u-display-none {
  display: none !important;
}

/* ===== Fix: Positionnement des photos de testimonials (centrer sur le visage) ===== */
.solution_headshot_wrap .solution_headshot,
img.solution_headshot {
  object-fit: cover !important;
  object-position: center top !important;
  width: 100% !important;
  height: 100% !important;
}

/* ===== Fix: Dégradé sur page_main avec offset pour le hero ===== */
.page_main.is-green-gradient {
  background: linear-gradient(to bottom,
    #edf7ef 0,
    #edf7ef 700px,
    #ffffff 3200px
  ) !important;
}

.page_main.is-blue-gradient {
  background: linear-gradient(to bottom,
    #e7f0fa 0,
    #e7f0fa 700px,
    #ffffff 3200px
  ) !important;
}

.page_main.is-orange-gradient {
  background: linear-gradient(to bottom,
    #fbf0e7 0,
    #fbf0e7 700px,
    #ffffff 3200px
  ) !important;
}

/* Hero avec fond blanc opaque */
.page_main.is-green-gradient .product-hero_wrap,
.page_main.is-blue-gradient .product-hero_wrap,
.page_main.is-orange-gradient .product-hero_wrap {
  background: #ffffff !important;
}

/* Sections transparentes pour voir le dégradé */
.page_main.is-green-gradient section.perk_wrap,
.page_main.is-blue-gradient section.perk_wrap,
.page_main.is-orange-gradient section.perk_wrap,
.page_main.is-green-gradient section.solution_wrap,
.page_main.is-blue-gradient section.solution_wrap,
.page_main.is-orange-gradient section.solution_wrap,
.page_main.is-green-gradient section.cta_wrap,
.page_main.is-blue-gradient section.cta_wrap,
.page_main.is-orange-gradient section.cta_wrap {
  background: transparent !important;
}

/* Arrondi avec couleur unie au-dessus de perks */
.page_main.is-green-gradient section.perk_wrap,
.page_main.is-blue-gradient section.perk_wrap,
.page_main.is-orange-gradient section.perk_wrap {
  position: relative !important;
  padding-top: 5rem !important;
}

.page_main.is-green-gradient section.perk_wrap::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10rem;
  background: #edf7ef !important;
  border-radius: 6rem 6rem 0 0 !important;
  pointer-events: none;
  z-index: 0;
}

.page_main.is-blue-gradient section.perk_wrap::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10rem;
  background: #e7f0fa !important;
  border-radius: 6rem 6rem 0 0 !important;
  pointer-events: none;
  z-index: 0;
}

.page_main.is-orange-gradient section.perk_wrap::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10rem;
  background: #fbf0e7 !important;
  border-radius: 6rem 6rem 0 0 !important;
  pointer-events: none;
  z-index: 0;
}

/* Contenu de perks au-dessus de l'arrondi */
.page_main.is-green-gradient section.perk_wrap > *,
.page_main.is-blue-gradient section.perk_wrap > *,
.page_main.is-orange-gradient section.perk_wrap > * {
  position: relative;
  z-index: 1;
}

/* ===== Fix: Taille du bouton Continuer en mode tablette (comme mobile) ===== */
@media screen and (max-width: 991px) {
  .hero_form_btn_wrap {
    width: 100% !important;
    max-width: none !important;
    margin-bottom: 0 !important;
  }
  .hero_form_btn_wrap .btn_main_wrap {
    width: 100% !important;
    min-height: 4.5rem !important;
    height: 4.5rem !important;
    padding: 0 1.5rem !important;
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* ===== Fix: Positionnement vertical du logo uniforme sur toutes les pages ===== */
  .nav_logo_wrap {
    align-self: center !important;
  }
}