.elementor-1690 .elementor-element.elementor-element-ba917f7{--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:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1690 .elementor-element.elementor-element-a9ff9d4{--display:flex;--min-height:50vh;--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;--padding-top:140px;--padding-bottom:56px;--padding-left:64px;--padding-right:64px;}.elementor-widget-theme-post-featured-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-1690 .elementor-element.elementor-element-f816f88{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:flex-start;--gap:14px 14px;--row-gap:14px;--column-gap:14px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1690 .elementor-element.elementor-element-156f38e{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--gap:16px 16px;--row-gap:16px;--column-gap:16px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-post-info .elementor-icon-list-item:not(:last-child):after{border-color:var( --e-global-color-text );}.elementor-widget-post-info .elementor-icon-list-icon i{color:var( --e-global-color-primary );}.elementor-widget-post-info .elementor-icon-list-icon svg{fill:var( --e-global-color-primary );}.elementor-widget-post-info .elementor-icon-list-text, .elementor-widget-post-info .elementor-icon-list-text a{color:var( --e-global-color-secondary );}.elementor-widget-post-info .elementor-icon-list-item{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-1690 .elementor-element.elementor-element-c594134 .elementor-icon-list-icon{width:14px;}.elementor-1690 .elementor-element.elementor-element-c594134 .elementor-icon-list-icon i{font-size:14px;}.elementor-1690 .elementor-element.elementor-element-c594134 .elementor-icon-list-icon svg{--e-icon-list-icon-size:14px;}.elementor-1690 .elementor-element.elementor-element-eb7c6de .elementor-icon-list-icon{width:14px;}.elementor-1690 .elementor-element.elementor-element-eb7c6de .elementor-icon-list-icon i{font-size:14px;}.elementor-1690 .elementor-element.elementor-element-eb7c6de .elementor-icon-list-icon svg{--e-icon-list-icon-size:14px;}.elementor-widget-theme-post-title .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-1690 .elementor-element.elementor-element-4661918 .elementor-icon-list-icon{width:14px;}.elementor-1690 .elementor-element.elementor-element-4661918 .elementor-icon-list-icon i{font-size:14px;}.elementor-1690 .elementor-element.elementor-element-4661918 .elementor-icon-list-icon svg{--e-icon-list-icon-size:14px;}.elementor-1690 .elementor-element.elementor-element-b8b21f9{--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:64px;--padding-bottom:80px;--padding-left:64px;--padding-right:64px;}.elementor-1690 .elementor-element.elementor-element-64a04b5{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-theme-post-content{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-1690 .elementor-element.elementor-element-4f1c255{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--gap:16px 16px;--row-gap:16px;--column-gap:16px;--padding-top:32px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-1690 .elementor-element.elementor-element-8da0b65{--grid-side-margin:10px;--grid-column-gap:10px;--grid-row-gap:10px;--grid-bottom-margin:10px;}.elementor-1690 .elementor-element.elementor-element-c68fc71{--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:40px 40px;--row-gap:40px;--column-gap:40px;--padding-top:96px;--padding-bottom:112px;--padding-left:64px;--padding-right:64px;}.elementor-1690 .elementor-element.elementor-element-c68fc71:not(.elementor-motion-effects-element-type-background), .elementor-1690 .elementor-element.elementor-element-c68fc71 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-1690 .elementor-element.elementor-element-00d58dc{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--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-1690 .elementor-element.elementor-element-8ad66ab .elementor-button-content-wrapper{flex-direction:row-reverse;}.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-1690 .elementor-element.elementor-element-7e180bc{--grid-row-gap:32px;--grid-column-gap:30px;}.elementor-1690 .elementor-element.elementor-element-7e180bc .elementor-posts-container .elementor-post__thumbnail{padding-bottom:calc( 0.66 * 100% );}.elementor-1690 .elementor-element.elementor-element-7e180bc:after{content:"0.66";}.elementor-1690 .elementor-element.elementor-element-7e180bc .elementor-post__thumbnail__link{width:100%;}.elementor-1690 .elementor-element.elementor-element-7e180bc.elementor-posts--thumbnail-left .elementor-post__thumbnail__link{margin-right:20px;}.elementor-1690 .elementor-element.elementor-element-7e180bc.elementor-posts--thumbnail-right .elementor-post__thumbnail__link{margin-left:20px;}.elementor-1690 .elementor-element.elementor-element-7e180bc.elementor-posts--thumbnail-top .elementor-post__thumbnail__link{margin-bottom:20px;}@media(min-width:768px){.elementor-1690 .elementor-element.elementor-element-f816f88{--content-width:1320px;}.elementor-1690 .elementor-element.elementor-element-b8b21f9{--content-width:1320px;}.elementor-1690 .elementor-element.elementor-element-c68fc71{--content-width:1320px;}}@media(max-width:1024px){.elementor-1690 .elementor-element.elementor-element-a9ff9d4{--padding-top:128px;--padding-bottom:48px;--padding-left:40px;--padding-right:40px;} .elementor-1690 .elementor-element.elementor-element-8da0b65{--grid-side-margin:10px;--grid-column-gap:10px;--grid-row-gap:10px;--grid-bottom-margin:10px;}}@media(max-width:767px){.elementor-1690 .elementor-element.elementor-element-a9ff9d4{--padding-top:112px;--padding-bottom:40px;--padding-left:24px;--padding-right:24px;}.elementor-1690 .elementor-element.elementor-element-b8b21f9{--padding-top:40px;--padding-bottom:56px;--padding-left:24px;--padding-right:24px;} .elementor-1690 .elementor-element.elementor-element-8da0b65{--grid-side-margin:10px;--grid-column-gap:10px;--grid-row-gap:10px;--grid-bottom-margin:10px;}.elementor-1690 .elementor-element.elementor-element-c68fc71{--padding-top:64px;--padding-bottom:72px;--padding-left:24px;--padding-right:24px;}.elementor-1690 .elementor-element.elementor-element-7e180bc .elementor-posts-container .elementor-post__thumbnail{padding-bottom:calc( 0.5 * 100% );}.elementor-1690 .elementor-element.elementor-element-7e180bc:after{content:"0.5";}.elementor-1690 .elementor-element.elementor-element-7e180bc .elementor-post__thumbnail__link{width:100%;}}/* Start custom CSS for theme-post-content, class: .elementor-element-a2d2755 *//* ENCART LATERAL (facultatif, par article) — 21 octobre 2026. Mail de Noemie du 21/10 : encart a droite, facultatif, defini fiche par fiche (definition, chiffre ou citation). Pose ici (CSS du widget Corps de l'article) pour ne pas reecrire le CSS du gabarit. Copie locale : encart-lateral-21-10.css. MODE D'EMPLOI : ajouter la classe `dc-art-aside` au conteneur du bloc (Avance > Classes CSS) en plus de sa classe d'origine (dc-art-chiffre, dc-art-bloc pour une citation, dc-art-def). Sans la classe, le bloc reste dans la colonne. Avec, il devient une NOTE DE MARGE : le texte ne bouge pas, l'encart (280 px) se pose dans la marge droite, a la hauteur ou il est insere, des 1366 px ; en dessous (tablette, telephone), il reprend la colonne. Choix du 21/10 (Yassine) : ne pas decaler le texte des articles qui ont un encart. */ @media (min-width:1366px){ .dc-article-body{display:flow-root;} .dc-article-body .dc-art-aside.dc-art-aside{ float:right;clear:right; width:280px!important;max-width:280px!important;min-width:0!important; margin:6px -320px 24px 0!important; --width:280px;--content-width:280px;} .dc-article-body .dc-art-chiffre.dc-art-aside{ flex-direction:column!important;align-items:flex-start!important;gap:8px!important; padding:18px 0!important;} .dc-article-body .dc-art-chiffre.dc-art-aside .dc-art-chiffre-n, .dc-article-body .dc-art-chiffre.dc-art-aside .dc-art-chiffre-n .elementor-heading-title{font-size:52px!important;} .dc-article-body .dc-art-chiffre.dc-art-aside .dc-art-chiffre-l p{max-width:none;} .dc-article-body .dc-art-aside .dc-art-quote{margin:0!important;padding-top:52px!important;} .dc-article-body .dc-art-aside .dc-art-quote::before{font-size:128px;} .dc-article-body .dc-art-aside .dc-art-quote p{font-size:19px;line-height:1.4;} } /* definition : etiquette (dc-art-def-t), terme (dc-art-def-m), texte (dc-art-def-l) */ .dc-article-body .dc-art-def.dc-art-def{display:block;margin:40px 0;padding:22px 24px!important; background:var(--dc-gray-50);border-left:3px solid var(--dc-bleu-logo);border-radius:0 10px 10px 0;} .dc-article-body .dc-art-def > .elementor-widget{margin-bottom:0!important;} .dc-article-body .dc-art-def-t .elementor-heading-title{margin:0 0 8px!important;font-family:var(--dc-body); font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dc-text-light);} .dc-article-body .dc-art-def-m .elementor-heading-title{margin:0 0 8px!important;font-family:var(--dc-display); font-size:22px;font-weight:700;line-height:1.25;color:var(--dc-text);} .dc-article-body .dc-art-def-l p{margin:0!important;font-family:var(--dc-body);font-size:15px;line-height:1.6;color:var(--dc-text);} @media (min-width:1366px){ .dc-article-body .dc-art-def.dc-art-aside{margin-top:0!important;} }/* End custom CSS */ /* Start custom CSS *//* ========================================================================== FICHE ACTUALITE — modele Article unique Source : wireframe-fiche-actualite-v10.html, version FIGEE du 28/07/2026 telechargee depuis /wirframes/v10-figee-2026-07-28/. Les fichiers du dossier local portent le meme sujet mais sont anterieurs : ils ont un fil d'Ariane, une barre laterale evenement et une colonne calee a gauche, tout cela absent du V10. Reference = la version en ligne. ========================================================================== */ /* ---- HERO EDITORIAL ---- V10 : image en opacite .6 sur fond noir, degrade du bas vers le haut de .85 a .15, contenu cale en bas a gauche, hauteur 50vh avec plancher a 400. L'image mise en avant est posee en widget natif : la balise dynamique de fond de conteneur n'est pas rendue cote serveur (verifie, le data-settings ne portait que background_background). */ .dc-article-hero{position:relative;overflow:hidden;min-height:max(50vh,400px);background:#1a1a1a;} .dc-article-hero > .dc-article-hero-img{position:absolute;inset:0;width:100%;height:100%;margin:0;z-index:0;} .dc-article-hero-img img,.dc-article-hero-img .elementor-widget-container{ width:100%;height:100%;object-fit:cover;display:block;border-radius:0;opacity:.6;} .dc-article-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; /* [8 septembre 2026] PLANCHER DU VOILE REMONTE. La ligne de meta (categorie, date) se pose vers 55 % de la hauteur, ou le voile ne valait que ~0,41 : « 2 avril 2026 » mesurait 4,16:1 sur une photo claire. Calcul du pire cas (zone blanche) : il faut ~0,72 a cette hauteur pour tenir l'AA avec du blanc a 82 %. La photo reste lisible au-dessus. Meme principe que sur les autres heros : le contraste ne doit pas dependre de la photo, sinon changer un visuel casse la lisibilite. */ background:linear-gradient(0deg,rgba(0,0,0,.90) 0%,rgba(0,0,0,.72) 55%,rgba(0,0,0,.55) 100%);} .dc-article-hero > .dc-article-hero-inner{position:relative;z-index:2;} /* Rangee du haut : etiquette de categorie puis date, sur la meme ligne. L'etiquette est CONTOUREE et non pleine — c'est le trait du V10 (border:1px solid rgba(255,255,255,.5)), pas la pastille pleine que j'avais posee d'apres l'ancien fichier. */ .dc-hero-meta-row{width:auto!important;} .dc-article-tag .elementor-icon-list-icon{display:none;} .dc-article-tag .elementor-icon-list-item{padding:0;} .dc-article-tag .elementor-post-info__terms-list{display:inline-flex;gap:8px;} .dc-article-tag .elementor-post-info__terms-list-item, .dc-article-tag .elementor-post-info__terms-list-item a{ font-family:var(--dc-body);font-size:11px;font-weight:700;text-transform:uppercase; letter-spacing:.1em;color:#fff!important;border:1px solid rgba(255,255,255,.5); padding:5px 12px;border-radius:var(--dc-radius-sm);line-height:1;display:inline-block;} .dc-hero-date .elementor-icon-list-icon{display:none;} .dc-hero-date,.dc-hero-date .elementor-post-info__item{ font-family:var(--dc-body);font-size:13px;color:rgba(255,255,255,.82);} .dc-article-title .elementor-heading-title.elementor-heading-title.elementor-heading-title{ font-size:44px;line-height:1.15;letter-spacing:-.02em;color:#fff;max-width:760px;} @media(max-width:1024px){.dc-article-title .elementor-heading-title.elementor-heading-title.elementor-heading-title{font-size:34px;}} @media(max-width:767px){.dc-article-title .elementor-heading-title.elementor-heading-title.elementor-heading-title{font-size:28px;max-width:none;}} /* Rangee du bas : auteur et temps de lecture, en blanc a 60 % */ .dc-hero-info,.dc-hero-info .elementor-post-info__item{ font-family:var(--dc-body);font-size:14px;color:rgba(255,255,255,.6);} .dc-hero-info .elementor-post-info__item a{color:rgba(255,255,255,.6);} .dc-hero-info .elementor-icon-list-icon svg,.dc-hero-info .elementor-icon-list-icon i{ color:rgba(255,255,255,.5);fill:rgba(255,255,255,.5);width:14px;height:14px;} .dc-hero-info .elementor-inline-items{gap:24px;} /* ---- CORPS ---- V10 : .article-body{max-width:760px;margin:0 auto} — colonne CENTREE, pas calee a gauche. L'ancien fichier local la posait dans une grille avec barre laterale evenement, d'ou le calage a gauche que j'avais applique a tort. */ .dc-article-content{max-width:760px;width:100%;margin:0 auto;} .dc-article-body p{font-family:var(--dc-body);font-size:17px;line-height:1.8;color:var(--dc-text);margin:0 0 24px;} @media(max-width:767px){.dc-article-body p{font-size:16px;}} .dc-article-body h2{font-family:var(--dc-display);font-size:24px;font-weight:700;line-height:1.3; letter-spacing:-.02em;color:var(--dc-text);margin:40px 0 16px;} .dc-article-body h3{font-family:var(--dc-display);font-size:19px;font-weight:700;line-height:1.35; color:var(--dc-text);margin:32px 0 12px;} .dc-article-body a{color:var(--dc-bleu-logo);text-decoration:underline;text-underline-offset:2px;} .dc-article-body ul,.dc-article-body ol{margin:0 0 24px 22px;} .dc-article-body li{font-size:17px;line-height:1.8;color:var(--dc-text);margin-bottom:8px;} .dc-article-body img{max-width:100%;height:auto;border-radius:var(--dc-radius-lg);} /* Citation : filet d'encre a gauche ET fond gris clair, traitement du V10. */ /* [7 septembre 2026] LA CITATION SORT DU CADRE. Elle etait un encadre gris a filet plein et texte en italique — le registre institutionnel que la cliente demande de quitter (« sortir du cadre institutionnel, eviter d'etre trop formel, trop carre », reunion du 4/9). On retire la boite et l'italique, on passe la citation au caractere de titrage a une echelle qui tranche avec le corps, et le filet devient le degrade de marque via border-image. C'est le contraste d'echelle qui porte la citation, plus le cadre. Le degrade sur une bordure exige `border-left:3px solid transparent` AVANT `border-image` : sans couleur declaree, Safari n'affiche rien. */ .dc-article-body blockquote{margin:44px 0;padding:4px 0 4px 28px;background:transparent; border-left:3px solid transparent;border-image:var(--dc-grad-text) 1;} .dc-article-body blockquote p{font-family:var(--dc-display);font-weight:600;font-style:normal; font-size:clamp(21px,2vw,27px);line-height:1.4;letter-spacing:-.015em; color:var(--dc-text);margin:0;} .dc-article-body blockquote cite{display:block;font-family:var(--dc-body);font-size:14px; font-style:normal;color:var(--dc-text-light);margin-top:14px;} /* ---- PARTAGE ---- V10 : boutons de 36 px a bordure fine, qui se remplissent d'encre au survol. */ .dc-share-row{border-top:1px solid var(--dc-gray-200);} .dc-share-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-share-btns .elementor-grid{gap:12px;} .dc-share-btns .elementor-share-btn{width:36px;height:36px;min-width:36px;min-height:36px; border:1px solid var(--dc-gray-200)!important;border-radius:var(--dc-radius-sm); background-color:transparent!important;transition:var(--dc-transition);} .dc-share-btns .elementor-share-btn__icon, .dc-share-btns .elementor-share-btn i, .dc-share-btns .elementor-share-btn svg{color:var(--dc-text)!important;fill:var(--dc-text)!important; background-color:transparent!important;} .dc-share-btns .elementor-share-btn:hover{background-color:var(--dc-text)!important;border-color:var(--dc-text)!important;} .dc-share-btns .elementor-share-btn:hover .elementor-share-btn__icon, .dc-share-btns .elementor-share-btn:hover i, .dc-share-btns .elementor-share-btn:hover svg{color:#fff!important;fill:#fff!important;} .dc-share-btns .elementor-share-btn__text{display:none;} /* ---- A LIRE AUSSI ---- V10 : en-tete en deux parts, titre a gauche et lien « Voir tout » a droite. */ .dc-related-head{width:100%;} .dc-related-title .elementor-heading-title.elementor-heading-title.elementor-heading-title{font-size:28px;letter-spacing:-.02em;} .dc-related-all .elementor-button{background:transparent!important;background-image:none!important; border:0!important;padding:0!important;color:var(--dc-text)!important;font-size:15px;font-weight:600;} .dc-related-all .elementor-button .elementor-button-content-wrapper{gap:8px;transition:gap .25s var(--dc-ease);} .dc-related-all .elementor-button:hover .elementor-button-content-wrapper{gap:12px;} .dc-related-grid .elementor-post{background:#fff;border:1px solid var(--dc-gray-200); border-radius:var(--dc-radius-lg);overflow:hidden;transition:var(--dc-transition);} /* [7/9/2026] Meme survol que la grille de la liste des actualites : une carte qui se souleve de 6 px avec une ombre portee longue, et la photo qui s'agrandit dans son cadre. Les deux pages montrent le meme objet, elles doivent reagir pareil. */ .dc-related-grid .elementor-post{transition:transform .45s var(--dc-ease),box-shadow .45s var(--dc-ease);} .dc-related-grid .elementor-post:hover{box-shadow:0 24px 48px -20px rgba(15,27,61,.28); transform:translateY(-6px);} .dc-related-grid .elementor-post__thumbnail{border-radius:0;aspect-ratio:16/10;overflow:hidden;} .dc-related-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. Il avait ete retire sur la liste, mais la correction etait scopee a `.elementor-1732` — donc elle ne franchissait pas la frontiere de la page, et la fiche a garde l'effet. C'est la QUATRIEME fois aujourd'hui qu'une regle de composant enfermee dans une page produit deux versions du meme element. On neutralise a la source plutot que de surcharger : forcer `transform:none` au survol effacerait aussi le placement d'Elementor sur l'image et la ferait sauter. */ .dc-related-grid .elementor-post__text{padding:20px 24px 24px;} .dc-related-grid .elementor-post__meta-data{font-family:var(--dc-body);font-size:12px;color:var(--dc-text-light);margin-bottom:8px;} .dc-related-grid .elementor-post__title,.dc-related-grid .elementor-post__title a{ font-family:var(--dc-display);font-size:18px;font-weight:700;line-height:1.3;color:var(--dc-text);} .dc-related-grid .elementor-post__excerpt p{font-family:var(--dc-body);font-size:14px; line-height:1.5;color:var(--dc-text-light);} /* Filtre par periode : le V10 le dessine, on le garde a l'identique. Il est decoratif comme les pastilles — Yassine : « cliquable ne veut pas dire fonctionnel, un peu comme dans le wireframe ». Les branchements dynamiques seront faits par l'equipe du client avec leurs outils. */ .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-color:#fff; border:1px solid var(--dc-gray-200);border-radius:var(--dc-radius-sm); padding:8px 34px 8px 12px;cursor:pointer; 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;} /* « 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;} /* ---- « 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; /* #008AB7 sur blanc vaut 3,95:1, sous les 4,5 exiges a 14 px. #00688A donne 5,02:1 — extremite bleue de --dc-grad-brand-aa. Corrige ICI et non dans le socle : la feuille d'un gabarit de contenu est chargee APRES celle de l'en-tete, la regle du socle perdait donc malgre son !important. */ color:#00688A!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;} /* La fleche de « Toutes les actualites » sortait en BLANC sur fond blanc : le kit peint les icones de bouton en blanc, ce qui est juste pour un bouton plein mais pas pour ce lien nu. Mesure : fill rgb(255,255,255). */ .dc-related-all .elementor-button svg, .dc-related-all .elementor-button i{fill:var(--dc-text)!important;color:var(--dc-text)!important;width:15px;height:15px;} /* [7 septembre 2026] Le titre « A lire aussi » sortait en #008AB7, la couleur primaire du kit, alors que tous les titres de section du site sont en encre. On ne pose PAS `color` : le pied de page reemet `.elementor-widget-heading .elementor-heading-title{color:var(--e-global-color-primary)}` a 0,2,0 et il est charge apres nous. On redefinit la VARIABLE sur le widget, elle s'herite au lieu d'entrer en concurrence — procede deja employe dans le socle pour .dc-card-title. */ .dc-related-title{--e-global-color-primary:var(--dc-text);} /* regeneration forcee 8/9/2026 */ /* maj 8/9/2026 */ /* =========================================================================== MÉTA DU HÉROS D'ARTICLE — 9 septembre 2026 Le wireframe V10 regroupe au-dessus du titre : categorie, date et TEMPS DE LECTURE. Le temps de lecture manquait ; il est desormais calcule a partir du corps de l'article. La signature d'auteur, elle, affichait « Yassine » — le nom du compte WordPress, pas une signature editoriale. Le wireframe la donne comme un bloc OPTIONNEL du gabarit, « masque quand il n'est pas rempli » (decision du 22/07). Elle est donc masquee tant qu'une vraie signature n'est pas saisie : mieux vaut pas de signature qu'un nom de compte technique sur une page montree au client. =========================================================================== */ .elementor-1690 .elementor-element-4661918{display:none!important;} .dc-lecture-widget{display:inline-flex;align-items:center;} .dc-lecture{ font-family:var(--dc-body,'Roboto',sans-serif); font-size:13px;font-weight:500;letter-spacing:.02em; color:rgba(255,255,255,.78);} .dc-lecture::before{ content:"";display:inline-block;width:3px;height:3px;border-radius:50%; background:rgba(255,255,255,.5);margin:0 10px 2px 4px;vertical-align:middle;} /* =========================================================================== FICHE ARTICLE — TABLETTE — 9 septembre 2026 Les trois cartes « À lire aussi » sont PLUS HAUTES a 1024 (543 px) qu'a 768 (503 px), alors qu'elles y sont plus larges. C'est le signe que ce n'est pas le texte qui commande mais la hauteur d'image : a 1024 les cartes passent sur trois colonnes et le visuel gagne en hauteur sans que le texte se resserre. On borne le texte sur toute la plage, comme ailleurs. =========================================================================== */ @media (min-width:768px) and (max-width:1024px){ .elementor-1690 .elementor-posts .elementor-post__title{ display:-webkit-box!important;-webkit-line-clamp:3!important; -webkit-box-orient:vertical!important;overflow:hidden!important;} .elementor-1690 .elementor-posts .elementor-post__excerpt, .elementor-1690 .elementor-posts .elementor-post__excerpt p{ display:-webkit-box!important;-webkit-line-clamp:3!important; -webkit-box-orient:vertical!important;overflow:hidden!important;} } /* =========================================================================== FICHE ARTICLE — TABLETTE ET LONGUEUR DE LIGNE — 9 septembre 2026 =========================================================================== */ /* La justification du corps de texte. Mesure a 1440 : le paragraphe fait 760 px pour un corps de 17 px, soit ~89 signes par ligne. La convention typographique tient entre 60 et 75 — au-dela, l'oeil perd le debut de la ligne suivante. A 768 on est deja a 75, c'est donc le format large qu'il faut brider, pas le petit. */ @media (min-width:1025px){ /* Pas de `ch` ici : l'unite se resout contre la police du CONTENEUR, pas contre celle du paragraphe. 72ch calcule sur le widget donnait 756 px — la regle s'appliquait et ne changeait rien. 640 px pour un corps de 17 px font ~75 signes, le haut de la fourchette confortable. */ /* Classe doublee : le socle (post-609) se charge APRES le CSS du gabarit et pose max-width:100% sur le widget. A specificite egale, c'est lui qui gagne. */ .dc-article-body.dc-article-body{max-width:640px!important;} } /* « A lire aussi » a 768 : trois cartes dans une grille de deux colonnes, la troisieme seule a gauche avec une case vide a cote. Meme traitement que les logos partenaires de la page d'accueil, arbitre avec Yassine : la derniere se centre sur toute la largeur, a la taille d'une colonne. */ @media (min-width:768px) and (max-width:1024px){ .dc-related-grid .elementor-posts-container > .elementor-post:last-child:nth-child(odd){ grid-column:1 / -1!important;justify-self:center!important; width:calc(50% - 12px)!important;} } /* =========================================================================== « A LIRE AUSSI » REPREND LA CARTE DE LA LISTE — 10 septembre 2026 Les cartes de « A lire aussi » sont les MEMES que celles de la grille d'Actualites — meme bordure, meme rayon, meme image en 16/10 — mais elles avaient garde l'ancienne composition : titre en premier, et AUCUNE etiquette de categorie. Deux ecarts d'un coup avec la page dont elles sont censees etre le prolongement. Les regles de composition avaient ete ecrites scopees a `.elementor-1732`, donc elles ne franchissaient pas la frontiere de la page. C'est le meme defaut que pour le pave CTA d'A propos : une regle de COMPOSANT enfermee dans le CSS d'une PAGE. Ici on la pose au moins sur le gabarit d'article, qui sert les sept fiches. L'etiquette est dessinee depuis la classe `category-` — Elementor n'emet aucun `.elementor-post__badge`, piege deja consigne. Et les couleurs sont les variantes sombres : en texte sur blanc a 11 px il faut 4,5:1, ce que quatre des cinq teintes de marque ne tiennent pas. =========================================================================== */ .dc-related-grid .elementor-post__text{ display:flex!important;flex-direction:column!important;} .dc-related-grid .elementor-post__meta-data{ order:1!important;display:flex!important;align-items:center!important; gap:10px!important;flex-wrap:wrap!important;margin-bottom:10px!important;} .dc-related-grid .elementor-post__title{order:2!important;margin-bottom:8px!important;} .dc-related-grid .elementor-post__excerpt{order:3!important;} .dc-related-grid .elementor-post__read-more{order:4!important;margin-top:auto!important;} .dc-related-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;} .dc-related-grid .elementor-post.category-formations .elementor-post__meta-data::before{content:"Formations";color:#0033A1;border-color:#0033A1;} .dc-related-grid .elementor-post.category-partenariats .elementor-post__meta-data::before{content:"Partenariats";color:#6D28D9;border-color:#6D28D9;} .dc-related-grid .elementor-post.category-evenements .elementor-post__meta-data::before{content:"Événements";color:#A21CAF;border-color:#A21CAF;} .dc-related-grid .elementor-post.category-temoignages .elementor-post__meta-data::before{content:"Témoignages";color:#0E7490;border-color:#0E7490;} .dc-related-grid .elementor-post.category-marche-de-lemploi .elementor-post__meta-data::before{content:"Marché de l'emploi";color:#00688A;border-color:#00688A;} /* =========================================================================== PLUS DE SOULEVEMENT AU SURVOL — 10 septembre 2026 Ce que Yassine voyait bouger n'etait pas l'image : c'etait la CARTE ENTIERE qui se soulevait de 6 px, et l'image montait avec elle (releve : le haut de l'image passe de 176 a 170). Le zoom avait bien ete retire ; le deplacement venait d'ailleurs. On retire le soulevement. Il reste l'ombre, qui suffit a dire que la carte repond — c'est le meme arbitrage que pour les logos de l'ecosysteme il y a quelques heures : le fond change, rien ne se deplace. =========================================================================== */ /* [remis le 10/9] Le soulevement ne genait pas Yassine — c'est le ZOOM de l'image qui posait probleme, et lui est bien parti. La carte remonte donc a nouveau de 6 px, l'image suit le mouvement de sa carte sans se deformer ni glisser dans son cadre. */ .dc-related-grid .elementor-post:hover, .dc-related-grid .elementor-post:focus-within{transform:translateY(-6px)!important;} /* =========================================================================== MEME CORRECTION QUE SUR /actualites/ — 10 septembre 2026 Le kit porte `.elementor-kit-7 img{border-radius:16px}` pour tout le site. Ici c'est pire que sur la liste : `.dc-related-grid .elementor-post__thumbnail` est en `border-radius:0`, donc les QUATRE coins de l'image s'arrondissent au milieu de la carte. C'est le cadre qui arrondit, jamais l'image. =========================================================================== */ .elementor-1690 .dc-related-grid .elementor-post__thumbnail img{border-radius:0!important;} /* --- meme piege que sur /actualites/ : les deux ratios qui se battaient ------ `.dc-related-grid .elementor-post__thumbnail` recevait notre `aspect-ratio` ET le `padding-bottom` de ratio d'Elementor (274 px). Le padding imposait le plancher de hauteur, le ratio recalculait la LARGEUR pour s'y tenir : 439 px de cadre dans une carte de 417. On coupe le padding, le ratio gouverne seul. -------------------------------------------------------------------------- */ .elementor-1690 .dc-related-grid .elementor-post__thumbnail{padding-bottom:0!important;} /* Meme correction que sur /actualites/ : a 768 px l'extrait demandait quatre lignes et le bridage en imposait trois — le texte etait coupe en pleine phrase. Plafond conserve, releve a quatre. */ @media (min-width:768px) and (max-width:1024px){ .elementor-1690 .elementor-posts .elementor-post__excerpt, .elementor-1690 .elementor-posts .elementor-post__excerpt p{ -webkit-line-clamp:4!important;} } /* Et le titre avec : a 768 px, « L'intelligence artificielle generative revolutionne les metiers du numerique a Bruxelles » demande quatre lignes (94 px pour 70 disponibles) et perdait « a Bruxelles ». Un titre d'article ampute, c'est le premier chose qu'on lit sur la carte. */ @media (min-width:768px) and (max-width:1024px){ .elementor-1690 .elementor-posts .elementor-post__title{ -webkit-line-clamp:4!important;} } /* =========================================================================== LE DEGRADE DU HEROS D'ARTICLE — 10 septembre 2026 Retour d'Hamza : « au niveau de l'article en lui-meme, il faudrait rajouter le degrade qu'on a un peu partout, peut-etre l'attenuer un petit peu [...] en termes de lisibilite, si on met une image qui est fort blanche, meme si on a un petit overlay noir, on risque de perdre en lisibilite au niveau du titre ». VERIFIE : il n'y avait AUCUN voile. Ni sur le heros, ni sur l'image — le `::before` du heros etait vide et l'image n'a pas de filtre. Sur l'article « 85 % de nos stagiaires » (chemise blanche, piece tres claire), le titre blanc etait pose directement sur la photo. OU LE POSER : pas sur le heros lui-meme. Ses deux enfants — l'image et le bloc de texte — sont tous deux en `z-index:1` (regle du socle), donc un `::before` du heros passerait DERRIERE l'image. Le voile va donc sur l'image, ou il se glisse entre la photo et le texte. LA FORME : le degrade maison, monte du bas (la ou est le texte) et laisse le haut de la photo respirer, plus une nappe violette au coin bas-gauche — la meme famille que les heros de la V5. Attenue, comme demande. =========================================================================== */ /* [correction immediate] NE PAS forcer `position:relative` ici : l'image est posee en `absolute` pour remplir le heros, et la repasser en relatif l'a remise dans le flux — le heros est passe de 450 a 1235 px de haut et le titre a glisse hors de l'ecran. Une boite deja positionnee porte tres bien un `::after` : il n'y avait rien a changer. */ .dc-article-root .dc-article-hero-img::after{ content:"";position:absolute;inset:0;pointer-events:none;z-index:2; background-image: radial-gradient(82% 104% at 6% 100%, rgba(126,63,242,.30), rgba(126,63,242,0) 68%), linear-gradient(to top, rgba(10,7,40,.84) 0%, rgba(10,7,40,.58) 30%, rgba(10,7,40,.24) 58%, rgba(10,7,40,.10) 76%, /* [ajout apres mesure] Le voile ne redescend plus a zero en haut : la BARRE DE NAVIGATION est transparente au-dessus du heros, et sur un article dont la photo est claire en haut — « durabilite-numerique » — son texte blanc tombait a 3,36:1 pour « Se connecter » et 3,95:1 pour « Services ». Ce n'est pas un defaut introduit par le degrade, c'est un defaut que le degrade permet de corriger : c'est exactement l'argument de lisibilite d'Hamza, applique au menu et non au titre. */ rgba(10,7,40,.44) 90%, rgba(10,7,40,.58) 100%);} /* .34/.46 laissait « Se connecter » a 4,36:1 */ /* ########################################################################### # COMPOSANTS EDITORIAUX OPTIONNELS — 13 septembre 2026 # Demande de Noemie (debrief du 11/9, page Article) : « Prevoir dans le # template quelques composants editoriaux optionnels : chiffre cle, # citation, encadre "A retenir", image/graphique et CTA contextuel. Ne pas # transformer l'article en page de paves : ces composants doivent rester # ponctuels et servir la lecture. » # # Ils sont poses ICI, dans le gabarit, et non sur un article : c'est du # VOCABULAIRE, disponible pour tous les articles. Aucun des neuf articles # existants ne porte ces classes — l'ajout est donc strictement additif, # rien ne bouge sur ce qui est en ligne. Seul l'article de demonstration # `ia-generative-demande-formations-bruxelles` les emploie. # # Regle de dessin commune : ils s'inscrivent DANS la colonne de texte et # n'en sortent pas, ils n'ont pas de fond plein, et ils empruntent au # registre deja pose par la citation — un filet, une echelle, pas une boite. # C'est ce qui les empeche de redevenir des paves. ########################################################################### */ /* --- 1. LE CHIFFRE CLE ------------------------------------------------------ Demande : « Les chiffres forts (ex. 2 800 stagiaires, 85 % d'insertion, +340 %) restent noyes dans le texte alors qu'ils pourraient structurer visuellement la lecture. » Le chiffre sort du paragraphe et devient une respiration : deux filets, le nombre au caractere de titrage en degrade de marque — le meme motif que les deux preuves d'A propos, pour que « un chiffre qui compte » ait une seule forme sur tout le site. */ .dc-article-body .dc-art-chiffre{ display:flex;flex-direction:column;align-items:flex-start;gap:6px; margin:44px 0;padding:28px 0; border-top:1px solid var(--dc-gray-200); border-bottom:1px solid var(--dc-gray-200);} .dc-article-body .dc-art-chiffre-n{ font-family:var(--dc-display);font-size:clamp(44px,5.4vw,72px);font-weight:800; line-height:.95;letter-spacing:-.03em; background:var(--dc-grad-text); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent;} .dc-article-body .dc-art-chiffre-l{ font-family:var(--dc-body);font-size:15px;line-height:1.5; color:var(--dc-text-light);max-width:42ch;} /* --- 2. LE CTA CONTEXTUEL --------------------------------------------------- Demande : « L'article parle de formations mais ne propose pas de CTA contextuel vers celles-ci au moment ou l'interet est cree. » Il se pose donc juste apres la liste des trois parcours, pas en fin d'article : c'est la que le lecteur a envie de savoir ou s'inscrire. Une ligne, un bouton, un filet a gauche — la meme arete que la citation, pour qu'on lise « une adresse dans le texte » et non un encart publicitaire. */ .dc-article-body .dc-art-cta{ display:flex;align-items:center;justify-content:space-between;gap:24px; flex-wrap:wrap;gap:20px; margin:40px 0;padding:22px 24px; background:var(--dc-gray-50); border-left:3px solid var(--dc-bleu-logo); border-radius:0 10px 10px 0;} /* `flex:1 1 auto` + `min-width:0` : sans ca le texte refuse de ceder et c'est le BOUTON qui passe a la ligne. Mesure : 377 + 190 + 24 de gouttiere = 591 pour 588 disponibles — il manquait TROIS pixels. Mieux vaut un texte qui se replie sur deux lignes qu'un bouton relegue en dessous. */ .dc-article-body .dc-art-cta-txt{ flex:1 1 auto;min-width:0; margin:0!important;font-family:var(--dc-body);font-size:16px;font-weight:500; color:var(--dc-text);} .dc-article-body .dc-art-cta-btn{ flex:0 0 auto;display:inline-flex;align-items:center;gap:8px; padding:11px 22px;border-radius:8px; background:var(--dc-text);color:#fff!important; font-family:var(--dc-body);font-size:14px;font-weight:600; text-decoration:none!important; transition:background-color .25s var(--dc-ease),transform .25s var(--dc-ease);} .dc-article-body .dc-art-cta-btn::after{content:"\2192";font-size:16px;line-height:1;} .dc-article-body .dc-art-cta-btn:hover{background:var(--dc-bleu-titres);} /* --- 3. L'ENCADRE « A RETENIR » --------------------------------------------- Il ferme l'article sur ce qu'il faut en garder. Volontairement sec : un intitule en petites capitales, trois lignes, un filet. Il reprend les deux chiffres qui etaient noyes dans le dernier paragraphe (2 800 stagiaires, 85 % d'insertion) — ils cessent d'etre du texte courant sans devenir un second chiffre cle, qui ferait doublon avec le premier. */ /* [18-09-2026] LA VARIANTE DEGRADEE S'AJOUTE, ELLE NE REMPLACE PAS. Premiere lecture de la demande d'Hamza : j'avais transforme le pave blanc lui-meme en degrade, et pose une arete de couleur en haut de tous les encadres. Yassine : « je vois que t'as supprime la version sur fond blanc, mais garde-la quand meme, celle avec aplat de couleur aussi. Je vois que t'as ajoute une ligne de couleur sur le dessus alors qu'il n'y en avait pas, tu peux supprimer. » Juste sur les deux points : Noemie avait demande TROIS variantes, et en convertissant la premiere j'en supprimais une. Le degrade devient donc une QUATRIEME variante, `--degrade`, et les trois autres retrouvent leur etat valide. */ .dc-article-body .dc-art-retenir{ display:block;margin:48px 0 8px;padding:26px 28px; border:1px solid var(--dc-gray-200);border-radius:14px; background:#fff;} .dc-article-body .dc-art-retenir-t{ margin:0 0 14px!important;font-family:var(--dc-body);font-size:12px;font-weight:700; letter-spacing:.14em;text-transform:uppercase; /* [13/9] PAS `--dc-bleu-logo`. #008AB7 vaut **3,95:1** sur blanc, sous les 4,5 exiges a 12 px — et c'est exactement le defaut que le projet a deja mesure et tranche le 8 septembre : le bleu de petit texte du site est **#00688A**, la premiere teinte qui passe sur les QUATRE fonds (6,27:1 sur blanc, 4,97:1 sur le lavis le plus soutenu). J'avais repris le jeton du logo par reflexe. */ color:#00688A;} .dc-article-body .dc-art-retenir ul{margin:0!important;padding-left:20px!important;} .dc-article-body .dc-art-retenir li{ font-family:var(--dc-body);font-size:16px;line-height:1.7;color:var(--dc-text);} .dc-article-body .dc-art-retenir li strong{font-weight:700;color:var(--dc-bleu-titres);} @media (max-width:767px){ .dc-article-body .dc-art-cta{flex-direction:column;align-items:flex-start;gap:14px;padding:18px 20px;} .dc-article-body .dc-art-chiffre{margin:32px 0;padding:22px 0;} .dc-article-body .dc-art-retenir{padding:20px 22px;} } /* =========================================================================== LE BLANC AVANT « A LIRE AUSSI » — 13 septembre 2026 « Un grand espace blanc apparait entre le partage et "A lire aussi" : a verifier. » Verifie : **240 px** entre la fin du dernier paragraphe et le titre de la section, en trois couches empilees — 80 px de reserve basse du corps, 64 px entre les sections, 96 px de reserve haute de « A lire aussi ». Trois respirations pour une seule transition, comme sur Actualites. Ramene a 152 px, ce qui laisse une vraie coupure sans trou. **Scope a l'article de demonstration** : la V1 reste comparable. =========================================================================== */ /* La classe est `dc-article-layout`, pas `dc-article-l` — j'avais lu un dump tronque a 40 caracteres et copie l'abreviation. Seule la seconde regle avait pris : 208 px au lieu de 240. */ /* [13/9, seconde passe] DESCOPE : ce n'est pas une proposition, c'est une CORRECTION. Les 240 px de blanc entre le partage et « A lire aussi » sont un defaut sur les neuf articles, pas seulement sur celui de demonstration. Il n'y a aucune raison de le laisser sur huit d'entre eux. A distinguer des COMPOSANTS editoriaux plus haut, qui eux restent ponctuels : ils n'apparaissent que sur l'article dont le contenu les appelle. C'est la demande de Noemie, mot pour mot : « ces composants doivent rester ponctuels et servir la lecture ». */ .dc-article-layout > .e-con-inner{padding-bottom:32px!important;} .dc-related > .e-con-inner{padding-top:56px!important;} /* =========================================================================== DEUX REGLAGES SUR LES COMPOSANTS — 14 septembre 2026 (retours de Yassine) 1. LE BOUTON DU CTA N'ETAIT PAS ALIGNE AVEC SON TEXTE — 12 px de decalage. Cause : **`wpautop`**. WordPress enveloppe automatiquement dans un `

` tout contenu de niveau texte qui n'est pas deja dans un bloc — notre `` s'est donc retrouve dans un paragraphe, qui herite du `margin-bottom:24px` du corps d'article. La boite de contenu du CTA passait de 47 a 71 px, le texte se centrait dans 71 et le bouton restait en haut. **A retenir : du HTML ecrit a la main dans un contenu WordPress n'arrive pas tel quel au rendu.** Ici on neutralise le paragraphe parasite et on le remet dans le flux du flex. 2. L'ENCADRE « A RETENIR » ETAIT COLLE AU FILET DU DESSOUS — 8 px. J'avais mis une marge basse courte en croyant que le corps de l'article s'arretait la. Il ne s'arrete pas : la barre de partage suit, avec son filet. 8 px entre un encadre borde et un filet, ca se lit comme une erreur d'impression. Porte a 40, soit la meme respiration que celle qui le precede. =========================================================================== */ .dc-article-body .dc-art-cta > p:not(.dc-art-cta-txt){ margin:0!important;padding:0!important; display:inline-flex!important;align-items:center!important; flex:0 0 auto!important;} .dc-article-body .dc-art-retenir{margin-bottom:40px!important;} /* ########################################################################### # SECONDE PASSE SUR LES COMPOSANTS D'ARTICLE — 15 septembre 2026 # Demandes formulees en reunion le 14 septembre par Noemie : # 1. « A retenir » en TROIS variantes : pave blanc / aplat de couleur / # accompagne d'une image. # 2. « On n'a pas l'exemple ou une image viendrait s'integrer dans un # article. Des videos, etc., ca enrichit un contenu, et on le fait # enormement sur nos propres articles. » -> des formats de visuel # dans le corps du texte. # 3. « L'IA generative, on aurait pu faire un jeu avec les citations » — # avec les guillemets, « dans la couleur tricolore ». -> une variante # de citation qui porte le guillemet en degrade de marque. # 4. « Personnaliser le modele selon le type d'actualite : article, # video, podcast » (Hamza) -> un bloc d'ecoute et un bloc video. # # DEUX ECRITURES A COUVRIR. Les neuf articles en ligne sont du HTML brut # dans post_content ; les articles convertis sont des WIDGETS Elementor. # Chaque selecteur vise donc les deux formes : la balise nue (`figcaption`, # `li`, `blockquote`) et l'enveloppe Elementor (`.elementor-heading-title`, # `.elementor-image-caption`, `.elementor-button`). # # REGLE DE DESSIN, inchangee depuis le 13/9 : ces composants restent # PONCTUELS. Ils servent la lecture, ils ne transforment pas l'article en # page de paves. Deux exceptions assumees au « pas de fond plein » pose le # 13/9 : l'aplat de « A retenir » et le bloc podcast — dans les deux cas # c'est Noemie qui demande la rupture, et le fond porte une information # (« ceci se retient », « ceci s'ecoute »). ########################################################################### */ /* --- 4. LA CITATION AU GUILLEMET DE MARQUE ---------------------------------- La citation sobre du 11/9 reste le cas par defaut — Noemie l'a explicitement demandee « a preserver » dans son debrief. Celle-ci est une VARIANTE, pour les articles ou la parole est le sujet. Le guillemet est decoratif : il est pose en `::before`, donc il ne s'insere pas dans le texte selectionnable, et il n'ajoute rien a l'arbre d'accessibilite que la balise `blockquote` ne dise deja. Le degrade est `--dc-grad-text` (#A855F7 -> #D946EF -> #22D3EE) : les trois teintes que la cliente appelle « la couleur tricolore ». Il ne porte aucun texte de lecture, donc la reserve de contraste du 27/8 sur les degrades ne s'applique pas ici. */ .dc-article-body .dc-art-quote{ position:relative;margin:56px 0; /* annule le filet et le retrait de la citation par defaut (0,1,1) */ padding:52px 0 0!important;border-left:0!important;background:transparent;} .dc-article-body .dc-art-quote::before{ content:"\201C";position:absolute;top:-10px;left:-8px;z-index:0; font-family:var(--dc-display);font-size:138px;font-weight:800;line-height:.7; background:var(--dc-grad-text); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; pointer-events:none;-webkit-user-select:none;user-select:none;} .dc-article-body .dc-art-quote > *{position:relative;z-index:1;} .dc-article-body .dc-art-quote p, .dc-article-body .dc-art-quote .dc-art-quote-txt, .dc-article-body .dc-art-quote .dc-art-quote-txt p{ font-family:var(--dc-display);font-size:clamp(21px,2.1vw,27px);font-weight:600; font-style:normal;line-height:1.4;color:var(--dc-text);margin:0 0 16px;} .dc-article-body .dc-art-quote cite, .dc-article-body .dc-art-quote .dc-art-quote-cite, .dc-article-body .dc-art-quote .dc-art-quote-cite p{ display:block;font-family:var(--dc-body);font-size:14px;font-style:normal; font-weight:500;line-height:1.5;color:var(--dc-text-light);margin:0;} @media (max-width:767px){ .dc-article-body .dc-art-quote{padding-top:40px!important;} .dc-article-body .dc-art-quote::before{font-size:104px;top:-6px;left:-4px;} } /* --- 5. « A RETENIR », VARIANTE APLAT DE COULEUR ---------------------------- « Deux "a retenir", je l'aurais mis sur un aplat de couleur. » Aplat au sens propre : une seule teinte, pas de degrade, pas de bordure — sinon on cumule deux signaux et on retombe sur le pave. #EFE9FD est le lavis violet de la marque. L'intitule reste en #00688A : 6,27:1 sur blanc, et il ne descend pas sous 4,5 sur ce lavis (verifie au pixel, voir le journal du 15/9). Ne PAS reprendre #008AB7 ici — c'est le defaut mesure a 3,95:1 et tranche le 8 septembre. */ .dc-article-body .dc-art-retenir--aplat{ background:#EFE9FD;border:0;} /* --- 6. « A RETENIR », VARIANTE AVEC IMAGE ---------------------------------- « Et limite, un troisieme qui est accompagne d'une image. » Deux colonnes, l'image d'abord : elle donne le sujet avant la liste. La colonne d'image est fixe (188 px) et non fractionnaire, pour que la liste garde une mesure lisible quelle que soit la longueur des items. */ /* [18-09] Yassine : « l'image n'est pas centree verticalement alors qu'elle l'etait avant » — et de fait : en restaurant la variante de base j'ai laisse `align-items` du conteneur Elementor reprendre la main sur la grille. On le repose explicitement. « Et je t'avais dit que tu pouvais laisser le degrade que t'avais mis avant. Tu peux le mettre en fond de celle avec l'image. » C'est le lavis de marque de la premiere passe : il reprend du service ici, ou il ne remplace plus rien. */ .dc-article-body .dc-art-retenir--image{ display:grid!important;grid-template-columns:188px 1fr;gap:26px; align-items:center!important; border:1px solid rgba(139,92,246,.18); background:linear-gradient(135deg, rgba(139,92,246,.10) 0%, rgba(168,85,247,.05) 46%, rgba(0,138,183,.09) 100%), #fff;} .dc-article-body .dc-art-retenir--image .dc-art-retenir-corps{ align-self:center!important;} .dc-article-body .dc-art-retenir--image .dc-art-retenir-img{margin:0;} .dc-article-body .dc-art-retenir--image .dc-art-retenir-img img{ display:block;width:100%;height:100%;max-height:200px;object-fit:cover; border-radius:12px;} .dc-article-body .dc-art-retenir--image .dc-art-retenir-corps{ min-width:0; /* 16/09 : le conteneur Elementor centre ses enfants par defaut, ce qui decalait l'intitule de 108 px vers la droite par rapport a la liste (mesure sur l'article 4414). L'intitule doit s'aligner sur le premier caractere de la liste, comme dans les deux autres variantes. */ align-items:flex-start;} @media (max-width:600px){ .dc-article-body .dc-art-retenir--image{grid-template-columns:1fr;gap:18px;} .dc-article-body .dc-art-retenir--image .dc-art-retenir-img img{max-height:170px;} } /* --- 7. LES VISUELS DANS LE CORPS DE L'ARTICLE ------------------------------ « On n'a pas l'exemple ou une image viendrait s'integrer dans un article. Comment il peut s'aligner ? Quelles options on pourrait avoir ? » Trois options, et pas une de plus — trois suffisent a rythmer, au-dela on fabrique un catalogue de gabarits que personne ne tiendra a la redaction : .dc-art-figure image dans la colonne de texte .dc-art-figure--large image debordante, plus large que la colonne .dc-art-figure--duo deux images de front (avant/apres, deux lieux) La legende emprunte le filet de la citation sobre : un trait a gauche, pas d'italique, pas de centrage. C'est la meme grammaire partout. */ .dc-article-body .dc-art-figure{margin:44px 0;} .dc-article-body .dc-art-figure img{ display:block;width:100%;height:auto;border-radius:var(--dc-radius-lg);} .dc-article-body .dc-art-figure figcaption, .dc-article-body .dc-art-figure .elementor-image-caption, .dc-article-body .dc-art-figure .widget-image-caption{ margin:14px 0 0;padding-left:14px; border-left:2px solid var(--dc-gray-200); font-family:var(--dc-body);font-size:14px;line-height:1.55; color:var(--dc-text-light);text-align:left;font-style:normal;} /* L'image debordante. La colonne de texte fait 760 px ; l'image monte a 1040 px et se recentre sur l'axe de la page. `margin-left:50%` + `translateX(-50%)` : le centre de l'image tombe sur le centre de la colonne, qui est deja le centre de la page — donc pas de calcul de gouttiere a tenir a jour. Le `min()` avec `100vw - 80px` empeche tout debordement horizontal, y compris quand la barre de defilement est absente. Borne a 1025 px : en dessous, la colonne occupe deja toute la largeur utile, deborder n'aurait plus de sens et creerait un decalage. */ @media (min-width:1025px){ .dc-article-body .dc-art-figure--large{ width:min(1040px,calc(100vw - 80px));max-width:none; margin-left:50%;transform:translateX(-50%);} .dc-article-body .dc-art-figure--large figcaption, .dc-article-body .dc-art-figure--large .elementor-image-caption{ max-width:760px;margin-left:auto;margin-right:auto;} } /* Deux images de front. Sous 600 px elles s'empilent : deux photos a 45 % d'une colonne de telephone ne montrent plus rien. */ .dc-article-body .dc-art-figure--duo{ display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;} .dc-article-body .dc-art-figure--duo figcaption, .dc-article-body .dc-art-figure--duo .elementor-image-caption{grid-column:1/-1;} /* 16/09 : la legende du duo est un widget « editeur de texte » dans le bloc 11 de l'article type, pas une legende d'image — elle n'etait donc pas visee par la regle ci-dessus et tombait dans UNE SEULE colonne (312 px au lieu de 640). Defaut present depuis la creation du bloc, jamais vu parce que la variante n'avait jamais ete rendue. */ .dc-article-body .dc-art-figure--duo > .elementor-widget-text-editor{grid-column:1/-1;} /* ...et elle doit porter le meme filet que les deux autres legendes. La regle de la section 7 ne vise que figcaption / .elementor-image-caption ; la legende du duo est un editeur de texte, elle sortait donc en texte nu, sans filet ni couleur atténuée. « La meme grammaire partout » le veut. */ .dc-article-body .dc-art-figure--duo > .elementor-widget-text-editor p{ margin:0;padding-left:14px; border-left:2px solid var(--dc-gray-200); font-family:var(--dc-body);font-size:14px;line-height:1.55; color:var(--dc-text-light);text-align:left;font-style:normal;} @media (max-width:600px){ .dc-article-body .dc-art-figure--duo{grid-template-columns:1fr;} } /* --- 8. LA VIDEO DANS L'ARTICLE --------------------------------------------- Le cadre tient le rapport 16/9 par `aspect-ratio`, pas par un rembourrage en pourcentage : le second impose une hauteur calculee, et c'est exactement le motif qui a casse le cartouche de date le 13/9 — « une position qui depend d'un calcul de hauteur est une position qui cassera ». Fond nuit sous le lecteur : le temps que la vignette arrive, le cadre ne clignote pas en blanc. */ .dc-article-body .dc-art-video{margin:44px 0;} .dc-article-body .dc-art-video-cadre, .dc-article-body .dc-art-video .elementor-wrapper, .dc-article-body .dc-art-video .elementor-fit-aspect-ratio{ position:relative;aspect-ratio:16/9;padding:0; border-radius:var(--dc-radius-lg);overflow:hidden; background:var(--dc-bleu-nuit);} .dc-article-body .dc-art-video iframe, .dc-article-body .dc-art-video video, .dc-article-body .dc-art-video .elementor-video{ position:absolute;inset:0;width:100%;height:100%;border:0;display:block;} .dc-article-body .dc-art-video figcaption, .dc-article-body .dc-art-video .elementor-image-caption{ margin:14px 0 0;padding-left:14px;border-left:2px solid var(--dc-gray-200); font-family:var(--dc-body);font-size:14px;line-height:1.55; color:var(--dc-text-light);} /* --- 9. LE BLOC D'ECOUTE (PODCAST) ------------------------------------------ Il applique la regle posee le 13-14/9 : « le theme dit de quoi ca parle, le format dit comment on le consomme ». Un podcast s'ecoute — le bloc est donc un objet d'ecoute, pas un paragraphe avec un lien. Fond nuit : c'est la seule surface sombre du corps de l'article, elle signale l'ecoute sans avoir besoin d'une etiquette de plus. Le lecteur est un `

` n'est pas un element flex, d'ou un defaut invisible sur les articles de demonstration. C'est le pendant, pour ce composant, de la section 10 du gabarit. */ @media (min-width:1025px){ .dc-article-body .dc-art-figure--large{ flex:0 0 auto!important;align-self:center!important; /* Elementor impose au widget `width:640px;max-width:100%` : la largeur de la section 7 ne passait pas. Mesure : figure a 640 px au lieu de 1040. */ width:min(1040px,calc(100vw - 80px))!important;max-width:none!important; margin-left:50%!important;transform:translateX(-50%)!important;} .dc-article-body .dc-art-figure--large img{width:100%!important;} } /* 13. ...et il faut DISTINGUER LES DEUX ECRITURES. En HTML, la `
` n'est pas un element flex : `margin-left:50%` + `translateX(-50%)` la recentrent sur l'axe de la page. Mesure : 200/1040, juste. En widget, l'element EST un enfant flex : `align-self:center` le centre deja tout seul dans son conteneur. Cumuler les deux le projetait a x = -160, hors ecran a gauche. Pour ce cas on garde le centrage flex et on annule le decalage. */ @media (min-width:1025px){ .dc-article-body .dc-art-figure--large.elementor-widget{ margin-left:0!important;transform:none!important;align-self:center!important;} } /* 14. L'ENCADRE — 16 septembre, ne pas confondre avec une citation. Les articles reels emploient
pour DEUX choses : une citation de quelques lignes, et un encadre documentaire (une biographie, un rappel). Converti sans distinction, le second sortait en citation geante de 863 px de haut — c'est ce que Yassine a signale sur l'article 1634. Regle de detection retenue : un blockquote qui contient un TITRE ou plus de deux paragraphes est un encadre, pas une citation. Traitement : un aplat gris tres clair, un filet, pas de guillemet, et un titre ramene a l'echelle d'un intertitre de niveau 3. */ .dc-article-body .dc-art-encadre{ background:var(--dc-gray-50,#F9FAFB); border:1px solid var(--dc-gray-200,#E2E5ED); border-radius:var(--dc-radius-lg,16px); padding:28px 30px;margin:44px 0;} .dc-article-body .dc-art-encadre > .e-con-inner{padding:0;} .dc-article-body .dc-art-encadre h2, .dc-article-body .dc-art-encadre h3, .dc-article-body .dc-art-encadre h4{ font-family:var(--dc-display);font-size:19px;font-weight:700;line-height:1.35; color:var(--dc-text);margin:0 0 14px;} .dc-article-body .dc-art-encadre p{font-size:16px;line-height:1.7;margin:0 0 14px;} .dc-article-body .dc-art-encadre p:last-child{margin-bottom:0;} /* 15. UNE INTEGRATION EXTERNE (formulaire, agenda) garde la mesure du corps. */ .dc-article-body .dc-art-embed{margin:44px 0;border-radius:12px;overflow:hidden;} /* 16. LE WIDGET BLOCKQUOTE D'ELEMENTOR PRO — 16 septembre. La conversion emploie desormais ce widget plutot qu'un
ecrit a la main : la redaction remplit deux champs, le texte et l'auteur, au lieu d'editer du HTML. Le widget arrive avec ses propres mesures — filet de 7 px et retrait de 20 px — qu'on ramene a celles du site (3 px / 28 px) pour que les citations ecrites a la main et celles du widget soient identiques. */ .dc-article-body .elementor-blockquote{ border-left-width:3px!important;padding-left:28px!important; margin:44px 0!important;background:transparent!important;} .dc-article-body .elementor-blockquote__author{ display:block;font-family:var(--dc-body);font-size:14px;font-style:normal; font-weight:500;color:var(--dc-text-light);margin-top:14px;} /* 17. LE TEXTE COLLAIT A LA LEGENDE — 16 septembre, signale par Yassine. Mesure : image -> legende 14 px (juste), puis legende -> texte suivant 0 px. La marge du widget sortait a `44px 0 0` : le bas avait ete ecrase, alors que la regle de la section 7 prevoit 44 des deux cotes. La legende n'a pas de marge basse propre — c'est donc au bloc image de la porter, comme pour les autres blocs du corps. */ /* 16/09, 2e passe. La premiere version employait `margin-bottom` sur deux classes ; Elementor pose `.e-con .elementor-widget.elementor-widget {margin-block-end:0}` sur TROIS classes, avec la propriete logique. Elle gagnait, et le texte restait colle a la legende — defaut signale deux fois par Yassine. On egalise : meme propriete, meme nombre de classes, et notre feuille passe apres celle d'Elementor. Un reglage saisi dans le widget reste prioritaire, il est ecrit plus tard encore. */ .dc-article-body .elementor-widget.elementor-widget-image{margin-block-end:44px;} /* 18. L'IMAGE NE DOIT PLUS ETRE ROGNEE — 16 septembre, constat de Yassine. La regle de la section 7 plafonnait les images du corps a 560 px avec `object-fit:cover`. Ecrite pour des PHOTOS en paysage, ou plafonner evite qu'un portrait ecrase la page. Mais les visuels reels du client sont des infographies CARREES de 800x800 : le plafond leur coupait le haut et le bas. Mesure : 800x800 affiche en 640x560. Une image d'article se montre entiere. On garde l'arrondi. */ .dc-article-body .dc-art-figure img, .dc-article-body .elementor-widget-image img{ max-height:none;object-fit:fill;height:auto; border-radius:var(--dc-radius-lg,16px);} /* 19. LES LIENS SORTANTS S'OUVRENT DANS UN NOUVEL ONGLET. Convention retenue : un lien INTERNE reste dans l'onglet, un lien EXTERNE s'ouvre a cote, pour ne pas faire quitter le site. On ajoute `rel` pour la securite et un `title` implicite via l'attribut ajoute cote rendu. Le marquage visuel reste discret : le soulignement du corps suffit. */ .dc-article-body a[target="_blank"]:not(:has(img)):not(:has(figure))::after{ content:"\2197";font-size:.78em;line-height:1;margin-left:.22em; vertical-align:.12em;opacity:.7;text-decoration:none;display:inline-block;} /* 20. L'ESPACEMENT DES BLOCS RESTE MODIFIABLE DANS L'EDITEUR. Argument de Yassine, 16/09 : la redaction n'est pas developpeuse ; si une marge est verrouillee en CSS avec !important, le champ « Marge » du widget ne fait RIEN — un reglage qui semble disponible et ne repond pas est pire qu'un reglage absent. Regle adoptee : le CSS pose le rythme PAR DEFAUT, sans !important, et tout reglage saisi dans le widget le remplace. */ /* 21. UNE IMAGE CLIQUABLE NE DOIT PAS TRAINER DE TALON. Le lien qui enveloppe une image reste un element EN LIGNE : il porte un talon de ligne de base sous l'image. Mesure : legende a 22 px d'une image liee contre 14 px d'une image libre. On le passe en bloc. */ .dc-article-body .elementor-widget-image a{display:block;line-height:0;font-size:0;} .dc-article-body .elementor-widget-image figcaption, .dc-article-body .elementor-widget-image .widget-image-caption{line-height:1.55;font-size:14px;} /* [18-09-2026, passe mobile] « TOUTES LES ACTUALITES » : UNE CIBLE DE 15 PX. Releve a 390 px : le lien nu de la section « A lire aussi » mesurait 165 x 15 px. Le critere WCAG 2.5.8 demande 24 x 24, et l'exemption « inline » ne le couvre pas — ce n'est pas un lien dans une phrase, c'est une commande isolee en tete de section. On ne touche pas au dessin : c'est la RESERVE verticale qui vient, 5 px de part et d'autre, ce qui porte la cible a 25 px sans deplacer le texte d'un pixel (le lien est `inline-block`, sa boite grandit vers l'interieur de la ligne). */ .dc-related-all .elementor-button{ padding-top:5px!important;padding-bottom:5px!important;} /* --- 8. « A RETENIR », VARIANTE EN DEGRADE ---------------------------------- Hamza : « je mettrais un fond degrade un peu comme les call to action, parce qu'elle veut vraiment quelque chose qui ressorte plus » — puis, precise par Yassine : « il a dit le meme que sur le CTA de la page d'accueil ». Mesure sur `/` : la bande « Une question ? Parlons-en » porte `linear-gradient(135deg,#0a0a0a 0%,#1a0f2e 35%,#0F1B3D 70%,#1E3A8A 100%)`, c'est-a-dire le jeton `--dc-grad-hero-deep` du kit. On le reprend tel quel. C'est un degrade SOMBRE : l'encre s'inverse entierement. L'intitule ne peut pas rester en #00688A (1,7:1 sur ce fond) — il passe au cyan clair de la marque, et le gras des items avec lui. */ .dc-article-body .dc-art-retenir--degrade{ border:0; background:var(--dc-grad-hero-deep, linear-gradient(135deg,#0a0a0a 0%,#1a0f2e 35%,#0F1B3D 70%,#1E3A8A 100%));} /* Yassine : « le mot "a retenir" n'est pas tres lisible, mets-le en plus clair ». Le cyan #7FE9FB tenait le seuil, mais a 12 px en capitales espacees sur un fond presque noir il fallait plus de presence que de conformite. */ .dc-article-body .dc-art-retenir--degrade .dc-art-retenir-t, .dc-article-body .dc-art-retenir--degrade .dc-art-retenir-t .elementor-heading-title.elementor-heading-title{ color:#CFF6FF!important;} .dc-article-body .dc-art-retenir--degrade li{color:rgba(255,255,255,.90);} .dc-article-body .dc-art-retenir--degrade li strong{color:#FFFFFF;} /* =========================================================================== PASSE MOBILE / TABLETTE — 21 septembre 2026 Cibles tactiles de la FICHE ARTICLE. Validees par Yassine le 21/09. Ecrit ICI, dans le modele 1690, et non dans un article : ces quatre elements appartiennent au gabarit, donc aux 14 articles. PORTEE : <=1024 px, telephone et tablette. Le bureau (>=1025) ne bouge pas d'un pixel — les versions bureau sont parties chez le client (21/09). METHODE : on etend la zone sensible par pseudo-element, sans toucher au dessin. Les quatre pseudo-elements utilises ici ont ete verifies LIBRES (`content: none` calcule) avant d'etre pris — deux erreurs dans la journee ont ete causees par l'inverse. =========================================================================== */ @media (max-width:1024px){ /* [1] Les quatre boutons de partage : 36 x 36. Ce sont des boites visibles, a bordure — les grandir se verrait. On etend, de 4 px de chaque cote. Mesure des ecarts : 10 px entre deux boutons (109..145, puis 155..191). Les zones deviennent 105..149 et 151..195 : 2 px d'ecart, pas de recouvrement. `::after` verifie libre. */ .dc-share-btns .elementor-share-btn{position:relative;} .dc-share-btns .elementor-share-btn::after{ content:"";position:absolute;inset:-4px;} /* [2] « Toutes les actualites » : 165 x 25. Deja remonte de 15 a 25 px le 18/09, toujours sous le seuil. Aucun voisin cliquable a moins de 40 px au-dessus ni en dessous (verifie) : -10 px de chaque cote, soit 45. */ .dc-related-all .elementor-button{position:relative;} .dc-related-all .elementor-button::after{ content:"";position:absolute;inset:-10px 0;} /* [3] L'etiquette de rubrique du heros (« VIDEOS ») : 91 x 31. Le recouvrement de son conteneur est decoratif (`pointer-events:none`), il ne portait donc aucun clic qu'on pourrait casser. */ .dc-article-tag .elementor-post-info__terms-list-item{position:relative;} .dc-article-tag .elementor-post-info__terms-list-item::after{ content:"";position:absolute;inset:-7px;} /* [4] Les trois « Lire la suite » des articles lies : 84 x 26. ATTENTION — c'est le piege paye deux fois le 21/09 : sur ce gabarit aussi le `::after` du lien EST LA FLECHE (masque SVG, le widget Posts n'ayant pas d'option d'icone). On prend donc `::before`, verifie libre. Priorite basse assumee : la vignette ET le titre de chaque carte sont deja des liens vers le meme article (verifie a `elementFromPoint`), donc la cible utile existait deja. On ajoute une troisieme voie, on n'en repare pas une absente. */ /* -10 et non -9 : selon l'article, le lien mesure 25 ou 26 px (la hauteur depend de la police rendue). A -9 px, les cartes de 25 px donnaient 43 px de zone — un pixel sous le seuil, verifie sur quatre articles. */ .elementor-posts .elementor-post__read-more{position:relative;} .elementor-posts .elementor-post__read-more::before{ content:"";position:absolute;inset:-10px 0;} } /* [28/09] Article au telephone : le widget qui porte la video etait ecrase a 0 px par la colonne flex (le cadre 16:9 debordait sur « Ce que dit la video »). */ @media (max-width:767px){ .dc-article-body .dc-art-video.dc-art-video{flex-wrap:nowrap!important;} /* colonne flex en « wrap » : Chrome y ecrase un cadre 16:9 a 0 px */ } @media (max-width:767px){ /* [28/09 b] cadre 16:9 SANS aspect-ratio (Safari iOS ecrasait encore le bloc) : methode du padding, valable partout */ .dc-article-body .dc-art-video .dc-art-video-cadre.dc-art-video-cadre{aspect-ratio:auto!important;height:0!important;padding:56.25% 0 0!important;} .dc-article-body .dc-art-video > .elementor-widget{flex:0 0 auto!important;width:100%!important;} }/* End custom CSS */