:root { --bg: #f5f5f7; --header: #96c13e; --article-bg: #f5f5f7; --onPrimary: #000000; --onBackground: #000000; --articleBorder: #f5f5f7; --articleBorderWidth: 0px; --onHeader: #000000; } :root[data-theme="dark"] { --bg: #1e293b; --header: #2F405D; --article-bg: #1e293b; --onPrimary: #ffffff; --onBackground: #ffffff; --articleBorder: #334155; --articleBorderWidth: 2px; --onHeader: #ffffff; } html { background-color: var(--bg); height: 100%; } body { /* les navigateurs ajoutent par défaut une marge de 8px sur le */ margin: 0; min-height: 100vh; /* Always minimum the size of the view port height */ display: flex; flex-direction: column; } header { padding-top: 24px; padding-bottom: 24px; background-color: var(--header); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); } .header-text { color: var(--onHeader); } .header-title { margin: 16px 0 0; } .header-subtitle { margin: 0 0 16px; } #header-main { display: flex; flex-direction: row; justify-content: center; } #header-main-content { display: flex; flex-direction: column; justify-content: center; align-items: center; } .rounded-content { border-radius: 50%; } main { flex: 1; display: flex; flex-direction: column; align-items: center; margin-top: 24px; margin-bottom: 24px; } main h2,h1 { color: var(--onBackground); } main p { color: var(--onBackground); } section { width: 80%; } .section-title { margin: 30px } .article-container { display: grid; grid-template-columns: 100%; gap: 1rem; justify-content: center; } .article-container-application { display: grid; grid-template-columns: 100%; gap: 1rem; justify-content: center; } .article-content { padding: 20px; } article { position: relative; border: var(--articleBorderWidth) solid var(--articleBorder); border-radius: 10px; /* ombre initiale */ box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); /* animation douce de l’ombre et de la translation */ transition: box-shadow 200ms ease, transform 200ms ease; background-color: var(--article-bg); } article p { color: var(--onPrimary); } article h3 { margin: 0px; color: var(--onPrimary); } article img { width: 100%; border-top-left-radius: 10px; border-top-right-radius: 10px; } article:hover { box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.1); } footer { text-align: center; padding: 1rem; font-size: 0.7rem; color: var(--onPrimary); } #external-link-nav { display: flex; gap: 1rem; list-style: none; /* delete list indicator */ margin: 0; padding: 0; justify-content: center; align-items: center; } #main-nav { position: absolute; top: 16px; right: 16px; display: flex; flex-direction: row; justify-content: center; align-items: center; column-gap: 16px; } #main-nav a { text-decoration: none; } .article-link { position: absolute; inset: 0; z-index: 1; /* rendre le focus visible (sans gêner la mise en page) */ outline: none; } /* article :is(button, a:not(.article-link)) Si on voulait faire que les 2 élémenst soient affectés, on utilise "is" pour éviter de dupliquer la déclaration de la règle */ article a:not(.article-link) { position: relative; /* Les liens internes sont affichés par dessus */ z-index: 2; } .icon-btn { width: 40px; height: 40px; border: none; padding: 10px; cursor: pointer; background-color: transparent; } #theme-icon-dark {display: inline;} #theme-icon-light {display: none;} [data-theme="dark"] #theme-icon-dark { display: none; } [data-theme="dark"] #theme-icon-light { display: inline; } body { font-family: Roboto, system-ui, sans-serif; } h1 { font-weight: 700; } h2 { font-weight: 600; } h3 { font-weight: 500; } p { font-weight: 300; } small{ font-weight: 200; } @media (min-width: 600px) { .article-container-application { grid-template-columns: 50% 50%; } } @media (min-width: 800px) { section { width: 85%; } .article-container { grid-template-columns: 48% 48%; } .article-container-application { grid-template-columns: 32% 32% 32%; } } @media (min-width: 1200px) { section { width: 60%; } .article-container { grid-template-columns: 500px 500px; } .article-container-application { grid-template-columns: 323px 323px 323px; } }