.elementor-kit-8{--e-global-color-primary:#25A7D9;--e-global-color-secondary:#232868;--e-global-color-text:#70B121;--e-global-color-accent:#E51F1E;--e-global-color-6c7175e:#EDEDED;--e-global-color-17b10c7:#FFFFFF;--e-global-color-d30af2a:#777777;--e-global-typography-primary-font-family:"Urbanist";--e-global-typography-primary-font-size:90px;--e-global-typography-primary-font-weight:700;--e-global-typography-primary-line-height:96px;--e-global-typography-secondary-font-family:"Urbanist";--e-global-typography-secondary-font-size:58px;--e-global-typography-secondary-font-weight:700;--e-global-typography-secondary-line-height:63px;--e-global-typography-text-font-family:"Urbanist";--e-global-typography-text-font-size:1.1rem;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.55rem;--e-global-typography-accent-font-family:"Urbanist";--e-global-typography-accent-font-size:23px;--e-global-typography-accent-font-weight:300;--e-global-typography-accent-line-height:30px;--e-global-typography-783494e-font-family:"Urbanist";--e-global-typography-783494e-font-size:1.1rem;--e-global-typography-783494e-font-weight:600;--e-global-typography-783494e-text-decoration:none;--e-global-typography-783494e-line-height:1.1rem;--e-global-typography-91698cf-font-family:"Urbanist";--e-global-typography-91698cf-font-size:0.95rem;--e-global-typography-91698cf-font-weight:300;--e-global-typography-91698cf-line-height:1.4rem;--e-global-typography-9f4a0e1-font-family:"Urbanist";--e-global-typography-9f4a0e1-font-size:23px;--e-global-typography-9f4a0e1-font-weight:700;--e-global-typography-9f4a0e1-line-height:27px;--e-global-typography-e7c4a20-font-family:"Urbanist";--e-global-typography-e7c4a20-font-size:1.05rem;--e-global-typography-e7c4a20-font-weight:500;--e-global-typography-e7c4a20-line-height:1.55rem;--e-global-typography-dca2bf3-font-family:"Urbanist";--e-global-typography-dca2bf3-font-size:50px;--e-global-typography-dca2bf3-font-weight:700;--e-global-typography-dca2bf3-line-height:50px;font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-8 e-page-transition{background-color:#FFBC7D;}.elementor-kit-8 p{margin-block-end:0px;}.elementor-kit-8 a{color:var( --e-global-color-primary );}.elementor-kit-8 h1{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );}.elementor-kit-8 h2{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );line-height:var( --e-global-typography-secondary-line-height );}.elementor-kit-8 button,.elementor-kit-8 input[type="button"],.elementor-kit-8 input[type="submit"],.elementor-kit-8 .elementor-button{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );border-radius:100px 100px 100px 100px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1400px;}.e-con{--container-max-width:1400px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){margin-block-end:30px;}.elementor-element{--widgets-spacing:30px 30px;--widgets-spacing-row:30px;--widgets-spacing-column:30px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1500px){.elementor-kit-8{--e-global-typography-primary-font-size:85px;--e-global-typography-primary-line-height:90px;--e-global-typography-secondary-font-size:55px;--e-global-typography-secondary-line-height:60px;--e-global-typography-accent-font-size:22px;--e-global-typography-accent-line-height:28px;--e-global-typography-9f4a0e1-font-size:22px;--e-global-typography-9f4a0e1-line-height:28px;--e-global-typography-dca2bf3-font-size:45px;--e-global-typography-dca2bf3-line-height:45px;font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-8 h1{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-kit-8 h2{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}.elementor-kit-8 button,.elementor-kit-8 input[type="button"],.elementor-kit-8 input[type="submit"],.elementor-kit-8 .elementor-button{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1100px;}.e-con{--container-max-width:1100px;}}@media(max-width:1300px){.elementor-kit-8{--e-global-typography-primary-font-size:75px;--e-global-typography-primary-line-height:82px;--e-global-typography-secondary-font-size:50px;--e-global-typography-secondary-line-height:55px;--e-global-typography-accent-font-size:20px;--e-global-typography-accent-line-height:28px;--e-global-typography-dca2bf3-font-size:42px;--e-global-typography-dca2bf3-line-height:42px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:950px;}.e-con{--container-max-width:950px;}}@media(max-width:1024px){.elementor-kit-8{--e-global-typography-primary-font-size:70px;--e-global-typography-primary-line-height:75px;--e-global-typography-secondary-font-size:46px;--e-global-typography-secondary-line-height:52px;--e-global-typography-9f4a0e1-font-size:21px;--e-global-typography-9f4a0e1-line-height:25px;--e-global-typography-dca2bf3-font-size:40px;--e-global-typography-dca2bf3-line-height:40px;font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-8 h1{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-kit-8 h2{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}.elementor-kit-8 button,.elementor-kit-8 input[type="button"],.elementor-kit-8 input[type="submit"],.elementor-kit-8 .elementor-button{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:700px;}.e-con{--container-max-width:700px;}}@media(max-width:767px){.elementor-kit-8{--e-global-typography-primary-font-size:41px;--e-global-typography-primary-line-height:46px;--e-global-typography-secondary-font-size:29px;--e-global-typography-secondary-line-height:33px;--e-global-typography-text-font-size:1.025rem;--e-global-typography-91698cf-font-size:0.85rem;--e-global-typography-91698cf-line-height:1.3rem;--e-global-typography-9f4a0e1-font-size:20px;--e-global-typography-9f4a0e1-line-height:24px;--e-global-typography-e7c4a20-font-size:1.025rem;--e-global-typography-dca2bf3-font-size:32px;--e-global-typography-dca2bf3-line-height:32px;font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-8 h1{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-kit-8 h2{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}.elementor-kit-8 button,.elementor-kit-8 input[type="button"],.elementor-kit-8 input[type="submit"],.elementor-kit-8 .elementor-button{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:90%;}.e-con{--container-max-width:90%;}}/* Start custom CSS *//* ==========================================================
   GENERAL — RESET / UTILITAIRES
   ========================================================== */
html, body {
    overflow-x: hidden; /* Empêche le scroll horizontal */
}

.icon-flex .elementor-icon {
    display: flex;
}

a {
    transition: 300ms; /* Liens smooth hover */
}

.liens-blancs a {
    color: #ffffff !important;
}

.liens-blancs a:hover {
    opacity: 0.7;
}

.liens-decorations a {
    text-decoration: underline !important;
}

strong, b, .liens-decorations a {
    font-weight: 700 !important;
}

/* ==========================================================
   CARROUSEL LOGOS
   ========================================================== */
.elementor-kit-8 .swiper-wrapper {
    -webkit-transition-timing-function: linear !important;
    transition-timing-function: linear !important;
}

.slider-logos {
    mask-image: linear-gradient(to right, transparent 0, #000 20%, #000 80%, transparent 100%);
}

/* ==========================================================
   VISUAL PORTFOLIO — Couleurs filtres & pagination
   ========================================================== */
.vp-filter__style-minimal .vp-filter__item > *,
.vp-pagination__style-minimal .vp-pagination__item > a:hover,
.vp-filter__style-minimal .vp-filter__item>a:focus,
.vp-filter__style-minimal .vp-filter__item>a:hover,
.vp-filter__style-minimal .vp-filter__item.vp-filter__item-active > * {
    /* Couleurs selon variantes fournies */
    color: #497ea1 !important;
}

.vp-filter__style-minimal .elementor-kit-8 a {
    color: #4a5e45 !important;
}

.vp-filter__style-minimal .vp-filter__item > * {
    color: #002d3a !important;
}

.vp-filter__style-minimal .vp-filter__item>a:focus,
.vp-filter__style-minimal .vp-filter__item>a:hover,
.vp-filter__style-minimal .vp-filter__item.vp-filter__item-active > *,
.vp-pagination__style-minimal .vp-pagination__item>a:hover {
    color: #0180f6 !important;
}

/* ==========================================================
   MEGA MENU — Centrage + transition
   ========================================================== */
.elementskit-megamenu-panel {
    transition: 400ms !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

/* Largeur Mega Menu pour 1024px à 1040px si besoin */
@media (min-width: 1024px) and (max-width: 1040px) {
    .elementskit-megamenu-panel {
        width: 750px !important; /* Ajuster selon widget */
    }
}


/* COOKIES — CookieYes aux couleurs PCMI */

.cky-title {
    color: #232868 !important; /* Bleu foncé */
}

.cky-preference-title {
    color: #232868 !important;
}

.cky-notice-des {
    color: #777777 !important; /* Gris */
}

.cky-btn {
    border-radius: 100px !important;
    border-color: #232868 !important;
}

.cky-btn-accept {
    background-color: #232868 !important; /* Bleu foncé */
    color: #FFFFFF !important;
}

.cky-btn-reject, .cky-btn-preferences {
    color: #232868 !important;
}

.cky-btn-revisit-wrapper,
.cky-btn-revisit-wrapper:hover button {
    background-color: #25A7D9 !important; /* Bleu */
}

.cky-switch input:checked {
    background-color: #25A7D9 !important;
}

.cky-accordion-btn:hover, .cky-btn-close:hover, .cky-show-desc-btn:hover {
    background-color: transparent !important;
}

/* ==========================================================
   FILTER CSS COLORS — Icônes / images
   ========================================================== */
.filter-css-blanc {
    filter: brightness(0) saturate(100%) invert(98%) sepia(3%) saturate(0%) 
            hue-rotate(24deg) brightness(111%) contrast(100%);
}

/* ==========================================================
   CUSTOM POSITIONS — Centre & responsive
   ========================================================== */
.position-center-x {
    left: 50%;
    transform: translateX(-50%);
}

@media (max-width: 1024px) {
    .position-relative-tablette {
        position: relative !important;
    }
}

@media (max-width: 767px) {
    .position-relative-mobile {
        position: relative !important;
    }
}

/* ==========================================================
   CUSTOM HEIGHT
   ========================================================== */
.max-height {
    height: 100%;
}

/* ==========================================================
   CUSTOM MAP — 100% hauteur
   ========================================================== */
.custom-map,
.custom-map .elementor-custom-embed,
.elementor-custom-embed {
    height: 100%;
}


.custom-list a {
    display: inline !important;
}

/* ==========================================================
       CARROUSEL LOGO PARTENAIRES  ========================================================== */

.elementor-kit-8 .swiper-wrapper {
  -webkit-transition-timing-function: linear !important;
  transition-timing-function: linear !important; 
}

/* CUSTOM COLOR */

.mot-fonce {
    font-style: normal !important;
    color: #021C36 !important;
}

/* CUSTOM Bloc icon */

.custom-bloc-icon p {
    text-align: left !important;
}


@media (max-width: 767px) {
    .position-relative-mobile {
        position: relative !important;
    }
}

@media (max-width: 1024px) {
    .position-relative-tablette {
        position: relative !important;
    }
}


.logo-blanc {
  filter: brightness(0) invert(1);
}

/* ==========================================================================
   Fonds animés « conduite + fuite » · 100 % CSS · plombier chauffagiste
   .bg-dynamic    → fond bleu  #232868
   .bg-dynamic-2  → fond gris  #EDEDED

   INSTALLATION (Elementor)
   1. Collez tout ce fichier dans :
      Elementor > Réglages du site > CSS personnalisé   (Elementor Pro)
      ou  Apparence > Personnaliser > CSS additionnel   (toutes versions)
   2. Sur la section : Avancé > Classes CSS > bg-dynamic   (ou bg-dynamic-2)
   Aucun HTML, aucun JavaScript. Hauteur de section conseillée : 300 px mini.

   MODIFICATEURS (à cumuler avec la classe de base)
   .bg-dynamic--encore-plus-discret / .bg-dynamic-2--encore-plus-discret
   .bg-dynamic--sans-fuite          / .bg-dynamic-2--sans-fuite

   ATTENTION : ne coupez jamais une ligne url("data:image/svg+xml,...")
   par un retour à la ligne, le SVG ne se chargerait plus.
   ========================================================================== */


/* ==========================================================================
   1. VERSION BLEUE — #232868
   ========================================================================== */

.bg-dynamic {
  --plb-bleu: #232868;
  --plb-vitesse: 4.5s;
  --plb-flux: 11s;
  --plb-fuite-opacite: 1;

  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--plb-bleu);

  /* 1. la conduite, ses deux colliers et la goutte suspendue au coude
     2. la flaque au sol, alignée sous le coude
     3. le réseau en filigrane
     4-5. deux halos de lumière très diffus */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 170'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.11' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M0 70H600'/%3E%3Cpath d='M200 70V99'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='.09'%3E%3Crect x='94' y='63' width='7' height='14' rx='1'/%3E%3Crect x='438' y='63' width='7' height='14' rx='1'/%3E%3C/g%3E%3Ccircle cx='200' cy='103' r='2.4' fill='%23ffffff' fill-opacity='.34'/%3E%3C/svg%3E"),
    radial-gradient(54px 12px at 200px 100%, rgba(255, 255, 255, .07), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 340'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.032' stroke-width='6'%3E%3Cpath d='M0 268H340M74 0V340'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(65% 75% at 16% 10%, rgba(120, 160, 255, .15), transparent 62%),
    radial-gradient(55% 60% at 90% 88%, rgba(90, 200, 220, .08), transparent 66%);
  background-size: 600px 170px, 600px 100%, 340px 340px, 100% 100%, 100% 100%;
  background-position: 0 0, 0 100%, 0 0, 0 0, 0 0;
  background-repeat: repeat-x, repeat-x, repeat, no-repeat, no-repeat;
}

/* Le contenu de la section repasse au-dessus du fond */
.bg-dynamic > * { position: relative; z-index: 1; }

/* La fuite : deux gouttes alignées sur le coude (x = 200 px, même largeur de
   motif que la conduite, donc l'alignement tient à toutes les largeurs). Les
   distances de chute sont des multiples de la hauteur de motif : la boucle ne
   se voit pas, et les deux gouttes ne tombent jamais au même rythme. */
.bg-dynamic::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: var(--plb-fuite-opacite);
  background-image:
    radial-gradient(1.6px 9px at 200px 24px,  rgba(226, 240, 255, .55), rgba(226, 240, 255, 0) 72%),
    radial-gradient(1.2px 7px at 200px 150px, rgba(226, 240, 255, .30), rgba(226, 240, 255, 0) 72%);
  background-size: 600px 340px, 600px 460px;
  background-position: 0 104px, 0 104px;
  animation: plb-fuite var(--plb-vitesse) linear infinite;
}

@keyframes plb-fuite {
  to { background-position: 0 444px, 0 564px; }
}

/* Le reflet qui circule dans la conduite */
.bg-dynamic::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: linear-gradient(90deg, transparent, rgba(226, 240, 255, .10) 48%, transparent);
  background-size: 260px 5px;
  background-repeat: repeat-x;
  background-position: 0 68px;
  animation: plb-flux var(--plb-flux) linear infinite;
}

@keyframes plb-flux {
  to { background-position: 260px 68px; }
}

.bg-dynamic--encore-plus-discret { --plb-fuite-opacite: .5; --plb-vitesse: 6s; }
.bg-dynamic--encore-plus-discret::after { opacity: .5; }
.bg-dynamic--sans-fuite::before { content: none; }


/* ==========================================================================
   2. VERSION GRISE — #EDEDED
   Mêmes tracés, valeurs inversées : les traits et les gouttes passent en
   bleu translucide pour rester lisibles sur fond clair.
   ========================================================================== */

.bg-dynamic-2 {
  --plb2-gris: #EDEDED;
  --plb2-vitesse: 4.5s;
  --plb2-flux: 11s;
  --plb2-fuite-opacite: 1;

  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--plb2-gris);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 170'%3E%3Cg fill='none' stroke='%23232868' stroke-opacity='.13' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M0 70H600'/%3E%3Cpath d='M200 70V99'/%3E%3C/g%3E%3Cg fill='%23232868' fill-opacity='.11'%3E%3Crect x='94' y='63' width='7' height='14' rx='1'/%3E%3Crect x='438' y='63' width='7' height='14' rx='1'/%3E%3C/g%3E%3Ccircle cx='200' cy='103' r='2.4' fill='%23232868' fill-opacity='.36'/%3E%3C/svg%3E"),
    radial-gradient(54px 12px at 200px 100%, rgba(35, 40, 104, .07), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 340'%3E%3Cg fill='none' stroke='%23232868' stroke-opacity='.045' stroke-width='6'%3E%3Cpath d='M0 268H340M74 0V340'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(65% 75% at 16% 10%, rgba(80, 120, 220, .10), transparent 62%),
    radial-gradient(55% 60% at 90% 88%, rgba(40, 170, 190, .07), transparent 66%);
  background-size: 600px 170px, 600px 100%, 340px 340px, 100% 100%, 100% 100%;
  background-position: 0 0, 0 100%, 0 0, 0 0, 0 0;
  background-repeat: repeat-x, repeat-x, repeat, no-repeat, no-repeat;
}

.bg-dynamic-2 > * { position: relative; z-index: 1; }

.bg-dynamic-2::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: var(--plb2-fuite-opacite);
  background-image:
    radial-gradient(1.6px 9px at 200px 24px,  rgba(35, 40, 104, .45), rgba(35, 40, 104, 0) 72%),
    radial-gradient(1.2px 7px at 200px 150px, rgba(35, 40, 104, .24), rgba(35, 40, 104, 0) 72%);
  background-size: 600px 340px, 600px 460px;
  background-position: 0 104px, 0 104px;
  animation: plb2-fuite var(--plb2-vitesse) linear infinite;
}

@keyframes plb2-fuite {
  to { background-position: 0 444px, 0 564px; }
}

.bg-dynamic-2::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: linear-gradient(90deg, transparent, rgba(35, 40, 104, .09) 48%, transparent);
  background-size: 260px 5px;
  background-repeat: repeat-x;
  background-position: 0 68px;
  animation: plb2-flux var(--plb2-flux) linear infinite;
}

@keyframes plb2-flux {
  to { background-position: 260px 68px; }
}

.bg-dynamic-2--encore-plus-discret { --plb2-fuite-opacite: .5; --plb2-vitesse: 6s; }
.bg-dynamic-2--sans-fuite::before { content: none; }


/* ==========================================================================
   3. ACCESSIBILITÉ — on coupe tout si le visiteur limite les animations
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .bg-dynamic::before,   .bg-dynamic::after,
  .bg-dynamic-2::before, .bg-dynamic-2::after { animation: none; }
}/* End custom CSS */