/* Responsive Design */

2 @media (max-width: 768px) {

3 .container {
4 width: 90%;
5 }
6 }
7
8 /* Utilisation de media queries */
9 @media (min-width: 1200px) {
10 .container {
11 width: 1170px;
12 }
13 }
14
15 /* Box Sizing */
16 html {
17 box-sizing: border-box;
18 }
19
20 *, *:before, *:after {
21 box-sizing: inherit;
22 }
23
24 /* Flexbox */
25 .flex-container {
26 display: flex;
27 justify-content: space-around;
28 }
29
30 /* Grid */
31 .grid-container {
32 display: grid;
33 grid-template-columns: repeat(3, 1fr);
34 grid-gap: 10px;
35 }
36
37 /* Remplacement de polices */
38 @font-face {
39 font-family: 'Awesome Font';
40 src: url('awesome-font.woff2') format('woff2'),
41 url('awesome-font.woff') format('woff');
42 }
43
44 body {
45 font-family: 'Awesome Font', sans-serif;
46 }
47
48 /* Règle !important */
49 .red-text {
50 color: red !important;
51 }
52
53 /* Animations CSS */
54 @keyframes fadeIn {
55 from { opacity: 0; }
56 to { opacity: 1; }
57 }
58
59 .fadeIn {
60 animation: fadeIn 1s ease-in-out;
61 }
62
63 /* Pseudo-éléments CSS */
64 ::before {
65 content: "Pseudo-élément avant";
66 }
67
68 ::after {
69 content: "Pseudo-élément après";
70 }
71
72 /* Pseudo-classes CSS */
73 button:hover {
74 background-color: green;
75 }
76
77 button:active {
78 background-color: blue;
79 }
80
81 /* Opacité et transparence */
82 .transparent-bg {
83 background-color: rgba(255, 255, 255, 0.5);
84 }