Discussion :

[CamB22]

Bonjour,

Je suis en train de retravailler la page de mon site web. Je suis repartie d'un vieux code que j'ai essayé d'améliorer pour avoir une page plus moderne. Je touche au but, mais je ne réussi pas 2 choses :
A agrandir mon bouton Mon Profil ...
Et ensuite, à faire en sorte que les carrées en passant mon curseur s'affiche totalement en blanc, et pas juste le mot "J'y vais"
Je pense que mon code pourrait être nettoyer et je dois me mélanger les pinceaux avec mes div class...

Je suis débutante, j'ai passé pas mal de temps sur le forum pour me rapprocher de ce résultat mais là, j'avoue que je suis un peu pommé.

Si quelqu'un veut bien venir à ma rescousse.
Je poste le code en PJ.

Merci pour votre aide !
cdlt
Camille.

[mathieu]

pour la couleur de fond au survol, essayez cela :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.unity_hero_tile:hover
{
	background-color : #AAA;
}

et pour le bouton "mon profil"

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
.unity_hero_subhead_buttons
{
	/* ajoute de l'espace autour du bouton */
	padding : 1em 0 4em 0; 
}
 
.unity_hero_subhead_buttons a
{
	background-color : #333;
	padding: 2em;
	box-shadow: 6px 6px 3px #666;
	border-radius : 20px;
}
 
.unity_hero_subhead_buttons a:hover
{
	/* déplace le bouton au survol */
	position : relative;
	top : 2px;
	left : 2px;
	/****/
 
	background-color : #444;
	box-shadow: 4px 4px 3px #666;
}

[CamB22]

Bonjour Mathieu, et ceux qui me liront

Merci pour ta réponse ! ça fonctionne. Le bouton "Mon profil" a fière allure maintenant. Thanks !
Ta modification fonctionne également pour le survol. J'ai réussi à modifier la couleur de fond de widget
(Mais je n'ai pas encore réussi à changer la couleur du texte au survol...c'est tout blanc alors que j'ai mis mon color: #000 donc en noir)

J'ai encore 2 - 3 choses qui me gêne dans mon code (si tu as encore un tout petit peu de temps à m'accorder) :

1. je faisais appel à un fichier externe CSS initialement. Ça allait me chercher une iclass me permettant d'avoir une flèche à coté de "J' y vais".
Dans mon code actuel, ça s'affiche comme ça :
<i class="fas fa-long-arrow-alt-right learn_more_arrow">
et ça ne fonctionne plus. car j'ai supprimé mes liens pointant vers .css

il faudrait que je réussisse à intégrer une class "arrow" directement dans le code. as-tu une idée ?

2. Je ne réussis pas à rendre mon background opaque... j'ai mis opacity: 1 mais ça ne fonctionne pas.

3. je trouve que mes éléments "Bonjour, Bienvenue sur..." sont trop centrés dans ma page. As-tu une idée pour que le texte soit décalé à gauche de l'écran. (Fonctionnant en responsive également pour que ça puisse fonctionner sur mobile. D’ailleurs est ce que mon code actuel est responsive ou il y a des choses qui ne fonctionnerait potentiellement pas sur téléphone)

Le dernier point, mais tout ça, c'est dans mon monde des bisounours, pour parfaire le tout : J'ai l'impression que j'ai des bouts de code qui n'ont plus d'utilité. Il va falloir que je re-décortique tout. Ou as-tu une façon rapide de voir, ce qui n'est plus utilisé pour le rendre le plus optimal et maintenable ?

J’ai conscience que j’en demande beaucoup (c’est mon sujet du moment au taf, et j’y passe un temps fou &#128522

Je pense télécharger virtual studio code, ça sera surement plus pratique que bloc-notes, mais pour le moment, je n'ai pas les droits.
En attendant, merci pour ton/votre aide précieuse.

Camille

[CamB22]

Hello,

je fais un petit update sur le sujet.
après avoir passé des heures sur mon code, j'arrive bientôt au but. je pense que j'ai nettoyé, ma flèche clignote, plus de lien vers CSS, opacité ok.
J'ai un dernier point qui me rend un peu dingo, et je n'y arrive pas !!
adapter la taille de mon code pour qu'il soit responsive. Sur mon PC bureau c'est ok. Sur mon PC portable, c'est tronqué.

j'ai essayé en mettant des @medias & co mais je ne dois pas avoir la bonne logique, soit je fais pire que mieux, soit ça ne fonctionne pas...

auriez vous une idée ?
je reposte mon dernier code...

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
<div></div><div> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>My Career</title> 
<style> 
/*Maintenu par Camille BLANC, SIRH. */ 
html, body { 
  display: flex; 
  flex-direction: column; 
  min-height: 100vh; 
  margin: 0; 
  padding: 0; 
  overflow: hidden; 
} 
body { 
  background: url('/clientimg/groupemars/welcome/WP/welcomePage.jpg') no-repeat center center fixed; 
  background-size: cover; 
  position: relative; 
} 
body::before { 
  content: ""; 
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background-color: rgba(0, 0, 0, 0.3); 
  pointer-events: none; 
  z-index: -10; 
} 
.main-container { 
  margin: 0 auto; 
  max-width: 1260px; 
  width: 100%; 
  padding: 1rem; 
  flex: 1; 
  box-sizing: border-box; 
} 
.df-footer { 
  position: absolute; 
  bottom: 0; 
  left: 0; 
  right: 0; 
  padding: 1rem; 
  text-align: center; 
  background-color: rgba(255, 255, 255, 0.8); 
} 
/* Responsive : pour les écrans < 768px */ 
@media (max-width: 768px) { 
  .main-container { 
    padding: 0.5rem; 
  } 
  .df-footer { 
    font-size: 0.9rem; 
    padding: 0.5rem; 
  } 
} 
</style> 
<!-- START MARS_TOOLS SECTION --> 
<section class="mars_tools_outer"> 
    <div class="mars_tools"> 
        <style type="text/css"> 
.arrow { 
  display: inline-block; 
  margin-left: 8px; 
  transition: transform 0.4s ease-in-out; 
animation: none; 
} 
.mars_tools_tile:hover .arrow { 
  font-size: 2em; 
  animation: moveArrow 1s infinite ease-in-out; 
} 
@keyframes moveArrow { 
    0% { transform: translateX(0); } 
    50% { transform: translateX(5px); } 
    100% { transform: translateX(0); } 
} 
          .mars_tools_outer { 
          box-sizing: border-box; 
 -moz-box-sizing: border-box; 
 list-style: none; 
 border: none; 
 text-decoration: none; 
 font-weight: inherit; 
 border-collapse: collapse; 
 vertical-align: middle; 
 -webkit-font-smoothing: antialiased; 
 outline: 0; } 
                /*ras*/{ 
                padding-top: 80px; 
                padding-bottom: 80px;} 
            .mars_tools h1 /*mise en forme du Bonjour, ...*/{ 
             color: #ffffff; 
    font-size: 72px; 
    line-height: 60px; 
    font-weight: 900; 
    margin: 0 0 15px 0; 
            } 
            .mars_tools div.subheading { 
    color: #ffffff; 
    font-size: 18px; 
    font-weight: 400; 
    margin: 0 0 40px 0; 
    max-width: 600px; 
    line-height: 1.5; 
            } 
.mars_tools_subhead_buttons 
{ 
 /* ajoute de l'espace autour du bouton */ 
 padding : 1em 0 4em 0; 
} 
.mars_tools_subhead_buttons a 
{ 
 background-color : #FFFFFF; 
 padding: 2em; 
 box-shadow: 6px 6px 3px #517E91; 
 border-radius : 20px; 
} 
.mars_tools_subhead_buttons a:hover 
{ 
 /* déplace le bouton au survol */ 
 position : relative; 
 top : 2px; 
 left : 2px; 
 background-color : #FFFFFF; 
 box-shadow: 4px 4px 3px #517E91; 
} 
.mars_tools_subhead_buttons a:hover, 
.mars_tools_tile:hover .mars_tools_tile_link, 
.mars_tools_tile:hover .mars_tools_tile_title, 
.mars_tools_tile:hover .mars_tools_tile_text { 
    color: #000000 !important; 
} 
.mars_tools_no_tiles .mars_tools_no_tiles_subhead_buttons 
.mars-btn-secondary-white:hover { 
border-color: #2196f3); 
            } 
          .mars_tools .mars_tools_tile { 
            /**/ border-color: #ffffff; 
                border: 3px solid #fff; 
    transition: background-color .4s; 
    padding: 24px 24px 24px 24px; 
    border-radius: 6px; 
    margin-bottom: 15px; 
    transition: all .2s; 
    position: relative; 
    display: block; 
          } 
            .mars_tools .mars_tools_tile .mars_tools_tile_title { 
              /**/ color: #ffffff; 
    font-weight: 600; 
    font-size: 24px; 
    line-height: 32px; 
    transition: all 0.2s; 
            } 
            .mars_tools .mars_tools_tile .mars_tools_tile_text { 
              /**/ color: #ffffff; 
    color: #ffffff; 
    font-weight: 400; 
    font-size: 16px; 
    display: block; 
    position: absolute !important; 
    top: 110px; 
    line-height: 1.5; 
    transition: all 0.2s; 
    width: calc(100% - 48px); 
            } 
            .mars_tools .mars_tools_tile .mars_tools_tile_link { 
            /**/ color: #ffffff; 
            /**/ position: absolute; 
    position: absolute; 
    bottom: 20px; 
    font-size: 13px; 
    opacity: 1; 
    font-weight: 500; 
    color: #FFFFFF; 
            } 
           .mars_tools .mars_tools_tile:hover { 
 background-color : #FFFFFF; color : #000000; 
} 
.mars_tools_tile_link { 
            /**/ color: #ffffff; 
    text-decoration: none; 
    border-color: #ffffff; 
align-items: center; 
display: inline-flex; 
            } 
            .mars_tools .mars_tools_tile .mars_tools_tile_inner { 
    height: 200px; 
    padding: 0 0 15px 0; 
    /* position: relative; */ 
} 
    .content-row{ 
 display: flex; 
flex-wrap: wrap; 
max-height: 100vh 
} 
   .grid-wrapper { 
 display: grid; 
 grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; 
 gap: 30px; 
} 
.grid-col { 
} 
.grid-col.col-1 { 
 grid-column: span 1; 
 width: 100%; 
 flex: auto; 
} 
.grid-col.col-2 { 
 grid-column: span 2; 
 width: 100%; 
 flex: auto; 
} 
.grid-col.col-3 { 
 grid-column: span 3; 
 width: 100%; 
 flex: auto; 
} 
.grid-col.col-4 { 
 grid-column: span 4; 
 width: 100%; 
 flex: auto; 
} 
.grid-col.col-5 { 
 grid-column: span 5; 
 width: 100%; 
 flex: auto; 
} 
.grid-col.col-6 { 
 grid-column: span 6; 
 width: 100%; 
 flex: auto; 
} 
.grid-col.col-7 { 
 grid-column: span 7; 
 width: 100%; 
} 
.grid-col.col-8 { 
 grid-column: span 8; 
 width: 100%; 
 flex: auto; 
} 
.grid-col.col-9 { 
 grid-column: span 9; 
 width: 100%; 
 flex: auto; 
} 
.grid-col.col-10 { 
 grid-column: span 10; 
 width: 100%; 
 flex: auto; 
} 
.grid-col.col-11 { 
 grid-column: span 11; 
 width: 100%; 
 flex: auto; 
} 
.grid-col.col-12 { 
 grid-column: span 12; 
 width: 100%; 
 flex: auto; 
} 
        </style> 
        <div class="mars_BannerGradient"></div> 
<div class="main-container"> 
    <div class="content-row"> 
        <div class="grid-wrapper"> 
            <div class="grid-col col-11"> 
                <p class="subheading" style="text-align: left; margin-left: 80px;">&nbsp;</p> 
            </div> 
        </div> 
    </div> 
    <div class="content-row"> 
        <div class="grid-wrapper"> 
            <div class="grid-col col-12"> 
                <div class="mars_tools_subhead_buttons"> 
                    <a href="/phnx/driver.aspx?routename=Social/UniversalProfile/Bio" target="_top"><font size="4">Votre profil</font></a> 
                </div> 
            </div> 
        </div> 
    </div> 
    <div class="content-row"> 
        <div class="grid-wrapper"> 
            <div class="grid-col col-3 mars_tools_tile_container mars_tile_size_small"> 
                <a class="mars_tools_tile" href="/ui/lms-learner-home/home?tab_page_id=-200300006" target="_top"> 
                    <div class="mars_tools_tile_inner"> 
                        <div class="mars_tools_tile_title">Vos feedbacks</div> 
                        <div class="mars_tools_tile_text"> Consultez et gérez les demandes de feedbacks avec vos pairs.</div> 
                        <span class="mars_tools_tile_link">J'y vais <span class="arrow">➡</span></span> 
                    </div> 
                </a> 
            </div> 
            <div class="grid-col col-3 mars_tools_tile_container mars_tile_size_small"> 
                <a class="mars_tools_tile" href="/phnx/driver.aspx?routename=Social/UniversalProfile/Snapshot/Goals" target="_top"> 
                    <div class="mars_tools_tile_inner"> 
                        <div class="mars_tools_tile_title">Vos objectifs</div> 
                        <div class="mars_tools_tile_text"> Consultez et gérez vos objectifs de carrière.</div> 
                        <span class="mars_tools_tile_link">J'y vais <span class="arrow">➡</span></span> 
                    </div> 
                </a> 
            </div> 
            <div class="grid-col col-3 mars_tools_tile_container mars_tile_size_small"> 
                <a class="mars_tools_tile" href="https://groupemars.csod.com/ui/lms-learner-home/home" target="_top"> 
                    <div class="mars_tools_tile_inner"> 
                        <div class="mars_tools_tile_title">Vos entretiens</div> 
                        <div class="mars_tools_tile_text"> Consultez et gérez vos entretiens.</div> 
                        <span class="mars_tools_tile_link">J'y vais <span class="arrow">➡</span></span> 
                    </div> 
                </a> 
            </div> 
            <div class="grid-col col-3 mars_tools_tile_container mars_tile_size_small"> 
                <a class="mars_tools_tile" href="https://groupemars.csod.com/DeepLink/ProcessRedirect.aspx?module=performance" target="_top"> 
                    <div class="mars_tools_tile_inner"> 
                        <div class="mars_tools_tile_title">Votre espace formation</div> 
                        <div class="mars_tools_tile_text"> Accédez à votre catalogue de formation, votre espace dédié pour apprendre. </div> 
                        <span class="mars_tools_tile_link">J'y vais <span class="arrow">➡</span></span> 
                    </div> 
                </a> 
            </div> 
        </div> 
    </div> 
<div class="bottom-content"> 
    </div> 
</div></div></section> 
<!-- END MARS_TOOLS SECTION --></div>

Je jette une bouteille à la mer
Merci !!

[NoSmoking]

Bonjour,

j'ai essayé en mettant des @medias & co mais je ne dois pas avoir la bonne logique, soit je fais pire que mieux, soit ça ne fonctionne pas...

je te propose une approche simple sur base de layout Flexible, display: flex.

Sur bas du HTML suivant :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
  <section class="card_wrapper">
      <div class="card">
        <a class="card_link" href="" target="_top">
          <div class="card_content">
            <h2 class="card_title">Vos feedbacks</h2>
            <p class="card_text">Consultez et gérez les demandes de feedbacks avec vos pairs.</p>
            <span class="card_plus">J'y vais <span class="arrow">➡</span>
            </span>
          </div>
        </a>
      </div>
      <div class="card">
        <a class="card_link" href="" target="_top">
          <div class="card_content">
            <h2 class="card_title">Vos objectifs</h2>
            <p class="card_text">Consultez et gérez vos objectifs de carrière.</p>
            <span class="card_plus">J'y vais <span class="arrow">➡</span>
            </span>
          </div>
        </a>
      </div>
      <div class="card">
        <a class="card_link" href="" target="_top">
          <div class="card_content">
            <h2 class="card_title">Vos entretiens</h2>
            <p class="card_text">Consultez et gérez vos entretiens.</p>
            <span class="card_plus">J'y vais <span class="arrow">➡</span>
            </span>
          </div>
        </a>
      </div>
      <div class="card">
        <a class="card_link" href="" target="_top">
          <div class="card_content">
            <h2 class="card_title">Votre espace formation</h2>
            <p class="card_text"> Accédez à votre catalogue de formation, votre espace dédié pour apprendre. </p>
            <span class="card_plus">J'y vais <span class="arrow">➡</span>
            </span>
          </div>
        </a>
      </div>
  </section>

il suffit d'appliquer le CSS ci-dessous :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
.card_wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 2em 1em;
  justify-content: space-around;
  margin: auto;
  max-width: 78em;
}
.card {
  width: 15em;
  padding: 0 1em 1em;
  border: 3px solid transparent;
  border-radius: 5px;
  color: #069;
  box-shadow: 0 1em 3em rgba(0,0,0,.175);
  transition: .4s;
}
.card:hover {
  border-color: #E65100;
  color: #000;
  background-color: #FFFDE7;
}
.card .card_content {
  display: flex;
  flex-direction: column;
  gap: 1em;
  justify-content: center;
  height: 100%;
}
.card .card_title {
  margin: .5em 0;
  min-height: 2.5em;
}
.card .card_text {
  margin: 0;
}
.card .card_link {
  text-decoration: none;
  color: inherit;
}
.card .card_plus {
  font-size: .825em;
  margin-top: auto;
}

[CamB22]

Bonjour NoSmoking,

j'ai tenté plusieurs choses dont ce que tu as proposé mais je n'avais pas le résultat escompté.
J'ai encore un peu avancé, mais je n'ai pas encore l'assurance que ma page soit responsive (je suis sur que non d'ailleurs)
je reposte mon code ici.
Le media qui est inscrit dans mon fichier n'a pas l'air fonctionnel. le viewport au début n'a pas l'air de fonctionner (KO sur mobile)
Sur mes 3 écrans de PC, c'est plutôt pas mal, bien que j'aurai aimé une meilleure adaptation.

là je pense que c'est parce que mes briques sont hautes et petites et que c'est un hasard que ça ne déborde pas..

Merci pour ton aide très appréciée.
Camille.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
<div></div><div>
 
 
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Career</title>
 
 
<style>
/*Maintenu par Camille BLANC, SIRH. Le code a été développé en 10/2025. on retrouve dans ce code 3 grandes catégories : 
- LE HTML. partie qui formate la page, avec le paramétrage du body, le paramétrage du conteneur principal et le footer que j'ai caché (display:none)
- LE RESPONSIVE. Pour s'adapter sur les différents écrans (en sus de la notion de viewport_content visible en introduction pour la partie mobile device). 
- Le CSS. pour éviter de dupliquer trop de code dans les divs, on va créer des .div_Class auxquels on fera appel entre les balises <STYLE>
- Le STYLE. les 2 gros DIV_CLASS sont "avril_mycareer" et "avril_mycareer_outer" qui donne le cadre de la page en structurant les box (appelés TILE dans ce code) et la mise en page. 
Les boxs sont paramétrés en faisant appel à une GRID paramétré dans le code (.grid-col_...)
J'ai intégré un keyframe pour une animation sur la flêche arrow.
Les notions de "hover" aux différents endroits du code signifie "survol" : au passage de la souris. 
Le body est en overflow : hidden, ce qui signifie: pas de scroll. le z-index dans le body before est positionné à -10. 
J'ai mis une valeur au hasard, le tout étant que ça se situe en dessous de l'index du container où se trouve les wiggets (boite de réception / mes tâches) 
> pour que la couche "before" se trouve en dessous : gestion de l'opacité de l'image : modifiable dans le background-color : position 0.4)
des annotations sont ajoutés dans les codes CSS afin de comprendre les fonctionnalités du code appliqué. 
dans le STYLE principal, on va retrouver 4 sections : la section de mise en forme globale (main container, content row et grid), ensuite la mise en forme de l'entête "Bonjour..." puis ensuite les 4 tuiles. 
*/
 
 
html, body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
 
/* ✅ Ajout d'une couleur de fond immédiate */
body {
  background-color: #ffffff; /* couleur de secours */
  background-image: url('/clientimg/groupeavril/welcome/WP/welcomePage.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
  position: relative;
}
 
/* ✅ Couche sombre sans animation ni délai */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  pointer-events: none;
  z-index: -10;
  opacity: 1; /* affichée immédiatement */
}
 
 
.main-container {
  margin: 0 auto;
  width: 100%;
  flex: 1;
  box-sizing: border-box;
}
 
.df-footer {
display: none;
 
}
 
/* Responsive : pour les écrans < 768px */
@media (max-width: 768px) {
  .main-container {
    padding: 0.5rem;
  }
 
/* Responsive : pour les petits écrans de PC (769px à 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .main-container {
    padding: 0.75rem;
  }
 
 
/* Responsive : pour les écrans normales de PC (1080px) */
@media (min-width: 1080px) {
  .main-container {
    padding: 1 rem;
  }
 
</style>
 
 
<!-- START AVRIL_MYCAREER SECTION -->
<section class="avril_mycareer_outer">
    <div class="avril_mycareer">
 
 
        <style type="text/css">
 
 
 
.arrow {
  display: inline-block;
  margin-left: 8px;
  transition: transform 0.4s ease-in-out;
animation: none;
}
.avril_mycareer_tile:hover .arrow {
  font-size: 2em;
  animation: moveArrow 1s infinite ease-in-out;
}
 
 
          
          .avril_mycareer_outer {
          box-sizing: border-box;
 -moz-box-sizing: border-box;
 list-style: none;
 border: none;
 text-decoration: none;
 font-weight: inherit;
 border-collapse: collapse;
 vertical-align: middle;
 -webkit-font-smoothing: antialiased;
 outline: 0; }
 
            
 
            .avril_mycareer h1 /*mise en forme du Bonjour, ...*/{
             color: #ffffff;
    font-size: 72px;
    line-height: 60px;
    font-weight: 900;
    margin: 0 0 15px 0;
              
            }
 
            .avril_mycareer div.subheading {
    color: #ffffff;
    font-size: 18px;
    font-weight: 400;
    margin: 0 0 10px 0;
    max-width: 600px;
    line-height: 1;
            }
 
.avril_mycareer_subhead_buttons
{
 /* ajoute de l'espace autour du bouton */
 padding : 1em 0 4em 0; 
}
 
.avril_mycareer_subhead_buttons a
{
 background-color : #FFFFFF;
 padding: 2em;
 box-shadow: 6px 6px 3px #517E91;
 border-radius : 20px;
}
 
.avril_mycareer_subhead_buttons a:hover
{
 /* déplace le bouton au survol */
 position : relative;
 top : 2px;
 left : 2px;
 
 background-color : #FFFFFF;
 box-shadow: 4px 4px 3px #517E91;
}
 
.avril_mycareer_subhead_buttons a:hover,
.avril_mycareer_tile:hover .avril_mycareer_tile_link,
.avril_mycareer_tile:hover .avril_mycareer_tile_title,
.avril_mycareer_tile:hover .avril_mycareer_tile_text {
    color: #000000 !important;
}
 
 
 
.avril_mycareer_no_tiles .avril_mycareer_no_tiles_subhead_buttons 
 
.avril-btn-secondary-white:hover {
border-color: #2196f3);
            }
          
          .avril_mycareer .avril_mycareer_tile {
            /**/    border-color: #ffffff;
                border: 3px solid #fff;
    transition: background-color .4s;
    padding: 24px 24px 24px 24px;
    border-radius: 6px;
    margin-bottom: 15px;
    transition: all .2s;
    position: relative;
    display: block;
          }
 
            .avril_mycareer .avril_mycareer_tile .avril_mycareer_tile_title {
              /**/    color: #ffffff;
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    transition: all 0.2s;
            }
 
            .avril_mycareer .avril_mycareer_tile .avril_mycareer_tile_text { 
              /**/    color: #ffffff;
    color: #ffffff;
    font-weight: 400;
    font-size: 16px;
    display: block;
    position: absolute !important;
    top: 110px;
    line-height: 1.5;
    transition: all 0.2s;
    width: calc(100% - 48px);
            }
 
            .avril_mycareer .avril_mycareer_tile .avril_mycareer_tile_link {
            /**/    color: #ffffff;
            /**/    position: absolute;
    position: absolute;
    bottom: 20px;
    font-size: 13px;
    opacity: 1;
    font-weight: 500;
    color: #FFFFFF;
            }
          
           .avril_mycareer .avril_mycareer_tile:hover {
 background-color : #FFFFFF; color : #000000;
}
 
.avril_mycareer_tile_link {
            /**/    color: #ffffff;
    text-decoration: none;
    border-color: #ffffff;
align-items: center;
display: inline-flex;
 
            }
 
            .avril_mycareer .avril_mycareer_tile .avril_mycareer_tile_inner {
    height: 200px;
    padding: 0 0 15px 0;
    /* position: relative; */
}
 
              
 
    .content-row{
 display: flex;
flex-wrap: wrap;
max-height: 100vh;
}
 
   .grid-wrapper {
 display: grid;
 grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
 gap: 30px;
}
 
 
.grid-col.col-1 {
 grid-column: span 1;
 width: 100%;
 flex: auto;
}
 
.grid-col.col-2 {
 grid-column: span 2;
 width: 100%;
 flex: auto;
}
 
.grid-col.col-3 {
 grid-column: span 3;
 width: 100%;
 flex: auto;
}
 
.grid-col.col-4 {
 grid-column: span 4;
 width: 100%;
 flex: auto;
}
 
.grid-col.col-5 {
 grid-column: span 5;
 width: 100%;
 flex: auto;
}
 
.grid-col.col-6 {
 grid-column: span 6;
 width: 100%;
 flex: auto;
}
 
.grid-col.col-7 {
 grid-column: span 7;
 width: 100%;
}
 
.grid-col.col-8 {
 grid-column: span 8;
 width: 100%;
 flex: auto;
}
 
.grid-col.col-9 {
 grid-column: span 9;
 width: 100%;
 flex: auto;
}
 
 
.grid-col.col-10 {
 grid-column: span 10;
 width: 100%;
 flex: auto;
}
 
.grid-col.col-11 {
 grid-column: span 11;
 width: 100%;
 flex: auto;
}
 
.grid-col.col-12 {
 grid-column: span 12;
 width: 100%;
 flex: auto;
}
 
        </style>
 
 
 
<div class="main-container">
    <div class="content-row">
        <div class="grid-wrapper">
            <div class="grid-col col-11">
                <p class="subheading" style="text-align: left; margin-left: 80px;">&nbsp;</p><p class="subheading" style="text-align: left; margin-left: 80px;">&nbsp;</p><p class="subheading" style="text-align: left; margin-left: 80px;">&nbsp;</p>
            </div>
        </div>
    </div>
    <div class="content-row">
        <div class="grid-wrapper">
            <div class="grid-col col-12">
                <div class="avril_mycareer_subhead_buttons">
                    <a href="/phnx/driver.aspx?routename=Social/UniversalProfile/Bio" target="_top"><font size="4">Votre profil</font></a>
 
                </div>
 
            </div>
        </div>
    </div>
    <div class="content-row">
        <div class="grid-wrapper">
            <div class="grid-col col-3">
                <a class="avril_mycareer_tile" href="/ui/lms-learner-home/home?tab_page_id=-200300006" target="_top">
 
                    <div class="avril_mycareer_tile_inner">
                        <div class="avril_mycareer_tile_title">Vos feedbacks</div>
                        <div class="avril_mycareer_tile_text"> Consultez et gérez les demandes de feedbacks avec vos pairs.</div>
                        <span class="avril_mycareer_tile_link">J'y vais <span class="arrow">➡</span></span>
                    </div>
                </a>
            </div>
 
 
            <div class="grid-col col-3">
                <a class="avril_mycareer_tile" href="/phnx/driver.aspx?routename=Social/UniversalProfile/Snapshot/Goals" target="_top">
 
                    <div class="avril_mycareer_tile_inner">
                        <div class="avril_mycareer_tile_title">Vos objectifs</div>
                        <div class="avril_mycareer_tile_text"> Consultez et gérez vos objectifs de carrière.</div>
                        <span class="avril_mycareer_tile_link">J'y vais <span class="arrow">➡</span></span>
                    </div>
                </a>
            </div>
 
            <div class="grid-col col-3">
                <a class="avril_mycareer_tile" href="https://groupeavril.csod.com/ui/lms-learner-home/home" target="_top">
 
                    <div class="avril_mycareer_tile_inner">
                        <div class="avril_mycareer_tile_title">Vos entretiens</div>
                        <div class="avril_mycareer_tile_text"> Consultez et gérez vos entretiens.</div>
                        <span class="avril_mycareer_tile_link">J'y vais <span class="arrow">➡</span></span>
                    </div>
                </a>
            </div>
 
 
            <div class="grid-col col-3">
                <a class="avril_mycareer_tile" href="https://groupeavril.csod.com/DeepLink/ProcessRedirect.aspx?module=performance" target="_top">
 
                    <div class="avril_mycareer_tile_inner">
                        <div class="avril_mycareer_tile_title">Votre espace formation</div>
                        <div class="avril_mycareer_tile_text"> Accédez à votre catalogue de formation, votre espace dédié pour apprendre. </div>
                        <span class="avril_mycareer_tile_link">J'y vais <span class="arrow">➡</span></span>
                    </div>
                </a>
            </div>
        </div>
 
    </div>
<div class="bottom-content">
    </div>
 
 
</div></div></section>
<!-- END AVRIL_MYCAREER SECTION --></div>

[NoSmoking]

Navré, mais dans ce que tu montres je ne vois aucune prise en compte de ce que je t'ai suggérè !

[gabi7756]

Pour tester le responsive :

Click droit -> Inspecter ->CTR+SHIFT+M ( Emulateur de device)

Et ensuite soit tu choisis à la main le device soit tu met en responsive et tu modifie à la main la largeur ou hauteur pour tester.