body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.media{display:flow-root}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both} @media (max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.audio_container audio{max-width:100%}.video_container video{max-width:100%;height:auto}.aspect,.responsive{position:relative;height:0}.aspect iframe,.responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%}.aspect--16\:9,.responsive.ratio-169{padding-bottom:56.25%}.aspect--16\:10,.responsive.ratio-1610{padding-bottom:62.5%}.aspect--21\:9,.responsive.ratio-219{padding-bottom:42.8571%}.aspect--4\:3,.responsive.ratio-43{padding-bottom:75%}.aspect--3\:2,.responsive.ratio-32{padding-bottom:66.6666%} .mobile_menu{position:fixed;z-index:100;display:none}.mobile_menu .inner{height:100%;background:#000;overflow-y:scroll}.mobile_menu.active.position_left{box-shadow:2px 0 5px 0 rgba(0,0,0,.5)}.mobile_menu.active.position_top{box-shadow:0 2px 5px 0 rgba(0,0,0,.5)}.mobile_menu.active.position_right{box-shadow:-2px 0 5px 0 rgba(0,0,0,.5)}.mobile_menu.active.position_bottom{box-shadow:0 -2px 5px 0 rgba(0,0,0,.5)}.mobile_menu.active.no_shadow{box-shadow:none!important}.mobile_menu_trigger{display:none}.mobile_menu_wrapper{position:relative;width:100%;overflow:hidden}.mobile_menu_overlay{position:fixed;top:0;left:0;width:100%;height:100vh;z-index:99}.mobile_menu_overlay.background{background:rgba(0,0,0,.5)}.mobile_menu li.submenu_hide>ul{display:none}.mobile_menu li.submenu_show>ul{display:block}body.ie8 .mobile_menu,body.ie8 .mobile_menu_trigger,body.ie9 .mobile_menu,body.ie9 .mobile_menu_trigger{display:none!important} .rsts-main,.rsts-main *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.rsts-header,.rsts-footer,.rsts-thumbs-header,.rsts-thumbs-footer{overflow:hidden}.rsts-view,.rsts-thumbs-view{position:relative}@media print{.rsts-view,.rsts-thumbs-view{position:static}}.rsts-crop,.rsts-thumbs-crop{position:relative;overflow:hidden}@media print{.rsts-crop,.rsts-thumbs-crop{position:static;overflow:visible;width:auto !important;height:auto !important;transform:none !important}}.rsts-slides,.rsts-slide,.rsts-thumbs-slides,.rsts-thumbs-slide{position:absolute;left:0;top:0}@media print{.rsts-slides,.rsts-slide,.rsts-thumbs-slides,.rsts-thumbs-slide{position:static;width:auto !important;height:auto !important;transform:none !important}.rsts-slides.rsts-slide-image img,.rsts-slides.rsts-slide-video img,.rsts-slides.rsts-thumbs-slide-image img,.rsts-slides.rsts-thumbs-slide-video img,.rsts-slide.rsts-slide-image img,.rsts-slide.rsts-slide-video img,.rsts-slide.rsts-thumbs-slide-image img,.rsts-slide.rsts-thumbs-slide-video img,.rsts-thumbs-slides.rsts-slide-image img,.rsts-thumbs-slides.rsts-slide-video img,.rsts-thumbs-slides.rsts-thumbs-slide-image img,.rsts-thumbs-slides.rsts-thumbs-slide-video img,.rsts-thumbs-slide.rsts-slide-image img,.rsts-thumbs-slide.rsts-slide-video img,.rsts-thumbs-slide.rsts-thumbs-slide-image img,.rsts-thumbs-slide.rsts-thumbs-slide-video img{width:100% !important;height:auto !important;margin:0 !important}}.rsts-slide,.rsts-thumbs-slide{overflow:hidden}@media print{.rsts-slide,.rsts-thumbs-slide{position:static}}.rsts-video-iframe,.rsts-thumbs-video-iframe{position:absolute;top:0;left:0;width:100%;height:100%}.rsts-type-slide .rsts-view,.rsts-thumbs-type-slide .rsts-thumbs-view{cursor:url("../../bundles/rocksolidslider/img/openhand.cur"),default;cursor:-webkit-grab;cursor:-moz-grab;cursor:-ms-grab;cursor:-o-grab;cursor:grab}.rsts-type-slide.rsts-dragging .rsts-view,.rsts-thumbs-type-slide.rsts-thumbs-dragging .rsts-thumbs-view{cursor:url("../../bundles/rocksolidslider/img/closedhand.cur"),default;cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:-ms-grabbing;cursor:-o-grabbing;cursor:grabbing;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.rsts-type-slide.rsts-dragging-disabled .rsts-view,.rsts-thumbs-type-slide.rsts-thumbs-dragging-disabled .rsts-thumbs-view{cursor:auto}@media print{.rsts-nav,.rsts-prev,.rsts-next,.rsts-overlay-prev,.rsts-overlay-next,.rsts-progress,.rsts-thumbs-nav,.rsts-thumbs-prev,.rsts-thumbs-next,.rsts-thumbs-overlay-prev,.rsts-thumbs-overlay-next,.rsts-thumbs-progress{display:none !important}} .rsts-skin-default.rsts-main{position:relative}.rsts-skin-default.rsts-type-fade .rsts-slide{background-color:#fff}.rsts-skin-default .rsts-caption{position:absolute;top:20px;left:20px;margin-right:20px;padding:5px 10px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;color:#fff;background-color:#000;background-color:rgba(0,0,0,0.4);filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity:0;-webkit-transform:translate(0, -20px);-moz-transform:translate(0, -20px);-ms-transform:translate(0, -20px);-o-transform:translate(0, -20px);transform:translate(0, -20px);-webkit-transition:opacity 0.5s,-webkit-transform 0.5s;-moz-transition:opacity 0.5s,-moz-transform 0.5s;-o-transition:opacity 0.5s,-o-transform 0.5s;transition:opacity 0.5s,transform 0.5s}.rsts-skin-default .rsts-active .rsts-caption{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);opacity:1;-webkit-transform:translate(0, 0);-moz-transform:translate(0, 0);-ms-transform:translate(0, 0);-o-transform:translate(0, 0);transform:translate(0, 0)}.rsts-skin-default .rsts-prev,.rsts-skin-default .rsts-next,.rsts-skin-default .rsts-video-play,.rsts-skin-default .rsts-video-stop,.rsts-skin-default .rsts-thumbs-prev,.rsts-skin-default .rsts-thumbs-next{position:absolute;right:55px;bottom:15px;overflow:hidden;width:30px;height:30px;border:1px solid #ccc;border:1px solid rgba(0,0,0,0.1);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;outline:none;line-height:0;text-align:center;text-decoration:none;text-indent:-9999px;-webkit-background-clip:padding;-moz-background-clip:padding;background-clip:padding-box;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAAAilBMVEUHBwg/QEF5enp5ensCAwQHCAhzdHUAAQEGBwh8fX37+/svMDBub3COjo9yc3NtbW709fWvsLDm5uba2trR0dEuLi6Pj4/Q0NDl5eXZ2toFBgfz8/MuLy/09PT29vb8/Pz6+vp7e3x0dXZzdHT4+Pj39/f9/v3+/v79/f3///8EBQb5+fkAAAD19fVMP6q+AAAALnRSTlOAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8hTP8QAAAJ1JREFUeNrV0lkPwiAMAOB53zrva2xOxQm0///vWZ4a1o3EN20gNPnSlFASRKVQIS2KFHPKaPvcH8St8WesXYzddVMIZn3NZ1tTZ9Y7QLa7MdfVWlgYZqk9lzML7VZPbGCdDsFekpI14GoN/fGoY6aqkbVaUvVg0lKN7v3wvcuwt/Tg5tIPRjA77I/i1dhX2dnEJnYq4vP+2a/4FX8AsSOXytKixMYAAAAASUVORK5CYII=');-webkit-box-shadow:0 0 2px rgba(0,0,0,0.1);-moz-box-shadow:0 0 2px rgba(0,0,0,0.1);box-shadow:0 0 2px rgba(0,0,0,0.1);background-position:50% 50%;-webkit-transition:opacity 0.05s linear;-moz-transition:opacity 0.05s linear;-o-transition:opacity 0.05s linear;transition:opacity 0.05s linear}@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-device-pixel-ratio: 4 / 3), only screen and (min-device-pixel-ratio: 1.3){.rsts-skin-default .rsts-prev,.rsts-skin-default .rsts-next,.rsts-skin-default .rsts-video-play,.rsts-skin-default .rsts-video-stop,.rsts-skin-default .rsts-thumbs-prev,.rsts-skin-default .rsts-thumbs-next{background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAMAAAANIilAAAAAIVBMVEWhoaE7PD15enqVlpaTk5N2d3h0dHVoaWpmZmcGBwj19fXsWX/bAAAAC3RSTlOAgICAgICAgICAgMiF55wAAAB9SURBVHja7dUxEoAgFANRFBTw/ge2YythEivHn/6VmU3XiwUOHPhPuGYf196zjLHPOi0tWsBYtICx/Zxgw4INCzYs2LBgw4INC55ZFadhN+NVbeh9jhf6mGJDgw0NNjTY0GBDgz0NXusiYDRWwGisgNHFL0Yrnwxd4MCBtd3+EosAicYyWQAAAABJRU5ErkJggg==');background-size:30px,30px}}.rsts-skin-default .rsts-prev:hover,.rsts-skin-default .rsts-next:hover,.rsts-skin-default .rsts-video-play:hover,.rsts-skin-default .rsts-video-stop:hover,.rsts-skin-default .rsts-thumbs-prev:hover,.rsts-skin-default .rsts-thumbs-next:hover{background-color:#eee;background-color:rgba(238,238,238,0.7)}.rsts-skin-default .rsts-next,.rsts-skin-default .rsts-thumbs-next{right:20px;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAAAkFBMVEUBAQLPz9AlJiYlJifS0tIsLS0nJyjQ0dDR0tIBAQElJSYrLC2tra39/PwFBQYFBgf6+fmBgYKCgoL9/f339vZBQULIycnIyMiCg4PR0dEmJycmJyjMzMz8/Pzl5eXj4+MCAwQGBwghIiP09PT7+/shIiL6+vrNzs7Nzc0iIyP29vb39/cHCAkAAAD////19fV/WdL3AAAAMHRSTlOAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICRnvRdAAAAnklEQVR42tXSxw7CMAwG4LL3XqUtLdRQqNPY7/92WEJVDhkSN7B8iPTpl6M4ETMAA0t/ChmwPTELe+uPGKsQKywWflYUJxn5eI9xpOsneXidp7pp3Wa+dHrGbWY6d43bLD673nR9vLsZaL5cNfoAyp0eDyRdntxp6icy+/Ei981HqVGLq3xo1GaFm4kuRb1vvp1mFNzYLrzvn/2KX/MbXNOe099MDj0AAAAASUVORK5CYII=')}@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-device-pixel-ratio: 4 / 3), only screen and (min-device-pixel-ratio: 1.3){.rsts-skin-default .rsts-next,.rsts-skin-default .rsts-thumbs-next{background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAMAAAANIilAAAAAHlBMVEWhoaE7PD2VlpaTk5N2d3h0dHVoaWpmZmcGBwj19fXtfGSSAAAACnRSTlOAgICAgICAgICAXdxslAAAAHxJREFUeNrt1TEOgDAMxdDSAi33vzBbPVUoZkLE+1O2/HK9KHHixH/A9fS4jnGGMfZZl6VFBzAWHcLHQD9gocFCg4UGCw0WGiw0WGjwum3qEsb7tH1xWViwsGBhwcKChQULC5Z2jRs2itHdfc+GjWB094vR+ieHLnHixK4bjyV89TB6vlgAAAAASUVORK5CYII=');background-size:30px,30px}}.rsts-skin-default .rsts-thumbs-prev,.rsts-skin-default .rsts-thumbs-next{position:absolute;top:50%;right:10px;margin-top:-15px}.rsts-skin-default .rsts-thumbs-prev{right:auto;left:10px}.rsts-skin-default.rsts-direction-y .rsts-prev{background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAAAbFBMVEUgISLDw8MgICGUlZaIiImSk5PCwsP9/f39/PyHh4iUlJWSkpLX2NgAAQIoKSkGBwgdHR7Ly8skJSYEBAXHyMj+/v739/ciIyMhIiImJyfNzc3S0tL8/Pz7+/v29vYHCAnNzs4AAAD////19fVh+HN2AAAAJHRSTlOAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIC401waAAAAiUlEQVR42uXRyQ7CMAwE0LC2QHfaQkji1sP//yNR1csEiXMlfPFI7zCWbN7JCCVmnj9i738x2hbMpHPTzCAmfag+XyAmrWt2QzqV5URuSLWqdHXmsDMRbFHYuPbnkPBw0rtaBzgbw21IWPKjdg6xxHV68ZJ2j9mhXyrRX/34fblgLQyQLf57S/wBI9V2nx3O9QoAAAAASUVORK5CYII=')}@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-device-pixel-ratio: 4 / 3), only screen and (min-device-pixel-ratio: 1.3){.rsts-skin-default.rsts-direction-y .rsts-prev{background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAMAAAANIilAAAAAG1BMVEWjpKQ5OTqVlpaTk5NmZmdoaWp2d3gGBwj19fXoTOf7AAAACXRSTlOAgICAgICAgIC7HeZcAAAAeUlEQVR42u3UMQ6AMAzF0A8BmvufGHVpyOIOFRJI8f5WyxcqXLhw4U9jLeCznYzRNtYi2zsIs2UttqzFlrXYshZb1mLLWmg31iJ7+YVaaJ210GY9x/awWdsc+z5s1uaEQ4cNbY449LChzQFn3W3S9qsBFi5cuPDr+AYQcW8C6kiUiAAAAABJRU5ErkJggg==');background-size:30px,30px}}.rsts-skin-default.rsts-direction-y .rsts-next{background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAAAbFBMVEUwMTKKi4suLzAGBwja2trR0dEwMDEuLi/Q0NDZ2dmJiYp7e3x6e3t/gIEAAQL09PTn5+f6+vr8/Px0dHVwcHH8/f329vYFBgdzdHT+/v79/v339/f9/f3///90dXb4+Pj5+fkEBQYAAAD19fUC5l8BAAAAJHRSTlOAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIC401waAAAAnElEQVR42uXSyQ4CIQwG4HEddRZmZUSEQnn/d7RkSAi4HI2Jf6AlfIceoHCOMcccrTXcMR5OtInf5k/YyLVL84qHjoHvwLrhmdW+0AJIhT6eVc79YYtYCQBRIZanPmO1QWuxVqr2/aIylqD9fdP4OoLMZ5sb+dK2i8Xr3cTZie+CRk49aOTUcSRNOfo8TXPUnB1QPj0J5z/5Hb7OD7UPdeTEuFeXAAAAAElFTkSuQmCC')}@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-device-pixel-ratio: 4 / 3), only screen and (min-device-pixel-ratio: 1.3){.rsts-skin-default.rsts-direction-y .rsts-next{background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAMAAAANIilAAAAAG1BMVEWjpKQ5OTqVlpaTk5NmZmdoaWp2d3gGBwj19fXoTOf7AAAACXRSTlOAgICAgICAgIC7HeZcAAAAg0lEQVR42u3UMQ6EMAxE0WVDYu5/YhpLXzBSRkAF8i9tvXZ+24MKFy5c+HP4P06H0RzGRoyjjWgOY1Nj0YLFpsaip7hFNrBog3ug02brDKsWK3imxQqe6EWsxWi1HqOxHqONBTuN9RiN9Vg11mPVWI9V99tL0rEe6/dVA1i4cOHCl9oBak1vAkBKLfwAAAAASUVORK5CYII=');background-size:30px,30px}}.rsts-skin-default.rsts-video-playing .rsts-nav,.rsts-skin-default.rsts-video-playing .rsts-prev,.rsts-skin-default.rsts-video-playing .rsts-next{display:none}.rsts-skin-default.rsts-video-playing .rsts-nav-thumbs{display:block}.rsts-skin-default.rsts-touch .rsts-nav-numbers,.rsts-skin-default.rsts-touch .rsts-nav-tabs{display:none}.rsts-skin-default .rsts-nav{position:absolute;right:95px;bottom:12px;left:10px;text-align:right}.rsts-skin-default .rsts-nav ul{margin:0 !important;padding:0 !important}.rsts-skin-default .rsts-nav li{display:inline}.rsts-skin-default .rsts-nav-numbers a,.rsts-skin-default .rsts-nav-tabs a{display:inline-block;height:30px;min-width:30px;padding:0.65em 0.5em 0.5em;margin:0 2px 3px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;outline:none;font-size:12px;text-align:center;text-decoration:none;color:#fff;background-color:#555;background-color:rgba(85,85,85,0.6);-webkit-background-clip:padding;-moz-background-clip:padding;background-clip:padding-box;-webkit-box-shadow:0 0 2px rgba(0,0,0,0.2);-moz-box-shadow:0 0 2px rgba(0,0,0,0.2);box-shadow:0 0 2px rgba(0,0,0,0.2);filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity:0;-webkit-transition:opacity 0.2s ease-in;-moz-transition:opacity 0.2s ease-in;-o-transition:opacity 0.2s ease-in;transition:opacity 0.2s ease-in}.rsts-skin-default .rsts-nav-numbers a:hover,.rsts-skin-default .rsts-nav-numbers a.active,.rsts-skin-default .rsts-nav-tabs a:hover,.rsts-skin-default .rsts-nav-tabs a.active{color:#333;background-color:#fff;background-color:rgba(255,255,255,0.5)}.rsts-skin-default:hover .rsts-nav-numbers a,.rsts-skin-default:hover .rsts-nav-tabs a{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);opacity:1}.rsts-skin-default .rsts-nav-bullets{line-height:0}.rsts-skin-default .rsts-nav-bullets a{display:inline-block;width:9px;height:9px;overflow:hidden;margin:12px 4px;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;outline:none;text-align:left;text-indent:-999px;background-color:#fff;background-color:rgba(255,255,255,0.8);-webkit-background-clip:padding;-moz-background-clip:padding;background-clip:padding-box;-webkit-box-shadow:0 0 2px #777;-moz-box-shadow:0 0 2px #777;box-shadow:0 0 2px #777}.rsts-skin-default .rsts-nav-bullets a:hover,.rsts-skin-default .rsts-nav-bullets a.active{background-color:#777;-webkit-box-shadow:inset 0 2px 0 -1px rgba(255,255,255,0.5),inset 0 -2px 0 -1px rgba(0,0,0,0.3),0 0 0 1px #555;-moz-box-shadow:inset 0 2px 0 -1px rgba(255,255,255,0.5),inset 0 -2px 0 -1px rgba(0,0,0,0.3),0 0 0 1px #555;box-shadow:inset 0 2px 0 -1px rgba(255,255,255,0.5),inset 0 -2px 0 -1px rgba(0,0,0,0.3),0 0 0 1px #555}.rsts-skin-default .rsts-nav-thumbs{position:static;padding-top:5px}.rsts-skin-default .rsts-nav .rsts-nav-prev,.rsts-skin-default .rsts-nav .rsts-nav-next{display:none}.rsts-skin-default .rsts-video-play{top:50%;right:auto;bottom:auto;left:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border:none;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABGCAMAAABG8BK2AAAAb1BMVEU4ODgGBgbx8fGurq7i4uIODg5QUFD7+/vBwcEUFBQYGBggICC1tbXNzc0JCQkVFRWsrKwTExPExMTS0tImJibv7+9KSkozMzP4+PhYWFj+/v6Dg4MDAwPl5eVycnKenp4MDAza2toPDw////8AAACZ5/RyAAAAJXRSTlOAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAwmBGiwAAALNJREFUeNrt1kcOwkAQRFFyxsYmBxtDc/8zIrGpA/xaWKhnO9KT5ncvZvCxnGSSSSaZv2GK0sIsFzMHM53MWwPzfkU8OwsT9cHCRHOyMHFpLYwCIUaBEKNAiFEgxCgQYhSIMQrEGAXijAJxJrZrC7NZGZjb/WF41PHqSLw/Owa+q9D6KQthlAUwykIYZSGMsiBGWRCjLIhRFsQoC2Ga0S8LZMqx7gAzLPr0aUsmmWSS6SXzBf8cqwAv1zglAAAAAElFTkSuQmCC')}@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-device-pixel-ratio: 4 / 3), only screen and (min-device-pixel-ratio: 1.3){.rsts-skin-default .rsts-video-play{background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIwAAACMCAMAAACZHrEMAAAARVBMVEUJCQlOTk4nJyddXV1gYGD29vbh4eGTk5PAwMA2NjYYGBgGBga3t7dUVFQtLS0SEhKHh4fb29sDAwPz8/NaWlr///8AAACZTZFgAAAAF3RSTlOAgICAgICAgICAgICAgICAgICAgICAgCZn8kAAAAFfSURBVHja7dpZUsMwFAVR5gDRLMT+l8r1Cqjih/5oLyB1kurYlp4evkGXGDFixIgRI0aMGDFixIgRI0aMGDFifseQvsBfPvjrdgdhzvsnCHPePkCY8/oCwpxzu4MwCQeESTggTMIBYa5wQJiEA8IkHBAm4YAwVzggTMIBYRIOCJNwQJgrHBAm4YAwCQeESTggzBUOCJNwQJiEA8IkHBDmCgeESTggTMIBYRIOCHOFA8IkHBAm4YAw5/UZhDn7iYOZjfPLlM5pZizMv2lXzk1vNs4duHTOs2kszFN7V87L1WycN73SOe/AY2FWB7tyFnGzcVaUpXPW2mNhdiF25WwWzcbZuSqds6c3Fma3c1fOpvRsnB3y0jmzg7EwU5VdOcOv2TiTuNI5M8qxMNPbXTlD9tk4E//SOWchxsKcEnmsoMM8qGNOYsRgLjFixIgRI0aMGDFixIgRI0aMGDH/e/0Ai4OJ2+ZcrkwAAAAASUVORK5CYII=');background-size:70px,70px}}.rsts-skin-default .rsts-video-stop{top:20px;right:20px;left:auto;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAAAbFBMVEWnp6dOTk7x8fHv7+9HR0fw8PDu7u7e3t5NTU3f398UFBQTExP4+PhLS0tvb29xcXH09PRJSUn39/fn5+cWFhampqb29vZISEhMTExLS0ukpKT////r6+sAAAD///8AAABKSkr19fUAAAD///8df9PJAAAAJHRSTlN6e35+e35+e3t7fX1/fHl5fXt/e315fnt7e3p/foGBfnt9gIDdofLFAAAAk0lEQVR42u2SSQ7DIAxF03nKPBEC2Ni9/x3jsMXqsuqiljxITx/8EcX7Y/wxuOmUhmPhIMdlg4akzxGbMscrBu4IyHLANce+Ymb7WKRWPsdyqpCnZJzVzUmUEgvpxmAYA4dxAB3TIanvupqisJdkRwr2O403K9V43bdpgaLuu6/x3KY7sO7VN7+m4TI5+K3v8H28AYM7doAzbo6MAAAAAElFTkSuQmCC')}@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-device-pixel-ratio: 4 / 3), only screen and (min-device-pixel-ratio: 1.3){.rsts-skin-default .rsts-video-stop{background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAMAAAANIilAAAAALVBMVEXo6OjGxsZjY2PKysq3t7ewsLCOjo7f39+Pj4/l5eVfX19hYWHj4+NRUVH///80A/15AAAAD3RSTlOGkL2PlZemiKWHvr2HyICcCOzTAAAAv0lEQVR42u3VSQ7DIAxA0bRJSBjs+x83mzYfNnatLqpKeM0THmRY9IuYeOKJJ7bwlsdTWwCfUpsS+Smni7EipfVW5PQwtte5iqAdvIvcGiuy25gs0e1ta7YwuqJ76+NRr6P1MbkSTM7HaKyP0QXK1HyMxgaxrjde1cBe1TV4MzZeMxYdm7OvF9OWR7H0YtpDG/ojnDurnc6hfT7Iw9tnImE7ney00bdFJ3Uw+mXpQoq822Nv8/Yf383EE0/8G3wBfh3Bcn7dsMIAAAAASUVORK5CYII=');background-size:30px,30px}}.rsts-skin-default .rsts-video-youtube>.rsts-video-stop{top:25px}.rsts-skin-default .rsts-video-vimeo>.rsts-video-stop{top:10px;right:auto;left:10px}.rsts-skin-default .rsts-progress{position:absolute;top:0;right:0;width:100%;height:2px;background-color:#000;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity:0;-webkit-transition:opacity 0.2s linear;-moz-transition:opacity 0.2s linear;-o-transition:opacity 0.2s linear;transition:opacity 0.2s linear}.rsts-skin-default .rsts-progress div{height:100%;background-color:#fff}.rsts-skin-default .rsts-progress.rsts-progress-active{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=30);opacity:0.3}.rsts-skin-default .rsts-thumbs-slide{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);opacity:0.8}.rsts-skin-default .rsts-thumbs-slide.rsts-thumbs-active-thumb{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);opacity:1} /** * CLICKPRESS CSS-Grid * @author: Stefan Schulz-Lauterbach * * thanks to Dinko Skopljak for co-working */ .justify-items-start { justify-items: start; } .justify-items-center { justify-items: center; } .justify-items-end { justify-items: end; } .justify-items-stretch { justify-items: stretch; } .content-start { align-content: start; } .content-center { align-content: center; } .content-end { align-content: end; } .items-start { align-items: start; } .items-center { align-items: center; } .items-end { align-items: end; } .items-stretch { align-items: stretch; } .items-baseline { align-items: baseline; } [class*=grid_] { display: grid; grid-gap: 1rem; } [class*=grid_] > .block { margin-bottom: 0; } @media (min-width: 576px) { .grid_mobile_100 { grid-template-columns: 1fr; } .grid_mobile_50_50 { grid-template-columns: repeat(2, 1fr); } .grid_mobile_33_33_33 { grid-template-columns: repeat(3, 1fr); } .grid_mobile_25_25_25_25 { grid-template-columns: repeat(4, 1fr); } .grid_mobile_75_25 { grid-template-columns: 3fr 1fr; } .grid_mobile_25_75 { grid-template-columns: 1fr 3fr; } .grid_mobile_66_33 { grid-template-columns: 2fr 1fr; } .grid_mobile_33_66 { grid-template-columns: 1fr 2fr; } .grid_mobile_60_40 { grid-template-columns: 3fr 2fr; } .grid_mobile_40_60 { grid-template-columns: 2fr 3fr; } .grid_mobile_50_25_25 { grid-template-columns: 2fr 1fr 1fr; } .grid_mobile_25_50_25 { grid-template-columns: 1fr 2fr 1fr; } .grid_mobile_25_25_50 { grid-template-columns: 1fr 1fr 2fr; } .grid_mobile_40_30_30 { grid-template-columns: 4fr 3fr 3fr; } .grid_mobile_30_40_30 { grid-template-columns: 3fr 4fr 3fr; } .grid_mobile_30_30_40 { grid-template-columns: 3fr 3fr 4fr; } .gap_mobile_0 { grid-gap: 0; } .gap_mobile_1 { grid-gap: 1rem; } .gap_mobile_2 { grid-gap: 2rem; } .gap_mobile_3 { grid-gap: 3rem; } .gap_mobile_4 { grid-gap: 4rem; } .gap_mobile_5 { grid-gap: 5rem; } .gap_mobile_6 { grid-gap: 6rem; } .gap_mobile_7 { grid-gap: 7rem; } .gap_mobile_8 { grid-gap: 8rem; } .gap_mobile_9 { grid-gap: 9rem; } .gap_mobile_10 { grid-gap: 10rem; } .gap_mobile_11 { grid-gap: 11rem; } .gap_mobile_12 { grid-gap: 12rem; } } @media (min-width: 768px) { .grid_tablet_100 { grid-template-columns: 1fr; } .grid_tablet_50_50 { grid-template-columns: repeat(2, 1fr); } .grid_tablet_33_33_33 { grid-template-columns: repeat(3, 1fr); } .grid_tablet_25_25_25_25 { grid-template-columns: repeat(4, 1fr); } .grid_tablet_75_25 { grid-template-columns: 3fr 1fr; } .grid_tablet_25_75 { grid-template-columns: 1fr 3fr; } .grid_tablet_66_33 { grid-template-columns: 2fr 1fr; } .grid_tablet_33_66 { grid-template-columns: 1fr 2fr; } .grid_tablet_60_40 { grid-template-columns: 3fr 2fr; } .grid_tablet_40_60 { grid-template-columns: 2fr 3fr; } .grid_tablet_50_25_25 { grid-template-columns: 2fr 1fr 1fr; } .grid_tablet_25_50_25 { grid-template-columns: 1fr 2fr 1fr; } .grid_tablet_25_25_50 { grid-template-columns: 1fr 1fr 2fr; } .grid_tablet_40_30_30 { grid-template-columns: 4fr 3fr 3fr; } .grid_tablet_30_40_30 { grid-template-columns: 3fr 4fr 3fr; } .grid_tablet_30_30_40 { grid-template-columns: 3fr 3fr 4fr; } .grid_tablet_20_40_40 { grid-template-columns: 1fr 2fr 2fr; } .grid_tablet_40_20_40 { grid-template-columns: 2fr 1fr 2fr; } .grid_tablet_40_40_20 { grid-template-columns: 2fr 2fr 1fr; } .gap_tablet_0 { grid-gap: 0; } .gap_tablet_1 { grid-gap: 1rem; } .gap_tablet_2 { grid-gap: 2rem; } .gap_tablet_3 { grid-gap: 3rem; } .gap_tablet_4 { grid-gap: 4rem; } .gap_tablet_5 { grid-gap: 5rem; } .gap_tablet_6 { grid-gap: 6rem; } .gap_tablet_7 { grid-gap: 7rem; } .gap_tablet_8 { grid-gap: 8rem; } .gap_tablet_9 { grid-gap: 9rem; } .gap_tablet_10 { grid-gap: 10rem; } .gap_tablet_11 { grid-gap: 11rem; } .gap_tablet_12 { grid-gap: 12rem; } } @media (min-width: 992px) { .grid_desktop_100 { grid-template-columns: 1fr; } .grid_desktop_50_50 { grid-template-columns: repeat(2, 1fr); } .grid_desktop_50_25_25 { grid-template-columns: 2fr 1fr 1fr; } .grid_desktop_33_33_33 { grid-template-columns: repeat(3, 1fr); } .grid_desktop_75_25 { grid-template-columns: 3fr 1fr; } .grid_desktop_25_75 { grid-template-columns: 1fr 3fr; } .grid_desktop_66_33 { grid-template-columns: 2fr 1fr; } .grid_desktop_60_40 { grid-template-columns: 3fr 2fr; } .grid_desktop_40_60 { grid-template-columns: 2fr 3fr; } .grid_desktop_33_66 { grid-template-columns: 1fr 2fr; } .grid_desktop_50_25_25 { grid-template-columns: 2fr 1fr 1fr; } .grid_desktop_40_30_30 { grid-template-columns: 4fr 3fr 3fr; } .grid_desktop_50_25_25 { grid-template-columns: 2fr 1fr 1fr; } .grid_desktop_25_50_25 { grid-template-columns: 1fr 2fr 1fr; } .grid_desktop_25_25_50 { grid-template-columns: 1fr 1fr 2fr; } .grid_desktop_40_30_30 { grid-template-columns: 4fr 3fr 3fr; } .grid_desktop_30_40_30 { grid-template-columns: 3fr 4fr 3fr; } .grid_desktop_30_30_40 { grid-template-columns: 3fr 3fr 4fr; } .grid_desktop_20_40_40 { grid-template-columns: 1fr 2fr 2fr; } .grid_desktop_40_20_40 { grid-template-columns: 2fr 1fr 2fr; } .grid_desktop_40_40_20 { grid-template-columns: 2fr 2fr 1fr; } .grid_desktop_25_25_25_25 { grid-template-columns: repeat(4, 1fr); } .grid_desktop_40_20_20_20 { grid-template-columns: 2fr 1fr 1fr 1fr; } .grid_desktop_20_40_20_20 { grid-template-columns: 1fr 2fr 1fr 1fr; } .grid_desktop_20_20_40_20 { grid-template-columns: 1fr 1fr 2fr 1fr; } .grid_desktop_20_20_20_40 { grid-template-columns: 1fr 1fr 1fr 2fr; } .grid_desktop_20_20_20_20_20 { grid-template-columns: repeat(5, 1fr); } .gap_desktop_0 { grid-gap: 0; } .gap_desktop_1 { grid-gap: 1rem; } .gap_desktop_2 { grid-gap: 2rem; } .gap_desktop_3 { grid-gap: 3rem; } .gap_desktop_4 { grid-gap: 4rem; } .gap_desktop_5 { grid-gap: 5rem; } .gap_desktop_6 { grid-gap: 6rem; } .gap_desktop_7 { grid-gap: 7rem; } .gap_desktop_8 { grid-gap: 8rem; } .gap_desktop_9 { grid-gap: 9rem; } .gap_desktop_10 { grid-gap: 10rem; } .gap_desktop_11 { grid-gap: 11rem; } .gap_desktop_12 { grid-gap: 12rem; } } /*# sourceMappingURL=clickpress-grid.css.map */ #colorbox,#cboxOverlay,#cboxWrapper{position:absolute;top:0;left:0;z-index:9999;overflow:hidden;-webkit-transform:translate3d(0,0,0)}#cboxWrapper{max-width:none}#cboxOverlay{position:fixed;width:100%;height:100%}#cboxMiddleLeft,#cboxBottomLeft{clear:left}#cboxContent{position:relative}#cboxLoadedContent{overflow:auto;-webkit-overflow-scrolling:touch}#cboxTitle{margin:0}#cboxLoadingOverlay,#cboxLoadingGraphic{position:absolute;top:0;left:0;width:100%;height:100%}#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow{cursor:pointer}.cboxPhoto{float:left;margin:auto;border:0;display:block;max-width:none;-ms-interpolation-mode:bicubic}.cboxIframe{width:100%;height:100%;display:block;border:0;padding:0;margin:0}#colorbox,#cboxContent,#cboxLoadedContent{box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box}#cboxOverlay{background:#000;opacity:.9;filter:alpha(opacity = 90)}#colorbox{outline:0}#cboxContent{margin-top:20px;background:#000}.cboxIframe{background:#fff}#cboxError{padding:50px;border:1px solid #ccc}#cboxLoadedContent{border:5px solid #000;background:#fff}#cboxTitle{position:absolute;top:-20px;left:0;color:#ccc}#cboxCurrent{position:absolute;top:-20px;right:0;color:#ccc}#cboxLoadingGraphic{background:url(../../assets/colorbox/images/loading.gif) no-repeat center center}#cboxPrevious,#cboxNext,#cboxSlideshow,#cboxClose{border:0;padding:0;margin:0;overflow:visible;width:auto;background:0 0}#cboxPrevious:active,#cboxNext:active,#cboxSlideshow:active,#cboxClose:active{outline:0}#cboxSlideshow{position:absolute;top:-20px;right:90px;color:#fff}#cboxPrevious{position:absolute;top:50%;left:5px;margin-top:-32px;background:url(../../assets/colorbox/images/controls.png) no-repeat top left;width:28px;height:65px;text-indent:-9999px}#cboxPrevious:hover{background-position:bottom left}#cboxNext{position:absolute;top:50%;right:5px;margin-top:-32px;background:url(../../assets/colorbox/images/controls.png) no-repeat top right;width:28px;height:65px;text-indent:-9999px}#cboxNext:hover{background-position:bottom right}#cboxClose{position:absolute;top:5px;right:5px;display:block;background:url(../../assets/colorbox/images/controls.png) no-repeat top center;width:38px;height:19px;text-indent:-9999px}#cboxClose:hover{background-position:bottom center} table.sortable thead th{background-image:url(../../assets/tablesorter/images/default.svg);background-repeat:no-repeat;background-position:center right}table.sortable thead th.tablesorter-headerAsc{background-image:url(../../assets/tablesorter/images/asc.svg)}table.sortable thead th.tablesorter-headerDesc{background-image:url(../../assets/tablesorter/images/desc.svg)} .content-slider{overflow:hidden;visibility:hidden;position:relative}.slider-wrapper{overflow:hidden;position:relative}.slider-wrapper>*{float:left;width:100%;position:relative}.slider-control{height:30px;position:relative}.slider-control a,.slider-control .slider-menu{position:absolute;top:9px;display:inline-block}.slider-control .slider-prev{left:0}.slider-control .slider-next{right:0}.slider-control .slider-menu{top:0;width:50%;left:50%;margin-left:-25%;font-size:27px;text-align:center}.slider-control .slider-menu b{color:#bbb;cursor:pointer}.slider-control .slider-menu b.active{color:#666} /* === CSS Ouest Radiateurs - Style Moderne Multi-Couleurs === */ /* ======================================== 1. VARIABLES CSS ET RESET - NOUVELLE PALETTE ======================================== */ :root { /* Palette de couleurs élargie et harmonieuse */ --primary-blue: #3B82F6; --primary-dark: #1E40AF; --secondary-teal: #14B8A6; --accent-orange: #F97316; --accent-coral: #EF4444; --accent-purple: #8B5CF6; --warm-green: #10B981; --golden-yellow: #F59E0B; /* Couleurs neutres modernes */ --light-gray: #F8FAFC; --medium-gray: #E2E8F0; --dark-gray: #475569; --charcoal: #1E293B; --soft-white: #FEFEFE; /* Gradients signatures */ --gradient-primary: linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-teal) 100%); --gradient-warm: linear-gradient(135deg, var(--accent-orange) 0%, var(--golden-yellow) 100%); --gradient-cool: linear-gradient(135deg, var(--primary-blue) 0%, var(--accent-purple) 100%); --gradient-fresh: linear-gradient(135deg, var(--secondary-teal) 0%, var(--warm-green) 100%); --gradient-glass: rgba(255, 255, 255, 0.25); /* Nouvelles ombres plus douces */ --shadow-soft: 0 4px 20px rgba(59, 130, 246, 0.08); --shadow-medium: 0 8px 30px rgba(59, 130, 246, 0.12); --shadow-heavy: 0 20px 50px rgba(59, 130, 246, 0.15); --shadow-color: 0 10px 40px rgba(249, 115, 22, 0.2); /* Transitions et animations plus fluides */ --transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); --transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); --transition-bounce: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Rayons et espacements */ --radius: 16px; --radius-large: 24px; --radius-xl: 32px; --spacing-xs: 0.5rem; --spacing-sm: 1rem; --spacing-md: 1.5rem; --spacing-lg: 2rem; --spacing-xl: 3rem; } /* Reset moderne et amélioré */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif; background: linear-gradient(45deg, #f8fafc 0%, #e2e8f0 50%, #f1f5f9 100%); color: var(--charcoal); line-height: 1.7; overflow-x: hidden; position: relative; min-height: 100vh; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Fond animé subtil */ body::before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 25% 25%, rgba(59, 130, 246, 0.03) 0%, transparent 60%), radial-gradient(circle at 75% 75%, rgba(20, 184, 166, 0.03) 0%, transparent 60%), radial-gradient(circle at 50% 50%, rgba(249, 115, 22, 0.02) 0%, transparent 80%); pointer-events: none; z-index: 0; animation: floatBackground 20s ease-in-out infinite; } @keyframes floatBackground { 0%, 100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-10px) rotate(0.5deg); } } .invisible { display: none !important; } /* ======================================== 2. LAYOUTS GÉNÉRAUX AMÉLIORÉS ======================================== */ #wrapper { position: relative; z-index: 99; } #container { padding-top: 100px; transition: var(--transition-smooth); } .contenu #container { padding-top: 0 !important; } /* ======================================== 3. GRILLES COLONNES CONTAO OPTIMISÉES ======================================== */ .grid_desktop_30_40_30, .grid_tablet_30_40_30 { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: var(--spacing-lg) !important; align-items: start !important; } @media (max-width: 1024px) { .grid_tablet_30_40_30 { grid-template-columns: repeat(2, 1fr) !important; gap: var(--spacing-md) !important; } } @media (max-width: 768px) { .grid_mobile_100, .grid_desktop_30_40_30, .grid_tablet_30_40_30 { grid-template-columns: 1fr !important; gap: var(--spacing-md) !important; } } .grid_start.block { width: 100% !important; max-width: 1400px !important; margin: 0 auto !important; padding: 0 var(--spacing-lg) !important; } /* ======================================== 4. HEADER ET NAVIGATION REDESIGNÉS ======================================== */ #header { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid rgba(59, 130, 246, 0.1); transition: var(--transition-smooth); box-shadow: var(--shadow-soft); overflow: visible !important; padding-top: 10px; padding-bottom: 10px; position: relative !important; z-index: 9998 !important; } #header.scrolled { background: rgba(255, 255, 255, 0.95); box-shadow: var(--shadow-medium); padding-top: 10px; } #header .inside { max-width: 1400px; margin: 0 auto; padding: var(--spacing-sm) var(--spacing-lg); display: flex; justify-content: space-between; align-items: center; position: relative; overflow: visible !important; } /* Logo amélioré avec animation */ .logo { position: absolute !important; left: var(--spacing-lg); z-index: 1001; transition: var(--transition-smooth); filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1)); } .logo img { height: 6.5rem !important; width: auto; transition: var(--transition-smooth); display: block; } .logo:hover { transform: scale(1.05) translateY(-3px); filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.15)); } #header.scrolled .logo { margin-top: 2rem; transform: scale(0.85); } #header.scrolled .logo img { height: 8rem !important; } /* Navigation principale modernisée */ .mod_navigation { overflow: visible !important; position: static; margin-left: auto; margin-right: 0; position: relative !important; z-index: 10000 !important; } .mod_navigation ul { margin: 0; padding: 0; list-style: none; } .mod_navigation ul.level_1 { display: flex; gap: var(--spacing-xs); align-items: center; overflow: visible !important; justify-content: flex-end; } .mod_navigation ul.level_1 > li { position: relative; border-radius: var(--radius); transition: var(--transition-fast); } .mod_navigation a { color: var(--charcoal); text-decoration: none; font-weight: 500; padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius); transition: var(--transition-fast); position: relative; text-transform: capitalize; font-size: 0.95rem; letter-spacing: 0.2px; display: block; white-space: nowrap; } .mod_navigation a:hover { background: var(--gradient-glass); backdrop-filter: blur(10px); color: var(--primary-blue); transform: translateY(-2px); } .mod_navigation a:hover::after { width: 80%; } .mod_navigation li.active strong { color: var(--soft-white); background: var(--gradient-primary); padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius); font-weight: 600; text-transform: capitalize; font-size: 0.95rem; letter-spacing: 0.2px; box-shadow: var(--shadow-color); display: block; position: relative; overflow: hidden; } .mod_navigation li.active strong::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: left 0.5s; } .mod_navigation li.active:hover strong::before { left: 100%; } /* Sous-menus glass morphism */ .mod_navigation ul.level_2 { position: absolute; top: calc(100%); left: 0; min-width: 280px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(59, 130, 246, 0.1); border-radius: var(--radius-large); box-shadow: var(--shadow-heavy); opacity: 0; visibility: hidden; transform: translateY(10px) scale(0.95); transition: var(--transition-bounce); z-index: 999999 !important; overflow: hidden; pointer-events: none; margin-top: 0; } .mod_navigation ul.level_1 > li:hover > ul.level_2, .mod_navigation ul.level_1 > li.submenu:hover > ul.level_2 { opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto; } .mod_navigation ul.level_2::before { content: ""; position: absolute; top: -5px; left: 20px; width: 10px; height: 10px; background: rgba(255, 255, 255, 0.95); transform: rotate(45deg); border-top: 1px solid rgba(59, 130, 246, 0.1); border-left: 1px solid rgba(59, 130, 246, 0.1); } .mod_navigation ul.level_2 a { color: var(--dark-gray); padding: var(--spacing-md) var(--spacing-lg); font-size: 0.9rem; font-weight: 500; text-transform: none; letter-spacing: 0.1px; border-bottom: 1px solid rgba(59, 130, 246, 0.05); transition: var(--transition-fast); position: relative; overflow: hidden; display: flex; align-items: center; gap: var(--spacing-sm); } .mod_navigation ul.level_2 a::before { content: "→"; opacity: 0; transform: translateX(-10px); transition: var(--transition-fast); color: var(--accent-orange); font-weight: bold; } .mod_navigation ul.level_2 a:hover { background: var(--gradient-glass); color: var(--primary-blue); transform: translateX(5px); border-left: 3px solid var(--accent-orange); } .mod_navigation ul.level_2 a:hover::before { opacity: 1; transform: translateX(0); } .mod_navigation ul.level_2 li:last-child a { border-bottom: none; } /* Menu Mobile moderne */ .mobile-menu-toggle { display: none; background: var(--gradient-primary); border: none; color: white; font-size: 1.5rem; cursor: pointer; padding: var(--spacing-sm); border-radius: var(--radius); transition: var(--transition-fast); box-shadow: var(--shadow-soft); } .mobile-menu-toggle:hover { transform: scale(1.1); box-shadow: var(--shadow-medium); } /* ======================================== 5. SECTION HERO REDESIGNÉE ======================================== */ .accueil .hero { text-align: center; padding: 6rem var(--spacing-lg) 4rem; max-width: 1400px; margin: 0 auto; position: relative; z-index: 2; } .accueil .hero h2 { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 800; margin: 0 0 var(--spacing-md); line-height: 1.1; color: var(--soft-white); text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0.9) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .accueil .hero .rte p:first-child { font-size: clamp(1.1rem, 2vw, 1.4rem); color: rgba(255, 255, 255, 0.95); margin: 0 0 var(--spacing-xl); max-width: 700px; margin-left: auto; margin-right: auto; font-weight: 300; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); } /* ======================================== 6. SLIDER AVEC H1 OVERLAY AMÉLIORÉ ======================================== */ .accueil .mod_rocksolid_slider { position: relative; overflow: hidden; min-height: 600px; border-radius: 0 0 var(--radius-xl) var(--radius-xl); } .accueil .mod_rocksolid_slider::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(30, 64, 175, 0.4) 0%, rgba(20, 184, 166, 0.3) 100%); z-index: 10; pointer-events: none; } .accueil h1 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 15; color: white !important; text-align: center; margin: 0 !important; padding: 0 var(--spacing-lg); width: calc(100% - 4rem); font-size: clamp(2.5rem, 6vw, 5rem) !important; font-weight: 900 !important; line-height: 1.1 !important; text-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3) !important; letter-spacing: -0.02em !important; background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0.8) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: fadeInSlideUp 1.5s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes fadeInSlideUp { from { opacity: 0; transform: translate(-50%, -40%) scale(0.9); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } /* ======================================== 7. SECTIONS COLONNES REDESIGNÉES ======================================== */ /* Section Présentation - Style Glass Morphism */ .presentation { background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%); backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--radius-xl); box-shadow: var(--shadow-heavy); position: relative; padding: var(--spacing-xl) 0; margin: var(--spacing-xl) 0; overflow: hidden; } .presentation::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--gradient-warm); border-radius: var(--radius-xl) var(--radius-xl) 0 0; } .presentation::after { content: ""; position: absolute; top: -50%; right: -20%; width: 50%; height: 200%; background: radial-gradient(ellipse, rgba(59, 130, 246, 0.05) 0%, transparent 70%); transform: rotate(15deg); pointer-events: none; animation: float 15s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: rotate(15deg) translateY(0px); } 50% { transform: rotate(15deg) translateY(-20px); } } #presentation h2 { color: var(--primary-dark); font-size: 36px; font-weight: 800; position: relative; background: var(--gradient-cool); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } #presentation h2::after { content: ""; position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); width: 120px; height: 4px; background: var(--gradient-warm); border-radius: 2px; box-shadow: var(--shadow-color); } #presentation .ce_cp_column_start, #presentation .ce_cp_column_1_2, #presentation .ce_cp_column_2_3, #presentation .ce_cp_column_3_3 { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(15px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: var(--radius-large); padding: var(--spacing-xl); transition: var(--transition-smooth); position: relative; overflow: hidden; box-shadow: var(--shadow-soft); height: 100%; } #presentation .ce_cp_column_start::before, #presentation .ce_cp_column_1_2::before, #presentation .ce_cp_column_2_3::before, #presentation .ce_cp_column_3_3::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: var(--gradient-primary); transform: scaleX(0); transition: var(--transition-smooth); transform-origin: left; } #presentation .ce_cp_column_start:hover, #presentation .ce_cp_column_1_2:hover, #presentation .ce_cp_column_2_3:hover, #presentation .ce_cp_column_3_3:hover { transform: translateY(-10px) scale(1.02); box-shadow: var(--shadow-heavy); border-color: rgba(59, 130, 246, 0.3); background: rgba(255, 255, 255, 0.9); } #presentation .ce_cp_column_start:hover::before, #presentation .ce_cp_column_1_2:hover::before, #presentation .ce_cp_column_2_3:hover::before, #presentation .ce_cp_column_3_3:hover::before { transform: scaleX(1); } #presentation h3 { color: var(--primary-dark); font-size: 1.6rem; font-weight: 700; margin: 0 0 var(--spacing-md); display: flex; align-items: center; gap: var(--spacing-sm); } #presentation h3::before { content: "✨"; font-size: 2rem; background: var(--gradient-fresh); padding: var(--spacing-sm); border-radius: 50%; box-shadow: var(--shadow-soft); display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; } #presentation p { color: var(--dark-gray); line-height: 1.8; font-size: 1.05rem; font-weight: 400; } /* Icônes spécifiques */ #presentation .ce_cp_column_start:nth-child(1) h3::before { content: "🏠"; background: var(--gradient-primary); } #presentation .ce_cp_column_1_2:nth-child(2) h3::before { content: "⚡"; background: var(--gradient-warm); } #presentation .ce_cp_column_2_3:nth-child(3) h3::before { content: "🌱"; background: var(--gradient-fresh); } /* Section IconColonne - Style Sombre Moderne */ .iconcolonne { background: linear-gradient(135deg, var(--charcoal) 0%, var(--primary-dark) 100%); position: relative; padding: var(--spacing-xl) 0; margin: var(--spacing-xl) 0; overflow: hidden; color: white; border-radius: var(--radius-xl); text-align: center; /* Centre tout le contenu de la colonne */ } .iconcolonne::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 20% 30%, rgba(249, 115, 22, 0.1) 0%, transparent 60%), radial-gradient(circle at 80% 70%, rgba(139, 92, 246, 0.1) 0%, transparent 60%), radial-gradient(circle at 50% 10%, rgba(20, 184, 166, 0.08) 0%, transparent 70%); pointer-events: none; z-index: 1; } .iconcolonne img { max-width: 100px; /* Taille réduite - ajustez selon vos besoins */ height: auto; margin: 10px 0; /* Ajoute un peu d'espace vertical */ } .iconcolonne h2 { color: white; font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 800; text-align: center; margin: 0 0 var(--spacing-xl); position: relative; z-index: 2; background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0.8) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .iconcolonne h2::after { content: ""; position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); width: 120px; height: 4px; background: var(--gradient-warm); border-radius: 2px; box-shadow: var(--shadow-color); } .iconcolonne .ce_cp_column_start, .iconcolonne .ce_cp_column_1_2, .iconcolonne .ce_cp_column_2_3, .iconcolonne .ce_cp_column_3_3 { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--radius-large); padding: var(--spacing-xl); transition: var(--transition-smooth); position: relative; overflow: hidden; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); height: 100%; z-index: 2; } .iconcolonne .ce_cp_column_start:hover, .iconcolonne .ce_cp_column_1_2:hover, .iconcolonne .ce_cp_column_2_3:hover, .iconcolonne .ce_cp_column_3_3:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.15); } .iconcolonne h3 { color: white; font-size: 1.6rem; font-weight: 700; margin: 0 0 var(--spacing-md); display: flex; align-items: center; gap: var(--spacing-sm); } .iconcolonne h3::before { content: "🔧"; font-size: 2rem; background: var(--gradient-warm); padding: var(--spacing-sm); border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.2); box-shadow: var(--shadow-color); display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; } .iconcolonne p { color: rgba(255, 255, 255, 0.9); line-height: 1.8; margin: 0 0 var(--spacing-md); font-size: 1.20rem; font-weight: 300; } .iconcolonne p strong { font-weight: 700; } /* Section LogoMarque - Style Minimaliste */ .logomarque { background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(20px) saturate(180%); border-top: 1px solid rgba(59, 130, 246, 0.1); border-bottom: 1px solid rgba(59, 130, 246, 0.1); position: relative; padding: var(--spacing-lg) 0; margin: var(--spacing-xl) 0; overflow: hidden; width: 100vw; margin-left: calc(-50vw + 50%); margin-bottom: 0; } .logomarque::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gradient-primary); } .logomarque h2 { color: var(--primary-dark); font-size: clamp(1.8rem, 3vw, 2.8rem); font-weight: 800; text-align: center; margin: 0 0 var(--spacing-lg); position: relative; background: var(--gradient-cool); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .logomarque h2::after { content: ""; position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%); width: 100px; height: 3px; background: var(--gradient-warm); border-radius: 2px; } /* Container pour les logos en ligne */ .logomarque .grid_desktop_30_40_30, .logomarque .grid_tablet_30_40_30, .logomarque [class*="grid_"] { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-evenly !important; gap: var(--spacing-sm) !important; width: 100% !important; } .logomarque .ce_cp_column_start, .logomarque .ce_cp_column_1_2, .logomarque .ce_cp_column_2_3, .logomarque .ce_cp_column_3_3, .logomarque .ce_cp_column_4_4, .logomarque .ce_cp_column_5_5, .logomarque .ce_cp_column_6_6 { display: flex !important; align-items: center !important; justify-content: center !important; padding: var(--spacing-sm) !important; transition: var(--transition-smooth) !important; min-height: 140px !important; background: transparent !important; border-radius: var(--radius) !important; } .logomarque img { max-height: 61px !important; width: auto !important; max-width: 100% !important; object-fit: contain !important; filter: grayscale(100%) opacity(0.6) !important; transition: var(--transition-smooth) !important; padding: var(--spacing-xs) !important; border-radius: var(--radius) !important; } .logomarque img:hover { filter: grayscale(0%) opacity(1) !important; transform: scale(1.15) !important; box-shadow: var(--shadow-soft) !important; } .logomarque .ce_cp_column_start:hover, .logomarque .ce_cp_column_1_2:hover, .logomarque .ce_cp_column_2_3:hover, .logomarque .ce_cp_column_3_3:hover, .logomarque .ce_cp_column_4_4:hover, .logomarque .ce_cp_column_5_5:hover, .logomarque .ce_cp_column_6_6:hover { background: var(--gradient-glass) !important; backdrop-filter: blur(10px) !important; transform: translateY(-5px) !important; box-shadow: var(--shadow-soft) !important; } /* ======================================== 8. BOUTONS ET ÉLÉMENTS INTERACTIFS MODERNES ======================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: var(--spacing-sm) var(--spacing-lg); font-size: 1rem; font-weight: 600; text-decoration: none; border-radius: var(--radius); transition: var(--transition-smooth); margin: var(--spacing-xs); cursor: pointer; border: none; background: var(--gradient-warm); color: white; box-shadow: var(--shadow-soft); text-transform: capitalize; letter-spacing: 0.3px; position: relative; overflow: hidden; } .btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: left 0.6s; } .btn:hover::before { left: 100%; } .btn:hover { transform: translateY(-3px) scale(1.05); box-shadow: var(--shadow-medium); color: white; text-decoration: none; } .btn--primary { background: var(--gradient-primary); color: white; } .btn--secondary { background: var(--gradient-fresh); color: white; } .btn--ghost { background: transparent; border: 2px solid white; color: white; box-shadow: none; } .btn--ghost:hover { background: white; color: var(--primary-blue); border-color: white; } /* Bouton CTA principal */ .cta-button { display: inline-flex; align-items: center; justify-content: center; padding: 20px 40px; background: var(--gradient-warm); color: white; text-decoration: none; border-radius: var(--radius-large); font-size: 1.2rem; font-weight: 700; transition: var(--transition-smooth); border: none; box-shadow: var(--shadow-color); text-transform: capitalize; letter-spacing: 0.5px; position: relative; overflow: hidden; } .cta-button::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); transition: left 0.8s; } .cta-button:hover::before { left: 100%; } .cta-button:hover { transform: translateY(-5px) scale(1.05); box-shadow: var(--shadow-heavy); color: white; text-decoration: none; } /* ======================================== 9. SECTIONS DE CONTENU ACCUEIL MODERNISÉES ======================================== */ /* Section Services */ .accueil .service-projet { background: var(--gradient-glass); backdrop-filter: blur(20px) saturate(180%); border-top: 1px solid rgba(59, 130, 246, 0.1); border-bottom: 1px solid rgba(59, 130, 246, 0.1); position: relative; padding: var(--spacing-xl) 0; margin: var(--spacing-xl) 0 0 0; color: var(--charcoal); } .accueil .service-projet .ce_cp_column_start { position: relative; z-index: 2; max-width: 1400px; margin: 0 auto; padding: 0 var(--spacing-lg); display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-xl); align-items: start; } /* Section Contact */ .news-contact { background: var(--gradient-cool); position: relative; padding: var(--spacing-xl) 0; margin: 0; overflow: hidden; color: white; border-radius: var(--radius-xl) var(--radius-xl) 0 0; } .news-contact::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%), radial-gradient(circle at 70% 80%, rgba(249, 115, 22, 0.1) 0%, transparent 50%); pointer-events: none; } .accueil .news-contact .ce_cp_column_start { position: relative; z-index: 2; max-width: 1400px; margin: 0 auto; padding: 0 var(--spacing-lg); display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-xl); } /* ======================================== 11. PROJETS ET RÉALISATIONS MODERNISÉS ======================================== */ .accueil .mod_newslist .layout_latest { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(15px) saturate(180%); border: 1px solid rgba(59, 130, 246, 0.1); border-radius: var(--radius-large); padding: 0; transition: var(--transition-smooth); margin-bottom: var(--spacing-lg); overflow: hidden; display: flex; flex-direction: column; height: 500px; box-shadow: var(--shadow-soft); position: relative; } .accueil .mod_newslist .layout_latest::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: var(--gradient-primary); transform: scaleX(0); transition: var(--transition-smooth); transform-origin: left; z-index: 2; } .accueil .mod_newslist .layout_latest:hover { transform: translateY(-10px) scale(1.02); box-shadow: var(--shadow-heavy); border-color: rgba(59, 130, 246, 0.3); } .accueil .mod_newslist .layout_latest:hover::before { transform: scaleX(1); } .accueil .layout_latest .image_container { height: 260px; overflow: hidden; position: relative; background: var(--gradient-glass); } .accueil .layout_latest img { width: 100%; height: 100%; object-fit: cover; object-position: center center; transition: var(--transition-smooth); } .accueil .layout_latest:hover img { transform: scale(1.1); } .accueil .layout_latest .news-content { padding: var(--spacing-lg); flex: 1; display: flex; flex-direction: column; justify-content: space-between; } .accueil .layout_latest h2 { color: var(--primary-dark); font-size: 1.4rem; font-weight: 700; margin: 0 0 var(--spacing-sm); line-height: 1.4; } .accueil .layout_latest h2 a { color: var(--primary-dark); text-decoration: none; transition: var(--transition-fast); background: var(--gradient-cool); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .accueil .layout_latest h2 a:hover { background: var(--gradient-warm); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .accueil .layout_latest .info { color: var(--dark-gray); font-size: 0.85rem; margin: 0 0 var(--spacing-sm); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; } .accueil .layout_latest .ce_text p { color: var(--dark-gray); margin: 0 0 var(--spacing-md); line-height: 1.7; flex: 1; font-size: 1rem; font-weight: 400; } .accueil .layout_latest .more a { color: var(--primary-blue); text-decoration: none; font-weight: 700; transition: var(--transition-fast); display: inline-flex; align-items: center; gap: var(--spacing-xs); font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.3px; padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--radius); background: var(--gradient-glass); backdrop-filter: blur(10px); } .accueil .layout_latest .more a:hover { background: var(--gradient-warm); color: white; transform: translateX(5px) scale(1.05); } .accueil .layout_latest .more a::after { content: "→"; transition: var(--transition-fast); font-size: 1.1rem; font-weight: bold; } /* ======================================== 12. BLOC CONTACT ET AUTRES ÉLÉMENTS MODERNISÉS ======================================== */ .gb-contact-block { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(59, 130, 246, 0.1); box-shadow: var(--shadow-medium); border-radius: var(--radius-large); padding: var(--spacing-xl); position: relative; overflow: hidden; animation: fadeInUp 0.8s ease-out; } .gb-contact-block::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--gradient-primary); border-radius: var(--radius-large) var(--radius-large) 0 0; } .gb-contact-header h2 { color: var(--primary-dark); font-size: 2rem; font-weight: 800; margin: 0 0 var(--spacing-sm); text-align: center; background: var(--gradient-cool); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .gb-contact-header p { color: var(--dark-gray); text-align: center; margin-bottom: var(--spacing-md); font-size: 1.1rem; font-weight: 400; } .gb-cta { background: var(--gradient-warm); color: white; padding: var(--spacing-md) var(--spacing-lg); border: none; border-radius: var(--radius); font-weight: 700; font-size: 1.1rem; cursor: pointer; transition: var(--transition-smooth); width: 100%; text-transform: capitalize; letter-spacing: 0.3px; box-shadow: var(--shadow-soft); position: relative; overflow: hidden; } .gb-cta::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: left 0.6s; } .gb-cta:hover::before { left: 100%; } .gb-cta:hover { transform: translateY(-3px) scale(1.02); box-shadow: var(--shadow-medium); } /* ======================================== 13. PAGES DE CONTENU (NON-ACCUEIL) MODERNISÉES ======================================== */ .contenu #main { backdrop-filter: blur(20px) saturate(180%); } .contenu #main .inside { max-width: 1400px !important; margin: var(--spacing-lg) auto !important; padding: var(--spacing-xl) !important; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(59, 130, 246, 0.1); border-radius: 10px; box-shadow: var(--shadow-heavy); position: relative; color: var(--charcoal); } .contenu #main .inside::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--gradient-primary); border-radius: var(--radius-xl) var(--radius-xl) 0 0; } .contenu h1 { font-size: 6rem; font-weight: 900; color: var(--primary-dark); text-align: center; margin: 0 0 var(--spacing-lg); position: relative; background: var(--gradient-cool); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .contenu h1::after { content: ""; position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); width: 100px; height: 4px; background: var(--gradient-warm); border-radius: 2px; } .contenu h2 { color: var(--primary-dark); font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 700; margin: var(--spacing-xl) 0 var(--spacing-md); position: relative; padding-left: var(--spacing-md); } .contenu h2::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--gradient-primary); border-radius: 2px; } .contenu p { color: var(--dark-gray); line-height: 1.8; margin: var(--spacing-md) 0; font-size: 1.1rem; font-weight: 400; } .contenu a { color: var(--primary-blue); text-decoration: none; transition: var(--transition-fast); font-weight: 600; position: relative; } .contenu a::after { content: ""; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: var(--gradient-warm); transition: var(--transition-fast); } .contenu a:hover { color: var(--accent-orange); } .contenu a:hover::after { width: 100%; } /* ======================================== STYLE POUR LA SECTION INTRO - VERSION AVEC QUOTES ======================================== */ .intro { /* background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(59, 130, 246, 0.15); border-radius: var(--radius-xl); box-shadow: var(--shadow-medium);*/ position: relative; padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-xl) 80px; /* margin: var(--spacing-xl) 0; */ overflow: hidden; /* color: var(--charcoal); */ animation: fadeInUp 0.8s ease-out; } /* Bordure colorée en haut */ /*.intro::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--gradient-primary); border-radius: var(--radius-xl) var(--radius-xl) 0 0; }*/ /* Guillemets décoratifs en arrière-plan */ .intro::after { content: "\""; position: absolute; top: 20px; left: 20px; font-size: 120px; font-family: 'Times New Roman', serif; color: rgba(59, 130, 246, 0.08); font-weight: bold; line-height: 1; pointer-events: none; z-index: 1; } .intro .rte { position: relative; z-index: 2; } .intro p { color: var(--dark-gray); line-height: 1.8; margin: 0; font-size: clamp(1.1rem, 2.5vw, 1.3rem); font-weight: 400; text-align: justify; font-style: italic; } .intro p strong { color: var(--primary-blue); font-weight: 700; position: relative; transition: var(--transition-fast); font-style: normal; } .intro p strong::after { content: ""; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: var(--gradient-warm); transition: var(--transition-fast); border-radius: 1px; } /* Effet hover subtil sur les mots en gras */ /*.intro p strong:hover { color: var(--accent-orange); cursor: default; }*/ .intro p strong:hover::after { width: 100%; } /* Guillemet de fermeture en bas à droite */ .intro .rte::after { content: "\""; position: absolute; bottom: -20px; right: 20px; font-size: 80px; font-family: 'Times New Roman', serif; color: rgba(59, 130, 246, 0.08); font-weight: bold; line-height: 1; pointer-events: none; z-index: 1; } /* ======================================== STYLES POUR LES ACCORDÉONS MODERNISÉS - FERMÉS PAR DÉFAUT ======================================== */ /* Container principal des accordéons */ .ce_accordion { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(15px) saturate(180%); border: 1px solid rgba(59, 130, 246, 0.1); border-radius: var(--radius-large); margin-bottom: var(--spacing-lg); overflow: hidden; box-shadow: var(--shadow-soft); transition: var(--transition-smooth); position: relative; } .ce_accordion::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: var(--gradient-primary); transform: scaleX(0); transition: var(--transition-smooth); transform-origin: left; } .ce_accordion:hover { transform: translateY(-5px) scale(1.01); box-shadow: var(--shadow-medium); border-color: rgba(59, 130, 246, 0.2); } .ce_accordion:hover::before { transform: scaleX(1); } /* En-tête des accordéons (toggler) */ .ce_accordion .toggler { background: linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-teal) 100%) !important; color: white; padding: 15px; font-size: clamp(1.2rem, 2.5vw, 1.5rem); font-weight: 700; cursor: pointer; transition: var(--transition-smooth); position: relative; overflow: hidden; display: flex !important; align-items: center !important; justify-content: space-between !important; text-transform: uppercase; letter-spacing: 0.5px; border: none; outline: none; width: 100% !important; box-sizing: border-box !important; } .ce_accordion .toggler::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); transition: left 0.6s; } .ce_accordion .toggler:hover::before { left: 100%; } /* Icône de l'accordéon - VERSION ALTERNATIVE avec centrage absolu */ .ce_accordion .toggler::after { content: "+" !important; font-size: 20px !important; /* Taille fixe pour meilleur contrôle */ font-weight: 900 !important; color: white !important; transition: var(--transition-smooth) !important; transform-origin: center !important; transform: rotate(0deg) !important; /* Centrage absolu parfait */ position: absolute !important; right: var(--spacing-lg) !important; top: 50% !important; width: 35px !important; height: 35px !important; /* Centrage du texte dans le cercle */ line-height: 35px !important; /* Même valeur que la hauteur */ text-align: center !important; vertical-align: middle !important; /* Style du cercle */ background: rgba(255, 255, 255, 0.2) !important; border-radius: 50% !important; backdrop-filter: blur(10px) !important; /* Reset des marges et padding */ margin: -17.5px 0 0 0 !important; /* Centrage vertical */ padding: 0 !important; box-sizing: border-box !important; /* Police pour meilleur rendu */ font-family: 'Helvetica Neue', 'Arial', sans-serif !important; font-style: normal !important; text-decoration: none !important; /* Supprime les propriétés flex qui peuvent interférer */ display: block !important; flex-shrink: unset !important; align-items: unset !important; justify-content: unset !important; } /* Contenu du texte de l'accordéon */ .ce_accordion .toggler span, .ce_accordion .toggler > *:not(::after) { flex: 1 !important; text-align: left !important; padding-right: 60px !important; /* Espace pour l'icône */ } /* État actif de l'accordéon */ .ce_accordion .toggler.active, .ce_accordion .toggler.ui-state-active { background: var(--gradient-warm) !important; box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.1); } .ce_accordion .toggler.active::after, .ce_accordion .toggler.ui-state-active::after { content: "−" !important; transform: rotate(180deg) !important; background: rgba(255, 255, 255, 0.3) !important; } /* Hover sur le toggler */ .ce_accordion .toggler:hover { background: var(--gradient-warm) !important; transform: translateY(-2px); box-shadow: var(--shadow-soft); } /* Force le bon affichage du texte */ .ce_accordion .toggler { line-height: 1.2 !important; } /* Correction pour les différentes structures de Contao */ .ce_accordion .toggler > span, .ce_accordion .toggler > div, .ce_accordion .toggler > h3, .ce_accordion .toggler > h4 { margin: 0 !important; padding: 0 !important; flex: 1 !important; } /* S'assurer que le contenu ne dépasse pas */ .ce_accordion .toggler > *:first-child { max-width: calc(100% - 60px) !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } /* Contenu de l'accordéon - FERMÉ PAR DÉFAUT */ .ce_accordion .accordion { max-height: 0 !important; overflow: hidden !important; opacity: 0; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); background: rgba(255, 255, 255, 0.95); } .ce_accordion .accordion > div { padding: var(--spacing-xl); border-top: 1px solid rgba(59, 130, 246, 0.1); } /* Quand l'accordéon est ouvert */ .ce_accordion .accordion.ui-accordion-content-active { max-height: 1000px !important; opacity: 1; animation: accordionSlideDown 0.4s ease-out; } @keyframes accordionSlideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* Script d'initialisation pour forcer la fermeture */ .accordion-force-closed .accordion { max-height: 0 !important; opacity: 0 !important; } .accordion-force-closed .toggler { background: var(--gradient-primary) !important; } .accordion-force-closed .toggler::after { content: "+" !important; transform: rotate(0deg) !important; } /* Styles pour le contenu texte */ .ce_accordion .content-text p { color: var(--dark-gray); line-height: 1.8; margin: 0 0 var(--spacing-md); font-size: 1.1rem; font-weight: 400; } .ce_accordion .content-text p strong { color: var(--primary-dark); font-weight: 700; background: var(--gradient-cool); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Listes dans les accordéons */ .ce_accordion .content-text ul { list-style: none; padding: 0; margin: var(--spacing-md) 0 0 0; } .ce_accordion .content-text ul li { background: rgba(59, 130, 246, 0.03); border: 1px solid rgba(59, 130, 246, 0.1); border-radius: var(--radius); padding: var(--spacing-md); margin-bottom: var(--spacing-sm); transition: var(--transition-fast); position: relative; overflow: hidden; display: flex; align-items: flex-start; gap: var(--spacing-sm); } .ce_accordion .content-text ul li::before { content: "✓"; background: var(--gradient-primary); color: white; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem; flex-shrink: 0; margin-top: 2px; box-shadow: var(--shadow-soft); } .ce_accordion .content-text ul li:hover { background: rgba(59, 130, 246, 0.08); border-color: rgba(59, 130, 246, 0.2); transform: translateX(8px); box-shadow: var(--shadow-soft); } .ce_accordion .content-text ul li p { margin: 0; flex: 1; color: var(--dark-gray); font-size: 1rem; line-height: 1.6; } .ce_accordion .content-text ul li p strong { color: var(--primary-blue); font-weight: 600; } /* ======================================== RESPONSIVE POUR INTRO ET ACCORDÉONS ======================================== */ @media (max-width: 768px) { .intro { padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-lg) 60px; margin: var(--spacing-lg) 0; } .intro::after { font-size: 80px; top: 15px; left: 15px; } .intro .rte::after { font-size: 60px; bottom: -15px; right: 15px; } .intro .rte::before { top: -8px; right: -8px; font-size: 0.75rem; padding: 6px 12px; } .intro p { font-size: clamp(1rem, 3vw, 1.2rem); text-align: left; } .ce_accordion .toggler { padding: var(--spacing-md) var(--spacing-lg) !important; font-size: clamp(1rem, 3vw, 1.3rem) !important; flex-direction: row !important; text-align: left !important; gap: 0 !important; } .ce_accordion .toggler::after { right: var(--spacing-md) !important; width: 30px !important; height: 30px !important; font-size: 18px !important; line-height: 30px !important; margin-top: -15px !important; } .ce_accordion .toggler > *:first-child { padding-right: 50px !important; } .ce_accordion .accordion > div { padding: var(--spacing-lg); } .ce_accordion .content-text ul li { flex-direction: column; text-align: left; gap: var(--spacing-xs); } .ce_accordion .content-text ul li::before { align-self: flex-start; } } @media (max-width: 480px) { .intro { padding: var(--spacing-md) var(--spacing-md) var(--spacing-md) 50px; margin: var(--spacing-md) 0; } .intro::after { font-size: 60px; top: 10px; left: 10px; } .intro .rte::after { font-size: 45px; bottom: -10px; right: 10px; } .intro .rte::before { top: -6px; right: -6px; font-size: 0.7rem; padding: 4px 10px; } .ce_accordion { margin-bottom: var(--spacing-md); } .ce_accordion .toggler { padding: var(--spacing-sm) var(--spacing-md) !important; font-size: clamp(0.9rem, 3vw, 1.1rem) !important; } .ce_accordion .toggler::after { right: var(--spacing-sm) !important; width: 25px !important; height: 25px !important; font-size: 16px !important; line-height: 25px !important; margin-top: -12.5px !important; } .ce_accordion .toggler > *:first-child { padding-right: 40px !important; } .ce_accordion .accordion > div { padding: var(--spacing-md); } .ce_accordion .content-text ul li { padding: var(--spacing-sm); } } /* S'assurer que le slider occupe tout l'espace */ #slide .mod_rocksolid_slider { position: relative; width: 100%; height: 100%; min-height: 400px; } .contenu #slide .mod_rocksolid_slider img { filter: brightness(0.6) contrast(1.1); /* Assombrit et augmente le contraste */ } /* Centrage du H1 dans le slide */ .contenu #slide h1 { position: absolute !important; top: 50% !important; left: 50% !important; z-index: 10 !important; text-align: center !important; max-width: 90% !important; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; transform: translate(-50%, -50%) !important; } /* Adaptation responsive */ @media (max-width: 768px) { .contenu #slide h1 { font-size: clamp(1.5rem, 6vw, 2.5rem) !important; padding: 15px !important; } .contenu #slide { min-height: 300px; } .contenu #slide .mod_rocksolid_slider { min-height: 300px; } } @media (max-width: 480px) { .contenu #slide h1 { font-size: clamp(1.2rem, 7vw, 2rem) !important; padding: 10px !important; } .contenu #slide { min-height: 250px; } .contenu #slide .mod_rocksolid_slider { min-height: 250px; } } /* ======================================== STYLES POUR LA PAGE CONTACT (.contact) Basé sur la nouvelle structure HTML avec grilles ======================================== */ /* Reset du container principal pour pleine largeur */ .contact #main .inside { max-width: none !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; } /* ======================================== SECTION GOOGLE MAPS - PLEINE LARGEUR ======================================== */ /* Section slide avec Google Maps */ .contact #slide { width: 100vw; margin-left: calc(-50vw + 50%); height: 500px; position: relative; overflow: hidden; margin-bottom: var(--spacing-xl); background: var(--gradient-cool); } .contact #slide::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(30, 64, 175, 0.3) 0%, rgba(20, 184, 166, 0.2) 100%); z-index: 10; pointer-events: none; } /* Container Google Maps */ .contact .content-googlemaps-embed { width: 100%; height: 100%; position: relative; } .contact .content-googlemaps-embed__container { width: 100%; height: 100%; } .contact .content-googlemaps-embed__responsive { width: 100%; height: 100%; } .contact .content-googlemaps-embed iframe { width: 100% !important; height: 500px !important; border: none !important; filter: grayscale(20%) contrast(1.1) !important; object-fit: cover; } /* Overlay avec informations de contact */ .contact #slide .inside::after { content: "📍 Chasseneuil-du-Poitou\A 30 bis Avenue des Temps Modernes\A 86360 Chasseneuil-du-Poitou\A📞 05 49 52 73 51\A✉️ contact@ouest-radiateurs.fr"; white-space: pre-line; position: absolute; top: 50%; left: 50px; transform: translateY(-50%); background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px) saturate(180%); border-radius: var(--radius-xl); padding: var(--spacing-xl); box-shadow: var(--shadow-heavy); z-index: 20; max-width: 400px; border: 1px solid rgba(59, 130, 246, 0.1); color: var(--dark-gray); font-size: 1.1rem; line-height: 1.8; font-weight: 500; } /* ======================================== SECTION CONTENU PRINCIPAL ======================================== */ /* Article principal */ .contact #article-4504.mod_article { max-width: 1400px; margin: 0 auto; padding: var(--spacing-xl) var(--spacing-lg); } /* Titre principal */ .contact .content-headline { font-size: clamp(2.5rem, 5vw, 4rem) !important; font-weight: 900 !important; color: var(--primary-dark) !important; text-align: center !important; margin: 0 0 var(--spacing-xl) !important; position: relative !important; background: var(--gradient-cool) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } .contact .content-headline::after { content: ""; position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); width: 120px; height: 4px; background: var(--gradient-warm); border-radius: 2px; } /* Texte d'introduction du formulaire */ .contact .content-text { text-align: center; margin-bottom: var(--spacing-xl); } .contact .content-text h4 { color: var(--primary-dark) !important; font-size: 1.8rem !important; font-weight: 700 !important; margin: 0 0 var(--spacing-sm) !important; background: var(--gradient-cool) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: var(--spacing-sm) !important; } .contact .content-text h4::before { content: "📝"; font-size: 1.8rem; background: var(--gradient-warm); padding: var(--spacing-sm); border-radius: 50%; box-shadow: var(--shadow-soft); display: flex; align-items: center; justify-content: center; width: 45px; height: 45px; } .contact .content-text p { color: var(--dark-gray) !important; font-size: 1.1rem !important; line-height: 1.6 !important; margin: 0 0 var(--spacing-lg) !important; } /* ======================================== GRILLE CONTAO (60/40) ======================================== */ .contact .ce_cp_grid_start { max-width: 1400px; margin: 0 auto; padding: 0 var(--spacing-lg); } .contact .grid_desktop_60_40 { display: grid !important; grid-template-columns: 60% 40% !important; gap: var(--spacing-xl) !important; align-items: start !important; } /* ======================================== SECTION FORMULAIRE (60% à gauche) ======================================== */ .contact .ce_form { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(59, 130, 246, 0.1); border-radius: var(--radius-xl); padding: var(--spacing-xl); box-shadow: var(--shadow-medium); position: relative; overflow: hidden; } .contact .ce_form::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--gradient-warm); border-radius: var(--radius-xl) var(--radius-xl) 0 0; } /* Groupes de champs */ .contact .widget { margin: 0 0 var(--spacing-lg); } /* Labels */ .contact .widget label { display: block !important; color: var(--primary-dark) !important; font-weight: 600 !important; font-size: 1.05rem !important; margin: 0 0 var(--spacing-xs) !important; position: relative !important; } .contact .widget label.mandatory .mandatory, .contact .widget label .mandatory { color: var(--accent-coral) !important; font-weight: bold !important; margin-left: 4px !important; } /* Champs de saisie */ .contact .widget input[type="text"], .contact .widget input[type="email"], .contact .widget input[type="tel"], .contact .widget textarea { width: 100% !important; padding: var(--spacing-md) !important; background: rgba(255, 255, 255, 0.9) !important; backdrop-filter: blur(10px) !important; border: 2px solid rgba(59, 130, 246, 0.2) !important; border-radius: var(--radius) !important; color: var(--charcoal) !important; font-size: 1rem !important; font-family: inherit !important; transition: var(--transition-fast) !important; box-sizing: border-box !important; } .contact .widget input:focus, .contact .widget textarea:focus { outline: none !important; border-color: var(--primary-blue) !important; box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1) !important; background: white !important; transform: translateY(-2px) !important; } .contact .widget textarea { min-height: 120px !important; resize: vertical !important; } /* Checkbox RGPD */ .contact .widget-checkbox { background: rgba(59, 130, 246, 0.05) !important; border: 1px solid rgba(59, 130, 246, 0.1) !important; border-radius: var(--radius) !important; padding: var(--spacing-md) !important; } .contact .widget-checkbox input[type="checkbox"] { margin-right: var(--spacing-sm) !important; transform: scale(1.2) !important; accent-color: var(--primary-blue) !important; } .contact .widget-checkbox label { color: var(--dark-gray) !important; font-size: 0.95rem !important; line-height: 1.5 !important; } /* Widget d'explication */ .contact .widget-explanation p { color: var(--dark-gray) !important; font-style: italic !important; font-size: 0.9rem !important; text-align: center !important; margin: var(--spacing-md) 0 !important; } /* Bouton d'envoi */ .contact .widget-submit { text-align: center !important; margin-top: var(--spacing-xl) !important; } .contact .widget-submit button.submit { background: var(--gradient-warm) !important; color: white !important; padding: var(--spacing-md) var(--spacing-xl) !important; border: none !important; border-radius: var(--radius) !important; font-size: 1.2rem !important; font-weight: 700 !important; cursor: pointer !important; transition: var(--transition-smooth) !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; box-shadow: var(--shadow-soft) !important; position: relative !important; overflow: hidden !important; min-width: 200px !important; } .contact .widget-submit button.submit::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: left 0.6s; } .contact .widget-submit button.submit:hover::before { left: 100%; } .contact .widget-submit button.submit:hover { transform: translateY(-3px) scale(1.05) !important; box-shadow: var(--shadow-medium) !important; } /* Widget ALTCHA (captcha) */ .contact .widget-altcha { text-align: center; margin: var(--spacing-lg) 0; } .contact altcha-widget { margin: 0 auto; } /* ======================================== SECTION INFORMATIONS (40% à droite) ======================================== */ .contact .ce_cp_column_start { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(59, 130, 246, 0.1); border-radius: var(--radius-xl); padding: var(--spacing-xl); box-shadow: var(--shadow-medium); position: relative; overflow: hidden; height: fit-content; } .contact .ce_cp_column_start::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--gradient-primary); border-radius: var(--radius-xl) var(--radius-xl) 0 0; } .contact .infos.content-text { margin-bottom: var(--spacing-lg); padding: 0; background: transparent; border: none; box-shadow: none; position: relative; overflow: visible; } .contact .infos.content-text::before { display: none; } /* Titre de section Chasseneuil */ .contact .infos h2 { color: var(--primary-blue) !important; font-size: 1.8rem !important; font-weight: 700 !important; margin: 0 0 var(--spacing-lg) !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: var(--spacing-sm) !important; padding-left: 50px; } .contact .infos h2::before { content: "🏢"; font-size: 2rem; background: var(--gradient-primary); padding: var(--spacing-sm); border-radius: 50%; box-shadow: var(--shadow-soft); display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; } /* Paragraphes d'informations */ .contact .infos p { color: var(--dark-gray) !important; font-size: 1.1rem !important; line-height: 1.8 !important; margin: 0 0 var(--spacing-md) !important; } /* Liens de contact stylés */ .contact .infos a[href^="tel:"] { display: inline-flex !important; align-items: center !important; gap: var(--spacing-xs) !important; color: var(--primary-blue) !important; text-decoration: none !important; font-weight: 600 !important; transition: var(--transition-fast) !important; padding: var(--spacing-xs) var(--spacing-sm) !important; border-radius: var(--radius) !important; background: rgba(59, 130, 246, 0.1) !important; margin: 0 var(--spacing-xs) !important; } .contact .infos a[href^="tel:"]:hover { background: var(--gradient-primary) !important; color: white !important; transform: translateY(-2px) !important; box-shadow: var(--shadow-soft) !important; } .contact .infos a[href^="tel:"]::before { content: "📞"; font-size: 1.1rem; } .contact .infos a[href^="mailto:"] { display: inline-flex !important; align-items: center !important; gap: var(--spacing-xs) !important; color: var(--primary-blue) !important; text-decoration: none !important; font-weight: 600 !important; transition: var(--transition-fast) !important; padding: var(--spacing-xs) var(--spacing-sm) !important; border-radius: var(--radius) !important; background: rgba(59, 130, 246, 0.1) !important; margin: 0 var(--spacing-xs) !important; } .contact .infos a[href^="mailto:"]:hover { background: var(--gradient-primary) !important; color: white !important; transform: translateY(-2px) !important; box-shadow: var(--shadow-soft) !important; } .contact .infos a[href^="mailto:"]::before { content: "✉️"; font-size: 1.1rem; } /* ======================================== SECTION HORAIRES D'OUVERTURE ======================================== */ .contact .ce_cp_column_start .content-text:last-child { background: rgba(59, 130, 246, 0.03); border: 1px solid rgba(59, 130, 246, 0.1); border-radius: var(--radius-large); padding: var(--spacing-lg); margin-top: var(--spacing-lg); position: relative; overflow: hidden; } .contact .ce_cp_column_start .content-text:last-child::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: var(--gradient-warm); transform: scaleX(0); transition: var(--transition-smooth); transform-origin: left; } .contact .ce_cp_column_start .content-text:last-child:hover::before { transform: scaleX(1); } .contact .ce_cp_column_start .content-text:last-child:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); border-color: rgba(59, 130, 246, 0.2); } /* Titre horaires */ .contact .ce_cp_column_start .content-text p:first-child { color: var(--primary-dark) !important; font-size: 1.4rem !important; font-weight: 700 !important; margin: 0 0 var(--spacing-md) !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: var(--spacing-sm) !important; text-align: center !important; } .contact .ce_cp_column_start .content-text p:first-child::before { content: "🕒"; font-size: 1.8rem; background: var(--gradient-warm); padding: var(--spacing-sm); border-radius: 50%; box-shadow: var(--shadow-soft); display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; } /* Tableau des horaires stylé */ .contact table { width: 100% !important; border-collapse: collapse !important; background: rgba(255, 255, 255, 0.8) !important; border-radius: var(--radius) !important; overflow: hidden !important; box-shadow: var(--shadow-soft) !important; margin: var(--spacing-md) 0 !important; } .contact table td { padding: var(--spacing-sm) var(--spacing-md) !important; border: 1px solid rgba(59, 130, 246, 0.1) !important; color: var(--dark-gray) !important; font-size: 1rem !important; font-weight: 500 !important; transition: var(--transition-fast) !important; position: relative !important; } .contact table tr:nth-child(even) { background: rgba(59, 130, 246, 0.03) !important; } .contact table tr:hover { background: rgba(59, 130, 246, 0.08) !important; transform: scale(1.02) !important; } .contact table td:first-child { font-weight: 600 !important; color: var(--primary-dark) !important; background: rgba(59, 130, 246, 0.05) !important; position: relative !important; } .contact table td:first-child::before { content: "📅"; margin-right: var(--spacing-xs); font-size: 0.9rem; } .contact table td:last-child { font-weight: 600 !important; text-align: center !important; } /* Styles spéciaux pour "Fermé" */ .contact table td:last-child:contains("Fermé"), .contact table td[style*="Fermé"] { color: var(--accent-coral) !important; font-weight: 700 !important; } /* Style pour les cellules contenant "Fermé" */ .contact table tr:has(td:contains("Fermé")) td:last-child, .contact table td:last-child { position: relative; } .contact table td:last-child::after { content: ""; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background: var(--warm-green); } /* Indicateur fermé pour samedi/dimanche */ .contact table tr:nth-child(6) td:last-child::after, .contact table tr:nth-child(7) td:last-child::after { background: var(--accent-coral); } /* Indicateur ouvert pour les autres jours */ .contact table tr:nth-child(1) td:last-child::after, .contact table tr:nth-child(2) td:last-child::after, .contact table tr:nth-child(3) td:last-child::after, .contact table tr:nth-child(4) td:last-child::after, .contact table tr:nth-child(5) td:last-child::after { background: var(--warm-green); } /* Animation du tableau */ .contact table { animation: fadeInUp 0.8s ease-out 0.3s both; } .contact table tr { animation: slideInRight 0.6s ease-out both; } .contact table tr:nth-child(1) { animation-delay: 0.1s; } .contact table tr:nth-child(2) { animation-delay: 0.2s; } .contact table tr:nth-child(3) { animation-delay: 0.3s; } .contact table tr:nth-child(4) { animation-delay: 0.4s; } .contact table tr:nth-child(5) { animation-delay: 0.5s; } .contact table tr:nth-child(6) { animation-delay: 0.6s; } .contact table tr:nth-child(7) { animation-delay: 0.7s; } /* ======================================== RESPONSIVE DESIGN ======================================== */ @media (max-width: 1024px) { .contact .grid_desktop_60_40 { grid-template-columns: 1fr !important; gap: var(--spacing-lg) !important; } .contact #slide .inside::after { left: 30px; max-width: 350px; padding: var(--spacing-lg); } } @media (max-width: 768px) { .contact #slide { height: 400px; } .contact .content-googlemaps-embed iframe { height: 400px !important; } .contact #slide .inside::after { position: relative; left: auto; top: auto; transform: none; margin: var(--spacing-lg); max-width: calc(100% - 2rem); } .contact #article-4504.mod_article, .contact .ce_cp_grid_start { padding: var(--spacing-md); } .contact .ce_form, .contact .ce_cp_column_start { padding: var(--spacing-lg); } .contact .infos h2 { flex-direction: column !important; gap: var(--spacing-xs) !important; } .contact .content-text h4 { flex-direction: column !important; gap: var(--spacing-xs) !important; } .contact .ce_cp_column_start .content-text p:first-child { flex-direction: column !important; gap: var(--spacing-xs) !important; } .contact table td { padding: var(--spacing-xs) var(--spacing-sm) !important; font-size: 0.9rem !important; } } @media (max-width: 480px) { .contact #slide { height: 300px; } .contact .content-googlemaps-embed iframe { height: 300px !important; } .contact #slide .inside::after { margin: var(--spacing-sm); padding: var(--spacing-md); font-size: 1rem; } .contact #article-4504.mod_article, .contact .ce_cp_grid_start { padding: var(--spacing-sm); } .contact .ce_form, .contact .ce_cp_column_start { padding: var(--spacing-md); } .contact .widget input[type="text"], .contact .widget input[type="email"], .contact .widget input[type="tel"], .contact .widget textarea { padding: var(--spacing-sm) !important; } .contact .widget-submit button.submit { width: 100% !important; padding: var(--spacing-sm) var(--spacing-lg) !important; } .contact table { font-size: 0.85rem !important; } .contact table td { padding: 8px !important; } .contact table td:first-child::before { display: none; } } /* ======================================== ANIMATIONS ======================================== */ .contact .ce_form, .contact .ce_cp_column_start { animation: fadeInUp 0.8s ease-out; } .contact .ce_form { animation-delay: 0.1s; } .contact .ce_cp_column_start { animation-delay: 0.2s; } .contact .widget:nth-child(1) { animation: fadeInUp 0.6s ease-out 0.1s both; } .contact .widget:nth-child(2) { animation: fadeInUp 0.6s ease-out 0.2s both; } .contact .widget:nth-child(3) { animation: fadeInUp 0.6s ease-out 0.3s both; } .contact .widget:nth-child(4) { animation: fadeInUp 0.6s ease-out 0.4s both; } .contact .widget:nth-child(5) { animation: fadeInUp 0.6s ease-out 0.5s both; } .contact .widget:nth-child(6) { animation: fadeInUp 0.6s ease-out 0.6s both; } .contact .widget:nth-child(7) { animation: fadeInUp 0.6s ease-out 0.7s both; } .contact .widget:nth-child(8) { animation: fadeInUp 0.6s ease-out 0.8s both; } .contact .widget:nth-child(9) { animation: fadeInUp 0.6s ease-out 0.9s both; } /* Effet hover sur les sections */ .contact .ce_form:hover, .contact .ce_cp_column_start:hover { transform: translateY(-5px) scale(1.01); box-shadow: var(--shadow-heavy); border-color: rgba(59, 130, 246, 0.2); } /* ======================================== 15. FOOTER MODERNISÉ ======================================== */ #footer { background: var(--gradient-cool); color: white; padding: var(--spacing-xl) 0 var(--spacing-lg); position: relative; overflow: hidden; } #footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(249, 115, 22, 0.05) 0%, transparent 50%); pointer-events: none; } #footer .inside { max-width: 1400px; margin: 0 auto; padding: 0 var(--spacing-lg); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--spacing-sm); position: relative; z-index: 2; } .mentionslegales { color: rgba(255, 255, 255, 0.9) !important; text-decoration: none !important; font-weight: 500 !important; transition: var(--transition-fast) !important; font-size: 1.05rem; } .mentionslegales:hover { color: white; text-decoration: underline; text-decoration-color: var(--accent-orange); } .conception-gael { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); padding: var(--spacing-sm) var(--spacing-md); border-radius: 25px; border: 1px solid rgba(255, 255, 255, 0.2); transition: var(--transition-smooth); } .conception-gael:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-3px) scale(1.05); box-shadow: var(--shadow-soft); } .conception-gael a { color: white; text-decoration: none; font-weight: 600; font-size: 0.95rem; } /* ======================================== 16. ANIMATIONS ET KEYFRAMES AVANCÉES ======================================== */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } } @keyframes rotateIn { from { opacity: 0; transform: rotate(-5deg) scale(0.9); } to { opacity: 1; transform: rotate(0deg) scale(1); } } /* Animations des éléments avec délais */ .services, .content-text ol li, .layout_latest { animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards; } .services:nth-child(1) { animation-delay: 0.1s; } .services:nth-child(2) { animation-delay: 0.2s; } .services:nth-child(3) { animation-delay: 0.3s; } .services:nth-child(4) { animation-delay: 0.4s; } .presentation .ce_cp_column_start, .presentation .ce_cp_column_1_2, .presentation .ce_cp_column_2_3, .presentation .ce_cp_column_3_3 { animation: slideInLeft 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards; } .presentation .ce_cp_column_start { animation-delay: 0.1s; } .presentation .ce_cp_column_1_2 { animation-delay: 0.3s; } .presentation .ce_cp_column_2_3 { animation-delay: 0.5s; } .iconcolonne .ce_cp_column_start, .iconcolonne .ce_cp_column_1_2, .iconcolonne .ce_cp_column_2_3, .iconcolonne .ce_cp_column_3_3 { animation: slideInRight 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards; } .iconcolonne .ce_cp_column_start { animation-delay: 0.2s; } .iconcolonne .ce_cp_column_1_2 { animation-delay: 0.4s; } .iconcolonne .ce_cp_column_2_3 { animation-delay: 0.6s; } .logomarque .ce_cp_column_start, .logomarque .ce_cp_column_1_2, .logomarque .ce_cp_column_2_3, .logomarque .ce_cp_column_3_3, .logomarque .ce_cp_column_4_4, .logomarque .ce_cp_column_5_5, .logomarque .ce_cp_column_6_6 { animation: scaleIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards; } .logomarque .ce_cp_column_start { animation-delay: 0.1s; } .logomarque .ce_cp_column_1_2 { animation-delay: 0.2s; } .logomarque .ce_cp_column_2_3 { animation-delay: 0.3s; } .logomarque .ce_cp_column_3_3 { animation-delay: 0.4s; } .logomarque .ce_cp_column_4_4 { animation-delay: 0.5s; } .logomarque .ce_cp_column_5_5 { animation-delay: 0.6s; } .logomarque .ce_cp_column_6_6 { animation-delay: 0.7s; } /* Animation du logo */ @keyframes logoAppear { from { opacity: 0; transform: translateY(-30px) scale(0.8); } to { opacity: 1; transform: translateY(0) scale(1); } } .logo { animation: logoAppear 0.8s cubic-bezier(0.4, 0, 0.2, 1); } /* Animation de pulsation pour les éléments importants */ @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } .cta-button:focus, .btn--primary:focus { animation: pulse 1s ease-in-out infinite; } /* Effet de particules flottantes */ @keyframes float { 0%, 100% { transform: translateY(0px) rotate(0deg); } 33% { transform: translateY(-10px) rotate(1deg); } 66% { transform: translateY(5px) rotate(-1deg); } } /* ======================================== MENU MOBILE MODERNE - OUEST RADIATEURS ======================================== */ /* Masquer le menu desktop sur mobile */ @media (max-width: 767px) { .mod_navigation:not(.mobile_menu .mod_navigation) { display: none !important; } } /* Afficher le menu mobile uniquement sur mobile */ .mod_mobile_menu { display: none; } @media (max-width: 767px) { .mod_mobile_menu { display: block; position: relative; z-index: 10001; } } /* ======================================== BOUTON HAMBURGER MODERNE ======================================== */ .mobile_menu_trigger { position: fixed !important; top: 20px !important; right: 20px !important; width: 50px !important; height: 50px !important; background: var(--gradient-primary) !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; z-index: 10003 !important; /* Plus élevé que le menu (10001) */ transition: var(--transition-smooth) !important; box-shadow: var(--shadow-medium) !important; border: 2px solid rgba(255, 255, 255, 0.2) !important; backdrop-filter: blur(20px) !important; font-size: 0 !important; /* Cache le texte ☰ */ color: transparent !important; text-indent: -9999px !important; /* Force masquer le texte */ } /* Style par défaut du trigger avec barres hamburger */ .mobile_menu_trigger::before { content: ""; position: absolute; width: 20px; height: 2px; background: white; box-shadow: 0 -6px 0 white, 0 6px 0 white; transition: var(--transition-smooth); top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; } .mobile_menu_trigger:hover { transform: scale(1.1) !important; box-shadow: var(--shadow-heavy) !important; background: var(--gradient-warm) !important; } /* Animation du bouton quand le menu est ouvert */ .mobile_menu_trigger.active::before { transform: translate(-50%, -50%) rotate(45deg); box-shadow: 0 0 0 white; } .mobile_menu_trigger.active::after { content: ""; position: absolute; top: 50%; left: 50%; width: 20px; height: 2px; background: white; transform: translate(-50%, -50%) rotate(-45deg); z-index: 1; } .mobile_menu_trigger.active { background: var(--accent-coral) !important; /* S'assurer qu'il reste au premier plan même quand actif */ z-index: 10003 !important; } /* Force l'override du style par défaut */ #mobile-menu-403-trigger { background: var(--gradient-primary) !important; border: 2px solid rgba(255, 255, 255, 0.2) !important; color: transparent !important; font-size: 0 !important; text-indent: -9999px !important; z-index: 10003 !important; /* Plus élevé que le menu */ } /* S'assurer que le contenu texte n'apparaît pas */ #mobile-menu-403-trigger * { display: none !important; } /* ======================================== OVERLAY MENU MOBILE ======================================== */ .mobile_menu { position: fixed !important; top: 0 !important; left: 0 !important; height: 100vh !important; background: linear-gradient(135deg, var(--charcoal) 0%, var(--primary-dark) 100%) !important; z-index: 10001 !important; /* Inférieur au trigger */ opacity: 0 !important; visibility: hidden !important; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; overflow-y: none !important; backdrop-filter: blur(20px) !important; } .mobile_menu::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 20% 30%, rgba(249, 115, 22, 0.1) 0%, transparent 60%), radial-gradient(circle at 80% 70%, rgba(139, 92, 246, 0.1) 0%, transparent 60%), radial-gradient(circle at 50% 10%, rgba(20, 184, 166, 0.08) 0%, transparent 70%); pointer-events: none; z-index: 1; } .mobile_menu.active { opacity: 1 !important; visibility: visible !important; } .mobile_menu .inner { position: relative; z-index: 2; padding: 80px 20px 40px !important; min-height: 100vh; height: auto !important; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; overflow-y: auto !important; background: none; } /* ======================================== LOGO DANS LE MENU MOBILE ======================================== */ .mobile_menu .logo { margin: 0 0 60px !important; text-align: center !important; animation: fadeInDown 0.6s ease-out 0.3s both; } .mobile_menu .logo img { height: 80px !important; width: auto !important; filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.3)) !important; transition: var(--transition-smooth) !important; } .mobile_menu .logo:hover img { transform: scale(1.05) !important; filter: drop-shadow(0 8px 30px rgba(0, 0, 0, 0.4)) !important; } /* ======================================== NAVIGATION MOBILE SIMPLIFIÉE ======================================== */ .mobile_menu .mod_navigation { width: 100% !important; max-width: 320px !important; } .mobile_menu .mod_navigation ul.level_1 { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 15px !important; } .mobile_menu .mod_navigation ul.level_1 li { width: 100% !important; opacity: 0; transform: translateY(20px); animation: slideInUp 0.5s ease-out both; } .mobile_menu .mod_navigation ul.level_1 li:nth-child(1) { animation-delay: 0.1s; } .mobile_menu .mod_navigation ul.level_1 li:nth-child(2) { animation-delay: 0.2s; } .mobile_menu .mod_navigation ul.level_1 li:nth-child(3) { animation-delay: 0.3s; } .mobile_menu .mod_navigation ul.level_1 li:nth-child(4) { animation-delay: 0.4s; } .mobile_menu .mod_navigation a, .mobile_menu .mod_navigation strong { display: block; padding: 18px 24px !important; color: white !important; text-decoration: none !important; font-size: 1.1rem !important; font-weight: 500 !important; text-align: left !important; border-radius: var(--radius) !important; background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; position: relative !important; overflow: hidden !important; text-transform: none !important; letter-spacing: 0.3px !important; backdrop-filter: blur(10px) !important; } /* Effet hover simplifié */ .mobile_menu .mod_navigation a:hover, .mobile_menu .mod_navigation strong:hover { background: rgba(255, 255, 255, 0.15) !important; transform: translateX(8px) !important; border-color: rgba(255, 255, 255, 0.25) !important; } /* Page active - style distinctif mais simple */ .mobile_menu .mod_navigation li.active strong { background: var(--gradient-primary) !important; border-color: rgba(255, 255, 255, 0.3) !important; font-weight: 600 !important; } .mobile_menu .mod_navigation li.active strong:hover { background: var(--gradient-warm) !important; transform: translateX(8px) !important; } /* Icônes minimalistes à gauche */ .mobile_menu .mod_navigation a::before, .mobile_menu .mod_navigation strong::before { content: ""; position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; background: currentColor; mask-size: contain; mask-repeat: no-repeat; mask-position: center; opacity: 0.8; } /* Ajustement du texte pour laisser place à l'icône */ .mobile_menu .mod_navigation a, .mobile_menu .mod_navigation strong { padding-left: 48px !important; } /* Icônes spécifiques - minimalistes */ .mobile_menu .mod_navigation li:nth-child(1) a::before, .mobile_menu .mod_navigation li:nth-child(1) strong::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E"); } .mobile_menu .mod_navigation li:nth-child(2) a::before, .mobile_menu .mod_navigation li:nth-child(2) strong::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 1v6m0 6v6m11-7h-6m-6 0H1'/%3E%3C/svg%3E"); } .mobile_menu .mod_navigation li:nth-child(3) a::before, .mobile_menu .mod_navigation li:nth-child(3) strong::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E"); } .mobile_menu .mod_navigation li:nth-child(4) a::before, .mobile_menu .mod_navigation li:nth-child(4) strong::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E"); } /* Flèche subtile à droite pour indiquer l'interactivité */ .mobile_menu .mod_navigation a::after, .mobile_menu .mod_navigation strong::after { content: "›"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 1.2rem; opacity: 0.6; transition: all 0.3s ease; } .mobile_menu .mod_navigation a:hover::after, .mobile_menu .mod_navigation strong:hover::after { opacity: 1; transform: translateY(-50%) translateX(4px); } /* Animation d'entrée plus douce */ @keyframes slideInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* ======================================== ANIMATIONS ======================================== */ @keyframes fadeInDown { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* ======================================== STYLES POUR LE DÉCLENCHEMENT DU MENU ======================================== */ /* Script d'activation du menu */ .mobile_menu_trigger.active + .mobile_menu { opacity: 1 !important; visibility: visible !important; } /* Classe helper pour le body quand le menu est ouvert */ body.mobile-menu-open { overflow: hidden; } /* ======================================== RESPONSIVE POUR DIFFÉRENTES TAILLES ======================================== */ @media (max-width: 480px) { .mobile_menu .inner { padding: 70px 15px 30px !important; } .mobile_menu .logo { margin-bottom: 40px !important; } .mobile_menu .logo img { height: 60px !important; } .mobile_menu .mod_navigation { max-width: 280px !important; } .mobile_menu .mod_navigation a, .mobile_menu .mod_navigation strong { padding: 16px 20px 16px 42px !important; font-size: 1rem !important; } .mobile_menu .mod_navigation a::before, .mobile_menu .mod_navigation strong::before { left: 16px; width: 14px; height: 14px; } .mobile_menu .mod_navigation a::after, .mobile_menu .mod_navigation strong::after { right: 16px; font-size: 1.1rem; } .mobile_menu_trigger { width: 45px !important; height: 45px !important; top: 15px !important; right: 15px !important; z-index: 10003 !important; /* Maintenir le z-index même sur mobile */ } .mobile_menu_trigger::before { width: 18px; } /* S'assurer que le trigger reste visible sur mobile aussi */ #mobile-menu-403-trigger { z-index: 10003 !important; } } @media (max-width: 360px) { .mobile_menu .mod_navigation { max-width: 260px !important; } .mobile_menu .mod_navigation a, .mobile_menu .mod_navigation strong { padding: 14px 18px 14px 38px !important; font-size: 0.95rem !important; } .mobile_menu .mod_navigation ul.level_1 { gap: 12px !important; } /* Maintenir la visibilité du trigger même sur très petits écrans */ .mobile_menu_trigger, #mobile-menu-403-trigger { z-index: 10003 !important; } } /* ======================================== CORRECTIONS POUR L'INTÉGRATION ======================================== */ /* S'assurer que le trigger est visible */ #mobile-menu-403-trigger { display: block !important; z-index: 10003 !important; /* Plus élevé que le menu (10001) */ } /* Style pour le menu container */ #mobile-menu-403 { position: fixed !important; z-index: 10001 !important; /* Inférieur au trigger */ } /* Animation d'entrée du menu */ .mobile_menu.no_shadow { box-shadow: none !important; } /* Correction pour éviter les conflits */ .mobile_menu .mod_navigation ul { list-style: none !important; margin: 0 !important; padding: 0 !important; } /* ======================================== CORRECTION SPÉCIFIQUE Z-INDEX ======================================== */ /* Force le bouton à rester au premier plan en toutes circonstances */ .mobile_menu_trigger, #mobile-menu-403-trigger { z-index: 10003 !important; } .mobile_menu_trigger.active, #mobile-menu-403-trigger.active { z-index: 10003 !important; } /* Le menu reste en arrière-plan */ .mobile_menu, #mobile-menu-403 { z-index: 10001 !important; } /* ======================================== 17. RESPONSIVE DESIGN AMÉLIORÉ ======================================== */ /* Tablette */ @media (max-width: 1024px) { :root { --spacing-xl: 2.5rem; --spacing-lg: 1.5rem; } .logo { margin-top: 3rem; } .logo img { height: 10rem !important; } #header.scrolled .logo { margin-top: 1.5rem; } #header.scrolled .logo img { height: 7rem !important; } .accueil .service-projet .ce_cp_column_start, .accueil .news-contact .ce_cp_column_start { grid-template-columns: 1fr; gap: var(--spacing-lg); } } /* Mobile */ @media (max-width: 768px) { :root { --spacing-xl: 2rem; --spacing-lg: 1rem; --spacing-md: 1rem; } .mobile-menu-toggle { display: block; } #header .inside { padding: var(--spacing-sm); } .logo { top: -15px; left: var(--spacing-sm); margin-top: 0rem; } .logo img { height: 8rem !important; } #container { padding-top: 90px; } #header.scrolled .logo { margin-top: 1rem; transform: scale(0.75); } #header.scrolled .logo img { height: 6rem !important; } .mod_navigation { position: absolute; top: 100%; left: 0; right: 0; background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(20px) saturate(180%); max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1); margin-left: 0; display: none; box-shadow: var(--shadow-medium); border-radius: 0 0 var(--radius-large) var(--radius-large); } .mobile_menu .mod_navigation { display: block !important } .mod_navigation.active { max-height: 600px; } .mod_navigation ul.level_1 { flex-direction: column; gap: 0; padding: var(--spacing-sm) 0; justify-content: center; } .mod_navigation ul.level_1 > li { width: 100%; border-bottom: 1px solid rgba(59, 130, 246, 0.1); } .mod_navigation ul.level_1 > li:last-child { border-bottom: none; } .mod_navigation a { padding: var(--spacing-sm) var(--spacing-lg); border-radius: 0; width: 100%; color: var(--charcoal); } .mod_navigation a::after { display: none; } .mod_navigation li.active strong { border-radius: var(--radius); margin: var(--spacing-xs) var(--spacing-sm); width: calc(100% - 2rem); display: block; } /* Grilles responsives */ .grid_desktop_30_40_30, .grid_tablet_30_40_30 { grid-template-columns: 1fr !important; gap: var(--spacing-md) !important; } .grid_start.block { padding: 0!important; } /* Sections responsives */ .presentation, .iconcolonne { padding: var(--spacing-xl) 0; margin: var(--spacing-lg) 0; } .presentation .ce_cp_column_start, .presentation .ce_cp_column_1_2, .presentation .ce_cp_column_2_3, .presentation .ce_cp_column_3_3, .iconcolonne .ce_cp_column_start, .iconcolonne .ce_cp_column_1_2, .iconcolonne .ce_cp_column_2_3, .iconcolonne .ce_cp_column_3_3 { padding: var(--spacing-lg); margin-bottom: var(--spacing-md); } .presentation h2, .iconcolonne h2 { font-size: clamp(1.5rem, 6vw, 2.5rem); margin-bottom: var(--spacing-lg); } .presentation h3, .iconcolonne h3 { font-size: 1.4rem; flex-direction: column; text-align: center; gap: var(--spacing-xs); } .accueil .hero { padding: 4rem var(--spacing-sm) 3rem; } .accueil #main .inside { margin: var(--spacing-sm) !important; padding: var(--spacing-lg) var(--spacing-md) !important; } .content-text ol li { flex-direction: column; text-align: center; gap: var(--spacing-sm); padding: var(--spacing-md); } .contenu #main .inside { backdrop-filter: unset; } .contenu h1 { font-size: clamp(2rem, 6vw, 3rem); } .services { padding: var(--spacing-md); margin-bottom: var(--spacing-md); } .accueil .layout_latest { height: auto; margin-bottom: var(--spacing-md); } .accueil .layout_latest .image_container { height: 220px; } /* Sous-menus mobile */ .mod_navigation ul.level_2 { position: static; opacity: 1; visibility: visible; transform: none; background: rgba(59, 130, 246, 0.05); backdrop-filter: blur(10px); border: none; border-radius: 0; box-shadow: none; max-height: 0; overflow: hidden; transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: auto; margin: 0 var(--spacing-sm); border-radius: var(--radius); z-index: 99999 !important; } .mod_navigation ul.level_1 > li.submenu-open > ul.level_2 { max-height: 400px; } .mod_navigation ul.level_2::before { display: none; } .mod_navigation ul.level_2 a { color: var(--primary-blue); padding: var(--spacing-xs) var(--spacing-lg); border-bottom: 1px solid rgba(59, 130, 246, 0.1); font-size: 0.9rem; } .mod_navigation ul.level_2 a:hover { background: rgba(59, 130, 246, 0.1); color: var(--primary-dark); transform: none; padding-left: var(--spacing-lg); border-left: none; } .mod_navigation ul.level_2 a::before { display: none; } .mod_navigation ul.level_1 > li.submenu > a::after, .mod_navigation ul.level_1 > li.submenu > strong::after { content: "+"; font-size: 1.2rem; transform: none; margin-left: auto; } .mod_navigation ul.level_1 > li.submenu.submenu-open > a::after, .mod_navigation ul.level_1 > li.submenu.submenu-open > strong::after { content: "−"; transform: none; } /* Logomarque responsive */ .logomarque { padding: var(--spacing-lg) 0; } .logomarque .grid_start { padding: 0 var(--spacing-sm); } .logomarque img { max-height: 60px !important; } .logomarque .grid_desktop_30_40_30, .logomarque .grid_tablet_30_40_30, .logomarque [class*="grid_"] { flex-wrap: wrap !important; justify-content: center !important; gap: var(--spacing-sm) !important; } .logomarque .ce_cp_column_start, .logomarque .ce_cp_column_1_2, .logomarque .ce_cp_column_2_3, .logomarque .ce_cp_column_3_3, .logomarque .ce_cp_column_4_4, .logomarque .ce_cp_column_5_5, .logomarque .ce_cp_column_6_6 { flex: 0 1 auto !important; min-width: 140px !important; min-height: 100px !important; } } /* Petit mobile */ @media (max-width: 480px) { :root { --spacing-xl: 1.5rem; --spacing-lg: 0.75rem; --spacing-md: 0.75rem; } .logo { top: -10px; left: 0.5rem; margin-top: 1.5rem; } .logo img { height: 6rem !important; } #container { padding-top: 80px; } #header.scrolled .logo { margin-top: 0.5rem; transform: scale(0.7); } #header.scrolled .logo img { height: 5rem !important; } .contenu #main .inside { margin: 0.5rem !important; padding: var(--spacing-md) var(--spacing-sm) !important; } .accueil .hero h2 { font-size: clamp(1.8rem, 8vw, 2.5rem); } .btn, .cta-button { display: block; width: 100%; margin: var(--spacing-xs) 0; text-align: center; padding: var(--spacing-sm) var(--spacing-md); } .presentation, .iconcolonne { padding: var(--spacing-lg) 0; } .presentation .ce_cp_column_start, .presentation .ce_cp_column_1_2, .presentation .ce_cp_column_2_3, .presentation .ce_cp_column_3_3, .iconcolonne .ce_cp_column_start, .iconcolonne .ce_cp_column_1_2, .iconcolonne .ce_cp_column_2_3, .iconcolonne .ce_cp_column_3_3 { padding: var(--spacing-md); } .logomarque { padding: var(--spacing-md) 0; } .logomarque img { max-height: 50px !important; } .logomarque .ce_cp_column_start, .logomarque .ce_cp_column_1_2, .logomarque .ce_cp_column_2_3, .logomarque .ce_cp_column_3_3, .logomarque .ce_cp_column_4_4, .logomarque .ce_cp_column_5_5, .logomarque .ce_cp_column_6_6 { min-width: 120px !important; min-height: 80px !important; padding: var(--spacing-xs) !important; } } /* Très petit mobile */ @media (max-width: 400px) { .logomarque .grid_desktop_30_40_30, .logomarque .grid_tablet_30_40_30, .logomarque [class*="grid_"] { flex-wrap: nowrap !important; overflow-x: auto !important; scrollbar-width: thin !important; scrollbar-color: var(--primary-blue) transparent !important; padding-bottom: var(--spacing-xs) !important; } .logomarque .grid_desktop_30_40_30::-webkit-scrollbar, .logomarque .grid_tablet_30_40_30::-webkit-scrollbar, .logomarque [class*="grid_"]::-webkit-scrollbar { height: 4px !important; } .logomarque .grid_desktop_30_40_30::-webkit-scrollbar-track, .logomarque .grid_tablet_30_40_30::-webkit-scrollbar-track, .logomarque [class*="grid_"]::-webkit-scrollbar-track { background: rgba(59, 130, 246, 0.1) !important; border-radius: 2px !important; } .logomarque .grid_desktop_30_40_30::-webkit-scrollbar-thumb, .logomarque .grid_tablet_30_40_30::-webkit-scrollbar-thumb, .logomarque [class*="grid_"]::-webkit-scrollbar-thumb { background: var(--gradient-primary) !important; border-radius: 2px !important; } .logomarque .ce_cp_column_start, .logomarque .ce_cp_column_1_2, .logomarque .ce_cp_column_2_3, .logomarque .ce_cp_column_3_3, .logomarque .ce_cp_column_4_4, .logomarque .ce_cp_column_5_5, .logomarque .ce_cp_column_6_6 { flex: 0 0 auto !important; min-width: 100px !important; } } /* ======================================== 18. UTILITAIRES ET CLASSES HELPER MODERNISÉES ======================================== */ .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: var(--spacing-sm); } .mb-2 { margin-bottom: var(--spacing-md); } .mb-3 { margin-bottom: var(--spacing-lg); } .mb-4 { margin-bottom: var(--spacing-xl); } .mt-0 { margin-top: 0; } .mt-1 { margin-top: var(--spacing-sm); } .mt-2 { margin-top: var(--spacing-md); } .mt-3 { margin-top: var(--spacing-lg); } .mt-4 { margin-top: var(--spacing-xl); } .p-1 { padding: var(--spacing-sm); } .p-2 { padding: var(--spacing-md); } .p-3 { padding: var(--spacing-lg); } .p-4 { padding: var(--spacing-xl); } .hidden { display: none; } .visible { display: block; } /* Classes pour les couleurs */ .text-primary { background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .text-secondary { background: var(--gradient-fresh); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .text-accent { background: var(--gradient-warm); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .text-white { color: var(--soft-white); } .text-dark { color: var(--charcoal); } .text-gray { color: var(--dark-gray); } .bg-primary { background: var(--gradient-primary); } .bg-secondary { background: var(--gradient-fresh); } .bg-accent { background: var(--gradient-warm); } .bg-white { background: var(--soft-white); } .bg-glass { background: var(--gradient-glass); backdrop-filter: blur(15px) saturate(180%); } /* Classes d'animation */ .animate-fade-in { animation: fadeInUp 0.8s ease-out; } .animate-slide-right { animation: slideInRight 0.8s ease-out; } .animate-slide-left { animation: slideInLeft 0.8s ease-out; } .animate-scale-in { animation: scaleIn 0.6s ease-out; } .animate-rotate-in { animation: rotateIn 0.8s ease-out; } .animate-delay-1 { animation-delay: 0.1s; } .animate-delay-2 { animation-delay: 0.2s; } .animate-delay-3 { animation-delay: 0.3s; } .animate-delay-4 { animation-delay: 0.4s; } .animate-delay-5 { animation-delay: 0.5s; } /* ======================================== 19. CORRECTIONS FINALES ET OPTIMISATIONS ======================================== */ /* Amélioration de la performance et de l'accessibilité */ * { scroll-behavior: smooth; } /* Optimisation des transitions pour les appareils à faible performance */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Amélioration du contraste pour l'accessibilité */ @media (prefers-contrast: high) { :root { --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.3); --shadow-medium: 0 8px 30px rgba(0, 0, 0, 0.4); --shadow-heavy: 0 20px 50px rgba(0, 0, 0, 0.5); } } /* S'assurer que tous les éléments sont bien positionnés */ body.scrolled #header { background: rgba(255, 255, 255, 0.98); box-shadow: var(--shadow-medium); } /* Correction pour s'assurer que le H1 est bien visible */ .accueil h1, .accueil .mod_rocksolid_slider h1 { visibility: visible !important; opacity: 1 !important; display: block !important; } /* Effet de focus amélioré pour l'accessibilité */ *:focus-visible { outline: 3px solid var(--accent-orange); outline-offset: 2px; border-radius: var(--radius); } /* Optimisation des images */ img { height: auto; max-width: 100%; } /* Amélioration des performances de scroll */ .mod_navigation ul.level_2, .logomarque [class*="grid_"] { will-change: transform; } /* Préchargement des gradients pour de meilleures performances */ .preload-gradients { background: var(--gradient-primary), var(--gradient-warm), var(--gradient-cool), var(--gradient-fresh); position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } /* Support pour les thèmes sombres du système */ @media (prefers-color-scheme: dark) { .contenu #main .inside { background: rgba(30, 41, 59, 0.95); color: var(--soft-white); } .contenu h1, .contenu h2 { color: var(--soft-white); } .contenu p { color: rgba(255, 255, 255, 0.8); } } /* Fin du CSS modernisé */