:root {
  --fond: #03080c;
  --carte: #071219;
  --bord: rgba(0, 229, 255, 0.28);
  --cyan: #00e5ff;
  --texte: #d9f6fb;
  --doux: #8fb3bb;
  --alerte: #ffcf6e;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: radial-gradient(1200px 600px at 70% -10%, rgba(0, 229, 255, 0.10), transparent 60%), var(--fond);
  color: var(--texte);
  font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--cyan); }
.page { width: min(1040px, 100% - 32px); margin: 0 auto; }
header.haut { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; padding: 20px 0; }
.marque { display: flex; gap: 10px; align-items: center; font-weight: 700; letter-spacing: .04em; color: var(--texte); text-decoration: none; }
.marque span { color: var(--cyan); }
nav.menu { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 15px; }
nav.menu a { color: var(--doux); text-decoration: none; }
nav.menu a:hover, nav.menu a[aria-current] { color: var(--cyan); }
h1 { font-size: clamp(30px, 5vw, 46px); line-height: 1.15; margin: 40px 0 14px; }
h2 { font-size: 26px; margin: 44px 0 12px; }
h3 { font-size: 19px; margin: 22px 0 6px; }
.chapo { font-size: 19px; color: var(--doux); max-width: 720px; }
.grille { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin: 26px 0; }
.carte { background: var(--carte); border: 1px solid var(--bord); border-radius: 14px; padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.carte.pack { border-color: var(--cyan); }
.prix { font-size: 30px; font-weight: 700; }
.prix small { font-size: 14px; color: var(--doux); font-weight: 400; }
ul.liste { padding-left: 20px; margin: 6px 0; }
ul.liste li { margin: 4px 0; }
.bouton { display: inline-block; padding: 10px 18px; border-radius: 9px; border: 1px solid var(--cyan); color: var(--cyan); text-decoration: none; font-weight: 600; text-align: center; }
.bouton.plein { background: var(--cyan); color: #021014; }
.bouton[aria-disabled="true"] { opacity: .55; pointer-events: none; }
.note { border-left: 3px solid var(--alerte); background: rgba(255, 207, 110, 0.07); padding: 10px 14px; border-radius: 6px; color: #f3e2bd; font-size: 15px; }
.a-completer { background: rgba(255, 207, 110, 0.18); color: var(--alerte); padding: 0 4px; border-radius: 4px; font-weight: 600; }
.doc { max-width: 820px; }
.doc p, .doc li { color: #cbe9ef; }
footer.bas { margin: 60px 0 30px; padding-top: 18px; border-top: 1px solid var(--bord); font-size: 14px; color: var(--doux); display: flex; flex-wrap: wrap; gap: 8px 20px; }
footer.bas a { color: var(--doux); }
@media (max-width: 560px) { body { font-size: 16px; } h2 { font-size: 22px; } }
.carte h2 { margin: 0; }