.elementor-30 .elementor-element.elementor-element-4957343{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-end;--overlay-opacity:0.5;--padding-top:0%;--padding-bottom:5%;--padding-left:0%;--padding-right:0%;}.elementor-30 .elementor-element.elementor-element-4957343:not(.elementor-motion-effects-element-type-background), .elementor-30 .elementor-element.elementor-element-4957343 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://factory.perroquet.eu/wp-content/uploads/2026/08/Frame-1000003839-scaled.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-30 .elementor-element.elementor-element-4957343::before, .elementor-30 .elementor-element.elementor-element-4957343 > .elementor-background-video-container::before, .elementor-30 .elementor-element.elementor-element-4957343 > .e-con-inner > .elementor-background-video-container::before, .elementor-30 .elementor-element.elementor-element-4957343 > .elementor-background-slideshow::before, .elementor-30 .elementor-element.elementor-element-4957343 > .e-con-inner > .elementor-background-slideshow::before, .elementor-30 .elementor-element.elementor-element-4957343 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-30 .elementor-element.elementor-element-b905f13{margin:100px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-30 .elementor-element.elementor-element-b905f13 .elementor-heading-title{font-family:"Neue", Sans-serif;font-size:113.72px;font-weight:400;line-height:130px;color:#F0EFE6;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-30 .elementor-element.elementor-element-52f71f1{width:var( --container-widget-width, 60% );max-width:60%;--container-widget-width:60%;--container-widget-flex-grow:0;font-family:"Neue Roman", Sans-serif;font-size:18px;font-weight:400;color:#F0EFE6;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-30 .elementor-element.elementor-element-0618fa9 .elementor-button{background-color:#1F1E15C7;font-family:"Neue Roman", Sans-serif;font-size:16px;font-weight:500;text-transform:uppercase;letter-spacing:12%;border-radius:0px 0px 0px 0px;padding:10px 10px 10px 10px;}.elementor-30 .elementor-element.elementor-element-0618fa9 .elementor-button:hover, .elementor-30 .elementor-element.elementor-element-0618fa9 .elementor-button:focus{background-color:#CBA84D;}.elementor-30 .elementor-element.elementor-element-0618fa9.elementor-element{--align-self:flex-start;}.elementor-30 .elementor-element.elementor-element-0618fa9 .elementor-button-content-wrapper{flex-direction:row;}.elementor-30 .elementor-element.elementor-element-0618fa9 .elementor-button .elementor-button-content-wrapper{gap:10px;}.elementor-30 .elementor-element.elementor-element-04b29ab{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:180px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-30 .elementor-element.elementor-element-04b29ab:not(.elementor-motion-effects-element-type-background), .elementor-30 .elementor-element.elementor-element-04b29ab > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F0EFE6;}.elementor-30 .elementor-element.elementor-element-c212557{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;}.elementor-30 .elementor-element.elementor-element-b6190a0{--display:flex;}.elementor-30 .elementor-element.elementor-element-a8951d9 .elementor-heading-title{font-family:"Neue Roman", Sans-serif;font-size:64px;font-weight:300;line-height:84px;color:#393624C9;}.elementor-30 .elementor-element.elementor-element-dbbe3fc{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-end;--align-items:flex-start;}.elementor-30 .elementor-element.elementor-element-b8be96c{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:#393624C9;}.elementor-30 .elementor-element.elementor-element-a4b6134{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:#393624C9;}.elementor-30 .elementor-element.elementor-element-2909317{--display:flex;--margin-top:0%;--margin-bottom:0%;--margin-left:-4%;--margin-right:0%;--padding-top:0%;--padding-bottom:0%;--padding-left:5%;--padding-right:0%;}.elementor-30 .elementor-element.elementor-element-04c50ab{--display:flex;}.elementor-30 .elementor-element.elementor-element-13d36bd{--display:flex;--min-height:500px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-end;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-30 .elementor-element.elementor-element-13d36bd:not(.elementor-motion-effects-element-type-background), .elementor-30 .elementor-element.elementor-element-13d36bd > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://factory.perroquet.eu/wp-content/uploads/2026/08/Vector-5.png");background-position:center center;background-repeat:no-repeat;background-size:contain;}.elementor-30 .elementor-element.elementor-element-9a58b65{text-align:center;}.elementor-30 .elementor-element.elementor-element-9a58b65 .elementor-heading-title{font-family:"test", Sans-serif;font-size:24px;font-weight:400;color:#F0EFE6;}.elementor-30 .elementor-element.elementor-element-3fb0b72{text-align:center;font-family:"Neue", Sans-serif;font-size:15px;font-weight:400;color:#F0EFE6;}.elementor-30 .elementor-element.elementor-element-b001995{--display:flex;}.elementor-30 .elementor-element.elementor-element-0ecc911{--display:flex;--min-height:500px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-end;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-30 .elementor-element.elementor-element-0ecc911:not(.elementor-motion-effects-element-type-background), .elementor-30 .elementor-element.elementor-element-0ecc911 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://factory.perroquet.eu/wp-content/uploads/2026/08/Frame-1000003793.png");background-position:center center;background-repeat:no-repeat;background-size:contain;}.elementor-30 .elementor-element.elementor-element-e383439{text-align:center;}.elementor-30 .elementor-element.elementor-element-e383439 .elementor-heading-title{font-family:"test", Sans-serif;font-size:24px;font-weight:400;color:#F0EFE6;}.elementor-30 .elementor-element.elementor-element-296ef07{text-align:center;font-family:"Neue", Sans-serif;font-size:15px;font-weight:400;color:#F0EFE6;}.elementor-30 .elementor-element.elementor-element-77f0001{--display:flex;}.elementor-30 .elementor-element.elementor-element-f8ce282{--display:flex;--min-height:500px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-end;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-30 .elementor-element.elementor-element-f8ce282:not(.elementor-motion-effects-element-type-background), .elementor-30 .elementor-element.elementor-element-f8ce282 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://factory.perroquet.eu/wp-content/uploads/2026/09/Vector1.png");background-position:center center;background-repeat:no-repeat;background-size:contain;}.elementor-30 .elementor-element.elementor-element-5c5a10f{text-align:center;}.elementor-30 .elementor-element.elementor-element-5c5a10f .elementor-heading-title{font-family:"test", Sans-serif;font-size:24px;font-weight:400;color:#F0EFE6;}.elementor-30 .elementor-element.elementor-element-2fcc5d0{text-align:center;font-family:"Neue", Sans-serif;font-size:15px;font-weight:400;color:#F0EFE6;}.elementor-30 .elementor-element.elementor-element-e8e79fb{--display:flex;}.elementor-30 .elementor-element.elementor-element-3300b1b{--display:flex;--min-height:500px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-end;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-30 .elementor-element.elementor-element-3300b1b:not(.elementor-motion-effects-element-type-background), .elementor-30 .elementor-element.elementor-element-3300b1b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://factory.perroquet.eu/wp-content/uploads/2026/08/Vector-6.png");background-position:center center;background-repeat:no-repeat;background-size:contain;}.elementor-30 .elementor-element.elementor-element-e89dd77{text-align:center;}.elementor-30 .elementor-element.elementor-element-e89dd77 .elementor-heading-title{font-family:"test", Sans-serif;font-size:24px;font-weight:400;color:#F0EFE6;}.elementor-30 .elementor-element.elementor-element-056646b{text-align:center;font-family:"Neue", Sans-serif;font-size:15px;font-weight:400;color:#F0EFE6;}.elementor-30 .elementor-element.elementor-element-ffbb72e{--e-n-carousel-swiper-slides-gap:50px;--e-n-carousel-slide-height:auto;--e-n-carousel-slide-container-height:100%;--e-n-carousel-arrow-prev-left-align:0%;--e-n-carousel-arrow-prev-translate-x:0px;--e-n-carousel-arrow-prev-left-position:0px;--e-n-carousel-arrow-prev-top-align:50%;--e-n-carousel-arrow-prev-translate-y:-50%;--e-n-carousel-arrow-prev-top-position:0px;--e-n-carousel-arrow-next-right-align:0%;--e-n-carousel-arrow-next-translate-x:0%;--e-n-carousel-arrow-next-right-position:0px;--e-n-carousel-arrow-next-top-align:50%;--e-n-carousel-arrow-next-translate-y:-50%;--e-n-carousel-arrow-next-top-position:0px;}.elementor-30 .elementor-element.elementor-element-67dcb70{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:180px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-30 .elementor-element.elementor-element-67dcb70:not(.elementor-motion-effects-element-type-background), .elementor-30 .elementor-element.elementor-element-67dcb70 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F0EFE6;}.elementor-30 .elementor-element.elementor-element-6827c27 .elementor-heading-title{font-family:"Neue Roman", Sans-serif;font-size:50px;font-weight:400;line-height:71.32px;color:#393624C9;}.elementor-30 .elementor-element.elementor-element-1173cfd{--display:flex;}.elementor-30 .elementor-element.elementor-element-1d27f4d{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;}.elementor-30 .elementor-element.elementor-element-ced9c78{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-30 .elementor-element.elementor-element-ced9c78.e-con{--align-self:center;}.elementor-30 .elementor-element.elementor-element-a344dc1{--display:flex;--min-height:80px;--justify-content:space-between;--padding-top:5px;--padding-bottom:10px;--padding-left:0px;--padding-right:0px;}.elementor-30 .elementor-element.elementor-element-349e9d6 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-weight:300;color:#393624C9;}.elementor-30 .elementor-element.elementor-element-46ccf0e{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-30 .elementor-element.elementor-element-38ff50a{--display:flex;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-30 .elementor-element.elementor-element-d8dc3e3{text-align:end;}.elementor-30 .elementor-element.elementor-element-d8dc3e3 img{width:20px;}.elementor-30 .elementor-element.elementor-element-1587eb9{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-30 .elementor-element.elementor-element-fba96c7{--display:flex;}.elementor-30 .elementor-element.elementor-element-fba96c7.e-con{--align-self:center;}.elementor-30 .elementor-element.elementor-element-500cb62{--display:flex;--min-height:80px;--justify-content:space-between;--padding-top:5px;--padding-bottom:10px;--padding-left:0px;--padding-right:0px;}.elementor-30 .elementor-element.elementor-element-2611362{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-30 .elementor-element.elementor-element-4dbebbb{--display:flex;}.elementor-30 .elementor-element.elementor-element-1591b9f{text-align:end;}.elementor-30 .elementor-element.elementor-element-1591b9f img{width:20px;}.elementor-30 .elementor-element.elementor-element-337c6b6{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-30 .elementor-element.elementor-element-3f3b854{--display:flex;}.elementor-30 .elementor-element.elementor-element-3f3b854.e-con{--align-self:center;}.elementor-30 .elementor-element.elementor-element-611e229{--display:flex;--min-height:80px;--justify-content:space-between;--padding-top:5px;--padding-bottom:10px;--padding-left:0px;--padding-right:0px;}.elementor-30 .elementor-element.elementor-element-2f339df{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-30 .elementor-element.elementor-element-35ff6c4{--display:flex;}.elementor-30 .elementor-element.elementor-element-738af24{text-align:end;}.elementor-30 .elementor-element.elementor-element-738af24 img{width:20px;}.elementor-30 .elementor-element.elementor-element-2eeea80{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-30 .elementor-element.elementor-element-69d2a95{--display:flex;}.elementor-30 .elementor-element.elementor-element-69d2a95.e-con{--align-self:center;}.elementor-30 .elementor-element.elementor-element-fdb2441{--display:flex;--min-height:80px;--justify-content:space-between;--padding-top:5px;--padding-bottom:10px;--padding-left:0px;--padding-right:0px;}.elementor-30 .elementor-element.elementor-element-9c76e40{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-30 .elementor-element.elementor-element-e428423{--display:flex;}.elementor-30 .elementor-element.elementor-element-b7b06aa{text-align:end;}.elementor-30 .elementor-element.elementor-element-b7b06aa img{width:20px;}.elementor-30 .elementor-element.elementor-element-f7bddae{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-30 .elementor-element.elementor-element-89bd804{--display:flex;}.elementor-30 .elementor-element.elementor-element-89bd804.e-con{--align-self:center;}.elementor-30 .elementor-element.elementor-element-32b04ad{--display:flex;--min-height:80px;--justify-content:space-between;--padding-top:5px;--padding-bottom:10px;--padding-left:0px;--padding-right:0px;}.elementor-30 .elementor-element.elementor-element-f260b59{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-30 .elementor-element.elementor-element-3d2f43c{--display:flex;}.elementor-30 .elementor-element.elementor-element-72609ca{text-align:end;}.elementor-30 .elementor-element.elementor-element-72609ca img{width:20px;}.elementor-30 .elementor-element.elementor-element-311e99f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:180px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-30 .elementor-element.elementor-element-311e99f:not(.elementor-motion-effects-element-type-background), .elementor-30 .elementor-element.elementor-element-311e99f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F0EFE6;}.elementor-30 .elementor-element.elementor-element-a3b2b35{--display:flex;}.elementor-30 .elementor-element.elementor-element-a3b2b35.e-con{--align-self:center;}.elementor-30 .elementor-element.elementor-element-c57ed4d .elementor-heading-title{font-family:"Neue Roman", Sans-serif;font-size:64px;font-weight:400;line-height:84px;color:#393624C9;}.elementor-30 .elementor-element.elementor-element-468f5cc .elementor-button{background-color:#1F1E15C7;font-family:"Neue Roman", Sans-serif;font-size:16px;font-weight:500;text-transform:uppercase;letter-spacing:12%;border-radius:0px 0px 0px 0px;padding:10px 10px 10px 10px;}.elementor-30 .elementor-element.elementor-element-468f5cc .elementor-button:hover, .elementor-30 .elementor-element.elementor-element-468f5cc .elementor-button:focus{background-color:#CBA84D;}.elementor-30 .elementor-element.elementor-element-468f5cc.elementor-element{--align-self:flex-start;}.elementor-30 .elementor-element.elementor-element-468f5cc .elementor-button-content-wrapper{flex-direction:row;}.elementor-30 .elementor-element.elementor-element-468f5cc .elementor-button .elementor-button-content-wrapper{gap:10px;}.elementor-30 .elementor-element.elementor-element-28d2cda{--display:flex;}.elementor-30 .elementor-element.elementor-element-0694f23.elementor-element{--align-self:flex-end;}.elementor-30 .elementor-element.elementor-element-0694f23{text-align:end;}.elementor-30 .elementor-element.elementor-element-0694f23 img{width:55%;}.elementor-30 .elementor-element.elementor-element-053ee13{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:180px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-30 .elementor-element.elementor-element-053ee13:not(.elementor-motion-effects-element-type-background), .elementor-30 .elementor-element.elementor-element-053ee13 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F0EFE6;}.elementor-30 .elementor-element.elementor-element-cd5c000{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;}.elementor-30 .elementor-element.elementor-element-7565265{--display:flex;}.elementor-30 .elementor-element.elementor-element-4fbc384 .elementor-heading-title{font-family:"Neue Roman", Sans-serif;font-size:64px;font-weight:300;line-height:84px;color:#393624C9;}.elementor-30 .elementor-element.elementor-element-668f322{--display:flex;--margin-top:0%;--margin-bottom:0%;--margin-left:-4%;--margin-right:0%;--padding-top:0%;--padding-bottom:0%;--padding-left:5%;--padding-right:0%;}.elementor-30 .elementor-element.elementor-element-bc3f854{--display:flex;}.elementor-30 .elementor-element.elementor-element-50ccd95{--display:flex;--min-height:400px;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:space-evenly;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--background-transition:0.3s;--padding-top:10%;--padding-bottom:0%;--padding-left:15%;--padding-right:0%;}.elementor-30 .elementor-element.elementor-element-50ccd95:not(.elementor-motion-effects-element-type-background), .elementor-30 .elementor-element.elementor-element-50ccd95 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://factory.perroquet.eu/wp-content/uploads/2026/07/card-chiffre-cles.png");background-position:center center;background-repeat:no-repeat;background-size:contain;}.elementor-30 .elementor-element.elementor-element-50ccd95:hover{background-image:url("https://factory.perroquet.eu/wp-content/uploads/2026/07/card-chiffre-cles-hover.png");background-position:center center;background-repeat:no-repeat;background-size:contain;}.elementor-30 .elementor-element.elementor-element-5580fb3{text-align:start;}.elementor-30 .elementor-element.elementor-element-08e1ab8{text-align:start;}.elementor-30 .elementor-element.elementor-element-11274bc{--display:flex;}.elementor-30 .elementor-element.elementor-element-d2a7f21{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-30 .elementor-element.elementor-element-d2a7f21 .elementor-heading-title{font-family:"Neue Roman", Sans-serif;font-size:30px;font-weight:500;color:#7D7B5A;}.elementor-30 .elementor-element.elementor-element-b58a26f{width:100%;max-width:100%;text-align:start;font-family:"Neue Roman", Sans-serif;font-size:15px;font-weight:400;color:#7D7B5A;}.elementor-30 .elementor-element.elementor-element-b4edc5a{--display:flex;}.elementor-30 .elementor-element.elementor-element-eabea42{--display:flex;--min-height:400px;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:space-evenly;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--background-transition:0.3s;--padding-top:10%;--padding-bottom:0%;--padding-left:15%;--padding-right:0%;}.elementor-30 .elementor-element.elementor-element-eabea42:not(.elementor-motion-effects-element-type-background), .elementor-30 .elementor-element.elementor-element-eabea42 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://factory.perroquet.eu/wp-content/uploads/2026/07/card-chiffre-cles.png");background-position:center center;background-repeat:no-repeat;background-size:contain;}.elementor-30 .elementor-element.elementor-element-eabea42:hover{background-image:url("https://factory.perroquet.eu/wp-content/uploads/2026/07/card-chiffre-cles-hover.png");background-position:center center;background-repeat:no-repeat;background-size:contain;}.elementor-30 .elementor-element.elementor-element-8410eb7{text-align:start;}.elementor-30 .elementor-element.elementor-element-8a07da3{text-align:start;}.elementor-30 .elementor-element.elementor-element-43fbf6f{--display:flex;}.elementor-30 .elementor-element.elementor-element-a7a8ebe{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-30 .elementor-element.elementor-element-a7a8ebe .elementor-heading-title{font-family:"Neue Roman", Sans-serif;font-size:30px;font-weight:500;color:#7D7B5A;}.elementor-30 .elementor-element.elementor-element-ee516cd{width:100%;max-width:100%;text-align:start;font-family:"Neue Roman", Sans-serif;font-size:15px;font-weight:400;color:#7D7B5A;}.elementor-30 .elementor-element.elementor-element-f6701ae{--display:flex;}.elementor-30 .elementor-element.elementor-element-f3dce4d{--display:flex;--min-height:400px;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:space-evenly;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--background-transition:0.3s;--padding-top:10%;--padding-bottom:0%;--padding-left:15%;--padding-right:0%;}.elementor-30 .elementor-element.elementor-element-f3dce4d:not(.elementor-motion-effects-element-type-background), .elementor-30 .elementor-element.elementor-element-f3dce4d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://factory.perroquet.eu/wp-content/uploads/2026/07/card-chiffre-cles.png");background-position:center center;background-repeat:no-repeat;background-size:contain;}.elementor-30 .elementor-element.elementor-element-f3dce4d:hover{background-image:url("https://factory.perroquet.eu/wp-content/uploads/2026/07/card-chiffre-cles-hover.png");background-position:center center;background-repeat:no-repeat;background-size:contain;}.elementor-30 .elementor-element.elementor-element-6b888cb{text-align:start;}.elementor-30 .elementor-element.elementor-element-22a3c82{text-align:start;}.elementor-30 .elementor-element.elementor-element-1680d65{--display:flex;}.elementor-30 .elementor-element.elementor-element-cac5e66{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-30 .elementor-element.elementor-element-cac5e66 .elementor-heading-title{font-family:"Neue Roman", Sans-serif;font-size:30px;font-weight:500;color:#7D7B5A;}.elementor-30 .elementor-element.elementor-element-241bffb{width:100%;max-width:100%;text-align:start;font-family:"Neue Roman", Sans-serif;font-size:15px;font-weight:400;color:#7D7B5A;}.elementor-30 .elementor-element.elementor-element-c954255{--display:flex;}.elementor-30 .elementor-element.elementor-element-8a1cfe8{--display:flex;--min-height:400px;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:space-evenly;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--background-transition:0.3s;--padding-top:10%;--padding-bottom:0%;--padding-left:15%;--padding-right:0%;}.elementor-30 .elementor-element.elementor-element-8a1cfe8:not(.elementor-motion-effects-element-type-background), .elementor-30 .elementor-element.elementor-element-8a1cfe8 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://factory.perroquet.eu/wp-content/uploads/2026/07/card-chiffre-cles.png");background-position:center center;background-repeat:no-repeat;background-size:contain;}.elementor-30 .elementor-element.elementor-element-8a1cfe8:hover{background-image:url("https://factory.perroquet.eu/wp-content/uploads/2026/07/card-chiffre-cles-hover.png");background-position:center center;background-repeat:no-repeat;background-size:contain;}.elementor-30 .elementor-element.elementor-element-298c2ba{text-align:start;}.elementor-30 .elementor-element.elementor-element-de98f7d{text-align:start;}.elementor-30 .elementor-element.elementor-element-a1a4c0f{--display:flex;}.elementor-30 .elementor-element.elementor-element-c9c30fa{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-30 .elementor-element.elementor-element-c9c30fa .elementor-heading-title{font-family:"Neue Roman", Sans-serif;font-size:30px;font-weight:500;color:#7D7B5A;}.elementor-30 .elementor-element.elementor-element-a33f672{width:100%;max-width:100%;text-align:start;font-family:"Neue Roman", Sans-serif;font-size:15px;font-weight:400;color:#7D7B5A;}.elementor-30 .elementor-element.elementor-element-17dbb9f{--e-n-carousel-swiper-slides-gap:50px;--e-n-carousel-slide-height:auto;--e-n-carousel-slide-container-height:100%;--e-n-carousel-arrow-prev-left-align:0%;--e-n-carousel-arrow-prev-translate-x:0px;--e-n-carousel-arrow-prev-left-position:0px;--e-n-carousel-arrow-prev-top-align:50%;--e-n-carousel-arrow-prev-translate-y:-50%;--e-n-carousel-arrow-prev-top-position:0px;--e-n-carousel-arrow-next-right-align:0%;--e-n-carousel-arrow-next-translate-x:0%;--e-n-carousel-arrow-next-right-position:0px;--e-n-carousel-arrow-next-top-align:50%;--e-n-carousel-arrow-next-translate-y:-50%;--e-n-carousel-arrow-next-top-position:0px;}.elementor-30 .elementor-element.elementor-element-3ed7f43{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:180px;--padding-bottom:180px;--padding-left:0px;--padding-right:0px;}.elementor-30 .elementor-element.elementor-element-3ed7f43:not(.elementor-motion-effects-element-type-background), .elementor-30 .elementor-element.elementor-element-3ed7f43 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F0EFE6;}.elementor-30 .elementor-element.elementor-element-8ff09d7{--display:flex;}.elementor-30 .elementor-element.elementor-element-8ff09d7.e-con{--align-self:center;}.elementor-30 .elementor-element.elementor-element-8e66bd8 .elementor-heading-title{font-family:"Neue Roman", Sans-serif;font-size:64px;font-weight:400;line-height:84px;color:#393624C9;}.elementor-30 .elementor-element.elementor-element-dd928c4{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-30 .elementor-element.elementor-element-f737ff3 .elementor-button{background-color:#1F1E15C7;font-family:"Neue Roman", Sans-serif;font-size:16px;font-weight:500;text-transform:uppercase;letter-spacing:12%;border-radius:0px 0px 0px 0px;padding:10px 10px 10px 10px;}.elementor-30 .elementor-element.elementor-element-f737ff3 .elementor-button:hover, .elementor-30 .elementor-element.elementor-element-f737ff3 .elementor-button:focus{background-color:#CBA84D;}.elementor-30 .elementor-element.elementor-element-f737ff3.elementor-element{--align-self:flex-start;}.elementor-30 .elementor-element.elementor-element-f737ff3 .elementor-button-content-wrapper{flex-direction:row;}.elementor-30 .elementor-element.elementor-element-f737ff3 .elementor-button .elementor-button-content-wrapper{gap:10px;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-30 .elementor-element.elementor-element-4957343{--content-width:95%;}.elementor-30 .elementor-element.elementor-element-04b29ab{--content-width:95%;}.elementor-30 .elementor-element.elementor-element-dbbe3fc{--width:50%;}.elementor-30 .elementor-element.elementor-element-2909317{--width:100vw;}.elementor-30 .elementor-element.elementor-element-67dcb70{--content-width:95%;}.elementor-30 .elementor-element.elementor-element-ced9c78{--width:100%;}.elementor-30 .elementor-element.elementor-element-fba96c7{--width:20%;}.elementor-30 .elementor-element.elementor-element-3f3b854{--width:20%;}.elementor-30 .elementor-element.elementor-element-69d2a95{--width:20%;}.elementor-30 .elementor-element.elementor-element-89bd804{--width:20%;}.elementor-30 .elementor-element.elementor-element-311e99f{--content-width:95%;}.elementor-30 .elementor-element.elementor-element-a3b2b35{--width:60%;}.elementor-30 .elementor-element.elementor-element-053ee13{--content-width:95%;}.elementor-30 .elementor-element.elementor-element-668f322{--width:100vw;}.elementor-30 .elementor-element.elementor-element-11274bc{--width:80%;}.elementor-30 .elementor-element.elementor-element-43fbf6f{--width:80%;}.elementor-30 .elementor-element.elementor-element-1680d65{--width:80%;}.elementor-30 .elementor-element.elementor-element-a1a4c0f{--width:80%;}.elementor-30 .elementor-element.elementor-element-3ed7f43{--content-width:95%;}.elementor-30 .elementor-element.elementor-element-8ff09d7{--width:77%;}}@media(max-width:1024px) and (min-width:768px){.elementor-30 .elementor-element.elementor-element-a3b2b35{--width:80%;}.elementor-30 .elementor-element.elementor-element-8ff09d7{--width:80%;}}@media(max-width:1024px){.elementor-30 .elementor-element.elementor-element-b905f13 .elementor-heading-title{font-size:60px;line-height:60px;}.elementor-30 .elementor-element.elementor-element-a8951d9 .elementor-heading-title{font-size:45px;line-height:45px;}.elementor-30 .elementor-element.elementor-element-dbbe3fc{--justify-content:flex-end;}.elementor-30 .elementor-element.elementor-element-ffbb72e{--e-n-carousel-swiper-slides-to-display:2;}.elementor-30 .elementor-element.elementor-element-6827c27 .elementor-heading-title{font-size:40px;line-height:40px;}.elementor-30 .elementor-element.elementor-element-c57ed4d .elementor-heading-title{font-size:45px;line-height:45px;}.elementor-30 .elementor-element.elementor-element-4fbc384 .elementor-heading-title{font-size:45px;line-height:45px;}.elementor-30 .elementor-element.elementor-element-17dbb9f{--e-n-carousel-swiper-slides-to-display:2;}.elementor-30 .elementor-element.elementor-element-8e66bd8{z-index:3;}.elementor-30 .elementor-element.elementor-element-8e66bd8 .elementor-heading-title{font-size:58px;}.elementor-30 .elementor-element.elementor-element-dd928c4{z-index:3;}.elementor-30 .elementor-element.elementor-element-f737ff3{z-index:3;}}@media(max-width:767px){.elementor-30 .elementor-element.elementor-element-4957343::before, .elementor-30 .elementor-element.elementor-element-4957343 > .elementor-background-video-container::before, .elementor-30 .elementor-element.elementor-element-4957343 > .e-con-inner > .elementor-background-video-container::before, .elementor-30 .elementor-element.elementor-element-4957343 > .elementor-background-slideshow::before, .elementor-30 .elementor-element.elementor-element-4957343 > .e-con-inner > .elementor-background-slideshow::before, .elementor-30 .elementor-element.elementor-element-4957343 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-image:url("https://factory.perroquet.eu/wp-content/uploads/2026/07/patern-up.svg");}.elementor-30 .elementor-element.elementor-element-4957343{--padding-top:0%;--padding-bottom:15%;--padding-left:5%;--padding-right:5%;}.elementor-30 .elementor-element.elementor-element-b905f13 .elementor-heading-title{font-size:48px;line-height:50px;}.elementor-30 .elementor-element.elementor-element-04b29ab{--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--padding-top:50px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-30 .elementor-element.elementor-element-a8951d9 .elementor-heading-title{font-size:48px;line-height:115%;}.elementor-30 .elementor-element.elementor-element-b8be96c{width:100%;max-width:100%;}.elementor-30 .elementor-element.elementor-element-a4b6134{width:100%;max-width:100%;}.elementor-30 .elementor-element.elementor-element-2909317.e-con{--align-self:center;}.elementor-30 .elementor-element.elementor-element-13d36bd{--padding-top:0%;--padding-bottom:25%;--padding-left:0%;--padding-right:0%;}.elementor-30 .elementor-element.elementor-element-0ecc911{--padding-top:0%;--padding-bottom:25%;--padding-left:0%;--padding-right:0%;}.elementor-30 .elementor-element.elementor-element-f8ce282{--padding-top:0%;--padding-bottom:25%;--padding-left:0%;--padding-right:0%;}.elementor-30 .elementor-element.elementor-element-3300b1b{--padding-top:0%;--padding-bottom:25%;--padding-left:0%;--padding-right:0%;}.elementor-30 .elementor-element.elementor-element-ffbb72e{--e-n-carousel-swiper-slides-to-display:1;}.elementor-30 .elementor-element.elementor-element-67dcb70{--padding-top:30%;--padding-bottom:0%;--padding-left:0%;--padding-right:0%;}.elementor-30 .elementor-element.elementor-element-6827c27{width:var( --container-widget-width, 90% );max-width:90%;--container-widget-width:90%;--container-widget-flex-grow:0;}.elementor-30 .elementor-element.elementor-element-6827c27.elementor-element{--align-self:center;}.elementor-30 .elementor-element.elementor-element-6827c27 .elementor-heading-title{font-size:40px;line-height:115%;}.elementor-30 .elementor-element.elementor-element-1173cfd{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-30 .elementor-element.elementor-element-349e9d6 .elementor-heading-title{font-size:24px;}.elementor-30 .elementor-element.elementor-element-311e99f{--padding-top:50px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-30 .elementor-element.elementor-element-c57ed4d .elementor-heading-title{font-size:42px;line-height:115%;}.elementor-30 .elementor-element.elementor-element-0694f23 img{width:100%;}.elementor-30 .elementor-element.elementor-element-053ee13{--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--padding-top:50px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-30 .elementor-element.elementor-element-4fbc384 .elementor-heading-title{font-size:37px;line-height:115%;}.elementor-30 .elementor-element.elementor-element-668f322.e-con{--align-self:center;}.elementor-30 .elementor-element.elementor-element-50ccd95{--padding-top:15%;--padding-bottom:15%;--padding-left:5%;--padding-right:0%;}.elementor-30 .elementor-element.elementor-element-eabea42{--padding-top:15%;--padding-bottom:15%;--padding-left:5%;--padding-right:0%;}.elementor-30 .elementor-element.elementor-element-f3dce4d{--padding-top:15%;--padding-bottom:15%;--padding-left:5%;--padding-right:0%;}.elementor-30 .elementor-element.elementor-element-8a1cfe8{--padding-top:15%;--padding-bottom:15%;--padding-left:5%;--padding-right:0%;}.elementor-30 .elementor-element.elementor-element-17dbb9f{--e-n-carousel-swiper-slides-to-display:1;}.elementor-30 .elementor-element.elementor-element-8e66bd8{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-30 .elementor-element.elementor-element-8e66bd8 .elementor-heading-title{font-size:42px;line-height:115%;}}/* Start custom CSS for container, class: .elementor-element-13d36bd *//* ================================================== CARTE STATISTIQUE — CONFIGURATION GÉNÉRALE ================================================== */ .stat-card { --stat-color-default: #393624c9; --stat-hover-start: #e2e0d4; --stat-hover-end: #e2e0d44d; --stat-gradient: linear-gradient( 90deg, var(--stat-color-default) 0%, var(--stat-color-default) 50%, var(--stat-hover-start) 50%, var(--stat-hover-end) 100% ); --stat-background-position: 0%; /* * Voile noir affiché au survol. * * --stat-veil-opacity : densité maximale, atteinte en bas de carte. * --stat-veil-height : hauteur à laquelle le voile devient invisible. */ --stat-veil-opacity: 0.65; --stat-veil-height: 70%; position: relative; /* * Contient le voile dans les angles arrondis de la carte. * À retirer si un élément doit volontairement déborder. */ overflow: hidden; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* ================================================== SURVOL ET FOCUS ================================================== */ .stat-card:hover, .stat-card:focus-within { --stat-background-position: 100%; } .stat-card:hover { transform: translateY(-4px); } /* ================================================== VOILE NOIR AU SURVOL Opaque en bas, transparent en haut ================================================== */ /* * Le voile est porté par un pseudo-élément de la carte, * jamais par le compteur : celui-ci utilise déjà son * background pour le background-clip: text. * * L'arrêt intermédiaire à 35 % adoucit la courbe. * Un dégradé linéaire pur donne une transition * qui paraît coupée à l'œil. */ .stat-card::before { content: ""; position: absolute; inset: 0; z-index: 1; background-image: linear-gradient( to top, rgba(0, 0, 0, var(--stat-veil-opacity)) 0%, rgba(0, 0, 0, calc(var(--stat-veil-opacity) * 0.55)) 35%, rgba(0, 0, 0, 0) var(--stat-veil-height) ); opacity: 0; pointer-events: none; border-radius: inherit; transition: opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1); } .stat-card:hover::before, .stat-card:focus-within::before { opacity: 1; } /* * Le contenu doit passer au-dessus du voile. * * Si le compteur n'est pas enfant direct de .stat-card, * la seconde règle prend le relais. */ .stat-card > * { position: relative; z-index: 2; } .stat-card .elementor-widget-container { position: relative; z-index: 2; } /* ================================================== DÉGRADÉ UNIQUE SUR TOUT LE COMPTEUR ================================================== */ /* * Le dégradé est appliqué uniquement ici. * * Il couvre : * - le nombre ; * - le préfixe ; * - le suffixe ; * - le sous-suffixe m² ; * - le titre. */ .stat-card .elementor-counter { color: transparent !important; background-image: var(--stat-gradient) !important; background-size: 200% 100% !important; background-position: var(--stat-background-position) 50% !important; background-repeat: no-repeat !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; text-align: center !important; overflow: visible !important; transition: background-position 0.65s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* ================================================== ÉLÉMENTS INTERNES ================================================== */ /* * Les enfants héritent de la transparence du parent. * Aucun enfant ne possède son propre dégradé. */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix, .stat-card .elementor-counter-title, .stat-card .elementor-counter-number-suffix::after { color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; -webkit-text-fill-color: inherit !important; transition: none !important; } /* ================================================== WRAPPER DU NOMBRE ================================================== */ /* * Important : * ne pas utiliser display:flex ici. * * inline-block permet au dégradé du parent de couvrir * le nombre, le suffixe et le pseudo-élément m². */ .stat-card .elementor-counter-number-wrapper { display: inline-block !important; width: auto !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; text-align: center !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; } /* Les éléments restent côte à côte */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix { display: inline-block !important; width: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; padding: 0 !important; position: static !important; transform: none !important; vertical-align: baseline; white-space: nowrap !important; overflow: visible !important; } /* Masque uniquement le préfixe vide */ .stat-card .elementor-counter-number-prefix:empty { display: none !important; } /* ================================================== TITRE SOUS LE COMPTEUR ================================================== */ .stat-card .elementor-counter-title { display: block !important; width: 100% !important; text-align: center !important; overflow: visible !important; } /* ================================================== SUFFIXE CLASSIQUE Exemple : 15 Ans ================================================== */ .stat-card .elementor-counter-number-suffix { font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; /* * vertical-align remplace position/top. * Le suffixe reste inclus dans le dégradé du parent. */ vertical-align: 0.55em !important; position: static !important; top: auto !important; } /* ================================================== COMPTEUR SPÉCIAL : 80k m² ================================================== */ /* * Configuration Elementor : * * Nombre : 80 * Suffixe : k * Classe : stat-card suffix-k-m2 */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix, .stat-card .suffix-k-m2 .elementor-counter-number-suffix { display: inline-block !important; font-size: 1em !important; font-weight: inherit !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: baseline !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== AJOUT DE m² ================================================== */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { content: "m²" !important; display: inline-block !important; margin-left: 0em !important; padding: 0 !important; font-size: 0.32em !important; font-weight: 400 !important; line-height: 1 !important; /* * Important : * ne pas utiliser position: relative ni top. * vertical-align garde m² dans la zone du dégradé. */ position: static !important; top: auto !important; vertical-align: super !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; transition: none !important; } /* ================================================== SUFFIXE « Ans » ================================================== */ /* * Configuration Elementor : * * Suffixe : Ans * Classe : stat-card suffix-ans */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { display: inline-block !important; font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: 0.55em !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== ACCESSIBILITÉ ================================================== */ @media (prefers-reduced-motion: reduce) { .stat-card, .stat-card .elementor-counter, .stat-card::before { transition: none !important; } .stat-card:hover { transform: none !important; } } /* ================================================== AJUSTEMENTS D’ESPACEMENT ================================================== */ /* Rapproche le préfixe du nombre : +300 */ .stat-card .elementor-counter-number-prefix { margin-right: -0em !important; } /* Rapproche les suffixes classiques du nombre */ .stat-card .elementor-counter-number-suffix { margin-left: 0em !important; } /* ================================================== AJUSTEMENTS FINAUX DES SUFFIXES ================================================== */ /* m² : plus proche du k et nettement plus bas */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { margin-left: 0.08em !important; vertical-align: -0em !important; } /* Ans : plus proche du nombre et légèrement plus bas */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { margin-left: 0em !important; vertical-align: 0.25em !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-0ecc911 *//* ================================================== CARTE STATISTIQUE — CONFIGURATION GÉNÉRALE ================================================== */ .stat-card { --stat-color-default: #393624c9; --stat-hover-start: #e2e0d4; --stat-hover-end: #e2e0d44d; --stat-gradient: linear-gradient( 90deg, var(--stat-color-default) 0%, var(--stat-color-default) 50%, var(--stat-hover-start) 50%, var(--stat-hover-end) 100% ); --stat-background-position: 0%; /* * Voile noir affiché au survol, posé sur l'image. * * --stat-veil-opacity : densité maximale, atteinte en bas. * --stat-veil-height : hauteur à laquelle le voile disparaît. * --stat-image-radius : à aligner sur l'arrondi réglé dans Elementor. */ --stat-veil-opacity: 0.65; --stat-veil-height: 70%; --stat-image-radius: 16px; position: relative; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* ================================================== SURVOL ET FOCUS ================================================== */ .stat-card:hover, .stat-card:focus-within { --stat-background-position: 100%; } .stat-card:hover { transform: translateY(-4px); } /* ================================================== CONTENEUR DE L'IMAGE ================================================== */ /* * L'arrondi et le rognage sont portés par le conteneur, * pas par le voile. * * Conséquence : le dégradé épouse exactement la forme * de l'image, quel que soit le rayon appliqué. * * line-height: 0 supprime l'espace parasite sous une * image restée en display inline. */ .stat-card .elementor-widget-image .elementor-widget-container, .stat-card .stat-media { position: relative; display: block; overflow: hidden; border-radius: var(--stat-image-radius); line-height: 0; } /* L'image remplit son conteneur et suit son arrondi */ .stat-card .elementor-widget-image img, .stat-card .stat-media img { display: block; width: 100%; height: auto; border-radius: inherit; } /* ================================================== VOILE NOIR AU SURVOL Opaque en bas, transparent en haut ================================================== */ /* * Le voile est un pseudo-élément du conteneur d'image. * Il ne peut pas être posé sur le compteur, dont le * background sert déjà au background-clip: text. * * L'arrêt intermédiaire à 35 % adoucit la courbe : * un dégradé linéaire pur paraît coupé à l'œil. */ .stat-card .elementor-widget-image .elementor-widget-container::after, .stat-card .stat-media::after { content: ""; position: absolute; inset: 0; z-index: 1; background-image: linear-gradient( to top, rgba(0, 0, 0, var(--stat-veil-opacity)) 0%, rgba(0, 0, 0, calc(var(--stat-veil-opacity) * 0.55)) 35%, rgba(0, 0, 0, 0) var(--stat-veil-height) ); opacity: 0; pointer-events: none; border-radius: inherit; transition: opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1); } .stat-card:hover .elementor-widget-image .elementor-widget-container::after, .stat-card:focus-within .elementor-widget-image .elementor-widget-container::after, .stat-card:hover .stat-media::after, .stat-card:focus-within .stat-media::after { opacity: 1; } /* ================================================== DÉGRADÉ UNIQUE SUR TOUT LE COMPTEUR ================================================== */ /* * Le dégradé est appliqué uniquement ici. * * Il couvre : * - le nombre ; * - le préfixe ; * - le suffixe ; * - le sous-suffixe m² ; * - le titre. */ .stat-card .elementor-counter { color: transparent !important; background-image: var(--stat-gradient) !important; background-size: 200% 100% !important; background-position: var(--stat-background-position) 50% !important; background-repeat: no-repeat !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; text-align: center !important; overflow: visible !important; transition: background-position 0.65s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* * Le compteur reste au-dessus du voile s'il chevauche * l'image dans la mise en page. */ .stat-card .elementor-widget-counter { position: relative; z-index: 2; } /* ================================================== ÉLÉMENTS INTERNES ================================================== */ /* * Les enfants héritent de la transparence du parent. * Aucun enfant ne possède son propre dégradé. */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix, .stat-card .elementor-counter-title, .stat-card .elementor-counter-number-suffix::after { color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; -webkit-text-fill-color: inherit !important; transition: none !important; } /* ================================================== WRAPPER DU NOMBRE ================================================== */ /* * Important : * ne pas utiliser display:flex ici. * * inline-block permet au dégradé du parent de couvrir * le nombre, le suffixe et le pseudo-élément m². */ .stat-card .elementor-counter-number-wrapper { display: inline-block !important; width: auto !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; text-align: center !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; } /* Les éléments restent côte à côte */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix { display: inline-block !important; width: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; padding: 0 !important; position: static !important; transform: none !important; vertical-align: baseline; white-space: nowrap !important; overflow: visible !important; } /* Masque uniquement le préfixe vide */ .stat-card .elementor-counter-number-prefix:empty { display: none !important; } /* ================================================== TITRE SOUS LE COMPTEUR ================================================== */ .stat-card .elementor-counter-title { display: block !important; width: 100% !important; text-align: center !important; overflow: visible !important; } /* ================================================== SUFFIXE CLASSIQUE Exemple : 15 Ans ================================================== */ .stat-card .elementor-counter-number-suffix { font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; /* * vertical-align remplace position/top. * Le suffixe reste inclus dans le dégradé du parent. */ vertical-align: 0.55em !important; position: static !important; top: auto !important; } /* ================================================== COMPTEUR SPÉCIAL : 80k m² ================================================== */ /* * Configuration Elementor : * * Nombre : 80 * Suffixe : k * Classe : stat-card suffix-k-m2 */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix, .stat-card .suffix-k-m2 .elementor-counter-number-suffix { display: inline-block !important; font-size: 1em !important; font-weight: inherit !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: baseline !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== AJOUT DE m² ================================================== */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { content: "m²" !important; display: inline-block !important; margin-left: 0em !important; padding: 0 !important; font-size: 0.32em !important; font-weight: 400 !important; line-height: 1 !important; /* * Important : * ne pas utiliser position: relative ni top. * vertical-align garde m² dans la zone du dégradé. */ position: static !important; top: auto !important; vertical-align: super !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; transition: none !important; } /* ================================================== SUFFIXE « Ans » ================================================== */ /* * Configuration Elementor : * * Suffixe : Ans * Classe : stat-card suffix-ans */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { display: inline-block !important; font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: 0.55em !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== ACCESSIBILITÉ ================================================== */ @media (prefers-reduced-motion: reduce) { .stat-card, .stat-card .elementor-counter, .stat-card .elementor-widget-image .elementor-widget-container::after, .stat-card .stat-media::after { transition: none !important; } .stat-card:hover { transform: none !important; } } /* ================================================== AJUSTEMENTS D’ESPACEMENT ================================================== */ /* Rapproche le préfixe du nombre : +300 */ .stat-card .elementor-counter-number-prefix { margin-right: -0em !important; } /* Rapproche les suffixes classiques du nombre */ .stat-card .elementor-counter-number-suffix { margin-left: 0em !important; } /* ================================================== AJUSTEMENTS FINAUX DES SUFFIXES ================================================== */ /* m² : plus proche du k et nettement plus bas */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { margin-left: 0.08em !important; vertical-align: -0em !important; } /* Ans : plus proche du nombre et légèrement plus bas */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { margin-left: 0em !important; vertical-align: 0.25em !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-f8ce282 *//* ================================================== CARTE STATISTIQUE — CONFIGURATION GÉNÉRALE ================================================== */ .stat-card { --stat-color-default: #393624c9; --stat-hover-start: #e2e0d4; --stat-hover-end: #e2e0d44d; --stat-gradient: linear-gradient( 90deg, var(--stat-color-default) 0%, var(--stat-color-default) 50%, var(--stat-hover-start) 50%, var(--stat-hover-end) 100% ); --stat-background-position: 0%; /* * Voile noir affiché au survol, posé sur l'image. * * --stat-veil-opacity : densité maximale, atteinte en bas. * --stat-veil-height : hauteur à laquelle le voile disparaît. * --stat-image-radius : à aligner sur l'arrondi réglé dans Elementor. */ --stat-veil-opacity: 0.65; --stat-veil-height: 70%; --stat-image-radius: 16px; position: relative; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* ================================================== SURVOL ET FOCUS ================================================== */ .stat-card:hover, .stat-card:focus-within { --stat-background-position: 100%; } .stat-card:hover { transform: translateY(-4px); } /* ================================================== CONTENEUR DE L'IMAGE ================================================== */ /* * L'arrondi et le rognage sont portés par le conteneur, * pas par le voile. * * Conséquence : le dégradé épouse exactement la forme * de l'image, quel que soit le rayon appliqué. * * line-height: 0 supprime l'espace parasite sous une * image restée en display inline. */ .stat-card .elementor-widget-image .elementor-widget-container, .stat-card .stat-media { position: relative; display: block; overflow: hidden; border-radius: var(--stat-image-radius); line-height: 0; } /* L'image remplit son conteneur et suit son arrondi */ .stat-card .elementor-widget-image img, .stat-card .stat-media img { display: block; width: 100%; height: auto; border-radius: inherit; } /* ================================================== VOILE NOIR AU SURVOL Opaque en bas, transparent en haut ================================================== */ /* * Le voile est un pseudo-élément du conteneur d'image. * Il ne peut pas être posé sur le compteur, dont le * background sert déjà au background-clip: text. * * L'arrêt intermédiaire à 35 % adoucit la courbe : * un dégradé linéaire pur paraît coupé à l'œil. */ .stat-card .elementor-widget-image .elementor-widget-container::after, .stat-card .stat-media::after { content: ""; position: absolute; inset: 0; z-index: 1; background-image: linear-gradient( to top, rgba(0, 0, 0, var(--stat-veil-opacity)) 0%, rgba(0, 0, 0, calc(var(--stat-veil-opacity) * 0.55)) 35%, rgba(0, 0, 0, 0) var(--stat-veil-height) ); opacity: 0; pointer-events: none; border-radius: inherit; transition: opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1); } .stat-card:hover .elementor-widget-image .elementor-widget-container::after, .stat-card:focus-within .elementor-widget-image .elementor-widget-container::after, .stat-card:hover .stat-media::after, .stat-card:focus-within .stat-media::after { opacity: 1; } /* ================================================== DÉGRADÉ UNIQUE SUR TOUT LE COMPTEUR ================================================== */ /* * Le dégradé est appliqué uniquement ici. * * Il couvre : * - le nombre ; * - le préfixe ; * - le suffixe ; * - le sous-suffixe m² ; * - le titre. */ .stat-card .elementor-counter { color: transparent !important; background-image: var(--stat-gradient) !important; background-size: 200% 100% !important; background-position: var(--stat-background-position) 50% !important; background-repeat: no-repeat !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; text-align: center !important; overflow: visible !important; transition: background-position 0.65s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* * Le compteur reste au-dessus du voile s'il chevauche * l'image dans la mise en page. */ .stat-card .elementor-widget-counter { position: relative; z-index: 2; } /* ================================================== ÉLÉMENTS INTERNES ================================================== */ /* * Les enfants héritent de la transparence du parent. * Aucun enfant ne possède son propre dégradé. */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix, .stat-card .elementor-counter-title, .stat-card .elementor-counter-number-suffix::after { color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; -webkit-text-fill-color: inherit !important; transition: none !important; } /* ================================================== WRAPPER DU NOMBRE ================================================== */ /* * Important : * ne pas utiliser display:flex ici. * * inline-block permet au dégradé du parent de couvrir * le nombre, le suffixe et le pseudo-élément m². */ .stat-card .elementor-counter-number-wrapper { display: inline-block !important; width: auto !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; text-align: center !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; } /* Les éléments restent côte à côte */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix { display: inline-block !important; width: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; padding: 0 !important; position: static !important; transform: none !important; vertical-align: baseline; white-space: nowrap !important; overflow: visible !important; } /* Masque uniquement le préfixe vide */ .stat-card .elementor-counter-number-prefix:empty { display: none !important; } /* ================================================== TITRE SOUS LE COMPTEUR ================================================== */ .stat-card .elementor-counter-title { display: block !important; width: 100% !important; text-align: center !important; overflow: visible !important; } /* ================================================== SUFFIXE CLASSIQUE Exemple : 15 Ans ================================================== */ .stat-card .elementor-counter-number-suffix { font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; /* * vertical-align remplace position/top. * Le suffixe reste inclus dans le dégradé du parent. */ vertical-align: 0.55em !important; position: static !important; top: auto !important; } /* ================================================== COMPTEUR SPÉCIAL : 80k m² ================================================== */ /* * Configuration Elementor : * * Nombre : 80 * Suffixe : k * Classe : stat-card suffix-k-m2 */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix, .stat-card .suffix-k-m2 .elementor-counter-number-suffix { display: inline-block !important; font-size: 1em !important; font-weight: inherit !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: baseline !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== AJOUT DE m² ================================================== */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { content: "m²" !important; display: inline-block !important; margin-left: 0em !important; padding: 0 !important; font-size: 0.32em !important; font-weight: 400 !important; line-height: 1 !important; /* * Important : * ne pas utiliser position: relative ni top. * vertical-align garde m² dans la zone du dégradé. */ position: static !important; top: auto !important; vertical-align: super !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; transition: none !important; } /* ================================================== SUFFIXE « Ans » ================================================== */ /* * Configuration Elementor : * * Suffixe : Ans * Classe : stat-card suffix-ans */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { display: inline-block !important; font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: 0.55em !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== ACCESSIBILITÉ ================================================== */ @media (prefers-reduced-motion: reduce) { .stat-card, .stat-card .elementor-counter, .stat-card .elementor-widget-image .elementor-widget-container::after, .stat-card .stat-media::after { transition: none !important; } .stat-card:hover { transform: none !important; } } /* ================================================== AJUSTEMENTS D’ESPACEMENT ================================================== */ /* Rapproche le préfixe du nombre : +300 */ .stat-card .elementor-counter-number-prefix { margin-right: -0em !important; } /* Rapproche les suffixes classiques du nombre */ .stat-card .elementor-counter-number-suffix { margin-left: 0em !important; } /* ================================================== AJUSTEMENTS FINAUX DES SUFFIXES ================================================== */ /* m² : plus proche du k et nettement plus bas */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { margin-left: 0.08em !important; vertical-align: -0em !important; } /* Ans : plus proche du nombre et légèrement plus bas */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { margin-left: 0em !important; vertical-align: 0.25em !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-3300b1b *//* ================================================== CARTE STATISTIQUE — CONFIGURATION GÉNÉRALE ================================================== */ .stat-card { --stat-color-default: #393624c9; --stat-hover-start: #e2e0d4; --stat-hover-end: #e2e0d44d; --stat-gradient: linear-gradient( 90deg, var(--stat-color-default) 0%, var(--stat-color-default) 50%, var(--stat-hover-start) 50%, var(--stat-hover-end) 100% ); --stat-background-position: 0%; position: relative; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* ================================================== SURVOL ET FOCUS ================================================== */ .stat-card:hover, .stat-card:focus-within { --stat-background-position: 100%; } .stat-card:hover { transform: translateY(-4px); } /* ================================================== DÉGRADÉ UNIQUE SUR TOUT LE COMPTEUR ================================================== */ /* * Le dégradé est appliqué uniquement ici. * * Il couvre : * - le nombre ; * - le préfixe ; * - le suffixe ; * - le sous-suffixe m² ; * - le titre. */ .stat-card .elementor-counter { color: transparent !important; background-image: var(--stat-gradient) !important; background-size: 200% 100% !important; background-position: var(--stat-background-position) 50% !important; background-repeat: no-repeat !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; text-align: center !important; overflow: visible !important; transition: background-position 0.65s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* ================================================== ÉLÉMENTS INTERNES ================================================== */ /* * Les enfants héritent de la transparence du parent. * Aucun enfant ne possède son propre dégradé. */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix, .stat-card .elementor-counter-title, .stat-card .elementor-counter-number-suffix::after { color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; -webkit-text-fill-color: inherit !important; transition: none !important; } /* ================================================== WRAPPER DU NOMBRE ================================================== */ /* * Important : * ne pas utiliser display:flex ici. * * inline-block permet au dégradé du parent de couvrir * le nombre, le suffixe et le pseudo-élément m². */ .stat-card .elementor-counter-number-wrapper { display: inline-block !important; width: auto !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; text-align: center !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; } /* Les éléments restent côte à côte */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix { display: inline-block !important; width: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; padding: 0 !important; position: static !important; transform: none !important; vertical-align: baseline; white-space: nowrap !important; overflow: visible !important; } /* Masque uniquement le préfixe vide */ .stat-card .elementor-counter-number-prefix:empty { display: none !important; } /* ================================================== TITRE SOUS LE COMPTEUR ================================================== */ .stat-card .elementor-counter-title { display: block !important; width: 100% !important; text-align: center !important; overflow: visible !important; } /* ================================================== SUFFIXE CLASSIQUE Exemple : 15 Ans ================================================== */ .stat-card .elementor-counter-number-suffix { font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; /* * vertical-align remplace position/top. * Le suffixe reste inclus dans le dégradé du parent. */ vertical-align: 0.55em !important; position: static !important; top: auto !important; } /* ================================================== COMPTEUR SPÉCIAL : 80k m² ================================================== */ /* * Configuration Elementor : * * Nombre : 80 * Suffixe : k * Classe : stat-card suffix-k-m2 */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix, .stat-card .suffix-k-m2 .elementor-counter-number-suffix { display: inline-block !important; font-size: 1em !important; font-weight: inherit !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: baseline !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== AJOUT DE m² ================================================== */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { content: "m²" !important; display: inline-block !important; margin-left: 0em !important; padding: 0 !important; font-size: 0.32em !important; font-weight: 400 !important; line-height: 1 !important; /* * Important : * ne pas utiliser position: relative ni top. * vertical-align garde m² dans la zone du dégradé. */ position: static !important; top: auto !important; vertical-align: super !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; transition: none !important; } /* ================================================== SUFFIXE « Ans » ================================================== */ /* * Configuration Elementor : * * Suffixe : Ans * Classe : stat-card suffix-ans */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { display: inline-block !important; font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: 0.55em !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== ACCESSIBILITÉ ================================================== */ @media (prefers-reduced-motion: reduce) { .stat-card, .stat-card .elementor-counter { transition: none !important; } .stat-card:hover { transform: none !important; } } /* ================================================== AJUSTEMENTS D’ESPACEMENT ================================================== */ /* Rapproche le préfixe du nombre : +300 */ .stat-card .elementor-counter-number-prefix { margin-right: -0em !important; } /* Rapproche les suffixes classiques du nombre */ .stat-card .elementor-counter-number-suffix { margin-left: 0em !important; } /* ================================================== AJUSTEMENTS FINAUX DES SUFFIXES ================================================== */ /* m² : plus proche du k et nettement plus bas */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { margin-left: 0.08em !important; vertical-align: -0em !important; } /* Ans : plus proche du nombre et légèrement plus bas */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { margin-left: 0em !important; vertical-align: 0.25em !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-13d36bd *//* ================================================== CARTE STATISTIQUE — CONFIGURATION GÉNÉRALE ================================================== */ .stat-card { --stat-color-default: #393624c9; --stat-hover-start: #e2e0d4; --stat-hover-end: #e2e0d44d; --stat-gradient: linear-gradient( 90deg, var(--stat-color-default) 0%, var(--stat-color-default) 50%, var(--stat-hover-start) 50%, var(--stat-hover-end) 100% ); --stat-background-position: 0%; /* * Voile noir affiché au survol. * * --stat-veil-opacity : densité maximale, atteinte en bas de carte. * --stat-veil-height : hauteur à laquelle le voile devient invisible. */ --stat-veil-opacity: 0.65; --stat-veil-height: 70%; position: relative; /* * Contient le voile dans les angles arrondis de la carte. * À retirer si un élément doit volontairement déborder. */ overflow: hidden; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* ================================================== SURVOL ET FOCUS ================================================== */ .stat-card:hover, .stat-card:focus-within { --stat-background-position: 100%; } .stat-card:hover { transform: translateY(-4px); } /* ================================================== VOILE NOIR AU SURVOL Opaque en bas, transparent en haut ================================================== */ /* * Le voile est porté par un pseudo-élément de la carte, * jamais par le compteur : celui-ci utilise déjà son * background pour le background-clip: text. * * L'arrêt intermédiaire à 35 % adoucit la courbe. * Un dégradé linéaire pur donne une transition * qui paraît coupée à l'œil. */ .stat-card::before { content: ""; position: absolute; inset: 0; z-index: 1; background-image: linear-gradient( to top, rgba(0, 0, 0, var(--stat-veil-opacity)) 0%, rgba(0, 0, 0, calc(var(--stat-veil-opacity) * 0.55)) 35%, rgba(0, 0, 0, 0) var(--stat-veil-height) ); opacity: 0; pointer-events: none; border-radius: inherit; transition: opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1); } .stat-card:hover::before, .stat-card:focus-within::before { opacity: 1; } /* * Le contenu doit passer au-dessus du voile. * * Si le compteur n'est pas enfant direct de .stat-card, * la seconde règle prend le relais. */ .stat-card > * { position: relative; z-index: 2; } .stat-card .elementor-widget-container { position: relative; z-index: 2; } /* ================================================== DÉGRADÉ UNIQUE SUR TOUT LE COMPTEUR ================================================== */ /* * Le dégradé est appliqué uniquement ici. * * Il couvre : * - le nombre ; * - le préfixe ; * - le suffixe ; * - le sous-suffixe m² ; * - le titre. */ .stat-card .elementor-counter { color: transparent !important; background-image: var(--stat-gradient) !important; background-size: 200% 100% !important; background-position: var(--stat-background-position) 50% !important; background-repeat: no-repeat !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; text-align: center !important; overflow: visible !important; transition: background-position 0.65s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* ================================================== ÉLÉMENTS INTERNES ================================================== */ /* * Les enfants héritent de la transparence du parent. * Aucun enfant ne possède son propre dégradé. */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix, .stat-card .elementor-counter-title, .stat-card .elementor-counter-number-suffix::after { color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; -webkit-text-fill-color: inherit !important; transition: none !important; } /* ================================================== WRAPPER DU NOMBRE ================================================== */ /* * Important : * ne pas utiliser display:flex ici. * * inline-block permet au dégradé du parent de couvrir * le nombre, le suffixe et le pseudo-élément m². */ .stat-card .elementor-counter-number-wrapper { display: inline-block !important; width: auto !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; text-align: center !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; } /* Les éléments restent côte à côte */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix { display: inline-block !important; width: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; padding: 0 !important; position: static !important; transform: none !important; vertical-align: baseline; white-space: nowrap !important; overflow: visible !important; } /* Masque uniquement le préfixe vide */ .stat-card .elementor-counter-number-prefix:empty { display: none !important; } /* ================================================== TITRE SOUS LE COMPTEUR ================================================== */ .stat-card .elementor-counter-title { display: block !important; width: 100% !important; text-align: center !important; overflow: visible !important; } /* ================================================== SUFFIXE CLASSIQUE Exemple : 15 Ans ================================================== */ .stat-card .elementor-counter-number-suffix { font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; /* * vertical-align remplace position/top. * Le suffixe reste inclus dans le dégradé du parent. */ vertical-align: 0.55em !important; position: static !important; top: auto !important; } /* ================================================== COMPTEUR SPÉCIAL : 80k m² ================================================== */ /* * Configuration Elementor : * * Nombre : 80 * Suffixe : k * Classe : stat-card suffix-k-m2 */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix, .stat-card .suffix-k-m2 .elementor-counter-number-suffix { display: inline-block !important; font-size: 1em !important; font-weight: inherit !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: baseline !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== AJOUT DE m² ================================================== */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { content: "m²" !important; display: inline-block !important; margin-left: 0em !important; padding: 0 !important; font-size: 0.32em !important; font-weight: 400 !important; line-height: 1 !important; /* * Important : * ne pas utiliser position: relative ni top. * vertical-align garde m² dans la zone du dégradé. */ position: static !important; top: auto !important; vertical-align: super !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; transition: none !important; } /* ================================================== SUFFIXE « Ans » ================================================== */ /* * Configuration Elementor : * * Suffixe : Ans * Classe : stat-card suffix-ans */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { display: inline-block !important; font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: 0.55em !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== ACCESSIBILITÉ ================================================== */ @media (prefers-reduced-motion: reduce) { .stat-card, .stat-card .elementor-counter, .stat-card::before { transition: none !important; } .stat-card:hover { transform: none !important; } } /* ================================================== AJUSTEMENTS D’ESPACEMENT ================================================== */ /* Rapproche le préfixe du nombre : +300 */ .stat-card .elementor-counter-number-prefix { margin-right: -0em !important; } /* Rapproche les suffixes classiques du nombre */ .stat-card .elementor-counter-number-suffix { margin-left: 0em !important; } /* ================================================== AJUSTEMENTS FINAUX DES SUFFIXES ================================================== */ /* m² : plus proche du k et nettement plus bas */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { margin-left: 0.08em !important; vertical-align: -0em !important; } /* Ans : plus proche du nombre et légèrement plus bas */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { margin-left: 0em !important; vertical-align: 0.25em !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-0ecc911 *//* ================================================== CARTE STATISTIQUE — CONFIGURATION GÉNÉRALE ================================================== */ .stat-card { --stat-color-default: #393624c9; --stat-hover-start: #e2e0d4; --stat-hover-end: #e2e0d44d; --stat-gradient: linear-gradient( 90deg, var(--stat-color-default) 0%, var(--stat-color-default) 50%, var(--stat-hover-start) 50%, var(--stat-hover-end) 100% ); --stat-background-position: 0%; /* * Voile noir affiché au survol, posé sur l'image. * * --stat-veil-opacity : densité maximale, atteinte en bas. * --stat-veil-height : hauteur à laquelle le voile disparaît. * --stat-image-radius : à aligner sur l'arrondi réglé dans Elementor. */ --stat-veil-opacity: 0.65; --stat-veil-height: 70%; --stat-image-radius: 16px; position: relative; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* ================================================== SURVOL ET FOCUS ================================================== */ .stat-card:hover, .stat-card:focus-within { --stat-background-position: 100%; } .stat-card:hover { transform: translateY(-4px); } /* ================================================== CONTENEUR DE L'IMAGE ================================================== */ /* * L'arrondi et le rognage sont portés par le conteneur, * pas par le voile. * * Conséquence : le dégradé épouse exactement la forme * de l'image, quel que soit le rayon appliqué. * * line-height: 0 supprime l'espace parasite sous une * image restée en display inline. */ .stat-card .elementor-widget-image .elementor-widget-container, .stat-card .stat-media { position: relative; display: block; overflow: hidden; border-radius: var(--stat-image-radius); line-height: 0; } /* L'image remplit son conteneur et suit son arrondi */ .stat-card .elementor-widget-image img, .stat-card .stat-media img { display: block; width: 100%; height: auto; border-radius: inherit; } /* ================================================== VOILE NOIR AU SURVOL Opaque en bas, transparent en haut ================================================== */ /* * Le voile est un pseudo-élément du conteneur d'image. * Il ne peut pas être posé sur le compteur, dont le * background sert déjà au background-clip: text. * * L'arrêt intermédiaire à 35 % adoucit la courbe : * un dégradé linéaire pur paraît coupé à l'œil. */ .stat-card .elementor-widget-image .elementor-widget-container::after, .stat-card .stat-media::after { content: ""; position: absolute; inset: 0; z-index: 1; background-image: linear-gradient( to top, rgba(0, 0, 0, var(--stat-veil-opacity)) 0%, rgba(0, 0, 0, calc(var(--stat-veil-opacity) * 0.55)) 35%, rgba(0, 0, 0, 0) var(--stat-veil-height) ); opacity: 0; pointer-events: none; border-radius: inherit; transition: opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1); } .stat-card:hover .elementor-widget-image .elementor-widget-container::after, .stat-card:focus-within .elementor-widget-image .elementor-widget-container::after, .stat-card:hover .stat-media::after, .stat-card:focus-within .stat-media::after { opacity: 1; } /* ================================================== DÉGRADÉ UNIQUE SUR TOUT LE COMPTEUR ================================================== */ /* * Le dégradé est appliqué uniquement ici. * * Il couvre : * - le nombre ; * - le préfixe ; * - le suffixe ; * - le sous-suffixe m² ; * - le titre. */ .stat-card .elementor-counter { color: transparent !important; background-image: var(--stat-gradient) !important; background-size: 200% 100% !important; background-position: var(--stat-background-position) 50% !important; background-repeat: no-repeat !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; text-align: center !important; overflow: visible !important; transition: background-position 0.65s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* * Le compteur reste au-dessus du voile s'il chevauche * l'image dans la mise en page. */ .stat-card .elementor-widget-counter { position: relative; z-index: 2; } /* ================================================== ÉLÉMENTS INTERNES ================================================== */ /* * Les enfants héritent de la transparence du parent. * Aucun enfant ne possède son propre dégradé. */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix, .stat-card .elementor-counter-title, .stat-card .elementor-counter-number-suffix::after { color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; -webkit-text-fill-color: inherit !important; transition: none !important; } /* ================================================== WRAPPER DU NOMBRE ================================================== */ /* * Important : * ne pas utiliser display:flex ici. * * inline-block permet au dégradé du parent de couvrir * le nombre, le suffixe et le pseudo-élément m². */ .stat-card .elementor-counter-number-wrapper { display: inline-block !important; width: auto !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; text-align: center !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; } /* Les éléments restent côte à côte */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix { display: inline-block !important; width: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; padding: 0 !important; position: static !important; transform: none !important; vertical-align: baseline; white-space: nowrap !important; overflow: visible !important; } /* Masque uniquement le préfixe vide */ .stat-card .elementor-counter-number-prefix:empty { display: none !important; } /* ================================================== TITRE SOUS LE COMPTEUR ================================================== */ .stat-card .elementor-counter-title { display: block !important; width: 100% !important; text-align: center !important; overflow: visible !important; } /* ================================================== SUFFIXE CLASSIQUE Exemple : 15 Ans ================================================== */ .stat-card .elementor-counter-number-suffix { font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; /* * vertical-align remplace position/top. * Le suffixe reste inclus dans le dégradé du parent. */ vertical-align: 0.55em !important; position: static !important; top: auto !important; } /* ================================================== COMPTEUR SPÉCIAL : 80k m² ================================================== */ /* * Configuration Elementor : * * Nombre : 80 * Suffixe : k * Classe : stat-card suffix-k-m2 */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix, .stat-card .suffix-k-m2 .elementor-counter-number-suffix { display: inline-block !important; font-size: 1em !important; font-weight: inherit !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: baseline !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== AJOUT DE m² ================================================== */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { content: "m²" !important; display: inline-block !important; margin-left: 0em !important; padding: 0 !important; font-size: 0.32em !important; font-weight: 400 !important; line-height: 1 !important; /* * Important : * ne pas utiliser position: relative ni top. * vertical-align garde m² dans la zone du dégradé. */ position: static !important; top: auto !important; vertical-align: super !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; transition: none !important; } /* ================================================== SUFFIXE « Ans » ================================================== */ /* * Configuration Elementor : * * Suffixe : Ans * Classe : stat-card suffix-ans */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { display: inline-block !important; font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: 0.55em !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== ACCESSIBILITÉ ================================================== */ @media (prefers-reduced-motion: reduce) { .stat-card, .stat-card .elementor-counter, .stat-card .elementor-widget-image .elementor-widget-container::after, .stat-card .stat-media::after { transition: none !important; } .stat-card:hover { transform: none !important; } } /* ================================================== AJUSTEMENTS D’ESPACEMENT ================================================== */ /* Rapproche le préfixe du nombre : +300 */ .stat-card .elementor-counter-number-prefix { margin-right: -0em !important; } /* Rapproche les suffixes classiques du nombre */ .stat-card .elementor-counter-number-suffix { margin-left: 0em !important; } /* ================================================== AJUSTEMENTS FINAUX DES SUFFIXES ================================================== */ /* m² : plus proche du k et nettement plus bas */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { margin-left: 0.08em !important; vertical-align: -0em !important; } /* Ans : plus proche du nombre et légèrement plus bas */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { margin-left: 0em !important; vertical-align: 0.25em !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-f8ce282 *//* ================================================== CARTE STATISTIQUE — CONFIGURATION GÉNÉRALE ================================================== */ .stat-card { --stat-color-default: #393624c9; --stat-hover-start: #e2e0d4; --stat-hover-end: #e2e0d44d; --stat-gradient: linear-gradient( 90deg, var(--stat-color-default) 0%, var(--stat-color-default) 50%, var(--stat-hover-start) 50%, var(--stat-hover-end) 100% ); --stat-background-position: 0%; /* * Voile noir affiché au survol, posé sur l'image. * * --stat-veil-opacity : densité maximale, atteinte en bas. * --stat-veil-height : hauteur à laquelle le voile disparaît. * --stat-image-radius : à aligner sur l'arrondi réglé dans Elementor. */ --stat-veil-opacity: 0.65; --stat-veil-height: 70%; --stat-image-radius: 16px; position: relative; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* ================================================== SURVOL ET FOCUS ================================================== */ .stat-card:hover, .stat-card:focus-within { --stat-background-position: 100%; } .stat-card:hover { transform: translateY(-4px); } /* ================================================== CONTENEUR DE L'IMAGE ================================================== */ /* * L'arrondi et le rognage sont portés par le conteneur, * pas par le voile. * * Conséquence : le dégradé épouse exactement la forme * de l'image, quel que soit le rayon appliqué. * * line-height: 0 supprime l'espace parasite sous une * image restée en display inline. */ .stat-card .elementor-widget-image .elementor-widget-container, .stat-card .stat-media { position: relative; display: block; overflow: hidden; border-radius: var(--stat-image-radius); line-height: 0; } /* L'image remplit son conteneur et suit son arrondi */ .stat-card .elementor-widget-image img, .stat-card .stat-media img { display: block; width: 100%; height: auto; border-radius: inherit; } /* ================================================== VOILE NOIR AU SURVOL Opaque en bas, transparent en haut ================================================== */ /* * Le voile est un pseudo-élément du conteneur d'image. * Il ne peut pas être posé sur le compteur, dont le * background sert déjà au background-clip: text. * * L'arrêt intermédiaire à 35 % adoucit la courbe : * un dégradé linéaire pur paraît coupé à l'œil. */ .stat-card .elementor-widget-image .elementor-widget-container::after, .stat-card .stat-media::after { content: ""; position: absolute; inset: 0; z-index: 1; background-image: linear-gradient( to top, rgba(0, 0, 0, var(--stat-veil-opacity)) 0%, rgba(0, 0, 0, calc(var(--stat-veil-opacity) * 0.55)) 35%, rgba(0, 0, 0, 0) var(--stat-veil-height) ); opacity: 0; pointer-events: none; border-radius: inherit; transition: opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1); } .stat-card:hover .elementor-widget-image .elementor-widget-container::after, .stat-card:focus-within .elementor-widget-image .elementor-widget-container::after, .stat-card:hover .stat-media::after, .stat-card:focus-within .stat-media::after { opacity: 1; } /* ================================================== DÉGRADÉ UNIQUE SUR TOUT LE COMPTEUR ================================================== */ /* * Le dégradé est appliqué uniquement ici. * * Il couvre : * - le nombre ; * - le préfixe ; * - le suffixe ; * - le sous-suffixe m² ; * - le titre. */ .stat-card .elementor-counter { color: transparent !important; background-image: var(--stat-gradient) !important; background-size: 200% 100% !important; background-position: var(--stat-background-position) 50% !important; background-repeat: no-repeat !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; text-align: center !important; overflow: visible !important; transition: background-position 0.65s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* * Le compteur reste au-dessus du voile s'il chevauche * l'image dans la mise en page. */ .stat-card .elementor-widget-counter { position: relative; z-index: 2; } /* ================================================== ÉLÉMENTS INTERNES ================================================== */ /* * Les enfants héritent de la transparence du parent. * Aucun enfant ne possède son propre dégradé. */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix, .stat-card .elementor-counter-title, .stat-card .elementor-counter-number-suffix::after { color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; -webkit-text-fill-color: inherit !important; transition: none !important; } /* ================================================== WRAPPER DU NOMBRE ================================================== */ /* * Important : * ne pas utiliser display:flex ici. * * inline-block permet au dégradé du parent de couvrir * le nombre, le suffixe et le pseudo-élément m². */ .stat-card .elementor-counter-number-wrapper { display: inline-block !important; width: auto !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; text-align: center !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; } /* Les éléments restent côte à côte */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix { display: inline-block !important; width: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; padding: 0 !important; position: static !important; transform: none !important; vertical-align: baseline; white-space: nowrap !important; overflow: visible !important; } /* Masque uniquement le préfixe vide */ .stat-card .elementor-counter-number-prefix:empty { display: none !important; } /* ================================================== TITRE SOUS LE COMPTEUR ================================================== */ .stat-card .elementor-counter-title { display: block !important; width: 100% !important; text-align: center !important; overflow: visible !important; } /* ================================================== SUFFIXE CLASSIQUE Exemple : 15 Ans ================================================== */ .stat-card .elementor-counter-number-suffix { font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; /* * vertical-align remplace position/top. * Le suffixe reste inclus dans le dégradé du parent. */ vertical-align: 0.55em !important; position: static !important; top: auto !important; } /* ================================================== COMPTEUR SPÉCIAL : 80k m² ================================================== */ /* * Configuration Elementor : * * Nombre : 80 * Suffixe : k * Classe : stat-card suffix-k-m2 */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix, .stat-card .suffix-k-m2 .elementor-counter-number-suffix { display: inline-block !important; font-size: 1em !important; font-weight: inherit !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: baseline !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== AJOUT DE m² ================================================== */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { content: "m²" !important; display: inline-block !important; margin-left: 0em !important; padding: 0 !important; font-size: 0.32em !important; font-weight: 400 !important; line-height: 1 !important; /* * Important : * ne pas utiliser position: relative ni top. * vertical-align garde m² dans la zone du dégradé. */ position: static !important; top: auto !important; vertical-align: super !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; transition: none !important; } /* ================================================== SUFFIXE « Ans » ================================================== */ /* * Configuration Elementor : * * Suffixe : Ans * Classe : stat-card suffix-ans */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { display: inline-block !important; font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: 0.55em !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== ACCESSIBILITÉ ================================================== */ @media (prefers-reduced-motion: reduce) { .stat-card, .stat-card .elementor-counter, .stat-card .elementor-widget-image .elementor-widget-container::after, .stat-card .stat-media::after { transition: none !important; } .stat-card:hover { transform: none !important; } } /* ================================================== AJUSTEMENTS D’ESPACEMENT ================================================== */ /* Rapproche le préfixe du nombre : +300 */ .stat-card .elementor-counter-number-prefix { margin-right: -0em !important; } /* Rapproche les suffixes classiques du nombre */ .stat-card .elementor-counter-number-suffix { margin-left: 0em !important; } /* ================================================== AJUSTEMENTS FINAUX DES SUFFIXES ================================================== */ /* m² : plus proche du k et nettement plus bas */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { margin-left: 0.08em !important; vertical-align: -0em !important; } /* Ans : plus proche du nombre et légèrement plus bas */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { margin-left: 0em !important; vertical-align: 0.25em !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-3300b1b *//* ================================================== CARTE STATISTIQUE — CONFIGURATION GÉNÉRALE ================================================== */ .stat-card { --stat-color-default: #393624c9; --stat-hover-start: #e2e0d4; --stat-hover-end: #e2e0d44d; --stat-gradient: linear-gradient( 90deg, var(--stat-color-default) 0%, var(--stat-color-default) 50%, var(--stat-hover-start) 50%, var(--stat-hover-end) 100% ); --stat-background-position: 0%; position: relative; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* ================================================== SURVOL ET FOCUS ================================================== */ .stat-card:hover, .stat-card:focus-within { --stat-background-position: 100%; } .stat-card:hover { transform: translateY(-4px); } /* ================================================== DÉGRADÉ UNIQUE SUR TOUT LE COMPTEUR ================================================== */ /* * Le dégradé est appliqué uniquement ici. * * Il couvre : * - le nombre ; * - le préfixe ; * - le suffixe ; * - le sous-suffixe m² ; * - le titre. */ .stat-card .elementor-counter { color: transparent !important; background-image: var(--stat-gradient) !important; background-size: 200% 100% !important; background-position: var(--stat-background-position) 50% !important; background-repeat: no-repeat !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; text-align: center !important; overflow: visible !important; transition: background-position 0.65s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* ================================================== ÉLÉMENTS INTERNES ================================================== */ /* * Les enfants héritent de la transparence du parent. * Aucun enfant ne possède son propre dégradé. */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix, .stat-card .elementor-counter-title, .stat-card .elementor-counter-number-suffix::after { color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; -webkit-text-fill-color: inherit !important; transition: none !important; } /* ================================================== WRAPPER DU NOMBRE ================================================== */ /* * Important : * ne pas utiliser display:flex ici. * * inline-block permet au dégradé du parent de couvrir * le nombre, le suffixe et le pseudo-élément m². */ .stat-card .elementor-counter-number-wrapper { display: inline-block !important; width: auto !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; text-align: center !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; } /* Les éléments restent côte à côte */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix { display: inline-block !important; width: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; padding: 0 !important; position: static !important; transform: none !important; vertical-align: baseline; white-space: nowrap !important; overflow: visible !important; } /* Masque uniquement le préfixe vide */ .stat-card .elementor-counter-number-prefix:empty { display: none !important; } /* ================================================== TITRE SOUS LE COMPTEUR ================================================== */ .stat-card .elementor-counter-title { display: block !important; width: 100% !important; text-align: center !important; overflow: visible !important; } /* ================================================== SUFFIXE CLASSIQUE Exemple : 15 Ans ================================================== */ .stat-card .elementor-counter-number-suffix { font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; /* * vertical-align remplace position/top. * Le suffixe reste inclus dans le dégradé du parent. */ vertical-align: 0.55em !important; position: static !important; top: auto !important; } /* ================================================== COMPTEUR SPÉCIAL : 80k m² ================================================== */ /* * Configuration Elementor : * * Nombre : 80 * Suffixe : k * Classe : stat-card suffix-k-m2 */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix, .stat-card .suffix-k-m2 .elementor-counter-number-suffix { display: inline-block !important; font-size: 1em !important; font-weight: inherit !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: baseline !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== AJOUT DE m² ================================================== */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { content: "m²" !important; display: inline-block !important; margin-left: 0em !important; padding: 0 !important; font-size: 0.32em !important; font-weight: 400 !important; line-height: 1 !important; /* * Important : * ne pas utiliser position: relative ni top. * vertical-align garde m² dans la zone du dégradé. */ position: static !important; top: auto !important; vertical-align: super !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; transition: none !important; } /* ================================================== SUFFIXE « Ans » ================================================== */ /* * Configuration Elementor : * * Suffixe : Ans * Classe : stat-card suffix-ans */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { display: inline-block !important; font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: 0.55em !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== ACCESSIBILITÉ ================================================== */ @media (prefers-reduced-motion: reduce) { .stat-card, .stat-card .elementor-counter { transition: none !important; } .stat-card:hover { transform: none !important; } } /* ================================================== AJUSTEMENTS D’ESPACEMENT ================================================== */ /* Rapproche le préfixe du nombre : +300 */ .stat-card .elementor-counter-number-prefix { margin-right: -0em !important; } /* Rapproche les suffixes classiques du nombre */ .stat-card .elementor-counter-number-suffix { margin-left: 0em !important; } /* ================================================== AJUSTEMENTS FINAUX DES SUFFIXES ================================================== */ /* m² : plus proche du k et nettement plus bas */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { margin-left: 0.08em !important; vertical-align: -0em !important; } /* Ans : plus proche du nombre et légèrement plus bas */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { margin-left: 0em !important; vertical-align: 0.25em !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-13d36bd *//* ================================================== CARTE STATISTIQUE — CONFIGURATION GÉNÉRALE ================================================== */ .stat-card { --stat-color-default: #393624c9; --stat-hover-start: #e2e0d4; --stat-hover-end: #e2e0d44d; --stat-gradient: linear-gradient( 90deg, var(--stat-color-default) 0%, var(--stat-color-default) 50%, var(--stat-hover-start) 50%, var(--stat-hover-end) 100% ); --stat-background-position: 0%; /* * Voile noir affiché au survol. * * --stat-veil-opacity : densité maximale, atteinte en bas de carte. * --stat-veil-height : hauteur à laquelle le voile devient invisible. */ --stat-veil-opacity: 0.65; --stat-veil-height: 70%; position: relative; /* * Contient le voile dans les angles arrondis de la carte. * À retirer si un élément doit volontairement déborder. */ overflow: hidden; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* ================================================== SURVOL ET FOCUS ================================================== */ .stat-card:hover, .stat-card:focus-within { --stat-background-position: 100%; } .stat-card:hover { transform: translateY(-4px); } /* ================================================== VOILE NOIR AU SURVOL Opaque en bas, transparent en haut ================================================== */ /* * Le voile est porté par un pseudo-élément de la carte, * jamais par le compteur : celui-ci utilise déjà son * background pour le background-clip: text. * * L'arrêt intermédiaire à 35 % adoucit la courbe. * Un dégradé linéaire pur donne une transition * qui paraît coupée à l'œil. */ .stat-card::before { content: ""; position: absolute; inset: 0; z-index: 1; background-image: linear-gradient( to top, rgba(0, 0, 0, var(--stat-veil-opacity)) 0%, rgba(0, 0, 0, calc(var(--stat-veil-opacity) * 0.55)) 35%, rgba(0, 0, 0, 0) var(--stat-veil-height) ); opacity: 0; pointer-events: none; border-radius: inherit; transition: opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1); } .stat-card:hover::before, .stat-card:focus-within::before { opacity: 1; } /* * Le contenu doit passer au-dessus du voile. * * Si le compteur n'est pas enfant direct de .stat-card, * la seconde règle prend le relais. */ .stat-card > * { position: relative; z-index: 2; } .stat-card .elementor-widget-container { position: relative; z-index: 2; } /* ================================================== DÉGRADÉ UNIQUE SUR TOUT LE COMPTEUR ================================================== */ /* * Le dégradé est appliqué uniquement ici. * * Il couvre : * - le nombre ; * - le préfixe ; * - le suffixe ; * - le sous-suffixe m² ; * - le titre. */ .stat-card .elementor-counter { color: transparent !important; background-image: var(--stat-gradient) !important; background-size: 200% 100% !important; background-position: var(--stat-background-position) 50% !important; background-repeat: no-repeat !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; text-align: center !important; overflow: visible !important; transition: background-position 0.65s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* ================================================== ÉLÉMENTS INTERNES ================================================== */ /* * Les enfants héritent de la transparence du parent. * Aucun enfant ne possède son propre dégradé. */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix, .stat-card .elementor-counter-title, .stat-card .elementor-counter-number-suffix::after { color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; -webkit-text-fill-color: inherit !important; transition: none !important; } /* ================================================== WRAPPER DU NOMBRE ================================================== */ /* * Important : * ne pas utiliser display:flex ici. * * inline-block permet au dégradé du parent de couvrir * le nombre, le suffixe et le pseudo-élément m². */ .stat-card .elementor-counter-number-wrapper { display: inline-block !important; width: auto !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; text-align: center !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; } /* Les éléments restent côte à côte */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix { display: inline-block !important; width: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; padding: 0 !important; position: static !important; transform: none !important; vertical-align: baseline; white-space: nowrap !important; overflow: visible !important; } /* Masque uniquement le préfixe vide */ .stat-card .elementor-counter-number-prefix:empty { display: none !important; } /* ================================================== TITRE SOUS LE COMPTEUR ================================================== */ .stat-card .elementor-counter-title { display: block !important; width: 100% !important; text-align: center !important; overflow: visible !important; } /* ================================================== SUFFIXE CLASSIQUE Exemple : 15 Ans ================================================== */ .stat-card .elementor-counter-number-suffix { font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; /* * vertical-align remplace position/top. * Le suffixe reste inclus dans le dégradé du parent. */ vertical-align: 0.55em !important; position: static !important; top: auto !important; } /* ================================================== COMPTEUR SPÉCIAL : 80k m² ================================================== */ /* * Configuration Elementor : * * Nombre : 80 * Suffixe : k * Classe : stat-card suffix-k-m2 */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix, .stat-card .suffix-k-m2 .elementor-counter-number-suffix { display: inline-block !important; font-size: 1em !important; font-weight: inherit !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: baseline !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== AJOUT DE m² ================================================== */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { content: "m²" !important; display: inline-block !important; margin-left: 0em !important; padding: 0 !important; font-size: 0.32em !important; font-weight: 400 !important; line-height: 1 !important; /* * Important : * ne pas utiliser position: relative ni top. * vertical-align garde m² dans la zone du dégradé. */ position: static !important; top: auto !important; vertical-align: super !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; transition: none !important; } /* ================================================== SUFFIXE « Ans » ================================================== */ /* * Configuration Elementor : * * Suffixe : Ans * Classe : stat-card suffix-ans */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { display: inline-block !important; font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: 0.55em !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== ACCESSIBILITÉ ================================================== */ @media (prefers-reduced-motion: reduce) { .stat-card, .stat-card .elementor-counter, .stat-card::before { transition: none !important; } .stat-card:hover { transform: none !important; } } /* ================================================== AJUSTEMENTS D’ESPACEMENT ================================================== */ /* Rapproche le préfixe du nombre : +300 */ .stat-card .elementor-counter-number-prefix { margin-right: -0em !important; } /* Rapproche les suffixes classiques du nombre */ .stat-card .elementor-counter-number-suffix { margin-left: 0em !important; } /* ================================================== AJUSTEMENTS FINAUX DES SUFFIXES ================================================== */ /* m² : plus proche du k et nettement plus bas */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { margin-left: 0.08em !important; vertical-align: -0em !important; } /* Ans : plus proche du nombre et légèrement plus bas */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { margin-left: 0em !important; vertical-align: 0.25em !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-0ecc911 *//* ================================================== CARTE STATISTIQUE — CONFIGURATION GÉNÉRALE ================================================== */ .stat-card { --stat-color-default: #393624c9; --stat-hover-start: #e2e0d4; --stat-hover-end: #e2e0d44d; --stat-gradient: linear-gradient( 90deg, var(--stat-color-default) 0%, var(--stat-color-default) 50%, var(--stat-hover-start) 50%, var(--stat-hover-end) 100% ); --stat-background-position: 0%; /* * Voile noir affiché au survol, posé sur l'image. * * --stat-veil-opacity : densité maximale, atteinte en bas. * --stat-veil-height : hauteur à laquelle le voile disparaît. * --stat-image-radius : à aligner sur l'arrondi réglé dans Elementor. */ --stat-veil-opacity: 0.65; --stat-veil-height: 70%; --stat-image-radius: 16px; position: relative; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* ================================================== SURVOL ET FOCUS ================================================== */ .stat-card:hover, .stat-card:focus-within { --stat-background-position: 100%; } .stat-card:hover { transform: translateY(-4px); } /* ================================================== CONTENEUR DE L'IMAGE ================================================== */ /* * L'arrondi et le rognage sont portés par le conteneur, * pas par le voile. * * Conséquence : le dégradé épouse exactement la forme * de l'image, quel que soit le rayon appliqué. * * line-height: 0 supprime l'espace parasite sous une * image restée en display inline. */ .stat-card .elementor-widget-image .elementor-widget-container, .stat-card .stat-media { position: relative; display: block; overflow: hidden; border-radius: var(--stat-image-radius); line-height: 0; } /* L'image remplit son conteneur et suit son arrondi */ .stat-card .elementor-widget-image img, .stat-card .stat-media img { display: block; width: 100%; height: auto; border-radius: inherit; } /* ================================================== VOILE NOIR AU SURVOL Opaque en bas, transparent en haut ================================================== */ /* * Le voile est un pseudo-élément du conteneur d'image. * Il ne peut pas être posé sur le compteur, dont le * background sert déjà au background-clip: text. * * L'arrêt intermédiaire à 35 % adoucit la courbe : * un dégradé linéaire pur paraît coupé à l'œil. */ .stat-card .elementor-widget-image .elementor-widget-container::after, .stat-card .stat-media::after { content: ""; position: absolute; inset: 0; z-index: 1; background-image: linear-gradient( to top, rgba(0, 0, 0, var(--stat-veil-opacity)) 0%, rgba(0, 0, 0, calc(var(--stat-veil-opacity) * 0.55)) 35%, rgba(0, 0, 0, 0) var(--stat-veil-height) ); opacity: 0; pointer-events: none; border-radius: inherit; transition: opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1); } .stat-card:hover .elementor-widget-image .elementor-widget-container::after, .stat-card:focus-within .elementor-widget-image .elementor-widget-container::after, .stat-card:hover .stat-media::after, .stat-card:focus-within .stat-media::after { opacity: 1; } /* ================================================== DÉGRADÉ UNIQUE SUR TOUT LE COMPTEUR ================================================== */ /* * Le dégradé est appliqué uniquement ici. * * Il couvre : * - le nombre ; * - le préfixe ; * - le suffixe ; * - le sous-suffixe m² ; * - le titre. */ .stat-card .elementor-counter { color: transparent !important; background-image: var(--stat-gradient) !important; background-size: 200% 100% !important; background-position: var(--stat-background-position) 50% !important; background-repeat: no-repeat !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; text-align: center !important; overflow: visible !important; transition: background-position 0.65s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* * Le compteur reste au-dessus du voile s'il chevauche * l'image dans la mise en page. */ .stat-card .elementor-widget-counter { position: relative; z-index: 2; } /* ================================================== ÉLÉMENTS INTERNES ================================================== */ /* * Les enfants héritent de la transparence du parent. * Aucun enfant ne possède son propre dégradé. */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix, .stat-card .elementor-counter-title, .stat-card .elementor-counter-number-suffix::after { color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; -webkit-text-fill-color: inherit !important; transition: none !important; } /* ================================================== WRAPPER DU NOMBRE ================================================== */ /* * Important : * ne pas utiliser display:flex ici. * * inline-block permet au dégradé du parent de couvrir * le nombre, le suffixe et le pseudo-élément m². */ .stat-card .elementor-counter-number-wrapper { display: inline-block !important; width: auto !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; text-align: center !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; } /* Les éléments restent côte à côte */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix { display: inline-block !important; width: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; padding: 0 !important; position: static !important; transform: none !important; vertical-align: baseline; white-space: nowrap !important; overflow: visible !important; } /* Masque uniquement le préfixe vide */ .stat-card .elementor-counter-number-prefix:empty { display: none !important; } /* ================================================== TITRE SOUS LE COMPTEUR ================================================== */ .stat-card .elementor-counter-title { display: block !important; width: 100% !important; text-align: center !important; overflow: visible !important; } /* ================================================== SUFFIXE CLASSIQUE Exemple : 15 Ans ================================================== */ .stat-card .elementor-counter-number-suffix { font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; /* * vertical-align remplace position/top. * Le suffixe reste inclus dans le dégradé du parent. */ vertical-align: 0.55em !important; position: static !important; top: auto !important; } /* ================================================== COMPTEUR SPÉCIAL : 80k m² ================================================== */ /* * Configuration Elementor : * * Nombre : 80 * Suffixe : k * Classe : stat-card suffix-k-m2 */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix, .stat-card .suffix-k-m2 .elementor-counter-number-suffix { display: inline-block !important; font-size: 1em !important; font-weight: inherit !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: baseline !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== AJOUT DE m² ================================================== */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { content: "m²" !important; display: inline-block !important; margin-left: 0em !important; padding: 0 !important; font-size: 0.32em !important; font-weight: 400 !important; line-height: 1 !important; /* * Important : * ne pas utiliser position: relative ni top. * vertical-align garde m² dans la zone du dégradé. */ position: static !important; top: auto !important; vertical-align: super !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; transition: none !important; } /* ================================================== SUFFIXE « Ans » ================================================== */ /* * Configuration Elementor : * * Suffixe : Ans * Classe : stat-card suffix-ans */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { display: inline-block !important; font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: 0.55em !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== ACCESSIBILITÉ ================================================== */ @media (prefers-reduced-motion: reduce) { .stat-card, .stat-card .elementor-counter, .stat-card .elementor-widget-image .elementor-widget-container::after, .stat-card .stat-media::after { transition: none !important; } .stat-card:hover { transform: none !important; } } /* ================================================== AJUSTEMENTS D’ESPACEMENT ================================================== */ /* Rapproche le préfixe du nombre : +300 */ .stat-card .elementor-counter-number-prefix { margin-right: -0em !important; } /* Rapproche les suffixes classiques du nombre */ .stat-card .elementor-counter-number-suffix { margin-left: 0em !important; } /* ================================================== AJUSTEMENTS FINAUX DES SUFFIXES ================================================== */ /* m² : plus proche du k et nettement plus bas */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { margin-left: 0.08em !important; vertical-align: -0em !important; } /* Ans : plus proche du nombre et légèrement plus bas */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { margin-left: 0em !important; vertical-align: 0.25em !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-f8ce282 *//* ================================================== CARTE STATISTIQUE — CONFIGURATION GÉNÉRALE ================================================== */ .stat-card { --stat-color-default: #393624c9; --stat-hover-start: #e2e0d4; --stat-hover-end: #e2e0d44d; --stat-gradient: linear-gradient( 90deg, var(--stat-color-default) 0%, var(--stat-color-default) 50%, var(--stat-hover-start) 50%, var(--stat-hover-end) 100% ); --stat-background-position: 0%; /* * Voile noir affiché au survol, posé sur l'image. * * --stat-veil-opacity : densité maximale, atteinte en bas. * --stat-veil-height : hauteur à laquelle le voile disparaît. * --stat-image-radius : à aligner sur l'arrondi réglé dans Elementor. */ --stat-veil-opacity: 0.65; --stat-veil-height: 70%; --stat-image-radius: 16px; position: relative; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* ================================================== SURVOL ET FOCUS ================================================== */ .stat-card:hover, .stat-card:focus-within { --stat-background-position: 100%; } .stat-card:hover { transform: translateY(-4px); } /* ================================================== CONTENEUR DE L'IMAGE ================================================== */ /* * L'arrondi et le rognage sont portés par le conteneur, * pas par le voile. * * Conséquence : le dégradé épouse exactement la forme * de l'image, quel que soit le rayon appliqué. * * line-height: 0 supprime l'espace parasite sous une * image restée en display inline. */ .stat-card .elementor-widget-image .elementor-widget-container, .stat-card .stat-media { position: relative; display: block; overflow: hidden; border-radius: var(--stat-image-radius); line-height: 0; } /* L'image remplit son conteneur et suit son arrondi */ .stat-card .elementor-widget-image img, .stat-card .stat-media img { display: block; width: 100%; height: auto; border-radius: inherit; } /* ================================================== VOILE NOIR AU SURVOL Opaque en bas, transparent en haut ================================================== */ /* * Le voile est un pseudo-élément du conteneur d'image. * Il ne peut pas être posé sur le compteur, dont le * background sert déjà au background-clip: text. * * L'arrêt intermédiaire à 35 % adoucit la courbe : * un dégradé linéaire pur paraît coupé à l'œil. */ .stat-card .elementor-widget-image .elementor-widget-container::after, .stat-card .stat-media::after { content: ""; position: absolute; inset: 0; z-index: 1; background-image: linear-gradient( to top, rgba(0, 0, 0, var(--stat-veil-opacity)) 0%, rgba(0, 0, 0, calc(var(--stat-veil-opacity) * 0.55)) 35%, rgba(0, 0, 0, 0) var(--stat-veil-height) ); opacity: 0; pointer-events: none; border-radius: inherit; transition: opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1); } .stat-card:hover .elementor-widget-image .elementor-widget-container::after, .stat-card:focus-within .elementor-widget-image .elementor-widget-container::after, .stat-card:hover .stat-media::after, .stat-card:focus-within .stat-media::after { opacity: 1; } /* ================================================== DÉGRADÉ UNIQUE SUR TOUT LE COMPTEUR ================================================== */ /* * Le dégradé est appliqué uniquement ici. * * Il couvre : * - le nombre ; * - le préfixe ; * - le suffixe ; * - le sous-suffixe m² ; * - le titre. */ .stat-card .elementor-counter { color: transparent !important; background-image: var(--stat-gradient) !important; background-size: 200% 100% !important; background-position: var(--stat-background-position) 50% !important; background-repeat: no-repeat !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; text-align: center !important; overflow: visible !important; transition: background-position 0.65s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* * Le compteur reste au-dessus du voile s'il chevauche * l'image dans la mise en page. */ .stat-card .elementor-widget-counter { position: relative; z-index: 2; } /* ================================================== ÉLÉMENTS INTERNES ================================================== */ /* * Les enfants héritent de la transparence du parent. * Aucun enfant ne possède son propre dégradé. */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix, .stat-card .elementor-counter-title, .stat-card .elementor-counter-number-suffix::after { color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; -webkit-text-fill-color: inherit !important; transition: none !important; } /* ================================================== WRAPPER DU NOMBRE ================================================== */ /* * Important : * ne pas utiliser display:flex ici. * * inline-block permet au dégradé du parent de couvrir * le nombre, le suffixe et le pseudo-élément m². */ .stat-card .elementor-counter-number-wrapper { display: inline-block !important; width: auto !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; text-align: center !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; } /* Les éléments restent côte à côte */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix { display: inline-block !important; width: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; padding: 0 !important; position: static !important; transform: none !important; vertical-align: baseline; white-space: nowrap !important; overflow: visible !important; } /* Masque uniquement le préfixe vide */ .stat-card .elementor-counter-number-prefix:empty { display: none !important; } /* ================================================== TITRE SOUS LE COMPTEUR ================================================== */ .stat-card .elementor-counter-title { display: block !important; width: 100% !important; text-align: center !important; overflow: visible !important; } /* ================================================== SUFFIXE CLASSIQUE Exemple : 15 Ans ================================================== */ .stat-card .elementor-counter-number-suffix { font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; /* * vertical-align remplace position/top. * Le suffixe reste inclus dans le dégradé du parent. */ vertical-align: 0.55em !important; position: static !important; top: auto !important; } /* ================================================== COMPTEUR SPÉCIAL : 80k m² ================================================== */ /* * Configuration Elementor : * * Nombre : 80 * Suffixe : k * Classe : stat-card suffix-k-m2 */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix, .stat-card .suffix-k-m2 .elementor-counter-number-suffix { display: inline-block !important; font-size: 1em !important; font-weight: inherit !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: baseline !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== AJOUT DE m² ================================================== */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { content: "m²" !important; display: inline-block !important; margin-left: 0em !important; padding: 0 !important; font-size: 0.32em !important; font-weight: 400 !important; line-height: 1 !important; /* * Important : * ne pas utiliser position: relative ni top. * vertical-align garde m² dans la zone du dégradé. */ position: static !important; top: auto !important; vertical-align: super !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; transition: none !important; } /* ================================================== SUFFIXE « Ans » ================================================== */ /* * Configuration Elementor : * * Suffixe : Ans * Classe : stat-card suffix-ans */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { display: inline-block !important; font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: 0.55em !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== ACCESSIBILITÉ ================================================== */ @media (prefers-reduced-motion: reduce) { .stat-card, .stat-card .elementor-counter, .stat-card .elementor-widget-image .elementor-widget-container::after, .stat-card .stat-media::after { transition: none !important; } .stat-card:hover { transform: none !important; } } /* ================================================== AJUSTEMENTS D’ESPACEMENT ================================================== */ /* Rapproche le préfixe du nombre : +300 */ .stat-card .elementor-counter-number-prefix { margin-right: -0em !important; } /* Rapproche les suffixes classiques du nombre */ .stat-card .elementor-counter-number-suffix { margin-left: 0em !important; } /* ================================================== AJUSTEMENTS FINAUX DES SUFFIXES ================================================== */ /* m² : plus proche du k et nettement plus bas */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { margin-left: 0.08em !important; vertical-align: -0em !important; } /* Ans : plus proche du nombre et légèrement plus bas */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { margin-left: 0em !important; vertical-align: 0.25em !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-3300b1b *//* ================================================== CARTE STATISTIQUE — CONFIGURATION GÉNÉRALE ================================================== */ .stat-card { --stat-color-default: #393624c9; --stat-hover-start: #e2e0d4; --stat-hover-end: #e2e0d44d; --stat-gradient: linear-gradient( 90deg, var(--stat-color-default) 0%, var(--stat-color-default) 50%, var(--stat-hover-start) 50%, var(--stat-hover-end) 100% ); --stat-background-position: 0%; position: relative; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* ================================================== SURVOL ET FOCUS ================================================== */ .stat-card:hover, .stat-card:focus-within { --stat-background-position: 100%; } .stat-card:hover { transform: translateY(-4px); } /* ================================================== DÉGRADÉ UNIQUE SUR TOUT LE COMPTEUR ================================================== */ /* * Le dégradé est appliqué uniquement ici. * * Il couvre : * - le nombre ; * - le préfixe ; * - le suffixe ; * - le sous-suffixe m² ; * - le titre. */ .stat-card .elementor-counter { color: transparent !important; background-image: var(--stat-gradient) !important; background-size: 200% 100% !important; background-position: var(--stat-background-position) 50% !important; background-repeat: no-repeat !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; text-align: center !important; overflow: visible !important; transition: background-position 0.65s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* ================================================== ÉLÉMENTS INTERNES ================================================== */ /* * Les enfants héritent de la transparence du parent. * Aucun enfant ne possède son propre dégradé. */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix, .stat-card .elementor-counter-title, .stat-card .elementor-counter-number-suffix::after { color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; -webkit-text-fill-color: inherit !important; transition: none !important; } /* ================================================== WRAPPER DU NOMBRE ================================================== */ /* * Important : * ne pas utiliser display:flex ici. * * inline-block permet au dégradé du parent de couvrir * le nombre, le suffixe et le pseudo-élément m². */ .stat-card .elementor-counter-number-wrapper { display: inline-block !important; width: auto !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; text-align: center !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; } /* Les éléments restent côte à côte */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix { display: inline-block !important; width: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; padding: 0 !important; position: static !important; transform: none !important; vertical-align: baseline; white-space: nowrap !important; overflow: visible !important; } /* Masque uniquement le préfixe vide */ .stat-card .elementor-counter-number-prefix:empty { display: none !important; } /* ================================================== TITRE SOUS LE COMPTEUR ================================================== */ .stat-card .elementor-counter-title { display: block !important; width: 100% !important; text-align: center !important; overflow: visible !important; } /* ================================================== SUFFIXE CLASSIQUE Exemple : 15 Ans ================================================== */ .stat-card .elementor-counter-number-suffix { font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; /* * vertical-align remplace position/top. * Le suffixe reste inclus dans le dégradé du parent. */ vertical-align: 0.55em !important; position: static !important; top: auto !important; } /* ================================================== COMPTEUR SPÉCIAL : 80k m² ================================================== */ /* * Configuration Elementor : * * Nombre : 80 * Suffixe : k * Classe : stat-card suffix-k-m2 */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix, .stat-card .suffix-k-m2 .elementor-counter-number-suffix { display: inline-block !important; font-size: 1em !important; font-weight: inherit !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: baseline !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== AJOUT DE m² ================================================== */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { content: "m²" !important; display: inline-block !important; margin-left: 0em !important; padding: 0 !important; font-size: 0.32em !important; font-weight: 400 !important; line-height: 1 !important; /* * Important : * ne pas utiliser position: relative ni top. * vertical-align garde m² dans la zone du dégradé. */ position: static !important; top: auto !important; vertical-align: super !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; transition: none !important; } /* ================================================== SUFFIXE « Ans » ================================================== */ /* * Configuration Elementor : * * Suffixe : Ans * Classe : stat-card suffix-ans */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { display: inline-block !important; font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: 0.55em !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== ACCESSIBILITÉ ================================================== */ @media (prefers-reduced-motion: reduce) { .stat-card, .stat-card .elementor-counter { transition: none !important; } .stat-card:hover { transform: none !important; } } /* ================================================== AJUSTEMENTS D’ESPACEMENT ================================================== */ /* Rapproche le préfixe du nombre : +300 */ .stat-card .elementor-counter-number-prefix { margin-right: -0em !important; } /* Rapproche les suffixes classiques du nombre */ .stat-card .elementor-counter-number-suffix { margin-left: 0em !important; } /* ================================================== AJUSTEMENTS FINAUX DES SUFFIXES ================================================== */ /* m² : plus proche du k et nettement plus bas */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { margin-left: 0.08em !important; vertical-align: -0em !important; } /* Ans : plus proche du nombre et légèrement plus bas */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { margin-left: 0em !important; vertical-align: 0.25em !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-13d36bd *//* ================================================== CARTE STATISTIQUE — CONFIGURATION GÉNÉRALE ================================================== */ .stat-card { --stat-color-default: #393624c9; --stat-hover-start: #e2e0d4; --stat-hover-end: #e2e0d44d; --stat-gradient: linear-gradient( 90deg, var(--stat-color-default) 0%, var(--stat-color-default) 50%, var(--stat-hover-start) 50%, var(--stat-hover-end) 100% ); --stat-background-position: 0%; /* * Voile noir affiché au survol. * * --stat-veil-opacity : densité maximale, atteinte en bas de carte. * --stat-veil-height : hauteur à laquelle le voile devient invisible. */ --stat-veil-opacity: 0.65; --stat-veil-height: 70%; position: relative; /* * Contient le voile dans les angles arrondis de la carte. * À retirer si un élément doit volontairement déborder. */ overflow: hidden; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* ================================================== SURVOL ET FOCUS ================================================== */ .stat-card:hover, .stat-card:focus-within { --stat-background-position: 100%; } .stat-card:hover { transform: translateY(-4px); } /* ================================================== VOILE NOIR AU SURVOL Opaque en bas, transparent en haut ================================================== */ /* * Le voile est porté par un pseudo-élément de la carte, * jamais par le compteur : celui-ci utilise déjà son * background pour le background-clip: text. * * L'arrêt intermédiaire à 35 % adoucit la courbe. * Un dégradé linéaire pur donne une transition * qui paraît coupée à l'œil. */ .stat-card::before { content: ""; position: absolute; inset: 0; z-index: 1; background-image: linear-gradient( to top, rgba(0, 0, 0, var(--stat-veil-opacity)) 0%, rgba(0, 0, 0, calc(var(--stat-veil-opacity) * 0.55)) 35%, rgba(0, 0, 0, 0) var(--stat-veil-height) ); opacity: 0; pointer-events: none; border-radius: inherit; transition: opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1); } .stat-card:hover::before, .stat-card:focus-within::before { opacity: 1; } /* * Le contenu doit passer au-dessus du voile. * * Si le compteur n'est pas enfant direct de .stat-card, * la seconde règle prend le relais. */ .stat-card > * { position: relative; z-index: 2; } .stat-card .elementor-widget-container { position: relative; z-index: 2; } /* ================================================== DÉGRADÉ UNIQUE SUR TOUT LE COMPTEUR ================================================== */ /* * Le dégradé est appliqué uniquement ici. * * Il couvre : * - le nombre ; * - le préfixe ; * - le suffixe ; * - le sous-suffixe m² ; * - le titre. */ .stat-card .elementor-counter { color: transparent !important; background-image: var(--stat-gradient) !important; background-size: 200% 100% !important; background-position: var(--stat-background-position) 50% !important; background-repeat: no-repeat !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; text-align: center !important; overflow: visible !important; transition: background-position 0.65s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* ================================================== ÉLÉMENTS INTERNES ================================================== */ /* * Les enfants héritent de la transparence du parent. * Aucun enfant ne possède son propre dégradé. */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix, .stat-card .elementor-counter-title, .stat-card .elementor-counter-number-suffix::after { color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; -webkit-text-fill-color: inherit !important; transition: none !important; } /* ================================================== WRAPPER DU NOMBRE ================================================== */ /* * Important : * ne pas utiliser display:flex ici. * * inline-block permet au dégradé du parent de couvrir * le nombre, le suffixe et le pseudo-élément m². */ .stat-card .elementor-counter-number-wrapper { display: inline-block !important; width: auto !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; text-align: center !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; } /* Les éléments restent côte à côte */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix { display: inline-block !important; width: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; padding: 0 !important; position: static !important; transform: none !important; vertical-align: baseline; white-space: nowrap !important; overflow: visible !important; } /* Masque uniquement le préfixe vide */ .stat-card .elementor-counter-number-prefix:empty { display: none !important; } /* ================================================== TITRE SOUS LE COMPTEUR ================================================== */ .stat-card .elementor-counter-title { display: block !important; width: 100% !important; text-align: center !important; overflow: visible !important; } /* ================================================== SUFFIXE CLASSIQUE Exemple : 15 Ans ================================================== */ .stat-card .elementor-counter-number-suffix { font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; /* * vertical-align remplace position/top. * Le suffixe reste inclus dans le dégradé du parent. */ vertical-align: 0.55em !important; position: static !important; top: auto !important; } /* ================================================== COMPTEUR SPÉCIAL : 80k m² ================================================== */ /* * Configuration Elementor : * * Nombre : 80 * Suffixe : k * Classe : stat-card suffix-k-m2 */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix, .stat-card .suffix-k-m2 .elementor-counter-number-suffix { display: inline-block !important; font-size: 1em !important; font-weight: inherit !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: baseline !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== AJOUT DE m² ================================================== */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { content: "m²" !important; display: inline-block !important; margin-left: 0em !important; padding: 0 !important; font-size: 0.32em !important; font-weight: 400 !important; line-height: 1 !important; /* * Important : * ne pas utiliser position: relative ni top. * vertical-align garde m² dans la zone du dégradé. */ position: static !important; top: auto !important; vertical-align: super !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; transition: none !important; } /* ================================================== SUFFIXE « Ans » ================================================== */ /* * Configuration Elementor : * * Suffixe : Ans * Classe : stat-card suffix-ans */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { display: inline-block !important; font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: 0.55em !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== ACCESSIBILITÉ ================================================== */ @media (prefers-reduced-motion: reduce) { .stat-card, .stat-card .elementor-counter, .stat-card::before { transition: none !important; } .stat-card:hover { transform: none !important; } } /* ================================================== AJUSTEMENTS D’ESPACEMENT ================================================== */ /* Rapproche le préfixe du nombre : +300 */ .stat-card .elementor-counter-number-prefix { margin-right: -0em !important; } /* Rapproche les suffixes classiques du nombre */ .stat-card .elementor-counter-number-suffix { margin-left: 0em !important; } /* ================================================== AJUSTEMENTS FINAUX DES SUFFIXES ================================================== */ /* m² : plus proche du k et nettement plus bas */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { margin-left: 0.08em !important; vertical-align: -0em !important; } /* Ans : plus proche du nombre et légèrement plus bas */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { margin-left: 0em !important; vertical-align: 0.25em !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-0ecc911 *//* ================================================== CARTE STATISTIQUE — CONFIGURATION GÉNÉRALE ================================================== */ .stat-card { --stat-color-default: #393624c9; --stat-hover-start: #e2e0d4; --stat-hover-end: #e2e0d44d; --stat-gradient: linear-gradient( 90deg, var(--stat-color-default) 0%, var(--stat-color-default) 50%, var(--stat-hover-start) 50%, var(--stat-hover-end) 100% ); --stat-background-position: 0%; /* * Voile noir affiché au survol, posé sur l'image. * * --stat-veil-opacity : densité maximale, atteinte en bas. * --stat-veil-height : hauteur à laquelle le voile disparaît. * --stat-image-radius : à aligner sur l'arrondi réglé dans Elementor. */ --stat-veil-opacity: 0.65; --stat-veil-height: 70%; --stat-image-radius: 16px; position: relative; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* ================================================== SURVOL ET FOCUS ================================================== */ .stat-card:hover, .stat-card:focus-within { --stat-background-position: 100%; } .stat-card:hover { transform: translateY(-4px); } /* ================================================== CONTENEUR DE L'IMAGE ================================================== */ /* * L'arrondi et le rognage sont portés par le conteneur, * pas par le voile. * * Conséquence : le dégradé épouse exactement la forme * de l'image, quel que soit le rayon appliqué. * * line-height: 0 supprime l'espace parasite sous une * image restée en display inline. */ .stat-card .elementor-widget-image .elementor-widget-container, .stat-card .stat-media { position: relative; display: block; overflow: hidden; border-radius: var(--stat-image-radius); line-height: 0; } /* L'image remplit son conteneur et suit son arrondi */ .stat-card .elementor-widget-image img, .stat-card .stat-media img { display: block; width: 100%; height: auto; border-radius: inherit; } /* ================================================== VOILE NOIR AU SURVOL Opaque en bas, transparent en haut ================================================== */ /* * Le voile est un pseudo-élément du conteneur d'image. * Il ne peut pas être posé sur le compteur, dont le * background sert déjà au background-clip: text. * * L'arrêt intermédiaire à 35 % adoucit la courbe : * un dégradé linéaire pur paraît coupé à l'œil. */ .stat-card .elementor-widget-image .elementor-widget-container::after, .stat-card .stat-media::after { content: ""; position: absolute; inset: 0; z-index: 1; background-image: linear-gradient( to top, rgba(0, 0, 0, var(--stat-veil-opacity)) 0%, rgba(0, 0, 0, calc(var(--stat-veil-opacity) * 0.55)) 35%, rgba(0, 0, 0, 0) var(--stat-veil-height) ); opacity: 0; pointer-events: none; border-radius: inherit; transition: opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1); } .stat-card:hover .elementor-widget-image .elementor-widget-container::after, .stat-card:focus-within .elementor-widget-image .elementor-widget-container::after, .stat-card:hover .stat-media::after, .stat-card:focus-within .stat-media::after { opacity: 1; } /* ================================================== DÉGRADÉ UNIQUE SUR TOUT LE COMPTEUR ================================================== */ /* * Le dégradé est appliqué uniquement ici. * * Il couvre : * - le nombre ; * - le préfixe ; * - le suffixe ; * - le sous-suffixe m² ; * - le titre. */ .stat-card .elementor-counter { color: transparent !important; background-image: var(--stat-gradient) !important; background-size: 200% 100% !important; background-position: var(--stat-background-position) 50% !important; background-repeat: no-repeat !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; text-align: center !important; overflow: visible !important; transition: background-position 0.65s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* * Le compteur reste au-dessus du voile s'il chevauche * l'image dans la mise en page. */ .stat-card .elementor-widget-counter { position: relative; z-index: 2; } /* ================================================== ÉLÉMENTS INTERNES ================================================== */ /* * Les enfants héritent de la transparence du parent. * Aucun enfant ne possède son propre dégradé. */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix, .stat-card .elementor-counter-title, .stat-card .elementor-counter-number-suffix::after { color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; -webkit-text-fill-color: inherit !important; transition: none !important; } /* ================================================== WRAPPER DU NOMBRE ================================================== */ /* * Important : * ne pas utiliser display:flex ici. * * inline-block permet au dégradé du parent de couvrir * le nombre, le suffixe et le pseudo-élément m². */ .stat-card .elementor-counter-number-wrapper { display: inline-block !important; width: auto !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; text-align: center !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; } /* Les éléments restent côte à côte */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix { display: inline-block !important; width: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; padding: 0 !important; position: static !important; transform: none !important; vertical-align: baseline; white-space: nowrap !important; overflow: visible !important; } /* Masque uniquement le préfixe vide */ .stat-card .elementor-counter-number-prefix:empty { display: none !important; } /* ================================================== TITRE SOUS LE COMPTEUR ================================================== */ .stat-card .elementor-counter-title { display: block !important; width: 100% !important; text-align: center !important; overflow: visible !important; } /* ================================================== SUFFIXE CLASSIQUE Exemple : 15 Ans ================================================== */ .stat-card .elementor-counter-number-suffix { font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; /* * vertical-align remplace position/top. * Le suffixe reste inclus dans le dégradé du parent. */ vertical-align: 0.55em !important; position: static !important; top: auto !important; } /* ================================================== COMPTEUR SPÉCIAL : 80k m² ================================================== */ /* * Configuration Elementor : * * Nombre : 80 * Suffixe : k * Classe : stat-card suffix-k-m2 */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix, .stat-card .suffix-k-m2 .elementor-counter-number-suffix { display: inline-block !important; font-size: 1em !important; font-weight: inherit !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: baseline !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== AJOUT DE m² ================================================== */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { content: "m²" !important; display: inline-block !important; margin-left: 0em !important; padding: 0 !important; font-size: 0.32em !important; font-weight: 400 !important; line-height: 1 !important; /* * Important : * ne pas utiliser position: relative ni top. * vertical-align garde m² dans la zone du dégradé. */ position: static !important; top: auto !important; vertical-align: super !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; transition: none !important; } /* ================================================== SUFFIXE « Ans » ================================================== */ /* * Configuration Elementor : * * Suffixe : Ans * Classe : stat-card suffix-ans */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { display: inline-block !important; font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: 0.55em !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== ACCESSIBILITÉ ================================================== */ @media (prefers-reduced-motion: reduce) { .stat-card, .stat-card .elementor-counter, .stat-card .elementor-widget-image .elementor-widget-container::after, .stat-card .stat-media::after { transition: none !important; } .stat-card:hover { transform: none !important; } } /* ================================================== AJUSTEMENTS D’ESPACEMENT ================================================== */ /* Rapproche le préfixe du nombre : +300 */ .stat-card .elementor-counter-number-prefix { margin-right: -0em !important; } /* Rapproche les suffixes classiques du nombre */ .stat-card .elementor-counter-number-suffix { margin-left: 0em !important; } /* ================================================== AJUSTEMENTS FINAUX DES SUFFIXES ================================================== */ /* m² : plus proche du k et nettement plus bas */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { margin-left: 0.08em !important; vertical-align: -0em !important; } /* Ans : plus proche du nombre et légèrement plus bas */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { margin-left: 0em !important; vertical-align: 0.25em !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-f8ce282 *//* ================================================== CARTE STATISTIQUE — CONFIGURATION GÉNÉRALE ================================================== */ .stat-card { --stat-color-default: #393624c9; --stat-hover-start: #e2e0d4; --stat-hover-end: #e2e0d44d; --stat-gradient: linear-gradient( 90deg, var(--stat-color-default) 0%, var(--stat-color-default) 50%, var(--stat-hover-start) 50%, var(--stat-hover-end) 100% ); --stat-background-position: 0%; /* * Voile noir affiché au survol, posé sur l'image. * * --stat-veil-opacity : densité maximale, atteinte en bas. * --stat-veil-height : hauteur à laquelle le voile disparaît. * --stat-image-radius : à aligner sur l'arrondi réglé dans Elementor. */ --stat-veil-opacity: 0.65; --stat-veil-height: 70%; --stat-image-radius: 16px; position: relative; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* ================================================== SURVOL ET FOCUS ================================================== */ .stat-card:hover, .stat-card:focus-within { --stat-background-position: 100%; } .stat-card:hover { transform: translateY(-4px); } /* ================================================== CONTENEUR DE L'IMAGE ================================================== */ /* * L'arrondi et le rognage sont portés par le conteneur, * pas par le voile. * * Conséquence : le dégradé épouse exactement la forme * de l'image, quel que soit le rayon appliqué. * * line-height: 0 supprime l'espace parasite sous une * image restée en display inline. */ .stat-card .elementor-widget-image .elementor-widget-container, .stat-card .stat-media { position: relative; display: block; overflow: hidden; border-radius: var(--stat-image-radius); line-height: 0; } /* L'image remplit son conteneur et suit son arrondi */ .stat-card .elementor-widget-image img, .stat-card .stat-media img { display: block; width: 100%; height: auto; border-radius: inherit; } /* ================================================== VOILE NOIR AU SURVOL Opaque en bas, transparent en haut ================================================== */ /* * Le voile est un pseudo-élément du conteneur d'image. * Il ne peut pas être posé sur le compteur, dont le * background sert déjà au background-clip: text. * * L'arrêt intermédiaire à 35 % adoucit la courbe : * un dégradé linéaire pur paraît coupé à l'œil. */ .stat-card .elementor-widget-image .elementor-widget-container::after, .stat-card .stat-media::after { content: ""; position: absolute; inset: 0; z-index: 1; background-image: linear-gradient( to top, rgba(0, 0, 0, var(--stat-veil-opacity)) 0%, rgba(0, 0, 0, calc(var(--stat-veil-opacity) * 0.55)) 35%, rgba(0, 0, 0, 0) var(--stat-veil-height) ); opacity: 0; pointer-events: none; border-radius: inherit; transition: opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1); } .stat-card:hover .elementor-widget-image .elementor-widget-container::after, .stat-card:focus-within .elementor-widget-image .elementor-widget-container::after, .stat-card:hover .stat-media::after, .stat-card:focus-within .stat-media::after { opacity: 1; } /* ================================================== DÉGRADÉ UNIQUE SUR TOUT LE COMPTEUR ================================================== */ /* * Le dégradé est appliqué uniquement ici. * * Il couvre : * - le nombre ; * - le préfixe ; * - le suffixe ; * - le sous-suffixe m² ; * - le titre. */ .stat-card .elementor-counter { color: transparent !important; background-image: var(--stat-gradient) !important; background-size: 200% 100% !important; background-position: var(--stat-background-position) 50% !important; background-repeat: no-repeat !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; text-align: center !important; overflow: visible !important; transition: background-position 0.65s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* * Le compteur reste au-dessus du voile s'il chevauche * l'image dans la mise en page. */ .stat-card .elementor-widget-counter { position: relative; z-index: 2; } /* ================================================== ÉLÉMENTS INTERNES ================================================== */ /* * Les enfants héritent de la transparence du parent. * Aucun enfant ne possède son propre dégradé. */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix, .stat-card .elementor-counter-title, .stat-card .elementor-counter-number-suffix::after { color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; -webkit-text-fill-color: inherit !important; transition: none !important; } /* ================================================== WRAPPER DU NOMBRE ================================================== */ /* * Important : * ne pas utiliser display:flex ici. * * inline-block permet au dégradé du parent de couvrir * le nombre, le suffixe et le pseudo-élément m². */ .stat-card .elementor-counter-number-wrapper { display: inline-block !important; width: auto !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; text-align: center !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; } /* Les éléments restent côte à côte */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix { display: inline-block !important; width: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; padding: 0 !important; position: static !important; transform: none !important; vertical-align: baseline; white-space: nowrap !important; overflow: visible !important; } /* Masque uniquement le préfixe vide */ .stat-card .elementor-counter-number-prefix:empty { display: none !important; } /* ================================================== TITRE SOUS LE COMPTEUR ================================================== */ .stat-card .elementor-counter-title { display: block !important; width: 100% !important; text-align: center !important; overflow: visible !important; } /* ================================================== SUFFIXE CLASSIQUE Exemple : 15 Ans ================================================== */ .stat-card .elementor-counter-number-suffix { font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; /* * vertical-align remplace position/top. * Le suffixe reste inclus dans le dégradé du parent. */ vertical-align: 0.55em !important; position: static !important; top: auto !important; } /* ================================================== COMPTEUR SPÉCIAL : 80k m² ================================================== */ /* * Configuration Elementor : * * Nombre : 80 * Suffixe : k * Classe : stat-card suffix-k-m2 */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix, .stat-card .suffix-k-m2 .elementor-counter-number-suffix { display: inline-block !important; font-size: 1em !important; font-weight: inherit !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: baseline !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== AJOUT DE m² ================================================== */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { content: "m²" !important; display: inline-block !important; margin-left: 0em !important; padding: 0 !important; font-size: 0.32em !important; font-weight: 400 !important; line-height: 1 !important; /* * Important : * ne pas utiliser position: relative ni top. * vertical-align garde m² dans la zone du dégradé. */ position: static !important; top: auto !important; vertical-align: super !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; transition: none !important; } /* ================================================== SUFFIXE « Ans » ================================================== */ /* * Configuration Elementor : * * Suffixe : Ans * Classe : stat-card suffix-ans */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { display: inline-block !important; font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: 0.55em !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== ACCESSIBILITÉ ================================================== */ @media (prefers-reduced-motion: reduce) { .stat-card, .stat-card .elementor-counter, .stat-card .elementor-widget-image .elementor-widget-container::after, .stat-card .stat-media::after { transition: none !important; } .stat-card:hover { transform: none !important; } } /* ================================================== AJUSTEMENTS D’ESPACEMENT ================================================== */ /* Rapproche le préfixe du nombre : +300 */ .stat-card .elementor-counter-number-prefix { margin-right: -0em !important; } /* Rapproche les suffixes classiques du nombre */ .stat-card .elementor-counter-number-suffix { margin-left: 0em !important; } /* ================================================== AJUSTEMENTS FINAUX DES SUFFIXES ================================================== */ /* m² : plus proche du k et nettement plus bas */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { margin-left: 0.08em !important; vertical-align: -0em !important; } /* Ans : plus proche du nombre et légèrement plus bas */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { margin-left: 0em !important; vertical-align: 0.25em !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-3300b1b *//* ================================================== CARTE STATISTIQUE — CONFIGURATION GÉNÉRALE ================================================== */ .stat-card { --stat-color-default: #393624c9; --stat-hover-start: #e2e0d4; --stat-hover-end: #e2e0d44d; --stat-gradient: linear-gradient( 90deg, var(--stat-color-default) 0%, var(--stat-color-default) 50%, var(--stat-hover-start) 50%, var(--stat-hover-end) 100% ); --stat-background-position: 0%; position: relative; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* ================================================== SURVOL ET FOCUS ================================================== */ .stat-card:hover, .stat-card:focus-within { --stat-background-position: 100%; } .stat-card:hover { transform: translateY(-4px); } /* ================================================== DÉGRADÉ UNIQUE SUR TOUT LE COMPTEUR ================================================== */ /* * Le dégradé est appliqué uniquement ici. * * Il couvre : * - le nombre ; * - le préfixe ; * - le suffixe ; * - le sous-suffixe m² ; * - le titre. */ .stat-card .elementor-counter { color: transparent !important; background-image: var(--stat-gradient) !important; background-size: 200% 100% !important; background-position: var(--stat-background-position) 50% !important; background-repeat: no-repeat !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; text-align: center !important; overflow: visible !important; transition: background-position 0.65s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* ================================================== ÉLÉMENTS INTERNES ================================================== */ /* * Les enfants héritent de la transparence du parent. * Aucun enfant ne possède son propre dégradé. */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix, .stat-card .elementor-counter-title, .stat-card .elementor-counter-number-suffix::after { color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; -webkit-text-fill-color: inherit !important; transition: none !important; } /* ================================================== WRAPPER DU NOMBRE ================================================== */ /* * Important : * ne pas utiliser display:flex ici. * * inline-block permet au dégradé du parent de couvrir * le nombre, le suffixe et le pseudo-élément m². */ .stat-card .elementor-counter-number-wrapper { display: inline-block !important; width: auto !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; text-align: center !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; } /* Les éléments restent côte à côte */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix { display: inline-block !important; width: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; padding: 0 !important; position: static !important; transform: none !important; vertical-align: baseline; white-space: nowrap !important; overflow: visible !important; } /* Masque uniquement le préfixe vide */ .stat-card .elementor-counter-number-prefix:empty { display: none !important; } /* ================================================== TITRE SOUS LE COMPTEUR ================================================== */ .stat-card .elementor-counter-title { display: block !important; width: 100% !important; text-align: center !important; overflow: visible !important; } /* ================================================== SUFFIXE CLASSIQUE Exemple : 15 Ans ================================================== */ .stat-card .elementor-counter-number-suffix { font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; /* * vertical-align remplace position/top. * Le suffixe reste inclus dans le dégradé du parent. */ vertical-align: 0.55em !important; position: static !important; top: auto !important; } /* ================================================== COMPTEUR SPÉCIAL : 80k m² ================================================== */ /* * Configuration Elementor : * * Nombre : 80 * Suffixe : k * Classe : stat-card suffix-k-m2 */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix, .stat-card .suffix-k-m2 .elementor-counter-number-suffix { display: inline-block !important; font-size: 1em !important; font-weight: inherit !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: baseline !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== AJOUT DE m² ================================================== */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { content: "m²" !important; display: inline-block !important; margin-left: 0em !important; padding: 0 !important; font-size: 0.32em !important; font-weight: 400 !important; line-height: 1 !important; /* * Important : * ne pas utiliser position: relative ni top. * vertical-align garde m² dans la zone du dégradé. */ position: static !important; top: auto !important; vertical-align: super !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; transition: none !important; } /* ================================================== SUFFIXE « Ans » ================================================== */ /* * Configuration Elementor : * * Suffixe : Ans * Classe : stat-card suffix-ans */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { display: inline-block !important; font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: 0.55em !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== ACCESSIBILITÉ ================================================== */ @media (prefers-reduced-motion: reduce) { .stat-card, .stat-card .elementor-counter { transition: none !important; } .stat-card:hover { transform: none !important; } } /* ================================================== AJUSTEMENTS D’ESPACEMENT ================================================== */ /* Rapproche le préfixe du nombre : +300 */ .stat-card .elementor-counter-number-prefix { margin-right: -0em !important; } /* Rapproche les suffixes classiques du nombre */ .stat-card .elementor-counter-number-suffix { margin-left: 0em !important; } /* ================================================== AJUSTEMENTS FINAUX DES SUFFIXES ================================================== */ /* m² : plus proche du k et nettement plus bas */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { margin-left: 0.08em !important; vertical-align: -0em !important; } /* Ans : plus proche du nombre et légèrement plus bas */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { margin-left: 0em !important; vertical-align: 0.25em !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-13d36bd *//* ================================================== CARTE STATISTIQUE — CONFIGURATION GÉNÉRALE ================================================== */ .stat-card { --stat-color-default: #393624c9; --stat-hover-start: #e2e0d4; --stat-hover-end: #e2e0d44d; --stat-gradient: linear-gradient( 90deg, var(--stat-color-default) 0%, var(--stat-color-default) 50%, var(--stat-hover-start) 50%, var(--stat-hover-end) 100% ); --stat-background-position: 0%; /* * Voile noir affiché au survol. * * --stat-veil-opacity : densité maximale, atteinte en bas de carte. * --stat-veil-height : hauteur à laquelle le voile devient invisible. */ --stat-veil-opacity: 0.65; --stat-veil-height: 70%; position: relative; /* * Contient le voile dans les angles arrondis de la carte. * À retirer si un élément doit volontairement déborder. */ overflow: hidden; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* ================================================== SURVOL ET FOCUS ================================================== */ .stat-card:hover, .stat-card:focus-within { --stat-background-position: 100%; } .stat-card:hover { transform: translateY(-4px); } /* ================================================== VOILE NOIR AU SURVOL Opaque en bas, transparent en haut ================================================== */ /* * Le voile est porté par un pseudo-élément de la carte, * jamais par le compteur : celui-ci utilise déjà son * background pour le background-clip: text. * * L'arrêt intermédiaire à 35 % adoucit la courbe. * Un dégradé linéaire pur donne une transition * qui paraît coupée à l'œil. */ .stat-card::before { content: ""; position: absolute; inset: 0; z-index: 1; background-image: linear-gradient( to top, rgba(0, 0, 0, var(--stat-veil-opacity)) 0%, rgba(0, 0, 0, calc(var(--stat-veil-opacity) * 0.55)) 35%, rgba(0, 0, 0, 0) var(--stat-veil-height) ); opacity: 0; pointer-events: none; border-radius: inherit; transition: opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1); } .stat-card:hover::before, .stat-card:focus-within::before { opacity: 1; } /* * Le contenu doit passer au-dessus du voile. * * Si le compteur n'est pas enfant direct de .stat-card, * la seconde règle prend le relais. */ .stat-card > * { position: relative; z-index: 2; } .stat-card .elementor-widget-container { position: relative; z-index: 2; } /* ================================================== DÉGRADÉ UNIQUE SUR TOUT LE COMPTEUR ================================================== */ /* * Le dégradé est appliqué uniquement ici. * * Il couvre : * - le nombre ; * - le préfixe ; * - le suffixe ; * - le sous-suffixe m² ; * - le titre. */ .stat-card .elementor-counter { color: transparent !important; background-image: var(--stat-gradient) !important; background-size: 200% 100% !important; background-position: var(--stat-background-position) 50% !important; background-repeat: no-repeat !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; text-align: center !important; overflow: visible !important; transition: background-position 0.65s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* ================================================== ÉLÉMENTS INTERNES ================================================== */ /* * Les enfants héritent de la transparence du parent. * Aucun enfant ne possède son propre dégradé. */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix, .stat-card .elementor-counter-title, .stat-card .elementor-counter-number-suffix::after { color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; -webkit-text-fill-color: inherit !important; transition: none !important; } /* ================================================== WRAPPER DU NOMBRE ================================================== */ /* * Important : * ne pas utiliser display:flex ici. * * inline-block permet au dégradé du parent de couvrir * le nombre, le suffixe et le pseudo-élément m². */ .stat-card .elementor-counter-number-wrapper { display: inline-block !important; width: auto !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; text-align: center !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; } /* Les éléments restent côte à côte */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix { display: inline-block !important; width: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; padding: 0 !important; position: static !important; transform: none !important; vertical-align: baseline; white-space: nowrap !important; overflow: visible !important; } /* Masque uniquement le préfixe vide */ .stat-card .elementor-counter-number-prefix:empty { display: none !important; } /* ================================================== TITRE SOUS LE COMPTEUR ================================================== */ .stat-card .elementor-counter-title { display: block !important; width: 100% !important; text-align: center !important; overflow: visible !important; } /* ================================================== SUFFIXE CLASSIQUE Exemple : 15 Ans ================================================== */ .stat-card .elementor-counter-number-suffix { font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; /* * vertical-align remplace position/top. * Le suffixe reste inclus dans le dégradé du parent. */ vertical-align: 0.55em !important; position: static !important; top: auto !important; } /* ================================================== COMPTEUR SPÉCIAL : 80k m² ================================================== */ /* * Configuration Elementor : * * Nombre : 80 * Suffixe : k * Classe : stat-card suffix-k-m2 */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix, .stat-card .suffix-k-m2 .elementor-counter-number-suffix { display: inline-block !important; font-size: 1em !important; font-weight: inherit !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: baseline !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== AJOUT DE m² ================================================== */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { content: "m²" !important; display: inline-block !important; margin-left: 0em !important; padding: 0 !important; font-size: 0.32em !important; font-weight: 400 !important; line-height: 1 !important; /* * Important : * ne pas utiliser position: relative ni top. * vertical-align garde m² dans la zone du dégradé. */ position: static !important; top: auto !important; vertical-align: super !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; transition: none !important; } /* ================================================== SUFFIXE « Ans » ================================================== */ /* * Configuration Elementor : * * Suffixe : Ans * Classe : stat-card suffix-ans */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { display: inline-block !important; font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: 0.55em !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== ACCESSIBILITÉ ================================================== */ @media (prefers-reduced-motion: reduce) { .stat-card, .stat-card .elementor-counter, .stat-card::before { transition: none !important; } .stat-card:hover { transform: none !important; } } /* ================================================== AJUSTEMENTS D’ESPACEMENT ================================================== */ /* Rapproche le préfixe du nombre : +300 */ .stat-card .elementor-counter-number-prefix { margin-right: -0em !important; } /* Rapproche les suffixes classiques du nombre */ .stat-card .elementor-counter-number-suffix { margin-left: 0em !important; } /* ================================================== AJUSTEMENTS FINAUX DES SUFFIXES ================================================== */ /* m² : plus proche du k et nettement plus bas */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { margin-left: 0.08em !important; vertical-align: -0em !important; } /* Ans : plus proche du nombre et légèrement plus bas */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { margin-left: 0em !important; vertical-align: 0.25em !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-0ecc911 *//* ================================================== CARTE STATISTIQUE — CONFIGURATION GÉNÉRALE ================================================== */ .stat-card { --stat-color-default: #393624c9; --stat-hover-start: #e2e0d4; --stat-hover-end: #e2e0d44d; --stat-gradient: linear-gradient( 90deg, var(--stat-color-default) 0%, var(--stat-color-default) 50%, var(--stat-hover-start) 50%, var(--stat-hover-end) 100% ); --stat-background-position: 0%; /* * Voile noir affiché au survol, posé sur l'image. * * --stat-veil-opacity : densité maximale, atteinte en bas. * --stat-veil-height : hauteur à laquelle le voile disparaît. * --stat-image-radius : à aligner sur l'arrondi réglé dans Elementor. */ --stat-veil-opacity: 0.65; --stat-veil-height: 70%; --stat-image-radius: 16px; position: relative; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* ================================================== SURVOL ET FOCUS ================================================== */ .stat-card:hover, .stat-card:focus-within { --stat-background-position: 100%; } .stat-card:hover { transform: translateY(-4px); } /* ================================================== CONTENEUR DE L'IMAGE ================================================== */ /* * L'arrondi et le rognage sont portés par le conteneur, * pas par le voile. * * Conséquence : le dégradé épouse exactement la forme * de l'image, quel que soit le rayon appliqué. * * line-height: 0 supprime l'espace parasite sous une * image restée en display inline. */ .stat-card .elementor-widget-image .elementor-widget-container, .stat-card .stat-media { position: relative; display: block; overflow: hidden; border-radius: var(--stat-image-radius); line-height: 0; } /* L'image remplit son conteneur et suit son arrondi */ .stat-card .elementor-widget-image img, .stat-card .stat-media img { display: block; width: 100%; height: auto; border-radius: inherit; } /* ================================================== VOILE NOIR AU SURVOL Opaque en bas, transparent en haut ================================================== */ /* * Le voile est un pseudo-élément du conteneur d'image. * Il ne peut pas être posé sur le compteur, dont le * background sert déjà au background-clip: text. * * L'arrêt intermédiaire à 35 % adoucit la courbe : * un dégradé linéaire pur paraît coupé à l'œil. */ .stat-card .elementor-widget-image .elementor-widget-container::after, .stat-card .stat-media::after { content: ""; position: absolute; inset: 0; z-index: 1; background-image: linear-gradient( to top, rgba(0, 0, 0, var(--stat-veil-opacity)) 0%, rgba(0, 0, 0, calc(var(--stat-veil-opacity) * 0.55)) 35%, rgba(0, 0, 0, 0) var(--stat-veil-height) ); opacity: 0; pointer-events: none; border-radius: inherit; transition: opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1); } .stat-card:hover .elementor-widget-image .elementor-widget-container::after, .stat-card:focus-within .elementor-widget-image .elementor-widget-container::after, .stat-card:hover .stat-media::after, .stat-card:focus-within .stat-media::after { opacity: 1; } /* ================================================== DÉGRADÉ UNIQUE SUR TOUT LE COMPTEUR ================================================== */ /* * Le dégradé est appliqué uniquement ici. * * Il couvre : * - le nombre ; * - le préfixe ; * - le suffixe ; * - le sous-suffixe m² ; * - le titre. */ .stat-card .elementor-counter { color: transparent !important; background-image: var(--stat-gradient) !important; background-size: 200% 100% !important; background-position: var(--stat-background-position) 50% !important; background-repeat: no-repeat !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; text-align: center !important; overflow: visible !important; transition: background-position 0.65s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* * Le compteur reste au-dessus du voile s'il chevauche * l'image dans la mise en page. */ .stat-card .elementor-widget-counter { position: relative; z-index: 2; } /* ================================================== ÉLÉMENTS INTERNES ================================================== */ /* * Les enfants héritent de la transparence du parent. * Aucun enfant ne possède son propre dégradé. */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix, .stat-card .elementor-counter-title, .stat-card .elementor-counter-number-suffix::after { color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; -webkit-text-fill-color: inherit !important; transition: none !important; } /* ================================================== WRAPPER DU NOMBRE ================================================== */ /* * Important : * ne pas utiliser display:flex ici. * * inline-block permet au dégradé du parent de couvrir * le nombre, le suffixe et le pseudo-élément m². */ .stat-card .elementor-counter-number-wrapper { display: inline-block !important; width: auto !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; text-align: center !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; } /* Les éléments restent côte à côte */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix { display: inline-block !important; width: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; padding: 0 !important; position: static !important; transform: none !important; vertical-align: baseline; white-space: nowrap !important; overflow: visible !important; } /* Masque uniquement le préfixe vide */ .stat-card .elementor-counter-number-prefix:empty { display: none !important; } /* ================================================== TITRE SOUS LE COMPTEUR ================================================== */ .stat-card .elementor-counter-title { display: block !important; width: 100% !important; text-align: center !important; overflow: visible !important; } /* ================================================== SUFFIXE CLASSIQUE Exemple : 15 Ans ================================================== */ .stat-card .elementor-counter-number-suffix { font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; /* * vertical-align remplace position/top. * Le suffixe reste inclus dans le dégradé du parent. */ vertical-align: 0.55em !important; position: static !important; top: auto !important; } /* ================================================== COMPTEUR SPÉCIAL : 80k m² ================================================== */ /* * Configuration Elementor : * * Nombre : 80 * Suffixe : k * Classe : stat-card suffix-k-m2 */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix, .stat-card .suffix-k-m2 .elementor-counter-number-suffix { display: inline-block !important; font-size: 1em !important; font-weight: inherit !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: baseline !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== AJOUT DE m² ================================================== */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { content: "m²" !important; display: inline-block !important; margin-left: 0em !important; padding: 0 !important; font-size: 0.32em !important; font-weight: 400 !important; line-height: 1 !important; /* * Important : * ne pas utiliser position: relative ni top. * vertical-align garde m² dans la zone du dégradé. */ position: static !important; top: auto !important; vertical-align: super !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; transition: none !important; } /* ================================================== SUFFIXE « Ans » ================================================== */ /* * Configuration Elementor : * * Suffixe : Ans * Classe : stat-card suffix-ans */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { display: inline-block !important; font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: 0.55em !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== ACCESSIBILITÉ ================================================== */ @media (prefers-reduced-motion: reduce) { .stat-card, .stat-card .elementor-counter, .stat-card .elementor-widget-image .elementor-widget-container::after, .stat-card .stat-media::after { transition: none !important; } .stat-card:hover { transform: none !important; } } /* ================================================== AJUSTEMENTS D’ESPACEMENT ================================================== */ /* Rapproche le préfixe du nombre : +300 */ .stat-card .elementor-counter-number-prefix { margin-right: -0em !important; } /* Rapproche les suffixes classiques du nombre */ .stat-card .elementor-counter-number-suffix { margin-left: 0em !important; } /* ================================================== AJUSTEMENTS FINAUX DES SUFFIXES ================================================== */ /* m² : plus proche du k et nettement plus bas */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { margin-left: 0.08em !important; vertical-align: -0em !important; } /* Ans : plus proche du nombre et légèrement plus bas */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { margin-left: 0em !important; vertical-align: 0.25em !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-f8ce282 *//* ================================================== CARTE STATISTIQUE — CONFIGURATION GÉNÉRALE ================================================== */ .stat-card { --stat-color-default: #393624c9; --stat-hover-start: #e2e0d4; --stat-hover-end: #e2e0d44d; --stat-gradient: linear-gradient( 90deg, var(--stat-color-default) 0%, var(--stat-color-default) 50%, var(--stat-hover-start) 50%, var(--stat-hover-end) 100% ); --stat-background-position: 0%; /* * Voile noir affiché au survol, posé sur l'image. * * --stat-veil-opacity : densité maximale, atteinte en bas. * --stat-veil-height : hauteur à laquelle le voile disparaît. * --stat-image-radius : à aligner sur l'arrondi réglé dans Elementor. */ --stat-veil-opacity: 0.65; --stat-veil-height: 70%; --stat-image-radius: 16px; position: relative; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* ================================================== SURVOL ET FOCUS ================================================== */ .stat-card:hover, .stat-card:focus-within { --stat-background-position: 100%; } .stat-card:hover { transform: translateY(-4px); } /* ================================================== CONTENEUR DE L'IMAGE ================================================== */ /* * L'arrondi et le rognage sont portés par le conteneur, * pas par le voile. * * Conséquence : le dégradé épouse exactement la forme * de l'image, quel que soit le rayon appliqué. * * line-height: 0 supprime l'espace parasite sous une * image restée en display inline. */ .stat-card .elementor-widget-image .elementor-widget-container, .stat-card .stat-media { position: relative; display: block; overflow: hidden; border-radius: var(--stat-image-radius); line-height: 0; } /* L'image remplit son conteneur et suit son arrondi */ .stat-card .elementor-widget-image img, .stat-card .stat-media img { display: block; width: 100%; height: auto; border-radius: inherit; } /* ================================================== VOILE NOIR AU SURVOL Opaque en bas, transparent en haut ================================================== */ /* * Le voile est un pseudo-élément du conteneur d'image. * Il ne peut pas être posé sur le compteur, dont le * background sert déjà au background-clip: text. * * L'arrêt intermédiaire à 35 % adoucit la courbe : * un dégradé linéaire pur paraît coupé à l'œil. */ .stat-card .elementor-widget-image .elementor-widget-container::after, .stat-card .stat-media::after { content: ""; position: absolute; inset: 0; z-index: 1; background-image: linear-gradient( to top, rgba(0, 0, 0, var(--stat-veil-opacity)) 0%, rgba(0, 0, 0, calc(var(--stat-veil-opacity) * 0.55)) 35%, rgba(0, 0, 0, 0) var(--stat-veil-height) ); opacity: 0; pointer-events: none; border-radius: inherit; transition: opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1); } .stat-card:hover .elementor-widget-image .elementor-widget-container::after, .stat-card:focus-within .elementor-widget-image .elementor-widget-container::after, .stat-card:hover .stat-media::after, .stat-card:focus-within .stat-media::after { opacity: 1; } /* ================================================== DÉGRADÉ UNIQUE SUR TOUT LE COMPTEUR ================================================== */ /* * Le dégradé est appliqué uniquement ici. * * Il couvre : * - le nombre ; * - le préfixe ; * - le suffixe ; * - le sous-suffixe m² ; * - le titre. */ .stat-card .elementor-counter { color: transparent !important; background-image: var(--stat-gradient) !important; background-size: 200% 100% !important; background-position: var(--stat-background-position) 50% !important; background-repeat: no-repeat !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; text-align: center !important; overflow: visible !important; transition: background-position 0.65s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* * Le compteur reste au-dessus du voile s'il chevauche * l'image dans la mise en page. */ .stat-card .elementor-widget-counter { position: relative; z-index: 2; } /* ================================================== ÉLÉMENTS INTERNES ================================================== */ /* * Les enfants héritent de la transparence du parent. * Aucun enfant ne possède son propre dégradé. */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix, .stat-card .elementor-counter-title, .stat-card .elementor-counter-number-suffix::after { color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; -webkit-text-fill-color: inherit !important; transition: none !important; } /* ================================================== WRAPPER DU NOMBRE ================================================== */ /* * Important : * ne pas utiliser display:flex ici. * * inline-block permet au dégradé du parent de couvrir * le nombre, le suffixe et le pseudo-élément m². */ .stat-card .elementor-counter-number-wrapper { display: inline-block !important; width: auto !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; text-align: center !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; } /* Les éléments restent côte à côte */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix { display: inline-block !important; width: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; padding: 0 !important; position: static !important; transform: none !important; vertical-align: baseline; white-space: nowrap !important; overflow: visible !important; } /* Masque uniquement le préfixe vide */ .stat-card .elementor-counter-number-prefix:empty { display: none !important; } /* ================================================== TITRE SOUS LE COMPTEUR ================================================== */ .stat-card .elementor-counter-title { display: block !important; width: 100% !important; text-align: center !important; overflow: visible !important; } /* ================================================== SUFFIXE CLASSIQUE Exemple : 15 Ans ================================================== */ .stat-card .elementor-counter-number-suffix { font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; /* * vertical-align remplace position/top. * Le suffixe reste inclus dans le dégradé du parent. */ vertical-align: 0.55em !important; position: static !important; top: auto !important; } /* ================================================== COMPTEUR SPÉCIAL : 80k m² ================================================== */ /* * Configuration Elementor : * * Nombre : 80 * Suffixe : k * Classe : stat-card suffix-k-m2 */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix, .stat-card .suffix-k-m2 .elementor-counter-number-suffix { display: inline-block !important; font-size: 1em !important; font-weight: inherit !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: baseline !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== AJOUT DE m² ================================================== */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { content: "m²" !important; display: inline-block !important; margin-left: 0em !important; padding: 0 !important; font-size: 0.32em !important; font-weight: 400 !important; line-height: 1 !important; /* * Important : * ne pas utiliser position: relative ni top. * vertical-align garde m² dans la zone du dégradé. */ position: static !important; top: auto !important; vertical-align: super !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; transition: none !important; } /* ================================================== SUFFIXE « Ans » ================================================== */ /* * Configuration Elementor : * * Suffixe : Ans * Classe : stat-card suffix-ans */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { display: inline-block !important; font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: 0.55em !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== ACCESSIBILITÉ ================================================== */ @media (prefers-reduced-motion: reduce) { .stat-card, .stat-card .elementor-counter, .stat-card .elementor-widget-image .elementor-widget-container::after, .stat-card .stat-media::after { transition: none !important; } .stat-card:hover { transform: none !important; } } /* ================================================== AJUSTEMENTS D’ESPACEMENT ================================================== */ /* Rapproche le préfixe du nombre : +300 */ .stat-card .elementor-counter-number-prefix { margin-right: -0em !important; } /* Rapproche les suffixes classiques du nombre */ .stat-card .elementor-counter-number-suffix { margin-left: 0em !important; } /* ================================================== AJUSTEMENTS FINAUX DES SUFFIXES ================================================== */ /* m² : plus proche du k et nettement plus bas */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { margin-left: 0.08em !important; vertical-align: -0em !important; } /* Ans : plus proche du nombre et légèrement plus bas */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { margin-left: 0em !important; vertical-align: 0.25em !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-3300b1b *//* ================================================== CARTE STATISTIQUE — CONFIGURATION GÉNÉRALE ================================================== */ .stat-card { --stat-color-default: #393624c9; --stat-hover-start: #e2e0d4; --stat-hover-end: #e2e0d44d; --stat-gradient: linear-gradient( 90deg, var(--stat-color-default) 0%, var(--stat-color-default) 50%, var(--stat-hover-start) 50%, var(--stat-hover-end) 100% ); --stat-background-position: 0%; position: relative; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* ================================================== SURVOL ET FOCUS ================================================== */ .stat-card:hover, .stat-card:focus-within { --stat-background-position: 100%; } .stat-card:hover { transform: translateY(-4px); } /* ================================================== DÉGRADÉ UNIQUE SUR TOUT LE COMPTEUR ================================================== */ /* * Le dégradé est appliqué uniquement ici. * * Il couvre : * - le nombre ; * - le préfixe ; * - le suffixe ; * - le sous-suffixe m² ; * - le titre. */ .stat-card .elementor-counter { color: transparent !important; background-image: var(--stat-gradient) !important; background-size: 200% 100% !important; background-position: var(--stat-background-position) 50% !important; background-repeat: no-repeat !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; text-align: center !important; overflow: visible !important; transition: background-position 0.65s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* ================================================== ÉLÉMENTS INTERNES ================================================== */ /* * Les enfants héritent de la transparence du parent. * Aucun enfant ne possède son propre dégradé. */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix, .stat-card .elementor-counter-title, .stat-card .elementor-counter-number-suffix::after { color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; -webkit-text-fill-color: inherit !important; transition: none !important; } /* ================================================== WRAPPER DU NOMBRE ================================================== */ /* * Important : * ne pas utiliser display:flex ici. * * inline-block permet au dégradé du parent de couvrir * le nombre, le suffixe et le pseudo-élément m². */ .stat-card .elementor-counter-number-wrapper { display: inline-block !important; width: auto !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; text-align: center !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; } /* Les éléments restent côte à côte */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix { display: inline-block !important; width: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; padding: 0 !important; position: static !important; transform: none !important; vertical-align: baseline; white-space: nowrap !important; overflow: visible !important; } /* Masque uniquement le préfixe vide */ .stat-card .elementor-counter-number-prefix:empty { display: none !important; } /* ================================================== TITRE SOUS LE COMPTEUR ================================================== */ .stat-card .elementor-counter-title { display: block !important; width: 100% !important; text-align: center !important; overflow: visible !important; } /* ================================================== SUFFIXE CLASSIQUE Exemple : 15 Ans ================================================== */ .stat-card .elementor-counter-number-suffix { font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; /* * vertical-align remplace position/top. * Le suffixe reste inclus dans le dégradé du parent. */ vertical-align: 0.55em !important; position: static !important; top: auto !important; } /* ================================================== COMPTEUR SPÉCIAL : 80k m² ================================================== */ /* * Configuration Elementor : * * Nombre : 80 * Suffixe : k * Classe : stat-card suffix-k-m2 */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix, .stat-card .suffix-k-m2 .elementor-counter-number-suffix { display: inline-block !important; font-size: 1em !important; font-weight: inherit !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: baseline !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== AJOUT DE m² ================================================== */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { content: "m²" !important; display: inline-block !important; margin-left: 0em !important; padding: 0 !important; font-size: 0.32em !important; font-weight: 400 !important; line-height: 1 !important; /* * Important : * ne pas utiliser position: relative ni top. * vertical-align garde m² dans la zone du dégradé. */ position: static !important; top: auto !important; vertical-align: super !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; transition: none !important; } /* ================================================== SUFFIXE « Ans » ================================================== */ /* * Configuration Elementor : * * Suffixe : Ans * Classe : stat-card suffix-ans */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { display: inline-block !important; font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: 0.55em !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== ACCESSIBILITÉ ================================================== */ @media (prefers-reduced-motion: reduce) { .stat-card, .stat-card .elementor-counter { transition: none !important; } .stat-card:hover { transform: none !important; } } /* ================================================== AJUSTEMENTS D’ESPACEMENT ================================================== */ /* Rapproche le préfixe du nombre : +300 */ .stat-card .elementor-counter-number-prefix { margin-right: -0em !important; } /* Rapproche les suffixes classiques du nombre */ .stat-card .elementor-counter-number-suffix { margin-left: 0em !important; } /* ================================================== AJUSTEMENTS FINAUX DES SUFFIXES ================================================== */ /* m² : plus proche du k et nettement plus bas */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { margin-left: 0.08em !important; vertical-align: -0em !important; } /* Ans : plus proche du nombre et légèrement plus bas */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { margin-left: 0em !important; vertical-align: 0.25em !important; }/* End custom CSS */ /* Start custom CSS for nested-carousel, class: .elementor-element-ffbb72e *//* Espace sous les cartes pour placer les flèches */ .elementor-30 .elementor-element.elementor-element-ffbb72e .swiper { padding-bottom: 60px; } /* Style général des deux flèches */ .elementor-30 .elementor-element.elementor-element-ffbb72e .elementor-swiper-button, .elementor-30 .elementor-element.elementor-element-ffbb72e .swiper-button-prev, .elementor-30 .elementor-element.elementor-element-ffbb72e .swiper-button-next { top: auto !important; bottom: 12px !important; width: 32px !important; height: 24px !important; margin: 0 !important; background: transparent !important; border: none !important; border-radius: 0 !important; color: transparent !important; box-shadow: none !important; transform: none !important; z-index: 10; } /* Masque les icônes Elementor d’origine */ .elementor-30 .elementor-element.elementor-element-ffbb72e .elementor-swiper-button i, .elementor-30 .elementor-element.elementor-element-ffbb72e .elementor-swiper-button svg { display: none !important; } /* Position en bas à gauche */ .elementor-30 .elementor-element.elementor-element-ffbb72e .elementor-swiper-button-prev, .elementor-30 .elementor-element.elementor-element-ffbb72e .swiper-button-prev { left: 0 !important; right: auto !important; } .elementor-30 .elementor-element.elementor-element-ffbb72e .elementor-swiper-button-next, .elementor-30 .elementor-element.elementor-element-ffbb72e .swiper-button-next { left: 68px !important; right: auto !important; } /* Trait horizontal */ .elementor-30 .elementor-element.elementor-element-ffbb72e .elementor-swiper-button-prev::before, .elementor-30 .elementor-element.elementor-element-ffbb72e .elementor-swiper-button-next::before, .elementor-30 .elementor-element.elementor-element-ffbb72e .swiper-button-prev::before, .elementor-30 .elementor-element.elementor-element-ffbb72e .swiper-button-next::before { content: "" !important; display: block !important; position: absolute; top: 50%; width: 24px; height: 1.5px; background-color: #77755F; transform: translateY(-50%); } /* Trait de la flèche gauche */ .elementor-30 .elementor-element.elementor-element-ffbb72e .elementor-swiper-button-prev::before, .elementor-30 .elementor-element.elementor-element-ffbb72e .swiper-button-prev::before { left: 4px; } /* Trait de la flèche droite */ .elementor-30 .elementor-element.elementor-element-ffbb72e .elementor-swiper-button-next::before, .elementor-30 .elementor-element.elementor-element-ffbb72e .swiper-button-next::before { right: 4px; } /* Pointe des flèches */ .elementor-30 .elementor-element.elementor-element-ffbb72e .elementor-swiper-button-prev::after, .elementor-30 .elementor-element.elementor-element-ffbb72e .elementor-swiper-button-next::after, .elementor-30 .elementor-element.elementor-element-ffbb72e .swiper-button-prev::after, .elementor-30 .elementor-element.elementor-element-ffbb72e .swiper-button-next::after { content: "" !important; display: block !important; position: absolute; top: 50%; width: 9px; height: 9px; border: solid #77755F; border-width: 0 1.5px 1.5px 0; } /* Pointe gauche */ .elementor-30 .elementor-element.elementor-element-ffbb72e .elementor-swiper-button-prev::after, .elementor-30 .elementor-element.elementor-element-ffbb72e .swiper-button-prev::after { left: 4px; transform: translateY(-50%) rotate(135deg); } /* Pointe droite */ .elementor-30 .elementor-element.elementor-element-ffbb72e .elementor-swiper-button-next::after, .elementor-30 .elementor-element.elementor-element-ffbb72e .swiper-button-next::after { right: 4px; transform: translateY(-50%) rotate(-45deg); } /* Animation au survol */ .elementor-30 .elementor-element.elementor-element-ffbb72e .elementor-swiper-button-prev, .elementor-30 .elementor-element.elementor-element-ffbb72e .elementor-swiper-button-next, .elementor-30 .elementor-element.elementor-element-ffbb72e .swiper-button-prev, .elementor-30 .elementor-element.elementor-element-ffbb72e .swiper-button-next { transition: opacity 0.25s ease !important; } .elementor-30 .elementor-element.elementor-element-ffbb72e .elementor-swiper-button-prev:hover, .elementor-30 .elementor-element.elementor-element-ffbb72e .elementor-swiper-button-next:hover, .elementor-30 .elementor-element.elementor-element-ffbb72e .swiper-button-prev:hover, .elementor-30 .elementor-element.elementor-element-ffbb72e .swiper-button-next:hover { opacity: 0.55; } /* ---- MOBILE ---- */ @media (max-width: 767px) { .elementor-30 .elementor-element.elementor-element-ffbb72e .elementor-swiper-button-prev, .elementor-30 .elementor-element.elementor-element-ffbb72e .swiper-button-prev { left: 10% !important; right: auto !important; } .elementor-30 .elementor-element.elementor-element-ffbb72e .elementor-swiper-button-next, .elementor-30 .elementor-element.elementor-element-ffbb72e .swiper-button-next { left: 80% !important; right: 0 !important; } } /* Nom + poste masqués par défaut */ .elementor-30 .elementor-element.elementor-element-ffbb72e .team-name, .elementor-30 .elementor-element.elementor-element-ffbb72e .team-role { opacity: 0; transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1); } /* Affichage uniquement sur la slide survolée */ .elementor-30 .elementor-element.elementor-element-ffbb72e .swiper-slide:hover .team-name, .elementor-30 .elementor-element.elementor-element-ffbb72e .swiper-slide:hover .team-role, .elementor-30 .elementor-element.elementor-element-ffbb72e .swiper-slide:focus-within .team-name, .elementor-30 .elementor-element.elementor-element-ffbb72e .swiper-slide:focus-within .team-role { opacity: 1; } /* Mobile : pas de survol → toujours visible */ @media (max-width: 767px) { .elementor-30 .elementor-element.elementor-element-ffbb72e .team-name, .elementor-30 .elementor-element.elementor-element-ffbb72e .team-role { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .elementor-30 .elementor-element.elementor-element-ffbb72e .team-name, .elementor-30 .elementor-element.elementor-element-ffbb72e .team-role { transition: none !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-2909317 */.stats-carousel-wrapper { overflow: hidden; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-1173cfd *//* ================================= CONTENEUR GLOBAL ================================= */ .services-links { --number-color: #7D7B5A; --text-color: rgba(57, 54, 36, 0.79); --border-color: rgba(57, 54, 36, 0.08); --inactive-opacity: 0.16; width: 100%; } /* ================================= LIGNE CLIQUABLE ================================= */ .services-links > .service-link { display: grid !important; grid-template-columns: 90px minmax(0, 1fr) 56px; align-items: start; column-gap: 0; width: 100%; min-height: 96px; background: transparent !important; border-bottom: 1px solid var(--border-color); text-decoration: none !important; cursor: pointer; } /* ================================= DIMENSIONS DES ÉLÉMENTS ================================= */ .services-links .service-number, .services-links .service-copy { width: auto !important; max-width: none !important; } /* ================================= GESTION DES ÉTATS ================================= */ /* Tous les éléments sont pâles par défaut. */ .services-links > .service-link .service-number, .services-links > .service-link .service-copy, .services-links > .service-link > .elementor-element:last-child img { opacity: var(--inactive-opacity) !important; transition: opacity 0.35s ease, transform 0.35s ease; } /* La ligne "service-default" est active tant qu’aucune autre ligne n’est survolée. */ .services-links:not( :has(> .service-link:not(.service-default):hover) ):not( :has(> .service-link:not(.service-default):focus-within) ) > .service-link.service-default .service-number, .services-links:not( :has(> .service-link:not(.service-default):hover) ):not( :has(> .service-link:not(.service-default):focus-within) ) > .service-link.service-default .service-copy, .services-links:not( :has(> .service-link:not(.service-default):hover) ):not( :has(> .service-link:not(.service-default):focus-within) ) > .service-link.service-default > .elementor-element:last-child img { opacity: 1 !important; } /* La ligne réellement survolée devient active. Cela fonctionne aussi pour la première ligne. */ .services-links > .service-link:hover .service-number, .services-links > .service-link:hover .service-copy, .services-links > .service-link:hover > .elementor-element:last-child img, .services-links > .service-link:focus-within .service-number, .services-links > .service-link:focus-within .service-copy, .services-links > .service-link:focus-within > .elementor-element:last-child img { opacity: 1 !important; } /* ================================= ACCESSIBILITÉ CLAVIER ================================= */ .services-links > .service-link:focus-visible { outline: 1px solid var(--number-color); outline-offset: 4px; } /* ================================= NUMÉRO ================================= */ .services-links .service-number { grid-column: 1; align-self: start; margin: 0 !important; padding-top: 5px; } .services-links .service-number, .services-links .service-number p, .services-links .service-number .elementor-heading-title, .services-links .service-number .elementor-widget-container { margin: 0 !important; color: var(--number-color) !important; font-family: "PP Fragment", Georgia, serif !important; font-size: 24px !important; font-style: normal !important; font-weight: 400 !important; line-height: 1 !important; letter-spacing: 0 !important; } /* ================================= CONTENEUR TITRE + DESCRIPTION ================================= */ .services-links .service-copy { grid-column: 2; display: flex !important; flex-direction: column; align-items: flex-start; gap: 7px; min-width: 0; } .services-links .service-title, .services-links .service-description, .services-links .service-title .elementor-widget-container, .services-links .service-description .elementor-widget-container { margin: 0 !important; padding: 0 !important; } /* ================================= TITRE ================================= */ .services-links .service-title, .services-links .service-title p, .services-links .service-title .elementor-heading-title { margin: 0 !important; color: var(--text-color) !important; font-family: "PP Fragment", Georgia, serif !important; font-size: 36px !important; font-style: italic !important; font-weight: 300 !important; line-height: 1 !important; letter-spacing: 0 !important; } /* ================================= DESCRIPTION ================================= */ .services-links .service-description, .services-links .service-description p { margin: 0 !important; color: var(--text-color) !important; font-family: "Neue Montreal", Arial, sans-serif !important; font-size: 15px !important; font-style: normal !important; font-weight: 400 !important; line-height: 1 !important; letter-spacing: 0 !important; } /* ================================= FLÈCHE ================================= */ /* HTML utilisé : */ .services-links .service-arrow { position: relative; grid-column: 3; justify-self: end; align-self: start; display: block; width: 21px; height: 21px; margin-top: 3px; color: var(--number-color); } /* Angle supérieur droit */ .services-links .service-arrow::before { content: ""; position: absolute; top: 0; right: 0; width: 21px; height: 21px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; } /* Trait diagonal */ .services-links .service-arrow::after { content: ""; position: absolute; top: 1px; right: 0; width: 18px; height: 1px; background: currentColor; transform: rotate(-45deg); transform-origin: right center; } /* ================================= RESPONSIVE ================================= */ @media (max-width: 767px) { .services-links > .service-link { grid-template-columns: 48px minmax(0, 1fr) 36px; min-height: 82px; } .services-links .service-title, .services-links .service-title p, .services-links .service-title .elementor-heading-title { font-size: 28px !important; } .services-links .service-number, .services-links .service-number p, .services-links .service-number .elementor-heading-title { font-size: 20px !important; } .services-links .service-description, .services-links .service-description p { font-size: 14px !important; line-height: 1.15 !important; } } /* ================================= SÉPARATEURS ENTRE LES LIGNES ================================= */ .services-links .service-link { position: relative; border-bottom: none !important; } .services-links .service-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 1px; background-color: rgba(57, 54, 36, 0.10); pointer-events: none; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-50ccd95 *//* ================================================== CARTE STATISTIQUE — CONFIGURATION GÉNÉRALE ================================================== */ .stat-card { --stat-color-default: #393624c9; --stat-hover-start: #e2e0d4; --stat-hover-end: #e2e0d44d; --stat-gradient: linear-gradient( 90deg, var(--stat-color-default) 0%, var(--stat-color-default) 50%, var(--stat-hover-start) 50%, var(--stat-hover-end) 100% ); --stat-background-position: 0%; position: relative; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* ================================================== SURVOL ET FOCUS ================================================== */ .stat-card:hover, .stat-card:focus-within { --stat-background-position: 100%; } .stat-card:hover { transform: translateY(-4px); } /* ================================================== DÉGRADÉ UNIQUE SUR TOUT LE COMPTEUR ================================================== */ /* * Le dégradé est appliqué uniquement ici. * * Il couvre : * - le nombre ; * - le préfixe ; * - le suffixe ; * - le sous-suffixe m² ; * - le titre. */ .stat-card .elementor-counter { color: transparent !important; background-image: var(--stat-gradient) !important; background-size: 200% 100% !important; background-position: var(--stat-background-position) 50% !important; background-repeat: no-repeat !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; text-align: center !important; overflow: visible !important; transition: background-position 0.65s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* ================================================== ÉLÉMENTS INTERNES ================================================== */ /* * Les enfants héritent de la transparence du parent. * Aucun enfant ne possède son propre dégradé. */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix, .stat-card .elementor-counter-title, .stat-card .elementor-counter-number-suffix::after { color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; -webkit-text-fill-color: inherit !important; transition: none !important; } /* ================================================== WRAPPER DU NOMBRE ================================================== */ /* * Important : * ne pas utiliser display:flex ici. * * inline-block permet au dégradé du parent de couvrir * le nombre, le suffixe et le pseudo-élément m². */ .stat-card .elementor-counter-number-wrapper { display: inline-block !important; width: auto !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; text-align: center !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; } /* Les éléments restent côte à côte */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix { display: inline-block !important; width: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; padding: 0 !important; position: static !important; transform: none !important; vertical-align: baseline; white-space: nowrap !important; overflow: visible !important; } /* Masque uniquement le préfixe vide */ .stat-card .elementor-counter-number-prefix:empty { display: none !important; } /* ================================================== TITRE SOUS LE COMPTEUR ================================================== */ .stat-card .elementor-counter-title { display: block !important; width: 100% !important; text-align: center !important; overflow: visible !important; } /* ================================================== SUFFIXE CLASSIQUE Exemple : 15 Ans ================================================== */ .stat-card .elementor-counter-number-suffix { font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; /* * vertical-align remplace position/top. * Le suffixe reste inclus dans le dégradé du parent. */ vertical-align: 0.55em !important; position: static !important; top: auto !important; } /* ================================================== COMPTEUR SPÉCIAL : 80k m² ================================================== */ /* * Configuration Elementor : * * Nombre : 80 * Suffixe : k * Classe : stat-card suffix-k-m2 */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix, .stat-card .suffix-k-m2 .elementor-counter-number-suffix { display: inline-block !important; font-size: 1em !important; font-weight: inherit !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: baseline !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== AJOUT DE m² ================================================== */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { content: "m²" !important; display: inline-block !important; margin-left: 0em !important; padding: 0 !important; font-size: 0.32em !important; font-weight: 400 !important; line-height: 1 !important; /* * Important : * ne pas utiliser position: relative ni top. * vertical-align garde m² dans la zone du dégradé. */ position: static !important; top: auto !important; vertical-align: super !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; transition: none !important; } /* ================================================== SUFFIXE « Ans » ================================================== */ /* * Configuration Elementor : * * Suffixe : Ans * Classe : stat-card suffix-ans */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { display: inline-block !important; font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: 0.55em !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== ACCESSIBILITÉ ================================================== */ @media (prefers-reduced-motion: reduce) { .stat-card, .stat-card .elementor-counter { transition: none !important; } .stat-card:hover { transform: none !important; } } /* ================================================== AJUSTEMENTS D’ESPACEMENT ================================================== */ /* Rapproche le préfixe du nombre : +300 */ .stat-card .elementor-counter-number-prefix { margin-right: -0em !important; } /* Rapproche les suffixes classiques du nombre */ .stat-card .elementor-counter-number-suffix { margin-left: 0em !important; } /* ================================================== AJUSTEMENTS FINAUX DES SUFFIXES ================================================== */ /* m² : plus proche du k et nettement plus bas */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { margin-left: 0.08em !important; vertical-align: -0em !important; } /* Ans : plus proche du nombre et légèrement plus bas */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { margin-left: 0em !important; vertical-align: 0.25em !important; } /* ---- CARTE ---- */ .elementor-30 .elementor-element.elementor-element-50ccd95 .card-item { background-color: #EDEDE7; transition: background-color .35s ease; } .elementor-30 .elementor-element.elementor-element-50ccd95 .card-item:hover { background-color: #5F5D4C; } /* Titre + texte */ .elementor-30 .elementor-element.elementor-element-50ccd95 .card-item .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-50ccd95 .card-item p { transition: color .35s ease; } .elementor-30 .elementor-element.elementor-element-50ccd95 .card-item:hover .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-50ccd95 .card-item:hover p { color: #EDEDE7 !important; } /* ---- CARRÉ DE L'ICÔNE ---- */ .elementor-30 .elementor-element.elementor-element-50ccd95 .card-item .icone-wrap { position: relative; background-color: #DDDDD5; transition: background-color .35s ease; } .elementor-30 .elementor-element.elementor-element-50ccd95 .card-item:hover .icone-wrap { background-color: #3E3D30; } /* ---- SWAP DES 2 LOGOS ---- */ .elementor-30 .elementor-element.elementor-element-50ccd95 .icone-hover { display: none !important; } .elementor-30 .elementor-element.elementor-element-50ccd95:hover .icone-normal { display: none !important; } .elementor-30 .elementor-element.elementor-element-50ccd95:hover .icone-hover { display: block !important; } /* ---- TITRE + TEXTE ---- */ .elementor-30 .elementor-element.elementor-element-50ccd95 .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-50ccd95 .elementor-widget-text-editor, .elementor-30 .elementor-element.elementor-element-50ccd95 .elementor-widget-text-editor p { transition: color .35s ease; } .elementor-30 .elementor-element.elementor-element-50ccd95:hover .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-50ccd95:hover .elementor-widget-text-editor, .elementor-30 .elementor-element.elementor-element-50ccd95:hover .elementor-widget-text-editor p { color: #EDEDE7 !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-eabea42 *//* ================================================== CARTE STATISTIQUE — CONFIGURATION GÉNÉRALE ================================================== */ .stat-card { --stat-color-default: #393624c9; --stat-hover-start: #e2e0d4; --stat-hover-end: #e2e0d44d; --stat-gradient: linear-gradient( 90deg, var(--stat-color-default) 0%, var(--stat-color-default) 50%, var(--stat-hover-start) 50%, var(--stat-hover-end) 100% ); --stat-background-position: 0%; position: relative; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* ================================================== SURVOL ET FOCUS ================================================== */ .stat-card:hover, .stat-card:focus-within { --stat-background-position: 100%; } .stat-card:hover { transform: translateY(-4px); } /* ================================================== DÉGRADÉ UNIQUE SUR TOUT LE COMPTEUR ================================================== */ /* * Le dégradé est appliqué uniquement ici. * * Il couvre : * - le nombre ; * - le préfixe ; * - le suffixe ; * - le sous-suffixe m² ; * - le titre. */ .stat-card .elementor-counter { color: transparent !important; background-image: var(--stat-gradient) !important; background-size: 200% 100% !important; background-position: var(--stat-background-position) 50% !important; background-repeat: no-repeat !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; text-align: center !important; overflow: visible !important; transition: background-position 0.65s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* ================================================== ÉLÉMENTS INTERNES ================================================== */ /* * Les enfants héritent de la transparence du parent. * Aucun enfant ne possède son propre dégradé. */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix, .stat-card .elementor-counter-title, .stat-card .elementor-counter-number-suffix::after { color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; -webkit-text-fill-color: inherit !important; transition: none !important; } /* ================================================== WRAPPER DU NOMBRE ================================================== */ /* * Important : * ne pas utiliser display:flex ici. * * inline-block permet au dégradé du parent de couvrir * le nombre, le suffixe et le pseudo-élément m². */ .stat-card .elementor-counter-number-wrapper { display: inline-block !important; width: auto !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; text-align: center !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; } /* Les éléments restent côte à côte */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix { display: inline-block !important; width: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; padding: 0 !important; position: static !important; transform: none !important; vertical-align: baseline; white-space: nowrap !important; overflow: visible !important; } /* Masque uniquement le préfixe vide */ .stat-card .elementor-counter-number-prefix:empty { display: none !important; } /* ================================================== TITRE SOUS LE COMPTEUR ================================================== */ .stat-card .elementor-counter-title { display: block !important; width: 100% !important; text-align: center !important; overflow: visible !important; } /* ================================================== SUFFIXE CLASSIQUE Exemple : 15 Ans ================================================== */ .stat-card .elementor-counter-number-suffix { font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; /* * vertical-align remplace position/top. * Le suffixe reste inclus dans le dégradé du parent. */ vertical-align: 0.55em !important; position: static !important; top: auto !important; } /* ================================================== COMPTEUR SPÉCIAL : 80k m² ================================================== */ /* * Configuration Elementor : * * Nombre : 80 * Suffixe : k * Classe : stat-card suffix-k-m2 */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix, .stat-card .suffix-k-m2 .elementor-counter-number-suffix { display: inline-block !important; font-size: 1em !important; font-weight: inherit !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: baseline !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== AJOUT DE m² ================================================== */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { content: "m²" !important; display: inline-block !important; margin-left: 0em !important; padding: 0 !important; font-size: 0.32em !important; font-weight: 400 !important; line-height: 1 !important; /* * Important : * ne pas utiliser position: relative ni top. * vertical-align garde m² dans la zone du dégradé. */ position: static !important; top: auto !important; vertical-align: super !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; transition: none !important; } /* ================================================== SUFFIXE « Ans » ================================================== */ /* * Configuration Elementor : * * Suffixe : Ans * Classe : stat-card suffix-ans */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { display: inline-block !important; font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: 0.55em !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== ACCESSIBILITÉ ================================================== */ @media (prefers-reduced-motion: reduce) { .stat-card, .stat-card .elementor-counter { transition: none !important; } .stat-card:hover { transform: none !important; } } /* ================================================== AJUSTEMENTS D’ESPACEMENT ================================================== */ /* Rapproche le préfixe du nombre : +300 */ .stat-card .elementor-counter-number-prefix { margin-right: -0em !important; } /* Rapproche les suffixes classiques du nombre */ .stat-card .elementor-counter-number-suffix { margin-left: 0em !important; } /* ================================================== AJUSTEMENTS FINAUX DES SUFFIXES ================================================== */ /* m² : plus proche du k et nettement plus bas */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { margin-left: 0.08em !important; vertical-align: -0em !important; } /* Ans : plus proche du nombre et légèrement plus bas */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { margin-left: 0em !important; vertical-align: 0.25em !important; } /* ---- CARTE ---- */ .elementor-30 .elementor-element.elementor-element-eabea42 .card-item { background-color: #EDEDE7; transition: background-color .35s ease; } .elementor-30 .elementor-element.elementor-element-eabea42 .card-item:hover { background-color: #5F5D4C; } /* Titre + texte */ .elementor-30 .elementor-element.elementor-element-eabea42 .card-item .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-eabea42 .card-item p { transition: color .35s ease; } .elementor-30 .elementor-element.elementor-element-eabea42 .card-item:hover .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-eabea42 .card-item:hover p { color: #EDEDE7 !important; } /* ---- CARRÉ DE L'ICÔNE ---- */ .elementor-30 .elementor-element.elementor-element-eabea42 .card-item .icone-wrap { position: relative; background-color: #DDDDD5; transition: background-color .35s ease; } .elementor-30 .elementor-element.elementor-element-eabea42 .card-item:hover .icone-wrap { background-color: #3E3D30; } /* ---- SWAP DES 2 LOGOS ---- */ .elementor-30 .elementor-element.elementor-element-eabea42 .icone-hover { display: none !important; } .elementor-30 .elementor-element.elementor-element-eabea42:hover .icone-normal { display: none !important; } .elementor-30 .elementor-element.elementor-element-eabea42:hover .icone-hover { display: block !important; } /* ---- TITRE + TEXTE ---- */ .elementor-30 .elementor-element.elementor-element-eabea42 .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-eabea42 .elementor-widget-text-editor, .elementor-30 .elementor-element.elementor-element-eabea42 .elementor-widget-text-editor p { transition: color .35s ease; } .elementor-30 .elementor-element.elementor-element-eabea42:hover .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-eabea42:hover .elementor-widget-text-editor, .elementor-30 .elementor-element.elementor-element-eabea42:hover .elementor-widget-text-editor p { color: #EDEDE7 !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-f3dce4d *//* ================================================== CARTE STATISTIQUE — CONFIGURATION GÉNÉRALE ================================================== */ .stat-card { --stat-color-default: #393624c9; --stat-hover-start: #e2e0d4; --stat-hover-end: #e2e0d44d; --stat-gradient: linear-gradient( 90deg, var(--stat-color-default) 0%, var(--stat-color-default) 50%, var(--stat-hover-start) 50%, var(--stat-hover-end) 100% ); --stat-background-position: 0%; position: relative; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* ================================================== SURVOL ET FOCUS ================================================== */ .stat-card:hover, .stat-card:focus-within { --stat-background-position: 100%; } .stat-card:hover { transform: translateY(-4px); } /* ================================================== DÉGRADÉ UNIQUE SUR TOUT LE COMPTEUR ================================================== */ /* * Le dégradé est appliqué uniquement ici. * * Il couvre : * - le nombre ; * - le préfixe ; * - le suffixe ; * - le sous-suffixe m² ; * - le titre. */ .stat-card .elementor-counter { color: transparent !important; background-image: var(--stat-gradient) !important; background-size: 200% 100% !important; background-position: var(--stat-background-position) 50% !important; background-repeat: no-repeat !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; text-align: center !important; overflow: visible !important; transition: background-position 0.65s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* ================================================== ÉLÉMENTS INTERNES ================================================== */ /* * Les enfants héritent de la transparence du parent. * Aucun enfant ne possède son propre dégradé. */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix, .stat-card .elementor-counter-title, .stat-card .elementor-counter-number-suffix::after { color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; -webkit-text-fill-color: inherit !important; transition: none !important; } /* ================================================== WRAPPER DU NOMBRE ================================================== */ /* * Important : * ne pas utiliser display:flex ici. * * inline-block permet au dégradé du parent de couvrir * le nombre, le suffixe et le pseudo-élément m². */ .stat-card .elementor-counter-number-wrapper { display: inline-block !important; width: auto !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; text-align: center !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; } /* Les éléments restent côte à côte */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix { display: inline-block !important; width: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; padding: 0 !important; position: static !important; transform: none !important; vertical-align: baseline; white-space: nowrap !important; overflow: visible !important; } /* Masque uniquement le préfixe vide */ .stat-card .elementor-counter-number-prefix:empty { display: none !important; } /* ================================================== TITRE SOUS LE COMPTEUR ================================================== */ .stat-card .elementor-counter-title { display: block !important; width: 100% !important; text-align: center !important; overflow: visible !important; } /* ================================================== SUFFIXE CLASSIQUE Exemple : 15 Ans ================================================== */ .stat-card .elementor-counter-number-suffix { font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; /* * vertical-align remplace position/top. * Le suffixe reste inclus dans le dégradé du parent. */ vertical-align: 0.55em !important; position: static !important; top: auto !important; } /* ================================================== COMPTEUR SPÉCIAL : 80k m² ================================================== */ /* * Configuration Elementor : * * Nombre : 80 * Suffixe : k * Classe : stat-card suffix-k-m2 */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix, .stat-card .suffix-k-m2 .elementor-counter-number-suffix { display: inline-block !important; font-size: 1em !important; font-weight: inherit !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: baseline !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== AJOUT DE m² ================================================== */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { content: "m²" !important; display: inline-block !important; margin-left: 0em !important; padding: 0 !important; font-size: 0.32em !important; font-weight: 400 !important; line-height: 1 !important; /* * Important : * ne pas utiliser position: relative ni top. * vertical-align garde m² dans la zone du dégradé. */ position: static !important; top: auto !important; vertical-align: super !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; transition: none !important; } /* ================================================== SUFFIXE « Ans » ================================================== */ /* * Configuration Elementor : * * Suffixe : Ans * Classe : stat-card suffix-ans */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { display: inline-block !important; font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: 0.55em !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== ACCESSIBILITÉ ================================================== */ @media (prefers-reduced-motion: reduce) { .stat-card, .stat-card .elementor-counter { transition: none !important; } .stat-card:hover { transform: none !important; } } /* ================================================== AJUSTEMENTS D’ESPACEMENT ================================================== */ /* Rapproche le préfixe du nombre : +300 */ .stat-card .elementor-counter-number-prefix { margin-right: -0em !important; } /* Rapproche les suffixes classiques du nombre */ .stat-card .elementor-counter-number-suffix { margin-left: 0em !important; } /* ================================================== AJUSTEMENTS FINAUX DES SUFFIXES ================================================== */ /* m² : plus proche du k et nettement plus bas */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { margin-left: 0.08em !important; vertical-align: -0em !important; } /* Ans : plus proche du nombre et légèrement plus bas */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { margin-left: 0em !important; vertical-align: 0.25em !important; } /* ---- CARTE ---- */ .elementor-30 .elementor-element.elementor-element-f3dce4d .card-item { background-color: #EDEDE7; transition: background-color .35s ease; } .elementor-30 .elementor-element.elementor-element-f3dce4d .card-item:hover { background-color: #5F5D4C; } /* Titre + texte */ .elementor-30 .elementor-element.elementor-element-f3dce4d .card-item .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-f3dce4d .card-item p { transition: color .35s ease; } .elementor-30 .elementor-element.elementor-element-f3dce4d .card-item:hover .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-f3dce4d .card-item:hover p { color: #EDEDE7 !important; } /* ---- CARRÉ DE L'ICÔNE ---- */ .elementor-30 .elementor-element.elementor-element-f3dce4d .card-item .icone-wrap { position: relative; background-color: #DDDDD5; transition: background-color .35s ease; } .elementor-30 .elementor-element.elementor-element-f3dce4d .card-item:hover .icone-wrap { background-color: #3E3D30; } /* ---- SWAP DES 2 LOGOS ---- */ .elementor-30 .elementor-element.elementor-element-f3dce4d .icone-hover { display: none !important; } .elementor-30 .elementor-element.elementor-element-f3dce4d:hover .icone-normal { display: none !important; } .elementor-30 .elementor-element.elementor-element-f3dce4d:hover .icone-hover { display: block !important; } /* ---- TITRE + TEXTE ---- */ .elementor-30 .elementor-element.elementor-element-f3dce4d .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-f3dce4d .elementor-widget-text-editor, .elementor-30 .elementor-element.elementor-element-f3dce4d .elementor-widget-text-editor p { transition: color .35s ease; } .elementor-30 .elementor-element.elementor-element-f3dce4d:hover .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-f3dce4d:hover .elementor-widget-text-editor, .elementor-30 .elementor-element.elementor-element-f3dce4d:hover .elementor-widget-text-editor p { color: #EDEDE7 !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-8a1cfe8 *//* ================================================== CARTE STATISTIQUE — CONFIGURATION GÉNÉRALE ================================================== */ .stat-card { --stat-color-default: #393624c9; --stat-hover-start: #e2e0d4; --stat-hover-end: #e2e0d44d; --stat-gradient: linear-gradient( 90deg, var(--stat-color-default) 0%, var(--stat-color-default) 50%, var(--stat-hover-start) 50%, var(--stat-hover-end) 100% ); --stat-background-position: 0%; position: relative; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* ================================================== SURVOL ET FOCUS ================================================== */ .stat-card:hover, .stat-card:focus-within { --stat-background-position: 100%; } .stat-card:hover { transform: translateY(-4px); } /* ================================================== DÉGRADÉ UNIQUE SUR TOUT LE COMPTEUR ================================================== */ /* * Le dégradé est appliqué uniquement ici. * * Il couvre : * - le nombre ; * - le préfixe ; * - le suffixe ; * - le sous-suffixe m² ; * - le titre. */ .stat-card .elementor-counter { color: transparent !important; background-image: var(--stat-gradient) !important; background-size: 200% 100% !important; background-position: var(--stat-background-position) 50% !important; background-repeat: no-repeat !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; text-align: center !important; overflow: visible !important; transition: background-position 0.65s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* ================================================== ÉLÉMENTS INTERNES ================================================== */ /* * Les enfants héritent de la transparence du parent. * Aucun enfant ne possède son propre dégradé. */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix, .stat-card .elementor-counter-title, .stat-card .elementor-counter-number-suffix::after { color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; -webkit-text-fill-color: inherit !important; transition: none !important; } /* ================================================== WRAPPER DU NOMBRE ================================================== */ /* * Important : * ne pas utiliser display:flex ici. * * inline-block permet au dégradé du parent de couvrir * le nombre, le suffixe et le pseudo-élément m². */ .stat-card .elementor-counter-number-wrapper { display: inline-block !important; width: auto !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; text-align: center !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; } /* Les éléments restent côte à côte */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix { display: inline-block !important; width: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; padding: 0 !important; position: static !important; transform: none !important; vertical-align: baseline; white-space: nowrap !important; overflow: visible !important; } /* Masque uniquement le préfixe vide */ .stat-card .elementor-counter-number-prefix:empty { display: none !important; } /* ================================================== TITRE SOUS LE COMPTEUR ================================================== */ .stat-card .elementor-counter-title { display: block !important; width: 100% !important; text-align: center !important; overflow: visible !important; } /* ================================================== SUFFIXE CLASSIQUE Exemple : 15 Ans ================================================== */ .stat-card .elementor-counter-number-suffix { font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; /* * vertical-align remplace position/top. * Le suffixe reste inclus dans le dégradé du parent. */ vertical-align: 0.55em !important; position: static !important; top: auto !important; } /* ================================================== COMPTEUR SPÉCIAL : 80k m² ================================================== */ /* * Configuration Elementor : * * Nombre : 80 * Suffixe : k * Classe : stat-card suffix-k-m2 */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix, .stat-card .suffix-k-m2 .elementor-counter-number-suffix { display: inline-block !important; font-size: 1em !important; font-weight: inherit !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: baseline !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== AJOUT DE m² ================================================== */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { content: "m²" !important; display: inline-block !important; margin-left: 0em !important; padding: 0 !important; font-size: 0.32em !important; font-weight: 400 !important; line-height: 1 !important; /* * Important : * ne pas utiliser position: relative ni top. * vertical-align garde m² dans la zone du dégradé. */ position: static !important; top: auto !important; vertical-align: super !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; transition: none !important; } /* ================================================== SUFFIXE « Ans » ================================================== */ /* * Configuration Elementor : * * Suffixe : Ans * Classe : stat-card suffix-ans */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { display: inline-block !important; font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: 0.55em !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== ACCESSIBILITÉ ================================================== */ @media (prefers-reduced-motion: reduce) { .stat-card, .stat-card .elementor-counter { transition: none !important; } .stat-card:hover { transform: none !important; } } /* ================================================== AJUSTEMENTS D’ESPACEMENT ================================================== */ /* Rapproche le préfixe du nombre : +300 */ .stat-card .elementor-counter-number-prefix { margin-right: -0em !important; } /* Rapproche les suffixes classiques du nombre */ .stat-card .elementor-counter-number-suffix { margin-left: 0em !important; } /* ================================================== AJUSTEMENTS FINAUX DES SUFFIXES ================================================== */ /* m² : plus proche du k et nettement plus bas */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { margin-left: 0.08em !important; vertical-align: -0em !important; } /* Ans : plus proche du nombre et légèrement plus bas */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { margin-left: 0em !important; vertical-align: 0.25em !important; } /* ---- CARTE ---- */ .elementor-30 .elementor-element.elementor-element-8a1cfe8 .card-item { background-color: #EDEDE7; transition: background-color .35s ease; } .elementor-30 .elementor-element.elementor-element-8a1cfe8 .card-item:hover { background-color: #5F5D4C; } /* Titre + texte */ .elementor-30 .elementor-element.elementor-element-8a1cfe8 .card-item .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-8a1cfe8 .card-item p { transition: color .35s ease; } .elementor-30 .elementor-element.elementor-element-8a1cfe8 .card-item:hover .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-8a1cfe8 .card-item:hover p { color: #EDEDE7 !important; } /* ---- CARRÉ DE L'ICÔNE ---- */ .elementor-30 .elementor-element.elementor-element-8a1cfe8 .card-item .icone-wrap { position: relative; background-color: #DDDDD5; transition: background-color .35s ease; } .elementor-30 .elementor-element.elementor-element-8a1cfe8 .card-item:hover .icone-wrap { background-color: #3E3D30; } /* ---- SWAP DES 2 LOGOS ---- */ .elementor-30 .elementor-element.elementor-element-8a1cfe8 .icone-hover { display: none !important; } .elementor-30 .elementor-element.elementor-element-8a1cfe8:hover .icone-normal { display: none !important; } .elementor-30 .elementor-element.elementor-element-8a1cfe8:hover .icone-hover { display: block !important; } /* ---- TITRE + TEXTE ---- */ .elementor-30 .elementor-element.elementor-element-8a1cfe8 .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-8a1cfe8 .elementor-widget-text-editor, .elementor-30 .elementor-element.elementor-element-8a1cfe8 .elementor-widget-text-editor p { transition: color .35s ease; } .elementor-30 .elementor-element.elementor-element-8a1cfe8:hover .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-8a1cfe8:hover .elementor-widget-text-editor, .elementor-30 .elementor-element.elementor-element-8a1cfe8:hover .elementor-widget-text-editor p { color: #EDEDE7 !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-50ccd95 *//* ================================================== CARTE STATISTIQUE — CONFIGURATION GÉNÉRALE ================================================== */ .stat-card { --stat-color-default: #393624c9; --stat-hover-start: #e2e0d4; --stat-hover-end: #e2e0d44d; --stat-gradient: linear-gradient( 90deg, var(--stat-color-default) 0%, var(--stat-color-default) 50%, var(--stat-hover-start) 50%, var(--stat-hover-end) 100% ); --stat-background-position: 0%; position: relative; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* ================================================== SURVOL ET FOCUS ================================================== */ .stat-card:hover, .stat-card:focus-within { --stat-background-position: 100%; } .stat-card:hover { transform: translateY(-4px); } /* ================================================== DÉGRADÉ UNIQUE SUR TOUT LE COMPTEUR ================================================== */ /* * Le dégradé est appliqué uniquement ici. * * Il couvre : * - le nombre ; * - le préfixe ; * - le suffixe ; * - le sous-suffixe m² ; * - le titre. */ .stat-card .elementor-counter { color: transparent !important; background-image: var(--stat-gradient) !important; background-size: 200% 100% !important; background-position: var(--stat-background-position) 50% !important; background-repeat: no-repeat !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; text-align: center !important; overflow: visible !important; transition: background-position 0.65s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* ================================================== ÉLÉMENTS INTERNES ================================================== */ /* * Les enfants héritent de la transparence du parent. * Aucun enfant ne possède son propre dégradé. */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix, .stat-card .elementor-counter-title, .stat-card .elementor-counter-number-suffix::after { color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; -webkit-text-fill-color: inherit !important; transition: none !important; } /* ================================================== WRAPPER DU NOMBRE ================================================== */ /* * Important : * ne pas utiliser display:flex ici. * * inline-block permet au dégradé du parent de couvrir * le nombre, le suffixe et le pseudo-élément m². */ .stat-card .elementor-counter-number-wrapper { display: inline-block !important; width: auto !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; text-align: center !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; } /* Les éléments restent côte à côte */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix { display: inline-block !important; width: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; padding: 0 !important; position: static !important; transform: none !important; vertical-align: baseline; white-space: nowrap !important; overflow: visible !important; } /* Masque uniquement le préfixe vide */ .stat-card .elementor-counter-number-prefix:empty { display: none !important; } /* ================================================== TITRE SOUS LE COMPTEUR ================================================== */ .stat-card .elementor-counter-title { display: block !important; width: 100% !important; text-align: center !important; overflow: visible !important; } /* ================================================== SUFFIXE CLASSIQUE Exemple : 15 Ans ================================================== */ .stat-card .elementor-counter-number-suffix { font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; /* * vertical-align remplace position/top. * Le suffixe reste inclus dans le dégradé du parent. */ vertical-align: 0.55em !important; position: static !important; top: auto !important; } /* ================================================== COMPTEUR SPÉCIAL : 80k m² ================================================== */ /* * Configuration Elementor : * * Nombre : 80 * Suffixe : k * Classe : stat-card suffix-k-m2 */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix, .stat-card .suffix-k-m2 .elementor-counter-number-suffix { display: inline-block !important; font-size: 1em !important; font-weight: inherit !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: baseline !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== AJOUT DE m² ================================================== */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { content: "m²" !important; display: inline-block !important; margin-left: 0em !important; padding: 0 !important; font-size: 0.32em !important; font-weight: 400 !important; line-height: 1 !important; /* * Important : * ne pas utiliser position: relative ni top. * vertical-align garde m² dans la zone du dégradé. */ position: static !important; top: auto !important; vertical-align: super !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; transition: none !important; } /* ================================================== SUFFIXE « Ans » ================================================== */ /* * Configuration Elementor : * * Suffixe : Ans * Classe : stat-card suffix-ans */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { display: inline-block !important; font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: 0.55em !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== ACCESSIBILITÉ ================================================== */ @media (prefers-reduced-motion: reduce) { .stat-card, .stat-card .elementor-counter { transition: none !important; } .stat-card:hover { transform: none !important; } } /* ================================================== AJUSTEMENTS D’ESPACEMENT ================================================== */ /* Rapproche le préfixe du nombre : +300 */ .stat-card .elementor-counter-number-prefix { margin-right: -0em !important; } /* Rapproche les suffixes classiques du nombre */ .stat-card .elementor-counter-number-suffix { margin-left: 0em !important; } /* ================================================== AJUSTEMENTS FINAUX DES SUFFIXES ================================================== */ /* m² : plus proche du k et nettement plus bas */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { margin-left: 0.08em !important; vertical-align: -0em !important; } /* Ans : plus proche du nombre et légèrement plus bas */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { margin-left: 0em !important; vertical-align: 0.25em !important; } /* ---- CARTE ---- */ .elementor-30 .elementor-element.elementor-element-50ccd95 .card-item { background-color: #EDEDE7; transition: background-color .35s ease; } .elementor-30 .elementor-element.elementor-element-50ccd95 .card-item:hover { background-color: #5F5D4C; } /* Titre + texte */ .elementor-30 .elementor-element.elementor-element-50ccd95 .card-item .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-50ccd95 .card-item p { transition: color .35s ease; } .elementor-30 .elementor-element.elementor-element-50ccd95 .card-item:hover .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-50ccd95 .card-item:hover p { color: #EDEDE7 !important; } /* ---- CARRÉ DE L'ICÔNE ---- */ .elementor-30 .elementor-element.elementor-element-50ccd95 .card-item .icone-wrap { position: relative; background-color: #DDDDD5; transition: background-color .35s ease; } .elementor-30 .elementor-element.elementor-element-50ccd95 .card-item:hover .icone-wrap { background-color: #3E3D30; } /* ---- SWAP DES 2 LOGOS ---- */ .elementor-30 .elementor-element.elementor-element-50ccd95 .icone-hover { display: none !important; } .elementor-30 .elementor-element.elementor-element-50ccd95:hover .icone-normal { display: none !important; } .elementor-30 .elementor-element.elementor-element-50ccd95:hover .icone-hover { display: block !important; } /* ---- TITRE + TEXTE ---- */ .elementor-30 .elementor-element.elementor-element-50ccd95 .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-50ccd95 .elementor-widget-text-editor, .elementor-30 .elementor-element.elementor-element-50ccd95 .elementor-widget-text-editor p { transition: color .35s ease; } .elementor-30 .elementor-element.elementor-element-50ccd95:hover .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-50ccd95:hover .elementor-widget-text-editor, .elementor-30 .elementor-element.elementor-element-50ccd95:hover .elementor-widget-text-editor p { color: #EDEDE7 !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-eabea42 *//* ================================================== CARTE STATISTIQUE — CONFIGURATION GÉNÉRALE ================================================== */ .stat-card { --stat-color-default: #393624c9; --stat-hover-start: #e2e0d4; --stat-hover-end: #e2e0d44d; --stat-gradient: linear-gradient( 90deg, var(--stat-color-default) 0%, var(--stat-color-default) 50%, var(--stat-hover-start) 50%, var(--stat-hover-end) 100% ); --stat-background-position: 0%; position: relative; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* ================================================== SURVOL ET FOCUS ================================================== */ .stat-card:hover, .stat-card:focus-within { --stat-background-position: 100%; } .stat-card:hover { transform: translateY(-4px); } /* ================================================== DÉGRADÉ UNIQUE SUR TOUT LE COMPTEUR ================================================== */ /* * Le dégradé est appliqué uniquement ici. * * Il couvre : * - le nombre ; * - le préfixe ; * - le suffixe ; * - le sous-suffixe m² ; * - le titre. */ .stat-card .elementor-counter { color: transparent !important; background-image: var(--stat-gradient) !important; background-size: 200% 100% !important; background-position: var(--stat-background-position) 50% !important; background-repeat: no-repeat !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; text-align: center !important; overflow: visible !important; transition: background-position 0.65s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* ================================================== ÉLÉMENTS INTERNES ================================================== */ /* * Les enfants héritent de la transparence du parent. * Aucun enfant ne possède son propre dégradé. */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix, .stat-card .elementor-counter-title, .stat-card .elementor-counter-number-suffix::after { color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; -webkit-text-fill-color: inherit !important; transition: none !important; } /* ================================================== WRAPPER DU NOMBRE ================================================== */ /* * Important : * ne pas utiliser display:flex ici. * * inline-block permet au dégradé du parent de couvrir * le nombre, le suffixe et le pseudo-élément m². */ .stat-card .elementor-counter-number-wrapper { display: inline-block !important; width: auto !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; text-align: center !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; } /* Les éléments restent côte à côte */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix { display: inline-block !important; width: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; padding: 0 !important; position: static !important; transform: none !important; vertical-align: baseline; white-space: nowrap !important; overflow: visible !important; } /* Masque uniquement le préfixe vide */ .stat-card .elementor-counter-number-prefix:empty { display: none !important; } /* ================================================== TITRE SOUS LE COMPTEUR ================================================== */ .stat-card .elementor-counter-title { display: block !important; width: 100% !important; text-align: center !important; overflow: visible !important; } /* ================================================== SUFFIXE CLASSIQUE Exemple : 15 Ans ================================================== */ .stat-card .elementor-counter-number-suffix { font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; /* * vertical-align remplace position/top. * Le suffixe reste inclus dans le dégradé du parent. */ vertical-align: 0.55em !important; position: static !important; top: auto !important; } /* ================================================== COMPTEUR SPÉCIAL : 80k m² ================================================== */ /* * Configuration Elementor : * * Nombre : 80 * Suffixe : k * Classe : stat-card suffix-k-m2 */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix, .stat-card .suffix-k-m2 .elementor-counter-number-suffix { display: inline-block !important; font-size: 1em !important; font-weight: inherit !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: baseline !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== AJOUT DE m² ================================================== */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { content: "m²" !important; display: inline-block !important; margin-left: 0em !important; padding: 0 !important; font-size: 0.32em !important; font-weight: 400 !important; line-height: 1 !important; /* * Important : * ne pas utiliser position: relative ni top. * vertical-align garde m² dans la zone du dégradé. */ position: static !important; top: auto !important; vertical-align: super !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; transition: none !important; } /* ================================================== SUFFIXE « Ans » ================================================== */ /* * Configuration Elementor : * * Suffixe : Ans * Classe : stat-card suffix-ans */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { display: inline-block !important; font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: 0.55em !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== ACCESSIBILITÉ ================================================== */ @media (prefers-reduced-motion: reduce) { .stat-card, .stat-card .elementor-counter { transition: none !important; } .stat-card:hover { transform: none !important; } } /* ================================================== AJUSTEMENTS D’ESPACEMENT ================================================== */ /* Rapproche le préfixe du nombre : +300 */ .stat-card .elementor-counter-number-prefix { margin-right: -0em !important; } /* Rapproche les suffixes classiques du nombre */ .stat-card .elementor-counter-number-suffix { margin-left: 0em !important; } /* ================================================== AJUSTEMENTS FINAUX DES SUFFIXES ================================================== */ /* m² : plus proche du k et nettement plus bas */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { margin-left: 0.08em !important; vertical-align: -0em !important; } /* Ans : plus proche du nombre et légèrement plus bas */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { margin-left: 0em !important; vertical-align: 0.25em !important; } /* ---- CARTE ---- */ .elementor-30 .elementor-element.elementor-element-eabea42 .card-item { background-color: #EDEDE7; transition: background-color .35s ease; } .elementor-30 .elementor-element.elementor-element-eabea42 .card-item:hover { background-color: #5F5D4C; } /* Titre + texte */ .elementor-30 .elementor-element.elementor-element-eabea42 .card-item .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-eabea42 .card-item p { transition: color .35s ease; } .elementor-30 .elementor-element.elementor-element-eabea42 .card-item:hover .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-eabea42 .card-item:hover p { color: #EDEDE7 !important; } /* ---- CARRÉ DE L'ICÔNE ---- */ .elementor-30 .elementor-element.elementor-element-eabea42 .card-item .icone-wrap { position: relative; background-color: #DDDDD5; transition: background-color .35s ease; } .elementor-30 .elementor-element.elementor-element-eabea42 .card-item:hover .icone-wrap { background-color: #3E3D30; } /* ---- SWAP DES 2 LOGOS ---- */ .elementor-30 .elementor-element.elementor-element-eabea42 .icone-hover { display: none !important; } .elementor-30 .elementor-element.elementor-element-eabea42:hover .icone-normal { display: none !important; } .elementor-30 .elementor-element.elementor-element-eabea42:hover .icone-hover { display: block !important; } /* ---- TITRE + TEXTE ---- */ .elementor-30 .elementor-element.elementor-element-eabea42 .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-eabea42 .elementor-widget-text-editor, .elementor-30 .elementor-element.elementor-element-eabea42 .elementor-widget-text-editor p { transition: color .35s ease; } .elementor-30 .elementor-element.elementor-element-eabea42:hover .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-eabea42:hover .elementor-widget-text-editor, .elementor-30 .elementor-element.elementor-element-eabea42:hover .elementor-widget-text-editor p { color: #EDEDE7 !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-f3dce4d *//* ================================================== CARTE STATISTIQUE — CONFIGURATION GÉNÉRALE ================================================== */ .stat-card { --stat-color-default: #393624c9; --stat-hover-start: #e2e0d4; --stat-hover-end: #e2e0d44d; --stat-gradient: linear-gradient( 90deg, var(--stat-color-default) 0%, var(--stat-color-default) 50%, var(--stat-hover-start) 50%, var(--stat-hover-end) 100% ); --stat-background-position: 0%; position: relative; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* ================================================== SURVOL ET FOCUS ================================================== */ .stat-card:hover, .stat-card:focus-within { --stat-background-position: 100%; } .stat-card:hover { transform: translateY(-4px); } /* ================================================== DÉGRADÉ UNIQUE SUR TOUT LE COMPTEUR ================================================== */ /* * Le dégradé est appliqué uniquement ici. * * Il couvre : * - le nombre ; * - le préfixe ; * - le suffixe ; * - le sous-suffixe m² ; * - le titre. */ .stat-card .elementor-counter { color: transparent !important; background-image: var(--stat-gradient) !important; background-size: 200% 100% !important; background-position: var(--stat-background-position) 50% !important; background-repeat: no-repeat !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; text-align: center !important; overflow: visible !important; transition: background-position 0.65s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* ================================================== ÉLÉMENTS INTERNES ================================================== */ /* * Les enfants héritent de la transparence du parent. * Aucun enfant ne possède son propre dégradé. */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix, .stat-card .elementor-counter-title, .stat-card .elementor-counter-number-suffix::after { color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; -webkit-text-fill-color: inherit !important; transition: none !important; } /* ================================================== WRAPPER DU NOMBRE ================================================== */ /* * Important : * ne pas utiliser display:flex ici. * * inline-block permet au dégradé du parent de couvrir * le nombre, le suffixe et le pseudo-élément m². */ .stat-card .elementor-counter-number-wrapper { display: inline-block !important; width: auto !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; text-align: center !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; } /* Les éléments restent côte à côte */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix { display: inline-block !important; width: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; padding: 0 !important; position: static !important; transform: none !important; vertical-align: baseline; white-space: nowrap !important; overflow: visible !important; } /* Masque uniquement le préfixe vide */ .stat-card .elementor-counter-number-prefix:empty { display: none !important; } /* ================================================== TITRE SOUS LE COMPTEUR ================================================== */ .stat-card .elementor-counter-title { display: block !important; width: 100% !important; text-align: center !important; overflow: visible !important; } /* ================================================== SUFFIXE CLASSIQUE Exemple : 15 Ans ================================================== */ .stat-card .elementor-counter-number-suffix { font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; /* * vertical-align remplace position/top. * Le suffixe reste inclus dans le dégradé du parent. */ vertical-align: 0.55em !important; position: static !important; top: auto !important; } /* ================================================== COMPTEUR SPÉCIAL : 80k m² ================================================== */ /* * Configuration Elementor : * * Nombre : 80 * Suffixe : k * Classe : stat-card suffix-k-m2 */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix, .stat-card .suffix-k-m2 .elementor-counter-number-suffix { display: inline-block !important; font-size: 1em !important; font-weight: inherit !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: baseline !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== AJOUT DE m² ================================================== */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { content: "m²" !important; display: inline-block !important; margin-left: 0em !important; padding: 0 !important; font-size: 0.32em !important; font-weight: 400 !important; line-height: 1 !important; /* * Important : * ne pas utiliser position: relative ni top. * vertical-align garde m² dans la zone du dégradé. */ position: static !important; top: auto !important; vertical-align: super !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; transition: none !important; } /* ================================================== SUFFIXE « Ans » ================================================== */ /* * Configuration Elementor : * * Suffixe : Ans * Classe : stat-card suffix-ans */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { display: inline-block !important; font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: 0.55em !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== ACCESSIBILITÉ ================================================== */ @media (prefers-reduced-motion: reduce) { .stat-card, .stat-card .elementor-counter { transition: none !important; } .stat-card:hover { transform: none !important; } } /* ================================================== AJUSTEMENTS D’ESPACEMENT ================================================== */ /* Rapproche le préfixe du nombre : +300 */ .stat-card .elementor-counter-number-prefix { margin-right: -0em !important; } /* Rapproche les suffixes classiques du nombre */ .stat-card .elementor-counter-number-suffix { margin-left: 0em !important; } /* ================================================== AJUSTEMENTS FINAUX DES SUFFIXES ================================================== */ /* m² : plus proche du k et nettement plus bas */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { margin-left: 0.08em !important; vertical-align: -0em !important; } /* Ans : plus proche du nombre et légèrement plus bas */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { margin-left: 0em !important; vertical-align: 0.25em !important; } /* ---- CARTE ---- */ .elementor-30 .elementor-element.elementor-element-f3dce4d .card-item { background-color: #EDEDE7; transition: background-color .35s ease; } .elementor-30 .elementor-element.elementor-element-f3dce4d .card-item:hover { background-color: #5F5D4C; } /* Titre + texte */ .elementor-30 .elementor-element.elementor-element-f3dce4d .card-item .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-f3dce4d .card-item p { transition: color .35s ease; } .elementor-30 .elementor-element.elementor-element-f3dce4d .card-item:hover .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-f3dce4d .card-item:hover p { color: #EDEDE7 !important; } /* ---- CARRÉ DE L'ICÔNE ---- */ .elementor-30 .elementor-element.elementor-element-f3dce4d .card-item .icone-wrap { position: relative; background-color: #DDDDD5; transition: background-color .35s ease; } .elementor-30 .elementor-element.elementor-element-f3dce4d .card-item:hover .icone-wrap { background-color: #3E3D30; } /* ---- SWAP DES 2 LOGOS ---- */ .elementor-30 .elementor-element.elementor-element-f3dce4d .icone-hover { display: none !important; } .elementor-30 .elementor-element.elementor-element-f3dce4d:hover .icone-normal { display: none !important; } .elementor-30 .elementor-element.elementor-element-f3dce4d:hover .icone-hover { display: block !important; } /* ---- TITRE + TEXTE ---- */ .elementor-30 .elementor-element.elementor-element-f3dce4d .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-f3dce4d .elementor-widget-text-editor, .elementor-30 .elementor-element.elementor-element-f3dce4d .elementor-widget-text-editor p { transition: color .35s ease; } .elementor-30 .elementor-element.elementor-element-f3dce4d:hover .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-f3dce4d:hover .elementor-widget-text-editor, .elementor-30 .elementor-element.elementor-element-f3dce4d:hover .elementor-widget-text-editor p { color: #EDEDE7 !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-8a1cfe8 *//* ================================================== CARTE STATISTIQUE — CONFIGURATION GÉNÉRALE ================================================== */ .stat-card { --stat-color-default: #393624c9; --stat-hover-start: #e2e0d4; --stat-hover-end: #e2e0d44d; --stat-gradient: linear-gradient( 90deg, var(--stat-color-default) 0%, var(--stat-color-default) 50%, var(--stat-hover-start) 50%, var(--stat-hover-end) 100% ); --stat-background-position: 0%; position: relative; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* ================================================== SURVOL ET FOCUS ================================================== */ .stat-card:hover, .stat-card:focus-within { --stat-background-position: 100%; } .stat-card:hover { transform: translateY(-4px); } /* ================================================== DÉGRADÉ UNIQUE SUR TOUT LE COMPTEUR ================================================== */ /* * Le dégradé est appliqué uniquement ici. * * Il couvre : * - le nombre ; * - le préfixe ; * - le suffixe ; * - le sous-suffixe m² ; * - le titre. */ .stat-card .elementor-counter { color: transparent !important; background-image: var(--stat-gradient) !important; background-size: 200% 100% !important; background-position: var(--stat-background-position) 50% !important; background-repeat: no-repeat !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; text-align: center !important; overflow: visible !important; transition: background-position 0.65s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* ================================================== ÉLÉMENTS INTERNES ================================================== */ /* * Les enfants héritent de la transparence du parent. * Aucun enfant ne possède son propre dégradé. */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix, .stat-card .elementor-counter-title, .stat-card .elementor-counter-number-suffix::after { color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; -webkit-text-fill-color: inherit !important; transition: none !important; } /* ================================================== WRAPPER DU NOMBRE ================================================== */ /* * Important : * ne pas utiliser display:flex ici. * * inline-block permet au dégradé du parent de couvrir * le nombre, le suffixe et le pseudo-élément m². */ .stat-card .elementor-counter-number-wrapper { display: inline-block !important; width: auto !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; text-align: center !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; } /* Les éléments restent côte à côte */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix { display: inline-block !important; width: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; padding: 0 !important; position: static !important; transform: none !important; vertical-align: baseline; white-space: nowrap !important; overflow: visible !important; } /* Masque uniquement le préfixe vide */ .stat-card .elementor-counter-number-prefix:empty { display: none !important; } /* ================================================== TITRE SOUS LE COMPTEUR ================================================== */ .stat-card .elementor-counter-title { display: block !important; width: 100% !important; text-align: center !important; overflow: visible !important; } /* ================================================== SUFFIXE CLASSIQUE Exemple : 15 Ans ================================================== */ .stat-card .elementor-counter-number-suffix { font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; /* * vertical-align remplace position/top. * Le suffixe reste inclus dans le dégradé du parent. */ vertical-align: 0.55em !important; position: static !important; top: auto !important; } /* ================================================== COMPTEUR SPÉCIAL : 80k m² ================================================== */ /* * Configuration Elementor : * * Nombre : 80 * Suffixe : k * Classe : stat-card suffix-k-m2 */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix, .stat-card .suffix-k-m2 .elementor-counter-number-suffix { display: inline-block !important; font-size: 1em !important; font-weight: inherit !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: baseline !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== AJOUT DE m² ================================================== */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { content: "m²" !important; display: inline-block !important; margin-left: 0em !important; padding: 0 !important; font-size: 0.32em !important; font-weight: 400 !important; line-height: 1 !important; /* * Important : * ne pas utiliser position: relative ni top. * vertical-align garde m² dans la zone du dégradé. */ position: static !important; top: auto !important; vertical-align: super !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; transition: none !important; } /* ================================================== SUFFIXE « Ans » ================================================== */ /* * Configuration Elementor : * * Suffixe : Ans * Classe : stat-card suffix-ans */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { display: inline-block !important; font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: 0.55em !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== ACCESSIBILITÉ ================================================== */ @media (prefers-reduced-motion: reduce) { .stat-card, .stat-card .elementor-counter { transition: none !important; } .stat-card:hover { transform: none !important; } } /* ================================================== AJUSTEMENTS D’ESPACEMENT ================================================== */ /* Rapproche le préfixe du nombre : +300 */ .stat-card .elementor-counter-number-prefix { margin-right: -0em !important; } /* Rapproche les suffixes classiques du nombre */ .stat-card .elementor-counter-number-suffix { margin-left: 0em !important; } /* ================================================== AJUSTEMENTS FINAUX DES SUFFIXES ================================================== */ /* m² : plus proche du k et nettement plus bas */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { margin-left: 0.08em !important; vertical-align: -0em !important; } /* Ans : plus proche du nombre et légèrement plus bas */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { margin-left: 0em !important; vertical-align: 0.25em !important; } /* ---- CARTE ---- */ .elementor-30 .elementor-element.elementor-element-8a1cfe8 .card-item { background-color: #EDEDE7; transition: background-color .35s ease; } .elementor-30 .elementor-element.elementor-element-8a1cfe8 .card-item:hover { background-color: #5F5D4C; } /* Titre + texte */ .elementor-30 .elementor-element.elementor-element-8a1cfe8 .card-item .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-8a1cfe8 .card-item p { transition: color .35s ease; } .elementor-30 .elementor-element.elementor-element-8a1cfe8 .card-item:hover .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-8a1cfe8 .card-item:hover p { color: #EDEDE7 !important; } /* ---- CARRÉ DE L'ICÔNE ---- */ .elementor-30 .elementor-element.elementor-element-8a1cfe8 .card-item .icone-wrap { position: relative; background-color: #DDDDD5; transition: background-color .35s ease; } .elementor-30 .elementor-element.elementor-element-8a1cfe8 .card-item:hover .icone-wrap { background-color: #3E3D30; } /* ---- SWAP DES 2 LOGOS ---- */ .elementor-30 .elementor-element.elementor-element-8a1cfe8 .icone-hover { display: none !important; } .elementor-30 .elementor-element.elementor-element-8a1cfe8:hover .icone-normal { display: none !important; } .elementor-30 .elementor-element.elementor-element-8a1cfe8:hover .icone-hover { display: block !important; } /* ---- TITRE + TEXTE ---- */ .elementor-30 .elementor-element.elementor-element-8a1cfe8 .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-8a1cfe8 .elementor-widget-text-editor, .elementor-30 .elementor-element.elementor-element-8a1cfe8 .elementor-widget-text-editor p { transition: color .35s ease; } .elementor-30 .elementor-element.elementor-element-8a1cfe8:hover .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-8a1cfe8:hover .elementor-widget-text-editor, .elementor-30 .elementor-element.elementor-element-8a1cfe8:hover .elementor-widget-text-editor p { color: #EDEDE7 !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-50ccd95 *//* ================================================== CARTE STATISTIQUE — CONFIGURATION GÉNÉRALE ================================================== */ .stat-card { --stat-color-default: #393624c9; --stat-hover-start: #e2e0d4; --stat-hover-end: #e2e0d44d; --stat-gradient: linear-gradient( 90deg, var(--stat-color-default) 0%, var(--stat-color-default) 50%, var(--stat-hover-start) 50%, var(--stat-hover-end) 100% ); --stat-background-position: 0%; position: relative; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* ================================================== SURVOL ET FOCUS ================================================== */ .stat-card:hover, .stat-card:focus-within { --stat-background-position: 100%; } .stat-card:hover { transform: translateY(-4px); } /* ================================================== DÉGRADÉ UNIQUE SUR TOUT LE COMPTEUR ================================================== */ /* * Le dégradé est appliqué uniquement ici. * * Il couvre : * - le nombre ; * - le préfixe ; * - le suffixe ; * - le sous-suffixe m² ; * - le titre. */ .stat-card .elementor-counter { color: transparent !important; background-image: var(--stat-gradient) !important; background-size: 200% 100% !important; background-position: var(--stat-background-position) 50% !important; background-repeat: no-repeat !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; text-align: center !important; overflow: visible !important; transition: background-position 0.65s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* ================================================== ÉLÉMENTS INTERNES ================================================== */ /* * Les enfants héritent de la transparence du parent. * Aucun enfant ne possède son propre dégradé. */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix, .stat-card .elementor-counter-title, .stat-card .elementor-counter-number-suffix::after { color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; -webkit-text-fill-color: inherit !important; transition: none !important; } /* ================================================== WRAPPER DU NOMBRE ================================================== */ /* * Important : * ne pas utiliser display:flex ici. * * inline-block permet au dégradé du parent de couvrir * le nombre, le suffixe et le pseudo-élément m². */ .stat-card .elementor-counter-number-wrapper { display: inline-block !important; width: auto !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; text-align: center !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; } /* Les éléments restent côte à côte */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix { display: inline-block !important; width: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; padding: 0 !important; position: static !important; transform: none !important; vertical-align: baseline; white-space: nowrap !important; overflow: visible !important; } /* Masque uniquement le préfixe vide */ .stat-card .elementor-counter-number-prefix:empty { display: none !important; } /* ================================================== TITRE SOUS LE COMPTEUR ================================================== */ .stat-card .elementor-counter-title { display: block !important; width: 100% !important; text-align: center !important; overflow: visible !important; } /* ================================================== SUFFIXE CLASSIQUE Exemple : 15 Ans ================================================== */ .stat-card .elementor-counter-number-suffix { font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; /* * vertical-align remplace position/top. * Le suffixe reste inclus dans le dégradé du parent. */ vertical-align: 0.55em !important; position: static !important; top: auto !important; } /* ================================================== COMPTEUR SPÉCIAL : 80k m² ================================================== */ /* * Configuration Elementor : * * Nombre : 80 * Suffixe : k * Classe : stat-card suffix-k-m2 */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix, .stat-card .suffix-k-m2 .elementor-counter-number-suffix { display: inline-block !important; font-size: 1em !important; font-weight: inherit !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: baseline !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== AJOUT DE m² ================================================== */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { content: "m²" !important; display: inline-block !important; margin-left: 0em !important; padding: 0 !important; font-size: 0.32em !important; font-weight: 400 !important; line-height: 1 !important; /* * Important : * ne pas utiliser position: relative ni top. * vertical-align garde m² dans la zone du dégradé. */ position: static !important; top: auto !important; vertical-align: super !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; transition: none !important; } /* ================================================== SUFFIXE « Ans » ================================================== */ /* * Configuration Elementor : * * Suffixe : Ans * Classe : stat-card suffix-ans */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { display: inline-block !important; font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: 0.55em !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== ACCESSIBILITÉ ================================================== */ @media (prefers-reduced-motion: reduce) { .stat-card, .stat-card .elementor-counter { transition: none !important; } .stat-card:hover { transform: none !important; } } /* ================================================== AJUSTEMENTS D’ESPACEMENT ================================================== */ /* Rapproche le préfixe du nombre : +300 */ .stat-card .elementor-counter-number-prefix { margin-right: -0em !important; } /* Rapproche les suffixes classiques du nombre */ .stat-card .elementor-counter-number-suffix { margin-left: 0em !important; } /* ================================================== AJUSTEMENTS FINAUX DES SUFFIXES ================================================== */ /* m² : plus proche du k et nettement plus bas */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { margin-left: 0.08em !important; vertical-align: -0em !important; } /* Ans : plus proche du nombre et légèrement plus bas */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { margin-left: 0em !important; vertical-align: 0.25em !important; } /* ---- CARTE ---- */ .elementor-30 .elementor-element.elementor-element-50ccd95 .card-item { background-color: #EDEDE7; transition: background-color .35s ease; } .elementor-30 .elementor-element.elementor-element-50ccd95 .card-item:hover { background-color: #5F5D4C; } /* Titre + texte */ .elementor-30 .elementor-element.elementor-element-50ccd95 .card-item .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-50ccd95 .card-item p { transition: color .35s ease; } .elementor-30 .elementor-element.elementor-element-50ccd95 .card-item:hover .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-50ccd95 .card-item:hover p { color: #EDEDE7 !important; } /* ---- CARRÉ DE L'ICÔNE ---- */ .elementor-30 .elementor-element.elementor-element-50ccd95 .card-item .icone-wrap { position: relative; background-color: #DDDDD5; transition: background-color .35s ease; } .elementor-30 .elementor-element.elementor-element-50ccd95 .card-item:hover .icone-wrap { background-color: #3E3D30; } /* ---- SWAP DES 2 LOGOS ---- */ .elementor-30 .elementor-element.elementor-element-50ccd95 .icone-hover { display: none !important; } .elementor-30 .elementor-element.elementor-element-50ccd95:hover .icone-normal { display: none !important; } .elementor-30 .elementor-element.elementor-element-50ccd95:hover .icone-hover { display: block !important; } /* ---- TITRE + TEXTE ---- */ .elementor-30 .elementor-element.elementor-element-50ccd95 .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-50ccd95 .elementor-widget-text-editor, .elementor-30 .elementor-element.elementor-element-50ccd95 .elementor-widget-text-editor p { transition: color .35s ease; } .elementor-30 .elementor-element.elementor-element-50ccd95:hover .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-50ccd95:hover .elementor-widget-text-editor, .elementor-30 .elementor-element.elementor-element-50ccd95:hover .elementor-widget-text-editor p { color: #EDEDE7 !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-eabea42 *//* ================================================== CARTE STATISTIQUE — CONFIGURATION GÉNÉRALE ================================================== */ .stat-card { --stat-color-default: #393624c9; --stat-hover-start: #e2e0d4; --stat-hover-end: #e2e0d44d; --stat-gradient: linear-gradient( 90deg, var(--stat-color-default) 0%, var(--stat-color-default) 50%, var(--stat-hover-start) 50%, var(--stat-hover-end) 100% ); --stat-background-position: 0%; position: relative; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* ================================================== SURVOL ET FOCUS ================================================== */ .stat-card:hover, .stat-card:focus-within { --stat-background-position: 100%; } .stat-card:hover { transform: translateY(-4px); } /* ================================================== DÉGRADÉ UNIQUE SUR TOUT LE COMPTEUR ================================================== */ /* * Le dégradé est appliqué uniquement ici. * * Il couvre : * - le nombre ; * - le préfixe ; * - le suffixe ; * - le sous-suffixe m² ; * - le titre. */ .stat-card .elementor-counter { color: transparent !important; background-image: var(--stat-gradient) !important; background-size: 200% 100% !important; background-position: var(--stat-background-position) 50% !important; background-repeat: no-repeat !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; text-align: center !important; overflow: visible !important; transition: background-position 0.65s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* ================================================== ÉLÉMENTS INTERNES ================================================== */ /* * Les enfants héritent de la transparence du parent. * Aucun enfant ne possède son propre dégradé. */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix, .stat-card .elementor-counter-title, .stat-card .elementor-counter-number-suffix::after { color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; -webkit-text-fill-color: inherit !important; transition: none !important; } /* ================================================== WRAPPER DU NOMBRE ================================================== */ /* * Important : * ne pas utiliser display:flex ici. * * inline-block permet au dégradé du parent de couvrir * le nombre, le suffixe et le pseudo-élément m². */ .stat-card .elementor-counter-number-wrapper { display: inline-block !important; width: auto !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; text-align: center !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; } /* Les éléments restent côte à côte */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix { display: inline-block !important; width: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; padding: 0 !important; position: static !important; transform: none !important; vertical-align: baseline; white-space: nowrap !important; overflow: visible !important; } /* Masque uniquement le préfixe vide */ .stat-card .elementor-counter-number-prefix:empty { display: none !important; } /* ================================================== TITRE SOUS LE COMPTEUR ================================================== */ .stat-card .elementor-counter-title { display: block !important; width: 100% !important; text-align: center !important; overflow: visible !important; } /* ================================================== SUFFIXE CLASSIQUE Exemple : 15 Ans ================================================== */ .stat-card .elementor-counter-number-suffix { font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; /* * vertical-align remplace position/top. * Le suffixe reste inclus dans le dégradé du parent. */ vertical-align: 0.55em !important; position: static !important; top: auto !important; } /* ================================================== COMPTEUR SPÉCIAL : 80k m² ================================================== */ /* * Configuration Elementor : * * Nombre : 80 * Suffixe : k * Classe : stat-card suffix-k-m2 */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix, .stat-card .suffix-k-m2 .elementor-counter-number-suffix { display: inline-block !important; font-size: 1em !important; font-weight: inherit !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: baseline !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== AJOUT DE m² ================================================== */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { content: "m²" !important; display: inline-block !important; margin-left: 0em !important; padding: 0 !important; font-size: 0.32em !important; font-weight: 400 !important; line-height: 1 !important; /* * Important : * ne pas utiliser position: relative ni top. * vertical-align garde m² dans la zone du dégradé. */ position: static !important; top: auto !important; vertical-align: super !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; transition: none !important; } /* ================================================== SUFFIXE « Ans » ================================================== */ /* * Configuration Elementor : * * Suffixe : Ans * Classe : stat-card suffix-ans */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { display: inline-block !important; font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: 0.55em !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== ACCESSIBILITÉ ================================================== */ @media (prefers-reduced-motion: reduce) { .stat-card, .stat-card .elementor-counter { transition: none !important; } .stat-card:hover { transform: none !important; } } /* ================================================== AJUSTEMENTS D’ESPACEMENT ================================================== */ /* Rapproche le préfixe du nombre : +300 */ .stat-card .elementor-counter-number-prefix { margin-right: -0em !important; } /* Rapproche les suffixes classiques du nombre */ .stat-card .elementor-counter-number-suffix { margin-left: 0em !important; } /* ================================================== AJUSTEMENTS FINAUX DES SUFFIXES ================================================== */ /* m² : plus proche du k et nettement plus bas */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { margin-left: 0.08em !important; vertical-align: -0em !important; } /* Ans : plus proche du nombre et légèrement plus bas */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { margin-left: 0em !important; vertical-align: 0.25em !important; } /* ---- CARTE ---- */ .elementor-30 .elementor-element.elementor-element-eabea42 .card-item { background-color: #EDEDE7; transition: background-color .35s ease; } .elementor-30 .elementor-element.elementor-element-eabea42 .card-item:hover { background-color: #5F5D4C; } /* Titre + texte */ .elementor-30 .elementor-element.elementor-element-eabea42 .card-item .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-eabea42 .card-item p { transition: color .35s ease; } .elementor-30 .elementor-element.elementor-element-eabea42 .card-item:hover .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-eabea42 .card-item:hover p { color: #EDEDE7 !important; } /* ---- CARRÉ DE L'ICÔNE ---- */ .elementor-30 .elementor-element.elementor-element-eabea42 .card-item .icone-wrap { position: relative; background-color: #DDDDD5; transition: background-color .35s ease; } .elementor-30 .elementor-element.elementor-element-eabea42 .card-item:hover .icone-wrap { background-color: #3E3D30; } /* ---- SWAP DES 2 LOGOS ---- */ .elementor-30 .elementor-element.elementor-element-eabea42 .icone-hover { display: none !important; } .elementor-30 .elementor-element.elementor-element-eabea42:hover .icone-normal { display: none !important; } .elementor-30 .elementor-element.elementor-element-eabea42:hover .icone-hover { display: block !important; } /* ---- TITRE + TEXTE ---- */ .elementor-30 .elementor-element.elementor-element-eabea42 .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-eabea42 .elementor-widget-text-editor, .elementor-30 .elementor-element.elementor-element-eabea42 .elementor-widget-text-editor p { transition: color .35s ease; } .elementor-30 .elementor-element.elementor-element-eabea42:hover .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-eabea42:hover .elementor-widget-text-editor, .elementor-30 .elementor-element.elementor-element-eabea42:hover .elementor-widget-text-editor p { color: #EDEDE7 !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-f3dce4d *//* ================================================== CARTE STATISTIQUE — CONFIGURATION GÉNÉRALE ================================================== */ .stat-card { --stat-color-default: #393624c9; --stat-hover-start: #e2e0d4; --stat-hover-end: #e2e0d44d; --stat-gradient: linear-gradient( 90deg, var(--stat-color-default) 0%, var(--stat-color-default) 50%, var(--stat-hover-start) 50%, var(--stat-hover-end) 100% ); --stat-background-position: 0%; position: relative; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* ================================================== SURVOL ET FOCUS ================================================== */ .stat-card:hover, .stat-card:focus-within { --stat-background-position: 100%; } .stat-card:hover { transform: translateY(-4px); } /* ================================================== DÉGRADÉ UNIQUE SUR TOUT LE COMPTEUR ================================================== */ /* * Le dégradé est appliqué uniquement ici. * * Il couvre : * - le nombre ; * - le préfixe ; * - le suffixe ; * - le sous-suffixe m² ; * - le titre. */ .stat-card .elementor-counter { color: transparent !important; background-image: var(--stat-gradient) !important; background-size: 200% 100% !important; background-position: var(--stat-background-position) 50% !important; background-repeat: no-repeat !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; text-align: center !important; overflow: visible !important; transition: background-position 0.65s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* ================================================== ÉLÉMENTS INTERNES ================================================== */ /* * Les enfants héritent de la transparence du parent. * Aucun enfant ne possède son propre dégradé. */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix, .stat-card .elementor-counter-title, .stat-card .elementor-counter-number-suffix::after { color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; -webkit-text-fill-color: inherit !important; transition: none !important; } /* ================================================== WRAPPER DU NOMBRE ================================================== */ /* * Important : * ne pas utiliser display:flex ici. * * inline-block permet au dégradé du parent de couvrir * le nombre, le suffixe et le pseudo-élément m². */ .stat-card .elementor-counter-number-wrapper { display: inline-block !important; width: auto !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; text-align: center !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; } /* Les éléments restent côte à côte */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix { display: inline-block !important; width: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; padding: 0 !important; position: static !important; transform: none !important; vertical-align: baseline; white-space: nowrap !important; overflow: visible !important; } /* Masque uniquement le préfixe vide */ .stat-card .elementor-counter-number-prefix:empty { display: none !important; } /* ================================================== TITRE SOUS LE COMPTEUR ================================================== */ .stat-card .elementor-counter-title { display: block !important; width: 100% !important; text-align: center !important; overflow: visible !important; } /* ================================================== SUFFIXE CLASSIQUE Exemple : 15 Ans ================================================== */ .stat-card .elementor-counter-number-suffix { font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; /* * vertical-align remplace position/top. * Le suffixe reste inclus dans le dégradé du parent. */ vertical-align: 0.55em !important; position: static !important; top: auto !important; } /* ================================================== COMPTEUR SPÉCIAL : 80k m² ================================================== */ /* * Configuration Elementor : * * Nombre : 80 * Suffixe : k * Classe : stat-card suffix-k-m2 */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix, .stat-card .suffix-k-m2 .elementor-counter-number-suffix { display: inline-block !important; font-size: 1em !important; font-weight: inherit !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: baseline !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== AJOUT DE m² ================================================== */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { content: "m²" !important; display: inline-block !important; margin-left: 0em !important; padding: 0 !important; font-size: 0.32em !important; font-weight: 400 !important; line-height: 1 !important; /* * Important : * ne pas utiliser position: relative ni top. * vertical-align garde m² dans la zone du dégradé. */ position: static !important; top: auto !important; vertical-align: super !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; transition: none !important; } /* ================================================== SUFFIXE « Ans » ================================================== */ /* * Configuration Elementor : * * Suffixe : Ans * Classe : stat-card suffix-ans */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { display: inline-block !important; font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: 0.55em !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== ACCESSIBILITÉ ================================================== */ @media (prefers-reduced-motion: reduce) { .stat-card, .stat-card .elementor-counter { transition: none !important; } .stat-card:hover { transform: none !important; } } /* ================================================== AJUSTEMENTS D’ESPACEMENT ================================================== */ /* Rapproche le préfixe du nombre : +300 */ .stat-card .elementor-counter-number-prefix { margin-right: -0em !important; } /* Rapproche les suffixes classiques du nombre */ .stat-card .elementor-counter-number-suffix { margin-left: 0em !important; } /* ================================================== AJUSTEMENTS FINAUX DES SUFFIXES ================================================== */ /* m² : plus proche du k et nettement plus bas */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { margin-left: 0.08em !important; vertical-align: -0em !important; } /* Ans : plus proche du nombre et légèrement plus bas */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { margin-left: 0em !important; vertical-align: 0.25em !important; } /* ---- CARTE ---- */ .elementor-30 .elementor-element.elementor-element-f3dce4d .card-item { background-color: #EDEDE7; transition: background-color .35s ease; } .elementor-30 .elementor-element.elementor-element-f3dce4d .card-item:hover { background-color: #5F5D4C; } /* Titre + texte */ .elementor-30 .elementor-element.elementor-element-f3dce4d .card-item .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-f3dce4d .card-item p { transition: color .35s ease; } .elementor-30 .elementor-element.elementor-element-f3dce4d .card-item:hover .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-f3dce4d .card-item:hover p { color: #EDEDE7 !important; } /* ---- CARRÉ DE L'ICÔNE ---- */ .elementor-30 .elementor-element.elementor-element-f3dce4d .card-item .icone-wrap { position: relative; background-color: #DDDDD5; transition: background-color .35s ease; } .elementor-30 .elementor-element.elementor-element-f3dce4d .card-item:hover .icone-wrap { background-color: #3E3D30; } /* ---- SWAP DES 2 LOGOS ---- */ .elementor-30 .elementor-element.elementor-element-f3dce4d .icone-hover { display: none !important; } .elementor-30 .elementor-element.elementor-element-f3dce4d:hover .icone-normal { display: none !important; } .elementor-30 .elementor-element.elementor-element-f3dce4d:hover .icone-hover { display: block !important; } /* ---- TITRE + TEXTE ---- */ .elementor-30 .elementor-element.elementor-element-f3dce4d .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-f3dce4d .elementor-widget-text-editor, .elementor-30 .elementor-element.elementor-element-f3dce4d .elementor-widget-text-editor p { transition: color .35s ease; } .elementor-30 .elementor-element.elementor-element-f3dce4d:hover .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-f3dce4d:hover .elementor-widget-text-editor, .elementor-30 .elementor-element.elementor-element-f3dce4d:hover .elementor-widget-text-editor p { color: #EDEDE7 !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-8a1cfe8 *//* ================================================== CARTE STATISTIQUE — CONFIGURATION GÉNÉRALE ================================================== */ .stat-card { --stat-color-default: #393624c9; --stat-hover-start: #e2e0d4; --stat-hover-end: #e2e0d44d; --stat-gradient: linear-gradient( 90deg, var(--stat-color-default) 0%, var(--stat-color-default) 50%, var(--stat-hover-start) 50%, var(--stat-hover-end) 100% ); --stat-background-position: 0%; position: relative; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* ================================================== SURVOL ET FOCUS ================================================== */ .stat-card:hover, .stat-card:focus-within { --stat-background-position: 100%; } .stat-card:hover { transform: translateY(-4px); } /* ================================================== DÉGRADÉ UNIQUE SUR TOUT LE COMPTEUR ================================================== */ /* * Le dégradé est appliqué uniquement ici. * * Il couvre : * - le nombre ; * - le préfixe ; * - le suffixe ; * - le sous-suffixe m² ; * - le titre. */ .stat-card .elementor-counter { color: transparent !important; background-image: var(--stat-gradient) !important; background-size: 200% 100% !important; background-position: var(--stat-background-position) 50% !important; background-repeat: no-repeat !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; text-align: center !important; overflow: visible !important; transition: background-position 0.65s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* ================================================== ÉLÉMENTS INTERNES ================================================== */ /* * Les enfants héritent de la transparence du parent. * Aucun enfant ne possède son propre dégradé. */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix, .stat-card .elementor-counter-title, .stat-card .elementor-counter-number-suffix::after { color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; -webkit-text-fill-color: inherit !important; transition: none !important; } /* ================================================== WRAPPER DU NOMBRE ================================================== */ /* * Important : * ne pas utiliser display:flex ici. * * inline-block permet au dégradé du parent de couvrir * le nombre, le suffixe et le pseudo-élément m². */ .stat-card .elementor-counter-number-wrapper { display: inline-block !important; width: auto !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; text-align: center !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; } /* Les éléments restent côte à côte */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix { display: inline-block !important; width: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; padding: 0 !important; position: static !important; transform: none !important; vertical-align: baseline; white-space: nowrap !important; overflow: visible !important; } /* Masque uniquement le préfixe vide */ .stat-card .elementor-counter-number-prefix:empty { display: none !important; } /* ================================================== TITRE SOUS LE COMPTEUR ================================================== */ .stat-card .elementor-counter-title { display: block !important; width: 100% !important; text-align: center !important; overflow: visible !important; } /* ================================================== SUFFIXE CLASSIQUE Exemple : 15 Ans ================================================== */ .stat-card .elementor-counter-number-suffix { font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; /* * vertical-align remplace position/top. * Le suffixe reste inclus dans le dégradé du parent. */ vertical-align: 0.55em !important; position: static !important; top: auto !important; } /* ================================================== COMPTEUR SPÉCIAL : 80k m² ================================================== */ /* * Configuration Elementor : * * Nombre : 80 * Suffixe : k * Classe : stat-card suffix-k-m2 */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix, .stat-card .suffix-k-m2 .elementor-counter-number-suffix { display: inline-block !important; font-size: 1em !important; font-weight: inherit !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: baseline !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== AJOUT DE m² ================================================== */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { content: "m²" !important; display: inline-block !important; margin-left: 0em !important; padding: 0 !important; font-size: 0.32em !important; font-weight: 400 !important; line-height: 1 !important; /* * Important : * ne pas utiliser position: relative ni top. * vertical-align garde m² dans la zone du dégradé. */ position: static !important; top: auto !important; vertical-align: super !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; transition: none !important; } /* ================================================== SUFFIXE « Ans » ================================================== */ /* * Configuration Elementor : * * Suffixe : Ans * Classe : stat-card suffix-ans */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { display: inline-block !important; font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: 0.55em !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== ACCESSIBILITÉ ================================================== */ @media (prefers-reduced-motion: reduce) { .stat-card, .stat-card .elementor-counter { transition: none !important; } .stat-card:hover { transform: none !important; } } /* ================================================== AJUSTEMENTS D’ESPACEMENT ================================================== */ /* Rapproche le préfixe du nombre : +300 */ .stat-card .elementor-counter-number-prefix { margin-right: -0em !important; } /* Rapproche les suffixes classiques du nombre */ .stat-card .elementor-counter-number-suffix { margin-left: 0em !important; } /* ================================================== AJUSTEMENTS FINAUX DES SUFFIXES ================================================== */ /* m² : plus proche du k et nettement plus bas */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { margin-left: 0.08em !important; vertical-align: -0em !important; } /* Ans : plus proche du nombre et légèrement plus bas */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { margin-left: 0em !important; vertical-align: 0.25em !important; } /* ---- CARTE ---- */ .elementor-30 .elementor-element.elementor-element-8a1cfe8 .card-item { background-color: #EDEDE7; transition: background-color .35s ease; } .elementor-30 .elementor-element.elementor-element-8a1cfe8 .card-item:hover { background-color: #5F5D4C; } /* Titre + texte */ .elementor-30 .elementor-element.elementor-element-8a1cfe8 .card-item .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-8a1cfe8 .card-item p { transition: color .35s ease; } .elementor-30 .elementor-element.elementor-element-8a1cfe8 .card-item:hover .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-8a1cfe8 .card-item:hover p { color: #EDEDE7 !important; } /* ---- CARRÉ DE L'ICÔNE ---- */ .elementor-30 .elementor-element.elementor-element-8a1cfe8 .card-item .icone-wrap { position: relative; background-color: #DDDDD5; transition: background-color .35s ease; } .elementor-30 .elementor-element.elementor-element-8a1cfe8 .card-item:hover .icone-wrap { background-color: #3E3D30; } /* ---- SWAP DES 2 LOGOS ---- */ .elementor-30 .elementor-element.elementor-element-8a1cfe8 .icone-hover { display: none !important; } .elementor-30 .elementor-element.elementor-element-8a1cfe8:hover .icone-normal { display: none !important; } .elementor-30 .elementor-element.elementor-element-8a1cfe8:hover .icone-hover { display: block !important; } /* ---- TITRE + TEXTE ---- */ .elementor-30 .elementor-element.elementor-element-8a1cfe8 .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-8a1cfe8 .elementor-widget-text-editor, .elementor-30 .elementor-element.elementor-element-8a1cfe8 .elementor-widget-text-editor p { transition: color .35s ease; } .elementor-30 .elementor-element.elementor-element-8a1cfe8:hover .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-8a1cfe8:hover .elementor-widget-text-editor, .elementor-30 .elementor-element.elementor-element-8a1cfe8:hover .elementor-widget-text-editor p { color: #EDEDE7 !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-50ccd95 *//* ================================================== CARTE STATISTIQUE — CONFIGURATION GÉNÉRALE ================================================== */ .stat-card { --stat-color-default: #393624c9; --stat-hover-start: #e2e0d4; --stat-hover-end: #e2e0d44d; --stat-gradient: linear-gradient( 90deg, var(--stat-color-default) 0%, var(--stat-color-default) 50%, var(--stat-hover-start) 50%, var(--stat-hover-end) 100% ); --stat-background-position: 0%; position: relative; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* ================================================== SURVOL ET FOCUS ================================================== */ .stat-card:hover, .stat-card:focus-within { --stat-background-position: 100%; } .stat-card:hover { transform: translateY(-4px); } /* ================================================== DÉGRADÉ UNIQUE SUR TOUT LE COMPTEUR ================================================== */ /* * Le dégradé est appliqué uniquement ici. * * Il couvre : * - le nombre ; * - le préfixe ; * - le suffixe ; * - le sous-suffixe m² ; * - le titre. */ .stat-card .elementor-counter { color: transparent !important; background-image: var(--stat-gradient) !important; background-size: 200% 100% !important; background-position: var(--stat-background-position) 50% !important; background-repeat: no-repeat !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; text-align: center !important; overflow: visible !important; transition: background-position 0.65s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* ================================================== ÉLÉMENTS INTERNES ================================================== */ /* * Les enfants héritent de la transparence du parent. * Aucun enfant ne possède son propre dégradé. */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix, .stat-card .elementor-counter-title, .stat-card .elementor-counter-number-suffix::after { color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; -webkit-text-fill-color: inherit !important; transition: none !important; } /* ================================================== WRAPPER DU NOMBRE ================================================== */ /* * Important : * ne pas utiliser display:flex ici. * * inline-block permet au dégradé du parent de couvrir * le nombre, le suffixe et le pseudo-élément m². */ .stat-card .elementor-counter-number-wrapper { display: inline-block !important; width: auto !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; text-align: center !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; } /* Les éléments restent côte à côte */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix { display: inline-block !important; width: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; padding: 0 !important; position: static !important; transform: none !important; vertical-align: baseline; white-space: nowrap !important; overflow: visible !important; } /* Masque uniquement le préfixe vide */ .stat-card .elementor-counter-number-prefix:empty { display: none !important; } /* ================================================== TITRE SOUS LE COMPTEUR ================================================== */ .stat-card .elementor-counter-title { display: block !important; width: 100% !important; text-align: center !important; overflow: visible !important; } /* ================================================== SUFFIXE CLASSIQUE Exemple : 15 Ans ================================================== */ .stat-card .elementor-counter-number-suffix { font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; /* * vertical-align remplace position/top. * Le suffixe reste inclus dans le dégradé du parent. */ vertical-align: 0.55em !important; position: static !important; top: auto !important; } /* ================================================== COMPTEUR SPÉCIAL : 80k m² ================================================== */ /* * Configuration Elementor : * * Nombre : 80 * Suffixe : k * Classe : stat-card suffix-k-m2 */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix, .stat-card .suffix-k-m2 .elementor-counter-number-suffix { display: inline-block !important; font-size: 1em !important; font-weight: inherit !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: baseline !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== AJOUT DE m² ================================================== */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { content: "m²" !important; display: inline-block !important; margin-left: 0em !important; padding: 0 !important; font-size: 0.32em !important; font-weight: 400 !important; line-height: 1 !important; /* * Important : * ne pas utiliser position: relative ni top. * vertical-align garde m² dans la zone du dégradé. */ position: static !important; top: auto !important; vertical-align: super !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; transition: none !important; } /* ================================================== SUFFIXE « Ans » ================================================== */ /* * Configuration Elementor : * * Suffixe : Ans * Classe : stat-card suffix-ans */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { display: inline-block !important; font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: 0.55em !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== ACCESSIBILITÉ ================================================== */ @media (prefers-reduced-motion: reduce) { .stat-card, .stat-card .elementor-counter { transition: none !important; } .stat-card:hover { transform: none !important; } } /* ================================================== AJUSTEMENTS D’ESPACEMENT ================================================== */ /* Rapproche le préfixe du nombre : +300 */ .stat-card .elementor-counter-number-prefix { margin-right: -0em !important; } /* Rapproche les suffixes classiques du nombre */ .stat-card .elementor-counter-number-suffix { margin-left: 0em !important; } /* ================================================== AJUSTEMENTS FINAUX DES SUFFIXES ================================================== */ /* m² : plus proche du k et nettement plus bas */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { margin-left: 0.08em !important; vertical-align: -0em !important; } /* Ans : plus proche du nombre et légèrement plus bas */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { margin-left: 0em !important; vertical-align: 0.25em !important; } /* ---- CARTE ---- */ .elementor-30 .elementor-element.elementor-element-50ccd95 .card-item { background-color: #EDEDE7; transition: background-color .35s ease; } .elementor-30 .elementor-element.elementor-element-50ccd95 .card-item:hover { background-color: #5F5D4C; } /* Titre + texte */ .elementor-30 .elementor-element.elementor-element-50ccd95 .card-item .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-50ccd95 .card-item p { transition: color .35s ease; } .elementor-30 .elementor-element.elementor-element-50ccd95 .card-item:hover .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-50ccd95 .card-item:hover p { color: #EDEDE7 !important; } /* ---- CARRÉ DE L'ICÔNE ---- */ .elementor-30 .elementor-element.elementor-element-50ccd95 .card-item .icone-wrap { position: relative; background-color: #DDDDD5; transition: background-color .35s ease; } .elementor-30 .elementor-element.elementor-element-50ccd95 .card-item:hover .icone-wrap { background-color: #3E3D30; } /* ---- SWAP DES 2 LOGOS ---- */ .elementor-30 .elementor-element.elementor-element-50ccd95 .icone-hover { display: none !important; } .elementor-30 .elementor-element.elementor-element-50ccd95:hover .icone-normal { display: none !important; } .elementor-30 .elementor-element.elementor-element-50ccd95:hover .icone-hover { display: block !important; } /* ---- TITRE + TEXTE ---- */ .elementor-30 .elementor-element.elementor-element-50ccd95 .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-50ccd95 .elementor-widget-text-editor, .elementor-30 .elementor-element.elementor-element-50ccd95 .elementor-widget-text-editor p { transition: color .35s ease; } .elementor-30 .elementor-element.elementor-element-50ccd95:hover .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-50ccd95:hover .elementor-widget-text-editor, .elementor-30 .elementor-element.elementor-element-50ccd95:hover .elementor-widget-text-editor p { color: #EDEDE7 !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-eabea42 *//* ================================================== CARTE STATISTIQUE — CONFIGURATION GÉNÉRALE ================================================== */ .stat-card { --stat-color-default: #393624c9; --stat-hover-start: #e2e0d4; --stat-hover-end: #e2e0d44d; --stat-gradient: linear-gradient( 90deg, var(--stat-color-default) 0%, var(--stat-color-default) 50%, var(--stat-hover-start) 50%, var(--stat-hover-end) 100% ); --stat-background-position: 0%; position: relative; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* ================================================== SURVOL ET FOCUS ================================================== */ .stat-card:hover, .stat-card:focus-within { --stat-background-position: 100%; } .stat-card:hover { transform: translateY(-4px); } /* ================================================== DÉGRADÉ UNIQUE SUR TOUT LE COMPTEUR ================================================== */ /* * Le dégradé est appliqué uniquement ici. * * Il couvre : * - le nombre ; * - le préfixe ; * - le suffixe ; * - le sous-suffixe m² ; * - le titre. */ .stat-card .elementor-counter { color: transparent !important; background-image: var(--stat-gradient) !important; background-size: 200% 100% !important; background-position: var(--stat-background-position) 50% !important; background-repeat: no-repeat !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; text-align: center !important; overflow: visible !important; transition: background-position 0.65s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* ================================================== ÉLÉMENTS INTERNES ================================================== */ /* * Les enfants héritent de la transparence du parent. * Aucun enfant ne possède son propre dégradé. */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix, .stat-card .elementor-counter-title, .stat-card .elementor-counter-number-suffix::after { color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; -webkit-text-fill-color: inherit !important; transition: none !important; } /* ================================================== WRAPPER DU NOMBRE ================================================== */ /* * Important : * ne pas utiliser display:flex ici. * * inline-block permet au dégradé du parent de couvrir * le nombre, le suffixe et le pseudo-élément m². */ .stat-card .elementor-counter-number-wrapper { display: inline-block !important; width: auto !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; text-align: center !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; } /* Les éléments restent côte à côte */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix { display: inline-block !important; width: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; padding: 0 !important; position: static !important; transform: none !important; vertical-align: baseline; white-space: nowrap !important; overflow: visible !important; } /* Masque uniquement le préfixe vide */ .stat-card .elementor-counter-number-prefix:empty { display: none !important; } /* ================================================== TITRE SOUS LE COMPTEUR ================================================== */ .stat-card .elementor-counter-title { display: block !important; width: 100% !important; text-align: center !important; overflow: visible !important; } /* ================================================== SUFFIXE CLASSIQUE Exemple : 15 Ans ================================================== */ .stat-card .elementor-counter-number-suffix { font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; /* * vertical-align remplace position/top. * Le suffixe reste inclus dans le dégradé du parent. */ vertical-align: 0.55em !important; position: static !important; top: auto !important; } /* ================================================== COMPTEUR SPÉCIAL : 80k m² ================================================== */ /* * Configuration Elementor : * * Nombre : 80 * Suffixe : k * Classe : stat-card suffix-k-m2 */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix, .stat-card .suffix-k-m2 .elementor-counter-number-suffix { display: inline-block !important; font-size: 1em !important; font-weight: inherit !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: baseline !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== AJOUT DE m² ================================================== */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { content: "m²" !important; display: inline-block !important; margin-left: 0em !important; padding: 0 !important; font-size: 0.32em !important; font-weight: 400 !important; line-height: 1 !important; /* * Important : * ne pas utiliser position: relative ni top. * vertical-align garde m² dans la zone du dégradé. */ position: static !important; top: auto !important; vertical-align: super !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; transition: none !important; } /* ================================================== SUFFIXE « Ans » ================================================== */ /* * Configuration Elementor : * * Suffixe : Ans * Classe : stat-card suffix-ans */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { display: inline-block !important; font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: 0.55em !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== ACCESSIBILITÉ ================================================== */ @media (prefers-reduced-motion: reduce) { .stat-card, .stat-card .elementor-counter { transition: none !important; } .stat-card:hover { transform: none !important; } } /* ================================================== AJUSTEMENTS D’ESPACEMENT ================================================== */ /* Rapproche le préfixe du nombre : +300 */ .stat-card .elementor-counter-number-prefix { margin-right: -0em !important; } /* Rapproche les suffixes classiques du nombre */ .stat-card .elementor-counter-number-suffix { margin-left: 0em !important; } /* ================================================== AJUSTEMENTS FINAUX DES SUFFIXES ================================================== */ /* m² : plus proche du k et nettement plus bas */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { margin-left: 0.08em !important; vertical-align: -0em !important; } /* Ans : plus proche du nombre et légèrement plus bas */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { margin-left: 0em !important; vertical-align: 0.25em !important; } /* ---- CARTE ---- */ .elementor-30 .elementor-element.elementor-element-eabea42 .card-item { background-color: #EDEDE7; transition: background-color .35s ease; } .elementor-30 .elementor-element.elementor-element-eabea42 .card-item:hover { background-color: #5F5D4C; } /* Titre + texte */ .elementor-30 .elementor-element.elementor-element-eabea42 .card-item .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-eabea42 .card-item p { transition: color .35s ease; } .elementor-30 .elementor-element.elementor-element-eabea42 .card-item:hover .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-eabea42 .card-item:hover p { color: #EDEDE7 !important; } /* ---- CARRÉ DE L'ICÔNE ---- */ .elementor-30 .elementor-element.elementor-element-eabea42 .card-item .icone-wrap { position: relative; background-color: #DDDDD5; transition: background-color .35s ease; } .elementor-30 .elementor-element.elementor-element-eabea42 .card-item:hover .icone-wrap { background-color: #3E3D30; } /* ---- SWAP DES 2 LOGOS ---- */ .elementor-30 .elementor-element.elementor-element-eabea42 .icone-hover { display: none !important; } .elementor-30 .elementor-element.elementor-element-eabea42:hover .icone-normal { display: none !important; } .elementor-30 .elementor-element.elementor-element-eabea42:hover .icone-hover { display: block !important; } /* ---- TITRE + TEXTE ---- */ .elementor-30 .elementor-element.elementor-element-eabea42 .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-eabea42 .elementor-widget-text-editor, .elementor-30 .elementor-element.elementor-element-eabea42 .elementor-widget-text-editor p { transition: color .35s ease; } .elementor-30 .elementor-element.elementor-element-eabea42:hover .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-eabea42:hover .elementor-widget-text-editor, .elementor-30 .elementor-element.elementor-element-eabea42:hover .elementor-widget-text-editor p { color: #EDEDE7 !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-f3dce4d *//* ================================================== CARTE STATISTIQUE — CONFIGURATION GÉNÉRALE ================================================== */ .stat-card { --stat-color-default: #393624c9; --stat-hover-start: #e2e0d4; --stat-hover-end: #e2e0d44d; --stat-gradient: linear-gradient( 90deg, var(--stat-color-default) 0%, var(--stat-color-default) 50%, var(--stat-hover-start) 50%, var(--stat-hover-end) 100% ); --stat-background-position: 0%; position: relative; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* ================================================== SURVOL ET FOCUS ================================================== */ .stat-card:hover, .stat-card:focus-within { --stat-background-position: 100%; } .stat-card:hover { transform: translateY(-4px); } /* ================================================== DÉGRADÉ UNIQUE SUR TOUT LE COMPTEUR ================================================== */ /* * Le dégradé est appliqué uniquement ici. * * Il couvre : * - le nombre ; * - le préfixe ; * - le suffixe ; * - le sous-suffixe m² ; * - le titre. */ .stat-card .elementor-counter { color: transparent !important; background-image: var(--stat-gradient) !important; background-size: 200% 100% !important; background-position: var(--stat-background-position) 50% !important; background-repeat: no-repeat !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; text-align: center !important; overflow: visible !important; transition: background-position 0.65s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* ================================================== ÉLÉMENTS INTERNES ================================================== */ /* * Les enfants héritent de la transparence du parent. * Aucun enfant ne possède son propre dégradé. */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix, .stat-card .elementor-counter-title, .stat-card .elementor-counter-number-suffix::after { color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; -webkit-text-fill-color: inherit !important; transition: none !important; } /* ================================================== WRAPPER DU NOMBRE ================================================== */ /* * Important : * ne pas utiliser display:flex ici. * * inline-block permet au dégradé du parent de couvrir * le nombre, le suffixe et le pseudo-élément m². */ .stat-card .elementor-counter-number-wrapper { display: inline-block !important; width: auto !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; text-align: center !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; } /* Les éléments restent côte à côte */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix { display: inline-block !important; width: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; padding: 0 !important; position: static !important; transform: none !important; vertical-align: baseline; white-space: nowrap !important; overflow: visible !important; } /* Masque uniquement le préfixe vide */ .stat-card .elementor-counter-number-prefix:empty { display: none !important; } /* ================================================== TITRE SOUS LE COMPTEUR ================================================== */ .stat-card .elementor-counter-title { display: block !important; width: 100% !important; text-align: center !important; overflow: visible !important; } /* ================================================== SUFFIXE CLASSIQUE Exemple : 15 Ans ================================================== */ .stat-card .elementor-counter-number-suffix { font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; /* * vertical-align remplace position/top. * Le suffixe reste inclus dans le dégradé du parent. */ vertical-align: 0.55em !important; position: static !important; top: auto !important; } /* ================================================== COMPTEUR SPÉCIAL : 80k m² ================================================== */ /* * Configuration Elementor : * * Nombre : 80 * Suffixe : k * Classe : stat-card suffix-k-m2 */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix, .stat-card .suffix-k-m2 .elementor-counter-number-suffix { display: inline-block !important; font-size: 1em !important; font-weight: inherit !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: baseline !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== AJOUT DE m² ================================================== */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { content: "m²" !important; display: inline-block !important; margin-left: 0em !important; padding: 0 !important; font-size: 0.32em !important; font-weight: 400 !important; line-height: 1 !important; /* * Important : * ne pas utiliser position: relative ni top. * vertical-align garde m² dans la zone du dégradé. */ position: static !important; top: auto !important; vertical-align: super !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; transition: none !important; } /* ================================================== SUFFIXE « Ans » ================================================== */ /* * Configuration Elementor : * * Suffixe : Ans * Classe : stat-card suffix-ans */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { display: inline-block !important; font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: 0.55em !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== ACCESSIBILITÉ ================================================== */ @media (prefers-reduced-motion: reduce) { .stat-card, .stat-card .elementor-counter { transition: none !important; } .stat-card:hover { transform: none !important; } } /* ================================================== AJUSTEMENTS D’ESPACEMENT ================================================== */ /* Rapproche le préfixe du nombre : +300 */ .stat-card .elementor-counter-number-prefix { margin-right: -0em !important; } /* Rapproche les suffixes classiques du nombre */ .stat-card .elementor-counter-number-suffix { margin-left: 0em !important; } /* ================================================== AJUSTEMENTS FINAUX DES SUFFIXES ================================================== */ /* m² : plus proche du k et nettement plus bas */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { margin-left: 0.08em !important; vertical-align: -0em !important; } /* Ans : plus proche du nombre et légèrement plus bas */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { margin-left: 0em !important; vertical-align: 0.25em !important; } /* ---- CARTE ---- */ .elementor-30 .elementor-element.elementor-element-f3dce4d .card-item { background-color: #EDEDE7; transition: background-color .35s ease; } .elementor-30 .elementor-element.elementor-element-f3dce4d .card-item:hover { background-color: #5F5D4C; } /* Titre + texte */ .elementor-30 .elementor-element.elementor-element-f3dce4d .card-item .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-f3dce4d .card-item p { transition: color .35s ease; } .elementor-30 .elementor-element.elementor-element-f3dce4d .card-item:hover .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-f3dce4d .card-item:hover p { color: #EDEDE7 !important; } /* ---- CARRÉ DE L'ICÔNE ---- */ .elementor-30 .elementor-element.elementor-element-f3dce4d .card-item .icone-wrap { position: relative; background-color: #DDDDD5; transition: background-color .35s ease; } .elementor-30 .elementor-element.elementor-element-f3dce4d .card-item:hover .icone-wrap { background-color: #3E3D30; } /* ---- SWAP DES 2 LOGOS ---- */ .elementor-30 .elementor-element.elementor-element-f3dce4d .icone-hover { display: none !important; } .elementor-30 .elementor-element.elementor-element-f3dce4d:hover .icone-normal { display: none !important; } .elementor-30 .elementor-element.elementor-element-f3dce4d:hover .icone-hover { display: block !important; } /* ---- TITRE + TEXTE ---- */ .elementor-30 .elementor-element.elementor-element-f3dce4d .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-f3dce4d .elementor-widget-text-editor, .elementor-30 .elementor-element.elementor-element-f3dce4d .elementor-widget-text-editor p { transition: color .35s ease; } .elementor-30 .elementor-element.elementor-element-f3dce4d:hover .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-f3dce4d:hover .elementor-widget-text-editor, .elementor-30 .elementor-element.elementor-element-f3dce4d:hover .elementor-widget-text-editor p { color: #EDEDE7 !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-8a1cfe8 *//* ================================================== CARTE STATISTIQUE — CONFIGURATION GÉNÉRALE ================================================== */ .stat-card { --stat-color-default: #393624c9; --stat-hover-start: #e2e0d4; --stat-hover-end: #e2e0d44d; --stat-gradient: linear-gradient( 90deg, var(--stat-color-default) 0%, var(--stat-color-default) 50%, var(--stat-hover-start) 50%, var(--stat-hover-end) 100% ); --stat-background-position: 0%; position: relative; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* ================================================== SURVOL ET FOCUS ================================================== */ .stat-card:hover, .stat-card:focus-within { --stat-background-position: 100%; } .stat-card:hover { transform: translateY(-4px); } /* ================================================== DÉGRADÉ UNIQUE SUR TOUT LE COMPTEUR ================================================== */ /* * Le dégradé est appliqué uniquement ici. * * Il couvre : * - le nombre ; * - le préfixe ; * - le suffixe ; * - le sous-suffixe m² ; * - le titre. */ .stat-card .elementor-counter { color: transparent !important; background-image: var(--stat-gradient) !important; background-size: 200% 100% !important; background-position: var(--stat-background-position) 50% !important; background-repeat: no-repeat !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; text-align: center !important; overflow: visible !important; transition: background-position 0.65s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* ================================================== ÉLÉMENTS INTERNES ================================================== */ /* * Les enfants héritent de la transparence du parent. * Aucun enfant ne possède son propre dégradé. */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix, .stat-card .elementor-counter-title, .stat-card .elementor-counter-number-suffix::after { color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; -webkit-text-fill-color: inherit !important; transition: none !important; } /* ================================================== WRAPPER DU NOMBRE ================================================== */ /* * Important : * ne pas utiliser display:flex ici. * * inline-block permet au dégradé du parent de couvrir * le nombre, le suffixe et le pseudo-élément m². */ .stat-card .elementor-counter-number-wrapper { display: inline-block !important; width: auto !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; text-align: center !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; } /* Les éléments restent côte à côte */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix { display: inline-block !important; width: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; padding: 0 !important; position: static !important; transform: none !important; vertical-align: baseline; white-space: nowrap !important; overflow: visible !important; } /* Masque uniquement le préfixe vide */ .stat-card .elementor-counter-number-prefix:empty { display: none !important; } /* ================================================== TITRE SOUS LE COMPTEUR ================================================== */ .stat-card .elementor-counter-title { display: block !important; width: 100% !important; text-align: center !important; overflow: visible !important; } /* ================================================== SUFFIXE CLASSIQUE Exemple : 15 Ans ================================================== */ .stat-card .elementor-counter-number-suffix { font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; /* * vertical-align remplace position/top. * Le suffixe reste inclus dans le dégradé du parent. */ vertical-align: 0.55em !important; position: static !important; top: auto !important; } /* ================================================== COMPTEUR SPÉCIAL : 80k m² ================================================== */ /* * Configuration Elementor : * * Nombre : 80 * Suffixe : k * Classe : stat-card suffix-k-m2 */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix, .stat-card .suffix-k-m2 .elementor-counter-number-suffix { display: inline-block !important; font-size: 1em !important; font-weight: inherit !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: baseline !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== AJOUT DE m² ================================================== */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { content: "m²" !important; display: inline-block !important; margin-left: 0em !important; padding: 0 !important; font-size: 0.32em !important; font-weight: 400 !important; line-height: 1 !important; /* * Important : * ne pas utiliser position: relative ni top. * vertical-align garde m² dans la zone du dégradé. */ position: static !important; top: auto !important; vertical-align: super !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; transition: none !important; } /* ================================================== SUFFIXE « Ans » ================================================== */ /* * Configuration Elementor : * * Suffixe : Ans * Classe : stat-card suffix-ans */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { display: inline-block !important; font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: 0.55em !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== ACCESSIBILITÉ ================================================== */ @media (prefers-reduced-motion: reduce) { .stat-card, .stat-card .elementor-counter { transition: none !important; } .stat-card:hover { transform: none !important; } } /* ================================================== AJUSTEMENTS D’ESPACEMENT ================================================== */ /* Rapproche le préfixe du nombre : +300 */ .stat-card .elementor-counter-number-prefix { margin-right: -0em !important; } /* Rapproche les suffixes classiques du nombre */ .stat-card .elementor-counter-number-suffix { margin-left: 0em !important; } /* ================================================== AJUSTEMENTS FINAUX DES SUFFIXES ================================================== */ /* m² : plus proche du k et nettement plus bas */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { margin-left: 0.08em !important; vertical-align: -0em !important; } /* Ans : plus proche du nombre et légèrement plus bas */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { margin-left: 0em !important; vertical-align: 0.25em !important; } /* ---- CARTE ---- */ .elementor-30 .elementor-element.elementor-element-8a1cfe8 .card-item { background-color: #EDEDE7; transition: background-color .35s ease; } .elementor-30 .elementor-element.elementor-element-8a1cfe8 .card-item:hover { background-color: #5F5D4C; } /* Titre + texte */ .elementor-30 .elementor-element.elementor-element-8a1cfe8 .card-item .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-8a1cfe8 .card-item p { transition: color .35s ease; } .elementor-30 .elementor-element.elementor-element-8a1cfe8 .card-item:hover .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-8a1cfe8 .card-item:hover p { color: #EDEDE7 !important; } /* ---- CARRÉ DE L'ICÔNE ---- */ .elementor-30 .elementor-element.elementor-element-8a1cfe8 .card-item .icone-wrap { position: relative; background-color: #DDDDD5; transition: background-color .35s ease; } .elementor-30 .elementor-element.elementor-element-8a1cfe8 .card-item:hover .icone-wrap { background-color: #3E3D30; } /* ---- SWAP DES 2 LOGOS ---- */ .elementor-30 .elementor-element.elementor-element-8a1cfe8 .icone-hover { display: none !important; } .elementor-30 .elementor-element.elementor-element-8a1cfe8:hover .icone-normal { display: none !important; } .elementor-30 .elementor-element.elementor-element-8a1cfe8:hover .icone-hover { display: block !important; } /* ---- TITRE + TEXTE ---- */ .elementor-30 .elementor-element.elementor-element-8a1cfe8 .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-8a1cfe8 .elementor-widget-text-editor, .elementor-30 .elementor-element.elementor-element-8a1cfe8 .elementor-widget-text-editor p { transition: color .35s ease; } .elementor-30 .elementor-element.elementor-element-8a1cfe8:hover .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-8a1cfe8:hover .elementor-widget-text-editor, .elementor-30 .elementor-element.elementor-element-8a1cfe8:hover .elementor-widget-text-editor p { color: #EDEDE7 !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-50ccd95 *//* ================================================== CARTE STATISTIQUE — CONFIGURATION GÉNÉRALE ================================================== */ .stat-card { --stat-color-default: #393624c9; --stat-hover-start: #e2e0d4; --stat-hover-end: #e2e0d44d; --stat-gradient: linear-gradient( 90deg, var(--stat-color-default) 0%, var(--stat-color-default) 50%, var(--stat-hover-start) 50%, var(--stat-hover-end) 100% ); --stat-background-position: 0%; position: relative; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* ================================================== SURVOL ET FOCUS ================================================== */ .stat-card:hover, .stat-card:focus-within { --stat-background-position: 100%; } .stat-card:hover { transform: translateY(-4px); } /* ================================================== DÉGRADÉ UNIQUE SUR TOUT LE COMPTEUR ================================================== */ /* * Le dégradé est appliqué uniquement ici. * * Il couvre : * - le nombre ; * - le préfixe ; * - le suffixe ; * - le sous-suffixe m² ; * - le titre. */ .stat-card .elementor-counter { color: transparent !important; background-image: var(--stat-gradient) !important; background-size: 200% 100% !important; background-position: var(--stat-background-position) 50% !important; background-repeat: no-repeat !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; text-align: center !important; overflow: visible !important; transition: background-position 0.65s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* ================================================== ÉLÉMENTS INTERNES ================================================== */ /* * Les enfants héritent de la transparence du parent. * Aucun enfant ne possède son propre dégradé. */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix, .stat-card .elementor-counter-title, .stat-card .elementor-counter-number-suffix::after { color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; -webkit-text-fill-color: inherit !important; transition: none !important; } /* ================================================== WRAPPER DU NOMBRE ================================================== */ /* * Important : * ne pas utiliser display:flex ici. * * inline-block permet au dégradé du parent de couvrir * le nombre, le suffixe et le pseudo-élément m². */ .stat-card .elementor-counter-number-wrapper { display: inline-block !important; width: auto !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; text-align: center !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; } /* Les éléments restent côte à côte */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix { display: inline-block !important; width: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; padding: 0 !important; position: static !important; transform: none !important; vertical-align: baseline; white-space: nowrap !important; overflow: visible !important; } /* Masque uniquement le préfixe vide */ .stat-card .elementor-counter-number-prefix:empty { display: none !important; } /* ================================================== TITRE SOUS LE COMPTEUR ================================================== */ .stat-card .elementor-counter-title { display: block !important; width: 100% !important; text-align: center !important; overflow: visible !important; } /* ================================================== SUFFIXE CLASSIQUE Exemple : 15 Ans ================================================== */ .stat-card .elementor-counter-number-suffix { font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; /* * vertical-align remplace position/top. * Le suffixe reste inclus dans le dégradé du parent. */ vertical-align: 0.55em !important; position: static !important; top: auto !important; } /* ================================================== COMPTEUR SPÉCIAL : 80k m² ================================================== */ /* * Configuration Elementor : * * Nombre : 80 * Suffixe : k * Classe : stat-card suffix-k-m2 */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix, .stat-card .suffix-k-m2 .elementor-counter-number-suffix { display: inline-block !important; font-size: 1em !important; font-weight: inherit !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: baseline !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== AJOUT DE m² ================================================== */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { content: "m²" !important; display: inline-block !important; margin-left: 0em !important; padding: 0 !important; font-size: 0.32em !important; font-weight: 400 !important; line-height: 1 !important; /* * Important : * ne pas utiliser position: relative ni top. * vertical-align garde m² dans la zone du dégradé. */ position: static !important; top: auto !important; vertical-align: super !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; transition: none !important; } /* ================================================== SUFFIXE « Ans » ================================================== */ /* * Configuration Elementor : * * Suffixe : Ans * Classe : stat-card suffix-ans */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { display: inline-block !important; font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: 0.55em !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== ACCESSIBILITÉ ================================================== */ @media (prefers-reduced-motion: reduce) { .stat-card, .stat-card .elementor-counter { transition: none !important; } .stat-card:hover { transform: none !important; } } /* ================================================== AJUSTEMENTS D’ESPACEMENT ================================================== */ /* Rapproche le préfixe du nombre : +300 */ .stat-card .elementor-counter-number-prefix { margin-right: -0em !important; } /* Rapproche les suffixes classiques du nombre */ .stat-card .elementor-counter-number-suffix { margin-left: 0em !important; } /* ================================================== AJUSTEMENTS FINAUX DES SUFFIXES ================================================== */ /* m² : plus proche du k et nettement plus bas */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { margin-left: 0.08em !important; vertical-align: -0em !important; } /* Ans : plus proche du nombre et légèrement plus bas */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { margin-left: 0em !important; vertical-align: 0.25em !important; } /* ---- CARTE ---- */ .elementor-30 .elementor-element.elementor-element-50ccd95 .card-item { background-color: #EDEDE7; transition: background-color .35s ease; } .elementor-30 .elementor-element.elementor-element-50ccd95 .card-item:hover { background-color: #5F5D4C; } /* Titre + texte */ .elementor-30 .elementor-element.elementor-element-50ccd95 .card-item .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-50ccd95 .card-item p { transition: color .35s ease; } .elementor-30 .elementor-element.elementor-element-50ccd95 .card-item:hover .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-50ccd95 .card-item:hover p { color: #EDEDE7 !important; } /* ---- CARRÉ DE L'ICÔNE ---- */ .elementor-30 .elementor-element.elementor-element-50ccd95 .card-item .icone-wrap { position: relative; background-color: #DDDDD5; transition: background-color .35s ease; } .elementor-30 .elementor-element.elementor-element-50ccd95 .card-item:hover .icone-wrap { background-color: #3E3D30; } /* ---- SWAP DES 2 LOGOS ---- */ .elementor-30 .elementor-element.elementor-element-50ccd95 .icone-hover { display: none !important; } .elementor-30 .elementor-element.elementor-element-50ccd95:hover .icone-normal { display: none !important; } .elementor-30 .elementor-element.elementor-element-50ccd95:hover .icone-hover { display: block !important; } /* ---- TITRE + TEXTE ---- */ .elementor-30 .elementor-element.elementor-element-50ccd95 .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-50ccd95 .elementor-widget-text-editor, .elementor-30 .elementor-element.elementor-element-50ccd95 .elementor-widget-text-editor p { transition: color .35s ease; } .elementor-30 .elementor-element.elementor-element-50ccd95:hover .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-50ccd95:hover .elementor-widget-text-editor, .elementor-30 .elementor-element.elementor-element-50ccd95:hover .elementor-widget-text-editor p { color: #EDEDE7 !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-eabea42 *//* ================================================== CARTE STATISTIQUE — CONFIGURATION GÉNÉRALE ================================================== */ .stat-card { --stat-color-default: #393624c9; --stat-hover-start: #e2e0d4; --stat-hover-end: #e2e0d44d; --stat-gradient: linear-gradient( 90deg, var(--stat-color-default) 0%, var(--stat-color-default) 50%, var(--stat-hover-start) 50%, var(--stat-hover-end) 100% ); --stat-background-position: 0%; position: relative; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* ================================================== SURVOL ET FOCUS ================================================== */ .stat-card:hover, .stat-card:focus-within { --stat-background-position: 100%; } .stat-card:hover { transform: translateY(-4px); } /* ================================================== DÉGRADÉ UNIQUE SUR TOUT LE COMPTEUR ================================================== */ /* * Le dégradé est appliqué uniquement ici. * * Il couvre : * - le nombre ; * - le préfixe ; * - le suffixe ; * - le sous-suffixe m² ; * - le titre. */ .stat-card .elementor-counter { color: transparent !important; background-image: var(--stat-gradient) !important; background-size: 200% 100% !important; background-position: var(--stat-background-position) 50% !important; background-repeat: no-repeat !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; text-align: center !important; overflow: visible !important; transition: background-position 0.65s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* ================================================== ÉLÉMENTS INTERNES ================================================== */ /* * Les enfants héritent de la transparence du parent. * Aucun enfant ne possède son propre dégradé. */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix, .stat-card .elementor-counter-title, .stat-card .elementor-counter-number-suffix::after { color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; -webkit-text-fill-color: inherit !important; transition: none !important; } /* ================================================== WRAPPER DU NOMBRE ================================================== */ /* * Important : * ne pas utiliser display:flex ici. * * inline-block permet au dégradé du parent de couvrir * le nombre, le suffixe et le pseudo-élément m². */ .stat-card .elementor-counter-number-wrapper { display: inline-block !important; width: auto !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; text-align: center !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; } /* Les éléments restent côte à côte */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix { display: inline-block !important; width: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; padding: 0 !important; position: static !important; transform: none !important; vertical-align: baseline; white-space: nowrap !important; overflow: visible !important; } /* Masque uniquement le préfixe vide */ .stat-card .elementor-counter-number-prefix:empty { display: none !important; } /* ================================================== TITRE SOUS LE COMPTEUR ================================================== */ .stat-card .elementor-counter-title { display: block !important; width: 100% !important; text-align: center !important; overflow: visible !important; } /* ================================================== SUFFIXE CLASSIQUE Exemple : 15 Ans ================================================== */ .stat-card .elementor-counter-number-suffix { font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; /* * vertical-align remplace position/top. * Le suffixe reste inclus dans le dégradé du parent. */ vertical-align: 0.55em !important; position: static !important; top: auto !important; } /* ================================================== COMPTEUR SPÉCIAL : 80k m² ================================================== */ /* * Configuration Elementor : * * Nombre : 80 * Suffixe : k * Classe : stat-card suffix-k-m2 */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix, .stat-card .suffix-k-m2 .elementor-counter-number-suffix { display: inline-block !important; font-size: 1em !important; font-weight: inherit !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: baseline !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== AJOUT DE m² ================================================== */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { content: "m²" !important; display: inline-block !important; margin-left: 0em !important; padding: 0 !important; font-size: 0.32em !important; font-weight: 400 !important; line-height: 1 !important; /* * Important : * ne pas utiliser position: relative ni top. * vertical-align garde m² dans la zone du dégradé. */ position: static !important; top: auto !important; vertical-align: super !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; transition: none !important; } /* ================================================== SUFFIXE « Ans » ================================================== */ /* * Configuration Elementor : * * Suffixe : Ans * Classe : stat-card suffix-ans */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { display: inline-block !important; font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: 0.55em !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== ACCESSIBILITÉ ================================================== */ @media (prefers-reduced-motion: reduce) { .stat-card, .stat-card .elementor-counter { transition: none !important; } .stat-card:hover { transform: none !important; } } /* ================================================== AJUSTEMENTS D’ESPACEMENT ================================================== */ /* Rapproche le préfixe du nombre : +300 */ .stat-card .elementor-counter-number-prefix { margin-right: -0em !important; } /* Rapproche les suffixes classiques du nombre */ .stat-card .elementor-counter-number-suffix { margin-left: 0em !important; } /* ================================================== AJUSTEMENTS FINAUX DES SUFFIXES ================================================== */ /* m² : plus proche du k et nettement plus bas */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { margin-left: 0.08em !important; vertical-align: -0em !important; } /* Ans : plus proche du nombre et légèrement plus bas */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { margin-left: 0em !important; vertical-align: 0.25em !important; } /* ---- CARTE ---- */ .elementor-30 .elementor-element.elementor-element-eabea42 .card-item { background-color: #EDEDE7; transition: background-color .35s ease; } .elementor-30 .elementor-element.elementor-element-eabea42 .card-item:hover { background-color: #5F5D4C; } /* Titre + texte */ .elementor-30 .elementor-element.elementor-element-eabea42 .card-item .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-eabea42 .card-item p { transition: color .35s ease; } .elementor-30 .elementor-element.elementor-element-eabea42 .card-item:hover .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-eabea42 .card-item:hover p { color: #EDEDE7 !important; } /* ---- CARRÉ DE L'ICÔNE ---- */ .elementor-30 .elementor-element.elementor-element-eabea42 .card-item .icone-wrap { position: relative; background-color: #DDDDD5; transition: background-color .35s ease; } .elementor-30 .elementor-element.elementor-element-eabea42 .card-item:hover .icone-wrap { background-color: #3E3D30; } /* ---- SWAP DES 2 LOGOS ---- */ .elementor-30 .elementor-element.elementor-element-eabea42 .icone-hover { display: none !important; } .elementor-30 .elementor-element.elementor-element-eabea42:hover .icone-normal { display: none !important; } .elementor-30 .elementor-element.elementor-element-eabea42:hover .icone-hover { display: block !important; } /* ---- TITRE + TEXTE ---- */ .elementor-30 .elementor-element.elementor-element-eabea42 .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-eabea42 .elementor-widget-text-editor, .elementor-30 .elementor-element.elementor-element-eabea42 .elementor-widget-text-editor p { transition: color .35s ease; } .elementor-30 .elementor-element.elementor-element-eabea42:hover .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-eabea42:hover .elementor-widget-text-editor, .elementor-30 .elementor-element.elementor-element-eabea42:hover .elementor-widget-text-editor p { color: #EDEDE7 !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-f3dce4d *//* ================================================== CARTE STATISTIQUE — CONFIGURATION GÉNÉRALE ================================================== */ .stat-card { --stat-color-default: #393624c9; --stat-hover-start: #e2e0d4; --stat-hover-end: #e2e0d44d; --stat-gradient: linear-gradient( 90deg, var(--stat-color-default) 0%, var(--stat-color-default) 50%, var(--stat-hover-start) 50%, var(--stat-hover-end) 100% ); --stat-background-position: 0%; position: relative; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* ================================================== SURVOL ET FOCUS ================================================== */ .stat-card:hover, .stat-card:focus-within { --stat-background-position: 100%; } .stat-card:hover { transform: translateY(-4px); } /* ================================================== DÉGRADÉ UNIQUE SUR TOUT LE COMPTEUR ================================================== */ /* * Le dégradé est appliqué uniquement ici. * * Il couvre : * - le nombre ; * - le préfixe ; * - le suffixe ; * - le sous-suffixe m² ; * - le titre. */ .stat-card .elementor-counter { color: transparent !important; background-image: var(--stat-gradient) !important; background-size: 200% 100% !important; background-position: var(--stat-background-position) 50% !important; background-repeat: no-repeat !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; text-align: center !important; overflow: visible !important; transition: background-position 0.65s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* ================================================== ÉLÉMENTS INTERNES ================================================== */ /* * Les enfants héritent de la transparence du parent. * Aucun enfant ne possède son propre dégradé. */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix, .stat-card .elementor-counter-title, .stat-card .elementor-counter-number-suffix::after { color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; -webkit-text-fill-color: inherit !important; transition: none !important; } /* ================================================== WRAPPER DU NOMBRE ================================================== */ /* * Important : * ne pas utiliser display:flex ici. * * inline-block permet au dégradé du parent de couvrir * le nombre, le suffixe et le pseudo-élément m². */ .stat-card .elementor-counter-number-wrapper { display: inline-block !important; width: auto !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; text-align: center !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; } /* Les éléments restent côte à côte */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix { display: inline-block !important; width: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; padding: 0 !important; position: static !important; transform: none !important; vertical-align: baseline; white-space: nowrap !important; overflow: visible !important; } /* Masque uniquement le préfixe vide */ .stat-card .elementor-counter-number-prefix:empty { display: none !important; } /* ================================================== TITRE SOUS LE COMPTEUR ================================================== */ .stat-card .elementor-counter-title { display: block !important; width: 100% !important; text-align: center !important; overflow: visible !important; } /* ================================================== SUFFIXE CLASSIQUE Exemple : 15 Ans ================================================== */ .stat-card .elementor-counter-number-suffix { font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; /* * vertical-align remplace position/top. * Le suffixe reste inclus dans le dégradé du parent. */ vertical-align: 0.55em !important; position: static !important; top: auto !important; } /* ================================================== COMPTEUR SPÉCIAL : 80k m² ================================================== */ /* * Configuration Elementor : * * Nombre : 80 * Suffixe : k * Classe : stat-card suffix-k-m2 */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix, .stat-card .suffix-k-m2 .elementor-counter-number-suffix { display: inline-block !important; font-size: 1em !important; font-weight: inherit !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: baseline !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== AJOUT DE m² ================================================== */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { content: "m²" !important; display: inline-block !important; margin-left: 0em !important; padding: 0 !important; font-size: 0.32em !important; font-weight: 400 !important; line-height: 1 !important; /* * Important : * ne pas utiliser position: relative ni top. * vertical-align garde m² dans la zone du dégradé. */ position: static !important; top: auto !important; vertical-align: super !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; transition: none !important; } /* ================================================== SUFFIXE « Ans » ================================================== */ /* * Configuration Elementor : * * Suffixe : Ans * Classe : stat-card suffix-ans */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { display: inline-block !important; font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: 0.55em !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== ACCESSIBILITÉ ================================================== */ @media (prefers-reduced-motion: reduce) { .stat-card, .stat-card .elementor-counter { transition: none !important; } .stat-card:hover { transform: none !important; } } /* ================================================== AJUSTEMENTS D’ESPACEMENT ================================================== */ /* Rapproche le préfixe du nombre : +300 */ .stat-card .elementor-counter-number-prefix { margin-right: -0em !important; } /* Rapproche les suffixes classiques du nombre */ .stat-card .elementor-counter-number-suffix { margin-left: 0em !important; } /* ================================================== AJUSTEMENTS FINAUX DES SUFFIXES ================================================== */ /* m² : plus proche du k et nettement plus bas */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { margin-left: 0.08em !important; vertical-align: -0em !important; } /* Ans : plus proche du nombre et légèrement plus bas */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { margin-left: 0em !important; vertical-align: 0.25em !important; } /* ---- CARTE ---- */ .elementor-30 .elementor-element.elementor-element-f3dce4d .card-item { background-color: #EDEDE7; transition: background-color .35s ease; } .elementor-30 .elementor-element.elementor-element-f3dce4d .card-item:hover { background-color: #5F5D4C; } /* Titre + texte */ .elementor-30 .elementor-element.elementor-element-f3dce4d .card-item .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-f3dce4d .card-item p { transition: color .35s ease; } .elementor-30 .elementor-element.elementor-element-f3dce4d .card-item:hover .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-f3dce4d .card-item:hover p { color: #EDEDE7 !important; } /* ---- CARRÉ DE L'ICÔNE ---- */ .elementor-30 .elementor-element.elementor-element-f3dce4d .card-item .icone-wrap { position: relative; background-color: #DDDDD5; transition: background-color .35s ease; } .elementor-30 .elementor-element.elementor-element-f3dce4d .card-item:hover .icone-wrap { background-color: #3E3D30; } /* ---- SWAP DES 2 LOGOS ---- */ .elementor-30 .elementor-element.elementor-element-f3dce4d .icone-hover { display: none !important; } .elementor-30 .elementor-element.elementor-element-f3dce4d:hover .icone-normal { display: none !important; } .elementor-30 .elementor-element.elementor-element-f3dce4d:hover .icone-hover { display: block !important; } /* ---- TITRE + TEXTE ---- */ .elementor-30 .elementor-element.elementor-element-f3dce4d .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-f3dce4d .elementor-widget-text-editor, .elementor-30 .elementor-element.elementor-element-f3dce4d .elementor-widget-text-editor p { transition: color .35s ease; } .elementor-30 .elementor-element.elementor-element-f3dce4d:hover .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-f3dce4d:hover .elementor-widget-text-editor, .elementor-30 .elementor-element.elementor-element-f3dce4d:hover .elementor-widget-text-editor p { color: #EDEDE7 !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-8a1cfe8 *//* ================================================== CARTE STATISTIQUE — CONFIGURATION GÉNÉRALE ================================================== */ .stat-card { --stat-color-default: #393624c9; --stat-hover-start: #e2e0d4; --stat-hover-end: #e2e0d44d; --stat-gradient: linear-gradient( 90deg, var(--stat-color-default) 0%, var(--stat-color-default) 50%, var(--stat-hover-start) 50%, var(--stat-hover-end) 100% ); --stat-background-position: 0%; position: relative; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* ================================================== SURVOL ET FOCUS ================================================== */ .stat-card:hover, .stat-card:focus-within { --stat-background-position: 100%; } .stat-card:hover { transform: translateY(-4px); } /* ================================================== DÉGRADÉ UNIQUE SUR TOUT LE COMPTEUR ================================================== */ /* * Le dégradé est appliqué uniquement ici. * * Il couvre : * - le nombre ; * - le préfixe ; * - le suffixe ; * - le sous-suffixe m² ; * - le titre. */ .stat-card .elementor-counter { color: transparent !important; background-image: var(--stat-gradient) !important; background-size: 200% 100% !important; background-position: var(--stat-background-position) 50% !important; background-repeat: no-repeat !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; text-align: center !important; overflow: visible !important; transition: background-position 0.65s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* ================================================== ÉLÉMENTS INTERNES ================================================== */ /* * Les enfants héritent de la transparence du parent. * Aucun enfant ne possède son propre dégradé. */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix, .stat-card .elementor-counter-title, .stat-card .elementor-counter-number-suffix::after { color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; -webkit-text-fill-color: inherit !important; transition: none !important; } /* ================================================== WRAPPER DU NOMBRE ================================================== */ /* * Important : * ne pas utiliser display:flex ici. * * inline-block permet au dégradé du parent de couvrir * le nombre, le suffixe et le pseudo-élément m². */ .stat-card .elementor-counter-number-wrapper { display: inline-block !important; width: auto !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; text-align: center !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; } /* Les éléments restent côte à côte */ .stat-card .elementor-counter-number, .stat-card .elementor-counter-number-prefix, .stat-card .elementor-counter-number-suffix { display: inline-block !important; width: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; padding: 0 !important; position: static !important; transform: none !important; vertical-align: baseline; white-space: nowrap !important; overflow: visible !important; } /* Masque uniquement le préfixe vide */ .stat-card .elementor-counter-number-prefix:empty { display: none !important; } /* ================================================== TITRE SOUS LE COMPTEUR ================================================== */ .stat-card .elementor-counter-title { display: block !important; width: 100% !important; text-align: center !important; overflow: visible !important; } /* ================================================== SUFFIXE CLASSIQUE Exemple : 15 Ans ================================================== */ .stat-card .elementor-counter-number-suffix { font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; /* * vertical-align remplace position/top. * Le suffixe reste inclus dans le dégradé du parent. */ vertical-align: 0.55em !important; position: static !important; top: auto !important; } /* ================================================== COMPTEUR SPÉCIAL : 80k m² ================================================== */ /* * Configuration Elementor : * * Nombre : 80 * Suffixe : k * Classe : stat-card suffix-k-m2 */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix, .stat-card .suffix-k-m2 .elementor-counter-number-suffix { display: inline-block !important; font-size: 1em !important; font-weight: inherit !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: baseline !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== AJOUT DE m² ================================================== */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { content: "m²" !important; display: inline-block !important; margin-left: 0em !important; padding: 0 !important; font-size: 0.32em !important; font-weight: 400 !important; line-height: 1 !important; /* * Important : * ne pas utiliser position: relative ni top. * vertical-align garde m² dans la zone du dégradé. */ position: static !important; top: auto !important; vertical-align: super !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-color: transparent !important; background-image: none !important; transition: none !important; } /* ================================================== SUFFIXE « Ans » ================================================== */ /* * Configuration Elementor : * * Suffixe : Ans * Classe : stat-card suffix-ans */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { display: inline-block !important; font-size: 0.35em !important; font-weight: inherit !important; line-height: 1 !important; margin-left: 0em !important; padding: 0 !important; position: static !important; top: auto !important; vertical-align: 0.55em !important; transform: none !important; white-space: nowrap !important; overflow: visible !important; color: inherit !important; -webkit-text-fill-color: inherit !important; background: none !important; background-image: none !important; } /* ================================================== ACCESSIBILITÉ ================================================== */ @media (prefers-reduced-motion: reduce) { .stat-card, .stat-card .elementor-counter { transition: none !important; } .stat-card:hover { transform: none !important; } } /* ================================================== AJUSTEMENTS D’ESPACEMENT ================================================== */ /* Rapproche le préfixe du nombre : +300 */ .stat-card .elementor-counter-number-prefix { margin-right: -0em !important; } /* Rapproche les suffixes classiques du nombre */ .stat-card .elementor-counter-number-suffix { margin-left: 0em !important; } /* ================================================== AJUSTEMENTS FINAUX DES SUFFIXES ================================================== */ /* m² : plus proche du k et nettement plus bas */ .stat-card.suffix-k-m2 .elementor-counter-number-suffix::after, .stat-card .suffix-k-m2 .elementor-counter-number-suffix::after { margin-left: 0.08em !important; vertical-align: -0em !important; } /* Ans : plus proche du nombre et légèrement plus bas */ .stat-card.suffix-ans .elementor-counter-number-suffix, .stat-card .suffix-ans .elementor-counter-number-suffix { margin-left: 0em !important; vertical-align: 0.25em !important; } /* ---- CARTE ---- */ .elementor-30 .elementor-element.elementor-element-8a1cfe8 .card-item { background-color: #EDEDE7; transition: background-color .35s ease; } .elementor-30 .elementor-element.elementor-element-8a1cfe8 .card-item:hover { background-color: #5F5D4C; } /* Titre + texte */ .elementor-30 .elementor-element.elementor-element-8a1cfe8 .card-item .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-8a1cfe8 .card-item p { transition: color .35s ease; } .elementor-30 .elementor-element.elementor-element-8a1cfe8 .card-item:hover .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-8a1cfe8 .card-item:hover p { color: #EDEDE7 !important; } /* ---- CARRÉ DE L'ICÔNE ---- */ .elementor-30 .elementor-element.elementor-element-8a1cfe8 .card-item .icone-wrap { position: relative; background-color: #DDDDD5; transition: background-color .35s ease; } .elementor-30 .elementor-element.elementor-element-8a1cfe8 .card-item:hover .icone-wrap { background-color: #3E3D30; } /* ---- SWAP DES 2 LOGOS ---- */ .elementor-30 .elementor-element.elementor-element-8a1cfe8 .icone-hover { display: none !important; } .elementor-30 .elementor-element.elementor-element-8a1cfe8:hover .icone-normal { display: none !important; } .elementor-30 .elementor-element.elementor-element-8a1cfe8:hover .icone-hover { display: block !important; } /* ---- TITRE + TEXTE ---- */ .elementor-30 .elementor-element.elementor-element-8a1cfe8 .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-8a1cfe8 .elementor-widget-text-editor, .elementor-30 .elementor-element.elementor-element-8a1cfe8 .elementor-widget-text-editor p { transition: color .35s ease; } .elementor-30 .elementor-element.elementor-element-8a1cfe8:hover .elementor-heading-title, .elementor-30 .elementor-element.elementor-element-8a1cfe8:hover .elementor-widget-text-editor, .elementor-30 .elementor-element.elementor-element-8a1cfe8:hover .elementor-widget-text-editor p { color: #EDEDE7 !important; }/* End custom CSS */ /* Start custom CSS for nested-carousel, class: .elementor-element-17dbb9f *//* Espace sous les cartes pour placer les flèches */ .elementor-30 .elementor-element.elementor-element-17dbb9f .swiper { padding-bottom: 60px; } /* Style général des deux flèches */ .elementor-30 .elementor-element.elementor-element-17dbb9f .elementor-swiper-button, .elementor-30 .elementor-element.elementor-element-17dbb9f .swiper-button-prev, .elementor-30 .elementor-element.elementor-element-17dbb9f .swiper-button-next { top: auto !important; bottom: 12px !important; width: 32px !important; height: 24px !important; margin: 0 !important; background: transparent !important; border: none !important; border-radius: 0 !important; color: transparent !important; box-shadow: none !important; transform: none !important; z-index: 10; } /* Masque les icônes Elementor d’origine */ .elementor-30 .elementor-element.elementor-element-17dbb9f .elementor-swiper-button i, .elementor-30 .elementor-element.elementor-element-17dbb9f .elementor-swiper-button svg { display: none !important; } /* Position en bas à gauche */ .elementor-30 .elementor-element.elementor-element-17dbb9f .elementor-swiper-button-prev, .elementor-30 .elementor-element.elementor-element-17dbb9f .swiper-button-prev { left: 0 !important; right: auto !important; } .elementor-30 .elementor-element.elementor-element-17dbb9f .elementor-swiper-button-next, .elementor-30 .elementor-element.elementor-element-17dbb9f .swiper-button-next { left: 68px !important; right: auto !important; } /* Trait horizontal */ .elementor-30 .elementor-element.elementor-element-17dbb9f .elementor-swiper-button-prev::before, .elementor-30 .elementor-element.elementor-element-17dbb9f .elementor-swiper-button-next::before, .elementor-30 .elementor-element.elementor-element-17dbb9f .swiper-button-prev::before, .elementor-30 .elementor-element.elementor-element-17dbb9f .swiper-button-next::before { content: "" !important; display: block !important; position: absolute; top: 50%; width: 24px; height: 1.5px; background-color: #77755F; transform: translateY(-50%); } /* Trait de la flèche gauche */ .elementor-30 .elementor-element.elementor-element-17dbb9f .elementor-swiper-button-prev::before, .elementor-30 .elementor-element.elementor-element-17dbb9f .swiper-button-prev::before { left: 4px; } /* Trait de la flèche droite */ .elementor-30 .elementor-element.elementor-element-17dbb9f .elementor-swiper-button-next::before, .elementor-30 .elementor-element.elementor-element-17dbb9f .swiper-button-next::before { right: 4px; } /* Pointe des flèches */ .elementor-30 .elementor-element.elementor-element-17dbb9f .elementor-swiper-button-prev::after, .elementor-30 .elementor-element.elementor-element-17dbb9f .elementor-swiper-button-next::after, .elementor-30 .elementor-element.elementor-element-17dbb9f .swiper-button-prev::after, .elementor-30 .elementor-element.elementor-element-17dbb9f .swiper-button-next::after { content: "" !important; display: block !important; position: absolute; top: 50%; width: 9px; height: 9px; border: solid #77755F; border-width: 0 1.5px 1.5px 0; } /* Pointe gauche */ .elementor-30 .elementor-element.elementor-element-17dbb9f .elementor-swiper-button-prev::after, .elementor-30 .elementor-element.elementor-element-17dbb9f .swiper-button-prev::after { left: 4px; transform: translateY(-50%) rotate(135deg); } /* Pointe droite */ .elementor-30 .elementor-element.elementor-element-17dbb9f .elementor-swiper-button-next::after, .elementor-30 .elementor-element.elementor-element-17dbb9f .swiper-button-next::after { right: 4px; transform: translateY(-50%) rotate(-45deg); } /* Animation au survol */ .elementor-30 .elementor-element.elementor-element-17dbb9f .elementor-swiper-button-prev, .elementor-30 .elementor-element.elementor-element-17dbb9f .elementor-swiper-button-next, .elementor-30 .elementor-element.elementor-element-17dbb9f .swiper-button-prev, .elementor-30 .elementor-element.elementor-element-17dbb9f .swiper-button-next { transition: opacity 0.25s ease !important; } .elementor-30 .elementor-element.elementor-element-17dbb9f .elementor-swiper-button-prev:hover, .elementor-30 .elementor-element.elementor-element-17dbb9f .elementor-swiper-button-next:hover, .elementor-30 .elementor-element.elementor-element-17dbb9f .swiper-button-prev:hover, .elementor-30 .elementor-element.elementor-element-17dbb9f .swiper-button-next:hover { opacity: 0.55; } /* ---- MOBILE ---- */ @media (max-width: 767px) { .elementor-30 .elementor-element.elementor-element-17dbb9f .elementor-swiper-button-prev, .elementor-30 .elementor-element.elementor-element-17dbb9f .swiper-button-prev { left: 10% !important; right: auto !important; } .elementor-30 .elementor-element.elementor-element-17dbb9f .elementor-swiper-button-next, .elementor-30 .elementor-element.elementor-element-17dbb9f .swiper-button-next { left: 80% !important; right: 0 !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-668f322 */.stats-carousel-wrapper { overflow: hidden; }/* End custom CSS */ /* Start Custom Fonts CSS */@font-face { font-family: 'Neue'; font-style: normal; font-weight: normal; font-display: auto; src: url('https://factory.perroquet.eu/wp-content/uploads/2026/07/NeueHaasDisplayThin.woff2') format('woff2'); } /* End Custom Fonts CSS */ /* Start Custom Fonts CSS */@font-face { font-family: 'Neue Roman'; font-style: normal; font-weight: normal; font-display: auto; src: url('https://factory.perroquet.eu/wp-content/uploads/2026/07/NeueHaasDisplayRoman.woff2') format('woff2'); } /* End Custom Fonts CSS */ /* Start Custom Fonts CSS */@font-face { font-family: 'test'; font-style: normal; font-weight: normal; font-display: auto; src: url('https://factory.perroquet.eu/wp-content/uploads/2026/07/PPFragment-SerifLight.woff2') format('woff2'); } /* End Custom Fonts CSS */