/* Light App RedPeak-Prodys — charte alignée sur redpeaksolutions.ch
   Inter, fond ardoise clair, cartes blanches arrondies, dégradé rouge → orange du logo. */

@font-face {
  font-family: "Inter";
  src: url("fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --bg: #F1F5F9;          /* fond du site RedPeak */
  --card: #FFFFFF;
  --ink: #0F172A;         /* titres */
  --ink-2: #334155;       /* texte */
  --muted: #64748B;
  --line: #E2E8F0;
  --soft: #F8FAFC;
  --red: #E8483B;         /* logo, haut du dégradé */
  --orange: #F5A54A;      /* logo, bas du dégradé */
  --accent: #EC6A3C;      /* orange RedPeak plein */
  --grad: linear-gradient(135deg, var(--red), var(--orange));
  --blue: #2563EB;        /* bleu du site : badge AH 26/27 */
  --blue-soft: #DBEAFE;
  --amber: #F59E0B;
  --radius: 16px;
  --shadow: 0 1px 2px rgb(15 23 42 / .04), 0 8px 24px -8px rgb(15 23 42 / .12);
  --shadow-lg: 0 20px 25px -5px rgb(15 23 42 / .12), 0 8px 10px -6px rgb(15 23 42 / .10);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font: 500 15px/1.5 var(--font);
  background: var(--bg);
  color: var(--ink-2);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
h1, h2, h3, h4 { color: var(--ink); letter-spacing: -.01em; }

/* ---------- En-tête ---------- */
.bar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: calc(.55rem + env(safe-area-inset-top, 0px)) 1rem .55rem;
  background: rgb(255 255 255 / .92);
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.bar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--grad);
}
.brand { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.logo { height: 38px; width: auto; display: block; }
.sep { width: 1px; height: 28px; background: var(--line); }
.brand-sub { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-sub strong { color: var(--ink); font-weight: 800; font-size: 1rem; letter-spacing: -.01em; }
.brand-sub span { font-size: .75rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Interrupteur mode client */
.switch { display: flex; align-items: center; gap: .45rem; font-size: .8rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .track {
  position: relative; width: 38px; height: 22px; border-radius: 999px; background: #CBD5E1;
  transition: background-color .2s;
}
.switch .track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .25); transition: transform .2s;
}
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track::after { transform: translateX(16px); }
.switch input:focus-visible + .track { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------- Onglets (contrôle segmenté) ---------- */
.tabs {
  position: sticky; top: calc(55px + env(safe-area-inset-top, 0px)); z-index: 4;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  margin: .8rem auto 0; padding: 4px; width: min(100% - 2rem, 560px);
  background: #E2E8F0; border-radius: 999px;
}
.tabs button {
  padding: .55rem .3rem; border: 0; border-radius: 999px; background: none;
  font-weight: 600; font-size: .88rem; color: var(--muted);
}
.tabs button[aria-selected="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgb(15 23 42 / .12); }
.tabs b {
  display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding: 0 .3rem; margin-left: .15rem;
  border-radius: 999px; background: var(--grad); color: #fff; font-size: .72rem; font-weight: 700;
}

main { max-width: 1120px; margin: 0 auto; padding: 1rem 1rem 3rem; }

/* ---------- Filtres ---------- */
.filters { display: grid; gap: .6rem; margin-bottom: .3rem; }
.search { position: relative; }
.search::before {
  content: ""; position: absolute; left: .95rem; top: 50%; width: 15px; height: 15px; transform: translateY(-50%);
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
}
input[type="search"], input:not([type]), input[type="date"], select, textarea {
  width: 100%; padding: .72rem .9rem; border: 1px solid var(--line);
  border-radius: 12px; background: var(--card); color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
input[type="search"] { padding-left: 2.5rem; border-radius: 999px; box-shadow: var(--shadow); border-color: transparent; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgb(236 106 60 / .18); }

.chips { display: flex; gap: .4rem; overflow-x: auto; padding: .1rem .1rem .3rem; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips button {
  flex: none; padding: .45rem .9rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); font-weight: 600; font-size: .85rem; color: var(--ink-2);
}
.chips.small button { padding: .3rem .75rem; font-size: .8rem; }
.chips button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.check { display: flex; gap: .5rem; align-items: center; font-size: .88rem; font-weight: 600; }
.check input { width: 1.1rem; height: 1.1rem; accent-color: var(--blue); }
.count { color: var(--muted); font-size: .82rem; margin: .5rem 0 .8rem; }

/* ---------- Cartes produit ---------- */
.grid { display: grid; gap: .8rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; } }

.card {
  display: flex; flex-direction: column;
  background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  transition: transform .2s, box-shadow .2s;
}
@media (hover: hover) { .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } }

.photo {
  position: relative; display: block; width: 100%; aspect-ratio: 6 / 7; padding: 0; border: 0;
  background: #fff; border-bottom: 1px solid var(--line);
}
.photo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.photo img:not([src]) { display: none; }
.ph { position: absolute; inset: 0; display: none; place-items: center; font-size: 2.6rem; background: var(--soft); color: #CBD5E1; }
.photo.vide .ph { display: grid; }
.badges { position: absolute; top: .5rem; left: .5rem; right: .5rem; display: flex; gap: .3rem; flex-wrap: wrap; }
.badge {
  font-size: .68rem; font-weight: 700; padding: .18rem .5rem; border-radius: 999px; line-height: 1.3;
  background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgb(15 23 42 / .15);
}
.badge.ah { background: var(--blue); color: #fff; }
.badge.top { background: var(--grad); color: #fff; }
.badge.val { background: #fff; color: var(--muted); border: 1px dashed var(--muted); box-shadow: none; }

.body { padding: .7rem .8rem .2rem; min-width: 0; flex: 1; }
.marque { margin: 0; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.card h3 { margin: .1rem 0 0; font-size: 1.05rem; font-weight: 800; line-height: 1.2; cursor: pointer; }
.card .type {
  margin: .15rem 0 .5rem; color: var(--muted); font-size: .8rem; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.meta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.meta li { font-size: .7rem; font-weight: 600; padding: .15rem .45rem; border-radius: 6px; background: var(--soft); border: 1px solid var(--line); color: var(--ink-2); white-space: nowrap; }
.price { margin: .55rem 0 0; font-weight: 800; color: var(--ink); font-size: .95rem; }
.price small { font-weight: 500; color: var(--muted); font-size: .75rem; }

.add {
  margin: .55rem .8rem .8rem; padding: .6rem .5rem; border-radius: 999px;
  border: 1.5px solid var(--ink); background: var(--card); color: var(--ink); font-weight: 700; font-size: .85rem;
  transition: background-color .15s, color .15s, border-color .15s;
}
.add.in { background: var(--grad); border-color: transparent; color: #fff; }

/* ---------- Fiche produit ---------- */
dialog#fiche {
  width: min(100%, 560px); max-height: 92vh; margin: auto auto 0; padding: 0; border: 0;
  border-radius: 24px 24px 0 0; background: var(--card); color: var(--ink-2); box-shadow: var(--shadow-lg);
}
@media (min-width: 640px) { dialog#fiche { margin: auto; border-radius: 24px; } }
dialog#fiche::backdrop { background: rgb(15 23 42 / .45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
dialog#fiche .close {
  position: absolute; top: .7rem; right: .7rem; z-index: 2; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  border: 0; background: rgb(255 255 255 / .9); box-shadow: var(--shadow); font-size: 1rem; color: var(--ink);
}
.fiche-photo { position: relative; background: #fff; aspect-ratio: 6 / 5; border-bottom: 1px solid var(--line); }
.fiche-photo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.fiche-photo .badges { top: .8rem; left: .8rem; }
.fiche-in { padding: 1rem 1.2rem 1.4rem; }
.fiche-in h2 { margin: .1rem 0 .1rem; font-size: 1.5rem; font-weight: 800; }
.fiche-in .type { margin: 0 0 1rem; color: var(--muted); }
.fiche-in dl { display: grid; grid-template-columns: auto 1fr; gap: .45rem 1rem; margin: 0 0 1rem; font-size: .9rem; }
.fiche-in dt { color: var(--muted); }
.fiche-in dd { margin: 0; color: var(--ink); font-weight: 600; }
.fiche-in .price { font-size: 1.1rem; margin: 0 0 1rem; }
.fiche-in .add { width: 100%; margin: 0; padding: .8rem; font-size: .95rem; }

/* ---------- Panneaux (sélection, historique) ---------- */
.panel { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: .4rem 1rem; }

.sel-row {
  display: grid; grid-template-columns: 56px 1fr auto; gap: .5rem .8rem; align-items: center;
  padding: .8rem 0; border-bottom: 1px solid var(--line);
}
.sel-row:last-child { border-bottom: 0; }
.sel-row .thumb { width: 56px; height: 64px; border-radius: 10px; border: 1px solid var(--line); background: #fff; object-fit: contain; }
.sel-row .thumb.vide { display: grid; place-items: center; background: var(--soft); }
.sel-row h4 { margin: 0; font-size: .95rem; font-weight: 700; }
.sel-row small { color: var(--muted); font-size: .78rem; }
.sel-row .qty { display: flex; gap: .25rem; align-items: center; }
.sel-row .qty button { width: 2.2rem; height: 2.2rem; border: 1px solid var(--line); border-radius: 50%; background: var(--card); font-size: 1.1rem; font-weight: 600; color: var(--ink); }
.sel-row .qty input { width: 2.8rem; text-align: center; padding: .45rem .1rem; border-radius: 10px; }
.sel-row .tailles { grid-column: 2 / -1; padding: .55rem .8rem; font-size: .88rem; }
.total { font-weight: 800; color: var(--ink); text-align: right; margin: .6rem 0; }
.empty { color: var(--muted); padding: 2rem .5rem; text-align: center; }

/* ---------- Formulaire RDV ---------- */
fieldset {
  display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  border: 0; border-radius: var(--radius); padding: 1rem 1rem 1.1rem; margin: 0 0 1rem;
  background: var(--card); box-shadow: var(--shadow);
}
legend {
  float: left; width: 100%; grid-column: 1 / -1; padding: 0; margin: 0 0 .1rem;
  font-weight: 800; font-size: 1rem; color: var(--ink);
}
legend::before { content: ""; display: inline-block; width: 4px; height: 1em; margin-right: .5rem; vertical-align: -2px; border-radius: 2px; background: var(--grad); }
fieldset label { display: grid; gap: .3rem; font-size: .8rem; font-weight: 600; color: var(--muted); }
fieldset label input, fieldset label select, fieldset label textarea { font-size: 1rem; font-weight: 500; }
.full { grid-column: 1 / -1; }
.actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.actions button {
  padding: .8rem 1.3rem; border-radius: 999px; border: 1.5px solid var(--ink); background: var(--card);
  font-weight: 700; color: var(--ink);
}
.actions .primary { background: var(--grad); border-color: transparent; color: #fff; box-shadow: 0 8px 18px -8px rgb(232 72 59 / .6); flex: 1 1 100%; }
@media (min-width: 640px) { .actions .primary { flex: 0 1 auto; } }
.actions .ghost { border-color: var(--line); color: var(--muted); }
.hint { color: var(--muted); min-height: 1.4em; font-size: .9rem; }
.history { margin-top: 1.2rem; padding: .9rem 1rem; }
.history summary { cursor: pointer; font-weight: 700; color: var(--ink); }
.history ul { padding-left: 1.1rem; }
.history li { margin: .45rem 0; }
.history button { border: 0; background: none; color: var(--blue); text-decoration: underline; padding: 0; text-align: left; }

/* Infos réservées au vendeur (mode client désactivé) */
.priv { display: none !important; }
body.vendeur .priv { display: inline !important; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }