.elementor-6487 .elementor-element.elementor-element-7936fc6{--display:flex;--min-height:82vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:24px 24px;--row-gap:24px;--column-gap:24px;--flex-wrap:nowrap;--padding-top:114px;--padding-bottom:52px;--padding-left:40px;--padding-right:40px;}.elementor-6487 .elementor-element.elementor-element-7936fc6:not(.elementor-motion-effects-element-type-background), .elementor-6487 .elementor-element.elementor-element-7936fc6 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#140A3A;}.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-6487 .elementor-element.elementor-element-c543751{--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:stretch;--gap:14px 14px;--row-gap:14px;--column-gap:14px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-a6f9eea{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-end;--gap:6px 6px;--row-gap:6px;--column-gap:6px;--border-radius:22px 22px 22px 22px;--padding-top:26px;--padding-bottom:26px;--padding-left:26px;--padding-right:26px;}.elementor-6487 .elementor-element.elementor-element-a6f9eea:not(.elementor-motion-effects-element-type-background), .elementor-6487 .elementor-element.elementor-element-a6f9eea > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://digitalcity.comaseinfo-support.be/wp-content/uploads/2026/08/iStock-1212754341-1024x683.jpg");background-position:center center;background-size:cover;}.elementor-6487 .elementor-element.elementor-element-e48ce58{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 8px) 0px;}.elementor-6487 .elementor-element.elementor-element-67d41b2 .elementor-heading-title{font-family:"Rubik", Sans-serif;font-size:21px;font-weight:700;line-height:1.3em;letter-spacing:-0.01em;color:#FFFFFF;}.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-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-6487 .elementor-element.elementor-element-2ffcaf8{margin:8px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-6487 .elementor-element.elementor-element-2ffcaf8 .elementor-icon-wrapper{text-align:start;}.elementor-6487 .elementor-element.elementor-element-2ffcaf8.elementor-view-stacked .elementor-icon{background-color:#FFFFFF;}.elementor-6487 .elementor-element.elementor-element-2ffcaf8.elementor-view-framed .elementor-icon, .elementor-6487 .elementor-element.elementor-element-2ffcaf8.elementor-view-default .elementor-icon{color:#FFFFFF;border-color:#FFFFFF;}.elementor-6487 .elementor-element.elementor-element-2ffcaf8.elementor-view-framed .elementor-icon, .elementor-6487 .elementor-element.elementor-element-2ffcaf8.elementor-view-default .elementor-icon svg{fill:#FFFFFF;}.elementor-6487 .elementor-element.elementor-element-2ffcaf8 .elementor-icon{font-size:16px;}.elementor-6487 .elementor-element.elementor-element-2ffcaf8 .elementor-icon svg{height:16px;}.elementor-6487 .elementor-element.elementor-element-6e06c1e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-end;--gap:6px 6px;--row-gap:6px;--column-gap:6px;--border-radius:22px 22px 22px 22px;--padding-top:26px;--padding-bottom:26px;--padding-left:26px;--padding-right:26px;}.elementor-6487 .elementor-element.elementor-element-6e06c1e:not(.elementor-motion-effects-element-type-background), .elementor-6487 .elementor-element.elementor-element-6e06c1e > .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-683x1024.jpg");background-position:center center;background-size:cover;}.elementor-6487 .elementor-element.elementor-element-b17aa26{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 8px) 0px;}.elementor-6487 .elementor-element.elementor-element-603cae6 .elementor-heading-title{font-family:"Rubik", Sans-serif;font-size:21px;font-weight:700;line-height:1.3em;letter-spacing:-0.01em;color:#FFFFFF;}.elementor-6487 .elementor-element.elementor-element-41d5475{margin:8px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-6487 .elementor-element.elementor-element-41d5475 .elementor-icon-wrapper{text-align:start;}.elementor-6487 .elementor-element.elementor-element-41d5475.elementor-view-stacked .elementor-icon{background-color:#FFFFFF;}.elementor-6487 .elementor-element.elementor-element-41d5475.elementor-view-framed .elementor-icon, .elementor-6487 .elementor-element.elementor-element-41d5475.elementor-view-default .elementor-icon{color:#FFFFFF;border-color:#FFFFFF;}.elementor-6487 .elementor-element.elementor-element-41d5475.elementor-view-framed .elementor-icon, .elementor-6487 .elementor-element.elementor-element-41d5475.elementor-view-default .elementor-icon svg{fill:#FFFFFF;}.elementor-6487 .elementor-element.elementor-element-41d5475 .elementor-icon{font-size:16px;}.elementor-6487 .elementor-element.elementor-element-41d5475 .elementor-icon svg{height:16px;}.elementor-6487 .elementor-element.elementor-element-59c48d4{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-end;--gap:6px 6px;--row-gap:6px;--column-gap:6px;--border-radius:22px 22px 22px 22px;--padding-top:26px;--padding-bottom:26px;--padding-left:26px;--padding-right:26px;}.elementor-6487 .elementor-element.elementor-element-59c48d4:not(.elementor-motion-effects-element-type-background), .elementor-6487 .elementor-element.elementor-element-59c48d4 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://digitalcity.comaseinfo-support.be/wp-content/uploads/2026/08/iStock-1127397327-1024x683.jpg");background-position:center center;background-size:cover;}.elementor-6487 .elementor-element.elementor-element-2fd0d5f{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 8px) 0px;}.elementor-6487 .elementor-element.elementor-element-2ae330a .elementor-heading-title{font-family:"Rubik", Sans-serif;font-size:21px;font-weight:700;line-height:1.3em;letter-spacing:-0.01em;color:#FFFFFF;}.elementor-6487 .elementor-element.elementor-element-8a56e2b{margin:8px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-6487 .elementor-element.elementor-element-8a56e2b .elementor-icon-wrapper{text-align:start;}.elementor-6487 .elementor-element.elementor-element-8a56e2b.elementor-view-stacked .elementor-icon{background-color:#FFFFFF;}.elementor-6487 .elementor-element.elementor-element-8a56e2b.elementor-view-framed .elementor-icon, .elementor-6487 .elementor-element.elementor-element-8a56e2b.elementor-view-default .elementor-icon{color:#FFFFFF;border-color:#FFFFFF;}.elementor-6487 .elementor-element.elementor-element-8a56e2b.elementor-view-framed .elementor-icon, .elementor-6487 .elementor-element.elementor-element-8a56e2b.elementor-view-default .elementor-icon svg{fill:#FFFFFF;}.elementor-6487 .elementor-element.elementor-element-8a56e2b .elementor-icon{font-size:16px;}.elementor-6487 .elementor-element.elementor-element-8a56e2b .elementor-icon svg{height:16px;}.elementor-6487 .elementor-element.elementor-element-5c0eb44{--display:flex;--min-height:100svh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-end;--align-items:stretch;--gap:12px 12px;--row-gap:12px;--column-gap:12px;--overlay-opacity:1;--padding-top:88px;--padding-bottom:24px;--padding-left:16px;--padding-right:16px;}.elementor-6487 .elementor-element.elementor-element-5c0eb44:not(.elementor-motion-effects-element-type-background), .elementor-6487 .elementor-element.elementor-element-5c0eb44 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://digitalcity.comaseinfo-support.be/wp-content/uploads/2026/08/photo-hero-2048.jpeg");background-position:center center;background-size:cover;}.elementor-6487 .elementor-element.elementor-element-5c0eb44::before, .elementor-6487 .elementor-element.elementor-element-5c0eb44 > .elementor-background-video-container::before, .elementor-6487 .elementor-element.elementor-element-5c0eb44 > .e-con-inner > .elementor-background-video-container::before, .elementor-6487 .elementor-element.elementor-element-5c0eb44 > .elementor-background-slideshow::before, .elementor-6487 .elementor-element.elementor-element-5c0eb44 > .e-con-inner > .elementor-background-slideshow::before, .elementor-6487 .elementor-element.elementor-element-5c0eb44 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:transparent;--background-overlay:'';background-image:linear-gradient(180deg, rgba(15,27,61,0.90) 0%, rgba(15,27,61,0.72) 100%);}.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-6487 .elementor-element.elementor-element-fabeeba .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-6487 .elementor-element.elementor-element-dafd8a5{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:112px;--padding-bottom:112px;--padding-left:64px;--padding-right:64px;}.elementor-6487 .elementor-element.elementor-element-dafd8a5:not(.elementor-motion-effects-element-type-background), .elementor-6487 .elementor-element.elementor-element-dafd8a5 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F7F8FC;}.elementor-6487 .elementor-element.elementor-element-d1393cd{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--gap:16px 16px;--row-gap:16px;--column-gap:16px;--padding-top:0px;--padding-bottom:48px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-14c2cb6{text-align:center;}.elementor-6487 .elementor-element.elementor-element-a7b8526{text-align:center;}.elementor-6487 .elementor-element.elementor-element-a7b8526 .elementor-heading-title{font-family:"Rubik", Sans-serif;font-size:34px;font-weight:600;line-height:1.35em;letter-spacing:-0.01em;color:#1A1D2B;}.elementor-6487 .elementor-element.elementor-element-260541d{text-align:center;font-family:"Roboto", Sans-serif;font-size:16px;line-height:1.6em;color:#5F6980;}.elementor-6487 .elementor-element.elementor-element-ac60747{--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 56px;--row-gap:40px;--column-gap:56px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-80690c6{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--gap:22px 22px;--row-gap:22px;--column-gap:22px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-9a73d24{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-6487 .elementor-element.elementor-element-e3e3fdf{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-77c948f{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-0cd885f{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-d0b6485{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-23675cb{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:112px;--padding-bottom:112px;--padding-left:64px;--padding-right:64px;}.elementor-6487 .elementor-element.elementor-element-23675cb:not(.elementor-motion-effects-element-type-background), .elementor-6487 .elementor-element.elementor-element-23675cb > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-6487 .elementor-element.elementor-element-2ebfd8d{--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:flex-end;--gap:16px 24px;--row-gap:16px;--column-gap:24px;--flex-wrap:wrap;--padding-top:0px;--padding-bottom:32px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-6296825{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:12px 12px;--row-gap:12px;--column-gap:12px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-nested-tabs.elementor-widget-n-tabs > .e-n-tabs[data-touch-mode='false'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:var( --e-global-color-accent );}.elementor-widget-nested-tabs.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"], .elementor-widget-nested-tabs.elementor-widget-n-tabs > .e-n-tabs[data-touch-mode='true'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:var( --e-global-color-accent );}.elementor-widget-nested-tabs.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > :is( .e-n-tab-title > .e-n-tab-title-text, .e-n-tab-title ){font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-6487 .elementor-element.elementor-element-c80281c{--display:grid;--e-con-grid-template-columns:repeat(4, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--gap:1px 1px;--row-gap:1px;--column-gap:1px;--grid-auto-flow:row;--align-items:stretch;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-3d3f4b6{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-3d3f4b6:not(.elementor-motion-effects-element-type-background), .elementor-6487 .elementor-element.elementor-element-3d3f4b6 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-6487 .elementor-element.elementor-element-035e3b8{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-035e3b8:not(.elementor-motion-effects-element-type-background), .elementor-6487 .elementor-element.elementor-element-035e3b8 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://digitalcity.comaseinfo-support.be/wp-content/uploads/2026/08/iStock-1311666126_1-1024x683.jpg");background-position:center center;background-size:cover;}.elementor-6487 .elementor-element.elementor-element-941dd6b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:8px 8px;--row-gap:8px;--column-gap:8px;--padding-top:24px;--padding-bottom:24px;--padding-left:32px;--padding-right:32px;}.elementor-6487 .elementor-element.elementor-element-a1b4ef1 .elementor-icon-wrapper{text-align:end;}.elementor-6487 .elementor-element.elementor-element-a1b4ef1.elementor-view-stacked .elementor-icon{background-color:#5F6980;}.elementor-6487 .elementor-element.elementor-element-a1b4ef1.elementor-view-framed .elementor-icon, .elementor-6487 .elementor-element.elementor-element-a1b4ef1.elementor-view-default .elementor-icon{color:#5F6980;border-color:#5F6980;}.elementor-6487 .elementor-element.elementor-element-a1b4ef1.elementor-view-framed .elementor-icon, .elementor-6487 .elementor-element.elementor-element-a1b4ef1.elementor-view-default .elementor-icon svg{fill:#5F6980;}.elementor-6487 .elementor-element.elementor-element-a1b4ef1 .elementor-icon{font-size:14px;}.elementor-6487 .elementor-element.elementor-element-a1b4ef1 .elementor-icon svg{height:14px;}.elementor-6487 .elementor-element.elementor-element-fc25b2d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-fc25b2d:not(.elementor-motion-effects-element-type-background), .elementor-6487 .elementor-element.elementor-element-fc25b2d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-6487 .elementor-element.elementor-element-c1516d8{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-c1516d8:not(.elementor-motion-effects-element-type-background), .elementor-6487 .elementor-element.elementor-element-c1516d8 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://digitalcity.comaseinfo-support.be/wp-content/uploads/2026/08/iStock-1212754341-1024x683.jpg");background-position:center center;background-size:cover;}.elementor-6487 .elementor-element.elementor-element-9dcc3d6{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:8px 8px;--row-gap:8px;--column-gap:8px;--padding-top:24px;--padding-bottom:24px;--padding-left:32px;--padding-right:32px;}.elementor-6487 .elementor-element.elementor-element-b3a2336 .elementor-icon-wrapper{text-align:end;}.elementor-6487 .elementor-element.elementor-element-b3a2336.elementor-view-stacked .elementor-icon{background-color:#5F6980;}.elementor-6487 .elementor-element.elementor-element-b3a2336.elementor-view-framed .elementor-icon, .elementor-6487 .elementor-element.elementor-element-b3a2336.elementor-view-default .elementor-icon{color:#5F6980;border-color:#5F6980;}.elementor-6487 .elementor-element.elementor-element-b3a2336.elementor-view-framed .elementor-icon, .elementor-6487 .elementor-element.elementor-element-b3a2336.elementor-view-default .elementor-icon svg{fill:#5F6980;}.elementor-6487 .elementor-element.elementor-element-b3a2336 .elementor-icon{font-size:14px;}.elementor-6487 .elementor-element.elementor-element-b3a2336 .elementor-icon svg{height:14px;}.elementor-6487 .elementor-element.elementor-element-bca5d57{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-bca5d57:not(.elementor-motion-effects-element-type-background), .elementor-6487 .elementor-element.elementor-element-bca5d57 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-6487 .elementor-element.elementor-element-54f33fa{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-54f33fa:not(.elementor-motion-effects-element-type-background), .elementor-6487 .elementor-element.elementor-element-54f33fa > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://digitalcity.comaseinfo-support.be/wp-content/uploads/2026/08/iStock-1127397327-1024x683.jpg");background-position:center center;background-size:cover;}.elementor-6487 .elementor-element.elementor-element-4b81369{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:8px 8px;--row-gap:8px;--column-gap:8px;--padding-top:24px;--padding-bottom:24px;--padding-left:32px;--padding-right:32px;}.elementor-6487 .elementor-element.elementor-element-dbfd855 .elementor-icon-wrapper{text-align:end;}.elementor-6487 .elementor-element.elementor-element-dbfd855.elementor-view-stacked .elementor-icon{background-color:#5F6980;}.elementor-6487 .elementor-element.elementor-element-dbfd855.elementor-view-framed .elementor-icon, .elementor-6487 .elementor-element.elementor-element-dbfd855.elementor-view-default .elementor-icon{color:#5F6980;border-color:#5F6980;}.elementor-6487 .elementor-element.elementor-element-dbfd855.elementor-view-framed .elementor-icon, .elementor-6487 .elementor-element.elementor-element-dbfd855.elementor-view-default .elementor-icon svg{fill:#5F6980;}.elementor-6487 .elementor-element.elementor-element-dbfd855 .elementor-icon{font-size:14px;}.elementor-6487 .elementor-element.elementor-element-dbfd855 .elementor-icon svg{height:14px;}.elementor-6487 .elementor-element.elementor-element-c150ada{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-c150ada:not(.elementor-motion-effects-element-type-background), .elementor-6487 .elementor-element.elementor-element-c150ada > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-6487 .elementor-element.elementor-element-8891226{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-8891226:not(.elementor-motion-effects-element-type-background), .elementor-6487 .elementor-element.elementor-element-8891226 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://digitalcity.comaseinfo-support.be/wp-content/uploads/2026/08/iStock-1127397327-1024x683.jpg");background-position:center center;background-size:cover;}.elementor-6487 .elementor-element.elementor-element-9223a82{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:8px 8px;--row-gap:8px;--column-gap:8px;--padding-top:24px;--padding-bottom:24px;--padding-left:32px;--padding-right:32px;}.elementor-6487 .elementor-element.elementor-element-0c22fee .elementor-icon-wrapper{text-align:end;}.elementor-6487 .elementor-element.elementor-element-0c22fee.elementor-view-stacked .elementor-icon{background-color:#5F6980;}.elementor-6487 .elementor-element.elementor-element-0c22fee.elementor-view-framed .elementor-icon, .elementor-6487 .elementor-element.elementor-element-0c22fee.elementor-view-default .elementor-icon{color:#5F6980;border-color:#5F6980;}.elementor-6487 .elementor-element.elementor-element-0c22fee.elementor-view-framed .elementor-icon, .elementor-6487 .elementor-element.elementor-element-0c22fee.elementor-view-default .elementor-icon svg{fill:#5F6980;}.elementor-6487 .elementor-element.elementor-element-0c22fee .elementor-icon{font-size:14px;}.elementor-6487 .elementor-element.elementor-element-0c22fee .elementor-icon svg{height:14px;}.elementor-6487 .elementor-element.elementor-element-22de777{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-22de777:not(.elementor-motion-effects-element-type-background), .elementor-6487 .elementor-element.elementor-element-22de777 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-6487 .elementor-element.elementor-element-1ab6561{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-1ab6561:not(.elementor-motion-effects-element-type-background), .elementor-6487 .elementor-element.elementor-element-1ab6561 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://digitalcity.comaseinfo-support.be/wp-content/uploads/2026/08/iStock-1127397327-1024x683.jpg");background-position:center center;background-size:cover;}.elementor-6487 .elementor-element.elementor-element-7265ad4{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:8px 8px;--row-gap:8px;--column-gap:8px;--padding-top:24px;--padding-bottom:24px;--padding-left:32px;--padding-right:32px;}.elementor-6487 .elementor-element.elementor-element-10f9764 .elementor-icon-wrapper{text-align:end;}.elementor-6487 .elementor-element.elementor-element-10f9764.elementor-view-stacked .elementor-icon{background-color:#5F6980;}.elementor-6487 .elementor-element.elementor-element-10f9764.elementor-view-framed .elementor-icon, .elementor-6487 .elementor-element.elementor-element-10f9764.elementor-view-default .elementor-icon{color:#5F6980;border-color:#5F6980;}.elementor-6487 .elementor-element.elementor-element-10f9764.elementor-view-framed .elementor-icon, .elementor-6487 .elementor-element.elementor-element-10f9764.elementor-view-default .elementor-icon svg{fill:#5F6980;}.elementor-6487 .elementor-element.elementor-element-10f9764 .elementor-icon{font-size:14px;}.elementor-6487 .elementor-element.elementor-element-10f9764 .elementor-icon svg{height:14px;}.elementor-6487 .elementor-element.elementor-element-c737182{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-c737182:not(.elementor-motion-effects-element-type-background), .elementor-6487 .elementor-element.elementor-element-c737182 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-6487 .elementor-element.elementor-element-61c8be0{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-61c8be0:not(.elementor-motion-effects-element-type-background), .elementor-6487 .elementor-element.elementor-element-61c8be0 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://digitalcity.comaseinfo-support.be/wp-content/uploads/2026/08/iStock-1127397327-1024x683.jpg");background-position:center center;background-size:cover;}.elementor-6487 .elementor-element.elementor-element-af3b60e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:8px 8px;--row-gap:8px;--column-gap:8px;--padding-top:24px;--padding-bottom:24px;--padding-left:32px;--padding-right:32px;}.elementor-6487 .elementor-element.elementor-element-87a2ea8 .elementor-icon-wrapper{text-align:end;}.elementor-6487 .elementor-element.elementor-element-87a2ea8.elementor-view-stacked .elementor-icon{background-color:#5F6980;}.elementor-6487 .elementor-element.elementor-element-87a2ea8.elementor-view-framed .elementor-icon, .elementor-6487 .elementor-element.elementor-element-87a2ea8.elementor-view-default .elementor-icon{color:#5F6980;border-color:#5F6980;}.elementor-6487 .elementor-element.elementor-element-87a2ea8.elementor-view-framed .elementor-icon, .elementor-6487 .elementor-element.elementor-element-87a2ea8.elementor-view-default .elementor-icon svg{fill:#5F6980;}.elementor-6487 .elementor-element.elementor-element-87a2ea8 .elementor-icon{font-size:14px;}.elementor-6487 .elementor-element.elementor-element-87a2ea8 .elementor-icon svg{height:14px;}.elementor-6487 .elementor-element.elementor-element-f7d6bb4{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-f7d6bb4:not(.elementor-motion-effects-element-type-background), .elementor-6487 .elementor-element.elementor-element-f7d6bb4 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;background-image:url("https://digitalcity.comaseinfo-support.be/wp-content/uploads/2026/08/actu-3.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-6487 .elementor-element.elementor-element-7882839{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-7882839:not(.elementor-motion-effects-element-type-background), .elementor-6487 .elementor-element.elementor-element-7882839 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(135deg, #7E3FF2 0%, #00789F 100%);}.elementor-6487 .elementor-element.elementor-element-0d66a47{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:8px 8px;--row-gap:8px;--column-gap:8px;--padding-top:24px;--padding-bottom:24px;--padding-left:32px;--padding-right:32px;}.elementor-6487 .elementor-element.elementor-element-a825442{--display:grid;--e-con-grid-template-columns:repeat(4, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--gap:1px 1px;--row-gap:1px;--column-gap:1px;--grid-auto-flow:row;--align-items:stretch;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-71c0971{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-71c0971:not(.elementor-motion-effects-element-type-background), .elementor-6487 .elementor-element.elementor-element-71c0971 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-6487 .elementor-element.elementor-element-03e32cb{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-03e32cb:not(.elementor-motion-effects-element-type-background), .elementor-6487 .elementor-element.elementor-element-03e32cb > .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-683x1024.jpg");background-position:center center;background-size:cover;}.elementor-6487 .elementor-element.elementor-element-d29ac78{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:8px 8px;--row-gap:8px;--column-gap:8px;--padding-top:24px;--padding-bottom:24px;--padding-left:32px;--padding-right:32px;}.elementor-6487 .elementor-element.elementor-element-54a3f2d .elementor-icon-wrapper{text-align:end;}.elementor-6487 .elementor-element.elementor-element-54a3f2d.elementor-view-stacked .elementor-icon{background-color:#5F6980;}.elementor-6487 .elementor-element.elementor-element-54a3f2d.elementor-view-framed .elementor-icon, .elementor-6487 .elementor-element.elementor-element-54a3f2d.elementor-view-default .elementor-icon{color:#5F6980;border-color:#5F6980;}.elementor-6487 .elementor-element.elementor-element-54a3f2d.elementor-view-framed .elementor-icon, .elementor-6487 .elementor-element.elementor-element-54a3f2d.elementor-view-default .elementor-icon svg{fill:#5F6980;}.elementor-6487 .elementor-element.elementor-element-54a3f2d .elementor-icon{font-size:14px;}.elementor-6487 .elementor-element.elementor-element-54a3f2d .elementor-icon svg{height:14px;}.elementor-6487 .elementor-element.elementor-element-87fcee3{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-87fcee3:not(.elementor-motion-effects-element-type-background), .elementor-6487 .elementor-element.elementor-element-87fcee3 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-6487 .elementor-element.elementor-element-c212c15{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-c212c15:not(.elementor-motion-effects-element-type-background), .elementor-6487 .elementor-element.elementor-element-c212c15 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://digitalcity.comaseinfo-support.be/wp-content/uploads/2026/08/DigitalCityBrussels_HD_13-1024x683.jpg");background-position:center center;background-size:cover;}.elementor-6487 .elementor-element.elementor-element-183407e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:8px 8px;--row-gap:8px;--column-gap:8px;--padding-top:24px;--padding-bottom:24px;--padding-left:32px;--padding-right:32px;}.elementor-6487 .elementor-element.elementor-element-7398985 .elementor-icon-wrapper{text-align:end;}.elementor-6487 .elementor-element.elementor-element-7398985.elementor-view-stacked .elementor-icon{background-color:#5F6980;}.elementor-6487 .elementor-element.elementor-element-7398985.elementor-view-framed .elementor-icon, .elementor-6487 .elementor-element.elementor-element-7398985.elementor-view-default .elementor-icon{color:#5F6980;border-color:#5F6980;}.elementor-6487 .elementor-element.elementor-element-7398985.elementor-view-framed .elementor-icon, .elementor-6487 .elementor-element.elementor-element-7398985.elementor-view-default .elementor-icon svg{fill:#5F6980;}.elementor-6487 .elementor-element.elementor-element-7398985 .elementor-icon{font-size:14px;}.elementor-6487 .elementor-element.elementor-element-7398985 .elementor-icon svg{height:14px;}.elementor-6487 .elementor-element.elementor-element-504a918{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-504a918:not(.elementor-motion-effects-element-type-background), .elementor-6487 .elementor-element.elementor-element-504a918 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-6487 .elementor-element.elementor-element-635e8a8{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-635e8a8:not(.elementor-motion-effects-element-type-background), .elementor-6487 .elementor-element.elementor-element-635e8a8 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://digitalcity.comaseinfo-support.be/wp-content/uploads/2026/08/DigitalCityBrussels_HD_34-1024x683.jpg");background-position:center center;background-size:cover;}.elementor-6487 .elementor-element.elementor-element-a22c188{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:8px 8px;--row-gap:8px;--column-gap:8px;--padding-top:24px;--padding-bottom:24px;--padding-left:32px;--padding-right:32px;}.elementor-6487 .elementor-element.elementor-element-c788ae3 .elementor-icon-wrapper{text-align:end;}.elementor-6487 .elementor-element.elementor-element-c788ae3.elementor-view-stacked .elementor-icon{background-color:#5F6980;}.elementor-6487 .elementor-element.elementor-element-c788ae3.elementor-view-framed .elementor-icon, .elementor-6487 .elementor-element.elementor-element-c788ae3.elementor-view-default .elementor-icon{color:#5F6980;border-color:#5F6980;}.elementor-6487 .elementor-element.elementor-element-c788ae3.elementor-view-framed .elementor-icon, .elementor-6487 .elementor-element.elementor-element-c788ae3.elementor-view-default .elementor-icon svg{fill:#5F6980;}.elementor-6487 .elementor-element.elementor-element-c788ae3 .elementor-icon{font-size:14px;}.elementor-6487 .elementor-element.elementor-element-c788ae3 .elementor-icon svg{height:14px;}.elementor-6487 .elementor-element.elementor-element-2e52926{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-2e52926:not(.elementor-motion-effects-element-type-background), .elementor-6487 .elementor-element.elementor-element-2e52926 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-6487 .elementor-element.elementor-element-15e78a4{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-15e78a4:not(.elementor-motion-effects-element-type-background), .elementor-6487 .elementor-element.elementor-element-15e78a4 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://digitalcity.comaseinfo-support.be/wp-content/uploads/2026/08/DigitalCityBrussels_HD_34-1024x683.jpg");background-position:center center;background-size:cover;}.elementor-6487 .elementor-element.elementor-element-693f2e8{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:8px 8px;--row-gap:8px;--column-gap:8px;--padding-top:24px;--padding-bottom:24px;--padding-left:32px;--padding-right:32px;}.elementor-6487 .elementor-element.elementor-element-d49c995 .elementor-icon-wrapper{text-align:end;}.elementor-6487 .elementor-element.elementor-element-d49c995.elementor-view-stacked .elementor-icon{background-color:#5F6980;}.elementor-6487 .elementor-element.elementor-element-d49c995.elementor-view-framed .elementor-icon, .elementor-6487 .elementor-element.elementor-element-d49c995.elementor-view-default .elementor-icon{color:#5F6980;border-color:#5F6980;}.elementor-6487 .elementor-element.elementor-element-d49c995.elementor-view-framed .elementor-icon, .elementor-6487 .elementor-element.elementor-element-d49c995.elementor-view-default .elementor-icon svg{fill:#5F6980;}.elementor-6487 .elementor-element.elementor-element-d49c995 .elementor-icon{font-size:14px;}.elementor-6487 .elementor-element.elementor-element-d49c995 .elementor-icon svg{height:14px;}.elementor-6487 .elementor-element.elementor-element-c275d52{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-c275d52:not(.elementor-motion-effects-element-type-background), .elementor-6487 .elementor-element.elementor-element-c275d52 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-6487 .elementor-element.elementor-element-7e3310c{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-7e3310c:not(.elementor-motion-effects-element-type-background), .elementor-6487 .elementor-element.elementor-element-7e3310c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://digitalcity.comaseinfo-support.be/wp-content/uploads/2026/08/DigitalCityBrussels_HD_34-1024x683.jpg");background-position:center center;background-size:cover;}.elementor-6487 .elementor-element.elementor-element-2efe9d4{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:8px 8px;--row-gap:8px;--column-gap:8px;--padding-top:24px;--padding-bottom:24px;--padding-left:32px;--padding-right:32px;}.elementor-6487 .elementor-element.elementor-element-1b87b88 .elementor-icon-wrapper{text-align:end;}.elementor-6487 .elementor-element.elementor-element-1b87b88.elementor-view-stacked .elementor-icon{background-color:#5F6980;}.elementor-6487 .elementor-element.elementor-element-1b87b88.elementor-view-framed .elementor-icon, .elementor-6487 .elementor-element.elementor-element-1b87b88.elementor-view-default .elementor-icon{color:#5F6980;border-color:#5F6980;}.elementor-6487 .elementor-element.elementor-element-1b87b88.elementor-view-framed .elementor-icon, .elementor-6487 .elementor-element.elementor-element-1b87b88.elementor-view-default .elementor-icon svg{fill:#5F6980;}.elementor-6487 .elementor-element.elementor-element-1b87b88 .elementor-icon{font-size:14px;}.elementor-6487 .elementor-element.elementor-element-1b87b88 .elementor-icon svg{height:14px;}.elementor-6487 .elementor-element.elementor-element-4dfedc9{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-4dfedc9:not(.elementor-motion-effects-element-type-background), .elementor-6487 .elementor-element.elementor-element-4dfedc9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-6487 .elementor-element.elementor-element-8448c28{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-8448c28:not(.elementor-motion-effects-element-type-background), .elementor-6487 .elementor-element.elementor-element-8448c28 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://digitalcity.comaseinfo-support.be/wp-content/uploads/2026/08/DigitalCityBrussels_HD_34-1024x683.jpg");background-position:center center;background-size:cover;}.elementor-6487 .elementor-element.elementor-element-ba6856d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:8px 8px;--row-gap:8px;--column-gap:8px;--padding-top:24px;--padding-bottom:24px;--padding-left:32px;--padding-right:32px;}.elementor-6487 .elementor-element.elementor-element-280f15e .elementor-icon-wrapper{text-align:end;}.elementor-6487 .elementor-element.elementor-element-280f15e.elementor-view-stacked .elementor-icon{background-color:#5F6980;}.elementor-6487 .elementor-element.elementor-element-280f15e.elementor-view-framed .elementor-icon, .elementor-6487 .elementor-element.elementor-element-280f15e.elementor-view-default .elementor-icon{color:#5F6980;border-color:#5F6980;}.elementor-6487 .elementor-element.elementor-element-280f15e.elementor-view-framed .elementor-icon, .elementor-6487 .elementor-element.elementor-element-280f15e.elementor-view-default .elementor-icon svg{fill:#5F6980;}.elementor-6487 .elementor-element.elementor-element-280f15e .elementor-icon{font-size:14px;}.elementor-6487 .elementor-element.elementor-element-280f15e .elementor-icon svg{height:14px;}.elementor-6487 .elementor-element.elementor-element-7c60ae0{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-7c60ae0:not(.elementor-motion-effects-element-type-background), .elementor-6487 .elementor-element.elementor-element-7c60ae0 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;background-image:url("https://digitalcity.comaseinfo-support.be/wp-content/uploads/2026/08/actu-3.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-6487 .elementor-element.elementor-element-aaaec68{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-aaaec68:not(.elementor-motion-effects-element-type-background), .elementor-6487 .elementor-element.elementor-element-aaaec68 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(135deg, #7E3FF2 0%, #00789F 100%);}.elementor-6487 .elementor-element.elementor-element-7ae294c{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:8px 8px;--row-gap:8px;--column-gap:8px;--padding-top:24px;--padding-bottom:24px;--padding-left:32px;--padding-right:32px;}.elementor-6487 .elementor-element.elementor-element-c72bb84{--display:grid;--e-con-grid-template-columns:repeat(4, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--gap:1px 1px;--row-gap:1px;--column-gap:1px;--grid-auto-flow:row;--align-items:stretch;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-18589b5{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-18589b5:not(.elementor-motion-effects-element-type-background), .elementor-6487 .elementor-element.elementor-element-18589b5 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-6487 .elementor-element.elementor-element-12346b9{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-12346b9:not(.elementor-motion-effects-element-type-background), .elementor-6487 .elementor-element.elementor-element-12346b9 > .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-683x1024.jpg");background-position:center center;background-size:cover;}.elementor-6487 .elementor-element.elementor-element-6bf0994{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:8px 8px;--row-gap:8px;--column-gap:8px;--padding-top:24px;--padding-bottom:24px;--padding-left:32px;--padding-right:32px;}.elementor-6487 .elementor-element.elementor-element-b7d0fef .elementor-icon-wrapper{text-align:end;}.elementor-6487 .elementor-element.elementor-element-b7d0fef.elementor-view-stacked .elementor-icon{background-color:#5F6980;}.elementor-6487 .elementor-element.elementor-element-b7d0fef.elementor-view-framed .elementor-icon, .elementor-6487 .elementor-element.elementor-element-b7d0fef.elementor-view-default .elementor-icon{color:#5F6980;border-color:#5F6980;}.elementor-6487 .elementor-element.elementor-element-b7d0fef.elementor-view-framed .elementor-icon, .elementor-6487 .elementor-element.elementor-element-b7d0fef.elementor-view-default .elementor-icon svg{fill:#5F6980;}.elementor-6487 .elementor-element.elementor-element-b7d0fef .elementor-icon{font-size:14px;}.elementor-6487 .elementor-element.elementor-element-b7d0fef .elementor-icon svg{height:14px;}.elementor-6487 .elementor-element.elementor-element-68682b0{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-68682b0:not(.elementor-motion-effects-element-type-background), .elementor-6487 .elementor-element.elementor-element-68682b0 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-6487 .elementor-element.elementor-element-fb0756d{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-fb0756d:not(.elementor-motion-effects-element-type-background), .elementor-6487 .elementor-element.elementor-element-fb0756d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://digitalcity.comaseinfo-support.be/wp-content/uploads/2026/08/DigitalCityBrussels_HD_13-1024x683.jpg");background-position:center center;background-size:cover;}.elementor-6487 .elementor-element.elementor-element-d4fb399{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:8px 8px;--row-gap:8px;--column-gap:8px;--padding-top:24px;--padding-bottom:24px;--padding-left:32px;--padding-right:32px;}.elementor-6487 .elementor-element.elementor-element-e7b1ca8 .elementor-icon-wrapper{text-align:end;}.elementor-6487 .elementor-element.elementor-element-e7b1ca8.elementor-view-stacked .elementor-icon{background-color:#5F6980;}.elementor-6487 .elementor-element.elementor-element-e7b1ca8.elementor-view-framed .elementor-icon, .elementor-6487 .elementor-element.elementor-element-e7b1ca8.elementor-view-default .elementor-icon{color:#5F6980;border-color:#5F6980;}.elementor-6487 .elementor-element.elementor-element-e7b1ca8.elementor-view-framed .elementor-icon, .elementor-6487 .elementor-element.elementor-element-e7b1ca8.elementor-view-default .elementor-icon svg{fill:#5F6980;}.elementor-6487 .elementor-element.elementor-element-e7b1ca8 .elementor-icon{font-size:14px;}.elementor-6487 .elementor-element.elementor-element-e7b1ca8 .elementor-icon svg{height:14px;}.elementor-6487 .elementor-element.elementor-element-82dd472{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-82dd472:not(.elementor-motion-effects-element-type-background), .elementor-6487 .elementor-element.elementor-element-82dd472 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-6487 .elementor-element.elementor-element-da00417{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-da00417:not(.elementor-motion-effects-element-type-background), .elementor-6487 .elementor-element.elementor-element-da00417 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://digitalcity.comaseinfo-support.be/wp-content/uploads/2026/08/DigitalCityBrussels_HD_34-1024x683.jpg");background-position:center center;background-size:cover;}.elementor-6487 .elementor-element.elementor-element-7cc7411{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:8px 8px;--row-gap:8px;--column-gap:8px;--padding-top:24px;--padding-bottom:24px;--padding-left:32px;--padding-right:32px;}.elementor-6487 .elementor-element.elementor-element-d7b9aed .elementor-icon-wrapper{text-align:end;}.elementor-6487 .elementor-element.elementor-element-d7b9aed.elementor-view-stacked .elementor-icon{background-color:#5F6980;}.elementor-6487 .elementor-element.elementor-element-d7b9aed.elementor-view-framed .elementor-icon, .elementor-6487 .elementor-element.elementor-element-d7b9aed.elementor-view-default .elementor-icon{color:#5F6980;border-color:#5F6980;}.elementor-6487 .elementor-element.elementor-element-d7b9aed.elementor-view-framed .elementor-icon, .elementor-6487 .elementor-element.elementor-element-d7b9aed.elementor-view-default .elementor-icon svg{fill:#5F6980;}.elementor-6487 .elementor-element.elementor-element-d7b9aed .elementor-icon{font-size:14px;}.elementor-6487 .elementor-element.elementor-element-d7b9aed .elementor-icon svg{height:14px;}.elementor-6487 .elementor-element.elementor-element-db91b26{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-db91b26:not(.elementor-motion-effects-element-type-background), .elementor-6487 .elementor-element.elementor-element-db91b26 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;background-image:url("https://digitalcity.comaseinfo-support.be/wp-content/uploads/2026/08/actu-3.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-6487 .elementor-element.elementor-element-177a7fe{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-177a7fe:not(.elementor-motion-effects-element-type-background), .elementor-6487 .elementor-element.elementor-element-177a7fe > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(135deg, #7E3FF2 0%, #00789F 100%);}.elementor-6487 .elementor-element.elementor-element-cd385f0{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:8px 8px;--row-gap:8px;--column-gap:8px;--padding-top:24px;--padding-bottom:24px;--padding-left:32px;--padding-right:32px;}.elementor-6487 .elementor-element.elementor-element-04b9be7{--n-tabs-direction:column;--n-tabs-heading-direction:row;--n-tabs-heading-width:initial;--n-tabs-title-flex-basis:content;--n-tabs-title-flex-shrink:0;--n-tabs-heading-justify-content:flex-start;--n-tabs-title-width:initial;--n-tabs-title-height:initial;--n-tabs-title-align-items:flex-start;--n-tabs-title-flex-grow:0;--n-tabs-heading-wrap:wrap;--n-tabs-heading-overflow-x:initial;--n-tabs-title-white-space:initial;--n-tabs-title-justify-content:flex-start;--n-tabs-title-text-align:start;--n-tabs-title-gap:0px;--n-tabs-gap:40px;}.elementor-6487 .elementor-element.elementor-element-d152c2b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;border-style:solid;--border-style:solid;border-width:1px 0px 0px 0px;--border-top-width:1px;--border-right-width:0px;--border-bottom-width:0px;--border-left-width:0px;border-color:#E2E5ED;--border-color:#E2E5ED;--padding-top:112px;--padding-bottom:112px;--padding-left:64px;--padding-right:64px;}.elementor-6487 .elementor-element.elementor-element-d152c2b:not(.elementor-motion-effects-element-type-background), .elementor-6487 .elementor-element.elementor-element-d152c2b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FAFBFE;}.elementor-6487 .elementor-element.elementor-element-8231795{--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:flex-end;--gap:16px 24px;--row-gap:16px;--column-gap:24px;--flex-wrap:wrap;--padding-top:0px;--padding-bottom:32px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-bb0a0b7{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:12px 12px;--row-gap:12px;--column-gap:12px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-d1d1389 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-6487 .elementor-element.elementor-element-ff883c2{--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:16px 16px;--row-gap:16px;--column-gap:16px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-064fec5 .elementor-button-content-wrapper{flex-direction:row;}.elementor-6487 .elementor-element.elementor-element-b36db00{--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;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-bbbbcfa{--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;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-92e98e5{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overflow:hidden;border-style:solid;--border-style:solid;border-width:1px 1px 1px 1px;--border-top-width:1px;--border-right-width:1px;--border-bottom-width:1px;--border-left-width:1px;border-color:#E2E5ED;--border-color:#E2E5ED;--border-radius:16px 16px 16px 16px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-92e98e5:not(.elementor-motion-effects-element-type-background), .elementor-6487 .elementor-element.elementor-element-92e98e5 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-6487 .elementor-element.elementor-element-2bebe63{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-2bebe63:not(.elementor-motion-effects-element-type-background), .elementor-6487 .elementor-element.elementor-element-2bebe63 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://digitalcity.comaseinfo-support.be/wp-content/uploads/2026/08/pexels-photo-5393503-1024x683.jpeg");background-position:center center;background-size:cover;}.elementor-6487 .elementor-element.elementor-element-cb7845c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:12px 12px;--row-gap:12px;--column-gap:12px;--padding-top:24px;--padding-bottom:24px;--padding-left:32px;--padding-right:32px;}.elementor-6487 .elementor-element.elementor-element-c9acbf4 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-6487 .elementor-element.elementor-element-4b97c9a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overflow:hidden;border-style:solid;--border-style:solid;border-width:1px 1px 1px 1px;--border-top-width:1px;--border-right-width:1px;--border-bottom-width:1px;--border-left-width:1px;border-color:#E2E5ED;--border-color:#E2E5ED;--border-radius:16px 16px 16px 16px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-4b97c9a:not(.elementor-motion-effects-element-type-background), .elementor-6487 .elementor-element.elementor-element-4b97c9a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-6487 .elementor-element.elementor-element-23a9109{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-23a9109:not(.elementor-motion-effects-element-type-background), .elementor-6487 .elementor-element.elementor-element-23a9109 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://digitalcity.comaseinfo-support.be/wp-content/uploads/2026/08/pexels-photo-3866352-1024x683.jpeg");background-position:center center;background-size:cover;}.elementor-6487 .elementor-element.elementor-element-c1f3fcd{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:12px 12px;--row-gap:12px;--column-gap:12px;--padding-top:24px;--padding-bottom:24px;--padding-left:32px;--padding-right:32px;}.elementor-6487 .elementor-element.elementor-element-917f55f .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-6487 .elementor-element.elementor-element-e287f7f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overflow:hidden;border-style:solid;--border-style:solid;border-width:1px 1px 1px 1px;--border-top-width:1px;--border-right-width:1px;--border-bottom-width:1px;--border-left-width:1px;border-color:#E2E5ED;--border-color:#E2E5ED;--border-radius:16px 16px 16px 16px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-e287f7f:not(.elementor-motion-effects-element-type-background), .elementor-6487 .elementor-element.elementor-element-e287f7f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-6487 .elementor-element.elementor-element-da575e4{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-da575e4:not(.elementor-motion-effects-element-type-background), .elementor-6487 .elementor-element.elementor-element-da575e4 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://digitalcity.comaseinfo-support.be/wp-content/uploads/2026/08/pexels-photo-4907441-1024x683.jpeg");background-position:center center;background-size:cover;}.elementor-6487 .elementor-element.elementor-element-8fbd1e6{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:12px 12px;--row-gap:12px;--column-gap:12px;--padding-top:24px;--padding-bottom:24px;--padding-left:32px;--padding-right:32px;}.elementor-6487 .elementor-element.elementor-element-7931ea1 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-6487 .elementor-element.elementor-element-3d3b302{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overflow:hidden;border-style:solid;--border-style:solid;border-width:1px 1px 1px 1px;--border-top-width:1px;--border-right-width:1px;--border-bottom-width:1px;--border-left-width:1px;border-color:#E2E5ED;--border-color:#E2E5ED;--border-radius:16px 16px 16px 16px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-3d3b302:not(.elementor-motion-effects-element-type-background), .elementor-6487 .elementor-element.elementor-element-3d3b302 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-6487 .elementor-element.elementor-element-e38ea41{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-e38ea41:not(.elementor-motion-effects-element-type-background), .elementor-6487 .elementor-element.elementor-element-e38ea41 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://digitalcity.comaseinfo-support.be/wp-content/uploads/2026/08/pexels-photo-6804594-1024x683.jpeg");background-position:center center;background-size:cover;}.elementor-6487 .elementor-element.elementor-element-d08d2b2{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:12px 12px;--row-gap:12px;--column-gap:12px;--padding-top:24px;--padding-bottom:24px;--padding-left:32px;--padding-right:32px;}.elementor-6487 .elementor-element.elementor-element-4979009 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-6487 .elementor-element.elementor-element-a16ee8d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overflow:hidden;border-style:solid;--border-style:solid;border-width:1px 1px 1px 1px;--border-top-width:1px;--border-right-width:1px;--border-bottom-width:1px;--border-left-width:1px;border-color:#E2E5ED;--border-color:#E2E5ED;--border-radius:16px 16px 16px 16px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-a16ee8d:not(.elementor-motion-effects-element-type-background), .elementor-6487 .elementor-element.elementor-element-a16ee8d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-6487 .elementor-element.elementor-element-34fd4fe{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-34fd4fe:not(.elementor-motion-effects-element-type-background), .elementor-6487 .elementor-element.elementor-element-34fd4fe > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://digitalcity.comaseinfo-support.be/wp-content/uploads/2026/08/pexels-photo-9301156-1024x683.jpeg");background-position:center center;background-size:cover;}.elementor-6487 .elementor-element.elementor-element-fb4826e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:12px 12px;--row-gap:12px;--column-gap:12px;--padding-top:24px;--padding-bottom:24px;--padding-left:32px;--padding-right:32px;}.elementor-6487 .elementor-element.elementor-element-84ae1f8 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-6487 .elementor-element.elementor-element-54e159d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overflow:hidden;border-style:solid;--border-style:solid;border-width:1px 1px 1px 1px;--border-top-width:1px;--border-right-width:1px;--border-bottom-width:1px;--border-left-width:1px;border-color:#E2E5ED;--border-color:#E2E5ED;--border-radius:16px 16px 16px 16px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-54e159d:not(.elementor-motion-effects-element-type-background), .elementor-6487 .elementor-element.elementor-element-54e159d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-6487 .elementor-element.elementor-element-931042c{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-931042c:not(.elementor-motion-effects-element-type-background), .elementor-6487 .elementor-element.elementor-element-931042c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://digitalcity.comaseinfo-support.be/wp-content/uploads/2026/08/pexels-photo-5257198-1024x683.jpeg");background-position:center center;background-size:cover;}.elementor-6487 .elementor-element.elementor-element-936907c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:12px 12px;--row-gap:12px;--column-gap:12px;--padding-top:24px;--padding-bottom:24px;--padding-left:32px;--padding-right:32px;}.elementor-6487 .elementor-element.elementor-element-9b2b45b .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-6487 .elementor-element.elementor-element-4b149cf{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overflow:hidden;--border-radius:16px 16px 16px 16px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-167d189{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:space-between;--gap:18px 18px;--row-gap:18px;--column-gap:18px;--padding-top:30px;--padding-bottom:30px;--padding-left:30px;--padding-right:30px;}.elementor-6487 .elementor-element.elementor-element-da1ee38{--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:12px 12px;--row-gap:12px;--column-gap:12px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-04d6ba6 .elementor-icon-wrapper{text-align:center;}.elementor-6487 .elementor-element.elementor-element-04d6ba6.elementor-view-stacked .elementor-icon{background-color:#FFFFFF;}.elementor-6487 .elementor-element.elementor-element-04d6ba6.elementor-view-framed .elementor-icon, .elementor-6487 .elementor-element.elementor-element-04d6ba6.elementor-view-default .elementor-icon{color:#FFFFFF;border-color:#FFFFFF;}.elementor-6487 .elementor-element.elementor-element-04d6ba6.elementor-view-framed .elementor-icon, .elementor-6487 .elementor-element.elementor-element-04d6ba6.elementor-view-default .elementor-icon svg{fill:#FFFFFF;}.elementor-6487 .elementor-element.elementor-element-04d6ba6 .elementor-icon{font-size:15px;}.elementor-6487 .elementor-element.elementor-element-04d6ba6 .elementor-icon svg{height:15px;}.elementor-6487 .elementor-element.elementor-element-bc686b8{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:space-between;--gap:18px 18px;--row-gap:18px;--column-gap:18px;border-style:solid;--border-style:solid;border-width:1px 0px 0px 0px;--border-top-width:1px;--border-right-width:0px;--border-bottom-width:0px;--border-left-width:0px;border-color:rgba(255,255,255,0.18);--border-color:rgba(255,255,255,0.18);--padding-top:30px;--padding-bottom:30px;--padding-left:30px;--padding-right:30px;}.elementor-6487 .elementor-element.elementor-element-8266d24{--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:12px 12px;--row-gap:12px;--column-gap:12px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-b873fe8 .elementor-icon-wrapper{text-align:center;}.elementor-6487 .elementor-element.elementor-element-b873fe8.elementor-view-stacked .elementor-icon{background-color:#FFFFFF;}.elementor-6487 .elementor-element.elementor-element-b873fe8.elementor-view-framed .elementor-icon, .elementor-6487 .elementor-element.elementor-element-b873fe8.elementor-view-default .elementor-icon{color:#FFFFFF;border-color:#FFFFFF;}.elementor-6487 .elementor-element.elementor-element-b873fe8.elementor-view-framed .elementor-icon, .elementor-6487 .elementor-element.elementor-element-b873fe8.elementor-view-default .elementor-icon svg{fill:#FFFFFF;}.elementor-6487 .elementor-element.elementor-element-b873fe8 .elementor-icon{font-size:15px;}.elementor-6487 .elementor-element.elementor-element-b873fe8 .elementor-icon svg{height:15px;}.elementor-6487 .elementor-element.elementor-element-f409f3e .elementor-button-content-wrapper{flex-direction:row;}.elementor-6487 .elementor-element.elementor-element-8877635{--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:center;--align-items:center;--gap:8px 8px;--row-gap:8px;--column-gap:8px;--padding-top:28px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-8af07d5{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;border-style:solid;--border-style:solid;border-width:1px 0px 0px 0px;--border-top-width:1px;--border-right-width:0px;--border-bottom-width:0px;--border-left-width:0px;border-color:#E2E5ED;--border-color:#E2E5ED;--padding-top:112px;--padding-bottom:112px;--padding-left:64px;--padding-right:64px;}.elementor-6487 .elementor-element.elementor-element-8af07d5:not(.elementor-motion-effects-element-type-background), .elementor-6487 .elementor-element.elementor-element-8af07d5 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-6487 .elementor-element.elementor-element-16555a8{--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:flex-end;--gap:16px 24px;--row-gap:16px;--column-gap:24px;--flex-wrap:wrap;--padding-top:0px;--padding-bottom:32px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-acc397b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:12px 12px;--row-gap:12px;--column-gap:12px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-f879b7c .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-6487 .elementor-element.elementor-element-66cc42c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-66cc42c:not(.elementor-motion-effects-element-type-background), .elementor-6487 .elementor-element.elementor-element-66cc42c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-6487 .elementor-element.elementor-element-a6b9090{--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:12px 24px;--row-gap:12px;--column-gap:24px;--padding-top:20px;--padding-bottom:20px;--padding-left:0px;--padding-right:28px;}.elementor-6487 .elementor-element.elementor-element-fa9abd9{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--gap:2px 2px;--row-gap:2px;--column-gap:2px;--padding-top:10px;--padding-bottom:10px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-12a8fea{text-align:center;}.elementor-6487 .elementor-element.elementor-element-8b550d9{text-align:center;}.elementor-6487 .elementor-element.elementor-element-895b922{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-5812e7c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:6px 6px;--row-gap:6px;--column-gap:6px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-cf4f591{--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:6px 8px;--row-gap:6px;--column-gap:8px;--flex-wrap:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-d1b3121 .elementor-icon-wrapper{text-align:center;}.elementor-6487 .elementor-element.elementor-element-d1b3121.elementor-view-stacked .elementor-icon{background-color:#5F6980;}.elementor-6487 .elementor-element.elementor-element-d1b3121.elementor-view-framed .elementor-icon, .elementor-6487 .elementor-element.elementor-element-d1b3121.elementor-view-default .elementor-icon{color:#5F6980;border-color:#5F6980;}.elementor-6487 .elementor-element.elementor-element-d1b3121.elementor-view-framed .elementor-icon, .elementor-6487 .elementor-element.elementor-element-d1b3121.elementor-view-default .elementor-icon svg{fill:#5F6980;}.elementor-6487 .elementor-element.elementor-element-d1b3121 .elementor-icon{font-size:14px;}.elementor-6487 .elementor-element.elementor-element-d1b3121 .elementor-icon svg{height:14px;}.elementor-6487 .elementor-element.elementor-element-94eef9e{--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:12px 24px;--row-gap:12px;--column-gap:24px;--padding-top:20px;--padding-bottom:20px;--padding-left:0px;--padding-right:28px;}.elementor-6487 .elementor-element.elementor-element-5ea1845{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--gap:2px 2px;--row-gap:2px;--column-gap:2px;--padding-top:10px;--padding-bottom:10px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-116d81a{text-align:center;}.elementor-6487 .elementor-element.elementor-element-ee6ce17{text-align:center;}.elementor-6487 .elementor-element.elementor-element-9fea043{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-52eccc2{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:6px 6px;--row-gap:6px;--column-gap:6px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-3b2c604{--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:6px 8px;--row-gap:6px;--column-gap:8px;--flex-wrap:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-c1e51e1 .elementor-icon-wrapper{text-align:center;}.elementor-6487 .elementor-element.elementor-element-c1e51e1.elementor-view-stacked .elementor-icon{background-color:#5F6980;}.elementor-6487 .elementor-element.elementor-element-c1e51e1.elementor-view-framed .elementor-icon, .elementor-6487 .elementor-element.elementor-element-c1e51e1.elementor-view-default .elementor-icon{color:#5F6980;border-color:#5F6980;}.elementor-6487 .elementor-element.elementor-element-c1e51e1.elementor-view-framed .elementor-icon, .elementor-6487 .elementor-element.elementor-element-c1e51e1.elementor-view-default .elementor-icon svg{fill:#5F6980;}.elementor-6487 .elementor-element.elementor-element-c1e51e1 .elementor-icon{font-size:14px;}.elementor-6487 .elementor-element.elementor-element-c1e51e1 .elementor-icon svg{height:14px;}.elementor-6487 .elementor-element.elementor-element-09557e4{--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:12px 24px;--row-gap:12px;--column-gap:24px;--padding-top:20px;--padding-bottom:20px;--padding-left:0px;--padding-right:28px;}.elementor-6487 .elementor-element.elementor-element-e484e62{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--gap:2px 2px;--row-gap:2px;--column-gap:2px;--padding-top:10px;--padding-bottom:10px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-fbf85b6{text-align:center;}.elementor-6487 .elementor-element.elementor-element-d3398ec{text-align:center;}.elementor-6487 .elementor-element.elementor-element-f6eb4a0{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-e22bd19{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:6px 6px;--row-gap:6px;--column-gap:6px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-cce1fa2{--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:6px 8px;--row-gap:6px;--column-gap:8px;--flex-wrap:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-301846f .elementor-icon-wrapper{text-align:center;}.elementor-6487 .elementor-element.elementor-element-301846f.elementor-view-stacked .elementor-icon{background-color:#5F6980;}.elementor-6487 .elementor-element.elementor-element-301846f.elementor-view-framed .elementor-icon, .elementor-6487 .elementor-element.elementor-element-301846f.elementor-view-default .elementor-icon{color:#5F6980;border-color:#5F6980;}.elementor-6487 .elementor-element.elementor-element-301846f.elementor-view-framed .elementor-icon, .elementor-6487 .elementor-element.elementor-element-301846f.elementor-view-default .elementor-icon svg{fill:#5F6980;}.elementor-6487 .elementor-element.elementor-element-301846f .elementor-icon{font-size:14px;}.elementor-6487 .elementor-element.elementor-element-301846f .elementor-icon svg{height:14px;}.elementor-6487 .elementor-element.elementor-element-2fda39a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;border-style:solid;--border-style:solid;border-width:1px 0px 0px 0px;--border-top-width:1px;--border-right-width:0px;--border-bottom-width:0px;--border-left-width:0px;border-color:#E2E5ED;--border-color:#E2E5ED;--padding-top:112px;--padding-bottom:112px;--padding-left:64px;--padding-right:64px;}.elementor-6487 .elementor-element.elementor-element-2fda39a:not(.elementor-motion-effects-element-type-background), .elementor-6487 .elementor-element.elementor-element-2fda39a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FBFAFE;}.elementor-6487 .elementor-element.elementor-element-4ee6ca7{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 48px) 0px;text-align:center;}.elementor-6487 .elementor-element.elementor-element-4ee6ca7 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:#5F6980;}.elementor-6487 .elementor-element.elementor-element-ee6fcf9{--display:grid;--e-con-grid-template-columns:repeat(6, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--gap:14px 14px;--row-gap:14px;--column-gap:14px;--grid-auto-flow:row;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-c522d97 img{border-radius:0px 0px 0px 0px;}.elementor-6487 .elementor-element.elementor-element-b88130e img{border-radius:0px 0px 0px 0px;}.elementor-6487 .elementor-element.elementor-element-521262f img{border-radius:0px 0px 0px 0px;}.elementor-6487 .elementor-element.elementor-element-e46721c img{border-radius:0px 0px 0px 0px;}.elementor-6487 .elementor-element.elementor-element-e7b7e9a img{border-radius:0px 0px 0px 0px;}.elementor-6487 .elementor-element.elementor-element-36ef033 img{border-radius:0px 0px 0px 0px;}.elementor-6487 .elementor-element.elementor-element-8805ba2 img{border-radius:0px 0px 0px 0px;}.elementor-6487 .elementor-element.elementor-element-f74e6d5 img{border-radius:0px 0px 0px 0px;}.elementor-6487 .elementor-element.elementor-element-03805ae img{border-radius:0px 0px 0px 0px;}.elementor-6487 .elementor-element.elementor-element-fb5c865 img{border-radius:0px 0px 0px 0px;}.elementor-6487 .elementor-element.elementor-element-6671f2d img{border-radius:0px 0px 0px 0px;}.elementor-6487 .elementor-element.elementor-element-02dc16d{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:112px;--padding-bottom:112px;--padding-left:64px;--padding-right:64px;}.elementor-6487 .elementor-element.elementor-element-5add613{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 16px) 0px;text-align:center;}.elementor-6487 .elementor-element.elementor-element-5add613 .elementor-heading-title{color:#FFFFFF;}.elementor-6487 .elementor-element.elementor-element-8e59596{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 24px) 0px;text-align:center;}.elementor-6487 .elementor-element.elementor-element-1653555{--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:16px 16px;--row-gap:16px;--column-gap:16px;--flex-wrap:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-ffe38d8{margin:24px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:center;}.elementor-6487 .elementor-element.elementor-element-b2ab9f2{--display:flex;--min-height:0px;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}@media(min-width:768px){.elementor-6487 .elementor-element.elementor-element-dafd8a5{--content-width:1320px;}.elementor-6487 .elementor-element.elementor-element-d1393cd{--content-width:760px;}.elementor-6487 .elementor-element.elementor-element-23675cb{--content-width:1320px;}.elementor-6487 .elementor-element.elementor-element-d152c2b{--content-width:1320px;}.elementor-6487 .elementor-element.elementor-element-8af07d5{--content-width:1320px;}.elementor-6487 .elementor-element.elementor-element-2fda39a{--content-width:1320px;}.elementor-6487 .elementor-element.elementor-element-02dc16d{--content-width:1320px;}}@media(max-width:1024px){.elementor-6487 .elementor-element.elementor-element-a6f9eea{--border-radius:18px 18px 18px 18px;}.elementor-6487 .elementor-element.elementor-element-6e06c1e{--border-radius:18px 18px 18px 18px;}.elementor-6487 .elementor-element.elementor-element-59c48d4{--border-radius:18px 18px 18px 18px;}.elementor-6487 .elementor-element.elementor-element-dafd8a5{--padding-top:96px;--padding-bottom:96px;--padding-left:40px;--padding-right:40px;}.elementor-6487 .elementor-element.elementor-element-a7b8526 .elementor-heading-title{font-size:30px;}.elementor-6487 .elementor-element.elementor-element-23675cb{--padding-top:96px;--padding-bottom:96px;--padding-left:40px;--padding-right:40px;}.elementor-6487 .elementor-element.elementor-element-c80281c{--e-con-grid-template-columns:repeat(2, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-6487 .elementor-element.elementor-element-a825442{--e-con-grid-template-columns:repeat(2, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-6487 .elementor-element.elementor-element-c72bb84{--e-con-grid-template-columns:repeat(2, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-6487 .elementor-element.elementor-element-d152c2b{--padding-top:96px;--padding-bottom:96px;--padding-left:40px;--padding-right:40px;}.elementor-6487 .elementor-element.elementor-element-8af07d5{--padding-top:96px;--padding-bottom:96px;--padding-left:40px;--padding-right:40px;}.elementor-6487 .elementor-element.elementor-element-2fda39a{--padding-top:96px;--padding-bottom:96px;--padding-left:40px;--padding-right:40px;}.elementor-6487 .elementor-element.elementor-element-ee6fcf9{--e-con-grid-template-columns:repeat(3, 1fr);--grid-auto-flow:row;}.elementor-6487 .elementor-element.elementor-element-02dc16d{--padding-top:96px;--padding-bottom:96px;--padding-left:40px;--padding-right:40px;}}@media(max-width:767px){.elementor-6487 .elementor-element.elementor-element-7936fc6{--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6487 .elementor-element.elementor-element-a6f9eea{--min-height:28vh;--border-radius:16px 16px 16px 16px;--padding-top:28px;--padding-bottom:28px;--padding-left:28px;--padding-right:28px;}.elementor-6487 .elementor-element.elementor-element-67d41b2 .elementor-heading-title{font-size:18px;}.elementor-6487 .elementor-element.elementor-element-6e06c1e{--min-height:28vh;--border-radius:16px 16px 16px 16px;--padding-top:28px;--padding-bottom:28px;--padding-left:28px;--padding-right:28px;}.elementor-6487 .elementor-element.elementor-element-603cae6 .elementor-heading-title{font-size:18px;}.elementor-6487 .elementor-element.elementor-element-59c48d4{--min-height:28vh;--border-radius:16px 16px 16px 16px;--padding-top:28px;--padding-bottom:28px;--padding-left:28px;--padding-right:28px;}.elementor-6487 .elementor-element.elementor-element-2ae330a .elementor-heading-title{font-size:18px;}.elementor-6487 .elementor-element.elementor-element-dafd8a5{--padding-top:64px;--padding-bottom:64px;--padding-left:24px;--padding-right:24px;}.elementor-6487 .elementor-element.elementor-element-a7b8526 .elementor-heading-title{font-size:24px;}.elementor-6487 .elementor-element.elementor-element-23675cb{--padding-top:64px;--padding-bottom:64px;--padding-left:24px;--padding-right:24px;}.elementor-6487 .elementor-element.elementor-element-2ebfd8d{--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:flex-start;}.elementor-6487 .elementor-element.elementor-element-c80281c{--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-6487 .elementor-element.elementor-element-a825442{--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-6487 .elementor-element.elementor-element-c72bb84{--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-6487 .elementor-element.elementor-element-d152c2b{--padding-top:64px;--padding-bottom:64px;--padding-left:24px;--padding-right:24px;}.elementor-6487 .elementor-element.elementor-element-8231795{--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:flex-start;}.elementor-6487 .elementor-element.elementor-element-b36db00{--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-6487 .elementor-element.elementor-element-bbbbcfa{--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-6487 .elementor-element.elementor-element-8af07d5{--padding-top:64px;--padding-bottom:64px;--padding-left:24px;--padding-right:24px;}.elementor-6487 .elementor-element.elementor-element-16555a8{--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:flex-start;}.elementor-6487 .elementor-element.elementor-element-a6b9090{--padding-top:16px;--padding-bottom:16px;--padding-left:20px;--padding-right:20px;}.elementor-6487 .elementor-element.elementor-element-94eef9e{--padding-top:16px;--padding-bottom:16px;--padding-left:20px;--padding-right:20px;}.elementor-6487 .elementor-element.elementor-element-09557e4{--padding-top:16px;--padding-bottom:16px;--padding-left:20px;--padding-right:20px;}.elementor-6487 .elementor-element.elementor-element-2fda39a{--padding-top:64px;--padding-bottom:64px;--padding-left:24px;--padding-right:24px;}.elementor-6487 .elementor-element.elementor-element-ee6fcf9{--e-con-grid-template-columns:repeat(2, 1fr);--grid-auto-flow:row;}.elementor-6487 .elementor-element.elementor-element-02dc16d{--padding-top:64px;--padding-bottom:64px;--padding-left:24px;--padding-right:24px;}}/* Start custom CSS for heading, class: .elementor-element-67d41b2 */.elementor-6487 .elementor-element.elementor-element-67d41b2 .elementor-heading-title,.elementor-6487 .elementor-element.elementor-element-67d41b2{text-wrap:balance;}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-ca1fe70 */.elementor-6487 .elementor-element.elementor-element-ca1fe70{padding-right:16px!important;}.elementor-6487 .elementor-element.elementor-element-ca1fe70,.elementor-6487 .elementor-element.elementor-element-ca1fe70 p{text-wrap:balance;}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-603cae6 */.elementor-6487 .elementor-element.elementor-element-603cae6 .elementor-heading-title,.elementor-6487 .elementor-element.elementor-element-603cae6{text-wrap:balance;}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-67db51b */.elementor-6487 .elementor-element.elementor-element-67db51b{padding-right:16px!important;}.elementor-6487 .elementor-element.elementor-element-67db51b,.elementor-6487 .elementor-element.elementor-element-67db51b p{text-wrap:balance;}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-2ae330a */.elementor-6487 .elementor-element.elementor-element-2ae330a .elementor-heading-title,.elementor-6487 .elementor-element.elementor-element-2ae330a{text-wrap:balance;}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-9eaac31 */.elementor-6487 .elementor-element.elementor-element-9eaac31{padding-right:16px!important;}.elementor-6487 .elementor-element.elementor-element-9eaac31,.elementor-6487 .elementor-element.elementor-element-9eaac31 p{text-wrap:balance;}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5c0eb44 *//* ---- voile du heros mobile, V3 ----
   Le titre porte les mots-cles en degrade (dispositif prescrit charte s.04).
   Mesure du 31 aout : 26 % de la surface des lettres sous le seuil AA de 3:1,
   l'extremite violette du degrade etant la plus sombre.
   On n'assombrit PAS le degrade de texte, qui est prescrit : on renforce le
   voile sous lui. Le sol est notre invention, la charte ne l'est pas. */
.elementor-6487 .elementor-element.elementor-element-5c0eb44::before{
  background:linear-gradient(180deg,
    rgba(9,16,38,.94) 0%,
    rgba(9,16,38,.90) 45%,
    rgba(9,16,38,.86) 72%,
    rgba(9,16,38,.90) 100%)!important;}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-dafd8a5 *//* ---- SIGNATURE DIGITALCITY ----
   Un seul geste d'echelle sur la page, sur la seule phrase qui dise qui ils
   sont. « signature Digitalcity » est son expression, dans sa remarque sur le
   heros.

   Ses references editoriales (011, 020) posent un mot tres grand, souvent
   rogne par le cadre. On prend l'echelle, PAS le rognage : un mot coupe doit
   etre redessine a chaque point de rupture, et c'est la que passe le temps.

   Calibrage : 72 px donnait cinq lignes — ca criait. 54 px en donne trois,
   ce qui se lit comme une declaration et non comme un effet.

   Le nom de marque prend le degrade, en VARIANTE AA (#7E3FF2 -> #00789F,
   5,0 a 5,4:1 sur blanc). Le degrade prescrit echouerait ici : son extremite
   cyan tombe a 1,81:1 sur fond clair. */
.elementor-6487 .elementor-element.elementor-element-dafd8a5 .dc-eyebrow,
.elementor-6487 .elementor-element.elementor-element-dafd8a5 .dc-signature{text-align:left!important;
  align-self:flex-start!important;width:100%!important;}
.elementor-6487 .elementor-element.elementor-element-dafd8a5 .dc-eyebrow .elementor-heading-title,
.elementor-6487 .elementor-element.elementor-element-dafd8a5 .dc-signature .elementor-heading-title{text-align:left!important;}
.elementor-6487 .elementor-element.elementor-element-dafd8a5 .dc-signature .elementor-heading-title{
  font-size:54px!important;font-weight:800!important;line-height:1.06!important;
  letter-spacing:-.03em;max-width:24ch;margin:12px 0 0;
  color:var(--dc-encre,#1A1D2B)!important;}
.elementor-6487 .elementor-element.elementor-element-dafd8a5 .dc-signature strong{
  font-weight:800;
  background:linear-gradient(135deg,#7E3FF2 0%,#00789F 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;}
.elementor-6487 .elementor-element.elementor-element-dafd8a5 > .e-con-inner > :first-child{align-items:flex-start!important;}
.elementor-6487 .elementor-element.elementor-element-dafd8a5 > .e-con-inner > :first-child > *{width:100%;}
@media (max-width:1024px){
  .elementor-6487 .elementor-element.elementor-element-dafd8a5 .dc-signature .elementor-heading-title{font-size:40px!important;max-width:26ch;}
}
@media (max-width:767px){
  .elementor-6487 .elementor-element.elementor-element-dafd8a5 .dc-signature .elementor-heading-title{font-size:29px!important;max-width:none;letter-spacing:-.015em;}
}

/* Le bloc d'intro etait une colonne centree de 760 px. Pour que la signature
   se cale a gauche il faut liberer ce conteneur — et l'intro entiere devient
   asymetrique, ce qui est le geste meme de ses references editoriales.
   Le paragraphe reste borne a 62 caracteres : la largeur pleine nuirait a la
   lecture. */
.elementor-6487 .elementor-element.elementor-element-dafd8a5 > .e-con-inner > :first-child > .e-con-inner{
  max-width:none!important;margin-left:0!important;margin-right:0!important;
  align-items:flex-start!important;}
.elementor-6487 .elementor-element.elementor-element-dafd8a5 > .e-con-inner > :first-child > .e-con-inner > *{width:100%;}
.elementor-6487 .elementor-element.elementor-element-dafd8a5 .elementor-widget-text-editor{max-width:62ch;}
.elementor-6487 .elementor-element.elementor-element-dafd8a5 .elementor-widget-text-editor p{text-align:left!important;}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c72bb84 */@media (min-width:1360px){.elementor-6487 .elementor-element.elementor-element-c72bb84{min-height:424px;}}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c72bb84 */@media (min-width:1360px){.elementor-6487 .elementor-element.elementor-element-c72bb84{min-height:424px;}}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c72bb84 */@media (min-width:1360px){.elementor-6487 .elementor-element.elementor-element-c72bb84{min-height:424px;}}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c72bb84 */@media (min-width:1360px){.elementor-6487 .elementor-element.elementor-element-c72bb84{min-height:424px;}}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8af07d5 *//* ---- DATE-OBJET ----
   « la date peut devenir un element graphique fort » (Noemie).
   On ne rajoute rien : on RETIRE la pastille bleu nuit et on laisse le
   nombre tenir la colonne. C'est le point important pour la charte —
   casser l'effet « succession de paves » en enlevant une forme, pas en
   en inventant une autre. Meme grammaire que le bloc Chiffres-cles :
   un nombre qui tient une colonne, des filets qui separent. */
.elementor-6487 .elementor-element.elementor-element-8af07d5 .dc-agenda-date{
  background:none!important;background-image:none!important;
  border:0!important;border-radius:0!important;box-shadow:none!important;
  width:auto!important;min-width:112px!important;height:auto!important;
  padding:0!important;align-items:flex-start!important;
  justify-content:flex-start!important;gap:2px!important;}
.elementor-6487 .elementor-element.elementor-element-8af07d5 .dc-agenda-day .elementor-heading-title{
  font-size:56px!important;font-weight:800!important;line-height:.88!important;
  letter-spacing:-.02em;color:var(--dc-bleu-titres,#0033A1)!important;
  font-variant-numeric:tabular-nums;}
.elementor-6487 .elementor-element.elementor-element-8af07d5 .dc-agenda-month .elementor-heading-title{
  font-size:12px!important;font-weight:700!important;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dc-text-light,#5A6172)!important;}
.elementor-6487 .elementor-element.elementor-element-8af07d5 .dc-agenda-row{align-items:center!important;}
@media (max-width:1024px){
  .elementor-6487 .elementor-element.elementor-element-8af07d5 .dc-agenda-day .elementor-heading-title{font-size:44px!important;}
  .elementor-6487 .elementor-element.elementor-element-8af07d5 .dc-agenda-date{min-width:88px!important;}
}
@media (max-width:767px){
  .elementor-6487 .elementor-element.elementor-element-8af07d5 .dc-agenda-day .elementor-heading-title{font-size:34px!important;}
  .elementor-6487 .elementor-element.elementor-element-8af07d5 .dc-agenda-date{min-width:66px!important;}
  .elementor-6487 .elementor-element.elementor-element-8af07d5 .dc-agenda-month .elementor-heading-title{font-size:10px!important;}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ee6fcf9 *//* Logos partenaires (charte v3, sect. 19) : « sur fond clair, dans un cadre regulier.
   Niveaux de gris au repos pour ne pas concurrencer la marque, couleur reelle au survol. »
   Les tuiles texte d'origine portaient leur cadre via les reglages du widget Titre ;
   les widgets Image ne l'ont pas, on le repose ici.

   Repos : grayscale seul, sans baisse d'opacite ni brightness. Deux essais ecartes :
   - opacity reduite : efface les logos clairs (hub.brussels a une luminance moyenne de 142/255,
     contre 48 pour la VUB) tout en laissant les logos sombres parfaitement lisibles ;
   - brightness reduite : assombrit aussi le fond blanc opaque des sources JPG (Actiris,
     Bruxelles Formation, VDAB, Agoria, Beci, ULB), qui apparaissent alors en rectangles gris.
   La charte demande des niveaux de gris, pas un attenuement : chaque logo garde sa densite.

   max-width en plus du max-height : sans lui, les logos larges (VDAB, Agoria) remplissent
   la tuile alors que les logos carres (Beci, ULB) paraissent minuscules. */
.elementor-6487 .elementor-element.elementor-element-ee6fcf9 .dc-partner-logo{display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--dc-gray-200);border-radius:var(--dc-radius-lg);padding:16px 20px;min-height:78px;transition:border-color .25s var(--dc-ease),box-shadow .25s var(--dc-ease);}
.elementor-6487 .elementor-element.elementor-element-ee6fcf9 .dc-partner-logo img{max-height:48px;max-width:140px;width:auto;object-fit:contain;transition:filter .25s var(--dc-ease);}
.elementor-6487 .elementor-element.elementor-element-ee6fcf9 .dc-partner-logo:hover{border-color:var(--dc-bleu-logo);box-shadow:var(--dc-shadow-sm);}
.elementor-6487 .elementor-element.elementor-element-ee6fcf9 
@media(prefers-reduced-motion:reduce){.elementor-6487 .elementor-element.elementor-element-ee6fcf9 .dc-partner-logo,.elementor-6487 .elementor-element.elementor-element-ee6fcf9 .dc-partner-logo img{transition:none;}}/* End custom CSS */
/* Start custom CSS *//* ACCUEIL - regles specifiques a cette page.
   Le socle dc-* commun vit dans le CSS du template d'en-tete (post 609), charge sur
   tout le site. Attention : le CSS de l'en-tete est charge APRES celui de la page ;
   pour surcharger une regle du socle, il faut une specificite superieure. */

/* ---- HERO 3 PANNEAUX (desktop) ----
   Compose d'apres l'apercu de la charte v3, sect. 11 (.hero-panels / .hpanel) :
   UNE seule photo posee sur la grille et traversant les trois colonnes, filets
   d'un pixel entre les panneaux, voile bleu nuit par panneau, filet de cible en
   haut, etiquette + titre + texte court + fleche ronde. */
.dc-hero-grid > .e-con{flex:1 1 0;min-width:0;}
.dc-hero-panel{position:relative;overflow:hidden;cursor:pointer;border-top:4px solid var(--dc-accent,transparent);}
.dc-hero-panel + .dc-hero-panel{border-left:1px solid rgba(255,255,255,.14);}
.dc-hero-panel.c-entreprises{--dc-accent:var(--dc-cible-entreprises);}
.dc-hero-panel.c-travailleurs{--dc-accent:var(--dc-cible-travailleurs);}
.dc-hero-panel.c-chercheurs{--dc-accent:var(--dc-cible-chercheurs);}
.dc-hero-panel::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(0deg,rgba(15,27,61,.92),rgba(15,27,61,.45) 55%,rgba(15,27,61,.28));transition:background .4s var(--dc-ease);}
.dc-hero-panel::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(70% 55% at 50% 0,rgba(139,92,246,.24),transparent 62%);}
.dc-hero-panel:hover::before{background:linear-gradient(0deg,rgba(15,27,61,.85),rgba(45,27,105,.32) 55%,rgba(45,27,105,.16));}
.dc-hero-panel > *{position:relative;z-index:2;}

/* AGRANDISSEMENT DU PANNEAU AU SURVOL — retabli le 20/08 a la demande de Hamza.
   Je l'avais retire en jugeant qu'avec une seule photo posee sur la grille,
   s'elargir ne revele rien et ne fait que deplacer le texte des deux autres
   colonnes. C'est toujours vrai, mais l'effet plait : on le remet, en 1.10 au
   lieu du 1.15 du V10 pour limiter ce deplacement, et avec la meme courbe. */
.dc-hero-grid > .e-con{transition:flex-grow .5s cubic-bezier(.4,0,.2,1);}
.dc-hero-grid > .e-con:hover{flex-grow:1.10;}

/* Texte fige pendant l'animation (demande du 20/08). Les widgets d'un panneau
   recoivent la largeur NATURELLE de la colonne — (100vw - les deux filets) / 3,
   moins les 40 px de marge interne de chaque cote — et la gardent quand le
   panneau s'elargit ou se retrecit. Les titres ne se recomposent donc plus :
   « Renforcez les compétences » garde ses coupures de ligne du debut a la fin
   de l'animation. Le glissement lateral des colonnes, lui, subsiste : elargir
   une colonne, c'est par definition prendre de la place aux deux autres. */
@media(min-width:768px){
  /* max-width:none est indispensable : Elementor plafonne ses widgets a 100 %
     du conteneur, ce qui ramenait la largeur figee a celle du panneau retreci
     et laissait le titre se recomposer malgre tout. */
  .dc-hero-panel > *{width:calc((100vw - 2px)/3 - 80px);max-width:none!important;flex:0 0 auto!important;}
}

/* Pas d'agrandissement du panneau au survol. Le wireframe le prevoit
   (.hero-panel:hover{flex-grow:1.15}) parce que chaque panneau y a SA photo :
   s'elargir en devoile davantage. Avec une seule photo posee sur la grille, comme
   le demande la charte, l'agrandissement ne revele plus rien et ne fait que
   deplacer le texte des trois colonnes. L'apercu de la charte ne l'anime pas. */
/* Pas de max-width sur le titre : le 15ch de l'apercu vaut pour ses panneaux de
   demonstration, larges d'environ 200 px ; applique a nos colonnes de 400 px il
   bridait le titre a 214 px. Le min-height fige la boite du titre a deux lignes :
   comme le contenu est cale en bas, c'est ce qui aligne les etiquettes entre elles. */
/* Taille du titre de colonne. Le V10 le pose en clamp(1.0625rem,1.6vw,1.375rem)
   a 600 de graisse, soit 17 a 22 px ; nous etions a 16 px / 400, donc plus petit
   ET plus leger que le wireframe. Le plafond de 22 px du V10 explique aussi la
   remarque de Hamza sur les grands ecrans : passe 1375 px de large, le titre
   cesse de grandir. On garde le plancher et la pente du V10 et on releve le
   plafond a 30 px, atteint vers 1900. */
/* Tailles calees sur l'apercu de la charte web (capture du 18/08). Mesures
   faites sur l'image, en rapport de la largeur de colonne pour etre
   independantes du zoom : colonne 574 px, pas de ligne du titre 47 px donc
   corps ~36 px (6,3 %), etiquette ~20 px (3,5 %), texte court ~19 px (3,4 %).
   Rapportes a nos colonnes de 479 px en 1 440 : titre 30, etiquette 16,
   texte 16. Le clamp garde une taille lisible en tablette et continue de
   grandir jusqu'en 1 920. */
.dc-hero-panel h3.elementor-heading-title{font-size:clamp(20px,2.1vw,34px)!important;font-weight:600!important;line-height:1.25;letter-spacing:-.015em;}
.dc-hero-panel .dc-tag .elementor-heading-title.elementor-heading-title{font-size:15px;padding:9px 18px;}

.dc-hero-panel-text p{font-family:var(--dc-body);font-size:16px;line-height:1.5;color:rgba(255,255,255,.85);margin:0;max-width:34ch;}

/* Pastille de cible (charte v3, sect. 14) : couleur pleine par public, reprise du
   filet superieur du panneau via --dc-accent. */
.dc-hero-panel .dc-tag .elementor-heading-title.elementor-heading-title{background:var(--dc-accent);}
.dc-hero-panel.c-entreprises .dc-tag .elementor-heading-title.elementor-heading-title{color:#fff;}
.dc-hero-panel.c-travailleurs .dc-tag .elementor-heading-title.elementor-heading-title,
.dc-hero-panel.c-chercheurs .dc-tag .elementor-heading-title.elementor-heading-title{color:var(--dc-text);}

/* Fleche : cercle translucide (.hpanel-arrow de la charte : 34 px, rayon 50 %,
   fond blanc a 18 %). Pas de decalage du glyphe au survol : dans un cercle de
   34 px, 3 px suffisent a le decentrer visiblement. */
/* Fleche : cercle translucide (.hpanel-arrow de la charte : 34 px, rayon 50 %,
   fond blanc a 18 %), REVELEE AU SURVOL.
   J'avais un temps rendu la fleche permanente, en me fondant sur le fait que
   l'apercu de la charte la dessine sans opacite nulle. C'etait lire une
   maquette statique comme une specification d'interaction : le texte de la
   charte, lui, decrit le hero comme « trois zones, une par profil (etiquette
   coloree, benefice, FLECHE REVELEE AU SURVOL) ». Le wireframe dit la meme
   chose. Retour au survol.
   Sous 1024 px la fleche redevient permanente : le survol n'existe pas au
   toucher, c'est deja la regle du wireframe.
   Pas de decalage du glyphe : dans un cercle de 34 px, 3 px le decentrent.
   Le glyphe lui-meme est redessine au masque CSS pour reprendre le trace exact
   de la charte (fleche filaire 2 px) : la bibliotheque d'icones d'Elementor
   n'offre en gratuit que la variante pleine, visiblement plus lourde, et c'est
   deja le trace retenu pour les lignes du hero mobile. */
.dc-hero-arrow{opacity:0;transform:translateY(8px);transition:opacity .4s var(--dc-ease),transform .4s var(--dc-ease);}
.dc-hero-panel:hover .dc-hero-arrow,.dc-hero-panel:focus-within .dc-hero-arrow{opacity:1;transform:translateY(0);}
@media(max-width:1024px){.dc-hero-arrow{opacity:1;transform:none;}}
.dc-hero-arrow .elementor-icon{width:34px;height:34px;border-radius:50%;border:none;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;transition:var(--dc-transition);}
.dc-hero-arrow .elementor-icon svg{display:none;}
.dc-hero-arrow .elementor-icon::after{content:"";width:16px;height:16px;background-color:#fff;-webkit-mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;}
.dc-hero-panel:hover .dc-hero-arrow .elementor-icon{background:rgba(255,255,255,.28);}
@media(max-width:767px){.dc-hero-grid > .e-con{flex:none;}.dc-hero-panel + .dc-hero-panel{border-left:none;border-top:4px solid var(--dc-accent,transparent);}}

/* ---- HERO MOBILE (charte v3, sect. 11, apercu « Le heros de la page d'accueil en mobile ») ----
   Composition differente du desktop : accroche, les trois cibles en lignes empilees
   avec filet de couleur et FLECHE, puis « un seul appel a l'action visible dans le
   premier ecran ». Pleine hauteur d'ecran. Bascule a 620 px. */
.dc-hero-mobile{display:none;}
@media(max-width:620px){
  .dc-hero-grid{display:none!important;}
  .dc-hero-mobile{display:flex!important;}
}
.dc-hero-mobile > .elementor-widget{width:100%;}
.dc-hm-eyebrow .elementor-heading-title.elementor-heading-title{font-family:var(--dc-body);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dc-cyan);}
/* Titre : la taille vient de l'echelle typographique du socle (h1 mobile = 32 px).
   Le segment en degrade reprend .grad-text de la charte, sur le token --dc-grad-text
   (pourpre -> magenta -> cyan), en background-clip:text. */
.dc-hm-title h1.elementor-heading-title.elementor-heading-title{font-family:var(--dc-display);font-weight:800;line-height:1.16;letter-spacing:-.02em;color:#fff;margin:0;}
.dc-grad-text{background:var(--dc-grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}

/* Lignes de cible : hauteur de contact 64 px, filet de couleur, libelle, sous-titre
   et FLECHE, le meme glyphe que le bouton comme dans l'apercu.
   La fleche est dessinee par un masque CSS et non par un <svg> dans le champ Titre :
   Elementor passe ce champ a wp_kses_post, qui supprime les balises <svg>. */
.dc-hm-cible .elementor-heading-title.elementor-heading-title{display:flex;align-items:center;gap:10px;min-height:64px;padding:12px 14px;border-radius:var(--dc-radius-sm);background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);transition:background-color .2s var(--dc-ease);}
.dc-hm-cible .elementor-heading-title::before{content:"";width:6px;height:34px;border-radius:3px;background:var(--dc-accent);flex:none;}
.dc-hm-cible .elementor-heading-title:hover{background:rgba(255,255,255,.16);}
.dc-hm-cible .elementor-heading-title > a{flex:1 1 auto;min-width:0;display:block;}
.dc-hm-cible .elementor-heading-title::after{content:"";width:16px;height:16px;flex:none;margin-left:auto;background-color:#fff;-webkit-mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;}
.dc-hm-t{display:block;}
.dc-hm-cible b{font-family:var(--dc-display);font-size:14px;font-weight:700;color:#fff;display:block;line-height:1.2;}
.dc-hm-cible em{font-style:normal;font-family:var(--dc-body);font-size:12px;font-weight:400;color:rgba(255,255,255,.8);display:block;margin-top:2px;line-height:1.3;}
.dc-hm-cible.c-entreprises{--dc-accent:var(--dc-cible-entreprises);}
.dc-hm-cible.c-travailleurs{--dc-accent:var(--dc-cible-travailleurs);}
.dc-hm-cible.c-chercheurs{--dc-accent:var(--dc-cible-chercheurs);}
.dc-hm-cta{margin-top:6px;}
.dc-hm-cta .elementor-button{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:56px;background:var(--dc-grad-brand-mobile)!important;border:none!important;border-radius:var(--dc-radius-sm)!important;color:#fff!important;font-family:var(--dc-body);font-weight:600;font-size:15px;padding:0 16px!important;}
.dc-hm-cta .elementor-button svg{width:15px;height:15px;fill:currentColor;}

/* ---- TUILES A PROPOS (mise en page propre a l'accueil) ---- */
@media(max-width:991px){.dc-about-tiles > .e-con:last-child{grid-column:1 / -1;}}
@media(max-width:560px){.dc-about-tiles > .e-con:last-child{grid-column:auto;}
  .dc-about-tiles .dc-tile:not(.dc-tile-hero){min-height:0!important;}}

/* ---- ONGLETS PROFIL ---- */
.dc-profile-tabs .e-n-tabs-heading{border-bottom:1px solid var(--dc-gray-200);gap:0!important;}
.dc-profile-tabs .e-n-tab-title{font-family:var(--dc-body)!important;font-size:15px!important;font-weight:400!important;color:var(--dc-text-light)!important;padding:16px 24px!important;background:transparent!important;border:none!important;border-bottom:2px solid transparent!important;border-radius:0!important;margin-bottom:-1px!important;transition:var(--dc-transition);}
.dc-profile-tabs .e-n-tab-title:hover{color:var(--dc-text)!important;}
.dc-profile-tabs .e-n-tab-title[aria-selected="true"]{color:var(--dc-bleu-titres)!important;font-weight:600!important;border-bottom-color:var(--dc-bleu-logo)!important;}
.dc-profile-tabs .e-n-tabs-content > .e-con{padding:0!important;}

/* ---- CARROUSEL ACTUALITES ---- */
.dc-carousel-viewport{flex:1 1 auto;min-width:0;}
.dc-carousel-viewport > .e-con{flex:1 1 0;min-width:0;}
.dc-carousel-arrow{flex:none;width:44px;}
@media(max-width:767px){.dc-carousel-viewport > .e-con{flex:none;}.dc-carousel-arrow{display:none;}}
.dc-carousel-arrow .elementor-button{width:44px;height:44px;min-width:44px;padding:0!important;display:flex;align-items:center;justify-content:center;background:#fff!important;color:var(--dc-text)!important;border:1px solid var(--dc-gray-200)!important;border-radius:var(--dc-radius-sm)!important;transition:var(--dc-transition);}
.dc-carousel-arrow .elementor-button .elementor-button-content-wrapper{display:flex;align-items:center;justify-content:center;}
.dc-carousel-arrow .elementor-button .elementor-button-icon{margin:0;}
.dc-carousel-arrow .elementor-button svg{width:16px;height:16px;fill:currentColor;}
.dc-carousel-arrow .elementor-button:hover{background:var(--dc-bleu-logo)!important;border-color:var(--dc-bleu-logo)!important;color:#fff!important;}
.dc-dot .elementor-heading-title{display:block;width:8px;height:8px;border-radius:50%;background:var(--dc-gray-200);transition:var(--dc-transition);}
.dc-dot-active .elementor-heading-title{width:22px;border-radius:4px;background:var(--dc-bleu-logo);}
.dc-blog-date .elementor-heading-title{font-family:var(--dc-body);font-weight:600;font-size:13px;color:var(--dc-text-light);}
.dc-blog-card .dc-card-body{flex-direction:column;}

/* ---- BLOC MEDIAS (deux moities video / podcast) ---- */
.dc-media-half{flex:1 1 0;transition:background .3s var(--dc-ease);}
.dc-media-half:hover{background-color:rgba(255,255,255,.06)!important;}
.dc-media-ico .elementor-icon{width:38px;height:38px;border:1px solid rgba(255,255,255,.4);border-radius:var(--dc-radius-sm);display:flex;align-items:center;justify-content:center;}
.dc-media-ico .elementor-icon svg{width:17px;height:17px;fill:#fff;}
/* Le lien etait en bleu logo (#008AB7) : trop sombre sur le fond bleu nuit de
   la carte, il ne ressortait pas. On reprend le cyan de l'etiquette
   « Chercheurs d'emploi » (--dc-cible-chercheurs, #22D3EE), qui est la couleur
   d'accent claire de la charte. */
.dc-media-link .elementor-heading-title.elementor-heading-title{font-family:var(--dc-body);font-size:14px;color:var(--dc-cible-chercheurs);border-bottom:1px solid rgba(34,211,238,.45);padding-bottom:2px;display:inline-block;transition:var(--dc-transition);}
.dc-media-half:hover .dc-media-link .elementor-heading-title.elementor-heading-title{color:#fff;border-bottom-color:#fff;}

/* ---- AGENDA : encadrement propre a l'accueil ---- */
.dc-agenda-list{border:1px solid var(--dc-gray-200);border-radius:var(--dc-radius-lg);overflow:hidden;}

/* ---- PARTENAIRES ---- */
.dc-partners-title .elementor-heading-title{font-family:var(--dc-body);font-weight:600;font-size:14px;color:var(--dc-text-light);text-transform:uppercase;letter-spacing:.06em;}
/* Logos en couleur des le chargement (reunion du 20/08). Le gris-vers-couleur
   au survol est une convention de section « ils nous font confiance », mais elle
   suppose que le visiteur survole : sur une page de presentation client, la
   reconnaissance immediate des marques compte plus que l'effet. */
.dc-partner .elementor-heading-title{display:flex;align-items:center;justify-content:center;height:72px;border:1px solid var(--dc-gray-200);border-radius:var(--dc-radius);background:#fff;font-family:var(--dc-display);font-weight:700;color:var(--dc-gray-500);font-size:13px;transition:.25s var(--dc-ease);text-align:center;padding:0 8px;}
.dc-partner:hover .elementor-heading-title{color:var(--dc-bleu-titres);border-color:var(--dc-bleu-logo);box-shadow:0 4px 18px rgba(26,29,43,.07);}

/* ---- CTA FINAL : rappel des profils ---- */
.dc-cta-profiles p{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:16px;font-size:13px;color:rgba(255,255,255,.5);margin:0;}
.dc-cta-profiles a{color:rgba(255,255,255,.75);border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:2px;transition:var(--dc-transition);}
.dc-cta-profiles a:hover{color:#fff;border-bottom-color:#fff;}
/* Mobile : l'intitule prend toute la largeur, les trois profils passent donc
   ensemble sur la ligne suivante. Sans cela « Chercheur d'emploi » se retrouvait
   seul sur une troisieme ligne, 342 px de large pour 261 px de liens. */
@media(max-width:767px){
  .dc-cta-profiles p{gap:10px 20px;}
  .dc-cta-profiles p span{flex:0 0 100%;text-align:center;}
}

/* ############################################################################
   #  CORRECTIFS V2 — retours Veronique & Noemie, nuit du 26 au 27 aout 2026
   #  Ajoutes ici et non dans le post 609 pour que l'accueil live (568) reste
   #  figee : c'est l'URL que le client a dans sa boite mail.
   ############################################################################ */

/* ============================================================================
   V2 — NOTE 1 : le correctif du menu tablette est PARTI EN PRODUCTION
   ----------------------------------------------------------------------------
   Ce fichier ne contient plus de regle. Le bloc qui corrigeait la bande morte
   768-1024 px a ete porte le 27 aout 2026, sur decision de Yassine, dans le
   custom_css du TEMPLATE D'EN-TETE (post 609), donc sur tout le site.

   Le garder aussi ici en ferait un doublon : la V2 herite du socle comme
   n'importe quelle page. Retire pour cette raison, pas parce qu'il serait
   caduc.

   Verifie sur le LIVE apres portage :
     390 / 767 px  -> burger blanc a droite (mobile inchange)
     768 / 820 / 1024 px -> CORRIGE : burger blanc a droite, panneau blanc
                            ouvrable, quatre entrees lisibles
     1025 / 1440 px -> burger masque, menu desktop intact
   Diff pixel sur le live a 1440 px : 0. A 820 px : 5 835 pixels, tous dans la
   zone (400,18)-(788,62), c'est-a-dire le trajet du burger du centre vers la
   droite. Rien d'autre n'a bouge.

   Sauvegarde de l'etat anterieur du 609 :
   v2-correctifs/sauvegarde-609-avant-menu-tablette.css
   Le bloc lui-meme, tel qu'il a ete pose, est commente sur place dans le 609.
   ============================================================================ */

/* ============================================================================
   V2 — CORRECTIF 2 : contraste WCAG 2.1 AA
   ----------------------------------------------------------------------------
   Veronique : « La page ne passe pas la validation WCAG 21 AA (erreurs de
   contraste). » Verifie le 27/08 par audit automatise (encre = couleur CSS
   calculee, fond = pixel dominant mesure sur la capture) a 1440, 820, 500 et
   390 px, diapositives de carrousel occultees exclues.

   RESULTAT : 3 echecs reels, tous la meme cause — le bleu logo #008AB7 en
   petit texte sur fond clair : 3,95:1 sur blanc et 3,75:1 sur #F8F9FC, pour
   4,5:1 exiges.

   Ce n'est PAS un probleme de palette. Le releve des etiquettes de la page
   montre que la convention etablie est deja #0033A1 (--dc-bleu-titres), pose
   huit fois — « Le reseau », « Travailleurs », « Data & IA », « Design UX/UI »,
   « Cybersecurite », « Developpement », « Sur place », « En ligne » — toutes a
   10,56:1. #008AB7 n'apparait que trois fois, et ce sont exactement les trois
   echecs. Ces trois-la ont donc simplement derive de la convention.

   #0033A1 est en outre le « titres et textes en avant en FR » impose par la
   charte 2021 : le correctif rapproche de la charte au lieu de s'en ecarter.
   Le bleu logo #008AB7 reste inchange partout ailleurs (aplats, icones,
   survols, filets) ou il n'a jamais pose de probleme de lisibilite.

   NOTE DE SPECIFICITE. Le socle de l'en-tete (609) est charge APRES le CSS de
   page : a specificite egale il gagne. On monte donc d'un cran, uniquement
   le temps que ce bloc vive ici. A la fusion, ces valeurs remplacent
   directement --dc-bleu-logo par --dc-bleu-titres dans les regles du 609 et
   les surqualifications disparaissent.
   ============================================================================ */

/* Etiquettes de section (« A PROPOS ») — 3,75:1 -> 10,03:1 */
.dc-eyebrow .elementor-heading-title.elementor-heading-title.elementor-heading-title{
  color:var(--dc-bleu-titres);}

/* Liens « Lire la suite » des cartes actualites (6 occurrences) — 3,95:1 -> 10,56:1 */
.dc-card-bottom.dc-link-text .elementor-button,
.dc-link-text .elementor-button.elementor-button{
  color:var(--dc-bleu-titres)!important;}

/* ============================================================================
   V2 — CORRECTIF 3 : les trois derniers ecarts AA (tablette et mobile)
   ----------------------------------------------------------------------------
   Ecarts faibles (0,1 a 0,6 point sous le seuil) mais reels. Le site est
   adosse a Actiris, Bruxelles Formation, la VDAB et au Fonds social europeen :
   l'accessibilite y est une obligation, pas un confort. On les ferme.
   ============================================================================ */

/* --- 3a. Etiquette « FORMATION ET EMPLOI » du hero mobile ------------------
   Cyan #22D3EE a 11px sur le voile du hero : 4,39:1 pour 4,5 exiges.
   On assombrit le voile plutot que d'eclaircir le cyan, qui porte un code de
   sens (chercheurs d'emploi) et doit rester identique partout.

   CORRIGE HORS CSS, VOLONTAIREMENT. Le voile n'est pas une regle ecrite a la
   main : c'est le fond superpose natif du conteneur #hero-mobile (8a9e632),
   rendu par Elementor en 0,3,0 sur ::before. Le regler dans le widget plutot
   que de le surcharger en CSS le laisse visible et modifiable dans Elementor,
   ce qu'exige le client. Valeurs portees de .80/.62 a .90/.72.
   Piege au passage : le jeton --dc-grad-hero-mobile existe dans le kit mais
   n'est consomme NULLE PART. Le modifier ne produit aucun effet ; il donne
   l'illusion d'un reglage. A supprimer du kit lors du menage.
   Mesure apres correction : etiquette conforme a 390 et 500 px.
   ------------------------------------------------------------------------ */

/* --- 3b. Etiquette « La maison » sur le grand pave photo (820 px) ----------
   Blanc 10,5px/700 sur la photo : 3,88:1 a 820 px. A 1440 la meme etiquette
   passe, parce que le pave est plus haut et que l'etiquette tombe dans une
   zone ou le voile est deja dense. En tablette le pave s'aplatit et
   l'etiquette remonte dans la zone claire du degrade.
   On densifie donc le voile UNIQUEMENT sous 1024 px : le rendu desktop,
   valide par le client, ne bouge pas d'un pixel. */
@media (max-width:1024px){
  .dc-tile-hero::before{
    background:linear-gradient(0deg,
      rgba(11,14,26,.95) 0%,
      rgba(11,14,26,.88) 38%,
      rgba(11,14,26,.62) 72%,
      rgba(11,14,26,.45) 100%)!important;}
}

/* --- 3c. Degrade de marque portant du texte blanc --------------------------
   Constat de fond : --dc-grad-brand (#8B5CF6 -> #008AB7) ne peut PAS porter
   de texte blanc en AA sous 18,66px gras. Mesure sur toute la longueur du
   degrade : 4,23:1 a l'extremite violette, 3,95:1 a l'extremite bleue, pour
   4,5 exiges. Ce n'est donc pas le bouton « Explorez nos formations » qui est
   mal reglé, c'est le degrade qui est hors seuil des qu'il porte du texte.

   On ne touche pas a --dc-grad-brand, qui reste la couleur de marque pour
   tout usage DECORATIF (aplats, filets, fonds sans texte). On introduit une
   variante reservee aux surfaces qui portent du texte blanc :
   #7E3FF2 -> #00688A, soit 5,02:1 au pire point du degrade, en restant a
   l'oeil tres proche du PEPS d'origine.

   A ARBITRER PAR YASSINE : la palette PEPS est un ecart deja assume de la
   charte v3. Ce jeton en derive un second, minime mais reel. L'alternative
   serait de passer les libelles de boutons a 19px gras (seuil 3:1 au lieu de
   4,5), ce qui les rendrait aussi plus visibles — la demande de Veronique —
   mais changerait davantage la maquette validee. */
:root{
  --dc-grad-brand-aa:linear-gradient(135deg,#7E3FF2 0%,#00688A 100%);
}
.dc-hm-cta .elementor-button,
.dc-navbar--solid .dc-nav-cta .elementor-button,
.dc-navbar:has(.e-n-menu-toggle[aria-expanded="true"]) .dc-nav-cta .elementor-button{
  background-image:var(--dc-grad-brand-aa)!important;}

/* --- 3d. L'etiquette « LA MAISON » sur le grand pave photo -----------------
   Revenue sous le seuil (3,63:1 a 390 px) apres le passage des visuels a des
   variantes plus legeres : le recadrage expose une zone de photo plus claire
   derriere l'etiquette.

   CAUSE REELLE, plus profonde que le voile. La pastille est en
   background:rgba(255,255,255,.16) avec du texte BLANC a 10px. Sur une photo
   claire, un voile blanc a 16% ne separe rien : le texte blanc se pose sur du
   blanc legerement grise. C'est structurellement fragile — n'importe quelle
   photo lumineuse casse la lisibilite, et les photos reelles de Luc arrivent.

   On inverse : fond sombre translucide, texte blanc. Le contraste ne depend
   alors plus de la photo. Mesure sur le pire cas (zone de photo a ~rgb(200)) :
   le composite tombe vers rgb(83) et le blanc y ressort a ~7,3:1.
   Les etiquettes des tuiles CLAIRES ne sont pas touchees : elles sont deja
   en texte encre sur fond clair et passent largement.

   NB : le voile renforce en 3b reste utile — il porte le titre
   « Qui sommes-nous » et son sous-titre, pas seulement l'etiquette.

   La classe visee est .dc-tt-hero (« tile tag hero »), pas .dc-tag : c'est une
   etiquette de tuile, pas une etiquette de carte. La regle du socle est en
   0,3,0 et le socle charge APRES le CSS de page, donc a specificite egale il
   gagne : il faut monter d'un cran. A la fusion dans le 609, la valeur
   remplace directement celle d'origine et la surqualification disparait.
   ------------------------------------------------------------------------ */
.dc-tt-hero .elementor-heading-title.elementor-heading-title.elementor-heading-title{
  background:rgba(11,14,26,.62)!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.45)!important;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);}

/* ============================================================================
   V2 — CORRECTIF 4 : bloc Formations compacte + visibilite des CTA secondaires
   ----------------------------------------------------------------------------
   NOEMIE : « Le bloc prend actuellement beaucoup trop de hauteur, notamment en
   raison du traitement des visuels et des pavés. Or nous avions precisement
   demande au stade des wireframes un format plus compact pour limiter le
   scroll. » — son principal point UX.
   VERONIQUE, sur le meme bloc : « les infos des formations (titre, date...)
   sont un peu noyees dans les photos. Est-ce volontaire de mettre certaines
   formations en avant ? »

   MESURE AVANT : 1 855 px a 1440, soit 28% de la hauteur de la page — davantage
   que le hero et « A propos » reunis. Et 2 115 px a 390.

   D'OU VENAIT LA HAUTEUR. Pas du nombre de formations, mais de la structure :
     1. la carte en vedette (714x1147) etait ETIREE pour s'aligner sur les deux
        cartes empilees d'a cote ; le surplus devenait ~300 px de blanc mort ;
     2. chaque carte portait 372 px de photo pour ~90 px d'information ;
     3. .dc-card-bottom{margin-top:auto} clouait la fleche en bas et creusait
        encore l'ecart.
   La hierarchie « une grande + trois petites » n'etait pas intentionnelle :
   c'est ce que Veronique lisait comme une mise en avant.

   ----------------------------------------------------------------------------
   LA GRILLE EST NATIVE, PAS DU CSS.
   L'arborescence a ete refaite le 27/08 : les trois conteneurs bento
   (.dc-bento-row, .dc-bento-right et l'imbrication de la carte en vedette) ont
   ete supprimes, et les quatre cartes sont devenues enfants directs du panneau
   d'onglet. Le panneau est passe en conteneur GRILLE natif d'Elementor
   (container_type: grid), avec 4 colonnes en bureau, 2 en tablette, 1 en
   mobile, ecart 1 px — tout cela regle dans l'editeur, donc visible et
   modifiable par le client, ce qu'il exige.
   Les classes dc-bento-* ont ete retirees des cartes : il n'y a plus de bento.

   Piege rencontre : Elementor emet par defaut DEUX rangees explicites
   (grid-template-rows: 1fr 1fr). Avec quatre cartes sur une seule rangee, la
   grille reservait la hauteur d'une seconde rangee vide — 1 296 px au lieu de
   865. Il faut poser grid_rows_grid a 1, sur les trois points de rupture.

   RESULTAT MESURE (identique a la maquette CSS qui a servi a decider) :
     360:1152  390:1029  500:952  768:804  820:789  900:748
     960:777  1024:779  1280:834  1440:856  1920:835
   soit -46 a -59% selon la largeur, sans debordement nulle part.

   ALTERNATIVE : pistes/A2-bandeau.css — visuel en bandeau 3/1 au lieu de 16/9.
   Repond plus franchement au « noyees dans les photos » de Veronique mais
   ecrase les sujets photographies. Ne change qu'une propriete : la grille et
   la structure sont les memes.
   ============================================================================ */

/* --- Ce qui ne peut PAS etre exprime dans les reglages Elementor ---------- */

/* Le visuel : le socle pose 16/10 sur .dc-card-img. On resserre en 16/9 ;
   c'est la que se gagne l'essentiel de la hauteur en bureau. */
@media (min-width:960px){
  .dc-profile-tabs .e-active .dc-card-img{aspect-ratio:16/9!important;}
  .dc-profile-tabs .e-active .dc-card-title .elementor-heading-title.elementor-heading-title,
  .dc-profile-tabs .e-active .dc-card-title-lg .elementor-heading-title.elementor-heading-title{
    font-size:17px!important;line-height:1.3!important;}
  /* La fleche reste alignee en bas — les cartes ayant desormais la meme
     hauteur et un contenu de meme volume, le creux residuel est d'environ
     20 px au lieu de 300. */
  .dc-profile-tabs .e-active .dc-card-bottom{padding-top:14px;}
}

/* Tablette large (960-1024) : Elementor n'a qu'un reglage « tablette », qui
   couvre 768-1024 et vaut 2 colonnes. Or a partir de 960 px il y a la place
   pour quatre colonnes (cartes ~250 px, titres sur deux lignes, lisibles).
   Mesure : 1 376 -> 779 px. On surcharge donc uniquement cette tranche.
   (A defaut, on pourrait declarer un point de rupture « tablet_extra » dans
   les reglages du site — plus propre, mais cela touche tout le site.) */
@media (min-width:960px) and (max-width:1024px){
  .dc-profile-tabs .dc-hairline-grid.e-active{
    grid-template-columns:repeat(4,1fr)!important;}
  .dc-profile-tabs .e-active .dc-card-title .elementor-heading-title.elementor-heading-title,
  .dc-profile-tabs .e-active .dc-card-title-lg .elementor-heading-title.elementor-heading-title{
    font-size:15.5px!important;}
}

/* --- Carte horizontale : vignette a gauche, information a droite ----------
   Employee sous 960 px. C'est un changement de STRUCTURE de la carte, qu'un
   reglage de conteneur ne peut pas exprimer : il faut du CSS.
   Motif de catalogue mobile habituel ; il rend l'information immediatement
   scannable, ce que Noemie demande explicitement pour les pavés.
   Mesures : 820 px 1 519 -> 789 ; 390 px 2 115 -> 1 029.
   -------------------------------------------------------------------------- */
@media (max-width:959px){
  .dc-profile-tabs .e-active .dc-card{
    display:grid!important;grid-template-columns:var(--dc-vignette,112px) 1fr!important;
    flex-direction:unset!important;align-items:stretch!important;height:auto!important;}
  .dc-profile-tabs .e-active .dc-card-img{
    width:var(--dc-vignette,112px)!important;height:100%!important;
    min-height:var(--dc-vignette,112px)!important;
    aspect-ratio:auto!important;flex:none!important;align-self:stretch!important;}
  .dc-profile-tabs .e-active .dc-card-body{padding:14px 14px 14px 16px!important;}
  .dc-profile-tabs .e-active .dc-card-title .elementor-heading-title.elementor-heading-title,
  .dc-profile-tabs .e-active .dc-card-title-lg .elementor-heading-title.elementor-heading-title{
    font-size:16px!important;line-height:1.3!important;}
  /* La fleche disparait : la carte entiere est cliquable, la fleche n'ajoutait
     aucune information et coutait 36 px par carte. Meme arbitrage que celui
     deja retenu le 21 aout sur les cartes « A propos » en mobile. */
  .dc-profile-tabs .e-active .dc-card-bottom{display:none!important;}
}
@media (min-width:768px) and (max-width:959px){
  .dc-profile-tabs .e-active .dc-card{--dc-vignette:120px;}
  .dc-profile-tabs .e-active .dc-card-body{padding:16px 18px!important;}
}

/* ---------------------------------------------------------------------------
   CTA secondaires — « Le bouton "Voir toutes les formations" pourrait etre
   plus visible (couleur) - idem pour les autres "Toutes les actualites"... »
   Quatre boutons .dc-link-boxed sur la page. Ils etaient en bordure
   --dc-gray-200 (un gris tres clair) et graisse 400 : ils se lisaient comme du
   texte, pas comme une action. Couleur de marque, graisse de bouton, et
   inversion pleine au survol. #0033A1 sur blanc = 10,56:1.
   --------------------------------------------------------------------------- */
.dc-link-boxed .elementor-button.elementor-button{
  border-color:var(--dc-bleu-titres)!important;
  color:var(--dc-bleu-titres)!important;
  font-weight:600!important;}
.dc-link-boxed .elementor-button.elementor-button:hover{
  background:var(--dc-bleu-titres)!important;
  border-color:var(--dc-bleu-titres)!important;
  color:#fff!important;}

/* ============================================================================
   V2 — CORRECTIF 5 : le reste des remarques de Veronique
   ============================================================================ */

/* --- 5a. « Je trouve le logo fort petit » (Veronique) --------------------
   « Logo : il me parait trop petit dans le header -> a augmenter legerement. »
   (Noemie) — les deux le disent, c'est le seul point ou elles se rejoignent
   mot pour mot.
   MESURE : rendu a 100x36 px pour une source native de 517x186, soit 19% de
   sa taille. Dans une barre de 80 px de haut, il flottait.
   On passe a 132 px de large (h ~47), ce qui laisse 16 px d'air au-dessus et
   en dessous. « Legerement », comme demande : +32%, pas un doublement.
   ------------------------------------------------------------------------ */
.dc-navbar .dc-logo img{width:132px!important;max-width:132px!important;height:auto!important;}

/* --- 5b. « La delimitation entre le bandeau fixe et le contenu est parfois
   un peu tenue quand on est sur fond clair. » ------------------------------
   Verifie : en etat --solid la barre porte bien une bordure, mais en
   --dc-gray-200 (#E2E5ED) sur un fond blanc, c'est-a-dire presque rien.
   On passe a gray-300 et on ajoute une ombre portee tres basse : la barre se
   detache sans se transformer en bandeau lourd.
   ------------------------------------------------------------------------ */
.dc-navbar.dc-navbar--solid{
  border-bottom-color:var(--dc-gray-300)!important;
  /* CORRIGE le 27/08 : j'avais invente « 0 1px 12px rgba(26,29,43,.06) ».
     La charte v3 section 07 definit une echelle de trois ombres, deja en
     jetons dans le kit — et ma valeur n'en faisait pas partie, jusqu'a la
     couleur (encre au lieu du bleu nuit). On prend « l'ombre douce ». */
  box-shadow:var(--dc-shadow-sm);}

/* --- 5c. « Idem pour la delimitation des sections. » ----------------------
   Releve des fonds de section dans l'ordre de la page :
     A propos #F8F9FC (pas de filet) -> Formations #FFF (pas de filet)
     Actualites #FFF (filet) -> Agenda #F8F9FC (filet)
     Partenaires #FFF (filet) -> CTA #FFF (PAS de filet)
   Deux coutures sont donc muettes : A propos->Formations, et surtout
   Partenaires->CTA, ou deux sections blanches se touchent sans rien entre
   elles. Les autres sections portent deja un filet gray-200 : on ne cree pas
   une convention, on applique celle qui existe aux deux qui l'avaient perdue.
   ------------------------------------------------------------------------ */
.elementor-2410 > .elementor-element.elementor-element-be94d92,
.elementor-2410 > .elementor-element.elementor-element-e15e0b6{
  border-top:1px solid var(--dc-gray-200)!important;}

/* --- 5d. « je ne vois pas cela pour entreprises » -------------------------
   COULEURS DE CIBLE RESTAUREES + liseré de delimitation. 27 aout 2026.

   CE QUE J'AVAIS CONCLU DE TRAVERS, DEUX FOIS.

   1) J'avais annonce que le filet horizontal etait notre invention, absent du
      wireframe et de la charte. FAUX. La charte v3, section 11, le prescrit :
        .hpanel .hp-bar{position:absolute;top:0;left:0;right:0;
                        height:4px;background:var(--accent);z-index:2;}
      Je ne l'avais pas trouve parce que c'est un ELEMENT separe, pas un
      border-top : je cherchais le mauvais mot. Notre implementation en
      border-top donne le meme resultat visuel.

   2) J'avais mesure le bleu a 1,07:1 et conclu qu'il etait invisible, puis
      recommande de passer les trois filets en blanc. Le blanc a ete applique
      le matin, puis RETIRE : c'etait un ecart injustifie a un document valide,
      fonde sur une mesure inadaptee.
      Le ratio WCAG ne mesure que la LUMINANCE. Il est concu pour du texte.
      Une bande pleine de 4 px se distingue aussi par sa teinte et sa
      saturation : #0033A1, bleu fonce sature, se detache tres bien d'un gris
      de photo de luminance voisine. Verifie au zoom x3 : les trois barres se
      voient. J'avais applique a une bande decorative un outil fait pour du
      texte.

   CE QUI RESTE VRAI. Le bleu est nettement le plus faible des trois : sur dix
   points de mesure repartis sur sa largeur a 820 px, il ne franchit jamais
   3:1, la ou le cyan y est dix fois sur dix et le magenta deux. A taille
   reelle, un filet de 4 px en haut d'ecran dans la plus sombre des trois
   teintes se rate facilement — Veronique n'a rien invente.

   ET LE DEFAUT EST DANS LA CHARTE, PAS DANS NOTRE INTEGRATION. Mesure sur
   l'apercu de la charte elle-meme : c'est le MAGENTA qui y tombe a 1,20:1,
   parce que sa photo differe. Aucun fond uniforme ne sauve les trois : les
   couleurs de cible s'etalent de luminance 0,05 (bleu roi) a 0,53 (cyan),
   soit un rapport de dix. Contre n'importe quelle valeur, une des trois tombe.

   CORRECTIF. On restaure les couleurs prescrites — il suffit de ne plus les
   surcharger — et on ajoute un lisere clair d'1 px sous chaque barre. La bande
   est alors DELIMITEE, donc perceptible independamment de sa teinte : c'est la
   seule mitigation qui vaille pour les trois a la fois.
   Le lisere est pose sur le bord haut du voile (::before, inset:0, donc
   exactement sous la bordure de 4 px) et non en box-shadow inset, que le voile
   recouvrirait.

   A PORTER AU DOSSIER CLIENT : la lisibilite de ces filets depend de la photo
   placee derriere. Le probleme se representera a chaque nouveau visuel — donc
   a reprendre dans la charte quand les photos de Luc arriveront.
   ------------------------------------------------------------------------ */
.dc-hero-panel::before{
  border-top:1px solid rgba(255,255,255,.85);}

/* --- 5e. « La version smartphone donne vraiment bien, juste peut-etre
   reduire la hauteur du bandeau du haut. » ---------------------------------
   80 px sur un ecran de 390, c'est 10% de la hauteur utile confisques en
   permanence. On descend a 64 px sous 768 px. Le panneau du menu se cale sur
   var(--dc-header-h) : il suit tout seul, rien d'autre a reprendre.
   ------------------------------------------------------------------------ */
@media (max-width:767px){
  :root:root{--dc-header-h:64px;}
  .elementor-609 .elementor-element.elementor-element-36ce3aa{
    --min-height:64px!important;min-height:64px!important;}
  .dc-navbar .dc-logo img{width:112px!important;max-width:112px!important;}
}

/* --- 5f. « Je mettrais une fleche pour remonter sur le haut de la page » ---
   Ajoute comme widget Bouton natif (2942ca2), pas comme bloc HTML : le
   client doit pouvoir le modifier dans l'editeur.
   Il n'apparait qu'une fois la page defilee. Aucun JavaScript ajoute pour
   cela : on se raccroche a la classe .dc-navbar--solid que le script
   existant de l'en-tete pose deja au defilement.
   ------------------------------------------------------------------------ */
/* [7/9/2026] Le bloc du bouton « Haut de page » est DESCENDU DANS LE SOCLE :
   il est maintenant sur deux pages (V5 et A propos) et il le sera sur toutes.
   Sur A propos il sortait en violet du kit a 4,23:1 de contraste, faute de
   ces regles. Un composant partage n'a pas a etre recopie page par page. */


/* ============================================================================
   V2 — NOTE 6 : liens de conteneurs — ce qui etait vrai et ce qui ne l'etait pas
   ----------------------------------------------------------------------------
   Ce fichier ne contient AUCUNE regle. Il consigne une verification, parce que
   j'ai d'abord conclu de travers et qu'il vaut mieux que ce soit ecrit.

   CE QUE J'AVAIS CRU. En inventoriant les neuf pages, j'ai releve 18 conteneurs
   portant un lien sans html_tag=a — donc un lien enregistre dans Elementor mais
   jamais rendu en HTML. J'en ai deduit que les six cartes d'actualites de
   l'accueil n'etaient pas cliquables, et j'ai ajoute un « lien etire ».

   CE QUI EST FAUX LA-DEDANS. Les six cartes etaient DEJA cliquables. Le socle
   pose depuis longtemps :
     .dc-blog-card .dc-link-text .elementor-button::after{
       content:"";position:absolute;inset:0;z-index:1;}
   c'est-a-dire exactement le motif du lien etire, applique au bouton
   « Lire la suite ». Verifie sur la page LIVE, qui n'a recu aucun correctif :
   les six cartes repondent au clic sur l'image, le titre et les coins.
   Mon correctif etait redondant — et sa surqualification de z-index risquait de
   sortir le texte de la zone cliquable. Il a ete SUPPRIME.

   Lecon : ne pas conclure d'une donnee Elementor a un comportement de rendu.
   Le lien du conteneur est bien inerte ; la carte, elle, ne l'etait pas.

   CE QUI RESTE VRAI, et qui est le defaut le plus serieux des deux :
   les 14 rangees .dc-agenda-row des trois pages profil. Le socle leur donne
   cursor:pointer et un survol qui les eclaircit — elles PROMETTENT donc d'etre
   cliquables — mais elles ne contiennent aucun lien interne et aucun lien etire
   n'existe pour elles. Elles etaient reellement mortes.
   Corrige le 27/08 : html_tag=a sur les 14 (pages 685, 880, 1090). Sans risque
   d'imbrication, ces rangees ne contenant que des titres et une icone.

   CE QUI RESTE A FAIRE : les 4 cartes .dc-pub-card de la page A propos (1307).
   Elles contiennent un lien interne, donc html_tag=a les emboiterait. Il leur
   faut le motif du lien etire — que le socle n'applique qu'a .dc-blog-card.
   Une ligne suffira, sur le modele existant :
     .dc-pub-card{position:relative;}
     .dc-pub-card .dc-card-body,.dc-pub-card .dc-card-bottom{position:static!important;}
     .dc-pub-card .dc-link-text .elementor-button::after{
       content:"";position:absolute;inset:0;z-index:1;}
   Non applique : la page est en brouillon, je ne peux pas en verifier le rendu,
   et c'est precisement le genre de deduction sans verification qui m'a fait
   ajouter un correctif inutile plus haut.
   Identifiants : 952b73b, 645081b, a57bbf8, 6fd808f.
   ============================================================================ */

/* ============================================================================
   V2 — CORRECTIF 7 : hierarchie des titres (WCAG 1.3.1)
   ----------------------------------------------------------------------------
   Releve par le controle AA systematique du 27/08 : la page presentait deux
   sauts de niveau, h1 -> h3 et h2 -> h4.

   LE SAUT h1 -> h3. Le hero desktop porte un h1 masque visuellement
   (.dc-sr-h1) — les trois panneaux n'ayant pas de titre textuel, c'est lui qui
   donne son titre au document. Les baselines des panneaux suivaient en h3 :
   un niveau etait saute. Passees en h2 (widgets 3da0f4a, 7f2e897, bc5666c).

   PIEGE RENCONTRE. Le changement de balise a casse leur taille : elles sont
   tombees de 30,24px/600 a 21px/700. La regle qui les dimensionnait etait
   liee a la balise :
     .dc-hero-panel h3.elementor-heading-title{font-size:clamp(20px,2.1vw,34px)}
   Une fois en h2, elle ne matchait plus, et c'est la regle de balise du socle
   (.elementor-widget-heading h2.elementor-heading-title, 34px) qui reprenait.

   On rend donc la regle INDEPENDANTE DE LA BALISE, en doublant la classe pour
   atteindre 0,3,0 — au-dessus du 0,2,1 de la regle de balise du socle.
   Valeurs reprises a l'identique de l'originale.

   Lecon a retenir pour le reste du site : le socle contient plusieurs regles
   calees sur h1/h2/h3/h4 (c'est le correctif du bug de font-size du widget
   Titre). Tout changement de niveau de titre doit donc etre verifie au rendu,
   pas seulement dans les reglages.
   ============================================================================ */

.dc-hero-panel .elementor-heading-title.elementor-heading-title{
  font-size:clamp(20px,2.1vw,34px)!important;
  font-weight:600!important;
  line-height:1.25;
  letter-spacing:-.015em;}
/* L'etiquette de cible est aussi un .elementor-heading-title dans ce panneau :
   on lui rend sa taille propre, sinon elle heriterait du clamp ci-dessus. */
.dc-hero-panel .dc-tag .elementor-heading-title.elementor-heading-title{
  font-size:15px!important;font-weight:700!important;
  line-height:1.2!important;letter-spacing:.01em!important;}


/* ############################################################################
   #  PROPOSITION HEROS — 27 aout 2026
   #  Reponse a Noemie : « gagner en personnalite dans le traitement graphique
   #  du fond et dans l'articulation visuel / titre / 3 paves […] signature
   #  Digitalcity ».
   #
   #  Trois gestes, tous tires de leurs propres documents :
   #   1. le degrade « Hero immersif » (charte section 04) devient le SOL,
   #      a la place de la photo a fond perdu ;
   #   2. le TITRE revient en desktop, avec les mots cles en degrade — le
   #      dispositif de la charte section 04, aujourd'hui visible en mobile
   #      seulement ;
   #   3. les trois paves deviennent des OBJETS PHOTO poses sur ce sol, une
   #      photo par public — ce que prevoit le wireframe V10.
   #
   #  Effet recherche : le survol elargit le pave (flex-grow, prevu par le
   #  wireframe). Avec une photo par pave, l'elargissement DEVOILE de l'image ;
   #  il redevient signifiant au lieu d'etre decoratif. C'est la « micro-
   #  interaction tres sobre au hover » qu'elle demande.
   #
   #  ARBITRAGE A LUI SOUMETTRE : le wireframe prevoit une image par pave,
   #  la charte dit « la vraie photo passe sous un voile, divisee en trois
   #  zones ». Les deux documents se contredisent ici ; nous avions suivi la
   #  charte. Cette proposition suit le wireframe.
   #  DEPENDANCE : il faut trois photos, une par public. Celles de la maquette
   #  sont provisoires.
   ############################################################################ */
@media (min-width:768px){
  /* le titre reprend sa place */
  /* NB : le socle (609) pose .dc-sr-h1{position:absolute!important} et il est
     charge APRES le CSS de page — a specificite egale il gagne, meme avec
     !important. On qualifie donc par le conteneur pour passer en 0,2,0. */
  .dc-hero-grid .dc-sr-h1{
    position:static!important;width:auto!important;height:auto!important;
    clip:auto!important;clip-path:none!important;overflow:visible!important;
    margin:0!important;white-space:normal!important;max-width:22ch;}
  .dc-hero-grid .dc-sr-h1 .elementor-heading-title{
    font-family:var(--dc-display)!important;font-weight:800!important;
    font-size:clamp(30px,3.4vw,50px)!important;line-height:1.08!important;
    letter-spacing:-.03em!important;color:#fff!important;}
  /* les mots cles en degrade — charte section 04 */
  .dc-grad-mots{background:var(--dc-grad-text);-webkit-background-clip:text;
    background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}

  .dc-hero-row{flex:1;min-height:0;}
  .dc-hero-panel{
    flex:1 1 0!important;min-width:0!important;min-height:0!important;
    transition:flex-grow .55s cubic-bezier(.4,0,.2,1)!important;overflow:hidden;}
  .dc-hero-panel:hover{flex-grow:1.18!important;}
  .dc-hero-panel + .dc-hero-panel{border-left:none!important;}
  /* la largeur des titres n'a plus besoin d'etre figee : chaque pave a sa
     photo, l'elargissement est voulu et le texte peut se recomposer */
  .dc-hero-panel > *{width:auto!important;max-width:none!important;}

  /* grain leger sur le sol : retire l'aspect « degrade CSS » (ref. 016/018) */
  .dc-hero-grid::after{
    content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.45;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.5'/></svg>");}
  .dc-hero-grid > *{position:relative;z-index:1;}
}
@media (prefers-reduced-motion:reduce){
  .dc-hero-panel{transition:none!important;}
  .dc-hero-panel:hover{flex-grow:1!important;}
}
@media (min-width:768px) and (max-width:1024px){
  .dc-hero-grid{padding:calc(var(--dc-header-h) + 24px) 24px 18px!important;
    min-height:74vh!important;gap:18px!important;}
  .dc-hero-row{flex:1 1 auto!important;min-height:0!important;}
  .dc-hero-grid .dc-sr-h1 .elementor-heading-title{font-size:clamp(24px,3vw,34px)!important;}
  .dc-hero-row{gap:10px!important;}
  .dc-hero-panel{padding:18px!important;}
}

/* ############################################################################
   #  V3 — PROPOSITIONS. Base : V2 corrigee.
   #  Ajouts de registre plus bas dans le fichier.
   ############################################################################ */

/* --- logo recentre dans la barre ---
   Mesure du 31 aout : tous les autres elements de l'en-tete sont centres au
   pixel (40 en desktop, 32 en mobile) ; seul le logo etait 4 px trop haut.
   Le recentrer rend 4 px d'air au-dessus sans toucher a sa taille. */
.dc-navbar .dc-logo{align-self:center!important;font-size:0!important;line-height:0!important;}
.dc-navbar .dc-logo a{display:block!important;line-height:0!important;}
.dc-navbar .dc-logo img{display:block!important;vertical-align:middle;}
/* Cause reelle mesuree : le widget faisait 55 px pour une image de 47. Le lien
   est en inline-block avec line-height 25,6 px, donc la boite de ligne ajoutait
   8 px de jambages SOUS l'image. Le widget etait bien centre ; l'image flottait
   4 px trop haut dedans. Ce n'etait donc pas un centrage optique. */

/* ---- PARTENAIRES : centrer la derniere rangee ----
   11 logos depuis le retrait d'Evoliris, grille a 6/3/2 colonnes : la derniere
   rangee etait toujours incomplete et calee a gauche, d'ou le vide a droite.
   Passage en flex avec retour a la ligne centre.

   ATTENTION : la grille contraignait la hauteur de rangee a 82 px et les logos
   a 48 px. En flex, les elements reprennent leur hauteur naturelle et la
   section gagnait 241 px. Les contraintes sont donc reposees explicitement. */
.dc-partners-grid, .elementor-element-b70a12a{display:flex!important;flex-wrap:wrap!important;
  justify-content:center!important;align-content:flex-start!important;gap:14px!important;}
.dc-partners-grid > *, .elementor-element-b70a12a > *{flex:0 0 164px!important;height:82px!important;}
.dc-partners-grid > * img, .elementor-element-b70a12a > * img{max-height:48px!important;width:auto!important;
  max-width:100%!important;object-fit:contain!important;}
@media (min-width:768px){ .dc-partners-grid > *, .elementor-element-b70a12a > *{flex-basis:220px!important;} }
@media (min-width:1024px){ .dc-partners-grid > *, .elementor-element-b70a12a > *{flex-basis:305px!important;} }
@media (min-width:1280px){ .dc-partners-grid > *, .elementor-element-b70a12a > *{flex-basis:207px!important;} }


/* --- transitions au defilement ---
   Demande explicite de Noemie : « transitions legeres au scroll ». C'est le
   seul des trois comportements qu'elle nomme qui n'existait pas — verifie le
   30 aout : zero animation d'entree sur toute la page.
   Animations natives Elementor posees sur quatre sections seulement : elle
   ecrit « quelques comportements simples » et « sans surcharger l'experience ».

   GARDE-FOU INDISPENSABLE : Elementor ne respecte pas prefers-reduced-motion.
   Sans cette regle, les sections resteraient invisibles (opacity:0) pour un
   visiteur qui refuse les animations. */
/* [10/9] Garde-fou prefers-reduced-motion : passe dans le socle (post 609). */


/* ############################################################################
   #  V4 — HEROS, VARIANTE B (1er septembre 2026)
   #
   #  Reference : image009 du mail de Noemie — degrade organique en fond, grain,
   #  texte centre, cartes arrondies. Trois ecarts assumes par rapport a elle :
   #
   #  1. PAS D'ARC DE CERCLE. Decision de Hamza en reunion : « je ne mettrais
   #     pas les photos en arc de cercle ». En eventail un seul pave reste
   #     lisible, or Noemie ecrit que les trois publics doivent rester
   #     « immediatement identifiables ». On garde donc les cartes alignees,
   #     avec un simple decalage alterne : l'esprit de la reference sans
   #     qu'aucune carte n'en cache une autre.
   #  2. PAS D'ORANGE. La reference va du violet a l'orange ; la charte v3
   #     l'interdit (sect. 14, « reserve a Logisticity »). Le degrade est donc
   #     rejoue en violet / cyan / bleu titres.
   #  3. PAS DE SERIF. La reference est en serif editoriale, la typo Rubik est
   #     validee et n'est pas rouverte.
   #
   #  CONTRASTE : le degrade organique ne doit pas eclaircir la bande du titre.
   #  Un voile sombre est donc pose EN DERNIER dans la pile, sur le tiers haut,
   #  independamment de l'emplacement des taches de couleur. C'est le meme
   #  raisonnement que la V3 : le texte est prescrit, le SOL est a nous, donc
   #  c'est au sol de porter le contraste.
   ############################################################################ */

/* --- LE SOL, refait le 1er septembre au soir, d'apres la MESURE de l'image009
   et non a l'oeil. Structure relevee sur la reference :

     vertical    : L=0,26 sature de 0 a 16%, chute reguliere, NOIR FRANC des 72%
     horizontal  : pole violet 258° a gauche, coeur blanc L=0,97, pole chaud a droite
     saturation  : 0,55 a 0,70 dans la bande haute

   Mon premier essai faisait l'INVERSE : voile sombre en haut pour proteger le
   titre, taches faibles dans les angles. D'ou un fond terne. Ici la couleur
   remonte en haut, saturee, et c'est le BAS qui devient noir — comme la
   reference, ou les cartes se posent justement sur du noir.

   Le violet de la reference est a 258° : c'est exactement la teinte de notre
   #8B5CF6, aucune traduction n'est necessaire. Seul l'orange doit changer —
   charte v3 sect. 14, « pas d'orange, reserve a Logisticity ». Il est remplace
   par le pole froid de la marque, la ou la reference met son pole chaud.

   UN ECART DELIBERE : la reference pose son coeur blanc EN PLEIN DANS la bande
   du titre (x=32%, y=13%), et son titre y perd en lisibilite. Je descends ce
   coeur a 47% de hauteur, entre le titre et les cartes : on garde l'eclat,
   qui est tout l'interet de la reference, sans payer le titre. */
/* --- LE SOL, en trois variables, pour que la banque propose plusieurs
   versions sans dupliquer tout le bloc :
     --dc-hero-coeur : le point lumineux
     --dc-hero-nappe : le balayage de teinte
     --dc-hero-chute : l'assombrissement du bas
   Une variante n'a qu'a redefinir l'une des trois sur sa propre section. --- */
.dc-hero-grid{
  --dc-hero-coeur: radial-gradient(26% 15% at 52% 59%, rgba(140,232,255,.60) 0%, rgba(140,232,255,0) 72%);
  --dc-hero-nappe:
    radial-gradient(38% 40% at 84% 13%, #E45BFA 0%, rgba(228,91,250,.74) 34%, rgba(217,70,239,0) 76%),
    radial-gradient(38% 34% at 56% 14%, #8B5CF6 0%, rgba(139,92,246,.60) 40%, rgba(139,92,246,0) 78%),
    radial-gradient(44% 38% at 30% 12%, #2E55DA 0%, rgba(46,85,218,.66) 44%, rgba(46,85,218,0) 82%),
    radial-gradient(62% 56% at 0% 18%, #008AB7 0%, rgba(0,138,183,.82) 40%, rgba(0,138,183,0) 82%),
    radial-gradient(30% 44% at 106% 40%, rgba(74,20,92,.90) 0%, rgba(74,20,92,0) 74%),
    radial-gradient(96% 74% at 40% 4%, #1B1550 0%, rgba(27,21,80,0) 84%);
  /* la chute, reduite deux fois sur retour client : elle ne demarre qu'a 62%
     et ne descend PLUS jusqu'au noir. Elle s'arrete sur un indigo profond,
     pour que le fond garde sa couleur de bout en bout. */
  --dc-hero-chute: linear-gradient(180deg,
      rgba(10,7,40,0)   0%,
      rgba(10,7,40,0)   62%,
      rgba(10,7,40,.34) 76%,
      rgba(10,7,40,.62) 88%,
      rgba(10,7,40,.76) 100%);
}
.dc-hero-grid::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background: var(--dc-hero-coeur), var(--dc-hero-nappe), var(--dc-hero-chute);
}

@media (min-width:768px){
  /* --- le titre passe au centre (demande de Hamza en reunion) ---
     Les regles de la V3 posent margin:0 et max-width:22ch en 0,2,0 avec
     !important : on rejoue la meme specificite, ce bloc etant charge apres. */
  /* PIEGE : « ch » se calcule sur la font-size de l'ELEMENT qui porte la regle.
     Pose sur le widget (16 px), max-width:26ch valait 234 px et laminait un
     titre rendu a 50 px. La contrainte va donc sur le titre lui-meme, ou 1ch
     vaut vraiment une largeur de caractere du titre — et elle suit alors
     automatiquement le clamp() responsive. */
  .dc-hero-grid .dc-sr-h1{
    max-width:none!important;margin:0 auto 6px!important;text-align:center!important;}
  .dc-hero-grid .dc-sr-h1 .elementor-heading-title{
    max-width:26ch;margin-inline:auto;text-align:center!important;}

  /* --- TITRE EN BLANC PLEIN SUR LE HEROS ---
     Ecart assume avec la charte sect. 04, qui prescrit le degrade sur les mots
     cles. Motif : le sol porte desormais les couleurs de marque en aplat
     sature. Un texte en degrade violet/cyan POSE SUR du violet et du cyan se
     confond avec son fond — c'est le defaut meme de la reference, ou le coeur
     blanc mange le titre. La regle devient donc lisible et tenable :
       le degrade de texte est pour les fonds CLAIRS ;
       sur un fond qui porte deja la couleur, le texte est blanc.
     Le dispositif de charte reste en place partout ailleurs sur la page. */
  .dc-hero-grid .dc-sr-h1 .elementor-heading-title,
  .dc-hero-grid .dc-sr-h1 .dc-grad-mots{
    color:#FFFFFF!important;
    background:none!important;-webkit-background-clip:border-box!important;
    background-clip:border-box!important;-webkit-text-fill-color:#FFFFFF!important;}
}

/* --- les paves deviennent des cartes --- */
@media (min-width:1025px){
  /* NB : surtout PAS d'align-items:flex-start ici. Les cartes cesseraient de
     s'etirer sur la hauteur de la rangee et laisseraient ~180 px de sol mort
     sous elles. Le decalage passe par transform, qui ne touche pas au flux. */
  .dc-hero-panel{
    box-shadow:0 18px 48px -22px rgba(0,0,0,.75);
    transition:flex-grow .55s cubic-bezier(.4,0,.2,1),
               transform .55s cubic-bezier(.4,0,.2,1)!important;}
  /* decalage alterne : l'esprit de l'eventail, sans recouvrement */
  .dc-hero-panel:nth-child(1){transform:translateY(16px) rotate(-1deg);}
  .dc-hero-panel:nth-child(2){transform:translateY(0);}
  .dc-hero-panel:nth-child(3){transform:translateY(16px) rotate(1deg);}
  /* au survol la carte se redresse et vient au premier plan */
  .dc-hero-panel:hover,.dc-hero-panel:focus-within{
    transform:translateY(-4px) rotate(0deg);z-index:3;}
}

/* NB : l'arrondi des cartes est un REGLAGE NATIF du conteneur (Style > Bordure >
   Rayon), 22 / 18 / 16 px selon l'appareil. Il est donc visible et modifiable
   dans l'editeur, comme l'exige le contrat — pas de surcharge CSS ici. */

/* l'inclinaison est une animation de position : elle tombe avec le reste */
@media (prefers-reduced-motion:reduce){
  .dc-hero-panel:nth-child(1),
  .dc-hero-panel:nth-child(2),
  .dc-hero-panel:nth-child(3){transform:none!important;}
  .dc-hero-panel:hover,.dc-hero-panel:focus-within{transform:none!important;}
}


/* ############################################################################
   #  V4 — APPARITIONS AU DEFILEMENT
   #
   #  Demande de la reunion : « peut-etre plus d'animation au scroll, quelque
   #  chose de plus souple qu'actuellement, et il faut aussi une animation
   #  d'opacite en meme temps ».
   #
   #  Elementor joue fadeInUp en 0,75 s sur une courbe seche — c'est le « un peu
   #  raide » releve en reunion. On redefinit donc les keyframes (la derniere
   #  definition chargee l'emporte) et on allonge la duree sur une courbe qui
   #  decelere longuement. L'opacite est dans les keyframes, elle accompagne
   #  donc le deplacement au lieu de le preceder.
   #
   #  Le reglage reste NATIF (Avance > Animation d'entree) sur chaque section :
   #  il est visible et modifiable dans l'editeur, on ne fait qu'en adoucir la
   #  restitution.
   ############################################################################ */
.animated{
  animation-duration:1.1s!important;
  animation-timing-function:cubic-bezier(.16,.84,.44,1)!important;
  animation-fill-mode:both!important;}
@keyframes fadeInUp{
  from{opacity:0;transform:translate3d(0,34px,0);}
  to  {opacity:1;transform:none;}
}
/* le decalage des cartes du heros ne doit pas etre efface par l'animation
   d'entree si on en pose une un jour sur cette section */
@media (prefers-reduced-motion:reduce){
  .animated{animation:none!important;}
}


/* ############################################################################
   #  V4 — ARRONDIS GENERALISES
   #
   #  Demande de la reunion : « pour toutes les images il faut les bords
   #  arrondis, c'est plus design, et donc pour le heros aussi ».
   #
   #  L'echelle reprend celle qui existe deja plutot que d'en inventer une :
   #  16 px sur les cartes — c'est le rayon des cartes d'actualites, deja pose
   #  et deja valide — et 22 px sur les grands visuels, pour rimer avec les
   #  cartes du heros.
   #
   #  SURTOUT PAS de regle globale du type .elementor-widget-image img{}. Le kit
   #  posait deja un rayon de 16 px sur toutes les images et il ROGNAIT LES
   #  LOGOS (partenaires, en-tete, pied) — corrige en aout en remettant le rayon
   #  a 0 sur chaque logo. Une regle globale ici annulerait ce correctif. On
   #  vise donc uniquement les conteneurs de visuels editoriaux.
   ############################################################################ */
.dc-card{border-radius:var(--dc-radius,16px);overflow:hidden;}
/* PAS d'arrondi sur les tuiles : ce n'etait pas le cas a l'origine, et le
   bloc qui les contient (.dc-about-tiles) porte deja un rayon de 16 px avec
   overflow:hidden — ce sont les extremites, et elles suffisent. Arrondir
   chaque tuile detachait les cinq elements les uns des autres alors qu'ils
   forment une seule mosaique separee par des filets. */
.dc-media-half{border-radius:16px;overflow:hidden;}
/* NB : l'image « A la une » n'est PAS traitee ici. Son rayon est pose dans le
   custom_css de sa propre section (1801802), qui gagne en specificite (0,4,1).
   Deux sources concurrentes pour un meme reglage, c'est le bug de demain. */
@media (max-width:767px){
}


/* ############################################################################
   #  V4 — LES PHOTOS DES CARTES DU HEROS
   #
   #  Question posee : faut-il passer les photos en noir et blanc, comme dans
   #  l'image009 ?  Reponse : pas en noir et blanc PERMANENT, mais en
   #  monochrome au repos et en couleur au survol.
   #
   #  Ce n'est pas une invention : c'est exactement le traitement que la charte
   #  v3 prescrit deja, section 19, pour les logos partenaires — « niveaux de
   #  gris au repos pour ne pas concurrencer la marque, couleur reelle au
   #  survol ». On applique la meme regle a une autre famille d'images.
   #
   #  Trois benefices :
   #   - les cartes se detachent du sol noir comme dans la reference ;
   #   - le degrade du fond cesse d'etre concurrence par trois photos couleur ;
   #   - le survol gagne un second sens : il elargit la carte ET rend la couleur.
   #
   #  Le monochrome est TEINTE bleu-gris, pas gris neutre : un gris pur sur un
   #  fond satur? aurait l'air deteint.
   #
   #  METHODE : background-blend-mode, et non filter. `filter` s'applique a tout
   #  l'element, donc il decolorerait aussi le texte et les pastilles, qui sont
   #  des enfants. Le blend ne touche que les couches de fond.
   #
   #  ECRAN TACTILE : un survol ne se declenche pas au doigt — piege deja
   #  rencontre sur ce projet, Noemie n'avait pas vu les micro-interactions
   #  parce qu'elle regardait sur telephone. La regle @media (hover:none) rend
   #  donc la couleur d'emblee sur les appareils sans survol.
   ############################################################################ */
@media (min-width:768px){
  .dc-hero-panel{
    background-color:#6E7C99;
    background-blend-mode:luminosity;
    transition:flex-grow .55s cubic-bezier(.4,0,.2,1),
               transform .55s cubic-bezier(.4,0,.2,1),
               background-color .45s var(--dc-ease)!important;}
  .dc-hero-panel:hover,.dc-hero-panel:focus-within{
    background-color:transparent;
    background-blend-mode:normal;}
}
/* pas de survol possible : la couleur est rendue d'emblee */
@media (hover:none){
  .dc-hero-panel{background-color:transparent!important;background-blend-mode:normal!important;}
}
@media (prefers-reduced-motion:reduce){
  .dc-hero-panel{transition:none!important;}
}


/* ############################################################################
   #  V4 — LES CARTES DU HEROS : texte cale en bas, fleche hors du flux
   #
   #  Trois defauts signales, une seule cause : la fleche etait un enfant en
   #  FLUX, place apres le texte. Elle reservait donc sa hauteur meme invisible
   #  (opacite 0 au repos), ce qui remontait tout le texte et laissait un vide
   #  dessous. Et comme chaque carte a un titre de longueur differente, les
   #  trois blocs ne tombaient pas a la meme hauteur.
   #
   #  Correctif : la fleche passe en position absolue, en bas a droite. Le texte
   #  redevient le dernier element du flux et se cale donc au bas de la carte —
   #  les trois s'alignent sur la meme ligne de pied.
   #
   #  Quatrieme defaut : « ils bougent quand on survole ». L'elargissement de la
   #  carte (flex-grow 1.18) faisait se recomposer le texte. On fige donc la
   #  largeur du bloc de texte : la carte s'elargit et devoile de la photo, le
   #  texte ne bouge plus. C'est bien l'image qu'on veut reveler, pas le texte.
   ############################################################################ */
@media (min-width:768px){
  .dc-hero-panel{position:relative;}

  /* la fleche sort du flux : bas a droite, dans le coin */
  /* LA FLECHE : on revient au comportement d'origine — en ABSOLU, en bas a
     droite, juste a cote du texte, revelee au survol.
     Historique de l'aller-retour, pour ne pas le refaire :
       - en absolu au repos elle ne reserve AUCUNE place : c'est bien le bon
         mode. Le vide sous le texte, signale plus tot, venait du moment ou je
         l'avais mise DANS LE FLUX en la laissant invisible.
       - elle mord legerement sur la fin du texte de la troisieme carte, dont
         le libelle est le plus long. Arbitrage du client : sans importance.
     Le style de la pastille reste celui du socle — blanche translucide. Les
     versions coloree et neutre sont des propositions de la banque, pas la V4. */
  .dc-hero-panel .dc-hero-arrow{
    position:absolute!important;right:20px;bottom:18px;top:auto!important;
    margin:0!important;width:auto!important;z-index:3;}

  /* GOUTTIERE POUR LA FLECHE.
     La flèche mordait de 28 a 30 px sur les trois sous-titres. Ce n'est pas la
     taille du texte qui a change — il fait toujours 16 px — c'est la CARTE :
     elle est passee de ~430 px de large a 324 en format portrait. Le bloc de
     texte occupe donc maintenant toute la largeur utile, et la fleche, calee
     sur le bord droit, tombe forcement dessus.
     On reserve la gouttiere sur le SEUL SOUS-TITRE, pas sur le titre : le
     titre est plus haut que la bande de la fleche, il n'a rien a ceder, et
     c'est lui qui porte le message.
     Elle est pilotee par une VARIABLE, parce qu'elle n'a de sens que dans un
     seul cas : fleche en absolu SUR une carte etroite. Des que la carte est
     large, ou que la fleche passe dans le flux sous le texte, la collision est
     impossible et la gouttiere ne ferait que retrecir le texte pour rien. Les
     variantes concernees remettent --dc-gouttiere-fleche a 0. */
  .dc-hero-panel{--dc-gouttiere-fleche:58px;}
  .dc-hero-panel .dc-hero-panel-text,
  .dc-hero-panel .dc-hero-panel-text p{padding-right:var(--dc-gouttiere-fleche)!important;}

  /* le texte devient le dernier element du flux et se cale au bas de la carte */
  .dc-hero-panel{justify-content:flex-end!important;}
  .dc-hero-panel > *:not(.dc-hero-arrow){flex:0 0 auto;}
  .dc-hero-panel-text{margin-bottom:0!important;}

  /* largeur figee : l'elargissement au survol ne doit pas recomposer le texte.
     Calculee sur le tiers de la rangee au repos, moins les paddings et la
     gouttiere reservee a la fleche. */
  .dc-hero-panel > *:not(.dc-hero-arrow){
    width:calc((100% - 0px));max-width:min(30ch, calc(33.33vw - 132px));}
}
@media (min-width:1440px){
  .dc-hero-panel > *:not(.dc-hero-arrow){max-width:min(30ch, calc(33.33vw - 150px));}
}


/* ############################################################################
   #  V4 — CORRECTIONS DU 1er SEPTEMBRE, SERIE 3
   ############################################################################ */

/* --- 1. LE VIOLET REVIENT A DROITE ---
   Erreur d'analyse corrigee : j'avais lu la reference comme un balayage d'une
   couleur a l'autre. La mesure dit autre chose — c'est un CHAMP VIOLET
   DOMINANT, avec l'orange insere seulement dans le coin haut-droit. Le violet
   revient dessous et sur le bord droit : 32% des points du bord droit sont
   en violet/mauve, et a mi-hauteur le coin droit est franchement mauve.
   On ajoute donc un champ violet en bas a droite, sous le pole magenta. */
.dc-hero-grid{
  --dc-hero-nappe:
    radial-gradient(38% 40% at 84% 11%, #E45BFA 0%, rgba(228,91,250,.72) 32%, rgba(217,70,239,0) 70%),
    radial-gradient(46% 46% at 96% 54%, #8B5CF6 0%, rgba(139,92,246,.62) 40%, rgba(139,92,246,0) 78%),
    radial-gradient(38% 34% at 56% 14%, #8B5CF6 0%, rgba(139,92,246,.60) 40%, rgba(139,92,246,0) 78%),
    radial-gradient(44% 38% at 30% 12%, #2E55DA 0%, rgba(46,85,218,.66) 44%, rgba(46,85,218,0) 82%),
    radial-gradient(62% 56% at 0% 18%, #008AB7 0%, rgba(0,138,183,.82) 40%, rgba(0,138,183,0) 82%),
    radial-gradient(40% 50% at 8% 88%, rgba(139,92,246,.55) 0%, rgba(139,92,246,0) 76%),
    radial-gradient(96% 74% at 40% 4%, #1B1550 0%, rgba(27,21,80,0) 84%);
}

@media (min-width:768px){
  /* --- 2. DE L'AIR ENTRE LE TITRE ET LES CARTES ---
     Mesure : l'ecart valait 6% de la hauteur du heros, contre 24% dans la
     reference. C'est ce qui donnait cette impression de titre ecrase. */
  .dc-hero-grid{gap:0!important;}
  .dc-hero-grid .dc-sr-h1{margin:0 auto clamp(22px,6vh,104px)!important;}
  .dc-hero-grid .dc-sr-h1 .elementor-heading-title{
    font-size:clamp(34px,3.8vw,56px)!important;}

  /* --- 3. LE LISERET NE FAIT PLUS LE TOUR ---
     Il etait pose en border-top, et une bordure EPOUSE le rayon : elle
     descendait donc le long des deux cotes dans les angles. La charte, elle,
     le definit comme un element positionne (sect. 11, .hpanel .hp-bar,
     position:absolute;top:0;height:4px). On repasse a cette forme : une barre
     droite qui s'arrete net. Le voile et la teinte violette, qui occupaient
     ::before et ::after, sont fusionnes en une seule pile sur ::before. */
  .dc-hero-panel{border-top:0!important;}
  .dc-hero-panel::before{
    background:
      radial-gradient(70% 55% at 50% 0,rgba(139,92,246,.24),transparent 62%),
      linear-gradient(0deg,rgba(15,27,61,.92),rgba(15,27,61,.45) 55%,rgba(15,27,61,.28))!important;}
  .dc-hero-panel::after{
    content:"";position:absolute;top:0;left:0;right:0;height:4px;
    background:var(--dc-accent);border-radius:22px 22px 0 0;
    z-index:2;pointer-events:none;}

  /* --- 4. LE SURVOL NE DEPLACE PLUS RIEN ---
     Question posee : « quelles sont les conventions ? ». Elle est nette — un
     survol ne doit pas provoquer de reflux de mise en page (c'est le defaut
     que Google mesure sous le nom de Cumulative Layout Shift). Or flex-grow
     elargit une carte EN RETRECISSANT les deux autres : tout bouge.
     Le wireframe V10 prescrit pourtant cet elargissement (flex-grow 1.15).
     Compromis retenu : on garde l'intention — le survol doit reveler de
     l'image — mais par un ZOOM DE LA PHOTO dans un cadre fixe, convention
     etablie pour les cartes illustrees. Rien ne se deplace, et la photo
     bouge davantage qu'avec les 26 px que gagnait l'ancien elargissement.
     La version conforme au wireframe reste dans la banque. */
  .dc-hero-panel{
    flex:1 1 0!important;
    /* PIEGE : 100% auto donne une image moins haute que la carte, qui se
       REPETE verticalement. Sur des cartes en 16/25 il faut piloter la HAUTEUR.
       « auto 100% » equivaut a cover ici, et se laisse animer vers « auto 118% »,
       ce que « cover » ne permet pas. */
    background-size:auto 100%!important;
    background-repeat:no-repeat!important;
    background-position:center center!important;
    transition:background-size .6s cubic-bezier(.22,.61,.36,1),
               transform .45s cubic-bezier(.22,.61,.36,1),
               background-color .45s var(--dc-ease)!important;}
  /* AUCUN elargissement au survol. Les cartes sont en flex:0 0 auto ; un
     flex-grow au survol les faisait gonfler — c'est le defaut signale. Le
     socle de la V3 pose lui aussi .dc-hero-grid > .e-con:hover{flex-grow:1.10},
     on le neutralise explicitement. Le survol ne fait plus que deux choses :
     zoomer la photo et rendre sa couleur. Zero deplacement. */
  .dc-hero-panel:hover,.dc-hero-panel:focus-within{
    background-size:auto 118%!important;
    transform:translateY(-8px) rotate(0deg)!important;}
  /* NE PAS neutraliser ici .dc-hero-grid > .e-con : ce selecteur vise la
     RANGEE, pas les cartes (l'arbre est grid > [titre, rangee] > cartes).
     Lui poser flex-grow:0 ecrasait le flex:1 1 0 de la rangee et faisait
     s'effondrer tout le heros. La regle du socle .dc-hero-grid > .e-con:hover
     {flex-grow:1.10} ne concerne donc que la rangee, et elle est sans effet
     puisque la rangee est deja seule sur sa ligne. Rien a neutraliser. */
  .dc-hero-panel:hover,.dc-hero-panel:focus-within{flex-grow:0!important;}
}
@media (prefers-reduced-motion:reduce){
  .dc-hero-panel,.dc-hero-panel:hover{
    background-size:auto 100%!important;transform:none!important;transition:none!important;}
}


/* --- 5. LES PROPORTIONS DE LA VARIANTE C SUR LA V4 ---
   Vous m'avez laisse choisir : je prends celles de la variante C, et ce n'est
   pas un gout, c'est la mesure. Rapport largeur/hauteur des cartes :
     reference image009 : 0,64   |   variante C : 0,56   |   variante B : 0,98
   La V4 etait en B. Ce qui manquait a notre heros pour ressembler a la
   reference n'etait plus la couleur mais l'AIR et la PROPORTION : ses cartes
   sont etroites, hautes, centrees, et elles flottent dans du vide ; les
   notres etaient larges et touchaient les bords.
   On cale donc les cartes sur 0,64, exactement le rapport de la reference, et
   la rangee est resserree au centre pour degager des marges laterales. */
@media (min-width:1025px){
  /* PIEGE : la V3 pose .dc-hero-row{flex:1} et .dc-hero-panel{flex:1 1 0} avec
     align-items:stretch. Les cartes prenaient donc la hauteur de la rangee, et
     aspect-ratio n'avait aucun effet — pire, en retirant min-height du heros
     tout s'est effondre a 62 px de haut. Il faut donc rendre la rangee au
     contenu (flex:0 0 auto) et arreter l'etirement (align-items:flex-start)
     pour qu'aspect-ratio determine enfin la hauteur. */
  /* LE HEROS TIENT DANS UN ECRAN. Signale sur MacBook : la section depassait
     et on n'en voyait pas la fin en arrivant. Un heros doit se lire d'un coup.
     On borne donc la section a la hauteur du viewport et c'est la HAUTEUR des
     cartes qui pilote leur largeur (aspect-ratio + height:100%), et non
     l'inverse : le rapport 16/25 est ainsi tenu quelle que soit la fenetre.
     max-width sur la carte pour qu'elles ne deviennent pas enormes sur un
     grand ecran ; svh plutot que vh pour ne pas sauter sur mobile. */
  .dc-hero-grid{
    min-height:100svh!important;max-height:100svh!important;
    padding-top:clamp(88px,11vh,112px)!important;
    padding-bottom:clamp(32px,5vh,60px)!important;}
  .dc-hero-row{
    max-width:1120px!important;margin:0 auto!important;width:100%!important;
    gap:clamp(14px,2vw,26px)!important;
    /* flex:1 1 0 et non 1 1 auto : avec « auto », la hauteur de la rangee
       depend de son contenu, donc le height:100% des cartes ne resout pas et
       elles debordaient sous la ligne de flottaison. Avec « 0 », la rangee
       prend exactement la place restante, et les cartes s'y calent. */
    flex:1 1 0!important;min-height:0!important;
    align-items:center!important;justify-content:center!important;}
  .dc-hero-panel{
    aspect-ratio:16/25;height:100%!important;width:auto!important;
    max-width:min(460px,30vw);max-height:min(680px,64vh);
    min-height:0!important;flex:0 0 auto!important;}
  /* le decalage alterne reste, mais discret : 1,6° comme decide */
  .dc-hero-panel:nth-child(1){transform:translateY(18px) rotate(-1.6deg);}
  .dc-hero-panel:nth-child(2){transform:translateY(0);}
  .dc-hero-panel:nth-child(3){transform:translateY(18px) rotate(1.6deg);}
}
@media (min-width:768px) and (max-width:1024px){
  .dc-hero-grid{min-height:auto!important;}
  .dc-hero-row{max-width:100%!important;gap:16px!important;flex:0 0 auto!important;align-items:flex-start!important;}
  .dc-hero-panel{aspect-ratio:3/4;height:auto!important;max-height:520px;min-height:0!important;}
}



/* ############################################################################
   #  V4 — LA BANDE DE 4 PX EN HAUT DE PAGE
   #
   #  Le socle de l'en-tete (post 609) decale le voile de la navbar de 4 px vers
   #  le bas :  .dc-navbar:not(.dc-navbar--solid){background-position:0 4px}
   #  C'etait volontaire, et documente : le voile mangeait les 4 px du filet de
   #  cible en haut des colonnes de l'ANCIEN heros, qui touchaient le bord haut
   #  de la page. On decalait donc le voile pour que le filet garde sa couleur.
   #
   #  Ce heros-la n'existe plus : les filets sont maintenant en haut des cartes,
   #  loin sous l'en-tete. Le decalage ne sert plus a rien et laisse une bande
   #  claire de 4 px en haut de l'ecran — mesuree : (100,80,200) sur les quatre
   #  premiers pixels contre (56,48,111) juste dessous.
   #
   #  On l'annule ICI et non dans le socle : le socle est charge sur TOUT le
   #  site, et l'ancien heros est encore en place sur la V1 livree et sur la V2
   #  que le client doit valider. Le CSS de l'en-tete etant charge APRES celui
   #  de la page, il faut une specificite superieure — d'ou le prefixe body,
   #  qui passe a 0,2,1 contre 0,2,0.
   ############################################################################ */
body .dc-navbar:not(.dc-navbar--solid){
  background-position:0 0!important;
  background-size:100% 100%!important;}


/* [7 septembre 2026] Retire avec le ruban : le ruban d'images et tous ses reglages de lisibilite.
   Le pave contact est revenu a celui de la V1/V2 (demande de Noemie du 7/9,
   « Pave contact : reprendre le meme que sur la V1 »). Le traitement de la
   carte vient desormais du socle (post 609), plus rien ici.
   L'etat d'avant est restaurable : modele Elementor 3572, et page 2662. */



/* ############################################################################
   #  V4 — AGENDA, d'apres « rolling list » (21st.dev / daiwiikharihar)
   #  Valeurs relevees dans le source.
   #
   #  TRANSPOSITION. La reference est une liste de PROCESS : quatre mots courts
   #  et abstraits (Discover, Design, Develop, Deploy). Un agenda est plus
   #  dense — date, titre, horaire, lieu, public. On ne peut pas mettre le
   #  titre d'un evenement en 72 px : « Atelier decouverte des metiers du
   #  numerique » ferait quatre lignes et le rouleau, qui a une hauteur fixe,
   #  le rognerait.
   #  C'est donc le TYPE d'evenement qui devient le mot roulant — PORTES
   #  OUVERTES, SEANCE D'INFO, ATELIER : court, et c'est l'information qu'on
   #  scanne en premier dans un agenda. La date reste a gauche dans sa pastille,
   #  le titre complet et l'horaire restent lisibles dessous, et la photo se
   #  revele a droite.
   #
   #  VALEURS DU SOURCE, reprises telles quelles :
   #    rouleau : hauteur 80 px, translateY(-50%) au survol,
   #              500 ms, cubic-bezier(.76,0,.24,1)
   #    mot     : 72 px, graisse 900, majuscules, tracking serre
   #    photo   : 128x192, rayon 8 px, ombre portee, au repos
   #              opacity 0 / scale .95 / rotate 3deg / translateX 16px,
   #              au survol tout revient a zero, 500 ms ease-out
   #              niveaux de gris au repos, couleur au survol
   #
   #  COUT D'EDITION A CONNAITRE : l'effet exige DEUX copies du mot (l'etat
   #  normal et l'etat italique). Elles sont toutes deux editables dans
   #  l'editeur, mais changer le libelle d'un evenement demande de le faire aux
   #  deux endroits. C'est le prix de cet effet sans JavaScript ; si c'est juge
   #  trop fragile, la variante « date en objet graphique » de la banque ne le
   #  paie pas.
   ############################################################################ */

.dc-agenda-row{position:relative;}

/* --- le rouleau --- */
/* La fenetre et les deux etats font exactement la meme hauteur ; a l'arrondi
   sous-pixel pres, le haut du second mot depassait alors de 2 a 3 px sous le
   premier — une barre bleue visible sous l'accent du « E » de SEANCE.
   On intercale donc un ECART entre les deux etats : au repos le second est
   hors de la fenetre avec de la marge, et le deplacement au survol vaut la
   hauteur PLUS cet ecart. Deux variables, pour que les variantes n'aient
   qu'a redefinir la hauteur. */
.dc-roll{
  --dc-roll-h:clamp(44px,5.2vw,64px);
  --dc-roll-gap:8px;
  overflow:hidden!important;
  height:var(--dc-roll-h)!important;
  row-gap:var(--dc-roll-gap)!important;
  flex:1 1 auto!important;min-width:0;
  justify-content:flex-start!important;}
.dc-roll > *{
  height:var(--dc-roll-h)!important;
  display:flex!important;align-items:center!important;
  margin:0!important;flex:0 0 auto!important;
  transition:margin-top .5s cubic-bezier(.76,0,.24,1);}
.dc-agenda-row:hover .dc-roll > *:first-child,
.dc-agenda-row:focus-within .dc-roll > *:first-child{
  margin-top:calc(-1 * (var(--dc-roll-h) + var(--dc-roll-gap)))!important;}

.dc-roll .elementor-heading-title{
  font-family:var(--dc-display)!important;
  /* 72 px etait la valeur du source, mais ses mots font un seul terme court
     (Discover, Design...). Le notre le plus long, « PORTES OUVERTES », fait
     15 signes : a 66 px il depassait la largeur disponible et le rouleau, qui
     est en overflow:hidden, le coupait en « PORTES OUVERT ».
     La taille est donc calee sur le mot le plus long, pas sur la reference. */
  font-size:clamp(22px,3.1vw,50px)!important;font-weight:900!important;
  line-height:1!important;letter-spacing:-.045em!important;
  text-transform:uppercase!important;margin:0!important;white-space:nowrap;}
.dc-roll-a .elementor-heading-title{color:var(--dc-text,#1A1D2B)!important;}
.dc-roll-b .elementor-heading-title{color:var(--dc-bleu-titres,#0033A1)!important;font-style:italic!important;}

/* --- la photo revelee, a droite --- */
.dc-roll-img{
  position:absolute!important;right:20px;top:50%;z-index:20;
  width:192px!important;height:128px!important;pointer-events:none;
  overflow:hidden;border-radius:8px;box-shadow:0 24px 48px -12px rgba(0,0,0,.45);
  opacity:0;transform:translateY(-50%) translateX(16px) scale(.95) rotate(3deg);
  transition:opacity .5s ease-out, transform .5s ease-out;}
.dc-roll-img img{width:100%!important;height:100%!important;object-fit:cover!important;
  display:block;border-radius:8px;filter:grayscale(1);transition:filter .5s ease-out;}
.dc-agenda-row:hover .dc-roll-img,
.dc-agenda-row:focus-within .dc-roll-img{
  opacity:1;transform:translateY(-50%) translateX(0) scale(1) rotate(0deg);}
.dc-agenda-row:hover .dc-roll-img img{filter:grayscale(0);}

/* l'ancienne pastille de type fait doublon avec le mot roulant */
.dc-agenda-row .dc-tag-event{display:none!important;}

/* La fleche s'efface pour laisser la place a la photo revelee — mais SEULEMENT
   dans les rangees qui ont une photo. La regle etait globale : sur la liste
   classique, qui n'a pas de photo, la fleche disparaissait au survol sans que
   rien ne la remplace. On la conditionne a la presence de .dc-roll-img. */
.dc-agenda-row:has(.dc-roll-img):hover .dc-arrow{opacity:0;transition:opacity .3s ease-out;}

@media (max-width:767px){
  /* trop etroit pour un rouleau de 72 px et une photo : on garde le mot, on
     retire la revelation. */
  .dc-roll-img{display:none!important;}
  .dc-roll,.dc-roll > *{height:auto!important;}
  .dc-roll > *:nth-child(2){display:none!important;}
  .dc-roll .elementor-heading-title{white-space:normal;}
}
@media (prefers-reduced-motion:reduce){
  .dc-roll > *{transition:none!important;}
  .dc-agenda-row:hover .dc-roll > *:first-child{margin-top:0!important;}
  .dc-roll-img{transition:none!important;}
}


/* [8 septembre 2026] REMIS — je l'avais retire a tort le 7.
   En depouillant le CSS du ruban, j'ai classe cette regle comme « propre a la
   mise en page du ruban ». Elle ne l'etait pas : elle traitait le chapo lui-
   meme, qui a besoin de 577 px pour tenir sur une ligne alors que le socle le
   plafonne a 52ch, soit 526 px. En la retirant j'ai reintroduit le defaut
   qu'elle corrigeait — « projet. » seul sur la deuxieme ligne. Signale par
   Yassine a la relecture.
   LECON : avant de retirer une regle avec un bloc, verifier ce qu'elle CORRIGE,
   pas seulement ou elle se trouve. Le commentaire d'origine le disait.
   Le « 92% » va sur le WIDGET et non sur le paragraphe : un pourcentage se
   calcule sur le widget, et pose sur le paragraphe il le rabotait a 531 px —
   sous les 577 necessaires. Piege deja documente le 3 septembre.
   `text-wrap:balance` en filet de securite : si le texte change ou si la
   fenetre descend sous le seuil, il se coupe en deux moities equilibrees au
   lieu de laisser un mot seul. */
.dc-cta-band .dc-cta-lead{
  max-width:min(620px,92%)!important;margin-inline:auto!important;}
.dc-cta-band .dc-cta-lead p{
  max-width:100%!important;margin-inline:auto!important;text-wrap:balance;}


/* --- AGENDA : les fleches respirent ---
   Elles etaient a 28 px du bord, soit exactement le padding de la ligne : elles
   semblaient collees au filet du cadre. */
.dc-agenda-row{padding-right:40px!important;}
.dc-roll-img{right:28px!important;}


/* ############################################################################
   #  V4 — HEROS SUR FENETRE COURTE
   #
   #  Defaut signale trois fois, et que mes mesures avaient rate : le sous-titre
   #  de la troisieme carte passe sur TROIS lignes. Reproduit enfin en testant
   #  la HAUTEUR de fenetre et non sa largeur.
   #  Cause : la largeur des cartes derive de leur hauteur (aspect-ratio 16/25),
   #  qui derive de la hauteur du viewport. Une fenetre courte donne donc des
   #  cartes etroites, et la gouttiere de 58 px reservee a la fleche mange
   #  jusqu'a 30% de la mesure restante. Mesure : a 1440x760 le texte tombe a
   #  193 px, a 1280x700 a 167 px.
   #  Trois leviers, dose ensemble plutot qu'un seul pousse trop loin :
   #    - les cartes s'elargissent (rapport 3/4 au lieu de 16/25) ;
   #    - la gouttiere descend a 44 px ;
   #    - le sous-titre passe a 15 px.
   ############################################################################ */
@media (min-width:1025px) and (max-height:830px){
  .dc-hero-panel{aspect-ratio:3/4;}
  .dc-hero-panel{--dc-gouttiere-fleche:44px;}
  .dc-hero-panel-text p{font-size:15px!important;line-height:1.45!important;}
}
@media (min-width:1025px) and (max-height:730px){
  .dc-hero-panel{aspect-ratio:4/5;}
  .dc-hero-panel{--dc-gouttiere-fleche:40px;}
  .dc-hero-panel-text p{font-size:14px!important;}
}


/* ############################################################################
   #  BANQUE — SECTION IMMERSIVE, d'apres « image-stream-hero »
   #  (21st.dev / ruixen.ui)
   #
   #  Deux rails de vignettes remontent du point de fuite vers le spectateur.
   #  Ce qui ressemble a deux animations n'en est qu'une : quand la profondeur
   #  d'une carte diminue, la projection agrandit sa taille ET ecarte sa
   #  position dans le meme rapport.
   #
   #  REPRODUCTIBLE SANS SCRIPT. Le composant est en React, mais son JavaScript
   #  ne fait qu'une chose : CALCULER des keyframes a partir de sa geometrie.
   #  J'ai refait le calcul et emis le CSS statique — 25 arrets par rail, issus
   #  des formules du source :
   #      taille   = (2,6/25) x (46/2,6)^u
   #      z        = 30 x (1 - 1/taille)
   #      rail     = 44 - (44 - (-11)) x (1-u)^3,3
   #      rotation = 6 + (28-6) x u
   #  Toutes les valeurs sont en cqw — un pourcentage de la largeur du
   #  conteneur — donc le couloir garde ses proportions a toutes les tailles.
   #
   #  TROIS SUBTILITES DU SOURCE, conservees telles quelles :
   #   1. la profondeur est ecrite en TAILLE APPARENTE, geometriquement : chaque
   #      carte est dans un rapport constant avec celle qui la precede. Repartir
   #      z lineairement ferait se dechirer les cartes proches.
   #   2. les rails s'ouvrent fort au debut puis tiennent (fan = 3,3). C'est ce
   #      qui donne le coude : des rails paralleles projettent un cone droit.
   #   3. railBirth est NEGATIF (-11) : la carte nait de l'autre cote de l'axe
   #      et le traverse. Sans ca, un trou clignote au centre a chaque cycle.
   #
   #  Le retard d'animation est NEGATIF sur chaque carte : le couloir est deja
   #  plein a la premiere image, il ne se remplit pas sous les yeux du visiteur.
   #
   #  MOUVEMENT REDUIT : on met en PAUSE au lieu de desactiver. Chaque carte est
   #  deja figee en milieu de course par son retard negatif ; elle s'arrete donc
   #  sur une image finie au lieu de s'effondrer sur l'axe. C'est le choix du
   #  source, et il est meilleur que le mien.
   ############################################################################ */
@keyframes dc-corridor-d{0.00%{transform:translate3d(-11.00cqw,0,-258.46cqw) rotateY(-6.00deg)}4.17%{transform:translate3d(-3.79cqw,0,-225.92cqw) rotateY(-6.92deg)}8.33%{transform:translate3d(2.73cqw,0,-197.04cqw) rotateY(-7.83deg)}12.50%{transform:translate3d(8.60cqw,0,-171.43cqw) rotateY(-8.75deg)}16.67%{transform:translate3d(13.87cqw,0,-148.70cqw) rotateY(-9.67deg)}20.83%{transform:translate3d(18.56cqw,0,-128.54cqw) rotateY(-10.58deg)}25.00%{transform:translate3d(22.72cqw,0,-110.65cqw) rotateY(-11.50deg)}29.17%{transform:translate3d(26.37cqw,0,-94.78cqw) rotateY(-12.42deg)}33.33%{transform:translate3d(29.57cqw,0,-80.70cqw) rotateY(-13.33deg)}37.50%{transform:translate3d(32.34cqw,0,-68.21cqw) rotateY(-14.25deg)}41.67%{transform:translate3d(34.71cqw,0,-57.13cqw) rotateY(-15.17deg)}45.83%{transform:translate3d(36.73cqw,0,-47.30cqw) rotateY(-16.08deg)}50.00%{transform:translate3d(38.42cqw,0,-38.58cqw) rotateY(-17.00deg)}54.17%{transform:translate3d(39.81cqw,0,-30.84cqw) rotateY(-17.92deg)}58.33%{transform:translate3d(40.94cqw,0,-23.98cqw) rotateY(-18.83deg)}62.50%{transform:translate3d(41.84cqw,0,-17.89cqw) rotateY(-19.75deg)}66.67%{transform:translate3d(42.53cqw,0,-12.48cqw) rotateY(-20.67deg)}70.83%{transform:translate3d(43.06cqw,0,-7.69cqw) rotateY(-21.58deg)}75.00%{transform:translate3d(43.43cqw,0,-3.44cqw) rotateY(-22.50deg)}79.17%{transform:translate3d(43.69cqw,0,0.33cqw) rotateY(-23.42deg)}83.33%{transform:translate3d(43.85cqw,0,3.68cqw) rotateY(-24.33deg)}87.50%{transform:translate3d(43.94cqw,0,6.65cqw) rotateY(-25.25deg)}91.67%{transform:translate3d(43.98cqw,0,9.28cqw) rotateY(-26.17deg)}95.83%{transform:translate3d(44.00cqw,0,11.62cqw) rotateY(-27.08deg)}100.00%{transform:translate3d(44.00cqw,0,13.70cqw) rotateY(-28.00deg)}}
@keyframes dc-corridor-g{0.00%{transform:translate3d(11.00cqw,0,-258.46cqw) rotateY(6.00deg)}4.17%{transform:translate3d(3.79cqw,0,-225.92cqw) rotateY(6.92deg)}8.33%{transform:translate3d(-2.73cqw,0,-197.04cqw) rotateY(7.83deg)}12.50%{transform:translate3d(-8.60cqw,0,-171.43cqw) rotateY(8.75deg)}16.67%{transform:translate3d(-13.87cqw,0,-148.70cqw) rotateY(9.67deg)}20.83%{transform:translate3d(-18.56cqw,0,-128.54cqw) rotateY(10.58deg)}25.00%{transform:translate3d(-22.72cqw,0,-110.65cqw) rotateY(11.50deg)}29.17%{transform:translate3d(-26.37cqw,0,-94.78cqw) rotateY(12.42deg)}33.33%{transform:translate3d(-29.57cqw,0,-80.70cqw) rotateY(13.33deg)}37.50%{transform:translate3d(-32.34cqw,0,-68.21cqw) rotateY(14.25deg)}41.67%{transform:translate3d(-34.71cqw,0,-57.13cqw) rotateY(15.17deg)}45.83%{transform:translate3d(-36.73cqw,0,-47.30cqw) rotateY(16.08deg)}50.00%{transform:translate3d(-38.42cqw,0,-38.58cqw) rotateY(17.00deg)}54.17%{transform:translate3d(-39.81cqw,0,-30.84cqw) rotateY(17.92deg)}58.33%{transform:translate3d(-40.94cqw,0,-23.98cqw) rotateY(18.83deg)}62.50%{transform:translate3d(-41.84cqw,0,-17.89cqw) rotateY(19.75deg)}66.67%{transform:translate3d(-42.53cqw,0,-12.48cqw) rotateY(20.67deg)}70.83%{transform:translate3d(-43.06cqw,0,-7.69cqw) rotateY(21.58deg)}75.00%{transform:translate3d(-43.43cqw,0,-3.44cqw) rotateY(22.50deg)}79.17%{transform:translate3d(-43.69cqw,0,0.33cqw) rotateY(23.42deg)}83.33%{transform:translate3d(-43.85cqw,0,3.68cqw) rotateY(24.33deg)}87.50%{transform:translate3d(-43.94cqw,0,6.65cqw) rotateY(25.25deg)}91.67%{transform:translate3d(-43.98cqw,0,9.28cqw) rotateY(26.17deg)}95.83%{transform:translate3d(-44.00cqw,0,11.62cqw) rotateY(27.08deg)}100.00%{transform:translate3d(-44.00cqw,0,13.70cqw) rotateY(28.00deg)}}


/* Le couloir reprend le fond des autres CTA : ce n'est pas un aplat pleine
   largeur, c'est une CARTE SOMBRE ARRONDIE posee dans une section blanche.
   Mon #0A0728 tirait sur l'indigo, d'ou la difference de teinte relevee.
   On reprend exactement le noir des autres cartes, #0A0A0A, et le meme rayon. */
.dc-corridor{background:#fff!important;}
.dc-corridor > .e-con-inner{
  position:relative;overflow:hidden;
  background:#0A0A0A;border-radius:20px;
  min-height:clamp(420px,62svh,620px);
  container-type:inline-size;}

.dc-corridor-scene{
  position:absolute!important;inset:0;z-index:0;
  pointer-events:none;
  perspective:30cqw;perspective-origin:50% 55%;
  transform-style:preserve-3d;
  padding:0!important;display:block!important;}

.dc-corridor-card{
  position:absolute!important;
  left:50%;top:55%;
  width:18cqw!important;height:25cqw!important;
  margin-left:-9cqw;margin-top:-12.5cqw;
  border-radius:.4cqw;overflow:hidden;
  backface-visibility:hidden;
  animation-duration:18s;animation-timing-function:linear;animation-iteration-count:infinite;}
.dc-corridor-card img{width:100%!important;height:100%!important;object-fit:cover!important;
  display:block;border-radius:.4cqw;}

/* rail droit puis rail gauche — les neuf premieres, puis les neuf suivantes */
.dc-corridor-scene > *:nth-child(-n+9){animation-name:dc-corridor-d;}
.dc-corridor-scene > *:nth-child(n+10){animation-name:dc-corridor-g;}
.dc-corridor-scene > *:nth-child(1),.dc-corridor-scene > *:nth-child(10){animation-delay:0s;}
.dc-corridor-scene > *:nth-child(2),.dc-corridor-scene > *:nth-child(11){animation-delay:-2s;}
.dc-corridor-scene > *:nth-child(3),.dc-corridor-scene > *:nth-child(12){animation-delay:-4s;}
.dc-corridor-scene > *:nth-child(4),.dc-corridor-scene > *:nth-child(13){animation-delay:-6s;}
.dc-corridor-scene > *:nth-child(5),.dc-corridor-scene > *:nth-child(14){animation-delay:-8s;}
.dc-corridor-scene > *:nth-child(6),.dc-corridor-scene > *:nth-child(15){animation-delay:-10s;}
.dc-corridor-scene > *:nth-child(7),.dc-corridor-scene > *:nth-child(16){animation-delay:-12s;}
.dc-corridor-scene > *:nth-child(8),.dc-corridor-scene > *:nth-child(17){animation-delay:-14s;}
.dc-corridor-scene > *:nth-child(9),.dc-corridor-scene > *:nth-child(18){animation-delay:-16s;}

/* le texte passe devant le couloir */
.dc-corridor-txt{position:relative!important;z-index:2;text-align:center;}

/* VOILE DE LECTURE, porte par le BLOC DE TEXTE lui-meme.
   Je l'avais d'abord mis sur le ::after de la carte — mais la section porte
   aussi .dc-cta-band, dont le socle occupe deja ce pseudo-element avec un voile
   violet. Meme specificite, et il gagnait par l'ordre ; doubler la classe n'a
   pas suffi non plus.
   Le poser ici resout le conflit au lieu de le disputer : ce pseudo-element
   n'appartient qu'a nous. Et c'est meilleur — il n'assombrit que derriere les
   mots, pas toute la carte, donc le couloir garde sa presence sur les cotes. */
.dc-corridor-txt::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:-56px -12% -48px -12%;
  background:radial-gradient(58% 62% at 50% 50%,
    rgba(9,14,34,.95) 0%, rgba(9,14,34,.88) 42%, rgba(9,14,34,.55) 70%, rgba(9,14,34,0) 92%);}
.dc-corridor-h .elementor-heading-title{
  font-size:clamp(28px,4vw,52px)!important;font-weight:800!important;
  line-height:1.06!important;letter-spacing:-.03em!important;color:#fff!important;
  white-space:pre-line;}
.dc-corridor-p,.dc-corridor-p p{
  max-width:46ch;margin-inline:auto;color:rgba(255,255,255,.88)!important;font-size:15px!important;}

/* VOILE DE LECTURE, recalibre apres mesure.
   Le fond BOUGE : le contraste n'est donc pas une valeur, c'est un intervalle.
   Mesure sur trois instants du cycle : le titre tenait a 19,6:1 partout, mais
   le paragraphe descendait a 4,10:1 — sous le seuil de 4,5 pour du texte
   courant. C'est le meme piege structurel que la pastille claire sur photo :
   ce qui depend de ce qui passe derriere n'est jamais fiable.
   Le voile est donc recentre sur le bloc de texte (46% et non 62%), elargi,
   et son palier median remonte. */
/* SPECIFICITE DOUBLEE. La section porte aussi la classe .dc-cta-band, et le
   socle pose deja un voile violet sur > .e-con-inner::after — meme specificite,
   et il gagnait par l'ordre. Resultat : le chapo passait sous les vignettes.
   On double la classe pour repasser devant. */
.dc-corridor.dc-corridor > .e-con-inner::after{
  content:""!important;position:absolute!important;inset:0!important;z-index:1!important;
  pointer-events:none!important;
  background:radial-gradient(64% 58% at 50% 46%,
    rgba(9,14,34,.96) 0%, rgba(9,14,34,.90) 38%, rgba(9,14,34,.58) 66%, rgba(9,14,34,0) 92%)!important;}

@media (prefers-reduced-motion:reduce){
  .dc-corridor-card{animation-play-state:paused!important;}
}


/* keyframes du degrade vivant — six taches orbitant, echantillonnees
   depuis le shader de flow-gradient-hero-section. Voir la variante G. */
@keyframes dc-vivant{0.00%{background-position:50.00% 70.00%,75.00% 50.00%,50.00% 72.50%,70.00% 50.00%,50.00% 67.50%,75.00% 50.00%,0% 0%,0% 0%}2.50%{background-position:56.18% 67.82%,72.28% 57.73%,56.95% 70.05%,67.82% 56.18%,60.29% 65.59%,73.78% 64.69%,0% 0%,0% 0%}5.00%{background-position:61.76% 61.76%,64.69% 64.69%,63.23% 63.23%,61.76% 61.76%,66.64% 60.29%,70.23% 73.78%,0% 0%,0% 0%}7.50%{background-position:66.18% 53.13%,53.91% 70.23%,68.20% 53.52%,53.13% 66.18%,66.64% 52.74%,64.69% 73.78%,0% 0%,0% 0%}10.00%{background-position:69.02% 43.82%,42.27% 73.78%,71.40% 43.05%,43.82% 69.02%,60.29% 44.59%,57.73% 64.69%,0% 0%,0% 0%}12.50%{background-position:70.00% 35.86%,32.32% 75.00%,72.50% 34.09%,35.86% 70.00%,50.00% 37.63%,50.00% 50.00%,0% 0%,0% 0%}15.00%{background-position:69.02% 30.98%,26.22% 73.78%,71.40% 28.60%,30.98% 69.02%,39.71% 33.36%,42.27% 35.31%,0% 0%,0% 0%}17.50%{background-position:66.18% 30.25%,25.31% 70.23%,68.20% 27.78%,30.25% 66.18%,33.36% 32.72%,35.31% 26.22%,0% 0%,0% 0%}20.00%{background-position:61.76% 33.82%,29.77% 64.69%,63.23% 31.80%,33.82% 61.76%,33.36% 35.84%,29.77% 26.22%,0% 0%,0% 0%}22.50%{background-position:56.18% 40.92%,38.65% 57.73%,56.95% 39.79%,40.92% 56.18%,39.71% 42.06%,26.22% 35.31%,0% 0%,0% 0%}25.00%{background-position:50.00% 50.00%,50.00% 50.00%,50.00% 50.00%,50.00% 50.00%,50.00% 50.00%,25.00% 50.00%,0% 0%,0% 0%}27.50%{background-position:43.82% 59.08%,61.35% 42.27%,43.05% 60.21%,59.08% 43.82%,60.29% 57.94%,26.22% 64.69%,0% 0%,0% 0%}30.00%{background-position:38.24% 66.18%,70.23% 35.31%,36.77% 68.20%,66.18% 38.24%,66.64% 64.16%,29.77% 73.78%,0% 0%,0% 0%}32.50%{background-position:33.82% 69.75%,74.69% 29.77%,31.80% 72.22%,69.75% 33.82%,66.64% 67.28%,35.31% 73.78%,0% 0%,0% 0%}35.00%{background-position:30.98% 69.02%,73.78% 26.22%,28.60% 71.40%,69.02% 30.98%,60.29% 66.64%,42.27% 64.69%,0% 0%,0% 0%}37.50%{background-position:30.00% 64.14%,67.68% 25.00%,27.50% 65.91%,64.14% 30.00%,50.00% 62.37%,50.00% 50.00%,0% 0%,0% 0%}40.00%{background-position:30.98% 56.18%,57.73% 26.22%,28.60% 56.95%,56.18% 30.98%,39.71% 55.41%,57.73% 35.31%,0% 0%,0% 0%}42.50%{background-position:33.82% 46.87%,46.09% 29.77%,31.80% 46.48%,46.87% 33.82%,33.36% 47.26%,64.69% 26.22%,0% 0%,0% 0%}45.00%{background-position:38.24% 38.24%,35.31% 35.31%,36.77% 36.77%,38.24% 38.24%,33.36% 39.71%,70.23% 26.22%,0% 0%,0% 0%}47.50%{background-position:43.82% 32.18%,27.72% 42.27%,43.05% 29.95%,32.18% 43.82%,39.71% 34.41%,73.78% 35.31%,0% 0%,0% 0%}50.00%{background-position:50.00% 30.00%,25.00% 50.00%,50.00% 27.50%,30.00% 50.00%,50.00% 32.50%,75.00% 50.00%,0% 0%,0% 0%}52.50%{background-position:56.18% 32.18%,27.72% 57.73%,56.95% 29.95%,32.18% 56.18%,60.29% 34.41%,73.78% 64.69%,0% 0%,0% 0%}55.00%{background-position:61.76% 38.24%,35.31% 64.69%,63.23% 36.77%,38.24% 61.76%,66.64% 39.71%,70.23% 73.78%,0% 0%,0% 0%}57.50%{background-position:66.18% 46.87%,46.09% 70.23%,68.20% 46.48%,46.87% 66.18%,66.64% 47.26%,64.69% 73.78%,0% 0%,0% 0%}60.00%{background-position:69.02% 56.18%,57.73% 73.78%,71.40% 56.95%,56.18% 69.02%,60.29% 55.41%,57.73% 64.69%,0% 0%,0% 0%}62.50%{background-position:70.00% 64.14%,67.68% 75.00%,72.50% 65.91%,64.14% 70.00%,50.00% 62.37%,50.00% 50.00%,0% 0%,0% 0%}65.00%{background-position:69.02% 69.02%,73.78% 73.78%,71.40% 71.40%,69.02% 69.02%,39.71% 66.64%,42.27% 35.31%,0% 0%,0% 0%}67.50%{background-position:66.18% 69.75%,74.69% 70.23%,68.20% 72.22%,69.75% 66.18%,33.36% 67.28%,35.31% 26.22%,0% 0%,0% 0%}70.00%{background-position:61.76% 66.18%,70.23% 64.69%,63.23% 68.20%,66.18% 61.76%,33.36% 64.16%,29.77% 26.22%,0% 0%,0% 0%}72.50%{background-position:56.18% 59.08%,61.35% 57.73%,56.95% 60.21%,59.08% 56.18%,39.71% 57.94%,26.22% 35.31%,0% 0%,0% 0%}75.00%{background-position:50.00% 50.00%,50.00% 50.00%,50.00% 50.00%,50.00% 50.00%,50.00% 50.00%,25.00% 50.00%,0% 0%,0% 0%}77.50%{background-position:43.82% 40.92%,38.65% 42.27%,43.05% 39.79%,40.92% 43.82%,60.29% 42.06%,26.22% 64.69%,0% 0%,0% 0%}80.00%{background-position:38.24% 33.82%,29.77% 35.31%,36.77% 31.80%,33.82% 38.24%,66.64% 35.84%,29.77% 73.78%,0% 0%,0% 0%}82.50%{background-position:33.82% 30.25%,25.31% 29.77%,31.80% 27.78%,30.25% 33.82%,66.64% 32.72%,35.31% 73.78%,0% 0%,0% 0%}85.00%{background-position:30.98% 30.98%,26.22% 26.22%,28.60% 28.60%,30.98% 30.98%,60.29% 33.36%,42.27% 64.69%,0% 0%,0% 0%}87.50%{background-position:30.00% 35.86%,32.32% 25.00%,27.50% 34.09%,35.86% 30.00%,50.00% 37.63%,50.00% 50.00%,0% 0%,0% 0%}90.00%{background-position:30.98% 43.82%,42.27% 26.22%,28.60% 43.05%,43.82% 30.98%,39.71% 44.59%,57.73% 35.31%,0% 0%,0% 0%}92.50%{background-position:33.82% 53.13%,53.91% 29.77%,31.80% 53.52%,53.13% 33.82%,33.36% 52.74%,64.69% 26.22%,0% 0%,0% 0%}95.00%{background-position:38.24% 61.76%,64.69% 35.31%,36.77% 63.23%,61.76% 38.24%,33.36% 60.29%,70.23% 26.22%,0% 0%,0% 0%}97.50%{background-position:43.82% 67.82%,72.28% 42.27%,43.05% 70.05%,67.82% 43.82%,39.71% 65.59%,73.78% 35.31%,0% 0%,0% 0%}100.00%{background-position:50.00% 70.00%,75.00% 50.00%,50.00% 72.50%,70.00% 50.00%,50.00% 67.50%,75.00% 50.00%,0% 0%,0% 0%}}


/* ############################################################################
   #  BANQUE — A PROPOS, GRILLE DECALEE
   #
   #  LE SURVOL CROISE FONCTIONNE, ET SANS JAVASCRIPT.
   #  Hier je disais l'inverse, et j'avais tort sur la methode : je gardais la
   #  structure de la reference — une colonne de photos d'un cote, une liste de
   #  l'autre — et dans ce cas, oui, relier les deux demande un script, parce
   #  que :hover ne franchit pas deux sous-arbres separes.
   #  Il suffisait de changer la structure : CHAQUE PHOTO VIT DANS SA LIGNE.
   #  Elle en est extraite visuellement par un positionnement absolu, ce qui
   #  reforme la grille decalee a gauche, mais elle reste sa descendante dans
   #  le DOM. Survoler la ligne atteint donc sa propre photo, en CSS pur.
   #  La composition est identique a l'oeil, le lien est reel, zero script.
   #
   #  Les cinq positions reproduisent l'esprit du source : trois colonnes de
   #  tailles inegales (155/172/162) et de departs differents.
   #
   #  RESERVE DE CONTENU, a dire a la cliente : deux des cinq rubriques —
   #  « Nos partenaires » et « Publications & etudes » — n'ont pas de sujet
   #  photographiable. Leur visuel est decoratif, et le lien qu'il suggere est
   #  faible. Avec la serie de Luc on pourra soit trouver un vrai sujet, soit
   #  n'illustrer que les trois rubriques qui en ont un.
   ############################################################################ */
.dc-eq{align-items:flex-start!important;display:block!important;min-height:510px;}
/* PIEGE DE POSITIONNEMENT : une vignette en absolu se cale sur le premier
   ancetre POSITIONNE. Elementor rend .dc-eq-liste et .e-con-inner relatifs, si
   bien que les vignettes se calaient sur la liste — decalees de 650 px vers la
   droite et debordant sous la section.
   On fixe donc explicitement le repere sur la SECTION elle-meme — verifie au
   rendu : ce conteneur est en « pleine largeur » cote Elementor, il n'a donc
   PAS de .e-con-inner, la regle posee sur l'enfant ne s'appliquait a rien.
   Elle est conservee au cas ou le reglage changerait dans l'editeur.
   Et on remet la liste et les lignes en position statique pour qu'elles ne
   volent pas le repere. */
.dc-eq{position:relative!important;}
.dc-eq > .e-con-inner{position:relative!important;min-height:510px;}
.dc-eq-liste,.dc-eq-row{position:static!important;}

/* DEFAUT LATENT, corrige ici : une marge gauche ne retrecit PAS la boite.
   La liste est un conteneur Elementor en largeur 100 % ; la decaler de 650 px
   poussait son bord droit hors cadre pour 1376 de contenu, soit 586 px de
   debordement horizontal invisible a l'oeil (les intitules sont courts) mais
   bien reel — il ajoutait une barre de defilement laterale a la page.
   La largeur est donc reprise explicitement. */
/* La liste est etiree a la hauteur exacte de la grille de vignettes et ses
   cinq lignes reparties en « espace entre » : le premier intitule se cale donc
   sur le haut de la premiere photo et le dernier sur le bas de la derniere.
   Sans cela la colonne de droite s'arretait a mi-hauteur et la composition
   paraissait tomber d'un cote. */
.dc-eq-liste{margin-left:760px!important;padding-top:0!important;
  width:calc(100% - 760px)!important;max-width:calc(100% - 760px)!important;
  min-height:476px!important;justify-content:space-between!important;
  align-items:flex-start!important;text-align:left!important;}
.dc-eq-liste .elementor-heading-title{text-align:left!important;}
/* Les lignes heritaient d'un centrage du conteneur parent : chaque groupe
   « barre + nom » se centrait dans sa colonne, d'ou des barres qui ne
   s'alignaient pas verticalement. On force le fer a gauche sur la ligne
   elle-meme, pas seulement sur la liste. */
.dc-eq-row{width:100%;cursor:pointer;text-decoration:none!important;
  align-items:flex-start!important;justify-content:flex-start!important;
  transition:opacity .3s var(--dc-ease);}
.dc-eq-row > *{align-self:flex-start!important;width:100%;}
.dc-eq-liste:hover .dc-eq-row{opacity:.5;}
.dc-eq-liste .dc-eq-row:hover{opacity:1;}

/* --- les cinq vignettes, extraites du flux pour reformer la grille --- */
.dc-eq-photo{position:absolute!important;z-index:1;margin:0!important;}
.dc-eq-photo img{
  width:100%!important;height:100%!important;object-fit:cover;display:block;border-radius:12px;
  filter:grayscale(1) brightness(.77);
  transition:filter .5s var(--dc-ease), transform .5s var(--dc-ease);}
/* Grille agrandie d'environ 15 %. Motif : avec les tailles du modele, le bloc
   s'arretait vers 850 px et laissait 500 px de vide a droite dans la colonne de
   contenu — ca ne se lisait pas comme une composition mais comme un bloc
   tronque. Les rapports entre les trois colonnes sont conserves, seule
   l'echelle change ; la liste est repoussee d'autant.
   PUIS COMPRESSEE EN HAUTEUR (2 septembre, fin de journee) : les vignettes
   passent d'un format presque carre a un format paysage. La LARGEUR de la
   grille ne bouge pas — donc le remplissage de la colonne de contenu est
   conserve — mais sa hauteur tombe de 600 a 476 px. C'est le seul levier qui
   raccourcit la section sans rouvrir le vide a droite : resserrer la liste
   seule ne gagnerait rien, puisque c'est la grille qui impose la hauteur. */
.dc-eq-row:nth-child(1) .dc-eq-photo{left:0;    top:0;    width:209px;height:175px;}
.dc-eq-row:nth-child(2) .dc-eq-photo{left:225px;top:72px; width:232px;height:194px;}
.dc-eq-row:nth-child(3) .dc-eq-photo{left:474px;top:34px; width:219px;height:183px;}
.dc-eq-row:nth-child(4) .dc-eq-photo{left:0;    top:191px;width:209px;height:175px;}
.dc-eq-row:nth-child(5) .dc-eq-photo{left:225px;top:282px;width:232px;height:194px;}

/* LE GESTE : survoler l'intitule rend sa couleur a SA photo, et la fait
   passer devant les autres. C'est exactement le comportement du modele. */
.dc-eq-row:hover .dc-eq-photo{z-index:4;}
.dc-eq-row:hover .dc-eq-photo img{
  filter:grayscale(0) brightness(1);transform:scale(1.03);}

/* --- la liste --- */
.dc-eq-nom .elementor-heading-title{
  display:flex;align-items:center;gap:10px;
  font-size:clamp(22px,2vw,28px)!important;font-weight:600!important;line-height:1.1!important;
  letter-spacing:-.01em!important;color:var(--dc-text,#1A1D2B)!important;margin:0!important;}
.dc-eq-nom .elementor-heading-title::before{
  content:"";display:inline-block;flex:0 0 auto;
  width:20px;height:14px;border-radius:6px;
  background:rgba(26,29,43,.25);transition:width .3s var(--dc-ease),background-color .3s var(--dc-ease);}
.dc-eq-row:hover .dc-eq-nom .elementor-heading-title::before{
  width:26px;background:var(--dc-bleu-titres,#0033A1);}
.dc-eq-role .elementor-heading-title{
  margin:8px 0 0 30px!important;
  font-size:11px!important;font-weight:500!important;
  letter-spacing:.2em!important;text-transform:uppercase!important;
  color:var(--dc-text-light,#5A6172)!important;}

/* --- sous 1025 px la grille absolue ne tient plus : la vignette revient dans
   le flux, petite, a gauche de son intitule. Le lien reste evident, il devient
   meme plus direct. --- */
@media (max-width:1024px){
  .dc-eq{min-height:0;}
  .dc-eq-liste{margin-left:0!important;width:100%!important;max-width:100%!important;
    min-height:0!important;justify-content:flex-start!important;}
  .dc-eq-row{display:flex!important;flex-direction:row!important;
    align-items:center!important;gap:16px!important;}
  .dc-eq-row .dc-eq-photo{position:static!important;
    width:78px!important;height:84px!important;flex:0 0 auto!important;}
  .dc-eq-nom,.dc-eq-role{flex:1 1 auto;}
  .dc-eq-role .elementor-heading-title{margin-left:0!important;}
}
@media (prefers-reduced-motion:reduce){
  .dc-eq-photo img,.dc-eq-row,.dc-eq-nom .elementor-heading-title::before{transition:none!important;}
  .dc-eq-row:hover .dc-eq-photo img{transform:none;}
}

/* ############################################################################
   #  BANQUE — CARTE A PHOTOS EN EVENTAIL, d'apres « card-25 » (@ravikatiyar162)
   #
   #  Le geste : trois visuels empiles se DEPLOIENT en eventail au survol de la
   #  carte. Valeurs du source, reprises telles quelles :
   #    empile   : translateX(index x 32px), z-index inverse
   #    deploye  : translateX(index x 80px) rotate(index x 5 - 5 deg)
   #    chaque visuel : hauteur pleine, largeur 40%, rayon 8, bordure 2px de la
   #    couleur du fond (c'est elle qui detache les visuels les uns des autres)
   #    carte    : rayon 16, hover translateY(-4px) + ombre
   #    transition 300 ms ease-in-out
   #
   #  Le composant pose ces valeurs en variables CSS inline par index ; en CSS
   #  statique on les ecrit avec :nth-child, ce qui revient au meme et reste
   #  editable dans Elementor.
   #
   #  Mappage : une formation, ses visuels, sa duree et son format. Le geste dit
   #  quelque chose de juste ici — une formation, c'est plusieurs seances.
   ############################################################################ */
.dc-fan-wrap{align-items:stretch!important;}
.dc-fan{
  /* Base ramenee de 340 a 300 px pour que les TROIS cartes tiennent sur une
     rangee jusqu'a 1 024 px de large. En dessous, le report a la ligne se fait
     tout seul : 2 puis 1. */
  flex:1 1 300px!important;max-width:520px;
  border:1px solid var(--dc-gray-200)!important;border-radius:16px!important;
  background:#fff!important;
  box-shadow:0 1px 2px rgba(26,29,43,.05);
  transition:transform .3s ease-in-out, box-shadow .3s ease-in-out;}
.dc-fan:hover{transform:translateY(-4px);box-shadow:0 18px 40px -18px rgba(26,29,43,.35);}

/* fer a gauche : les conteneurs Elementor heritent d'un centrage, et le kit
   repeint les titres en --e-global-color-primary, qui vaut #008AB7. D'ou un
   titre cyan et centre alors que le source le veut sombre et a gauche.
   On redefinit la VARIABLE plutot que la couleur : elle s'herite au lieu
   d'entrer en concurrence avec la reemission du pied de page. */
.dc-fan{text-align:left!important;align-items:flex-start!important;
  --e-global-color-primary:var(--dc-text,#1A1D2B);}
.dc-fan .elementor-heading-title,.dc-fan p{text-align:left!important;}
.dc-fan-titre .elementor-heading-title{
  font-size:26px!important;font-weight:700!important;line-height:1.12!important;
  letter-spacing:-.03em!important;margin:0 0 22px!important;
  color:var(--dc-text,#1A1D2B)!important;
  /* Reserve de deux lignes : a trois cartes de front, « Cybersecurite &
     Ethical Hacking » passe sur deux lignes et decalait vers le bas sa pile de
     photos et son texte par rapport aux deux autres cartes. */
  min-height:2.24em;}

/* la pile : hauteur fixe, les visuels sont en absolu par-dessus */
.dc-fan-pile{
  position:relative!important;height:128px!important;margin-bottom:22px!important;
  display:block!important;}
.dc-fan-img{
  position:absolute!important;top:0;left:0;height:100%!important;width:40%!important;
  border-radius:8px;overflow:hidden;
  border:2px solid #fff;box-shadow:0 4px 10px rgba(26,29,43,.18);
  transition:transform .3s ease-in-out;}
.dc-fan-img img{width:100%!important;height:100%!important;object-fit:cover!important;display:block;}
/* empile : 0 / 32 / 64 px, le premier au-dessus */
.dc-fan-img:nth-child(1){transform:translateX(0);z-index:3;}
.dc-fan-img:nth-child(2){transform:translateX(32px);z-index:2;}
.dc-fan-img:nth-child(3){transform:translateX(64px);z-index:1;}
/* deploye : 0 / 80 / 160 px, avec la rotation du source (-5, 0, +5) */
.dc-fan:hover .dc-fan-img:nth-child(1){transform:translateX(0) rotate(-5deg);}
.dc-fan:hover .dc-fan-img:nth-child(2){transform:translateX(80px) rotate(0deg);}
.dc-fan:hover .dc-fan-img:nth-child(3){transform:translateX(160px) rotate(5deg);}

.dc-fan-meta .elementor-heading-title{
  font-size:13px!important;font-weight:500!important;margin:0 0 12px!important;
  color:var(--dc-text-light,#5A6172)!important;}
.dc-fan-desc,.dc-fan-desc p{
  font-size:14px!important;line-height:1.6!important;
  color:var(--dc-text-light,#5A6172)!important;margin:0!important;}

/* Palier intermediaire 768-1200 px : sans lui, la troisieme carte passait a la
   ligne des 1 024 px et la section gagnait 345 px de haut. On resserre la base
   des cartes ET le deploiement de la pile — l'un sans l'autre ferait deborder
   les vignettes hors de leur carte. Verifie : 120 + 108 = 228 pour 245 px
   utiles a 1 024. */
@media (min-width:768px) and (max-width:1200px){
  .dc-fan{flex:1 1 270px!important;}
  .dc-fan-img{width:44%!important;}
  .dc-fan-img:nth-child(2){transform:translateX(24px);}
  .dc-fan-img:nth-child(3){transform:translateX(48px);}
  .dc-fan:hover .dc-fan-img:nth-child(2){transform:translateX(60px) rotate(0deg);}
  .dc-fan:hover .dc-fan-img:nth-child(3){transform:translateX(120px) rotate(5deg);}
}

@media (max-width:767px){
  .dc-fan-img{width:46%!important;}
  .dc-fan-img:nth-child(2){transform:translateX(22px);}
  .dc-fan-img:nth-child(3){transform:translateX(44px);}
  .dc-fan:hover .dc-fan-img:nth-child(2){transform:translateX(46px) rotate(0deg);}
  .dc-fan:hover .dc-fan-img:nth-child(3){transform:translateX(92px) rotate(5deg);}
}
@media (prefers-reduced-motion:reduce){
  .dc-fan,.dc-fan-img{transition:none!important;}
  .dc-fan:hover{transform:none;}
}


/* ############################################################################
   #  V4 — RYTHME DES FONDS DE SECTION
   #
   #  Le reproche est ancien et il revient de deux cotes : « le blanc partout,
   #  c'est monotone ». La page enchainait deux sections blanches d'affilee et
   #  ses deux teintes etaient des degrades LINEAIRES, donc plats.
   #
   #  Rythme retenu, du haut vers le bas :
   #     heros SOMBRE / lavis / blanc / lavis / blanc / lavis / CTA SOMBRE
   #  Le blanc franc revient sur les deux sections les plus denses — Formations
   #  et Agenda — parce qu'elles ont besoin de calme, et c'est l'alternance qui
   #  cree le « vrai switch » demande, pas la couleur en elle-meme.
   #
   #  LE LAVIS reprend le vocabulaire du shader « flow-gradient » : plusieurs
   #  taches radiales qui se recouvrent, plus un grain. Mais a intensite tres
   #  basse — 5 a 15 % — parce qu'ici le fond est CLAIR et porte du texte
   #  sombre. Valeurs remontees d'environ 60 % le 2 septembre : a 3-9 % ces
   #  lavis se mesuraient mais ne se voyaient pas.
   #  Le grain est a 12 %, pas 45 % comme sur le heros : au-dela, un fond clair
   #  ne parait pas texture, il parait sale.
   #  Aucun mouvement : ces lavis sont des fonds, pas des animations. La page en
   #  a deja deux, ca suffit.
   ############################################################################ */
.dc-wash{position:relative;isolation:isolate;}
.dc-wash > *{position:relative;z-index:1;}
.dc-wash::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-repeat:no-repeat,no-repeat,no-repeat,repeat;
  background-size:100% 100%,100% 100%,100% 100%,160px 160px;}

/* le grain, commun aux trois : une seule couche, tres discrete */
.dc-wash::before{
  background-image:
    var(--dc-wash-1),var(--dc-wash-2),var(--dc-wash-3),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.12'/></svg>");}

/* 1 — A propos : le lavis le plus present, il prend la suite du heros */
.dc-wash-1{
  --dc-wash-1:radial-gradient(58% 46% at 84% 6%,  rgba(139,92,246,.15), rgba(139,92,246,0) 70%);
  --dc-wash-2:radial-gradient(52% 44% at 6% 88%,  rgba(0,138,183,.13),  rgba(0,138,183,0) 72%);
  --dc-wash-3:radial-gradient(64% 40% at 42% 52%, rgba(46,85,218,.08),  rgba(46,85,218,0) 76%);}

/* 2 — Actualites : plus froid, plus leger */
.dc-wash-2{
  --dc-wash-1:radial-gradient(54% 44% at 10% 8%,  rgba(0,138,183,.12),  rgba(0,138,183,0) 72%);
  --dc-wash-2:radial-gradient(50% 42% at 92% 78%, rgba(46,85,218,.10),  rgba(46,85,218,0) 74%);
  --dc-wash-3:radial-gradient(60% 38% at 50% 40%, rgba(139,92,246,.06), rgba(139,92,246,0) 78%);}

/* 3 — Partenaires : presque rien, juste de quoi ne pas etre blanc */
.dc-wash-3{
  --dc-wash-1:radial-gradient(56% 46% at 18% 14%, rgba(139,92,246,.09), rgba(139,92,246,0) 74%);
  --dc-wash-2:radial-gradient(48% 40% at 88% 84%, rgba(0,138,183,.075), rgba(0,138,183,0) 76%);
  --dc-wash-3:radial-gradient(58% 36% at 56% 50%, rgba(217,70,239,.05), rgba(217,70,239,0) 78%);}

/* ############################################################################
   #  ACTUALITES C — grille de trois, la carte se souleve
   #  --------------------------------------------------------------------
   #  Reproduction en Elementor natif d'une carte de projet : visuel 16/9 en
   #  haut, titre, chapo, et un lien flechee en bas. Au survol la carte entiere
   #  se souleve, la photo s'agrandit lentement dans son cadre et le titre
   #  prend le bleu de marque.
   #
   #  DIFFERENCE AVEC ACTUALITES A, qui est le meme contenu : A defile
   #  horizontalement (carrousel), C se lit d'un coup en grille de 3 x 2. Le
   #  conteneur a donc ete RENOMME (dc-grille-proj au lieu de la classe du
   #  carrousel) : c'est ce qui le soustrait au script de defilement deja
   #  present sur la page, sans y toucher.
   ############################################################################ */
.dc-proj .dc-grille-proj{overflow:visible!important;}
.dc-proj .dc-grille-proj > *{
  display:grid!important;grid-template-columns:repeat(3,1fr)!important;
  gap:32px!important;width:100%!important;transform:none!important;}
.dc-proj .dc-grille-proj > * > *{
  width:auto!important;flex:0 0 auto!important;min-width:0!important;
  border-radius:16px!important;overflow:hidden!important;
  transition:transform .5s var(--dc-ease),box-shadow .5s var(--dc-ease)!important;}
.dc-proj .dc-grille-proj > * > *:hover,
.dc-proj .dc-grille-proj > * > *:focus-within{
  transform:translateY(-8px)!important;box-shadow:0 18px 40px rgba(10,10,10,.16)!important;}

/* Le visuel passe en 16/9. Il est en image de FOND, pas en balise <img> : on
   agrandit donc le conteneur lui-meme, le debordement etant deja masque par
   la carte. Effet identique a un object-cover qui zoome. */
.dc-proj .dc-card-img{
  aspect-ratio:16/9!important;height:auto!important;min-height:0!important;
  transition:transform .7s var(--dc-ease)!important;}
.dc-proj .dc-grille-proj > * > *:hover .dc-card-img,
.dc-proj .dc-grille-proj > * > *:focus-within .dc-card-img{transform:scale(1.10)!important;}

.dc-proj .dc-card-title .elementor-heading-title{transition:color .3s var(--dc-ease)!important;}
.dc-proj .dc-grille-proj > * > *:hover .dc-card-title .elementor-heading-title,
.dc-proj .dc-grille-proj > * > *:focus-within .dc-card-title .elementor-heading-title{
  color:var(--dc-bleu-titres,#0033A1)!important;}

.dc-proj .dc-card-bottom .elementor-button-icon{
  display:inline-block;transition:transform .3s var(--dc-ease);}
.dc-proj .dc-grille-proj > * > *:hover .dc-card-bottom .elementor-button-icon,
.dc-proj .dc-grille-proj > * > *:focus-within .dc-card-bottom .elementor-button-icon{
  transform:translateX(4px);}

@media (max-width:1024px){ .dc-proj .dc-grille-proj > *{grid-template-columns:repeat(2,1fr)!important;} }
@media (max-width:767px){ .dc-proj .dc-grille-proj > *{grid-template-columns:1fr!important;} }

/* ############################################################################
   #  FORMATIONS D — photo pleine carte, le pratique revele au survol
   #  --------------------------------------------------------------------
   #  La photo occupe toute la carte, un fondu sombre monte du bas et le texte
   #  se pose dessus. Au repos on ne lit que la categorie et l'intitule ; au
   #  survol la duree, le format et les dates montent, suivis du lien.
   #
   #  POURQUOI CETTE SECTION : le geste du modele est « des informations
   #  cachees qui remontent ». Sur une formation, ces informations existent
   #  vraiment (duree, format, prochaine session) — ailleurs il aurait fallu
   #  les inventer, et le procede n'aurait rien servi.
   #
   #  ACCESSIBILITE : tout ce qui apparait au survol apparait aussi au FOCUS
   #  clavier (:focus-within), sans quoi le contenu serait hors d'atteinte
   #  pour qui n'a pas de souris.
   ############################################################################ */
.dc-form-d .dc-grille-fd{overflow:visible!important;}
.dc-form-d .dc-grille-fd > *{
  display:grid!important;grid-template-columns:repeat(3,1fr)!important;
  gap:28px!important;width:100%!important;transform:none!important;}
.dc-form-d .dc-grille-fd > * > *{
  position:relative!important;width:auto!important;flex:0 0 auto!important;min-width:0!important;
  aspect-ratio:3/4;overflow:hidden!important;border:0!important;
  border-radius:16px!important;background:#0A0A0A!important;
  transition:transform .5s var(--dc-ease),box-shadow .5s var(--dc-ease)!important;}
.dc-form-d .dc-grille-fd > * > *:hover,
.dc-form-d .dc-grille-fd > * > *:focus-within{
  transform:translateY(-8px)!important;box-shadow:0 22px 48px rgba(10,10,10,.28)!important;}

.dc-form-d .dc-card-img{
  position:absolute!important;inset:0!important;
  width:100%!important;height:100%!important;min-height:0!important;
  transition:transform .6s var(--dc-ease)!important;}
.dc-form-d .dc-grille-fd > * > *:hover .dc-card-img,
.dc-form-d .dc-grille-fd > * > *:focus-within .dc-card-img{transform:scale(1.08)!important;}

/* Le fondu sombre. Valeurs relevees au banc : il faut .90 en pied pour que le
   texte blanc reste conforme sur les photos les plus claires. */
.dc-form-d .dc-grille-fd > * > *::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(6,8,20,.12) 0%, rgba(6,8,20,.30) 32%,
    rgba(6,8,20,.66) 62%, rgba(6,8,20,.90) 100%);}

/* Le bloc de texte : dernier enfant de la carte, cale en pied. */
.dc-form-d .dc-grille-fd > * > * > *:last-child{
  position:relative!important;z-index:2!important;
  height:100%!important;width:100%!important;
  display:flex!important;flex-direction:column!important;justify-content:flex-end!important;
  padding:26px!important;background:transparent!important;gap:0!important;}

.dc-form-d .dc-fd-tag .elementor-heading-title{
  display:inline-block;align-self:flex-start;
  font-size:11px!important;font-weight:700!important;letter-spacing:.16em!important;
  text-transform:uppercase!important;color:#fff!important;
  padding:5px 11px!important;border-radius:999px!important;
  background:rgba(255,255,255,.16)!important;border:1px solid rgba(255,255,255,.34)!important;
  backdrop-filter:blur(4px);margin:0 0 12px 0!important;}
.dc-form-d .dc-fd-titre .elementor-heading-title{
  font-size:clamp(20px,1.7vw,26px)!important;font-weight:700!important;line-height:1.15!important;
  color:#fff!important;margin:0!important;}

/* Le pratique et le lien sont replies au repos. On anime une hauteur maximale
   plutot qu'une hauteur : la valeur reelle du texte reste libre. */
.dc-form-d .dc-fd-meta{
  max-height:0!important;opacity:0!important;overflow:hidden!important;
  transition:max-height .5s var(--dc-ease),opacity .4s var(--dc-ease),margin-top .5s var(--dc-ease)!important;
  margin-top:0!important;}
.dc-form-d .dc-fd-meta p{
  margin:0!important;font-size:14px!important;line-height:1.5!important;color:rgba(255,255,255,.86)!important;}
.dc-form-d .dc-fd-cta{
  opacity:0!important;transform:translateY(14px)!important;
  transition:opacity .4s var(--dc-ease) .06s,transform .4s var(--dc-ease) .06s!important;
  margin-top:0!important;}
.dc-form-d .dc-fd-cta .elementor-button{color:#fff!important;padding:0!important;}
.dc-form-d .dc-fd-cta .elementor-button-icon{display:inline-block;transition:transform .3s var(--dc-ease);}
.dc-form-d .dc-grille-fd > * > *:hover .dc-fd-meta,
.dc-form-d .dc-grille-fd > * > *:focus-within .dc-fd-meta{
  max-height:96px!important;opacity:1!important;margin-top:12px!important;}
.dc-form-d .dc-grille-fd > * > *:hover .dc-fd-cta,
.dc-form-d .dc-grille-fd > * > *:focus-within .dc-fd-cta{
  opacity:1!important;transform:none!important;margin-top:14px!important;}
.dc-form-d .dc-grille-fd > * > *:hover .dc-fd-cta .elementor-button-icon{transform:translateX(4px);}

@media (max-width:1024px){ .dc-form-d .dc-grille-fd > *{grid-template-columns:repeat(2,1fr)!important;} }
@media (max-width:767px){ .dc-form-d .dc-grille-fd > *{grid-template-columns:1fr!important;} }

/* Sans mouvement : tout est deja visible, rien ne se replie. */
@media (prefers-reduced-motion:reduce){
  .dc-proj .dc-grille-proj > * > *,.dc-proj .dc-card-img,
  .dc-form-d .dc-grille-fd > * > *,.dc-form-d .dc-card-img,
  .dc-form-d .dc-fd-meta,.dc-form-d .dc-fd-cta{transition:none!important;}
  .dc-form-d .dc-fd-meta{max-height:96px!important;opacity:1!important;margin-top:12px!important;}
  .dc-form-d .dc-fd-cta{opacity:1!important;transform:none!important;margin-top:14px!important;}
}


/* ############################################################################
   #  LA SECTION QUI TRANCHE — agenda sur fond de nuit
   #  --------------------------------------------------------------------
   #  Les lavis clairs donnent du souffle mais aucun ne fait EVENEMENT. Une
   #  page a qui l'on reproche d'etre monotone n'a pas besoin que toutes ses
   #  sections crient : elle a besoin d'UNE rupture franche. Si les trois
   #  criaient, aucune ne ressortirait et la page deviendrait bruyante.
   #
   #  POURQUOI L'AGENDA : c'est la section designee comme la moins originale
   #  (reunion du 1er septembre), et elle est encadree de deux sections
   #  blanches — la rupture y est donc maximale.
   #
   #  POURQUOI CE FOND ET PAS LE DEGRADE DE MARQUE EN APLAT : sur une surface
   #  de cette taille, le degrade sature virerait a l'aplat publicitaire. On
   #  reprend le sol du heros — nuit, lueurs violette et cyan, grain — ce qui
   #  fait de la page une famille : heros sombre, agenda sombre, appel a
   #  l'action sombre, tout le reste clair.
   ############################################################################ */
.dc-nuit{background:#0A0728!important;position:relative;isolation:isolate;}
.dc-nuit > *{position:relative;z-index:1;}
.dc-nuit::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-repeat:no-repeat,no-repeat,no-repeat,repeat;
  background-size:100% 100%,100% 100%,100% 100%,160px 160px;
  background-image:
    radial-gradient(62% 58% at 10% 4%,  rgba(126,63,242,.46), rgba(126,63,242,0) 68%),
    radial-gradient(56% 52% at 92% 98%, rgba(0,138,183,.38),  rgba(0,138,183,0)  70%),
    radial-gradient(44% 38% at 64% 26%, rgba(217,70,239,.15), rgba(217,70,239,0) 74%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.34'/></svg>");}

/* --- inversion des textes --- */
/* PIEGE : la couleur n'est pas portee par le conteneur qui a la classe dc-,
   mais par le .elementor-heading-title a l'interieur. Viser le conteneur seul
   laissait le quantieme en bleu marine et l'heure en gris sur fond de nuit —
   1,3:1 au releve. Il faut viser l'element interieur — ET doubler la classe
   de section QUATRE FOIS. Motif mesure : les couleurs d'origine sont ecrites
   dans le custom_css de la section elle-meme, qu'Elementor prefixe par
   « .elementor-6487 .elementor-element.elementor-element-8af07d5 ». Ce
   selecteur pese CINQ classes ; deux ou trois .dc-nuit n'y suffisaient pas,
   le quantieme restait bleu marine sur fond de nuit (1,00:1). */
.dc-nuit.dc-nuit.dc-nuit.dc-nuit .dc-header-text .elementor-heading-title,
.dc-nuit.dc-nuit.dc-nuit.dc-nuit .dc-agenda-title .elementor-heading-title,
.dc-nuit.dc-nuit.dc-nuit.dc-nuit .dc-agenda-day,
.dc-nuit.dc-nuit.dc-nuit.dc-nuit .dc-agenda-day .elementor-heading-title{color:#fff!important;}
.dc-nuit.dc-nuit.dc-nuit.dc-nuit .dc-subtitle,.dc-nuit.dc-nuit.dc-nuit.dc-nuit .dc-subtitle p,
.dc-nuit.dc-nuit.dc-nuit.dc-nuit .dc-agenda-month,.dc-nuit.dc-nuit.dc-nuit.dc-nuit .dc-agenda-meta,.dc-nuit.dc-nuit.dc-nuit.dc-nuit .dc-agenda-time,
.dc-nuit.dc-nuit.dc-nuit.dc-nuit .dc-agenda-month .elementor-heading-title,
.dc-nuit.dc-nuit.dc-nuit.dc-nuit .dc-agenda-time .elementor-heading-title{color:rgba(255,255,255,.82)!important;}
.dc-nuit.dc-nuit.dc-nuit.dc-nuit .dc-link-boxed .elementor-button,
.dc-nuit.dc-nuit.dc-nuit.dc-nuit .dc-link-boxed .elementor-button-text{color:#8CE8FF!important;}
.dc-nuit.dc-nuit.dc-nuit.dc-nuit .dc-link-boxed .elementor-button{
  border-color:rgba(140,232,255,.45)!important;background:transparent!important;}

/* Le mot roulant : blanc au repos, cyan quand il monte. C'est le seul endroit
   de la section ou la couleur bouge, donc le seul qui merite l'accent. */
.dc-nuit.dc-nuit.dc-nuit.dc-nuit .dc-roll-a .elementor-heading-title,.dc-nuit.dc-nuit.dc-nuit.dc-nuit .dc-roll-a p{color:#fff!important;}
.dc-nuit.dc-nuit.dc-nuit.dc-nuit .dc-roll-b .elementor-heading-title,.dc-nuit.dc-nuit.dc-nuit.dc-nuit .dc-roll-b p{color:#8CE8FF!important;}

/* La liste perd sa carte blanche : sur fond de nuit, un filet suffit. */
.dc-nuit.dc-nuit.dc-nuit.dc-nuit .dc-agenda-list{background:transparent!important;border-color:rgba(255,255,255,.16)!important;}
.dc-nuit.dc-nuit.dc-nuit.dc-nuit .dc-agenda-row{border-color:rgba(255,255,255,.16)!important;}
.dc-nuit.dc-nuit.dc-nuit.dc-nuit .dc-agenda-row:hover{background:rgba(255,255,255,.05)!important;}
.dc-nuit.dc-nuit.dc-nuit.dc-nuit .dc-tag-soft .elementor-heading-title,
.dc-nuit.dc-nuit.dc-nuit.dc-nuit .dc-tag-event .elementor-heading-title{
  color:#fff!important;background:rgba(255,255,255,.14)!important;
  border:1px solid rgba(255,255,255,.30)!important;}
.dc-nuit.dc-nuit.dc-nuit.dc-nuit .dc-arrow,.dc-nuit.dc-nuit.dc-nuit.dc-nuit .dc-arrow .elementor-icon,
.dc-nuit.dc-nuit.dc-nuit.dc-nuit .dc-arrow svg{color:#fff!important;fill:#fff!important;
  border-color:rgba(255,255,255,.34)!important;}
/* [8 septembre 2026] LE FOND DE SURVOL ETAIT SUR LE MAUVAIS ELEMENT.
   Il etait pose sur le WIDGET `.dc-arrow`, qui n'a aucun arrondi, alors que la
   boite visible est `.elementor-icon` a l'interieur, arrondie a 8 px. On voyait
   donc un rectangle a angles droits depasser derriere la boite arrondie.
   Invisible jusqu'ici parce que la fleche etait masquee depuis le 3 septembre.
   Le fond passe sur l'icone. Le socle remplit deja cette boite d'encre au
   survol — invisible sur fond de nuit, d'ou ce correctif clair. */
.dc-nuit.dc-nuit.dc-nuit.dc-nuit .dc-agenda-row:hover .dc-arrow{background:transparent!important;}
.dc-nuit.dc-nuit.dc-nuit.dc-nuit .dc-agenda-row:hover .dc-arrow .elementor-icon{
  background:rgba(255,255,255,.16)!important;
  border-color:rgba(255,255,255,.52)!important;}


/* ==========================================================================
   ACTUALITES — la couture entre « Videos » et « Podcasts »
   Demande du 3 septembre. Applique a la V4 (2662) ET a la banque (2695).

   La carte medias `.dc-media-card` porte deja l'arrondi de 16 px et masque le
   debordement. Ses deux moities `.dc-media-half` portaient le MEME arrondi,
   ce qui dessinait un pincement arrondi au milieu de la carte, la ou les deux
   panneaux se touchent. On ne laisse l'arrondi qu'a la carte : la couture
   redevient droite, les quatre coins exterieurs restent arrondis.
   -------------------------------------------------------------------------- */
.dc-media-card .dc-media-half{border-radius:0!important;}


/* ==========================================================================
   APPARITIONS AU DEFILEMENT — resserrees (retour du 3 septembre :
   « il n'y a pas d'animation d'apparition »).

   Il y en avait : 6 sections sur 10 portent `animation:fadeInUp` +
   `elementor-invisible` + `animated-slow`. Mais `animated-slow` vaut DEUX
   SECONDES chez Elementor, et `fadeInUp` (animate.css) part de
   translate3d(0,100%,0) — soit, pour une section de 900 px, 900 px de course
   en 2 s. Sur un defilement normal on arrive apres la fin, ou le mouvement
   est si lent qu'il se lit comme un chargement de page.

   On remplace donc le mouvement par une montee courte et nette : 24 px,
   0,6 s, sortie amortie — « adoucies et couplees a une opacite », ce qui
   etait la demande du 1er septembre. Aucun script ajoute.
   -------------------------------------------------------------------------- */

/* DIAGNOSTIC DU 3 SEPTEMBRE — pourquoi « il n'y a pas d'animation » :
   les apparitions d'Elementor sont declenchees par jQuery Waypoints, et
   LiteSpeed RETARDE ce script jusqu'a la premiere interaction reelle de
   l'utilisateur. Verifie : `jQuery.fn.waypoint` est `undefined` au
   chargement, la section reste `elementor-invisible` (visibility:hidden) ;
   des qu'on survole et qu'on scrolle a la molette, le script se charge, la
   classe `animated fadeInUp` est posee et la section apparait.
   Consequence : tant que le visiteur n'a pas touche la page, SIX SECTIONS
   SONT INVISIBLES. C'est un risque de page blanche, pas un defaut d'effet.

   On supprime donc la dependance au JS :
   1. plus rien n'est masque au chargement ;
   2. l'apparition d'Elementor est neutralisee (elle repartirait de zero sur
      un contenu deja visible, ce qui provoquerait un clignotement) ;
   3. elle est remplacee par une apparition pilotee par le DEFILEMENT, en CSS
      pur, la ou le navigateur sait le faire. Ailleurs, le contenu s'affiche
      simplement, sans effet — jamais de page blanche. */

/* [10 septembre 2026] Ce bloc est parti dans le SOCLE (post 609). Il ne servait
   que l'accueil alors que c'est un comportement de site : les trois autres
   pages n'avaient aucune apparition. Le socle porte desormais les images-cles,
   les regles de securite et la portee en pixels — voir la note « APPARITIONS AU
   DEFILEMENT — SYSTEME COMMUN ». Rien a remettre ici. */

/* [7 septembre 2026] Retire avec le ruban : le ralentissement du ruban.
   Le pave contact est revenu a celui de la V1/V2 (demande de Noemie du 7/9,
   « Pave contact : reprendre le meme que sur la V1 »). Le traitement de la
   carte vient desormais du socle (post 609), plus rien ici.
   L'etat d'avant est restaurable : modele Elementor 3572, et page 2662. */



/* --- ACTUALITES : carte medias — degrade laisse en l'etat -----------------
   Une tentative de lui donner le degrade d'Evenements n'a pas gagne la
   cascade (une regle `.dc-media-card` du socle passe devant, meme contre une
   selection quadruplee et un !important). Le client a tranche : le bleu
   actuel lui convient. Regle retiree pour ne pas laisser du CSS mort.
   -------------------------------------------------------------------------- */

/* --- ACTUALITES : le visuel s'agrandit au survol -------------------------
   Les visuels d'article sont des fonds CSS sur `.dc-card-img`, pas des <img>.
   La carte masque deja son debordement : l'agrandissement se fait donc sans
   deborder, et sans reflux de mise en page.
   ------------------------------------------------------------------------- */
.dc-card-img{transition:transform .55s cubic-bezier(.22,.61,.36,1)!important;}
.dc-blog-card:hover .dc-card-img{transform:scale(1.05)!important;}

/* [7 septembre 2026] Retire avec le ruban : le retrait du masque du ruban.
   Le pave contact est revenu a celui de la V1/V2 (demande de Noemie du 7/9,
   « Pave contact : reprendre le meme que sur la V1 »). Le traitement de la
   carte vient desormais du socle (post 609), plus rien ici.
   L'etat d'avant est restaurable : modele Elementor 3572, et page 2662. */



/* [7 septembre 2026] Retire avec le ruban : le masquage du halo, qui n'existait que dans le bloc du ruban.
   Le pave contact est revenu a celui de la V1/V2 (demande de Noemie du 7/9,
   « Pave contact : reprendre le meme que sur la V1 »). Le traitement de la
   carte vient desormais du socle (post 609), plus rien ici.
   L'etat d'avant est restaurable : modele Elementor 3572, et page 2662. */



/* --- ACTUALITES : le degrade de la carte medias, remis -------------------
   C'est bien cette version que le client validait. Deux tentatives par
   `background-image` ont echoue : Elementor ecrit le fond des conteneurs
   avec un selecteur du type
   `.elementor-6487 .elementor-element.elementor-element-XXX:not(...)`, et le
   socle est charge APRES le CSS de page — meme a specificite egale il gagne.
   On cesse de se battre sur la meme propriete : les trois halos passent sur
   un `::before` en surimpression, libre sur cet element. Le degrade de base
   reste celui de la carte, les halos se posent dessus.
   ------------------------------------------------------------------------- */
.dc-media-card{position:relative;}
.dc-media-card::before{
  content:"";position:absolute;inset:0;z-index:0;
  border-radius:inherit;pointer-events:none;
  background:
    radial-gradient(62% 58% at 10% 4%, rgba(126,63,242,.46), rgba(126,63,242,0) 68%),
    radial-gradient(56% 52% at 92% 98%, rgba(0,138,183,.38), rgba(0,138,183,0) 70%),
    radial-gradient(44% 38% at 64% 26%, rgba(217,70,239,.15), rgba(217,70,239,0) 74%);}
.dc-media-card > *{position:relative;z-index:1;}


/* --- CTA C, couloir d'images : apparitions et disparitions --------------
   Deux defauts signales, une seule cause commune.

   1. « Elles disparaissent d'un coup, avant de sortir du champ. » Les
      keyframes ne pilotent QUE le transform : a 100% la vignette est a
      z=+13,7cqw, puis l'animation reboucle instantanement a z=-258cqw. Sans
      opacite, la vignette se teleporte — d'ou le sautillement.
   2. « Les images sont un peu deformees. » La perspective vaut 30cqw, tres
      courte : en fin de course, a 28 degres de rotation et tout pres de la
      camera, la vignette est fortement fuyante.

   Correctif : une seconde animation qui ne pilote que l'opacite, sur la meme
   duree et le meme decalage (une valeur unique d'`animation-delay` s'applique
   aux deux animations de la liste). La vignette apparait en fondu depuis le
   fond, et s'efface AVANT la phase de forte deformation — les deux points
   tombent ensemble. Et on rallonge un peu la perspective, ce qui adoucit la
   fuyante sans aplatir l'effet.
   ------------------------------------------------------------------------- */
/* CORRIGE apres retour : mon premier fondu sortait des 62% et laissait la
   vignette invisible sur 38% de sa course — « elles apparaissent a peine
   qu'elles disparaissent ». Le client ne demandait PAS a changer le rythme :
   uniquement a supprimer la disparition brutale au bouclage. On ne touche
   donc plus qu'aux extremites, et on rend sa perspective d'origine (30cqw) :
   la deformation faisait partie de l'effet et convenait. */
@keyframes dc-corridor-fade{
  0%{opacity:0}
  5%{opacity:1}
  88%{opacity:1}
  100%{opacity:0}}

.dc-corridor-card{
  animation-duration:18s,18s!important;
  animation-timing-function:linear,linear!important;
  animation-iteration-count:infinite,infinite!important;}
.dc-corridor-scene > *:nth-child(-n+9){animation-name:dc-corridor-d,dc-corridor-fade!important;}
.dc-corridor-scene > *:nth-child(n+10){animation-name:dc-corridor-g,dc-corridor-fade!important;}


/* --- CTA C : l'arete du voile de lisibilite du couloir ------------------
   Isolee par elimination : la ligne disparait quand on masque
   `.dc-corridor > .e-con-inner::after`, et seulement celui-la.
   Ce voile vaut
     radial-gradient(64% 58% at 50% 46%,
       rgba(9,14,34,.96) 0%, .9 38%, .58 66%, 0 92%)
   Sa rampe tombe de 58% a 0% d'opacite sur un quart du rayon seulement.
   L'ellipse etant tres large (64% de 1320 px), son arc inferieur est presque
   plat : la chute se lit donc comme une DROITE horizontale, d'autant plus
   nette qu'elle traverse les photos claires du couloir.
   Meme nature que l'arete du CTA de la V4 : une rampe trop raide, pas une
   bordure. On garde le meme voile au centre — la lisibilite du texte en
   depend — et on etale la descente jusqu'au bord.
   ------------------------------------------------------------------------- */
/* NB : le socle definit ce voile sur `.dc-cta-band > .e-con-inner::after`
   (2 classes) et se charge APRES le CSS de page — a egalite il gagnait. On
   triple `.dc-corridor` pour repasser devant. */
.dc-corridor.dc-corridor.dc-corridor > .e-con-inner::after{
  background-image:radial-gradient(72% 66% at 50% 46%,
    rgba(9,14,34,.96) 0%,
    rgba(9,14,34,.92) 30%,
    rgba(9,14,34,.80) 48%,
    rgba(9,14,34,.58) 64%,
    rgba(9,14,34,.34) 78%,
    rgba(9,14,34,.14) 90%,
    rgba(9,14,34,0) 100%)!important;}


/* --- CTA C : l'arete vient du VOILE DU BLOC DE TEXTE --------------------
   Yassine : « ça vient des boutons je crois ». Exact.
   `.dc-corridor-txt::before` porte un voile radial, dans une boite etendue
   de `inset:-56px -12% -48px -12%` — donc 48 px SOUS le bloc des boutons.
   Le degrade vaut `radial-gradient(58% 62% at 50% 50%, ... 0 92%)` : son
   ellipse fait 62% de la hauteur de la boite, si bien qu'au bord BAS de la
   boite on n'est qu'a ~81% du rayon, ou l'opacite vaut encore ~0,3. Le
   degrade est donc COUPE NET par le bord de la boite : d'ou une droite
   horizontale, 48 px sous les boutons.
   Ce n'est pas une ombre — c'est un degrade qui n'a pas fini de s'eteindre
   avant la fin de sa boite.
   Correctif : la rampe atteint zero a 80% du rayon, soit AVANT le bord. Le
   voile garde exactement la meme densite la ou le texte se lit (0-58%).
   ------------------------------------------------------------------------- */
.dc-corridor-txt.dc-corridor-txt::before{
  background:radial-gradient(58% 62% at 50% 50%,
    rgba(9,14,34,.95) 0%,
    rgba(9,14,34,.88) 34%,
    rgba(9,14,34,.62) 52%,
    rgba(9,14,34,.34) 66%,
    rgba(9,14,34,.12) 74%,
    rgba(9,14,34,0) 80%)!important;}


/* ==========================================================================
   V4 — retours de la reunion du 3 septembre 2026.
   Portee : page 2662 UNIQUEMENT. La banque garde ses variantes de heros
   intactes tant que le perimetre n'est pas tranche.
   -------------------------------------------------------------------------- */

/* --- HERO : photos en couleur -------------------------------------------
   Le noir et blanc ne venait pas d'un filtre mais d'un
   `background-blend-mode:luminosity` sur le panneau, que le survol repassait
   en `normal`. On fixe `normal` au repos ; la regle de survol devient sans
   effet, elle est laissee en place pour ne pas casser la cascade existante.
   ------------------------------------------------------------------------- */
.elementor-6487 .dc-hero-panel{background-blend-mode:normal!important;}

/* --- HERO : suppression du lisere de couleur ----------------------------
   Le lisere est un `::after` de 4 px de haut, pleine largeur, en haut de
   chaque panneau, dans la couleur du public (magenta, cyan, violet).
   Le halo radial du `::before` est un AUTRE element : il est conserve.
   ------------------------------------------------------------------------- */
.elementor-6487 .dc-hero-panel::after{display:none!important;}


/* --- A PROPOS : photos en couleur, zoom rendu au survol -------------------
   Les vignettes etaient en `grayscale(1) brightness(.77)`. Le survol declarait
   bien un `scale(1.03)`... mais une regle POSTERIEURE le remettait a
   `transform:none` — le zoom etait donc mort. On retablit les deux.
   ------------------------------------------------------------------------- */
.elementor-6487 .dc-eq-photo img{
  filter:none!important;
  transition:transform .5s cubic-bezier(.22,.61,.36,1)!important;}
.elementor-6487 .dc-eq-row:hover .dc-eq-photo img{
  filter:none!important;transform:scale(1.03)!important;}

/* --- A PROPOS : une couleur par intitule ---------------------------------
   La pastille devant chaque intitule etait grise au repos et passait au bleu
   `--dc-bleu-titres` au survol — un seul bleu pour les cinq. On donne a
   chacune sa couleur, au repos comme au survol, en suivant le balayage du
   heros : magenta -> violet -> bleu roi -> bleu logo -> cyan. Ce sont les
   jetons du kit, aucune couleur inventee. La pastille est decorative : le
   ratio de contraste WCAG ne s'y applique pas.
   ------------------------------------------------------------------------- */
.elementor-6487 [data-id="9a73d24"] .dc-eq-nom .elementor-heading-title::before,
.elementor-6487 [data-id="9a73d24"]:hover .dc-eq-nom .elementor-heading-title::before{
  background:var(--dc-magenta,#D946EF)!important;}
.elementor-6487 [data-id="e3e3fdf"] .dc-eq-nom .elementor-heading-title::before,
.elementor-6487 [data-id="e3e3fdf"]:hover .dc-eq-nom .elementor-heading-title::before{
  background:var(--dc-violet,#8B5CF6)!important;}
.elementor-6487 [data-id="77c948f"] .dc-eq-nom .elementor-heading-title::before,
.elementor-6487 [data-id="77c948f"]:hover .dc-eq-nom .elementor-heading-title::before{
  background:var(--dc-bleu-roi,#1E3A8A)!important;}
.elementor-6487 [data-id="0cd885f"] .dc-eq-nom .elementor-heading-title::before,
.elementor-6487 [data-id="0cd885f"]:hover .dc-eq-nom .elementor-heading-title::before{
  background:var(--dc-bleu-logo,#008AB7)!important;}
.elementor-6487 [data-id="d0b6485"] .dc-eq-nom .elementor-heading-title::before,
.elementor-6487 [data-id="d0b6485"]:hover .dc-eq-nom .elementor-heading-title::before{
  background:var(--dc-cyan,#22D3EE)!important;}

/* --- FORMATIONS : une seule photo par formation --------------------------
   Motif : « ils n'auront pas de quoi remplir ces photos ». Chaque pile
   `.dc-fan-pile` porte 3 vignettes ; on n'en garde qu'une, remise d'aplomb
   (les suivantes portaient la rotation de l'eventail). L'ADN est conserve :
   la photo reagit toujours au survol, par un agrandissement.
   Fait en CSS et non dans les donnees : reversible ce soir si le client
   revient dessus. Le nettoyage des widgets viendra apres validation.
   ------------------------------------------------------------------------- */
.elementor-6487 .dc-fan-pile > .dc-fan-img:nth-child(n+2){display:none!important;}
.elementor-6487 .dc-fan-pile > .dc-fan-img:first-child{
  transform:none!important;
  transition:transform .45s cubic-bezier(.22,.61,.36,1)!important;}
.elementor-6487 .dc-fan-pile:hover > .dc-fan-img:first-child{
  transform:scale(1.04)!important;}

/* --- FORMATIONS : onglet « Chercheurs d'emploi » sans photo --------------
   Ils n'en auront pas. Pas d'aplat de remplacement : un gris ressemblerait a
   une image qui n'a pas charge. La carte se tient sur son badge de categorie
   et sa typographie.
   ------------------------------------------------------------------------- */
.elementor-6487 [data-id="e4a9e07"] .dc-fan-pile{display:none!important;}

/* --- EVENEMENTS : grain retire ------------------------------------------
   Le fond du `::before` empile 3 degrades radiaux PUIS une texture de grain
   (tuile de 160 px, repetee). On redeclare les trois degrades a l'identique,
   sans la texture — le CSS ne permet pas de retirer une seule couche.
   Valeurs relevees sur le rendu, pas reinventees.
   ------------------------------------------------------------------------- */
.elementor-6487 [data-id="8af07d5"]::before{
  background-image:
    radial-gradient(62% 58% at 10% 4%, rgba(126,63,242,.46), rgba(126,63,242,0) 68%),
    radial-gradient(56% 52% at 92% 98%, rgba(0,138,183,.38), rgba(0,138,183,0) 70%),
    radial-gradient(44% 38% at 64% 26%, rgba(217,70,239,.15), rgba(217,70,239,0) 74%)!important;
  background-size:100% 100%!important;
  background-repeat:no-repeat!important;}

/* --- EVENEMENTS : cadre retire, photos non rognees -----------------------
   Le filet blanc a 16 % autour de la liste servait aussi de masque : c'est
   lui qui rognait la photo revelee sur la PREMIERE et la DERNIERE ligne.
   En retirant le cadre on retire aussi le masque, les deux points tombent
   ensemble.
   ------------------------------------------------------------------------- */
.elementor-6487 .dc-agenda-list{border:0!important;overflow:visible!important;}

/* --- EVENEMENTS : fleche retiree ----------------------------------------
   Elle ne sert a rien : la photo apparait deja au survol de la ligne.
   ------------------------------------------------------------------------- */
/* [8 septembre 2026] LA FLECHE REVIENT, MAIS AU SURVOL SEULEMENT.
   Elle avait ete supprimee le 3 septembre a la demande de la cliente. Le
   contexte a change : a l'epoque, la PHOTO revelee servait de retour au survol
   et la fleche faisait doublon. La photo est partie le 7 septembre, a sa
   demande aussi — la rangee s'est retrouvee sans aucune affordance, alors
   qu'elle est cliquable et que le curseur l'annonce.
   Compromis retenu apres coup : DISCRETE au repos (42 % d'opacite), pleine au
   survol. Le tout-au-survol avait un defaut redhibitoire — le survol n'existe
   pas au doigt : sur telephone et tablette, l'affordance n'apparaissait JAMAIS
   alors que la rangee est cliquable. A 42 % elle se devine sans peser, et elle
   dit avant le clic que la ligne mene quelque part. On ne defait
   pas sa decision, on la replace dans le contexte qui a bouge.
   `opacity` et non `display` : une propriete qui se transitionne. Et la
   gouttiere de 40 px a droite de chaque rangee etait DEJA reservee pour elle
   depuis le 3 septembre — elle ne prend pas un pixel de plus au contenu. */
.elementor-6487 [data-id="8af07d5"] .dc-arrow{
  display:inline-flex!important;opacity:.42;
  transition:opacity .35s var(--dc-ease);}
.elementor-6487 [data-id="8af07d5"] .dc-agenda-row:hover .dc-arrow,
.elementor-6487 [data-id="8af07d5"] .dc-agenda-row:focus-within .dc-arrow{opacity:1;}
@media (prefers-reduced-motion:reduce){
  .elementor-6487 [data-id="8af07d5"] .dc-arrow{transition:none!important;}
}

/* --- EVENEMENTS : bouton « Voir tout l'agenda » en blanc ----------------- */
.elementor-6487 [data-id="8af07d5"] .elementor-button{
  color:#fff!important;
  border-color:rgba(255,255,255,.55)!important;}

/* --- EVENEMENTS : bouton en blanc (2e passe) -----------------------------
   La 1re regle a perdu la cascade : la couleur cyan est posee par le
   custom_css de l'ELEMENT, que Elementor emet avec la classe doublee. On
   double `.elementor-button` a son tour. Meme piege que la gouttiere de
   Formations B, le 3 septembre au matin.
   ------------------------------------------------------------------------- */
.elementor-6487 [data-id="8af07d5"] .elementor-button.elementor-button{
  color:#fff!important;
  border-color:rgba(255,255,255,.55)!important;}
.elementor-6487 [data-id="8af07d5"] .elementor-button.elementor-button svg,
.elementor-6487 [data-id="8af07d5"] .elementor-button.elementor-button path{
  fill:#fff!important;stroke:#fff!important;}

/* [7 septembre 2026] Retire avec le ruban : la reserve basse sous le ruban.
   Le pave contact est revenu a celui de la V1/V2 (demande de Noemie du 7/9,
   « Pave contact : reprendre le meme que sur la V1 »). Le traitement de la
   carte vient desormais du socle (post 609), plus rien ici.
   L'etat d'avant est restaurable : modele Elementor 3572, et page 2662. */


/* [7 septembre 2026] Retire avec le ruban : le degrade a paliers, propre au fond du ruban.
   Le pave contact est revenu a celui de la V1/V2 (demande de Noemie du 7/9,
   « Pave contact : reprendre le meme que sur la V1 »). Le traitement de la
   carte vient desormais du socle (post 609), plus rien ici.
   L'etat d'avant est restaurable : modele Elementor 3572, et page 2662. */


/* --- EVENEMENTS : bouton en blanc (3e passe, la bonne) -------------------
   La couleur cyan est posee par
     `.dc-nuit.dc-nuit.dc-nuit.dc-nuit .dc-link-boxed .elementor-button`
   — la classe est QUADRUPLEE, un forçage de specificite pose lors d'une
   session precedente. Aucun `!important` ne suffit contre ca : il faut
   repasser devant en specificite. On reprend la meme chaine et on ajoute la
   page + la classe du bouton doublee.
   ------------------------------------------------------------------------- */
.elementor-6487 .dc-nuit.dc-nuit.dc-nuit.dc-nuit .dc-link-boxed .elementor-button.elementor-button{
  color:#fff!important;
  border-color:rgba(255,255,255,.55)!important;}
.elementor-6487 .dc-nuit.dc-nuit.dc-nuit.dc-nuit .dc-link-boxed .elementor-button.elementor-button svg{
  fill:#fff!important;}


/* --- HERO : le lisere clair en haut des cartes ---------------------------
   Ce n'est pas une bordure : le panneau porte une couleur de fond
   `#6E7C99` (gris-bleu) sous la photo, en `background-size:auto 100%`. Un
   arrondi de sous-pixel laisse affleurer un cheveu de cette couleur sur le
   bord haut, clair contre une photo sombre. On passe le fond au bleu nuit :
   le cheveu devient invisible, et c'est de toute façon une meilleure couleur
   d'attente pendant le chargement de la photo.
   ------------------------------------------------------------------------- */
.elementor-6487 .dc-hero-panel{background-color:var(--dc-bleu-nuit,#0F1B3D)!important;}

/* --- FORMATIONS : rayon de l'image aligne sur celui de la carte ----------
   La carte est a 16 px, le cadre de la vignette a 8 px et l'image a 16 px —
   trois valeurs pour deux bords qui se superposent. On aligne tout sur 16 px.
   ------------------------------------------------------------------------- */
.elementor-6487 .dc-fan-img,
.elementor-6487 .dc-fan-img img{border-radius:16px!important;}

/* --- FORMATIONS : image plus grande, et l'inclinaison au survol rendue ---
   L'ancienne animation de l'eventail inclinait la premiere vignette de -5deg
   au survol (`.dc-fan:hover .dc-fan-img:nth-child(1)`), la pile se soulevant
   de 4 px. Mon agrandissement l'avait ecrasee : on la remet, avec un leger
   grossissement en plus.
   La vignette passe de 147 px de large a toute la largeur de la carte, en
   16/10 : avec une seule photo au lieu de trois, la carte avait un trou.
   ------------------------------------------------------------------------- */
.elementor-6487 .dc-fan-pile > .dc-fan-img:first-child{
  width:100%!important;height:auto!important;aspect-ratio:16/10!important;
  transform:none!important;
  transition:transform .45s cubic-bezier(.22,.61,.36,1)!important;}
.elementor-6487 .dc-fan-pile > .dc-fan-img:first-child img{
  width:100%!important;height:100%!important;object-fit:cover!important;}
.elementor-6487 .dc-fan:hover .dc-fan-img:first-child,
.elementor-6487 .dc-fan-pile:hover > .dc-fan-img:first-child{
  transform:rotate(-5deg) scale(1.02)!important;}

/* --- EVENEMENTS : le LIBELLE du bouton aussi en blanc --------------------
   La couleur avait ete posee sur le `<a>`, mais Elementor imbrique le texte
   dans un `<span class="elementor-button-text">` qui porte sa propre couleur.
   ------------------------------------------------------------------------- */
.elementor-6487 .dc-nuit.dc-nuit.dc-nuit.dc-nuit .dc-link-boxed .elementor-button .elementor-button-text{
  color:#fff!important;}

/* --- HERO : la vraie cause du lisere ------------------------------------
   Ce n'etait ni une bordure ni un cheveu de sous-pixel : le panneau a
   `padding:26px` et `background-origin:padding-box`. La photo est donc
   dessinee A L'INTERIEUR du padding, tandis que la COULEUR de fond, elle,
   est peinte jusqu'au bord (`background-clip:border-box`). D'ou un cadre de
   26 px de couleur unie autour de la photo — clair quand le fond etait
   gris-bleu, bleu nuit depuis que je l'avais fonce. J'avais traite le
   symptome et rendu le defaut PLUS visible sur la deuxieme carte.
   Correctif : `background-origin:border-box`, la photo va bord a bord.
   ------------------------------------------------------------------------- */
.elementor-6487 .dc-hero-panel{
  background-origin:border-box!important;
  background-clip:border-box!important;}

/* --- FORMATIONS : la hauteur va sur la PILE, pas sur la vignette --------
   Les trois vignettes de l'eventail sont en `position:absolute` — la pile
   n'a donc aucune hauteur propre, elle en portait une fixe de 128 px. En
   agrandissant la vignette a 230 px je l'ai fait deborder de 100 px sur le
   texte ; puis, en passant la pile en `height:auto`, je l'ai reduite a zero
   et la photo a disparu. C'est la PILE qui doit porter la hauteur : on lui
   donne le rapport 16/10, la vignette absolue la remplit.
   ------------------------------------------------------------------------- */
.elementor-6487 .dc-fan-pile{
  height:auto!important;min-height:0!important;aspect-ratio:16/10!important;}
.elementor-6487 .dc-fan-pile > .dc-fan-img:first-child{
  position:absolute!important;inset:0!important;
  width:100%!important;height:100%!important;aspect-ratio:auto!important;}

/* --- EVENEMENTS : retour visuel au survol du bouton ---------------------
   Il n'en avait aucun : ni fond, ni changement de contour. On remplit en
   blanc et on passe le texte au bleu nuit — le bouton devient plein, ce qui
   se lit sans ambiguite sur un fond sombre.
   ------------------------------------------------------------------------- */
.elementor-6487 [data-id="8af07d5"] .elementor-button.elementor-button{
  transition:background-color .25s ease, color .25s ease, border-color .25s ease!important;}
.elementor-6487 .dc-nuit.dc-nuit.dc-nuit.dc-nuit .dc-link-boxed .elementor-button.elementor-button:hover,
.elementor-6487 .dc-nuit.dc-nuit.dc-nuit.dc-nuit .dc-link-boxed .elementor-button.elementor-button:focus-visible{
  background-color:#fff!important;border-color:#fff!important;}
.elementor-6487 .dc-nuit.dc-nuit.dc-nuit.dc-nuit .dc-link-boxed .elementor-button.elementor-button:hover .elementor-button-text,
.elementor-6487 .dc-nuit.dc-nuit.dc-nuit.dc-nuit .dc-link-boxed .elementor-button.elementor-button:focus-visible .elementor-button-text{
  color:#0F1B3D!important;}


/* --- HERO : la photo doit COUVRIR, pas seulement remplir la hauteur ------
   `background-size:auto 100%` ne garantit que la hauteur. Les photos du
   heros sont en portrait (683x1024, ratio 0,67) alors que le panneau est en
   0,75 : la photo est donc 39 px trop etroite et laisse voir le fond sur les
   cotes. C'est ca, le « lisere » — pas un cheveu de sous-pixel, pas le
   padding. `cover` garantit la couverture dans les DEUX sens.
   (Ma note disait « auto 100% equivaut a cover » : c'est faux des que la
   photo est proportionnellement plus etroite que la boite.)
   ------------------------------------------------------------------------- */
.elementor-6487 .dc-hero-panel{background-size:cover!important;}


/* --- ACTUALITES : le lien des cartes medias ne passait pas ---------------
   MESURE sur le nouveau fond : le lien est en #008AB7 (bleu logo) et donne
   **4,27:1** sur la base nuit, **2,67:1** sous le halo violet et **2,56:1**
   sous le halo bleu. Le minimum WCAG AA pour du texte de 16 px est 4,5:1 :
   il echoue partout, et de loin sous les halos. Sur un fond degrade le
   contraste est un INTERVALLE — c'est le pire cas qui compte.
   On passe au cyan pale deja employe sur l'agenda, qui tient largement.
   ------------------------------------------------------------------------- */
.elementor-6487 .dc-media-card a,
.elementor-2695 .dc-media-card a{color:#8CE8FF!important;}
.elementor-6487 .dc-media-card a svg,
.elementor-2695 .dc-media-card a svg{fill:#8CE8FF!important;}

/* --- HERO : la ligne blanche au-dessus des cartes -----------------------
   Diagnostiquee en isolant, pas en supposant. Ce que ce n'est PAS :
   - ni une bordure, ni un outline, ni une ombre : tous a zero ;
   - ni le `::before` (halo violet) : masque, la ligne reste ;
   - ni la rotation : transform neutralise, la ligne reste ;
   - ni l'arrondi ni `overflow:hidden` : mis a zero, la ligne reste ;
   - ni le contenu de la photo : avec un aplat `#111` a la place, la ligne
     est toujours la ;
   - et elle DISPARAIT si l'on masque le panneau — donc c'est bien lui.

   C'est une **couture de composition** : le panneau forme sa propre couche
   (transform + overflow), et Chrome laisse un cheveu clair sur le bord de
   cette couche, la ou elle se compose sur le degrade lumineux du heros.
   Aucun reglage de bordure ne l'enleve, parce qu'elle est peinte DEHORS.

   Remede verifie : un filet de 1 px pose a l'exterieur de la boite, dans le
   bleu nuit, qui recouvre la couture. Un `inset` ne marche pas — la couture
   est dehors, pas dedans.
   ------------------------------------------------------------------------- */
/* RETIRE apres verification : ce filet couvrait ce que j'avais pris pour une
   couture de composition. En realite le cheveu clair vu pendant mes tests
   etait DEJA le `border-top` blanc du `::before` — que mes tests d'isolation
   ne neutralisaient pas. Le vrai coupable etant parti, ce filet n'a plus
   d'objet. Verifie au zoom apres retrait. */

/* --- HERO : le filet blanc, la vraie cause (et Yassine l'avait devinee) --
   `.dc-hero-panel::before{border-top:1px solid rgba(255,255,255,.85)}`,
   pose en son temps SOUS le lisere de couleur pour l'aider a se detacher.
   Le lisere a ete supprime le 3 septembre ; le filet, lui, est reste et n'a
   plus rien a souligner. On le retire.
   Le `box-shadow` de 1 px ajoute juste avant reste utile : il couvre la
   couture de composition, qui est un AUTRE artefact, celui-la sur le bord
   exterieur.
   ------------------------------------------------------------------------- */
.elementor-6487 .dc-hero-panel::before{border-top:0!important;}


/* ############################################################################
   #  V5 — PAVE FORMATIONS : retour a la grille de cartes de la V2 (7/9/2026)
   #
   #  Reunion du 4/9 : « pour la section formations, on va prendre le style de
   #  la V2 » ; « meme mise en page pour travailleurs et chercheurs d'emploi,
   #  donc une image sur les deux » ; « reprendre l'animation au survol des
   #  actualites, l'actuelle fait kitsch ». Mail de Noemie du 7/9 : « animation
   #  plus legere », « supprimer le bouton toutes nos formations MAIS rajouter
   #  a la fin de chaque pave un slot avec un bouton + ».
   #
   #  Ce qui est fait : la section entiere est reprise de la V2 (grille native
   #  Elementor 4/2/1 colonnes, cartes .dc-card editables). L'eventail
   #  dc-fan-* part avec elle — c'est lui, et sa rotation de -5deg, que la
   #  cliente appelle « kitsch ». Le bouton d'en-tete est retire ; il pointait
   #  de toute facon vers /formations/, qui n'existe pas encore.
   #  Chaque onglet a maintenant 3 formations + 1 carte de renvoi = 4 cellules,
   #  ce qui remplit la grille de 4 colonnes des deux cotes. C'est ce qui
   #  repond a la fois a « il y avait un espace » et a « la meme chose pour
   #  travailleurs ».
   ############################################################################ */

/* L'ANIMATION DES ACTUALITES, telle quelle. Le socle donne deja
   `.dc-card-img{transition:transform .55s cubic-bezier(.22,.61,.36,1)}` (pose
   le 3 septembre pour les articles) : on ne redefinit donc que le survol, avec
   la meme echelle. Aucune valeur nouvelle, c'est le meme geste.
   `overflow:hidden` sur la carte : le visuel est un FOND CSS sur un element
   dimensionne en aspect-ratio ; l'agrandir fait deborder la boite, il faut que
   la carte la rogne. `focus-within` pour que le clavier ait le meme retour. */
/* [8 septembre 2026] LES CARTES NE SONT PAS ARRONDIES, LA GRILLE L'EST.
   Releve par Yassine en comparant a la V2 : la grille porte un rayon de 16 px
   avec `overflow:hidden`, donc seuls les QUATRE COINS EXTERIEURS sont arrondis
   et l'ensemble se lit comme un bloc unique decoupe par des filets. Arrondir
   chaque carte les detache les unes des autres et casse cette lecture.
   C'est la passe « arrondis generalises » du 1er septembre qui avait deborde
   ici — le meme raisonnement avait pourtant ete tenu pour les tuiles A propos,
   sans etre reporte sur cette grille.
   `overflow:hidden` reste indispensable sur la carte : c'est lui qui rogne
   l'agrandissement de la photo au survol. */
.dc-hairline-grid .dc-card{overflow:hidden;border-radius:0!important;}
.dc-hairline-grid .dc-card:hover .dc-card-img,
.dc-hairline-grid .dc-card:focus-within .dc-card-img{transform:scale(1.05)!important;}

/* --- LA CARTE DE RENVOI ---------------------------------------------------
   Meme silhouette que ses voisines : visuel en haut, corps en bas, lien cale
   en pied par .dc-card-bottom (regle du socle). Ce qui change est le visuel :
   un degrade de marque au lieu d'une photo, et le « + » demande. Le degrade
   est pose dans les REGLAGES du conteneur, pas ici, pour rester modifiable
   dans l'editeur. Teintes #7E3FF2 -> #00688A : c'est la variante AA du
   degrade de marque, celle qui accepte du blanc dessus.
   -------------------------------------------------------------------------- */
/* [8 septembre 2026] LE FOND DE LA CARTE DE RENVOI = LA MATIERE DU HEROS.
   Yassine a ressorti deux references de Noemie : des degrades organiques,
   satures, avec du grain. Ce sont exactement celles dont vient le heros de
   cette page — la premiere est `image009`, sur laquelle le heros V4 a ete
   construit le 1er septembre (« degrade organique en fond, grain conserve,
   mais aux couleurs Digitalcity »).
   Donc au lieu d'aller chercher une reference ailleurs, on decoupe un morceau
   du sol du heros dans la carte : meme construction — une nappe de degrades
   radiaux qui se recouvrent, dans les memes jetons (#E45BFA magenta, #8B5CF6
   violet, #2E55DA bleu roi, #008AB7 bleu logo), sur la meme base indigo, avec
   le meme grain. A l'echelle d'une carte, les taches sont plus larges et moins
   nombreuses : quatre au lieu de six, sinon ca tourne a la bouillie sur 330 px.
   Grain a 22 % : entre les 12 % des lavis clairs et les 34 % du fond de nuit.
   POURQUOI PAS DANS LES REGLAGES ELEMENTOR : le controle de degrade n'accepte
   que deux arrets. Une nappe ne s'y exprime pas. Le conteneur garde un degrade
   simple en repli, visible dans l'editeur ; le CSS le recouvre au rendu. */
.dc-suite-visuel{position:relative;
  background-image:
    radial-gradient(58% 64% at 16% 10%, #E45BFA 0%, rgba(228,91,250,0) 72%),
    radial-gradient(62% 58% at 92% 26%, #8B5CF6 0%, rgba(139,92,246,0) 74%),
    radial-gradient(74% 70% at 62% 98%, #008AB7 0%, rgba(0,138,183,0) 76%),
    radial-gradient(50% 48% at 2% 86%, #2E55DA 0%, rgba(46,85,218,0) 78%),
    linear-gradient(160deg,#1B1550 0%,#2B1A5E 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.22'/></svg>")!important;
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,repeat!important;
  background-size:auto,auto,auto,auto,auto,160px 160px!important;}
/* [8 septembre 2026] LE « + » N'EST PLUS UN BOUTON, C'EST UN MOTIF.
   Dans sa premiere version il etait pose dans un cercle borde : ca lui donnait
   l'apparence d'une COMMANDE, alors que la carte entiere est deja le lien. Deux
   affordances pour un seul geste, et un aspect de composant d'interface au
   milieu de trois cartes editoriales.
   Il devient un signe graphique : plus grand, sans cercle, en trait fin, cale
   en haut a gauche et debordant legerement de son cadre. Le cadre le rogne —
   c'est ce debordement qui le fait lire comme un motif et non comme une icone.
   Il reste le « bouton + » demande par Noemie, mais il ne se deguise plus en
   bouton. */
.dc-suite-visuel{overflow:hidden;}
.dc-suite-visuel::before{
  content:"+";
  font-family:var(--dc-display);font-size:150px;line-height:.72;font-weight:300;
  color:rgba(255,255,255,.78);
  position:absolute;left:-14px;top:-26px;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);}
.dc-card-suite:hover .dc-suite-visuel::before{transform:translate(6px,4px);}
/* Le socle pose un voile sombre en pied de `.dc-card-img`, fait pour detacher
   du texte pose sur une photo. Ici il n'y a pas de photo, et il salit le bas
   du degrade : on l'eteint pour cette carte seulement. */
.dc-suite-visuel::after{display:none!important;}
/* Le renvoi est dessine comme un bouton mais n'est PAS un widget bouton : la
   carte est deja un <a>, et un bouton a l'interieur emboiterait deux liens —
   HTML invalide et deux entrees concurrentes dans l'arbre d'accessibilite.
   Specificite 0,3,0 : au-dessus du 0,2,0 que le pied de page reemet sur
   `.elementor-widget-heading .elementor-heading-title`. */
.dc-suite-lien .elementor-heading-title.elementor-heading-title{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--dc-body);font-size:14px;font-weight:500;
  /* PAS --dc-bleu-logo : #008AB7 sur blanc mesure 3,95:1, sous le minimum AA de
     4,5 pour du texte de 14 px. #00688A donne 5,02:1 — et ce n'est pas une
     couleur inventee, c'est deja l'extremite bleue de --dc-grad-brand-aa, la
     variante conforme du degrade de marque. */
  color:#00688A;}
.dc-suite-lien .elementor-heading-title::after{
  content:"\2192";transition:transform .3s var(--dc-ease);}
.dc-card-suite:hover .dc-suite-lien .elementor-heading-title::after{
  transform:translateX(4px);}


/* ############################################################################
   #  V5 — EVENEMENTS : alignement, survol, surlignage (7/9/2026)
   #
   #  Reunion du 4/9 : « aligner le texte a gauche pour que ce soit aligne avec
   #  le titre de la section », « enlever l'effet de cadre blanc au survol »,
   #  « aligner les titres d'event a gauche aussi pour eviter l'effet
   #  entonnoir ». Mail de Noemie du 7/9 : « revoir l'alignement de la typo
   #  pour eviter des effets d'entonnoir. Sup l'image qui apparait a droite et
   #  peut au final obstruer le contenu. Peut etre sur la couleur de la typo en
   #  surlignage faire un effet un peu plus glossy ? comme le degrade de
   #  digitalcity.brussels ? »
   #
   #  L'ENTONNOIR, mesure : les trois mots roulants sont de largeurs tres
   #  differentes (PORTES OUVERTES, SEANCE D'INFO, ATELIER) et etaient CENTRES
   #  dans leur colonne de 542 px — d'ou la silhouette en sablier. La cause
   #  n'etait pas un text-align mais le `align-items:center` du conteneur
   #  colonne, qui retrecit chaque widget a la largeur de son texte puis le
   #  centre. Corrige dans les REGLAGES du conteneur (flex-start), pas ici :
   #  c'est le piege deja note « viser la colonne, pas la rangee ».
   #
   #  L'ALIGNEMENT AVEC LE TITRE : la rangee commence bien a 64 px, comme le
   #  titre de section, mais elle portait 28 px de padding gauche — la date
   #  tombait donc a 92. Padding gauche remis a 0 dans les reglages.
   #
   #  L'IMAGE REVELEE : les trois widgets Image sont SUPPRIMES du document, pas
   #  masques — c'est 3 fichiers de moins a charger. Les regles `.dc-roll-img`
   #  du bloc AGENDA plus haut sont conservees telles quelles : elles ne
   #  s'appliquent plus a rien, et elles constituent le chemin de retour si la
   #  cliente revient sur sa demande. L'etat d'avant reste visible sur la V4.
   ############################################################################ */

/* Le « cadre blanc » : ce n'etait ni une bordure ni une ombre, mais le fond de
   survol `rgba(255,255,255,.05)` pose sur la rangee, qui entre les deux filets
   horizontaux se lit comme un cadre clair. On l'eteint. Le retour au survol
   reste porte par le rouleau, qui est bien plus lisible.
   Specificite : la regle d'origine pese 0,6,0 (quatre .dc-nuit) ; on repasse
   devant avec la page, soit 0,7,0. */
.elementor-6487 .dc-nuit.dc-nuit.dc-nuit.dc-nuit .dc-agenda-row:hover,
.elementor-6487 .dc-nuit.dc-nuit.dc-nuit.dc-nuit .dc-agenda-row:focus-within{
  background:transparent!important;}

/* LE SURLIGNAGE « GLOSSY ».
   Le mot survole etait un aplat cyan #8CE8FF. On le remplace par le degrade de
   marque — mais RETOURNE pour un fond sombre : le degrade du site va du violet
   au bleu, deux teintes trop foncees pour etre lues sur du #0A0728. On garde
   donc la meme rotation de teintes (cyan -> violet) dans leurs versions
   claires, avec un palier presque blanc au tiers qui fait le reflet.
   Contraste sur le fond de nuit : le palier le plus sombre est #B9A7FF, qui
   reste tres au-dessus du minimum AA pour du texte de cette taille.
   A SAVOIR pour les audits : le texte est en background-clip, sa couleur CSS
   calculee vaut donc `transparent`. Toute sonde de contraste le signalera a
   tort — c'est le piege deja note, il se mesure au pixel. */
.elementor-6487 .dc-nuit.dc-nuit.dc-nuit.dc-nuit .dc-roll-b .elementor-heading-title{
  background-image:linear-gradient(100deg,
    #8CE8FF 0%, #EAFBFF 34%, #B9A7FF 66%, #8CE8FF 100%)!important;
  background-size:220% 100%;
  background-position:100% 50%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent!important;
  /* [8 septembre 2026] LE DERNIER GLYPHE ETAIT TRANCHE — signale par Yassine :
     « le titre est coupe a droite quand le texte se penche ».
     Ce n'etait PAS un rognage. En `background-clip:text`, seule la zone
     couverte par le FOND recoit de l'encre, et cette zone s'arrete a la boite
     de l'element — donc a la CHASSE du texte. L'italique fait deborder l'encre
     du glyphe au-dela de sa chasse : la partie penchee tombe hors de la zone
     peinte et reste transparente. Le S de « OUVERTES » etait coupe net.
     Un `padding-right` etend la boite de peinture (background-clip utilise la
     boite de padding) sans deplacer le texte. .12em couvre l'inclinaison a
     toutes les tailles, la police etant mise a l'echelle en clamp().
     A retenir : sur du texte en degrade, TOUJOURS reserver la sur-chasse de
     l'italique — le defaut ne se voit que sur la derniere lettre. */
  padding-right:.12em;}
/* Le reflet balaie le mot une fois, a l'arrivee du curseur. Une boucle serait
   du clignotement decoratif permanent ; un seul passage se lit comme un
   materiau qui accroche la lumiere. */
@keyframes dc-gloss{from{background-position:100% 50%;}to{background-position:0% 50%;}}
.elementor-6487 .dc-agenda-row:hover .dc-roll-b .elementor-heading-title,
.elementor-6487 .dc-agenda-row:focus-within .dc-roll-b .elementor-heading-title{
  animation:dc-gloss 1.1s cubic-bezier(.22,.61,.36,1) both;}
@media (prefers-reduced-motion:reduce){
  .elementor-6487 .dc-agenda-row:hover .dc-roll-b .elementor-heading-title,
  .elementor-6487 .dc-agenda-row:focus-within .dc-roll-b .elementor-heading-title{
    animation:none!important;background-position:0% 50%!important;}
}
/* maj 8/9/2026 */

/* ===========================================================================
   MOBILE — 8 septembre 2026, apres reouverture du perimetre par Hamza.
   Quatre defauts releves a 390 px, tous mesures sur la page en ligne.
   =========================================================================== */

/* 1. CARTE MEDIAS : titre et lien tronques, seule l'etiquette restait lisible.
   `.dc-media-half` porte `overflow:hidden` (pour l'arrondi), ce qui DESACTIVE
   la taille minimale automatique des elements flex. Avec `flex:1 1 0` la moitie
   ne reclame donc plus la hauteur de son contenu : les deux moities se
   partageaient 121 px, et « Le numerique en images » comme « Voir les videos »
   tombaient sous la coupe. En mobile la carte n'a aucune hauteur a egaliser
   avec le carrousel voisin : on laisse le contenu dicter. */
@media (max-width:767px){
  .dc-media-card{height:auto!important;}
  .dc-media-card .dc-media-half{flex:0 0 auto!important;min-height:0!important;}
}

@media (max-width:959px){
  /* 2. CARTE DE RENVOI : son lien avait disparu.
     La regle qui masque `.dc-card-bottom` sous 960 px a ete ecrite quand ce bas
     de carte ne contenait qu'une fleche decorative — l'arbitrage tenait alors.
     Depuis, la 4e carte y loge « Voir le catalogue », seule mention de sa
     destination. Sans survol sur telephone, la carte devenait un pave muet.
     Retabli pour cette carte SEULE : les trois voisines gardent l'economie. */
  .dc-profile-tabs .e-active .dc-card-suite .dc-card-bottom{
    display:block!important;}

  /* 3. Le « + » etait dimensionne pour un visuel large (150 px dans 280 px).
     En mobile la vignette tombe a 112 px : le signe debordait de partout et se
     lisait comme une tache. Ramene a l'echelle de la bande, et centre —
     l'ancrage en haut a gauche n'a plus de sens dans une bande verticale. */
  .dc-card-suite .dc-suite-visuel::before{
    font-size:56px;line-height:1;
    left:0;right:0;top:0;bottom:0;
    display:flex;align-items:center;justify-content:center;}
}

/* 4. Fleche de l'agenda centree au lieu d'etre calee a gauche.
   `align-self:center` datait de la rangee horizontale ; depuis que la rangee
   passe en colonne sous 767 px, « center » centre horizontalement. */
@media (max-width:767px){
  .dc-nuit .dc-agenda-row > .dc-arrow{align-self:flex-start!important;}
}

/* ===========================================================================
   HEROS MOBILE — 8 septembre 2026, ajustement unique
   Tout ce que j'avais tente (degrade plein cadre, photo en luminosite, titre
   remonte, pastilles) est retire. Les lignes verticales de couleur SONT dans la
   maquette de la charte web : les remplacer etait une erreur de ma part, fondee
   sur une remarque de Hamza qui ne les visait pas.

   Reste un seul ecart, mesure entre les deux pages :
     V1 (568) : linear-gradient(rgba(15,27,61,.80), rgba(15,27,61,.62))
     V5 (3574): linear-gradient(rgba(9,16,38,.94) 0%, .90 45%, .86 72%, .90)
   Le voile de la V5 est non seulement plus opaque (86-94 % contre 62-80 %) mais
   pose dans un bleu plus sombre. Luminance mesuree a mi-hauteur : 0,0091 contre
   0,0273 — la photo est trois fois plus sombre sur la V5. On ne voit plus les
   personnes, et c'est ce que Yassine a releve.
   On revient au voile de la V1, qui est la version que la cliente a vue.
   =========================================================================== */
@media (max-width:767px){
  .elementor-6487 .dc-hero-mobile.dc-hero-mobile.dc-hero-mobile::before{
    background-image:linear-gradient(rgba(15,27,61,.80) 0%, rgba(15,27,61,.62) 100%)!important;}
}

@media (max-width:767px){
  /* Le panneau de chaque rangee est un voile BLANC a 10 % : il eclaircit le
     fond au lieu de l'assombrir. Sur le voile sombre de la V5 ca passait
     inapercu ; sur la photo claire de la V1, le sous-titre tombe a 2,32:1.
     Un panneau de lisibilite pose sur une photo doit aller vers le sombre —
     c'est sa seule raison d'etre. Meme transparence, sens inverse. */
  .elementor-6487 .dc-hm-cible .elementor-heading-title{
    background:rgba(9,16,38,.48)!important;
    /* Valeur trouvee par balayage sur 414x896, l'ecran le plus defavorable :
       le voile blanc d'origine (.10) donne 2,79:1 sur la premiere rangee, et il
       faut descendre jusqu'a .66 pour passer... TANT QUE le sous-titre reste a
       95 % de blanc. En le portant au blanc PUR, .44 suffit deja (4,53:1).
       On prend .48 pour un peu de marge : le panneau reste bien plus discret
       qu'a .66, et c'est le sous-titre qui fait le travail. */}
}

@media (max-width:767px){
  /* Le sous-titre des rangees est a 80 % de blanc — une nuance de hierarchie qui
     coute cher sur une photo claire : c'est le seul texte qui echouait encore
     (3,61:1 sur un ecran de 414). Porte a 95 % : la hierarchie tient toujours
     face au libelle en gras, et la lisibilite passe. */
  .elementor-6487 .dc-hero-mobile .dc-hm-cible em{
    color:#FFFFFF!important;}
}

/* ===========================================================================
   CARREFOUR « EXPLORER » — mobile — 9 septembre 2026
   `.dc-eq-row` est un flex en ligne qui se replie. Sur 342 px de large, ses
   trois enfants tombent sur TROIS lignes : la photo seule (78x84, avec 264 px
   de vide a sa droite), puis le nom, puis le role. Le bureau, lui, pose la
   photo a gauche et le texte a droite.
   Meme remede que pour les filtres d'Actualites : un flex ne sait pas qu'un
   nom et son role forment un bloc a cote d'une photo, une grille le sait.
   =========================================================================== */
@media (max-width:767px){
  .elementor-6487 .dc-eq-row{
    display:grid!important;
    grid-template-columns:92px minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    column-gap:16px!important;row-gap:2px!important;
    align-items:center!important;}
  .elementor-6487 .dc-eq-row .dc-eq-photo{
    grid-column:1!important;grid-row:1 / span 2!important;
    width:92px!important;align-self:center!important;}
  .elementor-6487 .dc-eq-row .dc-eq-photo img{
    width:92px!important;height:92px!important;object-fit:cover!important;}
  .elementor-6487 .dc-eq-row .dc-eq-nom{
    grid-column:2!important;grid-row:1!important;
    align-self:end!important;width:auto!important;}
  .elementor-6487 .dc-eq-row .dc-eq-role{
    grid-column:2!important;grid-row:2!important;
    align-self:start!important;width:auto!important;}
}

/* ===========================================================================
   GRILLE DES PARTENAIRES — mobile — 9 septembre 2026
   Onze logos sur ONZE lignes a 375 px, six lignes a 390. La grille declare
   pourtant `grid-template-columns:repeat(2,1fr)` — mais elle est affichee en
   `flex`, donc cette declaration ne sert a rien, et chaque logo garde une
   largeur FIXE de 164 px. A 375 px il reste 327 px utiles : 164+14+164=342,
   il n'en tient plus qu'un. Douze pixels manquants font doubler la hauteur
   de la section, qui passe de 562 a 1042 px.
   On honore la declaration existante en passant en grille : les 164 px fixes
   deviennent deux colonnes egales, quelle que soit la largeur.
   =========================================================================== */
@media (max-width:767px){
  .elementor-6487 .dc-partners-grid{display:grid!important;}
  .elementor-6487 .dc-partners-grid > *{width:auto!important;max-width:none!important;}
}

/* ===========================================================================
   AGENDA EN MOBILE — 9 septembre 2026
   Remarque de Yassine : « tout le texte est blanc et proche en plus », et il
   propose de reprendre la STRUCTURE de la V1 en gardant le style de la V5.

   Constat, en comparant les deux pages a 375 px :
     V1  — rangee horizontale de 126 px : bloc date, PASTILLE DE CATEGORIE,
           titre fonce sur carte claire, horaires en gris. Quatre valeurs
           differentes, donc une hierarchie lisible.
     V5  — colonne de 191 px, tout en blanc sur la nuit. Plus grand, moins
           lisible.
   Et la cause est dans le balisage : `.dc-tag-event` (la categorie) et
   `.dc-tag-soft` (la modalite) EXISTENT mais sont masquees — remplacees par le
   grand mot anime `.dc-roll`. Sur le bureau ce mot est un beau geste ; en
   mobile il occupe une ligne entiere pour redire ce que la pastille dirait en
   trois centimetres.

   On rend donc a la rangee mobile ce que la V1 avait, avec les jetons de la V5.
   Le bureau n'est pas touche : tout est sous 767 px.
   =========================================================================== */
@media (max-width:767px){

  /* Le grand mot cede la place : il redit la categorie et coute une ligne. */
  .elementor-6487 .dc-agenda-row .dc-roll{display:none!important;}

  /* La rangee redevient une carte, comme en V1 — mais en verre sur la nuit
     plutot qu'en aplat clair. */
  /* [correctif] Pas de cadre : un simple filet dessous, comme sur le bureau.
     Le cadre isolait chaque evenement alors que l'agenda est une SUITE — le
     filet separe sans enfermer, et c'est deja le geste de la page. */
  .elementor-6487 .dc-agenda-row{
    background:transparent!important;
    border:0!important;border-radius:0!important;
    border-bottom:1px solid rgba(255,255,255,.15)!important;
    padding:20px 0 18px!important;
    gap:10px!important;}
  .elementor-6487 .dc-agenda-list > *:last-child .dc-agenda-row,
  .elementor-6487 .dc-agenda-row:last-child{border-bottom:0!important;}

  /* Le bloc date porte l'accent. C'est lui qui donne la couleur, comme le bloc
     sombre de la V1 donnait le contraste. */
  .elementor-6487 .dc-agenda-date{
    flex-direction:row!important;align-items:baseline!important;gap:7px!important;}
  /* Le socle repeint le jour en blanc via `.dc-nuit` QUADRUPLE (0,6,0) : il
     fallait passer au-dessus, sinon la couleur ne prenait pas. Troisieme fois
     que la reponse est « ajouter de la specificite contre le socle ». */
  .elementor-6487 .dc-nuit.dc-nuit.dc-nuit.dc-nuit .dc-agenda-day .elementor-heading-title,
  .elementor-6487 .dc-nuit.dc-nuit.dc-nuit.dc-nuit .dc-agenda-day > div{
    font-size:30px!important;font-weight:800!important;line-height:1!important;
    color:#FFFFFF!important;letter-spacing:-.02em!important;}  /* [9/9] remis en blanc a la demande de Yassine */
  .elementor-6487 .dc-agenda-month,
  .elementor-6487 .dc-agenda-month *{
    font-size:12px!important;font-weight:700!important;letter-spacing:.12em!important;
    text-transform:uppercase!important;color:rgba(255,255,255,.72)!important;}

  /* [correctif] La pastille de categorie est RETIREE : elle redisait le titre.
     « Journee portes ouvertes » + « Portes ouvertes », « Seance d'information :
     validation des competences » + « Seance d'info », « Atelier decouverte des
     metiers » + « Atelier » — les trois faisaient doublon. Reste la modalite,
     qui elle apporte une information que le titre ne porte pas.
     La couleur passe donc sur le BLOC DATE, ou elle ne repete rien. */
  .elementor-6487 .dc-agenda-row .dc-tag-event{display:none!important;}
  /* [correctif] La modalite portait DEUX contours : le sien, deja pose par le
     socle sur son enfant, et celui que j'avais ajoute par-dessus. On ne garde
     que celui d'origine et on se contente de le rendre visible. */
  .elementor-6487 .dc-agenda-row .dc-tag-soft{
    display:inline-block!important;background:transparent!important;
    border:0!important;padding:0!important;}
  .elementor-6487 .dc-agenda-row .dc-tag-soft > *{
    display:inline-block!important;
    font-size:11.5px!important;font-weight:600!important;line-height:1.3!important;
    color:rgba(255,255,255,.78)!important;}

  /* La meta se remet en ligne : pastille, modalite, puis horaires a la ligne. */
  .elementor-6487 .dc-agenda-meta{
    flex-direction:row!important;flex-wrap:wrap!important;
    align-items:center!important;gap:8px!important;margin-top:8px!important;}
  .elementor-6487 .dc-agenda-time,
  .elementor-6487 .dc-agenda-time *{
    flex-basis:100%!important;font-size:12.5px!important;
    color:rgba(255,255,255,.72)!important;margin-top:2px!important;}

  .elementor-6487 .dc-agenda-title,
  .elementor-6487 .dc-agenda-title *{
    font-size:17px!important;font-weight:700!important;line-height:1.3!important;
    color:#FFFFFF!important;}

  /* La fleche se cale en haut a droite plutot que sous le texte. */
  .elementor-6487 .dc-agenda-row > .dc-arrow{
    position:absolute!important;right:14px!important;top:14px!important;
    align-self:auto!important;}
  .elementor-6487 .dc-agenda-row{position:relative!important;}
  .elementor-6487 .dc-agenda-body{padding-right:34px!important;}
}

/* ===========================================================================
   CARTES D'ACTUALITÉS EN MOBILE — 9 septembre 2026
   Remarque de Yassine : « les cartes sont un peu trop longues ». Mesure a
   375 px : la carte fait 575 px de haut, dont 152 pour le TITRE (six lignes)
   et 135 pour l'extrait (cinq lignes). Le titre pese donc plus que l'extrait.

   Convention du responsive, appliquee partout dans la presse en ligne : sur une
   carte, le titre se limite a trois lignes et l'extrait a deux. Au-dela, la
   carte cesse d'etre une accroche et devient un article tronque — on ne la
   parcourt plus, on la lit. `-webkit-line-clamp` coupe proprement, avec les
   points de suspension, et le texte complet reste sur la page de l'article.
   =========================================================================== */
@media (max-width:767px){
  /* Quatre lignes plutot que trois, et 17 px plutot que 19 : a 19 px sur une
     carte de 260 px, trois lignes ne tenaient que 38 caracteres sur 88 — le
     titre se coupait apres trois mots. A 17 px sur quatre lignes il en tient
     l'essentiel, pour 13 px de hauteur en plus. La regle « trois lignes » vaut
     pour une carte large ; ici c'est la largeur qui commande. */
  .elementor-6487 .dc-blog-card .dc-card-title h3,
  .elementor-6487 .dc-blog-card .dc-card-title .elementor-heading-title{
    font-size:17px!important;line-height:1.28!important;}
  .elementor-6487 .dc-blog-card .dc-card-title,
  .elementor-6487 .dc-blog-card .dc-card-title *{
    display:-webkit-box!important;-webkit-line-clamp:4!important;
    -webkit-box-orient:vertical!important;overflow:hidden!important;}
  .elementor-6487 .dc-blog-card .dc-card-excerpt,
  .elementor-6487 .dc-blog-card .dc-card-excerpt p{
    display:-webkit-box!important;-webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;overflow:hidden!important;}
}

/* ===========================================================================
   PARTENAIRES : LE ONZIÈME LOGO — 9 septembre 2026
   Onze logos dans une grille a deux colonnes : le dernier reste seul, cale a
   gauche, et se lit comme un oubli. Le centrer sur toute la largeur le fait
   lire comme une fin de serie — c'est l'usage pour un reste de grille.
   =========================================================================== */
@media (max-width:767px){
  .elementor-6487 .dc-partners-grid > *:last-child:nth-child(odd){
    grid-column:1 / -1!important;
    justify-self:center!important;
    max-width:calc(50% - 7px)!important;}
}

/* ===========================================================================
   PAVÉ CONTACT : LES DEUX BOUTONS EMPILÉS — 9 septembre 2026
   Mesure a 375 px : « Nous contacter » fait 173 px et « Découvrir tous les
   services » 256 px, l'un sous l'autre dans un conteneur de 327. Deux largeurs
   differentes empilees se lisent comme un accident de mise en page.
   Convention : sur mobile, des actions empilees prennent la meme largeur — la
   hierarchie est alors portee par la couleur, pas par la taille.
   =========================================================================== */
@media (max-width:767px){
  .elementor-6487 .dc-cta-actions{
    flex-direction:column!important;align-items:stretch!important;gap:10px!important;}
  .elementor-6487 .dc-cta-actions > *{width:100%!important;}
  .elementor-6487 .dc-cta-actions .elementor-button{
    width:100%!important;justify-content:center!important;}
}

/* ===========================================================================
   TABLETTE — 768 à 1024 px — 9 septembre 2026
   Yassine : « quand on fait une page fais sa version tablette aussi ».
   Mesures a 768 px, la largeur la plus contrainte de la plage :

     Heros — panneau de 229 px : le titre tombe sur CINQ lignes (104 px) et la
     description sur SIX (96 px, en 16 px). Le meme panneau fait 315 px a
     1024 et respire. Ce n'est pas la mise en page qui casse, c'est la typo qui
     n'a pas ete recalee pour cette largeur : elle reste celle du bureau.

     Carte d'actualite — 272 px de large : titre sur cinq lignes (108 px),
     extrait sur cinq (135 px), carte de 538 px. Meme diagnostic qu'en mobile,
     a une largeur intermediaire.

   On ne touche ni au mobile (deja regle) ni au bureau (page validee) : tout
   est borne a la plage 768-1024.
   =========================================================================== */
@media (min-width:768px) and (max-width:1024px){

  /* --- LE HÉROS ---------------------------------------------------------- */
  .elementor-6487 .dc-hero-panel h2,
  .elementor-6487 .dc-hero-panel h2 *{
    font-size:18px!important;line-height:1.22!important;letter-spacing:-.01em!important;}
  .elementor-6487 .dc-hero-panel .dc-hero-panel-text,
  .elementor-6487 .dc-hero-panel .dc-hero-panel-text *{
    font-size:13.5px!important;line-height:1.4!important;}
  /* La pastille suit, sinon elle pese autant que le titre. */
  .elementor-6487 .dc-hero-panel .dc-tag .elementor-heading-title{
    font-size:12.5px!important;padding:6px 13px!important;}

  /* --- LES CARTES D'ACTUALITÉS ------------------------------------------- */
  .elementor-6487 .dc-blog-card .dc-card-title,
  .elementor-6487 .dc-blog-card .dc-card-title *{
    display:-webkit-box!important;-webkit-line-clamp:3!important;
    -webkit-box-orient:vertical!important;overflow:hidden!important;}
  .elementor-6487 .dc-blog-card .dc-card-title h3,
  .elementor-6487 .dc-blog-card .dc-card-title .elementor-heading-title{
    font-size:17.5px!important;line-height:1.28!important;}
  .elementor-6487 .dc-blog-card .dc-card-excerpt,
  .elementor-6487 .dc-blog-card .dc-card-excerpt p{
    display:-webkit-box!important;-webkit-line-clamp:3!important;
    -webkit-box-orient:vertical!important;overflow:hidden!important;}
}

/* ===========================================================================
   HERO MOBILE — LA NAPPE DE LA V5 PAR-DESSUS LA PHOTO — 9 septembre 2026
   Idee de Yassine, et elle repond exactement a la demande de Hamza : « pour le
   mobile c'est bon vu qu'elle a valide, on doit juste adapter par rapport a la
   nouvelle section heros ».

   Le probleme, mesure : un visiteur sur mobile voit une photo sous un voile
   bleu nuit uni ; un visiteur sur ordinateur voit la nappe radiale saturee de
   la V5. Deux premieres impressions differentes de la meme page.

   Ce qui NE change pas — et c'est la consigne de Yassine du 8 : la photo reste,
   le voile de la V1 reste (rgba(15,27,61,.80 -> .62), celui que la cliente a
   vu), le panneau de lisibilite et les barres de couleur restent. La base ne
   bouge pas.

   Ce qui s'ajoute : la famille radiale de l'accueil desktop, glissee SOUS le
   voile de lisibilite. Ordre des couches — la premiere est au-dessus :
     1. le voile V1, inchange, qui fait tout le travail de lisibilite ;
     2. les radiaux, en dessous, qui ne font que teinter la photo.
   Les memes jetons que `--dc-hero-nappe` du desktop (#E45BFA, #8B5CF6,
   #2E55DA, #008AB7), aux memes ancrages, a des opacites plus basses : sur
   ordinateur ils peignent un fond nu, ici ils passent sur une photo.
   =========================================================================== */
@media (max-width:767px){
  .elementor-6487 .dc-hero-mobile.dc-hero-mobile.dc-hero-mobile::before{
    background-image:
      /* .84/.68 au lieu de .80/.62. L'etiquette « Formation et emploi » est en
         cyan #22D3EE a 11 px : elle etait DEJA sous la norme avant cette nappe
         (4,39:1 releve le 3 septembre, corrige a l'epoque en assombrissant le
         voile — correction annulee le 8 quand on est revenu au voile de la V1
         pour rendre la photo a Yassine). Mes radiaux l'ont menee a 4,33.
         On ne touche pas au cyan : il porte un code de cible et doit rester
         identique partout. On rend au voile les quatre points qu'il avait. */
      linear-gradient(rgba(15,27,61,.84) 0%, rgba(15,27,61,.68) 100%),
      radial-gradient(58% 30% at 88% 8%,  rgba(228,91,250,.52) 0%, rgba(228,91,250,0) 72%),
      radial-gradient(64% 34% at 6% 16%,  rgba(0,138,183,.58)  0%, rgba(0,138,183,0)  76%),
      radial-gradient(56% 30% at 46% 6%,  rgba(139,92,246,.44) 0%, rgba(139,92,246,0) 74%),
      radial-gradient(60% 36% at 24% 92%, rgba(46,85,218,.46)  0%, rgba(46,85,218,0)  78%),
      radial-gradient(70% 42% at 92% 84%, rgba(139,92,246,.40) 0%, rgba(139,92,246,0) 76%)
      !important;}
}



/* ===========================================================================
   LE BOUTON « EXPLOREZ NOS FORMATIONS » DU HEROS MOBILE — 10 septembre 2026
   Retour d'Hamza (vocal du 10/9, 13h31) : « il y a un bouton qu'il faut
   absolument enlever dans la hero section [...] c'est "Explorez nos
   formations" [...] il faut juste enlever ce bouton-la pour le moment, et
   apres on verra ce qu'elle pense de la hero section ».
   Il n'existe QUE dans le heros mobile (`.dc-hm-cta`, 358 x 56 px) — le heros
   bureau n'en a pas. C'est un retrait TEMPORAIRE et explicitement presente
   comme tel : on masque plutot que de supprimer le widget, pour qu'il revienne
   en une ligne si la hero mobile est revue avec la cliente.
   =========================================================================== */
.elementor-6487 .dc-hero-mobile .dc-hm-cta{display:none!important;}


/* ===========================================================================
   LA TUILE DU CATALOGUE — LE VISUEL « GET IN THE GAME » (8e passe)
   Yassine : « on peut reprendre exactement le visuel de Get in the Game non ? »
   Oui — c'est un vrai fichier (`actu-3.jpg`), la couverture du rapport de
   veille 2022. Plus d'approximation : c'est l'image elle-meme.
   DEUX CHOSES A SAVOIR :
   1. Elle apparait donc DEUX FOIS sur le site — ici, et comme couverture du
      rapport 2022 sur A propos. La redondance est temporaire : ces quatre
      couvertures sont des images d'attente, et les vraies sont dans la liste
      a demander a Noemie. Quand elles arriveront, l'image ne restera que sur
      cette tuile.
   2. On perd ce que le degrade CSS avait de mieux : il s'adaptait a n'importe
      quelle taille sans rognage et ne pesait rien. Un JPEG se rogne. Le voile
      du bas reste donc indispensable — la ou le degrade etait sombre par
      construction, l'image ne l'est pas partout.
   =========================================================================== */
/* [10/9] LE ZOOM AU SURVOL. Verifie avant de trancher : les trois cartes de
   formation voisines zooment deja leur visuel de 1,05 au survol, et la carte
   elle-meme ne bouge pas. La tuile catalogue etait la seule des quatre a ne
   rien faire — ce n'est donc pas un effet a inventer, c'est un manque a
   combler.
   OU LE POSER : pas sur la carte, son `transform` deplacerait aussi le texte.
   L'image passe donc sur `.dc-suite-visuel`, etendu a toute la tuile en
   absolu, et c'est LUI qui grandit. Le voile va sur son `::after` pour rester
   au-dessus de l'image mais dessous le texte.
   A ne pas confondre avec le zoom retire des cartes d'articles le 10/9 : la-bas
   il se battait avec le `transform` de placement d'Elementor et l'image
   sautait. Ici l'element n'a aucun autre transform. */
/* L'IMAGE ET SON ZOOM VIVENT SUR UN PSEUDO-ELEMENT DE LA CARTE.
   Tentative precedente : etendre `.dc-suite-visuel` a toute la tuile. Echec —
   Elementor lui impose sa hauteur (184 px) par une regle de meme specificite,
   et l'image ne couvrait que le haut. Le `::before` de la carte, lui,
   n'appartient a aucune mise en page : il se pose en absolu sur toute la
   surface et rien ne le contraint.
   Couverture retenue par Yassine : celle de 2022, « Get in the Game ». Plus
   uniformement moyenne que celle de 2025, d'ou un voile plus soutenu.
   NB : ne JAMAIS mettre de commentaire a l'interieur d'une declaration — un
   `background-image: /* … * / url(...)` fait perdre la valeur entiere. */
.elementor-6487 .dc-card.dc-card-suite{
  background-color:#170B3B!important;
  overflow:hidden!important;position:relative!important;
  isolation:isolate!important;}
.elementor-6487 .dc-card.dc-card-suite::before{
  content:""!important;position:absolute!important;
  top:0!important;right:0!important;bottom:0!important;left:0!important;
  z-index:0!important;pointer-events:none!important;
  /* [20/10] photo = fond natif de la carte (Elementor > Style > Arriere-plan), reprise ici par inherit */
  background-image:inherit!important;
  background-size:cover!important;background-position:50% 50%!important;background-repeat:no-repeat!important;
  transition:transform .55s cubic-bezier(.22,.61,.36,1)!important;}
.elementor-6487 .dc-card.dc-card-suite:hover::before,
.elementor-6487 .dc-card.dc-card-suite:focus-within::before{
  transform:scale(1.05)!important;}
/* Le voile, au-dessus de l'image et sous le texte. */
.elementor-6487 .dc-card.dc-card-suite::after{
  content:""!important;position:absolute!important;
  top:0!important;right:0!important;bottom:0!important;left:0!important;
  z-index:1!important;pointer-events:none!important;
  background-image:linear-gradient(0deg, rgba(9,7,30,.92) 0%, rgba(9,7,30,.60) 34%, rgba(9,7,30,.18) 62%, rgba(9,7,30,0) 100%)!important;}
/* Le visuel d'origine ne sert plus a rien : il ne portait que le « + ». */
.elementor-6487 .dc-card-suite .dc-suite-visuel{
  background-image:none!important;background-color:transparent!important;}
.elementor-6487 .dc-card-suite .dc-suite-visuel::before,
.elementor-6487 .dc-card-suite .dc-suite-visuel::after{content:none!important;display:none!important;}

/* [correction] Le contenu etait a z-index 1, comme le voile — et un `::after`
   peint APRES ses freres a z-index egal. Le voile passait donc par-dessus le
   texte et le grisait. Le contenu monte a 2. */
.elementor-6487 .dc-card-suite > *:not(.dc-suite-visuel){position:relative!important;z-index:2!important;}
.elementor-6487 .dc-card-suite .dc-tag{display:none!important;}
/* Le texte passe en blanc sur le fond sombre. */
.elementor-6487 .dc-card-suite .dc-card-title,
.elementor-6487 .dc-card-suite .dc-card-title *,
.elementor-6487 .dc-card-suite .dc-suite-lien,
.elementor-6487 .dc-card-suite .dc-suite-lien *{color:#FFFFFF!important;}
.elementor-6487 .dc-card-suite .dc-card-meta,
.elementor-6487 .dc-card-suite .dc-card-meta *{color:rgba(255,255,255,.82)!important;}

/* ===========================================================================
   LES PETITS TELEPHONES (<= 360 px) — 11 septembre 2026
   A 320 px la page se dezoomait a 326 : deux mots ne tenaient pas, et sur un
   telephone un depassement n'est pas rogne, il ELARGIT la fenetre de mise en
   page — tout le reste retrecit avec.
   Les deux coupables, mesures :
     - la signature « Vous etes sur Digitalcity.brussels… » : a 29 px, le mot
       `Digitalcity.brussels` demande 292 px pour 272 disponibles. Insecable
       par nature, on ne peut pas le couper — c'est le corps qui doit ceder.
     - « Nos infrastructures » dans la liste A propos : 194 px pour 164. Le
       titre est un conteneur flex (pastille + texte) : son texte se reduit au
       mot le plus long, `infrastructures`, qui a 22 px vaut deja 160 px.
   Reduction de corps sous 360 px seulement. A 375 et au-dessus, rien ne bouge.
   =========================================================================== */
@media (max-width:360px){
  .elementor-6487 .dc-signature .elementor-heading-title.elementor-heading-title{
    font-size:26px!important;}
  .elementor-6487 .dc-eq-nom .elementor-heading-title.elementor-heading-title{
    font-size:19px!important;}
}

/* ===========================================================================
   LA 4e CARTE GARDAIT LA COLONNE D'UN VISUEL QUI N'EXISTE PLUS — 11/9/2026
   Yassine : « la 4e carte reste comme ca avec le texte a droite ou il devrait
   prendre toute la largeur ? »
   Ce n'est pas un arbitrage, c'est un reste. Le 10 septembre, la tuile de
   renvoi a cesse d'avoir l'anatomie de ses voisines : l'image est passee sur le
   `::before` de la CARTE, sur toute sa surface, et `.dc-suite-visuel` a ete
   vide — la note de ce jour-la le dit mot pour mot, « le visuel d'origine ne
   sert plus a rien : il ne portait que le + ».
   Sur bureau la consequence a ete tiree : la tuile est un panneau plein, texte
   sur toute la largeur. En mobile non — la carte restait en grille
   `112px 1fr`, et la premiere colonne, desormais VIDE, reservait 112 px de
   degrade nu a gauche du texte. Le lecteur n'y voit pas un rythme, il y voit
   une image qui n'a pas charge.
   Et c'est le contraire de ce que la tuile doit dire : la decision du 10/9
   etait « on voit une porte et non une fiche ». Emprunter la colonne d'image
   des trois fiches voisines, c'est se ranger parmi elles.
   Une seule colonne, donc, comme sur bureau. La marge interne passe de
   14/16 a 18 : le texte n'est plus cale sur une gouttiere, il faut la sienne.
   =========================================================================== */
@media (max-width:959px){
  .dc-profile-tabs .e-active .dc-card.dc-card-suite{
    grid-template-columns:1fr!important;}
  .elementor-6487 .dc-card-suite .dc-suite-visuel{display:none!important;}
  .dc-profile-tabs .e-active .dc-card-suite .dc-card-body{
    padding:18px!important;}
}

/* ===========================================================================
   LA TUILE DE RENVOI, SUR BUREAU — 11 septembre 2026
   Yassine : « le texte est que sur le bas de la carte, c'est le meilleur choix
   ou il devrait commencer plus haut et etre plus grand ? »
   Mesures sur la tuile (422 px de haut) : titre y208->230, description
   y238->280, puis **70 px de VIDE**, et le lien a y358. Le texte occupe le bas
   et il est troue au milieu.

   1. IL NE DOIT PAS COMMENCER PLUS HAUT — et ce n'est pas un parti pris, c'est
      le voile. Il est pose en `linear-gradient(0deg, …)` : 0,92 en BAS, 0,18 a
      62 %, 0 en HAUT. Le texte est en bas parce que c'est la qu'il est lisible
      (mesure du 10/9 : titre 13,4:1). Le titre est deja a ~51 % de la hauteur,
      ou le voile ne vaut plus que 0,33. Le monter, c'est poser du blanc sur les
      trainees claires de la couverture. La position basse n'est pas un reste,
      c'est le seul endroit tenable.

   2. LES 70 PX DE VIDE, EUX, SONT UN RESTE. Le lien porte `margin-top:auto`,
      herite du gabarit des trois fiches voisines : chez elles, cette place est
      occupee par la meta et les dates. La tuile n'a que trois elements, donc
      l'espace tombe au milieu du texte au lieu d'etre repris. Le groupe se
      referme et s'ancre en bas, la ou le voile est le plus fort.

   3. LE TITRE, OUI, DOIT ETRE PLUS GRAND. A 17 px c'est la taille d'une fiche.
      La tuile n'est pas la quatrieme fiche, c'est la destination — la decision
      du 10/9 est « on voit une porte et non une fiche ». 22 px le dit, et ne
      coute rien en contraste puisque le texte reste dans la zone la plus
      couverte.
   Mobile inchange : la tuile y fait 140 px, le texte la remplit deja.
   =========================================================================== */
@media (min-width:960px){
  .elementor-6487 .dc-card-suite .dc-card-body{
    justify-content:flex-end!important;}
  .elementor-6487 .dc-card-suite .dc-suite-lien.dc-card-bottom{
    margin-top:18px!important;}
  .elementor-6487 .dc-card-suite .dc-card-title .elementor-heading-title.elementor-heading-title{
    font-size:22px!important;line-height:1.22!important;}
}

/* ===========================================================================
   TABLETTE (768-1024) — 12 septembre 2026
   Audit a 768, 820 et 1024 : aucun debordement horizontal sur les quatre
   pages. Deux ecarts seulement, tous deux du meme genre — des reglages faits
   pour le telephone qui s'arretent a 767 alors que la contrainte, elle,
   continue jusqu'a 1024.

   1. LA RANGEE « A propos ». Sous 1025 px la vignette revient dans le flux et
      la rangee passe en `flex` avec `.dc-eq-nom` et `.dc-eq-role` tous deux en
      `flex:1 1 auto` : a 768 ils se partagent l'espace, le titre finit a 423 et
      l'etiquette commence a 439 — elle flotte a 300 px de son titre, comme
      detachee. La grille en deux lignes ecrite pour le telephone (etiquette
      SOUS le titre) est la bonne reponse a toute la bande : on l'y etend.

   2. LES CARTES DU CARROUSEL D'ACTUALITES. A 768 elles font 265 px de large,
      pas 360 : le titre bride a 3 lignes se coupait en plein syntagme —
      « L'intelligence artificielle generative revolutionne les metiers du… » —
      et l'extrait perdait la moitie de sa phrase. Mesure : titre 90 px de
      contenu pour 67 disponibles, extrait 135 pour 68. Meme correctif que
      celui pose le 10 septembre sur la grille a 768, applique cette fois au
      carrousel : une ligne de plus au titre, une a l'extrait.
      **La regle : un bridage en nombre de LIGNES depend de la LARGEUR de la
      colonne. Chaque fois qu'une colonne retrecit, le bridage doit etre
      rejoue.**

   Le heros est laisse tel quel : a 768 les trois panneaux tombent a 229 px et
   le titre y prend quatre lignes a 20 px — c'est dense, mais lisible, et
   passer a deux colonnes casserait la symetrie des trois cibles, qui est le
   message meme du heros.
   =========================================================================== */
@media (min-width:768px) and (max-width:1024px){
  .elementor-6487 .dc-eq-row{
    display:grid!important;
    grid-template-columns:92px minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    column-gap:16px!important;row-gap:2px!important;
    align-items:center!important;}
  .elementor-6487 .dc-eq-row .dc-eq-photo{
    grid-column:1!important;grid-row:1 / span 2!important;
    width:92px!important;align-self:center!important;flex:0 0 auto!important;}
  .elementor-6487 .dc-eq-row .dc-eq-photo img{
    width:92px!important;height:92px!important;object-fit:cover!important;}
  .elementor-6487 .dc-eq-row .dc-eq-nom{
    grid-column:2!important;grid-row:1!important;align-self:end!important;width:auto!important;}
  .elementor-6487 .dc-eq-row .dc-eq-role{
    grid-column:2!important;grid-row:2!important;align-self:start!important;width:auto!important;}
  .elementor-6487 .dc-eq-role .elementor-heading-title{margin-left:0!important;}

  .elementor-6487 .dc-blog-card .dc-card-title,
  .elementor-6487 .dc-blog-card .dc-card-title *{
    display:-webkit-box!important;-webkit-line-clamp:4!important;
    -webkit-box-orient:vertical!important;overflow:hidden!important;}
  .elementor-6487 .dc-blog-card .dc-card-excerpt,
  .elementor-6487 .dc-blog-card .dc-card-excerpt p{
    display:-webkit-box!important;-webkit-line-clamp:4!important;
    -webkit-box-orient:vertical!important;overflow:hidden!important;}
}

/* [28/09] Tablette : la rangee Actualites passe en colonne des 1024 px (socle), mais la carte
   Videos / Podcasts gardait sa hauteur de bureau — ecrasee a 121 px, contenu rogne.
   Memes regles qu'au telephone. */
@media (min-width:768px) and (max-width:1024px){
  .dc-media-card{height:auto!important;}
  .dc-media-card .dc-media-half{flex:0 0 auto!important;min-height:0!important;}
}

/* [28/09 b] Tablette : meme ordre qu'au telephone (socle 609) — carrousel, pastilles, puis carte
   Videos / Podcasts. Sans cela les pastilles tombaient SOUS la carte media, loin du carrousel. */
@media (min-width:768px) and (max-width:1024px){
  .dc-carousel-shell,.dc-actu-row{display:contents!important;}
  .dc-carousel-arrow{display:none!important;}
  .dc-carousel-viewport{order:1;scroll-snap-type:x mandatory;scrollbar-width:thin;padding-bottom:10px;}
  .dc-carousel-viewport > *{scroll-snap-align:start;}
  .dc-carousel-viewport::-webkit-scrollbar{display:block;height:4px;}
  .dc-carousel-viewport::-webkit-scrollbar-track{background:var(--dc-gray-100);border-radius:2px;}
  .dc-carousel-viewport::-webkit-scrollbar-thumb{background:var(--dc-gray-300);border-radius:2px;}
  .dc-carousel-dots{order:2;margin-top:8px!important;}
  .dc-media-card{order:3;margin-top:40px!important;}
}

/* [29/09] A propos en TABLETTE : la liste du telephone n'occupait que 40 % de la largeur
   (grand vide a droite). Deux colonnes, memes vignettes et memes textes. */
@media (min-width:768px) and (max-width:1024px){
  .dc-section-apropos .dc-eq .dc-eq-liste{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    column-gap:32px!important;row-gap:22px!important;}
}

/* [29/09] Formations en tablette portrait : toutes les cartes a la meme hauteur (celle de la plus haute) */
@media (min-width:768px) and (max-width:959px){
  .dc-profile-tabs .dc-hairline-grid.e-active{grid-template-rows:none!important;grid-auto-rows:1fr!important;}
}


/* ===== RETOURS 14/10 : micro-navigation par points sous les formations ===== */
.dc-profile-tabs .dc-hairline-grid > .dc-card.dc-page-hide{display:none!important;}
.dc-fc-dots{display:flex;justify-content:center;gap:8px;margin-top:26px;}
.dc-fc-dots button{width:8px;height:8px;min-width:0;padding:0;border:0;border-radius:4px;background:var(--dc-gray-300);cursor:pointer;transition:width .3s var(--dc-ease),background .3s var(--dc-ease);}
.dc-fc-dots button[aria-current="true"]{width:28px;background:var(--dc-text);}
.dc-fc-dots button:focus-visible{outline:2px solid var(--dc-bleu-logo);outline-offset:3px;}

/* 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 */