/* Lire Debord — les trois pages du compte : /compte/, /messages/, /place-publique/.
   Bichromie du plan (papier, encre, rouge des flèches) ; les cartes sont des
   fragments posés sur le papier ; rien sous 11 px, aucune cible sous 24 px.
   Les formulaires reprennent la grammaire de la note du carnet (lecture.css). */

/* ---------- commun ---------- */
.cp-form{display:grid;gap:14px;max-width:440px}
.cp-champ{display:grid;gap:6px}
.cp-champ label{font-size:.84rem;font-weight:600;color:var(--encre)}
.cp-champ input,.cp-champ textarea,.cp-champ select{width:100%;font:inherit;font-size:.98rem;line-height:1.4;padding:10px 12px;border:1px solid var(--border-strong);border-radius:10px;background:var(--blanc);color:var(--encre);min-height:44px}
.cp-champ textarea{resize:vertical;min-height:96px}
.cp-champ input:focus,.cp-champ textarea:focus,.cp-champ select:focus{outline:2px solid var(--fleche);outline-offset:2px;border-color:transparent}
.cp-champ small{font-size:.78rem;color:var(--muted)}
.cp-b{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.cp-b .btn{padding:11px 18px;font-size:.9rem;white-space:nowrap;flex:none}
.cp-lien{font:inherit;font-size:.86rem;color:var(--trait);background:none;border:0;padding:6px 0;text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:24px}
.cp-lien:hover{color:var(--fleche-text)}
.cp-err{margin:0;padding:10px 14px;border-left:3px solid var(--fleche);background:var(--blanc);font-size:.9rem;color:var(--encre)}
.cp-ok{margin:0;padding:10px 14px;border-left:3px solid var(--encre);background:var(--blanc);font-size:.9rem;color:var(--encre)}
.cp-carte{background:var(--blanc);border:1px solid var(--border);border-radius:14px;padding:22px 24px;display:grid;gap:14px;align-content:start}
.cp-carte h2{font-family:var(--f-titre);font-weight:600;font-size:1.15rem;margin:0;letter-spacing:-.01em}
.cp-carte p{margin:0;font-size:.92rem;line-height:1.5;color:var(--trait)}
.cp-vide{font-family:var(--f-lecture);font-size:1.1rem;color:var(--trait);margin:32px 0 0;max-width:56ch;line-height:1.55}
.cp-vide a{color:var(--fleche-text)}
.cp-onglets{display:flex;gap:6px;margin:28px 0 22px;border-bottom:1px solid var(--border)}
.cp-onglets button{font:inherit;font-size:.92rem;font-weight:600;color:var(--trait);background:none;border:0;border-bottom:3px solid transparent;padding:10px 4px;margin-bottom:-1px;cursor:pointer;min-height:44px}
.cp-onglets button[aria-selected="true"]{color:var(--encre);border-bottom-color:var(--fleche)}
.cp-onglets button:hover{color:var(--encre)}
.cp-tuiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.cp-tuile{display:grid;gap:4px;padding:14px 16px;border:1px solid var(--border);border-radius:12px;text-decoration:none;color:var(--encre);background:var(--papier)}
.cp-tuile b{font-family:var(--f-titre);font-weight:800;font-size:1.7rem;line-height:1;letter-spacing:-.02em;color:var(--fleche-text)}
.cp-tuile span{font-size:.82rem;color:var(--trait)}
.cp-tuile:hover{background:var(--blanc)}
.cp-grille{display:grid;gap:18px;margin-top:28px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.cp-gains{margin:32px 0 0;padding:0;list-style:none;display:grid;gap:10px;max-width:56ch}
.cp-gains li{display:grid;grid-template-columns:22px 1fr;gap:10px;font-size:.95rem;line-height:1.5;color:var(--trait)}
.cp-gains svg{width:18px;height:12px;margin-top:8px}
.cp-gains svg path{fill:none;stroke:var(--fleche);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cp-danger{border-color:rgba(216,32,10,.35)}
.cp-apercu{font-size:.86rem;color:var(--muted)}
.cp-apercu b{color:var(--encre);font-weight:600}

/* ---------- l'auteur : cachet + pseudo ---------- */
.au{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--encre);font-weight:600;font-size:.88rem;min-height:24px}
.au:hover{color:var(--fleche-text)}
.au-c{width:26px;height:26px;border-radius:50%;display:inline-grid;place-items:center;font-family:var(--f-titre);font-weight:800;font-size:.8rem;color:var(--papier);background:var(--encre);flex:none}
.au-c.c1{background:#b8170a}.au-c.c2{background:#39596b}.au-c.c3{background:#6b5a1c}.au-c.c4{background:#3f6a2a}
.au-m{font-size:.8rem;color:var(--muted);font-weight:400}
.au-x{color:var(--muted);font-weight:500}
.au-x .au-c{background:var(--muted)}

/* ---------- messages ---------- */
.mg-cols{display:grid;grid-template-columns:minmax(240px,300px) 1fr;gap:20px;margin-top:28px;min-height:60vh;align-items:start}
.mg-cols[hidden]{display:none}
.mg-liste{display:grid;gap:14px;align-content:start}
.mg-ajout{display:grid;grid-template-columns:1fr auto;gap:8px}
.mg-ajout input{font:inherit;font-size:.92rem;padding:9px 12px;border:1px solid var(--border-strong);border-radius:10px;background:var(--blanc);color:var(--encre);min-width:0;min-height:42px}
.mg-ajout input:focus{outline:2px solid var(--fleche);outline-offset:2px;border-color:transparent}
.mg-ajout .btn{padding:9px 14px;font-size:.86rem}
.mg-contacts{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.mg-ct{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;width:100%;text-align:left;font:inherit;padding:9px 10px;border:1px solid transparent;border-radius:12px;background:none;cursor:pointer;color:var(--encre);min-height:48px}
.mg-ct:hover{background:var(--blanc)}
.mg-ct[aria-current="true"]{background:var(--blanc);border-color:var(--border)}
.mg-ct b{font-weight:600;font-size:.92rem;display:block}
.mg-ct small{display:block;font-size:.8rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.mg-nl{min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:var(--fleche);color:var(--papier);font-size:.74rem;font-weight:700;display:grid;place-items:center}
.mg-sugg{display:grid;gap:8px}
.mg-sugg h3{font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:8px 0 0}
.mg-sugg ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.mg-sugg button{font:inherit;font-size:.84rem;padding:6px 12px;border-radius:999px;border:1px solid var(--border-strong);background:var(--blanc);color:var(--encre);cursor:pointer;min-height:28px}
.mg-sugg button:hover{border-color:var(--encre)}
.mg-fil{display:grid;grid-template-rows:auto 1fr auto;gap:12px;background:var(--blanc);border:1px solid var(--border);border-radius:14px;padding:16px 18px;min-height:60vh}
.mg-fil[hidden]{display:none}
.mg-tete{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-bottom:12px;border-bottom:1px solid var(--border)}
.mg-tete h2{font-family:var(--f-titre);font-weight:600;font-size:1.1rem;margin:0}
.mg-tete .cp-lien{margin-left:auto}
.mg-msgs{list-style:none;margin:0;padding:4px 0;display:grid;gap:8px;max-height:52vh;overflow:auto;align-content:end}
.mg-m{max-width:76%;padding:9px 13px;border-radius:14px;background:var(--papier);border:1px solid var(--border);font-size:.95rem;line-height:1.45;white-space:pre-wrap;word-break:break-word;justify-self:start}
.mg-m.moi{justify-self:end;background:var(--encre);color:var(--papier);border-color:var(--encre)}
.mg-m time{display:block;font-size:.72rem;color:var(--muted);margin-top:4px}
.mg-m.moi time{color:rgba(243,240,232,.75)}
.mg-nouveau{justify-self:center;font:inherit;font-size:.82rem;padding:6px 12px;border-radius:999px;border:1px solid var(--border-strong);background:var(--blanc);cursor:pointer;min-height:28px}
.mg-compose{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end}
.mg-compose textarea{font:inherit;font-size:.95rem;line-height:1.4;padding:10px 12px;border:1px solid var(--border-strong);border-radius:10px;background:var(--papier);color:var(--encre);resize:none;min-height:44px;max-height:160px}
.mg-compose textarea:focus{outline:2px solid var(--fleche);outline-offset:2px;border-color:transparent}
.mg-compose .btn{padding:10px 16px;font-size:.88rem}
.mg-vide{font-size:.95rem;color:var(--muted);align-self:center;text-align:center;margin:0}
@media(max-width:760px){
  .mg-cols{grid-template-columns:1fr}
  .mg-cols.ouvert .mg-liste{display:none}
  .mg-cols:not(.ouvert) .mg-fil{display:none}
  .mg-m{max-width:88%}
  .mg-ct small{max-width:60vw}
}

/* ---------- la Place publique ---------- */
.pp-barre{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:26px 0 18px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.pp-barre[hidden]{display:none}
.pp-tris{display:flex;gap:4px}
.pp-tris button{font:inherit;font-size:.86rem;font-weight:500;padding:7px 12px;border-radius:999px;border:1px solid transparent;background:none;color:var(--trait);cursor:pointer;min-height:32px}
.pp-tris button[aria-pressed="true"]{background:var(--encre);color:var(--papier)}
.pp-tris button:hover{border-color:var(--border-strong);color:var(--encre)}
.pp-barre select{font:inherit;font-size:.86rem;padding:7px 10px;border:1px solid var(--border-strong);border-radius:10px;background:var(--blanc);color:var(--encre);max-width:100%;min-height:36px}
.pp-barre .btn{margin-left:auto;padding:9px 16px;font-size:.88rem}
/* ⚠️ .btn est en inline-flex, ce qui bat [hidden] : il faut le redire (piège de la maison) */
.pp-barre .btn[hidden]{display:none}
.pp-liste{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pp-fil{background:var(--blanc);border:1px solid var(--border);border-radius:14px;padding:16px 18px;display:grid;gap:8px}
.pp-fil.cache{opacity:.6;border-style:dashed}
.pp-ou{font-size:.76rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--fleche-text);margin:0;display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline}
/* dans une ligne en flex, un lien n'est pas « en ligne dans une phrase » : il prend ses 24 px (sonde : 19 px) */
.pp-ou a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;min-height:24px}
.pp-ou a:hover{text-decoration:underline}
.pp-t{font-family:var(--f-titre);font-weight:600;font-size:1.18rem;line-height:1.25;margin:0;letter-spacing:-.01em}
.pp-t a{color:var(--encre);text-decoration:none}
.pp-t a:hover{color:var(--fleche-text)}
.pp-x{margin:0;font-size:.95rem;line-height:1.5;color:var(--trait);white-space:pre-wrap;word-break:break-word}
.pp-x.court{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pp-m{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:.82rem;color:var(--muted)}
.pp-m .cp-lien{font-size:.82rem;padding:4px 0}
.pp-soutien{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:.82rem;padding:4px 10px;border-radius:999px;border:1px solid var(--border-strong);background:var(--blanc);color:var(--encre);cursor:pointer;min-height:28px}
.pp-soutien svg{width:14px;height:12px}
.pp-soutien svg path{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pp-soutien[aria-pressed="true"]{background:var(--encre);color:var(--papier);border-color:var(--encre)}
.pp-soutien:disabled{cursor:default;opacity:.7}
.pp-detail{display:grid;gap:18px}
.pp-detail .pp-x{font-family:var(--f-lecture);font-size:1.05rem;color:var(--encre)}
.pp-reps{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pp-reps .pp-reps{margin:10px 0 0 18px;padding-left:14px;border-left:2px solid var(--border)}
.pp-rep{display:grid;gap:6px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--papier)}
.pp-rep.cache{opacity:.6;border-style:dashed}
.pp-rep .pp-x{font-family:var(--f-ui);font-size:.95rem;color:var(--encre)}
.pp-compose{display:grid;gap:12px;background:var(--blanc);border:1px solid var(--border);border-radius:14px;padding:18px 20px}
.pp-compose h2{font-family:var(--f-titre);font-weight:600;font-size:1.15rem;margin:0}
.pp-compose[hidden]{display:none}
.pp-retour{display:inline-flex;align-items:center;gap:8px;font-size:.88rem;color:var(--trait);text-decoration:none;min-height:24px;margin-bottom:6px}
.pp-retour:hover{color:var(--fleche-text)}
.pp-retour svg{width:16px;height:11px}
.pp-retour svg path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pp-profil{display:grid;gap:8px;padding:20px 22px;background:var(--blanc);border:1px solid var(--border);border-radius:14px}
.pp-profil h2{font-family:var(--f-titre);font-weight:600;font-size:1.3rem;margin:0}
.pp-profil p{margin:0;font-size:.95rem;color:var(--trait);line-height:1.5}
.pp-confirm{display:inline-flex;gap:8px;align-items:center;font-size:.82rem}
.pp-confirm button{font:inherit;font-size:.82rem;padding:4px 10px;border-radius:999px;border:1px solid var(--border-strong);background:var(--blanc);cursor:pointer;min-height:28px}
.pp-confirm button.oui{background:var(--fleche);color:var(--papier);border-color:var(--fleche)}
.pp-vide{font-family:var(--f-lecture);font-size:1.05rem;color:var(--trait);margin:20px 0;max-width:56ch;line-height:1.55}
.pp-signal{display:grid;gap:8px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--blanc)}
.pp-signal input{font:inherit;font-size:.9rem;padding:8px 10px;border:1px solid var(--border-strong);border-radius:8px;background:var(--papier);color:var(--encre);min-height:40px}
@media(max-width:560px){.pp-barre .btn{margin-left:0;width:100%;justify-content:center}}