/* Guira — design system et styles, mobile d'abord (360 px), puis 768 px, 1024 px et 1280 px.
   Les couleurs, arrondis, ombres et durées sont des variables (:root) : on ne met jamais une
   valeur en dur dans un composant. Le produit reste le héros : peu d'ombres, des bordures, de
   l'espace ; le motif léopard n'apparaît qu'en signature discrète. */

/* ── Police : Inter, hébergée sur le site, deux graisses ────────────────────── */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/inter-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/inter-latin-600-normal.woff2") format("woff2");
}

/* ── Jetons ──────────────────────────────────────────────────────────────── */
:root {
  /* Couleurs */
  --soft: #F4F2EE;          /* gris chaud très clair : survols et zones calmes sur fond blanc */
  --bg: #FFFFFF;            /* blanc, fond des pages (demande d'Alain du 2026-10-11 : l'ivoire faisait lourd) */
  --surface: #FFFFFF;       /* blanc : cartes produits */
  --ink: #171717;           /* noir doux : textes et prix */
  --muted: #6B6863;         /* texte secondaire */
  --accent: #2457C5;        /* bleu principal : boutons, liens, actions */
  --accent-strong: #1B4399; /* survol, appui */
  --accent-soft: #EAF0FB;   /* fonds légers (étiquettes, choix coché) */
  --terracotta: #C96B45;    /* touches culturelles et sélections */
  --terracotta-strong: #9E4F2F; /* texte terracotta lisible sur fond clair */
  --terracotta-soft: #F8ECE5;
  --bordeaux: #A52A32;      /* détail de marque seulement (favori actif) */
  --beige: #E9DFD2;          /* bordures des cartes */
  --field-line: #A39A8F;    /* bordure des champs (contraste 3:1 sur blanc) */
  --ok: #2F6B45;
  --ok-bg: #E8F2EB;
  --warn: #7A5212;
  --warn-bg: #FBF1DE;
  --info: #2C5578;
  --info-bg: #E8F0F7;
  --error: #B3261E;         /* rouge fonctionnel, distinct du bordeaux de marque */
  --error-bg: #FCEBEA;
  --overlay: rgba(23, 23, 23, 0.45);

  /* Anciens noms (pages existantes) */
  --paper: var(--bg);
  --card: var(--surface);

  /* Formes */
  --radius-card: 16px;
  --radius-control: 12px;
  --radius-image: 14px;
  --radius-pill: 999px;
  --radius: var(--radius-card);

  /* Ombres : très légères */
  --shadow-sm: 0 1px 2px rgba(23, 23, 23, 0.06);
  --shadow-md: 0 6px 20px rgba(23, 23, 23, 0.08);
  --shadow-lg: 0 16px 40px rgba(23, 23, 23, 0.16);

  /* Mouvement */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --fast: 150ms;
  --normal: 220ms;

  /* Mise en page */
  --content-max: 80rem;     /* 1280 px */
  --gutter: max(1rem, env(safe-area-inset-left));
  --gutter-right: max(1rem, env(safe-area-inset-right));
  --header-h: 3.5rem;
  --tabbar-h: 60px;

  /* Signature */
  --leopard: url("/brand/motif-leopard.svg");

  font-synthesis: none;
  --placeholder-bg: #F6F1EA;
  --placeholder-wash: linear-gradient(rgba(246, 241, 234, 0.8), rgba(246, 241, 234, 0.8));
  --line: #E8E2D6;
  --hairline: rgba(23, 23, 23, 0.10);
  --shadow-card: 0 1px 2px rgba(23, 23, 23, 0.04), 0 10px 28px rgba(23, 23, 23, 0.06);
  --shadow-card-hover: 0 2px 4px rgba(23, 23, 23, 0.05), 0 18px 40px rgba(23, 23, 23, 0.10); --search-fill: #F3F6FD; --search-line: rgba(36, 87, 197, 0.22);
}

/* ── Base ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
/* Texte plus petit, proche de Vinted (demande d'Alain du 2026-10-11 ; Vinted : 13 px) : 14 px de base,
   tout ce qui est en rem suit. Les champs restent à 16 px (voir « Champs » en fin de fichier). */
html { font-size: 87.5%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem; /* 14 px ; les champs gardent 16 px (pas de zoom automatique sur iOS) */
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased; padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
}
img, picture, svg, video { max-width: 100%; }
img { height: auto; }
a { color: var(--accent); text-underline-offset: 0.15em; }
a:hover { color: var(--accent-strong); }
h1, h2, h3 { line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; }
h1 { font-size: 1.75rem; margin: 0 0 0.5rem; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.125rem; }
small, .small { font-size: 0.8125rem; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid rgba(36, 87, 197, 0.45); outline-offset: 2px; border-radius: 4px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; flex: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* ── Conteneurs ─────────────────────────────────────────────────────────── */
.page, .catalog, .member, .admin, .legal, .help {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 1.25rem var(--gutter-right) 2rem var(--gutter);
  overflow-wrap: anywhere;
}
.catalog { padding-bottom: calc(6rem + env(safe-area-inset-bottom)); }
.legal { max-width: 46rem; line-height: 1.65; }
.legal h2 { font-size: 1.125rem; margin-top: 1.75rem; }

/* Pages de compte : une colonne, centrée */
.account {
  width: 100%;
  overflow-wrap: anywhere; /* une longue adresse e-mail passe à la ligne au lieu de déborder */
  max-width: 32rem;
  margin: 0 auto;
  padding: 1.5rem var(--gutter-right) calc(2rem + env(safe-area-inset-bottom)) var(--gutter);
}
.account h1 { font-size: 1.625rem; line-height: 1.25; }
.account h2 { font-size: 1.1875rem; margin: 0 0 0.75rem; }
.account h3 { font-size: 1.0625rem; margin: 1rem 0 0.5rem; }
.account .lead { color: var(--muted); margin: 0 0 1.5rem; }

.hint { color: var(--muted); }
.lead { color: var(--muted); }

/* ── En-tête du site ────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 30;
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top); background: rgba(255, 255, 255, 0.95); border-bottom-color: var(--hairline);
}
.header-inner {
  display: flex; align-items: center; gap: 0.75rem;
  max-width: var(--content-max); min-height: var(--header-h);
  margin: 0 auto; padding: 0 var(--gutter-right) 0 var(--gutter);
}
.brand { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 44px; text-decoration: none; flex: none; }
.brand img { display: block; }
.brand-tree { width: auto; height: 34px; }
.brand-name { width: auto; height: 17px; }
.header-search, .header-spacer { flex: 1 1 auto; min-width: 0; }
.header-search { display: none; }
.header-nav { display: flex; align-items: center; gap: 0.25rem; margin-left: auto; }
.header-nav a { color: var(--ink); text-decoration: none; }
.nav-text { display: none; align-items: center; min-height: 44px; padding: 0 0.75rem; font-weight: 600; border-radius: var(--radius-control); }
.nav-icon { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-pill); position: relative; }
.nav-icon.keep-mobile { display: inline-flex; }
.nav-sell { display: none; }
.header-nav .nav-sell { display: none; }
.header-nav .nav-sell, .header-nav .nav-sell:hover { color: #fff; }
.nav-text .icon { width: 20px; height: 20px; margin-right: 0.375rem; }
.nav-text:hover, .nav-icon:hover { background: var(--beige); color: var(--ink); }
.header-nav a[aria-current="page"] { color: var(--accent); }

@media (min-width: 768px) {
  .brand-tree { height: 40px; }
  .brand-name { height: 20px; }
  .header-inner { gap: 1.25rem; min-height: 4.25rem; }
  .header-search {
    display: flex; align-items: center;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-pill);
    transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease); max-width: 34rem;
  }
  .header-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(36, 87, 197, 0.18); }
  .header-search input {
    flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 0 0 1.125rem;
    font: inherit; color: var(--ink); background: transparent; border: 0; outline: none;
  }
  .header-search button {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none;
    border: 0; background: transparent; color: var(--muted); cursor: pointer; border-radius: var(--radius-pill);
  }
  .nav-text, .nav-icon { display: inline-flex; }
  .header-nav .nav-sell { display: inline-flex; margin-left: 0.5rem; align-items: center; gap: 0.25rem; padding: 0 1rem; }
}

/* En-tête de l'administration (menu propre) */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: var(--header-h);
  padding: 0 var(--gutter-right) 0 var(--gutter);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.topbar a.logo { display: inline-flex; align-items: center; min-height: 44px; font-size: 1.375rem; font-weight: 600; color: var(--ink); text-decoration: none; }
.topnav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.25rem; min-width: 0; }
.topnav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.625rem; color: var(--ink); text-decoration: none; font-weight: 600; }

/* ── Barre d'onglets (téléphone) ────────────────────────────────────────── */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
  display: grid; align-items: end;
  background: rgba(255, 255, 255, 0.97);
  border-top: 1px solid var(--line);
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); grid-template-columns: repeat(5, 1fr);
}
.tabbar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.125rem;
  min-height: var(--tabbar-h); color: var(--muted); text-decoration: none; font-size: 0.75rem; font-weight: 600;
  transition: color var(--fast) var(--ease); position: relative;
}
.tabbar a[aria-current="page"] { color: var(--accent); }
@media (min-width: 768px) {
  .tabbar { display: none; }
  body { padding-bottom: 0; }
}

/* ── Boutons ────────────────────────────────────────────────────────────── */
/* Principal : fond brun, texte blanc. Secondaire : blanc à bordure. Tertiaire : texte seul.
   48 px de haut, pleine largeur sur téléphone ; états survol, appui, désactivé, chargement. */
.btn {
  -webkit-appearance: none; /* Safari iOS : sans cela, le style natif ignore la hauteur */
  appearance: none;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  width: 100%; min-height: 48px; padding: 0.75rem 1.25rem;
  font: inherit; font-weight: 600; line-height: 1.2; text-align: center;
  color: #fff; background: var(--accent);
  border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease), transform var(--fast) var(--ease); border-radius: var(--radius-pill); letter-spacing: 0.005em;
}
.btn:hover { background: var(--accent-strong); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn.secondary, .btn-secondary { color: var(--ink); background: var(--surface); border-color: var(--hairline); }
.btn.secondary:hover, .btn-secondary:hover { background: var(--soft); color: var(--ink); border-color: var(--ink); }
.btn.tertiary, .btn-tertiary { color: var(--accent); background: transparent; border-color: transparent; width: auto; padding-left: 0.5rem; padding-right: 0.5rem; }
.btn.tertiary:hover, .btn-tertiary:hover { background: var(--accent-soft); color: var(--accent-strong); }
.btn.danger { background: var(--error); }
.btn.danger:hover { background: #8F1E18; }
.btn-sm { width: auto; min-height: 44px; padding: 0.5rem 1rem; font-size: 0.9375rem; }
/* Chargement : <button aria-busy="true"> garde sa largeur, le texte laisse place à un indicateur. */
.btn[aria-busy="true"] { color: transparent; cursor: progress; }
.btn[aria-busy="true"]::after {
  content: ""; position: absolute; width: 1.125rem; height: 1.125rem;
  border: 2px solid rgba(255, 255, 255, 0.5); border-top-color: #fff; border-radius: 50%;
  animation: spin 700ms linear infinite;
}
.btn.secondary[aria-busy="true"]::after { border-color: var(--line); border-top-color: var(--ink); }
@keyframes spin { to { transform: rotate(360deg); } }
.btn + .btn { margin-top: 0.75rem; }

.links { margin: 1.25rem 0 0; display: grid; gap: 0.25rem; }
.links a { display: inline-flex; align-items: center; min-height: 44px; }

/* ── Champs ─────────────────────────────────────────────────────────────── */
/* Libellé au-dessus, aide en dessous, erreur juste sous le champ. */
.field { margin: 0 0 1.125rem; }
.field label, .field legend { display: block; font-weight: 600; margin: 0 0 0.375rem; }
.field .hint { display: block; font-size: 0.875rem; margin: 0.375rem 0 0; }
.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.field select,
.field textarea,
.input {
  width: 100%;
  min-height: 48px;
  padding: 0.625rem 0.875rem;
  font-size: 1rem; /* 16 px : pas de zoom automatique sur iOS */
  font-family: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--field-line);
  border-radius: var(--radius-control);
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.field select {
  -webkit-appearance: none; appearance: none; padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6863' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.875rem center; background-size: 1.125rem;
}
.field textarea { resize: vertical; min-height: 7rem; }
.field input::placeholder, .field textarea::placeholder { color: #9A938B; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible, .input:focus-visible {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(36, 87, 197, 0.2);
}
.field input:disabled, .field select:disabled, .field textarea:disabled { background: var(--soft); color: var(--muted); }
.field [aria-invalid="true"] { border-color: var(--error) !important; }
.field .error { display: block; color: var(--error); font-size: 0.9375rem; margin: 0.375rem 0 0; }
.field .error:empty { display: none; }

fieldset.field { border: 0; padding: 0; margin-left: 0; margin-right: 0; min-width: 0; }
.choices { display: grid; gap: 0.5rem; }
.choice {
  display: flex; align-items: center; gap: 0.75rem;
  min-height: 52px; padding: 0.5rem 0.875rem;
  border: 1px solid var(--line); border-radius: var(--radius-control);
  background: var(--surface); font-weight: 400; cursor: pointer;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.choice input { width: 1.25rem; height: 1.25rem; accent-color: var(--accent); flex: none; }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.code-input { letter-spacing: 0.4em; font-size: 1.25rem !important; text-align: center; }
.measures, .price-range { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 0.75rem; }

/* ── Cartes, messages, badges, étiquettes ───────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 1.25rem 1rem;
  margin: 0 0 1rem;
}
details.card > summary { display: flex; align-items: center; min-height: 44px; font-weight: 600; cursor: pointer; }
details.card[open] > summary { margin-bottom: 0.75rem; }

.notice { border-radius: var(--radius-control); padding: 0.75rem 1rem; margin: 0 0 1rem; border: 1px solid transparent; }
.notice:empty { display: none; }
.notice.ok { background: var(--ok-bg); color: var(--ok); border-color: rgba(47, 107, 69, 0.2); }
.notice.warn { background: var(--warn-bg); color: var(--warn); border-color: rgba(122, 82, 18, 0.18); }
.notice.info { background: var(--info-bg); color: var(--info); }
.notice.error { background: var(--error-bg); color: var(--error); border-color: rgba(179, 38, 30, 0.2); }

.status-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.status-list li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.625rem 0; border-bottom: 1px solid var(--line); }
.status-list li:last-child { border-bottom: 0; }

.badge {
  display: inline-flex; align-items: center; gap: 0.25rem; flex: none;
  font-size: 0.8125rem; font-weight: 600; line-height: 1.4;
  padding: 0.125rem 0.625rem; border-radius: var(--radius-pill);
  background: var(--warn-bg); color: var(--warn);
}
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.error { background: var(--error-bg); color: var(--error); }
.badge.info { background: var(--info-bg); color: var(--info); }
.badge.neutral { background: var(--beige); color: var(--ink); }
.badge.pro { background: var(--ink); color: #fff; }

.chips { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  display: inline-flex; align-items: center; gap: 0.375rem; min-height: 44px; padding: 0 1rem;
  border-radius: var(--radius-pill); border: 1px solid var(--line);
  color: var(--ink); text-decoration: none; font-size: 0.9375rem; white-space: nowrap;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.chip:hover { border-color: var(--ink); color: var(--ink); background: var(--surface); }
.chips:not(.type-chips) .chip:not(.chip-clear) { background: var(--accent-soft); border-color: rgba(36, 87, 197, 0.4); background-color: var(--accent-soft); box-shadow: inset 0 0 0 1px rgba(36, 87, 197, 0.4); }
.chip-active, .chip[aria-current="page"] { background: var(--ink) !important;
  background-color: var(--ink) !important; color: #fff !important; box-shadow: inset 0 0 0 1px var(--ink) !important;
  border-color: transparent !important; }
.chip-clear { background: transparent; color: var(--muted); background-color: transparent; }
button.chip { cursor: pointer; font: inherit; font-size: 14px; }
.type-chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 0.25rem; }
.type-chips::-webkit-scrollbar { display: none; }
.type-chips li { flex: none; }

.tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0.5rem; margin: 0 0 1rem; }
.tabs a { display: flex; align-items: center; justify-content: center; min-height: 44px; border-bottom: 2px solid var(--line); color: var(--muted); text-decoration: none; font-weight: 600; }
.tabs a[aria-current="page"] { border-color: var(--accent); color: var(--ink); }

/* ── États : chargement, vide, erreur, succès ───────────────────────────── */
.skeleton {
  display: block; border-radius: var(--radius-control);
  background: linear-gradient(90deg, var(--beige) 0%, #F3EDE5 45%, var(--beige) 90%);
  background-size: 200% 100%;
  animation: shimmer 1.3s linear infinite;
}
.skeleton-text { height: 0.875rem; margin: 0.5rem 0; }
.skeleton-text.short { width: 45%; }
.skeleton-photo { aspect-ratio: 3 / 4; border-radius: var(--radius-image); }
@keyframes shimmer { to { background-position: -200% 0; } }

.empty-state, .error-state {
  display: grid; justify-items: center; gap: 0.5rem; text-align: center;
  padding: 2.5rem 1.25rem; margin: 1rem 0;
  background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius-card);
}
.empty-state::before {
  content: ""; width: 72px; height: 72px; border-radius: 50%;
  background: var(--placeholder-wash), var(--leopard) center / 180px, var(--placeholder-bg);
}
.empty-state h2, .error-state h2 { font-size: 1.125rem; margin: 0.25rem 0 0; }
.empty-state p, .error-state p { margin: 0; color: var(--muted); max-width: 28rem; }
.empty-state .btn, .error-state .btn { width: auto; margin-top: 0.5rem; }
.error-state { border-style: solid; border-color: rgba(179, 38, 30, 0.25); }

.toast-region {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 60;
  bottom: calc(var(--tabbar-h) + 1rem + env(safe-area-inset-bottom));
  display: grid; gap: 0.5rem; width: min(calc(100% - 2rem), 26rem); pointer-events: none;
}
.toast {
  padding: 0.875rem 1rem; border-radius: var(--radius-control);
  background: var(--ink); color: #fff; box-shadow: var(--shadow-lg);
  animation: rise var(--normal) var(--ease);
}
.toast.ok { background: var(--ok); }
.toast.error { background: var(--error); }
@media (min-width: 768px) { .toast-region { bottom: 1.5rem; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

/* ── Fenêtres : modale, tiroir, panneau du bas (élément <dialog>) ───────── */
dialog.modal, dialog.sheet, dialog.drawer {
  border: 0; padding: 0; color: var(--ink); background: var(--surface);
  max-width: 100%; max-height: 100%; overflow: auto;
  box-shadow: var(--shadow-lg);
}
dialog::backdrop { background: var(--overlay); }
dialog[open] { animation: rise var(--normal) var(--ease); }
dialog.modal { width: min(calc(100% - 2rem), 28rem); border-radius: var(--radius-card); }
dialog.sheet {
  width: 100%; margin: auto 0 0; max-height: 90dvh;
  border-radius: 20px 20px 0 0; padding-bottom: env(safe-area-inset-bottom);
}
dialog.drawer { margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh; width: min(100%, 26rem); }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1rem 0.5rem 1.25rem; }
.dialog-head h2 { margin: 0; font-size: 1.1875rem; }
.dialog-close {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border: 0; background: transparent; border-radius: var(--radius-pill); cursor: pointer; color: var(--ink);
}
.dialog-close:hover { background: var(--soft); }
.dialog-body { padding: 0.5rem 1.25rem 1.25rem; }
.dialog-actions { display: grid; gap: 0.75rem; padding: 0 1.25rem 1.25rem; }
.dialog-actions .btn + .btn { margin: 0; }
@media (min-width: 768px) {
  dialog.sheet { width: min(calc(100% - 2rem), 32rem); margin: auto; border-radius: var(--radius-card); }
  .dialog-actions { grid-auto-flow: column; justify-content: end; }
  .dialog-actions .btn { width: auto; }
}

/* ── Catalogue : recherche, grille, cartes produit ──────────────────────── */
.search-bar {
  display: flex; align-items: center; gap: 0.5rem; margin: 0 0 1rem; position: relative; margin-bottom: 1rem;
}
.search-bar input {
  flex: 1 1 auto; min-width: 0; min-height: 48px; padding: 0.625rem 1rem;
  font: inherit; font-size: 1rem; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface);
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease); padding-right: 3.25rem;
}
.search-bar input:focus-visible { outline: none; box-shadow: none; border-color: transparent; }
.search-bar .btn { width: auto; flex: none; border-radius: var(--radius-pill); }
.results-title { font-size: 1.5rem; margin: 0 0 0.75rem; }
.results-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; }
.results-head .btn { width: auto; flex: none; }
.section-title { font-size: 1.25rem; font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem); letter-spacing: -0.025em; margin: 2.5rem 0 1rem; }
.section-title a { color: inherit; text-decoration: none; }

.product-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 0.5rem;
}
.product-card { position: relative; container-type: inline-size; }
.product-card a { display: block; color: inherit; text-decoration: none; }
.card-photo {
  position: relative; aspect-ratio: 3 / 4; overflow: hidden;
  background: var(--beige); display: flex; align-items: center; justify-content: center; border-radius: 4px; box-shadow: none;
}
.card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 400ms var(--ease); }
.card-nophoto {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  color: var(--muted); font-size: 0.875rem; background: var(--placeholder-wash), var(--leopard) center / 200px, var(--placeholder-bg);
}
.card-title {
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; margin-top: 0.75rem;
  margin: 0.375rem 0 0; font-size: 12px; line-height: 16px;
  -webkit-line-clamp: 1; line-clamp: 1;
}
.card-meta { margin: 0; color: var(--muted); font-size: 12px; line-height: 16px; }
.card-price { font-variant-numeric: tabular-nums; margin: 0.125rem 0 0; font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: 0; }
@media (hover: hover) {
  .product-card a:hover .card-photo img { transform: scale(1.03); }
  .product-card a:hover .card-title { text-decoration: underline; text-underline-offset: 0.15em; }
}
.grid-square .card-photo { aspect-ratio: 1 / 1; }
.more { text-align: center; margin: 1.75rem 0 0; }
.more .btn { width: auto; }
.no-results p { margin: 0 0 0.75rem; }

.product-row {
  list-style: none; margin: 0; padding: 0 0 0.5rem;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(9rem, 42%);
  overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 0.5rem; grid-auto-columns: minmax(8.5rem, 40%);
}
.product-row::-webkit-scrollbar { display: none; }
.product-row > li { scroll-snap-align: start; }
.tile-name { font-weight: 600; line-height: 1.25; }
.tile-count { color: var(--muted); font-size: 0.875rem; }

/* Bouton flottant « Trier | Filtrer », au-dessus de la barre d'onglets et de la zone sûre */
.fab {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 20;
  bottom: calc(var(--tabbar-h) + 1rem + env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.5rem;
  border-radius: var(--radius-pill); background: var(--ink); color: #fff; text-decoration: none; font-weight: 600;
  box-shadow: var(--shadow-md);
}
.fab:hover { color: #fff; }

/* Panneau de filtres : panneau du bas sur téléphone, ouvert par l'ancre #filtres (sans JavaScript) */
.filter-panel { display: none; }
.filter-panel:target {
  display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  max-height: 88dvh; overflow-y: auto; background: var(--surface);
  border-radius: 20px 20px 0 0; box-shadow: 0 0 0 100vmax var(--overlay);
  padding: 1rem var(--gutter-right) calc(1.5rem + env(safe-area-inset-bottom)) var(--gutter);
  animation: rise var(--normal) var(--ease);
}
.filter-panel form { max-width: 30rem; margin: 0 auto; }
.filter-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 1rem; }
.filter-head h2 { margin: 0; font-size: 1.25rem; }
.filter-head .btn { width: auto; }
.filter-panel details { margin: 0 0 1rem; }
.filter-panel summary { display: flex; align-items: center; min-height: 44px; font-weight: 600; cursor: pointer; }

/* ── Fiche produit ──────────────────────────────────────────────────────── */
.product {
  width: 100%; max-width: var(--content-max); margin: 0 auto;
  padding: 0 0 calc(2rem + env(safe-area-inset-bottom));
  overflow-wrap: anywhere;
}
.gallery {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0.25rem;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.gallery::-webkit-scrollbar { display: none; }
.gallery-item { flex: 0 0 100%; margin: 0; scroll-snap-align: start; aspect-ratio: 3 / 4; background: var(--beige); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-info { padding: 1.25rem var(--gutter-right) 0 var(--gutter); }
.product-info h1 { font-size: 1.5rem; line-height: 1.25; margin: 0 0 0.25rem; }
.price { font-weight: 600; margin: 0 0 1rem; font-size: 1.25rem; }
.price-detail { margin: -0.5rem 0 1rem; }
.price-total { font-weight: 600; margin: 0 0 0.25rem; }
.price-detail .hint { margin: 0 0 0.25rem; }
.facts { margin: 0 0 1.25rem; border-top: 1px solid var(--line); }
.facts > div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid var(--line); }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
.origin { display: flex; align-items: center; gap: 0.5rem; }
.flag { width: 1.25rem; height: auto; border: 1px solid var(--line); border-radius: 2px; }
.description h2, .second-life h2 { font-size: 1.125rem; margin: 0 0 0.5rem; }
.description p, .second-life p { white-space: pre-line; }
.seller-type { font-weight: 600; margin: 0 0 0.25rem; }
.report-link a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); }
.buy { display: grid; gap: 0.75rem; margin: 0 0 1rem; }
.buy .btn + .btn { margin-top: 0; }
.product-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 1rem; }
.product-actions .btn { width: auto; flex: 1 1 auto; margin: 0; }
.product-actions .share { flex: none; gap: 0.375rem; }
.fit-badge { display: inline-block; margin: 0 0 1rem; }

/* ── Offres, historiques, listes du compte ──────────────────────────────── */
.offer-list, .history-list, .listing-list, .review-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.offer-item, .review { padding: 0.875rem 0; border-bottom: 1px solid var(--line); }
.offer-item:last-child, .review:last-child { border-bottom: 0; }
.offer-item p, .review p { margin: 0.25rem 0; }
.offer-actions { display: grid; gap: 0.75rem; margin-top: 0.75rem; }
.offer-actions .btn + .btn { margin-top: 0; }
.offer-form .btn { margin-top: 0.5rem; }

.history-item { display: grid; grid-template-columns: 5rem 1fr; gap: 0.875rem; padding: 0.875rem 0; border-bottom: 1px solid var(--line); }
.history-item p { margin: 0.25rem 0; }
.history-photo { display: block; aspect-ratio: 3 / 4; border-radius: var(--radius-control); overflow: hidden; background: var(--beige); }
.history-photo img { width: 100%; height: 100%; object-fit: cover; display: block; max-width: 100%; }
.history-nophoto { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--muted); font-size: 0.75rem; }

.listing-list { margin-top: 1rem; }
.listing-item { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 0.875rem; align-items: start; }
.listing-item .thumb { aspect-ratio: 3 / 4; border-radius: var(--radius-control); overflow: hidden; background: var(--beige); }
.listing-item .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.listing-title { font-weight: 600; margin: 0 0 0.25rem; display: block; }
.listing-item p { margin: 0 0 0.5rem; }
.listing-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.listing-actions .btn { width: auto; margin: 0; padding: 0.5rem 0.875rem; min-height: 44px; }

.favorites-offer { margin: 0.75rem 0; }
.favorites-offer .btn { margin-top: 0.5rem; }
.profile-item { grid-template-columns: 1fr; }

/* ── Vente : photos ─────────────────────────────────────────────────────── */
.photo-list {
  list-style: none; margin: 0 0 0.75rem; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem;
}
.photo-list li { position: relative; aspect-ratio: 3 / 4; border-radius: var(--radius-control); overflow: hidden; background: var(--beige); }
.photo-list img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-remove {
  position: absolute; left: 0; right: 0; bottom: 0;
  min-height: 44px; border: 0; font: inherit; font-size: 0.875rem;
  color: #fff; background: rgba(23, 23, 23, 0.72); cursor: pointer;
}
.file-btn { cursor: pointer; }

/* ── Points relais ──────────────────────────────────────────────────────── */
.relay-list { margin-top: 1rem; }
.relay-option { display: flex; gap: 0.5rem; align-items: flex-start; min-height: 44px; padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
.relay-option input { margin-top: 0.25rem; flex: none; }
#gift-fields { margin-top: 0.5rem; }

/* ── Membres, avis, notifications ───────────────────────────────────────── */
.member-rating { font-size: 1.125rem; margin: 0.25rem 0; }
.review-stars { color: var(--accent); letter-spacing: 0.05em; }
.review-form { margin-top: 0.75rem; display: grid; gap: 0.5rem; }
.notification-item { grid-template-columns: 1fr; gap: 0.25rem; }
.notification-item p { margin: 0; }
.notification-item.unread { background: var(--accent-soft); padding-left: 0.75rem; padding-right: 0.75rem; border-radius: var(--radius-control); }
.prefs { margin-top: 1rem; }

/* ── Administration ─────────────────────────────────────────────────────── */
.vocab-list { list-style: none; margin: 0; padding: 0; }
.vocab-item { padding: 0.75rem 0; border-bottom: 1px solid var(--line); }
.vocab-item:last-child { border-bottom: 0; }
.vocab-item p { margin: 0 0 0.375rem; }
.vocab-item select { width: 100%; min-height: 44px; margin: 0 0 0.5rem; font: inherit; font-size: 1rem; border: 1px solid var(--field-line); border-radius: var(--radius-control); background: var(--surface); padding: 0 0.5rem; }
.inline-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; margin: 0.5rem 0; }
.inline-form input, .inline-form select {
  min-height: 44px; padding: 0 0.75rem; font: inherit; font-size: 1rem;
  border: 1px solid var(--field-line); border-radius: var(--radius-control); background: var(--surface); width: 100%;
}
.vocab-item > .btn { width: auto; }
.admin-menu { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0 0 1rem; }
.admin-menu a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.875rem; border-radius: var(--radius-pill); background: var(--beige); color: var(--ink); text-decoration: none; font-weight: 600; }
.admin-menu a[aria-current] { background: var(--ink); color: #fff; }
.admin-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 0.75rem; }
.admin-tile { display: grid; gap: 0.25rem; text-decoration: none; color: var(--ink); }
.admin-number { font-size: 2rem; font-weight: 600; }
.admin-list { list-style: none; margin: 0; padding: 0; }
.admin-list li { padding: 0.625rem 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.admin-list li:last-child { border-bottom: 0; }
.admin .card { margin: 0 0 1rem; overflow-wrap: anywhere; }
.admin input, .admin select { max-width: 100%; min-height: 44px; font-size: 1rem; }
.urgent { color: var(--error); }

/* ── Tablette : 768 px ──────────────────────────────────────────────────── */
@media (min-width: 768px) {
  h1 { font-size: 2rem; }
  .page, .account { padding-top: 2.5rem; }
  .card { padding: 1.5rem; }
  .btn { width: auto; }
  .btn + .btn { margin-top: 0; margin-left: 0.75rem; }
  .fab { bottom: calc(1.25rem + env(safe-area-inset-bottom)); }
  .filter-panel:target {
    inset: 0 0 0 auto; width: min(100%, 28rem); max-height: none;
    border-radius: 0; padding-top: 1.25rem;
  }
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem 0.75rem; }
  .product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; padding: 2rem var(--gutter-right) 2rem var(--gutter);
    grid-template-columns: minmax(0, 3fr) minmax(18rem, 2fr);
    grid-template-areas: "crumbs crumbs" "gallery summary" "details summary" "showcase showcase";
    align-items: start; }
  .gallery { flex-direction: column; overflow: visible; gap: 0.75rem; }
  .gallery-item { border-radius: var(--radius-image); overflow: hidden; }
  .product-info { padding: 0; }
  .product-row { grid-auto-columns: minmax(10rem, 23%); grid-auto-columns: minmax(9rem, 22%); gap: 0.75rem; }
  .inline-form { grid-template-columns: minmax(0, 1fr) auto auto; }
  .inline-form .notice { grid-column: 1 / -1; }
  .admin { padding: 1.5rem; }
}

/* ── Ordinateur : 1024 px et 1280 px ────────────────────────────────────── */
@media (min-width: 1024px) {
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  h1 { font-size: 2.25rem; }
  .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem 1rem; }
}

/* ── Page Catégories ────────────────────────────────────────────────────── */
.universe { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 0.375rem 1rem 0.25rem; }
.universe .chips { margin: 0 0 0.75rem; flex-wrap: wrap; overflow: visible; }
.universe .chip { white-space: normal; }

/* ── Pastille de l'en-tête (messages non lus) ───────────────────────────── */
.nav-badge {
  position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill); background: var(--bordeaux); color: #fff;
  font-size: 0.6875rem; font-weight: 600; line-height: 1; border: 2px solid var(--bg);
}

/* ── Messagerie : boîte de réception ────────────────────────────────────── */
.conversation-list { list-style: none; margin: 0; padding: 0; }
.conversation-list > li + li { border-top: 1px solid var(--line); }
.conversation {
  display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 0.875rem; align-items: center;
  padding: 0.875rem 0.25rem; color: var(--ink); text-decoration: none; border-radius: var(--radius-control);
}
.conversation:hover { background: var(--surface); color: var(--ink); }
.conversation-photo { display: block; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; background: var(--beige); }
.conversation-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.conversation-body { display: grid; gap: 0.125rem; min-width: 0; }
.conversation-top { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; }
.conversation-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.conversation-time { flex: none; color: var(--muted); font-size: 0.8125rem; }
.conversation-product { color: var(--muted); font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-preview { display: flex; align-items: center; gap: 0.5rem; }
.conversation-text { flex: 1; min-width: 0; color: var(--muted); font-size: 0.9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation.unread .conversation-text { color: var(--ink); font-weight: 600; }
.nav-badge.inline { position: static; border: 0; flex: none; }
.conversation-skeleton { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 0.875rem; align-items: center; padding: 0.875rem 0.25rem; }
.conversation-skeleton > .skeleton { aspect-ratio: 3 / 4; border-radius: 10px; }

/* ── Messagerie : conversation ──────────────────────────────────────────── */
.chat {
  width: 100%; max-width: 46rem; margin: 0 auto;
  padding: 0 var(--gutter-right) 0 var(--gutter);
  overflow-wrap: anywhere;
}
.chat-head {
  display: flex; align-items: center; gap: 0.25rem;
  position: sticky; top: calc(var(--header-h) + env(safe-area-inset-top)); z-index: 5;
  background: var(--bg); padding: 0.375rem 0;
}
.chat-back { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--ink); border-radius: var(--radius-pill); }
.chat-back:hover { background: var(--beige); color: var(--ink); }
.chat-title { flex: 1; min-width: 0; margin: 0; font-size: 1.125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 0.625rem; }
.chat-product {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0 0 0.75rem; padding: 0.5rem 0.75rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-control);
}
.chat-product-link { flex: 1; min-width: 12rem; display: flex; align-items: center; gap: 0.75rem; color: var(--ink); text-decoration: none; }
.chat-product-link:hover { color: var(--accent); }
.chat-product-actions { display: flex; gap: 0.5rem; }
.chat-product-actions .btn { margin: 0; }
.chat-product-photo { flex: none; width: 2.75rem; aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; background: var(--beige); }
.chat-product-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chat-product-title { display: block; font-weight: 600; font-size: 0.9375rem; }
.chat-product-price { display: block; color: var(--muted); font-size: 0.875rem; }
.chat-safety { font-size: 0.875rem; }
.chat-earlier { display: flex; margin: 0 auto 0.5rem; }

.chat-messages { list-style: none; margin: 0; padding: 0 0 1rem; display: grid; gap: 0.5rem; }
.chat-day { justify-self: center; margin: 0.75rem 0 0.25rem; color: var(--muted); font-size: 0.8125rem; }
.chat-day::first-letter { text-transform: uppercase; }
.chat-event { justify-self: center; max-width: 90%; }
.chat-event p {
  margin: 0; padding: 0.375rem 0.875rem; text-align: center; font-size: 0.875rem;
  color: var(--ok); background: var(--ok-bg); border-radius: var(--radius-pill);
}
.chat-message { display: grid; max-width: min(85%, 30rem); gap: 0.125rem; }
.chat-message.mine { justify-self: end; justify-items: end; }
.chat-message.theirs { justify-self: start; justify-items: start; }
.chat-bubble {
  padding: 0.625rem 0.875rem; border-radius: 18px; line-height: 1.45;
  background: var(--surface); border: 1px solid var(--line);
}
.chat-message.mine .chat-bubble { background: var(--accent-soft); border-color: rgba(36, 87, 197, 0.25); border-bottom-right-radius: 6px; }
.chat-message.theirs .chat-bubble { border-bottom-left-radius: 6px; }
.chat-bubble p { margin: 0; }
.chat-text { white-space: pre-line; }
.chat-hidden { color: var(--muted); font-style: italic; }
.chat-photo { display: block; margin-top: 0.25rem; border-radius: 12px; overflow: hidden; }
.chat-photo:first-child { margin-top: 0; }
.chat-photo img { display: block; width: min(60vw, 14rem); height: auto; }
.chat-message.offer .chat-bubble { background: var(--surface); border-color: var(--accent); }
.chat-offer-status { display: block; margin-top: 0.125rem; color: var(--muted); font-size: 0.8125rem; }
.chat-offer-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.625rem; }
.chat-offer-actions .btn + .btn { margin: 0; }
.chat-meta { display: flex; gap: 0.75rem; color: var(--muted); font-size: 0.75rem; padding: 0 0.375rem; }
.chat-meta a { color: var(--muted); display: inline-flex; align-items: center; min-height: 24px; }
.chat-warning { margin: 0.25rem 0 0; padding: 0.5rem 0.75rem; font-size: 0.8125rem; color: var(--warn); background: var(--warn-bg); border-radius: var(--radius-control); max-width: 100%; }

.chat-composer {
  position: sticky; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); z-index: 5;
  display: flex; align-items: flex-end; gap: 0.5rem;
  margin: 0 calc(-1 * var(--gutter-right)) 0 calc(-1 * var(--gutter));
  padding: 0.625rem var(--gutter-right) 0.625rem var(--gutter);
  background: var(--bg); border-top: 1px solid var(--line);
}
.chat-composer textarea {
  flex: 1; min-width: 0; min-height: 44px; max-height: 10rem; resize: none;
  padding: 0.625rem 1rem; font: inherit; font-size: 1rem; color: var(--ink); line-height: 1.4;
  background: var(--surface); border: 1px solid var(--line); border-radius: 22px;
}
.chat-composer textarea:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(36, 87, 197, 0.18); }
.chat-attach {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: var(--radius-pill); color: var(--muted); cursor: pointer;
}
.chat-attach:hover { background: var(--beige); color: var(--ink); }
.chat-attach:focus-within { outline: 3px solid rgba(36, 87, 197, 0.45); }
.chat-send { flex: none; width: 44px !important; min-height: 44px; height: 44px; padding: 0; border-radius: var(--radius-pill); }
.dialog-list { display: grid; gap: 0.5rem; }
.dialog-list .btn { width: 100%; margin: 0; }
@media (min-width: 768px) {
  .chat-head { top: calc(4.25rem + env(safe-area-inset-top)); }
  .chat-composer { bottom: 0; margin: 0; padding-left: 0; padding-right: 0; }
}
.conversation-body > *, .conversation-top > *, .conversation-preview > * { min-width: 0; }
.conversation-body > * { max-width: 100%; }

/* ── Accueil ────────────────────────────────────────────────────────────── */
.home .catalog { padding-top: 1rem; }
.hero {
  position: relative; overflow: hidden; background: transparent; border-bottom: 0;
}
/* Signature : motif léopard très léger, estompé vers le texte. */
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: var(--leopard) 0 0 / 220px;
  -webkit-mask-image: linear-gradient(105deg, transparent 35%, #000 85%);
  mask-image: linear-gradient(105deg, transparent 35%, #000 85%);
  pointer-events: none; opacity: 0.06;
}
.hero h1 { font-size: 1.875rem; margin: 0 0 0.625rem; font-size: clamp(2.25rem, 1.4rem + 4vw, 4.25rem); line-height: 1.02; letter-spacing: -0.04em; max-width: 13ch; }
.hero .search-bar { margin-bottom: 0.875rem; max-width: 34rem; box-shadow: inset 0 0 0 1px var(--search-line), var(--shadow-card); }

/* Barre de recherche : champ arrondi, loupe dans le champ */
.search-submit {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border: 0; border-radius: var(--radius-pill); background: var(--accent); color: #fff; cursor: pointer;
  transition: background var(--fast) var(--ease);
}
.search-submit:hover { background: var(--accent-strong); }
.search-submit .icon { width: 20px; height: 20px; }

/* Tuiles d'univers avec photo */
.tile-text { display: grid; gap: 0.125rem; padding: 0.75rem 0.875rem 0.875rem; }

.row-title { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.row-more { font-size: 0.9375rem; font-weight: 600; color: var(--accent) !important; display: inline-flex; align-items: center; min-height: 44px; }

@media (min-width: 768px) {
  .hero h1 { font-size: 2.5rem; }
}
@media (min-width: 1280px) {
  .hero h1 { font-size: 3rem; }
}
/* Téléphone : bandeau d'accueil compact, les annonces arrivent vite (pas d'étape avant les produits). */
@media (max-width: 767px) {
  .hero h1 { font-size: 1.5rem; margin-bottom: 0.375rem; }
  .hero .search-bar { margin-bottom: 0; }
}

/* ── Cœur des cartes (favori), en bas à droite de la photo, comme sur Vinted ── */
.card-fav {
  position: absolute; right: 2px;
  /* Bas de la photo (3:4, ou carrée) : 4/3 ou 1 fois la largeur de la carte. */
  top: calc(133.333cqw - 46px);
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer;
  color: var(--ink);
}
.grid-square .card-fav { top: calc(100cqw - 46px); }
.card-fav::before {
  content: ""; position: absolute; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.94); box-shadow: var(--shadow-sm);
  transition: transform var(--fast) var(--ease);
}
.card-fav .icon { position: relative; width: 19px; height: 19px; stroke-width: 2; transition: transform var(--fast) var(--ease); }
.card-fav[aria-pressed="true"] { color: var(--bordeaux); }
.card-fav[aria-pressed="true"] .icon { fill: currentColor; }
.card-fav:active .icon { transform: scale(0.85); }
.card-fav:focus-visible { outline: none; }
.card-fav:focus-visible::before { box-shadow: 0 0 0 3px rgba(36, 87, 197, 0.5); }
@media (hover: hover) {
  .card-fav:hover::before { transform: scale(1.08); }
}

/* ── Vendre : titre proposé ─────────────────────────────────────────────── */
.title-suggestion {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem;
  margin: 0.5rem 0 0; padding: 0.5rem 0.75rem;
  background: var(--accent-soft); border-radius: var(--radius-control); font-size: 0.9375rem;
}
.title-suggestion strong { font-weight: 600; }

/* ── Barre des univers sous l'en-tête (tablette et ordinateur), comme sur Vinted ── */
.category-bar { display: none; border-top: 1px solid var(--line); }
.category-bar-inner {
  display: flex; gap: 0.25rem; max-width: var(--content-max); margin: 0 auto;
  padding: 0 var(--gutter-right) 0 var(--gutter);
  overflow-x: auto; scrollbar-width: none;
}
.category-bar-inner::-webkit-scrollbar { display: none; }
.mega { position: static; }
.mega > summary {
  list-style: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.875rem;
  font-weight: 600; font-size: 0.9375rem; color: var(--ink); cursor: pointer; white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.mega > summary::-webkit-details-marker { display: none; }
.mega > summary:hover, .mega[open] > summary { border-bottom-color: var(--accent); }
.mega-panel {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 35;
  background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  padding: 1.25rem max(var(--gutter), calc((100vw - var(--content-max)) / 2 + 1rem));
  animation: rise var(--fast) var(--ease);
}
.mega-all { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; margin-bottom: 0.25rem; }
.mega-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0 1.5rem;
}
.mega-list a {
  display: flex; align-items: center; gap: 0.75rem; min-height: 44px; padding: 0 0.5rem;
  color: var(--ink); text-decoration: none; border-radius: var(--radius-control);
}
.mega-list a:hover { background: var(--soft); color: var(--ink); }
.mega-list .icon { width: 22px; height: 22px; stroke-width: 1.6; color: var(--terracotta); }
@media (min-width: 768px) {
  .category-bar { display: block; }
}

/* ── Page Catégories : univers puis sous-catégories (téléphone d'abord) ── */
details.universe { padding: 0; overflow: hidden; }
details.universe > summary::-webkit-details-marker { display: none; }
details.universe > summary::after {
  content: ""; width: 10px; height: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg); transition: transform var(--fast) var(--ease); margin-right: 0.25rem;
}
details.universe[open] > summary::after { transform: rotate(-135deg); }
.type-count { margin-left: auto; color: var(--muted); font-size: 0.875rem; }

/* ── Rayons Femmes / Hommes / Enfants ───────────────────────────────────── */
.breadcrumb ol { list-style: none; margin: 0 0 0.75rem; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; font-size: 0.875rem; color: var(--muted); }
.breadcrumb li + li::before { content: "/"; margin: 0 0.375rem 0 0.125rem; color: var(--line); }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 32px; color: var(--muted); }
.breadcrumb [aria-current] { color: var(--ink); font-weight: 600; }

/* Menu de la barre : une colonne par groupe (Vêtements, Chaussures…) */
.mega-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0.5rem 1.5rem; margin-top: 0.25rem; }
.mega-group-title {
  display: flex; align-items: center; gap: 0.625rem; min-height: 44px; padding: 0 0.5rem;
  font-weight: 600; color: var(--ink); text-decoration: none; border-radius: var(--radius-control);
}
.mega-group-title:hover { background: var(--soft); color: var(--ink); }
.mega-group-title .icon { width: 22px; height: 22px; color: var(--accent); stroke-width: 1.6; }
.mega-group .mega-list { display: block; padding-left: 2.25rem; }
.mega-group .mega-list a { min-height: 36px; padding: 0 0.5rem; color: var(--muted); }
.mega-group .mega-list a:hover { color: var(--ink); }

/* ── Barre de filtres visible (comme Vinted) ────────────────────────────── */
.filter-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; position: relative; }
.filter-pill { position: relative; }
.filter-pill > summary {
  list-style: none; display: inline-flex; align-items: center; gap: 0.375rem; min-height: 44px; padding: 0 0.875rem 0 1rem;
  border: 1px solid var(--field-line); border-radius: var(--radius-pill); background: var(--surface);
  font-size: 0.9375rem; color: var(--ink); cursor: pointer; white-space: nowrap;
}
.filter-pill > summary::-webkit-details-marker { display: none; }
.filter-pill > summary::after {
  content: ""; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform var(--fast) var(--ease); width: 6px; height: 6px; margin-left: 0; border-right-width: 1.5px; border-bottom-width: 1.5px;
}
.filter-pill[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
.filter-pill.active > summary, .filter-pill[open] > summary { background: var(--accent-soft);
  border-color: transparent; background-color: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.filter-pill > summary strong { font-weight: 600; }
.filter-pill-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.75rem; font-weight: 600; font-size: 0.9375rem;
}
.pill-panel {
  position: absolute; left: 0; top: calc(100% + 0.375rem); z-index: 30;
  width: min(20rem, calc(100vw - 2rem)); max-height: 22rem; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-lg);
  padding: 0.5rem; animation: rise var(--fast) var(--ease);
}
.filter-pill.sort .pill-panel { width: min(16rem, calc(100vw - 2rem)); }
.pill-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.5rem 0.75rem; font-weight: 600; }
.pill-clear { font-weight: 400; font-size: 0.9375rem; }
.pill-options { list-style: none; margin: 0; padding: 0; }
.pill-options.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.25rem; }
.pill-options.colors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.25rem; }
.pill-option {
  display: flex; align-items: center; gap: 0.625rem; min-height: 44px; padding: 0 0.75rem;
  color: var(--ink); text-decoration: none; border-radius: var(--radius-control);
}
.pill-options.grid .pill-option { justify-content: center; padding: 0; border: 1px solid var(--line); }
.pill-options.colors .pill-option { flex-direction: column; justify-content: center; gap: 0.25rem; min-height: 72px; padding: 0.25rem; font-size: 0.8125rem; text-align: center; }
.pill-option:hover { background: var(--soft); color: var(--ink); }
.pill-option.selected { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.pill-options.grid .pill-option.selected { border-color: var(--accent); }
.swatch { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); flex: none; }
.pill-price { padding: 0 0.5rem 0.5rem; }
.pill-price .btn { width: 100%; }
/* Téléphone : le choix s'ouvre en panneau du bas */
@media (max-width: 767px) {
  .filter-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter-right)); padding: 0 var(--gutter-right) 0.25rem var(--gutter); }
  .filter-bar::-webkit-scrollbar { display: none; }
  .filter-pill, .filter-pill-link { flex: none; }
  .pill-panel {
    position: fixed; left: 0; right: 0; top: auto; bottom: 0; z-index: 45;
    width: 100%; max-height: 70dvh; border-radius: 20px 20px 0 0; border: 0;
    padding: 0.75rem var(--gutter-right) calc(1rem + env(safe-area-inset-bottom)) var(--gutter);
  }
  /* Fond sombre : un toucher dessus referme le panneau (il fait partie du bouton). */
  .filter-pill[open] > summary::before {
    content: ""; position: fixed; inset: 0; z-index: 44; background: var(--overlay); cursor: default;
  }
}

/* ── Explorer par origine : carte d'Afrique sobre (outil de découverte, secondaire) ── */
.origin-explorer { margin-top: 2rem; padding-top: 0.5rem; border-top: 1px solid var(--line); }
.origin-explorer > .hint { margin: -0.375rem 0 1rem; }
.origin-layout { display: grid; gap: 1rem; align-items: start; }
.origin-map { max-width: 17rem; margin: 0 auto; width: 100%; }
.africa-map { display: block; width: 100%; height: auto; }
.africa-map path { fill: var(--beige); stroke: var(--surface); stroke-width: 0.8; stroke-linejoin: round; }
.africa-map .country path { fill: #d9c7b2; transition: fill var(--fast) var(--ease); }
.africa-map .country.has-items path { fill: #b99475; }
.africa-map .country:hover path, .africa-map .country:focus-visible path { fill: var(--accent); }
.africa-map .country:focus-visible { outline: none; }
.origin-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 0.75rem; }
.origin-list a {
  display: flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0 0.5rem;
  color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line);
}
.origin-list a:hover { background: var(--surface); color: var(--ink); }
@media (min-width: 768px) {
  .origin-layout { grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr); gap: 2rem; }
  .origin-map { margin: 0; }
  .origin-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}



/* ── Explorer ───────────────────────────────────────────────────────────── */
.explore-lead { margin: -0.25rem 0 0.5rem; }
.explore .section-title { margin-top: 2rem; } /* tenue entière, du cou aux pieds (2026-10-11) */
.universe-hero { display: grid; gap: 1rem; align-items: start; grid-template-columns: minmax(0, 1fr) 6.5rem; }
.universe-map { max-width: 11rem; }
.africa-map .land.lit, .africa-map .country.lit path { fill: var(--accent); }
.africa-map .country.lit.has-items path { fill: var(--accent-strong); }
.seller-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
.seller-card {
  display: flex; align-items: center; gap: 0.75rem; min-height: 64px; padding: 0.625rem 0.875rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
  color: var(--ink); text-decoration: none;
}
.seller-card:hover { border-color: var(--accent); color: var(--ink); }
.seller-text { display: grid; gap: 0.125rem; min-width: 0; }
.seller-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 768px) {
  .universe-hero { grid-template-columns: minmax(0, 1fr) 12rem; grid-template-columns: minmax(0, 1fr) 11rem; }
  .universe-map { max-width: 12rem; justify-self: end; }
  .seller-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .seller-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Univers : petite carte à côté du titre, aussi sur téléphone */
.universe-hero .universe-map { max-width: 6.5rem; justify-self: end; }
@media (min-width: 768px) {
  .universe-hero .universe-map { max-width: 11rem; }
}

/* Explorer : univers en photos plein cadre (photos.js), nom posé sur un dégradé sombre */
.universe-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.universe-tile {
  position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5;
  border-radius: var(--radius-card); background: var(--beige); color: #fff; text-decoration: none;
}
.universe-tiles li:first-child { grid-column: 1 / -1; }
.universe-tiles li:first-child .universe-tile { aspect-ratio: 16 / 9; }
.universe-tile picture, .universe-tile img { display: block; width: 100%; height: 100%; }
.universe-tile img { object-fit: cover; transition: transform 400ms var(--ease); }
.universe-tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(23, 23, 23, 0.72) 0%, rgba(23, 23, 23, 0.2) 45%, rgba(23, 23, 23, 0) 70%);
}
.universe-tile-text { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; display: grid; gap: 0.125rem; padding: 0.875rem 1rem; }
.universe-tile .tile-name { font-size: 1.0625rem; color: #fff; }
.universe-tile .tile-count { color: rgba(255, 255, 255, 0.85); }
.universe-tile:hover, .universe-tile:focus-visible { color: #fff; }
.universe-tile:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { .universe-tile:hover img { transform: scale(1.04); } }
@media (min-width: 768px) {
  .universe-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .universe-tiles li { grid-column: span 2; }
  .universe-tiles li:first-child, .universe-tiles li:nth-child(2) { grid-column: span 3; }
  .universe-tiles li:nth-child(-n+2) .universe-tile { aspect-ratio: 16 / 10; }
}
@media (min-width: 1024px) {
  .universe-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .universe-tiles li, .universe-tiles li:first-child, .universe-tiles li:nth-child(2) { grid-column: auto; }
  .universe-tiles li .universe-tile, .universe-tiles li:nth-child(-n+2) .universe-tile { aspect-ratio: 3 / 4; }
}
.universe-banner { margin: 0 0 1rem; }
.universe-banner img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-card); background: var(--beige); }
.universe-banner figcaption { padding: 0.375rem 0.25rem 0; color: var(--muted); font-size: 0.75rem; }
.universe-banner figcaption a { color: inherit; }
@media (min-width: 768px) { .universe-banner img { aspect-ratio: 21 / 8; } }
.photo-credits { margin-top: 2rem; color: var(--muted); font-size: 0.8125rem; }
.photo-credits summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.photo-credits ul { margin: 0; padding-left: 1.25rem; display: grid; gap: 0.25rem; }
.photo-credits a { color: inherit; }

/* Profil (onglet du bas), comme sur Vinted : carte du membre puis rubriques groupées */
.profile-menu { display: grid; gap: 0.75rem; }
.profile-title { margin: 0.5rem 0 0.25rem; }
.profile-card {
  display: flex; align-items: center; gap: 0.875rem; min-height: 72px; padding: 0.875rem 1rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
  color: var(--ink); text-decoration: none;
}
.profile-card-text { display: grid; gap: 0.125rem; min-width: 0; flex: 1; }
.profile-card-text strong { font-size: 1.0625rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-card-text span { color: var(--muted); }
.menu-group {
  list-style: none; margin: 0; padding: 0; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
}
.menu-group li + li { border-top: 1px solid var(--line); }
.menu-row {
  display: flex; align-items: center; gap: 0.875rem; width: 100%; min-height: 56px; padding: 0.5rem 1rem;
  background: none; border: 0; color: var(--ink); font: inherit; font-size: 1rem; text-align: left; text-decoration: none; cursor: pointer;
}
.menu-row:hover, .profile-card:hover { background: var(--soft); color: var(--ink); }
.menu-row:disabled { opacity: 0.6; }
.menu-row > .icon:first-child { color: var(--ink); }
.menu-label { flex: 1; min-width: 0; }
.menu-value { color: var(--muted); font-size: 0.875rem; text-align: right; max-width: 45%; }
.icon.chevron { width: 20px; height: 20px; color: var(--muted); }
.menu-thumbs { display: inline-flex; }
.menu-thumbs img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid var(--surface); background: var(--beige); }
.menu-thumbs img + img { margin-left: -10px; }
.menu-footer { display: grid; justify-items: center; gap: 0; padding: 0.25rem 0 1rem; font-size: 0.875rem; }
.menu-footer a { color: var(--muted); min-height: 44px; display: inline-flex; align-items: center; }
@media (min-width: 768px) { .profile-menu { max-width: 40rem; } }

/* Page Messages : onglets « Messages | Notifications », comme sur Vinted */
.inbox-tabs { display: grid; grid-template-columns: 1fr 1fr; margin: 0 0 0.5rem; border-bottom: 1px solid var(--line); }
.inbox-tabs a {
  display: flex; align-items: center; justify-content: center; gap: 0.375rem; min-height: 48px;
  color: var(--muted); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.inbox-tabs a[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }
.inbox-tabs a:hover { color: var(--ink); }
.notification-list { list-style: none; margin: 0; padding: 0; }
.notification-list > li + li { border-top: 1px solid var(--line); }
.notification {
  display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 0.875rem; align-items: start;
  padding: 0.875rem 0.25rem; color: var(--ink); text-decoration: none; border-radius: var(--radius-control);
}
.notification:hover { background: var(--surface); color: var(--ink); }
.notification-thumb { display: block; width: 3.5rem; height: 3.5rem; border-radius: 10px; overflow: hidden; background: var(--beige); }
.notification-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.notification-icon { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent-strong); }
.notification-body { display: grid; gap: 0.25rem; min-width: 0; }
.notification-text { color: var(--muted); line-height: 1.35; }
.notification.unread .notification-text { color: var(--ink); }
.notification-time { color: var(--muted); font-size: 0.875rem; }

/* Photo de profil (migration 024) : photo ronde, ou initiale sur fond bleu clair */
.avatar {
  flex: none; display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
  border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); font-weight: 600;
}
.avatar picture, .avatar img { display: block; width: 100%; height: 100%; }
.avatar img { object-fit: cover; }
.avatar-sm { width: 40px; height: 40px; font-size: 1rem; }
.avatar-md { width: 52px; height: 52px; font-size: 1.375rem; }
.avatar-lg { width: 96px; height: 96px; font-size: 2.25rem; }
.avatar-xs { width: 24px; height: 24px; font-size: 0.75rem; }
.conversation-who { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0; }
.avatar-editor { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.avatar-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.avatar-actions .btn { margin: 0; }
.avatar-actions:focus-within label.btn { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Vitrine du membre et fiche produit, comme sur Vinted : en-tête du vendeur, badges, onglets */
.member-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.75rem; }
.member-id { display: grid; gap: 0.125rem; min-width: 0; }
.member-head h1 { margin: 0; }
.member-head .member-rating, .member-head .seller-type { margin: 0; }
.stars { color: var(--accent); letter-spacing: 0.05em; }
.member-badges { list-style: none; margin: 0.5rem 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.member-badge {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-strong); font-size: 0.875rem; font-weight: 600;
}
.seller-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.seller-name { display: flex; align-items: center; gap: 0.75rem; min-width: 0; min-height: 44px; color: var(--ink); text-decoration: none; }
.seller-name:hover { color: var(--ink); }
.seller-name-text { display: grid; gap: 0.125rem; min-width: 0; }
.seller-name-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seller-rating { color: var(--muted); font-size: 0.9375rem; }
.seller-head .contact-seller { margin: 0; }
.trust-card { display: flex; align-items: flex-start; gap: 0.75rem; }
.trust-card .icon { flex: none; color: var(--ok); }
.trust-card p { margin: 0; }
.shipping-from { display: flex; justify-content: space-between; gap: 1rem; margin: 0.75rem 0; }
.shipping-from span:last-child { color: var(--muted); }
.showcase { margin-top: 1.5rem; padding: 0 var(--gutter-right) 0 var(--gutter); }
.member .showcase { padding: 0; }
.product > .showcase { grid-column: 1 / -1; }
.tabs-bar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-bottom: 1px solid var(--line); margin-bottom: 1rem; }
.tab {
  min-height: 48px; padding: 0 0.5rem; background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px;
  color: var(--muted); font: inherit; cursor: pointer;
}
.tab[aria-selected="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }
.tab:hover { color: var(--ink); }
.tab-panel > .btn { margin-top: 1rem; }
/* Barre « Faire une offre | Acheter » fixée au-dessus de la barre d'onglets (téléphone) */
.buy-bar {
  position: fixed; z-index: 20; left: 0; right: 0; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0.75rem;
  padding: 0.625rem var(--gutter-right) 0.625rem var(--gutter); background: var(--surface); border-top: 1px solid var(--line);
}
.buy-bar[hidden] { display: none; }
.buy-bar .btn { margin: 0; }
body.has-buy-bar { padding-bottom: calc(var(--tabbar-h) + 4.5rem + env(safe-area-inset-bottom)); }
@media (min-width: 768px) {
  .buy-bar { display: none !important; }
  body.has-buy-bar { padding-bottom: 0; }
}

/* Fiche produit comme Vinted : fil d'Ariane, ligne de résumé, description repliable ;
   sur ordinateur, photos et détails à gauche, résumé et achat à droite, toujours visibles. */
.product-crumbs { padding: 0.75rem var(--gutter-right) 0 var(--gutter); }
.product-crumbs ol { margin-bottom: 0.5rem; }
.product-meta { color: var(--muted); margin: 0 0 0.5rem; }
.product-details { padding-top: 0.5rem; }
.collapsible-body { position: relative; }
[data-collapsible].is-clamped .collapsible-body { max-height: 7.5rem; overflow: hidden; }
[data-collapsible].is-clamped .collapsible-body::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.5rem;
  background: linear-gradient(to bottom, rgba(250, 248, 244, 0), var(--bg));
}
.link-button {
  min-height: 44px; padding: 0; background: none; border: 0; color: var(--accent); font: inherit; font-weight: 600;
  text-decoration: underline; cursor: pointer;
}
.link-button:hover { color: var(--accent-strong); }
@media (min-width: 768px) {
  .product-crumbs { grid-area: crumbs; padding: 0; }
  .product > .gallery { grid-area: gallery; }
  .product-summary {
    grid-area: summary; position: sticky; top: 7.5rem;
    max-height: calc(100vh - 8.5rem); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  }
  .product-details { grid-area: details; padding-top: 0; }
  .product > .showcase { grid-area: showcase; }
}
.member-presence { margin: 0; }
.member-about { margin: 0.75rem 0; }
.member-about p { white-space: pre-line; margin: 0; }
.seller-presence { color: var(--muted); font-size: 0.875rem; }
.admin-about { margin: 0.5rem 0 0; padding: 0.5rem 0.75rem; border-left: 3px solid var(--line); white-space: pre-line; }
.search-tabs { margin: 0.75rem 0 1rem; }
.follow-btn { margin: 0.5rem 0; }
.follow-btn[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent-strong); }
.member-followers { margin: 0; }
.following-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.5rem; }
.following-item .btn { margin: 0; }
.saved-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding-right: 0.5rem; }
.saved-search .menu-label { display: grid; gap: 0.125rem; }
.saved-search .menu-label strong { overflow-wrap: anywhere; }

/* Créer un lot (migration 026) : articles à cocher, barre du prix du lot en bas (téléphone) */
.bundle-page h1 { margin-bottom: 0.25rem; }
.bundle-card { position: relative; display: grid; gap: 0.25rem; cursor: pointer; }
.bundle-check {
  position: absolute; z-index: 1; top: 0.5rem; left: 0.5rem; width: 28px; height: 28px; margin: 0;
  accent-color: var(--accent); background: var(--surface); border-radius: 6px;
}
.bundle-card:has(.bundle-check:checked) .card-photo { outline: 3px solid var(--accent); outline-offset: -3px; }
.bundle-card .card-photo { display: block; aspect-ratio: 3 / 4; border-radius: var(--radius-image); overflow: hidden; background: var(--beige); }
.bundle-card .card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bundle-card .card-title { font-size: 0.9375rem; }
.bundle-card .card-price { font-weight: 600; }
.bundle-bar {
  position: sticky; z-index: 15; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  display: grid; gap: 0.5rem; margin-top: 1rem; padding: 0.75rem var(--gutter-right) 0.75rem var(--gutter);
  background: var(--surface); border-top: 1px solid var(--line); box-shadow: var(--shadow-md);
}
.bundle-bar[hidden] { display: none; }
.bundle-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; }
.bundle-total #bundle-price { font-size: 1.25rem; font-weight: 600; }
.bundle-total .hint { flex-basis: 100%; }
.bundle-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.bundle-actions .btn { margin: 0; }
.bundle-actions .btn[aria-disabled] { opacity: 0.5; pointer-events: none; }
.bundle-lines { margin: 0 0 0.75rem; padding-left: 1.25rem; color: var(--muted); }
@media (min-width: 768px) {
  .bundle-bar { bottom: 0; border-radius: var(--radius-card) var(--radius-card) 0 0; }
}
.bundle-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }

/* ── Boutons de filtre, raccourcis et étiquettes : mesures de Vinted (2026-10-06) ──────────
   Apparence identique au composant Chip de Vinted : 36 px de haut, marges 8 px × 12 px,
   texte 14 px (interligne 18 px), graisse normale, 8 px entre les boutons, flèche discrète.
   Zone de toucher gardée à 44 px (règle « mobile d'abord ») : une bordure transparente de
   4 px en haut et en bas, le fond et le contour visibles s'arrêtent à 36 px. */
.chips, .filter-bar { gap: 0 8px; }
.chip, .filter-pill > summary, .filter-pill-link {
  min-height: 44px; padding: 8px 12px; gap: 8px;
  border: 4px solid transparent; border-left-width: 0; border-right-width: 0; background-clip: padding-box;
  box-shadow: inset 0 0 0 1px var(--field-line);
  font-size: 14px; line-height: 18px; font-weight: 400;
}
.chip { background-color: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.chip:hover, .filter-pill > summary:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.filter-pill-link { box-shadow: none; padding-left: 4px; padding-right: 4px; }

/* ── Barres de recherche (en-tête et pages) : mesures de Vinted ─────────────────────────────
   Champ gris sans bordure, 36 px de haut, angles de 6 px, texte 16 px (pas de zoom sur
   iPhone), loupe de 16 px à gauche. Zone de toucher : 44 px (bordure transparente). */
.header-search, .search-bar {
  display: flex; align-items: center; gap: 0; min-height: 44px; padding: 0;
  border: 4px solid transparent; background: var(--search-fill); background-clip: padding-box; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--search-line); position: relative;
}
.header-search:focus-within, .search-bar:focus-within { border-color: transparent; box-shadow: inset 0 0 0 2px var(--accent); }
.header-search input, .search-bar input {
  flex: 1 1 auto; min-width: 0; min-height: 36px; padding: 0 11px 0 0;
  font: inherit; font-size: 16px; line-height: 22px; color: var(--ink);
  background: transparent; border: 0; border-radius: 0; box-shadow: none; outline: none;
}
.header-search input::placeholder, .search-bar input::placeholder { color: var(--ink); opacity: 0.64; }
.header-search button, .search-bar .search-submit {
  order: -1; position: static; transform: none; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 44px; margin: -4px 0; padding: 0 4px 0 8px; border: 0; border-radius: 6px;
  background: transparent; cursor: pointer; color: var(--accent);
}
.header-search button .icon, .search-bar .search-submit .icon { width: 16px; height: 16px; stroke-width: 2; }
.search-bar .search-submit:hover, .header-search button:hover { background: transparent; color: var(--accent-strong); }
/* L'en-tête n'a sa barre de recherche qu'à partir de la tablette (téléphone : page Recherche). */
@media (max-width: 767px) {
  .header-search { display: none; }
}
/* Les anciennes règles de fond (raccourci « background ») remettaient le fond sous la zone de
   toucher transparente : on garde le fond dans les 36 px visibles, pour toutes les variantes. */
.chip, .chip-active, .chip[aria-current="page"], .chips .chip, .filter-pill > summary { background-clip: padding-box !important; }
.chip, .chip:hover, .chips .chip, .filter-pill > summary { border-color: transparent !important; }

/* Navigation (2026-10-06) : barre du bas à cinq onglets, Vendre au milieu en rond bleu (accent) ;
   pastille des messages non lus sur l'icône. En-tête : Profil sur téléphone ; à partir de la
   tablette, « + Vendre » avec Explorer, Messages et Profil. */
.tabbar .nav-badge { top: 4px; right: calc(50% - 22px); }
.tab-sell { color: var(--accent) !important; }
.tab-sell-circle {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill); background: var(--accent); color: #fff;
  transition: transform var(--fast) var(--ease), background var(--fast) var(--ease); position: relative; width: 38px; height: 38px; margin: -7px 0 -5px; box-shadow: 0 2px 8px rgba(36, 87, 197, 0.35);
}
.tab-sell-circle .icon { width: 20px; height: 20px; stroke-width: 2.4; }
.tab-sell:active .tab-sell-circle { transform: scale(0.94); background: var(--accent-strong); }
.header-nav .nav-sell .icon { width: 18px; height: 18px; stroke-width: 2.4; }
.home-shortcuts { margin: 1rem 0 0.5rem; }

/* Catégories emboîtées, comme « Parcourir » sur Vinted (2026-10-06) */
.browse .search-bar { margin-bottom: 1rem; }
.browse-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.browse-tile {
  position: relative; display: block; min-height: 92px; padding: 14px 16px; overflow: hidden;
  border-radius: 8px; color: var(--ink); text-decoration: none; background: var(--soft);
}
.browse-tile:hover { color: var(--ink); background: var(--beige); }
.browse-tile-name { position: relative; z-index: 1; display: block; max-width: 70%; font-size: 1rem; line-height: 1.25; }
.browse-tile-art { position: absolute; right: 10px; bottom: 8px; color: var(--accent); }
.browse-tile-art .icon { width: 56px; height: 56px; stroke-width: 1.3; }
.browse-head { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; margin: 0 0 0.5rem; }
.browse-head h1 { margin: 0; text-align: center; font-size: 1.125rem; font-weight: 600; }
.browse-back { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: -10px; color: var(--ink); }
.browse-list { list-style: none; margin: 0; padding: 0; }
.browse-list li + li { border-top: 1px solid var(--line); }
.browse-row { display: flex; align-items: center; gap: 0.875rem; min-height: 56px; padding: 0.5rem 0; color: var(--ink); text-decoration: none; }
.browse-row:hover { color: var(--accent-strong); }
.browse-row > .icon:first-child { color: var(--accent); }
.browse-name { flex: 1; min-width: 0; }
@media (min-width: 768px) {
  .browse-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .browse-tile { min-height: 120px; }
  .browse-list, .browse-head { max-width: 40rem; }
}

/* Crédits photos d'Explorer : univers et styles */
.photo-credits h3 { font-size: 0.8125rem; font-weight: 600; margin: 0.75rem 0 0.25rem; color: var(--ink); }

/* Aide IA à la création d'annonce (« Remplir à partir de mes photos ») */
.ai-assist { display: grid; gap: 0.5rem; margin-top: 1rem; }
.ai-assist .btn { justify-self: start; }
.badge.ai { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; vertical-align: middle; }

/* Réponses rapides de la conversation : juste au-dessus de la zone d'écriture (collée en bas),
   visibles seulement quand la zone est vide (hauteur connue : une ligne). */
.chat-quick {
  position: sticky; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 65px); z-index: 5;
  margin: 0 calc(-1 * var(--gutter-right)) 0 calc(-1 * var(--gutter));
  padding: 0.5rem var(--gutter-right) 0 var(--gutter);
  background: var(--bg);
}

/* « + Vendre » mis en valeur (décision du 2026-10-07) : rond légèrement surélevé et ombré ;
   halo bleu qui s'élargit puis s'efface, deux fois, à la première page d'une visite
   (classe posée par tabbar.js). Ni clignotement ni animation permanente. */
.tab-sell-circle::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(36, 87, 197, 0.45); opacity: 0; pointer-events: none;
}
.tab-sell-hint .tab-sell-circle::after { animation: sell-halo 2.4s var(--ease) 1.2s 2; }
@keyframes sell-halo {
  0% { opacity: 1; box-shadow: 0 0 0 0 rgba(36, 87, 197, 0.45); }
  70% { opacity: 1; box-shadow: 0 0 0 12px rgba(36, 87, 197, 0); }
  100% { opacity: 0; box-shadow: 0 0 0 12px rgba(36, 87, 197, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .tab-sell-hint .tab-sell-circle::after { animation: none; }
}

/* Accueil : invitation à vendre, une seule, discrète (décision du 2026-10-07) ; affichée seulement
   s'il y a déjà des annonces (sinon l'état vide propose déjà « Vendre un article »). */
.sell-invite {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem;
  margin: 1.5rem 0; padding: 1rem 1.25rem; border-radius: var(--radius-card); background: var(--accent-soft);
}
.sell-invite h2 { margin: 0; font-size: 1.0625rem; font-weight: 600; }
.sell-invite p { margin: 0.125rem 0 0; color: var(--muted); }
.sell-invite .btn { display: inline-flex; align-items: center; gap: 0.375rem; flex: none; width: auto; }
.sell-invite .btn .icon { width: 18px; height: 18px; stroke-width: 2.4; }
/* Page Vendre : la promesse en une ligne, sous le titre. */
.sell-lead { margin: -0.25rem 0 1rem; }

/* Sélecteur de langue du pied de page : drapeau et nom de la langue (décision du 2026-10-10). */
.lang-switch { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.lang-switch a {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0 0.875rem;
  border-radius: var(--radius-pill); color: var(--ink); text-decoration: none; font-size: 0.9375rem;
  box-shadow: inset 0 0 0 1px var(--line);
}
.lang-switch a[aria-current="true"] { box-shadow: inset 0 0 0 1.5px var(--ink); font-weight: 600; }
.lang-switch img { width: 20px; height: 15px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(23, 23, 23, 0.08); }

/* Touches culturelles et sélections (terracotta) : raccourcis des sélections Guira, puces
   d'Explorer, icônes des univers. Les actions restent en bleu. */
.home-shortcuts .chip, .explore .chips .chip {
  background: var(--terracotta-soft); color: var(--terracotta-strong); border-color: transparent;
}
.explore .section-title::after {
  content: ""; display: block; width: 2.5rem; height: 3px; margin-top: 0.375rem;
  border-radius: var(--radius-pill); background: var(--terracotta);
}

/* ── Rendu exclusif et moderne (décision du 2026-10-11) ─────────────────────────────────────
   Fond blanc partout, séparations en filet fin, typographie de titre
   serrée et plus grande, boutons en pilule, cartes sans bordure posées sur une ombre douce,
   étiquettes en filet. Les jetons restent la seule source des couleurs. */
/* Barre de recherche teintée de bleu (demande d'Alain du 2026-10-11 : elle se perdait dans le fond
   blanc) : fond bleu très clair, filet bleuté, loupe bleue. */

.card { border-color: transparent; box-shadow: var(--shadow-card); }

.chip { background: transparent; border-color: var(--hairline); }

/* Choix de la langue en haut de page (2026-10-11, comme PapierChrono) : drapeau de la langue en
   cours dans l'en-tête, qui ouvre la liste des langues (d'un toucher, sans survol). */
.header-lang { position: relative; }
.header-lang > summary { list-style: none; cursor: pointer; }
.header-lang > summary::-webkit-details-marker { display: none; }
.header-lang > summary img { width: 22px; height: 16px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(23, 23, 23, 0.12); }
.header-lang-menu {
  position: absolute; right: 0; top: calc(100% + 0.375rem); z-index: 40; min-width: 11rem;
  padding: 0.375rem; background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-lg);
}
.header-lang-menu .lang-switch { flex-direction: column; flex-wrap: nowrap; gap: 0.125rem; margin: 0; }
.header-lang-menu .lang-switch a { width: 100%; justify-content: flex-start; box-shadow: none; border-radius: 10px; }
.header-lang-menu .lang-switch a[aria-current="true"] { background: var(--accent-soft); box-shadow: none; }

/* ── Cartes d'annonce aux mesures de Vinted (demande d'Alain du 2026-10-11) ─────────────────
   Photo 3:4 aux angles presque droits, titre sur une ligne (12 px), taille · état (12 px), prix
   (14 px ; prix protection incluse en avant, voir .card-total). Grille : 2 colonnes sur téléphone, 3 sur tablette, 4 puis 5 sur ordinateur. */
@media (min-width: 1024px) {
  .product-row { grid-auto-columns: minmax(9rem, 18%); }
}

/* Traduction automatique d'une annonce (site bilingue, étape 6) : mention discrète sous le titre. */
.translation-note { margin: -0.25rem 0 0.5rem; color: var(--muted); font-size: 0.8125rem; }
.translation-note a { color: var(--accent); }

/* Mon argent (plan d'interface du 2026-10-11) : trois montants, puis la liste des versements. */
.wallet-figures { list-style: none; margin: 0 0 0.5rem; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.wallet-figures li { display: grid; gap: 0.125rem; padding: 0.875rem 0.75rem; background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); font-size: 0.8125rem; color: var(--muted); }
.wallet-amount { font-size: 1.25rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.wallet-list { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.wallet-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--line); }
.wallet-row p { margin: 0; }
.wallet-title { font-size: 0.9375rem; }
.wallet-right { display: grid; justify-items: end; gap: 0.25rem; font-variant-numeric: tabular-nums; }
.badge.warn { background: var(--warn-bg); color: var(--warn); }

/* Profil en quatre groupes (plan d'interface du 2026-10-11, comme Vinted). */
.menu-heading { margin: 1.25rem 0 0.375rem 0.25rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }

/* Paramètres en rubriques (plan d'interface du 2026-10-11) : téléphone = liste puis rubrique ;
   ordinateur = liste à gauche, rubrique à droite. */
.settings-panel-title { margin: 0 0 0.75rem; font-size: 1.25rem; }
.settings-back { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 0.25rem; text-decoration: none; font-weight: 600; }
.settings-menu .menu-row[aria-current="page"] { background: var(--accent-soft); color: var(--accent-strong); }
@media (min-width: 1024px) {
  .settings-layout { display: grid; grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
  .settings-menu { position: sticky; top: calc(var(--header-h) + 3.5rem); }
}
@media (min-width: 1024px) { .account-wide { max-width: 56rem; } }

/* Accueil sans bandeau (comme Vinted, 2026-10-11) : les annonces dès le premier écran. */
.home .home-shortcuts { margin-bottom: 0.25rem; }
.home .section-title.home-first { margin-top: 1rem; }
.home-search { margin: 0 0 0.75rem; }
@media (min-width: 768px) { .home-search { max-width: 36rem; } }
/* Prix avec la protection acheteur sur la carte (comme Vinted, 2026-10-11). */
.card-total { margin: 0; font-size: 12px; line-height: 16px; color: var(--accent); font-variant-numeric: tabular-nums; }
.card-total-amount { font-size: 16px; line-height: 22px; font-weight: 600; }
.card-price.is-base { font-size: 12px; line-height: 16px; font-weight: 400; color: var(--muted); }
/* Paramètres → Sécurité : appareils connectés. */
.device-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.device-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.625rem 0; border-bottom: 1px solid var(--line); }
.device-row p { margin: 0; }
.device-name { font-weight: 600; }
/* Mon argent → Mes revenus : tableau par année. */
.table-scroll { overflow-x: auto; }
.income-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; margin-bottom: 0.5rem; }
.income-table th, .income-table td { text-align: right; padding: 0.5rem 0.375rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.income-table th:first-child, .income-table td:first-child { text-align: left; }
.income-table th { font-size: 0.8125rem; color: var(--muted); font-weight: 600; }
.sell-notice { margin-top: 1rem; font-size: 0.8125rem; }

/* Fond blanc (2026-10-11) : les tuiles et les étiquettes de rayons reprennent un fond gris chaud
   très clair pour se détacher de la page (comme les tuiles de Vinted). */
.chips.type-chips .chip:not(.chip-active):not([aria-current="page"]) { background: var(--soft); border-color: transparent; }
.chips.type-chips .chip:not(.chip-active):not([aria-current="page"]):hover { background: var(--beige); }

/* Liens légaux (plus de pied de page depuis le 2026-10-11) : page de connexion et d'inscription. */
.legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 1rem; margin: 2rem 0 0; font-size: 0.8125rem; }
.legal-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); text-decoration: none; }
.legal-links a:hover { color: var(--ink); text-decoration: underline; }

/* Accueil en fil continu (2026-10-11) : l'invitation à vendre est une carte glissée dans le fil,
   sur toute la largeur de la grille. */
.product-grid > .feed-sell-invite { grid-column: 1 / -1; list-style: none; }
.feed-sell-invite .sell-invite { margin: 0.5rem 0; }

/* Icônes en couleur des catégories (Fluent Emoji 3D, 2026-10-11) : images, pas de trait. */
img.cat-icon { object-fit: contain; flex: none; }
.browse-row > img.cat-icon { width: 32px; height: 32px; }
.mega-group-title img.cat-icon { width: 26px; height: 26px; }
.browse-tile-art img.cat-icon { width: 64px; height: 64px; }

/* Explorer plus éditorial (2026-10-11) : univers en bande horizontale, rangées de styles avec
   leur petite photo, « Bientôt sur Guira » discret en bas. */
.universe-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(11rem, 42%); grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 0.75rem; }
.universe-strip::-webkit-scrollbar { display: none; }
.universe-strip > li { scroll-snap-align: start; }
@media (min-width: 768px) { .universe-strip { grid-auto-columns: minmax(12rem, 24%); } }
.style-row-head { display: inline-flex; align-items: center; gap: 0.75rem; color: inherit; text-decoration: none; }
.style-thumb { width: 48px; height: 64px; object-fit: cover; border-radius: 8px; flex: none; }
.style-row-name { display: grid; line-height: 1.2; }
.style-row-name .tile-count { font-size: 0.8125rem; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.explore-soon { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.explore-soon-title { margin: 0 0 0.5rem; font-size: 0.875rem; font-weight: 600; color: var(--muted); }
.explore-soon .chip { opacity: 0.85; }

/* Guide des tissus et des tenues (Explorer, 2026-10-11). */
.guide-teaser { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 2rem 0 0.5rem; padding: 1rem 1.125rem; border-radius: var(--radius-card); background: var(--terracotta-soft); color: var(--ink); text-decoration: none; }
.guide-teaser:hover { color: var(--ink); background: var(--beige); }
.guide-teaser-text { display: grid; gap: 0.125rem; }
.guide-teaser-text span { color: var(--muted); font-size: 0.9375rem; }
.guide-teaser .row-more { flex: none; color: var(--terracotta-strong); font-weight: 600; }
.guide-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 1rem; }
.guide-card { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; align-items: start; padding-bottom: 1rem; border-bottom: 1px solid var(--line); scroll-margin-top: 7rem; }
.guide-photo { display: block; aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; background: var(--placeholder-wash), var(--leopard) center / 120px, var(--placeholder-bg); }
.guide-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.guide-text h2 { margin: 0 0 0.25rem; font-size: 1.125rem; }
.guide-text p { margin: 0 0 0.75rem; color: var(--ink); max-width: 62ch; }
@media (min-width: 768px) { .guide-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2rem; } .guide-card { grid-template-columns: 8rem minmax(0, 1fr); } }

/* Première annonce : vérifications dans « Vendre » (revue du parcours, 2026-10-11). */
.onboarding .onboard-step { padding: 1rem 0; border-top: 1px solid var(--line); }
.onboarding .onboard-step h3 { margin: 0 0 0.375rem; font-size: 1rem; }
.onboarding .onboard-step.done h3 { color: var(--muted); }
.onboard-state { color: var(--ok); font-weight: 600; font-size: 0.875rem; }
.onboard-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.onboard-actions .btn { width: auto; }
.onboard-pro { margin: 0.75rem 0 0; }

/* Mini-guides au premier usage (2026-10-11) : trois étapes numérotées, fermables. */
.first-guide { margin: 0 0 1rem; }
.first-guide-card { padding: 1rem 1.125rem; border-radius: var(--radius-card); background: var(--accent-soft); }
.first-guide-card h2 { margin: 0 0 0.5rem; font-size: 1rem; }
.first-guide-card ol { margin: 0 0 0.75rem; padding-left: 1.25rem; display: grid; gap: 0.375rem; font-size: 0.9375rem; }
.first-guide-card .btn { width: auto; }
.first-guide-reopen { min-height: 44px; font-size: 0.875rem; }

/* Centre d'aide (/aide), comme celui de Vinted */
.help { max-width: 48rem; padding-bottom: calc(6rem + env(safe-area-inset-bottom)); }
.help h1 { font-size: 1.75rem; line-height: 1.2; margin: 0.5rem 0 1rem; text-wrap: balance; }
.help-orders { margin: 0 0 1.5rem; }
.help-orders h2, .help-theme h2 { font-size: 1.25rem; margin: 1.5rem 0 0.75rem; }
.help-order-photo { width: 48px; height: 64px; object-fit: cover; border-radius: 4px; background: var(--beige); flex: none; }
.help-orders .menu-label { display: grid; gap: 0.125rem; }
.help-orders .menu-label strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.help-themes { margin: 0.5rem 0 0; }
.help-question { border-bottom: 1px solid var(--line); }
.help-question summary {
  display: flex; align-items: center; min-height: 52px; padding: 0.5rem 0; cursor: pointer;
  font-weight: 600; list-style: none;
}
.help-question summary::-webkit-details-marker { display: none; }
.help-question summary::after { content: "+"; margin-left: auto; padding-left: 1rem; color: var(--muted); font-weight: 400; font-size: 1.25rem; }
.help-question[open] summary::after { content: "−"; }
.help-answer { padding: 0 0 0.75rem; }
.help-answer p { margin: 0 0 0.625rem; }
.help-contact { margin: 2rem 0 1rem; }
.help-contact h2 { font-size: 1.125rem; margin: 0 0 0.5rem; }

/* Champs : toujours 16 px, quelle que soit la taille du texte autour (sinon l'iPhone zoome
   la page dès qu'on touche un champ). */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: 16px !important; }

/* Recherches récentes sous la barre (comme Vinted, public/js/search-history.js) */
.recent-searches {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: -4px; right: -4px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); padding: 0.25rem 0 0.375rem; overflow: hidden;
}
.recent-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.25rem 0.5rem 0.25rem 1rem; color: var(--muted); font-size: 0.875rem; }
.recent-clear { min-height: 44px; padding: 0 0.5rem; font-size: 0.875rem; }
.recent-searches ul { list-style: none; margin: 0; padding: 0; }
.recent-searches li { display: flex; align-items: center; }
.recent-link {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 0.625rem; min-height: 44px; padding: 0 0.5rem 0 1rem;
  color: var(--ink); text-decoration: none;
}
.recent-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-link .icon { width: 18px; height: 18px; color: var(--muted); flex: none; }
.recent-link:hover, .recent-link:focus-visible { background: var(--soft); color: var(--ink); }
.recent-remove {
  flex: none; width: 44px; height: 44px; border: 0; background: none; color: var(--muted);
  font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.recent-remove:hover { color: var(--ink); }

/* Accueil : un article mis en favori quitte le fil (card-favorites.js) */
.product-card.card-leaving { opacity: 0; transform: scale(0.92); transition: opacity 280ms var(--ease), transform 280ms var(--ease); pointer-events: none; }

/* « Vendre » : bloc Cosmétique (contenance et unité côte à côte) */
.cosmetic-fields { display: grid; gap: 0.75rem; border: 0; padding: 0; margin: 0 0 1rem; }
.cosmetic-fields legend { font-weight: 600; margin-bottom: 0.25rem; }
.field-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 0.75rem; }
.field-row .field { margin: 0; }

/* Fil « Pour vous » (migration 030) : « Pourquoi cet article ? » sous la carte */
.card-reason { margin: 0.125rem 0 0; font-size: 11px; line-height: 14px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* « Vos goûts » (fil « Pour vous ») : étiquettes à toucher dans le panneau du bas */
.taste-form h3 { font-size: 1rem; margin: 1rem 0 0.5rem; }
.taste-form .hint { margin: 0; }
.taste-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.taste-chip { position: relative; display: inline-flex; }
.taste-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.taste-chip span {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 0.875rem; border-radius: var(--radius-pill);
  background: var(--soft); color: var(--ink); font-size: 0.9375rem; box-shadow: inset 0 0 0 1px var(--line);
}
.taste-chip input:checked + span { background: var(--accent-soft); color: var(--accent-strong); box-shadow: inset 0 0 0 2px var(--accent); }
.taste-chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Mode Découverte (fil « Pour vous », étape 3) : un article par écran, comme TikTok. Plein écran,
   sans en-tête ni barre d'onglets ; sur ordinateur, une colonne au format téléphone au centre. */
:root { --discover-bg: #0B0B0B; --discover-text: #FFFFFF; --discover-shade: rgba(0, 0, 0, 0.55); --discover-button: rgba(255, 255, 255, 0.16); }
body:has(main.discover) { padding-bottom: 0; background: var(--discover-bg); }
body:has(main.discover) .site-header, body:has(main.discover) .tabbar, body:has(main.discover) .category-bar { display: none; }
main.discover { position: fixed; inset: 0; z-index: 50; background: var(--discover-bg); color: var(--discover-text); }
.discover-list {
  height: 100%; width: 100%; max-width: 30rem; margin: 0 auto; overflow-y: auto;
  scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none;
}
.discover-list::-webkit-scrollbar { display: none; }
.discover-card { position: relative; height: 100dvh; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; }
.discover-photo, .discover-photo picture { position: absolute; inset: 0; display: block; }
.discover-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.discover-nophoto { position: absolute; inset: 0; background: var(--beige); }
.discover-card::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 55%; pointer-events: none;
  background: linear-gradient(to top, var(--discover-shade), transparent);
}
.discover-info {
  position: absolute; z-index: 2; left: 16px; right: 88px; bottom: calc(24px + env(safe-area-inset-bottom));
  display: grid; gap: 0.25rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.discover-reason {
  justify-self: start; margin: 0; padding: 0.25rem 0.625rem; border-radius: var(--radius-pill);
  background: var(--discover-button); font-size: 12px; backdrop-filter: blur(6px);
}
.discover-title { color: var(--discover-text); font-size: 1.125rem; font-weight: 600; text-decoration: none; line-height: 1.3; }
.discover-meta { margin: 0; font-size: 13px; opacity: 0.9; }
.discover-price { margin: 0; font-size: 15px; }
.discover-price span { opacity: 0.8; font-size: 13px; }
.discover-actions {
  position: absolute; z-index: 2; right: 12px; bottom: calc(24px + env(safe-area-inset-bottom));
  display: grid; gap: 14px; justify-items: center;
}
.discover-action {
  display: grid; justify-items: center; gap: 4px; min-width: 56px; padding: 0; border: 0; background: none;
  color: var(--discover-text); font: inherit; font-size: 11px; text-decoration: none; cursor: pointer;
}
.discover-action .icon {
  width: 48px; height: 48px; padding: 12px; border-radius: 50%; background: var(--discover-button);
  backdrop-filter: blur(6px); stroke: currentColor;
}
.discover-heart[aria-pressed="true"] .icon { fill: var(--bordeaux); stroke: var(--bordeaux); }
.discover-close {
  position: fixed; z-index: 60; top: calc(12px + env(safe-area-inset-top)); left: 12px;
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--discover-button); color: var(--discover-text); backdrop-filter: blur(6px);
}
.discover-close .icon { width: 22px; height: 22px; }
.discover-burst { position: absolute; z-index: 3; left: 50%; top: 45%; transform: translate(-50%, -50%); pointer-events: none; }
.discover-burst .icon { width: 110px; height: 110px; fill: var(--bordeaux); stroke: none; animation: discover-burst 700ms var(--ease) forwards; }
@keyframes discover-burst { 0% { transform: scale(0.4); opacity: 0; } 30% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .discover-burst .icon { animation: none; opacity: 0.9; } }
.discover-hint {
  position: fixed; z-index: 60; left: 50%; top: 40%; transform: translateX(-50%); margin: 0; padding: 0.75rem 1rem;
  max-width: 18rem; text-align: center; border-radius: var(--radius-card); background: var(--discover-shade); color: var(--discover-text);
}
.discover-empty { position: absolute; inset: 0; align-content: center; color: var(--discover-text); }
/* Accueil : entrée du mode Découverte, à côté du titre du fil */
.home-feed-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.home-discover { display: inline-flex; align-items: center; gap: 0.375rem; font-weight: 600; text-decoration: none; min-height: 44px; }
.home-discover .icon { width: 18px; height: 18px; }

/* Recherches sous la barre (migration 031, comme Vinted) : « +N » nouveaux articles, titre, résumé
   des filtres, icône de sauvegarde (pleine si la recherche est sauvegardée). */
.recent-text { display: grid; gap: 1px; min-width: 0; }
.recent-title, .recent-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-count { color: var(--ok); font-weight: 600; margin-right: 0.375rem; }
.recent-sub { font-size: 13px; color: var(--muted); }
.recent-searches .recent-link { min-height: 52px; }
.recent-save {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border: 0; background: none; color: var(--muted); cursor: pointer;
}
.recent-save .icon { width: 20px; height: 20px; }
.recent-save[aria-pressed="true"] { color: var(--accent); }
.recent-save[aria-pressed="true"] .icon { fill: currentColor; }
.recent-save:hover { color: var(--ink); }
.save-search[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-strong); box-shadow: inset 0 0 0 1px var(--accent); }

/* Nombre de favoris dans le cœur des cartes, visible par tous (comme Vinted, 2026-10-12) :
   le rond devient une petite pilule « ♡ 15 ». */
.card-fav.has-count { width: auto; min-width: 44px; padding: 0 14px 0 12px; gap: 4px; }
.card-fav.has-count::before { width: auto; left: 5px; right: 5px; border-radius: var(--radius-pill); }
.card-fav-count { position: relative; font-size: 12px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.card-fav-count:empty { display: none; }

/* Bandeau « Achetez un lot » (comme Vinted, 2026-10-15) : vitrine et fiche. */
.bundle-banner { display: flex; align-items: center; gap: 0.75rem; margin: 0.75rem 0; padding: 0.875rem 1rem; }
.bundle-banner-icon { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent); }
.bundle-banner-text { flex: 1; min-width: 0; }
.bundle-banner-text p { margin: 0; }
.bundle-banner-title { font-weight: 600; }
.bundle-banner .btn { margin: 0; flex: none; }

/* Carte de présentation de l'autre membre en tête de la conversation (comme Vinted, 2026-10-16). */
.chat-intro { display: flex; gap: 0.75rem; align-items: center; margin: 0 auto 0.75rem; padding: 0.75rem 1rem; max-width: 26rem; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.chat-intro-text p { margin: 0; }
.chat-intro-name { font-weight: 600; }
.chat-offer-form .chips { margin-bottom: 0.75rem; }

/* Vitrine (comme Vinted, 2026-10-16) : informations vérifiées, filtres du dressing. */
.member-verified { margin: 0.5rem 0 0.75rem; }
.member-verified h2 { margin: 0 0 0.25rem; font-size: 0.875rem; font-weight: 400; }
.member-verified ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0; padding: 0; list-style: none; }
.member-verified li { display: inline-flex; align-items: center; gap: 0.375rem; }
.member-verified .icon { color: var(--ok); }
.dressing-filters { display: grid; gap: 0.5rem; margin-bottom: 1rem; scroll-margin-top: 5rem; }
.dressing-filters .chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }

/* Encouragement de la page de lot (comme Vinted, 2026-10-16). */
.bundle-nudge { margin: 0; font-weight: 600; color: var(--ok); }
.bundle-total[hidden], .bundle-actions[hidden] { display: none; }

/* Champ de mot de passe avec bouton « Afficher / Masquer » (public/js/password-toggle.js, 2026-10-17).
   Zone de toucher de 44 px, posée dans le champ à droite ; le texte ne passe pas sous le bouton. */
.password-field { position: relative; }
.field .password-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) { padding-right: 3rem; }
.password-toggle {
  position: absolute; top: 50%; right: 2px; transform: translateY(-50%);
  display: grid; place-items: center; width: 44px; height: 44px;
  padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer;
  border-radius: var(--radius-control);
}
.password-toggle svg { width: 20px; height: 20px; }
.password-toggle[aria-pressed="true"] { color: var(--accent); }
.password-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }