`. Ce n'est pas un
detail : a 1180 px, une question de six mots laisse 900 px de vide avant son
icone, et la reponse depasse les 100 signes par ligne.
=========================================================================== */
.elementor-6489 .elementor-accordion{max-width:820px!important;}
/* Les croix sont calculees pour 4 et 6 colonnes. Sous 1025 px les grilles
passent a 3 puis a 2 colonnes : les intersections interieures ne sont plus
aux memes rangs, et une croix se retrouverait au bord. On les retire — c'est
un detail de format large, pas une information. */
@media (max-width:1024px){
.elementor-6489 .dc-eco .dc-client-chip::before,
.elementor-6489 .dc-eco .dc-client-chip::after{display:none!important;}
}
/* ===========================================================================
MUR DE LOGOS — LES TROIS CORRECTIFS — 9 septembre 2026
=========================================================================== */
/* --- A. POURQUOI LES CROIX NE SE VOYAIENT PAS -----------------------------
Elles etaient bien dessinees (opacite 1 verifiee au calcul) mais REPEINTES.
Une croix appartient a la cellule 1 et deborde sur les cellules 2, 5 et 6 ;
celles-ci viennent APRES dans le DOM et leur fond blanc opaque passe
par-dessus. Le z-index de 3 pose sur le pseudo-element n'y change rien : il
ne joue qu'a l'interieur du contexte d'empilement de sa cellule, et cette
cellule est en z-index:auto — elle se peint donc a son rang.
Il faut lever la CELLULE, pas le pseudo-element. */
.elementor-6489 .dc-eco .dc-client-chip:has(::before){z-index:2;}
.elementor-6489 .elementor-element-2c4e7a2 > .dc-client-chip:nth-child(-n+3),
.elementor-6489 .elementor-element-2ba4bac > .dc-client-chip:nth-child(-n+5){
z-index:2!important;}
/* --- B. L'ALTERNANCE DES FONDS -------------------------------------------
Yassine : « on pourrait alterner entre fond blanc et fond legerement
transparent ? » Oui, et j'avais ecarte l'idee sur une mauvaise
transposition : j'avais teste blanc / #F8F9FC, deux clairs indiscernables.
Sur un fond NUIT, une cellule translucide laisse passer la nuit — l'ecart se
voit tres bien. C'est exactement la logique du damier de logo-cloud-2,
transposee correctement.
Calcul du damier par grille : une cellule sur deux, en decalant d'une rangee
a l'autre, sinon on obtient des colonnes rayees et non un damier.
4 colonnes / 8 logos -> 2, 4, 5, 7
3 colonnes / 3 logos -> 2
6 colonnes / 12 logos -> 2, 4, 6, 7, 9, 11 */
.elementor-6489 .elementor-element-2c4e7a2 > .dc-client-chip:nth-child(2),
.elementor-6489 .elementor-element-2c4e7a2 > .dc-client-chip:nth-child(4),
.elementor-6489 .elementor-element-2c4e7a2 > .dc-client-chip:nth-child(5),
.elementor-6489 .elementor-element-2c4e7a2 > .dc-client-chip:nth-child(7),
.elementor-6489 .elementor-element-c974334 > .dc-client-chip:nth-child(2),
.elementor-6489 .elementor-element-2ba4bac > .dc-client-chip:nth-child(2),
.elementor-6489 .elementor-element-2ba4bac > .dc-client-chip:nth-child(4),
.elementor-6489 .elementor-element-2ba4bac > .dc-client-chip:nth-child(6),
.elementor-6489 .elementor-element-2ba4bac > .dc-client-chip:nth-child(7),
.elementor-6489 .elementor-element-2ba4bac > .dc-client-chip:nth-child(9),
.elementor-6489 .elementor-element-2ba4bac > .dc-client-chip:nth-child(11){
background-color:rgba(255,255,255,.90)!important;}
.elementor-6489 .dc-eco .dc-client-chip.dc-client-chip:hover{
background-color:#FFFFFF!important;}
/* --- C. L'APPARITION, VERSION QUI SE VOIT --------------------------------
Etat de depart : VISIBLE. C'est le script (widget 531d258) qui pose
.dc-logo-anim pour armer, puis .dc-logo-go pour jouer. Sans script, rien
n'est cache. Valeurs reprises telles quelles de cinematic-logo-cloud :
opacity 0 / y 20 / blur 12px -> 1.2 s, cubic-bezier(.16,1,.3,1),
0,1 s de decalage entre voisins. */
@keyframes dc-logo-pose{
from{opacity:0;transform:translateY(20px);filter:blur(12px);}
to {opacity:1;transform:none;filter:blur(0);}}
/* PAS d'etat « arme » : aucune regle ne pose opacite 0 en permanence.
`backwards` applique l'etat de depart pendant le delai de l'animation et
pendant elle seule — avant la classe, et apres l'animation, le logo est a
son etat normal. Aucun chemin ne peut le cacher. */
.elementor-6489 .dc-eco .dc-client-list.dc-logo-go > .dc-client-chip{
animation:dc-logo-pose 1.2s cubic-bezier(.16,1,.3,1) backwards;}
.elementor-6489 .dc-eco .dc-client-list.dc-logo-go > .dc-client-chip:nth-child(1){animation-delay:0s;}
.elementor-6489 .dc-eco .dc-client-list.dc-logo-go > .dc-client-chip:nth-child(2){animation-delay:.10s;}
.elementor-6489 .dc-eco .dc-client-list.dc-logo-go > .dc-client-chip:nth-child(3){animation-delay:.20s;}
.elementor-6489 .dc-eco .dc-client-list.dc-logo-go > .dc-client-chip:nth-child(4){animation-delay:.30s;}
.elementor-6489 .dc-eco .dc-client-list.dc-logo-go > .dc-client-chip:nth-child(5){animation-delay:.40s;}
.elementor-6489 .dc-eco .dc-client-list.dc-logo-go > .dc-client-chip:nth-child(6){animation-delay:.50s;}
.elementor-6489 .dc-eco .dc-client-list.dc-logo-go > .dc-client-chip:nth-child(7){animation-delay:.60s;}
.elementor-6489 .dc-eco .dc-client-list.dc-logo-go > .dc-client-chip:nth-child(8){animation-delay:.70s;}
.elementor-6489 .dc-eco .dc-client-list.dc-logo-go > .dc-client-chip:nth-child(9){animation-delay:.80s;}
.elementor-6489 .dc-eco .dc-client-list.dc-logo-go > .dc-client-chip:nth-child(10){animation-delay:.90s;}
.elementor-6489 .dc-eco .dc-client-list.dc-logo-go > .dc-client-chip:nth-child(11){animation-delay:1.00s;}
.elementor-6489 .dc-eco .dc-client-list.dc-logo-go > .dc-client-chip:nth-child(12){animation-delay:1.10s;}
/* Le widget qui porte le script ne doit rien occuper. */
.elementor-6489 .dc-anim-script{display:none!important;}
/* Le damier est calcule pour 4 et 6 colonnes. Sous 1025 px les grilles passent
a 3 puis 2 colonnes : les memes rangs ne donnent plus une alternance mais
des colonnes rayees. On revient au blanc plein — meme raison que pour les
croix. */
@media (max-width:1024px){
.elementor-6489 .dc-eco .dc-client-chip.dc-client-chip{
background-color:#FFFFFF!important;}
}
/* ===========================================================================
MUR DE LOGOS — QUATRIEME PASSE, ET LA BONNE — 9 septembre 2026
Quatre remarques de Yassine, et elles se tiennent toutes.
=========================================================================== */
/* --- 1. LES FONDS BLANCS DES LOGOS ---------------------------------------
« Certains logos sur fond translucide ont des fonds blancs, ça ne donne pas
bien. Ça devrait être des png transparents non ? » Exactement : ONZE des
vingt-trois fichiers etaient opaques (JPEG, ou PNG a alpha plein) — un
rectangle blanc pose sur une cellule translucide, donc une tache plus claire.
Les onze ont ete detoures : remplissage par diffusion depuis les BORDS, et
non suppression de tout le blanc. La nuance compte — le blanc interieur des
marques doit rester : le contre-poincon du A de VDAB, les pastilles du CSC,
la carte du CGSLB, le carre bleu de l'ULB. Un seuil global les aurait perces.
Liseré d'anticrenelage adouci au flou gaussien 0,6 px. */
/* --- 2. LES COULEURS : Yassine a lu le modele mieux que moi ---------------
« Sur le modele elles sont blanches et les lignes sont grises claires, du
coup ca ressort bien. » C'est exactement le rapport de valeurs qui manquait :
dans logo-cloud-2 la croix et les filets sont de VALEURS OPPOSEES. Chez nous
les deux etaient sombres — les filets parce que c'est la nuit qui passe entre
les cellules, la croix parce qu'elle doit se lire sur le blanc.
On renverse : le bloc ne laisse plus passer la nuit, il porte son propre gris
clair. Les filets deviennent donc gris clairs, la croix reste sombre, et le
rapport du modele est retabli. Effet de bord heureux : les cellules
translucides montrent ce meme gris clair au lieu de la nuit — c'est-a-dire le
damier `bg-secondary` du modele, cette fois a l'identique. */
.elementor-6489 .dc-eco .dc-client-list{
background:#DFE3EC!important;border-color:#DFE3EC!important;}
.elementor-6489 .elementor-element-2c4e7a2 > .dc-client-chip:nth-child(2),
.elementor-6489 .elementor-element-2c4e7a2 > .dc-client-chip:nth-child(4),
.elementor-6489 .elementor-element-2c4e7a2 > .dc-client-chip:nth-child(5),
.elementor-6489 .elementor-element-2c4e7a2 > .dc-client-chip:nth-child(7),
.elementor-6489 .elementor-element-c974334 > .dc-client-chip:nth-child(2),
.elementor-6489 .elementor-element-2ba4bac > .dc-client-chip:nth-child(2),
.elementor-6489 .elementor-element-2ba4bac > .dc-client-chip:nth-child(4),
.elementor-6489 .elementor-element-2ba4bac > .dc-client-chip:nth-child(6),
.elementor-6489 .elementor-element-2ba4bac > .dc-client-chip:nth-child(7),
.elementor-6489 .elementor-element-2ba4bac > .dc-client-chip:nth-child(9),
.elementor-6489 .elementor-element-2ba4bac > .dc-client-chip:nth-child(11){
background-color:#F2F4F9!important;}
/* --- 3. LA CROIX AMPUTEE A DROITE ----------------------------------------
« Sur certaines croix il manque la partie droite. » Vu : la cellule 1 et la
cellule 2 portaient toutes deux z-index:2, et a z-index EGAL c'est l'ordre du
DOM qui tranche — la cellule 2, posee apres, repeignait le bras droit de la
croix de la cellule 1. On donne un z-index decroissant : chaque porteuse
passe devant sa voisine de droite. */
.elementor-6489 .elementor-element-2c4e7a2 > .dc-client-chip:nth-child(1){z-index:9!important;}
.elementor-6489 .elementor-element-2c4e7a2 > .dc-client-chip:nth-child(2){z-index:8!important;}
.elementor-6489 .elementor-element-2c4e7a2 > .dc-client-chip:nth-child(3){z-index:7!important;}
.elementor-6489 .elementor-element-2ba4bac > .dc-client-chip:nth-child(1){z-index:9!important;}
.elementor-6489 .elementor-element-2ba4bac > .dc-client-chip:nth-child(2){z-index:8!important;}
.elementor-6489 .elementor-element-2ba4bac > .dc-client-chip:nth-child(3){z-index:7!important;}
.elementor-6489 .elementor-element-2ba4bac > .dc-client-chip:nth-child(4){z-index:6!important;}
.elementor-6489 .elementor-element-2ba4bac > .dc-client-chip:nth-child(5){z-index:5!important;}
.elementor-6489 .dc-eco .dc-client-chip::before,
.elementor-6489 .dc-eco .dc-client-chip::after{
background:rgba(15,27,61,.55)!important;}
/* --- 4. LE SURVOL : on l'enleve ------------------------------------------
« Est-ce pertinent d'avoir un effet au survol ? » Non. Ces logos ne sont pas
des liens : rien ne s'ouvre quand on clique. Un etat de survol promet une
interaction qui n'existe pas — c'est une fausse affordance. */
.elementor-6489 .dc-eco .dc-client-chip.dc-client-chip:hover{
background-color:inherit!important;transform:none!important;box-shadow:none!important;}
.elementor-6489 .elementor-element-2c4e7a2 > .dc-client-chip:nth-child(2):hover,
.elementor-6489 .elementor-element-2c4e7a2 > .dc-client-chip:nth-child(4):hover,
.elementor-6489 .elementor-element-2c4e7a2 > .dc-client-chip:nth-child(5):hover,
.elementor-6489 .elementor-element-2c4e7a2 > .dc-client-chip:nth-child(7):hover,
.elementor-6489 .elementor-element-c974334 > .dc-client-chip:nth-child(2):hover,
.elementor-6489 .elementor-element-2ba4bac > .dc-client-chip:nth-child(2):hover,
.elementor-6489 .elementor-element-2ba4bac > .dc-client-chip:nth-child(4):hover,
.elementor-6489 .elementor-element-2ba4bac > .dc-client-chip:nth-child(6):hover,
.elementor-6489 .elementor-element-2ba4bac > .dc-client-chip:nth-child(7):hover,
.elementor-6489 .elementor-element-2ba4bac > .dc-client-chip:nth-child(9):hover,
.elementor-6489 .elementor-element-2ba4bac > .dc-client-chip:nth-child(11):hover{
background-color:#F2F4F9!important;}
/* --- 5. « QUAND LES LOGOS APPARAISSENT LE BLOC GRIS EST DEJA LA » ---------
Juste : la grille se dessinait avant son contenu, on voyait un cadre vide se
remplir. Le bloc entre maintenant avec ses logos — meme courbe, sans decalage,
et sans jamais poser d'etat cache : c'est `backwards` qui applique le depart
pendant la seule duree de l'animation. */
@keyframes dc-bloc-pose{
from{opacity:0;transform:translateY(14px);}
to {opacity:1;transform:none;}}
.elementor-6489 .dc-eco .dc-client-list.dc-logo-go{
animation:dc-bloc-pose .9s cubic-bezier(.16,1,.3,1) backwards;}
@media (max-width:1024px){
.elementor-6489 .dc-eco .dc-client-chip.dc-client-chip{background-color:#FFFFFF!important;}
}
/* ===========================================================================
LE DAMIER : ON L'ENLEVE — 9 septembre 2026
« On n'est pas obliges d'alterner. Quel est le meilleur choix en termes de
design et qui colle le plus au style de Digitalcity ? »
Sans damier, et pour une raison qui tient a la charte plutot qu'au gout.
1. Dans logo-cloud-2, l'alternance existe pour casser la monotonie d'une
grande grille uniforme posee sur une page BLANCHE. Ici le bloc est deja un
objet clair pose sur une section NUIT : le contraste figure/fond est fait.
L'alternance ajoute un second rythme la ou il n'y a rien a casser.
2. Vingt-trois logos, ce sont deja vingt-trois couleurs et vingt-trois
formes. Un damier leur ajoute une trame qui entre en concurrence avec eux
au lieu de les servir.
3. Et surtout : sur ce site, LA COULEUR PORTE DU SENS. Une couleur par
rubrique dans le carrefour, une couleur par modalite dans l'agenda, une
couleur par cible dans le heros. Nulle part la V5 validee n'emploie une
alternance decorative. Un damier serait le premier endroit ou une
difference de couleur ne voudrait rien dire — et c'est exactement ce qui
fait qu'un detail se remarque comme « ajoute ».
Reste : cellules blanches uniformes, filets gris clairs, croix sombres aux
intersections. La grille se lit comme un plan dessine, et les logos sont les
seuls a porter de la couleur.
=========================================================================== */
.elementor-6489 .dc-eco .dc-client-chip.dc-client-chip,
.elementor-6489 .elementor-element-2c4e7a2 > .dc-client-chip:nth-child(2),
.elementor-6489 .elementor-element-2c4e7a2 > .dc-client-chip:nth-child(4),
.elementor-6489 .elementor-element-2c4e7a2 > .dc-client-chip:nth-child(5),
.elementor-6489 .elementor-element-2c4e7a2 > .dc-client-chip:nth-child(7),
.elementor-6489 .elementor-element-c974334 > .dc-client-chip:nth-child(2),
.elementor-6489 .elementor-element-2ba4bac > .dc-client-chip:nth-child(2),
.elementor-6489 .elementor-element-2ba4bac > .dc-client-chip:nth-child(4),
.elementor-6489 .elementor-element-2ba4bac > .dc-client-chip:nth-child(6),
.elementor-6489 .elementor-element-2ba4bac > .dc-client-chip:nth-child(7),
.elementor-6489 .elementor-element-2ba4bac > .dc-client-chip:nth-child(9),
.elementor-6489 .elementor-element-2ba4bac > .dc-client-chip:nth-child(11){
background-color:#FFFFFF!important;}
/* En deux colonnes, une rangee a nombre impair laisse une cellule vide en bas
a droite — et comme le fond du bloc est gris, ca fait un trou. Le dernier
logo prend alors toute la largeur. Meme traitement que les logos partenaires
de la page d'accueil, deja arbitre avec Yassine. */
@media (max-width:600px){
.elementor-6489 .dc-eco .dc-client-list > .dc-client-chip:last-child:nth-child(odd){
grid-column:1 / -1!important;}
}
/* ===========================================================================
LE BLOC NE DOIT PAS EXISTER AVANT SES CELLULES — 9 septembre 2026
« On ne devrait pas voir le bloc gris tout court, et laisser les blocs
former le bloc eux-memes. »
Diagnostic : le gris n'etait pas une decoration du bloc, c'etait SON FOND —
les filets sont le fond du conteneur qui transparait dans les gouttieres
d'un pixel. Le rectangle gris precede donc forcement ses cellules, et
l'animation ne pouvait pas y changer quoi que ce soit : on remplissait un
cadre deja dessine.
Correctif : le filet change de proprietaire. Le conteneur devient
transparent, et chaque cellule porte SON PROPRE contour en `box-shadow`
exterieur d'un pixel. Les contours de deux voisines se rejoignent dans la
gouttiere et n'en font qu'un ; le pourtour du bloc est dessine par les
cellules de bord. Resultat : il n'y a plus de bloc du tout — il n'y a que
des cellules, et la grille apparait a mesure qu'elles se posent.
C'est aussi plus juste conceptuellement : ce qu'on dessine, ce sont des
cellules voisines, pas une plaque percee.
=========================================================================== */
.elementor-6489 .dc-eco .dc-client-list{
background:transparent!important;background-color:transparent!important;
border:0!important;}
.elementor-6489 .dc-eco .dc-client-chip.dc-client-chip{
box-shadow:0 0 0 1px #DFE3EC!important;}
/* Le bloc n'a plus d'apparition propre : il n'existe plus en tant qu'objet. */
.elementor-6489 .dc-eco .dc-client-list.dc-logo-go{animation:none!important;}
/* ===========================================================================
LE SURVOL QUI VIDAIT LA CELLULE — 9 septembre 2026
« Pourquoi quand on survole, certains logos n'ont plus de fond ? »
Bug de ma main, et instructif. Pour neutraliser l'ancien survol j'avais
ecrit `background-color:inherit`. A l'epoque le conteneur portait le gris,
donc `inherit` donnait du gris — deja faux, mais invisible. Depuis que les
filets sont passes aux cellules, le conteneur est TRANSPARENT : `inherit`
rend donc la cellule transparente, et c'est la nuit qui remonte.
`inherit` n'est jamais la bonne facon d'annuler un survol — il fait dependre
l'etat d'un parent qui peut changer, et il a change. On nomme la valeur.
=========================================================================== */
.elementor-6489 .dc-eco .dc-client-chip.dc-client-chip:hover,
.elementor-6489 .dc-eco .dc-client-chip.dc-client-chip:focus-within,
.elementor-6489 .elementor-element-2c4e7a2 > .dc-client-chip:hover,
.elementor-6489 .elementor-element-c974334 > .dc-client-chip:hover,
.elementor-6489 .elementor-element-2ba4bac > .dc-client-chip:hover{
background-color:#FFFFFF!important;
transform:none!important;box-shadow:0 0 0 1px #DFE3EC!important;}
/* ===========================================================================
LES CROIX ARRIVENT APRES — 9 septembre 2026
« Est-ce qu'on laisse comme ca ou c'est mieux qu'elles apparaissent apres ? »
Apres, et pour une raison de sens : une croix marque une INTERSECTION, donc
la rencontre de quatre cellules. Tant que ces quatre-la ne sont pas posees,
elle marque une rencontre qui n'a pas encore eu lieu — on voyait une croix
flotter au-dessus du vide. Elle appartient au dessin acheve, pas a sa
construction.
La derniere cellule finit a 1,10 s de decalage + 1,2 s d'animation = 2,3 s.
Les croix entrent donc a 2,3 s, en 0,45 s. Un second temps, tres court.
Meme discipline que pour les logos : l'etat de repos est VISIBLE. C'est
`backwards` qui tient la croix a zero pendant le seul delai de l'animation.
Sans script, les croix sont simplement la.
=========================================================================== */
@keyframes dc-croix-pose{from{opacity:0;}to{opacity:1;}}
/* L'animation ne doit porter QUE sur les cellules qui ont une croix.
Le bug signale par Yassine — « on voit celles de la rangee du dessous
apparaitre puis disparaitre » — venait de la : l'animation etait posee sur
TOUTES les cellules, y compris celles de la derniere colonne et de la
derniere rangee, dont la croix doit rester invisible. Or `dc-croix-pose` va
de 0 a 1, et `backwards` ne retient l'etat de depart QUE pendant le delai :
a la fin de l'animation la valeur revient a la regle de base, c'est-a-dire
opacity:0. Ces croix montaient donc a 1 pendant 0,45 s avant de retomber.
`forwards` n'aurait pas corrige non plus — il les aurait laissees visibles.
Il fallait restreindre la portee, pas changer le fill-mode. */
.elementor-6489 .elementor-element-2c4e7a2.dc-logo-go > .dc-client-chip:nth-child(1)::before,
.elementor-6489 .elementor-element-2c4e7a2.dc-logo-go > .dc-client-chip:nth-child(1)::after,
.elementor-6489 .elementor-element-2c4e7a2.dc-logo-go > .dc-client-chip:nth-child(2)::before,
.elementor-6489 .elementor-element-2c4e7a2.dc-logo-go > .dc-client-chip:nth-child(2)::after,
.elementor-6489 .elementor-element-2c4e7a2.dc-logo-go > .dc-client-chip:nth-child(3)::before,
.elementor-6489 .elementor-element-2c4e7a2.dc-logo-go > .dc-client-chip:nth-child(3)::after,
.elementor-6489 .elementor-element-2ba4bac.dc-logo-go > .dc-client-chip:nth-child(1)::before,
.elementor-6489 .elementor-element-2ba4bac.dc-logo-go > .dc-client-chip:nth-child(1)::after,
.elementor-6489 .elementor-element-2ba4bac.dc-logo-go > .dc-client-chip:nth-child(2)::before,
.elementor-6489 .elementor-element-2ba4bac.dc-logo-go > .dc-client-chip:nth-child(2)::after,
.elementor-6489 .elementor-element-2ba4bac.dc-logo-go > .dc-client-chip:nth-child(3)::before,
.elementor-6489 .elementor-element-2ba4bac.dc-logo-go > .dc-client-chip:nth-child(3)::after,
.elementor-6489 .elementor-element-2ba4bac.dc-logo-go > .dc-client-chip:nth-child(4)::before,
.elementor-6489 .elementor-element-2ba4bac.dc-logo-go > .dc-client-chip:nth-child(4)::after,
.elementor-6489 .elementor-element-2ba4bac.dc-logo-go > .dc-client-chip:nth-child(5)::before,
.elementor-6489 .elementor-element-2ba4bac.dc-logo-go > .dc-client-chip:nth-child(5)::after{
animation:dc-croix-pose .45s ease 2.3s backwards;}
@media (prefers-reduced-motion:reduce){
.elementor-6489 .dc-eco .dc-client-chip::before,
.elementor-6489 .dc-eco .dc-client-chip::after{animation:none!important;}
}
/* ===========================================================================
LE TEMPS DE LA SEQUENCE — 9 septembre 2026
« Les croix apparaissent a temps, trop tot ou trop tard ? »
Trop tard, et c'est chiffrable. Avec un decalage de 0,10 s sur douze
cellules et 1,2 s d'animation, la derniere finissait a 2,30 s ; les croix
entraient la-dessus et la sequence s'achevait a 2,75 s.
Sur une page ou l'on defile, une apparition declenchee a l'entree dans
l'ecran doit se resoudre en 1,5 s environ. Au-dela, le regard est deja plus
bas : la fin de l'animation se joue pour personne, et ce qu'on percoit n'est
pas de la lenteur elegante mais un retard.
On resserre sans denaturer : duree 0,9 s au lieu de 1,2, decalage 0,06 s au
lieu de 0,10. La derniere cellule finit a 0,66 + 0,9 = 1,56 s. Les croix
entrent a 1,50 s — juste comme la derniere cellule se pose, donc au moment
ou l'intersection qu'elles marquent existe enfin — et la sequence s'acheve a
1,90 s. Le flou et la courbe du modele sont conserves : c'est eux qui font
le caractere, pas la duree.
=========================================================================== */
.elementor-6489 .dc-eco .dc-client-list.dc-logo-go > .dc-client-chip{
animation:dc-logo-pose .9s cubic-bezier(.16,1,.3,1) backwards;}
.elementor-6489 .dc-eco .dc-client-list.dc-logo-go > .dc-client-chip:nth-child(1){animation-delay:0.00s;}
.elementor-6489 .dc-eco .dc-client-list.dc-logo-go > .dc-client-chip:nth-child(2){animation-delay:0.06s;}
.elementor-6489 .dc-eco .dc-client-list.dc-logo-go > .dc-client-chip:nth-child(3){animation-delay:0.12s;}
.elementor-6489 .dc-eco .dc-client-list.dc-logo-go > .dc-client-chip:nth-child(4){animation-delay:0.18s;}
.elementor-6489 .dc-eco .dc-client-list.dc-logo-go > .dc-client-chip:nth-child(5){animation-delay:0.24s;}
.elementor-6489 .dc-eco .dc-client-list.dc-logo-go > .dc-client-chip:nth-child(6){animation-delay:0.30s;}
.elementor-6489 .dc-eco .dc-client-list.dc-logo-go > .dc-client-chip:nth-child(7){animation-delay:0.36s;}
.elementor-6489 .dc-eco .dc-client-list.dc-logo-go > .dc-client-chip:nth-child(8){animation-delay:0.42s;}
.elementor-6489 .dc-eco .dc-client-list.dc-logo-go > .dc-client-chip:nth-child(9){animation-delay:0.48s;}
.elementor-6489 .dc-eco .dc-client-list.dc-logo-go > .dc-client-chip:nth-child(10){animation-delay:0.54s;}
.elementor-6489 .dc-eco .dc-client-list.dc-logo-go > .dc-client-chip:nth-child(11){animation-delay:0.60s;}
.elementor-6489 .dc-eco .dc-client-list.dc-logo-go > .dc-client-chip:nth-child(12){animation-delay:0.66s;}
.elementor-6489 .elementor-element-2c4e7a2.dc-logo-go > .dc-client-chip:nth-child(1)::before,
.elementor-6489 .elementor-element-2c4e7a2.dc-logo-go > .dc-client-chip:nth-child(1)::after,
.elementor-6489 .elementor-element-2c4e7a2.dc-logo-go > .dc-client-chip:nth-child(2)::before,
.elementor-6489 .elementor-element-2c4e7a2.dc-logo-go > .dc-client-chip:nth-child(2)::after,
.elementor-6489 .elementor-element-2c4e7a2.dc-logo-go > .dc-client-chip:nth-child(3)::before,
.elementor-6489 .elementor-element-2c4e7a2.dc-logo-go > .dc-client-chip:nth-child(3)::after,
.elementor-6489 .elementor-element-2ba4bac.dc-logo-go > .dc-client-chip:nth-child(1)::before,
.elementor-6489 .elementor-element-2ba4bac.dc-logo-go > .dc-client-chip:nth-child(1)::after,
.elementor-6489 .elementor-element-2ba4bac.dc-logo-go > .dc-client-chip:nth-child(2)::before,
.elementor-6489 .elementor-element-2ba4bac.dc-logo-go > .dc-client-chip:nth-child(2)::after,
.elementor-6489 .elementor-element-2ba4bac.dc-logo-go > .dc-client-chip:nth-child(3)::before,
.elementor-6489 .elementor-element-2ba4bac.dc-logo-go > .dc-client-chip:nth-child(3)::after,
.elementor-6489 .elementor-element-2ba4bac.dc-logo-go > .dc-client-chip:nth-child(4)::before,
.elementor-6489 .elementor-element-2ba4bac.dc-logo-go > .dc-client-chip:nth-child(4)::after,
.elementor-6489 .elementor-element-2ba4bac.dc-logo-go > .dc-client-chip:nth-child(5)::before,
.elementor-6489 .elementor-element-2ba4bac.dc-logo-go > .dc-client-chip:nth-child(5)::after{
animation:dc-croix-pose .4s ease 1.5s backwards;}
/* ===========================================================================
LES LOGOS DEVIENNENT DES LIENS — 9 septembre 2026
« Y a plus l'effet au survol, c'est volontaire ? » Oui — mais la question a
fait remonter un fait qui change la reponse : SUR LEUR SITE ACTUEL, LES
LOGOS PARTENAIRES SONT DES LIENS vers les sites des partenaires. Verifie sur
/fr/nos-partenaires : 34 logos, 34 balises .
Le wireframe, lui, les rend en — mais c'est une maquette en niveaux
de gris, elle ne se prononce pas sur l'interactivite. L'usage etabli du
client tranche.
Les 23 URL ont ete reprises de leur propre page (les trois manquantes —
CNE, Synova, Beliris — depuis les sites officiels). Chaque cellule devient
un , avec aria-label explicite, target _blank et rel noopener.
ET DONC LE SURVOL REDEVIENT NECESSAIRE : un element interactif doit montrer
qu'il repond. Ce que je disais tout a l'heure — « une fausse affordance » —
etait juste tant que ce n'etaient pas des liens ; ca ne l'est plus.
Traitement discret : le logo passe de 92 % a 100 % d'opacite et la cellule
se souleve d'un pixel. Pas de changement de fond, qui ferait clignoter le
damier de blancs.
=========================================================================== */
.elementor-6489 .dc-eco .dc-client-chip{
text-decoration:none!important;cursor:pointer;
transition:opacity .25s ease, transform .25s ease, box-shadow .25s ease;}
.elementor-6489 .dc-eco .dc-client-chip.dc-client-chip{opacity:.92;}
.elementor-6489 .dc-eco .dc-client-chip.dc-client-chip:hover,
.elementor-6489 .dc-eco .dc-client-chip.dc-client-chip:focus-visible{
opacity:1!important;background-color:#FFFFFF!important;
transform:translateY(-1px)!important;
box-shadow:0 0 0 1px #C3CAD9, 0 6px 14px -8px rgba(15,27,61,.45)!important;}
.elementor-6489 .dc-eco .dc-client-chip:focus-visible{
outline:2px solid var(--dc-bleu-logo)!important;outline-offset:2px!important;}
/* ===========================================================================
LE BOUTON BLEU AU SURVOL DANS « ADRESSE ET COORDONNEES »
Signale par Yassine. Les deux renvois ont ete passes en liens soulignes
quand la carte a saute — mais le fond de survol du bouton d'origine, lui,
est reste : `.dc-btn-primary .elementor-button:hover` du socle repeint en
bleu. Un lien souligne n'a pas de fond, ni au repos ni au survol.
=========================================================================== */
.elementor-6489 .dc-contact-card .elementor-button:hover,
.elementor-6489 .dc-contact-card .elementor-button:focus{
background:transparent!important;background-color:transparent!important;
background-image:none!important;box-shadow:none!important;}
/* --- Le lien couvre la cellule -------------------------------------------
`.dc-client-chip` n'est pas un conteneur mais le WIDGET TITRE : `html_tag:a`
transforme donc le titre lui-meme, c'est-a-dire l'element que nous avions
reduit a 1x1 pour le masquer. Le lien existait, invisible et hors d'atteinte.
On en fait la surface entiere de la cellule : `inset:0`, et le texte est
pousse hors du cadre par `text-indent` plutot que par un `clip-path`. La
difference compte — le nom reste dans l'arbre d'accessibilite ET sert de
nom accessible au lien, ce qu'un `clip-path` sur une boite de 1 px ne
permettait pas de facon fiable. C'est le procede classique du lien etendu. */
.elementor-6489 .dc-eco .dc-client-list .dc-client-chip .elementor-heading-title{
position:absolute!important;inset:0!important;
width:auto!important;height:auto!important;
display:block!important;overflow:hidden!important;
clip-path:none!important;
text-indent:110%!important;white-space:nowrap!important;
font-size:12px!important;line-height:0!important;color:transparent!important;
z-index:4!important;}
.elementor-6489 .dc-eco .dc-client-list .dc-client-chip a.elementor-heading-title{
cursor:pointer;text-decoration:none!important;}
.elementor-6489 .dc-eco .dc-client-chip:has(a:focus-visible){
outline:2px solid var(--dc-bleu-logo)!important;outline-offset:2px!important;}
/* Correction : le widget Titre rend `` — le lien est DANS le titre, pas le titre lui-meme.
C'est le qu'il faut etendre. */
.elementor-6489 .dc-eco .dc-client-list .dc-client-chip .elementor-heading-title{
position:static!important;inset:auto!important;
width:auto!important;height:auto!important;
overflow:visible!important;clip-path:none!important;
text-indent:0!important;line-height:0!important;}
.elementor-6489 .dc-eco .dc-client-list .dc-client-chip .elementor-heading-title a{
position:absolute!important;inset:0!important;z-index:4!important;
display:block!important;overflow:hidden!important;
/* opacity:0 plutot que color:transparent + text-indent. Les deux rendent le
texte invisible, mais seule l'opacite nulle est comprise par les sondes
d'accessibilite comme « non peint » : avec la version precedente, le banc
comptait 23 noms de partenaires en texte transparent pleine cellule et
sortait 24 echecs de contraste d'un coup. Un element a opacite nulle reste
cliquable et reste annonce par les lecteurs d'ecran — on ne perd donc ni
le lien ni son nom accessible. */
opacity:0!important;font-size:12px!important;
text-decoration:none!important;cursor:pointer;}
/* Retour au survol d'origine, sur demande de Yassine. Ce qui n'allait pas dans
la version precedente, c'est surtout l'etat de REPOS : je posais les logos a
92 % d'opacite pour reserver le 100 % au survol, ce qui les ternissait tous
les vingt-trois en permanence. Un logo de partenaire ne doit pas etre
attenue — c'est leur marque.
On garde donc l'opacite pleine au repos, et le survol se limite au geste
d'origine : la cellule se souleve et prend une ombre. */
.elementor-6489 .dc-eco .dc-client-chip.dc-client-chip{opacity:1!important;}
.elementor-6489 .dc-eco .dc-client-chip.dc-client-chip:hover,
.elementor-6489 .dc-eco .dc-client-chip.dc-client-chip:focus-within{
opacity:1!important;background-color:#FFFFFF!important;
transform:translateY(-3px)!important;
box-shadow:0 0 0 1px #DFE3EC, 0 10px 22px -10px rgba(0,0,0,.45)!important;}
/* Survol : gris clair, pas translucide — et c'est un choix, pas une hesitation.
Une cellule translucide laisserait passer la nuit, donc s'ASSOMBRIRAIT : la
plupart de ces marques sont dessinees en fonce sur clair, on leur retirerait
du contraste au moment precis ou l'on veut attirer l'oeil dessus. Le gris
clair va dans l'autre sens — il marque la cellule sans toucher a la
lisibilite du logo. On prend #F2F4F9, le gris 100 de la charte, plutot
qu'une valeur inventee. */
.elementor-6489 .dc-eco .dc-client-chip.dc-client-chip:hover,
.elementor-6489 .dc-eco .dc-client-chip.dc-client-chip:focus-within{
background-color:#F2F4F9!important;
transform:translateY(-3px)!important;
box-shadow:0 0 0 1px #DFE3EC, 0 10px 22px -10px rgba(0,0,0,.45)!important;}
/* Survol : le fond change, rien d'autre. Pas de soulevement, pas d'ombre —
c'est l'ombre portee qui faisait la « ligne noire en dessous ». */
.elementor-6489 .dc-eco .dc-client-chip.dc-client-chip,
.elementor-6489 .dc-eco .dc-client-chip.dc-client-chip:hover,
.elementor-6489 .dc-eco .dc-client-chip.dc-client-chip:focus-within{
transform:none!important;
box-shadow:0 0 0 1px #DFE3EC!important;
transition:background-color .2s ease!important;}
.elementor-6489 .dc-eco .dc-client-chip.dc-client-chip:hover,
.elementor-6489 .dc-eco .dc-client-chip.dc-client-chip:focus-within{
background-color:#F2F4F9!important;}
/* ===========================================================================
A PROPOS PASSE A LA LARGEUR DU SITE — 9 septembre 2026
Relevé par Yassine, et les quatre wireframes portent la MEME regle :
.container{max-width:1280px; margin:0 auto; padding:0 5%}
Mesure sur les pages en ligne : accueil V5 et Actualites sont a 1312 px,
A propos a 1180. C'est donc A propos l'exception, pas les autres.
Le risque est faible et il a ete evalue avant d'agir : tout ce qui est en
dessous est fluide — les grilles sont en `repeat(N, 1fr)`, les deux blocs a
deux colonnes en `1fr`/`40 %`, les cartes en `minmax(0,1fr)`. Rien n'est en
largeur fixe sauf le rail du carrefour (330 px), qui doit justement rester
fixe : c'est le panneau a cote qui prend la difference.
=========================================================================== */
.elementor-6489 .e-con.e-con-boxed > .e-con-inner{
max-width:1312px!important;}
/* ===========================================================================
LE PAVE CTA REPREND CELUI DE LA V5 — 9 septembre 2026
Releve par Yassine, et le diagnostic remonte plus loin qu'aujourd'hui.
1. LA RANGEE DE PROFILS. La mise en page du pave vit dans le CSS DE LA PAGE
3574, donc elle ne sert que l'accueil :
.dc-cta-profiles p{display:flex; justify-content:center;
flex-wrap:wrap; gap:16px;}
A propos n'en avait recu qu'une copie PARTIELLE — les couleurs des liens,
pas la disposition. D'ou trois liens colles au lieu d'etre espaces de
16 px. Ce n'est pas une regression du jour : le pave etait incomplet
depuis sa mise en place.
2. LE SOUS-TITRE SUR DEUX LIGNES. Celle-la est de ce soir : ma regle
d'alignement `.dc-header-text .elementor-widget-text-editor{max-width:60ch}`
— posee pour brider les chapeaux de section — atteignait aussi le
sous-titre du pave CTA, qui vit dans un `.dc-header-text`. 60ch valent
526 px, la ou la V5 lui laisse min(620px, 92%). D'ou la casse en deux
lignes. On exclut le pave de cette regle.
A REPORTER DANS LE SOCLE le jour ou l'accueil se rouvre : ces regles
devraient vivre avec `.dc-cta-band`, pas dans le CSS d'une page.
=========================================================================== */
.elementor-6489 .dc-cta-profiles p{
display:flex!important;align-items:center!important;justify-content:center!important;
flex-wrap:wrap!important;gap:16px!important;
font-size:13px!important;color:rgba(255,255,255,.5)!important;margin:0!important;}
/* Le sous-titre est `.dc-cta-lead`, pas un `.dc-header-text` — ma premiere
correction visait le mauvais element. La vraie cause est le socle :
`.dc-cta-lead p{max-width:52ch}` rabote le paragraphe a 526 px, sous les
577 necessaires. C'est le piege deja documente le 3 septembre pour
l'accueil, et corrige la-bas DANS LE CSS DE LA PAGE 3574 — donc A propos ne
l'a jamais recu. On porte les deux memes regles. */
.elementor-6489 .dc-cta-band .dc-cta-lead{
max-width:min(620px,92%)!important;margin-inline:auto!important;}
.elementor-6489 .dc-cta-band .dc-cta-lead p{
max-width:100%!important;margin-inline:auto!important;text-wrap:balance;}
/* ===========================================================================
LES TUILES DE LA CARTE — 10 septembre 2026
Trouve en cherchant l'origine des coins arrondis des vignettes d'actualites :
le kit Elementor porte `.elementor-kit-7 img{border-radius:16px}` pour TOUTE
image du site. Une carte Leaflet est faite de ![]()
de 256 px posees bord a
bord : chacune recevait donc 16 px de rayon, et la carte etait une mosaique
de carreaux aux coins ronges. C'est le cadre de la carte qui arrondit, pas
les tuiles.
=========================================================================== */
.elementor-6489 .leaflet-container img{border-radius:0!important;}
/* ===========================================================================
LE CARREFOUR SOUS 1025 px : LE TITRE DIT DEUX FOIS — 10 septembre 2026, nuit
Sur bureau, la liste des rubriques est un rail a gauche et le panneau a
droite : le titre du panneau nomme ce qu'on regarde, a distance de l'onglet.
Sous 1025 px la mise en page passe en accordeon — l'onglet actif se pose
DIRECTEMENT au-dessus de son panneau — et « L'equipe » se lit alors deux
fois a 6 px d'intervalle, dans le meme bloc violet.
L'onglet nomme deja la rubrique ; on ne garde dans le panneau que ce qu'il
apporte en propre : la photo, la description longue et le bouton.
=========================================================================== */
@media (max-width:1024px){
.elementor-6489 .dc-hub-panel-title{display:none!important;}
}
/* ===========================================================================
LE MUR DE LOGOS : NORMALISER PAR LA BOITE, PAS PAR LA HAUTEUR — nuit du 10/9
Les logos etaient dimensionnes par `background-size: auto 60%` : une hauteur
imposee, une largeur libre. Les cellules faisant 171 x 66 px sur telephone,
un logotype tres large — SYNOVA, AGORIA, VDAB — depassait la largeur utile et
venait toucher les deux bords, quand les blocs-marques compacts respiraient.
Un mur de logos s'equilibre a l'oeil, donc par la BOITE : chacun prend la
plus grande taille qui tient dans la cellule marginee. Les larges sont alors
bornes par la largeur, les compacts par la hauteur, et aucun ne touche le
bord. La marge optique existait deja (padding 14/16) : il suffisait de la
faire compter, ce que fait `background-origin: content-box`.
=========================================================================== */
.elementor-6489 .dc-eco .dc-client-chip.dc-client-chip{
background-size:contain!important;
background-origin:content-box!important;
/* La marge laterale passe de 16 a 26 px : les cellules ne font que 171 px de
large sur telephone, et 16 px ne suffisaient pas a donner de l'air aux
logotypes larges, qui venaient encore fleurter avec le bord. La marge
verticale ne bouge pas — les cellules ne font que 66 px de haut. */
padding:14px 26px!important;}
/* RESTE A LA MAIN, et ce n'est pas du CSS : quatre fichiers portent leur propre
marge blanche et une typo minuscule (Region de Bruxelles-Capitale, Technicity,
Cite des metiers, BiASC). Ils sortent donc petits meme bornes correctement.
Aucun reglage global ne rattrape une marge cuite dans le fichier : il faut
soit un facteur d'echelle par logo, soit — mieux — demander les versions
detourees a la cliente. A voir avec Yassine. */
/* ############################################################################
# LE CARREFOUR : RECADRAGE, DEGRADE, MATIERE — 11 septembre 2026, matin
#
# Trois demandes de Yassine sur cette section, et une remarque de la
# cliente : « une touche de glossy ». On ne l'invente pas : la V5 a deja son
# vocabulaire de brillance — un balayage clair en `background-clip:text`
# (dc-gloss-clair) et le grain en feTurbulence des heros. On l'etend ici.
############################################################################ */
/* --- 1. LA PHOTO COUPAIT LES VISAGES ---------------------------------------
La photo fait 800 x 533, le cadre 980 x 440 : en `cover`, l'echelle est de
1,225, l'image rendue fait donc 653 px de haut pour 440 de cadre — 213 px
perdus, repartis moitie-moitie a 50 %. Or dans une photo de personnes, les
visages sont dans le tiers HAUT : c'est exactement la moitie qu'on jetait.
On remonte le point de cadrage a 30 % : la fenetre descend sur l'image, les
tetes rentrent, et il reste 66 px de marge en haut pour les autres panneaux.
-------------------------------------------------------------------------- */
/* [CORRECTION — Yassine, 11/9 : « les tetes sont toujours coupees »]
J'avais juge sur un recadrage PARTIEL du panneau (les 55 % du haut) et
conclu a 30 %. Sur le panneau ENTIER, 30 % sauve la tete de l'homme mais
coupe encore celle de la femme de droite. 15 % est la premiere valeur ou les
TROIS tetes passent.
Lecon : sur une question de cadrage, ne jamais trancher sur autre chose que
le cadre reel — un aper=cu rogne repond a une autre question que celle posee. */
.elementor-6489 .dc-carrefour-photo img{object-position:50% 15%!important;}
/* --- 2. L'ONGLET ACTIF : UN APLAT DEVIENT UNE SURFACE ----------------------
C'etait le seul aplat de la page — `rgb(109,40,217)`, plein, mat. Trois
couches, dans cet ordre (rappel : la PREMIERE couche est AU-DESSUS) :
un reflet diagonal, le degrade de corps, et l'arete lumineuse en `inset`
qui donne l'epaisseur. C'est la grammaire du verre : une arete claire en
haut, un corps qui fonce vers le bas, un reflet qui traverse.
Les teintes ne sont pas nouvelles — #7C3AED et #4C1D95 sont deja les deux
bornes du degrade violet de la charte web.
-------------------------------------------------------------------------- */
/* [CORRECTION — Yassine, 11/9 : « reprends les bonnes couleurs »]
Ma premiere version imposait un degrade violet a TOUS les onglets. Or chaque
rubrique a sa couleur, et le violet n'etait que celle de « L'equipe » : les
quatre autres perdaient la leur. La faute est dans le geste, pas dans la
teinte — j'avais REMPLACE le fond au lieu de poser la matiere DESSUS.
On ne touche donc plus a `background-color` : Elementor garde la couleur de
la rubrique, et on ajoute par-dessus, en valeurs neutres, ce qui fait le
verre — un reflet diagonal, une lumiere en haut, une ombre en bas.
Meme grammaire, cinq couleurs conservees. */
.elementor-6489 .dc-hub .e-n-tab-title[aria-selected="true"],
.elementor-6489 .dc-hub .e-n-tab-title.e-active{
background-image:
linear-gradient(116deg, rgba(255,255,255,0) 26%, rgba(255,255,255,.15) 40%, rgba(255,255,255,0) 54%),
/* [11/9] Le voile clair du haut est passe de .11 a .05 : mesure au pixel,
il faisait tomber « Nos infrastructures » — la rubrique la plus claire —
a 4,35:1 pour son sous-titre, quand la norme en demande 4,5. Sa turquoise
seule est a 5,36 ; c'etait bien mon voile qui la mangeait. A .05 elle
remonte a 4,86. L'arete d'un pixel en haut porte de toute facon
l'essentiel de l'effet — ce large voile n'en etait que le prolongement. */
linear-gradient(162deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 36%, rgba(0,0,0,.06) 62%, rgba(0,0,0,.20) 100%)!important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.34),
inset 0 -1px 0 rgba(0,0,0,.18)!important;}
/* --- 3. LE VOILE DE LA PHOTO : DU GRAIN ET UN REFLET -----------------------
Le voile etait deux degrades lisses. Lisse, sur une photo, ca fait
plastique — c'est justement ce que le grain corrige sur les heros de la V5
et de la page Actualites. On reprend le MEME grain (feTurbulence .85, trois
octaves), a peine pose, plus une bande speculaire large qui traverse le
panneau en biais. « Glossy », mais de la brillance de verre, pas de vernis.
-------------------------------------------------------------------------- */
.elementor-6489 .dc-carrefour-photo{position:absolute;}
.elementor-6489 .dc-carrefour-photo::after{
content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
background-image:
linear-gradient(118deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.11) 44%, rgba(255,255,255,.03) 52%, rgba(255,255,255,0) 64%),
url("data:image/svg+xml;utf8,");
background-size:auto, 140px 140px;
background-repeat:no-repeat, repeat;
opacity:.5;
mix-blend-mode:soft-light;}
/* ===========================================================================
« ADRESSE ET COORDONNEES » : LE VIDE A DROITE — 11 septembre 2026
Yassine : « la section coordonnees, je la trouve bizarre ». Au-dela du lavis
(corrige plus haut), c'est une question de proportions : la colonne de
droite faisait 747 px pour 216 px de contenu reel — plus de 500 px de vide,
soit un tiers de la page. Une carte de 525 px a cote d'un demi-ecran blanc,
ca ne se lit pas comme une mise en page mais comme un bloc qui a rate sa
place.
On rend la largeur a la carte : elle passe a 62 %, et la colonne de texte se
cale sur ce qu'elle contient vraiment. Rien sous 1025 px, ou les deux blocs
sont deja empiles.
=========================================================================== */
@media (min-width:1025px){
.elementor-6489 .dc-wash-4 .dc-two-col{gap:56px!important;align-items:center!important;}
.elementor-6489 .dc-wash-4 .dc-two-col > .dc-map-slot{flex:0 0 62%!important;max-width:62%!important;}
.elementor-6489 .dc-wash-4 .dc-two-col > .dc-contact-card{flex:1 1 auto!important;min-width:0!important;}
}
/* ===========================================================================
LES CHEVRONS DU CARREFOUR — 11 septembre 2026
Yassine : « faudrait revoir les fleches non ? ca marche comment dans ce
genre d'accordeon ? »
La regle est celle-ci, et elle est la meme partout : LE CHEVRON DIT OU VA
S'OUVRIR LE CONTENU.
- Sur bureau, la liste est un rail a GAUCHE et le panneau s'ouvre a DROITE :
le chevron pointe a droite. C'est juste, on n'y touche pas.
- Sous 1025 px, la mise en page passe en accordeon et le panneau s'ouvre
EN DESSOUS : le chevron doit donc pointer vers le BAS quand c'est ferme,
et se retourner vers le HAUT quand c'est ouvert (il indique alors le
repli). Un chevron qui pointe a droite dans un accordeon promet une
navigation laterale qui n'arrive jamais.
Deuxieme correction, moins visible mais plus importante : le chevron etait
en `opacity:0` au repos et n'apparaissait qu'au survol. Sur un telephone il
n'y a PAS de survol — l'affordance qui dit « cette ligne s'ouvre » etait donc
simplement invisible. Il est desormais toujours la, en retrait.
=========================================================================== */
@media (max-width:1024px){
.elementor-6489 .dc-hub .e-n-tabs-heading .e-n-tab-title::after{
opacity:.5!important;
transform:translateY(calc(-50% - 2px)) rotate(45deg)!important;}
.elementor-6489 .dc-hub .e-n-tabs-heading .e-n-tab-title:hover::after{
opacity:.7!important;
transform:translateY(calc(-50% - 2px)) rotate(45deg)!important;}
.elementor-6489 .dc-hub .e-n-tabs-heading .e-n-tab-title[aria-selected="true"]::after{
opacity:1!important;color:#fff!important;
transform:translateY(calc(-50% + 2px)) rotate(-135deg)!important;}
}
/* ===========================================================================
LE BANDEAU SUR LA CARTE — 11 septembre 2026
Yassine : « je parle aussi du degrade derriere Rue Jules... ».
Deux raisons de le retirer plutot que de le retoucher :
1. IL EST REDONDANT. Il affiche « Rue Jules Cockx 6, 1160 Bruxelles
(Auderghem) » — exactement ce que le bloc COORDONNEES dit a cote, sur
bureau, et juste en dessous sur telephone. On tamponne une carte pour
redire ce qui est deja ecrit a trente centimetres.
2. LE DEGRADE N'EN ETAIT PAS VRAIMENT UN : il allait de .96 a .88 sur les
55 premiers pour cent, puis chutait a zero. Autrement dit un aplat noir
sur les deux tiers du bandeau et une transition brutale ensuite — d'ou
l'impression de barre sale plutot que de fondu. Et sa teinte (#090E26)
n'existe nulle part ailleurs dans la charte.
La carte garde donc son cadre net. Une ligne a decommenter si la cliente
tient au rappel d'adresse sur la carte elle-meme.
=========================================================================== */
.elementor-6489 .dc-map-note{display:none!important;}
/* ===========================================================================
« NOS ESPACES » : LES TUILES REJOIGNENT LA FAMILLE — 10 septembre 2026
Retour d'Hamza : « le style des blocs est beaucoup trop different par
rapport au reste [...] si on les retrouve nulle part ailleurs dans le site,
ca risque de faire un peu tache » et « il n'y a pas d'ombre portee, t'as pas
cet effet de up comme dans les autres cartes ».
Et sa reserve, qui est celle de Yassine : « sinon c'est redondant ».
LA REPONSE TIENT DANS CETTE DISTINCTION : ce qui fait la FAMILLE, ce sont
trois traits — fond blanc, filet, coins arrondis — plus un comportement : la
montee de 6 px avec ombre portee au survol. Ce qui fait une carte d'ARTICLE,
c'est son contenu : pastille, date, titre, extrait, lien. On donne donc ici
les traits de famille et le comportement, et rien du contenu : ces tuiles
gardent deux lignes (nom + capacite), donc elles resteront visiblement plus
legeres que les cartes d'articles. Integrees, pas dupliquees.
La photo perd son rayon propre : c'est la carte qui arrondit, elle a
`overflow:hidden` — meme principe que les vignettes d'articles.
=========================================================================== */
/* Chemin complet obligatoire : une regle posee plus haut,
`.elementor-6489 .elementor-element-d60c03a > .e-con`, depouillait
volontairement ces tuiles (fond transparent, zero filet, zero rayon) et
compte trois classes — elle gagnait contre `.elementor-6489 .dc-space-card`
qui n'en compte que deux. On la double. */
.elementor-6489 .elementor-element-d60c03a > .e-con.dc-space-card{
background:#FFFFFF!important;background-color:#FFFFFF!important;
border:1px solid var(--dc-gray-200,#DFE3EC)!important;
border-radius:var(--dc-radius-lg,16px)!important;
overflow:hidden!important;
padding:0 0 18px!important;
transition:transform .45s var(--dc-ease,ease), box-shadow .45s var(--dc-ease,ease)!important;}
.elementor-6489 .elementor-element-d60c03a > .e-con.dc-space-card:hover,
.elementor-6489 .elementor-element-d60c03a > .e-con.dc-space-card:focus-within{
background-color:#FFFFFF!important;
transform:translateY(-6px)!important;
box-shadow:0 24px 48px -20px rgba(15,27,61,.28)!important;}
.elementor-6489 .dc-espace-photo{
margin:0 0 14px!important;border-radius:0!important;}
.elementor-6489 .dc-space-name,
.elementor-6489 .dc-space-cap{padding-inline:18px!important;}
/* Les cellules faisaient 313 px pour 20 px d'ecart : trop serre des qu'elles
portent un filet. On leur rend de l'air. */
.elementor-6489 .elementor-element-d60c03a{gap:24px!important;}
/* ===========================================================================
LES LOGOS DE L'ECOSYSTEME REVIENNENT AU MODELE DE L'ACCUEIL — 10/09/2026
Retour d'Hamza : « au niveau de l'apparition des logos de notre ecosysteme,
c'est trop different de la page d'accueil [...] eviter cette animation de
flou qui apparait [...] on perd en coherence par rapport a ce qui existe
deja [...] rester dans un modele qui a ete valide ».
VERIFIE AVANT DE TRANCHER : la section « Ils nous font confiance » de
l'accueil V5 n'a AUCUNE animation sur ses logos — `animation-name: none` sur
la grille comme sur chaque pastille. C'est la SECTION qui apparait, avec le
meme `dc-reveal` que toutes les autres, et les logos n'ont qu'une transition
de bordure au survol. « Le modele de l'accueil », c'est donc l'absence de
sequence propre.
On neutralise donc la cascade de flou (`dc-logo-pose`) et l'entree retardee
des croix (`dc-croix-pose`), qui n'avait de sens que comme fin de cette
sequence. Les croix restent — c'est le dessin, pas l'animation, qui etait
demande. La section, elle, continue d'apparaitre comme les huit autres.
Le script qui pose `.dc-logo-go` est laisse en place : sans animation a
declencher, il devient inerte, et la regle est reversible en une ligne.
=========================================================================== */
.elementor-6489 .dc-eco .dc-client-list.dc-logo-go > .dc-client-chip,
.elementor-6489 .dc-eco .dc-client-list > .dc-client-chip{
animation:none!important;filter:none!important;}
.elementor-6489 .dc-eco .dc-client-list.dc-logo-go > .dc-client-chip::before,
.elementor-6489 .dc-eco .dc-client-list.dc-logo-go > .dc-client-chip::after,
.elementor-6489 .dc-eco .dc-client-list > .dc-client-chip::before,
.elementor-6489 .dc-eco .dc-client-list > .dc-client-chip::after{
animation:none!important;}
/* ===========================================================================
LE BLOC COORDONNEES DEVIENT UN BLOC — 10 septembre 2026
Retour d'Hamza : « dans coordonnees, a droite, je trouve que tout est un
petit peu petit — alors c'est les polices [...] sur ce bloc-la de texte avec
les infos, peut-etre qu'il y a quelque chose a faire : soit le mettre dans un
bloc un peu comme les styles de bloc qu'on a, pour quelque chose d'un petit
peu plus structure ».
MESURE : le libelle « Coordonnees » etait a 11 px, le corps a 15, et le bloc
n'avait ni fond, ni filet, ni rayon, ni marge interieure — c'etait du texte
flottant a cote d'une carte de 813 px. D'ou l'impression de petitesse : ce
n'est pas que la taille des lettres, c'est qu'il n'y avait rien autour pour
leur donner une echelle.
On lui donne la coquille de la famille — la meme que les tuiles « Nos
espaces » corrigees plus haut — et on remonte les deux tailles d'un cran.
=========================================================================== */
.elementor-6489 .dc-wash-4 .dc-contact-card{
background:#FFFFFF!important;
border:1px solid var(--dc-gray-200,#DFE3EC)!important;
border-radius:var(--dc-radius-lg,16px)!important;
padding:32px 34px!important;
box-shadow:0 1px 2px rgba(15,27,61,.04)!important;}
.elementor-6489 .dc-wash-4 .dc-eco-title .elementor-heading-title{
font-size:12px!important;letter-spacing:.14em!important;}
.elementor-6489 .dc-wash-4 .dc-contact-body,
.elementor-6489 .dc-wash-4 .dc-contact-body p,
.elementor-6489 .dc-wash-4 .dc-contact-body a{
font-size:16px!important;line-height:1.7!important;}
/* ===========================================================================
L'ECOSYSTEME ADOPTE LE MODELE DE L'ACCUEIL — 10 septembre 2026
Hamza ne parlait que de « l'apparition des logos », et c'etait deja corrige.
Mais en comparant les deux sections au pixel, l'ecart est bien plus large :
ACCUEIL A PROPOS (avant)
fond clair #FBFAFE sombre #0A0728
cellules cartes separees DALLE continue
filet / rayon 1px + 16px aucun
ecart 14 px 1 px
croix non oui
CE QU'ON GARDE, ET POURQUOI. La section reste SOMBRE : elle porte trois
niveaux hierarchiques et 23 logos, c'est le sujet de la page — pas une bande
de reassurance comme sur l'accueil. Une section qui arrete la lecture pour
dire « voici le reseau » a le droit d'etre traitee autrement.
CE QU'ON ALIGNE : la CELLULE. Elle devient celle de l'accueil — carte
separee, filet, rayon 16, vrai ecart. Les deux sections se lisent alors
comme le meme objet sur deux fonds differents.
CE QU'ON PERD : les croix. Elles n'existaient que parce que les cellules se
touchaient — sans dalle, plus d'intersections a marquer. Decision de Yassine.
=========================================================================== */
.elementor-6489 .dc-eco .dc-client-list{
gap:14px!important;background:transparent!important;}
.elementor-6489 .dc-eco .dc-client-chip.dc-client-chip{
border-radius:16px!important;
box-shadow:0 0 0 1px #E2E5ED!important;
transition:border-color .25s cubic-bezier(.4,0,.2,1), box-shadow .25s cubic-bezier(.4,0,.2,1)!important;}
/* [correction] Le survol ne suffisait pas a « ressembler a l'accueil » : la
mesure montrait un simple gris un peu plus fonce, quand l'accueil fait
passer la bordure en CYAN (#008AB7) et ajoute une ombre portee douce.
On reprend exactement ce geste. L'ombre est un peu plus marquee ici parce
que le fond est sombre : a .06 comme sur l'accueil, elle serait invisible. */
.elementor-6489 .dc-eco .dc-client-chip.dc-client-chip:hover,
.elementor-6489 .dc-eco .dc-client-chip.dc-client-chip:focus-within{
background-color:#FFFFFF!important;
box-shadow:0 0 0 1px #008AB7, 0 6px 18px rgba(0,0,0,.28)!important;}
/* Les croix disparaissent avec la dalle : sans cellules jointives, il n'y a
plus d'intersection a marquer. */
.elementor-6489 .dc-eco .dc-client-chip::before,
.elementor-6489 .dc-eco .dc-client-chip::after{content:none!important;display:none!important;}
/* --- LE SURVOL DES LOGOS SUR FOND SOMBRE — 10 septembre 2026 ---------------
Yassine : « le contour au survol ne se voit pas, comme c'est un fond fonce ».
Exact, et c'est une erreur de transposition de ma part : sur l'accueil, la
cellule blanche est posee sur un fond CLAIR — un filet cyan de 1 px s'y
detache. Sur fond sombre, l'oeil ne voit plus le filet, il ne voit que le
rectangle blanc ; un pixel de couleur sur son bord se perd contre le noir.
Ce qui se voit sur fond sombre, c'est un changement de la SURFACE, pas du
bord. On garde donc le filet cyan (le geste de l'accueil) mais on lui ajoute
ce que le fond sombre rend lisible : la cellule se souleve de 2 px et gagne
une ombre franche. Meme grammaire que les cartes du site, a l'echelle d'une
pastille.
-------------------------------------------------------------------------- */
.elementor-6489 .dc-eco .dc-client-chip.dc-client-chip{
transition:transform .35s cubic-bezier(.22,.61,.36,1),
box-shadow .35s cubic-bezier(.22,.61,.36,1)!important;}
.elementor-6489 .dc-eco .dc-client-chip.dc-client-chip:hover,
.elementor-6489 .dc-eco .dc-client-chip.dc-client-chip:focus-within{
transform:translateY(-2px)!important;
box-shadow:0 0 0 1px #008AB7, 0 10px 24px rgba(0,0,0,.45)!important;}
/* --- LE SURVOL DES LOGOS : ON RENONCE AU SOULEVEMENT — 10 septembre 2026 ----
Yassine : « l'effet de jump ne marche pas sur les logos du dessus parce que
c'est coupe ». Exact : les groupes sont dans des conteneurs qui rognent, donc
une cellule qui se souleve sort du cadre sur la rangee du haut. Un effet qui
ne marche que sur une partie des cellules n'est pas un effet, c'est un bug.
Des trois options — soulevement, fond gris clair, transparence — c'est le
FOND qui gagne, pour une raison simple : il ne deplace rien, donc il marche
partout, sur la premiere rangee comme sur la derniere. C'est aussi ce qu'il y
avait avant, et ce que Yassine avait valide.
On garde le filet cyan de l'accueil par-dessus : sur fond sombre il se voit
peu, mais c'est le geste commun aux deux pages, et le fond, lui, se voit.
-------------------------------------------------------------------------- */
.elementor-6489 .dc-eco .dc-client-chip.dc-client-chip{
transition:background-color .3s cubic-bezier(.22,.61,.36,1),
box-shadow .3s cubic-bezier(.22,.61,.36,1)!important;
transform:none!important;}
.elementor-6489 .dc-eco .dc-client-chip.dc-client-chip:hover,
.elementor-6489 .dc-eco .dc-client-chip.dc-client-chip:focus-within{
transform:none!important;
background-color:#EEF1F7!important;
box-shadow:0 0 0 1px #008AB7!important;}
/* ===========================================================================
LE SCINTILLEMENT A L'OUVERTURE D'UN ONGLET — 11 septembre 2026
Yassine : « j'ai l'impression que c'est pcq le degrade qui la recouvre part
puis revient ». C'est exactement ca, et c'est mesure image par image :
1 ms voile opacite 1 44 ms 0,02 94 ms 0,18
143 ms 0,43 244 ms 0,78 494 ms 1
Luminance moyenne du panneau : 231 a 124 ms, 155 une fois pose. Pendant
environ 200 ms la photo est NUE, et le texte blanc pose dessus n'a plus de
fond. C'est notre regle : `animation:dc-hub-voile .45s` sur le `::before`.
L'intention etait bonne — le panneau s'assemble : la photo se detend
(`dc-hub-pose`), le titre puis le texte montent (`dc-hub-monte`). Mais le
voile n'est pas un element de choregraphie, **c'est lui qui porte la
lisibilite**. Il doit etre la au premier pixel affiche.
Regle a garder : on n'anime jamais ce qui rend un texte lisible. Meme
famille que « on n'anime pas les paragraphes d'un article qu'on est en
train de lire ».
Le reste de l'assemblage est conserve tel quel.
=========================================================================== */
.elementor-6489 .dc-hub .e-n-tabs-content > .e-con.e-active::before{
animation:none!important;opacity:1!important;}
/* ===========================================================================
L'ONGLET OUVERT NE SE REFERME PAS — 11 septembre 2026
Yassine : « c'est volontaire ? » Oui, et c'est juste : le carrefour est un
composant a ONGLETS (`role="tab"`), pas un accordeon. Le panneau EST le
contenu, le rail est la navigation ; une liste d'onglets doit toujours en
avoir un de selectionne. La page a d'ailleurs un vrai accordeon a cote — la
FAQ, 5 elements, 0 ouvert au chargement — et lui se referme.
Ce qui n'allait pas, c'est qu'on le PROMETTAIT. Sous 1025 px le composant
passe en accordeon et chaque rangee porte un chevron ; sur la rangee ouverte
il pointe vers le haut, ce qui veut dire « clique pour refermer ». Il ne
peut pas tenir cette promesse.
On retire donc le chevron de la rangee ouverte — et d'elle seule. Elle se
lit alors comme l'intitule de la section en cours, ce qu'elle est. Les
quatre autres gardent le leur, qui lui est tenu.
(Le rendre refermable demanderait du JS et casserait la semantique du
tablist : deux raisons de ne pas le faire.)
=========================================================================== */
@media (max-width:1024px){
.elementor-6489 .dc-hub .e-n-tab-title[aria-selected="true"]::after{
display:none!important;}
}
/* ===========================================================================
LES DEUX CHIFFRES PASSAIENT A LA LIGNE — 11 septembre 2026
« 3 775 m² » et « 60 » sont deux chiffres a l'appui d'un texte, pas un
tableau : ils se lisent d'un seul regard ou ils ne se lisent pas. Empiles,
ils occupaient 151 px et ressemblaient a une liste de deux items.
La regle de bureau les pose deja en rangee (`gap:40px`,
`justify-content:flex-start`) ; c'est le `--flex-direction-mobile:column`
d'Elementor qui les remettait en colonne. Mesure : 136 px + 150 px + 28 de
gouttiere = 314 pour 342 disponibles — ils tiennent.
=========================================================================== */
@media (max-width:767px){
.elementor-6489 .dc-two-body .dc-stats{
flex-direction:row!important;flex-wrap:nowrap!important;
gap:28px!important;align-items:flex-start!important;}
.elementor-6489 .dc-two-body .dc-stats .dc-stat{
flex:0 1 auto!important;min-width:0!important;}
}
/* ===========================================================================
L'IMAGE ARRIVAIT BRUSQUEMENT — MAIS SUR TELEPHONE SEULEMENT — 12/9/2026
Yassine : « l'image apparait brusquement non ? y a pas ca sur desktop ».
Verifie en echantillonnant les deux : le panneau et l'image se comportent a
l'IDENTIQUE aux deux largeurs — hauteur pleine des la premiere image,
`dc-hub-pose` qui detend l'echelle de 1,06 a 1 en 900 ms. Rien ne differe
dans le code.
**Ce qui differe, c'est ce qu'il y avait AVANT.** Sur bureau les cinq
panneaux occupent la meme boite : ouvrir un onglet REMPLACE une image par une
autre — l'oeil voit une substitution, il y a toujours eu une image la. Sur
telephone le composant est un accordeon : le panneau precedent se referme
ailleurs, et le nouveau s'ouvre a un endroit ou il n'y avait qu'une rangee
fermee. L'image n'arrive pas a la place d'une image, elle arrive a la place
de rien.
Et depuis qu'on a retire le fondu du voile (il portait la lisibilite), plus
rien n'accompagnait cette arrivee.
CORRECTIF, sous 1025 px seulement : c'est **l'IMAGE** qu'on fond, pas le
voile — 280 ms, par-dessus la detente d'echelle qui reste a 900. Le voile
garde sa pleine force des le premier pixel.
Le panneau recoit en plus un fond de nuit sous l'image : sans lui, pendant
les 280 ms, le haut du voile (transparent par construction) laisserait voir
le fond CLAIR de la page — on aurait remplace un a-coup par un eclair.
Sur bureau on ne touche a rien : un fondu y produirait un noir entre les deux
images, la ou il n'y a aujourd'hui aucune rupture.
=========================================================================== */
@keyframes dc-hub-fondu{from{opacity:0;}to{opacity:1;}}
@media (max-width:1024px){
.elementor-6489 .dc-hub .e-n-tabs-content > .e-con{
background-color:#0C1230!important;}
.elementor-6489 .dc-hub .e-n-tabs-content > .e-con.e-active .dc-carrefour-photo img{
animation:dc-hub-pose .9s cubic-bezier(.22,.61,.36,1) both,
dc-hub-fondu .28s ease both!important;}
}
@media (max-width:1024px) and (prefers-reduced-motion:reduce){
.elementor-6489 .dc-hub .e-n-tabs-content > .e-con.e-active .dc-carrefour-photo img{
animation:none!important;opacity:1!important;}
}
/* ===========================================================================
LES RAPPORTS DE VEILLE EN CARROUSEL, SUR TELEPHONE — 12 septembre 2026
Decision de Yassine. Le critere qui tranche n'est pas la hauteur, c'est
l'usage : **on met en carrousel ce qui se parcourt, on garde en liste ce qui
se compare.** Les quatre espaces d'Auderghem portent chacun une capacite
(121 places, 4 a 15, 20, collaboratif) — un visiteur qui cherche une salle
les compare, la liste reste. Les quatre rapports sont un archivage
chronologique : on veut le dernier, le reste est du fonds. Le carrousel y
est a sa place, et la section passe de 2 079 a ~600 px.
**Fait en defilement natif, pas en JavaScript** (`scroll-snap`), et c'est un
choix, pas un raccourci : LiteSpeed retarde tout script jusqu'a la premiere
interaction du visiteur — un carrousel en JS serait inerte a l'arrivee, ce
qu'on a deja paye une fois sur les apparitions au defilement. Ici le geste
est celui du telephone, le navigateur le fait seul, et l'etat au repos est
l'etat utilisable.
La carte fait 78 % de la largeur : **le bord de la suivante affleure**, et
c'est lui l'indicateur — sans lui, rien ne dirait qu'il y en a d'autres.
Le rail deborde des marges de page (-24 / +24) pour que ce bord touche
vraiment l'ecran ; `overflow-x` contient son propre debordement, la page ne
defile pas horizontalement (verifie).
=========================================================================== */
@media (max-width:767px){
.elementor-6489 .elementor-element.elementor-element-f945e7f{
display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;
grid-template-columns:none!important;
overflow-x:auto!important;overflow-y:hidden!important;
scroll-snap-type:x mandatory!important;
scroll-padding-left:24px!important;
gap:14px!important;
margin-left:-24px!important;margin-right:-24px!important;
padding:4px 24px 14px!important;
/* Elementor pose `width:100%` sur ses conteneurs : avec une largeur
EXPLICITE, les marges negatives deplacent la boite sans l'elargir, et le
parent en `align-items:center` la recentrait. Meme mecanique que la carte
« A la une » d'Actualites. Il faut rendre la largeur a l'auto ET etirer. */
width:calc(100% + 48px)!important;max-width:none!important;flex:0 0 auto!important;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;}
.elementor-6489 .elementor-element.elementor-element-f945e7f::-webkit-scrollbar{display:none;}
.elementor-6489 .elementor-element.elementor-element-f945e7f > .dc-pub-card{
flex:0 0 78%!important;width:78%!important;
scroll-snap-align:start!important;
height:auto!important;align-self:stretch!important;}
}
/* ###########################################################################
# V2 — RETOUR NOEMIE DU 11 SEPTEMBRE
# « Le design reste trop repetitif et trop peu compose. On retrouve
# souvent les memes reflexes : paves de proportions proches, image + titre
# + texte + lien, et peu de ruptures fortes entre les sections. »
# Consigne : ne pas revoir la charte ni les wireframes ; travailler la
# COMPOSITION a l'interieur de la structure — rythme, echelle, hierarchie.
########################################################################### */
/* ===========================================================================
V2-1. LES DEUX PREUVES DEVIENNENT DES ELEMENTS GRAPHIQUES
Demande : « Faire ressortir 1 a 2 preuves fortes — par exemple 3 775 m² /
60 formations — comme de vrais elements graphiques, pas seulement comme du
texte mis en gras. »
Elles etaient a 22 px, c'est-a-dire la taille d'un intertitre : le chiffre
n'avait pas plus de poids que la phrase qui le precede. Il passe a
40-68 px dans le caractere de titrage et prend le degrade de marque — le
motif `.dc-grad-mots` du socle, reserve aux fonds clairs, et celui-ci en est
un. Les deux preuves sont separees par un filet vertical et non plus par une
simple gouttiere : elles se lisent comme un couple, pas comme une liste.
C'est le « temps fort » que la page n'avait pas dans sa premiere moitie.
=========================================================================== */
.elementor-6489 .dc-two-body .dc-stats{
gap:0!important;align-items:stretch!important;
border-top:1px solid var(--dc-gray-200)!important;
padding-top:30px!important;margin-top:34px!important;}
.elementor-6489 .dc-two-body .dc-stats .dc-stat{
flex:1 1 0!important;padding-right:34px!important;}
.elementor-6489 .dc-two-body .dc-stats .dc-stat + .dc-stat{
border-left:1px solid var(--dc-gray-200)!important;
padding-left:34px!important;padding-right:0!important;}
.elementor-6489 .dc-two-body .dc-stats .dc-stat-num .elementor-heading-title.elementor-heading-title{
font-family:var(--dc-display)!important;
font-size:clamp(40px,4.4vw,68px)!important;font-weight:800!important;
line-height:.95!important;letter-spacing:-.03em!important;
background:var(--dc-grad-text)!important;
-webkit-background-clip:text!important;background-clip:text!important;
-webkit-text-fill-color:transparent!important;color:transparent!important;}
.elementor-6489 .dc-two-body .dc-stats .dc-stat-label .elementor-heading-title.elementor-heading-title{
font-family:var(--dc-body)!important;font-size:12px!important;font-weight:600!important;
letter-spacing:.14em!important;text-transform:uppercase!important;
color:var(--dc-text-light)!important;margin-top:12px!important;}
@media (max-width:767px){
.elementor-6489 .dc-two-body .dc-stats{padding-top:24px!important;margin-top:26px!important;}
.elementor-6489 .dc-two-body .dc-stats .dc-stat{padding-right:18px!important;}
.elementor-6489 .dc-two-body .dc-stats .dc-stat + .dc-stat{padding-left:18px!important;}
.elementor-6489 .dc-two-body .dc-stats .dc-stat-num .elementor-heading-title.elementor-heading-title{
font-size:clamp(30px,8.6vw,40px)!important;}
.elementor-6489 .dc-two-body .dc-stats .dc-stat-label .elementor-heading-title.elementor-heading-title{
font-size:11px!important;letter-spacing:.10em!important;margin-top:8px!important;}
}
/* ===========================================================================
V2-2. LES INFRASTRUCTURES DEVIENNENT UN LIEU, PLUS UNE LISTE DE CARTES
Demande : « Donner aux infrastructures un traitement plus immersif : vraie
photo dominante, lieu mis en scene, informations secondaires plus
compactes. » Et, juste avant : « Casser l'enchainement Infrastructures /
Rapports : ces deux contenus ne doivent pas avoir le meme traitement. »
Constat : quatre cartes de 310 px, photo + nom + capacite, alignees — puis,
juste dessous, quatre cartes de 310 px, image + titre + texte + lien pour
les rapports. Deux sections, un seul objet. C'est exactement le reflexe
« pave » qu'elle nous demande d'arreter.
Composition retenue : **une dominante et trois appuis.** L'auditorium — le
seul espace qui impressionne par l'echelle, 121 places — prend toute la
colonne de gauche sur 520 px de haut, photo au cadre plein, nom et capacite
poses DANS l'image sur un voile bas. Les trois autres deviennent des rangees
compactes a droite : vignette carree de 104 px, nom, capacite, separees par
un filet. On passe de quatre objets egaux a un lieu mis en scene et son
sommaire.
Aucune photo n'est remplacee : ce sont les vraies salles d'Auderghem, c'est
la « matiere reelle Digitalcity » qu'elle reclame au point 4 de ses
priorites. On change leur mise en scene, pas leur nature.
Fait en grille CSS sur les conteneurs existants : aucun contenu deplace,
entierement reversible.
=========================================================================== */
.elementor-6489 .elementor-element.elementor-element-d60c03a{
display:grid!important;
grid-template-columns:1.32fr 1fr!important;
grid-template-rows:auto auto auto!important;
gap:0!important;
background-color:#fff!important;
border:1px solid var(--dc-gray-200)!important;
border-radius:var(--dc-radius-lg)!important;
overflow:hidden!important;
align-items:stretch!important;}
/* --- la dominante --- */
.elementor-6489 .elementor-element-d60c03a > .e-con.elementor-element-44c60dc{
grid-column:1!important;grid-row:1 / span 3!important;
position:relative!important;min-height:520px!important;
padding:0!important;border-right:1px solid var(--dc-gray-200)!important;
justify-content:flex-end!important;overflow:hidden!important;}
.elementor-6489 .elementor-element-d60c03a > .e-con.elementor-element-44c60dc .dc-espace-photo{
position:absolute!important;inset:0!important;width:100%!important;
height:100%!important;margin:0!important;z-index:0!important;}
.elementor-6489 .elementor-element-d60c03a > .e-con.elementor-element-44c60dc .dc-espace-photo .elementor-widget-container,
.elementor-6489 .elementor-element-d60c03a > .e-con.elementor-element-44c60dc .dc-espace-photo figure,
.elementor-6489 .elementor-element-d60c03a > .e-con.elementor-element-44c60dc .dc-espace-photo a{height:100%!important;display:block!important;}
.elementor-6489 .elementor-element-d60c03a > .e-con.elementor-element-44c60dc .dc-espace-photo img{
width:100%!important;height:100%!important;object-fit:cover!important;
border-radius:0!important;display:block!important;}
/* le voile : sans lui le nom se pose a meme la photo. Dense en bas ou vit le
texte, nul aux deux tiers — meme famille que le heros de page interieure. */
.elementor-6489 .elementor-element-d60c03a > .e-con.elementor-element-44c60dc::after{
content:""!important;position:absolute!important;inset:0!important;
z-index:1!important;pointer-events:none!important;
background:linear-gradient(0deg,rgba(9,14,38,.88) 0%,rgba(9,14,38,.55) 26%,rgba(9,14,38,0) 62%)!important;}
.elementor-6489 .elementor-element-d60c03a > .e-con.elementor-element-44c60dc > .dc-space-name,
.elementor-6489 .elementor-element-d60c03a > .e-con.elementor-element-44c60dc > .dc-space-cap{
position:relative!important;z-index:2!important;padding:0 28px!important;}
.elementor-6489 .elementor-element-d60c03a > .e-con.elementor-element-44c60dc > .dc-space-name{padding-top:0!important;}
.elementor-6489 .elementor-element-d60c03a > .e-con.elementor-element-44c60dc > .dc-space-cap{padding-bottom:28px!important;margin-top:6px!important;}
.elementor-6489 .elementor-element-d60c03a > .e-con.elementor-element-44c60dc .dc-space-name .elementor-heading-title.elementor-heading-title{
font-family:var(--dc-display)!important;font-size:30px!important;font-weight:700!important;
letter-spacing:-.02em!important;color:#fff!important;}
.elementor-6489 .elementor-element-d60c03a > .e-con.elementor-element-44c60dc .dc-space-cap .elementor-heading-title.elementor-heading-title{
font-family:var(--dc-body)!important;font-size:15px!important;font-weight:500!important;
letter-spacing:.04em!important;
background:none!important;-webkit-text-fill-color:#8CE8FF!important;color:#8CE8FF!important;}
/* --- les trois appuis --- */
.elementor-6489 .elementor-element-d60c03a > .e-con.elementor-element-5166c1b,
.elementor-6489 .elementor-element-d60c03a > .e-con.elementor-element-3f6e84f,
.elementor-6489 .elementor-element-d60c03a > .e-con.elementor-element-c70e5e2{
grid-column:2!important;
display:grid!important;
grid-template-columns:104px minmax(0,1fr)!important;
grid-template-rows:auto auto!important;
column-gap:18px!important;row-gap:2px!important;
align-content:center!important;align-items:center!important;
padding:18px 24px!important;min-height:0!important;}
.elementor-6489 .elementor-element-d60c03a > .e-con.elementor-element-5166c1b{grid-row:1!important;}
.elementor-6489 .elementor-element-d60c03a > .e-con.elementor-element-3f6e84f{grid-row:2!important;border-top:1px solid var(--dc-gray-200)!important;}
.elementor-6489 .elementor-element-d60c03a > .e-con.elementor-element-c70e5e2{grid-row:3!important;border-top:1px solid var(--dc-gray-200)!important;}
.elementor-6489 .elementor-element-d60c03a > .e-con.elementor-element-5166c1b .dc-espace-photo,
.elementor-6489 .elementor-element-d60c03a > .e-con.elementor-element-3f6e84f .dc-espace-photo,
.elementor-6489 .elementor-element-d60c03a > .e-con.elementor-element-c70e5e2 .dc-espace-photo{
grid-column:1!important;grid-row:1 / span 2!important;margin:0!important;}
.elementor-6489 .elementor-element-d60c03a > .e-con.elementor-element-5166c1b .dc-espace-photo img,
.elementor-6489 .elementor-element-d60c03a > .e-con.elementor-element-3f6e84f .dc-espace-photo img,
.elementor-6489 .elementor-element-d60c03a > .e-con.elementor-element-c70e5e2 .dc-espace-photo img{
width:104px!important;height:104px!important;object-fit:cover!important;
border-radius:10px!important;display:block!important;}
.elementor-6489 .elementor-element-d60c03a > .e-con.elementor-element-5166c1b .dc-space-name,
.elementor-6489 .elementor-element-d60c03a > .e-con.elementor-element-3f6e84f .dc-space-name,
.elementor-6489 .elementor-element-d60c03a > .e-con.elementor-element-c70e5e2 .dc-space-name{
grid-column:2!important;grid-row:1!important;align-self:end!important;}
.elementor-6489 .elementor-element-d60c03a > .e-con.elementor-element-5166c1b .dc-space-cap,
.elementor-6489 .elementor-element-d60c03a > .e-con.elementor-element-3f6e84f .dc-space-cap,
.elementor-6489 .elementor-element-d60c03a > .e-con.elementor-element-c70e5e2 .dc-space-cap{
grid-column:2!important;grid-row:2!important;align-self:start!important;}
/* Les trois appuis ne sont pas trois cartes : ce sont les rangees d'un meme
sommaire. On leur retire la coquille heritee de `.dc-card` — fond, filet,
rayon, ombre — et on ne garde que le filet horizontal qui les separe. Sans
ca, la section redit ce qu'on vient de lui enlever : des paves. */
.elementor-6489 .elementor-element-d60c03a > .e-con.elementor-element-5166c1b,
.elementor-6489 .elementor-element-d60c03a > .e-con.elementor-element-3f6e84f,
.elementor-6489 .elementor-element-d60c03a > .e-con.elementor-element-c70e5e2{
background:none!important;background-color:transparent!important;
border-left:0!important;border-right:0!important;border-bottom:0!important;
border-radius:0!important;box-shadow:none!important;}
.elementor-6489 .elementor-element-d60c03a > .e-con.elementor-element-5166c1b{border-top:0!important;}
.elementor-6489 .elementor-element-d60c03a > .e-con.elementor-element-3f6e84f,
.elementor-6489 .elementor-element-d60c03a > .e-con.elementor-element-c70e5e2{
border-top:1px solid var(--dc-gray-200)!important;}
/* le survol de la maison, sur la rangee entiere */
.elementor-6489 .elementor-element-d60c03a > .e-con.elementor-element-5166c1b:hover,
.elementor-6489 .elementor-element-d60c03a > .e-con.elementor-element-3f6e84f:hover,
.elementor-6489 .elementor-element-d60c03a > .e-con.elementor-element-c70e5e2:hover{
background-color:var(--dc-gray-50)!important;}
.elementor-6489 .elementor-element-d60c03a > .e-con.elementor-element-44c60dc{
border-radius:0!important;box-shadow:none!important;}
.elementor-6489 .dc-space-card .dc-space-name .elementor-heading-title.elementor-heading-title{
font-family:var(--dc-display)!important;}
/* ===========================================================================
V2-3. LES RAPPORTS DE VEILLE DEVIENNENT UNE COLLECTION, PLUS UNE RANGEE
Demande : « Les rapports de veille sont traites comme de simples cartes
alors qu'ils constituent une production editoriale forte de Digitalcity.
[...] Donner aux rapports un traitement editorial propre : couvertures
reelles, annees et sujets clairement visibles. »
Le piege aurait ete de leur appliquer la composition qu'on vient d'inventer
pour les infrastructures — une dominante et des appuis. Deux sections qui se
suivent avec la meme geometrie, c'est le defaut d'origine avec un autre
dessin. On change donc d'AXE : les infrastructures sont une composition
horizontale dominee par une photo ; les rapports deviennent une liste
VERTICALE menee par l'annee. Un temps fort, puis une zone calme — c'est le
rythme qu'elle demande au point « Rythme » de son tableau.
Chaque rapport est une rangee : l'annee en grand a gauche, la couverture
debout au format portrait (elle redevient une COUVERTURE et non une bande
de 16/10 rognee), le sujet et son resume, le telechargement a droite. Filets
entre les rangees, aucun cadre : on lit un fonds documentaire.
REPETITION SUPPRIMEE au passage : chaque carte annoncait « RAPPORT DE VEILLE
2025 » sous un titre de section qui dit deja « Nos rapports de veille » —
quatre fois la meme phrase. L'etiquette ne porte plus que l'annee, qui est
la seule information qu'elle apportait. (« Une information principale doit
avoir un emplacement principal. »)
=========================================================================== */
.elementor-6489 .elementor-element.elementor-element-f945e7f{
display:flex!important;flex-direction:column!important;
gap:0!important;grid-template-columns:none!important;
border-top:1px solid var(--dc-gray-200)!important;}
.elementor-6489 .elementor-element-f945e7f > .e-con.dc-pub-card{
display:grid!important;
grid-template-columns:118px 126px minmax(0,1fr) 210px!important;
grid-template-rows:auto auto!important;
column-gap:30px!important;row-gap:6px!important;
align-items:center!important;
padding:26px 0!important;
background:none!important;background-color:transparent!important;
border:0!important;border-bottom:1px solid var(--dc-gray-200)!important;
border-radius:0!important;box-shadow:none!important;
transition:background-color .3s var(--dc-ease)!important;}
.elementor-6489 .elementor-element-f945e7f > .e-con.dc-pub-card:hover{
background-color:var(--dc-gray-50)!important;transform:none!important;box-shadow:none!important;}
/* la couverture : debout, format portrait, jamais rognee en bandeau */
.elementor-6489 .elementor-element-f945e7f > .e-con.dc-pub-card > .dc-card-img{
grid-column:2!important;grid-row:1 / span 2!important;
width:126px!important;height:168px!important;min-height:0!important;
border-radius:8px!important;overflow:hidden!important;
box-shadow:0 14px 28px -14px rgba(15,27,61,.34)!important;
align-self:center!important;margin:0!important;}
/* le corps s'efface pour que ses quatre widgets se posent dans la rangee */
.elementor-6489 .elementor-element-f945e7f > .e-con.dc-pub-card > .dc-card-body{
display:contents!important;}
.elementor-6489 .dc-pub-card .dc-pub-year{
grid-column:1!important;grid-row:1 / span 2!important;align-self:center!important;}
.elementor-6489 .dc-pub-card .dc-pub-year .elementor-heading-title.elementor-heading-title{
font-family:var(--dc-display)!important;font-size:44px!important;font-weight:800!important;
line-height:1!important;letter-spacing:-.03em!important;
text-transform:none!important;
color:var(--dc-text)!important;}
.elementor-6489 .dc-pub-card .dc-card-title{grid-column:3!important;grid-row:1!important;align-self:end!important;}
.elementor-6489 .dc-pub-card .dc-card-title .elementor-heading-title.elementor-heading-title{
font-size:21px!important;line-height:1.25!important;}
.elementor-6489 .dc-pub-card .dc-card-excerpt{grid-column:3!important;grid-row:2!important;align-self:start!important;}
.elementor-6489 .dc-pub-card .dc-card-bottom{
grid-column:4!important;grid-row:1 / span 2!important;
align-self:center!important;justify-self:end!important;margin:0!important;}
/* ===========================================================================
V2-4. LES DEUX NOUVELLES COMPOSITIONS, DECLINEES EN MOBILE
Une composition en deux colonnes ne se transpose pas telle quelle sur
390 px : la dominante y tombait a 193 px de large et la rangee des rapports
gardait ses quatre colonnes de bureau, dont une ecrasee a zero.
INFRASTRUCTURES : la dominante prend toute la largeur en 4/3, les trois
appuis se rangent dessous. L'idee tient — un lieu mis en scene, puis son
sommaire — seule l'orientation change.
RAPPORTS : **le carrousel n'a plus lieu d'etre.** Il avait ete monte hier
pour une raison unique — la section faisait 2 079 px de haut en pile de
quatre cartes. La nouvelle composition en rangees la ramene a ~640 px sans
rien cacher. Entre un carrousel qui masque trois rapports sur quatre et une
liste qui les montre tous pour la meme hauteur, la liste gagne. On garde le
defilement natif du socle pour les autres usages, il n'est plus appele ici.
L'annee reste en tete de rangee : c'est l'entree de lecture d'un fonds.
=========================================================================== */
@media (max-width:767px){
/* --- infrastructures --- */
.elementor-6489 .elementor-element.elementor-element-d60c03a{
grid-template-columns:1fr!important;
grid-template-rows:auto auto auto auto!important;}
.elementor-6489 .elementor-element-d60c03a > .e-con.elementor-element-44c60dc{
grid-column:1!important;grid-row:1!important;
/* `aspect-ratio` ne suffit pas ici : la grille etire ses items
(`align-items:stretch`) et la rangee se dimensionne sur le contenu, qui
est entierement en absolu — donc zero. La photo ne s'affichait pas du
tout. Hauteur explicite + `align-self:start`. */
min-height:0!important;height:clamp(230px,60vw,320px)!important;
align-self:start!important;
border-right:0!important;border-bottom:1px solid var(--dc-gray-200)!important;}
.elementor-6489 .elementor-element-d60c03a > .e-con.elementor-element-44c60dc .dc-space-name .elementor-heading-title.elementor-heading-title{
font-size:24px!important;}
/* Il ne suffit pas de declarer `grid-template-columns:1fr` : les trois
appuis portaient `grid-column:2` de la regle de bureau, ce qui CREE une
seconde colonne implicite. Elle prenait toute la place et la dominante,
dont le contenu est en absolu, tombait a 6 px. Il faut les ramener en
colonne 1. */
.elementor-6489 .elementor-element-d60c03a > .e-con.elementor-element-5166c1b{grid-column:1!important;grid-row:2!important;border-top:0!important;}
.elementor-6489 .elementor-element-d60c03a > .e-con.elementor-element-3f6e84f{grid-column:1!important;grid-row:3!important;}
.elementor-6489 .elementor-element-d60c03a > .e-con.elementor-element-c70e5e2{grid-column:1!important;grid-row:4!important;}
.elementor-6489 .elementor-element-d60c03a > .e-con.dc-space-card:not(.elementor-element-44c60dc){
grid-template-columns:78px minmax(0,1fr)!important;
column-gap:14px!important;padding:14px 18px!important;}
.elementor-6489 .elementor-element-d60c03a > .e-con.dc-space-card:not(.elementor-element-44c60dc) .dc-espace-photo img{
width:78px!important;height:78px!important;}
/* --- rapports : on annule le rail a defilement d'hier --- */
.elementor-6489 .elementor-element.elementor-element-f945e7f{
display:flex!important;flex-direction:column!important;
overflow-x:visible!important;overflow-y:visible!important;
scroll-snap-type:none!important;
width:auto!important;max-width:none!important;
margin-left:0!important;margin-right:0!important;
padding:0!important;gap:0!important;}
.elementor-6489 .elementor-element-f945e7f > .e-con.dc-pub-card{
flex:0 0 auto!important;width:auto!important;
grid-template-columns:88px minmax(0,1fr)!important;
grid-template-rows:auto auto auto!important;
column-gap:16px!important;row-gap:4px!important;
padding:18px 0!important;align-items:start!important;}
.elementor-6489 .elementor-element-f945e7f > .e-con.dc-pub-card > .dc-card-img{
grid-column:1!important;grid-row:1 / span 3!important;
width:88px!important;height:118px!important;}
.elementor-6489 .dc-pub-card .dc-pub-year{
grid-column:2!important;grid-row:1!important;align-self:start!important;}
.elementor-6489 .dc-pub-card .dc-pub-year .elementor-heading-title.elementor-heading-title{
font-size:26px!important;}
.elementor-6489 .dc-pub-card .dc-card-title{grid-column:2!important;grid-row:2!important;align-self:start!important;}
.elementor-6489 .dc-pub-card .dc-card-title .elementor-heading-title.elementor-heading-title{font-size:17px!important;}
.elementor-6489 .dc-pub-card .dc-card-excerpt{display:none!important;}
.elementor-6489 .dc-pub-card .dc-card-bottom{
grid-column:2!important;grid-row:3!important;
justify-self:start!important;align-self:start!important;margin-top:6px!important;}
}
/* ===========================================================================
V2-5. LA FAQ CESSE DE LAISSER UN VIDE A DROITE
Demande : « La FAQ laisse un grand vide a droite sur desktop : la
composition parait inachevee. »
Mesure : l'accordeon fait 820 px dans un conteneur de 1 312 — 492 px de
blanc a droite, sans rien pour les justifier. Ce n'etait pas un choix, c'est
une largeur de lecture posee sur un bloc empile sous son titre.
On passe en deux colonnes : l'intitule a gauche, les questions a droite.
C'est la disposition habituelle d'une FAQ, et surtout c'est une GEOMETRIE DE
PLUS dans la page — apres la composition horizontale des infrastructures et
la liste verticale des rapports, un troisieme rythme. Le titre devient
collant : il accompagne le depliage au lieu de disparaitre en haut.
Le blanc restant est alors du blanc tenu par une colonne, pas du blanc
oublie.
=========================================================================== */
.elementor-6489 .elementor-element.elementor-element-215d4ba > .e-con-inner{
display:grid!important;
grid-template-columns:minmax(0,.78fr) minmax(0,1.42fr)!important;
column-gap:80px!important;row-gap:0!important;
align-items:start!important;}
.elementor-6489 .elementor-element.elementor-element-3dc7b60{
grid-column:1!important;position:sticky!important;top:120px!important;
width:auto!important;max-width:none!important;}
.elementor-6489 .elementor-element.elementor-element-3dc7b60 .elementor-heading-title.elementor-heading-title{
max-width:14ch!important;text-wrap:balance!important;}
.elementor-6489 .elementor-element.elementor-element-b685364{
grid-column:2!important;width:auto!important;max-width:none!important;}
.elementor-6489 .elementor-element-b685364 .elementor-accordion{
max-width:none!important;width:100%!important;}
@media (max-width:1024px){
.elementor-6489 .elementor-element.elementor-element-215d4ba > .e-con-inner{
grid-template-columns:1fr!important;row-gap:28px!important;}
.elementor-6489 .elementor-element.elementor-element-3dc7b60{
grid-column:1!important;position:static!important;}
.elementor-6489 .elementor-element.elementor-element-3dc7b60 .elementor-heading-title.elementor-heading-title{
max-width:none!important;}
.elementor-6489 .elementor-element.elementor-element-b685364{grid-column:1!important;}
}
/* [ajuste] — BORNE AU BUREAU. Ecrit d'abord sans `@media`, ce bloc
reimposait la grille a quatre colonnes sur telephone et faisait deborder
la page de 95 px (la fenetre de mise en page passait a 485). Un bloc
d'ajustement place APRES un bloc responsive doit porter sa propre borne,
sinon il l'annule. */
@media (min-width:768px){
/* [ajuste] La liste chronologique respirait trop : 4 rangees de 220 px, soit
880 contre 387 a la rangee de cartes d'origine. Or cette section est la ZONE
CALME qui suit le temps fort des infrastructures — si elle pese plus lourd
que lui, on retombe dans « trop de blocs de poids comparable ». On resserre :
couverture 96 x 128, rangee de 164 px. La geometrie ne change pas, seule
l'amplitude. */
.elementor-6489 .elementor-element-f945e7f > .e-con.dc-pub-card{
grid-template-columns:92px 96px minmax(0,1fr) 200px!important;
column-gap:24px!important;padding:18px 0!important;}
.elementor-6489 .elementor-element-f945e7f > .e-con.dc-pub-card > .dc-card-img{
width:96px!important;height:128px!important;
box-shadow:0 10px 22px -12px rgba(15,27,61,.34)!important;}
.elementor-6489 .dc-pub-card .dc-pub-year .elementor-heading-title.elementor-heading-title{
font-size:34px!important;}
.elementor-6489 .dc-pub-card .dc-card-title .elementor-heading-title.elementor-heading-title{
font-size:19px!important;}
}
/* ===========================================================================
V2-6. UNE COUCHE DE REPETITION EN MOINS
Demande : « "Explorer" presente deja plusieurs entrees qui sont ensuite
reintroduites plus bas : le detail doit apporter une nouvelle information,
pas simplement repeter l'intitule. »
Releve : le module Explorer annonce L'equipe, Nos partenaires, Publications
& etudes, Nos infrastructures, Nous contacter. Plus bas, chaque section
ouvre sur une etiquette qui redit le meme mot : NOS ESPACES avant « Des
infrastructures a Auderghem », PUBLICATIONS & ETUDES avant « Nos rapports de
veille ». Le titre de section dit deja ce que l'etiquette annonce, et
l'Explorer l'avait annonce une premiere fois : trois fois la meme entree.
On retire les deux etiquettes qui ne font que repeter. Les autres restent :
« QUI NOUS SOMMES », « AIDE », « NOUS TROUVER » ne figurent pas dans
l'Explorer et situent vraiment leur section.
Masquees et non supprimees — c'est une proposition, elle doit pouvoir
revenir en une ligne.
RESERVE : la meilleure reponse serait sans doute de leur faire porter une
information NOUVELLE (« quatre editions depuis 2022 », « 3 775 m² a
Auderghem ») plutot que de les retirer. C'est une decision de texte, elle
revient a Noemie — je ne l'ecris pas a sa place.
=========================================================================== */
.elementor-6489 .elementor-element.elementor-element-62691b6,
.elementor-6489 .elementor-element.elementor-element-5fbe6f4{display:none!important;}
/* ===========================================================================
V2-7. LE SURVOL : LE ZOOM RESTE, LE SOULEVEMENT PART — 13 septembre 2026
Yassine : « le zoom au survol est pas mal mais l'image se lève et ça crée un
vide en dessous ». Exact, et la cause est une regle du 10 septembre que ma
composition n'annulait pas :
`.dc-space-card:hover{transform:translateY(-6px); box-shadow:…}` (0,4,0)
Elle avait un sens quand les quatre espaces etaient quatre CARTES posees sur
la page : une carte qui se souleve, c'est le geste de la maison.
Elle n'en a plus aucun maintenant. La dominante n'est pas une carte, c'est un
PANNEAU encastre dans un cadre a filet : le soulever le decolle de son cadre
et ouvre exactement les 6 px de vide qu'il decrit. Et les trois appuis ne
sont plus des cartes non plus, ce sont les rangees d'un sommaire — une rangee
de liste ne levite pas.
**Regle : un objet ne se souleve que s'il a un bord libre.** Encastre, il
n'a nulle part ou aller.
Le zoom de l'image, lui, est conserve : il se joue DANS le cadre, qui rogne,
donc il ne deplace rien. C'est le geste de l'accueil V5.
Les appuis recuperent leur survol de rangee — un fond qui s'eclaire.
=========================================================================== */
.elementor-6489 .elementor-element-d60c03a > .e-con.dc-space-card:hover,
.elementor-6489 .elementor-element-d60c03a > .e-con.dc-space-card:focus-within{
transform:none!important;box-shadow:none!important;}
.elementor-6489 .elementor-element-d60c03a > .e-con.elementor-element-44c60dc:hover,
.elementor-6489 .elementor-element-d60c03a > .e-con.elementor-element-44c60dc:focus-within{
background-color:transparent!important;}
.elementor-6489 .elementor-element-d60c03a > .e-con.elementor-element-5166c1b:hover,
.elementor-6489 .elementor-element-d60c03a > .e-con.elementor-element-3f6e84f:hover,
.elementor-6489 .elementor-element-d60c03a > .e-con.elementor-element-c70e5e2:hover,
.elementor-6489 .elementor-element-d60c03a > .e-con.elementor-element-5166c1b:focus-within,
.elementor-6489 .elementor-element-d60c03a > .e-con.elementor-element-3f6e84f:focus-within,
.elementor-6489 .elementor-element-d60c03a > .e-con.elementor-element-c70e5e2:focus-within{
background-color:var(--dc-gray-50)!important;}
/* ===========================================================================
V2-8. LE BOUTON ENTRE DANS LA COMPOSITION — 13 septembre 2026
Il pendait sous le cadre, seul, comme un reste. Il devient la **quatrieme
rangee** de la colonne de droite : le sommaire se ferme sur son action au
lieu de laisser un objet orphelin dessous. La dominante s'etend donc sur
quatre rangees au lieu de trois.
Le widget a ete DEPLACE dans la grille (`move-element`), pas simule en CSS :
la composition reste vraie dans l'editeur Elementor.
=========================================================================== */
.elementor-6489 .elementor-element.elementor-element-d60c03a{
grid-template-rows:auto auto auto auto!important;}
.elementor-6489 .elementor-element-d60c03a > .e-con.elementor-element-44c60dc{
grid-row:1 / span 4!important;}
.elementor-6489 .elementor-element.elementor-element-075818a{
grid-column:2!important;grid-row:4!important;
border-top:1px solid var(--dc-gray-200)!important;
padding:18px 24px!important;margin:0!important;
display:flex!important;align-items:center!important;width:auto!important;}
@media (max-width:767px){
.elementor-6489 .elementor-element.elementor-element-d60c03a{
grid-template-rows:auto auto auto auto auto!important;}
.elementor-6489 .elementor-element-d60c03a > .e-con.elementor-element-44c60dc{
grid-row:1!important;}
.elementor-6489 .elementor-element.elementor-element-075818a{
grid-column:1!important;grid-row:5!important;padding:14px 18px!important;}
}
/* ===========================================================================
V2-9. TROIS REGLAGES — 13 septembre 2026 (retours de Yassine)
1. LES VIGNETTES DES TROIS APPUIS PASSENT DE 104 A 132 PX.
« Pour qu'on puisse mieux voir. » Juste — mais on ne va pas jusqu'aux
onglets (voir la note de refus dans DECISIONS). On leur donne 28 px de
plus : elles gagnent en presence sans que les trois espaces reprennent le
poids de la dominante, et « informations secondaires plus compactes »
reste vrai.
2. LE BOUTON CESSE D'ETRE UN BOUTON DANS UNE BOITE.
« Il est tout seul sur un fond blanc dans une section. » Exact, et la
cause est un DOUBLE CADRE : un bouton a contour pose dans une cellule a
filet. Il perd son contour et devient la quatrieme rangee du sommaire —
meme retrait a gauche que les trois autres, meme fond, une fleche a
droite. Les quatre rangees se lisent alors comme une seule liste qui se
termine par son action.
=========================================================================== */
@media (min-width:768px){
.elementor-6489 .elementor-element-d60c03a > .e-con.dc-space-card:not(.elementor-element-44c60dc){
grid-template-columns:132px minmax(0,1fr)!important;}
.elementor-6489 .elementor-element-d60c03a > .e-con.dc-space-card:not(.elementor-element-44c60dc) .dc-espace-photo img{
width:132px!important;height:132px!important;}
}
.elementor-6489 .elementor-element.elementor-element-075818a .elementor-button{
background:transparent!important;border:0!important;box-shadow:none!important;
padding:0!important;
font-family:var(--dc-body)!important;font-size:16px!important;font-weight:600!important;
color:var(--dc-text)!important;
transition:gap .25s var(--dc-ease)!important;}
.elementor-6489 .elementor-element.elementor-element-075818a .elementor-button:hover{
background:transparent!important;color:var(--dc-bleu-titres)!important;}
.elementor-6489 .elementor-element.elementor-element-075818a:hover{
background-color:var(--dc-gray-50)!important;}
.elementor-6489 .elementor-element.elementor-element-075818a{
padding:20px 24px!important;cursor:pointer!important;}
/* ===========================================================================
V2-10. LES THEMES DES RAPPORTS REMONTENT EN TETE — 13 septembre 2026
« Faudrait pas mettre les infos qui sont tout en bas de la section en haut a
droite pour qu'elles soient plus visibles et moins perdues. » Oui pour les
THEMES (Cybersecurite, Transformation digitale, Big Data, IA) : en bas ils se
lisaient comme un ajout, alors qu'ils disent ce que ces rapports couvrent —
c'est une information d'entree, pas de sortie. Et le bloc de titre n'occupait
que 600 px sur 1 312 : la moitie droite etait vide. Les themes la remplissent
et le vide devient une colonne.
**Le bouton, lui, reste en bas** : « Voir toutes les publications » est une
action qui CONCLUT. La remonter en tete, ce serait proposer de partir avant
d'avoir montre.
=========================================================================== */
@media (min-width:1025px){
.elementor-6489 .elementor-element.elementor-element-4ff4b5e > .e-con-inner,
.elementor-6489 .dc-section:has(.elementor-element-f945e7f) > .e-con-inner{
display:grid!important;
grid-template-columns:minmax(0,1fr) minmax(0,auto)!important;
align-items:end!important;
column-gap:48px!important;}
.elementor-6489 .elementor-element.elementor-element-a11a457{grid-column:1!important;grid-row:1!important;}
.elementor-6489 .elementor-element.elementor-element-575a135{
grid-column:2!important;grid-row:1!important;
justify-content:flex-end!important;align-items:flex-end!important;
max-width:420px!important;margin:0!important;}
.elementor-6489 .elementor-element.elementor-element-f945e7f{grid-column:1 / -1!important;grid-row:2!important;}
.elementor-6489 .elementor-element.elementor-element-1213d70{grid-column:1!important;grid-row:3!important;}
}
/* ===========================================================================
LE SURVOL DES RAPPORTS SE FOND AUX DEUX BOUTS (18-09-2026)
---------------------------------------------------------------------------
Question posee par Yassine le 15 septembre — « le fondu des bords au survol »
des rapports de veille — a laquelle j'avais repondu que je donnerais mon avis
« quand on y arrive », et que je n'ai jamais rendue. La voici.
OUI, et pour une raison precise. La rangee est une bande de 1312 px SANS
CADRE : c'est tout l'interet de ce composant, et c'est pourquoi Hamza a
demande de le reprendre pour les sessions. Or un aplat gris qui s'arrete net
a ses deux extremites REDESSINE le rectangle que la liste sans cadre cherche
a eviter — au survol, on croit voir une cellule de tableau apparaitre.
Un fond qui s'eteint sur les six premiers et six derniers pour cent redevient
ce qu'il doit etre : un SURLIGNAGE, pas une boite. Le texte, lui, ne bouge
pas d'un pixel.
Pose a l'identique sur les sessions de la fiche formation, qui emploient
desormais le meme composant.
=========================================================================== */
.elementor-6489 .elementor-element-f945e7f > .e-con.dc-pub-card:hover{
background-color:transparent!important;
background-image:linear-gradient(90deg,
rgba(249,250,251,0) 0%, rgba(249,250,251,1) 6%,
rgba(249,250,251,1) 94%, rgba(249,250,251,0) 100%)!important;}
/* ===========================================================================
PASSE MOBILE / TABLETTE — 21 septembre 2026
Cinq corrections relevees sur /a-propos/, validees par Yassine le 21/09.
=========================================================================== */
/* [1] « Voir le plan d'acces » etait INVISIBLE — et pas seulement en mobile :
texte BLANC sur carte BLANCHE, a 390, 768, 1024 et 1440. Mesure : les
pixels sombres de sa boite ne venaient que de son soulignement.
Cause : la regle de cette page transforme les deux renvois de la carte
coordonnees en liens soulignes et pose `color:var(--dc-text)` sur le ``.
Mais le socle vise le SPAN interne —
`.dc-btn-primary .elementor-button .elementor-button-text{color:#fff}` —
et une couleur posee sur le span gagne toujours contre une couleur
seulement HERITEE du parent, !important ou pas. « Nous contacter » n'a pas
la classe `dc-btn-primary` : d'ou un seul bouton fautif sur les deux.
Correctif : viser le span a notre tour, avec une classe de plus (0,4,0
contre 0,3,0). */
.elementor-6489 .dc-contact-card .elementor-button .elementor-button-text,
.elementor-6489 .dc-contact-card .elementor-button .elementor-button-icon svg,
.elementor-6489 .dc-contact-card .elementor-button svg{
color:var(--dc-text)!important;
-webkit-text-fill-color:var(--dc-text)!important;
fill:currentColor!important;}
.elementor-6489 .dc-contact-card .elementor-button:hover .elementor-button-text,
.elementor-6489 .dc-contact-card .elementor-button:focus .elementor-button-text{
color:var(--dc-bleu-logo)!important;
-webkit-text-fill-color:var(--dc-bleu-logo)!important;}
/* [2] Cibles tactiles des deux renvois de la carte coordonnees : le lien
faisait 272 x 19 px dans un cadre pleine largeur — on voit un bouton, on
tape a cote. On n'ajoute PAS de rembourrage : il eloignerait le
soulignement de son texte et changerait le dessin. On etend la zone
sensible, comme le socle le fait deja pour le burger.
Ecart mesure entre les deux liens : 31 px. Avec -12 px de chaque cote
(44 px de cible) les deux zones ne se recouvrent pas : -7..37 et 44..87. */
.elementor-6489 .dc-contact-card .elementor-button{position:relative;}
.elementor-6489 .dc-contact-card .elementor-button::after{
content:"";position:absolute;inset:-12px 0;}
/* [3] ANNULE le 21/09, le jour meme : « Telecharger le rapport » n'etait PAS
une cible de 164 x 26 px, et ma correction a ete une REGRESSION.
Le CSS de cette page rendait deja la carte de publication entierement
cliquable, par exactement le meme procede :
.dc-pub-card{position:relative;}
.dc-pub-card .dc-link-text .elementor-button::after{inset:0;z-index:1;}
Ma regle, plus specifique (0,4,0 contre 0,3,0), a gagne sur `inset` ; et en
posant `position:relative` sur le BOUTON j'ai fait que le recouvrement
s'ancre au bouton et non plus a la carte. Zone cliquable ramenee de la
carte entiere (1312 x 165 au bureau) a une bande de 164 x 44.
Mesure a `elementFromPoint`, etat d'origine rejoue pour comparaison :
avant, le centre et la vignette atteignaient le lien ; apres, plus rien.
(Le titre n'atteint le lien dans aucun des deux etats : `.dc-card-title`
porte `z-index:2` pour rester selectionnable — c'est voulu.)
RIEN A ECRIRE ICI : la cible etait deja bonne, et bien plus grande que 44 px.
Lecon, la meme qu'ailleurs ce jour-la : avant de s'attribuer un
pseudo-element, verifier qu'il ne travaille pas deja. */
/* [4] Telephone et e-mail : `display:inline`, rembourrage 0, donc 19 px de
haut. Sur une page « Adresse et coordonnees » ouverte au telephone, c'est
exactement ce qu'on veut toucher. Un ::after ne convient pas ici : les deux
liens sont sur des lignes voisines d'un meme paragraphe, les zones se
recouvriraient. On passe en inline-block avec du rembourrage vertical — la
ligne s'ouvre d'elle-meme a la hauteur de la boite. Mobile seulement. */
@media (max-width:767px){
.elementor-6489 .dc-contact-card a[href^="tel:"],
.elementor-6489 .dc-contact-card a[href^="mailto:"]{
display:inline-block!important;padding:11px 0!important;}
}
/* [5] La carte Google faisait 342 x 192 px (rapport 16/9), dont ~25 px de
barre d'attribution Google : il restait 165 px de carte utile, et les rues
voisines sortaient du cadre. En 4/3 elle passe a 256 px. */
/* CORRIGE dans la foulee : j'avais vise `.dc-map-live`, qui est en absolu a
l'interieur de `.dc-map-slot` (inset:0, height:100%). Lui poser un rapport
d'image ne grandit pas la carte : sa hauteur restant imposee par le slot,
c'est sa LARGEUR qui a retreci — 342 x 192 est devenu 257 x 192.
Le rapport se pose sur le SLOT, qui est l'element qui a une largeur.
Le slot est en 4/3 par defaut et passe en 16/9 sous 900 px ; on ne rouvre
le 4/3 que sous 768, la tablette garde son panorama. */
@media (max-width:767px){
.elementor-6489 .dc-map-slot{aspect-ratio:4 / 3!important;}
}
/* [6] TABLETTE — « Des infrastructures a Auderghem » gardait la disposition
deux colonnes du bureau jusqu'a 1099 px, alors que la colonne de texte
tombe a 155 px. Mesures : 3 lignes pour 19 signes a 768, 2 lignes a 900 et
1024, 1 ligne seulement a partir de ~1100. On etend l'empilement (la
disposition mobile, qui est propre) jusqu'a 1099 px.
Les regles sont RECOPIEES depuis le bloc <=767 plutot que le palier
deplace : le comportement mobile deja verifie n'est pas touche.
Rappel du piege paye a <=767 : declarer `grid-template-columns:1fr` ne
suffit pas — les trois appuis portent `grid-column:2` de la regle de
bureau, ce qui CREE une seconde colonne implicite. Il faut les ramener un
par un en colonne 1. */
@media (min-width:768px) and (max-width:1099px){
.elementor-6489 .elementor-element.elementor-element-d60c03a{
grid-template-columns:1fr!important;
grid-template-rows:auto auto auto auto auto!important;}
.elementor-6489 .elementor-element-d60c03a > .e-con.elementor-element-44c60dc{
grid-column:1!important;grid-row:1!important;
/* meme raison qu'en mobile : le contenu est en absolu, la rangee se
dimensionnerait a zero. Hauteur explicite + align-self:start. */
min-height:0!important;height:clamp(260px,34vw,360px)!important;
align-self:start!important;
border-right:0!important;
border-bottom:1px solid var(--dc-gray-200)!important;}
.elementor-6489 .elementor-element-d60c03a > .e-con.elementor-element-5166c1b{
grid-column:1!important;grid-row:2!important;border-top:0!important;}
.elementor-6489 .elementor-element-d60c03a > .e-con.elementor-element-3f6e84f{
grid-column:1!important;grid-row:3!important;}
.elementor-6489 .elementor-element-d60c03a > .e-con.elementor-element-c70e5e2{
grid-column:1!important;grid-row:4!important;}
/* CORRIGE dans la foulee : les quatre tuiles etaient bien passees en
colonne 1, mais le CINQUIEME enfant — « Decouvrir nos infrastructures »
(49caddc) — gardait `grid-column:2` de la regle de bureau. Il creait a
lui seul la deuxieme colonne implicite decrite plus haut : 266 px pris
a vide, et les tuiles reduites a 419 px au lieu de 688.
C'est exactement le piege que le commentaire du bloc <=767 annonce ;
je l'ai paye une fois de plus faute de compter les enfants. */
.elementor-6489 .elementor-element.elementor-element-075818a{
grid-column:1!important;grid-row:5!important;}
}
/* ===========================================================================
COPIE V2 — MASQUAGE DU TITRE IMPRIME PAR LE THEME
La page d'origine utilise le gabarit « Elementor pleine largeur »
(`_wp_page_template = elementor_header_footer`). Une page creee par le MCP
retombe sur `default`, et le MCP ne sait pas ecrire ce reglage : le theme
ajoute alors son propre `h1` au-dessus du contenu Elementor (50 px + marges,
soit ~74 px que la page d'origine n'a pas).
On le masque ici — cette feuille ne se charge que sur cette page.
VRAI CORRECTIF, en un clic : wp-admin > la page > Attributs de page >
Modele > « Elementor pleine largeur ». Ce bloc devient alors inutile.
=========================================================================== */
.page-header,.page-header .entry-title{display:none!important;}
/* ===========================================================================
A PROPOS V3 — DECISIONS DE LA REUNION DU 25/09 (Veronique, Hamza, Yassine)
---------------------------------------------------------------------------
Noemie : page trop longue, pas assez de rupture entre les sections. Sans
changer le design valide le 14/09 :
1. le bandeau « L'equipe » apres les chiffres est retire (doublon du
« Voir l'equipe » du module d'onglets) ;
2. Infrastructures reprend le module Formations de l'accueil, en miroir :
la carte d'appel A GAUCHE, sur la photo de l'auditorium, les trois
autres espaces a cote, sur UNE rangee — et la section passe sur fond
d'encre, la rupture demandee (comme « Notre ecosysteme », un cran plus
doux, tire vers le violet) ;
3. les rapports de veille passent sur deux colonnes : meme liste menee par
l'annee, moitie moins haute.
Selecteurs par l'identifiant de section : ils l'emportent sur les regles
de grille du 12/09 sans les reecrire.
=========================================================================== */
#infrastructures{background:linear-gradient(135deg,#130F33 0%,#221856 60%,#2E1C6B 100%)!important;}
#infrastructures::before,#infrastructures::after{display:none!important;}
#infrastructures .dc-eyebrow .elementor-heading-title{color:#B9A8FF!important;-webkit-text-fill-color:#B9A8FF!important;}
#infrastructures .dc-header-text h2.elementor-heading-title,
#infrastructures .dc-header-text .elementor-heading-title{color:#fff!important;-webkit-text-fill-color:#fff!important;}
#infrastructures .dc-subtitle,#infrastructures .dc-subtitle p{color:rgba(255,255,255,.74)!important;}
#infrastructures .dc-hairline-grid.dc-hairline-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;
grid-template-rows:auto!important;gap:20px!important;background:none!important;border:0!important;border-radius:0!important;
overflow:visible!important;margin-top:40px!important;}
#infrastructures .dc-hairline-grid > .dc-space-card{grid-column:auto!important;grid-row:auto!important;position:relative!important;
display:flex!important;flex-direction:column!important;min-height:0!important;height:auto!important;margin:0!important;
background:#fff!important;border:0!important;border-radius:20px!important;overflow:hidden!important;padding:0 0 22px!important;}
#infrastructures .dc-space-card .dc-espace-photo{order:0!important;margin:0 0 18px!important;width:100%!important;}
#infrastructures .dc-space-card .dc-espace-photo img{width:100%!important;height:200px!important;object-fit:cover!important;
border-radius:0!important;display:block!important;}
#infrastructures .dc-space-card .dc-space-name,#infrastructures .dc-space-card .dc-space-cap{padding:0 22px!important;margin:0!important;}
#infrastructures .dc-space-card .dc-space-name .elementor-heading-title{font-size:19px!important;font-weight:700!important;
color:var(--dc-text)!important;-webkit-text-fill-color:currentColor!important;}
#infrastructures .dc-space-card .dc-space-cap .elementor-heading-title{margin-top:4px!important;font-size:14px!important;font-weight:600!important;
color:#5B3FD0!important;-webkit-text-fill-color:currentColor!important;}
/* la carte d'appel : l'auditorium en fond, le texte et le bouton dessus */
#infrastructures .dc-space-card.dc-space-card--cta{justify-content:flex-end!important;min-height:340px!important;padding:0 24px 24px!important;
background:#0E0B26!important;isolation:isolate;}
#infrastructures .dc-space-card--cta .dc-espace-photo{position:absolute!important;inset:0!important;margin:0!important;z-index:-2;}
#infrastructures .dc-space-card--cta .dc-espace-photo img{height:100%!important;}
#infrastructures .dc-space-card--cta::after{content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(180deg,rgba(14,11,38,.10) 0%,rgba(14,11,38,.55) 45%,rgba(14,11,38,.92) 100%);}
#infrastructures .dc-space-card--cta .dc-space-name,#infrastructures .dc-space-card--cta .dc-space-cap{padding:0!important;}
#infrastructures .dc-space-card--cta .dc-space-name .elementor-heading-title{font-size:26px!important;color:#fff!important;}
#infrastructures .dc-space-card--cta .dc-space-cap .elementor-heading-title{color:#C9BBFF!important;}
#infrastructures .dc-space-card--cta .elementor-widget-button{margin-top:18px!important;width:auto!important;align-self:flex-start!important;}
#infrastructures .dc-space-card--cta .elementor-button.elementor-button{background:#fff!important;color:#12102E!important;
-webkit-text-fill-color:#12102E!important;border:0!important;border-radius:10px!important;padding:12px 18px!important;
font-weight:700!important;box-shadow:none!important;}
#infrastructures .dc-space-card--cta .elementor-button.elementor-button *{color:#12102E!important;-webkit-text-fill-color:#12102E!important;fill:#12102E!important;}
/* les rapports de veille : deux colonnes, meme dessin */
#publications .dc-pub-card{min-width:0;}
#publications .dc-pub-card + .dc-pub-card{margin-top:0!important;}
#publications .e-con-inner > .e-con:has(> .dc-pub-card),
#publications > .e-con:has(> .dc-pub-card){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
column-gap:48px!important;row-gap:0!important;}
@media (max-width:1024px){
#infrastructures .dc-hairline-grid.dc-hairline-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
#publications .e-con-inner > .e-con:has(> .dc-pub-card),
#publications > .e-con:has(> .dc-pub-card){grid-template-columns:1fr!important;}
}
@media (max-width:767px){
#infrastructures .dc-hairline-grid.dc-hairline-grid{grid-template-columns:1fr!important;}
#infrastructures .dc-space-card.dc-space-card--cta{min-height:300px!important;}
}
/* ordre des plans de la carte d'appel : photo, voile, texte */
#infrastructures .dc-space-card--cta .dc-espace-photo.dc-espace-photo{z-index:0!important;}
#infrastructures .dc-space-card.dc-space-card--cta::after{z-index:1!important;}
#infrastructures .dc-space-card--cta > .elementor-element:not(.dc-espace-photo){position:relative!important;z-index:2!important;}
#infrastructures .dc-space-card .dc-space-name.dc-space-name,
#infrastructures .dc-space-card .dc-space-cap.dc-space-cap{align-self:stretch!important;width:auto!important;text-align:left!important;}
#infrastructures .dc-space-card .dc-space-name .elementor-heading-title,
#infrastructures .dc-space-card .dc-space-cap .elementor-heading-title{text-align:left!important;}
#infrastructures .dc-space-card.dc-space-card--cta::after{content:""!important;position:absolute!important;inset:0!important;
background:linear-gradient(180deg,rgba(14,11,38,.05) 0%,rgba(14,11,38,.55) 50%,rgba(14,11,38,.94) 100%)!important;
opacity:1!important;z-index:1!important;pointer-events:none;}
#infrastructures .dc-space-card--cta .elementor-button.elementor-button{padding:11px 16px!important;font-size:15px!important;}
/* 26/09 nuit — contraste AA de la carte auditorium : voile plus dense sous le
texte, capacite en blanc */
#infrastructures .dc-space-card.dc-space-card--cta::after{background:linear-gradient(180deg,rgba(14,11,38,.10) 0%,rgba(14,11,38,.70) 38%,rgba(14,11,38,.96) 100%)!important;}
#infrastructures .dc-space-card--cta .dc-space-cap .elementor-heading-title{color:#fff!important;-webkit-text-fill-color:#fff!important;opacity:.92;}
/* 26/09 — plus de vide sous le texte des 3 cartes blanches : la photo absorbe
la hauteur de la rangee, le texte reste en bas (bureau et tablette) */
@media (min-width:768px){
#infrastructures .dc-space-card:not(.dc-space-card--cta) .dc-espace-photo{flex:1 1 auto!important;min-height:180px!important;display:flex!important;}
#infrastructures .dc-space-card:not(.dc-space-card--cta) .dc-espace-photo img{height:100%!important;min-height:180px!important;}
#infrastructures .dc-space-card:not(.dc-space-card--cta) .dc-espace-photo > *{flex:1;display:flex;}
}
/* 26/09 — « Un partenariat public-prive » apres le retrait du bandeau equipe :
plus de marge orpheline en bas (56 px qui separaient du bandeau), et la
photo prend la hauteur de la colonne de texte au bureau */
#apropos .dc-two-col.dc-two-col{margin-bottom:0!important;}
@media (min-width:1025px){
#apropos .dc-two-col.dc-two-col{align-items:stretch!important;}
#apropos .dc-two-col > .dc-card-img.dc-fig-43{aspect-ratio:auto!important;height:auto!important;min-height:100%!important;align-self:stretch!important;}
}
/* 26/09 — citation -> chiffres : 56 px avant le filet ramenes a 32, 30 apres ramenes a 24 */
#apropos .dc-two-body .dc-hairline-grid.dc-stats{margin-top:10px!important;padding-top:24px!important;}
/* ===========================================================================
26/09 — INFRASTRUCTURES = LE MODULE FORMATIONS DE L'ACCUEIL, A L'IDENTIQUE
(Hamza en reunion : « reprendre ce modele-la, l'appel a l'action a gauche,
sur le fond de l'auditorium »). Mesures relevees sur l'accueil : grille a
filets de 1 px (#E2E5ED), cadre arrondi 16 px, cartes blanches a angles
droits, photo 184 px, texte en 24/32 px de marge, titre 17 px Rubik 700,
meta 14 px gris ; carte d'appel : image pleine, titre 22 px blanc, meta
14 px, lien texte 14 px avec fleche.
=========================================================================== */
#infrastructures .dc-hairline-grid.dc-hairline-grid{gap:1px!important;background:#E2E5ED!important;border:1px solid #E2E5ED!important;
border-radius:16px!important;overflow:hidden!important;align-items:stretch!important;}
#infrastructures .dc-hairline-grid > .dc-space-card.dc-space-card{border-radius:0!important;box-shadow:none!important;padding:0 0 24px!important;
min-height:0!important;background:#fff!important;justify-content:flex-start!important;}
#infrastructures .dc-space-card:not(.dc-space-card--cta) .dc-espace-photo.dc-espace-photo{flex:0 0 auto!important;min-height:0!important;margin:0 0 24px!important;display:block!important;}
#infrastructures .dc-space-card:not(.dc-space-card--cta) .dc-espace-photo img{height:184px!important;min-height:0!important;border-radius:0!important;}
#infrastructures .dc-space-card .dc-space-name.dc-space-name,
#infrastructures .dc-space-card .dc-space-cap.dc-space-cap{padding:0 32px!important;}
#infrastructures .dc-space-card:not(.dc-space-card--cta) .dc-space-name .elementor-heading-title{font-family:Rubik,sans-serif!important;font-size:17px!important;
font-weight:700!important;line-height:1.3!important;color:#1A1D2B!important;-webkit-text-fill-color:#1A1D2B!important;}
#infrastructures .dc-space-card:not(.dc-space-card--cta) .dc-space-cap .elementor-heading-title{margin-top:8px!important;font-size:14px!important;
font-weight:400!important;color:#5F6980!important;-webkit-text-fill-color:#5F6980!important;}
/* la carte d'appel : image pleine de l'auditorium, texte en bas, lien texte */
#infrastructures .dc-hairline-grid > .dc-space-card.dc-space-card--cta{justify-content:flex-end!important;padding:24px 32px!important;background:#0E0B26!important;}
#infrastructures .dc-space-card--cta .dc-space-name.dc-space-name,
#infrastructures .dc-space-card--cta .dc-space-cap.dc-space-cap{padding:0!important;}
#infrastructures .dc-space-card--cta .dc-space-name .elementor-heading-title{font-family:Rubik,sans-serif!important;font-size:22px!important;font-weight:700!important;line-height:1.22!important;}
#infrastructures .dc-space-card--cta .dc-space-cap .elementor-heading-title{margin-top:8px!important;font-size:14px!important;font-weight:400!important;
color:rgba(255,255,255,.82)!important;-webkit-text-fill-color:rgba(255,255,255,.82)!important;opacity:1!important;}
#infrastructures .dc-space-card--cta .elementor-widget-button{margin-top:18px!important;border:0!important;padding:0!important;}
#infrastructures .dc-space-card--cta .elementor-widget-button::before,#infrastructures .dc-space-card--cta .elementor-widget-button::after{display:none!important;}
#infrastructures .dc-space-card--cta .elementor-button.elementor-button{background:none!important;padding:0!important;border:0!important;border-radius:0!important;
font-size:14px!important;font-weight:500!important;color:#fff!important;-webkit-text-fill-color:#fff!important;box-shadow:none!important;}
#infrastructures .dc-space-card--cta .elementor-button.elementor-button *{color:#fff!important;-webkit-text-fill-color:#fff!important;fill:#fff!important;}
#infrastructures .dc-space-card--cta .elementor-button:hover .elementor-button-text{text-decoration:underline;text-underline-offset:3px;}
@media (max-width:1024px){ #infrastructures .dc-hairline-grid > .dc-space-card.dc-space-card--cta{min-height:260px!important;} }
#infrastructures .dc-space-card:not(.dc-space-card--cta) .dc-space-cap .elementor-heading-title.elementor-heading-title,
#infrastructures .dc-space-card:not(.dc-space-card--cta) .dc-space-cap .elementor-heading-title *{color:#5F6980!important;-webkit-text-fill-color:#5F6980!important;font-weight:400!important;}
#infrastructures .dc-space-card--cta .dc-space-cap .elementor-heading-title.elementor-heading-title{letter-spacing:0!important;text-transform:none!important;}
/* 26/09 — Infrastructures prend l'encre de nuit du site (meme fond que
« Notre ecosysteme », les evenements et le bandeau d'appel) */
#infrastructures.dc-section{background:#0A0728!important;position:relative;isolation:isolate;}
#infrastructures.dc-section::before{content:""!important;display:block!important;position:absolute!important;inset:0!important;z-index:-1!important;pointer-events:none;opacity:1!important;
background:radial-gradient(62% 58% at 10% 4%,rgba(126,63,242,.46),rgba(126,63,242,0) 68%),
radial-gradient(56% 52% at 92% 98%,rgba(0,138,183,.38),rgba(0,138,183,0) 70%),
radial-gradient(44% 38% at 64% 26%,rgba(217,70,239,.15),rgba(217,70,239,0) 74%)!important;}
/* 26/09 — le lien de la carte Auditorium se comporte comme « Voir le catalogue »
de l'accueil : pas de fond ni de soulignement, la fleche avance de 4 px au
survol de la carte */
#infrastructures .dc-space-card--cta .elementor-button.elementor-button,
#infrastructures .dc-space-card--cta .elementor-button.elementor-button:hover,
#infrastructures .dc-space-card--cta .elementor-button.elementor-button:focus{background:none!important;background-color:transparent!important;box-shadow:none!important;}
#infrastructures .dc-space-card--cta .elementor-button:hover .elementor-button-text{text-decoration:none!important;}
#infrastructures .dc-space-card--cta .elementor-button-icon{transition:transform .3s var(--dc-ease,ease)!important;}
#infrastructures .dc-space-card--cta:hover .elementor-button-icon{transform:translateX(4px)!important;}
/* rapports de veille : un filet vertical separe les deux colonnes */
@media (min-width:1025px){
#publications .e-con-inner > .e-con:has(> .dc-pub-card),
#publications > .e-con:has(> .dc-pub-card){column-gap:0!important;}
#publications .dc-pub-card:nth-child(odd){padding-right:40px!important;}
#publications .dc-pub-card:nth-child(even){padding-left:40px!important;border-left:1px solid var(--dc-gray-200,#E3E6EE)!important;}
}
/* 26/09 — pas de fond au survol du conteneur du lien (style « encadre » herite) */
#infrastructures .dc-space-card--cta .elementor-widget-button,
#infrastructures .dc-space-card--cta .elementor-widget-button:hover{background:none!important;background-color:transparent!important;}
/* 26/09 — RAPPORTS DE VEILLE : une composition pensee pour la demi-colonne.
Vignette a gauche ; a droite, empiles : annee en couleur, titre, texte,
lien de telechargement. Les filets suivent chaque rangee. */
@media (min-width:1025px){
#publications .dc-card.dc-pub-card.dc-pub-card{grid-template-columns:96px minmax(0,1fr)!important;grid-template-rows:auto auto auto 1fr!important;
column-gap:24px!important;row-gap:6px!important;align-items:start!important;padding-top:28px!important;padding-bottom:28px!important;}
#publications .dc-pub-card .dc-card-img{grid-column:1!important;grid-row:1 / span 4!important;align-self:start!important;}
#publications .dc-pub-card .dc-pub-year{grid-column:2!important;grid-row:1!important;}
#publications .dc-pub-card .dc-pub-year .elementor-heading-title{font-size:15px!important;line-height:1.2!important;letter-spacing:.02em!important;
color:var(--dc-bleu-logo,#008AB7)!important;-webkit-text-fill-color:var(--dc-bleu-logo,#008AB7)!important;}
#publications .dc-pub-card .dc-card-title{grid-column:2!important;grid-row:2!important;}
#publications .dc-pub-card .dc-card-title .elementor-heading-title{font-size:19px!important;line-height:1.3!important;}
#publications .dc-pub-card .dc-card-excerpt{grid-column:2!important;grid-row:3!important;}
#publications .dc-pub-card .dc-card-excerpt p{margin:0!important;font-size:15px!important;line-height:1.5!important;}
#publications .dc-pub-card .dc-card-bottom{grid-column:2!important;grid-row:4!important;justify-self:start!important;align-self:end!important;margin-top:8px!important;}
}
/* 26/09 — telechargement : une seule animation, la fleche (vers le bas)
descend de 3 px. L'ecartement du lien generique (qui la poussait a droite)
est fige ici. */
#publications .dc-pub-card .dc-card-bottom .elementor-button-content-wrapper,
#publications .dc-pub-card .dc-card-bottom .elementor-button:hover .elementor-button-content-wrapper,
#publications .dc-pub-card:hover .dc-card-bottom .elementor-button-content-wrapper{gap:8px!important;transition:none!important;}
#publications .dc-pub-card .dc-card-bottom .elementor-button-icon{transition:transform .25s ease!important;transform:none;}
#publications .dc-pub-card .dc-card-bottom .elementor-button-icon *{transition:none!important;transform:none!important;}
#publications .dc-pub-card:hover .dc-card-bottom .elementor-button-icon{transform:translateY(3px)!important;}
/* 26/09 — rapports : le bloc ne bouge plus (au retour du PDF, le lien garde le
focus et le bloc remontait de 8 px) ; plus de zoom de vignette : une seule
animation, la fleche qui descend */
#publications .dc-pub-card.dc-pub-card,
#publications .dc-pub-card.dc-pub-card:hover,
#publications .dc-pub-card.dc-pub-card:focus-within{transform:none!important;}
#publications .dc-pub-card .dc-card-img,
#publications .dc-pub-card:hover .dc-card-img,
#publications .dc-pub-card:focus-within .dc-card-img,
#publications .elementor-element > *:hover .dc-card-img,
#publications .elementor-element > *:focus-within .dc-card-img{transform:none!important;}
#publications .dc-pub-card:focus-within .dc-card-bottom .elementor-button-icon{transform:none!important;}
#publications .dc-pub-card:hover .dc-card-bottom .elementor-button-icon{transform:translateY(3px)!important;}
/* 27/09 — zoom leger de la vignette, au SURVOL seulement (jamais au focus) */
#publications .dc-pub-card .dc-card-img{overflow:hidden!important;}
#publications .dc-pub-card .dc-card-img,#publications .dc-pub-card .dc-card-img *{transition:transform .4s ease!important;}
#publications .dc-pub-card.dc-pub-card:hover .dc-card-img{transform:scale(1.04)!important;}
/* le bloc entier ouvre le PDF : le lien « Telecharger » s'etire sur tout le bloc */
#publications .dc-pub-card.dc-pub-card{position:relative!important;cursor:pointer;}
#publications .dc-pub-card .elementor-element,#publications .dc-pub-card .elementor-button{position:static!important;}
#publications .dc-pub-card .dc-card-bottom a.elementor-button::after{content:""!important;display:block!important;position:absolute!important;inset:0!important;z-index:2!important;}
#publications .dc-pub-card .dc-card-bottom a.elementor-button:focus-visible{outline:2px solid var(--dc-bleu-logo,#008AB7)!important;outline-offset:4px;}
/* le degrade d'ombre de la vignette reste DANS la vignette (il s'etalait sur tout le bloc) */
#publications .dc-pub-card .dc-card-img.dc-card-img{position:relative!important;}
/* [28/09] Infrastructures sous 960 px = cartes compactes du module Formations de l'accueil (memes valeurs) */
@media (max-width:959px){
.elementor-6489 #infrastructures .dc-hairline-grid .dc-space-card.dc-space-card:not(.dc-space-card--cta){
display:grid!important;grid-template-columns:var(--dc-vignette,112px) minmax(0,1fr)!important;
grid-template-rows:1fr auto auto 1fr!important;column-gap:0!important;row-gap:4px!important;
padding:0!important;align-items:start!important;height:auto!important;min-height:0!important;}
.elementor-6489 #infrastructures .dc-space-card:not(.dc-space-card--cta) .dc-espace-photo{
grid-column:1!important;grid-row:1 / -1!important;width:var(--dc-vignette,112px)!important;
height:100%!important;min-height:var(--dc-vignette,112px)!important;margin:0!important;}
.elementor-6489 #infrastructures .dc-space-card:not(.dc-space-card--cta) .dc-espace-photo img{
width:100%!important;height:100%!important;object-fit:cover!important;aspect-ratio:auto!important;}
.elementor-6489 #infrastructures .dc-space-card:not(.dc-space-card--cta) .dc-space-name{
grid-column:2!important;grid-row:2!important;padding:14px 14px 0 16px!important;margin:0!important;}
.elementor-6489 #infrastructures .dc-space-card:not(.dc-space-card--cta) .dc-space-cap{
grid-column:2!important;grid-row:3!important;padding:0 14px 14px 16px!important;margin:0!important;}
.elementor-6489 #infrastructures .dc-space-card .dc-space-name .elementor-heading-title.elementor-heading-title{
font-size:16px!important;line-height:1.3!important;}
/* la carte lien (Auditorium) = la carte « suite » de l'accueil : pleine largeur, 18 px, photo en fond */
.elementor-6489 #infrastructures .dc-space-card.dc-space-card--cta.dc-space-card--cta{
min-height:172px!important;height:auto!important;padding:18px!important;}
.elementor-6489 #infrastructures .dc-space-card--cta .dc-space-name .elementor-heading-title.elementor-heading-title{font-size:17px!important;}
}
@media (min-width:768px) and (max-width:959px){
.elementor-6489 #infrastructures .dc-space-card{--dc-vignette:120px;}
}
@media (max-width:959px){ /* [28/09 b] la photo ne dicte plus la hauteur ; la carte lien remplit sa rangee */
.elementor-6489 #infrastructures .dc-space-card:not(.dc-space-card--cta) .dc-espace-photo{position:relative!important;height:auto!important;overflow:hidden!important;}
.elementor-6489 #infrastructures .dc-space-card:not(.dc-space-card--cta) .dc-espace-photo img{position:absolute!important;inset:0!important;}
.elementor-6489 #infrastructures .dc-space-card.dc-space-card--cta.dc-space-card--cta{align-self:stretch!important;}
}
@media (max-width:959px){ /* [28/09 c] */ .elementor-6489 #infrastructures .dc-space-card:not(.dc-space-card--cta) .dc-espace-photo{align-self:stretch!important;} }
/* [29/09] Tablette portrait : « Qui sommes-nous » reprend la mise en page du paysage (1024) —
image 40 % a gauche, texte a droite — au lieu d'une image pleine largeur de ~450 px. */
@media (min-width:768px) and (max-width:1023px){
.elementor-6489 #apropos .dc-two-col.dc-two-col{flex-direction:row!important;align-items:flex-start!important;gap:56px!important;}
.elementor-6489 #apropos .dc-two-col > .dc-card-img{flex:0 0 40%!important;width:40%!important;max-width:40%!important;}
.elementor-6489 #apropos .dc-two-col > .dc-two-body{flex:1 1 0!important;width:auto!important;min-width:0!important;}
}
/* [29/09] Infrastructures en tablette : toutes les rangees a la meme hauteur, la carte Auditorium remplit la sienne */
@media (min-width:768px) and (max-width:1024px){
.elementor-6489 #infrastructures .dc-hairline-grid.dc-hairline-grid{grid-auto-rows:1fr!important;}
.elementor-6489 #infrastructures .dc-space-card.dc-space-card{align-self:stretch!important;height:auto!important;}
}
@media (min-width:768px) and (max-width:959px){ /* [29/09 b] rangees explicites : meme hauteur minimale que la carte Auditorium */
.elementor-6489 #infrastructures .dc-hairline-grid .dc-space-card.dc-space-card.dc-space-card:not(.dc-space-card--cta){min-height:172px!important;}
}
@media (min-width:768px) and (max-width:1023px){ /* [29/09 c] colonne de texte plus etroite en portrait */
.elementor-6489 #apropos .dc-stat-num .elementor-heading-title.elementor-heading-title{font-size:32px!important;white-space:nowrap!important;}
.elementor-6489 #apropos .dc-two-title .elementor-heading-title{text-wrap:balance;}
}
/* 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;}
/* RETOURS 14/10 : ecosysteme desaffiche via Visibilite reactive Elementor (logos masques, remplaces par un court texte + lien Partenaires) */
/* Masquage visible sur le site seulement : dans l'editeur Elementor les logos restent visibles et modifiables. */
body:not(.elementor-editor-active) .elementor-6489 .dc-section.dc-eco .dc-eco-logos.elementor-hidden-desktop{display:none!important;}
.dc-eco .dc-header-text + .elementor-widget-button,.dc-eco > .elementor-widget-button{margin-top:28px;align-self:flex-start;}
.elementor-6489 .dc-section.dc-eco .elementor-widget-button{align-self:flex-start!important;margin-top:8px;}
/* RETOURS 14/10 : logos de l'ecosysteme = vrais widgets Image (lien + alt), modifiables dans Elementor.
La cellule blanche reste portee par .dc-client-chip ; le logo est l'image du widget. */
.elementor-6489 .dc-eco .dc-client-chip.elementor-widget-image a{display:flex!important;align-items:center;justify-content:center;width:100%;}
.elementor-6489 .dc-eco .dc-client-chip.elementor-widget-image img{width:auto!important;max-width:100%!important;height:auto!important;max-height:46px!important;object-fit:contain;display:block;}/* End custom CSS */