@font-face{font-family:Newsreader;src:url(newsreader-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Newsreader;src:url(newsreader-latin-400-italic.woff2) format("woff2");font-style:italic;font-display:swap}
:root{--fond:#16120f;--carte:#211b17;--ligne:#3a302a;--texte:#f3eee6;--doux:#bdb2a3;--or:#e8c98a}
*{box-sizing:border-box}
body{margin:0;background:var(--fond);color:var(--texte);font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:var(--or)}
main,header,footer{max-width:880px;margin:0 auto;padding:0 20px}
header{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;padding-top:28px;padding-bottom:20px;border-bottom:1px solid var(--ligne)}
.marque{font-family:Newsreader,Georgia,serif;font-size:28px;letter-spacing:.12em;color:var(--texte);text-decoration:none}
nav a{margin-left:18px;font-size:14px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--doux)}
h1{font-family:Newsreader,Georgia,serif;font-weight:500;font-size:46px;line-height:1.1;margin:56px 0 18px}
h1 em{color:var(--or)}
h2{font-family:Newsreader,Georgia,serif;font-weight:500;font-size:30px;margin:52px 0 16px}
.intro{color:var(--doux);font-size:19px;max-width:640px}
.apps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.app{background:var(--carte);border:1px solid var(--ligne);border-radius:16px;padding:22px}
.app h3{font-family:Newsreader,Georgia,serif;font-weight:500;font-size:24px;margin:10px 0 6px}
.app p{color:var(--doux);margin:0 0 12px}
.app img{width:52px;height:52px;border-radius:12px}
.pastille{display:inline-block;width:52px;height:52px;border-radius:12px;background:#2f6f62;color:#fff;font:600 24px/52px sans-serif;text-align:center}
dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;color:var(--doux)}
dt{color:var(--texte)}
footer{margin-top:64px;padding-top:20px;padding-bottom:40px;border-top:1px solid var(--ligne);color:var(--doux);font-size:14px}
@media (max-width:640px){h1{font-size:36px}nav{width:100%}nav a{margin:0 14px 0 0;font-size:12px}}