:root {
  --fond: #FAF8F3; --texte: #24302B; --vert: #0E5A43; --entete: #0B4A37;
  --menthe: #E1F5EE; --menthe-texte: #0F6E56; --dore: #654B10; --carte: #fff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #121A17; --texte: #E8EDEA; --vert: #5DCAA5; --entete: #0B4A37;
    --menthe: #14392E; --menthe-texte: #9FE1CB; --dore: #E2C98A; --carte: #1A2420;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fond); color: var(--texte);
       font: 18px/1.6 system-ui, sans-serif; }
main, footer { max-width: 760px; margin: 0 auto; padding: 0 16px; }
.hero { background: var(--entete); color: #fff; text-align: center; padding: 48px 16px 40px; }
.hero img { width: 96px; height: 96px; border-radius: 22px; }
.hero h1 { font: 600 40px/1.2 Georgia, "Times New Roman", serif; margin: 16px 0 8px; }
.hero p { max-width: 560px; margin: 0 auto; color: #B8EDD9; }
.hero .bouton { display: inline-block; margin: 24px 0 0; padding: 14px 28px; border-radius: 999px;
          background: #B8EDD9; color: #0B4A37; font-weight: 600; text-decoration: none; }
.libelle { color: var(--dore); font-size: 14px; font-weight: 600; letter-spacing: .08em;
           text-transform: uppercase; margin: 40px 0 4px; }
h2 { color: var(--vert); font: 600 28px/1.3 Georgia, serif; margin: 0 0 16px; }
.cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.carte { background: var(--carte); border-radius: 18px; padding: 20px;
         box-shadow: 0 2px 10px rgba(0, 0, 0, .06); }
.carte h3 { margin: 0 0 6px; font-size: 18px; color: var(--vert); }
.carte p { margin: 0; font-size: 16px; }
ol { padding-left: 24px; } ol li { margin: 6px 0; }
.langues { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.langues li { background: var(--menthe); color: var(--menthe-texte); padding: 6px 14px;
              border-radius: 999px; font-size: 16px; }
.note { font-size: 15px; opacity: .8; }
footer { padding-top: 40px; padding-bottom: 40px; font-size: 15px; opacity: .8; text-align: center; }
a { color: var(--vert); }
@media (max-width: 480px) { .hero h1 { font-size: 32px; } }
.faq h3 { color: var(--vert); font-size: 18px; margin: 20px 0 4px; }
.faq p { margin: 0; }
.choix { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }