@import url('barre.css');
@import url('menu.css');
/* ============================================================
   TROKIN PRO — V1 (fidèle aux maquettes CEO, juillet 2026)
   ============================================================ */

:root {
  --bg: #FAF5EF;
  --surface: #FFFFFF;
  --line: #ECE7DA;
  --line-soft: #F1EDE2;

  --teal-950: #043032;
  --teal-800: #074F53;
  --teal-700: #086166;
  --teal-600: #0A787D;
  --teal-500: #259393;

  --orange: #F05A15;
  --orange-dark: #CF4A0D;
  --orange-soft: #FDEBE3;

  --green: #23A05F;
  --green-soft: #E2F4E8;

  --pill-teal-bg: #DEF1F2;
  --pill-teal-tx: #096B6F;
  --pill-purple-bg: #EFE9FB;
  --pill-purple-tx: #6D4FC1;
  --pill-orange-bg: #FCE8DE;
  --pill-orange-tx: #C9480D;

  --chat-me: #DFF3E2;

  --text: #22302E;
  --muted: #8A9296;

  /* Rose Solia — relevé sur l'affiche officielle « Indépendante, mais jamais seule ». */
  --solia-rose: #C2406F;

  --radius: 16px;
  --radius-sm: 12px;
  --shadow: 0 1px 3px rgba(34, 48, 46, 0.05), 0 6px 18px rgba(34, 48, 46, 0.04);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-font-smoothing: antialiased; }

body {
  font-family: 'Plus Jakarta Sans', 'Segoe UI', -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}
/* Place pour la barre du bas — réservée seulement là où la barre existe. */
@media (max-width: 900px) { body { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; font-size: inherit; color: inherit; }
input, select, textarea {
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
}

.ic { width: 18px; height: 18px; flex: none; }

/* ---------- Logo ---------- */

/* Verrou logo. Les proportions sont relevées sur la charte officielle :
   corps du mot = 0,94 × diamètre du symbole, espacement = 0,24 × diamètre.
   Une seule variable --mark pilote l'ensemble. */
.logo {
  --mark: 32px;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--mark) * 0.24);
}
.logo svg.mark { width: var(--mark); height: var(--mark); display: block; }
.logo .word {
  font-family: 'Figtree', 'Plus Jakarta Sans', sans-serif;
  font-size: calc(var(--mark) * 0.94);
  font-weight: 700;
  color: var(--teal-600);
  letter-spacing: 0;
  line-height: 1;
}
.logo .pro {
  background: var(--teal-950);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 3px 8px;
  border-radius: 7px;
}
.logo .pro.orange { background: var(--orange); }

/* ---------- Boutons & pills ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  border-radius: 12px;
  padding: 11px 20px;
  transition: filter .15s, background .15s;
}
.btn:hover { filter: brightness(1.06); }
.btn-primary { background: var(--teal-800); color: #fff; }
.btn-orange { background: var(--orange); color: #fff; }
.btn-ghost { background: transparent; border: 1.5px solid var(--line); color: var(--text); }
.btn-ghost:hover { background: #fff; }
.btn-block { width: 100%; }
.btn-sm { padding: 8px 14px; font-size: 13px; border-radius: 10px; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 99px;
}
.pill-teal   { background: var(--pill-teal-bg);   color: var(--pill-teal-tx); }
.pill-purple { background: var(--pill-purple-bg); color: var(--pill-purple-tx); }
.pill-orange { background: var(--pill-orange-bg); color: var(--pill-orange-tx); }
.pill-green  { background: var(--green-soft);     color: var(--green); }
.pill-cream  { background: var(--line-soft);      color: var(--muted); }

.badge-count {
  background: var(--orange);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  min-width: 17px;
  height: 17px;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
.badge-count.green { background: var(--green); }

.verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--green);
  font-size: 11.5px;
  font-weight: 700;
}
.verified .ic { width: 13px; height: 13px; }

/* ---------- Topbar ---------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 28px;
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 50;
}
.topbar .searchwrap {
  flex: 1;
  max-width: 640px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 10px 18px;
  color: var(--muted);
}
.topbar .searchwrap input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
}
.topbar .spacer { flex: 1; }
.topbar .bell {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 99px;
  background: var(--surface);
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
}
.topbar .bell .badge-count {
  position: absolute;
  top: -4px;
  right: -4px;
}

/* ---------- Layout général ---------- */

/* `minmax(0, 1fr)` et non `1fr` : une colonne en `1fr` vaut `minmax(auto, 1fr)` et
   s'élargit au min-content de son contenu au lieu de le contraindre. Un seul bloc
   incompressible étirait alors la page entière hors de l'écran — voir ADR-0009. */
.shell {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: 22px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 28px;
  align-items: start;
}

.content-3col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 296px;
  gap: 22px;
  align-items: start;
}

/* ---------- Sidebar ---------- */

.sidebar { display: flex; flex-direction: column; gap: 16px; }

.profile-card {
  display: flex;
  align-items: center;
  gap: 12px;
}
.avatar {
  width: 46px;
  height: 46px;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  flex: none;
  background: linear-gradient(135deg, #B0703C, #7A4A26);
}
.avatar.sq { border-radius: 12px; font-size: 9px; letter-spacing: .3px; text-align: center; line-height: 1.15; }
.profile-card .name { font-weight: 800; font-size: 14.5px; }
.profile-card .role { color: var(--muted); font-size: 12px; }

.side-nav {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
  box-shadow: var(--shadow);
}
.side-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  font-weight: 600;
  color: #4A5553;
  margin-bottom: 2px;
}
.side-nav a .ic { color: #7B8683; }
.side-nav a:hover { background: var(--line-soft); }
.side-nav a.active {
  background: var(--orange-soft);
  color: var(--orange);
  font-weight: 800;
}
.side-nav a.active .ic { color: var(--orange); }
.side-nav a .right { margin-left: auto; }

/* Reprend la sidebar là où elle n'existe pas : dans la carte « Mon compte » du profil.
   Sans encadré propre, puisqu'elle est déjà dans une carte. */
.mon-espace {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 6px 0 0;
  margin-top: 12px;
  border-top: 1px solid var(--line-soft);
}
.mon-espace a { padding: 12px; min-height: 44px; }
.tag-new {
  margin-left: auto;
  background: var(--orange);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .5px;
  padding: 2px 7px;
  border-radius: 99px;
}

.impact-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}
.impact-card .head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 13px;
  margin-bottom: 12px;
}
.impact-card .head .ic { color: var(--teal-600); width: 15px; height: 15px; }
.impact-stat { padding: 7px 0; border-bottom: 1px solid var(--line-soft); }
.impact-stat:last-of-type { border-bottom: none; margin-bottom: 10px; }
.impact-stat .val { font-size: 19px; font-weight: 800; color: var(--teal-800); }
.impact-stat .lbl { font-size: 11.5px; color: var(--muted); }

.boost-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.boost-card .title { font-weight: 800; font-size: 13.5px; margin-bottom: 4px; }
.boost-card p { color: var(--muted); font-size: 12px; margin-bottom: 12px; }
.boost-card .rocket { position: absolute; right: 10px; bottom: 8px; font-size: 30px; }

/* ---------- Tabs catégories ---------- */

.cat-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.cat-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 8px 16px;
  font-weight: 700;
  font-size: 13px;
  color: #4A5553;
}
.cat-tabs button .ic { width: 15px; height: 15px; color: #7B8683; }
.cat-tabs button.active {
  background: var(--teal-800);
  border-color: var(--teal-800);
  color: #fff;
}
.cat-tabs button.active .ic { color: #fff; }

/* ---------- Chips types d'échange ---------- */

.xchips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
.xchips button {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 9px;
}
.xchips button .ic { width: 16px; height: 16px; color: var(--teal-600); }
.xchips button .t { font-weight: 800; font-size: 12px; display: block; }
.xchips button .s { font-size: 10px; color: var(--muted); display: block; }
.xchips button.active { border: 2px solid var(--teal-800); }

/* Ouvre les filtres là où le rail est masqué. Au-dessus de 1180 px la carte est
   visible dans le rail : le bouton n'a plus de raison d'être. */
.btn-filtres {
  display: none;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  margin-bottom: 12px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 99px;
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
  box-shadow: var(--shadow);
}
.btn-filtres .ic { width: 17px; height: 17px; color: var(--teal-600); flex: none; }
@media (max-width: 1180px) { .btn-filtres { display: flex; } }

/* ---------- Cartes génériques ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 22px 0 12px;
}
.section-head h2 { font-size: 15.5px; font-weight: 800; }
.section-head a { color: var(--teal-600); font-weight: 700; font-size: 12.5px; }

/* ---------- Annonce vedette ---------- */

.feature-card { padding: 22px; }
.feature-card .toprow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.feature-card .kicker {
  background: var(--orange);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .8px;
  padding: 4px 9px;
  border-radius: 7px;
}
.feature-card .toprow .right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.feature-card .bookmark { color: var(--muted); }
.feature-card h1 { font-size: 21px; font-weight: 800; margin-bottom: 10px; }
.feature-card .pills { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }

.feature-body { display: flex; gap: 18px; margin-bottom: 16px; }
.ph {
  border-radius: var(--radius-sm);
  background:
    radial-gradient(120% 120% at 20% 15%, #3E5760 0%, #22343C 45%, #131F26 100%);
  color: #C8D4D2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.ph .ic { width: 34px; height: 34px; opacity: .85; }
.feature-body .ph { width: 220px; height: 148px; }
.feature-body p { color: #56605E; font-size: 13.5px; }

.meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
  padding: 14px 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 16px;
}
.meta-item { display: flex; gap: 9px; align-items: flex-start; }
/* Une information qui se raconte en une phrase — la contrepartie attendue par
   un pro — prend la largeur : dans une demi-colonne, elle tombait en huit
   lignes contre le bord. */
.meta-item.large { grid-column: 1 / -1; }
.meta-item .ic { color: var(--teal-600); width: 16px; height: 16px; margin-top: 2px; }
.meta-item .k { font-size: 11px; color: var(--muted); }
.meta-item .v { font-weight: 700; font-size: 13px; }

.feature-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.feature-foot .count { display: flex; align-items: center; gap: 8px; color: #56605E; font-weight: 600; font-size: 13px; }
.feature-foot .count .ic { color: var(--teal-600); }

/* ---------- Propositions récentes ---------- */

.prop-list { padding: 6px 0; }
.prop-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line-soft);
}
.prop-row:last-child { border-bottom: none; }
.prop-row .who { flex: 1; min-width: 0; }
.prop-row .who .name { font-weight: 800; font-size: 13.5px; display: flex; align-items: center; gap: 8px; }
.prop-row .who .sub { color: var(--muted); font-size: 12px; }
.prop-row .who .desc { font-size: 12.5px; color: #56605E; margin-top: 3px; }
.prop-row .terms { text-align: right; flex: none; }
.prop-row .terms .price { font-weight: 800; font-size: 14px; }
.prop-row .terms .kins { color: var(--muted); font-size: 11.5px; }
.prop-row .terms .dispo { color: var(--green); font-size: 11.5px; font-weight: 700; }
.prop-row .fav { color: var(--muted); }
.prop-row .fav:hover { color: var(--orange); }
.prop-more { padding: 12px 20px 16px; }

/* ---------- Opportunités ---------- */

.opp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.opp-card { overflow: hidden; display: flex; flex-direction: column; }
.opp-card .ph { width: 100%; height: 92px; border-radius: 0; }
.opp-card .body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.opp-card .name { font-weight: 800; font-size: 13px; }
.opp-card .loc { color: var(--muted); font-size: 11px; }
.opp-card .desc { font-size: 11.5px; color: #56605E; flex: 1; }
.opp-card .xbox {
  background: var(--line-soft);
  border-radius: 8px;
  padding: 7px 9px;
  font-size: 10.5px;
  color: #56605E;
}
.opp-card .xbox b { display: block; color: var(--text); font-size: 10.5px; }
.opp-card .btn { margin-top: 4px; }

/* ---------- Rail droit : filtres ---------- */

.rail { display: flex; flex-direction: column; gap: 16px; }

.filter-card { overflow: hidden; }
.filter-card .fhead {
  background: var(--teal-800);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  font-weight: 800;
  font-size: 14px;
}
.filter-card .fbody { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 14px; }
.field label { display: block; font-size: 11.5px; font-weight: 800; color: #4A5553; margin-bottom: 6px; }
.field .control {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 12px;
  background: #fff;
  color: var(--text);
}
.field .control .ic { color: var(--teal-600); width: 15px; height: 15px; }
.field select, .field .control input {
  border: none;
  outline: none;
  background: transparent;
  flex: 1;
  font-weight: 600;
  appearance: none;
  -webkit-appearance: none;
}
.field .control .chev { color: var(--muted); width: 14px; height: 14px; }
.range-line { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; color: var(--muted); margin-bottom: 4px; }
input[type="range"] { width: 100%; accent-color: var(--teal-700); }
.filter-reset { text-align: center; color: var(--muted); font-weight: 700; font-size: 12.5px; }
.filter-reset:hover { color: var(--text); }

.rail .list-card { padding: 16px 18px; }
.rail .list-card .head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 800;
  font-size: 13.5px;
  margin-bottom: 12px;
}
.rail .list-card .head a { color: var(--teal-600); font-size: 12px; }
.fav-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.fav-row:last-child { border-bottom: none; }
.fav-row .avatar { width: 34px; height: 34px; font-size: 8px; }
.fav-row .n { font-weight: 800; font-size: 12.5px; }
.fav-row .s { color: var(--muted); font-size: 11px; }
.fav-row .heart { margin-left: auto; color: #E85D75; }

.trend-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
  font-weight: 700;
  font-size: 12.5px;
}
.trend-row:last-of-type { border-bottom: none; margin-bottom: 10px; }
.trend-row .up { color: var(--green); font-weight: 800; }

.tip-card { padding: 16px 18px; background: var(--surface); }
.tip-card .head { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 13px; margin-bottom: 6px; }
.tip-card .head .ic { color: var(--orange); width: 15px; height: 15px; }
.tip-card p { color: var(--muted); font-size: 12px; margin-bottom: 8px; }
.tip-card a { color: var(--teal-600); font-weight: 800; font-size: 12.5px; }

/* ---------- Menu du téléphone ----------
   La sidebar disparaît sous 900 px ; ce panneau la remplace, ouvert par l'avatar de
   la barre haute. Il existe sur toutes les pages parce qu'il vit dans le shell
   commun — c'est ce qui manquait au bloc « Mon espace », cantonné au profil. */

.avatar-menu { display: inline-flex; align-items: center; gap: 3px; }
.avatar-menu .chev { width: 14px; height: 14px; color: var(--muted); flex: none; }
@media (min-width: 901px) { .avatar-menu .chev { display: none; } }

/* ---------- Bottom nav ---------- */


/* ============================================================
   MESSAGES
   ============================================================ */

.msg-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow);
  height: calc(100vh - 190px);
  min-height: 560px;
}

.conv-col { border-right: 1px solid var(--line-soft); display: flex; flex-direction: column; min-height: 0; }
.conv-col .chead { padding: 14px 16px 10px; }
.conv-col .chead .row1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 800;
  font-size: 13.5px;
  margin-bottom: 10px;
}
.conv-col .tabs { display: flex; gap: 6px; }
.conv-col .tabs button {
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 5px 13px;
  font-size: 12px;
  font-weight: 700;
  color: #4A5553;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.conv-col .tabs button.active { background: var(--teal-800); color: #fff; border-color: var(--teal-800); }
.conv-col .tabs .mini {
  background: var(--line-soft);
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  border-radius: 99px;
  padding: 0 6px;
}
.conv-list { overflow-y: auto; flex: 1; }
.conv-item {
  display: flex;
  gap: 11px;
  padding: 12px 16px;
  cursor: pointer;
  border-left: 3px solid transparent;
}
.conv-item:hover { background: var(--line-soft); }
.conv-item.active { background: #F2F8F4; border-left-color: var(--green); }
.conv-item .avatar { width: 40px; height: 40px; }
.conv-item .mid { flex: 1; min-width: 0; }
/* Le nom, et ce qui le qualifie — le badge d'une activité, le compte de membres
   d'un groupe. En ligne posée plutôt qu'en texte suivi : le badge se collait au
   nom, faute de gouttière, et sur un nom long il lui passait dessus. */
.conv-item .n { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 13px; }
.conv-item .n .nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-item .p {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.conv-item .side { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; }
.conv-item .time { color: var(--muted); font-size: 10.5px; }

.chat-col { display: flex; flex-direction: column; min-height: 0; }
/* Retour à la liste des conversations : n'existe que sur les formats à une colonne,
   où la liste et le fil ne sont pas visibles en même temps. */
.chat-retour {
  display: none; place-items: center;
  width: 36px; height: 36px; flex: none; margin-right: -4px;
  border-radius: 99px; background: var(--bg); color: var(--text);
}
.chat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.chat-head .n { font-weight: 800; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.chat-head .s { color: var(--muted); font-size: 12px; }
.chat-head .more { margin-left: auto; color: var(--muted); }

.chat-context {
  margin: 14px 18px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px;
  display: flex;
  gap: 12px;
  align-items: center;
  background: #FCFBF7;
}
.chat-context .ph { width: 92px; height: 64px; }
.chat-context .ph .ic { width: 22px; height: 22px; }
.chat-context .t { font-weight: 800; font-size: 13.5px; margin-bottom: 5px; }
.chat-context .pills { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 5px; }
.chat-context .dates { color: var(--muted); font-size: 11.5px; }
.chat-context .btn { margin-left: auto; flex: none; }

.chat-scroll { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.day-divider {
  align-self: center;
  background: var(--line-soft);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 99px;
  padding: 3px 12px;
  margin: 6px 0;
}
.bubble {
  max-width: 62%;
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 13px;
  position: relative;
  box-shadow: 0 1px 2px rgba(34,48,46,.05);
}
.bubble .stamp {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  font-size: 10px;
  color: var(--muted);
  margin-top: 4px;
  align-items: center;
}
.bubble .stamp .ic { width: 12px; height: 12px; color: var(--teal-600); }
.bubble.them { align-self: flex-start; background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.bubble.me { align-self: flex-end; background: var(--chat-me); border-bottom-right-radius: 4px; }
.bubble ul { padding-left: 18px; margin: 4px 0; }
.bubble .photos { display: flex; gap: 6px; margin-top: 2px; }
.bubble .photos .ph { width: 84px; height: 62px; border-radius: 8px; }
.bubble .photos .ph .ic { width: 20px; height: 20px; }
.bubble .linkcard {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 12px;
  margin-top: 6px;
}
.bubble .linkcard .ic { color: var(--teal-600); }
.bubble .linkcard .k { font-size: 11px; color: var(--muted); }
.bubble .linkcard .v { font-weight: 700; font-size: 12.5px; color: var(--teal-700); }

.chat-input {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid var(--line-soft);
}
.chat-input .clip { color: var(--muted); }
.chat-input input {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 11px 18px;
  outline: none;
  background: #FCFBF7;
}
.chat-input .send {
  width: 42px;
  height: 42px;
  border-radius: 99px;
  background: var(--teal-800);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: #4A5553;
  margin-bottom: 12px;
}

/* ============================================================
   WIZARDS (inscription / publier)
   ============================================================ */

.wizard-page {
  min-height: calc(100vh - 96px);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 16px 40px;
}
.wizard-logo { margin-bottom: 22px; }

/* Sur un écran d'ordinateur, la carte de compte reste seule au milieu d'une
   page vide : collée en haut, elle laissait un désert sous elle. On la pose au
   centre. `min-height` n'est pas une hauteur : dès que le parcours s'allonge —
   l'inscription compte plus d'étapes que la connexion — la page grandit et le
   centrage cesse de s'appliquer, rien n'est jamais coupé en haut. */
@media (min-width: 901px) {
  .wizard-page { min-height: 100vh; justify-content: center; padding: 40px 16px; }
}

.wstep { display: none; width: 100%; max-width: 460px; }
.wstep.active { display: block; }

.wcard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 26px;
}
.wcard h1 { font-size: 19px; font-weight: 800; text-align: center; margin-bottom: 6px; }
.wcard .sub { text-align: center; color: var(--muted); font-size: 13px; margin-bottom: 20px; }

/* L'attribut `hidden` ne pose qu'un `display: none` d'agent utilisateur, que la
   moindre règle de mise en page écrase. Le piège s'est refermé trois fois — les
   centres d'intérêt du particulier dans le parcours pro, une pastille annonçant
   « 0 » message, une liste qui restait sous la carte. La règle vaut donc pour
   tout le site : `hidden` cache, sans discussion. Ce qui doit rester visible en
   étant marqué `hidden` n'existe pas ; ce qui doit s'animer avant de disparaître
   utilise une classe, comme les voiles. */
[hidden] { display: none !important; }

/* ---------- La communauté Solia, en tête des groupes ----------
   Aux couleurs de la marque, et non à celles du site : c'est ce qui la fait
   reconnaître d'un coup d'œil au milieu des groupes de quartier. */
.grp-solia {
  background: linear-gradient(160deg, #F1ECFD, #FCE7F3);
  border: 1px solid #E3D9F8;
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 22px;
}
.grp-solia .tete { display: flex; align-items: center; gap: 9px; }
.grp-solia .coeur { width: 20px; height: 20px; flex: none; color: var(--solia-rose); }
.grp-solia .nom {
  font-size: 17px; font-weight: 800; letter-spacing: -.02em;
  color: #3E2FBB; text-decoration: none;
}
.grp-solia .quoi { margin-top: 8px; font-size: 13px; line-height: 1.45; color: #5B5580; }
.grp-solia .pied { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.grp-solia .dedans {
  font-size: 11.5px; font-weight: 700; color: #7A4C86;
  background: rgba(255, 255, 255, .7); padding: 4px 9px; border-radius: 99px;
}
.grp-btn-plein.solia {
  display: flex; width: 100%; margin-top: 14px;
  background: #4C3BCB; color: #fff; text-decoration: none;
}

/* ---------- Les étiquettes de Trokin PRO ----------
   « Je cherche » et « je propose », partagées par le parcours d'inscription
   et le formulaire de l'activité. */
.pro-etiquettes { display: flex; flex-wrap: wrap; gap: 8px; }
.pro-etiquettes button {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  padding: 9px 14px;
  border-radius: 99px;
  /* Cible tactile : une étiquette de 30 px se rate une fois sur trois. */
  min-height: 40px;
}
.pro-etiquettes button.on {
  background: var(--teal-800);
  border-color: var(--teal-800);
  color: #fff;
}
.pro-bloc-titre {
  font-size: 13px;
  font-weight: 800;
  color: #4A5553;
  margin: 18px 0 8px;
}
.pro-bloc-titre:first-child { margin-top: 0; }

/* ---------- Qui publie, dans l'annonce ----------
   Le rail porte la fiche complète, mais il disparaît sous 1180 px : cette ligne
   est la seule signature visible sur un téléphone. */
.annonce-auteur {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  text-decoration: none;
}
.annonce-auteur:hover { border-color: var(--teal-500); }
.annonce-auteur .qui { flex: 1; min-width: 0; }
.annonce-auteur .qui b {
  display: flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 800; color: var(--text);
}
.annonce-auteur .qui > span { display: block; margin-top: 1px; font-size: 12.5px; color: var(--muted); }
.annonce-auteur .fleche { width: 15px; height: 15px; flex: none; color: var(--muted); }

/* Les deux chiffres d'une annonce, sur « Mes annonces » — vues et contacts.
   Discrets : ils informent leur auteur, ils ne notent pas son annonce. */
.ad-compteurs {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 6px; font-size: 12.5px; font-weight: 700; color: var(--muted);
}
.ad-compteurs span { display: flex; align-items: center; gap: 5px; }
.ad-compteurs .ic { width: 14px; height: 14px; color: var(--teal-600); }
.ad-compteurs .muted-sm { font-weight: 400; }

/* ---- La devanture d'une activité, sur le profil ----
   Le profil reste celui d'une personne (ADR-0011) : ce bloc s'ajoute au sien,
   avec la même carte que les autres sections, et ne le remplace pas. */
.pro-devanture { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.pro-devanture-tete { display: flex; align-items: center; gap: 12px; }
.pro-devanture-tete b {
  display: flex; align-items: center; gap: 7px;
  font-size: 15px; font-weight: 800; color: var(--text);
}
.pro-devanture-tete .muted-sm { display: block; margin-top: 2px; }
.pro-logo {
  width: 46px; height: 46px; flex: none;
  border-radius: 12px; border: 1px solid var(--line);
  background-size: cover; background-position: center;
}

/* Le badge d'une annonce publiée au nom d'une activité. Discret : il qualifie
   un nom, il ne le remplace pas. */
.tag-pro {
  background: var(--teal-950);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .07em;
  padding: 3px 5px 4px;
  border-radius: 5px;
  line-height: 1;
  flex: none;
}

/* Le parcours de compte, en pro : le badge sur le verrou de la page, pour qu'on
   sache quel compte on ouvre. Le reste du formulaire est identique — c'est le
   même compte, avec un rôle en plus. */
.badge-pro {
  background: var(--teal-950);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .07em;
  padding: 4px 8px 5px;
  border-radius: 7px;
  line-height: 1;
  margin-left: 8px;
  align-self: center;
  flex: none;
}
/* Dans la barre du haut, où la place est comptée : un cran plus petit, et le
   verrou ne pousse pas la cloche hors de l'écran. */
.topbar .badge-pro { font-size: 9.5px; padding: 3px 6px 4px; margin-left: 6px; }

/* Le choix du chapeau, au moment de publier (ADR-0011). */
.pub-chapeau {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 14px 0 4px;
  padding: 13px 14px;
  background: var(--pill-teal-bg);
  border-radius: 14px;
  cursor: pointer;
}
.pub-chapeau input { flex: none; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--teal-700); }
.pub-chapeau b { display: block; font-size: 13.5px; font-weight: 700; color: var(--text); }
.pub-chapeau span span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--pill-teal-tx); }
.pub-chapeau[hidden] { display: none; }

/* ---------- L'entrée de l'espace professionnel, sous la connexion ----------
   Une carte à part et non une ligne de plus sous le formulaire : elle ne
   s'adresse pas à la même personne. Le verrou en tête dit d'un coup d'œil que
   c'est une autre porte, sans avoir à lire. */
.pro-invite {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  text-decoration: none;
}
.pro-invite:hover { border-color: var(--teal-500); }
.pro-invite .verrou {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--teal-600);
}
/* Le mot en un seul bloc : posé en enfant direct du flex, « KIN » devenait un
   élément anonyme et le `gap` ouvrait un blanc au milieu de la marque. */
.pro-invite .verrou .mot { white-space: nowrap; }
.pro-invite .verrou i { font-style: normal; color: var(--orange); }
.pro-invite .verrou b {
  background: var(--teal-950);
  color: #fff;
  font-size: 9.5px;
  letter-spacing: .06em;
  padding: 3px 6px 4px;
  border-radius: 6px;
  line-height: 1;
}
.pro-invite .quoi { flex: 1; min-width: 0; }
.pro-invite .quoi b { display: block; font-size: 13.5px; font-weight: 700; color: var(--text); }
.pro-invite .quoi span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.pro-invite .fleche { width: 16px; height: 16px; flex: none; color: var(--muted); }

/* Sous 380 px, le verrou et le texte se marchaient dessus : le verrou passe
   au-dessus, la flèche s'efface — la carte entière est déjà le lien. */
@media (max-width: 380px) {
  .pro-invite { flex-wrap: wrap; gap: 8px; }
  .pro-invite .quoi { flex-basis: 100%; }
  .pro-invite .fleche { display: none; }
}

.wprogress {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: 18px;
}
.wprogress span { width: 34px; height: 4px; border-radius: 99px; background: var(--line); }
.wprogress span.on { background: var(--teal-700); }

.fgroup { margin-bottom: 14px; }
.fgroup label { display: block; font-size: 12px; font-weight: 800; color: #4A5553; margin-bottom: 6px; }
.fgroup input[type="text"], .fgroup input[type="email"], .fgroup input[type="tel"],
.fgroup input[type="password"], .fgroup select, .fgroup textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  outline: none;
  background: #fff;
}
.fgroup textarea { resize: vertical; min-height: 84px; }
.fgroup input:focus, .fgroup textarea:focus, .fgroup select:focus { border-color: var(--teal-600); }
.fcheck { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; color: #56605E; margin: 14px 0; }
.fcheck a { color: var(--teal-600); font-weight: 700; }

.choice-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.choice {
  display: flex;
  align-items: center;
  gap: 13px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 13px 15px;
  text-align: left;
  background: #fff;
  width: 100%;
}
.choice .cicon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal-700);
  flex: none;
}
.choice .t { font-weight: 800; font-size: 13.5px; display: block; }
.choice .s { color: var(--muted); font-size: 11.5px; display: block; }
.choice.selected { border-color: var(--teal-800); background: #F4FAF7; }
.choice.selected .cicon { background: var(--teal-800); color: #fff; }

.check-line {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1.5px solid var(--line);
  border-radius: 13px;
  padding: 12px 14px;
  background: #fff;
  width: 100%;
  text-align: left;
}
.check-line .box {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 2px solid #CFCabc;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex: none;
}
.check-line .box .ic { width: 13px; height: 13px; display: none; }
.check-line.on { border-color: var(--teal-800); }
.check-line.on .box { background: var(--teal-800); border-color: var(--teal-800); }
.check-line.on .box .ic { display: block; }

.chips-select { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chips-select button {
  border: 1.5px solid var(--line);
  border-radius: 99px;
  padding: 8px 16px;
  font-weight: 700;
  font-size: 12.5px;
  background: #fff;
  color: #4A5553;
}
.chips-select button.on { background: var(--teal-800); border-color: var(--teal-800); color: #fff; }

.wfoot { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.wlink { text-align: center; color: var(--muted); font-size: 13px; }
.wlink a, .wlink button { color: var(--teal-600); font-weight: 800; }

.map-ph {
  height: 150px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 55%, rgba(244, 80, 44, .18) 0 26px, transparent 27px),
    repeating-linear-gradient(0deg, #EAF0E6 0 26px, #E2EBDD 26px 27px),
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(180,196,175,.5) 34px 35px);
  position: relative;
  margin-bottom: 14px;
  border: 1px solid var(--line);
}
.map-ph .pin {
  position: absolute;
  left: 50%; top: 42%;
  transform: translate(-50%, -100%);
  color: var(--orange);
}
.map-ph .pin .ic { width: 30px; height: 30px; }

.photo-row { display: flex; gap: 8px; }
.photo-row .ph { width: 64px; height: 64px; border-radius: 10px; }
.photo-row .ph .ic { width: 18px; height: 18px; }
.photo-row .add {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  border: 1.5px dashed #CFCABC;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

.success-card { text-align: center; padding: 40px 26px; }
.success-card .okmark {
  width: 62px;
  height: 62px;
  border-radius: 99px;
  background: var(--green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}
.success-card .okmark .ic { width: 30px; height: 30px; }
.success-card h1 { font-size: 19px; }
.success-card p { color: var(--muted); margin: 6px 0 22px; }

.preview-ad { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin-bottom: 16px; }
.preview-ad .ph { width: 100%; height: 130px; border-radius: 0; }
.preview-ad .body { padding: 14px; }
.preview-ad .kicker {
  background: var(--pill-teal-bg);
  color: var(--pill-teal-tx);
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .6px;
  padding: 3px 8px;
  border-radius: 6px;
  margin-bottom: 7px;
}
.preview-ad .t { font-weight: 800; font-size: 15px; margin-bottom: 7px; }
.preview-ad .pills { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 9px; }
.preview-ad .line { font-size: 12.5px; color: #56605E; display: flex; align-items: center; gap: 7px; padding: 3px 0; }
.preview-ad .line .ic { width: 14px; height: 14px; color: var(--teal-600); }
.preview-ad .price { font-weight: 800; font-size: 15px; margin-top: 6px; }
.preview-ad .price span { color: var(--muted); font-weight: 600; font-size: 12px; }

.welcome-hero { text-align: center; padding: 34px 26px; }
.welcome-hero .logo { --mark: 56px; flex-direction: column; gap: 14px; }
.welcome-hero h1 { font-size: 20px; font-weight: 800; margin: 16px 0 6px; }
.welcome-hero .sub { color: var(--muted); font-size: 13px; margin-bottom: 22px; }
.welcome-feat {
  display: flex;
  align-items: center;
  gap: 13px;
  text-align: left;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
}
.welcome-feat:last-of-type { border-bottom: none; margin-bottom: 20px; }
.welcome-feat .cicon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--orange-soft);
  color: var(--orange);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.welcome-feat .t { font-weight: 800; font-size: 13.5px; }
.welcome-feat .s { color: var(--muted); font-size: 11.5px; }

/* ---------- Connexion sociale & vérification ---------- */

.gbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 11px;
  font-weight: 700;
  background: #fff;
  margin-bottom: 10px;
}
.gbtn:hover { background: var(--line-soft); }

.divider-or {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  margin: 14px 0;
}
.divider-or::before, .divider-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.code-row { display: flex; gap: 8px; justify-content: center; margin: 10px 0 18px; }
.code-row input {
  width: 46px;
  height: 54px;
  text-align: center;
  font-size: 20px;
  font-weight: 800;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  outline: none;
  background: #fff;
}
.code-row input:focus { border-color: var(--teal-600); }

.hint-line {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  font-size: 11px;
  color: var(--muted);
}
.hint-line .ic { width: 13px; height: 13px; color: var(--teal-600); margin-top: 1px; flex: none; }

/* ---------- Responsive ---------- */

@media (max-width: 1180px) {
  .content-3col { grid-template-columns: minmax(0, 1fr); }
  .rail { display: none; }
  .xchips { grid-template-columns: repeat(3, 1fr); }
  .opp-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Frontière du mobile. Ces règles sont solidaires : la sidebar disparaît, donc le bloc
   « Mon espace » de la page profil prend le relais. Déplacer l'un sans l'autre laisse le
   membre sans accès à la moitié du site. */
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { display: none; }
  .msg-layout { grid-template-columns: minmax(0, 1fr); }
  /* Deux vues successives, pas une colonne supprimée. `.conv-col` était simplement
     masquée : il restait un écran « Sélectionnez une conversation » sans aucune
     liste pour le faire, donc un cul-de-sac (ADR-0006). */
  .msg-layout .chat-col { display: none; }
  .msg-layout.vue-fil .conv-col { display: none; }
  .msg-layout.vue-fil .chat-col { display: flex; }
  .chat-retour { display: grid; }
}
@media (min-width: 901px) {
  .mon-espace { display: none; }
}
@media (max-width: 640px) {
  .opp-grid { grid-template-columns: 1fr; }
  .feature-body { flex-direction: column; }
  .feature-body .ph { width: 100%; }
  /* 56 px de marge, c'est 17 % d'un écran de 320 px. */
  .shell { padding: 0 16px; }

  /* ---- La barre du haut tient sur une ligne ----
     Elle en prenait trois : le logo, puis la recherche, puis quatre boutons.
     Sur un écran de 360 px c'était un tiers de la hauteur avant la première
     annonce. On ne garde que ce qui n'existe nulle part ailleurs. */
  .topbar {
    flex-wrap: nowrap;
    gap: 10px;
    padding: 10px 16px;
  }
  /* Le symbole seul porte la marque ; le mot coûte 70 px pour rien. */
  /* Le mot tient de nouveau : la barre du haut a rendu la place qu'occupait
     son champ de recherche. Et pour Solia, le mot EST le logo — le masquer ne
     laissait que « by Trokin ». */
  .topbar .logo .word { font-size: 17px; }
  .topbar .logo-solia .word { font-size: 19px; }
  /* Le séparateur reprend du service : il était masqué parce que le champ de
     recherche remplissait la barre. Sans lui, notifications et profil se
     collaient au logo au lieu d'aller à droite. */
  /* « Publier » et « Messages » sont déjà dans la barre du bas, à quelques
     centimètres de là. Masqués et non retirés : leurs badges sont peuplés
     par identifiant (ADR-0009). */
  .topbar .btn-orange,
  .topbar a.bell { display: none; }
  .topbar .searchwrap {
    flex: 1;
    min-width: 0;
    max-width: none;
    padding: 9px 14px;
  }
  .topbar .searchwrap input { font-size: 16px; }  /* sous 16 px, iOS zoome au focus */
  /* ---- Les deux rangées de filtres défilent au lieu de s'empiler ----
     Huit catégories sur trois lignes puis quatre types sur deux, c'était plus
     de place que les annonces elles-mêmes. */
  /* Deux barres défilantes l'une sous l'autre faisaient plus de bruit que de
     service. La catégorie rejoint le panneau de filtres — le bouton « Filtrer »
     l'affiche, donc elle n'est ni perdue ni invisible (ADR-0009) — et seule la
     rangée des types reste à l'écran. */
  .cat-tabs { display: none; }

  .xchips {
    display: flex;
    grid-template-columns: none;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 14px;
    padding-bottom: 2px;
  }
  .xchips::-webkit-scrollbar { display: none; }
  .xchips button { flex: none; white-space: nowrap; min-height: 44px; padding: 9px 14px; }
  /* Le sous-titre explique le type ; sur une ligne défilante il triple la
     largeur de chaque bouton. Le libellé suffit à choisir. */
  .xchips button .s { display: none; }
  .xchips button .t { font-size: 13px; }

  /* ---- Les barres d'onglets de page défilent, elles aussi ----
     « Je propose / Je recherche / Mes échanges » passait à deux lignes, et le
     bouton d'action se retrouvait seul sous le titre : trois blocs alignés sur
     rien. Le titre garde son action à droite, les onglets tiennent sur une
     ligne. */
  .page-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  .page-tabs::-webkit-scrollbar { display: none; }
  .page-tabs button, .page-tabs a { flex: none; white-space: nowrap; min-height: 40px; }

  .mainzone > .row-between { flex-wrap: nowrap; gap: 10px; align-items: center; }
  .mainzone > .row-between h1 { font-size: 17px; line-height: 1.2; }
  .mainzone > .row-between .btn { flex: none; }
}

/* ============================================================
   COMPOSANTS APPLICATION (V2 dynamique)
   ============================================================ */

.muted-sm { color: var(--muted); font-size: 11.5px; }
.stars { display: inline-flex; align-items: center; gap: 4px; color: #E8A33D; font-weight: 800; font-size: 12.5px; }
.stars .ic { width: 13px; height: 13px; }

/* Toasts */
.toast-holder { position: fixed; bottom: 96px; left: 50%; transform: translateX(-50%); z-index: 300; display: flex; flex-direction: column; gap: 8px; align-items: center; }
/* 96 px dégageaient la barre du bas ; sans elle, le toast flotterait au milieu de rien. */
@media (min-width: 901px) { .toast-holder { bottom: 24px; } }
.toast {
  background: var(--teal-950); color: #fff; font-weight: 700; font-size: 13px;
  padding: 11px 20px; border-radius: 99px; box-shadow: 0 8px 24px rgba(0,0,0,.25);
  animation: toast-in .25s ease; max-width: 90vw;
}
.toast.bad { background: #B3261E; }
.toast.out { opacity: 0; transition: opacity .4s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }

/* Modales */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(10, 56, 51, .45); z-index: 250;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  /* Un voile `fixed` couvre le viewport barres du navigateur MASQUÉES : centrer
     dedans pousse la fenêtre sous la barre d'outils de Safari, et son dernier
     bouton hors d'atteinte. Ce bas de marge rend la hauteur des barres au
     centrage, sans découvrir le bas de l'écran comme le ferait `height: 100svh`.
     Sur un écran sans barres escamotables, la soustraction vaut zéro. */
  padding-bottom: calc(16px + (100lvh - 100svh));
}
.modal-box {
  background: var(--surface); border-radius: 20px; padding: 24px;
  width: 100%; max-width: 440px; max-height: 88vh;
  overflow-y: auto; overscroll-behavior: contain;
  box-shadow: 0 24px 60px rgba(0,0,0,.25);
}
.modal-box h2 { font-size: 17px; font-weight: 800; margin-bottom: 6px; }
.modal-box .sub { color: var(--muted); font-size: 13px; margin-bottom: 16px; }

/* Le mot de passe et son œil : l'input garde toute la largeur, l'œil se
   superpose à droite et bascule l'affichage. */
.champ-oeil { position: relative; }
.champ-oeil input { width: 100%; padding-right: 44px; }
.champ-oeil .oeil {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; display: grid; place-items: center;
  color: var(--muted); border-radius: 99px;
}
.champ-oeil .oeil:hover { color: var(--text); }
.champ-oeil .oeil.ouvert { color: var(--teal-600); }
.champ-oeil .oeil .ic { width: 18px; height: 18px; }

/* Devenir un point d'échange (TK.proposerPointEchange).
   La palette est celle de la maquette CEO « Devenez point d'échange
   partenaire », prélevée dans l'image : le teal de la carte #06857A pour le
   titre, l'icône boutique et les intertitres (« le bleu » de la CEO), bleu
   nuit #16202B pour le texte courant, orange du bouton d'inscription
   #FD6003, vert des coches #03806E. */
.pe-modal .pe-icone {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: #E1F0EC; margin-bottom: 10px;
}
.pe-modal .pe-icone svg { width: 23px; height: 23px; color: #06857A; }
/* La vitrine partenaire en bandeau, bord à bord : elle mange le padding de la
   fenêtre et reprend ses coins arrondis. C'est elle qui vend l'idée — un vrai
   café, le macaron officiel sur la porte. */
.pe-modal .pe-photo {
  display: block;
  width: calc(100% + 48px);
  margin: -24px -24px 16px;
  border-radius: 20px 20px 0 0;
}
.pe-modal h2 { color: #06857A; }
/* « Trokin » et les mots à accentuer, dans l'orange du grand titre de la
   maquette. */
.pe-modal .pe-trokin { color: #FD6003; font-weight: inherit; }
.pe-etat .pe-trokin { font-weight: 700; }
.pe-modal .sub { color: #46505C; }
.pe-etat {
  border-radius: 10px; padding: 10px 12px; margin-bottom: 14px;
  font-size: 13px; font-weight: 600;
}
.pe-etat.pe-demande { background: #FEF6E7; color: #8A5A00; }
.pe-etat.pe-valide { background: #E7F6EC; color: #0B6B3A; }
.pe-etat.pe-refuse { background: #FBEAE8; color: #B3261E; }
.pe-titre { font-size: 13px; font-weight: 800; margin-bottom: 8px; color: #06857A; }
.pe-conditions { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.pe-conditions label {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 13px; line-height: 1.4; cursor: pointer; color: #16202B;
}
.pe-conditions input { margin-top: 2px; accent-color: #03806E; }
.pe-modal .fgroup label { color: #16202B; }
.pe-modal .btn-primary { background: #FD6003; }
.pe-modal .btn-primary:hover { background: #E85602; }

/* Explication des KINS (TK.expliquerKins) */
.kins-bloc { display: flex; gap: 13px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--line-soft); }
.kins-bloc:first-of-type { border-top: 0; padding-top: 4px; }
.kins-bloc .rond {
  width: 34px; height: 34px; border-radius: 99px; flex: none;
  background: var(--pill-teal-bg); color: var(--pill-teal-tx);
  display: grid; place-items: center;
}
.kins-bloc .rond .ic { width: 16px; height: 16px; }
.kins-bloc b { display: block; font-size: 13.5px; font-weight: 800; margin-bottom: 3px; }
.kins-bloc p { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.kins-bloc p b { display: inline; color: var(--teal-600); font-weight: 800; margin: 0; }
.kins-pied { display: flex; gap: 10px; margin-top: 16px; }
.kins-pied .btn { flex: 1; }

/* Barème détaillé, servi par l'API : ce qui est déjà acquis se coche. */
.kins-paliers { margin-top: 9px; border-top: 1px dashed var(--line-soft); padding-top: 7px; }
.kins-paliers .pal {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 12px; color: var(--muted); padding: 3px 0;
}
.kins-paliers .pal b { display: inline; margin: 0; color: var(--muted); font-weight: 700; }
.kins-paliers .pal.fait { color: var(--teal-600); }
.kins-paliers .pal.fait b { color: var(--teal-600); }

/* Prochain objectif : ce qu'on montre à la place d'un solde nu. */
.kins-objectif {
  background: var(--pill-teal-bg); border-radius: 12px;
  padding: 10px 12px; margin: 4px 0 12px;
}
.kins-objectif .haut { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.kins-objectif .tag { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--pill-teal-tx); }
.kins-objectif .haut b { font-size: 13px; font-weight: 800; color: var(--teal-600); }
.kins-objectif .quoi { font-size: 12.5px; font-weight: 700; color: var(--text); margin-top: 4px; line-height: 1.4; }
.kins-objectif .jauge { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .75); margin-top: 8px; overflow: hidden; }
.kins-objectif .jauge span { display: block; height: 100%; border-radius: 99px; background: var(--teal-600); transition: width .4s ease; }
.kins-objectif .pas { font-size: 11.5px; color: var(--muted); margin-top: 5px; }
.kins-objectif .pas a { color: var(--teal-600); font-weight: 700; text-decoration: underline; }
.kins-objectif.complet { background: var(--green-soft); }
.kins-objectif.complet b { font-size: 12.5px; }
.kins-objectif.complet p { font-size: 11.5px; color: var(--muted); margin-top: 3px; }

/* Centre de notifications */
.notif-liste { display: flex; flex-direction: column; }
.notif {
  display: flex; align-items: center; gap: 12px; padding: 11px 2px;
  border-top: 1px solid var(--line-soft);
}
.notif:first-child { border-top: 0; }
.notif:hover { background: var(--bg); border-radius: 10px; }
.notif .rond {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: grid; place-items: center;
}
.notif .rond .ic { width: 16px; height: 16px; }
.notif .ton-bleu   { background: var(--pill-teal-bg);   color: var(--pill-teal-tx); }
.notif .ton-orange { background: var(--pill-orange-bg); color: var(--pill-orange-tx); }
.notif .ton-vert   { background: var(--green-soft);     color: #177142; }
.notif .ton-jaune  { background: #FBF0D8;               color: #8A6212; }
.notif .ton-violet { background: var(--pill-purple-bg); color: var(--pill-purple-tx); }
.notif .txt { flex: 1; min-width: 0; }
.notif .txt b { display: block; font-size: 13px; font-weight: 700; }
.notif .txt em {
  display: block; font-style: normal; font-size: 11.5px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.notif .quand { font-size: 11px; color: var(--muted); flex: none; }

/* Trouver / proposer un service : deux issues, jamais une seule */
.sens-service { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.grosbouton {
  display: flex; align-items: center; gap: 14px; text-align: left;
  width: 100%; padding: 16px 18px; border: 1.5px solid var(--line);
  border-radius: var(--radius-sm); background: var(--surface); cursor: pointer;
  transition: border-color .12s, transform .12s, box-shadow .12s;
}
.grosbouton:hover { border-color: var(--teal-500); transform: translateY(-1px); box-shadow: var(--shadow); }
.grosbouton .ic {
  width: 34px; height: 34px; flex: none; padding: 8px; border-radius: 11px;
  background: var(--pill-teal-bg); color: var(--pill-teal-tx);
}
.grosbouton b { display: block; font-size: 14.5px; font-weight: 800; }
.grosbouton em { display: block; font-style: normal; font-size: 12.5px; color: var(--muted); margin-top: 2px; }

/* Notation par étoiles (avis) */
.rate-stars { display: flex; gap: 6px; justify-content: center; margin: 14px 0 18px; }
.rate-stars button { color: #D8D2C2; }
.rate-stars button .ic { width: 30px; height: 30px; }
.rate-stars button.on { color: #E8A33D; }

/* Formulations proposées sous les étoiles */
.suggestions { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.suggestions .suggestion {
  font-size: 12px; font-weight: 600; color: var(--teal-800);
  background: var(--pill-teal-bg); border: 1px solid transparent;
  border-radius: 99px; padding: 6px 12px; cursor: pointer; text-align: left;
}
.suggestions .suggestion:hover { border-color: var(--teal-500); }

/* Grille d'annonces */
.annonces-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.annonce-card { overflow: hidden; display: flex; flex-direction: column; cursor: pointer; transition: transform .12s, box-shadow .12s; }
.annonce-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(34,48,46,.1); }
.annonce-card .ph { width: 100%; height: 130px; border-radius: 0; }
.annonce-card .body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.annonce-card .t { font-weight: 800; font-size: 13.5px; line-height: 1.3; }
.annonce-card .meta { color: var(--muted); font-size: 11.5px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.annonce-card .meta .ic { width: 12px; height: 12px; }
.annonce-card .val { font-weight: 800; font-size: 13px; margin-top: auto; }
.annonce-card .val span { color: var(--muted); font-weight: 600; font-size: 11px; }
.annonce-card .pills { display: flex; gap: 6px; flex-wrap: wrap; }

/* Carte Leaflet */
.map-mini { height: 250px; border-radius: 12px; border: 1px solid var(--line); z-index: 1; }

/* ---------- Proposer un échange ----------
   Rien ne doit passer sous le pli, sur aucun téléphone : la fenêtre devient
   une colonne flexible et la carte, seul élément compressible, absorbe
   l'espace restant au lieu de pousser le bouton hors de l'écran. Le
   défilement reste en filet de sécurité, il ne devrait jamais servir. */
.modal-box.echange-modal {
  max-height: 100%;
  display: flex; flex-direction: column;
}
/* Le groupe du lieu ne s'étire que carte ouverte : sans elle, pas de vide. */
.echange-modal .x-lieu-groupe:has(> .map-mini:not([hidden])) {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
}
.echange-modal .x-lieu-groupe:has(> .map-mini:not([hidden])) > .map-mini {
  flex: 1 1 auto; height: auto; min-height: 110px;
}
/* Sur un écran vraiment court, le rappel introductif cède sa place. */
@media (max-height: 640px) {
  .echange-modal .sub { display: none; }
}
.map-full { height: 70vh; border-radius: 14px; border: 1px solid var(--line); z-index: 1; }
.leaflet-container { font-family: inherit; }
/* L'épingle dessinée (divIcon) : sans ça, Leaflet lui met un carré blanc. */
.pe-pin { background: none; border: none; filter: drop-shadow(0 2px 3px rgba(6, 16, 40, .35)); }
.map-pop { font-size: 12.5px; font-weight: 700; }
.map-pop .map-pop-desc { font-weight: 500; color: var(--muted); }
.map-pop a { color: var(--teal-600); }

/* Marqueur d'annonce : la photo de l'objet et sa valeur, directement sur la carte. */
.map-objet-wrap { background: none; border: 0; }
.map-objet { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 52px; }
.map-objet .vig {
  width: 44px; height: 44px; border-radius: 12px; flex: none;
  background: var(--teal-800) center/cover no-repeat;
  border: 2.5px solid #fff; box-shadow: 0 3px 10px rgba(34, 48, 46, .28);
  display: grid; place-items: center; color: rgba(255, 255, 255, .82);
}
.map-objet .vig .ic { width: 18px; height: 18px; }
.map-objet .prix {
  font-size: 11px; font-weight: 800; white-space: nowrap;
  background: var(--teal-800); color: #fff;
  padding: 2px 8px; border-radius: 99px; box-shadow: 0 2px 6px rgba(34, 48, 46, .22);
}

/* Bandeau info (élargissement rayon, etc.) */
.notice {
  display: flex; align-items: flex-start; gap: 9px;
  background: var(--orange-soft); border: 1px solid #F8D5C6; color: #A03D1B;
  border-radius: 12px; padding: 11px 14px; font-size: 12.5px; font-weight: 600;
  margin-bottom: 14px;
}
.notice .ic { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.notice.green { background: var(--green-soft); border-color: #C4E8D1; color: #177142; }

/* Onglets de page */
.page-tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.page-tabs button, .page-tabs a {
  border: 1px solid var(--line); background: var(--surface); border-radius: 99px;
  padding: 8px 18px; font-weight: 700; font-size: 13px; color: #4A5553;
}
.page-tabs .active { background: var(--teal-800); border-color: var(--teal-800); color: #fff; }

/* Lignes d'échange (mes échanges) */
.x-row {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.x-row:last-child { border-bottom: none; }
.x-row .mid { flex: 1; min-width: 0; }
.x-row .t { font-weight: 800; font-size: 13.5px; }
.x-row .s { color: var(--muted); font-size: 12px; }
.status-pill { font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 99px; white-space: nowrap; }
.status-proposee { background: var(--orange-soft); color: var(--orange); }
.status-acceptee { background: #E7F0FA; color: #2563A8; }
.status-realisee { background: var(--green-soft); color: var(--green); }
.status-annulee { background: var(--line-soft); color: var(--muted); }

/* Tables admin */
.admin-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.admin-table th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--muted); padding: 8px 10px; border-bottom: 2px solid var(--line);
}
.admin-table td { padding: 9px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.admin-table .btn-sm { padding: 5px 10px; font-size: 11.5px; }

/* États vides */
.empty {
  text-align: center; padding: 40px 20px; color: var(--muted);
}
.empty .big {
  width: 54px; height: 54px; border-radius: 99px;
  background: var(--line-soft); color: var(--teal-700);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px;
}
.empty .big .ic { width: 24px; height: 24px; }
.empty b { color: var(--text); display: block; margin-bottom: 4px; font-size: 14px; }

/* Vignettes photos (annonce, publier) */
.thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.thumbs .th {
  width: 76px; height: 76px; border-radius: 10px; background-size: cover; background-position: center;
  border: 1px solid var(--line); position: relative;
}
.thumbs .th .rm {
  position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 99px;
  background: #B3261E; color: #fff; display: flex; align-items: center; justify-content: center;
}
.thumbs .th .rm .ic { width: 10px; height: 10px; }
.thumbs .add-th {
  width: 76px; height: 76px; border-radius: 10px; border: 1.5px dashed #CFCABC;
  color: var(--muted); display: flex; align-items: center; justify-content: center; background: none;
}

/* Galerie annonce */
.gallery { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; }
.gallery .main-ph { height: 280px; border-radius: 14px; }
.gallery .side-phs { display: flex; flex-direction: column; gap: 8px; }
.gallery .side-phs .ph { flex: 1; min-height: 0; }
.gallery.single { grid-template-columns: 1fr; }

/* ---- La fiche annonce tient dans l'écran du téléphone ----
   Une photo de 280 px plus 22 px de marge partout repoussaient « Proposer un
   échange » sous la barre du bas : il fallait faire défiler pour trouver
   l'action même de la page. Déclaré ici, après les règles qu'il surcharge :
   à spécificité égale, c'est l'ordre du fichier qui tranche. */
@media (max-width: 640px) {
  .feature-card { padding: 14px; }
  .feature-card h1 { font-size: 18.5px; margin-bottom: 8px; }
  .feature-card .pills { gap: 6px; margin-bottom: 12px; }
  .gallery { gap: 6px; }
  .meta-grid { gap: 8px 10px; }
  .feature-foot { flex-wrap: wrap; gap: 10px; }
  /* L'action principale prend la ligne : c'est elle qu'on vient chercher. */
  .feature-foot #btn-propose,
  .feature-foot #btn-msg { flex: 1 1 auto; justify-content: center; }
}

/* Divers */
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.spinner {
  width: 26px; height: 26px; border: 3px solid var(--line); border-top-color: var(--teal-700);
  border-radius: 99px; animation: spin .8s linear infinite; margin: 30px auto;
}
@keyframes spin { to { transform: rotate(360deg); } }
.wide-card { padding: 20px 22px; }
.section-gap { margin-top: 22px; }
.link-teal { color: var(--teal-600); font-weight: 700; }

@media (max-width: 1180px) {
  .annonces-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .annonces-grid { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; }
  /* 172 et non 200 : les 28 px gagnés sont ce qui fait passer « Proposer un
     échange » au-dessus de la barre du bas sur un écran de 796 px. */
  .gallery .main-ph { height: 172px; }
}

/* Mise en évidence du panneau de filtres (lien « Recherche ») */
.filter-card.flash { box-shadow: 0 0 0 3px var(--orange), 0 8px 24px rgba(244, 80, 44, .25); transition: box-shadow .3s; }

/* Page Recherche dédiée */
.search-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 22px; align-items: start; }
.search-layout aside { position: sticky; top: 84px; }
@media (max-width: 900px) {
  .search-layout { grid-template-columns: minmax(0, 1fr); }
  /* Le formulaire complet — mot-clé, ville, rayon, type, catégorie, état,
     valeur — s'empilait au-dessus des résultats : on faisait défiler un écran
     entier de réglages avant de voir la première annonce. Il passe dans une
     feuille qu'on ouvre depuis le bouton « Filtrer ». */
  .search-layout aside { display: none; }
  .search-layout aside.ouvert { display: block; }
}

/* Autocomplétion de ville */
.ac-list {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 14px 36px rgba(34, 48, 46, .16); z-index: 140;
  display: none; overflow: hidden;
}
.ac-list button {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 10px 14px; font-size: 13px; border-bottom: 1px solid var(--line-soft);
}
.ac-list button:last-child { border-bottom: none; }
.ac-list button.sel { background: var(--line-soft); }
.ac-list button .ic { width: 13px; height: 13px; color: var(--teal-600); }
.ac-list button span { color: var(--muted); font-size: 11px; margin-left: auto; white-space: nowrap; }

/* Bouton « Utiliser ma position » */
.geo-btn {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--teal-600); font-weight: 700; font-size: 12px; margin-top: 7px;
}
.geo-btn .ic { width: 13px; height: 13px; }
.geo-btn:hover { text-decoration: underline; }

/* Liens vers les profils utilisateurs */
.user-link { font-weight: 700; }
.user-link:hover { color: var(--teal-600); text-decoration: underline; }

/* ============================================================
   MODE SOLIA — fidèle à la maquette « Solia by Trokin »
   ------------------------------------------------------------
   Le mode est porté par l'attribut data-theme="solia" sur <html>,
   posé par app.js d'après le compte connecté (champ `solia`, accordé
   par le serveur aux seules femmes).

   Lecture de la maquette : fond lavande très clair, accent VIOLET
   (boutons, liens, onglets), le rose n'apparaît qu'en touches — le
   cœur du logo et la carte « confiance ». Les verts de confiance et
   l'orange des pastilles de type ne changent pas. La mise en page
   reste identique : seules les couleurs et le verrou du logo changent.
   ============================================================ */

:root[data-theme="solia"] {
  --bg: #F4F2FA;
  --line: #E7E4F3;
  --line-soft: #F0EEF8;

  /* L'échelle « teal » devient une échelle indigo-violet, mêmes rôles. */
  --teal-950: #201A4D;
  --teal-800: #37299E;
  --teal-700: #4232B8;
  --teal-600: #4C3BCB;
  --teal-500: #6D5DDE;

  /* L'accent d'action (boutons « Publier », CTA, liens) : l'indigo de la maquette. */
  --orange: #4C3BCB;
  --orange-dark: #3B2DA6;
  --orange-soft: #EEEBFA;

  --pill-teal-bg: #EBE8F9;
  --pill-teal-tx: #4232B8;
  --pill-purple-bg: #EEEBFA;
  --pill-purple-tx: #4C3BCB;

  --chat-me: #EBE8F9;

  --text: #1D1A33;
  --muted: #8C88A1;
}

/* Les badges de notification de la maquette sont rouge rosé, pas indigo. */
:root[data-theme="solia"] .badge-count { background: #F43F5E; }

/* ----- Verrou « Solia ♥ / by Trokin » (rendu par app.js en mode Solia).
   Le petit symbole Trokin de la seconde ligne garde son orange de marque. ----- */
.logo-solia { align-items: center; }
.logo-solia .lock { display: flex; flex-direction: column; line-height: 1.05; }
.logo-solia .word {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700; letter-spacing: -0.005em;
  color: #3E2FBB; display: inline-flex; align-items: center;
}
/* Cœur vectoriel plein et arrondi (le ♥ typographique varie selon la police). */
/* Proportions relevées sur l'affiche officielle, en fraction de la hauteur du
   mot : cœur 0,536 de haut et 0,486 de large, espace 0,186, aligné sur le pied
   du mot. Converties en em par la hauteur réelle de Playfair Display (0,795 em). */
.logo-solia .coeur {
  width: 0.386em; height: 0.426em; margin-left: 0.148em; flex: none;
  color: var(--solia-rose); align-self: flex-end; margin-bottom: 0.04em;
}
/* « by » en magenta, « Trokin » en encre, symbole orange doré — comme la maquette. */
.logo-solia .byline { color: #C026D3; }
.logo-solia .byline svg.mark path { fill: #F7941D; }
.logo-solia .byline {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; color: var(--muted);
}
.logo-solia .byline svg.mark { width: 12px; height: 12px; }
.logo-solia .byline b { color: var(--text); font-weight: 800; }

/* ============================================================
   PROFIL V2 — structure de la maquette « Solia by Trokin »
   Composants neutres : les couleurs viennent des variables du
   thème actif, la structure est la même pour Trokin et Solia.
   ============================================================ */

.crumbs { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.crumbs a:hover { color: var(--teal-600); text-decoration: underline; }
.crumbs .sep { opacity: .6; }

.profile-hero { padding: 0; overflow: hidden; }
.profile-hero .cover { height: 150px; background: linear-gradient(115deg, var(--teal-500), var(--teal-800)); }
.profile-hero .inner { padding: 0 22px 20px; }
.profile-hero .avatar-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-top: -44px; flex-wrap: wrap; }
/* Avatar et pastille sur la même ligne de base, comme sur la maquette : le badge
   se lit alors comme une qualité du portrait, pas comme une légende sous l'image. */
.profile-hero .ident { display: flex; align-items: flex-end; gap: 12px; }
.profile-hero .avatar { border: 4px solid var(--surface); box-shadow: var(--shadow); }
.profile-hero .actions { display: flex; gap: 8px; margin-bottom: 6px; align-items: center; }
.profile-hero .btn-contact { color: var(--teal-600); border-color: var(--teal-500); }
.profile-hero .btn-icone { padding: 0; width: 38px; height: 38px; justify-content: center; }
.profile-hero .btn-icone .ic { margin: 0; }
.champ-cover {
  width: 100%; height: 84px; border-radius: var(--radius-sm);
  border: 1.5px dashed #CFCABC; background: var(--bg); color: var(--muted);
  font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.badge-verifiee {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--green); color: #fff; border-radius: 99px;
  font-size: 11px; font-weight: 800; padding: 4px 11px;
  margin-bottom: 10px; width: fit-content;
}
/* Le badge d'un compte qui exerce accompagne le nom sur la même ligne, sans
   décaler la ligne de base du titre. */
.profile-hero h1 { font-size: 22px; font-weight: 800; margin-top: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.note-grande { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-weight: 800; }
.note-grande .stars { color: #F59E0B; letter-spacing: 1px; }
.note-grande .cnt { color: var(--muted); font-weight: 600; font-size: 12.5px; }
.hero-meta { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; color: var(--muted); font-size: 13px; }
.hero-meta span { display: inline-flex; align-items: center; gap: 6px; }
.hero-pills { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.pill-fiable { background: var(--green-soft); color: #177142; }
.pill-reponse { background: var(--pill-purple-bg); color: var(--pill-purple-tx); }
.pill-badge   { background: #FBF0D8;              color: #8A6212; }

.tabsbar { display: flex; gap: 2px; border-bottom: 1.5px solid var(--line); margin-top: 16px; overflow-x: auto; }
.tabsbar a {
  padding: 10px 13px; font-weight: 700; font-size: 13px; color: var(--muted);
  border-bottom: 2.5px solid transparent; margin-bottom: -1.5px; white-space: nowrap;
}
.tabsbar a.on, .tabsbar a:hover { color: var(--teal-600); border-color: var(--teal-600); }

/* ---- La page profil sur un téléphone ----
   Déclaré après les règles qu'il surcharge : à spécificité égale, c'est
   l'ordre du fichier qui tranche.

   La bannière, l'avatar et les boutons occupaient la moitié de l'écran avant
   le premier contenu utile. Tout est resserré, et la barre d'ancres disparaît :
   « À propos », « Annonces », « Avis » et « Infos pratiques » ne sont pas des
   destinations mais des sections empilées juste en dessous — on y arrive en
   faisant défiler. Seul « Échanges » menait ailleurs, et il reste atteignable
   par le menu (« Mes annonces et échanges »). Aucun contenu n'est donc perdu,
   ce qu'exige l'ADR-0009 avant de masquer quoi que ce soit. */
@media (max-width: 640px) {
  .profile-hero .cover { height: 96px; }
  .profile-hero .inner { padding: 0 14px 16px; }
  .profile-hero .avatar-row { margin-top: -32px; gap: 10px; }
  .profile-hero .ident .avatar { width: 68px; height: 68px; font-size: 21px; border-width: 3px; }
  .profile-hero .actions { gap: 6px; margin-bottom: 2px; }
  .profile-hero .actions .btn { padding: 8px 11px; font-size: 12.5px; }
  .profile-hero .btn-icone { width: 34px; height: 34px; }
  .profile-hero h1 { font-size: 19px; margin-top: 8px; }
  .note-grande { margin-top: 2px; font-size: 13px; }
  /* Ville et ancienneté tiennent sur une ligne : empilées, elles coûtaient
     deux lignes pour deux informations courtes. */
  .hero-meta { margin-top: 6px; font-size: 12.5px; flex-direction: row; flex-wrap: wrap; gap: 3px 14px; }
  .hero-pills { margin-top: 8px; }
  /* Un profil sans badge gardait la marge d'une rangée vide. */
  .hero-pills:empty { display: none; }
  .tabsbar { display: none; }
}

/* --- Trocante virtuelle : quatre tuiles par type d'annonce --- */
.trocante { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.trocante .tile {
  border-radius: 12px; padding: 14px 8px; text-align: center; color: #fff;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.trocante .tile .ic { width: 22px; height: 22px; }
.trocante .tile b { font-size: 12.5px; }
.trocante .tile .n { font-size: 11px; opacity: .92; font-weight: 600; }
.tile-orange { background: #F7941D; }
.tile-vert   { background: #159179; }
.tile-nuit   { background: #22365E; }
.tile-violet { background: #6D4FC1; }
.lien-section { color: var(--teal-600); font-weight: 800; font-size: 13px; cursor: pointer; }
.lien-section:hover { text-decoration: underline; }
.lien-centre { display: flex; justify-content: center; margin-top: 14px; }
.lien-centre a { color: var(--teal-600); font-weight: 800; font-size: 13px; }
.lien-centre a:hover { text-decoration: underline; }

/* --- Dernières annonces en vignettes --- */
.mini-ads { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.mini-ad .ph { height: 92px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; }
.mini-ad .t { font-weight: 700; font-size: 12.5px; margin-top: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-ad .s { font-size: 11px; color: var(--teal-600); font-weight: 700; }
.mini-ad .d { font-size: 11px; color: var(--muted); }

/* --- Cartes du rail --- */
.rc-head { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 13.5px; margin-bottom: 12px; }
.rc-head .rond {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--orange-soft); color: var(--teal-600);
}
.rc-head .rond .ic { width: 15px; height: 15px; }
.rc-bio { font-size: 12.5px; color: #56605E; line-height: 1.55; }
.rc-ligne {
  display: flex; align-items: center; gap: 8px; margin-top: 12px;
  padding-top: 11px; border-top: 1px solid var(--line-soft);
  font-size: 12.5px; color: var(--muted);
}
.rc-ligne .ic { width: 14px; height: 14px; flex: none; }
.stat-ligne { display: flex; align-items: baseline; gap: 12px; padding: 7px 0; }
.stat-ligne .val { font-size: 19px; font-weight: 800; min-width: 46px; }
.stat-ligne .lbl { color: var(--muted); font-size: 12.5px; }
.kv-ligne { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 12.5px; }
.kv-ligne .k { color: var(--muted); }
.kv-ligne .v { font-weight: 700; text-align: right; }
.btn-lavande {
  background: var(--orange-soft); color: var(--text); font-weight: 700;
  border-radius: 10px; width: 100%; padding: 9px 0; text-align: center; display: block;
  margin-top: 10px; border: 0; font-size: 12.5px; cursor: pointer;
}
.btn-lavande:hover { filter: brightness(0.97); }
.groupe-ligne { display: flex; align-items: center; gap: 9px; padding: 6px 0; }
.groupe-ligne .av { width: 36px; height: 36px; border-radius: 9px; flex: none; background: var(--orange-soft); color: rgba(255, 255, 255, .9); display: inline-flex; align-items: center; justify-content: center; }
.groupe-ligne .nm { font-weight: 700; font-size: 12.5px; }
.groupe-ligne .dt { font-size: 11px; color: var(--muted); }

.trust-card { background: #FCE7EF; border: 1px solid #F9D2E2; }
.trust-card .rc-head { color: #E2447A; }
.trust-card .rc-head .rond { background: #FBD8E5; color: #E2447A; }
.trust-card p { font-size: 12.5px; color: #6E3550; }

/* --- Bandeau de marque en pied de page --- */
.brand-band {
  background: var(--orange-soft); border-radius: var(--radius);
  padding: 20px 24px; margin-top: 24px;
  display: flex; align-items: center; gap: 24px;
}
.brand-band .mainmsg { display: flex; align-items: center; gap: 14px; flex: 1 1 auto; min-width: 0; }
/* Les trois promesses restent sur une seule ligne : c'est leur alignement qui
   fait la signature de la marque, pas leur contenu pris un à un. */
.brand-band .promesses { display: flex; gap: 10px; flex: none; }
.brand-band .mainmsg .ic { width: 34px; height: 34px; color: var(--teal-600); }
.brand-band .mainmsg b { font-size: 13.5px; }
.brand-band .mainmsg p { font-size: 12px; color: var(--muted); }
.brand-band .item { text-align: center; width: 92px; flex: none; color: var(--teal-700); font-size: 11px; font-weight: 700; }
.brand-band .item .ic { width: 22px; height: 22px; display: block; margin: 0 auto 4px; }

@media (max-width: 900px) {
  .trocante, .mini-ads { grid-template-columns: repeat(2, 1fr); }
  .brand-band { flex-direction: column; align-items: flex-start; gap: 16px; padding: 18px 16px; }
  /* La ligne unique est la signature de la marque sur grand écran, mais trois items
     de 92 px verrouillés par `flex: none` imposaient 400 px de largeur minimale à la
     page : aucun téléphone ne l'affichait en entier. Elle se répartit ici. */
  .brand-band .promesses { width: 100%; flex-wrap: wrap; justify-content: space-between; }
  .brand-band .item { width: auto; flex: 1 1 84px; min-width: 84px; }
}

/* ---------- Interrupteur du mode Solia (topbar, à gauche de Publier) ---------- */

.solia-switch {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 99px;
  padding: 8px 12px; font-weight: 800; font-size: 12.5px; color: var(--muted);
  transition: color .15s;
}
.solia-switch .coeur { width: 14px; height: 14px; flex: none; }
.solia-switch .track {
  width: 32px; height: 19px; border-radius: 99px; position: relative; flex: none;
  background: #D9D5E4; transition: background .2s;
}
.solia-switch .track::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 15px; height: 15px; border-radius: 99px; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: left .2s;
}
.solia-switch:hover { color: var(--text); }
.solia-switch.on { color: #3E2FBB; }
.solia-switch.on .coeur { color: var(--solia-rose); }
.solia-switch.on .track { background: var(--solia-rose); }
.solia-switch.on .track::after { left: 15px; }



/* ---------- Les listes déroulantes sur téléphone ----------
   Un `select` natif ouvre la roue du système — c'est ce qu'on veut sur
   téléphone — mais sa taille venait du bureau : texte à 14 px, hauteur de
   36 px, sans place pour le doigt. iOS zoome d'ailleurs sur tout champ sous
   16 px, ce qui décalait la page à chaque ouverture. */

@media (max-width: 900px) {
  /* Le parcours de compte doit tenir dans l'écran : il n'y a rien à faire
     défiler dans un formulaire de six champs, et un bouton qu'on doit aller
     chercher sous le pli se rate. On resserre plutôt que de laisser courir. */
  .wizard-page { padding: 10px 12px; }
  .wcard { padding: 16px 15px; }
  .wcard h1 { font-size: 18px; }
  .wcard .sub { margin-bottom: 12px; font-size: 12.5px; }
  .fgroup { margin-bottom: 9px; }
  .fgroup label { margin-bottom: 4px; }
  /* 44 px de haut avec ce padding et 16 px de texte : la cible tactile tient,
     et six champs entrent dans l'écran. */
  .fgroup input[type="text"], .fgroup input[type="email"], .fgroup input[type="tel"],
  .fgroup input[type="password"], .fgroup select, .fgroup textarea { padding: 10px 13px; }
  .wfoot { margin-top: 12px; }
  .wlink { margin-top: 8px; }
  .wnote { margin: 4px 0 0; font-size: 11.5px; }

  .field select,
  .control select,
  select.input {
    font-size: 16px;          /* sous 16 px, iOS zoome au focus */
    min-height: 48px;         /* cible tactile */
    padding: 12px 38px 12px 14px;
    border-radius: 12px;
    background-position: right 14px center;
  }
  .field label, .control label { font-size: 12.5px; }
}

/* ---------- La carte « wishlist » en fin de résultats ----------
   Elle ferme la liste à la place de l'annonce qui manque. Elle a la forme
   d'une annonce pour se lire d'un coup d'œil, et le trait discontinu pour
   qu'on ne l'y confonde pas (ADR-0006). */

.carte-wishlist {
  display: flex;
  flex-direction: column;
  border: 1.5px dashed var(--line);
  background: transparent;
  box-shadow: none;
  text-decoration: none;
  transition: border-color .15s, background .15s;
}
.carte-wishlist:hover { border-color: var(--orange); background: var(--orange-soft); }
.carte-wishlist .vignette {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  background: var(--orange-soft);
  color: var(--orange);
}
.carte-wishlist .vignette .ic { width: 26px; height: 26px; }
.carte-wishlist .body { display: block; padding: 12px 12px 14px; }
.carte-wishlist .t {
  display: block; font-weight: 800; font-size: 14px; line-height: 1.3;
  color: var(--text);
}
.carte-wishlist .dit {
  display: block; margin-top: 5px; font-size: 12px; line-height: 1.4;
  color: var(--muted);
}
.carte-wishlist .geste {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 10px;
  font-weight: 700; font-size: 12.5px; color: var(--orange);
}
.carte-wishlist .geste .ic { width: 14px; height: 14px; }

/* ---------- Écran de bienvenue : les KINS et l'offre Solia ----------
   Le bloc Solia porte ses propres couleurs en dur : l'écran est encore en
   thème Trokin, et c'est justement un avant-goût de Solia qu'il donne. */

.success-card .done-kins {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--orange-soft); border-radius: 14px;
  padding: 14px 16px; margin-bottom: 18px;
}
.success-card .done-kins .montant {
  font-size: 21px; font-weight: 800; color: var(--orange); letter-spacing: -.01em;
}
.success-card .done-kins .quoi { font-size: 12.5px; color: var(--muted); }
.success-card .done-kins button {
  color: var(--teal-600); font-weight: 800; text-decoration: underline; text-underline-offset: 2px;
}

.solia-offre {
  text-align: left;
  background: linear-gradient(160deg, #F8F5FE, #FDF2F8);
  border: 1.5px solid #E6DFF9; border-radius: 16px;
  padding: 16px 17px; margin-bottom: 18px;
}
.solia-offre .tete { display: flex; align-items: flex-start; gap: 11px; }
.solia-offre .tete .coeur { width: 20px; height: 20px; flex: none; color: var(--solia-rose); margin-top: 1px; }
.solia-offre .tete b { font-size: 14px; font-weight: 800; color: #3E2FBB; }
.solia-offre .tete p { font-size: 12.5px; color: #6F6A8C; margin-top: 1px; }
.solia-offre .points { list-style: none; margin: 12px 0 14px; display: grid; gap: 7px; }
.solia-offre .points li {
  position: relative; padding-left: 20px;
  font-size: 12.5px; line-height: 1.45; color: #4A4463;
}
.solia-offre .points li::before {
  content: ''; position: absolute; left: 4px; top: 7px;
  width: 6px; height: 6px; border-radius: 99px; background: #B9A9F0;
}
.btn-solia { background: #4C3BCB; color: #fff; }
.btn-solia:disabled { background: #8B7FE0; cursor: default; }
/* Sans préfixe : le lien sert aussi hors du bloc Solia (carte des points
   d'échange, notamment). */
.lien-discret {
  display: block; width: 100%; margin-top: 9px; text-align: center;
  font-size: 12.5px; font-weight: 700; color: #6F6A8C;
  text-decoration: underline; text-underline-offset: 3px;
}
.lien-discret:hover { color: #3E2FBB; }

/* État activé : la promesse est tenue, le bloc le montre sans un mot de plus. */
.solia-offre.actif { border-color: #C9BDF3; background: linear-gradient(160deg, #F1ECFD, #FCE7F3); }
.solia-offre.actif .btn-solia::before { content: '✓ '; }

/* ---------- Fenêtre « Le mode Solia » ----------
   La fenêtre elle-même est décrite une seule fois, dans `menu.css`
   (`.tk-solia-boite`) : c'est la même des deux côtés, ouverte depuis le menu ou
   depuis l'accueil. Le caisson commun des modales ne fait donc que la porter —
   lui laisser son fond, sa largeur et sa hauteur maximales empilait deux
   fenêtres : un cadre blanc de 880 px autour d'une boîte de 360, et une hauteur
   plafonnée en `vh` que `overflow: hidden` rendait impossible à faire défiler
   sur les écrans que Safari rétrécit. */
.modal-box.solia-modal, .modal-box.pro-modal {
  width: min(360px, 100%);
  max-width: none; max-height: none;
  padding: 0; background: none; box-shadow: none; border-radius: 0;
  overflow: visible;
  /* Le caisson prend toute la hauteur restante du voile — marges comprises,
     y compris la compensation des barres de Safari portée par le `padding` du
     voile — et la boîte s'y mesure en `100%`. La boîte se dimensionnait en
     `svh` sans connaître ce padding : plus haute que l'espace réel, centrée,
     elle se faisait rogner le haut de l'affiche. Le caisson étant transparent,
     il redevient « rien » : `pointer-events: none` pour qu'un clic à côté de
     la boîte atteigne le voile et ferme la fenêtre. */
  height: 100%;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.modal-box.solia-modal > *, .modal-box.pro-modal > * { pointer-events: auto; }
/* Le panneau reçoit le focus à l'ouverture : pas d'anneau, il n'est pas actionnable. */
.modal-box.solia-modal:focus, .modal-box.pro-modal:focus { outline: none; }
/* ============================================================
   GROUPES — maquette du 5 août 2026

   Dessinée pour le téléphone : une colonne, une carte mise en avant, puis une
   liste. Le grand écran garde la même structure, simplement plus large.
   ============================================================ */

.grp-tete { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.grp-tete h1 { font-size: clamp(26px, 8vw, 34px); font-weight: 800; letter-spacing: -.03em; }
.grp-plus {
  margin-left: auto; flex: none;
  width: 44px; height: 44px; border-radius: 99px;
  background: var(--line-soft); color: var(--text);
  display: grid; place-items: center;
}
.grp-plus .ic { width: 21px; height: 21px; }

.grp-quete { display: flex; gap: 10px; margin-bottom: 16px; }
.grp-champ {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 99px; padding: 11px 18px;
}
.grp-champ .ic { width: 19px; height: 19px; color: var(--muted); flex: none; }
.grp-champ input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font: inherit; font-size: 16px;   /* sous 16 px, iOS zoome au focus */
  color: var(--text);
}
.grp-champ input::-webkit-search-cancel-button { -webkit-appearance: none; }
.grp-reglages {
  flex: none; width: 46px; height: 46px; border-radius: 14px;
  background: var(--line-soft); color: var(--text);
  display: grid; place-items: center;
}
.grp-reglages .ic { width: 19px; height: 19px; }

/* Onglets : le filet court sous toute la largeur, l'onglet actif le surcharge. */
.grp-onglets {
  display: flex; gap: 22px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
  overflow-x: auto; scrollbar-width: none;
}
.grp-onglets::-webkit-scrollbar { display: none; }
.grp-onglets button {
  flex: none; white-space: nowrap;
  padding: 10px 0 11px;
  font-size: 15px; font-weight: 600; color: var(--muted);
  border-bottom: 2.5px solid transparent; margin-bottom: -1px;
  min-height: 44px;
}
.grp-onglets button.on { color: var(--teal-600); font-weight: 700; border-color: var(--teal-600); }

.grp-titre-section { font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.grp-titre-ligne { margin: 22px 0 12px; }

/* ---- La carte à la une ---- */

.grp-une {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--line-soft); border-radius: 18px;
  padding: 16px; margin-top: 12px;
}
.grp-une-texte { flex: 1; min-width: 0; }
.grp-badge {
  display: inline-block; background: var(--teal-700); color: #fff;
  font-size: 10.5px; font-weight: 800; letter-spacing: .6px;
  padding: 5px 11px; border-radius: 99px; margin-bottom: 9px;
}
.grp-une-nom {
  display: block; font-size: 21px; font-weight: 800;
  letter-spacing: -.02em; line-height: 1.15;
}
.grp-une-nom span { display: block; font-weight: 700; }
.grp-une-desc { color: var(--muted); font-size: 13.5px; line-height: 1.4; margin-top: 8px; }
.grp-une-pied { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.grp-visages { display: inline-flex; flex: none; }
.grp-visages .avatar { border: 2px solid var(--surface); }
.grp-visages .avatar + .avatar { margin-left: -9px; }
.grp-membres { font-size: 13px; font-weight: 600; color: var(--text); }
.grp-point { color: var(--muted); }
.grp-activite { font-size: 13px; font-weight: 700; }
.act-forte { color: var(--teal-600); }
.act-moyenne { color: var(--orange); }
.act-calme { color: var(--muted); }

.grp-une-cote { display: flex; flex-direction: column; gap: 10px; flex: none; width: 132px; }
.grp-une-ph {
  display: block; height: 108px; border-radius: 14px;
  background: var(--line); background-size: cover;
}

/* ---- La liste ---- */

.grp-liste { display: flex; flex-direction: column; gap: 12px; }
.grp-ligne {
  display: flex; align-items: center; gap: 13px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 13px;
}
.grp-ligne-ph {
  flex: none; width: 74px; height: 74px; border-radius: 13px;
  background: var(--line); background-size: cover;
}
.grp-ligne-texte { flex: 1; min-width: 0; }
.grp-ligne-nom { display: block; font-size: 15.5px; font-weight: 800; letter-spacing: -.01em; }
.grp-ligne-meta {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 3px; font-size: 12.5px; color: var(--muted); font-weight: 600;
}
.grp-ligne-desc {
  color: var(--muted); font-size: 12.5px; line-height: 1.35; margin-top: 5px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---- Les deux boutons d'adhésion ---- */

.grp-btn-plein, .grp-btn-creux {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 99px; font-weight: 700; font-size: 14px;
  min-height: 44px; padding: 11px 16px; text-align: center;
}
.grp-btn-plein { background: var(--teal-700); color: #fff; width: 100%; }
.grp-btn-creux {
  flex: none; background: none; border: 1.5px solid var(--teal-500);
  color: var(--teal-600); font-size: 13.5px; padding: 10px 15px;
}
.grp-btn-plein.est-membre, .grp-btn-creux.est-membre {
  background: var(--green-soft); border-color: transparent; color: var(--green); cursor: default;
}

/* Sur écran étroit, la vignette et le bouton de la carte à la une prennent
   toute la largeur : à 132 px de colonne, le texte n'a plus de place. */
@media (max-width: 480px) {
  .grp-une { flex-direction: column; }
  .grp-une-cote { width: 100%; flex-direction: row-reverse; align-items: center; }
  .grp-une-ph { flex: none; width: 96px; height: 76px; }
  .grp-btn-plein { flex: 1; }
  .grp-ligne { flex-wrap: wrap; }
  .grp-ligne-texte { flex: 1 1 140px; }
  .grp-btn-creux { flex: 1 1 100%; }
}

/* ---- Les groupes dans la messagerie ----
   Un groupe rejoint apparaît comme une conversation à plusieurs : il lui faut
   dire qui parle, ce qu'une conversation à deux n'a pas besoin de préciser. */
.conv-item .n .conv-tag {
  font-weight: 600; font-size: 11px; color: var(--muted);
  background: var(--line-soft); border-radius: 99px; padding: 2px 7px; flex: none;
}
.msg .msg-auteur {
  font-size: 11.5px; font-weight: 700; color: var(--teal-600);
  margin-bottom: 3px; padding-left: 2px;
}
/* Le fil de groupe reprend les bulles de la conversation à deux — les siennes
   à droite, celles des autres à gauche. Sans ces règles, le fil s'affichait en
   texte nu, tout à gauche, impossible de savoir qui parlait. */
.msg { max-width: 62%; align-self: flex-start; }
.msg.me { align-self: flex-end; }
.msg .bulle {
  border-radius: 14px; border-bottom-left-radius: 4px;
  padding: 10px 14px; font-size: 13px;
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(34,48,46,.05);
  overflow-wrap: anywhere;
}
.msg.me .bulle {
  background: var(--chat-me); border: 0;
  border-radius: 14px; border-bottom-right-radius: 4px;
}
.msg .stamp { font-size: 10px; color: var(--muted); margin-top: 3px; padding-left: 2px; }
.msg.me .stamp, .msg.me .msg-auteur { text-align: right; padding-right: 2px; }

/* ---------- Le tableau de bord de l'administration ---------- */
.adm-bord { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.adm-tuile {
  background: var(--surface); border-radius: 14px; padding: 16px 14px;
  box-shadow: 0 2px 10px rgba(6, 16, 40, .05);
}
.adm-tuile b { display: block; font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.adm-tuile span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
/* Ce qui attend une décision se signale : signalements ouverts, demandes. */
.adm-tuile.alerte { outline: 2px solid #F5500F33; }
.adm-tuile.alerte b { color: #F5500F; }

/* ---------- La communauté Solia (maquette CEO du 11 août 2026) ----------
   Le groupe « La communauté Solia » porte cette page au lieu de la page de
   groupe ordinaire : mêmes données, autre habillage. Le violet est celui du
   mode Solia (#4232B8), les pastilles des catégories viennent de la maquette. */
.sc-page { max-width: 640px; }
.sc-titre { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.sc-sous { color: #6F6A8C; font-size: 14.5px; margin: 2px 0 12px; }
.sc-membres { display: flex; align-items: center; gap: 9px; font-size: 14px; margin-bottom: 14px; }
.sc-avatars { display: inline-flex; }
.sc-avatars .avatar { border: 2px solid var(--surface); }
.sc-avatars .avatar + .avatar { margin-left: -8px; }
.btn.sc-publier {
  display: flex; width: 100%; justify-content: center; align-items: center; gap: 9px;
  background: var(--sc-accent); color: #fff; font-weight: 800; font-size: 15px;
  border-radius: 14px; padding: 15px; margin-bottom: 12px;
}
.btn.sc-publier:hover { filter: brightness(.92); }
.btn.sc-publier .ic { width: 18px; height: 18px; }
.sc-quete {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 14px; margin-bottom: 10px;
}
.sc-quete .ic { width: 18px; height: 18px; color: var(--muted); flex: none; }
.sc-quete input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 16px; }
.sc-quete input::-webkit-search-cancel-button { -webkit-appearance: none; }
.sc-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-bottom: 12px; padding-bottom: 2px; }
.sc-chips::-webkit-scrollbar { display: none; }
.sc-chips button {
  flex: none; display: flex; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 99px;
  padding: 9px 14px; font-size: 13px; font-weight: 700; color: var(--text);
}
.sc-chips button .ic { width: 14px; height: 14px; }
.sc-chips button.on { background: var(--sc-accent); border-color: var(--sc-accent); color: #fff; }
.sc-cats {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  padding: 14px 8px; margin-bottom: 6px;
}
.sc-cats button { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; }
.sc-cats .rond { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; }
.sc-cats .rond .ic { width: 22px; height: 22px; }
.sc-cats .mot { font-size: 11.5px; font-weight: 600; line-height: 1.2; text-align: center; }
.sc-cats button.on .rond { outline: 2.5px solid var(--sc-accent); outline-offset: 2px; }
.sc-carte {
  background: var(--surface); border-radius: 16px; padding: 16px;
  box-shadow: 0 2px 10px rgba(6, 16, 40, .05); margin-bottom: 12px;
}
.sc-pill {
  display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
  border-radius: 99px; padding: 5px 11px; margin-bottom: 9px;
}
.sc-carte h3 { font-size: 16.5px; font-weight: 800; letter-spacing: -.01em; }
.sc-meta { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12.5px; margin: 4px 0 8px; }
.sc-meta .ic { width: 13px; height: 13px; flex: none; }
.sc-texte { color: #56605E; font-size: 14px; line-height: 1.45; margin-bottom: 12px; }
.sc-pied { display: flex; align-items: center; gap: 10px; }
.sc-qui { flex: 1; min-width: 0; font-size: 14px; }
.sc-reps { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12px; margin-top: 2px; }
.sc-reps .ic { width: 13px; height: 13px; }
.btn.sc-repondre { background: var(--sc-accent); color: #fff; font-weight: 700; border-radius: 12px; padding: 10px 18px; flex: none; }
.btn.sc-repondre:hover { background: #372998; }
button.sc-membres { cursor: pointer; }
.sc-membres .sc-oeil { width: 16px; height: 16px; color: var(--muted); }
.sc-liste-membres { display: flex; flex-direction: column; }
.sc-membre {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 4px; text-decoration: none; color: inherit;
  border-top: 1px solid var(--line-soft);
}
.sc-membre:first-child { border-top: 0; }
.sc-membre .qui { flex: 1; min-width: 0; }
.sc-membre .qui b { display: block; font-size: 14px; }
.sc-membre .qui span { display: block; font-size: 12px; color: var(--muted); }
.sc-membre > .ic { width: 14px; height: 14px; color: var(--muted); flex: none; }

.sc-choix-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-choix-cats button {
  display: flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--line); border-radius: 99px; padding: 5px 13px 5px 5px;
  font-size: 13px; font-weight: 700;
}
.sc-choix-cats button .rond { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; }
.sc-choix-cats button .rond .ic { width: 15px; height: 15px; }
.sc-choix-cats button.on { border-color: var(--sc-accent); background: color-mix(in srgb, var(--sc-accent) 10%, #fff); }

/* Choix à deux cartes, en remplacement d'un menu déroulant : sur téléphone le
   menu natif s'ouvre par-dessus le formulaire, décalé et illisible. */
.choix-cartes { display: grid; gap: 8px; }
.choix-cartes button {
  text-align: left; padding: 12px 14px; min-height: 44px;
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
}
.choix-cartes button b { display: block; font-size: 14px; font-weight: 800; }
.choix-cartes button span { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.choix-cartes button.on { border-color: var(--teal-800); background: var(--pill-teal-bg); }
.choix-cartes button.on b { color: var(--teal-800); }

/* Portrait par défaut : une silhouette, pas des initiales sur aplat vif. Le
   trait suit la couleur du texte, posée en ligne selon le nom. */
.avatar.avatar-vide { padding: 0; overflow: hidden; }
.avatar.avatar-vide svg { width: 62%; height: 62%; display: block; }

/* ---- La page d'un groupe, depuis le parcours de création du 16 août 2026 ----
   Couverture, avatar rond qui la chevauche, catégories et règles : ce que la
   création promet, le groupe le montre. */
.grp-couv { height: 132px; margin: 0 -1px; background: var(--line-soft) center/cover no-repeat; }
.grp-rond {
  width: 68px; height: 68px; margin: -34px 0 8px; border-radius: 50%;
  border: 4px solid var(--surface); background: var(--line-soft) center/cover no-repeat;
  position: relative;
}
.grp-cats { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.grp-cats span { padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.grp-regles { margin: 10px 0 0 18px; padding: 0; color: #56605E; font-size: 13.5px; line-height: 1.8; }
/* L'étiquette d'une publication : la même pastille que dans l'en-tête, en plus
   petit — on reconnaît la catégorie sans relire son nom. */
.grp-etiq { padding: 2px 8px 3px; border-radius: 999px; font-size: 10.5px; font-weight: 700; margin-left: 6px; }
/* Le choix de la catégorie au-dessus du champ : les couleurs du groupe, et
   celle qui est choisie se remplit. */
.grp-choix-cat { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 14px 4px; }
.grp-choix-cat button {
  padding: 6px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
}
.grp-choix-cat button.on { background: var(--f); color: var(--t); border-color: transparent; }

/* ---- Un groupe ordinaire porte les couleurs du site ----
   Le rendu vient de la communauté Solia (Rayan, 16 août 2026 : « recopie tout
   comme Solia, à part les couleurs »). Son violet devient une variable : la
   communauté le garde, les autres groupes prennent le teal de la marque. */
/* L'accent vit sur la racine, pas sur la page : une fenêtre de publication est
   posée à la fin du `body`, hors de `.sc-page` — la variable ne l'atteignait
   pas, et son bouton « Publier » se retrouvait blanc sur blanc.

   Il suit donc le thème, comme le reste du site : violet en mode Solia, teal
   partout ailleurs. La communauté reste violette pour celles qui y sont. */
:root { --sc-accent: var(--teal-700); }
:root[data-theme="solia"] { --sc-accent: #4232B8; }
.sc-page.groupe .sc-sous { color: var(--muted); }

/* La couverture et l'avatar du groupe, en tête de sa page. */
.sc-couv {
  height: 140px; border-radius: 16px; margin-bottom: 12px;
  background: var(--line-soft) center/cover no-repeat;
}
.sc-rond {
  width: 68px; height: 68px; margin: 0 0 10px; border-radius: 50%;
  border: 4px solid var(--surface); background: var(--line-soft) center/cover no-repeat;
  position: relative;
}
/* Il ne chevauche que s'il a quelque chose à chevaucher : sans couverture, la
   remontée le faisait passer par-dessus le lien « Tous les groupes ». */
.sc-couv + .sc-rond { margin-top: -46px; }
.sc-note { color: var(--muted); font-size: 13px; margin: 4px 0 12px; }
.sc-arbitrage { display: flex; gap: 8px; margin-top: 10px; }