:root{
  --noir:#111013;
  --noir-2:#1a191d;
  --ivoire:#ffffff;
  --ivoire-2:#f6f5f3;
  --encre:#1d1b1f;
  --encre-doux:#6e6a70;
  --champagne:#c9a35f;
  --champagne-clair:#e3c99a;
  --blush:#e7cdc0;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Jost',-apple-system,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  overflow-x:hidden;
  font-family:var(--sans);
  background:var(--ivoire);
  color:var(--encre);
  font-weight:300;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--champagne);color:var(--noir)}
section[id],div[id]{scroll-margin-top:90px}

/* ---------- utilitaires ---------- */
.wrap{max-width:1200px;margin:0 auto;padding:0 40px}
.label{
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--champagne);
  font-weight:400;
}
.hairline{
  width:56px;height:1px;
  background:var(--champagne);
  margin:28px 0;
}
.hairline.center{margin-left:auto;margin-right:auto}

/* ---------- header ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  padding:26px 48px;
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(to bottom,rgba(17,16,19,.65),transparent);
  backdrop-filter:blur(2px);
}
.logo{
  font-family:var(--serif);
  font-size:26px;
  letter-spacing:.34em;
  color:var(--ivoire);
  text-decoration:none;
  font-weight:500;
}
.logo span{color:var(--champagne)}
nav{display:flex;gap:40px;align-items:center}
nav a{
  color:rgba(255,255,255,.82);
  text-decoration:none;
  font-size:12px;
  letter-spacing:.28em;
  text-transform:uppercase;
  transition:color .3s;
}
nav a:hover{color:var(--champagne-clair)}
nav a.actif{color:var(--champagne-clair)}
nav a.btn-nav{
  border:1px solid rgba(201,163,95,.6);
  padding:11px 26px;
  color:var(--champagne-clair);
  transition:all .35s;
}
nav a.btn-nav:hover{background:var(--champagne);color:var(--noir);border-color:var(--champagne)}
@media(max-width:820px){
  nav a:not(.btn-nav){display:none}
  header{padding:18px 20px}
  .logo{font-size:19px;letter-spacing:.22em}
  nav a.btn-nav{padding:9px 18px;font-size:11px}
}

/* ---------- hero (accueil) ---------- */
.hero{
  min-height:100vh;
  position:relative;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  background:
    radial-gradient(1100px 600px at 78% 18%,rgba(201,163,95,.16),transparent 60%),
    radial-gradient(900px 700px at 15% 85%,rgba(227,201,154,.10),transparent 55%),
    radial-gradient(600px 400px at 50% 110%,rgba(201,163,95,.10),transparent 70%),
    linear-gradient(165deg,#111013 0%,#1a191d 45%,#201f23 70%,#111013 100%);
  overflow:hidden;
}
.hero::before{ /* voile de soie */
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(115deg,transparent 42%,rgba(255,255,255,.035) 46%,transparent 52%),
    linear-gradient(115deg,transparent 60%,rgba(255,255,255,.05) 66%,transparent 74%),
    linear-gradient(115deg,transparent 22%,rgba(255,255,255,.025) 27%,transparent 33%);
}
.hero::after{ /* liseré bas */
  content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:1px;height:72px;
  background:linear-gradient(to bottom,transparent,var(--champagne));
}
.hero-inner{position:relative;padding:140px 24px 100px;max-width:900px}
.hero .label{animation:rise 1.2s .2s cubic-bezier(.2,.7,.2,1) both}
.hero h1{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(38px,10vw,104px);
  line-height:1.06;
  color:var(--ivoire);
  margin:30px 0 0;
  animation:rise 1.2s .45s cubic-bezier(.2,.7,.2,1) both;
}
.hero h1 em{
  font-style:italic;
  color:var(--champagne-clair);
}
.hero p.lede{
  margin:34px auto 0;
  max-width:520px;
  color:rgba(255,255,255,.72);
  font-size:16.5px;
  letter-spacing:.02em;
  animation:rise 1.2s .7s cubic-bezier(.2,.7,.2,1) both;
}
.hero-cta{
  margin-top:48px;
  display:flex;gap:22px;justify-content:center;flex-wrap:wrap;
  animation:rise 1.2s .9s cubic-bezier(.2,.7,.2,1) both;
}
.btn{
  display:inline-block;
  text-decoration:none;
  font-size:12px;letter-spacing:.3em;text-transform:uppercase;
  padding:17px 42px;
  transition:all .35s;
}
.btn-or{background:var(--champagne);color:var(--noir);border:1px solid var(--champagne)}
.btn-or:hover{background:var(--champagne-clair);border-color:var(--champagne-clair)}
.btn-ghost{border:1px solid rgba(255,255,255,.35);color:var(--ivoire)}
.btn-ghost:hover{border-color:var(--champagne);color:var(--champagne-clair)}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- hero de page intérieure ---------- */
.page-hero{
  position:relative;
  text-align:center;
  padding:190px 24px 100px;
  background:
    radial-gradient(900px 500px at 75% 0%,rgba(201,163,95,.16),transparent 60%),
    radial-gradient(700px 500px at 15% 100%,rgba(227,201,154,.08),transparent 55%),
    linear-gradient(165deg,#111013 0%,#1a191d 55%,#201f23 100%);
  overflow:hidden;
}
.page-hero::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(115deg,transparent 42%,rgba(255,255,255,.035) 46%,transparent 52%),
    linear-gradient(115deg,transparent 60%,rgba(255,255,255,.05) 66%,transparent 74%);
}
.page-hero>*{position:relative}
.page-hero .label{animation:rise 1s .1s cubic-bezier(.2,.7,.2,1) both}
.page-hero h1{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(38px,5.5vw,76px);
  line-height:1.08;
  color:var(--ivoire);
  margin-top:26px;
  animation:rise 1s .3s cubic-bezier(.2,.7,.2,1) both;
}
.page-hero h1 em{font-style:italic;color:var(--champagne-clair)}
.page-hero p{
  margin:24px auto 0;max-width:580px;
  color:rgba(255,255,255,.7);font-size:16px;
  animation:rise 1s .5s cubic-bezier(.2,.7,.2,1) both;
}
.chips{
  margin-top:42px;
  display:flex;gap:14px;justify-content:center;flex-wrap:wrap;
  animation:rise 1s .7s cubic-bezier(.2,.7,.2,1) both;
}
.chip{
  border:1px solid rgba(201,163,95,.45);
  color:var(--champagne-clair);
  text-decoration:none;
  padding:11px 26px;
  font-size:11px;letter-spacing:.25em;text-transform:uppercase;
  transition:all .3s;
}
.chip:hover{background:var(--champagne);color:var(--noir);border-color:var(--champagne)}
.chip.promo,.chip.promo:hover{background:var(--champagne);color:var(--noir);border-color:var(--champagne);cursor:default}
.promo-pill{
  display:inline-block;margin-top:34px;
  border:1px solid rgba(201,163,95,.5);border-radius:999px;
  padding:10px 26px;
  font-size:11px;letter-spacing:.25em;text-transform:uppercase;
  color:var(--champagne-clair);
  animation:rise 1.2s 1.05s cubic-bezier(.2,.7,.2,1) both;
}

/* ---------- bandeau défilant ---------- */
.bande{
  background:var(--noir);
  border-top:1px solid rgba(201,163,95,.25);
  border-bottom:1px solid rgba(201,163,95,.25);
  padding:16px 0;
  overflow:hidden;white-space:nowrap;
}
.bande-piste{display:inline-block;animation:defile 38s linear infinite}
.bande span{
  font-size:11px;letter-spacing:.4em;text-transform:uppercase;
  color:rgba(255,255,255,.6);
  padding:0 34px;
}
.bande i{font-style:normal;color:var(--champagne)}
@keyframes defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- histoire ---------- */
.histoire{padding:130px 0 110px;background:var(--ivoire)}
.histoire-tete{text-align:center;max-width:640px;margin:0 auto 90px}
h2.titre{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(36px,4.6vw,58px);
  line-height:1.12;
  color:var(--encre);
  margin-top:24px;
}
h2.titre em{font-style:italic;color:var(--champagne)}
.histoire-tete p{margin-top:26px;color:var(--encre-doux);font-size:16px}

.chapitres{display:grid;grid-template-columns:repeat(3,1fr);gap:64px}
@media(max-width:900px){.chapitres{grid-template-columns:1fr;gap:56px;max-width:520px;margin:0 auto}}
.chapitre .num{
  font-family:var(--serif);
  font-style:italic;
  font-size:20px;
  color:var(--champagne);
  letter-spacing:.1em;
}
.chapitre h3{
  font-family:var(--serif);
  font-weight:500;
  font-size:27px;
  margin:16px 0 6px;
  color:var(--encre);
}
.chapitre .filet{width:36px;height:1px;background:var(--champagne);margin:14px 0 20px}
.chapitre p{color:var(--encre-doux);font-size:15.5px}

/* ---------- citation ---------- */
.citation{
  padding:120px 24px;
  text-align:center;
  background:
    radial-gradient(800px 400px at 50% 0%,rgba(201,163,95,.12),transparent 65%),
    var(--noir);
}
.citation blockquote{
  font-family:var(--serif);
  font-weight:300;
  font-style:italic;
  font-size:clamp(28px,3.8vw,44px);
  line-height:1.35;
  color:var(--ivoire);
  max-width:820px;margin:36px auto 0;
}
.citation cite{
  display:block;
  margin-top:34px;
  font-family:var(--sans);
  font-style:normal;
  font-size:11px;letter-spacing:.4em;text-transform:uppercase;
  color:var(--champagne);
}
.citation .btn{margin-top:44px}

/* ---------- collections / cartes ---------- */
.collections{padding:130px 0;background:var(--ivoire-2)}
.collections-tete{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:70px;flex-wrap:wrap}
.grille{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
@media(max-width:900px){.grille{grid-template-columns:1fr;max-width:440px;margin:0 auto}}
.carte{
  text-decoration:none;
  display:block;
  background:var(--ivoire);
  transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s;
  box-shadow:0 1px 0 rgba(29,27,31,.06);
}
.carte:hover{transform:translateY(-8px);box-shadow:0 30px 60px -30px rgba(29,27,31,.35)}
.visuel{
  height:420px;
  position:relative;overflow:hidden;
}
.visuel::after{
  content:attr(data-monogramme);
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);
  font-style:italic;
  font-size:120px;
  color:rgba(255,255,255,.16);
}
.visuel::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(120deg,transparent 40%,rgba(255,255,255,.07) 48%,transparent 58%);
}
.visuel img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center 22%;
}
.v-noire{background:
  radial-gradient(400px 300px at 70% 25%,rgba(201,163,95,.25),transparent 65%),
  linear-gradient(160deg,#201f23,#111013 75%)}
.v-soie::after,.v-ivoire::after{color:rgba(29,27,31,.12)}
.v-soie{background:
  radial-gradient(420px 320px at 30% 20%,rgba(255,255,255,.35),transparent 60%),
  linear-gradient(160deg,#e9cfc2,#cfa896 80%)}
.v-ivoire{background:
  radial-gradient(420px 320px at 65% 25%,rgba(255,255,255,.5),transparent 60%),
  linear-gradient(160deg,#efe6d8,#d8c5a8 85%)}
.v-bordeaux{background:
  radial-gradient(400px 300px at 70% 25%,rgba(201,163,95,.22),transparent 65%),
  linear-gradient(160deg,#4a1d2b,#2b0f1a 80%)}
.carte-corps{padding:30px 30px 34px;text-align:center}
.carte-corps .label{font-size:10px;letter-spacing:.36em}
.carte-corps h3{
  font-family:var(--serif);font-weight:500;
  font-size:26px;color:var(--encre);
  margin:10px 0 8px;
}
.carte-corps p{color:var(--encre-doux);font-size:14.5px;max-width:280px;margin:0 auto}
.carte-corps .lien{
  display:inline-block;margin-top:20px;
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--champagne);
  border-bottom:1px solid rgba(201,163,95,.4);
  padding-bottom:5px;
}

/* ---------- boutique : rayons & produits ---------- */
.rayon{padding:110px 0}
.rayon-b{background:var(--ivoire-2)}
.rayon-tete{text-align:center;max-width:660px;margin:0 auto 70px}
.rayon-tete p{margin-top:22px;color:var(--encre-doux);font-size:15.5px}
.produits{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
@media(max-width:1100px){.produits{grid-template-columns:repeat(3,1fr)}}
@media(max-width:860px){.produits{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.produits{grid-template-columns:1fr;max-width:340px;margin:0 auto}}
.visuel.mini{height:250px}
.visuel.mini::after{font-size:78px}
.produit .carte-corps{padding:24px 18px 28px}
.produit .carte-corps h3{font-size:22px}
.produit .coupe{color:var(--encre-doux);font-size:13.5px;line-height:1.55;max-width:240px;margin:0 auto}
.prix{display:inline-block;margin-top:14px;font-size:13px;letter-spacing:.18em;color:#a4813f}

/* ---------- modèles ---------- */
.mannequins{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
@media(max-width:1100px){.mannequins{grid-template-columns:repeat(3,1fr)}}
@media(max-width:860px){.mannequins{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.mannequins{grid-template-columns:1fr;max-width:340px;margin:0 auto}}
.portrait{height:340px}
.portrait::after{font-size:96px}
.t-ebene{background:
  radial-gradient(360px 280px at 65% 20%,rgba(255,215,170,.18),transparent 65%),
  linear-gradient(160deg,#4a3128,#241611 80%)}
.t-cacao{background:
  radial-gradient(360px 280px at 30% 20%,rgba(255,215,170,.16),transparent 65%),
  linear-gradient(160deg,#5d3a2b,#33201a 80%)}
.t-caramel{background:
  radial-gradient(360px 280px at 65% 20%,rgba(255,230,190,.22),transparent 65%),
  linear-gradient(160deg,#8a5a38,#5a3722 80%)}
.t-miel{background:
  radial-gradient(360px 280px at 30% 20%,rgba(255,235,200,.25),transparent 65%),
  linear-gradient(160deg,#b57e4e,#8a5a33 80%)}
.t-sable{background:
  radial-gradient(360px 280px at 65% 20%,rgba(255,240,215,.3),transparent 65%),
  linear-gradient(160deg,#c99b72,#a1704a 80%)}
.t-beige{background:
  radial-gradient(360px 280px at 30% 20%,rgba(255,245,225,.35),transparent 65%),
  linear-gradient(160deg,#d9ab88,#b98a63 80%)}
.t-rose{background:
  radial-gradient(360px 280px at 65% 20%,rgba(255,248,235,.4),transparent 65%),
  linear-gradient(160deg,#e3b89d,#c4906f 80%)}
.t-porcelaine{background:
  radial-gradient(360px 280px at 30% 20%,rgba(255,250,240,.45),transparent 65%),
  linear-gradient(160deg,#ecc9ad,#d0a17f 80%)}
.t-sable::after,.t-beige::after,.t-rose::after,.t-porcelaine::after{color:rgba(29,27,31,.13)}
.fiche{padding:26px 18px 30px;text-align:center}
.fiche h3{font-family:var(--serif);font-weight:500;font-size:24px;color:var(--encre)}
.fiche .origine{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--encre-doux);margin-top:6px;
}
.mesures{display:flex;justify-content:center;gap:26px;margin-top:20px}
.mesure b{
  display:block;
  font-family:var(--serif);font-weight:500;
  font-size:19px;color:var(--encre);
}
.mesure span{
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--encre-doux);
}
.badge-taille{
  display:inline-block;margin-top:20px;
  border:1px solid rgba(201,163,95,.5);
  padding:8px 20px;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:#a4813f;
}
.note{
  margin-top:44px;text-align:center;
  font-style:italic;font-size:13.5px;color:var(--encre-doux);
}

/* ---------- guide des tailles ---------- */
.tableau{overflow-x:auto;margin-top:64px}
table.tailles{width:100%;border-collapse:collapse;background:var(--ivoire);min-width:640px}
table.tailles th{
  font-size:11px;letter-spacing:.25em;text-transform:uppercase;
  color:var(--champagne);font-weight:400;
  padding:20px 18px;text-align:center;
  border-bottom:1px solid rgba(201,163,95,.35);
}
table.tailles td{
  padding:17px 18px;text-align:center;
  font-size:14.5px;color:var(--encre);
  border-bottom:1px solid rgba(29,27,31,.07);
}
table.tailles td.t{font-family:var(--serif);font-size:19px;font-weight:500}

/* ---------- avis clients ---------- */
.avis{padding:110px 0 120px;background:var(--noir);overflow:hidden}
.avis-tete{text-align:center;margin-bottom:60px;padding:0 24px}
.avis-tete h2{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(32px,4vw,48px);color:var(--ivoire);margin-top:24px;
}
.avis-tete h2 em{font-style:italic;color:var(--champagne-clair)}
.avis-piste{
  display:flex;gap:26px;width:max-content;
  animation:defile 80s linear infinite;
  padding:0 13px;
}
.avis:hover .avis-piste{animation-play-state:paused}
.carte-avis{
  width:340px;flex:none;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(201,163,95,.28);
  border-radius:20px;
  padding:28px 30px;
}
.etoiles{color:var(--champagne);font-size:15px;letter-spacing:.35em}
.carte-avis p{
  margin-top:16px;
  font-size:14.5px;line-height:1.75;
  color:rgba(255,255,255,.82);
}
.carte-avis footer{
  background:none;padding:18px 0 0;margin-top:6px;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--champagne-clair);
}
.carte-avis footer small{
  display:block;margin-top:4px;
  color:rgba(255,255,255,.45);letter-spacing:.14em;font-size:10.5px;
}
@media(max-width:560px){.carte-avis{width:280px;padding:24px}}

/* ---------- promesses ---------- */
.promesses{padding:110px 0;background:var(--ivoire)}
.promesses .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:60px;text-align:center}
@media(max-width:900px){.promesses .wrap{grid-template-columns:1fr;gap:50px}}
.promesse .glyphe{
  font-family:var(--serif);font-style:italic;
  font-size:34px;color:var(--champagne);
}
.promesse h4{
  font-family:var(--sans);font-weight:400;
  font-size:12.5px;letter-spacing:.3em;text-transform:uppercase;
  margin:18px 0 12px;color:var(--encre);
}
.promesse p{color:var(--encre-doux);font-size:14.5px;max-width:280px;margin:0 auto}

/* ---------- newsletter ---------- */
.nouvelles{
  background:
    radial-gradient(900px 500px at 50% 120%,rgba(201,163,95,.14),transparent 70%),
    var(--noir-2);
  padding:120px 24px;text-align:center;
}
.nouvelles h2{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(32px,4vw,48px);color:var(--ivoire);
  margin-top:24px;
}
.nouvelles h2 em{font-style:italic;color:var(--champagne-clair)}
.nouvelles p{color:rgba(255,255,255,.65);max-width:460px;margin:22px auto 0;font-size:15.5px}
.formulaire{
  margin:44px auto 0;max-width:520px;
  display:flex;
  border:1px solid rgba(201,163,95,.45);
}
.formulaire input{
  flex:1;background:transparent;border:none;outline:none;
  padding:18px 24px;color:var(--ivoire);
  font-family:var(--sans);font-size:14px;letter-spacing:.04em;
}
.formulaire input::placeholder{color:rgba(255,255,255,.4)}
.formulaire button{
  background:var(--champagne);border:none;cursor:pointer;
  font-family:var(--sans);font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  padding:0 34px;color:var(--noir);
  transition:background .3s;
}
.formulaire button:hover{background:var(--champagne-clair)}
@media(max-width:560px){.formulaire{flex-direction:column}.formulaire button{padding:16px}}

/* ---------- footer ---------- */
footer{background:var(--noir);padding:70px 48px 40px;color:rgba(255,255,255,.55)}
.footer-haut{
  display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap;
  padding-bottom:50px;border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-haut .logo{font-size:22px}
.footer-col h5{
  font-size:11px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--champagne);font-weight:400;margin-bottom:18px;
}
.footer-col a{
  display:block;color:rgba(255,255,255,.55);text-decoration:none;
  font-size:14px;margin-bottom:10px;transition:color .3s;
}
.footer-col a:hover{color:var(--ivoire)}
.footer-bas{
  padding-top:30px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:12px;letter-spacing:.08em;color:rgba(255,255,255,.35);
}

/* ---------- achat / panier ---------- */
.achat{display:flex;gap:8px;margin-top:16px;justify-content:center}
.choix-taille{
  font-family:var(--sans);font-weight:300;font-size:12.5px;
  padding:10px;border:1px solid rgba(29,27,31,.22);
  background:#fff;color:var(--encre);border-radius:12px;
  cursor:pointer;outline:none;transition:border .3s;
}
.choix-taille:focus{border-color:var(--champagne)}
.choix-taille.manque{border-color:#b0413e;box-shadow:0 0 0 3px rgba(176,65,62,.15)}
.ajouter{
  font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  background:var(--noir-2);color:var(--champagne-clair);
  border:1px solid var(--noir-2);padding:10px 20px;border-radius:12px;
  cursor:pointer;transition:all .3s;
}
.ajouter:hover,.ajouter.fait{background:var(--champagne);border-color:var(--champagne);color:var(--noir)}
.panier-btn{
  position:relative;display:inline-flex;align-items:center;gap:9px;
  background:none;border:1px solid rgba(201,163,95,.6);color:var(--champagne-clair);
  font-family:var(--sans);font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  padding:10px 20px;border-radius:999px;cursor:pointer;transition:all .35s;
}
.panier-btn:hover{background:var(--champagne);color:var(--noir)}
.panier-badge{
  background:var(--champagne);color:var(--noir);border-radius:999px;
  font-size:11px;min-width:20px;height:20px;
  display:inline-flex;align-items:center;justify-content:center;padding:0 5px;
  transition:all .35s;
}
.panier-btn:hover .panier-badge{background:var(--noir);color:var(--champagne-clair)}
@media(max-width:820px){.panier-btn{padding:9px 14px;font-size:11px}}
.tsn-voile{
  position:fixed;inset:0;background:rgba(17,16,19,.55);
  opacity:0;pointer-events:none;transition:opacity .35s;z-index:90;
}
.tsn-voile.ouvert{opacity:1;pointer-events:auto}
.tiroir{
  position:fixed;top:0;right:0;bottom:0;width:400px;max-width:92vw;
  background:var(--ivoire);z-index:95;display:flex;flex-direction:column;
  transform:translateX(105%);transition:transform .4s cubic-bezier(.2,.7,.2,1);
  border-radius:24px 0 0 24px;
  box-shadow:-30px 0 80px -20px rgba(17,16,19,.5);
}
.tiroir.ouvert{transform:none}
.tiroir-tete{
  display:flex;align-items:center;justify-content:space-between;
  padding:24px 28px;border-radius:24px 0 0 0;
  background:linear-gradient(150deg,#201f23,#111013);
}
.tiroir-tete h4{font-family:var(--serif);font-weight:400;font-size:22px;color:var(--ivoire);margin:0}
.tiroir-fermer{background:none;border:none;color:rgba(255,255,255,.6);font-size:24px;cursor:pointer;transition:color .3s}
.tiroir-fermer:hover{color:var(--champagne-clair)}
.tiroir-corps{flex:1;overflow-y:auto;padding:14px 28px}
.tiroir-vide{text-align:center;color:var(--encre-doux);padding:50px 0;font-size:15px;line-height:2.1}
.tiroir-item{display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid rgba(29,27,31,.08)}
.tiroir-vignette{
  width:56px;height:68px;flex:none;
  object-fit:cover;object-position:center 22%;
  border-radius:12px;
  border:1px solid rgba(201,163,95,.35);
}
.tiroir-vignette.vide{display:inline-block;background:linear-gradient(160deg,#e9cfc2,#cfa896)}
.resume-vignette{
  width:44px;height:52px;flex:none;
  object-fit:cover;object-position:center 22%;
  border-radius:10px;
  border:1px solid rgba(201,163,95,.35);
}
.resume-ligne{align-items:center}
.resume-ligne span{flex:1}
.tiroir-item>div:first-child{flex:1}
.tiroir-item b{font-family:var(--serif);font-weight:500;font-size:18px;display:block;color:var(--encre)}
.tiroir-item small{color:var(--encre-doux);font-size:12.5px}
.tiroir-qte{display:flex;align-items:center;gap:10px}
.tiroir-qte button{
  width:26px;height:26px;border-radius:50%;
  border:1px solid rgba(29,27,31,.25);background:#fff;
  cursor:pointer;font-size:14px;line-height:1;color:var(--encre);transition:all .3s;
}
.tiroir-qte button:hover{border-color:var(--champagne);color:#a4813f}
.tiroir-prix{font-size:14px;color:#a4813f;min-width:48px;text-align:right}
.tiroir-pied{
  padding:22px 28px 26px;background:#fff;
  border-top:1px solid rgba(201,163,95,.35);border-radius:0 0 0 24px;
}
.livraison-promo{margin-bottom:18px;font-size:12.5px;color:var(--encre-doux);text-align:center;line-height:1.6}
.livraison-promo b{color:#a4813f;font-weight:400}
.livraison-barre{height:6px;border-radius:999px;background:rgba(29,27,31,.1);margin-top:10px;overflow:hidden}
.livraison-barre i{
  display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--champagne),var(--champagne-clair));
  transition:width .5s cubic-bezier(.2,.7,.2,1);
}
.tiroir-total{display:flex;justify-content:space-between;align-items:center;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--encre-doux);margin-bottom:16px}
.tiroir-total b{font-family:var(--serif);font-size:24px;letter-spacing:0;color:var(--encre)}
.tiroir-pied .btn{display:block;text-align:center;border-radius:14px}

/* ---------- page commande ---------- */
.commande-grille{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:start}
@media(max-width:900px){.commande-grille{grid-template-columns:1fr}}
.champs{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.champs .plein{grid-column:1/-1}
.champ label{display:block;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--encre-doux);margin-bottom:8px}
.champ input,.champ textarea{
  width:100%;font-family:var(--sans);font-weight:300;font-size:15px;color:var(--encre);
  background:#fff;border:1px solid rgba(29,27,31,.18);border-radius:14px;
  padding:14px 16px;outline:none;transition:border .3s;
}
.champ input:focus,.champ textarea:focus{border-color:var(--champagne)}
.btn-envoyer{
  margin-top:26px;width:100%;
  font-family:var(--sans);font-size:12px;letter-spacing:.3em;text-transform:uppercase;
  background:var(--champagne);color:var(--noir);
  border:none;border-radius:14px;padding:18px;cursor:pointer;transition:background .3s;
}
.btn-envoyer:hover{background:var(--champagne-clair)}
.resume{
  background:#fff;border:1px solid rgba(201,163,95,.35);border-radius:20px;
  padding:30px 30px 26px;position:sticky;top:110px;
}
.resume h3{font-family:var(--serif);font-weight:500;font-size:24px;margin-bottom:14px;color:var(--encre)}
.resume-ligne{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid rgba(29,27,31,.08);font-size:14.5px}
.resume-ligne small{color:var(--encre-doux)}
.resume-ligne b{color:#a4813f;font-weight:400}
.resume-total{border-bottom:none;margin-top:6px;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--encre-doux)}
.resume-total b{font-family:var(--serif);font-size:24px;letter-spacing:0;color:var(--encre)}
.paiement-note{margin-top:16px;font-size:12.5px;color:var(--encre-doux);font-style:italic;line-height:1.7}
.merci{text-align:center;padding:40px 0 20px}
.merci p{color:var(--encre-doux);margin-top:22px;line-height:2}