/* =====================================================================
   Sister's Tijara — Design System
   Couleurs & typographie extraites du logo
   « Mon univers au féminin... »
   ===================================================================== */

:root {
  /* --- Palette du logo --- */
  --wine:        #7c2d42;   /* bordeaux « Tijara » */
  --wine-dark:   #5e1f30;   /* bordeaux profond    */
  --wine-soft:   #9a4459;
  --rose:        #c56b82;   /* rose du hijab       */
  --rose-mid:    #d98ba0;
  --rose-light:  #e8b7c4;
  --rose-pale:   #f4d9e0;
  --blush:       #fbefe9;   /* fond crème du logo  */
  --blush-deep:  #f6e2da;
  --gold:        #e0a96d;   /* étoile ❖            */
  --gold-soft:   #edc79b;
  --ink:         #3a2a2e;   /* texte principal     */
  --ink-soft:    #6b5157;
  --muted:       #9c868c;
  --line:        #efd9df;
  --white:       #ffffff;
  --card:        #fffaf8;
  --success:     #4f9d69;
  --danger:      #cf5a6b;

  /* --- Dégradés --- */
  --grad-rose:  linear-gradient(135deg, #d98ba0 0%, #b8556f 55%, #7c2d42 100%);
  --grad-wine:  linear-gradient(135deg, #8b3350 0%, #5e1f30 100%);
  --grad-blush: linear-gradient(160deg, #fdf5f1 0%, #f8e6de 100%);
  --grad-gold:  linear-gradient(135deg, #edc79b 0%, #e0a96d 100%);

  /* --- Ombres teintées rose --- */
  --shadow-sm: 0 2px 8px rgba(124, 45, 66, .06);
  --shadow:    0 8px 26px rgba(124, 45, 66, .10);
  --shadow-lg: 0 18px 48px rgba(124, 45, 66, .16);

  /* --- Formes --- */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;
  --r-xl: 30px;

  /* --- Typo --- */
  --f-head: "Playfair Display", "Georgia", serif;
  --f-body: "Poppins", -apple-system, "Segoe UI", sans-serif;
  --f-script: "Dancing Script", "Playfair Display", cursive;

  --container: 1200px;
}

/* --------------------------------------------------- Accessibilité */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 10000;
  background: var(--wine-dark); color: #fff; padding: 12px 20px;
  border-radius: 0 0 10px 0; font-weight: 600;
}
.skip-link:focus { left: 0; color: #fff; }
:focus-visible {
  outline: 3px solid var(--rose); outline-offset: 2px; border-radius: 4px;
}
/* pas de double contour sur les champs déjà stylés au focus */
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: 3px solid var(--rose); outline-offset: 1px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------------- Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* La couleur de fond est posée sur <html> et non seulement sur <body> : c'est
   elle que le navigateur étend à toute la surface visible, y compris au-delà
   de la page quand l'écran est plus large que celle-ci. Un fond nu à cet
   endroit se remarque immédiatement comme un « espace vide ». */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--blush); }
body {
  font-family: var(--f-body);
  color: var(--ink);
  background: var(--blush);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  min-height: 100dvh; /* iOS : la barre d'adresse ne fait plus sauter la hauteur */
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; display: block; }
/* Icônes Lucide en ligne : alignées sur le texte, héritent de la couleur */
.ico { display: inline-block; vertical-align: -0.15em; flex-shrink: 0; }
.ico-rose { color: var(--rose); }
.ico-wine { color: var(--wine); }
.ico-gold { color: var(--gold); }
.ico-success { color: var(--success); }
.ico-danger { color: var(--danger); }
.ico-muted { color: var(--muted); }
a { color: var(--wine); text-decoration: none; transition: color .2s; }
a:hover { color: var(--rose); }
button, input, select, textarea { font: inherit; color: inherit; }
ul { list-style: none; padding: 0; }

h1, h2, h3, h4 { font-family: var(--f-head); font-weight: 700; line-height: 1.2; color: var(--wine-dark); }
h1 { font-size: clamp(2rem, 4vw, 3.1rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
h3 { font-size: 1.25rem; }

/* ------------------------------------------------------------ Layout */
.container {
  max-width: var(--container); margin-inline: auto;
  /* env(safe-area-inset-*) : sur iPhone à encoche en paysage, le contenu ne
     passe plus sous les coins arrondis ni sous la barre latérale du système. */
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
}
.section { padding: 72px 0; }
.section-sm { padding: 44px 0; }
.text-center { text-align: center; }
.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:36px}
.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}.mb-4{margin-bottom:36px}
.grid { display: grid; gap: 24px; }
.hidden { display: none !important; }

/* Titre de section avec étoile */
.section-head { text-align: center; max-width: 680px; margin: 0 auto 44px; }
.section-head .eyebrow {
  font-family: var(--f-body); font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; font-size: .74rem; color: var(--rose);
  display: inline-flex; align-items: center; gap: 8px;
}
.section-head .eyebrow::before,
.section-head .eyebrow::after { content: "❖"; color: var(--gold); font-size: .8rem; }
.section-head h2 { margin-top: 10px; }
.section-head p { color: var(--ink-soft); margin-top: 12px; }

.star-divider { color: var(--gold); text-align: center; font-size: 1.1rem; letter-spacing: 6px; }

/* ---------------------------------------------------------- Boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 26px; border-radius: 999px; border: none; cursor: pointer;
  font-weight: 600; font-size: .95rem; letter-spacing: .01em;
  transition: transform .18s ease, box-shadow .25s ease, background .25s, color .2s;
  white-space: nowrap; text-align: center;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--grad-rose); color: #fff; box-shadow: 0 8px 20px rgba(184,85,111,.35); }
.btn-primary:hover { color: #fff; box-shadow: 0 12px 28px rgba(184,85,111,.45); }
.btn-wine { background: var(--grad-wine); color: #fff; box-shadow: 0 8px 20px rgba(94,31,48,.3); }
.btn-wine:hover { color:#fff; }
.btn-gold { background: var(--grad-gold); color: var(--wine-dark); box-shadow: 0 8px 20px rgba(224,169,109,.4); }
.btn-gold:hover { color: var(--wine-dark); }
.btn-outline { background: transparent; color: var(--wine); border: 1.5px solid var(--rose-light); }
.btn-outline:hover { background: var(--rose-pale); color: var(--wine); border-color: var(--rose); }
.btn-ghost { background: rgba(255,255,255,.7); color: var(--wine); border: 1.5px solid transparent; }
.btn-ghost:hover { background: #fff; color: var(--rose); }
.btn-block { width: 100%; }
.btn-sm { padding: 8px 16px; font-size: .85rem; }
.btn-lg { padding: 15px 34px; font-size: 1.02rem; }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* ------------------------------------------------------------ Badges */
.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px;
  border-radius: 999px; font-size: .74rem; font-weight: 600; line-height: 1;
}
/* Badge « Vérifiée » : pastille ronde, icône seule, libellé en infobulle.
   Le mot écrit à côté allongeait inutilement la ligne du nom de boutique. */
.badge-verified {
  position: relative; display: inline-grid; place-items: center; flex-shrink: 0;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(79, 157, 105, .14); color: #4f9d69;
  vertical-align: middle; cursor: help;
}
.badge-verified svg { color: #4f9d69; display: block; }

/* Infobulle au survol (et au focus clavier) */
.badge-verified::after {
  content: attr(data-infobulle);
  position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%);
  background: var(--wine-dark); color: #fff; padding: 5px 10px; border-radius: 8px;
  font-size: .72rem; font-weight: 600; line-height: 1; white-space: nowrap;
  box-shadow: var(--shadow); pointer-events: none; z-index: 30;
  opacity: 0; visibility: hidden; transition: opacity .16s ease, transform .16s ease;
}
.badge-verified::before {
  content: ""; position: absolute; bottom: calc(100% + 4px); left: 50%;
  border: 5px solid transparent; border-top-color: var(--wine-dark);
  transform: translateX(-50%); pointer-events: none; z-index: 30;
  opacity: 0; visibility: hidden; transition: opacity .16s ease;
}
.badge-verified:hover::after, .badge-verified:focus-visible::after,
.badge-verified:hover::before, .badge-verified:focus-visible::before {
  opacity: 1; visibility: visible;
}
@media (prefers-reduced-motion: reduce) {
  .badge-verified::after, .badge-verified::before { transition: none; }
}
.badge-plan-starter    { background: #eee6e8; color: var(--ink-soft); }
.badge-plan-essentielle{ background: var(--rose-pale); color: var(--wine); }
.badge-plan-premium    { background: var(--grad-gold); color: var(--wine-dark); }
.badge-cat  { background: var(--blush-deep); color: var(--wine); }
.badge-featured { background: var(--grad-gold); color: var(--wine-dark); box-shadow: var(--shadow-sm); }
.badge-status-pending  { background: #fdf0dd; color: #a5762a; }
.badge-status-approved { background: rgba(79,157,105,.13); color: #37784e; }
.badge-status-rejected { background: rgba(207,90,107,.14); color: #b23e50; }

/* ------------------------------------------------------------ Étoiles */
.stars { color: var(--gold); letter-spacing: 1px; font-size: .95rem; display:inline-flex; }
.stars .star { color: #e6d3d7; }
.stars .star.full { color: var(--gold); }
.stars .star.half { position: relative; color: #e6d3d7; }
.stars .star.half::before { content:"★"; position:absolute; left:0; width:50%; overflow:hidden; color: var(--gold); }
.stars-count { color: var(--muted); font-size: .82rem; margin-left: 6px; font-family: var(--f-body); }

/* ============================================================ HEADER */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(251,239,233,.88); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header .bar { display: flex; align-items: center; gap: 18px; height: 72px; flex-wrap: nowrap; }
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 1; min-width: 0; margin-right: auto; overflow: hidden; }
.brand img, .brand svg { height: 46px; width: auto; }
/* Vrai logo fourni (image) : plus grand, texte masqué */
.brand-has-logo img { height: 46px; width: auto; max-width: 240px; object-fit: contain; }
@media (max-width: 560px){ .brand-has-logo img { height: 38px; max-width: 150px; } }
@media (max-width: 380px){ .brand-has-logo img { max-width: 120px; } }
.brand .brand-text { display: flex; flex-direction: column; line-height: 1; min-width: 0; }
.brand .brand-name { font-family: var(--f-head); font-weight: 800; color: var(--wine); font-size: 1.15rem; white-space: nowrap; }
.brand .brand-name .apos { color: var(--rose); }
.brand .brand-tag { font-family: var(--f-script); color: var(--rose); font-size: .95rem; margin-top: 2px; white-space: nowrap; }

.main-nav { display: flex; align-items: center; gap: 4px; }
.main-nav a {
  padding: 9px 14px; border-radius: 999px; color: var(--ink); font-weight: 500; font-size: .92rem;
}
.main-nav a:hover, .main-nav a.active { background: var(--rose-pale); color: var(--wine); }

/* Bloc de droite : actions + compte. Il reste prioritaire (il ne cède qu'en
   dernier), mais il PEUT se comprimer : sinon, avec une police système très
   agrandie, la barre du haut déborde de quelques pixels et toute la page
   se retrouve décalée. */
.nav-right { display: flex; align-items: center; gap: 8px; flex-shrink: 1; min-width: 0; }
.main-nav { min-width: 0; }
.brand-has-logo img { max-width: min(260px, 100%); }
.nav-publish { padding-inline: 12px; }
.nav-publish .ico { margin: 0; }

.nav-icon-btn {
  position: relative; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; background: #fff; box-shadow: var(--shadow-sm);
  color: var(--wine); border: 1px solid var(--line);
}
.nav-icon-btn:hover { color: var(--rose); transform: translateY(-1px); }
/* Pastille de compteur — cloche, messagerie et bouton « Mon compte ».
   Elle ne visait auparavant que `.nav-icon-btn .count` : le badge du bouton
   compte, qui n'est pas dans un bouton icône, restait sans fond ni arrondi.
   Le sélecteur reste toutefois limité à l'en-tête : la classe `.count` sert
   aussi au libellé « N annonces » des cartes de catégorie de l'accueil. */
.nav-icon-btn .count,
.account-btn .count {
  position: absolute;
  /* padding 4px : à un chiffre le contenu reste sous les 20px de min-width,
     la pastille est donc un cercle parfait ; à deux chiffres elle s'allonge. */
  min-width: 20px; height: 20px; padding: 0 4px;
  background: var(--grad-rose); color: #fff;
  /* Taille plafonnée : sans cela, une police système agrandie transforme le
     cercle en pastille allongée et le badge devient disproportionné. */
  font-size: clamp(9.5px, .68rem, 12px); font-weight: 700; line-height: 1;
  border-radius: 999px; display: grid; place-items: center;
  /* Anneau blanc : la pastille se détache aussi bien du bouton blanc que de
     l'en-tête blush, et garde un contour net sur n'importe quel fond. Le halo
     blanc puis l'ombre portée lui donnent du relief. */
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .9), 0 2px 6px rgba(124, 45, 66, .35);
}
.nav-icon-btn .count { top: -6px; right: -6px; }

/* Bouton « Mon compte » (connectée) */
.account-btn {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px 4px 4px; border-radius: 999px; background: #fff;
  border: 1px solid var(--line); box-shadow: var(--shadow-sm); color: var(--wine);
  font-weight: 600; font-size: .9rem; cursor: pointer; transition: border-color .2s, color .2s;
}
.account-btn:hover { border-color: var(--rose); color: var(--rose); }
.account-av { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid var(--rose-light); flex-shrink: 0; }
.account-caret { opacity: .6; transition: transform .2s; }
.dropdown.open .account-caret { transform: rotate(180deg); }
.account-badge { position: absolute; top: -4px; left: 25px; }
.dropdown-menu a .ico { color: var(--rose); }

/* Bouton « Se connecter » (déconnectée) */
.account-btn-link { gap: 7px; }
.account-btn-link .ico { margin: 0; }

.burger { display: none; background: none; border: none; cursor: pointer; padding: 6px; color: var(--wine); flex-shrink: 0; }
.burger .ico { width: 28px; height: 28px; }

/* Dropdown compte */
.dropdown { position: relative; }
.dropdown-menu {
  position: absolute; right: 0; top: calc(100% + 10px); min-width: 220px;
  background: #fff; border-radius: var(--r); box-shadow: var(--shadow-lg);
  border: 1px solid var(--line); padding: 8px; opacity: 0; visibility: hidden;
  transform: translateY(-8px); transition: all .2s; z-index: 200;
}
.dropdown.open .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-menu a, .dropdown-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px;
  border-radius: var(--r-sm); color: var(--ink); font-size: .9rem; background: none; border: none;
  cursor: pointer; text-align: left;
}
.dropdown-menu a:hover, .dropdown-menu button:hover { background: var(--rose-pale); color: var(--wine); }
.dropdown-menu .divider { height: 1px; background: var(--line); margin: 6px 4px; }
.dropdown-head { padding: 10px 12px; }
.dropdown-head strong { display:block; color: var(--wine-dark); }
.dropdown-head span { font-size: .8rem; color: var(--muted); }

/* ============================================================ HERO */
/* ======================================================= CARDS grids */
.cards-3 { grid-template-columns: repeat(3, 1fr); }
.cards-4 { grid-template-columns: repeat(4, 1fr); }
.cards-2 { grid-template-columns: repeat(2, 1fr); }
.cards-auto { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

/* Carte annonce */
.listing-card {
  background: var(--card); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-sm);
  border: 1px solid var(--line); transition: transform .22s, box-shadow .25s; position: relative;
  display: flex; flex-direction: column;
}
.listing-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.listing-card .media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--blush-deep); }
.listing-card .media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.listing-card:hover .media img { transform: scale(1.06); }
.listing-card .media .cat-chip {
  position: absolute; top: 12px; left: 12px; background: rgba(255,255,255,.92); color: var(--wine);
  padding: 5px 11px; border-radius: 999px; font-size: .72rem; font-weight: 600; box-shadow: var(--shadow-sm);
  max-width: 58%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  backdrop-filter: blur(4px);
}
.listing-card .media .featured-chip { position: absolute; top: 12px; right: 12px; }
.fav-btn {
  position: absolute; bottom: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.92); border: none; cursor: pointer; display: grid; place-items: center;
  box-shadow: var(--shadow-sm); transition: transform .18s, background .2s; color: var(--rose);
}
.fav-btn:hover { transform: scale(1.12); background: #fff; }
.fav-btn svg { width: 21px; height: 21px; }
.fav-btn.active { background: var(--grad-rose); color: #fff; }
.fav-btn.pop { animation: pop .4s; }
@keyframes pop { 0%{transform:scale(1)} 40%{transform:scale(1.35)} 100%{transform:scale(1)} }

.listing-card .body { padding: 16px 17px 18px; display: flex; flex-direction: column; flex: 1; }
.listing-card .title { font-family: var(--f-head); font-size: 1.05rem; color: var(--wine-dark); line-height: 1.3; margin-bottom: 8px; }
.listing-card .title a { color: inherit; }
.listing-card .title a:hover { color: var(--rose); }
.listing-card .meta { display: flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--muted); margin-bottom: 10px; }
.listing-card .foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px dashed var(--line); }
.listing-card .price { font-family: var(--f-head); font-weight: 700; color: var(--wine); font-size: 1.08rem; white-space: nowrap; flex-shrink: 0; }
.listing-card .price small { font-size: .7rem; color: var(--muted); font-weight: 400; font-family: var(--f-body); display:block; }
.listing-card .seller { display: flex; align-items: center; gap: 7px; font-size: .78rem; color: var(--ink-soft); min-width: 0; }
.listing-card .seller img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.listing-card .seller span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.listing-card .seller svg { flex-shrink: 0; }

/* Carte catégorie */
.category-card {
  position: relative; border-radius: var(--r-lg); overflow: hidden; min-height: 230px; padding: 26px;
  display: flex; flex-direction: column; justify-content: flex-end; color: #fff;
  box-shadow: var(--shadow); transition: transform .25s, box-shadow .3s;
}
.category-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); color: #fff; }
.category-card::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 30%, rgba(94,31,48,.82)); z-index:1; }
.category-card .bg { position: absolute; inset: 0; z-index: 0; }
.category-card .content { position: relative; z-index: 2; }
.category-card .icon { font-size: 2.2rem; margin-bottom: auto; position: relative; z-index: 2; }
.category-card h3 { color: #fff; font-size: 1.5rem; }
.category-card p { font-size: .88rem; opacity: .92; margin-top: 6px; }
.category-card .count { display: inline-block; margin-top: 12px; font-size: .8rem; font-weight: 600; background: rgba(255,255,255,.22); padding: 4px 12px; border-radius: 999px; }

/* Carte valeur */
.value-card {
  background: var(--card); border-radius: var(--r); padding: 28px 24px; border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); transition: transform .22s; height: 100%;
}
.value-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.value-card .vc-icon {
  width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; font-size: 1.5rem;
  background: var(--grad-blush); color: var(--wine); margin-bottom: 16px; box-shadow: var(--shadow-sm);
}
.value-card h3 { color: var(--wine); }
.value-card .vc-lead { font-weight: 600; color: var(--rose); margin: 6px 0; }
.value-card p { color: var(--ink-soft); font-size: .92rem; }

/* ------------------------------------------- Carte vendeuse / boutique
   La carte ne montrait qu'un aplat rose, un avatar et deux compteurs : rien
   de la boutique elle-même. Elle présente désormais ce qui donne envie d'y
   entrer — un aperçu des créations, l'univers, la présentation — tout en
   restant lisible en une colonne sur téléphone. */
.seller-card {
  background: var(--card); border-radius: var(--r-lg); border: 1px solid var(--line); overflow: hidden;
  box-shadow: var(--shadow-sm); transition: transform .22s, box-shadow .3s, border-color .22s;
  display: flex; flex-direction: column; min-width: 0; color: inherit;
}
.seller-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--rose-light); }
.seller-card:hover h3 { color: var(--wine); }

/* Bannière : motif de marque discret plutôt qu'un aplat, remplacé par la
   photo de couverture quand la vendeuse en a posé une. */
.seller-card .banner {
  height: 88px; position: relative; flex-shrink: 0;
  background: var(--grad-rose);
}
.seller-card .banner::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 18% 120%, rgba(255,255,255,.28), transparent 55%),
    radial-gradient(circle at 88% -20%, rgba(224,169,109,.35), transparent 55%);
}
.seller-card .sc-verif {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,.94); color: #37784e;
  border-radius: 999px; padding: 4px 10px; font-size: .72rem; font-weight: 700;
  box-shadow: 0 2px 8px rgba(94,31,48,.18);
}
.seller-card .av {
  width: 72px; height: 72px; border-radius: 50%; border: 4px solid #fff; object-fit: cover;
  margin: -38px 0 0 20px; box-shadow: var(--shadow-sm); position: relative; z-index: 1; flex-shrink: 0;
}

/* Texte aligné à gauche : plus facile à parcourir qu'un bloc tout centré. */
.seller-card .body { padding: 10px 20px 0; text-align: left; flex: 1; min-width: 0; }
.seller-card h3 {
  font-size: 1.1rem; color: var(--wine-dark); transition: color .2s;
  overflow-wrap: anywhere; line-height: 1.25;
}
.seller-card .sc-meta {
  display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 5px;
  color: var(--muted); font-size: .8rem;
}
.seller-card .sc-meta span { display: inline-flex; align-items: center; gap: 4px; }
.seller-card .sc-meta svg { flex-shrink: 0; }

/* Deux lignes de présentation : assez pour situer la boutique, pas assez
   pour déséquilibrer une grille de cartes. */
.seller-card .sc-bio {
  margin-top: 9px; font-size: .85rem; color: var(--ink-soft); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.seller-card .sc-univers { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

/* Aperçu des créations : trois vignettes, le cœur de la carte. */
.seller-card .sc-apercu {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 12px;
}
.seller-card .sc-apercu img,
.seller-card .sc-apercu .vide {
  width: 100%; aspect-ratio: 1; border-radius: var(--r-sm); object-fit: cover;
  background: var(--blush-deep); display: block;
}
.seller-card .sc-apercu .vide { border: 1px dashed var(--line); background: transparent; }

.seller-card .sc-pied {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 14px; padding: 12px 20px; border-top: 1px dashed var(--line);
  font-size: .82rem; color: var(--muted); min-width: 0;
}
.seller-card .sc-nb strong { color: var(--wine); font-size: .95rem; }
.seller-card .sc-note { display: inline-flex; align-items: center; }
.seller-card .sc-cta {
  margin-left: auto; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; background: var(--rose-pale); color: var(--wine);
  transition: background .2s, transform .2s;
}
.seller-card:hover .sc-cta { background: var(--grad-rose); color: #fff; transform: translateX(3px); }

@media (max-width: 720px) {
  .seller-card .banner { height: 72px; }
  .seller-card .av { width: 62px; height: 62px; margin: -32px 0 0 16px; }
  .seller-card .body { padding: 8px 16px 0; }
  .seller-card .sc-pied { padding: 10px 16px; }
}

/* ============================================================ FORMS */
.form-card {
  background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow); border: 1px solid var(--line);
  padding: 38px;
}
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; font-size: .88rem; color: var(--wine-dark); margin-bottom: 7px; }
.field label .req { color: var(--danger); }
.field .hint { font-size: .78rem; color: var(--muted); margin-top: 5px; }
.input, .select, .textarea {
  width: 100%; padding: 12px 15px; border: 1.5px solid var(--line); border-radius: var(--r-sm);
  background: #fff; color: var(--ink); transition: border .2s, box-shadow .2s;
  /* 16px minimum : en dessous, Safari iOS zoome automatiquement sur le champ
     au moment du focus et la page reste ensuite décalée / débordante. */
  font-size: 1rem;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--rose); box-shadow: 0 0 0 4px rgba(197,107,130,.14);
}
.textarea { resize: vertical; min-height: 120px; }
.input-group { position: relative; }
.input-group .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.input-group .input { padding-left: 42px; }
.field-error { color: var(--danger); font-size: .8rem; margin-top: 5px; }
.input.invalid { border-color: var(--danger); }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: .88rem; color: var(--ink-soft); cursor: pointer; }
.checkbox input { margin-top: 4px; accent-color: var(--rose); width: 16px; height: 16px; }

/* Choix de rôle (inscription) */
.role-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.role-opt { position: relative; }
.role-opt input { position: absolute; opacity: 0; }
.role-opt label {
  display: block; padding: 18px; border: 2px solid var(--line); border-radius: var(--r); cursor: pointer;
  text-align: center; transition: all .2s; background: #fff;
}
.role-opt .ri { font-size: 1.6rem; }
.role-opt label strong { display: block; color: var(--wine-dark); margin-top: 6px; }
.role-opt label span { font-size: .78rem; color: var(--muted); }
.role-opt input:checked + label { border-color: var(--rose); background: var(--rose-pale); box-shadow: 0 0 0 4px rgba(197,107,130,.1); }

/* Upload photos */
.uploader {
  border: 2px dashed var(--rose-light); border-radius: var(--r); padding: 30px; text-align: center;
  background: var(--grad-blush); cursor: pointer; transition: border .2s, background .2s;
}
.uploader:hover, .uploader.drag { border-color: var(--rose); background: var(--rose-pale); }
.uploader .up-icon { font-size: 2rem; }
.preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px,1fr)); gap: 10px; margin-top: 14px; }
.preview-grid .pv { position: relative; aspect-ratio: 1; border-radius: var(--r-sm); overflow: hidden; box-shadow: var(--shadow-sm); }
.preview-grid .pv img { width:100%; height:100%; object-fit: cover; }
.preview-grid .pv button { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; background: rgba(94,31,48,.75); color:#fff; border:none; cursor:pointer; font-size:.8rem; line-height:1; }

/* ============================================================ AUTH page */
.auth-wrap { min-height: calc(100vh - 72px); min-height: calc(100dvh - 72px); display: grid; grid-template-columns: 1fr 1fr; }
.auth-visual { background: var(--grad-rose); position: relative; overflow: hidden; display: grid; place-items: center; padding: 40px; color: #fff; }
.auth-visual::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.25), transparent 50%); }
.auth-visual .inner { position: relative; z-index: 2; max-width: 400px; text-align: center; }
.auth-visual h2 { color: #fff; font-size: 2rem; }
.auth-visual .script { font-family: var(--f-script); font-size: 2rem; color: #ffe9d6; }
.auth-visual ul.pts { text-align: left; margin-top: 24px; display: grid; gap: 12px; }
.auth-visual ul.pts li { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; opacity: .95; }
.auth-visual ul.pts li .ck { flex-shrink: 0; }
.auth-form-side { display: grid; place-items: center; padding: 40px 24px; }
.auth-form-side .inner { width: 100%; max-width: 420px; }

/* ============================================================ DASHBOARD */
.dash { display: grid; grid-template-columns: 250px 1fr; gap: 28px; align-items: start; }
.dash-side {
  background: var(--card); border-radius: var(--r); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  padding: 12px; position: sticky; top: 90px;
}
.dash-side .who { padding: 16px 12px; text-align: center; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.dash-side .who img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; margin: 0 auto 8px; border: 3px solid var(--rose-light); }
.dash-side .who strong { display: block; color: var(--wine-dark); }
.dash-side nav a {
  display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: var(--r-sm);
  color: var(--ink); font-size: .92rem; font-weight: 500; margin-bottom: 2px;
}
.dash-side nav a:hover { background: var(--rose-pale); color: var(--wine); }
.dash-side nav a.active { background: var(--grad-rose); color: #fff; }
.dash-side nav a svg { width: 19px; height: 19px; }
.dash-main { min-width: 0; }

.stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-bottom: 28px; }
.stat-tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; box-shadow: var(--shadow-sm); }
.stat-tile .st-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--grad-blush); color: var(--wine); margin-bottom: 12px; }
.stat-tile .num { font-family: var(--f-head); font-size: 1.9rem; color: var(--wine-dark); line-height: 1; }
.stat-tile .lbl { font-size: .82rem; color: var(--muted); margin-top: 5px; }

.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); }
.panel-head { padding: 18px 22px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel-head h3 { color: var(--wine); }
.panel-body { padding: 22px; }

/* Tableau */
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 12px 14px; border-bottom: 2px solid var(--line); }
.table td { padding: 14px; border-bottom: 1px solid var(--line); font-size: .9rem; vertical-align: middle; }
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: rgba(244,217,224,.25); }
.table .thumb { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; }
.table-actions { display: flex; gap: 6px; }
.icon-act { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line); background: #fff; color: var(--wine); display: grid; place-items: center; cursor: pointer; transition: all .18s; }
.icon-act:hover { background: var(--rose-pale); border-color: var(--rose); }
.icon-act.danger:hover { background: rgba(207,90,107,.12); border-color: var(--danger); color: var(--danger); }
.icon-act svg { width: 17px; height: 17px; }

/* ============================================================ MESSAGERIE */
/* minmax(0, 1fr) et non 1fr : une colonne « 1fr » garde pour largeur minimale
   celle de son contenu le plus large — ici la barre de saisie (449px). Sur un
   téléphone de 360px, le fil dépassait donc de 89px à droite et le bouton
   « Envoyer » était coupé par overflow:hidden.
   La hauteur est calée sur l'écran (voir --h-messagerie publiée par main.js) :
   avec min-height seul, le bloc grandissait jusqu'à contenir TOUS les messages
   (1499px de haut sur un écran de 800px), la saisie tombait hors de vue et il
   fallait faire défiler la page entière pour lire la conversation. */
.msg-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-sm); height: var(--h-messagerie, calc(100dvh - 260px)); min-height: 240px; }
.conv-list { border-right: 1px solid var(--line); overflow-y: auto; min-width: 0; min-height: 0; }
.conv-list .conv { display: flex; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .18s; }
.conv-list .conv:hover { background: var(--rose-pale); }
.conv-list .conv.active { background: var(--rose-pale); border-left: 3px solid var(--rose); }
.conv-list .conv img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.conv-list .conv .c-main { flex: 1; min-width: 0; }
.conv-list .conv .c-name { font-weight: 600; color: var(--wine-dark); font-size: .92rem; display: flex; justify-content: space-between; }
.conv-list .conv .c-name time { font-size: .72rem; color: var(--muted); font-weight: 400; }
.conv-list .conv .c-last { font-size: .82rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-list .conv .unread-dot { width: 9px; height: 9px; background: var(--rose); border-radius: 50%; align-self: center; }

/* min-width/min-height : sans eux, un enfant de grille ne descend jamais
   sous la taille de son contenu et déborde du cadre. */
.chat-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.chat-head { padding: 15px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; }
.chat-head img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.chat-body { flex: 1; overflow-y: auto; padding: 22px; display: flex; flex-direction: column; gap: 12px; background: var(--grad-blush); }
.bubble { max-width: 72%; padding: 11px 15px; border-radius: 16px; font-size: .9rem; line-height: 1.45; box-shadow: var(--shadow-sm); }
.bubble.them { background: #fff; border-bottom-left-radius: 4px; align-self: flex-start; }
.bubble.me { background: var(--grad-rose); color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }
.bubble time { display: block; font-size: .68rem; opacity: .7; margin-top: 4px; }
.chat-input { padding: 14px 18px; border-top: 1px solid var(--line); display: flex; gap: 10px; align-items: center; }
.chat-input .btn { flex-shrink: 0; white-space: nowrap; }
.chat-input input { flex: 1; min-width: 0; padding: 12px 16px; border: 1.5px solid var(--line); border-radius: 999px; }
.chat-input input:focus { outline: none; border-color: var(--rose); }
.chat-attach { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--wine); background: var(--rose-pale); flex-shrink: 0; transition: background .2s; }
.chat-attach:hover { background: var(--rose-light); }
.bubble-img { max-width: 220px; border-radius: 12px; margin-bottom: 6px; display: block; }
.read-receipt { align-self: flex-end; font-size: .72rem; color: var(--muted); margin-top: -4px; margin-right: 4px; }
.chat-empty { flex: 1; display: grid; place-items: center; color: var(--muted); text-align: center; padding: 40px; }

/* ============================================================ Détail annonce */
.listing-detail { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: start; }
.gallery .main-img { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4/3; background: var(--blush-deep); }
.gallery .main-img img { width: 100%; height: 100%; object-fit: cover; }
.gallery .thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.gallery .thumbs img { width: 82px; height: 82px; border-radius: var(--r-sm); object-fit: cover; cursor: pointer; border: 2px solid transparent; transition: border .2s; }
.gallery .thumbs img:hover, .gallery .thumbs img.active { border-color: var(--rose); }

.detail-info h1 { font-size: clamp(1.6rem,3vw,2.2rem); }
.detail-info .price-tag { font-family: var(--f-head); font-size: 2rem; color: var(--wine); margin: 14px 0; }
.detail-info .price-tag small { font-size: .9rem; color: var(--muted); font-family: var(--f-body); }
.detail-desc { color: var(--ink-soft); line-height: 1.75; margin: 18px 0; white-space: pre-line; }
.seller-box { background: var(--grad-blush); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; display: flex; align-items: center; gap: 15px; margin: 22px 0; flex-wrap: wrap; }
.seller-box img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; }
.seller-box .sb-main { flex: 1; min-width: 0; }
.seller-box .sb-main strong { overflow-wrap: anywhere; }
.seller-box .sb-main strong { color: var(--wine-dark); font-size: 1.05rem; }
.info-list { display: grid; gap: 10px; margin: 20px 0; }
.info-list li { display: flex; align-items: center; gap: 10px; color: var(--ink-soft); font-size: .92rem; }
.info-list li svg { color: var(--rose); width: 18px; height: 18px; flex-shrink: 0; }

.ethic-note { background: rgba(224,169,109,.12); border: 1px solid var(--gold-soft); border-radius: var(--r-sm); padding: 14px 16px; font-size: .85rem; color: #8a5a1e; display: flex; gap: 10px; }

/* Avis */
.review { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.review img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.review .r-head { display: flex; align-items: center; gap: 10px; }
.review .r-head strong { color: var(--wine-dark); }
.review .r-head time { color: var(--muted); font-size: .78rem; }
.review p { color: var(--ink-soft); font-size: .92rem; margin-top: 6px; }
.rating-input { display: inline-flex; flex-direction: row-reverse; gap: 4px; font-size: 1.7rem; }
.rating-input input { display: none; }
.rating-input label { color: #e6d3d7; cursor: pointer; transition: color .15s; }
.rating-input label:hover, .rating-input label:hover ~ label,
.rating-input input:checked ~ label { color: var(--gold); }

/* ============================================================ FILTRES */
.filter-bar { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; box-shadow: var(--shadow-sm); position: sticky; top: 88px; }
.filter-bar h4 { font-family: var(--f-head); color: var(--wine); margin-bottom: 12px; font-size: 1.05rem; }
.filter-group { padding: 14px 0; border-top: 1px solid var(--line); }
.filter-group .fg-title { font-weight: 600; font-size: .85rem; color: var(--wine-dark); margin-bottom: 10px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 6px 13px; border-radius: 999px; background: #fff; border: 1.5px solid var(--line); font-size: .82rem; cursor: pointer; color: var(--ink-soft); transition: all .18s; }
.chip:hover { border-color: var(--rose); color: var(--wine); }
.chip.active { background: var(--grad-rose); color: #fff; border-color: transparent; }

.listings-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.search-box { position: relative; flex: 1 1 200px; min-width: 0; max-width: 420px; }
.search-box input { width: 100%; padding: 12px 16px 12px 44px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; }
.search-box input:focus { outline: none; border-color: var(--rose); box-shadow: 0 0 0 4px rgba(197,107,130,.12); }
.search-box .s-ic { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); }

/* ============================================================ PRICING */
.pricing-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; align-items: stretch; }
.price-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px 28px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; position: relative; transition: transform .22s; min-width: 0; }
.price-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.price-card.popular { border: 2px solid var(--gold); box-shadow: var(--shadow); }
.price-card .pop-tag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--grad-gold); color: var(--wine-dark); padding: 5px 16px; border-radius: 999px; font-size: .76rem; font-weight: 700; }
.price-card h3 { font-size: 1.4rem; color: var(--wine); }
.price-card .amount { font-family: var(--f-head); font-size: 2.6rem; color: var(--wine-dark); margin: 12px 0 4px; }
.price-card .amount small { font-size: .95rem; color: var(--muted); font-family: var(--f-body); }
.price-card ul.feats { display: grid; gap: 11px; margin: 22px 0; flex: 1; }
.price-card ul.feats li { display: flex; gap: 10px; font-size: .9rem; color: var(--ink-soft); }
.price-card ul.feats li .ck { color: var(--success); flex-shrink: 0; }

/* ============================================================ Bandeaux */
.banner-values { background: var(--grad-wine); color: #fff; }
.banner-values h2 { color: #fff; }
.cta-band { background: var(--grad-rose); border-radius: var(--r-xl); padding: 54px; text-align: center; color: #fff; position: relative; overflow: hidden; box-shadow: var(--shadow-lg); }
.cta-band::before { content:"❖"; position:absolute; font-size: 12rem; opacity:.08; top:-30px; right:20px; }
.cta-band h2 { color: #fff; }
.cta-band .script { font-family: var(--f-script); font-size: 2.2rem; color: #ffe9d6; }

/* How it works */
.steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.step { text-align: center; position: relative; }
.step .num { width: 56px; height: 56px; border-radius: 50%; background: var(--grad-rose); color: #fff; display: grid; place-items: center; font-family: var(--f-head); font-size: 1.4rem; margin: 0 auto 14px; box-shadow: var(--shadow); }
.step h4 { font-family: var(--f-head); color: var(--wine); margin-bottom: 6px; }
.step p { font-size: .88rem; color: var(--ink-soft); }

/* ============================================================ FOOTER */
.site-footer { background: var(--wine-dark); color: #f3dfe4; padding: 60px 0 26px; margin-top: 40px; }
.site-footer .cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 36px; }
.site-footer h4 { color: #fff; font-family: var(--f-head); margin-bottom: 16px; font-size: 1.1rem; }
.site-footer a { color: #e6c4cd; font-size: .9rem; }
.site-footer a:hover { color: #fff; }
.site-footer .fcol ul { display: grid; gap: 9px; }
.site-footer .brand-foot .brand-name { color: #fff; font-size: 1.4rem; font-family: var(--f-head); }
.site-footer .brand-foot .script { font-family: var(--f-script); color: var(--gold-soft); font-size: 1.3rem; }
.site-footer p.desc { font-size: .88rem; opacity: .85; margin-top: 10px; max-width: 280px; }
.socials { display: flex; gap: 10px; margin-top: 16px; }
.socials a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.1); display: grid; place-items: center; color: #fff; }
.socials a:hover { background: var(--grad-rose); transform: translateY(-2px); }
.news-form { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
/* min-width:0 : sans lui, un champ e-mail garde sa largeur par défaut et
   pousse le bouton hors du cadre dès que la colonne se resserre. */
.news-form input { flex: 1 1 150px; min-width: 0; padding: 11px 14px; border-radius: 999px; border: none; background: rgba(255,255,255,.12); color: #fff; }
.news-form input::placeholder { color: #d8b8c1; }
.news-form input:focus { outline: none; background: rgba(255,255,255,.18); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 40px; padding-top: 22px; text-align: center; font-size: .82rem; opacity: .8; }
.footer-bottom .baraka { font-family: var(--f-script); color: var(--gold-soft); font-size: 1.1rem; }

/* ============================================================ TOASTS */
.toast-wrap { position: fixed; top: 86px; right: 22px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; }
.toast {
  background: #fff; border-radius: var(--r-sm); box-shadow: var(--shadow-lg); padding: 14px 18px;
  display: flex; align-items: center; gap: 12px; min-width: 280px; max-width: 380px;
  border-left: 4px solid var(--rose); animation: slideIn .3s ease; font-size: .9rem;
}
.toast.success { border-left-color: var(--success); }
.toast.error { border-left-color: var(--danger); }
.toast.leaving { animation: slideOut .3s ease forwards; }
.toast .t-ic { display: inline-flex; align-items: center; color: var(--rose); flex-shrink: 0; }
.toast.success .t-ic { color: var(--success); }
.toast.error .t-ic { color: var(--danger); }
@keyframes slideIn { from{transform:translateX(120%);opacity:0} to{transform:translateX(0);opacity:1} }
@keyframes slideOut { to{transform:translateX(120%);opacity:0} }

/* Empty state */
.empty-state { text-align: center; padding: 60px 20px; }
.empty-state .es-ic { font-size: 3rem; opacity: .5; }
.empty-state h3 { color: var(--wine); margin: 12px 0 6px; }
.empty-state p { color: var(--muted); }

/* Fil d'ariane */
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--muted); margin-bottom: 20px; flex-wrap: wrap; }
.breadcrumb a { color: var(--ink-soft); }
.breadcrumb a:hover { color: var(--rose); }
.breadcrumb .sep { color: var(--rose-light); }

/* Pagination */
.pagination { display: flex; gap: 6px; justify-content: center; margin-top: 36px; }
.pagination a, .pagination span { min-width: 40px; height: 40px; padding: 0 10px; border-radius: 10px; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); font-size: .9rem; font-weight: 500; }
.pagination a:hover { border-color: var(--rose); color: var(--wine); }
.pagination .current { background: var(--grad-rose); color: #fff; border-color: transparent; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* Flash inline */
.alert { padding: 13px 18px; border-radius: var(--r-sm); margin-bottom: 18px; font-size: .9rem; display: flex; gap: 10px; }
.alert-success { background: rgba(79,157,105,.12); color: #37784e; border: 1px solid rgba(79,157,105,.3); }
.alert-error { background: rgba(207,90,107,.1); color: #b23e50; border: 1px solid rgba(207,90,107,.3); }
.alert-info { background: var(--rose-pale); color: var(--wine); border: 1px solid var(--rose-light); }
/* Avertissement : ni une erreur, ni une simple information — une action attendue. */
.alert-warn { background: rgba(224,169,109,.14); color: #8a5a1e; border: 1px solid var(--gold-soft); }
.alert { align-items: center; flex-wrap: wrap; }

/* ============================================================ RESPONSIVE */
@media (max-width: 960px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero-visual { order: -1; max-width: 400px; margin-inline: auto; }
  .cards-4 { grid-template-columns: repeat(2,1fr); }
  .cards-3 { grid-template-columns: repeat(2,1fr); }
  .steps { grid-template-columns: repeat(2,1fr); }
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .listing-detail { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; }
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-visual { display: none; }
  .site-footer .cols { grid-template-columns: 1fr 1fr; }
  .dash { grid-template-columns: 1fr; }
  .dash-side { position: static; display: none; }
  .dash-side.open { display: block; }
}
/* Nav compacte sur les écrans intermédiaires (portables & tablettes paysage).
   La barre complète réclame ~1135px : entre 1000 et 1140px on resserre. */
/* Seuils en em et non en px : à 16px ils valent 1140 et 1000px comme avant,
   mais si la visiteuse agrandit la police système, ils s'élargissent d'autant
   et le menu burger prend le relais avant que la barre ne déborde. */
@media (max-width: 71.25em) {
  .site-header .bar { gap: 10px; }
  .main-nav { gap: 1px; }
  .main-nav a { padding: 8px 9px; font-size: .86rem; }
  .nav-right .btn-sm { padding: 8px 14px; font-size: .84rem; }
  .brand img, .brand svg { height: 40px; }
  .brand .brand-name { font-size: 1.04rem; }
  .brand .brand-tag { font-size: .84rem; }
}

/* En dessous de 1000px : menu burger (les liens ne tiennent plus, même compacts).
   Le bloc de droite (« Mon compte » / « Se connecter ») reste toujours visible. */
@media (max-width: 62.5em) {
  .main-nav { display: none; }
  .burger { display: block; }
  .main-nav.open {
    display: flex; flex-direction: column; position: absolute; top: 72px; left: 0; right: 0;
    background: var(--blush); padding: 16px 20px; box-shadow: var(--shadow-lg); align-items: stretch; gap: 4px;
    border-bottom: 1px solid var(--line); z-index: 200;
  }
  .main-nav.open a { width: 100%; }
  .main-nav.open .nav-cta { margin-top: 6px; text-align: center; }
}
@media (max-width: 720px) {
  .cards-4, .cards-3, .cards-2 { grid-template-columns: 1fr; }
  .cards-auto { grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); }
  .msg-layout { grid-template-columns: minmax(0, 1fr); }
  .conv-list { display: none; max-height: 240px; }
  .conv-list.show { display: block; }
  .section { padding: 48px 0; }
  .cta-band { padding: 34px 22px; }
  .row-2 { grid-template-columns: 1fr; }
  /* Le choix acheteuse / vendeuse reste sur DEUX colonnes, même sur
     téléphone : c'est une comparaison, les deux options doivent se voir
     côte à côte. On resserre plutôt le contenu de chaque carte. */
  /* minmax(0, 1fr) : sans lui, chaque colonne garde pour minimum la largeur de
     son texte et le bloc déborde dès que la police système est agrandie. */
  .role-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .role-opt { min-width: 0; }
  .role-opt label strong { overflow-wrap: anywhere; }
  .role-opt label span { overflow-wrap: anywhere; }
  .role-opt label { padding: 14px 8px; }
  .role-opt .ri svg { width: 24px; height: 24px; }
  .role-opt label strong { font-size: .95rem; margin-top: 4px; }
  .role-opt label span { font-size: .72rem; line-height: 1.3; display: block; }
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-stats { gap: 20px; }
  .form-card { padding: 24px; }
  .site-footer .cols { grid-template-columns: 1fr; }
}

/* Partage social */
.share-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.share-lbl { font-size: .82rem; color: var(--muted); }
.share-btn { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); background: #fff; color: var(--wine); cursor: pointer; transition: all .18s; }
.share-btn:hover { transform: translateY(-2px); color: #fff; }
.share-btn.wa:hover { background: #25d366; border-color: #25d366; }
.share-btn.tg:hover { background: #29a9eb; border-color: #29a9eb; }
.share-btn.fb:hover { background: #1877f2; border-color: #1877f2; }
.share-btn.copy:hover { background: var(--grad-rose); border-color: transparent; }

/* Graphiques dashboard */
.hbar-chart { display: grid; gap: 12px; }
.hbar-row { display: grid; grid-template-columns: 130px 1fr 54px; align-items: center; gap: 12px; }
.hbar-label { font-size: .84rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-track { height: 12px; background: var(--blush-deep); border-radius: 999px; overflow: hidden; }
.hbar-fill { display: block; height: 100%; border-radius: 999px; transition: width .8s ease; }
.hbar-val { font-size: .82rem; font-weight: 600; color: var(--wine); text-align: right; }
.donut-wrap { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.donut { flex-shrink: 0; }
.donut-legend { display: grid; gap: 9px; flex: 1; min-width: 180px; }
.dl-row { display: flex; align-items: center; gap: 10px; font-size: .86rem; }
.dl-dot { width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; }
.dl-label { color: var(--ink-soft); flex: 1; }
.dl-val { color: var(--muted); font-size: .8rem; }
@media (max-width: 720px) { .hbar-row { grid-template-columns: 92px 1fr 46px; } }

/* FAQ — accordéon natif accessible */
.faq-group { display: grid; gap: 10px; }
.faq-item {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-sm); overflow: hidden; transition: box-shadow .2s, border-color .2s;
}
.faq-item[open] { box-shadow: var(--shadow); border-color: var(--rose-light); }
.faq-item summary {
  cursor: pointer; padding: 16px 46px 16px 18px; font-weight: 600; color: var(--wine-dark);
  position: relative; list-style: none; font-size: .95rem; line-height: 1.45;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%; background: var(--rose-pale); color: var(--wine);
  display: grid; place-items: center; font-size: 1.1rem; font-weight: 700; transition: transform .25s, background .2s;
}
.faq-item[open] summary::after { content: "−"; background: var(--grad-rose); color: #fff; }
.faq-item summary:hover { color: var(--rose); }
.faq-answer {
  padding: 0 18px 18px; color: var(--ink-soft); font-size: .92rem; line-height: 1.7;
  border-top: 1px dashed var(--line); padding-top: 14px; margin: 0 18px 18px 18px;
}

/* Prose (pages légales & contenu) */
.prose { max-width: 800px; margin: 0 auto; color: var(--ink-soft); }
.prose h2 { color: var(--wine); font-size: 1.4rem; margin: 32px 0 12px; }
.prose h3 { color: var(--wine-dark); font-size: 1.1rem; margin: 22px 0 8px; }
.prose p { margin-bottom: 14px; line-height: 1.75; }
.prose ul { margin: 0 0 16px; padding-left: 4px; }
.prose ul li { position: relative; padding-left: 22px; margin-bottom: 8px; }
.prose ul li::before { content: "❖"; position: absolute; left: 0; color: var(--gold); font-size: .8rem; top: 3px; }
.prose strong { color: var(--wine-dark); }
.prose .updated { font-size: .84rem; color: var(--muted); font-style: italic; }
.prose a { text-decoration: underline; }

/* Bandeau cookies */
.cookie-banner {
  position: fixed; bottom: 18px; left: 18px; right: 18px; max-width: 560px; margin: 0 auto; z-index: 9998;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg);
  padding: 18px 20px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  animation: slideUp .4s ease;
}
@keyframes slideUp { from { transform: translateY(120%); opacity: 0; } to { transform: none; opacity: 1; } }
.cookie-banner p { font-size: .86rem; color: var(--ink-soft); flex: 1; min-width: 220px; margin: 0; }
.cookie-banner .cb-actions { display: flex; gap: 8px; }

/* ============================================================ RESPONSIVE FIXES */

/* Catalogue : filtres + résultats (s'empile sous 900px) */
/* minmax(0, …) : avec « 1fr », la colonne gardait pour largeur minimale le
   min-content de son contenu — la barre d'outils (recherche + tri) imposait
   698px dans un écran de 360px, et la page débordait de 370px sans qu'on le
   voie, overflow-x:hidden la masquant. */
.browse-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 32px; align-items: start; }
@media (max-width: 900px) {
  .browse-layout { grid-template-columns: minmax(0, 1fr); }
  /* Le collant n'est plus désactivé sous 960px : la barre horizontale est
     justement faite pour rester sous les yeux pendant le défilement.
     (Voir la section FILTRES DES ANNONCES en fin de fichier.) */
}

/* Tableaux : défilement horizontal plutôt que débordement de page */
.panel-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 640px) {
  .table { min-width: 540px; }
}

/* En-tête compact sur mobile (évite le débordement quand connectée) */
@media (max-width: 560px) {
  /* Les libellés longs (« Supprimer définitivement mon compte ») passent à la ligne
     au lieu de déborder, et les rangées de boutons s'empilent proprement. */
  .btn { white-space: normal; }
  .flex.gap-2, .table-actions { flex-wrap: wrap; }
  .brand .brand-tag { display: none; }
  .brand img, .brand svg { height: 38px; }
  .nav-right { gap: 7px; }
  /* Sur téléphone : on ne garde que la marque visuelle (logo), le texte
     « Sister's Tijara » est masqué → zéro risque de chevauchement avec le compte. */
  .brand .brand-text { display: none; }
  .nav-icon-btn { width: 38px; height: 38px; }
  .nav-right .btn-sm { padding: 8px 12px; }
  /* Bouton compte compact : on garde l'avatar/l'icône + le libellé, on retire le chevron */
  .account-btn { padding: 3px 12px 3px 3px; }
  .account-av { width: 30px; height: 30px; }
  .account-caret { display: none; }
  .hide-mobile { display: none !important; }
}
@media (max-width: 400px) {
  .brand .brand-name { font-size: 1.02rem; }
  .site-header .bar { gap: 8px; }
  .account-btn { font-size: .84rem; }
  .section, .section-sm { padding-left: 0; padding-right: 0; }
  .container { padding-inline: 16px; }
  .btn-lg { padding: 13px 22px; font-size: .95rem; }
  h1 { font-size: 1.7rem; }
  /* Très petits écrans (≤ 360px réels) : on resserre les blocs à forte marge */
  .price-card { padding: 26px 18px; }
  .price-card .amount { font-size: 2.1rem; }
  .form-card { padding: 20px 16px; }
  .value-card { padding: 22px 18px; }
  .cta-band { padding: 30px 18px; }
  .listing-card .body { padding: 14px 13px 16px; }
}

/* Modales : jamais plus larges que l'écran, défilement interne */
#quoteModal form, #reportModal form, #rejectModal form { max-height: 92vh; overflow-y: auto; }

/* Galerie annonce : miniatures adaptées */
@media (max-width: 480px) {
  .gallery .thumbs img { width: 64px; height: 64px; }
  .hero-stats { flex-wrap: wrap; }
  .steps { grid-template-columns: 1fr; }
}

/* Petits utilitaires */
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 8px; } .gap-2 { gap: 16px; }
.muted { color: var(--muted); }
.wine { color: var(--wine); }
.fw-6 { font-weight: 600; }
.tag-soft { background: var(--rose-pale); color: var(--wine); padding: 3px 10px; border-radius: 999px; font-size: .76rem; font-weight: 600; }
.divider-line { height: 1px; background: var(--line); margin: 28px 0; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ============================================================================
   CORRECTIFS RESPONSIVE — 26/08/2026
   Chaque bloc corrige un défaut mesuré au navigateur sur téléphone / tablette.
   ============================================================================ */

/* --- 1. Menu latéral du tableau de bord ------------------------------------
   Sous 960px la barre latérale est masquée. Le bouton qui la rouvre est
   désormais rendu par includes/dash-side.php — donc présent sur TOUTES les
   pages du tableau de bord — et son affichage dépend d'une media query, non
   plus d'un test JavaScript exécuté une seule fois au chargement (qui ne
   réagissait ni au redimensionnement ni à la rotation de l'écran). */
.dash-menu-btn { display: none; }
@media (max-width: 960px) {
  .dash-menu-btn { display: inline-flex; justify-self: start; margin-bottom: 16px; }
  .dash-side.open { display: block; margin-bottom: 20px; }
}

/* --- 2. Messagerie : maître / détail sur téléphone -------------------------
   Sous 720px la liste des conversations était masquée sans aucun moyen de
   l'afficher : impossible de changer de conversation. La liste s'affiche
   maintenant par défaut, et le fil prend toute la largeur dès qu'une
   conversation est ouverte (?with=), avec un retour vers la liste. */
.conv-back { display: none; align-items: center; gap: 6px; }
@media (max-width: 720px) {
  .conv-list { display: block; max-height: none; border-right: none; }
  .msg-layout.has-thread .conv-list { display: none; }
  .chat-pane { display: none; }
  .msg-layout.has-thread .chat-pane { display: flex; }
  .conv-back { display: inline-flex; }
}

/* --- 3. Grilles d'annonces : 2 colonnes sur téléphone ----------------------
   Une seule colonne sous 720px donnait des cartes de 680x649px et une page
   de plus de 10 000px de haut. Deux colonnes = navigation normale. */
@media (max-width: 720px) {
  .grid:has(> .listing-card) { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (max-width: 430px) {
  .grid:has(> .listing-card) { gap: 10px; }
  .listing-card .body { padding: 12px 11px 14px; }
  .listing-card .title { font-size: .95rem; }
  .listing-card .price { font-size: .98rem; }
  .listing-card .meta { font-size: .76rem; margin-bottom: 8px; }
  .listing-card .foot { flex-wrap: wrap; gap: 6px; padding-top: 10px; }
  .listing-card .media .cat-chip { font-size: .66rem; padding: 4px 8px; }
  .fav-btn { width: 34px; height: 34px; bottom: 8px; right: 8px; }
  .fav-btn svg { width: 18px; height: 18px; }
}

/* --- 4. Rangées de boutons : passage à la ligne ----------------------------
   `.flex.gap-1` n'était pas couvert : la rangée Membres / Article / Outils de
   l'administration mesurait 367px et débordait de 47px sur un écran de 320px.
   Le seuil passe aussi de 560px à 720px (les libellés longs débordaient de
   leur bouton entre les deux). */
@media (max-width: 720px) {
  .btn { white-space: normal; }
  .flex.gap-1, .flex.gap-2, .table-actions { flex-wrap: wrap; }
}

/* --- 5. Tableaux : la colonne « Actions » reste visible --------------------
   Filet de sécurité pour les tableaux encore affichés en mode tableau (entre
   721 et 900px, ou si le JavaScript ne s'exécute pas) : la colonne des actions
   est épinglée à droite. En dessous de 720px les tableaux deviennent des
   fiches empilées (voir « RÉAGENCEMENT MOBILE » plus bas) et ne défilent plus. */
@media (max-width: 900px) {
  .panel-body .table:not(.is-cards) th:last-child,
  .panel-body .table:not(.is-cards) td:last-child {
    position: sticky; right: 0; z-index: 1;
    background: var(--card);
    box-shadow: -9px 0 10px -8px rgba(94, 31, 48, .22);
  }
  .panel-body .table:not(.is-cards) tr:hover td:last-child { background: #fdf6f8; }
}

/* --- 6. En-tête : le logo n'est plus écrasé -------------------------------
   Connectée sur un écran de 320px, `.nav-right` (190px) + le burger (40px) ne
   laissaient que 27px au logo, rogné par son overflow:hidden. Le slogan, lui,
   était coupé en plein mot entre 560 et 660px. */
@media (max-width: 700px) {
  .brand .brand-tag { display: none; }
}
@media (max-width: 420px) {
  .brand { flex-shrink: 0; }
  .account-btn .account-label { display: none; }
  .account-btn { padding: 3px; gap: 0; }
  .account-badge { left: 22px; }
}

/* --- 7. Zones tactiles : 44px minimum (recommandation Apple / Google) ------ */
.nav-right .btn-sm, .nav-right .account-btn { min-height: 44px; }
.nav-publish { min-width: 44px; }  /* réduit à sa seule icône sur téléphone */
.share-btn { width: 40px; height: 40px; }

/* --- 8. Coupure de texte résiduelle sur la fiche annonce ------------------- */
.seller-box .sb-main .muted { overflow-wrap: anywhere; }

/* ============================================================================
   RÉAGENCEMENT MOBILE — 26/08/2026
   Objectif : plus aucun défilement horizontal, et plus aucune colonne de texte
   comprimée. Les tableaux deviennent des fiches, les statistiques des lignes
   lisibles, les libellés de graphiques reprennent toute la largeur.
   ============================================================================ */

/* Corps de panneau sans marge intérieure (remplace les style="padding:0"). */
.panel-flush { padding: 0; }

/* --- Statistiques : 3 colonnes compactes sur mobile -----------------------
   À 320px les tuiles faisaient 127x173px avec un libellé écrasé sur 2 lignes
   dans une colonne de 86px. En 3 colonnes centrées, le même bloc tient dans
   une fraction de la hauteur et se lit d'un coup d'œil. */
@media (max-width: 720px) {
  /* minmax(0, 1fr) : avec « 1fr », chaque colonne garde pour largeur minimale
     celle de son mot le plus long (« Vérifications ») et la rangée débordait
     de 25px à 320px en police système 150 % — la page défilait de côté. */
  .stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 22px; }
  .stat-tile { display: block; text-align: center; padding: 12px 7px; }
  .stat-tile .st-ic { width: 30px; height: 30px; margin: 0 auto 6px; }
  .stat-tile .st-ic svg { width: 17px; height: 17px; }
  .stat-tile .num { font-size: 1.4rem; }
  .stat-tile .lbl { font-size: .68rem; line-height: 1.25; margin-top: 4px; overflow-wrap: anywhere; }
}
@media (max-width: 480px) {
  /* Sur les petits écrans on retire l'icône : 36px de hauteur gagnés par tuile,
     pour un repère qui n'apporte rien à côté du chiffre. */
  .stat-row { gap: 8px; }
  .stat-tile { padding: 11px 5px; }
  .stat-tile .st-ic { display: none; }
  .stat-tile .num { font-size: 1.25rem; }
  .stat-tile .lbl { font-size: .64rem; }
}

/* --- Graphiques : le libellé passe au-dessus de la barre -------------------
   La colonne de libellé faisait 92px pour un texte de 278px : les titres
   d'annonces étaient tronqués de 186px. Sur deux lignes, ils tiennent. */
@media (max-width: 720px) {
  .hbar-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "label label" "track val";
    row-gap: 6px; column-gap: 10px; align-items: center;
  }
  .hbar-label {
    grid-area: label; font-size: .86rem; color: var(--ink-soft);
    /* Le libellé occupe toute la largeur : il peut passer sur 2 lignes
       plutôt que d'être tronqué (186px de texte perdus auparavant). */
    white-space: normal; overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  .hbar-track { grid-area: track; }
  .hbar-val { grid-area: val; text-align: right; }
}

/* --- Tableaux : fiches empilées, zéro défilement horizontal ----------------
   Le JavaScript recopie l'en-tête de colonne dans data-label sur chaque
   cellule puis pose la classe .is-cards ; sans JavaScript le tableau reste un
   tableau (avec la colonne d'actions épinglée), donc rien n'est jamais perdu. */
@media (max-width: 720px) {
  .panel-body.has-cards { overflow-x: visible; padding: 14px; }
  .table.is-cards { min-width: 0; display: block; }
  .table.is-cards thead { display: none; }
  .table.is-cards td { display: block; width: auto; }

  /* Carrousel : une fiche à la fois, on glisse de gauche à droite pour
     parcourir la catégorie. Chaque fiche s'aligne d'elle-même (scroll-snap)
     et la suivante dépasse légèrement, pour qu'on voie qu'il y en a d'autres. */
  .table.is-cards tbody {
    display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    padding: 2px 2px 10px; margin: 0 -2px;
  }
  /* Pas de barre de défilement visible : un carrousel se reconnaît à la fiche
     suivante qui dépasse et au repère au-dessus, pas à une barre grise qui
     donne l'impression d'un tableau qui déborde. */
  .table.is-cards tbody { scrollbar-width: none; -ms-overflow-style: none; }
  .table.is-cards tbody::-webkit-scrollbar { display: none; height: 0; }
  .table.is-cards tr {
    /* Pleine largeur : aucune fiche ne dépasse au bord, on ne peut plus
       confondre le carrousel avec un tableau qui déborde. */
    flex: 0 0 100%; min-width: 0; scroll-snap-align: start;
    display: flex; flex-direction: column;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm);
    padding: 13px 15px; box-shadow: var(--shadow-sm);
  }
  .table.is-cards tr:hover td { background: none; }

  /* Commande du carrousel : flèches + position, sous les fiches */
  .cards-nav {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    margin-top: 12px;
  }
  .cards-nav .cn-btn {
    width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
    background: #fff; border: 1px solid var(--line); color: var(--wine); cursor: pointer;
    transition: border-color .2s, color .2s;
  }
  .cards-nav .cn-btn:hover:not([disabled]) { border-color: var(--rose); color: var(--rose); }
  .cards-nav .cn-btn[disabled] { opacity: .3; cursor: default; }
  .cards-nav .cn-count { font-size: .84rem; color: var(--muted); font-weight: 700; min-width: 56px; text-align: center; }
  .table.is-cards td {
    border: none; border-bottom: 1px dashed var(--line); padding: 9px 0;
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; font-size: .9rem; text-align: right;
  }
  .table.is-cards td::before {
    content: attr(data-label); flex-shrink: 0; text-align: left;
    font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--muted); font-weight: 700;
  }
  .table.is-cards td[data-label=""]::before { content: none; }
  /* La dernière ligne (souvent les actions) est collée en bas : les fiches du
     carrousel gardent ainsi leurs boutons alignés d'une fiche à l'autre. */
  .table.is-cards td:last-child { border-bottom: none; padding-bottom: 0; margin-top: auto; }

  /* 1re colonne = l'entité (annonce, membre, boutique…) : titre de la fiche */
  .table.is-cards td.td-head {
    display: block; text-align: left; padding: 0 0 11px; margin-bottom: 3px;
    border-bottom: 1px solid var(--line);
  }
  .table.is-cards td.td-head::before { content: none; }
  .table.is-cards td.td-head .clamp-2 { max-width: none !important; }

  /* Colonne d'actions sans en-tête : boutons seuls, alignés à droite.
     Une colonne d'actions qui porte un libellé (« Justificatif »…) garde le
     libellé à gauche et son bouton à droite, comme les autres lignes. */
  .table.is-cards td[data-label=""] { justify-content: flex-end; padding-top: 12px; }
  .table.is-cards .table-actions { flex-wrap: wrap; justify-content: flex-end; }

  /* Cellule à texte long (message de vérification, motif de signalement…) :
     3 lignes puis « Voir tout » qui ouvre la fiche complète en modale. */
  .table.is-cards td.td-long { display: block; text-align: left; }
  .table.is-cards td.td-long::before { display: block; margin-bottom: 5px; }
  .table.is-cards td.td-long .td-clamp {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden; color: var(--ink-soft);
  }
  .td-more {
    margin-top: 6px; background: none; border: none; padding: 0; cursor: pointer;
    color: var(--rose); font-weight: 600; font-size: .82rem; text-decoration: underline;
  }
}
/* Hors mobile, le bouton « Voir tout » n'a pas lieu d'être. */
@media (min-width: 721px) { .td-more { display: none; } }

/* --- Modale de détail ------------------------------------------------------ */
.detail-modal {
  position: fixed; inset: 0; z-index: 9999; padding: 20px; overflow: auto;
  background: rgba(94, 31, 48, .5); display: grid; place-items: center;
}
.detail-card {
  background: var(--card); border-radius: var(--r); box-shadow: var(--shadow-lg);
  width: 100%; max-width: 460px; max-height: 88vh; display: flex; flex-direction: column;
}
.detail-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 20px; border-bottom: 1px solid var(--line);
}
.detail-head h3 { color: var(--wine); font-size: 1.05rem; }
.detail-close {
  background: none; border: none; cursor: pointer; color: var(--muted);
  font-size: 1.7rem; line-height: 1; padding: 0 4px;
}
.detail-close:hover { color: var(--wine); }
.detail-body { padding: 18px 20px 22px; overflow-y: auto; color: var(--ink); font-size: .93rem; }

/* --- 9. Logo de la barre de navigation ------------------------------------
   Le fichier fourni est un carré dont le dessin n'occupe que 46 % de la
   hauteur : à 46px de haut, le logo visible ne faisait que ~21px. Le PNG
   `logo.png` est détouré et recadré sur le dessin (fond transparent), on peut
   donc lui donner sa vraie taille dans une barre de 72px. */
.brand-has-logo img { height: 54px; max-width: 260px; object-fit: contain; }
@media (max-width: 1140px) { .brand-has-logo img { height: 48px; } }
@media (max-width: 560px)  { .brand-has-logo img { height: 42px; max-width: 190px; } }
@media (max-width: 380px)  { .brand-has-logo img { height: 38px; max-width: 150px; } }

/* La commande du carrousel n'existe que sur mobile. Une media query, et non
   une règle nue : celle-ci, écrite après le bloc mobile, l'annulait. */
@media (min-width: 721px) { .cards-nav { display: none; } }

/* ============================================================================
   BARRE DE NAVIGATION BASSE (mobile) — 26/08/2026
   Sur téléphone, l'essentiel est accessible au pouce : Annonces, Boutiques, un
   « + » central pour publier, Profil (ou Connexion) et Réglages. Au-dessus de
   720px la barre disparaît : la navigation du haut reprend la main.
   ============================================================================ */
.bottom-nav { display: none; }

@media (max-width: 720px) {
  .bottom-nav {
    /* minmax(0, 1fr) et non 1fr : un « 1fr » nu garde pour minimum la largeur
       du contenu, si bien qu'avec une grande taille de police système les
       libellés élargissaient les colonnes et la dernière entrée sortait de
       l'écran. Avec minmax(0, …) les colonnes sont strictement égales et le
       texte se tronque proprement au lieu de pousser la barre. */
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    /* Pas d'overflow:hidden ici : il rognerait le débord du bouton « + ».
       Le non-débordement est déjà garanti par minmax(0,1fr) et par la troncature
       des libellés (.bn-item span). */
    align-items: center; gap: 2px; max-width: 100%;
    /* z-index 800 : au-dessus de l'en-tête (100), de la messagerie plein écran
       (90), des feuilles de réglages (400) et du bandeau cookies (700).
       Seule une modale (9999) peut la recouvrir, et c'est voulu. */
    /* La largeur suit celle du CONTENU, pas celle de l'écran : voir la variable
       --largeur-contenu publiée par main.js. Sans elle, une barre de défilement
       classique ou un zoom différent de 100 % rendrait la barre plus large que
       la page, et l'alignement paraîtrait faux. */
    position: fixed; left: 0; right: auto; bottom: 0; z-index: 800;
    width: var(--largeur-contenu, 100%);
    /* Promotion sur sa propre couche : sur Android, la barre d'adresse qui se
       rétracte au défilement fait sautiller — voire disparaître un instant —
       les éléments en position:fixed. Une couche dédiée supprime l'effet. */
    transform: translateZ(0); will-change: transform; backface-visibility: hidden;
    background: rgba(255, 255, 255, .96); backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 18px rgba(94, 31, 48, .08);
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  }
  .bn-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; min-height: 48px; padding: 6px 2px; min-width: 0;
    background: none; border: none; cursor: pointer; text-align: center;
    color: var(--muted); font-weight: 600; line-height: 1.2;
    /* Plafonné : une police système réglée en « très grand » ne doit pas
       pouvoir faire déborder la barre. */
    font-size: clamp(9.5px, .66rem, 12.5px);
  }
  .bn-item .ico { width: 22px; height: 22px; flex-shrink: 0; }
  .bn-item span {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .bn-item:hover, .bn-item.active { color: var(--wine); }
  .bn-item.active .ico { color: var(--rose); }

  /* Bouton « + » : légèrement en relief, c'est l'action principale. */
  .bn-add {
    /* Le « + » dépasse au-dessus de la barre : il lui faut son propre plan,
       sinon les entrées voisines peuvent passer par-dessus son débord. */
    position: relative; z-index: 3;
    display: grid; place-items: center; justify-self: center; flex-shrink: 0;
    width: min(54px, 100%); height: 54px; margin-top: -22px;
    border-radius: 50%; border: 3px solid var(--card);
    background: var(--grad-rose); color: #fff;
    box-shadow: 0 8px 18px rgba(184, 85, 111, .45);
  }
  .bn-add:hover, .bn-add:focus-visible { color: #fff; }

  /* Le contenu et le bandeau cookies laissent la place à la barre. */
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .cookie-banner { bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 700; }

  /* « Réglages » réutilise le menu du compte, présenté en feuille basse :
     tous les liens du compte — dont la déconnexion — restent accessibles.
     Attention : un `backdrop-filter` sur l'en-tête ferait de celui-ci le bloc
     conteneur des descendants en position:fixed — la feuille se calerait alors
     sur l'en-tête et sortirait de l'écran. On l'enlève sur mobile et on rend la
     barre opaque, ce qui revient visuellement au même. */
  .site-header { backdrop-filter: none; background: var(--blush); }
  #accountDrop, #guestSheet { position: static; }
  #accountDrop .dropdown-menu, #guestSheet .dropdown-menu {
    position: fixed; left: 10px; right: auto; top: auto;
    width: calc(var(--largeur-contenu, 100%) - 20px);
    bottom: calc(80px + env(safe-area-inset-bottom));
    min-width: 0; z-index: 400; max-height: 62vh; overflow-y: auto;
  }

  /* Connectée, la barre basse porte « Publier » et le compte : on les retire
     du haut. Déconnectée en revanche, « Se connecter » reste en haut, à gauche
     du burger — c'est le premier geste attendu d'une visiteuse. */
  .nav-right .nav-publish,
  .nav-right .account-btn { display: none; }
  .nav-right .account-btn-link { padding: 8px 13px; font-size: .82rem; }
}

/* Cloche de notifications : uniquement quand le menu burger est de sortie,
   pour ne pas surcharger la barre complète des grands écrans. */
.nav-bell { display: none; }
@media (max-width: 62.5em) { .nav-bell { display: grid; } }

/* ============================================================================
   HERO — CARROUSEL PLEIN ÉCRAN
   Défilement natif (scroll-snap) : le glissement au doigt marche sans JS. Le
   script ne fait qu'enchaîner tout seul et synchroniser les pastilles.
   ============================================================================ */
.hero-slider {
  position: relative;
  /* Pleine largeur garantie, quel que soit le conteneur parent. */
  width: 100%; max-width: 100%;
  height: min(86vh, 760px);
  height: min(86dvh, 760px);
  min-height: 480px;
  background: var(--wine-dark);
  isolation: isolate;
}
.hs-track {
  display: flex; height: 100%;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
}
.hs-track::-webkit-scrollbar { display: none; }
.hs-track:focus-visible { outline: 3px solid var(--rose); outline-offset: -3px; }

.hs-slide {
  position: relative; flex: 0 0 100%; width: 100%; min-width: 100%; height: 100%;
  /* start plutôt que center : avec des diapositives exactement aussi larges
     que le rail, l'alignement au début est le plus prévisible et évite les
     positions intermédiaires quand un défilement est interrompu. */
  scroll-snap-align: start; scroll-snap-stop: always;
  display: grid; align-items: center; overflow: hidden;
}
.hs-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  /* Cadrage fourni par la diapositive (--pos), remplacé sur téléphone par
     --pos-tel : l'image y est rognée en largeur et non en hauteur. */
  object-fit: cover; object-position: var(--pos, 50% 50%); z-index: -2;
  transform: scale(1.06); transition: transform 9s ease-out;
}
.hs-slide.is-active .hs-img { transform: scale(1); }   /* léger travelling */

/* Voile bordeaux : lisibilité du texte + couleur de marque sur la photo */
.hs-veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(64, 18, 32, .93) 0%, rgba(94, 31, 48, .74) 40%,
                            rgba(124, 45, 66, .34) 68%, rgba(197, 107, 130, .16) 100%),
    radial-gradient(120% 90% at 12% 105%, rgba(224, 169, 109, .30), transparent 60%);
}

/* Le bloc de texte suit la grille du site (container) et reste calé à gauche,
   là où le voile bordeaux est le plus dense : lisibilité maximale. */
/* width:100% est nécessaire : `.container` pose des marges automatiques, et une
   marge auto sur un élément de grille annule l'étirement — la diapositive se
   retrouvait alors dimensionnée sur son contenu et centrée. */
.hs-inner { position: relative; z-index: 1; width: 100%; color: #fff; padding-block: 40px; }
.hs-copy { max-width: 640px; }
.hs-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3);
  backdrop-filter: blur(8px);
  color: #fff; font-weight: 600; font-size: .8rem; letter-spacing: .01em;
}
.hs-eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%; background: #7bd39a; flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(123, 211, 154, .25);
}
.hs-inner h1 {
  margin-top: 18px; color: #fff; text-wrap: balance;
  font-size: clamp(2rem, 5.6vw, 4rem); line-height: 1.06;
  text-shadow: 0 2px 24px rgba(40, 10, 20, .45);
}
.hs-inner h1 .accent {
  background: linear-gradient(100deg, #f3c9a0, #f0a8bd 55%, #ffd9c2);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hs-inner h1 .script {
  display: block; margin-top: 10px; color: #f6cdd8;
  font-family: var(--f-script); font-size: clamp(1.35rem, 3vw, 2.1rem);
  text-shadow: none;
}
.hs-lead {
  margin-top: 18px; max-width: 540px; color: rgba(255, 255, 255, .9);
  font-size: clamp(.98rem, 1.6vw, 1.12rem); line-height: 1.6;
}
.hs-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* Bouton secondaire lisible sur photo */
.btn-glass {
  background: rgba(255, 255, 255, .14); color: #fff;
  border: 1.5px solid rgba(255, 255, 255, .55); backdrop-filter: blur(8px);
}
.btn-glass:hover { background: rgba(255, 255, 255, .26); color: #fff; }

/* Entrée du texte, rejouée à chaque diapositive active */
.hs-slide.is-active .hs-eyebrow,
.hs-slide.is-active .hs-inner h1,
.hs-slide.is-active .hs-lead,
.hs-slide.is-active .hs-cta { animation: hsUp .65s cubic-bezier(.2, .7, .3, 1) both; }
.hs-slide.is-active .hs-inner h1 { animation-delay: .06s; }
.hs-slide.is-active .hs-lead     { animation-delay: .12s; }
.hs-slide.is-active .hs-cta      { animation-delay: .18s; }
@keyframes hsUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Flèches (grands écrans) */
.hs-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .38);
  backdrop-filter: blur(8px); color: #fff; cursor: pointer; transition: background .2s, transform .2s;
}
.hs-arrow:hover { background: rgba(255, 255, 255, .3); }
.hs-prev { left: 18px; }
.hs-next { right: 18px; }

/* Pastilles avec jauge de progression */
.hs-dots {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 22px;
  display: flex; justify-content: center; gap: 9px;
}
.hs-dot {
  width: 34px; height: 5px; padding: 0; border: none; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, .35); overflow: hidden; transition: width .3s, background .3s;
}
.hs-dot.active { width: 62px; background: rgba(255, 255, 255, .3); }
.hs-dot i { display: block; height: 100%; width: 0; background: #fff; border-radius: 999px; }
.hs-dot.active i { animation: hsFill 6s linear forwards; }
.hs-slider-paused .hs-dot.active i { animation-play-state: paused; }
@keyframes hsFill { from { width: 0; } to { width: 100%; } }

/* Bandeau de chiffres, juste sous le carrousel */
.hero-bar { background: var(--wine-dark); color: #fff; }
.hero-bar .container {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  padding-block: 18px; text-align: center;
}
.hb-stat strong {
  display: block; font-family: var(--f-head); font-size: 1.55rem;
  background: linear-gradient(100deg, #f3c9a0, #f0a8bd);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hb-stat span { font-size: .76rem; color: rgba(255, 255, 255, .72); }

@media (max-width: 900px) {
  .hs-arrow { display: none; }
}
@media (max-width: 720px) {
  .hero-slider { height: min(82dvh, 620px); min-height: 440px; }
  .hs-img { object-position: var(--pos-tel, var(--pos, 50% 50%)); }
  .hs-inner { padding-block: 28px; }
  .hs-lead { font-size: .95rem; }
  .hs-cta { gap: 10px; margin-top: 22px; }
  .hs-cta .btn { flex: 1 1 auto; justify-content: center; }
  .hs-dots { bottom: 16px; }
  .hero-bar .container { grid-template-columns: repeat(4, 1fr); padding-block: 14px; }
  .hb-stat strong { font-size: 1.25rem; }
  .hb-stat span { font-size: .68rem; }
}
@media (max-width: 400px) {
  .hs-eyebrow { font-size: .72rem; padding: 6px 12px; }
  .hs-inner h1 .script { font-size: 1.2rem; }
}

/* Mouvement réduit : ni travelling, ni entrée animée, ni jauge. */
@media (prefers-reduced-motion: reduce) {
  .hs-img { transition: none; transform: none; }
  .hs-slide.is-active .hs-eyebrow,
  .hs-slide.is-active .hs-inner h1,
  .hs-slide.is-active .hs-lead,
  .hs-slide.is-active .hs-cta { animation: none; }
  .hs-dot.active i { animation: none; width: 100%; }
  .hs-track { scroll-behavior: auto; }
}

/* ============================================================================
   SIGNATURE DE MARQUE (accueil) — 26/08/2026
   Le nom de la plateforme, centré tout en haut, dans les polices et les
   couleurs de la charte : Playfair bordeaux + Dancing Script rose, filets et
   losange dorés. Identique sur ordinateur et sur téléphone.
   ============================================================================ */
.brand-band { background: var(--grad-blush); border-bottom: 1px solid var(--line); text-align: center; }
.brand-band .container { padding-block: 24px 22px; }
.bb-orn {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  color: var(--gold); font-size: .9rem; margin-bottom: 8px;
}
.bb-orn::before, .bb-orn::after {
  content: ""; height: 1px; width: min(80px, 14vw);
  background: linear-gradient(90deg, transparent, var(--rose-light));
}
.bb-orn::after { background: linear-gradient(90deg, var(--rose-light), transparent); }
.bb-name {
  margin: 0; font-family: var(--f-head); font-weight: 800; color: var(--wine-dark);
  font-size: clamp(1.75rem, 5.4vw, 3rem); line-height: 1.04; letter-spacing: .005em;
}
.bb-name .apos { color: var(--rose); }
.bb-tag {
  margin: 4px 0 0; font-family: var(--f-script); color: var(--rose);
  font-size: clamp(1.15rem, 3.2vw, 1.7rem); line-height: 1.2;
}
@media (max-width: 560px) {
  .brand-band .container { padding-block: 18px 16px; }
  .bb-orn { gap: 10px; margin-bottom: 5px; font-size: .8rem; }
}

/* ============================================================================
   MESSAGERIE PLEIN ÉCRAN SUR TÉLÉPHONE — 26/08/2026
   On ne voyait qu'une portion des échanges : le fil était enfermé dans un bloc
   de 560px de haut, lui-même dans la page. Sur téléphone, une conversation
   ouverte occupe désormais tout l'écran sous l'en-tête, comme une vraie
   application de messagerie — le fil défile, la saisie reste en bas.
   ============================================================================ */
@media (max-width: 720px) {
  .msg-layout { min-height: 0; }

  .msg-layout.has-thread {
    /* La conversation s'arrête au-dessus de la barre du bas, qui reste visible
       en permanence (demande explicite) : la saisie n'est jamais masquée. */
    /* Hauteurs mesurées et publiées par main.js (--h-entete / --h-barre) :
       elles suivent la bordure de l'en-tête et la croissance de la barre du
       bas avec la taille de police système. Les valeurs de repli ne servent
       que le temps du premier calcul. */
    position: fixed;
    inset: var(--h-entete, 73px) 0 var(--h-barre, 63px) 0;
    z-index: 90;
    margin: 0; border: none; border-radius: 0; box-shadow: none;
    height: auto; min-height: 0;
  }
  .msg-layout.has-thread .chat-pane { height: 100%; min-height: 0; }
  .msg-layout.has-thread .chat-body { min-height: 0; padding: 16px 14px; }
  .msg-layout.has-thread .chat-input {
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }
  .msg-layout.has-thread .bubble { max-width: 82%; }

  /* Pendant l'échange, la page derrière ne défile pas — mais la barre du bas
     reste en place, elle doit être atteignable à tout moment. */
  body.msg-open { overflow: hidden; padding-bottom: 0; }
}

/* --- Mots de passe : bouton œil (afficher / masquer) ----------------------- */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 48px; }
.pw-eye {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border: none; background: none; cursor: pointer;
  display: grid; place-items: center; color: var(--muted); border-radius: 50%;
  transition: color .18s, background .18s;
}
.pw-eye:hover, .pw-eye:focus-visible { color: var(--wine); background: var(--rose-pale); }

/* Repère de version, discret, en bas de page (voir includes/footer.php) */
.build-stamp { margin-top: 6px; font-size: .72rem; opacity: .55; letter-spacing: .02em; }

/* --- Bandeau cookies : compact sur téléphone ------------------------------
   Mesuré sur un écran de 375x812 : le bandeau occupait 181px, soit 22% de
   l'écran — et 30% avec la barre du bas. C'est la première chose que voit
   une visiteuse. Typographie resserrée et boutons sur une seule rangée. */
@media (max-width: 560px) {
  .cookie-banner {
    left: 10px; right: 10px; padding: 13px 15px; gap: 10px;
    border-radius: var(--r-sm);
  }
  .cookie-banner p { font-size: .76rem; line-height: 1.45; min-width: 0; }
  .cookie-banner .cb-actions { width: 100%; gap: 8px; }
  .cookie-banner .cb-actions .btn { flex: 1; padding-inline: 10px; }
}

/* --- Hero sur téléphone : lisibilité du texte -----------------------------
   Sur mobile le texte occupe toute la largeur et retombe sur les zones
   claires de la photo (constaté : « entre sœurs » et le paragraphe sur le
   hijab clair). On ajoute un dégradé vertical qui assombrit franchement la
   moitié basse — là où vivent le titre, le texte et les boutons. */
@media (max-width: 720px) {
  .hs-veil {
    background:
      linear-gradient(180deg,
        rgba(50, 14, 26, .58) 0%,
        rgba(50, 14, 26, .22) 28%,
        rgba(50, 14, 26, .70) 58%,
        rgba(38, 10, 20, .93) 100%),
      linear-gradient(100deg,
        rgba(64, 18, 32, .80) 0%,
        rgba(94, 31, 48, .52) 55%,
        rgba(124, 45, 66, .34) 100%);
  }
  /* Le dégradé pêche du titre s'éclaircit pour ressortir sur le fond assombri */
  .hs-inner h1 .accent {
    background: linear-gradient(100deg, #ffd9b4, #ffb9cb 55%, #ffe6d6);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .hs-lead { color: rgba(255, 255, 255, .95); }
}

/* --- Logo un peu plus présent sur téléphone -------------------------------
   Constaté sur capture : dans une barre de 72px, le logo paraissait perdu
   entre le bord gauche et le burger. */
@media (max-width: 560px) { .brand-has-logo img { height: 46px; max-width: 200px; } }

/* La feuille « Réglages » de la visiteuse non connectée n'a de sens que sur
   téléphone : c'est la barre du bas qui l'ouvre. */
#guestSheet { display: none; }
@media (max-width: 720px) { #guestSheet { display: block; } }

/* Sous 400px, « Se connecter » se réduit à son icône : la barre du haut reste
   confortable même avec une grande taille de police système. */
@media (max-width: 400px) {
  .nav-right .account-btn-link .account-label { display: none; }
  .nav-right .account-btn-link { padding: 8px; min-width: 44px; justify-content: center; }
}

/* --- Aucune barre de défilement ne doit rogner la largeur sur mobile -------
   Si le navigateur réserve quelques pixels pour une barre de défilement
   classique, la page devient plus étroite que l'écran et il reste une bande
   vide sur le côté. Sur téléphone la barre est superposée par défaut : on
   s'assure qu'elle ne prend jamais de place. (Sur ordinateur on n'y touche
   pas : la barre y est une aide de navigation légitime.) */
@media (max-width: 720px) {
  html { scrollbar-width: none; -ms-overflow-style: none; }
  html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; }
  body { scrollbar-width: none; }
}

/* ============================================================================
   FICHE ANNONCE — encart vendeuse et actions (28/08/2026)
   Mesuré sur la fiche en ligne, écran de 375px : `.sb-main` se réduisait à
   65px de large sur 269px de haut. Le nom de la boutique et la ligne
   « Ville · Membre depuis 2026 » s'empilaient caractère par caractère en
   colonne — d'où le « Membre depuis 2 » lisible à l'écran. La cause : le bloc
   pouvait rétrécir sans limite (min-width:0), donc la boîte flex ne passait
   jamais à la ligne comme prévu.
   ============================================================================ */
.seller-box .sb-main {
  /* Plancher de 150px : en dessous, c'est le bouton qui passe à la ligne. */
  flex: 1 1 150px; min-width: 150px;
}
.seller-box .sb-main .muted { overflow-wrap: anywhere; }

@media (max-width: 560px) {
  .seller-box { padding: 16px; gap: 12px; }
  .seller-box img { width: 52px; height: 52px; }
  /* Le bouton prend toute la largeur, sur sa propre ligne */
  .seller-box > .btn { flex: 1 1 100%; }
}

/* --- Actions : contacter / devis / favori ---------------------------------
   Disposition en grille à toutes les largeurs plutôt qu'en flex : « Contacter »
   et le cœur sur la première ligne, « Demander un devis » en pleine largeur
   dessous. En flex, le cœur partait seul à la ligne dès que la colonne était
   étroite (constaté à 1280px, colonne de 476px) — la grille rend la mise en
   page identique et prévisible partout. */
.listing-actions {
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: stretch;
}
.listing-actions #contactBtn { grid-area: 1 / 1; }
.listing-actions #quoteBtn { grid-area: 2 / 1 / 3 / -1; }
/* Le cœur reprend sa place dans le flux (il est en absolu sur les cartes) */
.listing-actions .fav-static {
  grid-area: 1 / 2;
  position: static; width: 56px; height: auto; min-height: 56px;
  border-radius: var(--r); border: 1.5px solid var(--rose-light); background: #fff;
}
.listing-actions .fav-static.active { background: var(--grad-rose); border-color: transparent; }
.listing-actions .fav-static svg { width: 24px; height: 24px; }

@media (max-width: 560px) { .listing-actions { gap: 10px; } }

/* Boutons principaux plus généreux sur petit écran (demande client) */
@media (max-width: 400px) {
  .btn-lg { padding: 16px 24px; font-size: .98rem; }
}

/* --- Avis : rien ne doit pousser la page ---------------------------------
   Mesuré à 320px en police système 150 % : l'en-tête d'un avis (nom + étoiles
   + date) et la ligne de note globale faisaient 345px de large dans une
   colonne de 288px. Des enfants de boîte flex ne peuvent pas rétrécir sous
   leur contenu tant qu'on ne le leur autorise pas explicitement. */
.review > div { min-width: 0; }
.review .r-head { flex-wrap: wrap; min-width: 0; }
.review .r-head strong { overflow-wrap: anywhere; }
.review p { overflow-wrap: anywhere; }
.stars { flex-shrink: 0; }

@media (max-width: 720px) {
  /* La note globale passe sous le titre plutôt que de le serrer. */
  .flex.items-center.justify-between { flex-wrap: wrap; }
  .rating-input { flex-wrap: wrap; }
  .form-card { max-width: 100%; }
  .form-card .textarea, .form-card .input { max-width: 100%; }
}

/* --- Titre des cartes d'annonce : jamais plus de deux lignes ---------------
   Mesuré à 320px en police système 150 % : un titre long s'étirait sur 179px de
   haut dans une carte de 135px de large. On le borne à deux lignes et on
   plafonne sa taille : la carte garde des proportions lisibles quel que soit
   le réglage de police de la visiteuse. */
.listing-card .title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 720px) {
  .listing-card .title { font-size: clamp(13px, 1rem, 16.5px); }
  .listing-card .meta { font-size: clamp(11px, .82rem, 13px); }
  .listing-card .price { font-size: clamp(14px, 1.05rem, 17px); }
  .listing-card .seller { font-size: clamp(11px, .78rem, 12.5px); }
  /* Les étoiles redéclarent leur propre taille (.95rem) : elles échappaient
     donc au plafond de la ligne ci-dessus et atteignaient 100px de large dans
     une carte de 139px. Comme elles sont en flex-shrink:0 — nécessaire pour
     les avis, où elles ne doivent pas se tasser — la ligne débordait de 26px
     et overflow:hidden coupait les dernières étoiles. On plafonne ici aussi,
     et la ligne peut passer à la ligne en dernier recours. */
  .listing-card .meta { flex-wrap: wrap; }
  .listing-card .meta .stars { font-size: clamp(10px, .82rem, 13px); }
  .listing-card .meta .stars-count { font-size: clamp(10px, .8rem, 12.5px); }
}

/* ============================================================================
   BANNIÈRE D'INSTALLATION (PWA) — 05/09/2026
   Le bouton « Installer l'application » existait uniquement en pied de page :
   personne ne descend jusque-là sur téléphone. La proposition s'affiche
   désormais juste au-dessus de la barre du bas, à portée de pouce, et
   uniquement lorsque Android signale que le site est installable.
   ============================================================================ */
.pwa-banner {
  display: none;                      /* activée par main.js, sur téléphone seulement */
  position: fixed;
  left: 0; right: auto;
  /* Même calage que la barre du bas : la largeur du contenu, pas celle de
     l'écran, sinon la bannière dépasse dès qu'un défileur est réservé. */
  width: var(--largeur-contenu, 100%);
  bottom: var(--h-barre, 63px);
  z-index: 790;                       /* sous la barre du bas (800) */
  align-items: center;
  gap: 12px;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px rgba(124,45,66,.14);
}
.pwa-banner img { width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0; }
/* Chaque ligne est tronquée plutôt que renvoyée à la ligne : la hauteur de la
   bannière est ainsi constante quelle que soit la largeur de l'écran. Sans
   cela, le titre passait sur deux lignes et le sous-titre sur trois, soit
   142px de haut au lieu de 68px. */
.pwa-banner .pb-txt { flex: 1 1 auto; min-width: 0; line-height: 1.28; }
.pwa-banner .pb-txt strong,
.pwa-banner .pb-txt span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pwa-banner .pb-txt strong { color: var(--wine-dark); font-size: .9rem; }
.pwa-banner .pb-txt span { font-size: .74rem; color: var(--muted); }
.pwa-banner .btn { flex-shrink: 0; white-space: nowrap; }
.pwa-banner .pb-close {
  flex-shrink: 0; width: 30px; height: 30px; border: none; background: none;
  color: var(--muted); cursor: pointer; display: grid; place-items: center; border-radius: 50%;
}
.pwa-banner .pb-close:hover { background: var(--rose-pale); color: var(--wine); }

@media (max-width: 720px) {
  /* La classe est posée par main.js : sans elle, aucune bannière. */
  .pwa-banner.pb-on { display: flex; }
  /* La page se termine au-dessus de la bannière, sinon le pied de page et le
     dernier bloc de contenu passent dessous et deviennent illisibles. */
  /* On conserve la marge existante (barre du bas + zone sûre) et on y ajoute
     la hauteur mesurée de la bannière. */
  body.pb-visible { padding-bottom: calc(76px + env(safe-area-inset-bottom) + var(--h-banniere, 68px)); }
  /* Jamais par-dessus une conversation ouverte en plein écran. */
  body.msg-open .pwa-banner { display: none; }
}
/* Sur très petit écran, le sous-titre passe à la trappe avant que quoi que ce
   soit ne déborde. */
/* Sous 400px, le sous-titre laisse la place au bouton plutôt que de comprimer
   le titre à quelques caractères — sauf en mode « marche à suivre », où ce
   sous-titre EST l'information utile. */
@media (max-width: 400px) { .pwa-banner:not(.pb-guide) .pb-txt span { display: none; } }

/* Mode « marche à suivre » : le navigateur ne propose pas l'installation
   automatique, on explique le geste. Le texte tient alors sur deux lignes. */
.pwa-banner.pb-guide .pb-txt span { white-space: normal; overflow: visible; }
.pwa-banner.pb-guide .pb-txt strong { white-space: normal; }
.pwa-banner.pb-guide #pwaInstall[hidden] { display: none; }

/* ============================================================================
   ADMINISTRATION — BARRE LATÉRALE — 06/09/2026
   Le tableau de bord d'administration empilait ses panneaux sur toute la
   largeur, avec pour seule navigation trois boutons en haut de page : sur une
   page de plusieurs milliers de pixels de haut, passer d'une section à l'autre
   obligeait à remonter. La navigation est désormais verticale, à gauche, et
   reprend l'ossature du tableau de bord vendeuse (.dash / .dash-side) : même
   grille, même repli sous 960px derrière le bouton « Menu », rien de dupliqué.
   ============================================================================ */
.admin-side .as-crest {
  width: 52px; height: 52px; margin: 0 auto 8px; border-radius: 15px;
  display: grid; place-items: center;
  background: var(--grad-rose); color: #fff; box-shadow: var(--shadow-sm);
}
.admin-side .who .hint { display: block; margin-top: 2px; }

/* Intertitres : ils découpent une liste longue en groupes lisibles. */
.admin-side .as-sep {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); font-weight: 700;
  padding: 14px 13px 5px;
}
.admin-side nav a > svg:first-child { flex-shrink: 0; }

/* Compteur de tâches en attente, poussé à droite du libellé. */
.admin-side .as-count {
  margin-left: auto; flex-shrink: 0;
  min-width: 21px; height: 21px; padding: 0 6px;
  border-radius: 999px; color: #fff;
  font-size: .72rem; font-weight: 700; line-height: 21px; text-align: center;
}
.admin-side nav a.active .as-count { background: #fff !important; color: var(--wine); }

/* Le libellé peut se réduire ; seuls l'icône et le compteur gardent leur
   taille. Sans cela, un compteur à trois chiffres pousse le texte hors du
   cadre au lieu de le laisser se replier. */
.admin-side nav a { min-width: 0; }
.admin-side nav a { overflow-wrap: anywhere; }

/* Les ancres visent des sections situées sous l'en-tête collant : sans marge
   de défilement, le titre visé passe derrière l'en-tête. */
.admin-anchor { scroll-margin-top: calc(var(--h-entete, 73px) + 16px); }

@media (max-width: 960px) {
  /* Repliée, la barre reprend toute la largeur : les libellés respirent. */
  .admin-side .as-sep { padding-top: 12px; }
}

/* ============================================================================
   NEWSLETTER DU PIED DE PAGE — 10/09/2026
   Sur téléphone, le bouton faisait 52px de large contre 308px pour le champ :
   une cible minuscule, au libellé « OK » illisible, collée à un champ démesuré.
   Rien ne débordait, mais l'ensemble était inutilisable au pouce. Le formulaire
   s'empile donc sous 720px : champ pleine largeur, bouton pleine largeur.
   ============================================================================ */
@media (max-width: 720px) {
  .news-form { gap: 10px; }
  .news-form input,
  .news-form .btn { flex: 1 1 100%; width: 100%; }
  .news-form .btn { justify-content: center; padding-block: 12px; }
}

/* ============================================================================
   FILTRES DES ANNONCES — 12/09/2026
   Sur téléphone, le panneau de filtres faisait 588px de haut et repoussait la
   première annonce à 1110px : une fois un filtre touché, le résultat changeait
   une écran et demi plus bas, invisible. D'où « quand on filtre on ne voit pas
   de résultat ». Les filtres deviennent donc une barre horizontale collée sous
   l'en-tête, et le détail (ville, prix, sous-catégorie) se replie derrière un
   bouton. Sur ordinateur, la colonne latérale ne change pas.
   ============================================================================ */

/* Rangée toujours visible : catégories + bouton « Filtres ». */
.fb-quick { display: flex; align-items: center; gap: 10px; }
.fb-quick .chip-row { flex: 1 1 auto; min-width: 0; }

/* Les catégories défilent du doigt plutôt que de s'empiler sur trois lignes. */
.chip-scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.chip-scroll::-webkit-scrollbar { display: none; }
.chip-scroll .chip { flex: 0 0 auto; white-space: nowrap; }

.fb-more {
  display: none; align-items: center; gap: 6px; flex-shrink: 0;
  padding: 8px 13px; border-radius: 999px; cursor: pointer;
  background: #fff; border: 1.5px solid var(--line); color: var(--wine);
  font-size: .82rem; font-weight: 600; font-family: inherit;
}
.fb-more[aria-expanded="true"] { background: var(--rose-pale); border-color: var(--rose); }
.fb-more .fb-count {
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
  background: var(--grad-rose); color: #fff; font-size: .7rem; line-height: 19px; text-align: center;
}

@media (min-width: 901px) {
  /* Ordinateur : le panneau reste déplié, le bouton ne sert à rien.
     Seuil calé sur celui de .browse-layout (900px), sinon la barre
     horizontale s'afficherait dans une colonne latérale de 280px. */
  .fb-quick { display: block; margin-bottom: 4px; }
  .chip-scroll { flex-wrap: wrap; overflow-x: visible; }
  .fb-panel { display: block !important; }
}

@media (max-width: 900px) {
  .browse-layout .filter-bar {
    /* Collée sous l'en-tête : les filtres restent atteignables pendant qu'on
       parcourt les résultats, ce qui était impossible auparavant. */
    position: sticky; top: var(--h-entete, 73px); z-index: 60;
    padding: 10px 12px; border-radius: 0;
    /* Débord latéral égal au rembourrage du conteneur, sans jamais dépasser :
       des marges négatives fixes élargissaient la barre au-delà de l'écran. */
    margin: -12px 0 14px;
    width: auto; max-width: 100%;
    border-left: none; border-right: none;
    box-shadow: 0 4px 14px rgba(124,45,66,.07);
  }
  .filter-bar h4 { font-size: .95rem; margin-bottom: 10px; }
  .fb-more { display: inline-flex; }
  .fb-panel { display: none; padding-top: 12px; margin-top: 10px; border-top: 1px solid var(--line); }
  .fb-panel.open { display: block; }
  .fb-panel .filter-group { border-top: none; padding-top: 0; margin-bottom: 12px; }
  /* Le panneau déplié ne doit jamais manger tout l'écran : il défile. */
  .fb-panel { max-height: 58vh; overflow-y: auto; }
}

/* Pendant le chargement des résultats, la grille s'estompe : on voit qu'il se
   passe quelque chose même quand le nombre de résultats ne change pas. */
#resultsGrid.loading { opacity: .45; pointer-events: none; }

/* Bandeau de résultat : c'est lui qu'on amène sous les yeux après un filtre. */
.results-note {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: .88rem; color: var(--wine); background: var(--rose-pale);
  border: 1px solid var(--rose-light); border-radius: var(--r-sm);
  padding: 9px 14px; margin-bottom: 14px;
}
.results-note.vide { background: rgba(224,169,109,.14); border-color: var(--gold-soft); color: #8a5a1e; }

/* ============================================================================
   PROGRAMME AMBASSADRICE — 12/09/2026
   ============================================================================ */
.amb-barre { height: 10px; border-radius: 999px; background: var(--blush-deep); overflow: hidden; }
.amb-barre span { display: block; height: 100%; border-radius: 999px; background: var(--grad-rose); }

.amb-paliers { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.amb-palier {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 14px 16px; box-shadow: var(--shadow-sm); min-width: 0;
}
.amb-palier.obtenu  { border-color: var(--success); background: rgba(79,157,105,.06); }
.amb-palier.suivant { border-color: var(--rose); box-shadow: 0 0 0 3px rgba(197,107,130,.12); }
.amb-palier .ap-tete { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; min-width: 0; }
.amb-palier .ap-tete strong { color: var(--wine-dark); font-size: .95rem; overflow-wrap: anywhere; }
.amb-palier .ap-seuil {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  background: var(--grad-rose); color: #fff; font-size: .82rem; font-weight: 700;
  display: grid; place-items: center;
}
.amb-palier ul { list-style: none; display: grid; gap: 5px; }
.amb-palier li { font-size: .82rem; color: var(--ink-soft); padding-left: 14px; position: relative; overflow-wrap: anywhere; }
.amb-palier li::before { content: "❖"; position: absolute; left: 0; color: var(--gold); font-size: .7rem; }

/* Bandeau d'offre de lancement, sur l'accueil et les offres. */
.launch-band {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--grad-gold); color: #5a3a12; border-radius: var(--r);
  padding: 14px 18px; margin-bottom: 22px; box-shadow: var(--shadow-sm);
}
.launch-band strong { color: #4a2f0d; }
.launch-band .lb-places {
  margin-left: auto; background: rgba(255,255,255,.75); border-radius: 999px;
  padding: 4px 12px; font-weight: 700; font-size: .84rem; white-space: nowrap;
}
@media (max-width: 560px) { .launch-band .lb-places { margin-left: 0; } }

/* Code de parrainage : en taille fixe (2.2rem + 3px d'interlettrage) il
   débordait de 26px à 320px en police système 150 % — une chaîne insécable ne
   se replie pas toute seule. On plafonne la taille et on autorise la coupure. */
.amb-code {
  font-family: var(--f-head); font-weight: 800; color: var(--wine);
  font-size: clamp(1.4rem, 8vw, 2.2rem); letter-spacing: 3px;
  overflow-wrap: anywhere; line-height: 1.15;
}

/* Les chaînes techniques (adresse de webhook, SIRET, identifiants) n'ont pas
   d'espace : sans coupure autorisée, elles débordent de leur bloc — mesuré à
   63px sur « Admin › Outils » à 320px en police 150 %. */
code, .hint code, .ethic-note code { overflow-wrap: anywhere; word-break: break-word; }

/* Titres : un mot long (« d'administration », « Vérifications ») en grande
   taille dépasse son bloc sur écran étroit. break-word ne coupe qu'en dernier
   recours — la typographie normale n'est pas affectée. */
h1, h2, h3, h4, .section-head h2, .prose h2 { overflow-wrap: break-word; }

/* Grille des boutiques : elle s'ajuste d'elle-même au lieu de sauter de 1 à 2
   colonnes à un seuil fixe. Une carte seule faisait 560px de large entre 400
   et 720px — beaucoup d'espace pour une seule boutique.
   min(100%, 260px) : sans le min(), la colonne ne peut pas descendre sous
   260px et la grille déborde sur les écrans plus étroits. */
.sellers-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
@media (min-width: 1100px) { .sellers-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }