.entete-page{position:relative;padding:56px 0 36px;overflow:hidden}
.entete-page::before{content:"";position:absolute;inset:0;background:radial-gradient(800px 380px at 50% 0%,rgba(214,178,98,.12),transparent 65%);pointer-events:none}
.entete-page .conteneur{position:relative;display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}
.fil{font-size:13px;color:var(--texte-3)}.fil a:hover{color:var(--laiton)}
.entete-page h1{font-size:clamp(40px,5.4vw,64px);margin:14px 0 12px}
.entete-page .intro{font-size:18px;color:var(--texte-2);max-width:600px}
.compte-boite{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:12px;border:1px solid var(--trait);background:var(--carte);font-size:14px}
.compte-boite .tete{width:40px;height:40px;border-radius:8px;background:linear-gradient(135deg,#6b4f2f,#3a2a18)}
.compte-boite b{display:block}.compte-boite span{color:var(--texte-3);font-size:13px}
.panier-btn{position:relative}
.panier-btn i{position:absolute;top:-6px;right:-6px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--rouge);color:#fff;font-size:11px;font-style:normal;font-weight:700}

.garanties{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:40px}
.garanties>div{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:12px;border:1px solid var(--trait);background:rgba(21,28,42,.5);font-size:13px;color:var(--texte-2)}
.garanties>div>div{min-width:0}
.garanties b{display:block;color:var(--texte);font-size:14px}
.garanties .ic{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:rgba(214,178,98,.1);color:var(--laiton-clair);font-size:18px}

.mise-en-page{display:grid;grid-template-columns:260px 1fr;gap:32px;align-items:start}
.cote{position:sticky;top:96px;display:grid;gap:16px}
.objectif{padding:22px;border-radius:var(--rayon);border:1px solid var(--trait-fort);background:linear-gradient(180deg,rgba(214,178,98,.1),rgba(214,178,98,.02))}
.objectif h3{font-size:18px;margin:8px 0 4px}
.objectif p{font-size:13px;color:var(--texte-2)}
.barre-don{height:10px;border-radius:5px;background:rgba(255,255,255,.08);margin:14px 0 8px;overflow:hidden}
.barre-don i{display:block;height:100%;width:80%;background:linear-gradient(90deg,var(--laiton-2),var(--laiton-clair))}
.objectif .chiffres-don{display:flex;justify-content:space-between;font-size:13px;color:var(--texte-2)}
.objectif .chiffres-don b{color:var(--laiton-clair)}
.paliers{margin-top:14px;display:grid;gap:8px}
.paliers div{display:flex;justify-content:space-between;font-size:12px;color:var(--texte-3);padding:8px 10px;border-radius:8px;border:1px solid var(--trait)}
.paliers div.ok{color:var(--texte);border-color:var(--trait-fort)}
.categories{padding:10px;border-radius:var(--rayon);border:1px solid var(--trait);background:var(--carte)}
.categories a{display:flex;justify-content:space-between;padding:10px 12px;border-radius:8px;font-size:14px;color:var(--texte-2)}
.categories a span{color:var(--texte-3)}
.categories a.on{background:rgba(214,178,98,.1);color:var(--laiton-clair)}
.categories a:hover:not(.on){background:rgba(255,255,255,.03);color:var(--texte)}

.rayon+.rayon{margin-top:56px}
.rayon-tete{display:flex;justify-content:space-between;align-items:end;margin-bottom:18px}
.rayon-tete h2{font-size:26px}
.rayon-tete p{font-size:14px;color:var(--texte-3)}

.grades{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grade{position:relative;display:grid;grid-template-columns:160px 1fr;gap:20px;padding:22px;border-radius:var(--rayon);border:1px solid var(--trait);background:linear-gradient(180deg,var(--carte-2),var(--carte));transition:.25s}
.grade:hover{border-color:var(--trait-fort);transform:translateY(-2px)}
.grade.vedette{border-color:var(--trait-fort);box-shadow:0 0 0 1px rgba(214,178,98,.25),0 20px 50px rgba(214,178,98,.08)}
.grade .ruban{position:absolute;top:-11px;right:20px}
.grade img{width:160px;height:160px;border-radius:12px}
.grade h3{font-size:22px}
.grade ul{list-style:none;margin:10px 0 14px;display:grid;gap:5px}
.grade li{font-size:13px;color:var(--texte-2);display:flex;gap:8px}
.grade li::before{content:"✓";color:var(--laiton)}

.produits{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.produit{display:flex;flex-direction:column;border-radius:var(--rayon);border:1px solid var(--trait);background:var(--carte);overflow:hidden;transition:.25s}
.produit:hover{border-color:var(--trait-fort);transform:translateY(-3px)}
.produit .vignette{position:relative;aspect-ratio:1;background:#181527}
.produit .vignette img{width:100%;height:100%;object-fit:cover}
.produit .vignette .badge{position:absolute;top:12px;left:12px}
.produit .corps{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.produit h3{font-family:Inter;font-weight:700;font-size:16px;letter-spacing:0}
.produit p{font-size:13px;color:var(--texte-3);margin-top:4px;flex:1}
.prix-ligne{display:flex;justify-content:space-between;align-items:center;margin-top:14px}
.prix{font-size:20px;font-weight:700;color:var(--laiton-clair)}
.prix small{display:block;font-size:12px;font-weight:500;color:var(--texte-3)}
.ajout{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--laiton);color:#1b1408;font-size:20px;font-weight:700}
.b-limite{background:rgba(216,106,90,.18);color:#f09a8b}
.b-pop{background:var(--laiton);color:#1b1408}
.quantites{display:flex;gap:6px;margin-top:10px}
.quantites span{flex:1;text-align:center;padding:6px 0;border-radius:8px;border:1px solid var(--trait);font-size:12px;color:var(--texte-2)}
.quantites span.on{border-color:var(--trait-fort);color:var(--laiton-clair);background:rgba(214,178,98,.08)}
.quantites span em{display:block;font-style:normal;font-size:11px;color:var(--vert)}

/* Fiche produit */
.fiche{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;padding:40px 0 80px}
.fiche .galerie{position:sticky;top:96px}
.fiche .galerie .grande{border-radius:var(--rayon);overflow:hidden;border:1px solid var(--trait);background:#181527}
.fiche .galerie .petites{display:flex;gap:10px;margin-top:10px}
.fiche .galerie .petites div{flex:1;aspect-ratio:1;border-radius:10px;border:1px solid var(--trait);background:#181527;overflow:hidden}
.fiche .galerie .petites div.on{border-color:var(--laiton)}
.fiche .galerie .petites img{width:100%;height:100%;object-fit:cover}
.fiche h1{font-size:clamp(32px,4vw,46px);margin:12px 0 10px}
.fiche .resume-p{color:var(--texte-2);font-size:16px}
.achat{margin-top:24px;padding:22px;border-radius:var(--rayon);border:1px solid var(--trait-fort);background:var(--carte)}
.achat .gros-prix{font-size:34px;font-weight:700;color:var(--laiton-clair)}
.achat .gros-prix small{font-size:14px;font-weight:500;color:var(--texte-3);margin-left:8px}
.achat .duree{font-size:13px;color:var(--texte-2);margin-top:2px}
.achat .options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}
.achat .options div{padding:12px 14px;border-radius:10px;border:1px solid var(--trait);font-size:13px;color:var(--texte-2)}
.achat .options div.on{border-color:var(--laiton);background:rgba(214,178,98,.08);color:var(--texte)}
.achat .options b{display:block;font-size:15px;color:var(--texte)}
.achat .btn{width:100%;justify-content:center}
.achat .pour{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:13px;color:var(--texte-3)}
.achat .pour i{width:22px;height:22px;border-radius:5px;background:linear-gradient(135deg,#6b4f2f,#3a2a18)}
.inclus{margin-top:32px}
.inclus h2{font-size:22px;margin-bottom:14px}
.inclus ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.inclus li{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:10px;border:1px solid var(--trait);background:var(--carte);font-size:14px;color:var(--texte-2)}
.inclus li::before{content:"✦";color:var(--laiton)}
.description{margin-top:28px;color:var(--texte-2);line-height:1.75}
.faq{margin-top:28px;display:grid;gap:10px}
.faq details{padding:14px 16px;border-radius:10px;border:1px solid var(--trait);background:var(--carte)}
.faq summary{cursor:pointer;font-weight:600;font-size:15px}
.faq p{margin-top:8px;font-size:14px;color:var(--texte-2)}

@media (max-width:1000px){
  .mise-en-page{grid-template-columns:1fr}.cote{position:static;grid-template-columns:1fr 1fr}
  .garanties{grid-template-columns:1fr 1fr}
  .grades{grid-template-columns:1fr}
  .produits{grid-template-columns:1fr 1fr}
  .fiche{grid-template-columns:1fr}.fiche .galerie{position:static}
}
@media (max-width:620px){
  .cote{grid-template-columns:1fr}
  .garanties,.produits,.inclus ul{grid-template-columns:1fr}
  .grade{grid-template-columns:1fr}.grade img{width:100%;height:auto}
  .compte-boite{width:100%}
}

/* Ajouts du site : panier, achat, états, facture */
.mise-en-page .rayon-tete .badge{margin-left:8px}
.produit .vignette.sans{display:grid;place-items:center;font-size:40px;color:var(--texte-3)}
.produit .ajout{border:0;cursor:pointer}
.quantites a{flex:1;text-align:center;padding:6px 0;border-radius:8px;border:1px solid var(--trait);font-size:12px;color:var(--texte-2)}
.quantites a em{display:block;font-style:normal;font-size:11px;color:var(--vert)}
.quantites a.on{border-color:var(--trait-fort);color:var(--laiton-clair);background:rgba(214,178,98,.08)}
.achat .lots{display:flex;gap:8px;margin:16px 0 0}
.achat .lots label{flex:1;cursor:pointer}
.achat .lots input,.achat .options input{position:absolute;opacity:0;pointer-events:none}
.achat .lots span{display:block;text-align:center;padding:10px 0;border-radius:10px;border:1px solid var(--trait);font-size:14px;color:var(--texte-2)}
.achat .lots input:checked+span,.achat .options input:checked+div{border-color:var(--laiton);background:rgba(214,178,98,.08);color:var(--texte)}
.achat .lots em{display:block;font-style:normal;font-size:11px;color:var(--vert)}
.achat .options label{cursor:pointer}
.achat .options div{height:100%}
.achat .champ-dest{display:none;margin:0 0 14px}
.achat .champ-dest.on{display:grid}
.achat .stock{margin-top:10px;font-size:13px;color:#f09a8b}
.recompenses{margin-top:28px}
.recompenses h2{font-size:22px;margin-bottom:12px}
.recompenses table{width:100%;border-collapse:collapse;font-size:14px}
.recompenses td{padding:8px 12px;border-bottom:1px solid var(--trait);color:var(--texte-2)}
.recompenses td:last-child{text-align:right;color:var(--laiton-clair)}
.petites div{cursor:pointer}
.panier-page{padding:40px 0 96px;max-width:900px;margin:0 auto}
.panier-page h1{font-size:clamp(32px,4vw,44px);margin:12px 0 24px}
.ligne-panier{display:grid;grid-template-columns:72px 1fr auto auto;gap:16px;align-items:center;padding:14px;border-radius:12px;border:1px solid var(--trait);background:var(--carte);margin-bottom:10px}
.ligne-panier img{width:72px;height:72px;border-radius:8px;object-fit:cover;background:#181527}
.ligne-panier small{display:block;color:var(--texte-3);font-size:12px}
.ligne-panier .non{color:#f09a8b;font-size:12px}
.ligne-panier form{display:flex;gap:6px;align-items:center}
.ligne-panier input[type=number]{width:60px;height:36px;border-radius:8px;border:1px solid var(--trait-fort);background:var(--nuit-2);color:var(--texte);padding:0 8px}
.lien-btn{background:none;border:0;color:var(--texte-3);cursor:pointer;font-size:13px;text-decoration:underline}
.total-panier{display:flex;justify-content:space-between;align-items:end;margin:22px 0;padding:18px;border-radius:12px;border:1px solid var(--trait-fort);background:var(--carte)}
.total-panier .prix{font-size:28px}
.paiement{padding:22px;border-radius:var(--rayon);border:1px solid var(--trait);background:var(--carte);display:grid;gap:12px}
.paiement .moyens{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.paiement .moyens label{cursor:pointer}
.paiement .moyens input{position:absolute;opacity:0}
.paiement .moyens span{display:block;padding:14px;border-radius:10px;border:1px solid var(--trait);text-align:center;font-size:14px;color:var(--texte-2)}
.paiement .moyens input:checked+span{border-color:var(--laiton);background:rgba(214,178,98,.08);color:var(--texte)}
.paiement .moyens input:disabled+span{opacity:.4}
.paiement .case{display:flex;gap:10px;font-size:13px;color:var(--texte-2)}
.achats-liste{width:100%;border-collapse:collapse;font-size:13px}
.achats-liste td,.achats-liste th{padding:8px 6px;border-bottom:1px solid var(--trait);text-align:left}
.solde-monnaie{font-size:26px;font-weight:700;color:var(--laiton-clair)}
@media (max-width:620px){.ligne-panier{grid-template-columns:56px 1fr}.ligne-panier img{width:56px;height:56px}.paiement .moyens{grid-template-columns:1fr}}
@media print{header,footer,.pas-imprimer{display:none!important}}

@media (max-width:1180px){.garanties{grid-template-columns:1fr 1fr}}

/* ===== Boutique, version 2 (vitrine) ===== */
:root{--teinte:#d6b262}
.vitrine{position:relative;padding:44px 0 56px;overflow:hidden;border-bottom:1px solid var(--trait);
  background:radial-gradient(700px 420px at 78% 40%,rgba(176,124,255,.14),transparent 70%),radial-gradient(800px 380px at 15% 0%,rgba(214,178,98,.14),transparent 70%),linear-gradient(180deg,var(--nuit-2),var(--nuit))}
.vitrine::after{content:"";position:absolute;inset:0;background:url("/img/spawn.webp") center/cover;opacity:.05;pointer-events:none}
.vitrine-grille{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center}
.vitrine .fil{margin-bottom:22px}
.vitrine h1{font-size:clamp(40px,5.2vw,64px);margin:12px 0 14px}
.vitrine .intro{font-size:18px;color:var(--texte-2);max-width:560px}
.atouts{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 26px}
.atouts span{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid var(--trait);background:rgba(11,15,22,.55);font-size:13px;color:var(--texte-2)}
.atouts i{font-style:normal;color:var(--laiton-clair)}
.qui-achete{display:inline-flex;align-items:center;gap:14px;padding:12px 18px 12px 12px;border-radius:14px;border:1px solid var(--trait-fort);background:rgba(21,28,42,.75)}
.qui-achete .tete{border-radius:10px}
.qui-achete b{display:block;font-size:15px}.qui-achete span{font-size:13px;color:var(--texte-3)}

.a-la-une{position:relative;display:grid;grid-template-columns:1fr;border-radius:20px;border:1px solid color-mix(in srgb,var(--teinte) 55%,transparent);background:linear-gradient(160deg,color-mix(in srgb,var(--teinte) 16%,var(--carte)),var(--carte) 60%);overflow:hidden;transition:.3s;box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.02) inset}
.a-la-une:hover{transform:translateY(-4px);box-shadow:0 36px 90px rgba(0,0,0,.5),0 0 60px color-mix(in srgb,var(--teinte) 25%,transparent)}
.a-la-une .aura{position:absolute;left:50%;top:38%;width:360px;height:360px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--teinte) 45%,transparent),transparent 65%);filter:blur(10px);animation:aura 5s ease-in-out infinite}
@keyframes aura{50%{opacity:.6;transform:translate(-50%,-50%) scale(1.08)}}
.a-la-une .b-une{position:absolute;top:18px;left:18px;z-index:2;background:var(--teinte);color:#1b1408}
.une-image{position:relative;height:300px;display:grid;place-items:center}
.une-image img{max-height:260px;max-width:80%;object-fit:contain;filter:drop-shadow(0 18px 30px rgba(0,0,0,.55));animation:flotte 4s ease-in-out infinite}
.une-image span{font-size:64px;color:var(--texte-3)}
@keyframes flotte{50%{transform:translateY(-8px)}}
.une-infos{position:relative;padding:4px 26px 24px}
.une-infos h2{font-size:28px}
.une-infos p{font-size:14px;color:var(--texte-2);margin-top:6px}
.une-bas{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:16px}
.une-bas .prix{font-size:28px}

.rayons-nav{position:sticky;top:72px;z-index:5;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:14px 0;margin:0 0 24px;background:linear-gradient(180deg,var(--nuit) 70%,transparent)}
.rayons-nav a{flex:none;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;border:1px solid var(--trait);background:var(--carte);font-size:14px;font-weight:600;color:var(--texte-2);transition:.2s}
.rayons-nav a i{width:8px;height:8px;border-radius:50%;background:var(--teinte);box-shadow:0 0 10px var(--teinte)}
.rayons-nav a span{font-size:12px;color:var(--texte-3);font-weight:500}
.rayons-nav a:hover{color:var(--texte);border-color:color-mix(in srgb,var(--teinte) 60%,transparent)}

.mise-en-page{grid-template-columns:1fr 280px;padding-bottom:96px}
.cote{top:140px}
.aide-achat{padding:20px;border-radius:var(--rayon);border:1px solid var(--trait);background:var(--carte)}
.aide-achat h3{font-size:16px;margin-bottom:10px}
.aide-achat ol{padding-left:18px;display:grid;gap:6px;font-size:13px;color:var(--texte-2);margin-bottom:12px}
.aide-achat code{padding:1px 6px;border-radius:5px;background:rgba(0,0,0,.35);color:var(--laiton-clair)}
.aide-achat .lien{font-size:13px}

.rayon-tete h2{font-size:28px;display:flex;align-items:center;gap:12px}
.rayon-tete h2::before{content:"";width:6px;height:26px;border-radius:3px;background:var(--teinte);box-shadow:0 0 14px var(--teinte)}

.grades{gap:22px}
.grade{display:flex;flex-direction:column;gap:0;padding:26px;border-color:color-mix(in srgb,var(--tier) 35%,transparent);background:radial-gradient(420px 220px at 20% 0%,color-mix(in srgb,var(--tier) 18%,transparent),transparent 70%),linear-gradient(180deg,var(--carte-2),var(--carte))}
.grade:hover{border-color:var(--tier);transform:translateY(-4px);box-shadow:0 24px 60px rgba(0,0,0,.4),0 0 40px color-mix(in srgb,var(--tier) 18%,transparent)}
.grade.vedette{border-color:var(--tier);box-shadow:0 0 0 1px color-mix(in srgb,var(--tier) 40%,transparent),0 24px 60px color-mix(in srgb,var(--tier) 14%,transparent)}
.grade-haut{display:flex;align-items:center;gap:18px}
.grade-img{flex:none;width:96px;height:96px;border-radius:16px;display:grid;place-items:center;background:radial-gradient(circle,color-mix(in srgb,var(--tier) 35%,transparent),rgba(0,0,0,.25) 70%);border:1px solid color-mix(in srgb,var(--tier) 40%,transparent)}
.grade .grade-img img{width:84px;height:84px;border-radius:10px}
.grade h3{font-size:26px;color:var(--texte)}
.grade .duree{font-size:13px;color:var(--tier)}
.grade ul{margin:20px 0;gap:9px;flex:1}
.grade li{font-size:14px;color:var(--texte-2)}
.grade li::before{content:"✦";color:var(--tier)}
.grade-bas{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:18px;border-top:1px solid rgba(255,255,255,.06)}
.grade-bas .prix{font-size:30px}
.grade-bas .btn{height:44px}

.produits{gap:20px}
.produit{border-color:rgba(255,255,255,.06);background:linear-gradient(180deg,var(--carte-2),var(--carte))}
.produit:hover{border-color:color-mix(in srgb,var(--teinte) 60%,transparent);transform:translateY(-5px);box-shadow:0 22px 50px rgba(0,0,0,.45),0 0 36px color-mix(in srgb,var(--teinte) 16%,transparent)}
.produit .vignette{aspect-ratio:4/3;display:grid;place-items:center;background:radial-gradient(circle at 50% 55%,color-mix(in srgb,var(--teinte) 30%,transparent),transparent 62%),#12131d}
.produit .vignette img{width:78%;height:78%;object-fit:contain;filter:drop-shadow(0 14px 22px rgba(0,0,0,.5));transition:transform .35s}
.produit:hover .vignette img{transform:scale(1.08) rotate(-2deg)}
.pastille-lot{position:absolute;right:12px;bottom:12px;padding:4px 10px;border-radius:999px;background:rgba(11,15,22,.85);border:1px solid rgba(123,196,127,.4);color:#9bd99e;font-size:11px;font-weight:700}
.produit h3{font-size:17px}
.produit .ajout{width:auto;height:38px;padding:0 16px;font-size:14px;border-radius:10px;background:transparent;border:1px solid color-mix(in srgb,var(--teinte) 60%,transparent);color:var(--texte);transition:.2s}
.produit:hover .ajout{background:var(--teinte);color:#1b1408}

@media (max-width:1000px){.vitrine-grille{grid-template-columns:1fr}.mise-en-page{grid-template-columns:1fr}.une-image{height:240px}}
.achat .gros-prix small{display:block;margin:4px 0 0;font-size:15px}
.prix small.coins,.gros-prix small.coins{color:#9ccfff;font-weight:600}
.grade-img{width:110px;height:110px;background:radial-gradient(circle,color-mix(in srgb,var(--tier) 22%,transparent),rgba(0,0,0,.2) 72%)}
.grade .grade-img img{width:104px;height:104px;border-radius:0;image-rendering:auto}
.fiche .galerie .grande.visuel{background:radial-gradient(circle at 50% 50%,rgba(214,178,98,.12),#12131d 70%)}
.fiche .galerie .grande.visuel img{width:100%;aspect-ratio:1;object-fit:contain}
.promo-panier{margin:18px 0 0}
.promo-form{display:flex;gap:8px;max-width:420px}
.promo-form input{flex:1;height:44px;padding:0 14px;border-radius:10px;border:1px solid var(--trait-fort);background:var(--nuit-2);color:var(--texte);font:inherit;text-transform:uppercase}
.promo-form .btn{height:44px;background:transparent}
.promo-ok{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-radius:10px;border:1px solid rgba(123,196,127,.4);background:rgba(123,196,127,.08);font-size:14px;color:#bfe3c1}
.promo-ok small{color:var(--texte-3)}
.promo-ko{display:block;margin-top:8px;font-size:13px;color:#f3b4a8}
.total-panier .avant{font-size:18px;color:var(--texte-3);font-weight:500;margin-right:6px}