/* ============ NAHIRA BEAUTY NAILS — styles boutique ============ */
:root{
  --noir:#060406; --noir-2:#0E090C; --carte:#150E12;
  --rose:#F06FA7; --rose-vif:#FF7EB6; --rose-pale:#F8C6DC;
  --or:#E8C27A; --or-vif:#F5D89A;
  --blanc:#FFF7FA;
  --texte:rgba(255,247,250,.92);
  --texte-doux:rgba(255,247,250,.6);
  --texte-faible:rgba(255,247,250,.38);
  --ligne:rgba(232,194,122,.16);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--noir); color:var(--texte);
  font-family:'Cormorant Garamond',serif; font-size:18px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

/* ---------- NAV ---------- */
.b-nav{
  position:sticky; top:0; z-index:50;
  background:rgba(6,4,6,.85); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--ligne);
}
.b-nav-inner{
  max-width:1100px; margin:0 auto; padding:14px 22px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.b-logo{text-decoration:none; text-align:center; line-height:1.05}
.b-logo .l1{font-family:'Cormorant Garamond',serif; font-size:1.05rem; letter-spacing:.06em; color:var(--blanc)}
.b-logo .l1 span{color:var(--rose)}
.b-logo .l2{font-family:'Parisienne',cursive; color:var(--or); font-size:1.05rem; display:block}
.b-links{display:flex; gap:20px; list-style:none; align-items:center}
.b-links a{
  font-family:'Montserrat',sans-serif; font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--texte-doux); text-decoration:none; transition:color .25s;
}
.b-links a:hover{color:var(--rose)}
.cart-badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 5px; margin-left:4px;
  background:var(--rose); color:var(--noir); border-radius:99px;
  font-size:.68rem; font-weight:600; vertical-align:middle;
}
.cart-badge:empty{display:none}

/* ---------- STRUCTURE ---------- */
.b-page{max-width:1100px; margin:0 auto; padding:40px 22px 90px}
.b-eyebrow{
  font-family:'Montserrat',sans-serif; font-size:.68rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--or); margin-bottom:12px;
}
h1.b-titre{font-weight:400; font-size:clamp(2rem,5.5vw,3rem); line-height:1.1; color:var(--blanc)}
.b-script{font-family:'Parisienne',cursive; color:var(--rose); font-weight:400}

/* ---------- BOUTONS ---------- */
.btn{
  display:inline-block; border:none; cursor:pointer; text-decoration:none; text-align:center;
  font-family:'Montserrat',sans-serif; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
  padding:16px 34px; border-radius:99px; transition:all .3s;
}
.btn-or{
  background:linear-gradient(135deg,var(--or),var(--or-vif)); color:#1a1208; font-weight:600;
}
.btn-or:hover{transform:translateY(-2px); box-shadow:0 8px 30px rgba(232,194,122,.35)}
.btn-ghost{
  background:transparent; color:var(--texte-doux); border:1px solid var(--ligne);
}
.btn-ghost:hover{color:var(--blanc); border-color:var(--or)}
.btn[disabled]{opacity:.45; cursor:not-allowed; transform:none!important; box-shadow:none!important}

/* ---------- CARTES / PANNEAUX ---------- */
.panneau{
  background:var(--carte); border:1px solid var(--ligne);
  border-radius:18px; padding:26px;
}

/* ---------- FORMULAIRES ---------- */
.champ{margin-bottom:16px}
.champ label{
  display:block; font-family:'Montserrat',sans-serif; font-size:.68rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--texte-doux); margin-bottom:7px;
}
.champ input, .champ textarea{
  width:100%; background:var(--noir-2); border:1px solid var(--ligne);
  border-radius:10px; padding:13px 15px; color:var(--blanc);
  font-family:'Montserrat',sans-serif; font-size:.9rem;
}
.champ input:focus, .champ textarea:focus{outline:none; border-color:var(--rose)}

/* ---------- TAILLES ---------- */
.tailles{display:flex; flex-wrap:wrap; gap:10px}
.taille-chip{
  font-family:'Montserrat',sans-serif; font-size:.78rem; letter-spacing:.1em;
  padding:11px 18px; border-radius:99px; cursor:pointer;
  background:var(--noir-2); border:1px solid var(--ligne); color:var(--texte-doux);
  transition:all .25s; user-select:none;
}
.taille-chip:hover{border-color:var(--rose); color:var(--blanc)}
.taille-chip.active{
  background:var(--rose); border-color:var(--rose); color:var(--noir); font-weight:600;
}

/* ---------- DIVERS ---------- */
.note-or{
  border-left:2px solid var(--or); background:rgba(232,194,122,.06);
  padding:14px 18px; border-radius:0 10px 10px 0; font-size:.95rem; color:var(--texte-doux);
}
.b-msg{
  font-family:'Montserrat',sans-serif; font-size:.85rem; padding:13px 16px;
  border-radius:10px; margin:14px 0; display:none;
}
.b-msg.ok{display:block; background:rgba(110,231,160,.1); color:#8be3ad; border:1px solid rgba(110,231,160,.25)}
.b-msg.err{display:block; background:rgba(240,111,111,.1); color:#f0a3a3; border:1px solid rgba(240,111,111,.25)}
.skeleton{color:var(--texte-faible); font-family:'Montserrat',sans-serif; font-size:.85rem; letter-spacing:.1em}

/* ---------- FOOTER ---------- */
.b-footer{
  border-top:1px solid var(--ligne); padding:30px 22px 50px;
  text-align:center; color:var(--texte-faible);
  font-family:'Montserrat',sans-serif; font-size:.72rem; letter-spacing:.08em;
}
.b-footer a{color:var(--texte-faible); text-decoration:none}
.b-footer a:hover{color:var(--or)}
.b-footer .liens{display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:10px}

@media(max-width:680px){
  .b-links{gap:13px}
  .b-links a{font-size:.65rem; letter-spacing:.1em}
}

/* ---- MENU MOBILE ---- */
.b-burger{
  display:none; background:none; border:1px solid var(--ligne); color:var(--texte-doux);
  border-radius:8px; padding:8px 13px; cursor:pointer; font-size:1.05rem; line-height:1; flex:none;
}
.b-menu-mobile{
  display:none; flex-direction:column;
  border-top:1px solid var(--ligne); background:rgba(6,4,6,.97);
}
.b-menu-mobile a{
  font-family:'Montserrat',sans-serif; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--texte-doux); text-decoration:none; padding:14px 22px; display:block;
  border-bottom:1px solid rgba(232,194,122,.08); transition:color .2s, background .2s;
}
.b-menu-mobile a:last-child{border-bottom:none}
.b-menu-mobile a:hover{color:var(--rose); background:rgba(240,111,167,.04)}
.b-menu-mobile.ouvert{display:flex}
@media(max-width:680px){
  .b-burger{display:block}
  .b-links{display:none !important}
}

/* ---- BOUTON RETOUR ---- */
.b-retour{
  background:none; border:none; cursor:pointer; color:var(--texte-faible);
  font-family:'Montserrat',sans-serif; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  padding:0 0 22px; display:block; transition:color .25s;
}
.b-retour:hover{color:var(--texte-doux)}

/* Fix hover transform sur écrans tactiles (iOS Safari) */
@media(hover:none){
  .carte:hover{transform:none; box-shadow:none}
}