/*
 * Flownaely Café — design system
 * Pixel-art café cosy. Ported from the pilote deck.
 * Loaded site-wide after application.css.
 */

:root{
  /* palette — café cosy, tout chaud */
  --cream:#f1e4cb;
  --cream-2:#f7eedd;
  --plum:#2a2030;
  --plum-2:#221a28;
  --terra:#cf6f48;
  --terra-deep:#b1532c;
  --wood:#9c5a34;
  --sage:#869a5f;
  --ink:#2a2030;
  --paper:#f7eedd;
  --muted-ink:#6f5f55;
  --muted-paper:#c9b9c2;

  /* pixel-art intensity */
  --px-border:6px;
  --px-shadow:8px;
  --px-radius:4px;
  --shadow-cream:#7b4a2e;
  --shadow-plum:#120c18;

  /* échelle typographique */
  --type-display:clamp(46px, 8vw, 118px);
  --type-title:clamp(34px, 5vw, 66px);
  --type-subtitle:clamp(22px, 3vw, 40px);
  --type-body:clamp(17px, 1.6vw, 22px);
  --type-small:clamp(15px, 1.3vw, 18px);
  --type-label:clamp(14px, 1.2vw, 17px);

  --pad-x:clamp(20px, 6vw, 112px);
  --pad-block:clamp(48px, 7vw, 92px);
  --gap-title:38px;
  --gap-item:26px;

  --font-pixel:'Pixelify Sans', system-ui, sans-serif;
  --font-label:'Silkscreen', 'Pixelify Sans', system-ui, sans-serif;
  --font-body:'Nunito', system-ui, sans-serif;
}

*{ box-sizing:border-box; }

html, body{ height:100%; }

body{
  margin:0;
  background-color:var(--cream);
  background-image:radial-gradient(rgba(123,74,46,.10) 2.2px, transparent 2.3px);
  background-size:30px 30px;
  font-family:var(--font-body);
  font-size:var(--type-body);
  line-height:1.5;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}

/* ---------- typographie ---------- */
h1, h2, h3{ margin:0; text-wrap:balance; }

h1{
  font-family:var(--font-pixel);
  font-weight:700;
  font-size:var(--type-display);
  line-height:.98;
  letter-spacing:-.01em;
}
h2{
  font-family:var(--font-pixel);
  font-weight:600;
  font-size:var(--type-title);
  line-height:1.04;
}
h3{
  font-family:var(--font-body);
  font-weight:700;
  font-size:var(--type-subtitle);
  line-height:1.3;
}

a{ color:var(--terra-deep); }

.display{
  font-family:var(--font-pixel);
  font-weight:700;
  font-size:var(--type-display);
  line-height:.98;
  margin:0;
  letter-spacing:-.01em;
}
.title{
  font-family:var(--font-pixel);
  font-weight:600;
  font-size:var(--type-title);
  line-height:1.04;
  margin:0;
  text-wrap:balance;
}
.lead{
  font-size:var(--type-subtitle);
  font-weight:600;
  line-height:1.3;
  margin:0;
  max-width:23ch;
}
.body{
  font-size:var(--type-body);
  line-height:1.45;
  margin:0;
  color:var(--muted-ink);
  max-width:34ch;
}
.small{ font-size:var(--type-small); }
.terra{ color:var(--terra); }
.sage{ color:var(--sage); }

.eyebrow{
  font-family:var(--font-label);
  font-weight:700;
  font-size:var(--type-label);
  letter-spacing:.04em;
  color:var(--terra);
  display:flex; align-items:center; gap:14px;
  margin:0;
}
.eyebrow::before{
  content:""; width:42px; height:14px; background:var(--terra);
  image-rendering:pixelated;
  box-shadow:18px 0 0 var(--terra), 36px 0 0 var(--terra);
  transform:scaleX(.34);
  transform-origin:left;
}

.idx{
  font-family:var(--font-label);
  font-weight:700;
  font-size:clamp(28px, 3vw, 42px);
  color:var(--terra);
  line-height:1;
}

/* ---------- pastille / pill (CTA) ---------- */
.pill{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--font-label);
  font-size:var(--type-small);
  font-weight:400;
  padding:14px 22px;
  border:4px solid currentColor;
  border-radius:var(--px-radius);
  width:max-content;
  color:var(--terra-deep);
  background:transparent;
  cursor:pointer;
  text-decoration:none;
}
.pill .dot{ width:14px; height:14px; background:var(--terra); border-radius:2px; flex:0 0 auto; }

a.pill, button.pill,
input[type="submit"]{
  transition:transform .18s cubic-bezier(.2,.75,.25,1), filter .18s ease;
  transform-origin:center;
  will-change:transform;
}
a.pill:hover, button.pill:hover{ transform:scale(1.045); filter:brightness(1.06); }
a.pill:active, button.pill:active{ transform:scale(.99); }

/* ---------- cadres / frames pixel ---------- */
.frame{
  border:var(--px-border) solid var(--ink);
  border-radius:var(--px-radius);
  background:var(--cream-2);
  box-shadow:var(--px-shadow) var(--px-shadow) 0 var(--shadow-cream);
  overflow:hidden;
}
.world{
  display:block; width:100%; height:100%;
  object-fit:cover;
  image-rendering:pixelated;
}
.sprite{ image-rendering:pixelated; display:block; }

.pixstrip{
  height:14px; width:100%;
  background:repeating-linear-gradient(90deg, var(--terra) 0 14px, transparent 14px 28px);
  image-rendering:pixelated;
  opacity:.9;
}

.contact{
  display:flex; align-items:center; gap:18px;
  font-family:var(--font-pixel);
  font-size:var(--type-small);
  padding:20px 26px;
  border:5px solid var(--paper);
  border-radius:var(--px-radius);
  box-shadow:var(--px-shadow) var(--px-shadow) 0 var(--shadow-plum);
  background:rgba(255,255,255,.04);
  color:var(--paper);
  text-decoration:none;
  transition:transform .18s cubic-bezier(.2,.75,.25,1), filter .18s ease;
}
.contact:hover{ transform:scale(1.045); filter:brightness(1.06); }
.contact .tag{ width:16px; height:16px; background:#e9925f; border-radius:2px; image-rendering:pixelated; flex:0 0 auto; }

/* ---------- layout helpers ---------- */
.row{ display:flex; }
.col{ display:flex; flex-direction:column; }
.grow{ flex:1 1 auto; }
.between{ justify-content:space-between; }

/* ---------- navigation ---------- */
body > nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  padding:16px var(--pad-x);
  background:var(--plum);
  background-image:radial-gradient(rgba(255,255,255,.05) 2.2px, transparent 2.3px);
  background-size:30px 30px;
}
body > nav > div{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }

/* bouton de déconnexion, calé à droite de la barre de navigation */
body > nav form.nav-logout{ margin:0; margin-left:auto; }
body > nav form.nav-logout button{
  font-family:var(--font-label);
  font-size:var(--type-label);
  color:#e9925f;
  background:transparent;
  border:2px solid #e9925f;
  border-radius:var(--px-radius);
  padding:6px 14px;
  cursor:pointer;
}
body > nav form.nav-logout button:hover{ color:var(--paper); border-color:var(--paper); }
body > nav a{
  font-family:var(--font-label);
  font-size:var(--type-label);
  letter-spacing:.03em;
  color:var(--paper);
  text-decoration:none;
  padding:6px 4px;
}
body > nav a:hover{ color:#e9925f; }

/* marque « Flownaely Café » dans la barre de navigation */
body > nav a.nav-brand{
  font-family:var(--font-pixel);
  font-weight:700;
  font-size:32px;
  line-height:1;
  letter-spacing:.01em;
  color:var(--paper);
  margin-right:10px;
  padding:6px 4px;
}
body > nav a.nav-brand .terra{ color:var(--terra); }
body > nav a.nav-brand:hover{ color:var(--paper); filter:brightness(1.08); }
body > nav form{ display:inline; margin:0; }
body > nav button{
  font-family:var(--font-label);
  font-size:var(--type-label);
  color:var(--muted-paper);
  background:transparent;
  border:2px solid var(--muted-paper);
  border-radius:var(--px-radius);
  padding:6px 12px;
  cursor:pointer;
}
body > nav button:hover{ color:#e9925f; border-color:#e9925f; }

/* ---------- flash messages ---------- */
body > p[style*="green"],
body > p[style*="red"]{
  margin:0;
  padding:14px var(--pad-x);
  font-weight:600;
}

/* ---------- forms (login / signup etc.) ---------- */
.form-card{
  max-width:480px;
  margin:clamp(32px, 6vw, 72px) auto;
  padding:clamp(28px, 4vw, 44px);
  border:var(--px-border) solid var(--ink);
  border-radius:var(--px-radius);
  background:var(--cream-2);
  box-shadow:var(--px-shadow) var(--px-shadow) 0 var(--shadow-cream);
}
.form-card h1{
  font-size:var(--type-title);
  margin-bottom:8px;
}

form > div{ margin:0 0 18px; display:flex; flex-direction:column; gap:6px; }

label{
  font-family:var(--font-label);
  font-size:var(--type-label);
  letter-spacing:.03em;
  color:var(--muted-ink);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="date"],
textarea,
select{
  font-family:var(--font-body);
  font-size:var(--type-body);
  color:var(--ink);
  width:100%;
  padding:12px 14px;
  background:var(--paper);
  border:3px solid var(--ink);
  border-radius:var(--px-radius);
  outline:none;
}
input:focus, textarea:focus, select:focus{
  border-color:var(--terra);
  box-shadow:0 0 0 3px rgba(207,111,72,.25);
}

input[type="submit"], button[type="submit"]{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--font-label);
  font-size:var(--type-small);
  font-weight:400;
  padding:14px 22px;
  margin-top:6px;
  border:4px solid var(--terra-deep);
  border-radius:var(--px-radius);
  background:var(--terra);
  color:var(--paper);
  cursor:pointer;
  width:max-content;
  transition:transform .18s cubic-bezier(.2,.75,.25,1), filter .18s ease;
}
input[type="submit"]:hover, button[type="submit"]:hover{ transform:scale(1.045); filter:brightness(1.06); }
input[type="submit"]:active, button[type="submit"]:active{ transform:scale(.99); }

/* ---------- main content padding ---------- */
body > nav ~ *:not(.deck){ }