/* ==========================================================================
   YAKÉ PILOTE — COUCHE VISUELLE « PRO » (styles_pro.css)
   --------------------------------------------------------------------------
   Cette feuille est chargée APRÈS styles.css et styles_modern_v9.css.
   Elle ne change AUCUNE fonction : uniquement l'apparence.

   Charte, alignée sur l'espace administrateur :
     vert profond #0B3B24 · vert action #0B6B3D · fonds clairs #F2F5F3
     texte #13221A / #34463C / #66766C · lignes #E4EBE6 · cartes blanches
   Règles : un seul rayon pour les cartes (18 px), un seul pour les boutons
   et champs (14 px), pilules entièrement arrondies, ombres discrètes,
   hiérarchie typographique nette.
   ========================================================================== */

/* ------------------------------------------------------------------ 1. JETONS */
:root {
  --p-bg: #F2F5F3;
  --p-bg-soft: #F7FAF8;
  --p-card: #FFFFFF;
  --p-ink: #13221A;
  --p-ink2: #34463C;
  --p-mute: #66766C;
  --p-line: #E4EBE6;
  --p-line-strong: #D3DED8;
  --p-900: #0B3B24;
  --p-800: #0E4E2F;
  --p-700: #0B6B3D;
  --p-600: #0B8A4E;
  --p-50: #EEF8F2;
  --p-100: #E1F2E8;
  --p-amber: #B45309;
  --p-amber-bg: #FFF4E5;
  --p-red: #C62828;
  --p-red-bg: #FDECEC;
  --p-yellow: #FFC300;
  --p-r-card: 18px;
  --p-r-ctrl: 14px;
  --p-r-sheet: 26px;
  --p-sh-1: 0 1px 2px rgba(10,30,20,.05);
  --p-sh-2: 0 1px 2px rgba(10,30,20,.05), 0 6px 18px rgba(10,30,20,.055);
  --p-sh-3: 0 10px 30px rgba(10,30,20,.10);
  --p-nav-h: 68px;
}

/* ------------------------------------------------------------------ 2. BASE */
html, body { background: var(--p-bg); }

body {
  background: var(--p-bg) !important;
  color: var(--p-ink);
  font-size: 14px;
  -webkit-tap-highlight-color: transparent;
}

.app {
  background: var(--p-bg) !important;
  color: var(--p-ink);
}

.screen {
  padding-bottom: calc(var(--p-nav-h) + 34px);
  background: var(--p-bg);
}

.pad { padding: 16px; }

::selection { background: var(--p-100); }

/* ------------------------------------------------------------------ 3. TEXTES */
h1, h2, h3 { color: var(--p-ink); letter-spacing: -.2px; }

.small { font-size: 12.5px; line-height: 1.45; color: var(--p-ink2); }
.tiny {
  font-size: 10.5px; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; color: var(--p-mute);
}
.muted, .small.muted { color: var(--p-mute); }
.grow { flex: 1 1 auto; min-width: 0; }
.row { display: flex; align-items: center; gap: 10px; }
.row.wrap { flex-wrap: wrap; }
.between { justify-content: space-between; }
.center { text-align: center; }
code, .code { font-size: 12px; }

/* icônes vectorielles */
.y-ic { display: block; flex: none; }

/* ------------------------------------------------------------------ 4. CADRE ORDINATEUR */
/* L'application reste une colonne de téléphone : on l'assume et on la met
   en valeur (fond sombre, colonne arrondie) au lieu de la laisser flotter. */
@media (min-width: 760px) {
  html, body {
    background: radial-gradient(1100px 620px at 12% -8%, #17583A 0%, transparent 58%),
                radial-gradient(900px 560px at 105% 108%, #0B4A30 0%, transparent 55%),
                #082A1A !important;
    background-attachment: fixed !important;
  }
  .app {
    max-width: 480px;
    margin: 22px auto;
    min-height: calc(100vh - 44px);
    border-radius: 26px;
    box-shadow: 0 30px 70px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.06);
    overflow: hidden;
    position: relative;
  }
  .topbar, .mh-header { border-radius: 26px 26px 0 0; }
  .screen { padding-bottom: 108px; }
  /* barre du bas : centrée sous la colonne, jamais collée au bord de la fenêtre */
  .mvp-bottom-nav {
    left: 0 !important;
    right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: calc(100% - 28px) !important;
    max-width: 452px !important;
  }
  .fab-listen { left: calc(50% + 116px); right: auto; }
  .toast { max-width: 420px; }
}

/* ------------------------------------------------------------------ 5. BARRES DU HAUT */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px 12px;
  background: rgba(242,245,243,.92);
  backdrop-filter: saturate(1.3) blur(10px);
  -webkit-backdrop-filter: saturate(1.3) blur(10px);
  border-bottom: 1px solid var(--p-line);
}
.topbar h1 { font-size: 20px; font-weight: 800; line-height: 1.15; }
.topbar .sub { margin-top: 2px; font-size: 12.5px; color: var(--p-mute); font-weight: 600; }

.icon-btn {
  width: 40px; height: 40px; border-radius: 13px;
  background: var(--p-card);
  border: 1px solid var(--p-line);
  box-shadow: var(--p-sh-1);
  color: var(--p-ink2);
  display: flex; align-items: center; justify-content: center;
  flex: none; padding: 0; position: relative;
  transition: background .15s, border-color .15s, transform .12s;
}
.icon-btn:active { transform: scale(.94); }
.icon-btn:hover { background: var(--p-bg-soft); }
.icon-btn .y-ic { width: 21px; height: 21px; }

.nbadge {
  position: absolute; top: -5px; right: -5px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--p-red); color: #fff;
  font-size: 10.5px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--p-bg);
}

/* En-tête de l'accueil */
.mh-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 20px 16px 12px;
  background: var(--p-bg);
}
.mh-logo { font-size: 26px; font-weight: 900; letter-spacing: .5px; color: var(--p-900); line-height: 1; }
.mh-sub { margin-top: 6px; font-size: 13px; color: var(--p-ink2); font-weight: 600; }
.mh-logo-location {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--p-100); color: var(--p-700);
  font-size: 11.5px; font-weight: 800;
}
.mh-actions { display: flex; gap: 8px; }
.mh-icon {
  width: 42px; height: 42px; border-radius: 14px;
  background: var(--p-card); border: 1px solid var(--p-line);
  color: var(--p-ink2); box-shadow: var(--p-sh-1);
  display: flex; align-items: center; justify-content: center; padding: 0;
  transition: transform .12s, background .15s;
}
.mh-icon:active { transform: scale(.94); }
.mh-icon .y-ic { width: 21px; height: 21px; }

/* ------------------------------------------------------------------ 6. RECHERCHE */
.mh-search {
  display: flex; align-items: center; gap: 10px;
  margin: 4px 16px 14px;
  padding: 0 14px; height: 50px;
  background: var(--p-card);
  border: 1px solid var(--p-line);
  border-radius: var(--p-r-ctrl);
  box-shadow: var(--p-sh-1);
}
.mh-search .mh-search-ic { color: var(--p-mute); display: flex; }
.mh-search input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: 0;
  background: transparent; font-size: 15px; font-weight: 600; color: var(--p-ink);
}
.mh-search input::placeholder { color: #98A79E; font-weight: 500; }
.mh-search:focus-within { border-color: var(--p-600); box-shadow: 0 0 0 3px rgba(11,138,78,.12); }

/* ------------------------------------------------------------------ 7. CARTE « EN DIRECT » */
.mh-live {
  margin: 0 16px;
  background: var(--p-card);
  border: 1px solid var(--p-line);
  border-radius: var(--p-r-card);
  box-shadow: var(--p-sh-2);
  overflow: hidden;
}
.mh-live-head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 16px 12px; }
.mh-live-head small {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .7px;
  text-transform: uppercase; color: var(--p-700);
}
.mh-live-head small::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--p-600); box-shadow: 0 0 0 3px rgba(11,138,78,.16);
}
.mh-live-head h1 { margin-top: 6px; font-size: 19px; font-weight: 800; line-height: 1.22; }
.mh-live-count { text-align: right; flex: none; }
.mh-live-count b { display: block; font-size: 30px; font-weight: 900; color: var(--p-900); line-height: 1; }
.mh-live-count span { font-size: 11.5px; font-weight: 700; color: var(--p-mute); }

.mh-live-map { position: relative; height: 210px; background: var(--p-50); cursor: pointer; }
.mh-live-map .leaflet-container { height: 100%; width: 100%; }
.mh-live-cap {
  position: absolute; left: 10px; bottom: 10px; z-index: 400;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(255,255,255,.94); color: var(--p-ink2);
  font-size: 11px; font-weight: 700; box-shadow: var(--p-sh-1);
}
.mh-live-expand {
  position: absolute; right: 10px; top: 10px; z-index: 400;
  padding: 8px 12px; border-radius: 999px;
  background: var(--p-card); color: var(--p-ink2);
  font-size: 12px; font-weight: 800; box-shadow: var(--p-sh-2);
  border: 1px solid var(--p-line);
}
.mh-live-foot {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px 4px;
}
.mh-live-lg { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--p-ink2); }
.mh-live-lg i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.mh-live-lg b { color: var(--p-ink); font-weight: 900; }
.mh-live-foot button {
  margin-left: auto; height: 42px; padding: 0 18px;
  border: 0; border-radius: var(--p-r-ctrl);
  background: var(--p-700); color: #fff;
  font-size: 13.5px; font-weight: 800; letter-spacing: .1px;
  box-shadow: 0 6px 16px rgba(11,107,61,.28);
  cursor: pointer; transition: transform .12s, filter .15s;
}
.mh-live-foot button:active { transform: scale(.97); filter: brightness(.96); }
.mh-live-note { padding: 10px 16px 14px; font-size: 11.5px; color: var(--p-mute); font-weight: 600; }

/* ------------------------------------------------------------------ 8. TITRES DE SECTION */
.mh-section-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 22px 16px 10px;
}
.mh-section-head h2 { font-size: 16px; font-weight: 800; }
.mh-section-head button {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--p-line); background: var(--p-card);
  border-radius: 999px; padding: 8px 13px;
  font-size: 12px; font-weight: 800; color: var(--p-700);
  box-shadow: var(--p-sh-1); cursor: pointer;
}
.mh-section-head button:active { transform: scale(.97); }

/* ------------------------------------------------------------------ 9. DOMAINES (PILULES) */
.mh-categories {
  display: flex; gap: 9px; overflow-x: auto;
  padding: 2px 16px 6px; scrollbar-width: none;
}
.mh-categories::-webkit-scrollbar { display: none; }
.mh-categories button {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 16px;
  background: var(--p-card); border: 1px solid var(--p-line);
  border-radius: 999px; color: var(--p-ink2);
  font-size: 13px; font-weight: 700; box-shadow: var(--p-sh-1);
  transition: background .15s, border-color .15s, transform .12s;
}
.mh-categories button:active { transform: scale(.97); }
.mh-categories .cat-ico { color: var(--p-700); display: flex; }
.mh-categories .cat-star { font-size: 11px; }
.mh-categories button.mh-cat-on {
  background: var(--p-100); border-color: #C6E6D3; color: var(--p-900);
}
.mh-cat-on .cat-ico { color: var(--p-700); }

/* ------------------------------------------------------------------ 10. CARTE DISCUSSIONS */
.mh-chat-card {
  display: flex; align-items: center; gap: 13px;
  margin: 0 16px; padding: 15px 16px;
  background: var(--p-card); border: 1px solid var(--p-line);
  border-radius: var(--p-r-card); box-shadow: var(--p-sh-1);
  cursor: pointer; transition: transform .12s, box-shadow .15s;
}
.mh-chat-card:active { transform: scale(.99); }
.mh-chat-icon {
  width: 42px; height: 42px; border-radius: 13px; flex: none;
  background: var(--p-50); color: var(--p-700);
  display: flex; align-items: center; justify-content: center;
}
.mh-chat-card b { display: block; font-size: 14.5px; font-weight: 800; }
.mh-chat-card small { display: block; margin-top: 2px; font-size: 12px; color: var(--p-mute); font-weight: 600; }
.mh-chev { color: #A7B5AC; display: flex; }

/* ------------------------------------------------------------------ 11. MISSIONS (GRILLE 2 COLONNES) */
/* Les missions s'affichent en grille, deux par ligne, comme avant la refonte —
   mais sans les défauts de l'ancienne version (textes coupés, prix écrasé). */
.home-mission-grid, .mission-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
.mission-grid { padding: 0 !important; margin-top: 4px; }
.home-mission-grid { padding: 0 16px; }
/* Très petits écrans : une seule colonne, pour ne rien écraser */
@media (max-width: 339px) {
  .home-mission-grid, .mission-grid { grid-template-columns: 1fr !important; }
}

/* ---- Tuile de mission (écran Missions) : blocs empilés ---- */
.mission-tile {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: "head" "vis" "title" "meta" "foot" !important;
  row-gap: 0;
  padding: 11px !important;
  background: var(--p-card) !important;
  border: 1px solid var(--p-line) !important;
  border-radius: var(--p-r-card) !important;
  box-shadow: var(--p-sh-1) !important;
  min-width: 0; cursor: pointer;
  transition: transform .12s, box-shadow .15s, border-color .15s;
}
.mission-tile:active { transform: scale(.98); }
.mission-tile:hover { border-color: var(--p-line-strong) !important; }

.mission-tile-head { grid-area: head; display: flex; align-items: center; gap: 6px; min-width: 0; }
.mission-tile-head .mission-client { display: flex; align-items: baseline; gap: 0; min-width: 0; }
.mission-tile-head .mission-client .tiny { display: none; }   /* « CLIENT » : inutile en petite tuile */
.mission-tile-head .client-name {
  font-size: 11px; font-weight: 800; color: var(--p-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mission-client-photo, .client-initial {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--p-100); color: var(--p-700);
  font-size: 10px; font-weight: 900;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.mission-id {
  margin-left: auto; flex: none;
  font-size: 10px; font-weight: 800; color: #9AA9A0;
  background: var(--p-bg-soft); border-radius: 999px; padding: 2px 7px;
}

/* vignette de catégorie : bandeau pleine largeur, comme l'illustration d'origine */
.mission-emoji {
  grid-area: vis;
  width: 100%; height: 64px;
  margin: 9px 0 0;
  border-radius: 14px;
  background: var(--p-50) !important;
  border: 1px solid #DCEFE4 !important;
  display: flex !important; align-items: center; justify-content: center;
  font-size: 27px; line-height: 1;
}

.mission-tile-title {
  grid-area: title;
  margin-top: 9px;
  font-size: 13.5px !important; font-weight: 800 !important;
  line-height: 1.28; color: var(--p-ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 35px;
}
.mission-tile-meta {
  grid-area: meta;
  margin-top: 7px;
  display: flex !important; flex-direction: column; gap: 3px;
  font-size: 11px !important; color: var(--p-mute); font-weight: 600; line-height: 1.35;
}
.mission-tile-meta > span { display: flex; align-items: center; gap: 5px; min-width: 0; }
.mission-tile-meta > span > * { flex: none; }

.mission-tile-foot {
  grid-area: foot;
  display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 9px; padding-top: 9px;
  border-top: 1px dashed var(--p-line);
}
.m-price {
  font-size: 15px !important; font-weight: 900 !important;
  color: var(--p-900) !important; letter-spacing: -.2px; white-space: nowrap;
}
/* Le bloc prix contient aussi la mention « Garanti par YAKÉ » : on l'autorise
   à passer à la ligne pour que rien ne soit coupé dans une tuile de 174 px. */
.mission-tile-foot .m-price {
  display: flex !important; flex-wrap: wrap; align-items: center; gap: 5px;
  min-width: 0; width: 100%;
  white-space: normal !important;
}
.mission-tile-foot .m-price > .mission-guarantee {
  flex: 1 0 100%;                   /* ligne dédiée, sous le prix */
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px !important; font-weight: 800 !important;
  color: var(--p-700) !important;
  background: var(--p-50); border-radius: 999px; padding: 3px 8px;
  text-transform: none; letter-spacing: 0;
  white-space: nowrap; max-width: 100%; overflow: hidden;
}
.mission-tile-foot .tag-urgent {
  margin-left: auto;
  background: var(--p-amber-bg) !important; color: var(--p-amber) !important;
  border: 1px solid #F4D9AE !important;
  font-size: 9.5px !important; padding: 3px 8px !important;
}

/* ---- Carte de mission (accueil) : bandeau puis texte ---- */
.home-mission-card {
  display: block !important;
  overflow: hidden;
  padding: 0 !important;
  background: var(--p-card) !important;
  border: 1px solid var(--p-line) !important;
  border-radius: var(--p-r-card) !important;
  box-shadow: var(--p-sh-1) !important;
  min-width: 0; cursor: pointer;
  transition: transform .12s, box-shadow .15s, border-color .15s;
}
.home-mission-card:active { transform: scale(.98); }
.home-mission-card:hover { border-color: var(--p-line-strong) !important; }

.home-mission-visual {
  position: relative;
  height: 62px;
  background: var(--p-50) !important;
  border-bottom: 1px solid #DCEFE4 !important;
  display: flex !important; align-items: center; justify-content: center;
  overflow: hidden;
}
.home-mission-visual .home-mission-icon { font-size: 26px; line-height: 1; }
.home-mission-visual .home-client-avatar,
.home-mission-visual .home-client-initial {
  position: absolute; left: 8px; bottom: 7px;
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--p-card);
  background: var(--p-100); color: var(--p-700);
  font-size: 10px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  object-fit: cover;
}
.home-mission-content { padding: 10px 11px 11px; }
.home-mission-content .home-client-name {
  font-size: 10px; font-weight: 800; letter-spacing: .4px;
  text-transform: uppercase; color: var(--p-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.home-mission-content .home-mission-title {
  margin-top: 4px;
  font-size: 13.5px !important; font-weight: 800 !important;
  line-height: 1.28; color: var(--p-ink) !important;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 35px;
}
.home-mission-content .home-mission-meta {
  margin-top: 7px;
  display: flex !important; flex-direction: column; gap: 3px;
  font-size: 11px !important; color: var(--p-mute); font-weight: 600; line-height: 1.35;
}
.home-mission-content .home-mission-meta > span { display: flex; align-items: center; gap: 5px; }
.home-mission-content .home-mission-price {
  display: flex !important; align-items: center; gap: 6px;
  margin-top: 9px; padding-top: 9px;
  border-top: 1px dashed var(--p-line);
}
.home-mission-content .home-mission-price b {
  font-size: 15px !important; font-weight: 900 !important;
  color: var(--p-900) !important; letter-spacing: -.2px; white-space: nowrap;
}
.home-mission-content .home-mission-price span {
  margin-left: auto; font-size: 10px; font-weight: 800; color: #9AA9A0;
  background: var(--p-bg-soft); border-radius: 999px; padding: 2px 7px;
}

/* ------------------------------------------------------------------ 12. FILTRES */
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 12px 16px 4px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; height: 38px; padding: 0 15px;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--p-card); border: 1px solid var(--p-line);
  border-radius: 999px; color: var(--p-ink2);
  font-size: 12.5px; font-weight: 700; box-shadow: var(--p-sh-1);
  transition: background .15s, color .15s, border-color .15s;
}
.chip.on {
  background: var(--p-700) !important; border-color: var(--p-700) !important;
  color: #fff !important; box-shadow: 0 5px 14px rgba(11,107,61,.24) !important;
}
.pad .row.wrap { gap: 8px; }
.pad .row.wrap .select { flex: 1 1 44%; min-width: 0; }

/* ------------------------------------------------------------------ 13. BOUTONS */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 18px;
  border-radius: var(--p-r-ctrl); border: 1px solid transparent;
  font-size: 14.5px; font-weight: 800; letter-spacing: .1px;
  transition: transform .12s, filter .15s, background .15s, border-color .15s;
}
.btn:active { transform: scale(.985); }
.btn-primary {
  background: var(--p-700) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(11,107,61,.26) !important;
}
.btn-primary:hover:not(:disabled) { background: var(--p-800) !important; }
.btn-outline, .btn-ghost {
  background: var(--p-card) !important; color: var(--p-ink2) !important;
  border-color: var(--p-line) !important; box-shadow: var(--p-sh-1) !important;
}
.btn-outline:hover, .btn-ghost:hover { border-color: var(--p-line-strong) !important; }
.btn-sm { min-height: 38px; padding: 0 13px; font-size: 12.5px; border-radius: 12px; }
.btn-lg { min-height: 52px; font-size: 15.5px; border-radius: 15px; }
.btn[disabled], .btn:disabled { opacity: .45; }
.icon-btn, .btn { -webkit-tap-highlight-color: transparent; }

/* ------------------------------------------------------------------ 14. CARTES */
.card {
  background: linear-gradient(180deg,#FFFFFF 0%,#FDFEFE 100%) !important;
  border: 1px solid var(--p-line) !important;
  border-radius: var(--p-r-card) !important;
  box-shadow: var(--p-sh-2) !important;
  padding: 16px !important;
  margin-bottom: 12px;
}
.card-flat {
  background: var(--p-card) !important;
  border: 1px solid var(--p-line) !important;
  border-radius: var(--p-r-card) !important;
  box-shadow: var(--p-sh-1) !important;
  padding: 15px !important;
  margin-bottom: 10px;
}
.card-tap:active { transform: scale(.99); }

.list-row {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 2px; border-bottom: 1px solid var(--p-line);
}
.list-row:last-child { border-bottom: 0; }
.rank-row { display: flex; align-items: center; gap: 12px; padding: 12px 2px; border-bottom: 1px solid var(--p-line); }
.rank-row:last-child { border-bottom: 0; }
.rank-pos {
  width: 30px; height: 30px; border-radius: 10px; flex: none;
  background: var(--p-bg-soft); color: var(--p-ink2);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 900;
}
.rank-pos.top1 { background: #FFF4D6; color: #8A6100; }
.rank-pos.top2 { background: #EEF2F5; color: #516070; }
.rank-pos.top3 { background: #FBEDE2; color: #8A4B21; }

/* ------------------------------------------------------------------ 15. FORMULAIRES */
.field { margin-bottom: 14px; }
.field > label, .field label {
  display: block; margin-bottom: 7px;
  font-size: 12.5px !important; font-weight: 800 !important;
  color: var(--p-ink2) !important; letter-spacing: .1px;
}
.input, .select, textarea.input {
  width: 100%; min-height: 48px; padding: 12px 14px;
  background: var(--p-card) !important;
  border: 1.5px solid var(--p-line-strong) !important;
  border-radius: var(--p-r-ctrl) !important;
  font-size: 15px !important; font-weight: 600 !important; color: var(--p-ink) !important;
  box-shadow: none !important;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
textarea.input { min-height: 104px; line-height: 1.5; }
.input::placeholder { color: #9AA9A0 !important; font-weight: 500 !important; }
.input:focus, .select:focus, textarea.input:focus {
  border-color: var(--p-600) !important;
  box-shadow: 0 0 0 3px rgba(11,138,78,.13) !important;
}
.select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2366766C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: 40px !important;
}

/* interrupteurs */
.switch { position: relative; width: 50px; height: 30px; flex: none; }
.switch .sl {
  position: absolute; inset: 0; border-radius: 999px;
  background: #D8E1DB; transition: background .2s;
}
.switch .sl::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 6px rgba(10,30,20,.2);
  transition: transform .2s;
}
.switch input:checked + .sl { background: var(--p-600) !important; }
.switch input:checked + .sl::after { transform: translateX(20px); }

/* ------------------------------------------------------------------ 16. ÉTATS VIDES */
.mh-empty {
  margin: 0 16px; padding: 26px 20px;
  background: var(--p-card); border: 1px dashed var(--p-line-strong);
  border-radius: var(--p-r-card); color: var(--p-mute);
  font-size: 13px; font-weight: 600; text-align: center;
}
.mh-note {
  margin: 14px 16px 0; padding: 12px 14px;
  background: var(--p-50); border: 1px solid #DCEFE4;
  border-radius: var(--p-r-ctrl);
  font-size: 12px; font-weight: 600; color: var(--p-ink2);
}
.card.center { padding: 30px 20px !important; }
.card.center > div:first-child { font-size: 30px; margin-bottom: 10px; opacity: .9; }
.card.center b, .card.center > div:nth-child(2) { display: block; font-size: 15px; font-weight: 800; }
.card.center .small { margin-top: 5px; color: var(--p-mute); }

/* ------------------------------------------------------------------ 17. NOTIFICATIONS */
.notif-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; margin-bottom: 12px;
  background: var(--p-card); border: 1px solid var(--p-line);
  border-radius: var(--p-r-card); box-shadow: var(--p-sh-1);
}
.notif-header > .grow > div:first-child { font-size: 15px; font-weight: 800; }
.notif-header > .grow > div:last-child { margin-top: 2px; font-size: 12px; color: var(--p-mute); font-weight: 600; }

/* ------------------------------------------------------------------ 18. PROFIL */
.mvp-profile .card:first-child { padding: 18px 16px !important; }
.mvp-profile .card b, .mvp-profile .card .bold { font-weight: 800; }

/* carte solde : bloc vert profond, comme la colonne de l'espace admin */
.mvp-profile .card .balance-card,
.balance-card {
  background: linear-gradient(150deg, #0B3B24 0%, #0E4E2F 55%, #0B6B3D 100%) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--p-r-card) !important;
  box-shadow: 0 14px 30px rgba(11,59,36,.30) !important;
  padding: 18px !important;
  margin: 0 -2px 12px !important;
}
.balance-card .tiny, .balance-card .muted { color: rgba(255,255,255,.72) !important; }
.balance-card b, .balance-card .bold { color: #fff !important; }
.pending-balance {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 12px; padding: 11px 13px;
  background: rgba(255,255,255,.12); border-radius: 12px;
  font-size: 12px; font-weight: 700;
}
.pending-balance b { font-weight: 900; }

/* paliers / badges */
.reliability-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 8px; font-size: 12px;
}
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .3px;
  text-transform: uppercase;
  background: var(--p-bg-soft); color: var(--p-ink2);
}
.tag-ok { background: var(--p-100) !important; color: var(--p-700) !important; }
.tag-urgent { background: var(--p-amber-bg) !important; color: var(--p-amber) !important; }
.tag-blue { background: #E8F3FB !important; color: #0B6AA0 !important; }
.tag-soft { background: var(--p-bg-soft) !important; color: var(--p-ink2) !important; }

/* ------------------------------------------------------------------ 19. BARRE DU BAS */
.mvp-bottom-nav {
  position: fixed;
  left: 14px; right: 14px; bottom: 14px;
  display: flex; align-items: center; justify-content: space-around;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
  background: rgba(255,255,255,.97) !important;
  border: 1px solid var(--p-line) !important;
  border-top: 1px solid var(--p-line) !important;
  border-radius: 24px !important;
  box-shadow: 0 14px 34px rgba(10,30,20,.14), 0 2px 8px rgba(10,30,20,.06) !important;
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  z-index: 50 !important;
}
.mvp-bottom-nav .nav-item {
  flex: 0 1 auto; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 4px 6px !important; background: none !important; border: 0 !important;
  color: #8A9990 !important; cursor: pointer;
}
.mvp-bottom-nav .nav-chip {
  width: 46px; height: 34px; border-radius: 12px;
  display: flex !important; align-items: center; justify-content: center;
  background: transparent; color: inherit;
  transition: background .18s, color .18s, transform .18s;
}
.mvp-bottom-nav .nav-label {
  font-size: 10.5px !important; font-weight: 700 !important;
  letter-spacing: .1px; color: inherit; opacity: 1 !important;
}
.mvp-bottom-nav .nav-item.on { color: var(--p-700) !important; }
.mvp-bottom-nav .nav-item.on .nav-chip {
  background: var(--p-100) !important; color: var(--p-700) !important;
  transform: none !important; box-shadow: none !important;
}
.mvp-bottom-nav .nav-item:active .nav-chip { transform: scale(.94) !important; }
.mvp-nav-badge {
  position: absolute; top: 0; right: 4px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--p-red); color: #fff;
  font-size: 10px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
}
.mvp-bottom-nav .nav-item { position: relative; }

/* bouton central (+) */
.mvp-bottom-nav .mvp-publish.nav-fab {
  position: absolute !important;
  top: -24px !important; left: 50% !important;
  transform: translateX(-50%) !important;
  width: 58px !important; height: 58px !important;
  border: 0 !important; border-radius: 50% !important;
  background: linear-gradient(160deg, #0B8A4E 0%, #0B3B24 100%) !important;
  color: #fff !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  box-shadow: 0 10px 22px rgba(11,59,36,.34), 0 0 0 5px var(--p-bg) !important;
  z-index: 2 !important;
  transition: transform .15s ease !important;
}
.mvp-bottom-nav .mvp-publish.nav-fab:active { transform: translateX(-50%) scale(.93) !important; }

/* bouton audio flottant */
.fab-listen {
  position: fixed; right: 16px; bottom: calc(var(--p-nav-h) + 18px); z-index: 60;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--p-900) !important; color: #fff !important;
  border: 0; box-shadow: 0 10px 24px rgba(11,59,36,.32) !important;
  display: flex; align-items: center; justify-content: center;
}
.fab-listen:active { transform: scale(.94); }

/* ------------------------------------------------------------------ 20. FENÊTRES ET FEUILLES */
.overlay { background: rgba(8,42,26,.55) !important; backdrop-filter: blur(3px); }
.sheet {
  background: var(--p-card) !important;
  width: 100%; max-width: 480px;
  border-radius: var(--p-r-sheet) var(--p-r-sheet) 0 0 !important;
  padding: 14px 16px calc(20px + env(safe-area-inset-bottom)) !important;
  box-shadow: 0 -18px 50px rgba(6,30,18,.34) !important;
}
@media (min-width: 760px) {
  .sheet { border-radius: var(--p-r-sheet) !important; margin-bottom: 22px; max-width: 448px !important; }
  .overlay { align-items: center !important; }
}
.grip {
  width: 44px; height: 4px; border-radius: 999px;
  background: var(--p-line-strong); margin: 4px auto 14px;
}
.sheet > div > .tiny, .sheet .tiny:first-child {
  font-size: 11px !important; font-weight: 900 !important;
  letter-spacing: .6px !important; text-transform: uppercase;
  color: var(--p-700) !important;
}
.skills-list { max-height: 56vh; overflow-y: auto; margin: 6px -4px 0; padding: 0 4px; }
.skill-row {
  display: flex !important; align-items: center; gap: 12px;
  padding: 12px 14px !important; margin-bottom: 8px;
  background: var(--p-card); border: 1px solid var(--p-line);
  border-radius: 14px; box-shadow: var(--p-sh-1);
}
.skill-row.skill-locked { background: var(--p-bg-soft); }
.skill-check { width: 22px; height: 22px; border-radius: 7px; accent-color: var(--p-600); flex: none; }
.skill-request-btn { margin-left: auto; }
.skills-save-sticky {
  position: sticky; bottom: 0; margin-top: 12px; padding-top: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0), #fff 45%);
  display: flex; gap: 10px;
}
.skills-save-sticky .btn { flex: 1; }

/* notifications de la feuille de réglages */
.lang-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; margin-bottom: 8px;
  background: var(--p-card); border: 1px solid var(--p-line);
  border-radius: 14px;
}
.lang-card .lt { font-weight: 800; }
.lang-card.on { background: var(--p-100); border-color: #C6E6D3; }

/* ------------------------------------------------------------------ 21. CONNEXION */
.pad .card { border-radius: 20px !important; }
.auth-tabs {
  display: flex; gap: 6px; padding: 4px;
  background: var(--p-bg-soft); border: 1px solid var(--p-line);
  border-radius: 999px; margin-bottom: 16px;
}
.auth-tabs button {
  flex: 1; height: 40px; border: 0; border-radius: 999px;
  background: transparent; color: var(--p-mute);
  font-size: 13.5px; font-weight: 800; cursor: pointer;
  transition: background .18s, color .18s, box-shadow .18s;
}
.auth-tabs button.on {
  background: var(--p-card); color: var(--p-700);
  box-shadow: var(--p-sh-1); border: 1px solid var(--p-line);
}
.pin-help { margin-top: 10px; font-size: 12px; color: var(--p-mute); font-weight: 600; }

/* ------------------------------------------------------------------ 22. CHARTE */
.charter-screen { padding-bottom: 30px; }
.charter-header { text-align: center; padding: 26px 16px 8px; }
.charter-logo { width: 62px; height: 62px; border-radius: 18px; box-shadow: var(--p-sh-2); }
.charter-kicker, .charter-header .subtitle {
  margin-top: 12px; font-size: 11px; font-weight: 900;
  letter-spacing: .8px; text-transform: uppercase; color: var(--p-700);
}
.charter-card, .charter-screen .card {
  background: var(--p-card) !important;
  border: 1px solid var(--p-line) !important;
  border-radius: 20px !important;
  box-shadow: var(--p-sh-1) !important;
  padding: 18px !important; margin: 0 16px 12px;
}
.charter-screen h1, .charter-lead { }
.charter-screen h1 { font-size: 22px; font-weight: 900; line-height: 1.25; }
.charter-lead { margin-top: 10px; font-size: 14px; line-height: 1.55; color: var(--p-ink2); }
.intro-text, .charter-card p { font-size: 13.5px; line-height: 1.6; color: var(--p-ink2); }
.charter-warning {
  margin: 14px 16px; padding: 14px 16px;
  background: var(--p-amber-bg); border: 1px solid #F4D9AE;
  border-radius: var(--p-r-ctrl); color: #7A3E05;
  font-size: 13px; font-weight: 700; line-height: 1.5;
}
.charter-section { margin: 20px 16px 10px; }
.section-title { font-size: 15px; font-weight: 900; }
.section-title::before { content: none !important; }
.etape-container, .card-item {
  display: flex; gap: 13px; align-items: flex-start;
  background: var(--p-card) !important;
  border: 1px solid var(--p-line) !important;
  border-radius: var(--p-r-card) !important;
  box-shadow: var(--p-sh-1) !important;
  padding: 15px !important; margin-bottom: 10px;
}
.card-header { display: flex; gap: 12px; align-items: flex-start; margin: 0 !important; }
.card-icon, .emoji-icone {
  width: 42px; height: 42px; border-radius: 13px; flex: none;
  background: var(--p-50); border: 1px solid #DCEFE4;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}
.card-title, .titre-etape { font-size: 14.5px !important; font-weight: 800 !important; }
.card-description, .description-etape {
  margin-top: 4px; font-size: 12.5px !important; line-height: 1.55; color: var(--p-mute) !important;
}
.charte-pilier {
  background: var(--p-card); border: 1px solid var(--p-line);
  border-radius: var(--p-r-ctrl); padding: 14px; text-align: center;
  box-shadow: var(--p-sh-1);
}
.charter-actions {
  position: sticky; bottom: 0; z-index: 20;
  padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(242,245,243,0), var(--p-bg) 38%);
}
.charter-check {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; margin-bottom: 12px;
  background: var(--p-card); border: 1px solid var(--p-line);
  border-radius: var(--p-r-ctrl); box-shadow: var(--p-sh-1);
  font-size: 13.5px; font-weight: 700; color: var(--p-ink2);
}
.charter-check input { width: 22px; height: 22px; accent-color: var(--p-600); }
.charter-continue { width: 100%; }
.charter-footer { margin-top: 12px; text-align: center; font-size: 11.5px; color: var(--p-mute); font-weight: 600; }

/* ------------------------------------------------------------------ 23. DIVERS */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%) translateY(80px);
  bottom: calc(var(--p-nav-h) + 24px);
  padding: 13px 20px; border-radius: 14px;
  background: var(--p-900) !important; color: #fff;
  font-size: 13.5px; font-weight: 700; text-align: center;
  box-shadow: 0 14px 34px rgba(6,30,18,.34);
  z-index: 120; max-width: 88%;
}
.loader {
  width: 30px; height: 30px; margin: 26px auto;
  border: 3px solid var(--p-100); border-top-color: var(--p-700);
  border-radius: 50%; animation: pspin .8s linear infinite;
}
@keyframes pspin { to { transform: rotate(360deg); } }
.faq-item {
  border: 1px solid var(--p-line); border-radius: var(--p-r-ctrl);
  margin-bottom: 8px; background: var(--p-card); overflow: hidden;
}
.faq-item summary {
  padding: 14px 16px; font-size: 13.5px; font-weight: 700; color: var(--p-ink);
  cursor: pointer; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; float: right; font-weight: 900; color: var(--p-mute); }
.faq-item[open] summary::after { content: "–"; }
.faq-answer { padding: 0 16px 15px; font-size: 12.5px; line-height: 1.6; color: var(--p-mute); }
.switch, .sl { -webkit-tap-highlight-color: transparent; }

/* ------------------------------------------------------------------ 24. THÈME SOMBRE */
[data-theme="dark"] html, [data-theme="dark"] body, body[data-theme="dark"] {
  background: #0C1512 !important;
}
[data-theme="dark"] .app, [data-theme="dark"] .screen, [data-theme="dark"] .mh-header {
  background: #0C1512 !important; color: #E7EFEA;
}
[data-theme="dark"] .card,
[data-theme="dark"] .card-flat,
[data-theme="dark"] .mh-live,
[data-theme="dark"] .mission-tile,
[data-theme="dark"] .home-mission-card,
[data-theme="dark"] .mh-chat-card,
[data-theme="dark"] .notif-header,
[data-theme="dark"] .skill-row,
[data-theme="dark"] .lang-card,
[data-theme="dark"] .charter-card,
[data-theme="dark"] .etape-container,
[data-theme="dark"] .card-item {
  background: #14201B !important; border-color: #24352C !important;
}
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] .mission-tile-title, [data-theme="dark"] .home-mission-title,
[data-theme="dark"] .m-price, [data-theme="dark"] .home-mission-price b { color: #F1F6F3 !important; }
[data-theme="dark"] .topbar {
  background: rgba(12,21,18,.92) !important; border-bottom-color: #1F2E27 !important;
}
[data-theme="dark"] .icon-btn, [data-theme="dark"] .mh-icon, [data-theme="dark"] .chip,
[data-theme="dark"] .mh-categories button, [data-theme="dark"] .mh-section-head button {
  background: #14201B !important; border-color: #24352C !important; color: #CFE0D6 !important;
}
[data-theme="dark"] .mh-search { background: #14201B !important; border-color: #24352C !important; }
[data-theme="dark"] .mh-search input { color: #F1F6F3; }
[data-theme="dark"] .mvp-bottom-nav {
  background: rgba(20,32,27,.97) !important; border-color: #22322A !important;
}
[data-theme="dark"] .sheet { background: #101A16 !important; }
[data-theme="dark"] .input, [data-theme="dark"] .select {
  background: #16231D !important; border-color: #2A3D33 !important; color: #F1F6F3 !important;
}

/* ==========================================================================
   25. CORRECTIFS DE SPÉCIFICITÉ ET DÉTAILS
   Les règles [data-mvp="1"] de styles.css et la double marge de .maquette-home
   repassaient au beige hérité : on reprend la main ici, explicitement.
   ========================================================================== */

/* 25.1 — cadre général : plus de fond crème, plus de double marge */
.maquette-home {
  padding: 0 !important;
  background: transparent !important;
  min-height: 0 !important;
  max-width: none !important;
  margin: 0 !important;
}
[data-mvp="1"] .app,
[data-mvp="1"] .screen,
[data-mvp="1"] .maquette-home {
  background: var(--p-bg) !important;
  color: var(--p-ink) !important;
}
[data-mvp="1"] .topbar {
  background: rgba(242,245,243,.92) !important;
  border-bottom: 1px solid var(--p-line) !important;
}
[data-mvp="1"] .mh-section-head h2 { color: var(--p-ink) !important; }
[data-mvp="1"] .home-mission-title { color: var(--p-ink) !important; }
[data-mvp="1"] .home-mission-price b { color: var(--p-900) !important; }
[data-mvp="1"] .mission-emoji,
[data-mvp="1"] .home-mission-visual {
  background: var(--p-50) !important;
  border: 1px solid #DCEFE4 !important;
}

/* 25.2 — carte « En direct » : compteur net, bouton bien calibré */
.mh-live-count span { white-space: nowrap; }
.mh-live-count b { font-size: 28px; }
.mh-section-head button { white-space: nowrap; }
.mh-live-foot { flex-wrap: wrap; row-gap: 10px; }
.mh-live-foot button { flex: none; }

/* 25.3 — « Domaines recherchés » : pilules alignées sur l'espace admin */
.mh-categories button { background: var(--p-card); }
.mh-categories .cat-ico svg { width: 19px; height: 19px; }

/* 25.4 — carte solde du profil (vert profond + CTA jaune YAKÉ) */
.card.p-balance {
  background: linear-gradient(150deg, #0B3B24 0%, #0E4E2F 55%, #0B6B3D 100%) !important;
  border: 0 !important;
  border-radius: var(--p-r-card) !important;
  padding: 18px !important;
  color: #fff !important;
  box-shadow: 0 16px 34px rgba(11,59,36,.28) !important;
}
.p-balance .pb-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.p-balance .pb-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 800; letter-spacing: .7px;
  text-transform: uppercase; color: rgba(255,255,255,.74);
}
.p-balance .pb-refresh {
  width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.18);
  border-radius: 11px; background: rgba(255,255,255,.12); color: #fff;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.p-balance .pb-refresh:active { transform: scale(.94); }
.p-balance .pb-amount {
  margin-top: 10px; font-size: 34px; font-weight: 900;
  letter-spacing: -.8px; color: #fff; line-height: 1.05;
}
.p-balance .pb-pending {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 14px; padding: 11px 13px; border-radius: 12px;
  background: rgba(255,255,255,.12);
  font-size: 12px; font-weight: 700; color: rgba(255,255,255,.86);
}
.p-balance .pb-pending b { color: #fff; font-weight: 900; }
.p-balance .pb-savings {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 9px; padding: 11px 13px; border-radius: 12px;
  background: rgba(255,255,255,.07);
  font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,.86);
}
.p-balance .pb-savings > span { display: inline-flex; align-items: center; gap: 7px; }
.p-balance .pb-savings b { color: #fff; font-weight: 900; }
.p-balance .pb-cta {
  width: 100%;
  background: #FFC300 !important; color: #0B3B24 !important;
  border: 0 !important; box-shadow: 0 10px 20px rgba(0,0,0,.18) !important;
}
.p-balance .pb-cta .y-ic { margin-right: 2px; }

/* 25.5 — états vides et petites icônes */
.empty-ic { color: var(--p-700); display: flex; justify-content: center; margin-bottom: 10px; }
.missions-empty-icon { color: var(--p-700); display: flex; justify-content: center; margin-bottom: 10px; }
.btn-ic { display: inline-flex; align-items: center; margin-right: 6px; }
.btn-icon-only { padding: 0 12px !important; }
.mission-publish-btn .y-ic { margin-right: 2px; }

/* 25.6 — carte solde : le libellé se réduit, le montant ne se coupe jamais */
.p-balance .pb-pending,
.p-balance .pb-savings { flex-wrap: nowrap; }
.p-balance .pb-pending > span,
.p-balance .pb-savings > span { flex: 1 1 auto; min-width: 0; }
.p-balance .pb-pending > b,
.p-balance .pb-savings > b { flex: none; white-space: nowrap; }
.p-balance .pb-pending { font-size: 11.5px; line-height: 1.35; }

/* 25.7 — boutons rouges et badges de statut : retour à des tons doux
   (une ancienne passe « lisibilité » les avait mis en bordeaux + bordure noire). */
.btn-danger {
  background: var(--p-red-bg) !important;
  color: var(--p-red) !important;
  border: 1px solid #F1C6C6 !important;
  box-shadow: var(--p-sh-1) !important;
  font-weight: 800 !important;
  font-size: 13.5px !important;
}
.btn-danger:active { background: #F9D9D9 !important; }
.tag-urgent, .t-dispute, .t-confirmed {
  background: var(--p-amber-bg) !important;
  color: var(--p-amber) !important;
  border: 1px solid #F4D9AE !important;
  box-shadow: none !important;
  font-weight: 800 !important;
  font-size: 10.5px !important;
  padding: 4px 10px !important;
  letter-spacing: .2px !important;
}
.t-dispute {
  background: var(--p-red-bg) !important; color: var(--p-red) !important;
  border-color: #F1C6C6 !important;
}
.t-confirmed {
  background: #EEF2F5 !important; color: #516070 !important;
  border-color: #DCE4EA !important;
}

/* 25.8 — libellés de formulaire : même taille et même encre que l'espace admin */
.sheet .field label,
.sheet .field > label,
.field label {
  font-size: 12.5px !important;
  font-weight: 800 !important;
  color: var(--p-ink2) !important;
  letter-spacing: .1px !important;
  margin-bottom: 7px !important;
}
#pm-price-hint {
  background: var(--p-amber-bg) !important;
  border: 1px solid #F4D9AE !important;
  color: #7A3E05 !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  border-radius: var(--p-r-ctrl) !important;
}

/* 25.9 — boutons principaux dans les feuilles : vert de la charte
   (une ancienne passe les forçait en jaune avec bordure noire).
   La seule exception reste « Publier ma mission », en jaune YAKÉ (style en ligne). */
.sheet .btn-primary {
  background: var(--p-700) !important;
  color: #fff !important;
  border: 0 !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  box-shadow: 0 6px 16px rgba(11,107,61,.26) !important;
}
.skills-save-sticky .btn {
  white-space: nowrap;
  font-size: 14px !important;
  padding: 0 12px !important;
}
.skills-save-sticky .btn-primary { flex: 1.35; }
.skills-save-sticky .btn-outline { flex: 1; }
.sheet .btn-outline { background: var(--p-card) !important; color: var(--p-ink2) !important; border: 1px solid var(--p-line) !important; }

/* 25.10 — titres d'écran : jamais coupés en plein mot */
.topbar h1 { font-size: 19px; word-break: keep-all; }

/* ==========================================================================
   26. THÈME SOMBRE — rappel en fin de feuille
   Les correctifs de la section 25 ont la même spécificité que la section 24 :
   déclarés après, ils repassaient au clair. Ici la spécificité est renforcée
   (html[data-theme="dark"][data-mvp="1"] …), donc le sombre gagne à coup sûr.
   ========================================================================== */
html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"][data-mvp="1"] .app,
html[data-theme="dark"][data-mvp="1"] .screen,
html[data-theme="dark"][data-mvp="1"] .maquette-home {
  background: #0C1512 !important;
  color: #E7EFEA !important;
}
html[data-theme="dark"][data-mvp="1"] .topbar {
  background: rgba(12,21,18,.94) !important;
  border-bottom-color: #1F2E27 !important;
}
html[data-theme="dark"] .mh-header { background: #0C1512 !important; }
html[data-theme="dark"] .mh-logo,
html[data-theme="dark"] .topbar h1,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] .mh-section-head h2,
html[data-theme="dark"] .mission-tile-title,
html[data-theme="dark"] .home-mission-title,
html[data-theme="dark"] .home-client-name { color: #F1F6F3 !important; }
html[data-theme="dark"] .m-price,
html[data-theme="dark"] .home-mission-price b { color: #7DD3A7 !important; }
html[data-theme="dark"] .topbar .sub,
html[data-theme="dark"] .mh-sub,
html[data-theme="dark"] .tiny,
html[data-theme="dark"] .small,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .mission-tile-meta,
html[data-theme="dark"] .home-mission-meta { color: #A9BDB2 !important; }
html[data-theme="dark"] .card,
html[data-theme="dark"] .card-flat,
html[data-theme="dark"] .mh-live,
html[data-theme="dark"] .mission-tile,
html[data-theme="dark"] .home-mission-card,
html[data-theme="dark"] .mh-chat-card,
html[data-theme="dark"] .notif-header,
html[data-theme="dark"] .skill-row,
html[data-theme="dark"] .lang-card,
html[data-theme="dark"] .charter-card,
html[data-theme="dark"] .charter-check,
html[data-theme="dark"] .etape-container,
html[data-theme="dark"] .card-item,
html[data-theme="dark"] .mh-empty,
html[data-theme="dark"] .rank-row,
html[data-theme="dark"] .list-row,
html[data-theme="dark"] .faq-item {
  background: #14201B !important;
  border-color: #24352C !important;
}
html[data-theme="dark"] .mh-search,
html[data-theme="dark"] .icon-btn,
html[data-theme="dark"] .mh-icon,
html[data-theme="dark"] .chip,
html[data-theme="dark"] .mh-categories button,
html[data-theme="dark"] .mh-section-head button,
html[data-theme="dark"] .btn-outline,
html[data-theme="dark"] .btn-ghost {
  background: #14201B !important; border-color: #24352C !important; color: #CFE0D6 !important;
}
html[data-theme="dark"] .mh-search input { color: #F1F6F3 !important; }
html[data-theme="dark"] .input,
html[data-theme="dark"] .select,
html[data-theme="dark"] textarea.input {
  background: #16231D !important; border-color: #2A3D33 !important; color: #F1F6F3 !important;
}
html[data-theme="dark"] .mvp-bottom-nav {
  background: rgba(20,32,27,.98) !important; border-color: #22322A !important;
}
html[data-theme="dark"] .mvp-bottom-nav .nav-item { color: #7E928A !important; }
html[data-theme="dark"] .mvp-bottom-nav .nav-item.on { color: #7DD3A7 !important; }
html[data-theme="dark"] .mvp-bottom-nav .nav-item.on .nav-chip { background: #1B2B22 !important; color: #7DD3A7 !important; }
html[data-theme="dark"] .sheet { background: #101A16 !important; }
html[data-theme="dark"] .sheet .btn-primary { background: var(--p-600) !important; }
html[data-theme="dark"] .overlay { background: rgba(3,12,8,.66) !important; }
html[data-theme="dark"] .mh-live-head small,
html[data-theme="dark"] .mh-live-lg,
html[data-theme="dark"] .mh-live-note,
html[data-theme="dark"] .mh-live-cap { color: #A9BDB2 !important; }
html[data-theme="dark"] .mh-live-cap { background: rgba(20,32,27,.94) !important; }
html[data-theme="dark"] .mh-live-count b { color: #F1F6F3 !important; }
html[data-theme="dark"] .mission-emoji,
html[data-theme="dark"] .home-mission-visual,
html[data-theme="dark"] .mh-chat-icon,
html[data-theme="dark"] .card-icon,
html[data-theme="dark"] .emoji-icone {
  background: #1B2B22 !important; border-color: #24352C !important;
}
html[data-theme="dark"] .mission-client-photo,
html[data-theme="dark"] .client-initial { background: #1B2B22 !important; color: #7DD3A7 !important; }
html[data-theme="dark"] .mh-note,
html[data-theme="dark"] .mission-guarantee { background: #16281F !important; color: #7DD3A7 !important; }
html[data-theme="dark"] .mh-logo-location { background: #16281F !important; color: #7DD3A7 !important; }

/* 26.1 — en mode sombre, l'anneau du bouton « + » suit le fond */
html[data-theme="dark"] .mvp-bottom-nav .mvp-publish.nav-fab {
  box-shadow: 0 10px 22px rgba(0,0,0,.5), 0 0 0 5px #0C1512 !important;
}
html[data-theme="dark"] .fab-listen {
  background: #1B2B22 !important; color: #7DD3A7 !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.45) !important;
}

/* 25.11 — étapes de la charte : la carte est un BLOC
   (l'ancien style la mettait en flex horizontal, ce qui écrasait la
   description dans une colonne étroite à côté du titre). */
.etape-container,
.card-item {
  display: block !important;
  width: 100% !important;
}
.etape-container .card-header,
.card-item .card-header {
  display: flex !important;
  align-items: flex-start;
  gap: 13px;
  width: 100% !important;
  margin-bottom: 0 !important;
}
.etape-container .card-description,
.card-item .card-description,
.etape-container .description-etape,
.card-item .description-etape {
  margin-top: 8px;
  padding-left: 55px; /* aligné sous le titre, à droite de l'icône */
}
@media (max-width: 360px) {
  .etape-container .card-description,
  .card-item .card-description { padding-left: 0; }
}

/* 25.12 — écran de charte : fond aligné sur la charte graphique */
.charter-screen {
  background: var(--p-bg) !important;
  color: var(--p-ink) !important;
  padding: calc(env(safe-area-inset-top, 0px) + 20px) 16px 30px !important;
  min-height: 100vh;
}
.charter-screen .main-title,
.charter-card h1 { color: var(--p-ink) !important; }
.charter-screen .intro-text,
.charter-card p { color: var(--p-ink2) !important; }
.charter-screen .card-title { color: var(--p-ink) !important; }
.charter-screen .card-description { color: var(--p-mute) !important; }
.charter-card {
  max-width: 520px; margin: 0 auto 14px !important;
  padding: 20px 18px !important;
  background: var(--p-card) !important;
  border: 1px solid var(--p-line) !important;
  border-radius: 20px !important;
  box-shadow: var(--p-sh-1) !important;
}
.charter-lead { color: var(--p-700) !important; margin: 8px 0 14px !important; font-size: 14.5px !important; }
.charter-header { max-width: 520px; margin: 0 auto 18px !important; flex-direction: column; text-align: center; gap: 6px !important; }

/* 25.13 — bouton principal inactif : gris neutre (au lieu d'un vert délavé) */
.btn-primary:disabled,
.btn-primary[disabled],
.btn[disabled] {
  background: #E4EBE6 !important;
  color: #98A79E !important;
  box-shadow: none !important;
  border: 1px solid var(--p-line) !important;
}

/* 25.14 — barre « Enregistrer / Annuler » : les deux boutons tiennent dans la largeur */
.skills-save-sticky { gap: 8px !important; }
.skills-save-sticky .btn {
  width: auto !important;          /* la base .btn force width:100% : on l'annule */
  min-width: 0 !important;
  flex: 0 1 auto !important;
  padding: 0 12px !important;
}
.skills-save-sticky .btn-primary { flex: 1 1 auto !important; }
.skills-save-sticky .btn-outline { flex: 0 0 auto !important; padding: 0 14px !important; }