.elementor-6497 .elementor-element.elementor-element-e8ce6e6{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:112px;--padding-bottom:64px;--padding-left:24px;--padding-right:24px;}.elementor-6497 .elementor-element.elementor-element-15ca5f8{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-6497 .elementor-element.elementor-element-ef6a862{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-widget-search-form input[type="search"].elementor-search-form__input{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-search-form .elementor-search-form__input, .elementor-widget-search-form .elementor-search-form__icon, .elementor-widget-search-form .elementor-lightbox .dialog-lightbox-close-button, .elementor-widget-search-form .elementor-lightbox .dialog-lightbox-close-button:hover, .elementor-widget-search-form.elementor-search-form--skin-full_screen input[type="search"].elementor-search-form__input{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-widget-search-form .elementor-search-form__submit{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );background-color:var( --e-global-color-secondary );}.elementor-6497 .elementor-element.elementor-element-2f0a247 .elementor-search-form__container{min-height:50px;}.elementor-6497 .elementor-element.elementor-element-2f0a247 .elementor-search-form__submit{min-width:50px;}body:not(.rtl) .elementor-6497 .elementor-element.elementor-element-2f0a247 .elementor-search-form__icon{padding-left:calc(50px / 3);}body.rtl .elementor-6497 .elementor-element.elementor-element-2f0a247 .elementor-search-form__icon{padding-right:calc(50px / 3);}.elementor-6497 .elementor-element.elementor-element-2f0a247 .elementor-search-form__input, .elementor-6497 .elementor-element.elementor-element-2f0a247.elementor-search-form--button-type-text .elementor-search-form__submit{padding-left:calc(50px / 3);padding-right:calc(50px / 3);}.elementor-6497 .elementor-element.elementor-element-2f0a247:not(.elementor-search-form--skin-full_screen) .elementor-search-form__container{border-radius:3px;}.elementor-6497 .elementor-element.elementor-element-2f0a247.elementor-search-form--skin-full_screen input[type="search"].elementor-search-form__input{border-radius:3px;}.elementor-6497 .elementor-element.elementor-element-640f9e1{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:28px;--padding-bottom:20px;--padding-left:24px;--padding-right:24px;}.elementor-6497 .elementor-element.elementor-element-640f9e1:not(.elementor-motion-effects-element-type-background), .elementor-6497 .elementor-element.elementor-element-640f9e1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-6497 .elementor-element.elementor-element-293a729{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:16px;--padding-bottom:16px;--padding-left:24px;--padding-right:24px;}.elementor-6497 .elementor-element.elementor-element-1467ac0{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--gap:16px 16px;--row-gap:16px;--column-gap:16px;--flex-wrap:wrap;}.elementor-6497 .elementor-element.elementor-element-1e30337{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--gap:20px 20px;--row-gap:20px;--column-gap:20px;}.elementor-6497 .elementor-element.elementor-element-336bb3d{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--gap:8px 8px;--row-gap:8px;--column-gap:8px;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-6497 .elementor-element.elementor-element-ace2c68{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-widget-icon.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-primary );}.elementor-6497 .elementor-element.elementor-element-9416fa5 .elementor-icon-wrapper{text-align:center;}.elementor-6497 .elementor-element.elementor-element-e0d2102 .elementor-icon-wrapper{text-align:center;}.elementor-6497 .elementor-element.elementor-element-dcf1682{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:40px;--padding-bottom:40px;--padding-left:24px;--padding-right:24px;}.elementor-6497 .elementor-element.elementor-element-dcf1682:not(.elementor-motion-effects-element-type-background), .elementor-6497 .elementor-element.elementor-element-dcf1682 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-6497 .elementor-element.elementor-element-6d12a16{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:flex-start;--gap:40px 40px;--row-gap:40px;--column-gap:40px;}.elementor-6497 .elementor-element.elementor-element-0a2b997{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-6497 .elementor-element.elementor-element-e9e96e0{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:12px;--padding-left:0px;--padding-right:0px;}.elementor-6497 .elementor-element.elementor-element-786ba8f{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-6497 .elementor-element.elementor-element-ab0d06c{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-6497 .elementor-element.elementor-element-4a8d769{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-6497 .elementor-element.elementor-element-e83f509{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-6497 .elementor-element.elementor-element-6bbd792{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-6497 .elementor-element.elementor-element-0128e3e{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-6497 .elementor-element.elementor-element-c3e490e{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:12px;--padding-left:0px;--padding-right:0px;}.elementor-6497 .elementor-element.elementor-element-7e6ca9c{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-6497 .elementor-element.elementor-element-253a28a{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-6497 .elementor-element.elementor-element-7350b8d{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:12px;--padding-left:0px;--padding-right:0px;}.elementor-6497 .elementor-element.elementor-element-0bfabd9{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-6497 .elementor-element.elementor-element-bf502b9{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-6497 .elementor-element.elementor-element-392016d{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:12px;--padding-left:0px;--padding-right:0px;}.elementor-6497 .elementor-element.elementor-element-4103366{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-6497 .elementor-element.elementor-element-de9de9b{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-6497 .elementor-element.elementor-element-dd82cd0{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-6497 .elementor-element.elementor-element-f7c094d{--n-accordion-title-font-size:1rem;--n-accordion-item-title-space-between:0px;--n-accordion-item-title-distance-from-content:0px;--n-accordion-icon-size:15px;}.elementor-6497 .elementor-element.elementor-element-0641fc4{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-6497 .elementor-element.elementor-element-dcf5ada{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:24px 24px;--row-gap:24px;--column-gap:24px;--flex-wrap:wrap;}.elementor-6497 .elementor-element.elementor-element-8e10c95{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6497 .elementor-element.elementor-element-74b7582{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-6497 .elementor-element.elementor-element-74b7582:not(.elementor-motion-effects-element-type-background), .elementor-6497 .elementor-element.elementor-element-74b7582 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://digitalcity.comaseinfo-support.be/wp-content/uploads/2026/08/actu-5-scaled.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-6497 .elementor-element.elementor-element-efc738b{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-6497 .elementor-element.elementor-element-85f255d{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:12px 12px;--row-gap:12px;--column-gap:12px;--flex-wrap:wrap;}.elementor-6497 .elementor-element.elementor-element-6704d3c .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-6497 .elementor-element.elementor-element-e4f046b{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6497 .elementor-element.elementor-element-b9f644e{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-6497 .elementor-element.elementor-element-b9f644e:not(.elementor-motion-effects-element-type-background), .elementor-6497 .elementor-element.elementor-element-b9f644e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://digitalcity.comaseinfo-support.be/wp-content/uploads/2026/08/pexels-photo-6804594-scaled.jpeg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-6497 .elementor-element.elementor-element-ca3f455{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-6497 .elementor-element.elementor-element-7c04aee{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:12px 12px;--row-gap:12px;--column-gap:12px;--flex-wrap:wrap;}.elementor-6497 .elementor-element.elementor-element-e81318b .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-6497 .elementor-element.elementor-element-a557963{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6497 .elementor-element.elementor-element-f018ed3{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-6497 .elementor-element.elementor-element-f018ed3:not(.elementor-motion-effects-element-type-background), .elementor-6497 .elementor-element.elementor-element-f018ed3 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://digitalcity.comaseinfo-support.be/wp-content/uploads/2026/08/iStock-1212754341.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-6497 .elementor-element.elementor-element-198ad32{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-6497 .elementor-element.elementor-element-f29cad8{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:12px 12px;--row-gap:12px;--column-gap:12px;--flex-wrap:wrap;}.elementor-6497 .elementor-element.elementor-element-896ecc1 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-6497 .elementor-element.elementor-element-10fafa7{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6497 .elementor-element.elementor-element-6a8547d{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-6497 .elementor-element.elementor-element-6a8547d:not(.elementor-motion-effects-element-type-background), .elementor-6497 .elementor-element.elementor-element-6a8547d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://digitalcity.comaseinfo-support.be/wp-content/uploads/2026/08/pexels-photo-9301156-scaled.jpeg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-6497 .elementor-element.elementor-element-fa40b7d{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-6497 .elementor-element.elementor-element-99850f9{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:12px 12px;--row-gap:12px;--column-gap:12px;--flex-wrap:wrap;}.elementor-6497 .elementor-element.elementor-element-648dff2 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-6497 .elementor-element.elementor-element-917438b{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6497 .elementor-element.elementor-element-fb9c638{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-6497 .elementor-element.elementor-element-fb9c638:not(.elementor-motion-effects-element-type-background), .elementor-6497 .elementor-element.elementor-element-fb9c638 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://digitalcity.comaseinfo-support.be/wp-content/uploads/2026/08/DigitalCityBrussels_HD_18_0-scaled.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-6497 .elementor-element.elementor-element-cf98951{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-6497 .elementor-element.elementor-element-e4eef11{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:12px 12px;--row-gap:12px;--column-gap:12px;--flex-wrap:wrap;}.elementor-6497 .elementor-element.elementor-element-9fc4ea8 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-6497 .elementor-element.elementor-element-18891af{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6497 .elementor-element.elementor-element-26d6a5c{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-6497 .elementor-element.elementor-element-26d6a5c:not(.elementor-motion-effects-element-type-background), .elementor-6497 .elementor-element.elementor-element-26d6a5c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://digitalcity.comaseinfo-support.be/wp-content/uploads/2026/08/iStock-1311666126_1.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-6497 .elementor-element.elementor-element-853c7ca{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-6497 .elementor-element.elementor-element-09f75f2{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:12px 12px;--row-gap:12px;--column-gap:12px;--flex-wrap:wrap;}.elementor-6497 .elementor-element.elementor-element-45489ed .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-6497 .elementor-element.elementor-element-8c8c874{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6497 .elementor-element.elementor-element-76936d1{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-6497 .elementor-element.elementor-element-76936d1:not(.elementor-motion-effects-element-type-background), .elementor-6497 .elementor-element.elementor-element-76936d1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://digitalcity.comaseinfo-support.be/wp-content/uploads/2026/09/DIGITALCITY-5_1-scaled.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-6497 .elementor-element.elementor-element-8c2185b{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-6497 .elementor-element.elementor-element-1c16e6c{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:12px 12px;--row-gap:12px;--column-gap:12px;--flex-wrap:wrap;}.elementor-6497 .elementor-element.elementor-element-d5005f1 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-6497 .elementor-element.elementor-element-a4c3183{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6497 .elementor-element.elementor-element-e28d026{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-6497 .elementor-element.elementor-element-e28d026:not(.elementor-motion-effects-element-type-background), .elementor-6497 .elementor-element.elementor-element-e28d026 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://digitalcity.comaseinfo-support.be/wp-content/uploads/2026/09/Digital_City_HD_10-scaled.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-6497 .elementor-element.elementor-element-a25add8{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-6497 .elementor-element.elementor-element-15e1925{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:12px 12px;--row-gap:12px;--column-gap:12px;--flex-wrap:wrap;}.elementor-6497 .elementor-element.elementor-element-a3f43a4 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-6497 .elementor-element.elementor-element-188e719{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--gap:4px 4px;--row-gap:4px;--column-gap:4px;--flex-wrap:wrap;--padding-top:48px;--padding-bottom:16px;--padding-left:0px;--padding-right:0px;}.elementor-6497 .elementor-element.elementor-element-ca220eb{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:64px;--padding-bottom:64px;--padding-left:24px;--padding-right:24px;}.elementor-6497 .elementor-element.elementor-element-ec8c228{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-6497 .elementor-element.elementor-element-441b7c1 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-6497 .elementor-element.elementor-element-f99fbd2{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}@media(min-width:768px){.elementor-6497 .elementor-element.elementor-element-e8ce6e6{--content-width:1320px;}.elementor-6497 .elementor-element.elementor-element-640f9e1{--content-width:1320px;}.elementor-6497 .elementor-element.elementor-element-293a729{--content-width:1320px;}.elementor-6497 .elementor-element.elementor-element-dcf1682{--content-width:1320px;}.elementor-6497 .elementor-element.elementor-element-ca220eb{--content-width:1320px;}}/* Start custom CSS *//* ========================================================================= CATALOGUE DES FORMATIONS — page 1772 Repris de wireframe-catalogue-formations-v10.html (serie figee du 28/07), habille avec les jetons de la charte web v3. Ecarts commentes sur place. Rien ici ne touche le socle 609. ========================================================================= */ /* Elementor enveloppe chaque widget dans un conteneur et ces conteneurs centrent leurs enfants ; il pose aussi width:100% sur les widgets places en rangee. On remet la page a gauche, puis on redonne le centrage la ou le V10 le demande. Selecteurs ancres sur les sections : le CSS d'une page n'est pas prefixe par Elementor. */ .dc-cf-hero .e-con,.dc-cf-notice .e-con,.dc-cf-resbar .e-con,.dc-cf-cat .e-con, .dc-cf-cta .e-con, .dc-cf-hero > .e-con-inner,.dc-cf-notice > .e-con-inner,.dc-cf-resbar > .e-con-inner, .dc-cf-cat > .e-con-inner,.dc-cf-cta > .e-con-inner{align-items:stretch!important;} .dc-cf-hero-in,.dc-cf-cta-in{align-items:center!important;} .dc-cf-resbar-in,.dc-cf-resbar-r,.dc-cf-sort,.dc-cf-view,.dc-cf-opt, .dc-cf-notice-in,.dc-cf-card-meta{align-items:center!important;} .dc-cf-notice-in{align-items:flex-start!important;} .dc-cf-pills > *,.dc-cf-sort > *,.dc-cf-view > *,.dc-cf-card-meta > *, .dc-cf-pag > *,.dc-cf-cta-in > *{flex:0 0 auto!important;width:auto!important;} .dc-cf-hero .e-con,.dc-cf-cta .e-con{padding-left:0;padding-right:0;} /* ---------- Hero recherche ---------- */ /* V10 : background:var(--dark-bg), aplat gris de wireframe. Toutes les surfaces sombres du site portent le degrade profond de la charte (bandeau CTA de l'accueil, bloc newsletter des actualites), on garde la meme famille. */ .dc-cf-hero{background-color:#0E0B26;position:relative;overflow:hidden;} .dc-cf-hero::after{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(50% 80% at 50% 0,rgba(139,92,246,.20),transparent 60%);} .dc-cf-hero > *{position:relative;z-index:1;} .dc-cf-hero-in{max-width:800px;margin:0 auto;text-align:center;} .dc-cf-audience .elementor-heading-title.elementor-heading-title{display:inline-block; font-family:var(--dc-body);font-size:12px;font-weight:700;text-transform:uppercase; letter-spacing:.10em;color:#fff;border:1px solid rgba(255,255,255,.35); border-radius:var(--dc-radius-sm);padding:6px 14px;margin-bottom:20px;} .dc-cf-h1 .elementor-heading-title.elementor-heading-title{font-family:var(--dc-display); font-size:clamp(32px,4vw,52px);font-weight:700;letter-spacing:-.02em;color:#fff; line-height:1.15;margin-bottom:16px;} .dc-cf-sub p{font-family:var(--dc-body);font-size:18px;line-height:1.5; color:rgba(255,255,255,.65);margin:0 0 40px;} /* V10 : .search-bar-large — champ et bouton dans un meme bloc, sans gouttiere. */ .dc-cf-search{max-width:640px;width:100%;margin:0 auto 32px;} .dc-cf-searchw{width:100%;} .dc-cf-searchw .elementor-search-form__container{border:2px solid rgba(255,255,255,.2); background:rgba(255,255,255,.08);border-radius:var(--dc-radius-sm);overflow:hidden; transition:var(--dc-transition);min-height:0;} .dc-cf-searchw .elementor-search-form__container:focus-within{border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.12);} .dc-cf-searchw input[type="search"]{font-family:var(--dc-body)!important;font-size:17px!important; color:#fff!important;background:transparent!important;padding:16px 24px!important;border:0!important;} .dc-cf-searchw input[type="search"]::placeholder{color:rgba(255,255,255,.45)!important;} .dc-cf-searchw .elementor-search-form__submit{background-color:#fff!important; color:var(--dc-text)!important;font-family:var(--dc-body);font-size:15px;font-weight:500; padding:16px 32px!important;border:0!important;border-radius:0!important;min-width:0; transition:var(--dc-transition);} .dc-cf-searchw .elementor-search-form__submit:hover{background-color:rgba(255,255,255,.85)!important;} /* V10 : .filter-pill — contour blanc translucide, l'active en blanc plein. */ .dc-cf-pills{width:100%;} .dc-cf-pill .elementor-button{background:transparent!important;color:rgba(255,255,255,.8)!important; border:1px solid rgba(255,255,255,.2)!important;border-radius:var(--dc-radius-sm)!important; font-family:var(--dc-body);font-size:14px;font-weight:400!important;padding:8px 20px!important; white-space:nowrap;transition:var(--dc-transition);} .dc-cf-pill .elementor-button:hover{background:#fff!important;color:var(--dc-text)!important; border-color:#fff!important;} .dc-cf-pill-on .elementor-button{background:#fff!important;color:var(--dc-text)!important; border-color:#fff!important;font-weight:500!important;} /* ---------- Bandeau de contexte ---------- */ .dc-cf-notice{background-color:var(--dc-gray-50)!important; border-bottom:1px solid var(--dc-gray-200);} .dc-cf-notice-in{max-width:900px;} .dc-cf-notice-ico{flex:0 0 auto!important;width:auto!important;} .dc-cf-notice-ico .elementor-heading-title.elementor-heading-title{width:32px;height:32px; border:1px solid var(--dc-text);border-radius:var(--dc-radius-sm);display:flex; align-items:center;justify-content:center;font-family:var(--dc-body);font-size:14px; font-weight:700;color:var(--dc-text);} .dc-cf-notice-txt{flex:1 1 auto!important;width:auto!important;min-width:0;} .dc-cf-notice-t .elementor-heading-title.elementor-heading-title{font-family:var(--dc-body); font-size:16px;font-weight:700;line-height:1.4;color:var(--dc-text);margin-bottom:6px;} .dc-cf-notice-p p{font-family:var(--dc-body);font-size:15px;line-height:1.6; color:var(--dc-text-light);margin:0;} .dc-cf-notice-p p + p{margin-top:8px;} .dc-cf-notice-p a{color:var(--dc-text);font-weight:600; border-bottom:1px solid var(--dc-text);transition:var(--dc-transition);} .dc-cf-notice-p a:hover{color:var(--dc-bleu-logo);border-bottom-color:var(--dc-bleu-logo);} /* ---------- Barre de resultats ---------- */ .dc-cf-resbar{border-bottom:1px solid var(--dc-gray-200);background-color:#fff!important;} .dc-cf-count .elementor-heading-title.elementor-heading-title{font-family:var(--dc-body); font-size:15px;font-weight:600;color:var(--dc-text);white-space:nowrap;} .dc-cf-resbar-r{flex:0 0 auto!important;width:auto!important;} .dc-cf-sort-lab .elementor-heading-title.elementor-heading-title{font-family:var(--dc-body); font-size:14px;font-weight:400;color:var(--dc-text-light);white-space:nowrap;} /* V10 : un . On la dessine donc explicitement. */ .dc-cf-opt{cursor:pointer;} .dc-cf-opt:focus-visible{outline:2px solid var(--dc-bleu-logo);outline-offset:3px;border-radius:4px;} .dc-cf-pill{cursor:pointer;} .dc-cf-pill:focus-visible{outline:2px solid #fff;outline-offset:3px;} /* --- LE MENU DE TRI (18-09-2026) ------------------------------------------- Le wireframe propose quatre criteres, la page n'avait qu'un bouton fige. Le menu est construit par le moteur de filtres a partir de ce bouton, qui reste le declencheur — l'editeur retrouve donc son widget dans l'arbre. */ .dc-cf-tri-menu{ position:absolute!important;top:calc(100% + 6px);right:0;z-index:40; margin:0;padding:6px;list-style:none;min-width:200px; background:#fff;border:1px solid var(--dc-gray-200); border-radius:var(--dc-radius-sm,8px); box-shadow:0 14px 34px -12px rgba(15,27,61,.28);} .dc-cf-tri-menu[hidden]{display:none!important;} .dc-cf-tri-menu li{ padding:9px 12px;border-radius:6px;cursor:pointer; font-size:14px;line-height:1.3;color:var(--dc-text);} .dc-cf-tri-menu li:hover{background:var(--dc-gray-50);} .dc-cf-tri-menu li:focus-visible{outline:2px solid var(--dc-bleu-logo);outline-offset:-2px;} .dc-cf-tri-menu li[aria-selected="true"]{font-weight:700;color:#00688A;} .dc-cf-tri-menu li[aria-selected="true"]::after{content:" ✓";} /* --- LE SURVOL DES CARTES : ALIGNE SUR LE RESTE DU SITE (18-09-2026) ------ Yassine : « quand on survole les cartes y a toujours un contour noir autour, il faut l'enlever, c'est ce que Hamza avait dit. Il n'est pas sur les autres cartes du site non ? » Exact, et mesure a l'appui — survol de chaque famille de cartes : .dc-blog-card (accueil) fond #F9FAFB, bordure inchangee, aucune ombre .dc-pub-card (A propos) fond #F9FAFB, bordure inchangee, aucune ombre .dc-service-card (profils) fond #F9FAFB, bordure inchangee, aucune ombre .dc-cf-card (catalogue) fond #F9FAFB + BORDURE ASSOMBRIE + OMBRE Le catalogue etait le seul a cerner sa carte au survol. Deux regles successives s'y empilaient : l'une posait `border-color:var(--dc-text)`, soit #1A1D2B — le « contour noir » que Hamza a releve —, l'autre la ramenait a gris 300. Meme corrigee, elle restait la seule du site a changer de bordure. On garde le seul retour commun a tout le site : le fond qui s'eclaircit. */ .dc-cf-card:hover{ border-color:var(--dc-gray-200)!important; box-shadow:none!important; background:var(--dc-gray-50)!important;} /* --- LA CASE COCHEE N'AVAIT AUCUN ETAT VISUEL (18-09-2026) ---------------- Yassine : « quand on selectionne un il n'y a pas de retour visuel pour etre sur qu'il a ete selectionne, la case n'est pas cochee, rien. » Le carre etait bien dessine (`.dc-cf-opt::before`, 16 px, filet de 1,5 px) mais rien ne le remplissait : le moteur de filtres pose une classe `.dc-cf-opt-on`, personne ne la stylait. Tant que les filtres ne filtraient pas, ca ne se voyait pas. La case cochee prend la couleur d'encre du site, et une coche dessinee en deux bordures — pas un caractere : un « ✓ » depend de la police et se decale d'un navigateur a l'autre. */ .dc-cf-opt::before{position:relative!important;} .dc-cf-opt-on::before{ background:#00688A!important;border-color:#00688A!important;} .dc-cf-opt-on::after{ /* 6 px de retrait de ligne (survol) + 5 px dans la case de 16 px : la coche est positionnee sur `.dc-cf-opt`, pas sur la case. */ content:"";position:absolute;left:11px;top:50%; width:4px;height:8px;margin-top:-6px; border:solid #fff;border-width:0 2px 2px 0; transform:rotate(45deg);pointer-events:none;} .dc-cf-opt{position:relative;} .dc-cf-opt-on .dc-cf-opt-lab .elementor-heading-title.elementor-heading-title{ font-weight:700!important;color:var(--dc-text)!important;} /* --- LA BARRE DE RESULTATS N'ETAIT PAS ALIGNEE (18-09-2026) --------------- Yassine : « il faut aligner la liste deroulante et les boutons avec le texte "trier par :" ». Mesure des centres verticaux, avant correction : « 8 formations [exemple] » 268 « Trier par : » 278 « Prochaine session » 286 les deux boutons de vue 289 Quatre centres differents sur 21 px. Les CONTENEURS etaient bien en `align-items:center` — mais les widgets Elementor qu'ils contiennent ne centrent pas leur propre texte, et chacun tombait ou sa hauteur de ligne le posait. On centre donc aussi l'interieur. */ .dc-cf-resbar-in > *, .dc-cf-resbar-r > *, .dc-cf-sort > *, .dc-cf-view > *{ display:flex!important;align-items:center!important; align-self:center!important;margin:0!important;} .dc-cf-resbar-in .elementor-heading-title, .dc-cf-resbar-r .elementor-heading-title{line-height:1.2!important;margin:0!important;} .dc-cf-sort .elementor-button{line-height:1.2!important;} /* --- LA VUE LISTE (18-09-2026) --------------------------------------------- Le second bouton de la barre de resultats couche les cartes : le visuel a gauche sur 260 px, le corps a droite. Une seule colonne, donc le titre et les meta se lisent d'un trait — c'est la vue pour parcourir vite, quand la grille est la vue pour comparer. La carte est un conteneur flex en colonne : il suffit de le retourner. */ .dc-cf-grid--liste{grid-template-columns:minmax(0,1fr)!important;} /* la grille est un FLEX, pas un grid : c'est la base flex des enfants qu'il faut rouvrir, sinon les cartes restent a la moitie de la largeur. */ .dc-cf-grid.dc-cf-grid--liste > *{flex:0 0 100%!important;width:100%!important;} .dc-cf-grid--liste .dc-cf-card{ flex-direction:row!important;align-items:stretch!important;} .dc-cf-grid--liste .dc-cf-card-img{ flex:0 0 260px!important;width:260px!important;aspect-ratio:auto!important; border-bottom:0!important;border-right:1px solid var(--dc-gray-200)!important;} .dc-cf-grid--liste .dc-cf-card-body{flex:1 1 auto!important;min-width:0;} /* En liste, la pastille de domaine n'a plus besoin d'etre posee sur le visuel : elle remonte dans le corps, avec le reste. */ .dc-cf-grid--liste .dc-cf-card-tag{align-self:flex-start;} /* =========================================================================== VRAI MODE LISTE SUR TELEPHONE — 21 septembre 2026 Remplace la regle qui, sous 768 px, RENDAIT LA LISTE IDENTIQUE A LA GRILLE (« grille et liste se confondent : une colonne, visuel au-dessus »). C'etait une decision explicite, pas un oubli — mais elle rendait la bascule inerte : Yassine l'a vu a l'ecran, mesure confirmee (cartes 280x232 dans les deux modes). On avait donc masque la bascule ; Yassine a ensuite precise que le catalogue ne compte 8 formations que pour la demonstration et en comptera beaucoup plus. A ce moment la liste reprend tout son sens : c'est la vue pour PARCOURIR, la grille celle pour COMPARER. Le mecanisme existe deja et n'est pas touche : la bascule pose la classe `dc-cf-grid--liste` sur la grille. On ne fait que lui donner un rendu propre au telephone. Parti pris : ligne compacte, vignette carree de 104 px a gauche, texte a droite. On MASQUE la reference, l'organisme et le bouton — la carte entiere est deja cliquable (recouvrement verifie a `elementFromPoint`), et ces trois lignes sont ce qu'on lit APRES avoir choisi, pas pendant qu'on parcourt. On garde le domaine, le titre, les meta et la prochaine session. =========================================================================== */ @media(max-width:767px){ /* `flex-direction:row` ne suffit PAS : la carte est en `flex-wrap:wrap` et le corps recoit `width:100%` du socle mobile. Le corps passait donc a la ligne SOUS la vignette, et comme la ligne ne fait que 105 px il sortait de la carte — d'ou une bande d'image a gauche et du blanc a droite, le texte etant peint hors cadre. Il faut les TROIS : nowrap sur la carte, largeur rendue automatique et base flex remise a zero sur le corps. */ .dc-cf-grid--liste .dc-cf-card{ flex-direction:row!important;align-items:stretch!important; flex-wrap:nowrap!important;} .dc-cf-grid--liste .dc-cf-card-body{ width:auto!important;flex:1 1 0!important;min-width:0!important;} /* La vignette n'est PAS une balise `` : c'est un FOND CSS sur un conteneur. En grille, sa hauteur venait de `aspect-ratio:16/10`. En liste on passe en `aspect-ratio:auto`, et comme on masque aussi l'etiquette qui etait son seul contenu, il ne lui reste plus rien a mesurer : il s'ecrasait a 20 px (son seul rembourrage par defaut). `align-self:stretch` ne suffit pas — il faut `min-height:100%` pour qu'il suive la hauteur de la ligne. */ .dc-cf-grid--liste .dc-cf-card-img{ flex:0 0 104px!important;width:104px!important; aspect-ratio:auto!important;align-self:stretch!important; min-height:100%!important;padding:0!important; background-size:cover!important;background-position:center!important; border-right:1px solid var(--dc-gray-200)!important;border-bottom:0!important;} /* le corps respire moins large : on resserre le rembourrage */ .dc-cf-grid--liste .dc-cf-card-body{padding:12px 14px!important;} /* ce qu'on ne lit pas en parcourant */ .dc-cf-grid--liste .dc-cf-card-ref, .dc-cf-grid--liste .dc-cf-card-org, .dc-cf-grid--liste .dc-cf-card-cta{display:none!important;} /* le titre tient sur deux lignes au plus, sinon la ligne s'etire */ .dc-cf-grid--liste .dc-cf-card-t .elementor-heading-title{ font-size:15px!important;line-height:1.25!important;margin-bottom:6px!important; display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden!important;} .dc-cf-grid--liste .dc-cf-card-dom .elementor-heading-title{margin-bottom:4px!important;} .dc-cf-grid--liste .dc-cf-card-sess .elementor-heading-title{margin-bottom:0!important;} /* l'etiquette de rubrique reste posee sur le visuel, trop etroite ici */ .dc-cf-grid--liste .dc-cf-card-tag{display:none!important;} } .dc-cf-view-btn{cursor:pointer;} .dc-cf-view-btn:focus-visible{outline:2px solid var(--dc-bleu-logo);outline-offset:2px;} /* =========================================================================== SYNTHESE DE LA COLONNE DE FILTRES Le panneau disait quelles cases etaient cochees, mais seulement si le bon groupe etait ouvert. On ajoute trois reperes : un compteur sur le titre du groupe, un ruban de jetons retirables, et un survol de ligne. =========================================================================== */ .dc-cf-gcount{display:inline-flex;align-items:center;justify-content:center; min-width:18px;height:18px;margin-left:8px;padding:0 5px; border-radius:9px;background:#00688A;color:#fff; font-size:11px;font-weight:600;line-height:1;vertical-align:middle;} .dc-cf-actifs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;} .dc-cf-actifs[hidden]{display:none!important;} /* le theme impose une taille et un fond a tout `button` : sans !important les jetons sortaient en 18 px, pleine largeur, un par ligne. */ .dc-cf-actifs .dc-cf-actif{display:inline-flex!important;align-items:center!important; gap:5px!important;width:auto!important; padding:4px 8px 4px 10px!important;border:1px solid #00688A!important; border-radius:999px!important;background:#EAF4F7!important;color:#00506B!important; font-size:12px!important;font-weight:600!important;line-height:1.25!important; letter-spacing:0!important;text-transform:none!important; box-shadow:none!important;cursor:pointer; font-family:var(--dc-body)!important;transition:var(--dc-transition);} .dc-cf-actifs .dc-cf-actif:hover{background:#00688A!important;color:#fff!important;} .dc-cf-actif:focus-visible{outline:2px solid var(--dc-bleu-logo);outline-offset:2px;} .dc-cf-actifs .dc-cf-actif-x{font-size:14px!important;line-height:1!important;opacity:.8;} /* la ligne entiere reagit au survol : la case seule etait une cible etroite */ .dc-cf-opt{border-radius:var(--dc-radius-sm); padding:4px 6px!important;margin-left:-6px!important; transition:background-color .15s ease;} .dc-cf-opt:hover{background:var(--dc-gray-50);} /* =========================================================================== CATALOGUE — PASSE DU 18 AU SOIR =========================================================================== */ /* --- 1. DE VRAIES PHOTOS SUR LES CARTES ----------------------------------- Yassine : « quand je disais de mettre des visuels je parlais de VRAIES IMAGES pour les cartes, pas des fonds de couleur. » D'accord — le degrade etait un pis-aller. Les huit cartes portent desormais huit photos DISTINCTES de la mediatheque Digitalcity : aucune repetition dans la grille, et la premiere reprend l'image du heros de sa propre fiche, si bien qu'en cliquant on retrouve le meme visuel. Ce sont des photos de maison, pas des visuels par formation : a remplacer si Digitalcity en fournit de specifiques. Deux precautions. Le voile sombre en bas garantit la lisibilite de la pastille de domaine quelle que soit la photo — sans lui, une etiquette blanche sur un mur clair disparait. Et `object-fit` n'a pas cours ici : le visuel est un FOND de conteneur, c'est `background-size:cover` qui cadre. */ .dc-cf-vis{ background-color:var(--dc-gray-100)!important; background-size:cover!important; background-position:center center!important; background-repeat:no-repeat!important; position:relative;} /* voile de lisibilite, du haut seulement : c'est la qu'est la pastille */ .dc-cf-vis::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg, rgba(15,27,61,.42) 0%, rgba(15,27,61,.10) 34%, rgba(15,27,61,0) 60%);} /* la mention « Visuel a venir » n'a plus lieu d'etre */ .dc-cf-vis::before{content:none!important;} /* la pastille de domaine passe au-dessus du voile */ .dc-cf-vis .dc-cf-card-tag{position:relative;z-index:2;} .dc-cf-vis .dc-cf-card-tag .elementor-heading-title.elementor-heading-title{ background:rgba(255,255,255,.95)!important;color:var(--dc-text)!important;} /* un leger rapproche au survol de la carte : la photo vit, le texte ne bouge pas. Neutralise si le systeme demande moins de mouvement. */ .dc-cf-vis{transition:transform .5s var(--dc-ease);} .dc-cf-card:hover .dc-cf-vis{transform:scale(1.03);} .dc-cf-card{overflow:hidden;} @media (prefers-reduced-motion:reduce){ .dc-cf-vis{transition:none!important;} .dc-cf-card:hover .dc-cf-vis{transform:none!important;} } /* --- 2. LE SURVOL DES GROUPES DE FILTRES : RETIRE ------------------------- Yassine : « quand on survole les elements de l'accordeon des filtres il y a un degrade en fond, y a pas besoin, tu peux remettre comme c'etait avant ». Il a raison : sur la fiche, le lavis marque un en-tete de MODULE — un bloc de contenu qu'on deplie pour lire. Ici, un titre de groupe de filtres n'est qu'une charniere ; le lui teinter le fait passer pour une option a choisir, au milieu d'une colonne qui en contient deja douze. On revient a rien. */ /* --- 3. LA BARRE DE RECHERCHE : UN SEUL CONTOUR, A LA BONNE FORME -------- « quand on clique sur la barre de recherche il y a un contour bleu [...] ses bords a droite sont arrondis, ce qui ne colle pas avec la barre qui est combinee au bouton a sa droite. Sinon on peut aussi enlever le contour bleu [...] et garder juste celui de la barre complete. » Le diagnostic est le bon, et les deux options se rejoignent. Mesure : - le CHAMP porte `border-radius:8px` SUR SES QUATRE COINS, alors que le bouton colle a sa droite est en `0 8px 8px 0`. Le champ arrondit donc des coins qui sont a l'INTERIEUR de la barre ; - le contour bleu est l'anneau de focus par defaut du navigateur, qui suit ce rayon — d'ou les coins arrondis au milieu de la barre. On ne supprime pas l'indicateur de focus : sans lui, la navigation au clavier ne sait plus ou elle est (WCAG 2.4.7). Mais UN SEUL suffit, et il doit entourer la BARRE, pas le champ. Donc : 1. le champ n'arrondit plus que ses coins gauches — la forme devient juste, au repos comme au focus ; 2. son anneau propre est retire, ce qui supprime le double contour ; 3. la barre complete recoit un vrai anneau au focus, en remplacement du simple passage de 20 % a 50 % d'opacite sur son filet : trop discret pour servir d'indicateur. */ .dc-cf-searchw .elementor-search-form__input{ border-radius:var(--dc-radius-sm) 0 0 var(--dc-radius-sm)!important;} .dc-cf-searchw .elementor-search-form__input:focus, .dc-cf-searchw .elementor-search-form__input:focus-visible{ outline:none!important;box-shadow:none!important;} .dc-cf-searchw .elementor-search-form__container:focus-within{ outline:none!important; border-color:#fff!important;} /* =========================================================================== PASSE MOBILE / TABLETTE — 21 septembre 2026 Catalogue. Les trois points valides par Yassine le 21/09. PORTEE : <=1024 px (telephone + tablette). Le bureau >=1025 ne bouge pas — les versions bureau sont parties chez le client. NE PAS TOUCHER AUX CARTES : les 8 « Voir la formation » sortent a 240 x 29 dans la sonde, mais leur carte porte deja un recouvrement cliquable de 280 x 407 (verifie a `elementFromPoint` : haut, milieu et bas atteignent tous le lien). Leur appliquer une zone de 44 px RAMENERAIT la cible de la carte entiere a une bande — c'est exactement la regression commise sur les cartes de publication d'A propos le meme jour. Faux positif, rien a faire. =========================================================================== */ @media (max-width:1024px){ /* [1] Les pastilles de filtre : 30 px a 390, 34 px a 768. L'extension invisible est IMPOSSIBLE : a 390 px elles tiennent sur QUATRE rangees separees de 6 px seulement — des zones de 44 px se recouvriraient de 8 px. On grandit donc l'objet. `min-height` plutot qu'un rembourrage calcule : la hauteur du contenu change avec le palier (18 px a 390, 22 px a 768), donc une seule valeur de rembourrage ne donnerait pas 44 des deux cotes. `inline-flex` + centrage garantit 44 quel que soit le contenu, sans toucher a la largeur. Cout assume, annonce et accepte : le bloc de filtres s'allonge d'environ 56 px sur telephone (4 rangees). */ .dc-cf-pills .dc-cf-pill .elementor-button{ min-height:44px!important; display:inline-flex!important;align-items:center!important; justify-content:center!important; box-sizing:border-box!important;} /* [2] Les deux boutons d'affichage (grille / liste) : 36 x 36 et surtout COLLES — 0 px entre eux, mesure. Deux cibles mitoyennes sans ecart : on tape sur l'une en visant l'autre. On les porte a 44 et on les separe. L'ecart se met sur le conteneur (`gap`), pas en marge sur les boutons : une marge laisserait les zones sensibles mitoyennes. */ .dc-cf-view{gap:8px!important;} .dc-cf-view .dc-cf-view-btn{ min-height:44px!important;min-width:44px!important; display:flex!important;align-items:center!important; justify-content:center!important; box-sizing:border-box!important;} } /* [3] LE TEXTE D'AIDE DU CHAMP DE RECHERCHE ETAIT COUPE. Mesure a 390 px : « Rechercher une formation, un domaine, une reference… » demande 390 px de rendu pour 298 px disponibles — tronque de 92 px. Le champ lui-meme (338 x 54) est bon ; c'est le texte qui est trop long. A 768 px et au-dela il tient : on ne change donc RIEN au-dessus de 767. Le texte d'un `placeholder` ne se change pas en CSS, et on ne s'autorise aucun script sur ce site. On masque donc le vrai texte d'aide et on en peint un plus court en pseudo-element — qui disparait des que l'utilisateur tape, grace a `:placeholder-shown`. LE REPLI EST PORTE PAR `:has()` LUI-MEME, ET C'EST VOULU. Premier essai : envelopper le tout dans `@supports body.elementor-page-6497(:has(*))`. Elementor l'a DETRUIT — il prefixe les selecteurs du CSS de page avec `body.elementor-page-6497`, et il a pris le mot `body.elementor-page-6497` de `@supports body.elementor-page-6497(...)` pour un selecteur a prefixer. La feuille servie contenait `@supports body.elementor-page-6497(:has(*))`, invalide : tout le bloc etait jete en silence. (A retenir : ne jamais ecrire `@supports body.elementor-page-6497(...)` dans un custom_css Elementor.) La parade ne coute rien : les DEUX regles dependent de `:has()`. Un navigateur qui l'ignore les jette toutes les deux et garde simplement le texte long, tronque comme aujourd'hui. Jamais de champ muet. Geometrie relevee : l'input est a 2 px du bord du conteneur, fait 54 px de haut et porte 20 px de rembourrage a gauche -> 22 px. Couleur du texte d'aide mesuree : rgba(255,255,255,.45). */ @media (max-width:767px){ .dc-cf-search .elementor-search-form__container{position:relative;} .dc-cf-search .elementor-search-form__container:has(.elementor-search-form__input:placeholder-shown) .elementor-search-form__input::placeholder{ color:transparent!important;} .dc-cf-search .elementor-search-form__container:has(.elementor-search-form__input:placeholder-shown)::before{ content:"Rechercher une formation…"; position:absolute;left:22px;top:2px;height:54px; display:flex;align-items:center; pointer-events:none; color:rgba(255,255,255,.45); font:16px/1.6 Roboto, system-ui, sans-serif;} } /* =========================================================================== RETOUCHES MOBILE DU CATALOGUE — 21 septembre 2026 Quatre points releves par Yassine a l'ecran, plus le masquage de la bascule. Tout est borne a 767 px : le bureau ne bouge pas. =========================================================================== */ @media (max-width:767px){ /* [2] LES ARRONDIS DU CHAMP DE RECHERCHE N'AVAIENT PAS SUIVI L'EMPILEMENT. Au bureau, champ et bouton sont cote a cote : le champ arrondit a gauche (`8px 0 0 8px`) et le bouton a droite. Sous 767 px le bouton passe SOUS le champ (mesure : champ 338x54 en haut, bouton 338x52 a 56 px) — le bouton a bien ete reregle (`0 0 8px 8px`), le champ non. Il arrondissait donc a GAUCHE dans un empilement vertical : un cote rond, un cote carre. C'est aussi ce que suit le contour de focus, d'ou ce qu'on voit au clic. */ .dc-cf-search .elementor-search-form__input{ border-radius:8px 8px 0 0!important;} /* [4] LE FOND DES ICONES D'AFFICHAGE ETAIT UN CARRE VIF. Le fond colore (actif #1A1D2B, inactif blanc) est porte par `.elementor-icon` lui-meme, en 36 x 36 avec `border-radius:0`. On lui donne le rayon de la page. (Sans rapport avec la zone de 44 px posee plus haut : le carre faisait deja 36 x 36 avant.) */ .dc-cf-view .dc-cf-view-btn .elementor-icon{ border-radius:8px!important;} /* [5] LA BASCULE GRILLE / LISTE EST MASQUEE SOUS 767 px. Elle FONCTIONNE — l'etat actif bascule bien — mais elle ne produit aucun effet visible ici : mesure a 390 px, les huit cartes font 280x232 dans les DEUX modes. La raison est simple : la grille est deja sur une seule colonne, le mode « liste » n'a donc rien a changer. Au bureau la bascule sert vraiment (2 colonnes de 452 px contre 1 de 670). On la masque plutot que de la supprimer : elle reste entiere au-dessus de 767 px, et un vrai mode liste mobile (vignette a gauche, texte a droite) pourra la ramener sans rien reconstruire. */ /* La bascule etait masquee ici depuis le 21/09 au matin ; retablie le meme jour, le mode liste mobile existant desormais pour de bon. */ /* [6] 62 px DE LARGEUR PERDUS SUR 390, SOIT 16 %. Les cartes sortaient a 280 px alors que la section en offre 342. Ce n'est pas un reglage : c'est le rembourrage PAR DEFAUT des conteneurs Elementor (10 px), applique a trois conteneurs imbriques qui n'ont jamais recu de valeur propre — 342 -> 322 -> 302 -> 282. Trois fois 10 px de chaque cote. On annule le rembourrage LATERAL de ces trois-la seulement, et seulement sous 767 px. Le rembourrage vertical est conserve : lui sert d'espacement entre les rangees. Les cartes s'alignent alors sur les 24 px de marge de toutes les autres sections de la page. */ .dc-cf-layout, .dc-cf-col, .dc-cf-grid{ padding-left:0!important;padding-right:0!important;} } /* [7] et [8] — CONFORMITE DES CARTES AU WIREFRAME V10, releve par Yassine. Portee <=1024 px : telephone et tablette. Le bureau reste fige. [7] LA RANGEE « 2 jours / Presentiel / Payant » N'ETAIT PAS ALIGNEE. Mesure dans la carte : tous les postes sont a x=20 (le rembourrage de la carte) SAUF cette rangee, dont les enfants commencent a x=30. Encore le rembourrage PAR DEFAUT des conteneurs Elementor : le conteneur de la rangee porte `padding:10px` que personne n'a jamais regle. Il decale de 10 px a gauche ET ajoute 10 px au-dessus et en dessous, ce qui casse aussi le rythme vertical. Le wireframe V10 ne prevoit aucun rembourrage ici : `.formation-card-meta{display:flex;align-items:center;gap:.75rem; margin-bottom:.5rem}` — et c'est tout. Le `gap` de 12 px, lui, est conforme. C'est la TROISIEME fois sur cette page que le rembourrage par defaut des conteneurs Elementor produit un defaut invisible dans l'editeur. [8] Le titre de carte n'a aucune marge basse ; le wireframe en donne 12 px (`.formation-card h3{margin-bottom:.75rem}`). Le titre et la reference se touchent donc. Le reste du rythme est conforme (domaine 8, ref 3/8, session 8, organisme 16, CTA 12 px + filet). NOTE IMPORTANTE : les deux defauts existent AUSSI a 1440 px (mesures). La version bureau envoyee au client les porte donc. Non corriges la, sur consigne — a rouvrir si le client les remarque. */ /* PORTEE ELARGIE AU BUREAU le 21/09, sur decision de Yassine : les deux defauts existaient aussi a 1440 px, donc dans la version envoyee au client. Il a choisi la conformite au wireframe plutot que l'identite avec l'envoi. Plus de requete media : la carte est desormais la meme a toutes les largeurs. `.dc-cf-card-m` est la classe des trois WIDGETS (« 2 jours », « Presentiel », « Payant »). Le conteneur de la rangee, celui qui porte le rembourrage de 10 px, s'appelle `.dc-cf-card-meta`. Viser le conteneur. */ .dc-cf-card-meta{padding:0!important;} .dc-cf-card-t .elementor-heading-title{margin-bottom:12px!important;} /* --------------------------------------------------------------------------- PAGINATION DU CATALOGUE — ALIGNEE SUR CELLE D'ACTUALITES, 21 septembre 2026 Demande de Yassine : meme pagination sur les deux pages. La reference est la spec commune aux deux wireframes V10 : 40 px de cote, police 14 px (13 en mobile), 4 px d'ecart. Trois ecarts a rattraper ici : - la POLICE sortait a 16 px. La regle de cette page dit pourtant 13 px, mais sans `!important` : la typographie de bouton d'Elementor, plus specifique, gagnait. C'est le meme piege que le bouton invisible d'A propos — une valeur ecrite n'est pas une valeur appliquee, il faut la mesurer au rendu. - la HAUTEUR mobile etait de 36 px (le wireframe catalogue le prevoit, mais celui d'actualites reste a 40 ; on retient 40 pour que les deux pages soient identiques) ; - l'ECART etait de 2 px au lieu de 4. Pas de zone tactile ajoutee ici, contrairement a la pagination d'actualites : celle-ci est DECORATIVE (aucun `href`), gardee sur decision de Yassine pour montrer le dessin du wireframe. Agrandir la cible d'une commande qui ne repond pas n'aurait aucun sens. --------------------------------------------------------------------------- */ .dc-cf-pag{gap:4px!important;} .dc-cf-pg .elementor-button{ min-width:40px!important;height:40px!important;font-size:14px!important;} /* CORRIGE dans la foulee, apres capture : a 40 px la rangee NE TIENT PAS sur un telephone et « Suivant » passait a la ligne. Calcul : 5 pastilles de 40 px = 200, plus 6 ecarts de 4 = 24, il ne reste que 118 px pour « Precedent » ET « Suivant » — il en faut ~150. Le wireframe du catalogue descend a 36 px / 13 px / 2 px d'ecart SOUS 767 px, et je l'avais ecarte en le prenant pour une incoherence entre les deux wireframes. C'en est une seule en apparence : la pagination du catalogue compte SEPT elements (Precedent, 1, 2, 3, …, 6, Suivant) quand celle d'actualites en compte QUATRE. Le meme composant, avec deux fois plus d'elements, a besoin d'etre plus petit pour tenir. Ce n'est pas une divergence de style, c'est une adaptation au contenu. Les deux paginations restent donc identiques la ou elles sont comparables — au bureau — et le catalogue se resserre sur telephone parce qu'il le doit. */ @media (max-width:767px){ .dc-cf-pag{gap:2px!important;} .dc-cf-pg .elementor-button{ min-width:36px!important;height:36px!important; font-size:13px!important;padding:4px 8px!important;} } /* SEPT ELEMENTS NE TIENNENT PAS SUR UN PETIT TELEPHONE, et aucun reglage de rembourrage ou d'ecart n'y change rien : mesure a 320 px, la rangee demande 313 px au minimum pour 272 disponibles. A 360 px : 313 pour 312. Le wireframe lui-meme deborde la — sa variante mobile (36 px / 13 px / 2 px) a visiblement ete verifiee a 390 et pas en dessous. « Suivant » se retrouvait seul sur une deuxieme ligne, ce qui se lit comme un defaut. On fait ce que font les vraies paginations quand la place manque : on montre MOINS de numeros. Sous 400 px, les points de suspension et la derniere page sortent, il reste « Precedent 1 2 3 Suivant » — 270 px, qui tient jusqu'a 320. Le dessin, les couleurs et les tailles ne bougent pas ; seul le nombre de pastilles s'adapte, ce qui est le comportement attendu d'une pagination et reste fidele a l'intention du wireframe. */ /* CIBLAGE PAR POSITION, PAS PAR IDENTIFIANT. La derniere pastille de page (« 6 ») etait visee par `.elementor-element-b553a94`. Or **Elementor REGENERE les identifiants quand on duplique une page** — verifie le 22/09 en dupliquant ce catalogue : aucun des identifiants d'origine ne survit, alors que les classes `dc-*` passent toutes. Une regle nommee par identifiant se casse donc silencieusement a la premiere copie de la page. `:nth-last-child(2)` designe la meme pastille — l'avant-derniere, juste avant « Suivant » — et survit a la duplication. */ @media (max-width:399px){ .dc-cf-pg-dots, .dc-cf-pag > .dc-cf-pg:nth-last-child(2){display:none!important;} } /* =========================================================================== COPIE V2 — MASQUAGE DU TITRE IMPRIME PAR LE THEME La page d'origine utilise le gabarit « Elementor pleine largeur » (`_wp_page_template = elementor_header_footer`). Une page creee par le MCP retombe sur `default`, et le MCP ne sait pas ecrire ce reglage : le theme ajoute alors son propre `h1` au-dessus du contenu Elementor (50 px + marges, soit ~74 px que la page d'origine n'a pas). On le masque ici — cette feuille ne se charge que sur cette page. VRAI CORRECTIF, en un clic : wp-admin > la page > Attributs de page > Modele > « Elementor pleine largeur ». Ce bloc devient alors inutile. =========================================================================== */ .page-header,.page-header .entry-title{display:none!important;} /* =========================================================================== CATALOGUE — DECISIONS DE LA REUNION DU 25/09 (Veronique, Hamza, Yassine) --------------------------------------------------------------------------- « Le bleu fait clinique, comme dans les hopitaux » : on quitte les lavis bleu-vert pour le VIOLET de la charte (le depart du degrade de marque), dans le heros comme autour des filtres. Puis : - l'en-tete se compacte : les pastilles tiennent sur UNE ligne ; - le bandeau « offre payante » devient un accordeon d'une ligne ; - le nombre de formations domine (chiffre d'exemple, dynamique plus tard) ; - les chiffres des filtres sont plus lisibles ; - deux cartes « Cloture », qui restent consultables et proposent d'etre averti de la prochaine session ; - un favori sur chaque carte et un filtre « Mes favoris » (maquette : sans compte, rien n'est enregistre). =========================================================================== */ :root{--dc-cf-vio:#6D3FE0;--dc-cf-vio-f:#4B25B0;--dc-cf-vio-clair:#F4F0FF;} /* --- le heros : de l'encre au violet, plus de bleu --- */ .dc-cf-hero.dc-cf-hero{background-image:linear-gradient(120deg,#0E0B26 0%,#1D1350 55%,#43208F 100%)!important;} .dc-cf-hero.dc-cf-hero::after{background:radial-gradient(60% 90% at 85% 10%,rgba(167,139,250,.28),transparent 60%)!important;} .dc-cf-hero .dc-cf-hero-in{max-width:1312px!important;} .dc-cf-hero .dc-cf-h1,.dc-cf-hero .dc-cf-sub,.dc-cf-hero .dc-cf-search{max-width:820px;margin-left:auto!important;margin-right:auto!important;} /* une seule ligne de pastilles ; si l'ecran est trop etroit, elle defile */ .dc-cf-hero .dc-cf-pills.dc-cf-pills{flex-wrap:nowrap!important;justify-content:center!important;overflow-x:auto; scrollbar-width:none;max-width:100%;margin-top:28px!important;} .dc-cf-hero .dc-cf-pills.dc-cf-pills::-webkit-scrollbar{display:none;} .dc-cf-hero .dc-cf-pills > *{flex:0 0 auto!important;} @media (max-width:1300px){ .dc-cf-hero .dc-cf-pills.dc-cf-pills{justify-content:flex-start!important;} } /* --- le bandeau « offre payante » en accordeon d'une ligne --- */ .dc-cf-notice.dc-cf-notice{padding-top:20px!important;padding-bottom:0!important;background:#fff!important;} .dc-cf-notice.dc-cf-notice::before,.dc-cf-notice.dc-cf-notice::after{display:none!important;} .dc-cf-offre-w{width:100%!important;} .dc-cf-offre{border:1px solid #E4DCFB;border-radius:14px;background:var(--dc-cf-vio-clair);} .dc-cf-offre summary{display:flex;align-items:center;gap:12px;padding:12px 18px;cursor:pointer;list-style:none;} .dc-cf-offre summary::-webkit-details-marker{display:none;} .dc-cf-offre-ico{flex:0 0 22px;height:22px;border-radius:50%;border:1.5px solid var(--dc-cf-vio);color:var(--dc-cf-vio); display:inline-flex;align-items:center;justify-content:center;font:700 12px/1 var(--dc-body,Roboto),sans-serif;} .dc-cf-offre-t{font-weight:600;font-size:15px;color:var(--dc-text);} .dc-cf-offre-q{font-size:14px;color:var(--dc-cf-vio-f);margin-left:auto;} .dc-cf-offre-chev{width:9px;height:9px;border-right:2px solid var(--dc-cf-vio-f);border-bottom:2px solid var(--dc-cf-vio-f); transform:rotate(45deg);margin:-4px 4px 0 6px;transition:transform .2s;} .dc-cf-offre[open] .dc-cf-offre-chev{transform:rotate(225deg);margin-top:4px;} .dc-cf-offre summary:focus-visible{outline:2px solid var(--dc-cf-vio);outline-offset:2px;border-radius:14px;} .dc-cf-offre-p{padding:0 18px 14px 52px;} .dc-cf-offre-p p{margin:0 0 6px;font-size:15px;color:var(--dc-gray-600,#5F6980);} .dc-cf-offre-p a{color:var(--dc-cf-vio-f);font-weight:600;text-decoration:underline;text-underline-offset:3px;} /* --- le nombre de formations domine --- */ .dc-cf-count .elementor-heading-title.elementor-heading-title{display:flex!important;align-items:baseline!important; gap:12px!important;flex-wrap:wrap;color:var(--dc-text)!important;} .dc-cf-count .dc-cf-count-n{font-family:var(--dc-display,Rubik),sans-serif;font-size:52px;font-weight:800;line-height:1; letter-spacing:-.03em;background:linear-gradient(90deg,#7E3FF2,#4B25B0);-webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:var(--dc-cf-vio);} .dc-cf-count .dc-cf-count-l{font-size:19px;font-weight:600;color:var(--dc-text);-webkit-text-fill-color:currentColor;} /* --- la zone catalogue : fond violet tres clair au lieu du lavis bleu-vert --- */ .dc-cf-cat.dc-cf-cat{background:linear-gradient(180deg,#FBFAFF 0%,#F3EEFF 100%)!important;} .dc-cf-cat.dc-cf-cat::before,.dc-cf-cat.dc-cf-cat::after{display:none!important;} .dc-cf-side.dc-cf-side{background:#fff!important;border:1px solid #E6DFFB!important;border-radius:20px!important;padding:24px 22px!important;} /* chiffres des filtres : lisibles, dans une pastille */ .dc-cf-opt-n .elementor-heading-title.elementor-heading-title{font-size:12px!important;font-weight:600!important; color:#4A3A86!important;background:var(--dc-cf-vio-clair);border-radius:999px;padding:2px 8px;min-width:26px;text-align:center;} .dc-cf-opt.dc-cf-opt-on .dc-cf-opt-n .elementor-heading-title.elementor-heading-title{background:var(--dc-cf-vio);color:#fff!important;} /* --- favori sur chaque carte --- */ .dc-cf-card{position:relative;} .dc-cf-fav-w{position:absolute!important;top:14px;right:14px;width:auto!important;z-index:3;margin:0!important;} .dc-cf-fav-w .dc-cf-fav{width:40px;height:40px;border-radius:50%!important;border:0!important;padding:0!important; display:inline-flex!important;align-items:center;justify-content:center;background:rgba(255,255,255,.94)!important; color:#1A1D2B!important;box-shadow:0 4px 14px rgba(18,16,46,.18)!important;cursor:pointer;transition:transform .15s;} .dc-cf-fav-w .dc-cf-fav:hover{transform:scale(1.06);color:var(--dc-cf-vio)!important;} .dc-cf-fav-w .dc-cf-fav[aria-pressed="true"]{background:var(--dc-cf-vio)!important;color:#fff!important;} .dc-cf-fav-w .dc-cf-fav[aria-pressed="true"] svg path{fill:currentColor;} .dc-cf-fav-w .dc-cf-fav:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 4px var(--dc-cf-vio)!important;} /* --- cartes cloturees : grisees, toujours consultables --- */ .dc-cf-card--cloture .dc-cf-card-img{filter:grayscale(1);opacity:.62;} .dc-cf-card--cloture .dc-cf-card-t .elementor-heading-title, .dc-cf-card--cloture .dc-cf-card-dom .elementor-heading-title{color:var(--dc-gray-600,#5F6980)!important;} .dc-cf-card--cloture .dc-cf-card-sess .elementor-heading-title{color:#8A4B00!important;font-weight:600!important;} .dc-cf-avert-w{width:100%!important;margin:8px 0 4px!important;} .dc-cf-avert{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;} .dc-cf-cloture-lab{display:inline-block;padding:3px 10px;border-radius:999px;background:#FFF1E0;color:#8A4B00; font:700 11px/1.3 var(--dc-body,Roboto),sans-serif;letter-spacing:.08em;text-transform:uppercase;} .dc-cf-avert-b{display:inline-flex!important;align-items:center;gap:6px;height:34px;padding:0 12px!important;border-radius:999px!important; border:1.5px solid var(--dc-cf-vio)!important;background:#fff!important;color:var(--dc-cf-vio-f)!important; font:600 13px/1 var(--dc-body,Roboto),sans-serif!important;cursor:pointer;box-shadow:none!important;} .dc-cf-avert-b svg{width:15px;height:15px;} .dc-cf-avert-b[aria-pressed="true"]{background:var(--dc-cf-vio)!important;color:#fff!important;} .dc-cf-avert-b[aria-pressed="true"] svg path{fill:currentColor;} .dc-cf-avert p{flex-basis:100%;margin:0;font-size:12.5px;color:var(--dc-gray-600,#5F6980);} /* --- « Mes favoris » dans la colonne de filtres --- */ .dc-cf-mesfav-w{margin:0 0 18px!important;padding-bottom:18px!important;border-bottom:1px solid #EEE9FB;} .dc-cf-mesfav-l{display:flex;align-items:center;gap:10px;cursor:pointer;margin:0;} .dc-cf-mesfav-cb{position:absolute;opacity:0;width:1px;height:1px;} .dc-cf-mesfav-sw{flex:0 0 38px;height:22px;border-radius:999px;background:#D9D3EE;position:relative;transition:background .2s;} .dc-cf-mesfav-sw::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s;} .dc-cf-mesfav-cb:checked + .dc-cf-mesfav-sw{background:var(--dc-cf-vio);} .dc-cf-mesfav-cb:checked + .dc-cf-mesfav-sw::after{transform:translateX(16px);} .dc-cf-mesfav-cb:focus-visible + .dc-cf-mesfav-sw{outline:2px solid var(--dc-cf-vio);outline-offset:2px;} .dc-cf-mesfav-t{font-weight:700;font-size:15px;color:var(--dc-text);text-transform:none;letter-spacing:0;} .dc-cf-mesfav-n{font-weight:400;color:var(--dc-gray-600,#5F6980);} .dc-cf-mesfav-p{margin:8px 0 0!important;font-size:12.5px!important;line-height:1.45!important;color:var(--dc-gray-600,#5F6980)!important;} body.dc-cf-seulement-fav .dc-cf-card:not(.dc-fav-on){display:none!important;} @media (max-width:767px){ .dc-cf-offre-q{display:none;} .dc-cf-count .dc-cf-count-n{font-size:40px;} } /* 25/09 — tablette : le compteur prend toute la ligne, le tri passe dessous */ @media (max-width:1024px){ .dc-cf-resbar-in.dc-cf-resbar-in{flex-wrap:wrap!important;row-gap:14px!important;} .dc-cf-resbar-in > .dc-cf-count{flex:1 1 100%!important;width:100%!important;} } /* 27/09 nuit — tablette : le compteur prend toute la ligne (il se cassait en 3 lignes a 768 et 1024 px), le tri passe dessous */ @media (max-width:1024px){ .dc-cf-resbar-in.dc-cf-resbar-in{flex-wrap:wrap!important;row-gap:14px!important;} .dc-cf-resbar-in > .dc-cf-count{flex:1 1 100%!important;width:100%!important;} .dc-cf-count .elementor-heading-title.elementor-heading-title{white-space:nowrap!important;} } /* telephone : cibles tactiles de 44 px pour « Etre averti » et « Voir la formation » */ @media (max-width:767px){ .dc-cf-avert-b{min-height:44px!important;height:auto!important;} .dc-cf-card-cta .elementor-button{min-height:44px!important;display:flex!important;align-items:center!important;} } /* 27/09 — accordeon : la question seule, le chevron pousse a droite */ .dc-cf-offre summary .dc-cf-offre-chev{margin-left:auto!important;} /* 27/09 — plus de filet entre l accordeon et le compteur : une seule entree de catalogue */ .dc-cf-notice.dc-cf-notice{border-bottom:0!important;} /* 27/09 — l accordeon s aligne sur le contenu visible (74 -> 1356 px au bureau : compteur, filtres, grille) */ @media (min-width:1025px){ .dc-cf-offre-w.dc-cf-offre-w{margin-left:10px!important;margin-right:20px!important;width:auto!important;} } /* 27/09 — le haut du bloc de filtres s aligne sur le haut des cartes (la grille a 2 x 10 px de marge interieure) */ @media (min-width:1025px){ .dc-cf-side.dc-cf-side{margin-top:20px!important;} } /* 27/09 — les boutons « Etre averti » et favori passent AU-DESSUS du lien « Voir la formation » etire sur la carte (sinon le clic ouvrait la fiche) */ .dc-cf-avert-w.dc-cf-avert-w,.dc-cf-fav-w.dc-cf-fav-w{position:relative!important;z-index:5!important;} .dc-cf-fav-w.dc-cf-fav-w{position:absolute!important;} .dc-cf-avert-msg{transition:color .2s;} .dc-cf-card.dc-fav-on .dc-cf-avert-msg{color:var(--dc-cf-vio-f,#4B25B0)!important;font-weight:600;} /* 27/09 — le favori est pose sur la CARTE (plus dans l image, qui zoome et passait sous le lien etire) */ .dc-cf-card > .dc-cf-fav-w.dc-cf-fav-w{position:absolute!important;top:14px!important;right:14px!important;left:auto!important;z-index:6!important;} /* 27/09 — la pastille de domaine est posee sur la CARTE : elle ne zoome plus avec l image */ .dc-cf-card > .dc-cf-card-tag.dc-cf-card-tag{position:absolute!important;top:16px!important;left:16px!important;z-index:6!important;width:auto!important;margin:0!important;pointer-events:none;} /* 27/09 — « Filtrer les formations » en 600 comme les autres boutons du site */ .dc-cf-mobfilt .elementor-button.elementor-button{font-weight:600!important;letter-spacing:0!important;} /* [28/09] Mode liste au telephone : le titre ne passe plus sous le favori, le bouton « Etre averti » tient dans la carte */ @media (max-width:767px){ .elementor-6497 .dc-cf-grid--liste .dc-cf-card .dc-cf-card-dom, .elementor-6497 .dc-cf-grid--liste .dc-cf-card .dc-cf-card-t{padding-right:40px!important;} .elementor-6497 .dc-cf-grid--liste .dc-cf-card .dc-cf-avert-b.dc-cf-avert-b{ white-space:normal!important;width:100%!important;max-width:100%!important; min-height:44px!important;height:auto!important;padding:8px 12px!important; text-align:left!important;line-height:1.3!important;} } @media (min-width:768px) and (max-width:1024px){ /* [28/09 b] tablette : meme reserve sous le favori */ .elementor-6497 .dc-cf-grid--liste .dc-cf-card .dc-cf-card-dom, .elementor-6497 .dc-cf-grid--liste .dc-cf-card .dc-cf-card-t{padding-right:56px!important;} } /* ==== [28/09 c] Retours de Yassine sur le catalogue au telephone ==== */ @media (max-width:767px){ /* titre et chapeau du heros : pas de mot seul */ .elementor-6497 .dc-cf-h1 .elementor-heading-title, .elementor-6497 .dc-cf-sub p{text-wrap:balance;} /* espace sous « Rechercher » : 24 px visibles au lieu de 60 */ .elementor-6497 .dc-cf-search.dc-cf-search{margin-bottom:0!important;} .elementor-6497 .dc-cf-pills.dc-cf-pills{margin-top:4px!important;} /* les pastilles defilent jusqu'au bord de l'ecran : la pastille coupee par le bord dit « ca continue » */ .elementor-6497 .dc-cf-pills.dc-cf-pills{margin-left:-24px!important;margin-right:-24px!important; width:calc(100% + 48px)!important;max-width:calc(100% + 48px)!important;flex:0 0 auto!important; padding-left:24px!important;padding-right:24px!important;scroll-padding-left:24px;scroll-snap-type:x proximity;} .elementor-6497 .dc-cf-pills .dc-cf-pill{scroll-snap-align:start;} /* accordeon « offre payante » : 2 lignes equilibrees, interligne resserre */ .elementor-6497 .dc-cf-offre-t{text-wrap:balance;line-height:1.35!important;} /* barre de resultats : alignee sur la colonne (24 px), tri et affichage sur une meme ligne */ .elementor-6497 .dc-cf-resbar-in.dc-cf-resbar-in{padding-left:0!important;padding-right:0!important;} .elementor-6497 .dc-cf-resbar-r.dc-cf-resbar-r{display:flex!important;flex-wrap:nowrap!important;align-items:center!important; justify-content:space-between!important;gap:12px!important;width:100%!important;flex:1 1 100%!important;} .elementor-6497 .dc-cf-resbar-r > .dc-cf-sort{order:1;flex:1 1 auto!important;min-width:0!important;width:auto!important;} .elementor-6497 .dc-cf-resbar-r > .dc-cf-view{order:2;flex:0 0 auto!important;} .elementor-6497 .dc-cf-sort .dc-cf-sort-sel{flex:1 1 auto!important;min-width:0!important;width:auto!important;} .elementor-6497 .dc-cf-sort .dc-cf-sort-sel .elementor-button{font-size:14px!important;padding:7px 30px 7px 10px!important;min-height:44px!important;white-space:nowrap!important;} /* boutons d'affichage : meme dessin que sur le bureau (carres, le cadre arrondi les rogne) */ .elementor-6497 .dc-cf-view.dc-cf-view{overflow:hidden!important;} .elementor-6497 .dc-cf-view .dc-cf-view-btn .elementor-icon{border-radius:0!important;} /* mode liste : 12 px d'air entre le texte et le favori */ .elementor-6497 .dc-cf-grid--liste .dc-cf-card .dc-cf-card-dom, .elementor-6497 .dc-cf-grid--liste .dc-cf-card .dc-cf-card-t{padding-right:52px!important;} } /* « Filtrer les formations » ouvre le panneau en plein ecran (sous 1024 px, la ou la colonne est masquee) */ .dc-cf-sheet-head,.dc-cf-sheet-foot{display:none;} html.dc-cf-sheet-open,html.dc-cf-sheet-open body{overflow:hidden!important;} html.dc-cf-sheet-open .elementor-6497 .dc-cf-side.dc-cf-side{ display:flex!important;flex-direction:column!important;position:fixed!important;inset:0!important; top:0!important;width:auto!important;max-width:none!important;height:100%!important;margin:0!important; z-index:100000!important;background:#FFFFFF!important;border:0!important;border-radius:0!important;box-shadow:none!important; overflow-y:auto!important;overscroll-behavior:contain;padding:0 24px 104px!important;} html.dc-cf-sheet-open .elementor-6497 .dc-cf-side .dc-cf-side-t{display:none!important;} html.dc-cf-sheet-open .dc-cf-sheet-head{ display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:2; min-height:64px;margin:0 -24px 16px;padding:0 16px 0 24px;background:#FFFFFF;border-bottom:1px solid #E2E5ED; font-family:Rubik,sans-serif;font-size:18px;font-weight:700;color:#1A1D2B;} .dc-cf-sheet-x{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0; background:#FFFFFF;border:1px solid #E2E5ED;border-radius:8px;color:#1A1D2B;cursor:pointer;} html.dc-cf-sheet-open .dc-cf-sheet-foot{ display:block;position:fixed;left:0;right:0;bottom:0;z-index:100001;background:#FFFFFF;border-top:1px solid #E2E5ED; padding:16px 24px calc(16px + env(safe-area-inset-bottom));} .dc-cf-sheet-ok{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;padding:12px 20px; background:#6D3FE0;color:#FFFFFF;border:0;border-radius:8px;font-family:Rubik,sans-serif;font-size:16px;font-weight:600;cursor:pointer;} .dc-cf-sheet-x:focus-visible,.dc-cf-sheet-ok:focus-visible{outline:2px solid #6D3FE0;outline-offset:2px;} @media (max-width:767px){ /* [28/09 d] */ .elementor-6497 .dc-cf-resbar-in > .dc-cf-count.dc-cf-count{order:-1!important;} .elementor-6497 .dc-cf-resbar-r.dc-cf-resbar-r > .dc-cf-sort.dc-cf-sort{order:1!important;} .elementor-6497 .dc-cf-resbar-r.dc-cf-resbar-r > .dc-cf-view.dc-cf-view{order:2!important;} .elementor-6497 .dc-cf-sort .dc-cf-sort-sel .elementor-button.elementor-button{display:flex!important;align-items:center!important;} } /* le panneau ouvert passe devant tout : l'en-tete fixe du site (z 1000) le recouvrait */ html.dc-cf-sheet-open .elementor-location-header, html.dc-cf-sheet-open header.e-con{visibility:hidden!important;} .dc-cf-sheet-foot .dc-cf-sheet-ok.dc-cf-sheet-ok, .dc-cf-sheet-foot .dc-cf-sheet-ok.dc-cf-sheet-ok:hover, .dc-cf-sheet-foot .dc-cf-sheet-ok.dc-cf-sheet-ok:focus{background:#6D3FE0!important;color:#FFFFFF!important;border:0!important;} .dc-cf-sheet-head .dc-cf-sheet-x.dc-cf-sheet-x, .dc-cf-sheet-head .dc-cf-sheet-x.dc-cf-sheet-x:hover, .dc-cf-sheet-head .dc-cf-sheet-x.dc-cf-sheet-x:focus{background:#FFFFFF!important;color:#1A1D2B!important;border:1px solid #E2E5ED!important;padding:0!important;} @media (max-width:767px){ /* [28/09 e] */ .elementor-6497 .dc-cf-resbar-r.dc-cf-resbar-r{padding:0!important;} } @media (max-width:767px){ /* [28/09 f] le fond remplit la zone de 44 px : le cadre arrondi le rogne, comme au bureau */ .elementor-6497 .dc-cf-view .dc-cf-view-btn .elementor-icon-wrapper, .elementor-6497 .dc-cf-view .dc-cf-view-btn .elementor-icon.elementor-icon{width:44px!important;height:44px!important;} } @media (max-width:767px){ /* [28/09 g] boutons colles, comme au bureau */ .elementor-6497 .dc-cf-view.dc-cf-view{gap:0!important;column-gap:0!important;} } /* [29/09] Barre de resultats en TABLETTE : disposition du bureau — compteur a gauche, tri puis boutons d'affichage a droite, sur une ligne — et boutons d'affichage dessines comme au telephone (fond de 44 px qui remplit le bouton, boutons colles, le cadre arrondi rogne les coins). */ @media (min-width:768px) and (max-width:1024px){ .elementor-6497 .dc-cf-resbar-in.dc-cf-resbar-in{flex-wrap:nowrap!important;align-items:center!important;} .elementor-6497 .dc-cf-resbar-in > .dc-cf-count.dc-cf-count{order:0!important;flex:0 1 auto!important;width:auto!important;min-width:0!important;} .elementor-6497 .dc-cf-resbar-r.dc-cf-resbar-r{order:1!important;margin-left:auto!important;padding:0!important;display:flex!important; flex-wrap:nowrap!important;align-items:center!important;gap:12px!important;flex:0 0 auto!important;width:auto!important;} .elementor-6497 .dc-cf-resbar-r.dc-cf-resbar-r > .dc-cf-sort.dc-cf-sort{order:1!important;} .elementor-6497 .dc-cf-resbar-r.dc-cf-resbar-r > .dc-cf-view.dc-cf-view{order:2!important;} .elementor-6497 .dc-cf-view.dc-cf-view{gap:0!important;column-gap:0!important;overflow:hidden!important;} .elementor-6497 .dc-cf-view .dc-cf-view-btn .elementor-icon-wrapper, .elementor-6497 .dc-cf-view .dc-cf-view-btn .elementor-icon.elementor-icon{width:44px!important;height:44px!important;border-radius:0!important;} } /* RETOURS 14/10 : titre du theme masque (gabarit de page par defaut sur la copie) */ .page-header,.entry-title.page-title,header.page-header{display:none!important;}/* End custom CSS */