/* ═══════════════════════════════════════════════
   HEADER
═══════════════════════════════════════════════ */
.header {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  /* position: sticky; */
  top: 0;
  z-index: var(--z-header);
}

.header-main {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 13px 24px;
  transition: padding .2s ease;
}

/* Header intelligent (accueil, js : initSmartHeader) : collant, masqué quand on descend,
   de retour dès qu'on remonte. */
/* Pas de will-change ni de transform au repos : ils feraient du header le repère des menus
   mobiles en position: fixed, ancrés au viewport. */
body.header--smart .header {
  position: sticky;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), box-shadow .3s ease;
}

body.header--smart.header--hidden .header {
  transform: translateY(-100%);
}

/* Ombre seulement une fois le header détaché du haut de page, pour le séparer du fil. */
body.header--smart.header--scrolled .header {
  box-shadow: 0 6px 18px -14px rgba(0, 0, 0, .35);
}

@media (prefers-reduced-motion: reduce) {
  body.header--smart .header {
    transition: none;
  }
}

body.header--compact .header-main {
  padding-top: 6px;
  padding-bottom: 6px;
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-decoration: none;
  width: 180px;
}

/* Nav links left (Accueil) */
.nav-left {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}

.nav-link-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 5px 14px;
  border-radius: var(--radius);
  color: var(--text3);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--transition-base);
  position: relative;
  background: none;
  border: none;
}

/* Icônes de la barre : même boîte de 22 px quelle que soit la largeur du glyphe. */
.nav-link-icon .nav-icon {
  width: 22px;
  height: 22px;
  font-size: 20px;
  line-height: 22px;
  text-align: center;
}

/* Soulignement de la page courante, collé au bas du header (voir .nav-right).
   Limité aux liens : sur un bouton (cloche), .active signale un menu ouvert. */
a.nav-link-icon.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 3px;
  border-radius: 2px 2px 0 0;
  background: var(--g);
}

.nav-link-icon svg {
  width: 21px;
  height: 21px;
  fill: var(--text2);
}

.nav-link-icon:hover,
.nav-link-icon.active {
  color: var(--g);
}

.nav-link-icon:hover svg,
.nav-link-icon.active svg {
  fill: var(--g);
}

/* Search bar */
.header-search-bar {
  flex: 1;
  max-width: 520px;
  box-shadow: none !important;
}

/* Nav right */
.nav-right {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  flex-shrink: 0;
}

/* Sur une seule ligne, le bloc s'étire sur toute la hauteur du header (marges
   négatives = padding de .header-main) : le soulignement de la page courante
   vient ainsi se poser sur la bordure basse, et les menus s'ouvrent sous la barre. */
@media (min-width: 861px) {
  .nav-right {
    align-self: stretch;
    margin-block: -13px;
  }

  body.header--compact .nav-right {
    margin-block: -6px;
  }

  .nav-right>.nav-menu {
    display: flex;
    align-items: center;
    align-self: stretch;
  }

  .nav-right>.nav-link-icon,
  .nav-right>.nav-menu>.nav-link-icon {
    align-self: stretch;
  }

  .nav-right>.nav-menu>.nav-menu-panel {
    top: calc(100% + 6px);
  }
}

/* Séparateur entre les icônes et le compte */
.nav-div {
  width: 1px;
  height: 28px;
  margin: 0 9px;
  background: var(--border);
  flex-shrink: 0;
}

/* Bouton du compte : avatar de l'identité active + chevron */
.nav-account {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px 4px 4px;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  background: none;
  cursor: pointer;
  transition: background var(--transition-base), border-color var(--transition-base);
}

.nav-account:hover,
.nav-account.open {
  background: var(--bg);
  border-color: var(--border);
}

.nav-account .ap-avatar {
  border: none;
  box-shadow: none;
}

.nav-account-caret {
  font-size: 14px;
  color: var(--text3);
  transition: transform var(--transition-base);
}

.nav-account.open .nav-account-caret {
  transform: rotate(180deg);
}

/* Sub-nav / category bar */
.header-subnav {
  border-top: 1px solid var(--border);
  background: var(--white);
}

body.header--compact .header-subnav {
  border-top-color: transparent;
}

.subnav-inner {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 24px;
  overflow-x: auto;
  overflow-y: hidden;
  min-height: 0;
}

.subnav-inner::-webkit-scrollbar {
  display: none;
}

.subnav-cat {
  font-size: 13px;
  font-weight: 500;
  color: var(--text2);
  padding: 10px 0;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--transition-base);
  background: none;
  border: none;
}

.subnav-cat:hover {
  color: var(--g);
}

.subnav-dot {
  color: var(--text4);
  font-size: 13px;
  padding: 0 8px;
  flex-shrink: 0;
}

.subnav-promo {
  margin-left: auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--g);
  white-space: nowrap;
  padding: 10px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}

.fa-1-5x {
  font-size: 1.5em;
}

/* ── Header — Responsive ── */
@media (max-width: 860px) {
  .header-main {
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 16px;
  }

  .logo {
    width: 130px;
  }

  .header-search-bar {
    order: 3;
    flex-basis: 100%;
    max-width: 100%;
    min-width: 0;
    max-height: 64px;
    opacity: 1;
    transition: max-height .25s ease, opacity .2s ease;
  }

  /* overflow: hidden seulement quand la barre se replie : au repos il rognait le menu de
     portée (.scope-panel), qui s'ouvre sous la barre, hors de sa boîte, et le rendait
     invisible sur mobile. */
  body.header--compact .header-search-bar {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
  }

  .subnav-inner {
    padding: 0 16px;
  }

  /* Le bottom-sheet mobile de .loc-panel vivait ici, mais cette règle précède
     la définition de base du composant (plus bas dans le fichier) : à
     spécificité égale c'est la dernière déclarée qui gagne, donc elle n'a
     jamais pris effet. Elle a été déplacée juste après cette définition. */
}

@media (max-width: 560px) {
  .header-main {
    padding: 8px 12px;
    gap: 8px;
  }

  .logo {
    width: 110px;
  }

  /* Masque les libellés sous les icônes de nav. Surtout pas via font-size: 0
     sur le conteneur : les icônes Font Awesome sont des glyphes dimensionnés
     en em (fa-2x = 2em), ils tomberaient eux aussi à 0 et disparaîtraient. */
  .nav-link-icon {
    padding: 0 10px;
    min-height: 44px;
  }

  .nav-right {
    gap: 2px;
  }

  .nav-div {
    margin: 0 5px;
  }

  .nav-account {
    padding: 4px;
  }

  .nav-account-caret {
    display: none;
  }

  .nav-link-icon .nav-link-label {
    display: none;
  }

  .nav-right .btn {
    padding: 0 12px;
    font-size: 12px;
  }

  /* Barre de recherche compacte : le séparateur saute, mais la localisation
     et le bouton restent — réduits à leur icône. Les masquer supprimait tout
     filtrage géographique sur mobile, alors que .loc-panel a justement un
     rendu bottom-sheet prévu pour cette taille d'écran. */
  .header-search-bar .search-unified-sep {
    display: none;
  }

  .header-search-bar .loc-trigger {
    padding: 12px 10px;
  }

  .header-search-bar .loc-trigger>div {
    display: none;
  }

  .header-search-bar .search-unified-btn {
    padding: 0;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .header-search-bar .search-unified-btn-icon {
    display: inline-block;
  }

  .header-search-bar .search-unified-btn-label {
    display: none;
  }

  .header-search-bar .search-unified-metier {
    padding: 0 4px 0 10px;
  }
}

/* ═══════════════════════════════════════════════
   PAGES
═══════════════════════════════════════════════ */
.page {
  min-height: calc(100vh - var(--header-h));
}

/* ═══════════════════════════════════════════════
   HOME PAGE
═══════════════════════════════════════════════ */
.home-layout {
  max-width: 1320px;
  margin: 0 auto;
  padding: 28px 24px 60px;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 28px;
  align-items: start;
}

/* Feed section title */
.feed-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  color: var(--text);
  margin-bottom: 16px;
  line-height: 1.1;
}

/* ── Artisan activity feed ── */
.artisan-feed {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.artisan-post {
  background: white;
  border-radius: 10px;
  border: 1px solid var(--border);
  overflow: hidden;
  transition: box-shadow var(--transition-base);
}

.artisan-post:hover {
  box-shadow: var(--shadow2);
}

.artisan-post-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 10px;
}

.artisan-post-info {
  flex: 1;
  min-width: 0;
}

.artisan-post-name {
  font-weight: 700;
  font-size: 14px;
}

.artisan-post-trade {
  font-size: 12px;
  color: var(--g);
  font-weight: 600;
}

.artisan-post-date {
  font-size: 11px;
  color: var(--text4);
  margin-left: auto;
}

.artisan-post-content {
  padding: 0 16px 10px;
}

.artisan-post-caption {
  font-size: 13px;
  color: var(--text2);
  line-height: 1.6;
  margin-bottom: 10px;
}

.artisan-post-images {
  display: grid;
  gap: 3px;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 10px;
}

.artisan-post-images.one {
  grid-template-columns: 1fr;
}

.artisan-post-images.two {
  grid-template-columns: 1fr 1fr;
}

.artisan-post-images.three {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.post-img {
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  position: relative;
  overflow: hidden;
}

.post-img.tall {
  grid-row: 1 / 3;
  aspect-ratio: auto;
  min-height: 200px;
}

.artisan-post-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
}

.post-action {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text3);
  font-weight: 500;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background var(--transition-fast);
}

.post-action:hover {
  background: var(--bg);
  color: var(--text);
}

.post-action svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

/* Trust button */
.trust-btn {
  display: flex;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 6px;
  transition: color .2s, background .15s;
  position: relative;
  user-select: none;
}

.trust-btn:hover {
  background: var(--bg);
}

.trust-btn.trusted {
  color: var(--color-primary-600);
}

.trust-btn .trust-icon {
  width: 24px;
  height: 24px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Au-dessus du halo et des ondes ; visible au-delà de son cadre, que le lotus dépasse un peu
   et que l'éclosion fait grandir. */
.trust-btn .trust-icon svg {
  position: relative;
  z-index: 1;
  overflow: visible;
}

/* Version « hero » (en-tête de fiche) : même hauteur que les .btn voisins, teinte verte douce
   qui se remplit une fois la confiance donnée. Le bouton reste cliquable avant, et désactivé
   (donc sans survol) après. */
.trust-btn--hero {
  gap: 8px;
  height: 38px;
  padding: 0 6px 0 12px;
  border: 1.5px solid var(--color-primary-600);
  border-radius: var(--radius-md, 10px);
  background: var(--color-primary-50);
  color: var(--color-primary-700);
  font-size: var(--text-sm, 14px);
  font-weight: 600;
  white-space: nowrap;
  transition: background .15s, color .15s, box-shadow .15s, transform .1s;
}

.trust-btn--hero:hover:not(:disabled) {
  background: var(--color-primary-100);
  box-shadow: 0 2px 8px rgba(29, 85, 30, .18);
}

.trust-btn--hero:active:not(:disabled) {
  transform: translateY(1px);
}

.trust-btn--hero:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(29, 85, 30, .22);
}

.trust-btn--hero .trust-pill {
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #fff;
  color: var(--color-primary-700);
  font-size: 13px;
  font-weight: 700;
}

.trust-btn--hero.trusted {
  background: var(--color-primary-700);
  border-color: var(--color-primary-700);
  color: #fff;
  cursor: default;
}

.trust-btn--hero.trusted:disabled {
  opacity: 1;
}

/* Éclosion du lotus, au clic seulement (trust-btn--bloom) : un post déjà trusté s'affiche
   ouvert, sans rejouer l'animation à chaque chargement du fil. Chaque pétale s'ouvre depuis la
   base du lotus (32, 48 dans le dessin) : le central, puis les intérieurs, puis les extérieurs. */
.trust-petal {
  transform-box: view-box;
  transform-origin: 32px 48px;
}

.trust-btn--bloom .trust-petal {
  animation: trust-bloom .75s cubic-bezier(.34, 1.56, .64, 1) var(--delay) both;
}

/* Pas de couleur à 100 % : le pétale finit dans celle du bouton, verte une fois trusté. */
@keyframes trust-bloom {
  0% {
    transform: rotate(var(--fold)) scale(.25);
    color: var(--text);
  }

  55% {
    transform: rotate(calc(var(--fold) * -.18)) scale(1.22);
    color: var(--color-primary-600);
  }

  100% {
    transform: none;
  }
}

/* Le lotus entier se soulève pendant que ses pétales s'ouvrent. */
.trust-btn--bloom .trust-icon svg {
  animation: trust-lift .8s cubic-bezier(.34, 1.56, .64, 1) both;
}

@keyframes trust-lift {
  0% {
    transform: scale(1);
  }

  40% {
    transform: scale(1.2);
  }

  75% {
    transform: scale(.96);
  }

  100% {
    transform: scale(1);
  }
}

/* Halo vert diffus et double onde, partis du lotus lui-même. */
.trust-glow,
.trust-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.trust-glow {
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  background: radial-gradient(circle, rgba(76, 175, 80, .45) 0%, rgba(76, 175, 80, 0) 70%);
}

.trust-ring {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 2px solid var(--color-primary-400);
}

.trust-ring--late {
  border-width: 1.5px;
}

.trust-btn--bloom .trust-glow {
  animation: trust-glow .8s ease-out .05s both;
}

.trust-btn--bloom .trust-ring {
  animation: trust-ripple .75s ease-out .1s both;
}

.trust-btn--bloom .trust-ring--late {
  animation: trust-ripple-late .9s ease-out .28s both;
}

@keyframes trust-glow {
  0% {
    transform: scale(.5);
    opacity: 0;
  }

  35% {
    opacity: 1;
  }

  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

@keyframes trust-ripple {
  0% {
    transform: scale(.4);
    opacity: .6;
  }

  100% {
    transform: scale(1.9);
    opacity: 0;
  }
}

@keyframes trust-ripple-late {
  0% {
    transform: scale(.4);
    opacity: .4;
  }

  100% {
    transform: scale(2.3);
    opacity: 0;
  }
}

/* Le compteur monte : le nouveau nombre arrive par en dessous. */
.trust-num {
  display: inline-block;
}

.trust-num--roll {
  animation: trust-roll .4s cubic-bezier(.2, .8, .3, 1) .15s both;
}

@keyframes trust-roll {
  0% {
    transform: translateY(70%);
    opacity: 0;
  }

  100% {
    transform: none;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {

  .trust-btn--bloom .trust-petal,
  .trust-btn--bloom .trust-icon svg,
  .trust-btn--bloom .trust-glow,
  .trust-btn--bloom .trust-ring,
  .trust-num--roll {
    animation: none;
  }
}

.post-tag {
  margin-left: auto;
}

.post-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  padding: 3px 10px;
  max-width: 100%;
  overflow-wrap: anywhere;
  border-radius: var(--radius-full);
  background: var(--color-primary-50);
  color: var(--color-primary-700);
  border: 1px solid var(--color-primary-100);
  cursor: pointer;
  transition: background-color var(--transition-base), border-color var(--transition-base);
}

.post-tag-chip:hover {
  background: var(--color-primary-100);
  border-color: var(--color-primary-300);
}

/* ── Feed tabs ── */
.feed-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
  padding: 4px;
  background: var(--bg);
  border-radius: 10px;
  border: 1px solid var(--border);
  width: fit-content;
}

.feed-tab {
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-display);
  padding: 6px 14px;
  border-radius: 7px;
  cursor: pointer;
  border: none;
  background: none;
  color: var(--text3);
  transition: all var(--transition-base);
}

.feed-tab.active {
  background: white;
  color: var(--g);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}

.feed-tab:not(.active):hover {
  color: var(--text);
}

/* ── Unified feed ── */
.main-feed {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Post type badge */
.post-type-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: var(--font-bold);
  padding: 2px 7px;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  margin-left: var(--space-2);
  vertical-align: middle;
  white-space: nowrap;
}

.post-type-badge.realisation {
  background: var(--color-info-bg);
  color: var(--color-info-text);
  border-color: var(--color-info-border);
}

.post-type-badge.temoignage {
  background: var(--color-success-bg);
  color: var(--color-success-text);
  border-color: var(--color-success-border);
}

/* ── Community feed ── */
.community-feed {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 32px;
}

.community-post {
  background: white;
  border-radius: 10px;
  border: 1px solid var(--border);
  padding: 16px;
  transition: box-shadow var(--transition-base);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.community-post:hover {
  box-shadow: var(--shadow2);
}

.community-post-header {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

/* min-width: 0 : sans lui, un nom sans espace empêche la colonne de se resserrer et pousse le
   bouton « … » hors de la carte. */
.community-post-meta {
  flex: 1;
  min-width: 0;
}

.community-post-name {
  font-weight: 700;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.community-post-sub {
  font-size: 12px;
  color: var(--text3);
  margin-top: 1px;
}

.community-post-artisan {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--g-light);
  color: var(--g);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  margin-top: 6px;
  cursor: pointer;
}

/* La légende, les tags et les commentaires sont saisis librement : une adresse ou un mot sans
   espace ne doit pas déborder de la carte. */
/* Publication fantôme du premier chargement de l'accueil. */
.community-post--skel {
  gap: 10px;
}

.community-post--skel .community-post-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 6px;
}

.community-post-skel-media {
  height: 180px;
  border-radius: 8px;
}

.community-post-skel-footer {
  display: flex;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.community-post-text {
  font-size: 13px;
  color: var(--text2);
  line-height: 1.65;
  overflow-wrap: anywhere;
  /* Les retours à la ligne saisis sont conservés (le HTML les réduit sinon à une espace). */
  white-space: pre-line;
}

/* Photo seule : ses proportions, sans rognage ni agrandissement. L'image ne dépasse ni la largeur
   de la carte ni sa taille d'origine (une image de 500 px n'est pas étirée à 1200 px), et sa
   hauteur est plafonnée pour qu'une photo en pied ne prenne pas tout l'écran. Si elle est plus
   étroite que la carte, elle est centrée sur un fond neutre. */
.community-post-photo {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: 12px;
  padding: 0;
  border: none;
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-neutral-100);
  cursor: zoom-in;
  font: inherit;
}

.community-post-photo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(70vh, 560px);
}

/* Plusieurs photos : une grille de tuiles. Des rapports de forme plutôt que des hauteurs fixes
   (180 px de haut quelle que soit la largeur), plafonnés pour qu'une grille 2 x 2 ne dépasse
   pas l'écran sur une colonne large. Le rognage (cover) ne retire alors que des bords. */
.community-post-media-grid {
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
  border-radius: 8px;
  overflow: hidden;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.community-post-img {
  position: relative;
  display: block;
  /* Largeur explicite : avec width: auto, le plafond de hauteur (max-height) rétrécit aussi la largeur
     par le jeu de aspect-ratio, et les tuiles ne remplissent plus leur colonne. */
  width: 100%;
  padding: 0;
  border: none;
  overflow: hidden;
  background: var(--bg);
  cursor: zoom-in;
  font: inherit;
  aspect-ratio: 4 / 3;
  max-height: 300px;
}

.community-post-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Trois photos : la première en bandeau, les deux autres dessous. */
.community-post-media-grid.count-3 .community-post-img:first-child {
  grid-column: 1 / -1;
  aspect-ratio: 2 / 1;
  max-height: 340px;
}

/* Photos au-delà de la quatrième : le nombre qui reste, sur la dernière tuile. */
.community-post-more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .5);
  color: var(--color-neutral-0);
  font-size: 26px;
  font-weight: var(--font-extrabold);
  pointer-events: none;
}

@media (max-width: 600px) {
  .community-post-img {
    aspect-ratio: 1 / 1;
  }
}

.community-post-stars {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-bottom: 10px;
}

.community-post-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.community-post-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.comments-preview {}

.comments-spacer {
  margin-top: 8px;
}

.comments-empty {
  font-size: 13px;
  color: var(--text3);
  font-style: italic;
}

.comment {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.comment:last-child {
  margin-bottom: 0;
}

.comment--reply {
  margin-left: 38px;
}

.comment--reply-2 {}

/* ── Fil d'une société : conversation ────────────────────────────
   Les messages signés par la société se placent à droite, ceux des visiteurs à gauche.
   Réservé à ce fil : les commentaires sous une publication restent alignés à gauche. */
.comments-preview--conversation .comment {}

/* La bulle épouse son contenu au lieu d'occuper toute la largeur, sans quoi les deux
   côtés se rejoindraient au milieu et l'alignement ne se verrait plus. */
.comments-preview--conversation .comment-bubble {}

.comments-preview--conversation .comment--pro .comment-bubble {
  background: var(--g-lighter);
}

.comment-reply-row {
  margin-top: 4px;
}

.comment-reply-btn {
  border: none;
  background: transparent;
  padding: 0;
  font-size: 11px;
  font-weight: 500;
  color: var(--text4);
  cursor: pointer;
}

.comment-reply-btn:hover {
  color: var(--color-primary-700);
  text-decoration: underline;
}

.comment-input--reply {
  margin-left: 38px;
  margin-top: 6px;
  margin-bottom: 6px;
}

.comment-input--reply-2 {
  margin-left: 72px;
}

.comment-deleted {
  font-size: 12px;
  font-style: italic;
  color: var(--text4);
}

.comment-bubble {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  background: var(--bg);
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text2);
  line-height: 1.5;
}

.comment-name {
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}

.comment-verified-client {
  color: var(--g);
  font-size: 0.85em;
  margin-left: 4px;
}

.comment-post-context {
  font-size: 11px;
  font-style: italic;
  color: var(--text4);
  margin-bottom: 4px;
}

.comment-actions {
  display: flex;
  gap: 2px;
  align-items: flex-start;
  flex-shrink: 0;
}

.comment-action-btn {
  border: none;
  background: transparent;
  padding: 0;
  font-size: 11px;
  font-weight: 500;
  color: var(--text4);
  cursor: pointer;
}

.comment-action-btn:hover {
  color: var(--color-primary-700);
  text-decoration: underline;
}

.comment-edit-actions {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

.comment-edit-btn {
  border: none;
  background: transparent;
  padding: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-primary-700);
  cursor: pointer;
}

.comment-edit-btn:hover {
  text-decoration: underline;
}

.comment-edit-btn:disabled {
  color: var(--text4);
  cursor: default;
  text-decoration: none;
}

.comment-input {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  align-items: center;
}

/* Bulle de saisie : c'est elle qui porte la bordure, pour loger le sélecteur d'identité à
   gauche du champ, comme le filtre de la recherche du header. */
.comment-field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--color-neutral-50);
  transition: border-color .2s, background-color .2s;
}

.comment-field:focus-within {
  border-color: var(--color-primary-700);
  background: var(--color-neutral-0);
}

.comment-field input,
.comment-field input:focus,
.comment-field input:disabled {
  flex: 1;
  min-width: 0;
  height: 36px;
  border: none;
  box-shadow: none;
  background: transparent;
  padding: 0 12px;
  font-size: 13px;
  color: var(--text2);
  outline: none;
}

/* Barre de commentaire flottante (CommentThread FloatingInput) : fixée en bas de l'écran.
   La bande qui l'entoure laisse passer les clics ; seule la barre les capte. */
.comment-float {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-sticky);
  padding: 0 16px calc(16px + env(safe-area-inset-bottom));
  pointer-events: none;
}

.comment-float .comment-input,
.comment-float .upgrade-notice {
  pointer-events: auto;
  margin-top: 0;
  padding: 8px;
  background: var(--color-neutral-0);
  border: 1px solid var(--color-neutral-200);
  border-radius: 28px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .14);
}

/* L'encart « compte pro requis » remplace la saisie dans la barre : même gabarit, mais ses
   boutons doivent rester cliquables malgré la bande transparente. */
.comment-float .upgrade-notice {
  margin-bottom: 0;
  padding: 10px 14px;
  border-radius: 20px;
}

/* La barre est en bas de l'écran : le menu d'identité s'ouvre vers le haut. */
.comment-float .scope-panel {
  top: auto;
  bottom: calc(100% + 10px);
}

/* Sélecteur d'identité logé dans la bulle de saisie */
.identity-filter {
  position: relative;
  flex-shrink: 0;
  padding-left: 4px;
}

.identity-trigger {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border: none;
  border-radius: 16px;
  background: transparent;
  padding: 3px 4px;
  color: var(--color-neutral-400);
  font-size: 11px;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.identity-trigger:hover:not(:disabled) {
  background: var(--color-neutral-25);
  color: var(--color-neutral-900);
}

.identity-panel {
  width: 240px;
}

.identity-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.identity-option-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comment-send {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--g);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.post-button {
  background: rgba(0, 0, 0, 0.03);
  border-radius: 6px;
  border: none;
  padding: 3px 6px;
  height: 28px;
  margin: 0;
  font-size: 12px;
  color: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all var(--transition-fast);
}

.post-button:hover {
  color: var(--g);
}

/* ── RIGHT SIDEBAR ── */
.home-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sidebar-nocard {}

.sidebar-nocard a {
  text-decoration: none;
  font-weight: 400;
  color: var(--color-primary-900);
  transition: background var(--transition-fast);
}

.sidebar-nocard a:hover {
  color: var(--color-primary-800);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sidebar-card {
  background: var(--color-neutral-0);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.sidebar-card-header {
  padding: 14px 16px 10px;
  font-weight: var(--font-extrabold);
  font-size: var(--text-base);
  font-family: var(--font-display);
  border-bottom: 1px solid var(--color-neutral-200);
}

.sidebar-artisan {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.sidebar-artisan:last-child {
  border-bottom: none;
}

.sidebar-artisan:hover {
  background: var(--g-lighter);
}

.sidebar-artisan-info {
  flex: 1;
  min-width: 0;
}

.sidebar-artisan-name {
  font-weight: 700;
  font-size: 13px;
}

.sidebar-artisan-trade {
  font-size: 11px;
  color: var(--g);
  font-weight: 600;
}

.sidebar-artisan-dist {
  font-size: 11px;
  color: var(--text4);
}

/* Ligne en attente : ni survol ni clic, deux traits gris à la place du nom et du métier. */
.sidebar-artisan--skel {
  pointer-events: none;
}

.sidebar-artisan--skel .sidebar-artisan-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.sidebar-empty {
  padding: 14px 16px;
  font-size: 12px;
  color: var(--text3);
}

.sidebar-see-all {
  display: block;
  width: 100%;
  text-align: center;
  padding: 11px;
  /* Le lien de l'accueil et le bouton de la recherche partagent ce style. */
  background: none;
  border: none;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--g);
  border-top: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.sidebar-see-all:hover {
  background: var(--g-lighter);
}

.cat-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 16px;
}

.cat-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  color: var(--text2);
  cursor: pointer;
  transition: all var(--transition-base);
}

.cat-pill:hover {
  background: var(--g-light);
  border-color: var(--g);
  color: var(--g);
}

/* ── Home sections (new layout) ── */
.home-section {
  background: var(--color-neutral-0);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-4);
}

.home-section-head {
  padding: 14px 20px 12px;
  border-bottom: 1px solid var(--color-neutral-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.home-section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.home-section-body {
  padding: 16px 20px;
}

.home-section-footer {
  padding: 10px 20px;
  border-top: 1px solid var(--border);
  text-align: right;
}

.home-see-more {
  font-size: 13px;
  color: var(--text3);
  font-weight: 600;
  cursor: pointer;
}

.home-see-more:hover {
  color: var(--g);
  text-decoration: underline;
}

.artisan-cards-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.artisan-top-card {
  background: var(--color-neutral-0);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-base);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.artisan-top-card:hover {
  border-color: var(--color-primary-700);
  box-shadow: var(--shadow-md);
}

.artisan-top-img {
  height: 155px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.artisan-top-info {
  padding: 10px 12px 12px;
}

.artisan-top-name {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 2px;
}

.artisan-top-trade {
  font-size: 11px;
  color: var(--g);
  font-weight: 600;
  margin-bottom: 5px;
}

.artisan-top-stars {
  display: flex;
  align-items: center;
  gap: 3px;
}

.sponsored-block {
  height: 110px;
  background: var(--bg);
  border-radius: 8px;
  border: 1.5px dashed var(--border2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text4);
  font-size: 13px;
  font-weight: 500;
}

/* ── Feed : cartes mises en valeur / sponsorisées ── */
.feed-featured-card {
  background: var(--color-neutral-0);
  border: 1px solid var(--color-primary-300);
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  transition: box-shadow var(--transition-base);
}

.feed-featured-card:hover {
  box-shadow: var(--shadow2);
}

.feed-featured-tag {
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  color: var(--g);
  background: var(--g-light);
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
}

.feed-featured-body {
  display: flex;
  gap: 12px;
  align-items: center;
}

.feed-featured-info {
  flex: 1;
  min-width: 0;
}

.feed-sponsored-card {
  background: var(--bg);
  border: 1.5px dashed var(--border2);
  border-radius: 10px;
  padding: 14px 16px;
}

.feed-sponsored-tag {
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  color: var(--text3);
  background: var(--color-neutral-0);
  border: 1px solid var(--border2);
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
}

.feed-sentinel {
  height: 1px;
}

.feed-loading {
  text-align: center;
  padding: 16px;
  font-size: 12px;
  color: var(--text4);
}

.comments-loading {
  text-align: center;
  padding: 10px;
  font-size: 12px;
  color: var(--text4);
}

.allcat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.allcat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all var(--transition-base);
  background: var(--bg);
  font-size: 12px;
  font-weight: 600;
  color: var(--text2);
  text-align: center;
}

.allcat-item:hover {
  background: var(--g-light);
  border-color: var(--g);
  color: var(--g);
}

.allcat-icon {
  font-size: 22px;
}

/* ═══════════════════════════════════════════════
   SEARCH PAGE
═══════════════════════════════════════════════ */
/* ── RECHERCHE ──────────────────────────────────────────────────
   Même gabarit que l'accueil : le fil à gauche, la colonne d'appoint à droite. Les
   résultats reprennent la carte du fil (.community-post), les tris la carte latérale. */
.search-layout {
  max-width: 1320px;
  margin: 0 auto;
  padding: 28px 24px 60px;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 28px;
  align-items: start;
}

.search-results-col {
  min-width: 0;
}

.search-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: calc(var(--header-h) + 20px);
}

.search-heading {
  margin-bottom: 16px;
}

.search-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.search-heading-sub {
  font-size: 13px;
  color: var(--text3);
  margin-top: 2px;
}

.search-empty {
  padding: 48px 20px;
  text-align: center;
  color: var(--text4);
  background: var(--color-neutral-0);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
}

.search-result {
  cursor: pointer;
}

.search-result-trades {
  font-size: 12px;
  color: var(--g);
  font-weight: 600;
  margin-top: 1px;
}

.search-result-score {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: var(--g-lighter);
  color: var(--g);
  font-size: 12px;
  font-weight: 700;
}

/* Deux lignes suffisent : la fiche complète est à un clic. */
.search-result-desc {
  font-size: 13px;
  color: var(--text2);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.search-result-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12px;
  color: var(--text3);
}

.search-result-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Lignes de tri : mêmes proportions que .sidebar-artisan, mais ce sont des boutons —
   d'où la remise à plat des styles par défaut. */
.sort-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.sort-row:last-child {
  border-bottom: none;
}

.sort-row:hover:not(:disabled) {
  background: var(--g-lighter);
}

.sort-row--active {
  background: var(--g-lighter);
}

.sort-row:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.sort-row-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 13px;
  background: var(--color-neutral-100);
  color: var(--text2);
}

.sort-row--active .sort-row-icon {
  background: var(--g);
  color: white;
}

.sort-row-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.sort-row-name {
  font-weight: 700;
  font-size: 13px;
}

.sort-row-state {
  font-size: 11px;
  color: var(--text4);
}

.sort-row--active .sort-row-state {
  color: var(--g);
  font-weight: 600;
}

/* Rang du critère dans le cumul. */
.sort-row-rank {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--g);
  color: white;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sort-help {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 12px;
  color: var(--text2);
  line-height: 1.5;
}

.sort-help p {
  margin: 0;
}

.search-unified {
  display: flex;
  padding: 0 3px;
  align-items: center;
  border: 1.5px solid var(--color-neutral-200);
  border-radius: 40px;
  background: white;
  max-width: 680px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
  transition: box-shadow .2s, border-color .2s;
}

.search-unified:focus-within {
  border-color: var(--color-primary-500);
  box-shadow: 0 4px 20px rgba(46, 125, 50, .12);
}

.search-unified-metier {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 4px;
}

.search-unified-metier svg {
  color: var(--color-neutral-400);
  flex-shrink: 0;
}

.search-unified-metier input {
  flex: 1;
  border: none;
  outline: none;
  padding: 12px 0;
  font-size: 14px;
  font-family: var(--font-body);
  background: transparent;
  color: var(--text);
}

.search-unified-sep {
  width: 1px;
  height: 28px;
  background: var(--color-neutral-200);
  flex-shrink: 0;
  margin: 0 2px;
}

.scope-filter {
  position: relative;
  flex-shrink: 0;
}

.scope-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--color-neutral-400);
  cursor: pointer;
  transition: background .15s, color .15s;
}

.scope-trigger:hover {
  background: var(--color-neutral-25);
  color: var(--color-neutral-900);
}

.scope-backdrop {
  position: fixed;
  inset: 0;
  z-index: 299;
  background: transparent;
  border: none;
  padding: 0;
  cursor: default;
}

.scope-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: 220px;
  z-index: 300;
  background: var(--color-neutral-0);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-xl);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .14), 0 2px 8px rgba(0, 0, 0, .08);
  padding: 6px;
  display: none;
}

.scope-panel.open {
  display: block;
}

.scope-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  border: none;
  background: transparent;
  padding: 10px 12px;
  border-radius: var(--radius-lg);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.scope-option:hover:not(.disabled) {
  background: var(--color-neutral-25);
}

.scope-option.selected {
  color: var(--color-primary-700);
}

.scope-option.disabled {
  color: var(--color-neutral-400);
  cursor: not-allowed;
}

.scope-option-soon {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-neutral-400);
}

.search-unified .loc-filter {
  flex-shrink: 0;
}

.search-unified .loc-trigger {
  border: none;
  border-radius: 0;
  background: transparent;
  border-radius: 36px;
  height: auto;
  color: var(--color-neutral-600);
  font-size: 13px;
  transition: color .15s, background .15s;
  border: 1.5px solid var(--color-neutral-200);
  background-color: var(--color-neutral-0);
}

.search-unified .loc-trigger:hover {
  background: var(--color-neutral-25);
  color: var(--color-neutral-900);
  border: 1.5px solid var(--color-neutral-400);
}

.search-unified .loc-trigger.has-city {
  color: var(--color-primary-700);
  font-weight: 600;
  background: transparent;
}

.search-unified-btn {
  background: var(--g);
  color: white;
  border: none;
  border-radius: 36px;
  padding: 10px 22px;
  margin: 4px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
}

.search-unified-btn:hover {
  background: var(--g-dark);
}

/* L'icône ne sert qu'à la version compacte mobile du bouton. */
.search-unified-btn-icon {
  display: none;
}

.view-toggle {
  display: flex;
}

.view-btn {
  border: 1px solid var(--border2);
  background: white;
  padding: 7px 10px;
  transition: all var(--transition-base);
}

.view-btn:first-child {
  border-radius: var(--radius) 0 0 var(--radius);
}

.view-btn:last-child {
  border-radius: 0 var(--radius) var(--radius) 0;
  border-left: none;
}

.view-btn.active {
  background: var(--g);
  border-color: var(--g);
}

.view-btn svg {
  width: 15px;
  height: 15px;
  fill: var(--text3);
  display: block;
}

.view-btn.active svg {
  fill: white;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: 20px 0;
}

.result-trust {
  font-size: 12px;
  color: var(--text3);
  display: flex;
  align-items: center;
  gap: 6px;
}

.result-trust-clients {
  display: flex;
  align-items: center;
}

/* Avatars en pile. Un gap négatif n'existe pas en CSS — la règle précédente était ignorée
   et les avatars restaient alignés bord à bord : le chevauchement passe par la marge. */
.result-trust-client {
  display: inline-flex;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--color-neutral-0);
}

.result-trust-client+.result-trust-client {
  margin-left: -8px;
}

.result-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}

/* ═══════════════════════════════════════════════
   PROJECTS PAGE
═══════════════════════════════════════════════ */
.projects-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 28px 24px 60px;
}

.projects-tabs {
  display: flex;
  border-bottom: 2px solid var(--border);
  margin-bottom: 22px;
}

.proj-tab {
  padding: 11px 18px;
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--text3);
  cursor: pointer;
  position: relative;
}

.proj-tab.active {
  color: var(--g);
}

.proj-tab.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--g);
}

.project-card {
  background: var(--color-neutral-0);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin-bottom: var(--space-3);
  display: flex;
  gap: var(--space-4);
}

.status-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  white-space: nowrap;
  border: 1px solid transparent;
}

.status-chip.done {
  background: var(--color-success-bg);
  color: var(--color-success-text);
  border-color: var(--color-success-border);
}

.status-chip.ongoing {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  border-color: var(--color-warning-border);
}

/* ═══════════════════════════════════════════════
   MESSAGES PAGE
═══════════════════════════════════════════════ */
.messages-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
  display: flex;
  gap: 14px;
  height: calc(100vh - 112px);
}

.conv-list {
  width: 310px;
  flex-shrink: 0;
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.conv-list-head {
  padding: 16px;
  border-bottom: 1px solid var(--border);
}

.conv-list-head h2 {
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 10px;
  font-family: var(--font-display);
}

.conv-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  border-radius: var(--radius);
  padding: 8px 12px;
}

.conv-search-bar input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 13px;
  flex: 1;
}

.conv-items {
  flex: 1;
  overflow-y: auto;
}

.conv-item {
  display: flex;
  gap: 12px;
  padding: 13px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background var(--transition-fast);
  align-items: center;
}

.conv-item:hover {
  background: var(--g-lighter);
}

.conv-item.active {
  background: var(--g-light);
}

.conv-item-body {
  flex: 1;
  min-width: 0;
}

.conv-item-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2px;
}

.conv-item-name {
  font-weight: 700;
  font-size: 13px;
}

.conv-item-time {
  font-size: 11px;
  color: var(--text4);
}

.conv-item-artisan {
  font-size: 11px;
  color: var(--g);
  font-weight: 600;
  margin-bottom: 2px;
}

.conv-item-last {
  font-size: 12px;
  color: var(--text3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.unread-dot {
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  background: var(--color-primary-700);
  color: var(--color-neutral-0);
  font-size: 9px;
  font-weight: var(--font-extrabold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.chat-area {
  flex: 1;
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-head {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
}

.chat-head-info {
  flex: 1;
}

.chat-head-name {
  font-weight: 700;
  font-size: 15px;
}

.chat-head-sub {
  font-size: 12px;
  color: var(--g);
  font-weight: 600;
}

.chat-back-btn {
  display: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--bg);
  color: var(--text2);
}

.chat-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #FAFAFA;
}

.msg-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.msg-row.me {
  flex-direction: row-reverse;
}

.msg-bubble {
  max-width: 65%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 13px;
  line-height: 1.6;
}

.msg-row.them .msg-bubble {
  background: white;
  border: 1px solid var(--border);
  border-radius: 16px 16px 16px 4px;
}

.msg-row.me .msg-bubble {
  background: var(--g);
  color: white;
  border-radius: 16px 16px 4px 16px;
}

.msg-time {
  font-size: 10px;
  color: var(--text4);
  margin-top: 3px;
}

.msg-row.me .msg-time {
  text-align: right;
}

.chat-input-bar {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
  align-items: center;
}

.chat-input-bar .input {
  flex: 1;
  width: auto;
  min-width: 0;
}

.send-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--g);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--transition-base);
}

.send-btn:hover {
  background: var(--g-dark);
}

.send-btn svg {
  width: 16px;
  height: 16px;
  fill: white;
}

@media (max-width: 1024px) {

  /* minmax(0, …) et non 1fr : 1fr vaut minmax(auto, 1fr), et la colonne s'élargit alors
     jusqu'à la largeur du plus long contenu insécable (champ « Publier » en nowrap, tag
     long). Le fil dépasse l'écran, rogné à droite par overflow-x: hidden. */
  .home-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-sidebar {
    display: none;
  }

  .search-layout {
    grid-template-columns: 1fr;
    padding: 20px 16px 40px;
  }

  /* La colonne de tri passe au-dessus des résultats : sur téléphone, elle doit rester
     atteignable sans faire défiler toute la liste. */
  .search-sidebar {
    position: static;
    order: -1;
  }

}

@media (max-width: 760px) {
  .header-subnav {
    display: none;
  }

  .messages-wrap {
    height: calc(100vh - 64px);
    padding: 0;
    gap: 0;
  }

  .conv-list {
    width: 100%;
    border: none;
    border-radius: 0;
  }

  .chat-area {
    display: none;
    border: none;
    border-radius: 0;
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
  }

  .messages-wrap.chat-open .conv-list {
    display: none;
  }

  .messages-wrap.chat-open .chat-area {
    display: flex;
  }

  .messages-wrap.chat-open .chat-back-btn {
    display: inline-flex;
  }

  .result-row {
    flex-direction: column;
  }

  .result-img {
    width: 100%;
    height: 170px;
  }
}

/* ═══════════════════════════════════════════════
   LOGIN / REGISTER PAGE
═══════════════════════════════════════════════ */
.login-wrap {
  min-height: calc(100vh - var(--header-h));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  background: var(--bg);
}

.login-card {
  background: var(--color-neutral-0);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-xl);
  padding: 44px 40px;
  width: 100%;
  max-width: 420px;
  box-shadow: var(--shadow-md);
}

.login-logo {
  text-align: center;
  height: 60px;
  text-align: center;
  display: block;
  margin: auto;
  margin-bottom: 20px;
}

.login-logo img {
  display: block;
}

.login-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 900;
  text-align: center;
  margin-bottom: 6px;
}

.login-sub {
  font-size: 14px;
  color: var(--text3);
  text-align: center;
  margin-bottom: 28px;
}

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

.login-forgot {
  text-align: right;
  margin-top: -6px;
}

.login-forgot a {
  font-size: 12px;
  color: var(--text3);
  font-weight: 500;
}

.login-forgot a:hover {
  color: var(--g);
}

.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0;
  color: var(--text4);
  font-size: 12px;
}

.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.login-switch {
  text-align: center;
  font-size: 13px;
  color: var(--text2);
  margin-top: 16px;
}

.login-switch a {
  color: var(--g);
  font-weight: 700;
}

.login-switch a:hover {
  text-decoration: underline;
}

/* Acceptation des CGU (TermsCheckbox) : inscription, première connexion externe, mise à jour. */
.terms-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text2);
  cursor: pointer;
  text-align: left;
}

.terms-check input {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  accent-color: var(--color-primary-700);
  cursor: pointer;
}

.terms-check a {
  color: var(--color-primary-700);
  font-weight: 600;
  text-decoration: underline;
}

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

.login-terms-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 900;
  color: var(--text);
  text-align: center;
}

.login-terms-text {
  margin: 0;
  font-size: 13.5px;
  color: var(--text2);
  text-align: center;
}

.login-tabs {
  display: flex;
  border: 1.5px solid var(--border2);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 28px;
}

.login-tab {
  flex: 1;
  padding: 10px;
  font-size: 13px;
  font-weight: 700;
  background: none;
  border: none;
  color: var(--text3);
  cursor: pointer;
  transition: all var(--transition-base);
}

.login-tab.active {
  background: var(--g);
  color: white;
}

.login-code-info {
  font-size: 13px;
  color: var(--text2);
  text-align: center;
  line-height: 1.6;
  margin-bottom: 20px;
}

.login-code-input {
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 10px;
  font-variant-numeric: tabular-nums;
}

.login-code-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.login-code-actions a {
  font-size: 12px;
  color: var(--text3);
  font-weight: 600;
}

.login-code-actions a:hover {
  color: var(--g);
}

/* ═══════════════════════════════════════════════
   ARTISAN PROFILE PAGE  (prefix: ap-)
═══════════════════════════════════════════════ */
#nav-messages {
  display: none;
}

/* messages: en attente backend */

.ap-wrap {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px 80px;
}

.ap-back-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0 10px;
}

.ap-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text2);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color var(--transition-base);
}

.ap-back-btn:hover {
  color: var(--g);
}

.ap-back-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.ap-breadcrumb {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text4);
}

.ap-breadcrumb a {
  color: var(--text3);
  cursor: pointer;
  transition: color var(--transition-base);
}

.ap-breadcrumb a:hover {
  color: var(--g);
}

/* Hero */
.ap-hero {
  position: relative;
  background: var(--color-neutral-0);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-5);
}

.ap-hero-cover {
  height: 110px;
}

/* Photo ou couleur choisie par le professionnel : plus haute que le dégradé par défaut pour laisser la photo respirer. */
.ap-hero-cover--custom {
  height: 170px;
}

@media (max-width: 640px) {
  .ap-hero-cover--custom {
    height: 120px;
  }
}

.ap-hero-content {
  padding: 12px 28px 20px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.ap-hero-left {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  flex: 1;
  min-width: 0;
}

.ap-hero-info-row {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-width: 0;
}

.ap-avatar-wrap {
  position: relative;
  margin-top: -44px;
  flex-shrink: 0;
}

/* Fiche en cours de chargement : squelette aux dimensions de la vraie fiche. */
.ap-skel-cover {
  border-radius: 0;
}

.ap-skel-avatar {
  width: 128px;
  height: 128px;
  box-shadow: 0 0 0 4px var(--color-neutral-0);
}

.ap-skel-lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ap-skel-block {
  padding: 18px 20px;
}

.ap-skel-score {
  min-height: 190px;
}

.ap-avatar {
  --avatar-size: 80px;
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: var(--radius-full);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--avatar-size) * 0.33);
  font-weight: var(--font-extrabold);
  color: var(--color-neutral-0);
  overflow: hidden;
  flex-shrink: 0;
}

.ap-avatar img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.ap-verified-dot {
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--color-primary-700);
  border: 3px solid var(--color-neutral-0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  color: var(--color-neutral-0);
  font-weight: var(--font-black);
}

.ap-hero-info {
  flex: 1;
  min-width: 0;
  padding-bottom: 4px;
  gap: 4px;
}

.ap-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}

.ap-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  padding: 3px 9px;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  white-space: nowrap;
}

.ap-badge.verified {
  background: var(--color-primary-700);
  color: var(--color-neutral-0);
}

.ap-badge.eco {
  background: var(--color-success-bg);
  color: var(--color-success-text);
  border-color: var(--color-success-icon);
}

.ap-trade {
  font-size: 14px;
  color: var(--g);
  font-weight: 700;
  margin-bottom: 3px;
}

.ap-loc {
  font-size: 13px;
  color: var(--text3);
  margin-bottom: 6px;
}

.ap-categories {
  color: var(--g);
  font-size: 12px;
}

.ap-rating-row {
  display: flex;
  align-items: center;
  gap: 5px;
}

.ap-rating-count {
  font-size: 13px;
  color: var(--text3);
  margin-left: 2px;
}

.ap-hero-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Revendication : une phrase, présente seulement sur une fiche sans gérant. */
.ap-claim {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--text3);
}

.ap-claim-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--color-primary-700);
  cursor: pointer;
}

.ap-claim-link:hover {
  text-decoration: underline;
}

/* Stats bar */
.ap-stats {
  display: flex;
  border-top: 1px solid var(--border);
  justify-content: center;
}

.ap-stat {
  text-align: center;
  padding: 12px 24px;
  border-right: 1px solid var(--border);
}

.ap-stat:last-child {
  border-right: none;
}

.ap-stat-val {
  font-size: 20px;
  font-weight: 800;
  color: var(--g);
  line-height: 1.2;
}

.ap-stat-lbl {
  font-size: 11px;
  color: var(--text3);
  margin-top: 2px;
}

/* Body layout */
.ap-body {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
  align-items: start;
}

.ap-main {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Modifier son profil ou sa société : un crayon discret posé sur le bandeau, plutôt qu'un gros
   bouton. Lien sur Mon profil, bouton sur la fiche société (qui bascule l'identité active). */
.ap-cover-edit {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--text);
  background: rgba(255, 255, 255, .9);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: background var(--transition-base), transform var(--transition-base);
}

/* Souris seulement : sur un écran tactile, le survol resterait collé après le tap. */
@media (hover: hover) {
  .ap-cover-edit:hover {
    background: var(--color-neutral-0);
    transform: scale(1.06);
  }
}

.ap-cover-edit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(29, 85, 30, .22);
}

/* Page Mon profil : récapitulatif en lecture seule, sur le modèle de la fiche société. */
.mp-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}

.mp-contact i,
.mp-icon {
  color: var(--text4);
}

.mp-hint {
  font-size: 12px;
  color: var(--text3);
  margin-bottom: 4px;
}

.mp-ellipsis {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mp-link {
  color: inherit;
  text-decoration: none;
}

.mp-link:hover {
  color: var(--color-primary-700);
}

/* Mon profil : collaborations et trophées côte à côte sur grand écran, empilés en
   dessous de 1100 px, où chaque moitié de la colonne principale deviendrait trop étroite. */
.mp-half-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 1100px) {
  .mp-half-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Dernières activités : une ligne par action, cliquable vers ce sur quoi elle porte. */
.mp-activities {
  display: flex;
  flex-direction: column;
}

.mp-activities-more {
  align-self: flex-start;
  margin-top: 10px;
}

/* En-tête des trophées : le titre et le prochain trophée à gauche, les badges en miniature
   ensuite, pour qu'on devine le contenu sans ouvrir la section. */
.mp-trophies-head {
  gap: 12px;
}

.mp-trophies-head-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mp-trophies-next {
  font-size: 12px;
  font-weight: 500;
  color: var(--text3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mp-trophy-minis {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  transition: opacity var(--transition-slow);
}

/* Section ouverte : la liste complète prend le relais des miniatures. */
.mp-section-toggle[aria-expanded="true"] .mp-trophy-minis {
  opacity: 0;
}

.mp-trophy-mini {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--color-neutral-400);
  background: var(--color-neutral-800);
  opacity: .55;
}

.mp-trophy-mini img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mp-trophy-mini--on {
  opacity: 1;
  color: var(--color-primary-300);
  background: var(--color-neutral-900);
}

/* Téléphone : les miniatures passent sous le titre, qui garde la ligne entière pour le
   prochain trophée au lieu de le tronquer. */
@media (max-width: 480px) {
  .mp-trophies-head {
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .mp-trophy-minis {
    order: 3;
    flex-basis: 100%;
  }

  .mp-section-toggle[aria-expanded="true"] .mp-trophy-minis {
    display: none;
  }
}

/* Émetteur d'une notification sans acteur (trophée débloqué) */
.notif-item-badge {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 15px;
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

/* Le panneau de la cloche affiche des avatars de 34 px : le badge s'aligne dessus. */
.notif-list .notif-item-badge {
  width: 34px;
  height: 34px;
  font-size: 14px;
}

/* Trophées */
.mp-trophies {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
}

.mp-trophy {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  background: var(--color-neutral-25);
}

/* Pastille sombre pour tous les trophées : les visuels néon ne ressortent que sur un fond
   foncé, et un trophée sans visuel (icône Font Awesome) doit rester de la même famille.
   Un trophée non obtenu reste lisible mais en retrait : l'œil va d'abord aux gagnés. */
.mp-trophy-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 24px;
  background: var(--color-neutral-800);
  color: var(--color-neutral-400);
}

.mp-trophy-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Un visuel saisi dans l'administration n'a pas de version éteinte : on l'éteint ici. Sans
   effet sur les néons livrés, dont la version éteinte est déjà grise. */
.mp-trophy:not(.mp-trophy--unlocked) .mp-trophy-icon img {
  filter: grayscale(1);
}

.mp-trophy--unlocked {
  border-color: var(--color-primary-200);
  background: var(--color-neutral-0);
}

.mp-trophy--unlocked .mp-trophy-icon {
  background: var(--color-neutral-900);
  color: var(--color-primary-300);
}

/* flex: 1 : la jauge prend toute la largeur de la carte, et non celle du nom, qui varie
   d'un trophée à l'autre. */
.mp-trophy-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.mp-trophy-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text2);
}

.mp-trophy--unlocked .mp-trophy-name {
  color: var(--text);
}

.mp-trophy-meta {
  font-size: 11px;
  color: var(--text4);
}

.mp-trophy-gauge {
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--color-neutral-100);
  overflow: hidden;
}

.mp-trophy-gauge>span {
  display: block;
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--g);
}

.mp-trophy-tally {
  font-size: 12px;
  font-weight: 600;
  color: var(--text4);
}

/* En-tête qui replie sa section : un vrai bouton (clavier, lecteurs d'écran) qui garde
   l'apparence de l'en-tête. */
.mp-section-toggle {
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-base);
}

/* Souris seulement : sur un écran tactile, le survol resterait collé à l'en-tête après le tap. */
@media (hover: hover) {
  .mp-section-toggle:hover {
    background: var(--color-neutral-50);
  }
}

/* Ombre intérieure : à l'extérieur, elle serait rognée par la section (overflow: hidden). */
.mp-section-toggle:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px rgba(29, 85, 30, .22);
}

.mp-section-toggle-end {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.mp-section-caret {
  font-size: 11px;
  color: var(--text4);
  transition: transform var(--transition-slow);
}

.mp-section-toggle[aria-expanded="true"] .mp-section-caret {
  transform: rotate(180deg);
}

/* Passer la ligne de 0fr à 1fr anime la hauteur sans avoir à la connaître. */
.mp-collapse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 250ms ease-out;
}

.mp-collapse.open {
  grid-template-rows: 1fr;
}

.mp-collapse-inner {
  min-height: 0;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {

  .mp-collapse,
  .mp-section-caret {
    transition: none;
  }
}

.mp-activity {
  display: flex;
  gap: 12px;
  padding: 10px 8px;
  margin: 0 -8px;
  border-radius: var(--radius-md);
  color: inherit;
  text-decoration: none;
}

.mp-activity+.mp-activity {
  border-top: 1px solid var(--color-neutral-100);
}

.mp-activity:hover {
  background: var(--color-neutral-25);
}

.mp-activity-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 13px;
  background: var(--color-neutral-100);
  color: var(--text2);
}

.mp-activity-icon--trust {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

.mp-activity-icon--comment,
.mp-activity-icon--reply {
  background: var(--color-info-bg);
  color: var(--color-info-text);
}

.mp-activity-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mp-activity-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.mp-activity-excerpt {
  font-size: 12px;
  color: var(--text2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mp-activity-meta {
  font-size: 11px;
  color: var(--text4);
}

/* Barre de commentaire flottante du fil : elle reprend la grille de .ap-wrap / .ap-body
   pour rester alignée sur la colonne principale, et la page réserve sa hauteur en bas. */
.ap-wrap:has(.comment-float) {
  padding-bottom: 110px;
}

.ap-wrap .comment-float {
  padding-left: 0;
  padding-right: 0;
}

.ap-wrap .comment-float-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
}

.ap-aside {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Sections */
.ap-section {
  background: var(--color-neutral-0);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.ap-section-head {
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ap-section-trust {
  border-top: 1px solid var(--border);
}

.ap-section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

/* En-tête à actions : dans une demi-colonne étroite, les boutons passent sous le titre
   plutôt que d'être rognés, et le titre reste sur une ligne. */
.ap-section-head--wrap {
  flex-wrap: wrap;
  gap: 8px 12px;
}

.ap-section-head--wrap .ap-section-title {
  white-space: nowrap;
}

/* Filtre du fil d'actualité, dans l'en-tête de la section. */
.ap-feed-filter {
  width: auto;
  max-width: 100%;
  min-width: 0;
  padding: 6px 30px 6px 12px;
  font-size: 13px;
  cursor: pointer;
}

.ap-section-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Texte de statut qui doit rester lisible en entier (date, justificatif, motif de refus). */
.mp-membership {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ap-section-body {
  padding: 16px 20px;
  border-top: 1px solid var(--border);
}

/* Services */
.ap-services {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.ap-service-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text2);
  font-weight: 500;
}

.ap-service-icon {
  color: var(--g);
  font-weight: 900;
  font-size: 13px;
  flex-shrink: 0;
}

/* Portfolio */
.ap-portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.ap-portfolio-item {
  background: var(--color-neutral-0);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-base);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.ap-portfolio-item:hover {
  border-color: var(--color-primary-700);
  box-shadow: var(--shadow-md);
}

.ap-portfolio-img {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
}

.ap-portfolio-info {
  padding: 8px 10px 10px;
}

.ap-portfolio-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.ap-portfolio-meta {
  font-size: 11px;
  color: var(--text4);
}

.ap-portfolio-tag {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: var(--font-bold);
  color: var(--color-primary-700);
  background: var(--color-primary-50);
  border: 1px solid var(--color-primary-100);
  padding: 2px 7px;
  border-radius: var(--radius-full);
}

/* Reviews */
.ap-reviews {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ap-review {
  padding: 14px;
  background: var(--bg);
  border-radius: 8px;
}

.ap-review-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}

.ap-review-meta {
  flex: 1;
}

.ap-review-name {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 1px;
}

.ap-review-since {
  font-size: 11px;
  color: var(--text3);
}

.ap-review-text {
  font-size: 13px;
  color: var(--text2);
  line-height: 1.65;
  font-style: italic;
}

/* Sidebar: contact card */
.ap-contact-card {
  background: var(--color-neutral-0);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.ap-contact-head {
  background: var(--g);
  padding: 14px 18px;
}

.ap-contact-head-title {
  font-size: 14px;
  font-weight: 800;
  color: white;
  font-family: var(--font-display);
}

.ap-contact-body {
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ap-contact-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text2);
}

.ap-contact-row strong {
  color: var(--text);
}

.ap-contact-icon {
  font-size: 15px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.ap-avail-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #43A047;
  flex-shrink: 0;
}

/* Sidebar: certifications */
.ap-certs {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ap-cert {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--g-light);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--g);
}

.ap-cert-check {
  font-weight: 900;
}

/* Sidebar: trust clients */
.ap-trust-clients {
  display: flex;
  flex-direction: column;
}

.ap-trust-client {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.ap-trust-client-info {
  display: flex;
  gap: 8px;
  flex-direction: row;
  width: 100%;
  align-items: center;
}

.ap-trust-client:last-child {
  border-bottom: none;
}

.ap-trust-client:hover {
  background: var(--g-lighter);
}

.ap-trust-client-name {
  font-size: 13px;
  font-weight: 700;
}

.ap-trust-client-since {
  font-size: 11px;
  color: var(--text3);
  margin-top: 1px;
}

.ap-trust-cta {
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ap-trust-desc {
  font-size: 12px;
  color: var(--text3);
  line-height: 1.5;
}

/* Dernières publications imagées */
.ap-recent-posts {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}

.ap-recent-post {
  position: relative;
  display: block;
  aspect-ratio: 1;
  max-width: 100%;
  border-radius: var(--radius-sm, 6px);
  overflow: hidden;
  background: var(--color-neutral-200);
}

.ap-recent-post img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .2s ease;
}

.ap-recent-post:hover img {
  transform: scale(1.05);
}

.ap-recent-post-count {
  position: absolute;
  top: 4px;
  right: 4px;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  background: rgba(0, 0, 0, .55);
}

/* Score ProTrust (lotus)
   Pas d'overflow: hidden : la bulle d'explication doit pouvoir déborder de la
   carte quand celle-ci est courte (score non établi). */
.ap-score-card {
  background: var(--color-neutral-0);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
}

.ap-score-head {
  padding: 14px 20px;
  border-bottom: 1px solid var(--color-neutral-200);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.ap-score-head-title {
  font-size: 15px;
  font-weight: 700;
}

/* ─── Bulle « Comment est calculé le score ? », ouverte au clic sur le (i) ── */
.ap-score-info-wrap {
  position: relative;
  display: inline-flex;
}

.ap-score-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border: none;
  background: none;
  font-size: 15px;
  color: var(--text3);
  cursor: pointer;
  transition: color var(--transition-base);
}

.ap-score-info:hover,
.ap-score-info.open {
  color: var(--g);
}

/* ─── Bulle « Ancien client vérifié ? », ouverte au clic sur le (i) ── */
.ap-section-info-wrap {
  position: relative;
  display: inline-flex;
}

.ap-section-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border: none;
  background: none;
  font-size: 15px;
  color: var(--text3);
  cursor: pointer;
  transition: color var(--transition-base);
}

.ap-section-info:hover,
.ap-section-info.open {
  color: var(--g);
}

/* La pointe est à 62 % de la largeur et la bulle décalée d'autant : la pointe
   tombe toujours sous l'icône, et la bulle reste dans la carte (l'icône est à
   ~185 px du bord gauche, derrière le titre). */
.ap-section-tip {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-62%);
  z-index: 300;
  display: block;
  width: min(272px, calc(100vw - 40px));
  padding: 14px 16px;
  background: var(--color-neutral-0);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 34px -14px rgba(0, 0, 0, .35);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--text2);
  text-align: left;
  animation: ap-section-tip-in .15s ease-out;
}

/* Pointe : carré pivoté qui reprend le fond et la bordure de la bulle. */
.ap-section-tip::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 62%;
  width: 12px;
  height: 12px;
  background: inherit;
  border-top: 1px solid var(--color-neutral-200);
  border-left: 1px solid var(--color-neutral-200);
  border-top-left-radius: 2px;
  transform: translateX(-50%) rotate(45deg);
}

.ap-section-tip-title {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.ap-section-tip-text {
  display: block;
}

.ap-section-tip strong {
  font-weight: 600;
  color: var(--text);
}

@keyframes ap-section-tip-in {
  from {
    opacity: 0;
    transform: translateX(-62%) translateY(-4px);
  }
}

.ap-score-head-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: var(--font-bold);
  padding: 2px 7px;
  border-radius: var(--radius-full);
  background: var(--color-primary-50);
  color: var(--color-primary-700);
  border: 1px solid var(--color-primary-100);
  margin-left: auto;
}

.ap-score-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Pied de la carte : les anciens clients vérifiés, preuves du score. */
.ap-score-clients {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 20px;
  border: 0;
  border-top: 1px solid var(--color-neutral-200);
  border-radius: 0 0 calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px);
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text2);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-base);
}

.ap-score-clients i {
  color: var(--color-primary-600);
}

.ap-score-clients-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--color-primary-700);
  white-space: nowrap;
}

.ap-score-clients-cta i {
  font-size: 10px;
  color: inherit;
}

@media (hover: hover) {
  .ap-score-clients:hover {
    background: var(--color-neutral-50);
  }
}

/* Suivie du bloc de déclaration, la ligne n'est plus en bas de la carte : pas de coins arrondis. */
.ap-score-clients:not(:last-child) {
  border-radius: 0;
}

.ap-score-declare {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 20px 16px;
  border-top: 1px solid var(--color-neutral-200);
  font-size: 13px;
  color: var(--text3);
}

.ap-score-declare .btn {
  justify-content: center;
}

.ap-score-clients:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px rgba(29, 85, 30, .22);
}

/* Signaler : rare, donc discret, mais trouvable sans ouvrir de menu. Juste sous la carte de
   confiance, car le fil défile sans fin et un lien en bas de page ne serait jamais atteint. */
.ap-report-link {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: -4px;
  padding: 4px 8px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  color: var(--text4);
  cursor: pointer;
}

.ap-report-link:hover {
  color: var(--text2);
  text-decoration: underline;
}

.ap-score-lotus {
  line-height: 0;
}

.ap-score-label {
  font-size: 16px;
  text-align: center;
  font-weight: 700;
  color: var(--g);
}

.ap-score-sublabel {
  font-size: 12px;
  text-align: center;
  line-height: 1.5;
  color: var(--text3);
}

.ap-score-number {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 900;
  color: var(--g);
  line-height: 1;
}

.ap-score-desc {
  font-size: 12px;
  color: var(--text3);
  text-align: center;
  line-height: 1.5;
  padding: 0 4px;
}

/* Responsive */
@media (max-width: 900px) {
  .ap-wrap {
    padding: 0 14px 60px;
  }

  /* minmax(0, …) pour la même raison que .home-layout : un extrait d'activité en nowrap
     élargirait toute la colonne au lieu d'être tronqué par son ellipsis. */
  .ap-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .ap-wrap .comment-float-inner {
    padding: 0 14px;
    grid-template-columns: minmax(0, 1fr);
  }

  .ap-aside {
    order: -1;
  }

  /* Mon profil : la colonne latérale (e-mails, sociétés, préférences) ne contient rien
     d'urgent. Elle passe après les collaborations à confirmer et les activités, au lieu
     de les repousser tout en bas comme sur la fiche société. */
  .ap-aside.mp-aside {
    order: 0;
  }

  .ap-portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ap-hero-content {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 12px 16px 18px;
  }

  .ap-hero-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .ap-hero-info-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .ap-hero-actions {
    flex-wrap: wrap;
    width: 100%;
  }

  /* Le premier bouton (Contacter, ou le Book à défaut) prend la place libre ; l'icône de partage
     garde sa taille. */
  .ap-hero-actions>.btn:first-child:not(.btn--icon) {
    flex: 1;
  }

  /* Le bouton de confiance prend toute la première ligne, Contacter et le partage passent dessous. */
  .ap-hero-actions>.trust-btn--hero {
    flex: 1 0 100%;
    justify-content: center;
  }

  .ap-hero-actions>.trust-btn--hero + .btn:not(.btn--icon) {
    flex: 1;
  }
}

/* Les trois stats se partagent la largeur du hero : avec 24 px de padding de chaque côté, la
   dernière dépassait à 320 px et le hero (overflow: hidden) la rognait. */
@media (max-width: 560px) {
  .ap-stat {
    flex: 1 1 0;
    min-width: 0;
    padding: 12px 6px;
  }

  .ap-stat-lbl {
    overflow-wrap: anywhere;
  }
}

/* ─── Lotus score selector ───────────────────────── */
.lotus-widget {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.lotus-widget svg {
  display: block;
  cursor: pointer;
}

.lotus-widget g[data-petal] {
  cursor: pointer;
}

.lotus-widget g[data-petal] path {
  transition: fill .18s ease;
}

.lotus-reset {
  font-size: 11px;
  color: var(--color-neutral-400);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
}

.lotus-reset:hover {
  color: var(--color-primary-600);
}

.lotus-filter-hint {
  font-size: 12px;
  color: var(--color-primary-600);
  font-weight: 600;
  min-height: 16px;
}

/* ─── Location filter ────────────────────────────── */
.loc-filter {
  position: relative;
  flex-shrink: 0;
}

.loc-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  height: 40px;
  background: var(--color-neutral-0);
  border: 1.5px solid var(--color-neutral-200);
  border-radius: 40px;
  cursor: pointer;
  font-size: 13px;
  color: var(--color-neutral-600);
  font-family: var(--font-body);
  font-weight: 500;
  white-space: nowrap;
  transition: border-color .15s, box-shadow .15s;
}

.loc-trigger:hover {
  border-color: var(--color-primary-400);
}

.loc-trigger.has-city {
  border-color: var(--color-primary-500);
  color: var(--color-primary-700);
  background: var(--color-primary-25);
}

.loc-trigger svg {
  flex-shrink: 0;
}

.loc-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: 360px;
  z-index: 300;
  background: var(--color-neutral-0);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-xl);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .14), 0 2px 8px rgba(0, 0, 0, .08);
  padding: 16px;
  display: none;
}

.loc-panel.open {
  display: block;
}

/* Panneau de localisation : bottom-sheet sur mobile. Doit rester après la
   règle de base ci-dessus, sinon la position absolue de 360px l'emporte. */
@media (max-width: 860px) {
  .loc-panel {
    position: fixed;
    left: 16px;
    right: 16px;
    top: auto;
    bottom: 16px;
    width: auto;
    /* Centré et plafonné : en paysage ou sur tablette, 16 px de marge de chaque côté
       étiraient le panneau (et sa carte) sur toute la largeur. */
    max-width: 440px;
    margin: 0 auto;
    /* dvh suit la barre d'outils du navigateur mobile ; vh en repli pour les anciens. */
    max-height: 75vh;
    max-height: 75dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

.loc-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.loc-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px 4px 12px;
  background: var(--color-primary-50);
  border: 1px solid var(--color-primary-200);
  border-radius: 40px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary-700);
}

.loc-chip-x {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  color: var(--color-primary-500);
  display: flex;
  border-radius: 50%;
  transition: background .15s;
}

.loc-chip-x:hover {
  background: var(--color-primary-100);
}

.loc-city-input {
  width: 100%;
  border: 1.5px solid var(--color-neutral-200);
  border-radius: var(--radius-lg);
  padding: 9px 12px;
  font-size: 13px;
  font-family: var(--font-body);
  outline: none;
  transition: border-color .15s;
}

.loc-city-input:focus {
  border-color: var(--color-primary-400);
}

.loc-suggestions {
  background: var(--color-neutral-0);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: 4px;
  max-height: 160px;
  overflow-y: auto;
}

.loc-sugg-item {
  padding: 9px 12px;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-neutral-800);
  transition: background .1s;
}

.loc-sugg-item:hover {
  background: var(--color-primary-25);
  color: var(--color-primary-700);
}

.loc-sugg-item svg {
  flex-shrink: 0;
  color: var(--color-neutral-400);
}

.loc-radius-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--color-neutral-700);
}

.loc-radius-row strong {
  color: var(--color-primary-600);
  font-size: 14px;
  font-weight: 700;
}

.loc-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--color-neutral-200);
  outline: none;
  cursor: pointer;
}

.loc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-primary-600);
  border: 3px solid white;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
  cursor: pointer;
}

.loc-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-primary-600);
  border: 3px solid white;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
  cursor: pointer;
  border: 3px solid white;
}

.loc-slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--color-neutral-400);
  margin-top: 4px;
}

.loc-map-wrap {
  height: 180px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: 12px;
  border: 1px solid var(--color-neutral-200);
  /* Leaflet pose des z-index de 400 à 1000 sur ses volets et ses contrôles : sans contexte
     d'empilement propre, ils passaient au-dessus des boutons du panneau (barre collante). */
  isolation: isolate;
}

.loc-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.loc-actions .btn {
  flex: 1;
  justify-content: center;
}

.loc-backdrop {
  position: fixed;
  inset: 0;
  z-index: 299;
  background: transparent;
  border: none;
  padding: 0;
  cursor: default;
}

.loc-hint {
  font-size: 12px;
  color: var(--color-neutral-500);
  margin: 8px 0 12px;
  text-align: center;
}

.loc-error {
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
  color: var(--color-error-text);
  font-size: 12px;
  border-radius: var(--radius-lg);
  padding: 8px 12px;
  margin-top: 10px;
}

/* En-tête du panneau : propre au bottom-sheet. Sur bureau le panneau est un menu déroulant
   qui se ferme en cliquant à côté, il n'a ni titre ni croix. */
.loc-panel-head {
  display: none;
}

/* Suite du bottom-sheet mobile. Ces règles surchargent .loc-backdrop, .loc-map-wrap et
   .loc-actions : elles doivent rester après leur définition de base, sinon elles ne
   prennent pas effet. */
@media (max-width: 860px) {

  /* Voile : sans lui le fil reste net derrière le panneau, coupé net en haut et en bas. */
  .loc-backdrop {
    background: rgba(0, 0, 0, .4);
  }

  /* Fige le fil derrière le panneau (le défilement infini continuait de charger des
     publications). Sur html et non sur body : html porte déjà un overflow-x
     (design-system.css), c'est lui qui définit le défilement de la page, et un overflow
     posé sur body n'aurait aucun effet. */
  html:has(.loc-panel.open) {
    overflow: hidden;
  }

  .loc-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
  }

  .loc-panel-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 800;
    color: var(--text);
  }

  .loc-panel-close {
    width: 40px;
    height: 40px;
    margin: -4px -6px -4px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--radius-full);
    background: var(--color-neutral-50);
    color: var(--text2);
    font-size: 16px;
    cursor: pointer;
  }

  /* La carte se réduit sur écran court (paysage) : elle capte le toucher (Leaflet, touch-action:
     none), donc plus elle est grande, moins on peut faire défiler le panneau avec le doigt. */
  .loc-map-wrap {
    height: clamp(120px, 28vh, 180px);
  }

  /* « Réinitialiser » / « Appliquer » restent collés au bas du panneau : en paysage ils
     étaient sous le bord visible. La marge négative annule le padding bas du panneau, pour
     que la barre épouse son bord. */
  .loc-panel>.loc-actions:last-child {
    position: sticky;
    bottom: 0;
    margin: 12px 0 -16px;
    padding: 12px 0 16px;
    background: var(--color-neutral-0);
    border-top: 1px solid var(--color-neutral-100);
  }
}

/* Recherche mobile : boutons fixes en bas (filtres, localisation) et tri en bottom-sheet.
   Après les règles de base de .search-sidebar et de .loc-panel pour l'emporter. */
.search-mobile-bar,
.search-sheet-backdrop,
.search-sheet-head {
  display: none;
}

@media (max-width: 760px) {
  .search-layout {
    /* Place pour la barre fixe, sinon elle masque la pagination. */
    padding-bottom: calc(88px + env(safe-area-inset-bottom));
  }

  .search-mobile-bar {
    display: flex;
    gap: 10px;
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    z-index: 200;
  }

  .search-mobile-btn {
    flex: 1;
    min-width: 0;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-full);
    background: var(--color-neutral-0);
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .16);
    cursor: pointer;
  }

  .search-mobile-btn span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Le tri n'est plus au-dessus des résultats : il s'ouvre à la demande. */
  .search-sidebar {
    display: none;
  }

  /* Même habillage que .loc-panel : carte flottante, centrée et plafonnée. */
  .search-sidebar--open {
    display: flex;
    position: fixed;
    left: 16px;
    right: 16px;
    top: auto;
    bottom: 16px;
    max-width: 440px;
    margin: 0 auto;
    order: 0;
    z-index: 300;
    max-height: 75vh;
    max-height: 75dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px;
    gap: 0;
    background: var(--color-neutral-0);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-xl);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .14), 0 2px 8px rgba(0, 0, 0, .08);
  }

  /* La carte « Trier » est déjà encadrée par le panneau. */
  .search-sidebar--open .sidebar-card {
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: none;
    padding: 0;
  }

  .search-sidebar--open .sidebar-card-header {
    display: none;
  }

  html:has(.search-sidebar--open) {
    overflow: hidden;
  }

  .search-sheet-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 299;
    border: none;
    padding: 0;
    background: rgba(0, 0, 0, .4);
  }

  .search-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
  }

  .search-sheet-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 800;
    color: var(--text);
  }

  .search-sheet-close {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    margin: -4px -6px -4px 0;
    border-radius: var(--radius-full);
    background: var(--color-neutral-50);
    color: var(--text2);
    font-size: 16px;
    cursor: pointer;
  }
}

/* ─── Splash screen ───────────────────────────────── */
#splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #0f2d10;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  overflow: hidden;
  transition: opacity 0.7s ease;
}

#splash.hiding {
  animation: sb-bg-out 1.1s ease forwards;
  pointer-events: none;
}

#splash.hiding .sb-logo {
  animation: sb-logo-zoom 1s cubic-bezier(.2, 0, .4, 1) forwards !important;
}

#splash.hiding .sb-wrap,
#splash.hiding .sb-grid,
#splash.hiding #splash-canvas {
  animation: sb-bg-out 0.8s ease forwards;
}

@keyframes sb-bg-out {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes sb-logo-zoom {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  60% {
    transform: scale(3);
    opacity: 0.6;
  }

  100% {
    transform: scale(10);
    opacity: 0;
  }
}

#splash-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.sb-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.sb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.28;
}

.sb1 {
  width: 700px;
  height: 700px;
  background: #2E7D32;
  top: -200px;
  left: -200px;
  animation: sb-o1 28s ease-in-out infinite alternate;
}

.sb2 {
  width: 580px;
  height: 580px;
  background: #1B5E20;
  bottom: -160px;
  right: -160px;
  animation: sb-o2 22s ease-in-out infinite alternate;
}

.sb3 {
  width: 420px;
  height: 420px;
  background: #43A047;
  top: 30%;
  left: 40%;
  animation: sb-o3 18s ease-in-out infinite alternate;
  opacity: 0.18;
}

.sb4 {
  width: 360px;
  height: 360px;
  background: #388E3C;
  top: 60%;
  left: -100px;
  animation: sb-o4 24s ease-in-out infinite alternate;
  opacity: 0.2;
}

@keyframes sb-o1 {
  0% {
    transform: translate(0, 0) scale(1)
  }

  25% {
    transform: translate(280px, 80px) scale(1.08)
  }

  50% {
    transform: translate(180px, 260px) scale(.94)
  }

  75% {
    transform: translate(60px, 200px) scale(1.04)
  }

  100% {
    transform: translate(320px, 140px) scale(1.1)
  }
}

@keyframes sb-o2 {
  0% {
    transform: translate(0, 0) scale(1)
  }

  30% {
    transform: translate(-200px, -120px) scale(1.06)
  }

  60% {
    transform: translate(-300px, -60px) scale(.92)
  }

  100% {
    transform: translate(-140px, -240px) scale(1.08)
  }
}

@keyframes sb-o3 {
  0% {
    transform: translate(0, 0) scale(1)
  }

  40% {
    transform: translate(-180px, 120px) scale(1.12)
  }

  70% {
    transform: translate(100px, 180px) scale(.9)
  }

  100% {
    transform: translate(-80px, -140px) scale(1.05)
  }
}

@keyframes sb-o4 {
  0% {
    transform: translate(0, 0) scale(1)
  }

  35% {
    transform: translate(240px, -80px) scale(1.1)
  }

  65% {
    transform: translate(160px, 160px) scale(.9)
  }

  100% {
    transform: translate(300px, 60px) scale(1.05)
  }
}

.sb-grid {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
}

.sb-logo {
  position: relative;
  z-index: 10;
  width: 520px;
  animation: sb-fadein 1.4s cubic-bezier(.16, 1, .3, 1) both, sb-glow 4s ease-in-out infinite alternate;
}

.sb-logo img {
  width: 100%;
  display: block;
}

@keyframes sb-fadein {
  from {
    opacity: 0;
    transform: scale(.92)
  }

  to {
    opacity: 1;
    transform: scale(1)
  }
}

@keyframes sb-glow {
  from {
    filter: drop-shadow(0 0 30px rgba(46, 125, 50, .4));
  }

  to {
    filter: drop-shadow(0 0 70px rgba(46, 125, 50, .85));
  }
}

/* ─── Artisan Registration ─────────────────────────────────────── */
.login-card--wide {
  max-width: 500px;
}

.reg-type-selector {
  display: flex;
  gap: 12px;
  margin-bottom: 8px;
}

.reg-type-card {
  flex: 1;
  padding: 18px 12px 16px;
  border: 2px solid var(--border);
  border-radius: 12px;
  text-align: center;
  cursor: pointer;
  transition: all .18s cubic-bezier(.4, 0, .2, 1);
  background: var(--color-neutral-0);
}

.reg-type-card:hover {
  border-color: var(--color-primary-400);
  background: var(--color-primary-25);
}

.reg-type-card.selected {
  border-color: var(--color-primary-600);
  background: var(--color-primary-25);
}

.reg-type-icon {
  font-size: 26px;
  margin-bottom: 8px;
}

.reg-type-label {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  font-family: var(--font-display);
  margin-bottom: 3px;
}

.reg-type-desc {
  font-size: 11px;
  color: var(--text3);
  line-height: 1.4;
}

.reg-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
}

.reg-step-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-neutral-200);
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  flex-shrink: 0;
}

.reg-step-dot.active {
  width: 28px;
  border-radius: 4px;
  background: var(--color-primary-600);
}

.reg-step-dot.done {
  background: var(--color-primary-300);
}

.reg-step-wrap {
  overflow: hidden;
  position: relative;
}

.reg-step-inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.reg-step-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  font-family: var(--font-display);
}

.reg-step-subtitle {
  font-size: 12px;
  color: var(--text3);
  margin-top: 1px;
}

.reg-footer {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.reg-footer .btn {
  flex: 1;
  justify-content: center;
}

.reg-input-hint {
  font-size: 11px;
  color: var(--text3);
  margin-top: 3px;
}

.reg-siret-row {
  position: relative;
}

.reg-siret-status {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 700;
  pointer-events: none;
}

.reg-siret-status.valid {
  color: var(--color-primary-600);
}

.reg-siret-status.invalid {
  color: #c0392b;
}

.reg-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.reg-chip {
  padding: 6px 11px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  border: 1.5px solid var(--border);
  background: white;
  color: var(--text2);
  cursor: pointer;
  transition: all .15s;
  user-select: none;
}

.reg-chip:hover {
  border-color: var(--color-primary-400);
}

.reg-chip.selected {
  border-color: var(--color-primary-600);
  background: var(--color-primary-25);
  color: var(--color-primary-700);
  font-weight: 600;
}

@keyframes reg-slide-fwd {
  from {
    transform: translateX(36px);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes reg-slide-bwd {
  from {
    transform: translateX(-36px);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.reg-slide-fwd {
  animation: reg-slide-fwd .25s cubic-bezier(.4, 0, .2, 1) both;
}

.reg-slide-bwd {
  animation: reg-slide-bwd .25s cubic-bezier(.4, 0, .2, 1) both;
}

.select {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text);
  background: white;
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  transition: border-color .15s;
}

.select:focus {
  border-color: var(--color-primary-500);
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — MOBILE (général)
═══════════════════════════════════════════════ */
@media (max-width: 860px) {
  .home-layout {
    padding: 16px 12px 40px;
    gap: 16px;
  }

  .artisan-cards-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .allcat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .login-wrap {
    padding: 24px 16px;
  }

  .projects-wrap {
    padding: 16px 12px 40px;
  }
}

@media (max-width: 600px) {
  .sb-logo {
    width: min(520px, 78vw);
  }
}

/* ─── Compte utilisateur ──────────────────────── */
.profile-wrap {
  max-width: 1320px;
  margin: 0 auto;
  padding: 28px 24px 60px;
}

/* Mêmes marges latérales que les fiches (ap-wrap), au même seuil : passer de Mon profil à ses
   réglages ne décale pas le contenu. */
@media (max-width: 900px) {
  .profile-wrap {
    padding-left: 14px;
    padding-right: 14px;
  }
}

.profile-title {
  font-size: 22px;
  font-weight: 900;
  font-family: var(--font-display);
  margin-bottom: 20px;
}

.profile-loading {
  text-align: center;
  padding: 60px;
  color: var(--text4);
  font-size: 20px;
}

.profile-section {
  background: var(--color-neutral-0);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-lg);
  margin-bottom: 20px;
  overflow: hidden;
}

.profile-section-title {
  font-size: 15px;
  font-weight: 800;
  font-family: var(--font-display);
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-neutral-100);
}

.profile-section-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.profile-email-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.profile-email-display {
  flex: 1;
  display: flex;
  align-items: center;
  color: var(--text2);
  background: var(--color-neutral-50);
}

.profile-hint {
  font-size: 12px;
  color: var(--text4);
}

.profile-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text2);
  cursor: pointer;
}

@media (max-width: 480px) {
  .artisan-post-footer {
    flex-wrap: wrap;
    gap: 8px 12px;
  }

  .post-tag {
    margin-left: 0;
    flex-basis: 100%;
  }

  .login-card {
    padding: 28px 20px;
  }

  .login-card--wide {
    max-width: 100%;
  }
}

/* ─── Compte / société : formulaires ──────────── */
.profile-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.profile-head .profile-title {
  margin-bottom: 4px;
}

.profile-subtitle {
  font-size: 13px;
  color: var(--text3);
}

/* En-tête de section : icône + intitulé + description facultative */
.profile-section-title {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.profile-section-title>i {
  color: var(--color-primary-700);
  font-size: 14px;
  width: 18px;
  text-align: center;
  margin-top: 2px;
}

.profile-section-desc {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font-body);
  color: var(--text4);
}

/* Grille de champs : 2 colonnes qui repassent en 1 sur mobile */
.profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.profile-grid .form-group {
  margin: 0;
}

/* Choix exclusif à deux options (photo ou couleur). */
.profile-segmented {
  display: inline-flex;
  align-self: flex-start;
  padding: 3px;
  gap: 2px;
  background: var(--color-neutral-100);
  border-radius: var(--radius-full);
}

.profile-segmented-btn {
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text3);
  background: transparent;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.profile-segmented-btn.active {
  background: var(--color-neutral-0);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.profile-note {
  font-size: 12px;
  color: var(--text3);
  background: var(--color-neutral-50, var(--color-neutral-100));
  border-radius: var(--radius-md);
  padding: 8px 12px;
}

.profile-note-link {
  border: 0;
  background: transparent;
  padding: 0 0 0 4px;
  font: inherit;
  font-weight: 600;
  color: var(--color-primary-700);
  cursor: pointer;
  text-decoration: underline;
}

/* Bouton d'upload : l'<input type=file> natif est masqué derrière le libellé */
.upload-btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
}

.upload-btn input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  font-size: 0;
}

.upload-btn.is-busy {
  pointer-events: none;
  opacity: .6;
}

/* Interrupteurs de préférences */
.profile-switch {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  padding: 10px 0;
}

.profile-switch+.profile-switch {
  border-top: 1px solid var(--color-neutral-100);
}

.profile-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.profile-switch-track {
  flex-shrink: 0;
  width: 40px;
  height: 22px;
  border-radius: var(--radius-full);
  background: var(--color-neutral-300);
  position: relative;
  transition: background var(--transition-base);
  margin-top: 2px;
}

.profile-switch-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-neutral-0);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base);
}

.profile-switch input:checked+.profile-switch-track {
  background: var(--color-primary-700);
}

.profile-switch input:checked+.profile-switch-track::after {
  transform: translateX(18px);
}

.profile-switch input:focus-visible+.profile-switch-track {
  outline: 2px solid var(--color-primary-700);
  outline-offset: 2px;
}

.profile-switch-text {
  font-size: 13px;
  color: var(--text);
}

.profile-switch-text small {
  display: block;
  font-size: 12px;
  color: var(--text4);
  margin-top: 2px;
}

/* Onglets des pages compte et société */
.profile-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--color-neutral-200);
  overflow-x: auto;
}

.profile-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: none;
  background: none;
  cursor: pointer;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  color: var(--text3);
  border-bottom: 2px solid transparent;
  transition: color var(--transition-base), border-color var(--transition-base);
}

.profile-tab:hover {
  color: var(--text);
}

.profile-tab.active {
  color: var(--color-primary-700);
  border-bottom-color: var(--color-primary-700);
}

/* Barre d'enregistrement unique, collée en bas de la page */
.profile-savebar {
  position: sticky;
  bottom: 16px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding: 12px 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-neutral-200);
  background: var(--color-neutral-0);
  box-shadow: var(--shadow-lg);
}

.profile-savebar-text {
  font-size: 13px;
  color: var(--text2);
  display: flex;
  align-items: center;
  gap: 8px;
}

.profile-savebar-text i {
  color: var(--color-warning-icon);
}

.profile-savebar-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

/* Mon compte : réglages façon iPhone (la liste, puis la rubrique) et, à partir de la tablette,
   façon iPad (la liste à gauche de la rubrique). Pleine largeur de l'enveloppe, comme le profil
   qui y mène. */
.settings-nav-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.settings-nav-head .profile-title {
  margin-bottom: 0;
}

.settings-view-profile {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary-700);
  white-space: nowrap;
}

.settings-group {
  background: var(--color-neutral-0);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 16px;
}

.settings-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  transition: background var(--transition-base);
}

/* Séparateur décalé après l'icône, comme sur l'iPhone. */
.settings-row+.settings-row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 56px;
  right: 0;
  border-top: 1px solid var(--color-neutral-100);
}

@media (hover: hover) {
  .settings-row:hover {
    background: var(--color-neutral-50);
  }
}

.settings-row--account {
  padding-block: 12px;
}

.settings-row-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.settings-row--account .settings-row-label {
  font-size: 15px;
  font-weight: 700;
}

.settings-row-sub {
  font-size: 12px;
  font-weight: 500;
  color: var(--text3);
}

.settings-tile {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
  color: var(--color-neutral-600);
  background: var(--color-neutral-100);
}

.settings-row-chevron {
  margin-left: auto;
  font-size: 12px;
  color: var(--text4);
}

.settings-row-badge {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-neutral-0);
  background: var(--color-error-icon);
}

.settings-row-badge+.settings-row-chevron {
  margin-left: 8px;
}

/* Rubrique réservée aux comptes pro actifs : visible, mais en retrait. */
.settings-row--locked .settings-row-label {
  color: var(--text3);
}

.settings-detail-head {
  margin-bottom: 16px;
}

.settings-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  padding: 4px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary-700);
  cursor: pointer;
}

.settings-detail-title {
  margin: 0;
  font-size: 22px;
  font-weight: 900;
  font-family: var(--font-display);
}

.settings-detail-desc {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--text3);
}

/* Téléphone : la liste seule, ou la rubrique seule. */
@media (max-width: 767px) {

  .settings--home .settings-detail,
  .settings:not(.settings--home) .settings-nav {
    display: none;
  }
}

/* Tablette et ordinateur : la liste reste à gauche, la rubrique choisie y est surlignée ; ni
   retour ni chevrons, comme dans la barre latérale de l'iPad. */
@media (min-width: 768px) {
  .settings {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
  }

  .settings-nav {
    position: sticky;
    top: 20px;
  }

  .settings-back,
  .settings-row-chevron {
    display: none;
  }

  .settings-row.active {
    background: var(--color-primary-50);
    color: var(--color-primary-700);
  }

  /* Sur le fond vert clair, la pastille grise disparaîtrait : elle suit la sélection. */
  .settings-row.active .settings-tile {
    background: var(--color-neutral-0);
    color: var(--color-primary-700);
  }
}

/* Mon compte, rubrique Profil : aperçu en direct du bandeau et de l'avatar, pastilles de
   couleur, champs groupés façon réglages. */
.pf-preview {
  background: var(--color-neutral-0);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 22px;
}

/* Même dégradé que le bandeau de Mon profil : l'aperçu ne ment pas. */
.pf-preview-cover {
  height: 84px;
}

.pf-preview-body {
  padding: 0 18px 16px;
}

.pf-avatar {
  position: relative;
  display: inline-block;
  margin-top: -38px;
  border-radius: var(--radius-full);
  box-shadow: 0 0 0 4px var(--color-neutral-0);
  cursor: pointer;
}

.pf-avatar input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  font-size: 0;
}

.pf-avatar.is-busy {
  pointer-events: none;
  opacity: .7;
}

.pf-avatar:focus-within {
  box-shadow: 0 0 0 4px var(--color-neutral-0), 0 0 0 7px rgba(29, 85, 30, .22);
}

.pf-avatar-badge {
  position: absolute;
  right: -2px;
  bottom: 2px;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--text);
  background: var(--color-neutral-0);
  box-shadow: var(--shadow-sm);
  pointer-events: none;
}

.pf-preview-name {
  margin-top: 8px;
  font-size: 18px;
  font-weight: 800;
  font-family: var(--font-display);
}

.pf-preview-sub {
  font-size: 12px;
  color: var(--text3);
}

.pf-label {
  margin: 0 4px 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text3);
}

.pf-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 2px 24px;
}

.pf-swatch {
  position: relative;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--color-neutral-0);
  background: var(--swatch);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
  cursor: pointer;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

@media (hover: hover) {
  .pf-swatch:hover {
    transform: scale(1.08);
  }
}

/* L'anneau prend la couleur de la pastille, séparé d'elle par le fond de la page. */
.pf-swatch.selected {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--swatch);
}

.pf-swatch:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px rgba(29, 85, 30, .45);
}

/* Couleur sur mesure : un arc-en-ciel tant qu'aucune couleur libre n'est choisie. */
.pf-swatch--custom {
  background: var(--swatch, conic-gradient(#E53935, #FDD835, #43A047, #1E88E5, #8E24AA, #E53935));
}

.pf-swatch--custom i {
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}

/* Téléphone : les dix pastilles tiennent sur une ligne. */
@media (max-width: 480px) {
  .pf-swatches {
    gap: 6px;
  }

  .pf-swatch {
    width: 28px;
    height: 28px;
  }
}

.pf-swatch--custom input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

.pf-fields {
  background: var(--color-neutral-0);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 26px;
}

.pf-field {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  padding: 0 16px;
  cursor: text;
  transition: background var(--transition-base);
}

.pf-field+.pf-field {
  border-top: 1px solid var(--color-neutral-100);
}

.pf-field:focus-within {
  background: var(--color-neutral-25);
}

.pf-field span {
  width: 96px;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--text2);
}

.pf-field input {
  flex: 1;
  min-width: 0;
  padding: 14px 0;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 15px;
  color: var(--text);
}

.pf-label small {
  margin-left: 6px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text4);
}

.pf-hint {
  font-size: 12px;
  color: var(--text3);
}

/* Sous un groupe de champs, l'aide se rapproche de lui plutôt que de la section suivante. */
.pf-hint--below {
  margin: -18px 4px 26px;
}

.pf-card {
  background: var(--color-neutral-0);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin-bottom: 26px;
}

/* Ma société : la couverture de l'aperçu a la hauteur de celle de la fiche, et porte son
   propre appareil photo. */
.pf-preview-cover--company {
  position: relative;
  height: 110px;
}

.pf-cover-edit {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--text);
  background: rgba(255, 255, 255, .9);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.pf-cover-edit input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  font-size: 0;
}

.pf-cover-edit.is-busy {
  pointer-events: none;
  opacity: .7;
}

.pf-cover-edit:focus-within {
  box-shadow: 0 0 0 3px rgba(29, 85, 30, .22);
}

.pf-cover-mode {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 2px 26px;
}

.pf-swatches--inline {
  margin: 0;
}

/* Champ sur deux lignes (description) : le libellé au-dessus, la saisie sur toute la largeur. */
.pf-field--stacked {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 12px 16px;
}

.pf-field--stacked .pf-field-head {
  width: auto;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.pf-field-head small {
  font-size: 12px;
  font-weight: 400;
  color: var(--text4);
}

.pf-field--stacked textarea {
  min-height: 88px;
  padding: 0;
  border: 0;
  outline: none;
  resize: vertical;
  background: transparent;
  font: inherit;
  font-size: 15px;
  color: var(--text);
}

/* Coordonnée : libellé, saisie, puis son choix de visibilité au bout de la ligne. */
.pf-field--contact>label {
  width: 96px;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--text2);
}

.pf-field--contact select {
  flex: 0 0 auto;
  width: auto;
  height: 32px;
  padding: 0 28px 0 10px;
  font-size: 13px;
}

.pf-field-value {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pf-field-value i {
  font-size: 11px;
  color: var(--text4);
}

/* Téléphone : la visibilité reste à droite du libellé, la saisie passe dessous, pleine largeur. */
@media (max-width: 480px) {
  .pf-field--contact {
    flex-wrap: wrap;
    row-gap: 2px;
    padding: 10px 16px;
  }

  .pf-field--contact>label {
    flex: 1;
    width: auto;
  }

  .pf-field--contact input,
  .pf-field--contact .pf-field-value {
    order: 3;
    flex-basis: 100%;
  }

  .pf-field--contact input {
    padding: 6px 0;
  }
}

.pf-delete {
  display: block;
  margin: 0 auto;
  padding: 10px 16px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-error-text);
  cursor: pointer;
}

.pf-delete:hover {
  text-decoration: underline;
}

/* Listes (collaborations, membres, adresses secondaires) */
.profile-list {
  display: flex;
  flex-direction: column;
}

.profile-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  flex-wrap: wrap;
}

.profile-list-item+.profile-list-item {
  border-top: 1px solid var(--color-neutral-100);
}

.profile-list-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.profile-list-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.profile-list-sub {
  font-size: 12px;
  color: var(--text4);
}

.profile-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: var(--color-neutral-100);
  color: var(--text2);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* Statuts : même couleur pour un même statut côté client et côté société */
.profile-pill--success {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

.profile-pill--warning {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}

.profile-pill--info {
  background: var(--color-info-bg);
  color: var(--color-info-text);
}

.profile-pill--danger {
  background: var(--color-error-bg);
  color: var(--color-error-text);
}

/* Actions groupées en fin de ligne de liste (confirmer / refuser) */
.profile-list-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Choix de l'adresse professionnelle d'une société, en fin de ligne */
.profile-membership-email {
  width: auto;
  min-width: 220px;
  max-width: 100%;
}

.profile-notice {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text2);
  font-size: var(--text-base);
}

.profile-notice ul {
  margin: 0;
  padding-left: 18px;
}

/* Détail de l'abonnement : libellé et valeur sur deux colonnes */
.profile-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 20px;
  margin: 0;
  font-size: var(--text-base);
}

.profile-facts dt {
  color: var(--text4);
}

.profile-facts dd {
  margin: 0;
  color: var(--text2);
}

@media (max-width: 480px) {
  .profile-facts {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .profile-facts dd {
    margin-bottom: 8px;
  }
}

.profile-empty {
  text-align: center;
  padding: 24px;
  color: var(--text4);
  font-size: 13px;
}

.profile-empty-icon {
  display: block;
  font-size: 28px;
  color: var(--color-neutral-300);
  margin-bottom: 10px;
}

/* Carte d'adresse secondaire */
.profile-card {
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--color-neutral-50);
}

.profile-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text2);
}

/* Formules d'abonnement */
.profile-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  container-type: inline-size;
}

.profile-plan {
  text-align: left;
  border: 2px solid var(--color-neutral-200);
  border-radius: var(--radius-lg);
  background: var(--color-neutral-0);
  padding: 16px;
  cursor: pointer;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.profile-plan:hover {
  border-color: var(--color-neutral-300);
}

.profile-plan.selected {
  border-color: var(--color-primary-700);
  box-shadow: var(--shadow-sm);
}

.profile-plan--founder {
  position: relative;
  background: linear-gradient(160deg, var(--color-primary-50), var(--color-neutral-0) 70%);
}

/* Sur deux colonnes, la 3e formule tomberait seule sous les autres : elle prend toute la ligne. */
@container (max-width: 627px) {
  .profile-plan--founder {
    grid-column: 1 / -1;
  }
}

.profile-plan-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--color-primary-700);
  color: var(--color-neutral-0);
  font-size: 11px;
  font-weight: 700;
}

.profile-plan-price small {
  font-size: 13px;
  font-weight: 600;
  color: var(--text3);
}

.profile-plan-name {
  font-size: 14px;
  font-weight: 800;
  font-family: var(--font-display);
}

.profile-plan-price {
  font-size: 20px;
  font-weight: 800;
  margin: 6px 0 10px;
}

.profile-plan-features {
  margin: 0;
  padding-left: 18px;
  color: var(--text3);
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Bandeau d'accroche du compte pro inactif : l'activité de la fiche, puis ce que l'abonnement débloque */
.profile-hero {
  padding: 20px;
  border-radius: var(--radius-lg);
  background: var(--color-primary-700);
  color: var(--color-neutral-0);
}

.profile-hero h3 {
  margin: 0 0 6px;
  font-size: 20px;
  line-height: 1.3;
  color: inherit;
}

.profile-hero p {
  margin: 0;
  font-size: 14px;
  opacity: 0.85;
}

.profile-hero-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 13px;
}

.profile-hero-stats span {
  padding: 6px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.14);
}

.profile-hero-stats b {
  font-size: 17px;
  margin-right: 3px;
}

.profile-hero-stats em {
  font-style: normal;
  opacity: 0.75;
}

.profile-subtitle {
  margin: 6px 0 -4px;
  font-size: 15px;
  font-weight: 800;
  font-family: var(--font-display);
}

.profile-gains {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  container-type: inline-size;
}

.profile-gain {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-lg);
  background: var(--color-neutral-50);
  font-size: 12px;
  color: var(--text3);
}

.profile-gain strong {
  font-size: 14px;
  color: var(--text1, inherit);
}

.profile-gain-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 8px;
  border-radius: 10px;
  background: var(--color-primary-50);
  color: var(--color-primary-700);
  font-size: 15px;
}

.profile-gain-lock {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 12px;
  color: var(--text4);
}

/* Sur mobile : une ligne par avantage (icône à gauche) plutôt que six cartes empilées. */
@media (max-width: 600px) {
  .profile-gains {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .profile-gain {
    display: grid;
    grid-template-columns: 34px 1fr;
    column-gap: 12px;
    padding: 12px;
  }

  .profile-gain-icon {
    grid-row: 1 / 3;
    margin: 0;
  }

  .profile-hero {
    padding: 16px;
  }

  .profile-hero h3 {
    font-size: 18px;
  }

  /* L'annuel est la formule mise en avant : il passe en tête. */
  .profile-plans {
    grid-template-columns: 1fr;
  }

  .profile-plan:nth-child(2) {
    order: -1;
  }
}

.profile-plan-saving {
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-primary-700);
}

.profile-cta {
  align-self: stretch;
  height: 48px;
}

/* Codes promo et de parrainage : repliés, la plupart des visiteurs n'en ont pas */
.profile-codes-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px 14px;
  border: 1px dashed var(--color-neutral-300);
  border-radius: var(--radius-lg);
  background: none;
  color: var(--text2);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.profile-codes-chevron {
  margin-left: auto;
  font-size: 12px;
  transition: transform var(--transition-base);
}

.profile-codes-toggle[aria-expanded="true"] .profile-codes-chevron {
  transform: rotate(180deg);
}

.profile-codes-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  padding: 14px;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-lg);
  background: var(--color-neutral-50);
}

.profile-codes-seg {
  display: inline-flex;
  align-self: flex-start;
  padding: 3px;
  border: 1px solid var(--color-neutral-200);
  border-radius: 10px;
  background: var(--color-neutral-0);
}

.profile-codes-seg button {
  padding: 6px 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--text3);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.profile-codes-seg button.on {
  background: var(--color-primary-700);
  color: var(--color-neutral-0);
}

/* Sélecteur de catégories */
.category-picker {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  background: var(--color-neutral-0);
}

.category-picker-child {
  margin-left: 22px;
}

/* Recherche et sélection du sélecteur de catégories */
.category-picker-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Champ de recherche qui s'ouvre en panneau au focus : le champ et le panneau ne forment alors qu'une carte. */
.category-combo {
  position: relative;
  min-height: 46px;
}

.category-combo-backdrop {
  position: fixed;
  inset: 0;
  z-index: 299;
  background: transparent;
  border: none;
  padding: 0;
  cursor: default;
}

.category-combo-card {
  position: relative;
  background: var(--color-neutral-50, var(--color-neutral-0));
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  transition: border-radius 0.15s ease;
}

/* Ouverte, la carte s'agrandit dans le flux de la page (elle repousse la suite du formulaire) plutôt que de se
   superposer : la section parente rogne ce qui dépasse (overflow: hidden) et couperait un panneau flottant. */
.category-combo.open .category-combo-card {
  z-index: 300;
  border-radius: 22px;
  background: var(--color-neutral-0);
  box-shadow: var(--shadow-xl);
}

.category-combo-field {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
}

.category-combo-field>i {
  color: var(--text2);
  font-size: 14px;
  margin-right: 10px;
}

.category-combo-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  padding: 10px 0;
}

.category-combo-field input::placeholder {
  color: var(--text4);
}

.category-combo-panel {
  border-top: 1px solid var(--border);
  padding: 12px 16px 14px;
}

.category-combo-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text3);
  margin: 4px 0 8px;
}

.category-combo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.category-combo-chip {
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  color: var(--text2);
  background: var(--color-neutral-100);
  padding: 6px 14px;
  border-radius: var(--radius-full);
}

.category-combo-chip:hover {
  background: var(--color-neutral-200);
  color: var(--text);
}

.category-combo-panel .category-picker {
  border: 0;
  padding: 0;
  max-height: 240px;
}

.category-combo-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text3);
}

.category-picker-clear {
  border: 0;
  background: transparent;
  color: var(--text3);
  cursor: pointer;
  padding: 4px 8px;
}

.category-picker-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.category-picker-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px 3px 10px;
  border-radius: var(--radius-full);
  background: var(--color-neutral-100);
  color: var(--text2);
  font-size: 12px;
  font-weight: 600;
}

.category-picker-chip-remove {
  border: 0;
  background: transparent;
  color: var(--text3);
  cursor: pointer;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: var(--radius-full);
}

.category-picker-chip-remove:hover {
  background: var(--color-neutral-200);
  color: var(--text);
}

.category-picker-empty {
  color: var(--text3);
  font-size: 13px;
  padding: 6px 2px;
}

/* Ligne « champ + bouton » (email, ajout de membre) */
.profile-inline-form {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.profile-inline-form .input {
  flex: 1;
  min-width: 200px;
}

@media (max-width: 600px) {
  .profile-wrap {
    padding: 20px 14px 60px;
  }

  .profile-savebar {
    bottom: 8px;
  }

  .profile-savebar-actions {
    width: 100%;
  }

  .profile-savebar-actions .btn {
    flex: 1;
  }
}

/* ─── Menus déroulants du header ───────────────── */
.nav-menu {
  position: relative;
}

.nav-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 299;
  background: transparent;
  border: none;
  padding: 0;
  cursor: default;
}

.nav-menu-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 200px;
  z-index: 300;
  background: var(--color-neutral-0);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-xl);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .14), 0 2px 8px rgba(0, 0, 0, .08);
  padding: 6px;
}

.nav-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: none;
  background: transparent;
  padding: 10px 12px;
  border-radius: var(--radius-lg);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-body);
  color: var(--text);
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}

.nav-menu-item:hover {
  background: var(--color-neutral-25);
  color: var(--color-primary-700);
}

.nav-menu-item i {
  width: 16px;
  text-align: center;
  color: var(--text3);
}

.nav-menu-item:hover i {
  color: var(--color-primary-700);
}

.nav-menu-sep {
  height: 1px;
  margin: 6px 4px;
  background: var(--color-neutral-100);
}

/* Coche de l'identité active dans le sélecteur */
.nav-menu-item .nav-menu-check {
  margin-left: auto;
  color: var(--color-primary-700);
}

/* Intitulé d'un groupe d'entrées (sélecteur d'identité) */
.nav-menu-heading {
  padding: 6px 12px 2px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text4);
}

/* ─── Menu du compte (avatar du header) ────────────
   Identité active, changement d'identité, destinations, puis déconnexion. */
.account-menu {
  width: min(296px, calc(100vw - 24px));
  padding: 7px;
  font-size: 13.5px;
  border-color: var(--border);
  box-shadow: 0 10px 34px -14px rgba(0, 0, 0, .35);
}

.account-menu .ap-avatar {
  border: none;
  box-shadow: none;
}

.account-menu-ident {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 10px 12px;
  border-radius: 9px;
  text-decoration: none;
}

.account-menu-ident:hover {
  background: var(--color-neutral-25);
}

.account-menu-ident-text,
.account-menu-acc-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.account-menu-name {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-neutral-900);
}

.account-menu-link {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--g);
}

.account-menu .nav-menu-heading {
  padding: 9px 10px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--text3);
}

.account-menu-acc {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 9px;
  background: transparent;
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
}

.account-menu-acc:hover {
  background: var(--color-neutral-25);
}

.account-menu-acc.on {
  background: #EDF6EE;
}

.account-menu-acc-name {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-neutral-900);
}

.account-menu-acc-type {
  font-size: 11.5px;
  color: var(--text3);
}

/* Liens d'information en pied de menu, discrets comme des mentions de bas de page. */
.account-menu-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  padding: 8px 10px 4px;
  margin-top: 4px;
  border-top: 1px solid var(--border);
}

.account-menu-legal a {
  font-size: 11.5px;
  color: var(--text3);
  text-decoration: none;
}

.account-menu-legal a:hover {
  color: var(--color-primary-700);
  text-decoration: underline;
}

.account-menu-acc .nav-menu-check {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--g);
}

.account-menu .nav-menu-item {
  gap: 11px;
  padding: 9px 10px;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text2);
}

.account-menu .nav-menu-item i {
  width: 19px;
  font-size: 16px;
}

.account-menu .nav-menu-sep {
  background: var(--border);
}

/* Déconnexion : seule ligne en rouge, tout en bas. */
.account-menu .nav-menu-item--danger,
.account-menu .nav-menu-item--danger i,
.account-menu .nav-menu-item--danger:hover,
.account-menu .nav-menu-item--danger:hover i {
  color: #B4472A;
}

.account-menu .nav-menu-item--danger:hover {
  background: var(--color-error-bg);
}

/* ─── Notifications ──────────────────────────────── */
.notif-bell-icon {
  position: relative;
  display: inline-flex;
}

/* Ancrée sur le milieu de l'icône : un compteur à deux chiffres s'allonge vers la
   droite sans recouvrir la cloche. Le contour blanc la décolle de l'icône. */
.notif-badge {
  position: absolute;
  top: -7px;
  left: 11px;
  /* Pastille de 17 px + contour de 2 px */
  min-width: 21px;
  height: 21px;
  padding: 0 4px;
  border: 2px solid var(--white);
  border-radius: var(--radius-full);
  background: #E53E3E;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 17px;
  text-align: center;
}

.notif-panel {
  width: 340px;
  padding: 0;
  overflow: hidden;
}

.notif-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-neutral-100);
  font-size: 13px;
  font-weight: 800;
  font-family: var(--font-display);
}

.notif-panel-action {
  border: none;
  background: none;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary-700);
  cursor: pointer;
}

.notif-panel-action:hover {
  text-decoration: underline;
}

.notif-list {
  max-height: 380px;
  overflow-y: auto;
}

.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-base);
}

.notif-item+.notif-item {
  border-top: 1px solid var(--color-neutral-100);
}

.notif-item:hover {
  background: var(--color-neutral-25);
}

/* Non lue : liseré vert et fond très légèrement teinté */
.notif-item.unread {
  background: var(--color-primary-25);
  box-shadow: inset 3px 0 0 var(--color-primary-700);
}

.notif-item-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.notif-item-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.notif-item-excerpt {
  font-size: 12px;
  color: var(--text3);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.notif-item-date {
  font-size: 11px;
  color: var(--text4);
}

.notif-panel-foot {
  padding: 10px 14px;
  border-top: 1px solid var(--color-neutral-100);
  background: var(--color-neutral-50);
  text-align: center;
}

.notif-panel-foot a {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary-700);
  text-decoration: none;
}

.notif-empty {
  padding: 28px 14px;
  text-align: center;
  font-size: 13px;
  color: var(--text4);
}

/* Menus déroulants du header sur mobile ─────────────────────────────
   En absolute + right: 0, le panneau se déploie vers la gauche depuis son
   déclencheur. La cloche étant trop à gauche sur petit écran, il démarrait
   à une abscisse négative et se faisait rogner par overflow-x: hidden.
   On l'ancre au viewport, sous le header (--header-h est tenu à jour par
   syncHeaderHeight). */
@media (max-width: 560px) {

  /* Centré sur le viewport : la largeur reste gérée par la règle
     .notif-panel plus bas (min(340px, 100vw - 32px)), on ne fixe ici
     que le positionnement. Limité au header : le menu « … » d'une publication
     (.post-menu-panel) doit rester accroché à son bouton, sinon il s'ouvre en haut
     de l'écran, loin de la carte. */
  .header .nav-menu-panel {
    position: fixed;
    top: calc(var(--header-h) + 6px);
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }

  /* Laisse toujours la place à l'en-tête et au pied du panneau. */
  .notif-list {
    max-height: calc(100vh - var(--header-h) - 130px);
  }
}

/* Page /notifications : les éléments occupent toute la largeur de la section */
.notif-page-list {
  padding: 0;
  gap: 0;
}

.notif-page-list .notif-item {
  padding: 14px 20px;
  border-radius: 0;
}

/* Tableau des préférences (profil) */
.notif-prefs {
  display: flex;
  flex-direction: column;
}

.notif-prefs-head,
.notif-prefs-row {
  display: grid;
  grid-template-columns: 1fr 90px 90px;
  align-items: center;
  gap: 12px;
}

.notif-prefs-head {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-neutral-100);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text4);
  text-align: center;
}

.notif-prefs-row+.notif-prefs-row {
  border-top: 1px solid var(--color-neutral-100);
}

.notif-prefs-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  padding: 12px 0;
}

.notif-prefs-label small {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text4);
  margin-top: 2px;
}

/* L'interrupteur est seul dans sa colonne : on le centre et on retire le padding
   vertical hérité de .profile-switch, la ligne du tableau porte déjà l'espacement. */
.notif-prefs-switch {
  justify-content: center;
  padding: 0;
}

.notif-prefs-switch+.notif-prefs-switch {
  border-top: none;
}

@media (max-width: 600px) {
  .notif-panel {
    width: min(340px, calc(100vw - 32px));
  }

  .notif-prefs-head,
  .notif-prefs-row {
    grid-template-columns: 1fr 64px 64px;
  }
}

/* ─── Détail d'une publication ───────────────────── */
/* Même largeur que la colonne du fil de l'accueil : à 1320 px la carte s'étirait sur 1200 px, des
   lignes de texte trop longues à lire et des photos agrandies bien au-delà de leur taille. */
.post-details-wrap {
  margin: 0 auto;
  padding: 0px 25px 80px;
  max-width: 860px;
}

.post-details-author {
  margin-top: 16px;
  display: flex;
  justify-content: center;
}

/* Score pas encore calculé : volontairement neutre, ce n'est pas une mauvaise note */
.ap-score-pending {
  text-align: center;
  padding: 18px 8px 4px;
  color: var(--text3);
}

.ap-score-pending i {
  font-size: 26px;
  color: var(--color-neutral-300);
  margin-bottom: 10px;
}

.ap-score-pending-title {
  font-size: 15px;
  font-weight: 800;
  font-family: var(--font-display);
  color: var(--text2);
  margin-bottom: 6px;
}

/* ── Cibles tactiles ──────────────────────────────────────────────
   Sur écran tactile, les guidelines (Apple 44px, Material 48dp) imposent
   une zone d'appui minimale. On agrandit la zone via ::after plutôt que
   la boîte visible, pour ne pas déformer la mise en page. */
@media (pointer: coarse) {

  .post-button {
    position: relative;
  }

  .post-button::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: max(100%, 44px);
    height: 44px;
  }
}

/* ─── Coordonnées d'une société ──────────────────── */

/* Encart de la fiche publique : une ligne par coordonnée visible pour le lecteur. */
.ap-contact-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ap-contact-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  font-size: 13px;
  color: var(--text2);
}

.ap-contact-row>i {
  width: 16px;
  margin-top: 2px;
  text-align: center;
  color: var(--text4);
  flex-shrink: 0;
}

/* min-width: 0 et overflow-wrap : une longue adresse e-mail ne doit ni élargir la colonne ni
   sortir de la carte. */
.ap-contact-value {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 600;
  color: var(--text);
}

a.ap-contact-value:hover {
  color: var(--g);
}

.ap-contact-value--text {
  font-weight: 500;
  line-height: 1.5;
}

/* Coordonnée réservée aux inscrits, devant un visiteur anonyme : un appel à se connecter. */
.ap-contact-login {
  flex: 1;
  min-width: 0;
  padding: 0;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: var(--g);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* À qui la coordonnée est montrée : vue du seul gestionnaire de la société. */
.ap-contact-vis {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--color-neutral-100);
  color: var(--text3);
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}

.ap-contact-empty {
  font-size: 12px;
  color: var(--text3);
}

.ap-contact-empty a {
  color: var(--g);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ─── Limite de consultation des fiches (visiteur sans compte) ─── */
.consult-wall {
  max-width: 520px;
  margin: 80px auto;
  padding: 0 16px;
  text-align: center;
}

.consult-wall-icon {
  font-size: 32px;
  color: var(--text3);
  margin-bottom: 12px;
}

.consult-wall-title {
  font-size: var(--text-2xl);
  color: var(--text);
  margin: 0 0 10px;
}

.consult-wall-text {
  color: var(--text2);
  font-size: var(--text-base);
  margin: 0 0 22px;
}

.consult-wall-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.consult-banner {
  padding: 10px 16px;
  text-align: center;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  color: var(--text2);
  font-size: var(--text-base);
}

.consult-banner a {
  margin-left: 6px;
  font-weight: 600;
}

/* ─── Coach du score et checklist d'onboarding (Ma société) ─── */
.score-coach-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-bottom: 14px;
}

.score-coach-value {
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}

.score-coach-value span {
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--text3);
}

.score-coach-value--empty {
  font-size: var(--text-2xl);
  color: var(--text2);
}

.score-coach-label {
  color: var(--text2);
  font-size: var(--text-base);
}

.score-coach-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.score-coach-bar {
  display: grid;
  grid-template-columns: minmax(120px, 190px) 1fr 70px;
  align-items: center;
  gap: 10px;
  font-size: var(--text-sm);
  color: var(--text2);
}

.score-coach-bar-track,
.onboarding-progress {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}

.score-coach-bar-fill,
.onboarding-progress span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--text);
}

.score-coach-bar-value {
  text-align: right;
  color: var(--text3);
}

.score-coach-pending {
  padding: 10px 12px;
  margin-bottom: 14px;
  border-radius: var(--radius-md);
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text2);
  font-size: var(--text-base);
}

.score-coach-pending i {
  margin-right: 6px;
}

.score-coach-title {
  font-weight: 600;
  margin-bottom: 8px;
}

.score-coach-levers,
.onboarding-steps {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.score-coach-lever,
.onboarding-step {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-base);
}

.score-coach-gain {
  min-width: 48px;
  font-weight: 700;
  color: var(--text);
}

.score-coach-lever-text,
.onboarding-step-text {
  flex: 1;
  min-width: 0;
}

.onboarding-progress {
  margin-bottom: 14px;
}

.onboarding-step i {
  color: var(--text4);
}

.onboarding-step.is-done i {
  color: var(--text);
}

.onboarding-step.is-done .onboarding-step-text {
  color: var(--text3);
  text-decoration: line-through;
}

.onboarding-dismiss {
  margin-left: auto;
  background: none;
  border: 0;
  color: var(--text3);
  cursor: pointer;
  font-size: var(--text-lg);
}

@media (max-width: 600px) {
  .score-coach-bar {
    grid-template-columns: 1fr 60px;
  }

  .score-coach-bar-track {
    grid-column: 1 / -1;
    order: 3;
  }

  .score-coach-lever,
  .onboarding-step {
    flex-wrap: wrap;
  }
}

/* ─── Bandeau de consentement et pied de page ─── */
.consent-box {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 900;
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 18px;
  background: var(--bg);
  border: 1px solid var(--border2);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
  color: var(--text2);
  font-size: var(--text-base);
}

.consent-box strong {
  color: var(--text);
}

.consent-box p {
  margin: 4px 0 12px;
}

.consent-choices {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.site-footer {
  padding: 18px 16px 28px;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text3);
}

.site-footer button {
  background: none;
  border: 0;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
}

.profile-notice--warn {
  border-color: var(--warning, #b45309);
}

/* ─── Bandeau d'état de l'abonnement ─── */
.billing-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  color: var(--text2);
  font-size: var(--text-base);
}

.billing-banner--warn {
  border-bottom-color: var(--warning, #b45309);
  color: var(--text);
}

.billing-banner a {
  font-weight: 600;
}

.billing-banner-close {
  background: none;
  border: 0;
  color: var(--text3);
  cursor: pointer;
}

/* Recommandation et avis d'une collaboration */
.collab-feedback {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.collab-recommend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.collab-review {
  margin-top: 4px;
  font-size: 13px;
  color: var(--text2);
}

.collab-proof {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text3);
}

/* ─── Statistiques de la fiche (espace pro) ─── */
.stats-period {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin: 14px 0;
}

.stats-tile {
  border: 1px solid var(--border);
  border-radius: var(--radius, 8px);
  padding: 12px 14px;
  background: var(--bg);
}

.stats-label {
  color: var(--text2);
  font-size: var(--text-sm, 13px);
}

.stats-value {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
}

.stats-delta {
  color: var(--text3);
  font-size: 12px;
}

.stats-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 90px;
  margin: 12px 0 18px;
}

.stats-bar {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: flex-end;
}

.stats-bar>div {
  width: 100%;
  min-height: 1px;
  background: var(--primary, #2f6f4f);
  border-radius: 2px 2px 0 0;
}

.stats-sources {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 4px;
}

/* ── Invitation à activer le compte pro ──────────────────────────────────
   À la place d'un champ ou d'un onglet inutilisable sans abonnement (UpgradeNotice, UpgradePromptModal). */
.upgrade-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  background: var(--color-neutral-50, var(--color-neutral-100));
  margin-bottom: 6px;
}

.upgrade-notice-icon {
  color: var(--color-primary-700);
}

.upgrade-notice-body {
  flex: 1 1 220px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.upgrade-notice-text {
  font-size: 13px;
  color: var(--text2);
}

.upgrade-notice-link {
  align-self: flex-start;
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary-700);
  text-decoration: underline;
  cursor: pointer;
}

/* Encart de publication verrouillé : l'invitation prend la place du champ, sans la hauteur d'un formulaire. */
.feed-composer--locked {
  padding: 12px;
}

.upgrade-modal {
  position: relative;
  padding: 28px 24px 24px;
  text-align: center;
}

.upgrade-modal-icon {
  font-size: 28px;
  color: var(--color-primary-700);
  margin-bottom: 10px;
}

.upgrade-modal-title {
  font-size: var(--text-lg, 18px);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.upgrade-modal-text {
  font-size: var(--text-base);
  color: var(--text2);
  margin: 0 0 14px;
}

.upgrade-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 6px;
}

/* Onglet réservé aux comptes pro actifs : visible, mais estompé et marqué d'un cadenas. */
.profile-tab--locked {
  opacity: 0.65;
}

/* Publication en attente : ni survol ni clic, traits gris à la place de l'auteur et du texte. */
.community-post--skel {
  pointer-events: none;
  margin-bottom: 18px;
}

.community-post-skel-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.community-post-skel-body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 4px 16px 18px;
}

/* Pages d'information (chartes, comment ça marche), reprises de la maquette. */
/* ═══════════════════════════════════════════════
   PAGES LÉGALES
═══════════════════════════════════════════════ */
.legal-wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: 36px 24px 72px;
}

.legal-back {
  display: inline-block;
  font-size: 13px;
  color: var(--text3);
  text-decoration: none;
  margin-bottom: 18px;
}

.legal-back i {
  font-size: 11px;
  margin-right: 4px;
}

.legal-back:hover {
  color: var(--g);
}

.legal-hero {
  margin-bottom: 28px;
}

.legal-title {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 900;
  color: var(--text);
  line-height: 1.15;
  margin: 0 0 8px;
}

.legal-updated {
  font-size: 13px;
  color: var(--text4);
  margin: 0;
}

.legal-intro {
  font-size: 15px;
  color: var(--text2);
  line-height: 1.7;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-neutral-200);
  margin: 0 0 4px;
}

/* Sommaire */
.legal-toc {
  background: var(--color-neutral-50);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  margin: 28px 0 40px;
}

.legal-toc-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text4);
  margin-bottom: 10px;
}

.legal-toc a {
  display: block;
  font-size: 13.5px;
  color: var(--text2);
  text-decoration: none;
  padding: 4px 0;
  transition: color .12s;
}

.legal-toc a:hover {
  color: var(--g);
}

/* Sections */
.legal-section {
  margin-bottom: 40px;
  scroll-margin-top: calc(var(--header-h) + 20px);
}

.legal-section h2 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  padding-bottom: 10px;
  margin: 0 0 14px;
  border-bottom: 2px solid var(--color-primary-600);
  display: inline-block;
}

.legal-section h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin: 22px 0 8px;
}

.legal-section p {
  font-size: 14px;
  color: var(--text2);
  line-height: 1.75;
  margin: 0 0 12px;
}

.legal-section ul,
.legal-section ol {
  margin: 0 0 14px;
  padding-left: 20px;
}

.legal-section li {
  font-size: 14px;
  color: var(--text2);
  line-height: 1.7;
  margin-bottom: 7px;
}

.legal-section a {
  color: var(--color-primary-700);
  text-decoration: underline;
}

.legal-section a:hover {
  color: var(--color-primary-800);
}

.legal-section code {
  background: var(--color-neutral-100);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Encadrés */
.legal-callout {
  background: var(--color-primary-50, #f0faf4);
  border-left: 3px solid var(--color-primary-600);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 14px 16px !important;
  margin: 16px 0 !important;
  font-size: 13.5px !important;
}

/* Tableaux : définitions, identification de l'éditeur, données et durées de conservation. */
.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0 18px;
  font-size: 13.5px;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.legal-table th,
.legal-table td {
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-neutral-100);
  line-height: 1.6;
}

.legal-table tr:last-child th,
.legal-table tr:last-child td {
  border-bottom: none;
}

.legal-table th {
  background: var(--color-neutral-50);
  font-weight: 700;
  color: var(--text);
  width: 34%;
}

.legal-table td {
  color: var(--text2);
}

.legal-table thead th {
  width: auto;
  background: var(--color-primary-800);
  color: white;
  font-size: 12.5px;
}

.legal-table--wide th {
  width: auto;
}

@media (max-width: 600px) {

  /* Trois colonnes ne tiennent pas sur un téléphone : chaque ligne devient un bloc. */
  .legal-table--wide thead {
    display: none;
  }

  .legal-table--wide tr {
    display: block;
    border-bottom: 1px solid var(--color-neutral-200);
    padding: 6px 0;
  }

  .legal-table--wide td {
    display: block;
    border: none;
    padding: 4px 14px;
  }

  .legal-table--wide td:first-child {
    font-weight: 700;
    color: var(--text);
  }
}

/* ═══════════════════════════════════════════════
   PAGE COMMENT ÇA MARCHE
═══════════════════════════════════════════════ */
.hiw-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--color-primary-600);
  margin-bottom: 14px;
}

.hiw-hero {
  background: linear-gradient(160deg, var(--color-primary-800) 0%, #071a0c 100%);
  padding: 76px 24px 84px;
  position: relative;
  overflow: hidden;
}

.hiw-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 75% 15%, rgba(255, 255, 255, .05) 0%, transparent 60%);
}

.hiw-hero-inner {
  max-width: 820px;
  margin: 0 auto;
  position: relative;
}

.hiw-hero .hiw-eyebrow {
  color: var(--color-primary-300);
}

.hiw-hero-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.6vw, 50px);
  font-weight: 900;
  color: white;
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0 0 18px;
}

.hiw-hero-sub {
  font-size: 17px;
  color: rgba(255, 255, 255, .72);
  line-height: 1.65;
  margin: 0;
  max-width: 620px;
}

.hiw-section {
  padding: 72px 24px;
}

.hiw-section--alt {
  background: var(--color-neutral-50);
}

.hiw-section--dark {
  background: var(--color-neutral-950);
}

.hiw-inner {
  max-width: 900px;
  margin: 0 auto;
}

.hiw-h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.2vw, 34px);
  font-weight: 900;
  color: var(--text);
  line-height: 1.18;
  margin: 0 0 16px;
}

.hiw-section--dark .hiw-h2 {
  color: white;
}

.hiw-lead {
  font-size: 16px;
  color: var(--text2);
  line-height: 1.75;
  margin: 0 0 32px;
  max-width: 700px;
}

.hiw-lead--light {
  color: rgba(255, 255, 255, .72);
}

.hiw-lead--light strong {
  color: white;
}

/* Le problème */
.hiw-problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}

.hiw-problem {
  background: var(--color-neutral-0);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-lg);
  padding: 22px;
}

.hiw-problem-icon {
  width: 44px;
  height: 44px;
  margin-bottom: 12px;
  border-radius: var(--radius-full);
  background: var(--color-primary-50);
  color: var(--color-primary-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.hiw-problem h3 {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 8px;
}

.hiw-problem p {
  font-size: 13.5px;
  color: var(--text3);
  line-height: 1.65;
  margin: 0;
}

.hiw-punch {
  font-size: 17px;
  color: var(--text);
  line-height: 1.7;
  border-left: 3px solid var(--color-primary-600);
  padding-left: 18px;
  margin: 0;
}

/* Étapes */
.hiw-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 34px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hiw-step {
  display: flex;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-neutral-200);
}

.hiw-step:last-child {
  border-bottom: none;
}

.hiw-step-num {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-primary-700);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 900;
}

.hiw-step-body h3 {
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  margin: 6px 0 7px;
}

.hiw-step-body p {
  font-size: 14.5px;
  color: var(--text2);
  line-height: 1.7;
  margin: 0;
}

.hiw-cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.hiw-cta-row--center {
  justify-content: center;
}

/* Échelle du lotus */
.hiw-lotus-scale {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin: 8px 0 40px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: var(--radius-xl);
  padding: 26px 20px;
}

.hiw-lotus-item {
  text-align: center;
}

.hiw-lotus-svg {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.hiw-lotus-svg svg {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .3));
}

.hiw-lotus-label {
  font-size: 11.5px;
  color: rgba(255, 255, 255, .6);
  line-height: 1.4;
}

/* Critères */
.hiw-criteria {
  margin-bottom: 34px;
}

.hiw-criteria-title,
.hiw-never-title {
  font-size: 15px;
  font-weight: 800;
  color: white;
  margin: 0 0 14px;
}

.hiw-criteria-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.hiw-criterion {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
  color: rgba(255, 255, 255, .75);
  line-height: 1.55;
}

.hiw-criterion strong {
  color: white;
  font-weight: 600;
}

/* Barème détaillé (docs/score-protrust.md) : les points de chaque composante en vis-à-vis. */
.hiw-formula {
  margin-bottom: 34px;
}

.hiw-formula-lead {
  font-size: 14px;
  color: rgba(255, 255, 255, .7);
  margin: 0 0 14px;
}

.hiw-formula-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}

.hiw-formula-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .72);
}

.hiw-formula-row strong {
  color: white;
  font-weight: 600;
}

.hiw-formula-pts {
  flex-shrink: 0;
  min-width: 44px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 900;
  color: var(--color-primary-300);
}

.hiw-formula-rules {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hiw-formula-rules li {
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .66);
}

.hiw-formula-rules strong {
  color: white;
  font-weight: 600;
}

.hiw-crit-mark {
  color: var(--color-primary-300);
  flex-shrink: 0;
}

.hiw-never {
  background: rgba(255, 255, 255, .03);
  border: 1px dashed rgba(255, 255, 255, .15);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
}

.hiw-never-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

.hiw-never-item {
  display: flex;
  gap: 9px;
  align-items: center;
  font-size: 13.5px;
  color: rgba(255, 255, 255, .6);
}

.hiw-never-mark {
  color: #E57373;
  flex-shrink: 0;
}

.hiw-never-note {
  font-size: 13px;
  color: rgba(255, 255, 255, .5);
  line-height: 1.65;
  margin: 0;
  font-style: italic;
}

/* Engagements */
.hiw-pledge-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.hiw-pledge {
  background: var(--color-neutral-0);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-lg);
  padding: 22px;
}

.hiw-pledge h3 {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 8px;
}

.hiw-pledge p {
  font-size: 13.5px;
  color: var(--text3);
  line-height: 1.65;
  margin: 0;
}

.hiw-pledge a {
  color: var(--color-primary-700);
  text-decoration: underline;
}

/* CTA final */
.hiw-final {
  background: var(--color-neutral-950);
  padding: 80px 24px;
  text-align: center;
}

.hiw-final h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.4vw, 36px);
  font-weight: 900;
  color: white;
  margin: 0 0 10px;
}

.hiw-final p {
  font-size: 15.5px;
  color: rgba(255, 255, 255, .6);
  margin: 0 0 26px;
}

.hiw-ghost-light {
  color: white !important;
  border-color: rgba(255, 255, 255, .25) !important;
}

.hiw-ghost-light:hover {
  background: rgba(255, 255, 255, .08) !important;
}

@media (max-width: 780px) {

  .hiw-problem-grid,
  .hiw-pledge-grid,
  .hiw-criteria-grid,
  .hiw-never-grid {
    grid-template-columns: 1fr;
  }

  .hiw-lotus-scale {
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    padding: 18px 10px;
  }

  .hiw-lotus-label {
    font-size: 9.5px;
  }
}

@media (max-width: 560px) {
  .hiw-hero {
    padding: 52px 16px 58px;
  }

  .hiw-section {
    padding: 52px 16px;
  }

  .hiw-final {
    padding: 58px 16px;
  }

  .hiw-step {
    gap: 13px;
  }

  /* Cinq colonnes ne tiennent plus depuis que les paliers portent leurs vrais
     libellés (« Profil qui tient la route » au lieu de « Fiable ») : la page
     débordait de 80px sur le côté. On passe en liste — un lotus par ligne,
     son libellé à côté — ce qui se lit de toute façon mieux au téléphone. */
  .hiw-lotus-scale {
    grid-template-columns: auto 1fr;
    gap: 14px 14px;
    align-items: center;
    padding: 18px 16px;
  }

  .hiw-lotus-item {
    display: contents;
  }

  .hiw-lotus-svg {
    margin-bottom: 0;
  }

  .hiw-lotus-svg svg {
    width: 52px;
    height: auto;
  }

  .hiw-lotus-label {
    font-size: 12.5px;
    text-align: left;
  }

  .hiw-cta-row .btn {
    width: 100%;
  }
}

/* Page Contact : chaque carte est un lien qui ouvre la messagerie avec un objet prérempli. */
.contact-card {
  display: block;
  color: inherit;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.contact-card:hover {
  border-color: var(--color-primary-300);
  box-shadow: var(--shadow-md);
}

.contact-card-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  margin-bottom: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-50);
  color: var(--color-primary-700);
  font-size: 15px;
}

.contact-inline-link {
  font-weight: 600;
  color: var(--color-primary-700);
}

.contact-direct {
  margin-top: 28px;
  padding: 20px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px 48px;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-lg);
  background: var(--color-neutral-0);
}

.contact-direct-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 4px;
}

.contact-direct-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

a.contact-direct-value {
  color: var(--color-primary-700);
}

a.contact-direct-value:hover {
  text-decoration: underline;
}
/* ─── Invite de création de compte (geste réservé aux comptes) ─── */
.auth-prompt-alt {
  margin-top: 14px;
  font-size: var(--text-base);
  color: var(--text2);
}

.auth-prompt-alt a {
  font-weight: 600;
}