/* NAU CAFE — Fidélité — styles (mobile-first) */

/* Transitions entre pages (View Transitions API) — fondu doux, natif, progressif */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.28s;
  animation-timing-function: cubic-bezier(0.3, 0, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

:root{
  --bg:#f5f0ea; --card:#faf7f2; --text:#2c1a0e; --muted:rgba(44,26,14,.6);
  --accent:#b99272; --wood:#2c1a0e; --dark:#1a0f08; --line:rgba(44,26,14,.12);
  --ok:#3f7d5b; --err:#b4432f;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family:'Roboto',system-ui,sans-serif; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; min-height:100vh;
}

/* Header / footer */
.nf-top{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 18px; background:var(--wood);
  position:sticky; top:0; z-index:10;
}
.nf-brand{display:inline-flex; align-items:center; gap:10px; color:#fff; text-decoration:none;
  font-family:'Oswald',sans-serif; letter-spacing:.14em; text-transform:uppercase; font-size:14px}
.nf-brand img{display:block; border-radius:50%}
.nf-top-link{color:rgba(255,255,255,.8); text-decoration:none; font-family:'Oswald',sans-serif;
  font-size:12px; letter-spacing:.12em; text-transform:uppercase}
.nf-top-link:hover{color:var(--accent)}
.nf-main{flex:1; width:100%; max-width:520px; margin:0 auto; padding:26px 18px}
.nf-foot{max-width:520px; margin:0 auto; padding:22px 18px 34px; color:var(--muted); font-size:12px; text-align:center}

/* Titres */
h1,h2,h3{font-family:'Gloock',Georgia,serif; color:var(--wood); font-weight:400; line-height:1.2; margin:0 0 12px}
h1{font-size:30px}
h2{font-size:22px}
.nf-sub{font-family:'Oswald',sans-serif; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); font-size:12px; margin-bottom:8px}

/* Cartes */
.nf-card{background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:22px; margin-bottom:18px; box-shadow:0 8px 30px rgba(44,26,14,.05)}
.nf-card--wood{background:var(--wood); border-color:var(--wood); color:#fff}
.nf-card--wood h1,.nf-card--wood h2{color:#fff}

/* Formulaires */
.nf-field{margin-bottom:14px}
.nf-field label{display:block; font-family:'Oswald',sans-serif; font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin-bottom:6px}
.nf-field input{
  width:100%; padding:14px 16px; font-size:16px; color:var(--text);
  background:#fff; border:1px solid var(--line); border-radius:10px; font-family:inherit;
}
.nf-field input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(185,146,114,.2)}

/* Boutons */
.nf-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%;
  padding:15px 22px; border:none; border-radius:999px; cursor:pointer;
  font-family:'Oswald',sans-serif; font-size:14px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; text-decoration:none; background:var(--wood); color:#fff;
  transition:background .25s ease, transform .1s ease;
}
.nf-btn:hover{background:var(--accent)}
.nf-btn:active{transform:scale(.98)}
.nf-btn--ghost{background:transparent; color:var(--wood); border:1.5px solid var(--line)}
.nf-btn--ghost:hover{background:transparent; border-color:var(--accent); color:var(--accent)}
.nf-btn--accent{background:var(--accent)}
.nf-btn[disabled]{opacity:.45; cursor:not-allowed}
.nf-btn + .nf-btn{margin-top:10px}

/* Messages */
.nf-alert{padding:14px 16px; border-radius:10px; margin-bottom:18px; font-size:14px}
.nf-alert--ok{background:rgba(63,125,91,.12); color:var(--ok); border:1px solid rgba(63,125,91,.3)}
.nf-alert--err{background:rgba(180,67,47,.1); color:var(--err); border:1px solid rgba(180,67,47,.3)}

/* Bloc points */
.nf-points{text-align:center; padding:10px 0 4px}
.nf-points-num{font-family:'Gloock',serif; font-size:64px; line-height:1; color:var(--wood)}
.nf-points-lbl{font-family:'Oswald',sans-serif; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); font-size:12px; margin-top:6px}
.nf-card--wood .nf-points-num{color:#fff}
.nf-card--wood .nf-points-lbl{color:rgba(255,255,255,.7)}

/* Progression */
.nf-progress{margin:18px 0 6px}
.nf-progress-bar{height:12px; background:rgba(44,26,14,.1); border-radius:999px; overflow:hidden}
.nf-card--wood .nf-progress-bar{background:rgba(255,255,255,.15)}
.nf-progress-fill{height:100%; background:var(--accent); border-radius:999px; transition:width .5s ease}
.nf-progress-txt{font-size:13px; color:var(--muted); margin-top:8px; text-align:center}
.nf-card--wood .nf-progress-txt{color:rgba(255,255,255,.8)}

/* Carte à tampons */
.nf-stamps{
  display:grid; grid-template-columns:repeat(5,1fr); gap:10px;
  margin:20px 0 10px; justify-items:center;
}
.nf-stamp{
  width:100%; max-width:52px; aspect-ratio:1; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Oswald',sans-serif; font-size:15px;
  border:2px dashed rgba(255,255,255,.3); color:rgba(255,255,255,.45);
  background:rgba(255,255,255,.04); transition:transform .15s ease;
}
.nf-stamp.is-on{
  border:2px solid var(--accent); background:var(--accent);
  color:#2c1a0e; font-size:20px; box-shadow:0 4px 12px rgba(185,146,114,.35);
}
/* Variante sur fond clair (ex: fiche staff) */
.is-client .nf-card:not(.nf-card--wood) .nf-stamp{
  border-color:var(--line); color:var(--muted); background:#fff;
}

/* Alerte récompense disponible (fiche staff) */
.nf-reward-alert{
  background:var(--accent);
  color:#2c1a0e;
  border-radius:12px;
  padding:16px 18px;
  margin-bottom:16px;
  text-align:center;
  line-height:1.5;
  box-shadow:0 6px 18px rgba(185,146,114,.4);
  animation:nf-reward-pulse 1.6s ease-in-out infinite;
}
.nf-reward-alert strong{
  display:block;
  font-family:'Oswald',sans-serif;
  font-size:17px;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.nf-reward-alert span{ font-size:14px; }
@keyframes nf-reward-pulse{
  0%,100%{ box-shadow:0 6px 18px rgba(185,146,114,.4); }
  50%{ box-shadow:0 6px 26px rgba(185,146,114,.75); }
}
@media (prefers-reduced-motion: reduce){
  .nf-reward-alert{ animation:none; }
}

/* Barème sous les tampons */
.nf-baremes{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px;
  margin-top:16px; padding-top:14px; border-top:1px solid rgba(255,255,255,.15);
  font-size:13px; color:rgba(255,255,255,.7);
}
.nf-baremes b{color:#fff; font-family:'Oswald',sans-serif; font-weight:500}
.nf-baremes-dot{color:var(--accent)}

/* Badge récompense */
.nf-reward{display:flex; align-items:center; gap:10px; margin-top:14px; padding:12px 16px;
  background:rgba(185,146,114,.15); border:1px dashed var(--accent); border-radius:10px;
  color:var(--wood); font-size:14px}
.nf-card--wood .nf-reward{color:#fff; background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.4)}

/* QR */
.nf-qr{display:flex; justify-content:center; padding:12px 0}
.nf-qr > div,.nf-qr canvas,.nf-qr img{background:#faf7f2; padding:12px; border-radius:12px}
.nf-hint{font-size:13px; color:var(--muted); text-align:center; margin-top:8px}

/* Historique */
.nf-hist{list-style:none; margin:8px 0 0; padding:0}
.nf-hist li{display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:12px 0; border-bottom:1px solid var(--line)}
.nf-hist li:last-child{border-bottom:none}
.nf-hist .nf-hist-main{color:var(--text); font-size:14px}
.nf-hist .nf-hist-date{color:var(--muted); font-size:12px}
.nf-hist .nf-plus{color:var(--ok); font-family:'Oswald',sans-serif; font-weight:600; white-space:nowrap}
.nf-hist .nf-minus{color:var(--err); font-family:'Oswald',sans-serif; font-weight:600; white-space:nowrap}

/* Fiche client (staff) */
.nf-cust{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:6px}
.nf-cust-name{font-family:'Gloock',serif; font-size:24px; color:var(--wood)}
.nf-cust-phone{color:var(--muted); font-size:14px}
.nf-kpi{display:flex; gap:12px; margin:14px 0}
.nf-kpi div{flex:1; text-align:center; background:#fff; border:1px solid var(--line); border-radius:10px; padding:12px}
.nf-kpi b{display:block; font-family:'Gloock',serif; font-size:26px; color:var(--wood)}
.nf-kpi span{font-family:'Oswald',sans-serif; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}

/* Pavé numérique staff */
.nf-dial-display{
  font-family:'Oswald',sans-serif; font-size:26px; letter-spacing:.06em;
  text-align:center; color:var(--wood);
  background:#fff; border:1px solid var(--line); border-radius:10px;
  padding:12px 10px; margin:6px 0 14px; min-height:56px;
}
.nf-dialpad{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
}
.nf-dialpad button{
  padding:0; height:62px; font-size:24px; font-family:'Oswald',sans-serif;
  color:var(--wood); background:#fff; border:1px solid var(--line); border-radius:12px;
  cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  transition:background .12s ease, transform .08s ease;
}
.nf-dialpad button:active{background:var(--accent); color:#fff; transform:scale(.96)}
.nf-dialpad .nf-dial-aux{background:rgba(44,26,14,.05); font-size:20px; color:var(--muted)}

/* Aperçu des points sous le pavé montant */
.nf-amt-preview{
  text-align:center; margin:10px 0 2px; min-height:18px;
  font-family:'Oswald',sans-serif; letter-spacing:.06em; text-transform:uppercase;
  font-size:13px; color:var(--accent);
}

/* Liste clients (staff) */
.nf-client{ padding:16px 18px; }
.nf-client-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.nf-client-name{ font-family:'Gloock',serif; font-size:19px; color:var(--wood); }
.nf-client-phone{ font-family:'Oswald',sans-serif; font-size:13px; letter-spacing:.04em; color:var(--muted); margin-top:2px; }
.nf-client-pts{ text-align:center; flex-shrink:0; }
.nf-client-pts b{ display:block; font-family:'Gloock',serif; font-size:26px; color:var(--wood); line-height:1; }
.nf-client-pts span{ font-family:'Oswald',sans-serif; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.nf-client-meta{ margin-top:10px; font-size:13px; color:var(--muted); }
.nf-client-meta strong{ color:var(--wood); }
.nf-client-rew{ color:var(--wood); }
.nf-client-edit{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:14px; padding-top:14px; border-top:1px solid var(--line);
}
.nf-client-edit label{
  font-family:'Oswald',sans-serif; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); flex:1 1 100%;
}
.nf-client-edit input[type="number"]{
  width:90px; padding:10px 12px; font-size:16px; text-align:center;
  border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--text);
}
.nf-client-edit .nf-btn{ width:auto; flex:1; padding:11px 18px; }
.nf-client-link{
  display:inline-block; margin-top:12px;
  font-family:'Oswald',sans-serif; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent); text-decoration:none;
}
.nf-client-link:hover{ color:var(--wood); }

/* Historique éditable (fiche client) */
.nf-hist-row{ display:block; padding:14px 0; border-bottom:1px solid var(--line); }
.nf-hist-row:last-child{ border-bottom:none; }
.nf-hist-line{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.nf-hist-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px; }
.nf-hist-edit{ display:flex; align-items:center; gap:6px; }
.nf-hist-edit input[type="text"]{
  width:84px; padding:8px 10px; font-size:15px; text-align:right;
  border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--text);
}
.nf-hist-eur{ color:var(--muted); font-size:14px; }
.nf-btn--sm{ width:auto; padding:9px 14px; font-size:11px; }
.nf-hist-del{
  border:1px solid var(--line); background:#fff; color:var(--err);
  border-radius:8px; padding:8px 11px; font-size:15px; cursor:pointer; line-height:1;
}
.nf-hist-del:active{ background:rgba(180,67,47,.08); }

/* Total dépensé (fiche staff) */
.nf-cust-total{
  margin:12px 0 0; text-align:center;
  font-size:14px; color:var(--muted);
}
.nf-cust-total strong{
  font-family:'Oswald',sans-serif; color:var(--wood); font-size:16px; letter-spacing:.02em;
}

/* Suggestions autocomplete (recherche téléphone) */
.nf-suggest{ margin:0 0 12px; max-height:198px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.nf-suggest:empty{ margin:0; }
.nf-suggest-item{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 14px; margin-bottom:6px;
  background:#fff; border:1px solid var(--line); border-radius:10px;
  text-decoration:none; color:var(--text);
  transition:border-color .15s ease, background .15s ease;
}
.nf-suggest-item:last-child{ margin-bottom:0; }
.nf-suggest-item:active{ background:rgba(185,146,114,.12); border-color:var(--accent); }
.nf-suggest-name{ font-family:'Gloock',serif; font-size:17px; color:var(--wood); }
.nf-suggest-phone{ font-family:'Oswald',sans-serif; font-size:14px; letter-spacing:.04em; color:var(--muted); white-space:nowrap; }

/* Scanner */
#reader{width:100%; border-radius:12px; overflow:hidden; border:1px solid var(--line)}
.nf-or{display:flex; align-items:center; gap:12px; color:var(--muted); font-size:12px;
  text-transform:uppercase; letter-spacing:.16em; margin:18px 0}
.nf-or::before,.nf-or::after{content:''; flex:1; height:1px; background:var(--line)}

.nf-center{text-align:center}
.nf-mt{margin-top:16px}
a.nf-link{color:var(--accent); text-decoration:none; font-weight:500}
a.nf-link:hover{text-decoration:underline}