/* =====================================================================
   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 {
  display: inline-block; padding: 0 6px 9px;
  font-family: var(--f-script); font-weight: 600; font-size: 1.45rem; line-height: 1.1; color: var(--rose);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10'%3E%3Cpath d='M3 7.2C26 2.8 58 2 82 4.4c11 1.1 22 2.6 35 1.6' fill='none' stroke='%23e0a96d' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M30 8.6c18-1.6 38-1.9 58-.6' fill='none' stroke='%23e0a96d' stroke-opacity='.55' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E")
              no-repeat center bottom / min(100%, 150px) 10px;
}
.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); }
/* Le bouton « Devenir vendeuse » garde son fond rose et son texte blanc, survol compris
   (la règle des liens du menu, plus précise, lui donnait un texte foncé illisible). */
.main-nav a.nav-cta, .main-nav a.nav-cta:hover, .main-nav a.nav-cta:focus-visible { background: var(--grad-rose); color: #fff; }

/* 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; }
/* Étiquette de boutique (une par diapositive) : papier teinté, point en
   flèche percé d'un trou, ficelle, couture en pointillé, numéro et
   pictogramme de l'univers. --teinte et --encre viennent de index.php. */
.hs-etiquette { display: inline-block; margin-left: 30px; filter: drop-shadow(0 8px 16px rgba(30, 8, 16, .38)); }
.hs-et-pend {
  position: relative; display: inline-block;
  transform: rotate(-3deg); transform-origin: 17px 50%;
}
.hs-ficelle {
  position: absolute; left: -31px; bottom: 50%; width: 48px; height: 30px; overflow: visible;
  fill: none; stroke: rgba(255, 244, 236, .8); stroke-width: 1.4; stroke-linecap: round;
}
.hs-et-corps {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 18px 9px 32px;
  background: var(--teinte, #fbefe9); color: var(--wine-dark);
  clip-path: polygon(15px 0, 100% 0, 100% 100%, 15px 100%, 0 50%);
}
.hs-et-corps::before {   /* le trou de la ficelle */
  content: ""; position: absolute; left: 13px; top: 50%; width: 8px; height: 8px; margin-top: -4px;
  border-radius: 50%; background: #4a1626; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5);
}
.hs-et-corps::after {    /* couture */
  content: ""; position: absolute; inset: 4px 5px 4px 26px; pointer-events: none;
  border: 1px dashed color-mix(in srgb, var(--encre, #7c2d42) 45%, transparent); border-radius: 3px;
}
.hs-et-picto {
  width: 20px; height: 20px; flex: none; color: var(--encre, #7c2d42);
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.hs-et-num {
  font-family: var(--f-body); font-weight: 600; font-size: .64rem; letter-spacing: .1em;
  color: var(--encre, #7c2d42); padding-right: 10px; border-right: 1px solid color-mix(in srgb, var(--encre, #7c2d42) 35%, transparent);
}
.hs-et-nom { font-family: var(--f-head); font-style: italic; font-weight: 500; font-size: .98rem; line-height: 1.2; }
.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-etiquette,
.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-et-pend { animation: hsBalance 1.6s cubic-bezier(.3, .6, .3, 1) .15s both; }   /* l'étiquette se balance puis se pose */
@keyframes hsBalance { 0% { transform: rotate(-11deg); } 40% { transform: rotate(1.5deg); } 70% { transform: rotate(-4.5deg); } 100% { transform: rotate(-3deg); } }
.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-et-corps { gap: 8px; padding: 7px 14px 7px 30px; }
  .hs-et-nom { font-size: .88rem; }
  .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-etiquette,
  .hs-slide.is-active .hs-et-pend,
  .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)); } }

/* ============================================================================
   ASSISTANTS — bulle fixée en bas à droite (includes/assistant-widget.php)
   Administratrice : plan d'action par priorité. Membres et visiteuses :
   assistante d'aide qui écrit ses réponses en direct.
   z-index 850 : au-dessus de la barre du bas (800), sous le bandeau cookies
   (9998), les toasts et les modales (9999).
   ============================================================================ */
.asst { position: fixed; right: 22px; bottom: 22px; z-index: 850; font-family: var(--f-body); }

.asst-fab {
  position: relative; width: 62px; height: 62px; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; color: #fff;
  background: var(--grad-rose); box-shadow: 0 12px 30px rgba(124,45,66,.38);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s, opacity .2s;
  animation: asstArrive .6s cubic-bezier(.34,1.56,.64,1) .4s both;
}
.asst-fab:hover { transform: translateY(-3px) scale(1.06); box-shadow: 0 18px 38px rgba(124,45,66,.45); }
.asst-fab:active { transform: scale(.94); }
.asst-fab:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.asst--admin .asst-fab { background: var(--grad-wine); }
/* Anneau qui respire tant qu'il reste de l'urgent : visible sans être agressif. */
.asst-fab.is-alert::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid var(--danger); animation: asstPulse 2s ease-out infinite;
}
.asst-badge {
  position: absolute; top: -4px; right: -4px; min-width: 24px; height: 24px; padding: 0 6px;
  border-radius: 12px; background: var(--gold); color: var(--wine-dark);
  font-size: .78rem; font-weight: 700; display: grid; place-items: center;
  border: 2px solid #fff; box-shadow: var(--shadow-sm);
}
.asst-fab.is-alert .asst-badge { background: var(--danger); color: #fff; }
.asst-dot {
  position: absolute; top: 6px; right: 6px; width: 13px; height: 13px; border-radius: 50%;
  background: var(--gold); border: 2px solid #fff; animation: asstPulseDot 1.8s ease-in-out infinite;
}
.asst.is-open .asst-fab { transform: scale(.9) rotate(-8deg); }
.asst.is-open .asst-dot, .asst.is-open .asst-fab::after { display: none; }

/* ------------------------------------------------------------ Panneau */
.asst-panel {
  position: absolute; right: 0; bottom: 78px;
  width: min(400px, calc(100vw - 32px)); height: min(620px, calc(100vh - 140px));
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: 24px;
  box-shadow: 0 30px 70px rgba(94,31,48,.28);
  transform-origin: bottom right;
}
.asst-panel[hidden] { display: none; }
.asst.is-open .asst-panel { animation: asstOpen .32s cubic-bezier(.34,1.4,.64,1) both; }

.asst-head {
  display: flex; align-items: center; gap: 12px; padding: 16px 16px 14px;
  background: var(--grad-rose); color: #fff; flex-shrink: 0;
}
.asst-head--admin { background: var(--grad-wine); }
.asst-head-txt { flex: 1; min-width: 0; }
.asst-head h2 { font-family: var(--f-head); font-size: 1.12rem; line-height: 1.2; color: #fff; margin: 0; }
.asst-head p { font-size: .78rem; opacity: .92; margin: 2px 0 0; display: flex; align-items: center; gap: 6px; }
.asst-avatar {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  background: rgba(255,255,255,.2); border: 2px solid rgba(255,255,255,.45);
}
.asst-live { width: 8px; height: 8px; border-radius: 50%; background: #7ee2a0; box-shadow: 0 0 0 3px rgba(126,226,160,.3); }
.asst-close, .asst-reset {
  width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer; flex-shrink: 0;
  display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.16); transition: background .2s;
}
.asst-close:hover, .asst-reset:hover { background: rgba(255,255,255,.3); }

.asst-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; overscroll-behavior: contain; background: var(--card); }

/* ------------------------------------------------- Plan d'action (admin) */
.asst-score { position: relative; width: 52px; height: 52px; flex-shrink: 0; }
.asst-score svg { width: 52px; height: 52px; transform: rotate(-90deg); }
.asst-score circle { fill: none; stroke-width: 5; }
.asst-score .trk { stroke: rgba(255,255,255,.2); }
.asst-score .val { stroke: var(--gold); stroke-linecap: round; transition: stroke-dashoffset 1.2s cubic-bezier(.2,.8,.2,1); }
.asst-score strong { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1rem; font-weight: 700; }

.asst-tally { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.asst-tally span { font-size: .76rem; padding: 4px 10px; border-radius: 20px; background: #fff; border: 1px solid var(--line); color: var(--ink-soft); }
.asst-tally b { font-weight: 700; }
.asst-tally .t-urgent b { color: var(--danger); }
.asst-tally .t-important b { color: #b9782f; }
.asst-tally .t-conseil b { color: var(--rose); }

.asst-group { font-family: var(--f-body); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin: 16px 0 8px; display: flex; align-items: center; gap: 8px; }
.asst-group::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.asst-group--urgent { color: var(--danger); }   .asst-group--urgent::before { background: var(--danger); }
.asst-group--important { color: #b9782f; }      .asst-group--important::before { background: var(--gold); }
.asst-group--conseil { color: var(--rose); }    .asst-group--conseil::before { background: var(--rose); }

.asst-tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.asst-task {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 11px 12px; border-radius: 14px; background: #fff; border: 1px solid var(--line);
  border-left: 4px solid var(--rose); color: var(--ink); text-decoration: none;
  transition: transform .18s, box-shadow .18s;
  animation: asstItem .4s cubic-bezier(.2,.8,.2,1) both;
}
.asst-task:hover { transform: translateX(3px); box-shadow: var(--shadow); }
.asst-task--urgent { border-left-color: var(--danger); background: #fff7f8; }
.asst-task--important { border-left-color: var(--gold); }
.asst-rank { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; font-weight: 700; background: var(--blush-deep); color: var(--wine); }
.asst-task--urgent .asst-rank { background: var(--danger); color: #fff; }
.asst-task-ic { color: var(--wine-soft); display: grid; }
.asst-task--urgent .asst-task-ic { color: var(--danger); }
.asst-task-txt strong { display: block; font-size: .88rem; line-height: 1.3; }
.asst-task-txt small { display: block; font-size: .76rem; color: var(--muted); line-height: 1.4; margin-top: 2px; }
.asst-go { color: var(--muted); display: grid; }
.asst-tasks li:nth-child(2) .asst-task { animation-delay: .05s; }
.asst-tasks li:nth-child(3) .asst-task { animation-delay: .1s; }
.asst-tasks li:nth-child(4) .asst-task { animation-delay: .15s; }
.asst-tasks li:nth-child(n+5) .asst-task { animation-delay: .2s; }

.asst-bravo { text-align: center; padding: 18px 12px; margin-bottom: 4px; border-radius: 18px; background: var(--grad-blush); border: 1px dashed var(--rose-light); }
.asst-bravo-ic { width: 56px; height: 56px; margin: 0 auto 8px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-gold); color: var(--wine-dark); animation: asstBravo 1.2s cubic-bezier(.34,1.56,.64,1) both; }
.asst-bravo strong { display: block; font-family: var(--f-head); color: var(--wine); font-size: 1.1rem; }
.asst-bravo p { font-size: .84rem; color: var(--ink-soft); margin: 4px 0 0; }

/* ---------------------------------------------------- Aide : conversation */
.asst-chat { display: flex; flex-direction: column; gap: 10px; }
.asst-msg { max-width: 88%; padding: 10px 14px; border-radius: 18px; font-size: .9rem; line-height: 1.55; animation: asstBulle .3s cubic-bezier(.2,.8,.2,1) both; overflow-wrap: anywhere; }
.asst-msg--bot { align-self: flex-start; background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 6px; color: var(--ink); cursor: default; }
.asst-msg--moi { align-self: flex-end; background: var(--grad-rose); color: #fff; border-bottom-right-radius: 6px; }
.asst-msg strong { color: var(--wine); }
.asst-msg--moi strong { color: #fff; }
.asst-msg.is-typing { cursor: pointer; }
.asst-msg.is-typing::after { content: "\258D"; color: var(--rose); animation: asstCaret .8s steps(1) infinite; margin-left: 1px; }

.asst-dots { align-self: flex-start; display: flex; gap: 5px; padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: 18px; border-bottom-left-radius: 6px; }
.asst-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--rose-mid); animation: asstDots 1.1s ease-in-out infinite; }
.asst-dots i:nth-child(2) { animation-delay: .15s; }
.asst-dots i:nth-child(3) { animation-delay: .3s; }

.asst-lien {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: -2px;
  padding: 9px 14px; border-radius: 30px; background: var(--grad-wine); color: #fff !important;
  font-size: .84rem; font-weight: 600; text-decoration: none; box-shadow: 0 6px 16px rgba(94,31,48,.25);
  animation: asstBulle .35s cubic-bezier(.34,1.56,.64,1) both; transition: transform .2s;
}
.asst-lien:hover { transform: translateX(3px); }

.asst-label { align-self: flex-start; font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin: 6px 0 -2px; }
.asst-chips { display: flex; flex-direction: column; gap: 6px; align-self: stretch; }
.asst-chip {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer;
  padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: #fff;
  font: inherit; font-size: .86rem; color: var(--ink); line-height: 1.35;
  transition: border-color .18s, transform .18s, background .18s;
  animation: asstItem .35s cubic-bezier(.2,.8,.2,1) both;
}
.asst-chip:hover { border-color: var(--rose); background: var(--blush); transform: translateX(3px); }
.asst-chip .ic { color: var(--rose); display: grid; flex-shrink: 0; }
.asst-chip .fl { margin-left: auto; color: var(--muted); display: grid; }
.asst-chip--theme { font-weight: 600; }
.asst-chip--moi { border-color: var(--gold-soft); background: #fffaf2; }
.asst-chip--moi .ic { color: #b9782f; }
.asst-chip--retour { color: var(--wine-soft); font-weight: 600; border-style: dashed; }
.asst-chips .asst-chip:nth-child(2) { animation-delay: .04s; }
.asst-chips .asst-chip:nth-child(3) { animation-delay: .08s; }
.asst-chips .asst-chip:nth-child(4) { animation-delay: .12s; }
.asst-chips .asst-chip:nth-child(n+5) { animation-delay: .16s; }

.asst-input { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); background: #fff; flex-shrink: 0; }
.asst-input input {
  flex: 1; min-width: 0; height: 44px; padding: 0 16px; border-radius: 22px;
  border: 1px solid var(--line); background: var(--card); font: inherit; font-size: 16px; color: var(--ink);
}
.asst-input input:focus { outline: none; border-color: var(--rose); box-shadow: 0 0 0 3px var(--rose-pale); }
.asst-input button {
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; flex-shrink: 0;
  display: grid; place-items: center; color: #fff; background: var(--grad-rose); transition: transform .2s;
}
.asst-input button:hover { transform: scale(1.08); }
.asst-input button:disabled { opacity: .5; cursor: default; transform: none; }

/* ----------------------------------------------------------- Animations */
@keyframes asstArrive { from { transform: scale(0) rotate(-30deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes asstOpen   { from { transform: translateY(14px) scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes asstPulse  { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes asstPulseDot { 0%,100% { transform: scale(1); } 50% { transform: scale(1.25); } }
@keyframes asstItem   { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes asstBulle  { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes asstDots   { 0%,60%,100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }
@keyframes asstCaret  { 50% { opacity: 0; } }
@keyframes asstBravo  { 0% { transform: scale(0) rotate(-40deg); } 100% { transform: none; } }

/* Téléphone : la bulle remonte au-dessus de la barre du bas, le panneau
   devient une feuille presque plein écran. */
@media (max-width: 720px) {
  .asst { right: 12px; bottom: calc(var(--h-barre, 63px) + 12px); }
  .asst-fab { width: 54px; height: 54px; }
  .asst-panel {
    position: fixed; left: 8px; right: 8px; width: auto;
    bottom: calc(var(--h-barre, 63px) + 8px);
    height: min(76vh, calc(100vh - var(--h-barre, 63px) - var(--h-entete, 73px) - 16px));
    border-radius: 22px; transform-origin: bottom center;
  }
  .asst.is-open .asst-fab { opacity: 0; pointer-events: none; }
  /* Conversation de messagerie ouverte : la bulle masquerait le bouton d'envoi. */
  body:has(.msg-layout.has-thread) .asst { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .asst-fab, .asst-panel, .asst-task, .asst-chip, .asst-msg, .asst-lien, .asst-bravo-ic { animation: none !important; }
  .asst-fab.is-alert::after, .asst-dot { animation: none; }
  .asst-msg.is-typing::after { display: none; }
}

/* ============================================================================
   PROGRESSION DE BOUTIQUE (tableau de bord vendeuse)
   ============================================================================ */
.shop-progress {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: center;
  padding: 22px; margin-bottom: 22px; border-radius: var(--r-lg);
  background: linear-gradient(135deg, #fff 0%, #fdf2ee 100%); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.sp-ring { position: relative; width: 108px; height: 108px; }
.sp-ring svg { width: 108px; height: 108px; transform: rotate(-90deg); }
.sp-ring circle { fill: none; stroke-width: 9; }
.sp-ring .trk { stroke: var(--rose-pale); }
.sp-ring .val { stroke: var(--rose); stroke-linecap: round; transition: stroke-dashoffset 1.4s cubic-bezier(.2,.8,.2,1); }
.shop-progress.is-done .sp-ring .val { stroke: var(--gold); }
.sp-ring .pct { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.sp-ring .pct strong { font-family: var(--f-head); font-size: 1.7rem; color: var(--wine); line-height: 1; }
.sp-ring .pct small { font-size: .7rem; color: var(--muted); }
.sp-txt h2 { font-size: 1.25rem; margin: 0 0 4px; }
.sp-txt > p { color: var(--ink-soft); font-size: .9rem; margin: 0 0 12px; }
.sp-next {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px dashed var(--rose-light);
}
.sp-next .t { flex: 1; min-width: 180px; font-size: .88rem; }
.sp-next .t strong { display: block; color: var(--wine); }
.sp-steps { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.sp-steps span {
  display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; padding: 4px 10px; border-radius: 20px;
  background: #fff; border: 1px solid var(--line); color: var(--muted);
}
.sp-steps span.ok { background: #eef8f1; border-color: #cfe9d8; color: var(--success); }
.shop-progress.is-done { background: var(--grad-blush); border-color: var(--gold-soft); }
@media (max-width: 560px) {
  .shop-progress { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .sp-next { justify-content: center; text-align: left; }
  .sp-steps { justify-content: center; }
}

/* Tuiles de statistiques cliquables (admin) : on sait où aller. */
a.stat-tile { color: inherit; text-decoration: none; transition: transform .2s, box-shadow .2s; }
a.stat-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

/* Bandeau cookies et bulle d'assistant : sur ordinateur, le bandeau se cale à
   gauche pour libérer le coin bas-droit ; sur téléphone, la bulle attend que
   le bandeau soit refermé (elle masquait le bouton « J'ai compris »). */
@media (min-width: 721px) { .cookie-banner { right: auto; margin: 0; } }
@media (max-width: 720px) { body:has(.cookie-banner:not(.hidden)) .asst { visibility: hidden; } }

/* En-tête de l'assistante : une ligne chacun, coupés proprement sur petit
   écran plutôt que de doubler la hauteur du bandeau. */
.asst-head h2, .asst-head p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asst-head p { display: block; }
.asst-live { display: inline-block; vertical-align: middle; margin: -2px 5px 0 1px; }
@media (max-width: 400px) { .asst-head h2 { font-size: 1rem; } .asst-head { gap: 10px; padding: 14px 12px 12px; } }

/* ============================================================================
   ADMINISTRATION — pages complémentaires (includes/admin-top.php)
   ============================================================================ */
.admin-titre { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.admin-titre h1 { font-size: 1.7rem; display: flex; align-items: center; gap: 10px; margin: 0; }
.admin-titre p { margin: 4px 0 0; max-width: 640px; }
.admin-titre-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.row-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 720px) { .row-3 { grid-template-columns: minmax(0, 1fr); } }

/* Barre de filtres au-dessus d'un tableau */
.admin-filtres { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.admin-filtres .input, .admin-filtres .select { width: auto; min-width: 0; flex: 1 1 160px; }
.admin-filtres .seg { display: inline-flex; border: 1px solid var(--line); border-radius: 30px; overflow: hidden; background: #fff; flex-wrap: wrap; }
.admin-filtres .seg a { padding: 8px 14px; font-size: .84rem; color: var(--ink-soft); text-decoration: none; }
.admin-filtres .seg a.on { background: var(--grad-rose); color: #fff; }
.admin-filtres .seg a .n { opacity: .75; margin-left: 4px; }

/* Grille de commission */
.com-grille { display: grid; gap: 12px; }
.com-cat { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; }
.com-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 14px; }
.com-ligne--cat { background: var(--blush); font-weight: 600; color: var(--wine); }
.com-ligne--sub { border-top: 1px solid var(--line); padding-left: 30px; font-size: .9rem; }
.com-champ { display: inline-flex; align-items: center; gap: 6px; }
.com-champ .input { width: 120px; height: 38px; text-align: right; }
.com-pct { color: var(--muted); font-size: .9rem; }
.com-resultat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 6px; }
.com-resultat > div { padding: 14px; border-radius: 14px; background: var(--grad-blush); border: 1px solid var(--line); }
.com-resultat span { display: block; font-size: .78rem; color: var(--muted); }
.com-resultat strong { font-family: var(--f-head); font-size: 1.45rem; color: var(--wine); }
@media (max-width: 560px) { .com-resultat { grid-template-columns: minmax(0, 1fr); } .com-champ .input { width: 96px; } }

/* KPI de revenus */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 12px; margin-bottom: 20px; }
.kpi { padding: 16px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.kpi small { display: block; font-size: .76rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.kpi strong { display: block; font-family: var(--f-head); font-size: 1.7rem; color: var(--wine); margin-top: 2px; }
.kpi span { font-size: .8rem; color: var(--ink-soft); }
.kpi--or { background: var(--grad-blush); border-color: var(--gold-soft); }

/* Catégories : une carte par catégorie, ses sous-catégories dedans */
.cat-carte { border: 1px solid var(--line); border-radius: 16px; background: #fff; margin-bottom: 14px; overflow: hidden; }
.cat-carte-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; background: var(--blush); }
.cat-carte-head form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; flex: 1; }
.cat-carte-head .input { height: 38px; }
.cat-sous { padding: 10px 14px; display: grid; gap: 8px; }
.cat-sous form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cat-sous .input { height: 36px; flex: 1 1 180px; }

/* ----------------------------------------------- Scénarios de test */
.tst-progress { padding: 18px; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); margin-bottom: 18px; }
.tst-bar { height: 12px; border-radius: 8px; background: var(--rose-pale); overflow: hidden; display: flex; margin: 10px 0 8px; }
.tst-bar i { display: block; height: 100%; transition: width .8s cubic-bezier(.2,.8,.2,1); }
.tst-bar .ok { background: var(--success); }
.tst-bar .ko { background: var(--danger); }
.tst-bar .pa { background: var(--muted); }
.tst-legende { display: flex; gap: 14px; flex-wrap: wrap; font-size: .84rem; color: var(--ink-soft); }
.tst-legende b { font-size: 1rem; }
.tst-legende .l-ok b { color: var(--success); } .tst-legende .l-ko b { color: var(--danger); }
.tst-groupe { margin: 24px 0 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tst-groupe h2 { font-size: 1.2rem; margin: 0; }
.tst-groupe .hint { font-size: .82rem; }
.tst { border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 14px; background: #fff; margin-bottom: 10px; scroll-margin-top: 90px; }
.tst[data-s=ok] { border-left-color: var(--success); }
.tst[data-s=ko] { border-left-color: var(--danger); background: #fff8f9; }
.tst[data-s=passe] { border-left-color: var(--muted); }
.tst > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 14px; }
.tst > summary::-webkit-details-marker { display: none; }
.tst-id { font-size: .72rem; font-weight: 700; color: var(--muted); background: var(--blush); padding: 3px 8px; border-radius: 8px; }
.tst-titre strong { display: block; font-size: .95rem; line-height: 1.3; }
.tst-titre small { color: var(--muted); font-size: .78rem; }
.tst-etat { font-size: .74rem; font-weight: 700; padding: 4px 10px; border-radius: 20px; white-space: nowrap; background: var(--blush-deep); color: var(--wine-soft); }
.tst[data-s=ok] .tst-etat { background: #e6f4ea; color: var(--success); }
.tst[data-s=ko] .tst-etat { background: #fde8eb; color: var(--danger); }
.tst-corps { padding: 0 16px 16px; border-top: 1px dashed var(--line); }
.tst-corps ol { margin: 12px 0; padding-left: 22px; }
.tst-corps li { margin: 4px 0; font-size: .9rem; }
.tst-attendu { padding: 10px 12px; border-radius: 12px; background: #eef8f1; border: 1px solid #cfe9d8; font-size: .88rem; margin-bottom: 12px; }
.tst-attendu b { color: var(--success); }
.tst-avert { padding: 10px 12px; border-radius: 12px; background: #fff6e8; border: 1px solid var(--gold-soft); font-size: .86rem; margin-bottom: 12px; }
.tst-form { display: grid; gap: 8px; }
.tst-form textarea { min-height: 60px; }
.tst-boutons { display: flex; gap: 8px; flex-wrap: wrap; }
.tst-boutons .btn-ok { background: var(--success); color: #fff; }
.tst-boutons .btn-ko { background: var(--danger); color: #fff; }
.tst-trace { font-size: .78rem; color: var(--muted); }
.tst-prio { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--danger); margin-left: 6px; }
.chk-auto { display: grid; gap: 6px; }
.chk-auto > div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-size: .88rem; }
.chk-auto .p { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: .8rem; font-weight: 700; }
.chk-auto .p.ok { background: var(--success); } .chk-auto .p.ko { background: var(--danger); } .chk-auto .p.av { background: var(--gold); }
.chk-auto small { display: block; color: var(--muted); }

/* ------------------------------------------------- Documentation */
.doc-toc { columns: 2 220px; column-gap: 24px; padding: 16px 20px; border-radius: 16px; background: #fff; border: 1px solid var(--line); margin-bottom: 24px; }
.doc-toc a { display: block; padding: 4px 0; font-size: .9rem; break-inside: avoid; }
.doc h2 { scroll-margin-top: 90px; margin-top: 34px; padding-top: 6px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.doc h2:first-of-type { border-top: 0; margin-top: 0; }
.doc h3 { font-size: 1.05rem; margin-top: 18px; color: var(--wine); }
.doc .astuce { padding: 12px 14px; border-radius: 12px; background: var(--grad-blush); border: 1px solid var(--rose-light); font-size: .9rem; margin: 12px 0; }
.doc .attention { padding: 12px 14px; border-radius: 12px; background: #fff6e8; border: 1px solid var(--gold-soft); font-size: .9rem; margin: 12px 0; }
.doc table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: .9rem; }
.doc th, .doc td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc th { color: var(--wine); background: var(--blush); }
.cat-sous-ligne { display: flex; gap: 8px; align-items: center; }
.cat-sous-ligne > form:first-child { flex: 1; }

/* Encadrés (.alert) : mise en page de paragraphe, et non plus flexible. En
   flex, chaque morceau de texte et chaque <strong> devenait un bloc à part :
   dès qu'une phrase était longue, un mot en gras partait seul à la ligne
   (« paiement intégré » isolé au milieu de l'encadré). L'icône reste calée
   sur la première ligne. */
.alert { display: block; }
.alert > svg.ico:first-child { vertical-align: -3px; margin-right: 6px; flex-shrink: 0; }
.alert form[style*="inline"] { vertical-align: middle; }

/* Grilles de cartes : minmax(0, 1fr) et non 1fr. Une colonne « 1fr » garde
   pour minimum la largeur de son contenu : un tableau dans .cards-2 (Admin ›
   Revenus) poussait la page à 1 284px de large sur un téléphone. */
.cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .cards-4, .cards-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .cards-4, .cards-3, .cards-2 { grid-template-columns: minmax(0, 1fr); } }
.cards-2 > *, .cards-3 > *, .cards-4 > * { min-width: 0; }
.doc th, .doc td { overflow-wrap: anywhere; }
@media (max-width: 400px) { .doc th, .doc td { padding: 6px 5px; font-size: .82rem; } }

/* Bandeau de protection des coordonnées, en tête de conversation */
.chat-protect {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex-shrink: 0;
  padding: 8px 16px; font-size: .8rem; line-height: 1.4; color: var(--wine);
  background: var(--rose-pale); border-bottom: 1px solid var(--rose-light);
}
.chat-protect > span { flex: 1 1 200px; min-width: 0; }
.chat-protect .btn { padding: 5px 12px; font-size: .78rem; }
.chat-protect.is-libre { color: #37784e; background: rgba(79,157,105,.1); border-bottom-color: rgba(79,157,105,.25); }

/* Paiement en ligne — espace vendeuse (paiements.php) */
.pay-activer {
  display: flex; gap: 18px; align-items: flex-start; padding: 24px; margin-bottom: 18px;
  background: var(--grad-blush); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}
.pay-activer h2 { font-size: 1.35rem; margin-bottom: 6px; }
.pay-activer p { color: var(--ink-soft); margin-bottom: 10px; }
.pay-activer-ic {
  flex-shrink: 0; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: var(--grad-wine); color: #fff;
}
.pay-points { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 6px; font-size: .92rem; }
.pay-points li { display: flex; gap: 8px; align-items: center; }
.pay-points svg { color: var(--success); flex-shrink: 0; }
@media (max-width: 560px) { .pay-activer { flex-direction: column; padding: 18px; } }

/* Commandes : montant à saisir à l'acceptation, signalement d'un problème */
.accept-form { display: inline-flex; flex-wrap: wrap; align-items: flex-end; gap: 6px; }
details.probleme > summary { list-style: none; cursor: pointer; }
details.probleme > summary::-webkit-details-marker { display: none; }
details.probleme[open] { flex-basis: 100%; }
details.probleme .textarea { width: 100%; max-width: 280px; }

/* Notifications sur le téléphone (includes/push-carte.php) */
.push-carte {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 18px; margin-bottom: 18px;
  background: var(--card); border: 1px dashed var(--rose-light); border-radius: var(--r);
}
.push-carte[hidden] { display: none; }
.push-carte-ic {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: var(--rose-pale); color: var(--wine);
}
.push-carte-txt { flex: 1 1 220px; min-width: 0; font-size: .9rem; color: var(--ink-soft); }
.push-carte-txt strong { display: block; color: var(--wine); font-size: .98rem; }
.push-carte.is-on { border-style: solid; border-color: rgba(79,157,105,.35); background: rgba(79,157,105,.06); }
.push-carte.is-on .push-carte-ic { background: rgba(79,157,105,.15); color: var(--success); }

/* Avis « achat vérifié » et délai de réponse */
.badge-verifie {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px;
  font-size: .72rem; font-weight: 600; color: #37784e; background: rgba(79,157,105,.12);
}
.delai-reponse { display: inline-flex; align-items: center; gap: 5px; font-size: .85rem; color: var(--ink-soft); }
.delai-reponse svg { color: var(--success); }

/* ------------------------------------------------ Administration, grand écran
   L'administration est un outil de travail : sur ordinateur, elle prend toute
   la largeur (jusqu'à 1760 px) et range ses blocs sur deux colonnes au lieu de
   les empiler. Sur tablette et téléphone, rien ne change : une colonne. */
.page-admin .container { max-width: 1760px; }
@media (min-width: 961px) {
  /* Marge de chaque côté qui grandit avec l'écran (≈ 30 px sur un portable,
     56 px sur un grand écran) : le contenu ne touche jamais les bords. */
  .page-admin .container {
    padding-left: max(clamp(28px, 3vw, 56px), env(safe-area-inset-left));
    padding-right: max(clamp(28px, 3vw, 56px), env(safe-area-inset-right));
  }
}
.admin-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.admin-grille > * { min-width: 0; margin: 0 !important; }   /* l'écart vient de la grille */
@media (min-width: 1400px) {
  /* Compteurs : tous sur une ligne dès qu'il y a la place (8 au tableau de bord). */
  .page-admin .stat-row { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
}
@media (min-width: 1400px) {
  .admin-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; }
  .admin-grille > .pleine { grid-column: 1 / -1; }
  /* Blocs de hauteurs très différentes (Outils, Catégories) : deux colonnes qui
     se remplissent l'une après l'autre, sans trou sous les blocs courts. */
  .admin-colonnes { column-count: 2; column-gap: 24px; }
  .admin-colonnes > * { break-inside: avoid; margin: 0 0 24px !important; }
  /* Scénarios de test : contrôles automatiques sur trois colonnes, parcours sur deux. */
  .page-admin .chk-auto { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tst-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; align-items: start; }
  .tst-liste > .tst { margin: 0; }
}

/* --------------------------------------------- Menu latéral : barre de défilement
   La colonne de gauche (tableau de bord vendeuse et administration) reste collée
   sous l'en-tête. Plus haute que l'écran, son bas devenait inaccessible : sur
   ordinateur, elle défile désormais dans son propre cadre, avec une barre fine
   aux couleurs du site. Sous 960 px, le menu replié n'est pas concerné. */
@media (min-width: 961px) {
  .dash-side {
    top: calc(var(--h-entete, 73px) + 16px);
    max-height: calc(100vh - var(--h-entete, 73px) - 32px);
    overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: var(--rose-light) transparent;
  }
  .dash-side::-webkit-scrollbar { width: 8px; }
  .dash-side::-webkit-scrollbar-track { background: transparent; margin: 14px 0; }
  .dash-side::-webkit-scrollbar-thumb { background: var(--rose-light); border-radius: 8px; }
  .dash-side::-webkit-scrollbar-thumb:hover { background: var(--rose); }
}

/* ------------------------------------------------ Présence (en ligne)
   Pastille verte : la membre a ouvert une page il y a moins de 5 minutes. */
.presence { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #d8c9cd; flex-shrink: 0; }
.presence.on { background: var(--success); box-shadow: 0 0 0 3px rgba(79,157,105,.18); }
.avatar-presence { position: relative; display: inline-flex; flex-shrink: 0; }
.avatar-presence .presence { position: absolute; right: 0; bottom: 0; width: 11px; height: 11px; border: 2px solid #fff; box-shadow: none; }

/* ------------------------------------------------ Bandeaux haut de page */
.bandeau-site { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; padding: 8px 16px;
  background: var(--grad-rose); color: #fff; font-size: .86rem; text-align: center; }
.bandeau-site a { color: #fff; text-decoration: underline; font-weight: 600; margin-left: 4px; }
.bandeau-maintenance { background: #8a5a1e; }

/* ------------------------------------------------ Page de maintenance */
.page-maintenance { background: var(--grad-blush); min-height: 100vh; }
.maint { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; }
.maint-carte { max-width: 520px; width: 100%; background: #fff; border-radius: 24px; padding: 40px 28px; text-align: center; box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
.maint-logo { width: 180px; max-width: 70%; margin: 0 auto 10px; }
.maint-carte h1 { font-size: 1.7rem; color: var(--wine); margin: 6px 0 12px; }
.maint-carte p { color: var(--ink-soft); }
.maint-retour { display: inline-flex; align-items: center; gap: 6px; background: var(--rose-pale); color: var(--wine); padding: 6px 14px; border-radius: 999px; font-size: .9rem; }
.maint-equipe { margin-top: 26px; font-size: .78rem; }
.maint-equipe a { color: var(--muted); }

/* ------------------------------------------------ Support : membre et équipe */
.sup-liste { display: grid; gap: 10px; }
.sup-ligne { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: 16px; color: var(--ink); text-decoration: none; }
.sup-ligne:hover { border-color: var(--rose); }
.sup-ligne.sup-nouveau { border-color: var(--rose); box-shadow: 0 0 0 3px rgba(184,85,111,.08); }
.sup-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--grad-blush); color: var(--wine); flex-shrink: 0; }
.sup-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sup-txt strong { color: var(--wine); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sup-st-nouveau { background: #fdf0dd; color: #a5762a; }
.sup-st-en_cours { background: var(--rose-pale); color: var(--wine); }
.sup-st-attente { background: rgba(79,157,105,.13); color: #37784e; }
.sup-st-resolu { background: #eee6e8; color: var(--ink-soft); }
.fil { display: grid; gap: 12px; }
.fil-msg { padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: #fff; max-width: 88%; }
.fil-qui { font-size: .8rem; font-weight: 600; color: var(--wine); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fil-corps { font-size: .93rem; line-height: 1.6; overflow-wrap: anywhere; }
.fil-equipe { background: var(--rose-pale); border-color: var(--rose-light); justify-self: start; }
.fil-moi, .fil-membre { justify-self: end; }
.page-admin .fil-membre { justify-self: start; background: #fff; }
.page-admin .fil-equipe { justify-self: end; }
.fil-note { background: #fff8e8; border: 1px dashed var(--gold); justify-self: stretch; max-width: none; }
#repondre.mode-note { background: #fff8e8; border: 1px dashed var(--gold); }
.ticket-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
@media (min-width: 1100px) { .ticket-grille { grid-template-columns: minmax(0, 1fr) 340px; } .ticket-cote { position: sticky; top: calc(var(--h-entete, 73px) + 16px); } }
.mini-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mini-liste li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .88rem; flex-wrap: wrap; }
.mini-liste li:last-child { border-bottom: 0; }
.ligne-cliquable { cursor: pointer; }

/* ------------------------------------------------ Fiche membre */
.fiche-dl { display: grid; grid-template-columns: minmax(120px, 38%) minmax(0, 1fr); gap: 8px 14px; margin: 0; font-size: .9rem; }
.fiche-dl dt { color: var(--muted); }
.fiche-dl dd { margin: 0; overflow-wrap: anywhere; }
.actions-membre { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.sep-doux { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }
.note-membre { padding: 10px 12px; background: #fff8e8; border-left: 3px solid var(--gold); border-radius: 8px; margin-top: 8px; font-size: .9rem; }

/* ------------------------------------------------ Filtres des membres */
.filtres-avances { margin-bottom: 16px; }
.filtres-avances summary { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; color: var(--wine); font-weight: 600; font-size: .9rem; padding: 4px 0; }
.filtres-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 10px 14px; margin-top: 10px; padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.filtres-grille label { display: flex; flex-direction: column; gap: 4px; font-size: .78rem; color: var(--muted); font-weight: 600; }
.filtres-grille .select, .filtres-grille .input { padding: 8px 10px; font-size: .88rem; }
.ligne-suspendue td { opacity: .6; }
.tableau-defile { overflow-x: auto; }
.admin-filtres .seg a { display: inline-flex; align-items: center; gap: 4px; }

/* ------------------------------------------------ Statistiques */
.stats-titre { font-size: 1.2rem; color: var(--wine); display: flex; align-items: center; gap: 8px; margin: 8px 0 12px; }
a.kpi { color: inherit; text-decoration: none; }
a.kpi:hover { border-color: var(--rose); }
.kpi small { display: flex; align-items: center; gap: 6px; }
.evo { font-weight: 600; color: var(--muted); }
.evo-plus { color: #37784e; }
.evo-moins { color: #b23e50; }
.seg-mini { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: #fff; }
.seg-mini a { padding: 6px 12px; font-size: .8rem; color: var(--ink-soft); text-decoration: none; }
.seg-mini a.on { background: var(--grad-rose); color: #fff; }
.vchart { display: flex; align-items: stretch; gap: 3px; height: 190px; }
.vcol { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.vbar { width: 100%; max-width: 38px; border-radius: 5px 5px 0 0; }
.vval { font-size: .68rem; color: var(--muted); margin-bottom: 2px; }
.vlab { font-size: .66rem; color: var(--muted); margin-top: 4px; white-space: nowrap; height: 14px; overflow: visible; }
.en-ligne-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.en-ligne-pers { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; background: #fff; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--ink); font-size: .84rem; }
.en-ligne-pers img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.en-ligne-pers > span:last-child { display: flex; flex-direction: column; line-height: 1.2; }
.entonnoir { display: grid; gap: 10px; }
.ent-ligne { display: grid; grid-template-columns: minmax(130px, 220px) minmax(0, 1fr) 90px; gap: 12px; align-items: center; font-size: .9rem; }
.ent-barre { height: 14px; background: var(--rose-pale); border-radius: 999px; overflow: hidden; }
.ent-barre span { display: block; height: 100%; background: var(--grad-rose); border-radius: 999px; }
.ent-val { text-align: right; }
@media (max-width: 600px) { .ent-ligne { grid-template-columns: minmax(0, 1fr) 70px; } .ent-barre { grid-column: 1 / -1; grid-row: 2; } }

/* ------------------------------------------------ Réglages et pré-inscription */
.seg-radio { display: flex; flex-wrap: wrap; gap: 6px; }
.seg-radio label { cursor: pointer; position: relative; }
.seg-radio input { position: absolute; opacity: 0; pointer-events: none; }
.seg-radio span { display: inline-block; padding: 8px 14px; border: 1.5px solid var(--line); border-radius: 999px; font-size: .86rem; background: #fff; color: var(--ink-soft); }
.seg-radio input:checked + span { background: var(--grad-rose); color: #fff; border-color: transparent; }
.seg-radio input:focus-visible + span { outline: 3px solid var(--rose); outline-offset: 1px; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.chip-check { cursor: pointer; position: relative; }
.chip-check input { position: absolute; opacity: 0; pointer-events: none; }
.chip-check span { display: inline-block; padding: 7px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; font-size: .86rem; color: var(--ink-soft); }
.chip-check input:checked + span { background: var(--grad-rose); color: #fff; border-color: transparent; }
.chip-check input:focus-visible + span { outline: 3px solid var(--rose); outline-offset: 1px; }
.pre-st-attente { background: #fdf0dd; color: #a5762a; }
.pre-st-invitee { background: var(--rose-pale); color: var(--wine); }
.pre-st-inscrite { background: rgba(79,157,105,.13); color: #37784e; }

/* Admin › Outils : journal des erreurs */
.erreurs-liste { display: grid; gap: 6px; max-height: 320px; overflow: auto; }
.erreurs-liste code { display: block; white-space: pre-wrap; word-break: break-word; font-size: .78rem; line-height: 1.45; background: var(--blush); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }

/* Admin › Outils : bilan du nom de domaine */
.domaine-bilan { list-style: none; padding: 0; display: grid; gap: 6px; font-size: .86rem; }
.domaine-bilan li { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; line-height: 1.45; }
.domaine-bilan li svg { flex: none; margin-top: 2px; }
.domaine-bilan li.ok { background: #e7f3ea; color: #2f6b43; }
.domaine-bilan li.ko { background: #fbe6e9; color: #8a2f3e; }