grille et media query

**mimigo78** · 01/06/2020, 16h34

bonjour;
j'essaye de modifier ma grille en media query 740x1024 mais ça ne fonctionne pas.
ça fonctionne en media query 480.
voila mon 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
	<link href="reset.css" rel="stylesheet">
	<link href="styles.css" rel="stylesheet">
	<title>RESPONSIVE</title>
</head>
<body>
<div class="wrapper">
	<header id="top" class="main-header">
			<div class="header-box">
					<a href="#main-nav" class="open">menu</a>
					<div id="button-menu"><a href="#main-nav"><span class="burg"></span></div></a>
			</div>
			<nav class="menu-plein-ecran" id="main-nav">
				<a href="#main-nav" class="fermer">fermer</a>
				<div id="buttom-menu-close" class="close">
						<div id="button-menu"><a href="#top"><span class="burg"></span></div></a>
				</div>
					<div class="content-menu">
						<dl class="main-menu">
							<dd class="item"><a href="#">Projets</a></dd>
							<dd class="item"><a href="#">Pricing</a></dd>
							<dd class="item"><a href="#">Tower</a></dd>
							<dd class="item"><a href="#">Contacts</a></dd>
						</dl>
				</div>
			</nav>
			<div class="main-texte">
				<h1>d-angle</h1>
				<h2>a responsive answer</h2>
		</div>
</header>
 
	<main class="main">
	<!-- Contenu 1 -->
		<section class="flex-container m-self-center">
			<article class="article m-col-6 s-col-12 x-col-12 clearfix flex-container">
				<figure class="article-figure s-top m-col-12">
					<img src="img/img-01.jpg">
				</figure>
				<h2>Aliquam condimentum</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget turpis rutrum lectus interdum cursus sed sit amet arcu. In at nibh molestie, blandit purus at, gravida augue. Fusce dapibus leo ac felis sagittis pretium. Nulla nulla felis, consequat eu lobortis in, mattis non ipsum. Fusce nunc libero, commodo vel neque ac, imperdiet mattis dui. Quisque nec mauris in lorem iaculis tincidunt nec at massa. Donec nec lectus tincidunt, semper tortor ac, gravida ipsum. Aliquam elementum libero quam. Vestibulum hendrerit sed est at vehicula. In ut odio lacus. Mauris ornare magna a velit eleifend, at tincidunt urna vehicula. Donec mattis purus vel faucibus mollis. Sed non leo felis.
				<a title="Lire la suite de l'article" href="#" class="lien-article">Lire la suite</a></p>
			</article>
 
			<article class="article m-col-6 s-col-12 x-col-12 clearfix flex-container">
				<figure class="article-figure s-top m-col-12">
					<img src="img/img-03.jpg">
				</figure>
				<h2>Sed nec lacus id enim porta</h2>
					<p>Nulla facilisi. Nam fringilla tempor nunc vitae vestibulum. Sed eu lacinia lectus. Aenean vulputate volutpat massa ut rhoncus. Suspendisse et leo metus. Praesent vestibulum velit at lacus accumsan condimentum. Mauris elementum nibh ultrices porttitor euismod. Donec ullamcorper, mauris vel volutpat pharetra, ex felis feugiat diam, vel egestas velit felis vitae ligula. Nunc pharetra, enim sit amet tempor volutpat, elit mi ultricies ante, a porttitor tortor velit id dolor.
					<a title="Lire la suite de l'article" href="#" class="lien-article">Lire la suite</a></p>
				</article>
 
			<article class="article m-col-4 s-col-12 x-col-12 clearfix flex-container">
				<figure class="article-figure s-top m-col-12">
					<img src="img/img-04.jpg">
				</figure>
				<h2>Phasellus non leo porta</h2>
				<p>Praesent dapibus feugiat tristique. Sed vehicula dui vel ornare vehicula. Aliquam accumsan risus eu risus ornare, a auctor dolor ultrices. Praesent consectetur turpis eu tellus tristique tincidunt. Aliquam eget massa vehicula ipsum facilisis maximus. Etiam blandit dictum scelerisque. Nam mauris massa, rutrum nec eros ut, accumsan gravida velit. Integer dapibus porta lectus quis imperdiet. Cras tristique bibendum ex at laoreet. Nam sagittis diam in fringilla pulvinar. Suspendisse vehicula aliquet elementum. Mauris lacus sem, rutrum vitae orci sed, sagittis faucibus libero. Aenean vitae quam et dolor lacinia tincidunt. Sed sed vestibulum risus. Mauris scelerisque velit risus, accumsan finibus sapien viverra sed. Quisque feugiat non ante id faucibus.<a title="Lire la suite de l'article" href="#" class="lien-article">Lire la suite</a></p>
			</article>
			<article class="article m-col-4 x-col-12 clearfix flex-container">
				<figure class="article-figure s-top m-col-12">
					<img src="img/img-02.jpg">
				</figure>
				<h2>Proin nibh lacus</h2>
				<p>Aenean sed dapibus purus. Vivamus maximus, lorem eu fermentum bibendum, velit erat dictum odio, ac imperdiet nulla lectus quis felis. Mauris porta sapien in nisl venenatis vehicula. Sed viverra lacus quis velit convallis tristique. Fusce faucibus egestas ex quis tincidunt. Phasellus ultricies dolor libero, finibus blandit mi suscipit at. Ut sed maximus odio. Donec cursus purus non quam maximus interdum. Donec in purus id diam imperdiet imperdiet. Praesent vehicula leo in nisl molestie laoreet. Nullam et consequat eros. Phasellus convallis justo id odio viverra, et volutpat enim feugiat. Nam sapien felis, rhoncus a malesuada in, varius ultrices lectus. Aenean non sem ullamcorper, consectetur dolor rutrum, consequat velit. Etiam a lectus eget odio commodo efficitur non et velit. Cras fringilla odio quis erat aliquam consequat.<a title="Lire la suite de l'article" href="#" class="lien-article">Lire la suite</a></p>
			</article>
			<article class="article m-col-4 x-col-12 flex-container">
				<figure class="article-figure s-top m-col-12">
					<img src="img/img-05.jpg">
				</figure>
			 <h2>Phasellus non leo porta</h2>
					<p>Donec facilisis ullamcorper ante, eget tincidunt arcu scelerisque ac. Aenean et maximus neque. Phasellus ullamcorper vel nunc id placerat. Quisque a maximus tellus. Phasellus justo justo, tristique ut lacus at, consectetur pharetra magna. Quisque porttitor volutpat odio, dapibus interdum justo semper elementum. Sed non turpis eget quam efficitur venenatis ac sed tortor. Nullam lorem justo, vulputate molestie lectus in, facilisis ullamcorper nisi.<a title="Lire la suite de l'article" href="#" class="lien-article">Lire la suite</a></p>
			 </article>
 
			<article class="article m-col-3 x-col-12 clearfix flex-container">
				<figure class="article-figure s-top m-col-12">
					<img src="img/img-06.jpg">
				</figure>
				<h2 class="h2">Phaselluta</h2>
				<p>Sed nec ex at nibh egestas suscipit. Etiam laoreet leo erat. Suspendisse potenti. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam interdum neque suscipit elit efficitur, vel facilisis purus faucibus. Ut iaculis libero non venenatis pulvinar. Phasellus sed commodo metus, lacinia efficitur nibh. Integer pretium sem ut nisi dictum, non gravida lorem aliquam. Suspendisse viverra nunc sit amet dui porttitor, non rhoncus nisl luctus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin velit lorem, placerat at dui maximus, mollis faucibus ante. Morbi erat augue, volutpat non tellus quis, dictum hendrerit enim. Ut vel cursus justo. Pellentesque vitae scelerisque sem, at volutpat felis. Phasellus pulvinar ante ac ligula aliquam, eget ultrices massa scelerisque. Morbi tempor tempor diam, eget malesuada justo congue id.<a title="Lire la suite de l'article" href="#" class="lien-article">Lire la suite</a></p>
			</article>
			<article class="article m-col-3 x-col-12 clearfix flex-container">
				<figure class="article-figure s-top m-col-12">
					<img src="img/img-07.jpg">
				</figure>
				<h2 class="h2">Prus</h2>
				<p>Vivamus ullamcorper leo sodales libero hendrerit, ac pulvinar diam interdum. Etiam felis neque, porttitor sit amet malesuada vitae, vehicula quis augue. Aenean vulputate diam urna, id suscipit enim lobortis ac. Fusce eu lorem condimentum, sagittis magna sed, laoreet quam. Sed ac vestibulum dolor, vitae mollis ex. Phasellus laoreet arcu vel metus malesuada molestie id id lectus. Cras lectus neque, volutpat ut elit sed, pretium varius felis. Morbi porta nunc id feugiat faucibus. Donec pharetra turpis ut velit cursus, in elementum elit suscipit. Vestibulum vitae vulputate magna, sit amet eleifend ligula. Vivamus lacus nibh, vulputate eget mi vel, pulvinar malesuada lorem. Vivamus scelerisque libero sit amet tincidunt sollicitudin. Etiam sodales metus sit amet fringilla feugiat. Suspendisse id nibh eget mi faucibus mattis. Maecenas laoreet blandit nisl nec imperdiet. Curabitur risus neque, lacinia non suscipit vitae, faucibus ut dolor.<a title="Lire la suite de l'article" href="#" class="lien-article">Lire la suite</a></p>
			</article>
			<article class="article m-col-3 x-col-12 clearfix flex-container">
				<figure class="article-figure s-top m-col-12">
					<img src="img/img-08.jpg">
				</figure>
				<h2 class="h2">Phasorta</h2>
				<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus porttitor orci non ex scelerisque fermentum. Mauris eleifend suscipit magna, ut bibendum tellus fringilla vel. Nunc feugiat, arcu vitae sollicitudin dapibus, lacus felis malesuada tellus, bibendum luctus ante arcu ac justo. Morbi massa elit, rutrum et efficitur ut, viverra sed eros. Aenean laoreet nulla et justo vestibulum, id auctor mi tincidunt. Donec non gravida sem. Sed vel velit et erat malesuada tristique ut suscipit ex. Curabitur ut laoreet arcu. In sed mattis arcu.<a title="Lire la suite de l'article" href="#" class="lien-article">Lire la suite</a></p>
			</article>
			<article class="article m-col-3 x-col-12 clearfix flex-container">
				<figure class="article-figure s-top m-col-12">
					<img src="img/img-09.jpg">
				</figure>
				<h2 class="h2">Porta</h2>
				<p>Sed vulputate lorem eget purus porttitor, quis condimentum felis semper. Fusce fermentum non nisl quis sollicitudin. Vestibulum ullamcorper purus ipsum, quis semper nunc eleifend nec. Pellentesque porta tortor a orci lobortis, vel laoreet sapien rutrum. Fusce ullamcorper lorem fringilla massa congue, et consectetur eros dictum. Aliquam pellentesque arcu vitae enim auctor, sit amet scelerisque nulla faucibus. Quisque placerat porta odio, non blandit nisi imperdiet a. Phasellus dictum est non nibh imperdiet, at bibendum sem efficitur.<a title="Lire la suite de l'article" href="#" class="lien-article">Lire la suite</a></p>
			</article>
		</section>
</main>
		<!-- formulaire -->
		<section id="formulaire-responsive" class="clearfix">
				<div class="form flex-container m-self-center">
				<div class="contact"><h4>Contactez-nous</h4></div>
			  <div class="demi-colonne p-col-3"><label for="nom">Nom*:</label></br><input type="nom" name="nom" size="52" maxlength="60" value="Entrez votre nom" id="nom" /></div>
				<div class="demi-colonne p-col-3"><label for="telephone">Telephone:</label></br><input type="telephone" name="telephone" size="52" maxlength="40" value="Indiquez votre numero de telephone" id="telephone" /></div>
				<div class="colonne p-col-3"><label for="Email">Email:</label></br><input type="email" name="email" size="52" maxlength="40" value="Votre email" id="email" /></div>
				<div class="colonne p-col-3"><label for="message">Message:</label></br><textarea class="input" name="message" value="Laissez-nous un message" id="message" rows="8" cols="50"></textarea><br /></div>
				<div class=""><button class="submit" type="submit">Envoyer</button><div>
				<button class="submit2" type="submit">Reset</button>
			</div>
		</section>
		<!-- fin formulaire -->
	<footer>
		<div class="list">
		<ul class="flex-container m-self-start">
			<li><a href="">Responsive Design</a></li>
			<li><a href="">Smartphones</a></li>
			<li><a href="">Grilles fluides</a></li>
			<li><a href="">Media querie portrait </a></li>
			<li><a href="">Typographie Responsive</a></li>
			<li><a href="">Principes</a></li>
			<li><a href="">Ecran</a></li>
			<li><a href="">Medias fluides</a></li>
			<li><a href="">Landscape</a></li>
			<li><a href="">Pourcentages</a></li>
			<li><a href="">Atelier design</a></li>
			<li><a href="">Point de rupture </a></li>
			<li><a href="">Medias quieries</a></li>
			<li><a href="">Un formulaire responsive</a></li>
		</ul>
	</footer>
</div>
 
</body>
</html>

Code :

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
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
@charset "UTF-8";
/* CSS Document */
/*mise en forme générale de la page*/
* {
    box-sizing:border-box;
}
 
body {
font-size: 1rem;
line-height: 1.1875rem;
margin:0;
font-family: Ubuntu, "times new roman", times, roman, serif;
 
}
h1, .h1 {
 
 
  font-size: 2.375rem;
  line-height: 2.375rem;
  margin-top: 1.1875rem;
  margin-bottom: 2.375rem;
}
h2 {
  text-align: left;
  font-size: 24px;
  line-height: 1rem;
  margin-top: 2rem;
  margin-left: 0rem;
  margin-bottom: 1rem;
  align-self: start;
}
h3, .h3 {
  text-align: left;
  font-size: 1.3125rem;
  line-height: 1.25rem;
  margin-top: 1.1875rem;
  margin-bottom: 1rem;
}
h4 {
color:#669;
text-align: left;
font-size: 1.3125rem;
font-weight: bold;
line-height: 1.1875rem;
margin-top: 1.1875rem;
margin-bottom: 0rem;
}
p, ul, ol, pre, table, blockquote, article  {
  text-align: left;
  font-size: 16px;
  line-height: 1.25rem;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  align-self: start;
}
img {
max-width:100%;
 
}
a {
	text-decoration: none;
	color:#333;
}
.wrapper {
    max-width: 1628px;
    margin: 0 auto;
 }
 
/*fin mise en forme générale*/
/*****************header *********/
.main-header {
	max-width: 100%;
  height:700px;
	padding: 0.2em 3em 0.2em 1em;
  background-image: url("img/bkg.jpg");
  background-size: cover;
}
.header-box {
	width: 60%;
	margin: 0 auto;
  color:red;
  opacity:0.2;
  transition: opacity 4s;
}
.header-box:hover{
  opacity:1;
  transition: opacity 2s;
}
/*************fin header ******************/
/*<<<<<<<<<<< début bouton d'ouverture du menu*************/
.open  {
	position: absolute;
	top: 1vh;
	right: 0.3vw;
	color: #000;
	font-size: 1.2em;
	text-decoration: none;
	padding: 0.2em 3em 0.2em 1em;
}
.burg {
	background-image: url('img/burg.png');
	background-position: top;
	top: 2vh;
	right: 1vw;
	width:30px;
	height:30px;
	position:absolute;
}
.fermer  {
	position: absolute;
	top: 2.5vh;
	right: 0.1vw;
	color: #000;
	font-size: 1.2em;
	text-decoration: none;
	padding: 0.2em 3em 0.2em 0.5em;
}
 
/********** menu********************/
.menu-plein-ecran {
	background-color:hsl(163, 27.7%, 32%);
	position: fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
	display: none;
	padding: 4em  2em 1em 2em;
}
.menu-plein-ecran .burg {
	background-position: bottom;
}
.espace {
	margin-right: 8em;
}
.content-menu {
	display: block;
	vertical-align: middle;
	padding: 1em;
}
.menu-plein-ecran:target {
	display: block;
}
.menu-plein-ecran .close {
     position: absolute;
     top:0;
     right: 0;
}
.main-menu {
	display: block;
	padding: 2em;
	margin:1em;
}
 
.item > a, .item-title {
	color:#fff;
}
.item-title {
	font-size: 3em;
	font-style: italic;
}
.item a {
	padding: 0.2em;
	font-size: 2em;
	display:block;
	text-decoration: none;
}
.item  a:hover {
	color:#f44336;
	}
 
.main-texte {
	line-height:2em;
	margin-top: 19em;
	margin-left: 1em;
	}
 
ul, li {
list-style:none;
text-align:left;
}
 
p {
    font-size: 14px;
}
/*debut article*/
.main {
margin: 0 auto;
padding-top: 2rem;
padding:0;
max-width:1200px;
}
.article {
    margin: 0 auto;
    align-items: center;
    margin-bottom:2.375rem;
	  margin-left: 0.5em;
	  margin-right: 0.5em;
}
.article-figure {
min-width:120px;
}
 
.lien-article{
color:blue;
padding:.5em 1em;
text-decoration: none;
margin-bottom: 1.1875rem;
}
 
.lien-article:hover {
color:#f00;
}
.article {
        margin: 0 auto;
        max-width:100%;
        margin-bottom:2.375rem;
    	  margin-left: 0.5em;
    	  margin-right: 0.5em;
    }
.article-figure {
    width: 100%;
    }
.m-self-center {
align-self: center;
}
 
/*grille*/
.flex-container {
        display: flex;
        flex-flow: row wrap;
}
.m-col-1 {
	max-width: calc((100% / 12) - 1%);
  margin-left: 0.5%;
  margin-right: 0.5%;
	}
	.m-col-2 {
	max-width: calc(((100% / 12) * 2) - 1%);
  margin-left: 0.5%;
  margin-right: 0.5%;
	}
	.m-col-3 {
	max-width: calc(((100% / 12) * 3) - 2%);
    margin-left: 1%;
    margin-right: 1%;
	}
	.m-col-4 {
	max-width: calc(((100% / 12) * 4) - 2%);
    margin-left: 1%;
    margin-right: 1%;
	}
	.m-col-5 {
	max-width: calc(((100% / 12) * 5) - 1%);
    margin-left: 0.5%;
    margin-right: 0.5%;
	}
	.m-col-6 {
	max-width: calc(((100% / 12) * 6) - 2%);
    margin-left: 1%;
    margin-right: 1%;
	}
  .m-col-7 {
max-width: calc(((100% / 12) * 8) - 1%);
  margin-left: 0.5%;
  margin-right: 0.5%;
}
		.m-col-8 {
	max-width: calc(((100% / 12) * 8) - 1%);
    margin-left: 0.5%;
    margin-right: 0.5%;
	}
		.m-col-9 {
	max-width: calc(((100% / 12) * 9) - 1%);
    margin-left: 0.5%;
    margin-right: 0.5%;
	}
  .m-col-10 {
max-width: calc(((100% / 12) * 9) - 1%);
  margin-left: 0.5%;
  margin-right: 0.5%;
}
		.m-col-11 {
	max-width: calc(((100% / 12) * 11) - 1%);
    margin-left: 0.5%;
    margin-right: 0.5%;
	}
		.m-col-12 {
	max-width: calc(((100% / 12) * 12) - 1%);
    margin-left: 0.5%;
    margin-right: 0.5%;
	}
/*fin article*/
#formulaire-responsive {
	width:100%; /*-- à modifier en fonction de la largeur désirée --*/;
	margin:0 auto;
  height: 495px;
  padding:1rem;
  background-image: url(img/bkg-form.jpg);
  background-size: 100%;
}
.form {
	max-width:900px;
  max-height:100%;
  border-radius: 5px;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
  margin: 0 auto;
  justify-content:center;
  background-color: rgba(250, 250, 250, 0.5);
}
.contact{
  width:900px;
  padding-left: 2%;
  padding-bottom: 2%;
  line-height: 1rem;
  text-align: left;
}
.center{
  margin:0 auto;
  width:1600px; /*-- à modifier en fonction de la largeur désirée --*/;
  margin:0 auto;
}
.demi-colonne, .colonne{
  color:#669;
  font-weight: bold;
	width:50%;
  padding-left: 2%;
  padding-bottom: 4%;
	-webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box
}
.demi-colonne, .colonne{
display:inline-block;
}
.clearfix:after {
	content: "";
	display: table;
	clear: both;
}
input, textarea{
 padding:10px;
 margin-top: 10px;
 border:1px solid black;
 border-radius:5px;
 width:95%;
 box-shadow:1px 1px 2px #C0C0C0 inset;
 }
.submit{
	    color: white;
      font-family: 'Noto Sans', sans-serif;
      border-color: #669;
      font-size: 16px;
  	  line-height: 30px;
      height: 40px;
      font-weight: 600;
      background: linear-gradient(to bottom, #b9bbde ,#669);
      border-radius: 5px;
          -moz-border-radius: 40px;
          -webkit-border-radius: 40px;
       border-width: 2px;
       padding-left: 50px;
       padding-right: 50px;
      margin-bottom: 10%;
}
.submit2{
	    color: white;
      font-family: 'Noto Sans', sans-serif;
      border-color: #666;
      font-size: 16px;
  	  line-height: 30px;
      height: 40px;
      font-weight: 600;
      background: linear-gradient(to bottom, grey,white);
      border-radius: 5px;
          -moz-border-radius: 40px;
          -webkit-border-radius: 40px;
       border-width: 2px;
       padding-left: 60px;
       padding-right: 60px;
       margin-bottom: 20px;
}
.submit:hover{
	background: linear-gradient(to bottom, #666,#444);
  border-color: #666;
      color: #ffffff;
  }
.submit2:hover{
  	background: linear-gradient(to bottom, #666,#444);
    border-color: #666;
        color: #ffffff;
    }
 
footer {
  	max-width: 1628px;
    max-height:700px;
    background:#ff7fcf;
    background-size: cover;
    color: #721717;
}
.list {
  max-width: 1200px;
  margin: 0 auto;
  padding:1.1875rem;
}
 
.list ul {
  width:100%;
  margin-top:0.2em;
}
.list li {
  margin-bottom: 0.2em;
  min-width: 33%;
}
.list a {
padding-left: 1em;
border-left:1em solid #ededed;
color:#ededed;
text-decoration:none;
}
.list a:hover {
border-left:1em solid rgba(120,120,120,0.8);
background:rgba(120,120,120,0.8);
color:#fff;
 }
}
@media screen and (min-width:481px) and (max-width:1024px) {
 
  /*grille*/
  .flex-container {
          display: flex;
          flex-flow: column wrap;
  }
  .s-col-12 {
	max-width: calc(((100% / 12) * 1) - 2%);
    margin-left: 1%;
    margin-right: 1%;
	}
}
@media screen and (max-width: 480px){
  .main-header {
    background-size: 210vw;
    height:480px;
    background-position: top;
    background-repeat: no-repeat;
      }
.main-texte {
      	margin-top: 16em;
      	}
  .article {
          margin: 0 auto;
          max-width:100%;
          margin-bottom:2.375rem;
      	  margin-left: 0.5em;
      	  margin-right: 0.5em;
      }
  .article-figure {
      width: 100%;
      }
  #formulaire-responsive {
  	width:100%; /*-- à modifier en fonction de la largeur désirée --*/;
    background-size: 300vw;
    height: 190vw;
    background-position: top;
    background-repeat: no-repeat;
  }
.submit, .submit2{
   margin: 5vw 20vw 2vw 20vw;
   }
.form {
    height: 185vw;
    padding:1%;
  }
.contact{
    padding-left: 3%;
    padding-bottom: 8%;
    line-height: 1rem;
    text-align: left;
  }
  input, textarea{
   width:84vw;
   }
 
  .list ul {
     margin-top:1vw;
     margin-right:2vw;
     flex-direction:column;
   }
  /*grille*/
 
  .flex-container {
          display: flex;
          flex-flow: column wrap;
  }
 
    .x-col-12 {
  max-width: calc(((100% / 12) * 12) - 1%);
    margin-left: 0.5%;
    margin-right: 0.5%;
  }
  .p-col-3 {
max-width: calc(((100% / 12) * 12) - 3%);
  margin-left: 1%;
  margin-right: 2%;
}
}