/* Sarimbatim — pages de compte et d'administration. Palette et typographie DzairNa (BRAND.md). */
:root {
  --velours: #14100f; --bois: #211915; --encre: #0e0b0a; --creme: #f8efe2; --sable: #c9ac88;
  --or: #dba94f; --or-pale: #f0cf86; --braise: #c0563a; --filet: rgba(201, 172, 136, 0.16);
  --doux: cubic-bezier(0.2, 0.7, 0.1, 1);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--encre) radial-gradient(90% 60% at 70% 0%, rgba(40, 60, 64, 0.35), transparent 70%) no-repeat;
  color: var(--creme);
  font: 15px/1.6 "DM Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
a { color: var(--or); text-decoration: none; }
a:hover { color: var(--or-pale); }
:focus-visible { outline: 1px solid var(--or); outline-offset: 3px; }
h1, h2, h3 { font-family: "Playfair Display", Georgia, serif; font-weight: 600; margin: 0; letter-spacing: -0.01em; }

.marque { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--creme); font-family: "Playfair Display", Georgia, serif; font-weight: 600; font-size: 1.1rem; }
.marque:hover { color: var(--creme); }
.surtitre { display: flex; align-items: center; gap: 0.9rem; margin: 0 0 0.8rem; font-size: 0.68rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--sable); }
.surtitre::before { content: ""; width: 2.2em; height: 1px; background: rgba(219, 169, 79, 0.7); }
.discret { color: rgba(201, 172, 136, 0.7); font-size: 0.85rem; }

/* ─── formulaires ─── */
.champ { display: flex; flex-direction: column; gap: 0.4rem; }
.champ > span { font-size: 0.64rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--sable); }
.champ input, .champ select, .champ textarea {
  width: 100%; padding: 0.5rem 0 0.6rem; font: inherit; font-size: 16px; color: var(--creme);
  background: transparent; border: 0; border-bottom: 1px solid rgba(201, 172, 136, 0.35); border-radius: 0; outline: none;
  transition: border-color 0.3s;
}
.champ textarea { resize: vertical; min-height: 4.5rem; }
.champ select option { background: var(--velours); }
.champ input:focus, .champ select:focus, .champ textarea:focus { border-bottom-color: var(--or); }
.champ em { font-size: 0.78rem; font-style: normal; color: #e08a70; }
.coche { display: flex; gap: 0.8rem; align-items: flex-start; font-size: 0.82rem; color: rgba(248, 239, 226, 0.75); cursor: pointer; }
.coche input { margin-top: 0.3rem; accent-color: var(--or); }
.btnOr {
  display: inline-flex; justify-content: center; align-items: center; gap: 0.6rem;
  padding: 0.95rem 1.5rem; font: 500 0.7rem "DM Sans", sans-serif; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--or); background: none; border: 1px solid rgba(219, 169, 79, 0.55); border-radius: 12px; cursor: pointer;
  transition: border-color 0.3s, color 0.3s, box-shadow 0.5s;
}
.btnOr:hover:not(:disabled) { border-color: var(--or); color: var(--or-pale); box-shadow: 0 0 2.2rem -0.6rem rgba(219, 169, 79, 0.4); }
/* relief (3D léger), comme les boutons dorés à contour de la galerie : un cadre tout autour — le filet doré, doublé
   dedans d'un filet sombre puis d'une arête claire, un filet sombre dehors et un halo (pas d'épaisseur dessous) */
.btnOr {
  border-color: rgba(240, 207, 134, 0.8);
  background: linear-gradient(180deg, rgba(40, 32, 24, 0.95), rgba(14, 11, 10, 0.97));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 0 0 2px rgba(240, 207, 134, 0.2), inset 0 0 10px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 12px rgba(219, 169, 79, 0.18);
}
.btnOr:hover:not(:disabled) {
  border-color: var(--or-pale);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 0 0 2px rgba(240, 207, 134, 0.3), inset 0 0 10px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 20px 2px rgba(219, 169, 79, 0.4);
}
.btnOr:disabled { opacity: 0.4; cursor: default; }
.btnLigne {
  padding: 0 0 0.4em; font: 500 0.68rem "DM Sans", sans-serif; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--creme); background: linear-gradient(var(--or), var(--or)) left bottom / 100% 1px no-repeat; border: 0; cursor: pointer;
}
.btnLigne:hover { color: var(--or-pale); }
.btnLigne.danger { color: #e08a70; background-image: linear-gradient(#c0563a, #c0563a); }
.message { margin: 0; padding: 0.8rem 0.9rem; font-size: 0.86rem; line-height: 1.5; border-left: 2px solid var(--braise); background: rgba(192, 86, 58, 0.08); }
.message.ok { border-left-color: var(--or); background: rgba(219, 169, 79, 0.07); }

/* ─── pages d'accès (connexion / inscription) ─── */
.acces { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1.25rem; }
.carteAcces { width: min(26rem, 100%); }
.carteAcces header { text-align: center; margin-bottom: 2.2rem; }
.carteAcces header .marque { margin-bottom: 1.6rem; }
.carteAcces h1 { font-size: 2rem; }
.surtitreCentre { justify-content: center; margin-top: 0.4rem; }
.surtitreCentre::after { content: ""; width: 2.2em; height: 1px; background: rgba(219, 169, 79, 0.7); }
.carteAcces header p { margin: 0.4rem 0 0; color: rgba(248, 239, 226, 0.65); }
.carteAcces form { display: flex; flex-direction: column; gap: 1.2rem; padding: 2rem; border: 1px solid var(--filet); background: rgba(20, 16, 15, 0.7); }
.carteAcces .deux { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.carteAcces .pied { margin-top: 1.4rem; text-align: center; font-size: 0.88rem; color: rgba(248, 239, 226, 0.65); }

/* ─── espace compte ─── */
.entetePage { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.4rem clamp(1.25rem, 4vw, 3rem); border-bottom: 1px solid var(--filet); }
.entetePage nav { display: flex; gap: 1.6rem; align-items: center; }
.entetePage nav a, .entetePage nav button { font-size: 0.68rem; letter-spacing: 0.26em; text-transform: uppercase; }
.page { max-width: 64rem; margin: 0 auto; padding: 2.6rem clamp(1.25rem, 4vw, 3rem) 4rem; }
.page h1 { font-size: clamp(2rem, 4vw, 2.8rem); }
.grille2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 3rem; margin-top: 2.4rem; }
.bloc { border-top: 1px solid var(--filet); padding-top: 1.4rem; }
.bloc h2 { font-size: 1.35rem; margin-bottom: 1.2rem; }
.pile { display: flex; flex-direction: column; gap: 1.1rem; }
.commande { border: 1px solid var(--filet); padding: 1.1rem 1.2rem; margin-bottom: 0.9rem; background: rgba(20, 16, 15, 0.55); }
.commande .haut { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: baseline; }
.commande .numero { font-family: ui-monospace, "Cascadia Mono", monospace; font-size: 0.9rem; }
.commande ul { margin: 0.7rem 0 0; padding: 0; list-style: none; font-size: 0.88rem; color: rgba(248, 239, 226, 0.78); }
.commande .total { color: var(--or-pale); font-variant-numeric: tabular-nums; }
.statut { display: inline-block; padding: 0.15rem 0.6rem; font-size: 0.7rem; letter-spacing: 0.08em; border: 1px solid currentColor; }
.statut[data-s="PENDING"] { color: #e6c46a; } .statut[data-s="PAID"] { color: #8fb3d9; } .statut[data-s="PREPARING"] { color: #c3a2e0; }
.statut[data-s="SHIPPED"] { color: #9aa6e8; } .statut[data-s="DELIVERED"] { color: #8fcf9a; } .statut[data-s="CANCELLED"] { color: #e08a70; }

@media (max-width: 760px) {
  .grille2 { grid-template-columns: 1fr; gap: 2rem; }
  .carteAcces form { padding: 1.4rem; }
  .carteAcces .deux { grid-template-columns: 1fr; }
}