/* ============================================================
   May'Kilos — l'espace membre

   D'après « E1 - Site espace.dc.html ». Charge après recherche.css :
   les cartes, l'avatar, les pastilles de vérification, les étoiles et
   les listes oui/non y sont déjà définis.

   Pas de tableau de bord : la barre haute mène directement à ce qu'on
   est venu faire. Un écran d'accueil connecté se remplirait de vide au
   moment de l'inscription, et ajouterait un détour avant l'action.
   ============================================================ */


.page-membre { padding: 32px 0 72px; }
.page-membre > h1 { font: 800 clamp(28px, 3.4vw, 38px) var(--mk-font); color: var(--mk-primary); letter-spacing: -1.2px; }
.tete-page { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

.groupe { font: 700 15px var(--mk-font); color: var(--mk-text-2); margin: 32px 0 14px; }
.groupe:first-of-type { margin-top: 24px; }

/* ---------- Une ligne d'envoi ou de trajet ---------- */
.ligne-c {
  background: var(--mk-card); border: 1px solid var(--mk-hairline-soft);
  border-radius: var(--mk-r-card); padding: 22px 24px; box-shadow: var(--mk-shadow-card);
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
  gap: 24px; align-items: center; margin-bottom: 12px;
}
.ligne-c .titre { font: 700 18px var(--mk-font); color: var(--mk-text); }
.ligne-c .quoi { font: 400 14px var(--mk-font); color: var(--mk-text-2); margin-top: 4px; }
.ligne-c .ligne-v { font: 600 15px var(--mk-font); color: var(--mk-text); }
.ligne-c .quand-v { font: 400 14px var(--mk-font); color: var(--mk-text-2); margin-top: 4px; }
.ligne-c .fin-c { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.ligne-c .somme { font: 800 26px var(--mk-font); color: var(--mk-primary); letter-spacing: -.8px; }
.ligne-c .somme-s { font: 400 13px var(--mk-font); color: var(--mk-text-2); }

/* L'état est la seule chose qu'on cherche vraiment dans une liste :
   il est dit en toutes lettres, pas en couleur seule. */
.etat-l { display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 4px 14px; border-radius: var(--mk-r-pill); font: 600 13px var(--mk-font); }
.etat-l::before { content: ''; width: 8px; height: 8px; border-radius: var(--mk-r-pill); background: currentColor; flex: none; }
.etat-l.vol { background: var(--mk-mint); color: var(--mk-mint-text); }
.etat-l.attente { background: var(--mk-avatar); color: var(--mk-avatar-text); }
.etat-l.fini { background: var(--mk-piste); color: var(--mk-text-2); }
.etat-s { font: 400 13px var(--mk-font); color: var(--mk-text-2); margin-top: 6px; }

/* ---------- Le suivi ---------- */
.suivi-grille { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: start; }
.frise-v { display: grid; gap: 0; margin-top: 20px; }
.frise-v li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 16px; }
.frise-v .rail-v { display: flex; flex-direction: column; align-items: center; }
.frise-v .pt-v { width: 14px; height: 14px; border-radius: var(--mk-r-pill); background: var(--mk-action); flex: none; margin-top: 4px; }
.frise-v li.a-venir .pt-v { background: var(--mk-piste); box-shadow: inset 0 0 0 2px var(--mk-hairline-fort); }
.frise-v .tige { flex: 1; width: 2px; background: var(--mk-action); min-height: 26px; }
.frise-v li.a-venir .tige, .frise-v li:last-child .tige { background: var(--mk-piste); }
.frise-v li:last-child .tige { display: none; }
.frise-v .corps-v { padding-bottom: 22px; }
.frise-v .t { font: 700 16px var(--mk-font); color: var(--mk-text); }
.frise-v li.a-venir .t { color: var(--mk-text-2); }
.frise-v .d { font: 400 14px var(--mk-font); color: var(--mk-text-2); margin-top: 2px; }

.photos-r { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.photos-r i { width: 84px; height: 84px; border-radius: 14px; background: var(--mk-avatar); display: block; }

.code-boite { background: var(--mk-mint); border-radius: var(--mk-r-card); padding: 24px; }
.code-boite h2 { font: 700 17px var(--mk-font); color: var(--mk-mint-text); }
.code-chiffres { display: flex; gap: 10px; margin: 16px 0; }
.code-chiffres i {
  flex: 1; height: 66px; border-radius: 16px; background: var(--mk-card);
  display: grid; place-items: center;
  font: 800 30px var(--mk-font); color: var(--mk-primary); font-style: normal;
}
.code-boite p { font: 400 14px/1.55 var(--mk-font); color: var(--mk-mint-text); }
.code-boite .argent { font-weight: 600; margin-top: 8px; }

.litige { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font: 400 14px var(--mk-font); color: var(--mk-text-2); margin-top: 18px; }
.litige a { color: var(--mk-primary); text-decoration: underline; display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- L'annonce publiée ---------- */
.suggestion {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--mk-mint); border-radius: var(--mk-r-card); padding: 16px 20px; margin-bottom: 16px;
}
.suggestion .t { flex: 1; min-width: 200px; font: 600 15px/1.5 var(--mk-font); color: var(--mk-mint-text); }
.vues {
  display: flex; align-items: baseline; gap: 10px;
  background: var(--mk-card); border: 1px solid var(--mk-hairline-soft);
  border-radius: var(--mk-r-card); padding: 18px 22px; box-shadow: var(--mk-shadow-card);
}
.vues .n { font: 800 30px var(--mk-font); color: var(--mk-primary); letter-spacing: -1px; }
.vues .l { font: 400 14px var(--mk-font); color: var(--mk-text-2); }

.demande-c {
  background: var(--mk-card); border: 1px solid var(--mk-hairline-soft);
  border-radius: var(--mk-r-card); padding: 20px 22px; box-shadow: var(--mk-shadow-card);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; margin-bottom: 12px;
}
.demande-c .quoi { font: 400 15px/1.5 var(--mk-font); color: var(--mk-text-2); margin-top: 8px; }
.demande-c .chiffres { text-align: right; }
.demande-c .kg { font: 800 24px var(--mk-font); color: var(--mk-text); }
.demande-c .eur { font: 600 14px var(--mk-font); color: var(--mk-mint-text); margin-top: 2px; }
.demande-c .actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

.sorties { display: grid; gap: 2px; margin-top: 28px; }
.sorties a, .sorties button {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; padding: 12px 22px; width: 100%; text-align: left;
  background: var(--mk-card); border: 1px solid var(--mk-hairline-soft);
  font: 600 16px var(--mk-font); color: var(--mk-text);
}
.sorties > :first-child { border-radius: var(--mk-r-card) var(--mk-r-card) 0 0; }
.sorties > :last-child { border-radius: 0 0 var(--mk-r-card) var(--mk-r-card); }
/* Annuler est la dernière ligne, sans chevron, plus discrète — sans être
   cachée : on ne dissimule pas la sortie d'un engagement. */
.sorties .annuler { color: var(--mk-refus-text); font-weight: 500; }

/* ---------- La messagerie, deux volets ---------- */
.msg-grille { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 20px; align-items: start; }
.msg-liste { background: var(--mk-card); border: 1px solid var(--mk-hairline-soft); border-radius: var(--mk-r-card); overflow: hidden; box-shadow: var(--mk-shadow-card); }
.msg-chercher { padding: 16px; border-bottom: 1px solid var(--mk-hairline); }
.msg-chercher input {
  width: 100%; min-height: 44px; border: 0; border-radius: var(--mk-r-pill);
  background: var(--mk-bg); padding: 0 16px; outline: none;
  font: 400 15px var(--mk-font); color: var(--mk-text);
}
.msg-i { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--mk-hairline); width: 100%; text-align: left; }
.msg-i:last-child { border-bottom: 0; }
.msg-i.on { background: var(--mk-mint); }
.msg-i .corps { flex: 1; min-width: 0; }
.msg-i .haut { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.msg-i .n { font: 700 16px var(--mk-font); color: var(--mk-text); }
.msg-i.on .n { color: var(--mk-mint-text); }
.msg-i .h { font: 400 12px var(--mk-font); color: var(--mk-text-2); flex: none; }
.msg-i .apercu { font: 400 14px var(--mk-font); color: var(--mk-text-2); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.msg-fil { background: var(--mk-card); border: 1px solid var(--mk-hairline-soft); border-radius: var(--mk-r-card); overflow: hidden; box-shadow: var(--mk-shadow-card); }
.msg-tete { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-bottom: 1px solid var(--mk-hairline); flex-wrap: wrap; }
/* Le contexte de l'envoi tient en tête du fil : sans lui, on ne sait pas
   de quel colis on parle. */
.msg-contexte { display: flex; gap: 28px; padding: 16px 22px; background: var(--mk-bg); flex-wrap: wrap; align-items: center; }
.msg-contexte .bloc .l { font: 500 12px var(--mk-font); color: var(--mk-text-2); }
.msg-contexte .bloc .v { font: 700 15px var(--mk-font); color: var(--mk-text); margin-top: 2px; }
.msg-corps { padding: 22px; display: grid; gap: 14px; }
.msg-sys { text-align: center; font: 400 13px var(--mk-font); color: var(--mk-text-2); }
.bulle-m { max-width: 78%; padding: 14px 18px; border-radius: 20px; font: 400 15px/1.5 var(--mk-font); }
.bulle-m.moi { margin-left: auto; background: var(--mk-primary-surface); color: #fff; border-bottom-right-radius: 6px; }
.bulle-m.lui { background: var(--mk-bg); color: var(--mk-text); border-bottom-left-radius: 6px; }
.msg-h { font: 400 12px var(--mk-font); color: var(--mk-text-2); text-align: center; }
.msg-ecrire { display: flex; gap: 12px; padding: 16px 22px; border-top: 1px solid var(--mk-hairline); align-items: center; }
.msg-ecrire input {
  flex: 1; min-height: 48px; border: 1px solid var(--mk-hairline-soft); border-radius: var(--mk-r-pill);
  background: var(--mk-bg); padding: 0 18px; outline: none; font: 400 15px var(--mk-font); color: var(--mk-text);
}

/* ---------- Le profil ---------- */
.onglets { display: flex; gap: 4px; border-bottom: 1px solid var(--mk-hairline); margin-bottom: 28px; }
.onglets a {
  display: inline-flex; align-items: center; min-height: 52px; padding: 0 22px;
  font: 600 16px var(--mk-font); color: var(--mk-text-2); text-decoration: none;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.onglets a[aria-current] { color: var(--mk-primary); font-weight: 700; border-bottom-color: var(--mk-primary); }

.compl { background: var(--mk-mint); border-radius: var(--mk-r-card); padding: 22px; margin-top: 20px; }
.compl h2 { font: 700 17px var(--mk-font); color: var(--mk-mint-text); }
.compl .etapes { display: flex; gap: 6px; margin: 14px 0 16px; }
.compl .etapes i { flex: 1; height: 8px; border-radius: var(--mk-r-pill); background: rgba(10, 107, 92, .22); }
.compl .etapes i.faite { background: var(--mk-mint-text); }
.compl .prochaine { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.compl .prochaine .t { flex: 1; min-width: 200px; }
.compl .prochaine .t b { display: block; font: 700 16px var(--mk-font); color: var(--mk-mint-text); }
.compl .prochaine .t span { font: 400 14px var(--mk-font); color: var(--mk-mint-text); }

.verifs { display: grid; gap: 2px; margin-top: 16px; }
.verif-l {
  display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 12px 20px;
  background: var(--mk-card); border: 1px solid var(--mk-hairline-soft);
  font: 500 16px var(--mk-font); color: var(--mk-text);
}
.verifs > :first-child { border-radius: var(--mk-r-card) var(--mk-r-card) 0 0; }
.verifs > :last-child { border-radius: 0 0 var(--mk-r-card) var(--mk-r-card); }
.verif-l .marque-v { width: 24px; height: 24px; border-radius: var(--mk-r-pill); flex: none; display: grid; place-items: center; background: var(--mk-mint); }
.verif-l.manque { color: var(--mk-text-2); }
.verif-l.manque .marque-v { background: var(--mk-piste); }
.verif-l .lien-v { margin-left: auto; font: 700 15px var(--mk-font); color: var(--mk-primary); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }

.lignes-h { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.ligne-neuve { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.ligne-neuve input {
  flex: 1; min-width: 150px; min-height: 48px; padding: 0 16px;
  background: var(--mk-bg); border: 1px solid var(--mk-hairline-fort);
  border-radius: var(--mk-r-pill); font: 500 15px var(--mk-font); color: var(--mk-text);
}
.ligne-neuve .fleche-l { font: 600 16px var(--mk-font); color: var(--mk-text-2); flex: none; }
.ligne-neuve .btn { min-height: 48px; }

/* ---------- Les avis, en niveaux nommés ---------- */
.repartition { display: grid; gap: 10px; margin-top: 18px; }
.rep-l { display: grid; grid-template-columns: 140px minmax(0, 1fr) 44px; gap: 14px; align-items: center; }
.rep-l .nom-n { font: 500 15px var(--mk-font); color: var(--mk-text); }
.rep-l .piste-n { height: 10px; border-radius: var(--mk-r-pill); background: var(--mk-piste); overflow: hidden; }
.rep-l .piste-n i { display: block; height: 100%; border-radius: var(--mk-r-pill); background: var(--mk-action); }
.rep-l .nb-n { font: 700 15px var(--mk-font); color: var(--mk-text); text-align: right; }

/* ---------- Les canaux de communication ---------- */
.canal { margin-top: 28px; }
.canal h3 { font: 700 17px var(--mk-font); color: var(--mk-primary); }
.canal .items { display: grid; gap: 2px; margin-top: 12px; }
.canal-i {
  display: flex; align-items: flex-start; gap: 16px; padding: 16px 20px;
  background: var(--mk-card); border: 1px solid var(--mk-hairline-soft); cursor: pointer;
}
.canal .items > :first-child { border-radius: var(--mk-r-card) var(--mk-r-card) 0 0; }
.canal .items > :last-child { border-radius: 0 0 var(--mk-r-card) var(--mk-r-card); }
.canal-i input { position: absolute; opacity: 0; width: 0; height: 0; }
.canal-i .bascule-i {
  width: 46px; height: 28px; border-radius: var(--mk-r-pill); flex: none; margin-top: 2px;
  background: var(--mk-piste); position: relative; transition: background .15s ease;
}
.canal-i .bascule-i::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
  border-radius: var(--mk-r-pill); background: var(--mk-card); transition: transform .15s ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}
.canal-i input:checked + .bascule-i { background: var(--mk-action); }
.canal-i input:checked + .bascule-i::after { transform: translateX(18px); }
.canal-i input:focus-visible + .bascule-i { outline: 3px solid var(--mk-primary); outline-offset: 2px; }
.canal-i .txt .t { font: 700 16px var(--mk-font); color: var(--mk-text); }
.canal-i .txt .s { font: 400 14px/1.5 var(--mk-font); color: var(--mk-text-2); margin-top: 2px; }

/* ============================================================
   Adaptation
   ============================================================ */
@media (max-width: 1100px) {
  .suivi-grille, .msg-grille { grid-template-columns: 1fr; }
  .ligne-c { grid-template-columns: minmax(0, 1fr) auto; }
  .ligne-c .milieu { grid-column: 1 / -1; }
}

@media (max-width: 820px) {

  /* De quoi ne pas cacher la fin de page derrière la barre. */
  .page-membre { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .ligne-c, .demande-c { grid-template-columns: 1fr; gap: 16px; }
  .ligne-c .fin-c { align-items: flex-start; }
  .demande-c .chiffres { text-align: left; }
  .rep-l { grid-template-columns: 110px minmax(0, 1fr) 36px; gap: 10px; }
  .msg-contexte { gap: 16px; }
  .onglets a { padding: 0 14px; }
}