/* Et si enfin — feuille de style partagée (palette Émeraude, section identité visuelle) */

* { box-sizing: border-box; }

:root {
  --bg: oklch(0.17 0.03 250);
  --surface: oklch(0.22 0.028 250);
  --surface-vive: oklch(0.26 0.045 250);
  --ink: oklch(0.93 0.01 95);
  --ink-muted: oklch(0.60 0.02 250);
  --accent: oklch(0.55 0.09 165);
  --heart: oklch(0.55 0.17 15);
  --border: oklch(0.32 0.025 250);
}

/* Retour utilisateur du 2026-09-03 : "on va supprimer la possibilité de
   modifier l'apparence [...] on va garder la vue par défaut sombre pour
   tous" — retire le mode Clair / Automatique (Réglages > Apparence,
   retour utilisateur du 2026-09-02, base.html ne pose plus jamais
   data-theme). :root ci-dessus reste la seule palette, pour tout le
   monde. */

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', sans-serif;
}

/* Les éléments de formulaire n'héritent pas de la police du site par
   défaut (comportement natif des navigateurs) — sans cette règle, tout
   bouton retombe sur la police système (souvent Arial), même si le CSS
   du bouton ne définit rien d'autre. Une seule règle ici plutôt que de
   la répéter sur chaque classe de bouton. */
button, input, select, textarea { font-family: inherit; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); width: 20px; height: 20px; }

a { color: var(--accent); }

.screen {
  max-width: 480px;
  margin: 0 auto;
  height: 100vh;
  height: 100dvh; /* hauteur reelle du viewport mobile, sans la barre d'adresse — 100vh seul en repli */
  display: flex;
  flex-direction: column;
  overflow: hidden; /* header/navbar restent fixes ; seule .zone-scrollable defile (retour utilisateur du 2026-08-26) */
  /* Retour utilisateur du 2026-08-28 : une fois l'appli installée (mode
     standalone), certains téléphones Android dessinent le contenu jusque
     sous la barre de navigation gestuelle du système — le menu du bas se
     retrouvait caché, invisible sans défiler. env(safe-area-inset-*) vaut
     0 partout ailleurs (navigateur normal, iPhone sans encoche) donc sans
     risque ; actif seulement là où c'est nécessaire. Nécessite
     viewport-fit=cover dans la balise meta viewport (base.html) pour être
     pris en compte du tout. */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}
.zone-scrollable {
  flex: 1;
  min-height: 0; /* sans ca, un flex-item ne se laisse jamais retrecir sous sa taille de contenu — le defilement interne ne se declencherait jamais */
  overflow-y: auto;
  overflow-x: hidden; /* sans ca, tout contenu un peu trop large fait "trembler" l'ecran a gauche/droite au lieu d'etre simplement contraint (retour utilisateur du 2026-08-27) */
  display: flex;
  flex-direction: column;
}

/* --- En-têtes --- */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 20px 10px;
}
.icon-btn {
  width: 40px; height: 40px; border-radius: 999px; background: var(--surface);
  border: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
  text-decoration: none;
}
.icon-btn svg { width: 20px; height: 20px; stroke: var(--ink); }

.logobar { display: flex; align-items: center; justify-content: center; padding: 22px 0 4px; }
.logobar svg { width: 26px; height: 26px; }
.header-center { flex-shrink: 0; }
.header-center svg { width: 24px; height: 24px; }

.title-header { padding: 14px 20px 14px; }
.title-header h1 { font-size: 28px; font-weight: 600; margin: 0; }
.subtitle { font-size: 13.5px; color: var(--ink-muted); margin-top: 4px; }

/* --- Contenu Accueil (profil du jour) --- */
/* Retour utilisateur du 2026-09-03 : "la bulle notre suggestion [...] est
   trop proche du menu du bas" — .content n'avait aucun padding en bas
   (dernier enfant collé au bord de .zone-scrollable, juste au-dessus de
   .navbar). Concerne toutes les pages qui finissent sur .content sans
   .actions-fixe en dessous (rendez_vous_detail.html en particulier),
   pas seulement l'onglet Rendez-vous. */
.content { padding: 6px 20px 24px; display: flex; flex-direction: column; gap: 22px; }
.photo {
  width: 100%; height: 372px; border-radius: 24px; position: relative; overflow: hidden;
  background: linear-gradient(160deg, oklch(0.62 0.09 55), oklch(0.48 0.10 40) 60%, oklch(0.38 0.09 35));
  flex-shrink: 0;
}
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo svg { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); width: 200px; height: 220px; opacity: 0.85; }
.name-row { display: flex; align-items: baseline; gap: 10px; }
.name-row .name { font-size: 30px; font-weight: 600; }
/* Retour utilisateur du 2026-09-03 : "réduis la taille de l'âge et de la
   taille" — la taille (en cm) a rejoint l'âge la veille dans ce même span
   (name-row/.age, ex. "32 ans, 180 cm"), plus long qu'un simple "32 ans" ;
   22px→16px pour qu'il reste net à côté du prénom (30px) plutôt que de
   rivaliser avec lui. */
.name-row .age { font-size: 16px; color: var(--ink-muted); }
/* Retour utilisateur du 2026-09-03 : "métier et ville, pays en gras" —
   seul usage réel de .meta dans l'app (métier + ville/pays sous le nom,
   _profil_public.html/accueil.html), sans risque ailleurs. */
.meta { color: var(--ink-muted); font-size: 15px; font-weight: 600; }
/* Retour utilisateur du 2026-09-02 : essai en filet vertical sans fond
   ("pas épuré [...] les bulles"), puis retour en arrière le jour même
   ("le précédent avec les bulles et tout était plus épuré") — le pavé
   arrondi rempli d'origine revient tel quel. margin-top ajouté le même
   jour ("gère bien les espacements entre les questions et les réponses")
   — sans lui, le libellé (.subtitle) touchait directement la bulle
   (mesuré à 0px), alors que .content espaçait déjà chaque paire de 16px
   (22px désormais) : l'écart devait être petit près de sa propre
   réponse, plus grand avant la question suivante — pas l'inverse. */
.signature {
  /* Historique du 2026-09-02/03 : "une couleur plus vivante" (vert, rejeté)
     → bleu-gris doux (--surface-vive) → "remets [...] comme au niveau des
     idées de date" (retour à var(--surface), identique à .description-idee)
     → "mets une nuance" : --surface-vive revient, mais plus discret qu'avant
     (chroma/écart de clarté réduits par rapport à --surface — une nuance,
     pas une couleur franche). */
  background: var(--surface-vive); border-radius: 18px; padding: 16px 18px; margin-top: 8px;
  font-size: 18px; line-height: 1.4; color: var(--ink);
}
.description-idee {
  background: var(--surface); border-radius: 18px; padding: 16px 18px;
  font-size: 15.5px; line-height: 1.5; color: var(--ink); text-align: justify;
}
/* Fiche "Idée de date" (retour utilisateur du 2026-08-27) : le lieu proposé
   mis en valeur dans sa propre carte, sous la description, plutôt qu'une
   ligne de texte brute juste sous le titre. */
.carte-suggestion {
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 16px 18px;
}
.suggestion-entete {
  display: flex; align-items: center; gap: 7px; margin-bottom: 8px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent);
}
.suggestion-entete svg { stroke: var(--accent); flex-shrink: 0; }
.suggestion-lieu { font-size: 16.5px; line-height: 1.4; color: var(--ink); }
.actions { display: flex; justify-content: center; gap: 28px; padding: 6px 0 18px; }
.actions-fixe { flex-shrink: 0; border-top: 1px solid var(--border); background: var(--bg); padding-top: 14px; }
.action-btn {
  width: 64px; height: 64px; border-radius: 999px; background: var(--surface);
  border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease;
}
.action-btn svg { width: 26px; height: 26px; stroke: var(--ink); fill: none; }
.action-btn.heart.picked { background: var(--heart); border-color: var(--heart); }
.action-btn.heart.picked svg { stroke: white; fill: white; }
.action-btn.cross.picked { background: var(--ink); border-color: var(--ink); }
.action-btn.cross.picked svg { stroke: var(--bg); }
.action-btn:disabled { opacity: 0.6; cursor: default; }
.action-btn.pulse { animation: pulse-action 0.35s ease; }
@keyframes pulse-action {
  0% { transform: scale(1); }
  40% { transform: scale(1.22); }
  100% { transform: scale(1); }
}
.action-form { display: contents; }
.action-form button { border: none; background: none; padding: 0; }

/* --- États centrés (pause, pas de profil, tampon) --- */
.middle {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 44px; gap: 22px;
}
.badge {
  width: 76px; height: 76px; border-radius: 999px; background: var(--surface);
  display: flex; align-items: center; justify-content: center;
}
.badge svg { width: 34px; height: 34px; stroke: var(--accent); }
.headline { font-size: 30px; font-weight: 600; line-height: 1.15; }
.body-text { font-size: 15.5px; line-height: 1.55; color: var(--ink-muted); max-width: 260px; }
.bouton {
  display: inline-block; margin-top: 4px; padding: 12px 24px; border-radius: 999px;
  background: var(--accent); color: oklch(0.14 0.02 250); font-weight: 700; text-decoration: none;
  border: none; cursor: pointer; font-size: 14px;
}

/* --- Listes (Mes matchs, Profils ratés, 2ème chance) --- */
.list { flex: 1; overflow-y: auto; }
.row { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; }
.avatar {
  width: 56px; height: 56px; border-radius: 999px; flex-shrink: 0; position: relative; overflow: hidden;
  background: linear-gradient(160deg, oklch(0.62 0.09 55), oklch(0.48 0.10 40) 60%, oklch(0.38 0.09 35));
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.small { width: 52px; height: 52px; }
.avatar svg { position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); width: 46px; height: 50px; opacity: 0.85; }

/* Aperçu de cadrage dans la gestion des photos (retour utilisateur du
   2026-08-31) : carré et assez grand pour juger le cadrage, plutôt que le
   petit rond de .avatar qui ne ressemble pas à la vraie vignette affichée
   (voir .ligne-pyramide img, carrée elle aussi dès qu'il y a plus de 2
   photos). */
.apercu-vignette {
  width: 92px; height: 92px; border-radius: 16px; flex-shrink: 0; position: relative; overflow: hidden;
  background: linear-gradient(160deg, oklch(0.62 0.09 55), oklch(0.48 0.10 40) 60%, oklch(0.38 0.09 35));
}
.apercu-vignette img { width: 100%; height: 100%; object-fit: cover; }
.info { flex: 1; min-width: 0; }
.info .name { font-weight: 700; font-size: 16px; }
.info .preview, .info .caption { font-size: 14px; color: var(--ink-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.btn-lien {
  flex-shrink: 0; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--accent);
  background: none; color: var(--accent); font-weight: 700; font-size: 13px; cursor: pointer;
}
.lien-mini {
  background: none; border: none; padding: 0; margin-top: 2px; color: var(--accent);
  font-size: 12px; font-weight: 600; text-decoration: underline; cursor: pointer;
}

/* --- Idées de dates : grille par catégorie + galerie photo --- */
.grille-cartes { display: grid; grid-template-columns: 1fr 1fr; row-gap: 10px; column-gap: 16px; padding: 16px 20px; overflow-y: auto; flex: 1; }
.carte-icone { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 8px; }
.carte-icone .vignette {
  width: 100%; aspect-ratio: 1; border-radius: 18px; overflow: hidden; position: relative;
  background: linear-gradient(160deg, oklch(0.62 0.09 55), oklch(0.48 0.10 40) 60%, oklch(0.38 0.09 35));
}
.carte-icone .vignette img { width: 100%; height: 100%; object-fit: cover; }
.carte-icone .nom {
  font-size: 14px; font-weight: 700; text-align: center; line-height: 1.3;
  /* Retour utilisateur du 2026-08-28 : une précédente tentative réservait
     une hauteur fixe de 2 lignes (min-height en em) pour aligner les
     rangées entre catégories aux noms courts/longs. Retiré : sur un
     téléphone avec une taille de police système agrandie (accessibilité),
     cette réservation gonflait bien plus que les photos (dimensionnées en
     px, indifférentes à ce réglage), créant un vide énorme avant la rangée
     suivante — pire que le problème d'origine. On garde seulement la
     limite à 2 lignes (jamais plus), sans forcer de hauteur minimale :
     une rangée de noms courts reste compacte, un nom long ne déborde pas. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Fiche "Idée de date" (retour utilisateur du 2026-08-27) : titre centré
   plutôt qu'aligné à gauche par défaut. Les photos utilisent désormais
   .galerie-pyramide (retour utilisateur du 2026-09-01, voir
   _galerie_pyramide.html) — la vieille .galerie (rangée défilante) n'a
   plus d'usage. */
.name-row-centree { justify-content: center; text-align: center; }

/* --- Galerie photo en pyramide (1/2/3) + visionneuse plein ecran (retour
   utilisateur du 2026-08-26) : la photo principale seule sur la premiere
   ligne, puis 2, puis jusqu'a 3 — chaque photo cliquable ouvre la
   visionneuse (lightbox.js), avec defilement au clic ou au doigt. */
/* Retour utilisateur du 2026-09-02 : "réduire un peu la taille de ces
   photos dans la vue de profil" — resserre juste la galerie (pas le reste
   de la fiche, toujours pleine largeur) par rapport au padding standard de
   .content, plutôt que de rapetisser chaque photo individuellement (la
   logique de pyramide 1/2/3 continue de répartir l'espace disponible). */
.galerie-profil { padding: 0 14px; }
.galerie-pyramide { display: flex; flex-direction: column; gap: 8px; }
.ligne-pyramide { display: flex; gap: 8px; }
.ligne-pyramide img { flex: 1; min-width: 0; border-radius: 18px; object-fit: cover; cursor: pointer; }
/* Format large pour une ligne a une seule photo (la principale, ou la
   2e ligne quand il n'y a que 2 photos au total — retour utilisateur du
   2026-08-26 : les deux doivent alors avoir la meme taille affichee) ;
   format carre uniquement pour une vraie ligne de miniatures (2-3 photos). */
.ligne-pyramide img:only-child { aspect-ratio: 4 / 3; }
.ligne-pyramide img:not(:only-child) { aspect-ratio: 1 / 1; }
/* Recadrage manuel de la vignette (retour utilisateur du 2026-08-27) : ne
   change jamais le fichier original (la lightbox ci-dessous montre toujours
   la photo entière via object-fit:contain), seulement quelle portion la
   vignette "cover" garde visible verticalement. */
/* Générique (pas seulement .ligne-pyramide) : retour utilisateur du
   2026-08-28, réutilisé pour l'aperçu miniature de Modifier mon profil,
   qui doit refléter en direct le cadrage choisi lui aussi. */
img.pos-haut { object-position: center top; }
img.pos-bas { object-position: center bottom; }

.lightbox-overlay {
  position: fixed; inset: 0; background: oklch(0.05 0 0 / 0.92); display: none;
  align-items: center; justify-content: center; z-index: 1000;
}
.lightbox-overlay.ouvert { display: flex; }
.lightbox-image { max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: 12px; }
.lightbox-fermer, .lightbox-precedent, .lightbox-suivant {
  position: absolute; width: 44px; height: 44px; border-radius: 999px;
  background: oklch(0.22 0.028 250 / 0.85); border: 1px solid var(--border); color: var(--ink);
  font-size: 24px; line-height: 1; display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
}
.lightbox-fermer { top: 16px; right: 16px; }
.lightbox-precedent { left: 12px; top: 50%; transform: translateY(-50%); }
.lightbox-suivant { right: 12px; top: 50%; transform: translateY(-50%); }

/* --- Confirmation avant disparition d'un profil (retour utilisateur du
   2026-09-03, "j'aime pas" — voir _modal_confirmation_disparition.html) --- */
.overlay-confirmation {
  position: fixed; inset: 0; background: oklch(0.05 0 0 / 0.72); display: none;
  align-items: flex-end; justify-content: center; z-index: 1100; padding: 0 16px 16px;
}
.overlay-confirmation.ouvert { display: flex; }
.carte-confirmation {
  width: 100%; max-width: 448px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 8px 28px oklch(0 0 0 / 0.35);
}
.carte-confirmation .body-text { margin: 0; text-align: center; }
.actions-confirmation { display: flex; gap: 10px; }
.actions-confirmation button {
  flex: 1; padding: 12px; border-radius: 999px; font-weight: 700; font-size: 14px;
  cursor: pointer; border: none;
}
.actions-confirmation .annuler { background: transparent; border: 1px solid var(--border); color: var(--ink); }
.actions-confirmation .confirmer { background: var(--heart); color: oklch(0.97 0.01 95); }

/* --- Historique : onglets Profils ratés / Profils aimés (retour
   utilisateur du 2026-09-03 : "fais ça comme si c'étaient 2 onglets" —
   remplace l'ancien duo de pastilles pleines par un vrai bandeau
   d'onglets, texte + soulignement sur celui actif). --- */
.tabs { display: flex; border-bottom: 1px solid var(--border); padding: 0 20px; }
.tab {
  flex: 1; text-align: center; padding: 12px 4px; margin-bottom: -1px; background: none; border: none;
  border-bottom: 2px solid transparent; color: var(--ink-muted); font-weight: 600; font-size: 14px; cursor: pointer;
}
.tab.actif { color: var(--ink); border-bottom-color: var(--accent); }

/* Ligne "Profils aimés" (retour utilisateur du 2026-09-03) : le bouton
   "Demander une 2ème chance" a été déplacé ici depuis Réglages > 2ème
   chance en libre-service — .row-aime empile la fiche cliquable
   (.row-lien, même contenu qu'une ligne .row normale) et le bouton
   plutôt que d'imbriquer un <form> dans un <a> (invalide en HTML). */
.row-aime { flex-direction: column; align-items: stretch; }
.row-aime .row-lien { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
.form-2eme-chance { align-self: flex-start; }
.bouton-2eme-chance {
  align-self: flex-start; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border);
  background: transparent; color: var(--accent); font-size: 13px; font-weight: 700; cursor: pointer;
}
.bouton-2eme-chance .quota { font-weight: 400; color: var(--ink-muted); }
.bouton-2eme-chance:disabled { color: var(--ink-muted); cursor: default; }
/* Retour utilisateur du 2026-09-03 : délai de 16h le lendemain avant de
   pouvoir demander une 2ème chance, et confirmation "vous avez demandé"
   une fois envoyée — texte simple à la place du bouton dans ces deux cas. */
.info-2eme-chance { font-size: 13px; color: var(--ink-muted); }

.time { font-size: 12px; color: var(--ink-muted); }
.dot { width: 9px; height: 9px; border-radius: 999px; background: var(--accent); }
.chevron svg { width: 18px; height: 18px; stroke: var(--ink-muted); flex-shrink: 0; }
.empty-state { padding: 60px 30px; text-align: center; color: var(--ink-muted); }

/* --- Barre de navigation --- */
.navbar { display: flex; border-top: 1px solid var(--border); background: var(--surface); padding: 10px 2px 18px; }
.navitem { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; }
.navitem svg { width: 22px; height: 22px; stroke: var(--ink-muted); flex-shrink: 0; }
.navitem span { font-size: 9.5px; color: var(--ink-muted); font-weight: 500; white-space: nowrap; letter-spacing: -0.01em; }
.icone-avec-badge { position: relative; display: inline-flex; }
.point-badge {
  position: absolute; top: -2px; right: -3px; width: 9px; height: 9px;
  border-radius: 999px; background: var(--heart); border: 1.5px solid var(--surface);
}
.navitem.active svg { stroke: var(--accent); }
.navitem.active span { color: var(--accent); font-weight: 700; }

/* --- Formulaires --- */
.form-page { padding: 32px 24px; max-width: 420px; margin: 0 auto; }
.form-page h1 { font-size: 30px; margin-bottom: 24px; }
.champ { margin-bottom: 18px; }
.champ label { display: block; font-size: 13px; color: var(--ink-muted); margin-bottom: 6px; }
.champ input, .champ textarea, .champ select {
  width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink); font-family: inherit; font-size: 15px;
}
.champ textarea { min-height: 100px; resize: vertical; }
.erreurs { background: oklch(0.3 0.1 25 / 0.3); border: 1px solid var(--heart); border-radius: 12px; padding: 12px 16px; margin-bottom: 18px; color: var(--ink); font-size: 14px; }
.messages-globaux { padding: 16px 20px 0; }
.confirmation {
  background: oklch(0.3 0.06 165 / 0.3); border: 1px solid var(--accent); border-radius: 12px;
  padding: 12px 16px; margin-bottom: 4px; color: var(--ink); font-size: 14px;
}
.bouton-principal {
  width: 100%; padding: 14px; border-radius: 999px; border: none; background: var(--accent);
  color: oklch(0.14 0.02 250); font-weight: 700; font-size: 15px; cursor: pointer;
}
.lien-secondaire { display: block; text-align: center; margin-top: 16px; font-size: 14px; color: var(--ink-muted); }

/* --- Pages légales (confidentialité, mentions légales) --- */
.page-legale { padding: 8px 24px 32px; max-width: 560px; }
.page-legale h2 { font-size: 20px; margin: 28px 0 8px; }
.page-legale p { font-size: 14.5px; line-height: 1.6; color: var(--ink-muted); }
.a-completer {
  display: inline-block; font-size: 13px; font-style: italic; color: var(--accent);
  background: oklch(0.55 0.09 165 / 0.12); border-radius: 8px; padding: 6px 12px; margin: 4px 0;
}

/* --- Conversation --- */
.chat-header { display: flex; align-items: center; gap: 12px; padding: 4px 16px 14px; }
.chat-avatar { width: 38px; height: 38px; border-radius: 999px; position: relative; overflow: hidden; flex-shrink: 0;
  background: linear-gradient(160deg, oklch(0.62 0.09 55), oklch(0.48 0.10 40) 60%, oklch(0.38 0.09 35)); }
.chat-avatar img { width: 100%; height: 100%; object-fit: cover; }
.chat-name { font-weight: 700; font-size: 16px; flex: 1; }
.menu-conversation { position: relative; }
.menu-conversation summary { list-style: none; cursor: pointer; }
.menu-conversation summary::-webkit-details-marker { display: none; }
.menu-conversation summary svg { width: 20px; height: 20px; fill: var(--ink); }
.menu-liste {
  position: absolute; right: 0; top: 48px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden; z-index: 10; min-width: 200px;
  box-shadow: 0 12px 28px oklch(0.1 0.02 250 / 0.45);
}
.menu-liste form { display: contents; }
.menu-liste button, .menu-liste > a {
  display: block; width: 100%; box-sizing: border-box; text-align: left; padding: 14px 18px;
  background: none; border: none; border-bottom: 1px solid var(--border); color: var(--ink);
  font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none;
  transition: background-color 0.15s ease;
}
.menu-liste button:hover, .menu-liste > a:hover { background: var(--bg); }
.menu-liste form:last-child button, .menu-liste > a:last-child { border-bottom: none; }
.menu-liste button.danger, .menu-liste > a.danger { color: var(--heart); }
.messages { flex: 1; overflow-y: auto; padding: 4px 16px; display: flex; flex-direction: column; gap: 12px; }
.bubble-row { display: flex; flex-direction: column; width: fit-content; max-width: 76%; }
.bubble-row:not(.mine) { margin-right: auto; align-items: flex-start; }
.bubble-row.mine { margin-left: auto; align-items: flex-end; }
.bubble { padding: 10px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.4; overflow-wrap: break-word; word-break: break-word; }
.bubble-row:not(.mine) .bubble { background: var(--surface); border-bottom-left-radius: 4px; }
.bubble-row.mine .bubble { background: var(--accent); color: oklch(0.14 0.02 250); border-bottom-right-radius: 4px; }
.bubble-time { font-size: 10.5px; color: var(--ink-muted); margin-top: 3px; padding: 0 4px; }
.composer { display: flex; align-items: center; gap: 10px; padding: 12px 16px 22px; border-top: 1px solid var(--border); }
.composer input {
  flex: 1; min-width: 0; height: 42px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border);
  padding: 0 16px; font-size: 14px; color: var(--ink); font-family: inherit;
}
.send-btn {
  width: 42px; height: 42px; border-radius: 999px; background: var(--accent); display: flex; align-items: center;
  justify-content: center; flex-shrink: 0; border: none; cursor: pointer;
  -webkit-appearance: none; appearance: none; /* retour utilisateur du 2026-08-28 : sans ça, certains
  navigateurs mobiles conservent un habillage natif qui mord sur le fond rond personnalisé */
}
.send-btn svg { width: 19px; height: 19px; stroke: oklch(0.14 0.02 250); }

/* --- Console admin (plus large, pas de barre de navigation dater) --- */
.admin-page { max-width: 900px; margin: 0 auto; padding: 32px 24px 80px; }
.admin-nav { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.admin-nav a {
  padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border); text-decoration: none;
  color: var(--ink-muted); font-size: 13.5px; font-weight: 600;
}
.admin-nav a.active { background: var(--accent); color: oklch(0.14 0.02 250); border-color: var(--accent); }
.admin-section { margin-bottom: 12px; }
.admin-section h2 { font-size: 22px; margin: 24px 0 12px; }
.carte-admin {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 16px 18px; margin-bottom: 12px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.carte-admin .infos { flex: 1; min-width: 200px; }
.carte-admin .infos a { color: var(--ink); font-weight: 700; text-decoration: none; }
.contact-admin { font-size: 13px; color: var(--ink-muted); margin-top: 2px; }
.carte-admin .actions-admin { display: flex; gap: 8px; }
.btn-admin {
  padding: 8px 14px; border-radius: 8px; border: 1px solid var(--border); background: transparent;
  color: var(--ink); font-size: 13px; cursor: pointer; text-decoration: none; font-weight: 600;
}
.btn-admin.danger { border-color: var(--heart); color: var(--heart); }
.btn-admin.primaire { background: var(--accent); border-color: var(--accent); color: oklch(0.14 0.02 250); }
.btn-admin.icone { padding: 8px; display: inline-flex; align-items: center; justify-content: center; }
.btn-admin.icone svg { stroke: currentColor; }

/* Réglages > Modifier mon profil > recadrage de la vignette (retour
   utilisateur du 2026-08-27) */
.recadrage-photo { display: flex; align-items: center; gap: 5px; flex-wrap: nowrap; padding: 0 0 12px; margin-top: -6px; }
.libelle-recadrage { font-size: 11px; color: var(--ink-muted); margin-right: 1px; white-space: nowrap; flex-shrink: 0; }
.segment {
  padding: 4px 9px; border-radius: 999px; border: 1px solid var(--border); background: transparent;
  color: var(--ink-muted); font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.segment.actif { background: var(--accent); border-color: var(--accent); color: oklch(0.14 0.02 250); }

/* Bannière "Ajouter à l'écran d'accueil" (retour utilisateur du 2026-08-28,
   static/matching/install_prompt.js) — flottante au-dessus de tout, y
   compris la barre de navigation, jamais dans le flux normal de la page. */
.banniere-installation {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1000;
  max-width: 448px; margin: 0 auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
  padding: 16px; display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 8px 28px oklch(0 0 0 / 0.35);
}
.banniere-installation-texte { display: flex; flex-direction: column; gap: 4px; }
.banniere-installation-texte strong { font-size: 15px; }
.banniere-installation-texte span { font-size: 13px; color: var(--ink-muted); line-height: 1.4; }
.banniere-installation-actions { display: flex; justify-content: flex-end; gap: 10px; }
.banniere-installation-actions button {
  border: none; border-radius: 999px; padding: 9px 16px; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.banniere-installation-plus-tard { background: transparent; color: var(--ink-muted); }
.banniere-installation-oui { background: var(--accent); color: oklch(0.14 0.02 250); }