/* Kiss&Go — mobile d'abord, thème clair / sombre automatique */
:root {
  --fond: #fbf7f9; --carte: #fff; --texte: #241a20; --doux: #6e5f68; --bord: #ecdfe6;
  --accent: #c2185b; --accent-texte: #fff; --accent-doux: #fde4ee; --ok: #1e7b3a; --ok-fond: #e3f4e8;
  --erreur: #b3261e; --erreur-fond: #fde7e5; --alerte: #8a5a00; --alerte-fond: #fff3d6;
  --femme: #c2185b; --homme: #1f6fb6; --autre: #7b5ea7;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #17121a; --carte: #221a24; --texte: #f1e9ee; --doux: #b3a2ad; --bord: #3a2d39;
    --accent: #f06292; --accent-texte: #1b0d14; --accent-doux: #3d1e2c; --ok: #6fd28c; --ok-fond: #17331f;
    --erreur: #ff8a80; --erreur-fond: #3a1714; --alerte: #f2c46b; --alerte-fond: #3a2e14;
    --femme: #f06292; --homme: #64b5f6; --autre: #b39ddb;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--texte); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--accent); }
main { max-width: 760px; margin: 0 auto; padding: 16px 16px 40px; }
h1 { font-size: 1.45rem; margin: .2em 0 .5em; line-height: 1.25; }
h2 { font-size: 1.1rem; margin: 1.4em 0 .5em; }

.barre { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top)); background: var(--carte); border-bottom: 1px solid var(--bord); }
.marque { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--texte); font-weight: 800; font-size: 1.2rem; }
.marque img { border-radius: 9px; } .marque b { color: var(--accent); }
.barre nav { display: flex; align-items: center; gap: 14px; font-size: .95rem; }
.barre nav a { text-decoration: none; }
.pastille { display: inline-block; min-width: 1.4em; padding: 0 .4em; border-radius: 99px; background: var(--accent); color: var(--accent-texte); font-size: .75rem; font-weight: 700; text-align: center; }

.carte { display: block; background: var(--carte); border: 1px solid var(--bord); border-radius: 14px; padding: 14px 16px; margin: 0 0 12px; }
.centre { text-align: center; } .etroit { max-width: 460px; margin-left: auto; margin-right: auto; }
.porte { margin-top: 8vh; } .porte img { border-radius: 22px; } .accroche { color: var(--doux); margin-top: -.4em; }
.intro { padding: 6px 0 14px; } .intro p { color: var(--doux); }

.bouton { display: inline-block; border: 0; border-radius: 10px; padding: 11px 18px; background: var(--accent); color: var(--accent-texte);
  font: inherit; font-weight: 650; text-decoration: none; cursor: pointer; text-align: center; }
.bouton.large { display: block; width: 100%; padding: 13px; margin-top: 6px; }
.bouton.petit { padding: 6px 12px; font-size: .88rem; }
.bouton.secondaire { background: var(--accent-doux); color: var(--accent); }
.bouton.danger { background: var(--erreur-fond); color: var(--erreur); }
.bouton:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

form label { display: block; margin: 0 0 12px; font-weight: 600; font-size: .92rem; }
input, select, textarea { display: block; width: 100%; margin-top: 4px; padding: 11px 12px; border: 1px solid var(--bord); border-radius: 10px;
  background: var(--fond); color: var(--texte); font: inherit; font-weight: 400; }
textarea { resize: vertical; }
label.case { display: flex; align-items: flex-start; gap: 8px; font-weight: 500; }
label.case input { width: auto; margin-top: 4px; }
fieldset { border: 1px solid var(--bord); border-radius: 10px; margin: 0 0 12px; padding: 8px 12px 0; }
fieldset label.case { display: inline-flex; margin-right: 14px; }
legend { font-weight: 600; font-size: .92rem; padding: 0 4px; }
.deux { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
input.code { font-size: 1.6rem; letter-spacing: .4em; text-align: center; }

.filtres { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; align-items: end; }
.filtres label { margin: 0; } .filtres .bouton { width: 100%; }

.annonce { display: flex; gap: 12px; text-decoration: none; color: inherit; }
.annonce:hover { border-color: var(--accent); }
.avatar { flex: 0 0 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 1.2rem; background: var(--autre); }
.a-femme { background: var(--femme); } .a-homme { background: var(--homme); }
.corps { min-width: 0; display: flex; flex-direction: column; }
.titre { font-weight: 700; } .meta { color: var(--doux); font-size: .86rem; }
.extrait { color: var(--doux); font-size: .92rem; margin-top: 2px; overflow-wrap: anywhere; }
.texte { white-space: normal; overflow-wrap: anywhere; }
.profil-mini { display: flex; gap: 12px; padding-top: 12px; border-top: 1px solid var(--bord); }
.pages { display: flex; justify-content: space-between; gap: 10px; }

.flash { padding: 10px 14px; border-radius: 10px; margin: 0 0 12px; }
.flash.ok { background: var(--ok-fond); color: var(--ok); } .flash.erreur { background: var(--erreur-fond); color: var(--erreur); }
.flash.alerte { background: var(--alerte-fond); color: var(--alerte); }
.petit { color: var(--doux); font-size: .86rem; }

.fil { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.bulle { max-width: 82%; padding: 9px 12px; border-radius: 16px; overflow-wrap: anywhere; }
.bulle.moi { align-self: flex-end; background: var(--accent); color: var(--accent-texte); border-bottom-right-radius: 4px; }
.bulle.lui { align-self: flex-start; background: var(--carte); border: 1px solid var(--bord); border-bottom-left-radius: 4px; }
.heure { display: block; font-size: .72rem; opacity: .75; margin-top: 2px; }
.envoi { display: flex; gap: 8px; align-items: flex-end; } .envoi textarea { margin: 0; }

.ligne { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.actions { display: flex; gap: 6px; flex-wrap: wrap; } .actions form { margin: 0; }
.menu a { display: block; padding: 12px 2px; border-bottom: 1px solid var(--bord); text-decoration: none; font-weight: 600; }
.menu a:last-child { border-bottom: 0; }
.stats { display: flex; flex-wrap: wrap; gap: 8px 18px; } .stats b { font-size: 1.2rem; }
details summary { cursor: pointer; font-weight: 600; } details[open] summary { margin-bottom: 10px; }
.texte-long ol li { margin-bottom: 6px; }

footer { text-align: center; color: var(--doux); font-size: .84rem; padding: 10px 16px 30px; padding-bottom: max(30px, env(safe-area-inset-bottom)); }
@media (min-width: 700px) { h1 { font-size: 1.7rem; } }

/* service SMS */
.sms code, .texte-long code, .flash code, p code { font: 600 .92em ui-monospace, "SF Mono", Menlo, Consolas, monospace; background: var(--accent-doux); color: var(--accent);
  padding: 2px 7px; border-radius: 6px; white-space: nowrap; }
.etapes { padding-left: 1.3em; } .etapes li { margin: 0 0 8px; }
.repondre { margin-top: 8px; font-size: .88rem; }
.mots-cles dt { margin-top: 12px; } .mots-cles dd { margin: 4px 0 0; color: var(--doux); }
input.mini { width: 5.5em; display: inline-block; margin: 0 4px 0 0; padding: 6px 8px; }
.actions form { display: flex; align-items: center; }

/* version web (kissandgo.to) */
.profil-mini.sans-bord { border-top: 0; padding-top: 0; text-decoration: none; color: inherit; }
.profil-mini h1 { margin: 0; }
.ligne h1 { margin: 0; }
.journal { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .8rem; max-height: 420px; overflow: auto; }
/* .petit (texte discret) est déclaré après .bouton : on redonne leur couleur aux petits boutons */
.bouton.petit { color: var(--accent-texte); } .bouton.petit.secondaire { color: var(--accent); } .bouton.petit.danger { color: var(--erreur); }
.carte.profil-mini.sans-bord { padding-top: 14px; }
form.centre { margin: 12px 0; }
.ligne:has(> h1) { margin-bottom: 12px; }

/* page de téléchargement (navigateurs hors application) : QR code toujours sur fond blanc, lisible aussi en thème sombre */
.qr { display: inline-block; background: #fff; padding: 12px; border-radius: 14px; border: 1px solid var(--bord); margin: 6px 0 4px; line-height: 0; }
.qr img { width: min(240px, 70vw); height: auto; }