.elementor-6501 .elementor-element.elementor-element-26d0246{--display:flex;--min-height:46vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-end;--align-items:flex-start;--gap:14px 14px;--row-gap:14px;--column-gap:14px;--overlay-opacity:1;--padding-top:160px;--padding-bottom:56px;--padding-left:64px;--padding-right:64px;}.elementor-6501 .elementor-element.elementor-element-26d0246:not(.elementor-motion-effects-element-type-background), .elementor-6501 .elementor-element.elementor-element-26d0246 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0F1B3D;background-image:url("https://digitalcity.comaseinfo-support.be/wp-content/uploads/2026/08/pexels-photo-9301156-scaled.jpeg");background-position:46% 34%;background-repeat:no-repeat;background-size:cover;}.elementor-6501 .elementor-element.elementor-element-26d0246::before, .elementor-6501 .elementor-element.elementor-element-26d0246 > .elementor-background-video-container::before, .elementor-6501 .elementor-element.elementor-element-26d0246 > .e-con-inner > .elementor-background-video-container::before, .elementor-6501 .elementor-element.elementor-element-26d0246 > .elementor-background-slideshow::before, .elementor-6501 .elementor-element.elementor-element-26d0246 > .e-con-inner > .elementor-background-slideshow::before, .elementor-6501 .elementor-element.elementor-element-26d0246 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:transparent;--background-overlay:'';background-image:linear-gradient(0deg, rgba(15,27,61,0.94) 0%, rgba(15,27,61,0.55) 100%);}.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-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-6501 .elementor-element.elementor-element-459e4c7{--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:56px;--padding-bottom:72px;--padding-left:64px;--padding-right:64px;}.elementor-widget-posts .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-widget-posts .elementor-post__title, .elementor-widget-posts .elementor-post__title a{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-posts .elementor-post__meta-data{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-posts .elementor-post__excerpt p{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-posts .elementor-post__read-more{color:var( --e-global-color-accent );}.elementor-widget-posts a.elementor-post__read-more{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-posts .elementor-post__card .elementor-post__badge{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-widget-posts .elementor-pagination{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-posts .e-load-more-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-6501 .elementor-element.elementor-element-bb9d458{--grid-row-gap:32px;--grid-column-gap:30px;}.elementor-6501 .elementor-element.elementor-element-bb9d458 .elementor-posts-container .elementor-post__thumbnail{padding-bottom:calc( 0.66 * 100% );}.elementor-6501 .elementor-element.elementor-element-bb9d458:after{content:"0.66";}.elementor-6501 .elementor-element.elementor-element-bb9d458 .elementor-post__thumbnail__link{width:100%;}.elementor-6501 .elementor-element.elementor-element-bb9d458 .elementor-post__meta-data span + span:before{content:"///";}.elementor-6501 .elementor-element.elementor-element-bb9d458.elementor-posts--thumbnail-left .elementor-post__thumbnail__link{margin-right:20px;}.elementor-6501 .elementor-element.elementor-element-bb9d458.elementor-posts--thumbnail-right .elementor-post__thumbnail__link{margin-left:20px;}.elementor-6501 .elementor-element.elementor-element-bb9d458.elementor-posts--thumbnail-top .elementor-post__thumbnail__link{margin-bottom:20px;}.elementor-6501 .elementor-element.elementor-element-b9ee924{--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;--padding-top:72px;--padding-bottom:96px;--padding-left:64px;--padding-right:64px;}.elementor-6501 .elementor-element.elementor-element-e734a16{--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:18px 18px;--row-gap:18px;--column-gap:18px;--margin-top:0px;--margin-bottom:40px;--margin-left:0px;--margin-right:0px;}.elementor-6501 .elementor-element.elementor-element-19fa6b9{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--gap:10px 14px;--row-gap:10px;--column-gap:14px;--flex-wrap:wrap;}.elementor-6501 .elementor-element.elementor-element-dbcc578{--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:8px 8px;--row-gap:8px;--column-gap:8px;--flex-wrap:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.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-6501 .elementor-element.elementor-element-409513e{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--gap:10px 14px;--row-gap:10px;--column-gap:14px;--flex-wrap:wrap;}.elementor-6501 .elementor-element.elementor-element-edb9f2f{--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:8px 8px;--row-gap:8px;--column-gap:8px;--flex-wrap:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6501 .elementor-element.elementor-element-d327bec{--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;--flex-wrap:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6501 .elementor-element.elementor-element-2dde937{--grid-row-gap:32px;--grid-column-gap:30px;}.elementor-6501 .elementor-element.elementor-element-2dde937 .elementor-posts-container .elementor-post__thumbnail{padding-bottom:calc( 0.66 * 100% );}.elementor-6501 .elementor-element.elementor-element-2dde937:after{content:"0.66";}.elementor-6501 .elementor-element.elementor-element-2dde937 .elementor-post__thumbnail__link{width:100%;}.elementor-6501 .elementor-element.elementor-element-2dde937 .elementor-post__meta-data span + span:before{content:"///";}.elementor-6501 .elementor-element.elementor-element-2dde937.elementor-posts--thumbnail-left .elementor-post__thumbnail__link{margin-right:20px;}.elementor-6501 .elementor-element.elementor-element-2dde937.elementor-posts--thumbnail-right .elementor-post__thumbnail__link{margin-left:20px;}.elementor-6501 .elementor-element.elementor-element-2dde937.elementor-posts--thumbnail-top .elementor-post__thumbnail__link{margin-bottom:20px;}.elementor-6501 .elementor-element.elementor-element-2dde937 .elementor-pagination{text-align:center;}body:not(.rtl) .elementor-6501 .elementor-element.elementor-element-2dde937 .elementor-pagination .page-numbers:not(:first-child){margin-left:calc( 10px/2 );}body:not(.rtl) .elementor-6501 .elementor-element.elementor-element-2dde937 .elementor-pagination .page-numbers:not(:last-child){margin-right:calc( 10px/2 );}body.rtl .elementor-6501 .elementor-element.elementor-element-2dde937 .elementor-pagination .page-numbers:not(:first-child){margin-right:calc( 10px/2 );}body.rtl .elementor-6501 .elementor-element.elementor-element-2dde937 .elementor-pagination .page-numbers:not(:last-child){margin-left:calc( 10px/2 );}.elementor-6501 .elementor-element.elementor-element-e86009b{--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:14px 14px;--row-gap:14px;--column-gap:14px;--padding-top:80px;--padding-bottom:96px;--padding-left:64px;--padding-right:64px;}.elementor-6501 .elementor-element.elementor-element-98359ef{text-align:center;}.elementor-widget-form .elementor-field-group > label, .elementor-widget-form .elementor-field-subgroup label{color:var( --e-global-color-text );}.elementor-widget-form .elementor-field-group > label{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-field-type-html{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-widget-form .elementor-field-group .elementor-field{color:var( --e-global-color-text );}.elementor-widget-form .elementor-field-group .elementor-field, .elementor-widget-form .elementor-field-subgroup label{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-form .e-form__buttons__wrapper__button-next{background-color:var( --e-global-color-accent );}.elementor-widget-form .elementor-button[type="submit"]{background-color:var( --e-global-color-accent );}.elementor-widget-form .e-form__buttons__wrapper__button-previous{background-color:var( --e-global-color-accent );}.elementor-widget-form .elementor-message{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .e-form__indicators__indicator, .elementor-widget-form .e-form__indicators__indicator__label{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-form{--e-form-steps-indicator-inactive-primary-color:var( --e-global-color-text );--e-form-steps-indicator-active-primary-color:var( --e-global-color-accent );--e-form-steps-indicator-completed-primary-color:var( --e-global-color-accent );--e-form-steps-indicator-progress-color:var( --e-global-color-accent );--e-form-steps-indicator-progress-background-color:var( --e-global-color-text );--e-form-steps-indicator-progress-meter-color:var( --e-global-color-text );}.elementor-widget-form .e-form__indicators__indicator__progress__meter{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-6501 .elementor-element.elementor-element-215bb5d .elementor-field-group{padding-right:calc( 10px/2 );padding-left:calc( 10px/2 );margin-bottom:10px;}.elementor-6501 .elementor-element.elementor-element-215bb5d .elementor-form-fields-wrapper{margin-left:calc( -10px/2 );margin-right:calc( -10px/2 );margin-bottom:-10px;}.elementor-6501 .elementor-element.elementor-element-215bb5d .elementor-field-group.recaptcha_v3-bottomleft, .elementor-6501 .elementor-element.elementor-element-215bb5d .elementor-field-group.recaptcha_v3-bottomright{margin-bottom:0;}body.rtl .elementor-6501 .elementor-element.elementor-element-215bb5d .elementor-labels-inline .elementor-field-group > label{padding-left:0px;}body:not(.rtl) .elementor-6501 .elementor-element.elementor-element-215bb5d .elementor-labels-inline .elementor-field-group > label{padding-right:0px;}body .elementor-6501 .elementor-element.elementor-element-215bb5d .elementor-labels-above .elementor-field-group > label{padding-bottom:0px;}.elementor-6501 .elementor-element.elementor-element-215bb5d .elementor-field-type-html{padding-bottom:0px;}.elementor-6501 .elementor-element.elementor-element-215bb5d .elementor-field-group .elementor-field:not(.elementor-select-wrapper){background-color:#ffffff;}.elementor-6501 .elementor-element.elementor-element-215bb5d .elementor-field-group .elementor-select-wrapper select{background-color:#ffffff;}.elementor-6501 .elementor-element.elementor-element-215bb5d .e-form__buttons__wrapper__button-next{color:#ffffff;}.elementor-6501 .elementor-element.elementor-element-215bb5d .elementor-button[type="submit"]{color:#ffffff;}.elementor-6501 .elementor-element.elementor-element-215bb5d .elementor-button[type="submit"] svg *{fill:#ffffff;}.elementor-6501 .elementor-element.elementor-element-215bb5d .e-form__buttons__wrapper__button-previous{color:#ffffff;}.elementor-6501 .elementor-element.elementor-element-215bb5d .e-form__buttons__wrapper__button-next:hover{color:#ffffff;}.elementor-6501 .elementor-element.elementor-element-215bb5d .elementor-button[type="submit"]:hover{color:#ffffff;}.elementor-6501 .elementor-element.elementor-element-215bb5d .elementor-button[type="submit"]:hover svg *{fill:#ffffff;}.elementor-6501 .elementor-element.elementor-element-215bb5d .e-form__buttons__wrapper__button-previous:hover{color:#ffffff;}.elementor-6501 .elementor-element.elementor-element-215bb5d{--e-form-steps-indicators-spacing:20px;--e-form-steps-indicator-padding:30px;--e-form-steps-indicator-inactive-secondary-color:#ffffff;--e-form-steps-indicator-active-secondary-color:#ffffff;--e-form-steps-indicator-completed-secondary-color:#ffffff;--e-form-steps-divider-width:1px;--e-form-steps-divider-gap:10px;}@media(min-width:768px){.elementor-6501 .elementor-element.elementor-element-26d0246{--content-width:1320px;}.elementor-6501 .elementor-element.elementor-element-459e4c7{--content-width:1320px;}.elementor-6501 .elementor-element.elementor-element-b9ee924{--content-width:1320px;}.elementor-6501 .elementor-element.elementor-element-e734a16{--width:100%;}.elementor-6501 .elementor-element.elementor-element-e86009b{--content-width:1320px;}}@media(max-width:1024px){.elementor-6501 .elementor-element.elementor-element-26d0246:not(.elementor-motion-effects-element-type-background), .elementor-6501 .elementor-element.elementor-element-26d0246 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:46% 34%;}}@media(max-width:767px){.elementor-6501 .elementor-element.elementor-element-26d0246:not(.elementor-motion-effects-element-type-background), .elementor-6501 .elementor-element.elementor-element-26d0246 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:46% 34%;}.elementor-6501 .elementor-element.elementor-element-26d0246{--padding-top:112px;--padding-bottom:40px;--padding-left:24px;--padding-right:24px;}.elementor-6501 .elementor-element.elementor-element-459e4c7{--padding-top:64px;--padding-bottom:28px;--padding-left:24px;--padding-right:24px;}.elementor-6501 .elementor-element.elementor-element-bb9d458 .elementor-posts-container .elementor-post__thumbnail{padding-bottom:calc( 0.5 * 100% );}.elementor-6501 .elementor-element.elementor-element-bb9d458:after{content:"0.5";}.elementor-6501 .elementor-element.elementor-element-bb9d458 .elementor-post__thumbnail__link{width:100%;}.elementor-6501 .elementor-element.elementor-element-b9ee924{--padding-top:64px;--padding-bottom:56px;--padding-left:24px;--padding-right:24px;}.elementor-6501 .elementor-element.elementor-element-2dde937 .elementor-posts-container .elementor-post__thumbnail{padding-bottom:calc( 0.5 * 100% );}.elementor-6501 .elementor-element.elementor-element-2dde937:after{content:"0.5";}.elementor-6501 .elementor-element.elementor-element-2dde937 .elementor-post__thumbnail__link{width:100%;}.elementor-6501 .elementor-element.elementor-element-e86009b{--padding-top:64px;--padding-bottom:67px;--padding-left:24px;--padding-right:24px;}}/* Start custom CSS *//* ==========================================================================
   LISTE DES ACTUALITES
   Source : wireframe-liste-actualites-v10.html, version FIGEE du 28/07/2026
   telechargee depuis /wirframes/v10-figee-2026-07-28/.
   Le fichier local du meme nom est anterieur : il pose des ONGLETS soulignes la
   ou le V10 pose des PASTILLES, n'a pas de filtre par periode et laisse le
   bandeau newsletter en clair. Reference = la version en ligne.
   Les filtres restent decoratifs : decision Yassine.
   ========================================================================== */

.dc-page-title .elementor-heading-title.elementor-heading-title.elementor-heading-title{font-size:48px;line-height:1.15;letter-spacing:-.02em;}
@media(max-width:1024px){.dc-page-title .elementor-heading-title.elementor-heading-title.elementor-heading-title{font-size:38px;}}
@media(max-width:767px){.dc-page-title .elementor-heading-title.elementor-heading-title.elementor-heading-title{font-size:30px;}}
.dc-page-lead p{font-family:var(--dc-body);font-size:18px;line-height:1.6;color:var(--dc-text-light);max-width:600px;margin:0;}

/* Pastilles de filtre (V10) : contour fin, active en encre pleine.
   L'ancien fichier local dessinait des onglets soulignes — c'est ce que j'avais
   construit, d'ou l'ecart releve par Yassine. */
.dc-filter-pills{flex-wrap:wrap;}
.dc-fpill.elementor-widget-button .elementor-button.elementor-button{
  font-family:var(--dc-body)!important;font-size:14px!important;font-weight:400!important;color:var(--dc-text-light)!important;
  background-color:#fff!important;background-image:none!important;
  border:1px solid var(--dc-gray-200)!important;border-radius:var(--dc-radius-sm);
  padding:9px 20px!important;transition:var(--dc-transition);}
.dc-fpill .elementor-button:hover{color:var(--dc-text)!important;border-color:var(--dc-text)!important;}
.dc-fpill-active.elementor-widget-button .elementor-button.elementor-button{
  background-color:var(--dc-text)!important;color:#fff!important;border-color:var(--dc-text)!important;font-weight:500!important;}

/* Filtre par periode : selecteurs decoratifs, meme dessin que ceux du V10. */
.dc-date-label .elementor-heading-title.elementor-heading-title.elementor-heading-title{
  font-family:var(--dc-body);font-size:13px;font-weight:600;text-transform:uppercase;
  letter-spacing:.05em;color:var(--dc-text-light);}
.dc-date-select .elementor-heading-title.elementor-heading-title.elementor-heading-title{
  font-family:var(--dc-body);font-size:14px;color:var(--dc-text);background:#fff;
  border:1px solid var(--dc-gray-200);border-radius:var(--dc-radius-sm);
  padding:8px 34px 8px 12px;cursor:pointer;position:relative;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235F6980' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;}

.dc-section-label .elementor-heading-title.elementor-heading-title.elementor-heading-title{
  font-family:var(--dc-body);font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.15em;color:var(--dc-text-light);}

/* ---- A LA UNE ----
   Le wireframe pose une grille 1.5fr / 1fr : image a gauche, contenu a droite.
   Le widget Publications d'Elementor empile image puis texte ; on le remet en
   deux colonnes en CSS plutot que de coder une carte a la main, pour que la
   mise en avant reste alimentee par le dernier article publie. */
.dc-featured-card .elementor-posts{display:block;}
/* [7 septembre 2026] L'article a la une passe de la JUXTAPOSITION au
   CHEVAUCHEMENT. Reunion du 4/9 : « peut-etre plus destructure, plus
   artistique, moins lisse ». Une photo et un texte cote a cote dans un meme
   cadre, c'est une grille ; le meme texte pose en carte flottante qui mord sur
   la photo, c'est une mise en page. Le geste est celui du ruban du CTA de la
   V4, ou le contenu passait par-dessus les images.
   Le cadre et le fond blanc quittent donc l'article lui-meme pour aller sur le
   seul bloc de texte, et la photo respire jusqu'au bord. */
.dc-featured-card .elementor-posts .elementor-post{display:grid!important;
  grid-template-columns:1.06fr .94fr!important;gap:0;align-items:center;
  border:0;border-radius:0;overflow:visible;
  background:transparent;margin:0;}
.dc-featured-card .elementor-post__thumbnail__link{margin:0;height:100%;
  border-radius:var(--dc-radius-lg);overflow:hidden;display:block;}
.dc-featured-card .elementor-post__thumbnail{height:100%;min-height:320px;padding-bottom:0!important;}
.dc-featured-card .elementor-post__thumbnail img{width:100%;height:100%;object-fit:cover;position:static;}
.dc-featured-card .elementor-post__text{padding:40px 44px;
  display:flex;flex-direction:column;justify-content:center;
  position:relative;z-index:2;margin:0 0 0 -84px;
  background:#fff;border-radius:var(--dc-radius-lg);
  box-shadow:0 32px 64px -24px rgba(15,27,61,.28);}
.dc-featured-card .elementor-post__title,.dc-featured-card .elementor-post__title a{
  font-family:var(--dc-display);font-size:28px;font-weight:700;line-height:1.2;
  letter-spacing:-.02em;color:var(--dc-text);}
.dc-featured-card .elementor-post__meta-data{font-family:var(--dc-body);font-size:13px;color:var(--dc-text-light);margin-bottom:12px;}
.dc-featured-card .elementor-post__excerpt p{font-family:var(--dc-body);font-size:16px;line-height:1.6;color:var(--dc-text-light);}
.dc-featured-card .elementor-post__read-more{font-family:var(--dc-body);font-size:14px;font-weight:600;
  color:var(--dc-bleu-logo);margin-top:16px;display:inline-flex;align-items:center;gap:8px;}
@media(max-width:767px){
  .dc-featured-card .elementor-posts .elementor-post{grid-template-columns:1fr!important;}
  .dc-featured-card .elementor-post__thumbnail{min-height:0;aspect-ratio:16/10;}
  .dc-featured-card .elementor-post__text{padding:24px;
    margin:-48px 24px 0;}
  .dc-featured-card .elementor-post__title,.dc-featured-card .elementor-post__title a{font-size:22px;}
}

/* ---- GRILLE D'ARTICLES ---- */
.dc-articles-grid .elementor-post{background:#fff;border:1px solid var(--dc-gray-200);
  border-radius:var(--dc-radius-lg);overflow:hidden;
  transition:transform .45s var(--dc-ease),box-shadow .45s var(--dc-ease);}
.dc-articles-grid .elementor-post:hover{box-shadow:0 24px 48px -20px rgba(15,27,61,.28);
  transform:translateY(-6px);}
/* [7 septembre 2026] LE DESALIGNEMENT.
   « Plus destructure, plus artistique, moins lisse » (reunion du 4/9). Six
   cartes identiques alignees au cordeau, c'est exactement ce qui est vise.
   Deux gestes, pas plus : la colonne du milieu descend d'un demi-pas, et une
   vignette sur trois est en portrait. Pas de rotation, pas d'echelle — la page
   reste une liste qu'on parcourt, et le decalage suffit a casser la regle.
   Les hauteurs de carte sont RENDUES independantes (align-items:start) : sans
   cela la grille les etirait toutes a la plus haute, et le desalignement se
   voyait en bas par des blancs, pas en haut par un rythme.
   Rien de tout cela sous 1025 px : la grille y passe a deux colonnes puis une,
   ou un decalage n'a plus de sens. */
@media (min-width:1025px){
  .dc-articles-grid .elementor-grid{align-items:start;}
  .dc-articles-grid .elementor-grid > .elementor-grid-item:nth-child(3n+2){margin-top:56px;}
  .dc-articles-grid .elementor-post__thumbnail{aspect-ratio:16/10;}
  .dc-articles-grid .elementor-grid > .elementor-grid-item:nth-child(3n+3) .elementor-post__thumbnail{
    aspect-ratio:4/5;}
  .dc-articles-grid .elementor-post__thumbnail img{width:100%;height:100%;object-fit:cover;
    transition:transform .55s cubic-bezier(.22,.61,.36,1);}
  /* [retire le 10/9] zoom au survol : .dc-articles-grid …img{transform:scale(1.05)} */
}
.dc-articles-grid .elementor-post__thumbnail__link{margin:0;}
.dc-articles-grid .elementor-post__text{padding:20px 24px 24px;}
.dc-articles-grid .elementor-post__meta-data{font-family:var(--dc-body);font-size:12px;color:var(--dc-text-light);margin-bottom:8px;}
.dc-articles-grid .elementor-post__title,.dc-articles-grid .elementor-post__title a{
  font-family:var(--dc-display);font-size:18px;font-weight:700;line-height:1.3;
  letter-spacing:-.01em;color:var(--dc-text);}
.dc-articles-grid .elementor-post__excerpt p{font-family:var(--dc-body);font-size:14px;line-height:1.5;color:var(--dc-text-light);}

/* Pagination : carrees a bordure fine, page courante en encre (wireframe). */
.dc-articles-grid .elementor-pagination{margin-top:48px;display:flex;justify-content:center;gap:4px;}
.dc-articles-grid .page-numbers{display:flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;padding:0 12px;font-family:var(--dc-body);font-size:14px;
  color:var(--dc-text-light);border:1px solid var(--dc-gray-200);border-radius:var(--dc-radius-sm);
  transition:var(--dc-transition);}
.dc-articles-grid .page-numbers:hover{border-color:var(--dc-text);color:var(--dc-text);}
.dc-articles-grid .page-numbers.current{background:var(--dc-text);color:#fff;border-color:var(--dc-text);}

/* ---- NEWSLETTER ---- */
/* Bandeau newsletter SOMBRE (V10) : fond encre, titre blanc, texte a 70 %.
   Il etait en gris clair d'apres l'ancien fichier. On reutilise le degrade du
   bandeau de fin de l'accueil pour rester dans la meme famille. */
.dc-newsletter{background-image:var(--dc-grad-hero-deep)!important;position:relative;overflow:hidden;}
.dc-newsletter > *{position:relative;z-index:1;}
.dc-nl-title .elementor-heading-title.elementor-heading-title.elementor-heading-title{font-size:28px;letter-spacing:-.02em;text-align:center;color:#fff;}
.dc-nl-lead p{font-family:var(--dc-body);font-size:16px;line-height:1.6;color:rgba(255,255,255,.7);
  text-align:center;max-width:600px;margin:0 auto;}
.dc-nl-btn .elementor-button{background-color:#fff!important;background-image:none!important;
  color:var(--dc-text)!important;border:1px solid #fff!important;}

/* ---- FORMULAIRE NEWSLETTER (V10) ----
   Champ e-mail translucide sur le bandeau sombre, bouton blanc a texte encre,
   mention de confidentialite en dessous. */
.dc-nl-form{max-width:480px;width:100%;margin:0 auto;}
.dc-nl-form .elementor-field-group{margin:0;}
.dc-nl-form .elementor-field-textual{background:rgba(255,255,255,.08)!important;
  border:1px solid rgba(255,255,255,.2)!important;border-right:0!important;
  border-radius:var(--dc-radius-sm) 0 0 var(--dc-radius-sm)!important;
  color:#fff!important;font-family:var(--dc-body);font-size:15px;padding:14px 20px!important;height:auto;}
.dc-nl-form .elementor-field-textual::placeholder{color:rgba(255,255,255,.4);}
.dc-nl-form .elementor-field-textual:focus{border-color:rgba(255,255,255,.5)!important;background:rgba(255,255,255,.12)!important;}
.dc-nl-form .elementor-field-label{display:none!important;}
.dc-nl-form .elementor-button[type="submit"]{background-color:#fff!important;background-image:none!important;
  color:var(--dc-text)!important;border:1px solid #fff!important;
  border-radius:0 var(--dc-radius-sm) var(--dc-radius-sm) 0!important;
  font-size:15px;font-weight:600;padding:14px 24px!important;}
.dc-nl-privacy p{font-family:var(--dc-body);font-size:12px;line-height:1.5;
  color:rgba(255,255,255,.4);text-align:center;max-width:480px;margin:0 auto;}


/* « Lire la suite » cale en bas de chaque carte : les chapos n'ont pas la meme
   longueur et le lien sautait d'une carte a l'autre. Meme raison que sur
   l'accueil, ou l'alignement du pied de carte avait deja ete demande. */
.elementor-posts .elementor-post{display:flex;flex-direction:column;}
.elementor-posts .elementor-post__text{display:flex;flex-direction:column;flex:1 1 auto;}
.elementor-posts .elementor-post__read-more{margin-top:auto;padding-top:12px;}

/* Champ et bouton de la newsletter : 480 px au total, comme le V10
   (.newsletter-form{max-width:480px}). Le formulaire Elementor s'etale sinon
   sur toute la largeur du conteneur. */
.dc-nl-form,.dc-nl-form .elementor-form{max-width:480px!important;width:100%;margin:0 auto;}
.dc-nl-form .elementor-form-fields-wrapper{flex-wrap:nowrap;}
.dc-nl-form .elementor-field-group:not(.elementor-field-type-submit){flex:1 1 auto;max-width:none;}
.dc-nl-form .elementor-field-type-submit{flex:0 0 auto;width:auto;}

/* ---- « LIRE LA SUITE » : EXACTEMENT LE STYLE DE L'ACCUEIL ----
   Mesure : sur l'accueil le lien vaut 14 px / 600 / bleu logo (.dc-link-text) ;
   le lien « en savoir plus » du widget Publications sortait a 16 px / 800, et
   meme en violet sur la fiche article. Elementor l'habille depuis ses propres
   reglages, a une specificite superieure : il faut le !important.
   La fleche est ajoutee au masque CSS, le widget n'ayant pas d'option d'icone. */
.elementor-posts .elementor-post__read-more{
  font-family:var(--dc-body)!important;font-size:14px!important;font-weight:600!important;
  color:var(--dc-bleu-logo)!important;display:inline-flex!important;align-items:center;gap:8px;
  transition:gap .25s var(--dc-ease);}
.elementor-posts .elementor-post__read-more::after{content:"";width:13px;height:13px;flex:none;
  background-color:currentColor;-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;}
.elementor-posts .elementor-post:hover .elementor-post__read-more{gap:12px;}

/* Bouton colle au champ et de meme hauteur : le V10 pose les deux dans un meme
   bloc sans gouttiere (.newsletter-form{display:flex;gap:0}). Mesure avant
   correction : champ 54 px, bouton 47 px, 10 px d'ecart entre les deux. */
.dc-nl-form .elementor-form-fields-wrapper{gap:0!important;margin:0!important;}
.dc-nl-form .elementor-field-group{padding:0!important;margin:0!important;}
.dc-nl-form .elementor-field-textual{height:54px!important;}
.dc-nl-form .elementor-field-type-submit .elementor-button{height:54px!important;min-height:54px!important;
  display:flex;align-items:center;justify-content:center;}


/* [7 septembre 2026] La mention sous le formulaire mesurait 3,74:1 sur le fond
   de nuit — 12 px a 44 % de blanc. Portee a 70 %, elle passe a 7,4:1. C'est du
   texte de consentement : il doit se lire, pas se deviner. */
.dc-nl-privacy p{color:rgba(255,255,255,.70)!important;}

/* [8 septembre 2026] LE LIBELLE « ANNEE » SE SEPARAIT DE SON SELECTEUR.
   `.dc-date-row` est un flex en ligne qui se replie, et ses quatre enfants
   — libelle, selecteur, libelle, selecteur — se replient INDIVIDUELLEMENT.
   Sous 420 px de large, la coupure tombait entre « ANNEE » et « Toutes » :
   un libelle orphelin en fin de ligne, et son controle seul a la ligne
   suivante. Un flex ne sait pas qu'une paire est indissociable.
   Une grille a deux colonnes le sait : les libelles tombent en colonne 1, les
   controles en colonne 2, et chaque paire tient sa ligne quoi qu'il arrive.
   Pas de modification de structure — l'ordre du balisage suffit. */
@media (max-width:560px){
  .dc-date-row{
    display:grid!important;
    grid-template-columns:auto minmax(0,auto)!important;
    gap:10px 14px!important;
    align-items:center!important;
    justify-content:start!important;}
}

/* ===========================================================================
   ÉTIQUETTES DE CATÉGORIE SUR LES CARTES — 9 septembre 2026
   Le wireframe V10 pose une etiquette de categorie sur chaque carte de la
   grille (« Formations », « Partenariats », « Evenements », « Temoignages »,
   « Marche de l'emploi ») : c'est le repere visuel qui permet de trier d'un
   coup d'oeil. La page n'en affichait AUCUNE.

   Les reglages d'Elementor sont pourtant corrects — `classic_show_badge:yes`,
   `classic_badge_taxonomy:category`, les sept articles ont bien leur categorie
   et une image mise en avant — mais le widget n'emet aucun
   `.elementor-post__badge` dans le HTML. Plutot que de dependre de son
   comportement, on s'appuie sur ce qu'il fait de facon fiable : il pose la
   classe `category-<slug>` sur chaque `<article>`.
   L'etiquette est donc dessinee en CSS, dans le vocabulaire de la V5 —
   pastille arrondie, meme graisse et meme interlettrage que celles du heros.
   =========================================================================== */
.dc-actu-grille .elementor-post,
.elementor-6501 .elementor-posts .elementor-post{position:relative;}

.elementor-6501 .elementor-posts .elementor-post > .elementor-post__thumbnail__link::after{
  content:attr(data-cat);}

.elementor-6501 .elementor-posts .elementor-post::before{
  position:absolute;z-index:3;top:14px;left:14px;
  font-family:var(--dc-body,'Roboto',sans-serif);
  font-size:11px;font-weight:700;letter-spacing:.06em;
  padding:5px 12px;border-radius:40px;
  background:rgba(255,255,255,.94);color:#0F1B3D;
  box-shadow:0 2px 10px -4px rgba(15,27,61,.5);
  pointer-events:none;}

.elementor-6501 .elementor-posts .elementor-post.category-formations::before{content:"Formations";}
.elementor-6501 .elementor-posts .elementor-post.category-partenariats::before{content:"Partenariats";}
.elementor-6501 .elementor-posts .elementor-post.category-evenements::before{content:"Événements";}
.elementor-6501 .elementor-posts .elementor-post.category-temoignages::before{content:"Témoignages";}
.elementor-6501 .elementor-posts .elementor-post.category-marche-de-lemploi::before{content:"Marché de l'emploi";}

/* Un rappel de couleur par famille, pris dans la palette de la V5 : le filet
   gauche de la pastille suffit a differencier sans transformer la grille en
   arc-en-ciel. */
.elementor-6501 .elementor-posts .elementor-post.category-formations::before{box-shadow:inset 3px 0 0 #0033A1, 0 2px 10px -4px rgba(15,27,61,.5);}
.elementor-6501 .elementor-posts .elementor-post.category-partenariats::before{box-shadow:inset 3px 0 0 #8B5CF6, 0 2px 10px -4px rgba(15,27,61,.5);}
.elementor-6501 .elementor-posts .elementor-post.category-evenements::before{box-shadow:inset 3px 0 0 #D946EF, 0 2px 10px -4px rgba(15,27,61,.5);}
.elementor-6501 .elementor-posts .elementor-post.category-temoignages::before{box-shadow:inset 3px 0 0 #22D3EE, 0 2px 10px -4px rgba(15,27,61,.5);}
.elementor-6501 .elementor-posts .elementor-post.category-marche-de-lemploi::before{box-shadow:inset 3px 0 0 #008AB7, 0 2px 10px -4px rgba(15,27,61,.5);}

/* ===========================================================================
   FILTRES D'ACTUALITÉS — 9 septembre 2026
   Le wireframe V10 : « Pills thematiques + filtres date/annee permettent un tri
   rapide SANS QUITTER LA PAGE ». Les cinq pastilles pointaient toutes vers `#`
   et les deux selecteurs de date n'etaient pas des `<select>` : rien ne
   filtrait. Sur une demo qu'on fait cliquer, c'est le genre de detail qui
   coute la confiance.

   Le filtrage s'appuie sur la classe `category-<slug>` qu'Elementor pose sur
   chaque `<article>` — la meme sur laquelle reposent deja les etiquettes.
   Pas de rechargement, pas de requete : on masque, conformement au wireframe.
   =========================================================================== */
.dc-fpill{cursor:pointer;}
.elementor-6501 .elementor-posts .elementor-post[hidden]{display:none!important;}
.dc-filtre-vide{
  grid-column:1/-1;padding:38px 0 10px;text-align:center;
  font-family:var(--dc-body,'Roboto',sans-serif);font-size:15px;color:#5F6980;}

/* Les deux menus de date. Ils avaient l'apparence de listes deroulantes — un
   chevron, un libelle — sans en etre : fausse promesse. Ils en sont
   maintenant, et le style reste celui de la page. */
.dc-menu-date{position:relative;cursor:pointer;user-select:none;}
.dc-menu-liste{
  position:absolute;z-index:40;top:calc(100% + 6px);left:0;min-width:170px;
  margin:0;padding:6px;list-style:none;
  background:#FFFFFF;border:1px solid #E2E5ED;border-radius:12px;
  box-shadow:0 14px 34px -16px rgba(15,27,61,.34);}
.dc-menu-liste li{
  padding:9px 12px;border-radius:8px;
  font-family:var(--dc-body,'Roboto',sans-serif);font-size:14px;color:#1A1D2B;
  cursor:pointer;white-space:nowrap;}
.dc-menu-liste li:hover,
.dc-menu-liste li:focus-visible{background:#F1F3F8;outline:none;}
@media (max-width:560px){
  .dc-menu-liste{left:auto;right:0;}
}

/* ===========================================================================
   TABLETTE — 768 à 1024 px — 9 septembre 2026
   L'article a la une garde la mise en page horizontale du bureau, mais sa
   colonne de texte tombe a 300 px alors que le titre reste a 28 px : SEPT
   lignes, 235 px de haut pour un seul titre. A 1024 la meme carte fait 896 px
   de large et le titre tient en quatre lignes — c'est donc bien 768 qui est le
   point dur, pas la mise en page.
   On recale la typo et on borne le nombre de lignes, comme en mobile.
   =========================================================================== */
@media (min-width:768px) and (max-width:1023px){
  .elementor-6501 .elementor-element-bb9d458 .elementor-post__title,
  .elementor-6501 .elementor-element-bb9d458 .elementor-post__title a{
    font-size:21px!important;line-height:1.3!important;}
  .elementor-6501 .elementor-element-bb9d458 .elementor-post__title{
    display:-webkit-box!important;-webkit-line-clamp:4!important;
    -webkit-box-orient:vertical!important;overflow:hidden!important;}
  .elementor-6501 .elementor-element-bb9d458 .elementor-post__excerpt,
  .elementor-6501 .elementor-element-bb9d458 .elementor-post__excerpt p{
    display:-webkit-box!important;-webkit-line-clamp:3!important;
    -webkit-box-orient:vertical!important;overflow:hidden!important;}
}

/* Les cartes de la grille, sur toute la plage tablette. */
@media (min-width:768px) and (max-width:1024px){
  .elementor-6501 .elementor-element-2dde937 .elementor-post__title{
    display:-webkit-box!important;-webkit-line-clamp:3!important;
    -webkit-box-orient:vertical!important;overflow:hidden!important;}
  .elementor-6501 .elementor-element-2dde937 .elementor-post__excerpt,
  .elementor-6501 .elementor-element-2dde937 .elementor-post__excerpt p{
    display:-webkit-box!important;-webkit-line-clamp:3!important;
    -webkit-box-orient:vertical!important;overflow:hidden!important;}
}

/* ===========================================================================
   ACTUALITES — TABLETTE — 9 septembre 2026
   =========================================================================== */

/* L'article a la une empilait deja sous 768. Entre 768 et 900, il gardait ses
   deux colonnes : le panneau blanc, decale de -84 px, recouvrait alors la
   photo sur 90 % de sa largeur — il n'en restait qu'une bande de 255 px — et
   le titre se coupait a la quatrieme ligne, en plein mot. On monte le point
   de bascule a 900, la ou la grille cesse de tenir.
   Entre 901 et 1100 les deux colonnes tiennent, mais le decalage de 84 px est
   dimensionne pour 1440 : on le ramene a 40. */
@media (max-width:900px){
  .dc-featured-card .elementor-posts .elementor-post{grid-template-columns:1fr!important;}
  .dc-featured-card .elementor-post__thumbnail{min-height:0!important;aspect-ratio:16/10!important;}
  .dc-featured-card .elementor-post__text{padding:24px!important;margin:-48px 24px 0!important;}
  .dc-featured-card .elementor-post__title,
  .dc-featured-card .elementor-post__title a{font-size:22px!important;}
}
@media (min-width:901px) and (max-width:1100px){
  .dc-featured-card .elementor-post__text{margin-left:-40px!important;padding:32px 34px!important;}
  .dc-featured-card .elementor-post__title,
  .dc-featured-card .elementor-post__title a{font-size:24px!important;}
}

/* La date etait collee sous le titre de l'article a la une, sans respiration.
   Le bloc meta portait une marge basse mais aucune marge haute. */
.dc-featured-card .elementor-post__meta-data{margin-top:10px;}

/* Fil d'Ariane : « Accueil » ne renvoie plus vers l'accueil V1. */
.elementor-6501 .dc-fil-inactif{text-decoration:none;cursor:default;}

/* Le min-height du heros est en vh : sur une fenetre haute il depasse ce que
   le contenu demande, et comme le contenu est cale en bas (flex-end), le
   surplus s'ouvre EN HAUT. Mesure : 471 px de contenu, mais 46vh vaut 497 sur
   une fenetre de 1080 — 26 px de vide, et davantage sur un ecran plus haut.
   On plafonne. Le vh reste utile comme plancher sur les petites fenetres. */
.dc-hero-profile{min-height:min(46vh,480px)!important;}

/* ===========================================================================
   ACTUALITES — LE VIDE EN BAS DE GRILLE — 9 septembre 2026
   Mesure : les trois colonnes se terminent a 2376, 2456 et 2624 — 248 px
   d'ecart, d'ou un grand blanc en bas a gauche avant le pave newsletter.
   La cause n'est pas le desalignement voulu : les cartes font
   509, 509, 734, 486, 509, 734 px. Ni les titres ni les extraits n'etaient
   brides, donc une carte a titre long ET extrait long depasse ses voisines de
   225 px, et le decalage de la colonne du milieu s'ajoute la-dessus.
   Titres a 2 lignes, extraits a 3 : le desalignement voulu reste, le vide de
   fin disparait.
   =========================================================================== */
.elementor-6501 .dc-articles-grid .elementor-post__title{
  display:-webkit-box!important;-webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;overflow:hidden!important;
  min-height:calc(2 * 1.28em)!important;}
.elementor-6501 .dc-articles-grid .elementor-post__excerpt{
  display:-webkit-box!important;-webkit-box-orient:vertical!important;
  -webkit-line-clamp:3!important;overflow:hidden!important;
  min-height:calc(3 * 1.6em)!important;}

/* « A la une » etait centre alors que tout le reste de la page est au fer a
   gauche — le wireframe ne centre que le pave « Restez informe ». */
.elementor-6501 .dc-section-label,
.elementor-6501 .dc-section-label .elementor-heading-title{
  text-align:left!important;align-self:flex-start!important;width:100%!important;}

/* Le vide en bas de grille ne venait pas du texte : la TROISIEME COLONNE est en
   portrait 4/5 (519 px d'image) quand les deux autres sont en 16/10 (274 px).
   Les 246 px d'ecart entre colonnes, c'est exactement cette difference.
   On adoucit le portrait a 3/4 — la colonne reste franchement differente et le
   vide de fin est reduit de moitie.
   ATTENTION au selecteur : la regle d'origine ne vise que `nth-child(3n+3)`.
   Ecrite sans cette restriction, elle met les SIX images en portrait et detruit
   le desalignement — c'est ce que ma premiere version a fait. */
@media (min-width:1025px){
  .elementor-6501 .dc-articles-grid .elementor-grid > .elementor-grid-item:nth-child(3n+3) .elementor-post__thumbnail{
    /* 1/1 et non 3/4 : `aspect-ratio` est largeur/hauteur, donc 3/4 ALLONGE
       (554 px) au lieu de raccourcir. Le carre donne 415 px contre 519 en 4/5,
       et reste franchement distinct des 274 px des deux autres colonnes. */
    aspect-ratio:1/1!important;}
}

/* ===========================================================================
   HEROS D'ACTUALITES — SANS PHOTO, SUR FOND DE MARQUE — 9 septembre 2026

   Ce que dit le wireframe : `.page-hero{padding:7rem 0 3rem;
   background:var(--bg-secondary)}` — un bandeau CLAIR, sans image ni voile.
   Alors que le wireframe d'A propos donne `.hero-profile{min-height:56vh}` avec
   `.hero-profile-image` et son degrade. Les deux pages sont delibérement
   traitees differemment, donc les deux heros n'ont pas a faire la meme taille.

   MAIS le bandeau clair a ete essaye et ecarte, pour une raison que le
   wireframe ne modelise pas : notre en-tete est TRANSPARENT au-dessus du heros
   sur toutes les pages, avec logo blanc et menu clair. Sur un fond clair il
   devient illisible, et le rendre opaque des le haut demanderait de toucher au
   script du socle, donc a toutes les pages.

   On garde donc l'essentiel du wireframe — PAS DE PHOTO — et on pose le fond
   de la V5 : la nappe radiale sur l'indigo, exactement le traitement du heros
   de l'accueil validee, qui n'a pas de photo non plus. Trois choses reglees :
   la photo dupliquee avec A propos disparait, le heros se rattache
   visuellement a l'accueil, et l'en-tete continue de fonctionner.
   =========================================================================== */
.elementor-6501 .dc-page-hero.dc-hero-profile{
  background-color:#140A3A!important;}
.elementor-6501 .dc-page-hero.dc-hero-profile::before{
  background-image:
    radial-gradient(46% 62% at 88% 6%,  rgba(228,91,250,.62) 0%, rgba(228,91,250,0) 70%),
    radial-gradient(52% 68% at 4% 18%,  rgba(0,138,183,.72)  0%, rgba(0,138,183,0)  74%),
    radial-gradient(44% 58% at 52% 4%,  rgba(139,92,246,.52) 0%, rgba(139,92,246,0) 72%),
    radial-gradient(56% 70% at 26% 96%, rgba(46,85,218,.50)  0%, rgba(46,85,218,0)  76%),
    radial-gradient(60% 64% at 96% 88%, rgba(139,92,246,.42) 0%, rgba(139,92,246,0) 74%)
    !important;}

/* Le grain : OUI, et ce n'est pas la meme situation que l'ecosysteme.
   Le heros de l'accueil validee en porte — `.dc-hero-grid::after`, bruit
   fractal a baseFrequency .85, opacite .45 sur un motif a .5. Puisque ce heros
   reprend le fond de l'accueil, il doit en reprendre la matiere : sans grain,
   les nappes radiales sortent trop lisses a cote.
   Ce que Yassine avait fait retirer, c'etait le grain de la section ECOSYSTEME
   — la, il salissait des logos poses sur des cellules blanches. Ici il n'y a
   que du texte blanc sur un fond sombre : rien a salir. */
.elementor-6501 .dc-page-hero.dc-hero-profile::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>");}
.elementor-6501 .dc-page-hero.dc-hero-profile > *{position:relative;z-index:1;}

/* ===========================================================================
   LES FILTRES REMONTENT DANS LE HEROS — 9 septembre 2026
   Yassine : « dans le wireframe les filtres sont dans le hero et toi tu les as
   mis plus bas ». Verifie : `filter-pills` et `filter-row` sont bien A
   L'INTERIEUR de `<section class="page-hero">`, apres le h1 et le chapeau.
   L'encart UX du wireframe explique pourquoi : « tri rapide sans quitter la
   page, pattern inspire des blogs media ». Les filtres appartiennent a
   l'en-tete de la page, pas au contenu : on doit voir « ce que je regarde » et
   « comment je le reduis » d'un seul tenant.

   Consequence : ils passent sur fond sombre et doivent etre rehabilles. Les
   pastilles etaient sombres sur blanc ; elles deviennent un contour clair sur
   la nuit, l'active en blanc plein. Meme logique que les boutons de l'en-tete
   au-dessus du heros de l'accueil.
   =========================================================================== */
.elementor-6501 .dc-page-hero .elementor-element-dbcc578{
  margin-top:28px!important;}

/* Pastilles de type */
.elementor-6501 .dc-page-hero .elementor-element-dbcc578 .elementor-button{
  background-color:transparent!important;background-image:none!important;
  border:1px solid rgba(255,255,255,.34)!important;
  color:rgba(255,255,255,.92)!important;
  transition:background-color .25s ease, border-color .25s ease, color .25s ease;}
.elementor-6501 .dc-page-hero .elementor-element-dbcc578 .elementor-button:hover{
  border-color:rgba(255,255,255,.7)!important;
  background-color:rgba(255,255,255,.10)!important;color:#fff!important;}
.elementor-6501 .dc-page-hero .elementor-element-dbcc578 .dc-filtre-actif .elementor-button,
.elementor-6501 .dc-page-hero .elementor-element-dbcc578 .elementor-button.dc-actif{
  background-color:#FFFFFF!important;color:var(--dc-text)!important;
  border-color:#FFFFFF!important;}

/* Intitules « Periode » et « Annee » */
.elementor-6501 .dc-page-hero .elementor-element-dbcc578 .elementor-heading-title{
  color:rgba(255,255,255,.72)!important;}

/* Menus deroulants de date */
.elementor-6501 .dc-page-hero .elementor-element-dbcc578 select,
.elementor-6501 .dc-page-hero .elementor-element-dbcc578 .dc-select{
  background-color:rgba(255,255,255,.10)!important;
  border:1px solid rgba(255,255,255,.34)!important;
  color:#FFFFFF!important;}
.elementor-6501 .dc-page-hero .elementor-element-dbcc578 select option{
  color:var(--dc-text)!important;background:#fff!important;}

/* Les filtres de date rejoignent les pastilles dans le heros — le wireframe met
   `filter-pills` ET `filter-row` dans `.page-hero`. Et la classe de la pastille
   active est `.dc-fpill-active`, pas `.dc-actif` : ma premiere regle ne
   touchait rien. */
.elementor-6501 .dc-page-hero .dc-fpill-active .elementor-button{
  background-color:#FFFFFF!important;background-image:none!important;
  color:var(--dc-text)!important;border-color:#FFFFFF!important;}
.elementor-6501 .dc-page-hero .dc-date-row{margin-top:14px!important;}
.elementor-6501 .dc-page-hero .dc-date-row .elementor-heading-title{
  color:rgba(255,255,255,.66)!important;}
.elementor-6501 .dc-page-hero .dc-date-row select,
.elementor-6501 .dc-page-hero .dc-date-row .dc-select,
.elementor-6501 .dc-page-hero .dc-date-row .dc-select-wrap{
  background-color:rgba(255,255,255,.10)!important;
  border:1px solid rgba(255,255,255,.34)!important;
  color:#FFFFFF!important;}
.elementor-6501 .dc-page-hero .dc-date-row select option{
  color:var(--dc-text)!important;background:#FFFFFF!important;}
.elementor-6501 .dc-page-hero .dc-date-row svg,
.elementor-6501 .dc-page-hero .dc-date-row .dc-select-wrap::after{
  color:rgba(255,255,255,.7)!important;fill:rgba(255,255,255,.7)!important;}

/* Les deux menus de date sortaient BLANCS SUR BLANC : le socle leur impose un
   fond clair avec une specificite superieure, et mon `color:#FFFFFF` rendait
   donc le texte invisible. Plutot que de surencherir pour les assombrir, on
   les laisse en champs clairs — c'est la convention pour un controle de
   formulaire, et un champ clair sur un heros sombre se lit tres bien. Seuls
   les intitules « Periode » et « Annee » restent en blanc attenue. */
.elementor-6501 .dc-page-hero .dc-date-row select,
.elementor-6501 .dc-page-hero .dc-date-row .dc-select,
.elementor-6501 .dc-page-hero .dc-date-row .dc-select-wrap,
.elementor-6501 .dc-page-hero .dc-date-row .dc-select-wrap select{
  background-color:#FFFFFF!important;
  border:1px solid rgba(255,255,255,.5)!important;
  color:var(--dc-text)!important;}
.elementor-6501 .dc-page-hero .dc-date-row svg,
.elementor-6501 .dc-page-hero .dc-date-row .dc-select-wrap::after{
  color:var(--dc-text)!important;fill:var(--dc-text)!important;}

/* Les menus de date ne sont pas des <select> : ce sont des widgets Titre
   transformes en menus (`.dc-date-select.dc-menu-date` + un <ul> masque).
   Mes regles visant `select` ne touchaient donc rien, et surtout : ma regle
   « les titres du bloc date passent en blanc » atteignait AUSSI le libelle du
   menu — « Tous les mois » — qui est lui-meme un `.elementor-heading-title`
   pose sur une pastille claire. D'ou le blanc sur blanc.
   On distingue les deux : l'intitule (`.dc-date-label`) en blanc attenue, le
   menu (`.dc-date-select`) a l'encre sur son fond clair. */
.elementor-6501 .dc-page-hero .dc-date-row .dc-date-label .elementor-heading-title{
  color:rgba(255,255,255,.66)!important;}
.elementor-6501 .dc-page-hero .dc-date-row .dc-date-select > .elementor-heading-title{
  color:var(--dc-text)!important;}
.elementor-6501 .dc-page-hero .dc-date-row .dc-date-select{
  background-color:#FFFFFF!important;border-color:rgba(255,255,255,.5)!important;}
.elementor-6501 .dc-page-hero .dc-date-row .dc-menu-liste li{
  color:var(--dc-text)!important;background:#FFFFFF!important;}

/* Le « / NL » du selecteur de langue tombe a 4,04:1 sur cette page : la nappe
   du heros est plus claire en haut a droite que la photo qu'elle remplace,
   exactement la ou vit l'en-tete. La langue inactive est a 70 % de blanc dans
   le socle ; on la remonte a 92 % ICI SEULEMENT — le socle sert toutes les
   pages, y compris l'accueil figee, et son voile d'en-tete est calibre pour
   d'autres fonds. */
body.page-id-1732 .dc-navbar:not(.dc-navbar--solid) .dc-lang .elementor-heading-title{
  color:rgba(255,255,255,.92)!important;}

/* ===========================================================================
   LES BORDS CARRES DES MENUS DE DATE — 9 septembre 2026
   Erreur de cible, de ma main. Le cadre du menu — bordure, rayon et chevron —
   vit sur le TITRE INTERIEUR (`.dc-date-select .elementor-heading-title`), pas
   sur le conteneur. J'ai pose un fond blanc et une bordure sur le CONTENEUR :
   ca dessine une boite blanche CARREE autour de la pastille arrondie, d'ou les
   angles droits. On retire ce que j'ai ajoute au mauvais endroit et on laisse
   le cadre d'origine faire son travail.
   =========================================================================== */
.elementor-6501 .dc-page-hero .dc-date-row .dc-date-select{
  background-color:transparent!important;background-image:none!important;
  border:0!important;}

/* ===========================================================================
   LA HAUTEUR DU HEROS — 9 septembre 2026
   « Le heros est trop grand par rapport au wireframe. » Mesure : 594 px, dont
   160 px de padding haut — la valeur que j'ai posee ce matin pour le heros
   PHOTOGRAPHIQUE d'A propos, et qu'Actualites a heritee en partageant la
   classe `.dc-hero-profile`. Le wireframe de cette page demande
   `padding: 7rem 0 3rem`, soit 112 et 48.
   Un heros photographique a besoin de hauteur pour que l'image existe ; un
   bandeau de titre n'en a pas besoin. On applique les valeurs du wireframe.
   =========================================================================== */
.elementor-6501 .dc-page-hero > .e-con-inner{
  padding-top:112px!important;padding-bottom:48px!important;}

/* ===========================================================================
   « A LA UNE » RESPIRE — 10 septembre 2026
   L'etiquette etait a 16 px de la carte, soit exactement le `margin-bottom:1rem`
   du wireframe. Mais chez lui la carte vedette est une BOITE BORDEE : le filet
   cree deja une separation. Chez nous c'est une photo a bord franc, et une
   etiquette de 11 px posee a 16 px d'une arete d'image se lit comme collee.
   Ecart assume au wireframe, et pour une raison de matiere : 28 px. */
/* La marge s'AJOUTE au `gap` de 16 px du conteneur : 28 en marge donnait 44 au
   total. Il en faut 12 pour arriver a 28. */
.elementor-6501 .dc-section-label{margin-bottom:12px!important;}

/* ===========================================================================
   LA CARTE A LA UNE N'AVAIT PAS DE SURVOL — 10 septembre 2026
   Les six cartes de la grille en ont un depuis le debut — `translateY(-6px)`
   plus une ombre — et la fleche de « Lire la suite » glisse, ce que le
   wireframe demande aussi (`.article-card-link:hover{gap:.5rem}`).
   La carte vedette, elle, n'avait rien : le wireframe lui donne pourtant
   `.featured-card:hover{box-shadow:0 4px 24px rgba(0,0,0,.06)}`.

   On lui donne le geste de la maison plutot que celui de la maquette : la
   photo se rapproche et le panneau se souleve. Une ombre seule ne se verrait
   pas ici — le panneau en porte deja une forte au repos, c'est ce qui le
   detache de la photo.
   =========================================================================== */
.dc-featured-card .elementor-post__thumbnail{overflow:hidden;}

/* [retire le 10/9] zoom au survol de la carte a la une */
.dc-featured-card .elementor-post__text{
  transition:transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s cubic-bezier(.22,.61,.36,1);}
.dc-featured-card .elementor-post:hover .elementor-post__text,
.dc-featured-card .elementor-post:focus-within .elementor-post__text{
  transform:translateY(-4px);
  box-shadow:0 40px 72px -26px rgba(15,27,61,.34);}
.dc-featured-card .elementor-post__read-more{
  display:inline-flex;align-items:center;gap:8px;
  transition:gap .25s cubic-bezier(.4,0,.2,1);}
.dc-featured-card .elementor-post:hover .elementor-post__read-more{gap:14px;}
@media (prefers-reduced-motion:reduce){
  /* [11 septembre 2026] L'IMAGE EST SORTIE DE CE SELECTEUR.
     Son `transform` n'est pas un effet : c'est son PLACEMENT. Elementor pose
     la vignette en `position:absolute; top:50%; left:50%` et la recentre par
     `translate(-50%,-50%)`. Le forcer a `none` la deplacait de 191 px vers le
     bas a droite, hors de son cadre — mesure : cadre x24->398 y761, image
     x212->586 y879 a 390 px, et le meme decalage a 1440. Visible par tout
     visiteur ayant active « Reduire les animations » (reglage courant sur
     iOS), sur mobile comme sur bureau.
     C'est mot pour mot l'erreur corrigee au survol le 10 septembre — voir la
     note « LE MOUVEMENT RESIDUEL DES IMAGES AU SURVOL » plus bas : la bonne
     facon d'annuler un mouvement n'est pas de forcer `none`, c'est de
     neutraliser la regle qui le pose. Ici il n'y avait rien a annuler :
     l'apparition passe par `animation`, la parallaxe par `object-position`
     (`--pary`), et les deux sont deja neutralisees plus bas. */
  .dc-featured-card .elementor-post__thumbnail img{transition:none!important;}
  .dc-featured-card .elementor-post__text{transition:none!important;transform:none!important;}
}

/* ===========================================================================
   LE MOUVEMENT RESIDUEL DES IMAGES AU SURVOL — 10 septembre 2026
   Yassine : « l'image se deplace encore ». C'etait MA correction qui le
   causait. Au repos, Elementor pose sur la vignette un
   `matrix(1.01, 0, 0, 1.01, -221, -147)` — ce n'est pas un effet, c'est son
   PLACEMENT de l'image dans son cadre. En ecrivant `transform:none` au survol
   pour annuler le zoom, j'effacais aussi ce placement : l'image sautait de
   -221/-147 a 0/0.
   La bonne facon d'annuler un zoom n'est pas de forcer `none`, c'est de
   neutraliser la regle qui le pose. On supprime donc les deux regles de zoom
   a la source, et l'image ne bouge plus du tout.
   =========================================================================== */

/* ===========================================================================
   LA CARTE REPREND LA COMPOSITION DU WIREFRAME — 10 septembre 2026
   Yassine : « les elements ne sont pas places au meme endroit sur la carte,
   c'est volontaire ? » Reponse honnete : NON, aucune des deux differences ne
   l'etait.

       Wireframe                          Nous
       .article-card-image                image
       .article-card-body                 corps
         .article-card-meta                 TITRE
           category-tag + date              date
         h3                                 extrait
         .article-card-excerpt              lien
         .article-card-link

   1. L'etiquette de categorie posee SUR L'IMAGE etait un CONTOURNEMENT, pas un
      choix : Elementor n'emet aucun `.elementor-post__badge` malgre les
      reglages, on l'a donc dessinee en CSS a partir de la classe
      `category-<slug>` — et on l'a mise la ou il y avait de la place.
   2. La date APRES le titre est simplement l'ordre par defaut d'Elementor.

   On revient au wireframe : etiquette et date ensemble sur une ligne de meta,
   AU-DESSUS du titre. L'etiquette quitte l'image pour le corps, ou elle est
   dessinee sur `.elementor-post__meta-data::before`.
   =========================================================================== */

/* L'etiquette quitte l'image. */
.elementor-6501 .dc-articles-grid .elementor-post::before{display:none!important;}

/* Le corps devient une colonne ordonnee : meta, titre, extrait, lien. */
.elementor-6501 .dc-articles-grid .elementor-post__text{
  display:flex!important;flex-direction:column!important;}
.elementor-6501 .dc-articles-grid .elementor-post__meta-data{order:1!important;margin-bottom:10px!important;}
.elementor-6501 .dc-articles-grid .elementor-post__title{order:2!important;margin-bottom:8px!important;}
.elementor-6501 .dc-articles-grid .elementor-post__excerpt{order:3!important;}
.elementor-6501 .dc-articles-grid .elementor-post__read-more{order:4!important;margin-top:auto!important;}

/* La ligne de meta porte l'etiquette et la date, cote a cote. */
.elementor-6501 .dc-articles-grid .elementor-post__meta-data{
  display:flex!important;align-items:center!important;gap:10px!important;
  flex-wrap:wrap!important;}
.elementor-6501 .dc-articles-grid .elementor-post__meta-data::before{
  font-family:var(--dc-body);font-size:11px;font-weight:700;letter-spacing:.06em;
  padding:4px 10px;border-radius:40px;
  background:transparent;border:1px solid currentColor;
  white-space:nowrap;}
.elementor-6501 .dc-articles-grid .elementor-post.category-formations .elementor-post__meta-data::before{content:"Formations";color:#0033A1;border-color:#0033A1;}
.elementor-6501 .dc-articles-grid .elementor-post.category-partenariats .elementor-post__meta-data::before{content:"Partenariats";color:#8B5CF6;border-color:#8B5CF6;}
.elementor-6501 .dc-articles-grid .elementor-post.category-evenements .elementor-post__meta-data::before{content:"Événements";color:#D946EF;border-color:#D946EF;}
.elementor-6501 .dc-articles-grid .elementor-post.category-temoignages .elementor-post__meta-data::before{content:"Témoignages";color:#22D3EE;border-color:#22D3EE;}
.elementor-6501 .dc-articles-grid .elementor-post.category-marche-de-lemploi .elementor-post__meta-data::before{content:"Marché de l'emploi";color:#008AB7;border-color:#008AB7;}

/* Les couleurs de categorie changent de support : posees en TEXTE sur du blanc,
   elles doivent tenir 4,5:1 a 11 px, alors qu'en PASTILLE PLEINE sur une photo
   elles n'avaient aucune contrainte — c'etait du #0F1B3D sur un fond blanc a
   94 %%. Quatre des cinq teintes d'origine echouent sur blanc, dont le cyan des
   temoignages a 1,9:1. On prend les variantes sombres de la meme famille,
   celles deja etablies pour le carrefour d'A propos.
   A RETENIR : une couleur de marque ne se transpose pas d'un support a l'autre
   sans remesure. */
.elementor-6501 .dc-articles-grid .elementor-post.category-formations .elementor-post__meta-data::before{content:"Formations";color:#0033A1;border-color:#0033A1;}
.elementor-6501 .dc-articles-grid .elementor-post.category-partenariats .elementor-post__meta-data::before{content:"Partenariats";color:#6D28D9;border-color:#6D28D9;}
.elementor-6501 .dc-articles-grid .elementor-post.category-evenements .elementor-post__meta-data::before{content:"Événements";color:#A21CAF;border-color:#A21CAF;}
.elementor-6501 .dc-articles-grid .elementor-post.category-temoignages .elementor-post__meta-data::before{content:"Témoignages";color:#0E7490;border-color:#0E7490;}
.elementor-6501 .dc-articles-grid .elementor-post.category-marche-de-lemploi .elementor-post__meta-data::before{content:"Marché de l'emploi";color:#00688A;border-color:#00688A;}

/* ===========================================================================
   LA CARTE A LA UNE REPREND SA COMPOSITION — 10 septembre 2026
   Meme ecart que sur les cartes de grille, et meme cause : l'etiquette posee
   sur l'image etait un contournement, la date apres le titre l'ordre par
   defaut d'Elementor.
       Wireframe : category-tag / date / h2 / extrait / lire la suite
   Une nuance par rapport aux cartes de grille : ici le wireframe EMPILE
   l'etiquette et la date (deux blocs distincts) au lieu de les mettre cote a
   cote. On respecte les deux traitements — la carte vedette a plus de place,
   elle peut se permettre l'empilement.
   =========================================================================== */
.elementor-6501 .dc-featured-card .elementor-post::before{display:none!important;}
.elementor-6501 .dc-featured-card .elementor-post__text{
  display:flex!important;flex-direction:column!important;}
.elementor-6501 .dc-featured-card .elementor-post__meta-data{
  order:1!important;display:flex!important;flex-direction:column!important;
  align-items:flex-start!important;gap:12px!important;margin-bottom:14px!important;}
.elementor-6501 .dc-featured-card .elementor-post__title{order:2!important;margin-bottom:12px!important;}
.elementor-6501 .dc-featured-card .elementor-post__excerpt{order:3!important;}
.elementor-6501 .dc-featured-card .elementor-post__read-more{order:4!important;margin-top:18px!important;}
.elementor-6501 .dc-featured-card .elementor-post__meta-data::before{
  font-family:var(--dc-body);font-size:11px;font-weight:700;letter-spacing:.06em;
  padding:5px 12px;border-radius:40px;
  background:transparent;border:1px solid currentColor;white-space:nowrap;}
.elementor-6501 .dc-featured-card .elementor-post.category-formations .elementor-post__meta-data::before{content:"Formations";color:#0033A1;border-color:#0033A1;}
.elementor-6501 .dc-featured-card .elementor-post.category-partenariats .elementor-post__meta-data::before{content:"Partenariats";color:#6D28D9;border-color:#6D28D9;}
.elementor-6501 .dc-featured-card .elementor-post.category-evenements .elementor-post__meta-data::before{content:"Événements";color:#A21CAF;border-color:#A21CAF;}
.elementor-6501 .dc-featured-card .elementor-post.category-temoignages .elementor-post__meta-data::before{content:"Témoignages";color:#0E7490;border-color:#0E7490;}
.elementor-6501 .dc-featured-card .elementor-post.category-marche-de-lemploi .elementor-post__meta-data::before{content:"Marché de l'emploi";color:#00688A;border-color:#00688A;}

/* ===========================================================================
   LE « FLOTTEMENT » DE L'ARTICLE A LA UNE — 10 septembre 2026
   Yassine demande un leger effet de flottement. Pas de flottement PERPETUEL,
   et pour trois raisons :
   1. Le panneau flotte deja visuellement — c'est son ombre portee et son
      debord sur la photo qui le disent. L'effet est obtenu statiquement.
   2. Une boucle sur l'element le plus important de la page entre en
      concurrence avec sa lecture. C'est le meme raisonnement que pour le
      balayage des evenements sur l'accueil : « une boucle serait du
      clignotement decoratif permanent ; un seul passage se lit comme un
      materiau qui accroche la lumiere. »
   3. Le langage de mouvement du site est celui-la : les choses REPONDENT — au
      survol, a l'entree dans l'ecran — rien ne tourne en boucle.

   Ce qu'on fait a la place : le panneau se pose a l'entree dans l'ecran. Il
   arrive de 18 px plus bas, avec son ombre qui se densifie. On percoit un
   objet qui vient se placer au-dessus de la photo — l'impression de flottement
   sans le mouvement perpetuel.
   Meme discipline que partout ailleurs : `backwards`, donc AUCUN etat de repos
   cache. Sans script, le panneau est simplement la.
   =========================================================================== */
@keyframes dc-une-pose{
  from{opacity:0;transform:translateY(18px);box-shadow:0 10px 24px -18px rgba(15,27,61,.20);}
  to  {opacity:1;transform:none;box-shadow:0 32px 64px -24px rgba(15,27,61,.28);}}
.elementor-6501 .dc-featured-card.dc-une-go .elementor-post__text{
  animation:dc-une-pose .85s cubic-bezier(.16,1,.3,1) backwards;}
@media (prefers-reduced-motion:reduce){
  .elementor-6501 .dc-featured-card.dc-une-go .elementor-post__text{animation:none!important;}
}

/* ===========================================================================
   L'EMBOITEMENT DES CARTES ET LE FLOTTEMENT AU SCROLL — 10 septembre 2026
   Les deux gestes que la recherche designe comme le coeur du « broken grid » :
   des cellules dimensionnees differemment, et un rythme qui ne s'aligne pas.

   1. TROIS RAPPORTS D'IMAGE, UN PAR COLONNE. Jusqu'ici les colonnes 1 et 2
      etaient identiques (16/10) et seule la 3 differait. Trois formats
      distincts font que les cartes s'emboitent au lieu de s'aligner :
        colonne 1 : 16/10 (paysage)   ~274 px
        colonne 2 : 4/3   (intermediaire) ~311 px
        colonne 3 : 1/1   (carre)     ~415 px
   2. UN DECALAGE EN CASCADE. 0 / 40 / -32 : la colonne du milieu descend, la
      troisieme REMONTE. Sa carte, la plus haute, vient donc se loger a cote du
      texte des voisines au lieu de depasser sous elles. C'est ca, l'emboitement
      — et accessoirement ca reduit encore le vide de fin.

   LE PARALLAXE : `.elementor-post` EST l'item de grille, il n'y a pas de
   conteneur intermediaire. Le survol et le parallaxe se disputeraient donc le
   meme `transform`. On les compose par une variable : le script n'ecrit que
   `--par`, le survol n'ecrit que son propre decalage, et la regle CSS les
   additionne. Aucun des deux n'ecrase l'autre.
   =========================================================================== */
@media (min-width:1025px){
  
  
  

  
  
  

  /* [10/9, soir] Retire avec le parallaxe de grille : cette regle imposait un
     `transform` en !important sur CHAQUE carte, et une declaration !important
     passe devant une animation. Elle empechait donc l'apparition au defilement
     de faire monter les cartes — l'opacite passait, pas le mouvement.
     Le survol garde son propre transform, plus bas. */
}
@media (prefers-reduced-motion:reduce){
  .elementor-6501 .dc-articles-grid .elementor-post{--par:0px!important;}
}

/* ===========================================================================
   L'EMBOITEMENT, VRAIMENT — 10 septembre 2026
   Yassine : « les articles ne s'emboitent pas ». Il a raison, et la cause est
   structurelle : une grille CSS conserve la notion de RANGEE. La ligne 2
   demarre apres la carte la plus haute de la ligne 1, ce qui laisse une bande
   blanche en travers de toute la largeur — et tant qu'il y a une bande, il n'y
   a pas d'emboitement, quels que soient les decalages et les formats d'image.

   Il faut donc supprimer la rangee. Trois voies possibles :
     - `grid-template-rows: masonry` : support insuffisant, ecarte.
     - `column-count: 3` : vraie maconnerie, mais le flux devient VERTICAL —
       la premiere ligne montrerait les articles 1, 3 et 5. Sur une liste
       classee par date, l'ordre de lecture serait faux. Ecarte pour ca.
     - la maconnerie par `grid-row: span N` : chaque carte occupe autant
       d'unites de rangee que sa hauteur. Le remplissage reste de GAUCHE A
       DROITE, donc l'ordre chronologique est conserve, et les rangees
       disparaissent. C'est celle-la.

   La grille passe donc a des rangees de 4 px, et le script calcule le `span`
   de chaque carte. Sans script, `grid-auto-rows` n'est pas applique et la
   grille reste celle d'avant : aucune casse possible.
   =========================================================================== */
@media (min-width:1025px){
  .elementor-6501 .dc-articles-grid .elementor-grid.dc-maconnerie{
    grid-auto-rows:2px!important;  /* [11/9] pas divise par deux : l'ecart entre rangees ne varie plus que d'1 px au lieu de 3 */
    row-gap:0!important;
    align-items:start!important;}
}

/* Le parallaxe manquait sur l'article a la une : il n'etait pose que sur la
   grille. Le panneau derive legerement plus vite que sa photo — c'est le
   DECALAGE entre les deux qui fait le flottement, pas le mouvement absolu. */
@media (min-width:1025px){
  .elementor-6501 .dc-featured-card .elementor-post__text{
    --par:0px;
    transform:translate3d(0, var(--par), 0);}
  .elementor-6501 .dc-featured-card .elementor-post:hover .elementor-post__text,
  .elementor-6501 .dc-featured-card .elementor-post:focus-within .elementor-post__text{
    transform:translate3d(0, calc(var(--par) - 4px), 0);}
}
@media (prefers-reduced-motion:reduce){
  .elementor-6501 .dc-featured-card .elementor-post__text{--par:0px!important;}
}

/* Meme retrait sur la liste : ce sont les MEMES cartes, elles doivent se
   comporter pareil. Laisser le soulevement ici et pas sur la fiche recreerait
   exactement le defaut releve quatre fois aujourd'hui — deux versions du meme
   composant selon la page.
   Le parallaxe reste : il ne s'ecrit que dans `--par`, donc le transform
   conserve la derive de colonne et perd seulement les -6 px du survol. */
/* [remis le 10/9] Le soulevement revient. Il se compose toujours avec le
   parallaxe par la variable : la carte garde la derive de sa colonne ET
   remonte de 6 px au survol. */
.elementor-6501 .dc-articles-grid .elementor-post:hover,
.elementor-6501 .dc-articles-grid .elementor-post:focus-within{
  transform:translateY(-6px)!important;}
.elementor-6501 .dc-featured-card .elementor-post:hover .elementor-post__text,
.elementor-6501 .dc-featured-card .elementor-post:focus-within .elementor-post__text{
  transform:translate3d(0, calc(var(--par) - 4px), 0)!important;}

/* ===========================================================================
   LA MACONNERIE N'AVAIT RIEN A EMBOITER — 10 septembre 2026
   Yassine : « les articles ne sont toujours pas emboites ». Le mecanisme
   marchait pourtant : les spans calculés valaient 142, 162, 170, 142, 162, 170.
   Regardez-les : IDENTIQUES PAR COLONNE. Toutes les cartes d'une meme colonne
   font exactement la meme hauteur, donc la deuxieme rangee demarre au meme
   niveau partout — c'est-a-dire une grille ordinaire.

   Et c'est moi qui l'avais provoque, hier soir, en deux gestes :
     - titres brides a 2 lignes et extraits a 3, pour egaliser les cartes ;
     - UN rapport d'image PAR COLONNE.
   Les deux visaient a fermer le vide en bas de grille. Ils ont supprimé la
   seule matiere dont une maconnerie se nourrit : la difference de hauteur.
   C'est exactement ce que la recherche disait — « des cellules dimensionnees
   par leur contenu reel plutot que forcees a une taille uniforme » — et je
   l'avais note avant de faire l'inverse.

   On rend donc aux cartes leur hauteur propre :
     1. plus de bridage : titres et extraits reprennent leur longueur reelle ;
     2. le rapport d'image cycle sur QUATRE valeurs, pas trois — ainsi il ne
        retombe jamais sur la meme colonne d'une rangee a l'autre.
   =========================================================================== */

/* 1. Les bridages sautent. */
.elementor-6501 .dc-articles-grid .elementor-post__title{
  display:block!important;-webkit-line-clamp:none!important;
  overflow:visible!important;min-height:0!important;}
.elementor-6501 .dc-articles-grid .elementor-post__excerpt{
  display:block!important;-webkit-line-clamp:none!important;
  overflow:visible!important;min-height:0!important;}

/* 2. Quatre rapports en cycle sur trois colonnes : aucune colonne ne repete le
      meme format d'une rangee a l'autre. */
@media (min-width:1025px){
  .elementor-6501 .dc-articles-grid .elementor-grid > *:nth-child(4n+1) .elementor-post__thumbnail{aspect-ratio:16/10!important;}
  .elementor-6501 .dc-articles-grid .elementor-grid > *:nth-child(4n+2) .elementor-post__thumbnail{aspect-ratio:1/1!important;}
  .elementor-6501 .dc-articles-grid .elementor-grid > *:nth-child(4n+3) .elementor-post__thumbnail{aspect-ratio:4/3!important;}
  .elementor-6501 .dc-articles-grid .elementor-grid > *:nth-child(4n+4) .elementor-post__thumbnail{aspect-ratio:3/2!important;}

  /* Les decalages de colonne n'ont plus lieu d'etre : c'est la maconnerie qui
     fait le desalignement maintenant, et un decalage en plus le brouillerait. */
  .elementor-6501 .dc-articles-grid .elementor-grid > *{margin-top:0!important;}
}

/* 3. LE PARALLAXE QUITTE LA GRILLE.
   « Il apporte quelque chose ? » Non, et il nuit meme : chaque colonne derivant
   a sa propre vitesse, les cartes se decalent les unes par rapport aux autres
   pendant le defilement — donc l'emboitement, qui est justement un rapport de
   hauteurs entre voisines, se brouille au moment ou on le regarde. Le desordre
   doit venir de la mise en page, pas du mouvement. */
@media (min-width:1025px){
  /* [10/9, soir] Le widget de script du parallaxe de grille est SUPPRIME de la
     page ; il n'y a donc plus rien a neutraliser ici. On retire aussi le
     `transform:none!important` qui restait : il gagnait contre l'animation
     d'apparition et bloquait la montee des cartes. */
  .elementor-6501 .dc-articles-grid .elementor-post:hover,
  .elementor-6501 .dc-articles-grid .elementor-post:focus-within{
    transform:translateY(-6px)!important;}
}

/* ===========================================================================
   LE PARALLAXE SUR L'IMAGE DE L'ARTICLE A LA UNE — 10 septembre 2026
   Yassine le voulait sur l'IMAGE, pas seulement sur le panneau.
   On ne peut pas le faire par `transform` : Elementor pose deja sur cette
   image un `matrix(1.01, …, -351, -234)` qui est son placement dans le cadre.
   L'ecraser, c'est le saut de 351 px qu'on a passe une heure a corriger.
   On passe donc par `object-position` : l'image est en `object-fit:cover`,
   donc la deplacer dans son cadre ne touche a aucun transform. C'est meme la
   facon la plus propre de faire un parallaxe sur une image rognee — rien ne
   deborde, rien ne se redimensionne.
   =========================================================================== */
@media (min-width:1025px){
  .elementor-6501 .dc-featured-card .elementor-post__thumbnail img{
    --pary:0px;
    object-position:50% calc(50% + var(--pary))!important;}
}


/* ===========================================================================
   LES COINS ARRONDIS EN BAS DES VIGNETTES — 10 septembre 2026
   Yassine : « pourquoi l'image de Webinaire a les bords arrondis aussi en bas ? »
   Ce n'est pas cette carte-la : c'est TOUTES les images du site. Le kit
   Elementor porte `.elementor-kit-7 img{border-radius:16px}` — un reglage
   global. Dans une carte, l'image occupe le haut : ses coins hauts se
   confondent avec ceux de la carte et ne se voient pas, mais ses coins BAS
   s'arrondissent au milieu du bloc, sur le fond blanc, et laissent deux
   encoches. Elles se remarquent la ou le bas de la photo est sombre.
   Dans une carte, c'est la carte qui arrondit (elle a deja overflow:hidden) ;
   l'image, elle, doit remplir son cadre au carre.
   =========================================================================== */
.elementor-6501 .dc-articles-grid .elementor-post__thumbnail img,
.elementor-6501 .dc-featured-card .elementor-post__thumbnail img{border-radius:0!important;}

/* ===========================================================================
   LES DEUX RATIOS QUI SE BATTAIENT — 10 septembre 2026
   Mesure faite en cherchant les coins arrondis : sur les cartes en 16/10 le
   cadre de la vignette faisait 438 px de large dans une carte de 415.
   Elementor donne sa hauteur d'image par la vieille ruse du `padding-bottom`
   en pourcentage (ici 274 px). Notre `aspect-ratio` s'ajoute par-dessus au
   lieu de la remplacer : le padding impose un plancher de hauteur, et c'est
   la LARGEUR que le ratio recalcule alors pour s'y tenir. L'image debordait
   donc de 23 px, rognee par l'`overflow:hidden` de la carte — invisible, mais
   le cadrage etait decale vers la gauche et la hauteur fausse, ce qui fausse
   aussi les pas de la maconnerie.
   On coupe le padding : le ratio gouverne seul.
   =========================================================================== */
@media (min-width:1025px){
  .elementor-6501 .dc-articles-grid .elementor-post__thumbnail{padding-bottom:0!important;}
}

/* ===========================================================================
   LE TELEPHONE — 10 septembre 2026, nuit
   Mesure a 390 px : la vignette faisait 342 x 165, soit un rapport de 2,07.
   C'est le `padding-bottom` d'Elementor livre a lui-meme, et c'est plat — une
   fente, pas une photo. En une colonne, on peut faire mieux que sur bureau :
   deux rapports qui alternent d'une carte a l'autre donnent du rythme a la
   descente sans qu'aucune question d'alignement se pose.
   Entre 768 et 1024 px, la grille est a deux colonnes et son rapport tombe
   deja sur 3/2 : on n'y touche pas, alterner y decalerait le depart des
   textes d'une colonne a l'autre sans maconnerie pour le rattraper.
   =========================================================================== */
@media (max-width:767px){
  .elementor-6501 .dc-articles-grid .elementor-post__thumbnail{
    padding-bottom:0!important;aspect-ratio:16/10!important;}
  .elementor-6501 .dc-articles-grid .elementor-grid > *:nth-child(2n) .elementor-post__thumbnail{
    aspect-ratio:4/3!important;}
}

/* La mention legale de l'infolettre etait a 12 px : c'est la seule ligne du
   site sous 13, et sur telephone elle se lit mal. */
.elementor-6501 .dc-newsletter .dc-newsletter-legal,
.elementor-6501 .dc-newsletter p:last-child{font-size:13px!important;}

/* ===========================================================================
   TABLETTE : L'EXTRAIT COUPE EN PLEINE PHRASE — 10 septembre 2026, nuit
   Releve a 768 px : « … certifications Microsoft Azure a prix… ». Le bridage
   a trois lignes date d'une session ou la colonne etait plus large ; a 768 le
   meme texte demande quatre lignes (hauteur reelle 84 px pour 63 disponibles),
   et il manquait donc DEUX MOTS. Un extrait coupe au milieu d'un mot n'est pas
   un extrait, c'est un defaut.
   On garde un plafond — sinon un extrait long deforme la rangee — mais a
   quatre lignes, la ou le texte reel tient.
   =========================================================================== */
@media (min-width:768px) and (max-width:1024px){
  .elementor-6501 .dc-articles-grid .elementor-post__excerpt,
  .elementor-6501 .dc-articles-grid .elementor-post__excerpt p,
  .elementor-6501 .elementor-element-2dde937 .elementor-post__excerpt,
  .elementor-6501 .elementor-element-2dde937 .elementor-post__excerpt p{
    -webkit-line-clamp:4!important;}
}



/* ===========================================================================
   UNE PHOTO SOUS LE HEROS D'ACTUALITES — ESSAYEE PUIS RETIREE, 10/09/2026
   Demande d'Hamza : « il faudrait ajouter une image de fond pour coller avec
   le reste ». Essayee avec l'auditorium Digitalcity, sous le voile lineaire
   d'A propos puis sous un voile renforce. RETIREE, pour trois raisons mesurees :

   1. LA PREMISSE NE TIENT PAS. Sur les trois heros du lot, un seul porte une
      photo — celui d'A PROPOS. L'accueil V5, qui EST la reference artistique
      validee, n'en a pas : fond #140A3A et nappe de radiales. « Coller avec le
      reste », c'est donc aussi bien retirer la photo d'A propos qu'en ajouter
      une ici. C'est une question a trancher, pas un correctif.
   2. LE CONTRASTE CHUTE. Titre a 15:1 sur le fond plein, 5,3:1 avec la photo
      meme sous voile renforce — la zone claire de l'image est en haut a droite,
      la ou le voile lineaire est le plus faible.
   3. L'IMAGE EST FAIBLE POUR CETTE SECTION. Un auditorium VIDE pour
      « Actualites & Evenements » dit le contraire de ce que la page raconte.

   Pour y revenir il faut d'abord une meilleure photo — des gens, pas une salle
   — et accepter un voile assez fort pour que le titre reste au-dessus de 10:1.
   =========================================================================== */




/* ===========================================================================
   LA PHOTO DU HEROS D'ACTUALITES — 10 septembre 2026 (2e passe, retenue)
   Demande d'Hamza, confirmee par Yassine, qui a corrige mon compte : la fiche
   article ET la page A propos ont bien une image dans leur heros. Actualites
   etait donc le seul heros de contenu sans photo — et l'accueil V5, si elle
   n'a pas d'image de fond, a bien des images dans ses cartes. La critique
   tient.

   LE CHOIX DE LA PHOTO. Huit candidates comparees au format du heros. Retenue :
   un PUBLIC EN SALLE, badges au cou — la seule qui dise « evenements » plutot
   que « bureau ». C'est aussi la plus sombre du lot, ce qui laisse le titre
   respirer sans ecraser l'image sous le voile.
   Reserve a connaitre : c'est l'image a la une de l'article « Digitalcity
   rejoint le reseau europeen », qui figure aussi dans la grille plus bas. Sous
   ce voile elle se lit comme une matiere et non comme un sujet, mais si la
   repetition gene, il suffit de changer l'URL ci-dessous.

   LE DOSAGE. Premiere tentative (auditorium vide, voile lineaire) : titre a
   5,3:1. Ici le voile est plus enveloppant — une nappe generale par-dessus le
   degize lineaire — et vise 10:1 au titre. Rappel : la PREMIERE couche est
   AU-DESSUS.
   =========================================================================== */
/* [20/10] LA PHOTO EST DESORMAIS LE FOND NATIF DU HEROS (Elementor > Style >
   Arriere-plan, taille « couvrir », position 46 % / 34 %). Les deux voiles qui la
   protegeaient restent ici : ils passent dans le ::before, SOUS les nappes radiales
   et AU-DESSUS de la photo, exactement dans l'ordre d'avant. Les notes de dosage
   ci-dessous sont conservees telles quelles. */
/* [dosage 3] Le voile a .93/.86/.78/.72 laissait les PETITS textes du heros
       decrocher : fil d'Ariane a 4,35:1, sur-titre a 4,34, « Periode » a 1,56.
       Le titre allait bien (8,5) mais c'est du texte large — les 13 px, eux,
       exigent 4,5. On remonte l'ensemble et surtout le HAUT et le BAS, ou se
       trouvent justement le fil d'Ariane et la ligne de filtres. La photo perd
       en presence, mais elle reste ce qu'elle doit etre : une matiere. */
/* [dosage 4 — proposition de Yassine, et c'est la bonne] « Peut-etre mettre
       le cote gauche, la ou il y a du texte, plus fonce, et le cote droit plus
       clair ». C'est exactement ainsi qu'on protege un texte sans noyer une
       photo : un voile HORIZONTAL plutot qu'uniforme. Le texte occupe le tiers
       gauche, la photo respire a droite.
       Deux couches : d'abord l'horizontale (.94 a gauche -> .34 a droite), puis
       une verticale legere qui ne sert qu'a tenir la ligne de filtres en bas,
       la ou « Periode » decrochait a 1,56:1. */
/* [ajout] La verticale ne tient plus seulement le bas : elle remonte aussi
       vers le HAUT, ou passe la barre de navigation. Sur la photo precedente le
       haut etait sombre ; sur celle-ci il est clair, et « Se connecter » tombait
       a 3,18:1. Meme correction que sur le heros d'article. */
/* [10/9] Photo changee. Yassine : « il y a beaucoup de femmes voilees dessus
       alors que c'est un organisme a Bruxelles ; on peut en avoir mais pas que
       ca ». Verifie dans le cadrage reel : la zone visible du public tombait
       sur les foulards, et la photo etant rognee en hauteur, aucun deplacement
       lateral ne rattrapait le cadrage.
       Remplacee par une session de travail : une intervenante debout face a des
       participants assis — meme registre (des gens, un moment collectif), sans
       qu'un groupe domine la lecture.
       Le vrai correctif reste un ASSET : une photo d'un vrai evenement
       Digitalcity, en tete de la liste a demander a Noemie. */
.elementor-6501 .dc-page-hero.dc-hero-profile::before{
  background-image:
    radial-gradient(46% 62% at 88% 6%,  rgba(228,91,250,.62) 0%, rgba(228,91,250,0) 70%),
    radial-gradient(52% 68% at 4% 18%,  rgba(0,138,183,.72)  0%, rgba(0,138,183,0)  74%),
    radial-gradient(44% 58% at 52% 4%,  rgba(139,92,246,.52) 0%, rgba(139,92,246,0) 72%),
    radial-gradient(56% 70% at 26% 96%, rgba(46,85,218,.50)  0%, rgba(46,85,218,0)  76%),
    radial-gradient(60% 64% at 96% 88%, rgba(139,92,246,.42) 0%, rgba(139,92,246,0) 74%),
    linear-gradient(90deg,
      rgba(12,16,44,.94) 0%,
      rgba(12,16,44,.90) 26%,
      rgba(12,16,44,.72) 46%,
      rgba(12,16,44,.46) 70%,
      rgba(12,16,44,.34) 100%),
    linear-gradient(0deg,
      rgba(12,16,44,.62) 0%,
      rgba(12,16,44,.30) 24%,
      rgba(12,16,44,0) 50%,
      rgba(12,16,44,.30) 76%,
      rgba(12,16,44,.56) 100%)
    !important;}




/* --- LE GRAIN SUR UNE PHOTO — 10 septembre 2026 ----------------------------
   Yassine : « je vois que tu as mis un grain par-dessus, c'est le meilleur
   choix ? » Question juste, et la reponse change avec la photo.
   Le grain avait ete pose quand le heros etait un APLAT : sur une couleur
   plate, il donne la matiere qui manque, et c'est ce qui relie ce heros a ceux
   de la V5. Sur une PHOTO, la matiere existe deja — le grain se superpose au
   grain naturel de l'image et ne fait plus qu'ajouter du bruit.
   On ne le supprime pas : il tient encore le lien avec la famille V5 et il
   adoucit la limite entre la zone voilee et la zone claire. Mais il passe de
   .45 a .18 — present sur le fond, invisible sur la photo.
   -------------------------------------------------------------------------- */
.elementor-6501 .dc-page-hero.dc-hero-profile::after{opacity:.18!important;}

/* ===========================================================================
   MOBILE — LA CARTE A LA UNE SORTAIT DE L'ECRAN A DROITE — 11 septembre 2026
   Sous 900 px le panneau blanc est pose en `margin:-48px 24px 0` : 24 px de
   retrait de chaque cote. A gauche il les prenait, a droite non — il touchait
   le bord de l'ecran, coin arrondi et ombre portee coupes, et la composition
   se lisait de travers (photo a 24 px du bord gauche, carte a 0 du droit).
   Mesure a 390 px : colonne 342, carte x48->390, `width` calcule a 342px.
   Cause : Elementor pose `width:100%` sur `.elementor-post__text`. Une largeur
   EXPLICITE rend la marge droite inoperante — la boite est deja dimensionnee,
   la marge n'a plus rien a reprendre ; la marge gauche, elle, se voit, parce
   qu'elle DECALE la boite au lieu de la retrecir. D'ou l'asymetrie.
   Correctif : rendre la largeur a `auto`, pour que les deux marges comptent.
   =========================================================================== */
@media (max-width:900px){
  .dc-featured-card .elementor-post__text{width:auto!important;}
}

/* ===========================================================================
   MOBILE — LE CADRE DE LA PHOTO A LA UNE FAISAIT 374 PX DANS 342 — 11/9/2026
   Troisieme occurrence du defaut du 10 septembre (« les deux rapports d'image
   qui se battaient »), a l'endroit ou il avait ete manque.
   `.dc-featured-card .elementor-post__thumbnail` porte `height:100%` depuis la
   regle de bureau ; sous 900 on lui ajoute `aspect-ratio:16/10`. La hauteur
   etant deja imposee (234 px), c'est la LARGEUR que le rapport recalcule :
   234 x 1,6 = 374 px dans un cadre de 342. Le debordement ne se voyait pas —
   le lien porte `overflow:hidden` — mais la photo etait rognee de 32 px et
   decentree de 16, et le cadrage 16/10 annonce n'etait pas celui qu'on voyait
   (342 / 234 = 1,46).
   Correctif : rendre la hauteur a `auto` sous 900, pour que le rapport la
   calcule a partir de la largeur et non l'inverse.
   =========================================================================== */
@media (max-width:900px){
  .dc-featured-card .elementor-post__thumbnail{height:auto!important;}
}

/* ===========================================================================
   MOBILE — L'ARTICLE A LA UNE REDEVIENT UN SEUL BLOC — 11 septembre 2026
   Yassine : « faudrait tout mettre dans un meme bloc, pour pas que l'image
   soit en dehors et a part ». Juste, et la raison est structurelle : le
   chevauchement a ete DESSINE POUR LE BUREAU, ou la photo et le panneau sont
   cote a cote et ou le decalage de -84 px cree une profondeur. Empile sur
   390 px, il ne reste du geste que ses inconvenients — une photo pleine
   largeur, puis une carte plus etroite qui remonte par-dessus : deux objets au
   lieu d'un, et une photo qui depasse de chaque cote.
   Sous 900 px la carte reprend donc l'anatomie de ses six voisines de la
   grille juste en dessous : un cadre, la photo en tete, le corps dessous.
   C'est aussi ce qui la rend coherente avec le reste de la page — elle etait
   le seul bloc a ne pas suivre la regle des cartes.
   Le chevauchement reste intact au-dessus de 900 px.
   =========================================================================== */
@media (max-width:900px){
  .elementor-6501 .dc-featured-card .elementor-post{
    background:#fff!important;
    border-radius:var(--dc-radius-lg)!important;
    overflow:hidden!important;
    box-shadow:0 24px 48px -24px rgba(15,27,61,.22)!important;}
  .elementor-6501 .dc-featured-card .elementor-post__thumbnail__link{
    border-radius:0!important;margin:0!important;}
  .elementor-6501 .dc-featured-card .elementor-post__text{
    margin:0!important;width:auto!important;padding:24px!important;
    background:transparent!important;box-shadow:none!important;
    border-radius:0!important;}
}

/* ===========================================================================
   MOBILE — PERIODE ET ANNEE COTE A COTE — 11 septembre 2026
   Les quatre elements (etiquette, liste, etiquette, liste) sont des freres
   dans une rangee qui passe a la ligne : 57+14+131+14+57+14+131 = 418 px pour
   342 disponibles. Ils se rangeaient donc en deux lignes de 94 px.
   On les groupe deux a deux avec une grille en `grid-auto-flow:column` : le
   1er enfant en haut de la colonne 1, le 2e dessous, le 3e en haut de la
   colonne 2, le 4e dessous. L'etiquette passe AU-DESSUS de sa liste au lieu
   d'etre a cote — c'est ce qui rend les deux commandes tenables en largeur,
   et c'est la disposition habituelle d'un filtre sur telephone.
   94 px -> 55 px, et surtout les deux commandes se lisent comme une paire.
   =========================================================================== */
@media (max-width:767px){
  .elementor-6501 .dc-date-row{
    display:grid!important;grid-auto-flow:column!important;
    grid-template-rows:auto auto!important;
    grid-template-columns:1fr 1fr!important;
    gap:6px 16px!important;align-items:center!important;
    justify-content:stretch!important;}
  .elementor-6501 .dc-date-row .dc-date-select{width:100%!important;}
  .elementor-6501 .dc-date-row .dc-date-label{align-self:end!important;}
}

/* ===========================================================================
   MOBILE — LE HEROS RACCOURCI — 11 septembre 2026
   « faudrait pas le raccourcir ? » Il faisait 666 px sur une fenetre de 844,
   soit 79 % de l'ecran avant le premier article. On ne retire aucun contenu :
   on reprend la reserve et les respirations, qui etaient calees sur le bureau.
     reserve haute 112 -> 96 (l'en-tete fait 72, il reste 24 de degagement)
     reserve basse  48 -> 32
     marge des pastilles de filtre 28 -> 20
   Avec les 39 px rendus par la paire periode/annee : **666 -> 585 px**, soit
   69 % de l'ecran. Le titre, le chapeau et les deux rangees de filtres sont
   tous conserves.
   =========================================================================== */
@media (max-width:767px){
  .elementor-6501 .dc-page-hero > .e-con-inner{
    padding-top:96px!important;padding-bottom:32px!important;}
  .elementor-6501 .dc-page-hero .dc-filter-pills{margin-top:20px!important;}
  .elementor-6501 .dc-page-hero .dc-date-row{margin-top:12px!important;}
}

/* ###########################################################################
   #  V2 — RETOUR NOEMIE DU 11 SEPTEMBRE — PAGE ACTUALITES
   ########################################################################### */

/* ===========================================================================
   V2-A. « UN ESPACE BLANC IMPORTANT AVANT LA NEWSLETTER »
   Sa question : « verifier s'il s'agit d'un choix ou d'un probleme de marge /
   bloc vide ». Reponse mesuree : **c'est un choix, et il coute cher.**
   La grille est une maconnerie a hauteurs libres (`align-items:start`), voulue
   en aout pour repondre au « plus destructure, plus artistique ». Mais la
   vignette haute (carree) tombait sur `:nth-child(3n+3)`, c'est-a-dire sur les
   cartes 3 ET 6 — les deux dans la MEME colonne. Bilan des trois colonnes :
     colonne 1 : 1 049 px      colonne 2 : 1 163      colonne 3 : 1 342
   Le bas de la grille etait donc creuse de **425 px a gauche**, auxquels
   s'ajoutaient 133 px de mou dans le conteneur, 96 px avant la section
   suivante et 72 px de reserve haute de la newsletter.

   On ne renonce pas au desalignement — c'est lui qui donne son caractere a la
   grille. On REPARTIT : la vignette haute passe sur les cartes 3 et 4, soit une
   par colonne au lieu de deux dans la meme. Le desalignement reste (la colonne
   du milieu garde ses 56 px), la variete de formats reste, et les trois
   colonnes finissent a moins de 80 px les unes des autres.
   Et on rend les marges : 96 -> 40 avant la section, 72 -> 56 de reserve.
   =========================================================================== */
@media (min-width:1025px){
  /* on annule l'attribution d'origine... */
  .elementor-6501 .dc-articles-grid .elementor-grid > .elementor-grid-item:nth-child(3n+3) .elementor-post__thumbnail{
    aspect-ratio:16/10!important;}
  /* ...et on la repose une fois par colonne */
  .elementor-6501 .dc-articles-grid .elementor-grid > .elementor-grid-item:nth-child(3) .elementor-post__thumbnail,
  .elementor-6501 .dc-articles-grid .elementor-grid > .elementor-grid-item:nth-child(4) .elementor-post__thumbnail{
    aspect-ratio:1/1!important;}
}
/* Les marges rendues : la grille se terminait sur 133 px de mou, puis 96 px
   avant la section, puis 72 px de reserve haute. Trois respirations empilees
   pour une seule transition. */
.elementor-6501 .dc-articles-section > .e-con-inner{padding-bottom:40px!important;}
.elementor-6501 .dc-newsletter > .e-con-inner,
.elementor-6501 .dc-newsletter{padding-top:56px!important;}

/* ===========================================================================
   V2-B. « EVENEMENT = DATE FORTE » — DIFFERENCIER LES FORMATS
   Demande : « Article, video, podcast et evenement devraient etre identifiables
   plus rapidement. Conserver la hierarchie actuelle, mais differencier
   davantage les formats : evenement = date forte [...] »

   RESERVE DE METHODE, a dire clairement : le site n'a PAS de taxonomie de
   format. Les categories reellement peuplees sont thematiques — Formations,
   Evenements, Partenariats, Temoignages, Marche de l'emploi. « Video » et
   « Podcast » n'existent nulle part dans les donnees : les traiter
   demanderait d'abord de decider comment un contenu declare son format.
   Ce qu'on peut demontrer aujourd'hui sans rien inventer, c'est le cas
   **Evenement**, qui lui existe et porte trois articles.

   Traitement : la meta (pastille de categorie + date) quitte le corps de la
   carte pour devenir un CARTOUCHE pose sur l'image, en haut a gauche. D'un
   coup d'oeil, une carte qui porte une date sur sa photo est un evenement ;
   les autres gardent leur meta dans le corps. Aucun contenu ajoute, aucune
   donnee inventee — on deplace ce qui est deja la.
   =========================================================================== */
.elementor-6501 .dc-articles-grid article.category-evenements{position:relative!important;}
.elementor-6501 .dc-articles-grid article.category-evenements .elementor-post__meta-data{
  position:absolute!important;top:16px!important;left:16px!important;z-index:3!important;
  display:inline-flex!important;align-items:center!important;gap:10px!important;
  margin:0!important;padding:9px 14px!important;
  background:#fff!important;border-radius:12px!important;
  box-shadow:0 10px 24px -12px rgba(15,27,61,.38)!important;
  font-size:14px!important;font-weight:600!important;color:var(--dc-text)!important;}
.elementor-6501 .dc-articles-grid article.category-evenements .elementor-post__meta-data::before{
  margin:0!important;padding:4px 10px!important;font-size:10px!important;}
.elementor-6501 .dc-articles-grid article.category-evenements .elementor-post-date{
  font-size:14px!important;font-weight:600!important;color:var(--dc-text)!important;}
/* le corps reprend la place laissee libre */
.elementor-6501 .dc-articles-grid article.category-evenements .elementor-post__text{padding-top:20px!important;}

/* ===========================================================================
   V2-C. LE FORMAT SE LIT DANS LA META, LE THEME AUSSI — MAIS PAS PAREIL
   13 septembre 2026
   Yassine : « le cartouche blanc n'est pas tres beau » et « on va faire comment
   pour les autres categories ? ». Les deux remarques n'en font qu'une : mon
   premier essai traitait UNE categorie a part, ce qui ne passe pas a l'echelle.

   LA REGLE QUI PASSE A L'ECHELLE :
   **le THEME dit de quoi ca parle, le FORMAT dit comment on le consomme.**
   Le theme (Formations, Partenariats, Temoignages, Marche de l'emploi) garde sa
   pastille. Le format change le GESTE : un evenement, on s'y rend — il lui faut
   une date ; une video, on la regarde ; un podcast, on l'ecoute — il leur
   faudra une duree et un triangle. L'article est le cas par defaut et ne porte
   aucune marque. Trois formats marques, un format nu.

   ET LE DESSIN N'EST PAS INVENTE : la date prend le caractere de titrage de
   l'agenda de l'accueil (`.dc-agenda-day`) — c'est deja, sur ce site, la forme
   d'une date qui compte. Elle passe de 13 px de texte courant a 19 px de
   titrage : c'est ca, « evenement = date forte ».

   PREMIER ESSAI ABANDONNE, et la raison vaut d'etre notee : j'avais pose la
   meta EN ABSOLU sur la photo. Mais la meta n'est pas dans le lien de la
   vignette, elle est dans le corps — son ancetre positionne est donc l'ARTICLE
   entier, pas l'image. La date se calait en bas de la carte et sortait du
   cadre. Pour la poser sur l'image il aurait fallu recalculer la hauteur de la
   vignette, qui varie d'une carte sur trois (16/10 ou 1/1). Une position qui
   depend d'un calcul de hauteur est une position qui cassera.
   =========================================================================== */
/* On annule d'abord le cartouche du premier essai (V2-B), qui posait la meta
   en absolu sur l'image avec un fond blanc. */
.elementor-6501 .dc-articles-grid article.category-evenements .elementor-post__meta-data{
  position:static!important;top:auto!important;left:auto!important;
  background:none!important;box-shadow:none!important;border-radius:0!important;
  padding:0!important;
  display:flex!important;align-items:center!important;gap:12px!important;
  margin:0 0 10px!important;}
.elementor-6501 .dc-articles-grid article.category-evenements .elementor-post-date{
  font-family:var(--dc-display)!important;font-size:19px!important;font-weight:700!important;
  line-height:1.1!important;letter-spacing:-.015em!important;
  color:var(--dc-text)!important;}

/* ===========================================================================
   LES ETIQUETTES DE FORMAT — 15 septembre 2026
   Les trois articles de demonstration publies ce jour peuplent enfin les
   categories Videos et Podcasts, qui etaient a zero. Defaut immediat : elles
   n'avaient **aucune regle d'etiquette**. Les cinq categories de THEME en
   avaient une, les deux de FORMAT non — donc l'article podcast sortait sans
   aucun libelle dans les listes et dans « A lire aussi ». C'est precisement ce
   que Noemie demande a voir.

   On applique la regle posee le 13-14 septembre plutot que d'ajouter deux
   couleurs de plus : « le theme dit de quoi ca parle, le format dit comment on
   le consomme ». Le format ne prend donc pas une sixieme teinte dans la meme
   grammaire — il change de FORME : pastille pleine, encre de nuit, texte blanc,
   la ou les themes sont des pastilles a filet sur fond clair. On distingue les
   deux axes au premier coup d'oeil, sans avoir a lire.
   Contraste : blanc sur #0F1B3D, tres au-dessus du seuil.
   Le libelle est au SINGULIER — on etiquette un contenu, pas une rubrique.
   =========================================================================== */
.elementor-6501 .dc-articles-grid .elementor-post.category-videos .elementor-post__meta-data::before,
.elementor-6501 .dc-articles-grid .elementor-post.category-podcasts .elementor-post__meta-data::before{
  background:var(--dc-bleu-nuit)!important;border-color:var(--dc-bleu-nuit)!important;
  color:#fff!important;}
.elementor-6501 .dc-articles-grid .elementor-post.category-videos .elementor-post__meta-data::before{content:"Vidéo"!important;}
.elementor-6501 .dc-articles-grid .elementor-post.category-podcasts .elementor-post__meta-data::before{content:"Podcast"!important;}


/* ===========================================================================
   LES ETIQUETTES DE FORMAT — 15 septembre 2026
   Les trois articles de demonstration publies ce jour peuplent enfin les
   categories Videos et Podcasts, qui etaient a zero. Defaut immediat : elles
   n'avaient **aucune regle d'etiquette**. Les cinq categories de THEME en
   avaient une, les deux de FORMAT non — donc l'article podcast sortait sans
   aucun libelle dans les listes et dans « A lire aussi ». C'est precisement ce
   que Noemie demande a voir.

   On applique la regle posee le 13-14 septembre plutot que d'ajouter deux
   couleurs de plus : « le theme dit de quoi ca parle, le format dit comment on
   le consomme ». Le format ne prend donc pas une sixieme teinte dans la meme
   grammaire — il change de FORME : pastille pleine, encre de nuit, texte blanc,
   la ou les themes sont des pastilles a filet sur fond clair. On distingue les
   deux axes au premier coup d'oeil, sans avoir a lire.
   Contraste : blanc sur #0F1B3D, tres au-dessus du seuil.
   Le libelle est au SINGULIER — on etiquette un contenu, pas une rubrique.
   =========================================================================== */
.elementor-6501 .dc-featured-card .elementor-post.category-videos .elementor-post__meta-data::before,
.elementor-6501 .dc-featured-card .elementor-post.category-podcasts .elementor-post__meta-data::before{
  background:var(--dc-bleu-nuit)!important;border-color:var(--dc-bleu-nuit)!important;
  color:#fff!important;}
.elementor-6501 .dc-featured-card .elementor-post.category-videos .elementor-post__meta-data::before{content:"Vidéo"!important;}
.elementor-6501 .dc-featured-card .elementor-post.category-podcasts .elementor-post__meta-data::before{content:"Podcast"!important;}


/* ===========================================================================
   PASSE MOBILE / TABLETTE — 21 septembre 2026
   Cibles tactiles de /actualites/. Validees par Yassine le 21/09.
   =========================================================================== */

/* [1] Les 7 « Lire l'article » / « Lire la suite » faisaient 88 x 26 px.
   Meme geste que sur A propos : on etend la zone sensible par ::after au lieu
   d'ajouter du rembourrage, qui deplacerait le lien dans la carte. Les cartes
   sont separees de bien plus que 18 px : aucun recouvrement. */
.elementor-6501 .elementor-post__read-more{position:relative;}
/*  CORRIGE dans la foulee, apres avoir casse puis regarde : sur CETTE page le
    `::after` du lien N'EST PAS LIBRE — c'est LA FLECHE. Le widget Posts n'a
    pas d'option d'icone, alors la fleche est peinte en masque CSS sur
    `.elementor-posts .elementor-post__read-more::after` (13 x 13, mask SVG).
    Ma zone tactile l'a donc passee en `position:absolute; inset:-9px 0` : la
    fleche est sortie du flux et s'est retrouvee au-dessus du texte.
    On prend `::before`, verifie libre (`content:none`) avant d'ecrire.
    Regle a retenir : avant de s'attribuer un pseudo-element pour agrandir une
    cible, LIRE son `content` calcule. C'est la meme erreur que `transform:none`
    qui efface un placement — on croit ajouter, on remplace. */
.elementor-6501 .elementor-post__read-more::before{
  content:"";position:absolute;inset:-9px 0;}

/* [2] La pagination : 36 x 36 px pour « 2 » et « Suivant ». Ce sont des boites
   visibles avec un fond et un contour — on les grandit vraiment plutot que
   d'etendre une zone invisible, sinon les zones de deux pastilles voisines se
   toucheraient. 28 px de contenu + 8 px en haut et en bas = 44. */
/*  DEPLACE DANS LE SOCLE (post 609) le 21/09, apres coup : ma regle de page
    ne faisait rien. Le socle pose `height:36px` sous 767 px, et avec
    `box-sizing:border-box` une hauteur declaree rabat la boite quel que soit
    le rembourrage ajoute — la pastille restait a 36 px. La pagination est de
    toute facon un composant du socle (liste ET archive la partagent) : c'est
    la quatrieme fois sur ce projet qu'une regle de composant se retrouve
    enfermee dans une page. Rien a ecrire ici. */

/* [3] LES PASTILLES DE FILTRE ET LES DEUX MENUS DE DATE — 34 px.
   Ici l'extension par ::after est IMPOSSIBLE, et c'est ce qui a decide de la
   methode : les pastilles sont sur DEUX RANGEES separees de 8 px seulement
   (mesure : rangee 1 en 397..431, rangee 2 en 439..473). Les porter a 44 px
   de zone invisible ferait deborder chaque rangee de 5 px sur l'autre — on
   taperait « Marche de l'emploi » en visant « Formations ». On grandit donc
   la pastille elle-meme, ce qui ecarte les rangees d'autant.
   Contenu 14 px + 15 px en haut et en bas = 44. Les menus de date ont 18 px
   de contenu : 13 px suffisent.
   PORTEE : <=1024 px seulement, c'est-a-dire telephone et tablette, les deux
   surfaces tactiles. Le bureau (>=1025) garde exactement le dessin valide par
   Noemie — aucun pixel ne bouge au-dessus de 1024. */
@media (max-width:1024px){
  .elementor-6501 .dc-fpill .elementor-button.elementor-button{
    padding-top:15px!important;padding-bottom:15px!important;}
  .elementor-6501 .dc-date-select .elementor-heading-title{
    padding-top:13px!important;padding-bottom:13px!important;}
}


/* ===== RETOURS 14/10 : filtres sous le heros (Type / Thematique / Periode), a la une jusqu'a 3 ===== */
.dc-filtres{align-items:flex-start;}
.dc-filtres .dc-fgroup{width:100%;}
.dc-filtres .dc-filter-pills{padding:0;}
.dc-filtres .dc-date-row{padding:0;}
.dc-fgroup-lab{min-width:96px;}
.dc-filtres .dc-date-label .elementor-heading-title.elementor-heading-title.elementor-heading-title{color:var(--dc-text-light);}
@media (max-width:767px){.dc-fgroup-lab{min-width:0;width:100%;}}
/* A la une : empilement dans une seule cellule, un contenu visible a la fois */
.dc-featured-card .elementor-posts-container{display:grid!important;grid-template-columns:minmax(0,1fr)!important;}
.dc-featured-card .elementor-posts-container>.elementor-post{grid-area:1/1;}
.dc-featured-card.dc-fc-js .elementor-posts-container>.elementor-post{opacity:0;visibility:hidden;transition:opacity .45s var(--dc-ease),visibility 0s linear .45s;}
.dc-featured-card.dc-fc-js .elementor-posts-container>.elementor-post.dc-fc-on{opacity:1;visibility:visible;transition:opacity .45s var(--dc-ease),visibility 0s;}
.dc-featured-card:not(.dc-fc-js) .elementor-posts-container>.elementor-post:nth-child(n+2){display:none!important;}
.dc-fc-dots{display:flex;justify-content:center;gap:8px;margin-top:28px;}
.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;}

.dc-filtres .dc-date-row{margin-left:10px;}


/* 19/10 : l'image remplit toujours son cadre, meme avant son chargement (images differees).
   Sans cela, une bande blanche apparaissait au-dessus et en dessous de certaines photos. */
.elementor-6501 .dc-articles-grid .elementor-post__thumbnail{position:relative!important;overflow:hidden!important;background:#EDEFF5!important;}
.elementor-6501 .dc-articles-grid .elementor-post__thumbnail img{position:absolute!important;top:0!important;left:0!important;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover!important;transform:scale(1.01)!important;}/* End custom CSS */