.elementor-6515 .elementor-element.elementor-element-d3ddf64{--display:flex;--position:fixed;--min-height:80px;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--gap:0px 24px;--row-gap:0px;--column-gap:24px;--padding-top:0px;--padding-bottom:0px;--padding-left:64px;--padding-right:64px;top:0px;--z-index:1000;}body:not(.rtl) .elementor-6515 .elementor-element.elementor-element-d3ddf64{left:0px;}body.rtl .elementor-6515 .elementor-element.elementor-element-d3ddf64{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-6515 .elementor-element.elementor-element-0128261 img{height:36px;border-radius:0px 0px 0px 0px;}.elementor-6515 .elementor-element.elementor-element-f9f0cbb{--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:flex-end;--align-items:center;--gap:0px 4px;--row-gap:0px;--column-gap:4px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-mega-menu > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title, .elementor-widget-mega-menu > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title > .e-n-menu-title-container, .elementor-widget-mega-menu > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title > .e-n-menu-title-container > span{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-mega-menu{--n-menu-divider-color:var( --e-global-color-text );}.elementor-6515 .elementor-element.elementor-element-fcc6073{--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 40px;--row-gap:24px;--column-gap:40px;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:24px;--padding-bottom:24px;--padding-left:64px;--padding-right:64px;}.elementor-6515 .elementor-element.elementor-element-fcc6073:not(.elementor-motion-effects-element-type-background), .elementor-6515 .elementor-element.elementor-element-fcc6073 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F9FAFB;}.elementor-6515 .elementor-element.elementor-element-1a982d0{--display:grid;--e-con-grid-template-columns:1fr 1fr 1fr 1.4fr;--e-con-grid-template-rows:repeat(1, 1fr);--gap:28px 40px;--row-gap:28px;--column-gap:40px;--grid-auto-flow:row;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6515 .elementor-element.elementor-element-b565b44{--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:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-item:not(:last-child):after{border-color:var( --e-global-color-text );}.elementor-widget-icon-list .elementor-icon-list-icon i{color:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-icon svg{fill:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-item > .elementor-icon-list-text, .elementor-widget-icon-list .elementor-icon-list-item > a{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-icon-list .elementor-icon-list-text{color:var( --e-global-color-secondary );}.elementor-6515 .elementor-element.elementor-element-a3b39d5 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-6515 .elementor-element.elementor-element-a3b39d5 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-6515 .elementor-element.elementor-element-a3b39d5{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-6515 .elementor-element.elementor-element-a3b39d5 .elementor-icon-list-text{transition:color 0.3s;}.elementor-6515 .elementor-element.elementor-element-16748e3{--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:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6515 .elementor-element.elementor-element-b5a1841 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-6515 .elementor-element.elementor-element-b5a1841 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-6515 .elementor-element.elementor-element-b5a1841{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-6515 .elementor-element.elementor-element-b5a1841 .elementor-icon-list-text{transition:color 0.3s;}.elementor-6515 .elementor-element.elementor-element-88f46b8{--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:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6515 .elementor-element.elementor-element-193ba05 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-6515 .elementor-element.elementor-element-193ba05 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-6515 .elementor-element.elementor-element-193ba05{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-6515 .elementor-element.elementor-element-193ba05 .elementor-icon-list-text{transition:color 0.3s;}.elementor-6515 .elementor-element.elementor-element-81848a0{--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;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:14px 14px 14px 14px;--padding-top:18px;--padding-bottom:18px;--padding-left:18px;--padding-right:18px;}.elementor-6515 .elementor-element.elementor-element-81848a0:not(.elementor-motion-effects-element-type-background), .elementor-6515 .elementor-element.elementor-element-81848a0 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F9FAFB;}.elementor-6515 .elementor-element.elementor-element-11f826a{--display:flex;--overflow:hidden;--border-radius:8px 8px 8px 8px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6515 .elementor-element.elementor-element-11f826a:not(.elementor-motion-effects-element-type-background), .elementor-6515 .elementor-element.elementor-element-11f826a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://digitalcity.comaseinfo-support.be/wp-content/uploads/2026/04/photo-hero2.jpeg");background-position:center center;background-size:cover;}.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-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-6515 .elementor-element.elementor-element-195d371{--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 40px;--row-gap:24px;--column-gap:40px;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:24px;--padding-bottom:24px;--padding-left:64px;--padding-right:64px;}.elementor-6515 .elementor-element.elementor-element-195d371:not(.elementor-motion-effects-element-type-background), .elementor-6515 .elementor-element.elementor-element-195d371 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F9FAFB;}.elementor-6515 .elementor-element.elementor-element-9859f14{--display:grid;--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--gap:28px 40px;--row-gap:28px;--column-gap:40px;--grid-auto-flow:row;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6515 .elementor-element.elementor-element-dbb8fd4{--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:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6515 .elementor-element.elementor-element-e093be8 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-6515 .elementor-element.elementor-element-e093be8 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-6515 .elementor-element.elementor-element-e093be8{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-6515 .elementor-element.elementor-element-e093be8 .elementor-icon-list-text{transition:color 0.3s;}.elementor-6515 .elementor-element.elementor-element-a3cc718{--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 40px;--row-gap:24px;--column-gap:40px;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:24px;--padding-bottom:24px;--padding-left:64px;--padding-right:64px;}.elementor-6515 .elementor-element.elementor-element-a3cc718:not(.elementor-motion-effects-element-type-background), .elementor-6515 .elementor-element.elementor-element-a3cc718 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F9FAFB;}.elementor-6515 .elementor-element.elementor-element-b9efd56{--display:grid;--e-con-grid-template-columns:1fr 1.6fr;--e-con-grid-template-rows:repeat(1, 1fr);--gap:28px 40px;--row-gap:28px;--column-gap:40px;--grid-auto-flow:row;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6515 .elementor-element.elementor-element-314bbd0{--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:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6515 .elementor-element.elementor-element-74c03c8 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-6515 .elementor-element.elementor-element-74c03c8 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-6515 .elementor-element.elementor-element-74c03c8{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-6515 .elementor-element.elementor-element-74c03c8 .elementor-icon-list-text{transition:color 0.3s;}.elementor-6515 .elementor-element.elementor-element-133e4f8{--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-6515 .elementor-element.elementor-element-444590c{--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:14px 14px;--row-gap:14px;--column-gap:14px;border-style:solid;--border-style:solid;border-width:0px 0px 1px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:1px;--border-left-width:0px;border-color:#E2E5ED;--border-color:#E2E5ED;--padding-top:0px;--padding-bottom:12px;--padding-left:0px;--padding-right:0px;}.elementor-6515 .elementor-element.elementor-element-fb4596d{--display:flex;--border-radius:8px 8px 8px 8px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6515 .elementor-element.elementor-element-fb4596d:not(.elementor-motion-effects-element-type-background), .elementor-6515 .elementor-element.elementor-element-fb4596d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://digitalcity.comaseinfo-support.be/wp-content/uploads/2026/08/pexels-photo-5393503-scaled.jpeg");background-position:center center;background-size:cover;}.elementor-6515 .elementor-element.elementor-element-9b5c194{--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:4px 4px;--row-gap:4px;--column-gap:4px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6515 .elementor-element.elementor-element-fdd143f{--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:14px 14px;--row-gap:14px;--column-gap:14px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6515 .elementor-element.elementor-element-c28cb95{--display:flex;--border-radius:8px 8px 8px 8px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6515 .elementor-element.elementor-element-c28cb95:not(.elementor-motion-effects-element-type-background), .elementor-6515 .elementor-element.elementor-element-c28cb95 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://digitalcity.comaseinfo-support.be/wp-content/uploads/2026/08/iStock-1212754341.jpg");background-position:center center;background-size:cover;}.elementor-6515 .elementor-element.elementor-element-d66702e{--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:4px 4px;--row-gap:4px;--column-gap:4px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6515 .elementor-element.elementor-element-f0f9a4b{--n-menu-dropdown-content-max-width:initial;--n-menu-heading-wrap:wrap;--n-menu-heading-overflow-x:initial;--n-menu-title-distance-from-content:0px;--n-menu-toggle-icon-wrapper-animation-duration:500ms;--n-menu-title-space-between:0px;--n-menu-title-transition:300ms;--n-menu-icon-size:16px;--n-menu-toggle-icon-size:20px;--n-menu-toggle-icon-hover-duration:500ms;--n-menu-toggle-icon-distance-from-dropdown:0px;}.elementor-6515 .elementor-element.elementor-element-0384a45{--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:flex-end;--align-items:center;--gap:0px 14px;--row-gap:0px;--column-gap:14px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6515 .elementor-element.elementor-element-c253c7e .elementor-button-content-wrapper{flex-direction:row;}.elementor-6515 .elementor-element.elementor-element-c253c7e .elementor-button{border-radius:8px 8px 8px 8px;}.elementor-6515 .elementor-element.elementor-element-2d36c0f .elementor-button{font-family:"Roboto", Sans-serif;font-size:14px;font-weight:600;border-radius:8px 8px 8px 8px;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(min-width:768px){.elementor-6515 .elementor-element.elementor-element-d3ddf64{--content-width:1320px;}.elementor-6515 .elementor-element.elementor-element-fcc6073{--content-width:1320px;}.elementor-6515 .elementor-element.elementor-element-195d371{--content-width:1320px;}.elementor-6515 .elementor-element.elementor-element-a3cc718{--content-width:1320px;}}@media(max-width:1024px){.elementor-6515 .elementor-element.elementor-element-d3ddf64{--padding-top:0px;--padding-bottom:0px;--padding-left:32px;--padding-right:32px;}.elementor-6515 .elementor-element.elementor-element-1a982d0{--e-con-grid-template-columns:repeat(2, 1fr);--grid-auto-flow:row;}.elementor-6515 .elementor-element.elementor-element-9859f14{--e-con-grid-template-columns:repeat(2, 1fr);--grid-auto-flow:row;}.elementor-6515 .elementor-element.elementor-element-b9efd56{--e-con-grid-template-columns:repeat(2, 1fr);--grid-auto-flow:row;}}@media(max-width:767px){.elementor-6515 .elementor-element.elementor-element-d3ddf64{--padding-top:0px;--padding-bottom:0px;--padding-left:20px;--padding-right:20px;}.elementor-6515 .elementor-element.elementor-element-1a982d0{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-6515 .elementor-element.elementor-element-9859f14{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-6515 .elementor-element.elementor-element-b9efd56{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}}/* Start custom CSS for mega-menu, class: .elementor-element-f0f9a4b *//* 29-08 : en tablette le panneau du mega menu est dimensionne sur la largeur de l'ecran (content_width: full_width) alors qu'il vit dans un conteneur qui porte 24px de marge interne. Il depassait donc de 25px a droite et se faisait rogner par l'overflow:hidden du parent — colonne de droite tronquee sur toute la plage 768-1024. */ @media (max-width:1099px){ .elementor-6515 .elementor-element.elementor-element-f0f9a4b .e-n-menu-content{width:100%!important;max-width:100%!important;} } /* 19/10 : « À propos » et « Actualités » menent a leur page au clic (bureau). Sur tablette et mobile, toucher la ligne ouvre toujours le sous-menu, comme avant : la fleche couvre toute la ligne. */ @media (max-width:1024px){ .elementor-6515 .elementor-element.elementor-element-f0f9a4b .e-n-menu-title{position:relative;} .elementor-6515 .elementor-element.elementor-element-f0f9a4b .e-n-menu-title .e-n-menu-dropdown-icon{position:absolute!important;top:0;left:0;width:100%!important;height:100%!important;justify-content:flex-end;z-index:3;background:transparent!important;} }/* End custom CSS */ /* Start custom CSS *//* Hauteur de l'en-tete, en un seul endroit : la barre, le decalage du panneau burger, le fil d'Ariane des pages interieures et les onglets collants s'y referent tous. Passee de 64 a 80 px le 20/08 (reunion Hamza : « le menu est trop colle au haut de la page »). */ :root{--dc-header-h:80px;} /* Bascule instantanee de la barre quand c'est le mega menu qui la pilote. Le panneau du mega apparait sans delai alors que le fond de la barre mettait 400 ms a blanchir : on voyait le panneau blanc arriver, puis la barre le rattraper. Le fondu de 400 ms reste pour le defilement, ou il est justement ce qu'on veut. */ .dc-navbar--instant{transition-duration:0s!important;} /* Sous-titre des entrees de menu. Le widget n'a pas de champ prevu ; le champ titre accepte le HTML et le rend tel quel, comme les numeros de module de la fiche formation. Le texte reste donc editable dans le panneau Elementor. Il ne sert qu'en mobile : en barre horizontale il n'y a pas la place. */ .dc-mi-sub{display:none;} /* ---------- ECHELLE TYPOGRAPHIQUE (charte graphique 2021, sect. 6 / charte web v3, sect. 05) ---------- Le kit definit deja les bons niveaux au niveau des balises : h1 48 / h2 34 / h3 19 / h4 16. Mais le widget Titre d'Elementor impose .elementor-widget-heading .elementor-heading-title{font-size:var(--e-global-typography-primary-font-size)} or cette variable est vide dans le kit : la declaration devient invalide au calcul et la taille retombe en heritage sur le body, soit 16px. On rend la main aux styles de balise en ciblant le tag (specificite 0,2,1 > 0,2,0). Pourquoi ici et pas dans le kit : update-page-settings REMPLACE l'objet de reglages au lieu de le fusionner. Toucher au CSS personnalise du kit (post 7) imposerait de reecrire l'integralite de ses reglages. Le template d'en-tete est charge sur tout le site, meme portee, sans ce risque. */ .elementor-widget-heading h1.elementor-heading-title{font-size:48px;} .elementor-widget-heading h2.elementor-heading-title{font-size:34px;} .elementor-widget-heading h3.elementor-heading-title{font-size:19px;} .elementor-widget-heading h4.elementor-heading-title{font-size:16px;} @media(max-width:1024px){ .elementor-widget-heading h1.elementor-heading-title{font-size:38px;} .elementor-widget-heading h2.elementor-heading-title{font-size:30px;} } @media(max-width:767px){ .elementor-widget-heading h1.elementor-heading-title{font-size:32px;} .elementor-widget-heading h2.elementor-heading-title{font-size:26px;} .elementor-widget-heading h3.elementor-heading-title{font-size:18px;} } /* ---------- EN-TETE Digitalcity ---------- */ .dc-mega-panel .elementor-widget-heading{--e-global-color-primary:var(--dc-text);} .dc-navbar{position:fixed!important;top:0!important;left:0!important;right:0!important;width:100%!important;} /* Sans width:auto, Elementor donne 100% de largeur a chaque conteneur : les deux groupes de droite se partagent alors l'espace au lieu de prendre leur taille propre. */ .dc-nav-group{flex:0 0 auto!important;width:auto;} /* En-tete en trois parts (wireframe V10 et charte v3 sect. 10) : logo a gauche, menu au centre, actions a droite. Le logo et les actions se partagent l'espace restant a parts EGALES (flex-basis 0), ce qui place mecaniquement le menu sur l'axe de la colonne, quelle que soit la longueur des libelles FR ou NL. Le !important est necessaire : Elementor pose flex-grow sur chaque conteneur depuis ses propres reglages, a une specificite superieure. */ .dc-logo,.dc-nav-actions{flex:1 1 0!important;min-width:0;} .dc-logo img{height:28px;width:auto;max-width:none;display:block;} /* Reunion Hamza du 20/08 : le bloc FR/NL rejoint le groupe d'actions, a droite, et prend le meme cadre que la loupe et le bouton « Se connecter ». Il etait jusqu'ici traite comme un element de menu, donc centre avec lui. */ .dc-navbar .dc-lang .elementor-heading-title{font-family:var(--dc-body);font-size:14px;font-weight:500;padding:0 12px;height:44px;display:inline-flex;align-items:center;white-space:nowrap;border-radius:var(--dc-radius-sm);border:1px solid transparent;transition:border-color .3s var(--dc-ease),background-color .3s var(--dc-ease);} .dc-navbar:not(.dc-navbar--solid) .dc-lang .elementor-heading-title{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.10);} .dc-navbar--solid .dc-lang .elementor-heading-title{border-color:var(--dc-gray-200);background:transparent;} .dc-navbar .dc-lang{flex:0 0 auto!important;width:auto!important;} /* Langue active en gras, coloree selon l'etat de la barre (charte sect. 10 : .dc-lang b). */ .dc-navbar .dc-lang b{font-weight:700;} .dc-navbar:not(.dc-navbar--solid) .dc-lang b{color:#fff;} .dc-navbar--solid .dc-lang b{color:var(--dc-bleu-titres);} @media(max-width:1024px){.dc-lang{display:none;}} /* mega menu : titres d'onglet */ .dc-mega .e-n-menu-title{padding:8px 12px!important;} .dc-mega .e-n-menu-title-text{font-family:var(--dc-body);font-size:15px;font-weight:400;white-space:nowrap;} /* Pastille de survol derriere l'item (charte sect. 10 : .dc-nav-item:hover{background:gray-100}). Uniquement sur la barre BLANCHE : sur le hero, un aplat gris clair derriere le libelle salirait le verre depoli, et l'apercu de la charte montre la barre en blanc. */ .dc-navbar--solid .dc-mega .e-n-menu-title{border-radius:var(--dc-radius-sm);transition:background-color .2s var(--dc-ease);} .dc-navbar--solid .dc-mega .e-n-menu-title:hover{background-color:var(--dc-gray-100);} /* Chevron du menu. La charte sect. 08 impose des pictogrammes AU TRAIT et precise « jamais de pictos pleins melanges aux pictos au trait ». Elementor pose ici deux glyphes PLEINS de Font Awesome, et deux formes differentes selon l'etat. La mediatheque refusant le SVG sur ce site, on redessine le chevron en CSS : deux bords d'un carre tourne. Une seule forme dans les deux etats, couleur pilotee par la variable d'etat de la barre. */ .dc-mega{--n-menu-dropdown-icon-gap:7px;} .dc-mega .e-n-menu-dropdown-icon svg{display:none;} /* Elementor pose width:fit-content et height:calc(...) sur ce bouton en 0,3,0 : avec le svg masque la boite tomberait a zero. On repasse devant en 0,4,0. */ .dc-mega.elementor-widget-n-menu .e-n-menu-title .e-n-menu-dropdown-icon{width:13px;height:13px;position:relative;} .dc-mega .e-n-menu-dropdown-icon::before{ content:"";position:absolute;top:50%;left:50%;width:7px;height:7px; border-right:1.2px solid var(--n-menu-title-color-normal); border-bottom:1.2px solid var(--n-menu-title-color-normal); transform:translate(-50%,-65%) rotate(45deg); transition:transform .25s var(--dc-ease),border-color .4s var(--dc-ease); } .dc-mega .e-n-menu-dropdown-icon[aria-expanded="true"]::before{transform:translate(-50%,-35%) rotate(-135deg);} .dc-mega .e-n-menu-title:hover .e-n-menu-dropdown-icon::before{border-color:var(--n-menu-title-color-hover);} /* mega menu : panneau. Fond gris tres clair et cartes blanches par-dessus (charte sect. 10), filet de separation avec la barre et marges de 24 px : le tout est pose en reglages natifs sur les quatre panneaux. Le decalage de 13 px : Elementor ouvre le panneau au bas de l'ITEM de menu (top:100% de .e-n-menu), pas au bas de la barre. L'item fait 39 px dans une barre de 64, il reste donc 13 px sous lui, et sans compensation le panneau remonte sur la barre et recouvre le logo et le menu. La variable prevue par Elementor, --n-menu-title-distance-from-content, reste sans effet ici : on decale donc le panneau lui-meme. 13 px = (64 - 39) / 2. */ .dc-mega-panel{box-shadow:0 8px 32px rgba(15,27,61,.10);margin-top:13px;} .dc-mega-cols{width:100%;} /* Specificite 0,3,0 : le kit pose .elementor-widget-heading .elementor-heading-title{color:...} et l'echelle ci-dessus pose la taille par balise. On passe au-dessus des deux. */ /* Le titre de colonne etait en gris logo (137,140,141), plus CLAIR que les liens de la liste (95,105,128) : il passait au second plan au lieu de coiffer la colonne. Le V10 le veut en couleur de texte pleine, 13 px (.mega-menu-col-title{font-size:.8125rem;color:var(--text-primary)}). On y ajoute un filet sous le titre pour detacher l'en-tete de sa liste. */ .dc-mega-panel .dc-mega-col-title .elementor-heading-title{font-family:var(--dc-body);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--dc-text);padding-bottom:10px;border-bottom:1px solid var(--dc-gray-200);} .dc-mega-link .elementor-icon-list-items{display:flex;flex-direction:column;gap:2px;} .dc-mega-link .elementor-icon-list-item{padding:0!important;} .dc-mega-link .elementor-icon-list-icon{display:none!important;} .dc-mega-link .elementor-icon-list-item a{display:block;font-family:var(--dc-body);font-size:15px;line-height:1.5;padding:5px 0;transition:color .2s var(--dc-ease),padding .2s var(--dc-ease);} /* Le kit pose .elementor-widget-icon-list .elementor-icon-list-text{color:var(--e-global-color-secondary)} sur le , ce qui ecrase la couleur heritee du . On remonte la specificite. */ .dc-navbar .dc-mega-link .elementor-icon-list-item a, .dc-navbar .dc-mega-link .elementor-icon-list-text{color:var(--dc-text-light);} .dc-navbar .dc-mega-link .elementor-icon-list-item a:hover, .dc-navbar .dc-mega-link .elementor-icon-list-item a:hover .elementor-icon-list-text{color:var(--dc-bleu-logo);} .dc-mega-link .elementor-icon-list-item a:hover{padding-left:8px;} /* mega menu : carte mise en avant */ .dc-mega-feat-img{width:100%;aspect-ratio:16/9;} .dc-mega-panel .dc-mega-feat .elementor-heading-title{font-size:16px;line-height:1.3;} .dc-mega-feat-text p{font-size:14px;line-height:1.45;color:var(--dc-text-light);margin:0;} .dc-mega-feat-btn{margin-top:auto;} /* Bouton de la carte : variante contour ENCRE qui s'inverse au survol (charte sect. 10 : .mega-cta-btn). Prefixe par .dc-mega-panel pour valoir 0,4,0 : sans ce prefixe, .dc-link-boxed .elementor-button:hover du socle, ecrit plus bas dans ce meme fichier et donc prioritaire a specificite egale, repeignait le libelle et le filet en bleu sur le fond encre. */ .dc-mega-panel .dc-mega-feat-btn .elementor-button{background:#fff!important;border:1px solid var(--dc-text)!important;color:var(--dc-text)!important;} .dc-mega-panel .dc-mega-feat-btn .elementor-button:hover{background:var(--dc-text)!important;border-color:var(--dc-text)!important;color:#fff!important;} .dc-mega-panel .dc-mega-feat-btn .elementor-button:hover svg{fill:#fff!important;} /* mega menu : articles a la une */ .dc-mega-article-thumb{width:80px;height:60px;flex:none;} .dc-mega-panel .dc-mega-article-title .elementor-heading-title{font-size:14px;font-weight:600;line-height:1.3;color:var(--dc-text);} .dc-mega-panel .dc-mega-article-date .elementor-heading-title{font-family:var(--dc-body);font-size:12px;font-weight:400;color:var(--dc-text-light);} .dc-mega-article:hover .dc-mega-article-title .elementor-heading-title{color:var(--dc-bleu-logo);} /* ---------- ETATS DE LA NAVBAR (wireframe V10 : transparent -> solid) ---------- */ /* Le script de bascule vit dans le widget HTML "Bascule etat navbar" de ce template. */ .dc-navbar{border-bottom:1px solid transparent;transition:background-color .4s var(--dc-ease),border-color .4s var(--dc-ease);} /* L'en-tete transparent porte un voile sombre (degrade noir 45 % -> 0) pour que le logo et le menu restent lisibles sur la photo. [9 septembre 2026] Ce voile etait decale de 4 px vers le bas. Motif d'epoque : il couvrait les quatre pixels du filet de cible en haut des colonnes du hero V1/V4 et en ternissait la couleur. CE FILET N'EXISTE PLUS — verifie sur l'accueil V5 : aucun element ne porte de bordure haute de 3 a 8 px dans les 1200 premiers pixels de la page. Le decalage ne protegeait donc plus rien ; il laissait une bande de 4 px non voilee en haut de chaque page interieure. Sur A propos, dont le heros est clair en haut, cela se voyait franchement : (51,107,142) sur les lignes 0 a 3 contre (27,58,78) a partir de la ligne 4 — une ligne claire en travers de la page, au-dessus de l'ombre. Retire. Impact mesure sur l'accueil validee : AUCUN, pixel pour pixel identique sur les huit premieres lignes. */ .dc-navbar .elementor-widget-html{display:none!important;} /* etat transparent : au-dessus du hero sombre */ /* Le widget du logo occupe 409 px et centrait son image : le logo commencait a 154 px du bord alors que le bloc d'actions finit pile sur le bord oppose. D'ou l'impression d'un en-tete moins large qu'il ne l'est. Cale a gauche, les deux marges deviennent symetriques. */ .dc-navbar .dc-logo{text-align:left!important;} .dc-navbar .dc-logo .elementor-widget-container{text-align:left;} .dc-navbar .dc-logo img{filter:brightness(0) invert(1);transition:filter .4s var(--dc-ease);} /* Voile noir sous la barre transparente (charte sect. 11 : « leger voile noir pour la lisibilite »). background-repeat:no-repeat est INDISPENSABLE : le degrade est dimensionne sur la boite de padding puis repete sous la bordure de 1 px, ce qui y fait redemarrer le noir et dessine un filet sombre au bas de la barre. */ .dc-navbar:not(.dc-navbar--solid){background-image:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,0));background-repeat:no-repeat;} /* Couleur des items du mega menu : Elementor la pose a specificite 0,6,0 avec #1f2124 par defaut. On redefinit donc la VARIABLE sur le widget lui-meme. Le chevron suit. */ .dc-navbar .elementor-widget-n-menu{--n-menu-title-color-normal:rgba(255,255,255,.9);--n-menu-title-color-hover:#fff;--n-menu-title-color-active:#fff;} .dc-navbar .e-n-menu-title-text{transition:color .4s var(--dc-ease);} .dc-navbar .dc-lang .elementor-heading-title{color:rgba(255,255,255,.7);transition:color .4s var(--dc-ease);} .dc-navbar .dc-lang:hover .elementor-heading-title{color:#fff;} /* etat transparent : loupe et CTA en verre depoli. Le rayon de 8 px est pose en reglage natif sur les deux boutons, identique dans les deux etats : c'est le meme composant, seul son remplissage change. */ .dc-navbar:not(.dc-navbar--solid) .dc-search-btn .elementor-button, .dc-navbar:not(.dc-navbar--solid) .dc-nav-cta .elementor-button{ background-color:rgba(255,255,255,.15); background-image:none; border:1px solid rgba(255,255,255,.3); color:#fff; transition:background-color .3s var(--dc-ease),border-color .3s var(--dc-ease),color .3s var(--dc-ease); } .dc-navbar:not(.dc-navbar--solid) .dc-search-btn .elementor-button:hover, .dc-navbar:not(.dc-navbar--solid) .dc-nav-cta .elementor-button:hover{ background-color:rgba(255,255,255,.25); } .dc-navbar:not(.dc-navbar--solid) .dc-search-btn .elementor-button svg{fill:#fff;color:#fff;} /* etat solid : apres 30% du hero, ou sur toute page sans hero */ .dc-navbar--solid{background-color:rgba(255,255,255,.97)!important;background-image:none!important;border-bottom-color:var(--dc-gray-200);} .dc-navbar--solid .dc-logo img{filter:none;} .dc-navbar--solid .elementor-widget-n-menu{--n-menu-title-color-normal:var(--dc-text);--n-menu-title-color-hover:var(--dc-bleu-titres);--n-menu-title-color-active:var(--dc-bleu-titres);} .dc-navbar--solid .dc-lang .elementor-heading-title{color:var(--dc-text-light);} .dc-navbar--solid .dc-lang:hover .elementor-heading-title{color:var(--dc-text);} /* CTA « Se connecter » : degrade de marque sur la barre blanche, comme l'apercu de la sect. 10 — qui est justement une barre blanche. Sur le hero il garde le verre depoli. Ce partage respecte la sect. 09, qui reserve le degrade a l'action principale d'une page « une seule fois » : il n'apparait jamais dans le premier ecran a cote des boutons du hero. Arbitre avec Yassine le 18 aout 2026. */ .dc-navbar--solid .dc-nav-cta .elementor-button{background-color:transparent!important;background-image:var(--dc-grad-brand)!important;border:1px solid transparent!important;color:#fff!important;} .dc-navbar--solid .dc-nav-cta .elementor-button:hover{filter:brightness(1.07);} /* color, et pas seulement fill : depuis que le glyphe est un masque peint en currentColor, l'etat solid heritait du blanc de l'etat transparent et la loupe devenait invisible sur le bouton blanc. Defaut visible sur toutes les pages interieures, ou la barre est solid des le chargement. */ .dc-navbar--solid .dc-search-btn .elementor-button{background-color:transparent!important;background-image:none!important;border:1px solid var(--dc-gray-200)!important;color:var(--dc-text);} .dc-navbar--solid .dc-search-btn .elementor-button svg{fill:var(--dc-text);color:var(--dc-text);} .dc-navbar--solid .dc-search-btn .elementor-button:hover{background-color:var(--dc-gray-50)!important;} /* le panneau ouvert reste toujours sur fond clair, quel que soit l'etat de la barre */ .dc-navbar .dc-mega-panel .e-n-menu-title-text{color:var(--dc-text);} @media(prefers-reduced-motion:reduce){ .dc-navbar,.dc-navbar .dc-logo img,.dc-navbar .e-n-menu-title-text{transition:none;} } /* etat mobile : meme bascule transparent -> solid que le desktop. Arbitrage : le wireframe V10 dessinait une barre blanche opaque sous 767px ; la charte web v3 (28/07, posterieure et validee) tranche l'inverse dans ses evolutions du hero — « en-tete transparent, logo blanc et menu burger ». On suit la charte. Le script de bascule choisit desormais le hero visible (.dc-hero-grid ou .dc-hero-mobile) pour que l'etat transparent existe aussi sous 620px ; sur une page sans hero il pose --solid des le chargement. Le traitement verre depoli de la loupe, deja porte par .dc-navbar:not(.dc-navbar--solid), s'applique tel quel : rien a redire ici. */ @media(max-width:767px){ .dc-nav-cta{display:none;} /* Ordre de la barre : logo a gauche, loupe puis burger a l'extreme droite. RESTAURE le 21/08, emporte lui aussi par la decoupe par index. Sans ces regles les trois blocs gardaient leur largeur de bureau et le burger se retrouvait au milieu de l'ecran. */ .dc-logo,.dc-nav-actions,.dc-nav-group{flex:0 0 auto!important;width:auto!important;} .dc-nav-actions{order:2;margin-left:auto;} .dc-nav-group{order:3;} .dc-navbar{--gap:0px 12px!important;--column-gap:12px!important;} .dc-mega-panel{margin-top:0;} /* ================= MENU MOBILE — « quatre portes », version simple ======== Chaque section est une carte qui annonce ce qu'elle contient : filet de couleur, intitule, sous-titre, chevron. Le second niveau se deplie SOUS sa carte, comme le widget le fait nativement. Version precedente retiree le 21/08 : elle sortait les quatre panneaux du flux en position:fixed plein ecran, decales hors champ par un transform, et les faisait glisser au :has(). Quatre couches fixes empilees en permanence, par-dessus lesquelles Elementor pose ses propres styles en ligne pour animer le depliage — ca tenait en rendu sans interface, pas sur un vrai telephone. On ne se bat plus avec le widget : il gere l'ouverture, on n'habille que l'apparence. */ /* VOICI LA VRAIE PANNE DU 21/08 : ce bloc de positionnement avait ete emporte par ma decoupe par index. Sans lui le panneau reprenait le comportement par defaut d'Elementor — absolu a 28 px du haut de son widget, donc glisse sous la barre, sans hauteur maximale ni defilement. D'ou un menu inutilisable sur telephone alors que les cartes, elles, s'affichaient bien. Le panneau est ancre sous l'en-tete, prend la largeur de l'ecran, et defile a l'interieur. dvh d'abord pour les navigateurs mobiles dont la barre d'adresse mange une partie de vh ; la ligne vh reste en repli. */ .dc-navbar .elementor-widget-n-menu .e-n-menu[data-layout=dropdown] .e-n-menu-wrapper{ position:fixed; top:var(--dc-header-h); left:0; right:0; width:auto; margin-block-start:0; max-height:calc(100vh - var(--dc-header-h)); max-height:calc(100dvh - var(--dc-header-h)); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; background:#fff; padding:14px 15px 24px; /* Plein ecran : un panneau qui s'arrete en cours d'ecran laisse penser qu'il manque quelque chose, et la page derriere capte des appuis. */ min-height:calc(100vh - var(--dc-header-h)); min-height:calc(100dvh - var(--dc-header-h)); } .dc-navbar .e-n-menu-heading{display:flex;flex-direction:column;gap:8px;width:100%;} /* --- les quatre portes --- */ /* Elementor pose une largeur en dur sur le
  • : sans width:100% les cartes debordaient de la colonne et la fleche sortait de l'ecran. */ .dc-navbar .e-n-menu-item{position:relative;overflow:hidden;width:100%!important; border:1px solid var(--dc-gray-200);border-radius:13px;background:#fff;} /* Filets de couleur retires le 21/08. Le cyan et le magenta disent « chercheurs d'emploi » et « travailleurs » partout ailleurs sur le site, a commencer par le hero juste dessous : les reutiliser pour Actualites et Acces rapide brouillait le code couleur au lieu de l'appuyer. Un seul filet, neutre, marque la carte sans rien signifier de faux. */ .dc-navbar .e-n-menu-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px; z-index:2;background:var(--dc-gray-200);} .dc-navbar .e-n-menu-item:has(.e-n-menu-dropdown-icon[aria-expanded="true"])::before{background:var(--dc-bleu-logo);} .dc-navbar .e-n-menu-title{padding:13px 14px 12px!important;background:transparent!important; display:flex;align-items:flex-start;justify-content:space-between;gap:10px;border-radius:0!important;} .dc-navbar .e-n-menu-title-container{flex:1;min-width:0;} .dc-navbar .e-n-menu-title-text{display:block;font-family:var(--dc-display);font-size:15.5px; font-weight:600;letter-spacing:-.01em;color:var(--dc-text);line-height:1.25;} .dc-navbar .dc-mi-sub{display:block;font-family:var(--dc-body);font-size:12px;font-weight:400; letter-spacing:0;color:var(--dc-text-light);margin-top:2px;} /* On garde le chevron du widget : c'est un controle de depliage, pas un lien, et Elementor le fait pivoter a l'ouverture. On n'habille que sa boite. */ .dc-navbar .elementor-widget-n-menu .e-n-menu-dropdown-icon{width:25px!important;height:25px!important; flex:none;border:1px solid var(--dc-gray-200)!important;border-radius:7px; display:flex;align-items:center;justify-content:center;margin-top:2px;padding:0; background:transparent;} .dc-navbar .elementor-widget-n-menu .e-n-menu-dropdown-icon svg{width:11px;height:11px; fill:var(--dc-text-light);} .dc-navbar .e-n-menu-item:active{background:var(--dc-gray-50);} /* --- second niveau, deplie sur place --- */ .dc-navbar .e-n-menu-content .dc-mega-panel{box-shadow:none!important;border:0!important; padding:0 14px 14px!important;margin:0!important;background:transparent!important;} .dc-navbar .e-n-menu-content .dc-mega-cols{flex-direction:column!important;gap:16px!important;} /* --- Bouton burger -------------------------------------------------- RESTAURE le 21/08 : une decoupe par index avait emporte ce bloc en meme temps que le bouton Retour. Le burger se retrouvait sans couleur sur la photo et la barre ne blanchissait plus a l'ouverture, ce qui laissait les titres du menu en blanc sur le panneau blanc. */ .dc-navbar .e-n-menu-toggle{background:transparent;border:0;padding:4px;position:relative;} /* Zone tactile portee a 44 px sans deplacer le glyphe. */ .dc-navbar .e-n-menu-toggle::after{content:"";position:absolute;inset:-8px;} .dc-navbar .e-n-menu-toggle,.dc-navbar a,.dc-navbar button{-webkit-tap-highlight-color:transparent;} .dc-navbar .e-n-menu-toggle{border-radius:var(--dc-radius-sm);transition:background-color .15s var(--dc-ease);} .dc-navbar--solid .e-n-menu-toggle:active{background:rgba(26,29,43,.07);} .dc-navbar:not(.dc-navbar--solid) .e-n-menu-toggle:active{background:rgba(255,255,255,.18);} /* Le kit peint TOUS les