:root{
  --bg:#1a120d;
  --bg2:#2a1a10;
  --carte:#2b1f18;
  --bord:#4a3424;
  --orange:#e8742c;
  --orange2:#c95a1c;
  --or:#f0b54a;
  --texte:#f5ede6;
  --gris:#b9a99b;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  min-height:100vh;
  font-family:"Rubik",system-ui,sans-serif;
  color:var(--texte);
  background:radial-gradient(ellipse at top,#4a2a14 0%,var(--bg2) 35%,var(--bg) 75%);
  background-attachment:fixed;
}
a{color:inherit;text-decoration:none}
.page{max-width:460px;margin:0 auto;padding:48px 16px 40px;text-align:center}
.page.large{max-width:980px}

/* Logo bouclier */
.logo{width:96px;height:96px;margin:0 auto;border-radius:50%;border:2px solid var(--orange);
  display:grid;place-items:center;background:rgba(232,116,44,.08);box-shadow:0 0 30px rgba(232,116,44,.25)}
.logo svg{width:46px;height:46px;stroke:var(--orange)}
.petit-titre{margin-top:18px;font-size:11px;font-weight:700;letter-spacing:2px;color:var(--orange);text-transform:uppercase}
h1{margin-top:8px;font-size:34px;font-weight:800;letter-spacing:.5px}
.sous-titre{margin-top:12px;color:var(--gris);font-size:15px;line-height:1.5}

/* Boutons liens */
.liens{margin-top:28px;display:flex;flex-direction:column;gap:12px}
.lien{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:10px;
  background:var(--carte);border:1px solid var(--bord);text-align:left;transition:transform .15s,border-color .15s}
.lien:hover{transform:translateY(-2px);border-color:var(--orange)}
.lien.principal{background:linear-gradient(90deg,var(--orange),var(--orange2));border-color:var(--orange)}
.icone{width:40px;height:40px;flex:none;border-radius:8px;display:grid;place-items:center;
  background:rgba(0,0,0,.25);font-size:20px}
.lien .infos{flex:1}
.lien .nom{font-weight:700;font-size:16px}
.lien .detail{font-size:13px;opacity:.8;margin-top:2px}
.badge{display:inline-block;margin-left:6px;padding:2px 6px;border-radius:4px;font-size:9px;
  letter-spacing:1px;background:rgba(0,0,0,.3);vertical-align:middle}
.fleche{opacity:.7;font-size:18px}
.pied{margin-top:28px;font-size:11px;letter-spacing:2px;color:var(--gris);text-transform:uppercase}

/* Boutique */
.retour{display:inline-block;padding:10px 16px;border-radius:8px;background:var(--carte);
  border:1px solid var(--bord);font-weight:600;font-size:14px}
.retour:hover{border-color:var(--orange)}
.haut{text-align:left}
.categorie{margin:34px 0 14px;text-align:left;font-size:12px;font-weight:700;letter-spacing:2px;
  color:var(--orange);text-transform:uppercase;display:flex;align-items:center;gap:12px}
.categorie::after{content:"";flex:1;height:1px;background:var(--bord)}
.grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.produit{background:var(--carte);border:1px solid var(--bord);border-top:3px solid var(--orange);
  border-radius:10px;padding:18px;text-align:left;display:flex;flex-direction:column}
.produit.bronze{border-top-color:#c27a45}
.produit.argent{border-top-color:#cfd4da}
.produit.or{border-top-color:var(--or)}
.produit .tete{display:flex;align-items:center;gap:12px}
.produit h3{font-size:17px}
.produit p{margin-top:12px;color:var(--gris);font-size:13px;line-height:1.5;flex:1}
.prix{margin-top:16px;font-size:24px;font-weight:800;color:var(--orange)}
.or .prix{color:var(--or)}
.argent .prix{color:#e6e9ec}
.bouton{margin-top:14px;width:100%;padding:12px;border:none;border-radius:6px;cursor:not-allowed;
  background:rgba(0,0,0,.35);color:var(--gris);font:inherit;font-size:12px;font-weight:700;letter-spacing:1.5px}

@media (max-width:480px){
  h1{font-size:28px}
  .page{padding-top:32px}
}