/* Cro-Magnon AI — écran de chat */

html, body { height: 100%; }
body.app { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }

.app-entete {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 16px; border-bottom: 1px solid var(--bordure); background: var(--creme);
}
.app-entete .marque img { width: 40px; height: 40px; }
.app-entete .marque span { font-size: 19px; }
.compteur { font-size: 13px; font-weight: 600; background: var(--cuir-clair); color: var(--cuir); padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
.pastille-demo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; background: var(--ambre-fond); color: var(--ambre-texte); padding: 3px 8px; border-radius: 6px; }

.fil { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.fil-interieur { max-width: 760px; margin: 0 auto; padding: 20px 16px 8px; }

/* Accueil vide */
.accueil { text-align: center; padding: 6vh 0 10px; }
.accueil img { width: 84px; height: 84px; border-radius: 22px; margin: 0 auto 14px; }
.accueil h1 { font-family: var(--police-titre); font-weight: 400; text-transform: uppercase; font-size: 30px; margin: 0 0 6px; }
.accueil p { color: var(--texte-2); margin: 0 0 22px; }
.suggestions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; text-align: left; }
.suggestion { background: var(--surface); border: 1px solid var(--bordure); border-radius: 14px; padding: 12px 14px; font-size: 14px; color: var(--texte); }
.suggestion:hover { border-color: var(--cuir); }
.suggestion b { display: block; font-size: 14px; }
.suggestion span { color: var(--texte-2); font-size: 13px; }

/* Messages */
.msg { display: flex; gap: 10px; margin-bottom: 18px; }
.msg.utilisateur { justify-content: flex-end; }
.msg.utilisateur .bulle { background: var(--cuir-clair); border-radius: 18px 18px 4px 18px; padding: 10px 14px; max-width: 80%; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.utilisateur .bulle img { border-radius: 12px; max-height: 220px; margin-bottom: 6px; }
.msg.ia .avatar { flex: none; width: 30px; height: 30px; margin-top: 2px; }
.msg.ia .avatar img { width: 100%; height: 100%; }
.msg.ia .contenu { flex: 1; min-width: 0; }
.msg.ia .texte p { margin: 0 0 10px; }
.msg.ia .texte ul { margin: 0 0 10px; padding-left: 20px; }
.msg.ia .texte li { margin-bottom: 4px; }
.msg.ia .score { margin: 4px 0 10px; max-width: 460px; }
.etiquette-demo { font-size: 12px; color: var(--texte-2); }
.relances { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.relance { background: transparent; border: 1px solid var(--bordure); color: var(--texte); border-radius: 999px; padding: 6px 12px; font-size: 13px; }
.relance:hover { border-color: var(--cuir); }
.points { display: inline-flex; gap: 4px; padding: 6px 0; }
.points i { width: 7px; height: 7px; border-radius: 50%; background: var(--texte-2); animation: rebond 1s infinite; }
.points i:nth-child(2) { animation-delay: .15s; } .points i:nth-child(3) { animation-delay: .3s; }
@keyframes rebond { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* Fermes près de chez moi */
.form-fermes { display: flex; flex-wrap: wrap; gap: 8px; background: var(--surface); border: 1px solid var(--bordure); border-radius: 16px; padding: 12px; margin: 4px 0 10px; max-width: 460px; }
.form-fermes input { flex: 1 1 180px; min-width: 0; border: 1px solid var(--bordure); background: var(--creme); color: var(--texte); border-radius: 12px; padding: 10px 12px; font: inherit; }
.form-fermes .btn { padding: 10px 16px; }
.erreur-fermes { width: 100%; color: var(--rouge); font-size: 13px; }
.fermes { display: grid; gap: 10px; margin: 4px 0 10px; max-width: 520px; }
.ferme { background: var(--surface); border: 1px solid var(--bordure); border-radius: 16px; padding: 12px 14px; }
.ferme-titre { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.ferme-titre span { color: var(--texte-2); font-size: 13px; white-space: nowrap; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 6px; }
.badge-f { font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 999px; }
.badge-f.bio { background: var(--vert-fond); color: var(--vert-texte); }
.badge-f.herbe { background: var(--vert-fond); color: var(--vert-texte); }
.badge-f.vente { background: var(--cuir-clair); color: var(--cuir); }
.ferme-produits { font-size: 14px; color: var(--texte-2); }
.ferme-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ferme-actions .relance { text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.fermes-source, .fermes-vide { font-size: 12px; color: var(--texte-2); margin: 0; }

/* Barre de saisie */
.saisie { flex: none; background: var(--creme); padding: 8px 12px calc(10px + env(safe-area-inset-bottom)); }
.saisie-interieur { max-width: 760px; margin: 0 auto; display: flex; align-items: flex-end; gap: 8px; background: var(--surface); border: 1px solid var(--bordure); border-radius: 26px; padding: 6px 6px 6px 16px; }
.saisie textarea { flex: 1; border: none; outline: none; resize: none; background: transparent; color: var(--texte); font: inherit; line-height: 1.5; padding: 8px 0; max-height: 140px; }
.icone-btn { flex: none; width: 40px; height: 40px; border-radius: 50%; border: none; background: transparent; color: var(--texte-2); display: grid; place-items: center; font-size: 21px; }
.icone-btn:hover { background: var(--creme-2); }
.icone-btn.ecoute { color: #fff; background: var(--rouge); }
.btn-scan { background: var(--cuir); color: var(--sur-cuir); }
.btn-scan:hover { background: var(--cuir-fonce); }
.btn-envoyer { background: var(--texte); color: var(--creme); }
.btn-envoyer:hover { background: var(--texte); opacity: .85; }
.mention { text-align: center; font-size: 11px; color: var(--texte-2); margin-top: 6px; }

/* Feuilles (scan) et fenêtres */
.voile { position: fixed; inset: 0; background: rgba(20, 12, 6, .5); display: none; align-items: flex-end; justify-content: center; z-index: 50; }
.voile.ouvert { display: flex; }
.feuille { background: var(--creme); width: 100%; max-width: 560px; border-radius: 22px 22px 0 0; padding: 10px 18px calc(22px + env(safe-area-inset-bottom)); max-height: 90dvh; overflow-y: auto; animation: monte .22s ease-out; }
@keyframes monte { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.poignee { width: 40px; height: 5px; border-radius: 3px; background: var(--bordure); margin: 0 auto 14px; }
.feuille h2 { margin: 0 0 4px; font-size: 20px; }
.feuille .aide { color: var(--texte-2); font-size: 14px; margin: 0 0 16px; }
.choix-scan { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choix { background: var(--surface); border: 1px solid var(--bordure); border-radius: 18px; padding: 20px 14px; text-align: center; color: var(--texte); }
.choix:hover { border-color: var(--cuir); }
.choix i { font-size: 34px; color: var(--cuir); display: block; margin-bottom: 8px; }
.choix b { display: block; font-size: 16px; }
.choix span { font-size: 13px; color: var(--texte-2); }
.camera { width: 100%; aspect-ratio: 4 / 3; background: #000; border-radius: 16px; object-fit: cover; margin-bottom: 12px; }
.ligne-code { display: flex; gap: 8px; margin-bottom: 14px; }
.ligne-code input { flex: 1; min-width: 0; border: 1px solid var(--bordure); background: var(--surface); color: var(--texte); border-radius: 12px; padding: 12px 14px; font: inherit; }
.exemples { display: flex; flex-wrap: wrap; gap: 8px; }
.erreur { color: var(--rouge); font-size: 13px; margin: -6px 0 12px; display: none; }
.fermer { position: absolute; }

.voile.centre { align-items: center; padding: 16px; }
.fenetre { position: relative; background: var(--creme); border-radius: 22px; padding: 26px 22px; max-width: 420px; width: 100%; text-align: center; animation: monte .22s ease-out; }
.fenetre img { width: 64px; height: 64px; border-radius: 16px; margin: 0 auto 12px; }
.fenetre h2 { font-family: var(--police-titre); font-weight: 400; text-transform: uppercase; margin: 0 0 6px; font-size: 26px; }
.fenetre p { color: var(--texte-2); margin: 0 0 16px; }
.fenetre ul { text-align: left; list-style: none; padding: 0; margin: 0 0 18px; }
.fenetre li { padding: 4px 0 4px 26px; position: relative; }
.fenetre li::before { content: "✓"; position: absolute; left: 0; color: var(--vert); font-weight: 700; }
.formule { display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--bordure); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; background: var(--surface); text-align: left; }
.formule.vedette { border: 2px solid var(--cuir); }
.formule small { color: var(--texte-2); }
.fenetre .btn { width: 100%; margin-top: 8px; }
.lien-discret { background: none; border: none; color: var(--texte-2); text-decoration: underline; margin-top: 10px; font-size: 14px; }

.app-entete .marque span { white-space: nowrap; }
.compteur i { font-size: 15px; vertical-align: -2px; }
.suggestion { text-align: left; }

@media (max-width: 520px) {
  .app-entete { padding: 10px 12px; }
  .app-entete .marque span { font-size: 17px; }
  .accueil { padding-top: 3vh; }
  .accueil img { width: 68px; height: 68px; }
  .accueil h1 { font-size: 25px; }
  .suggestion { padding: 10px 12px; }
}

/* fenêtre « Ce que je sais de toi » (mémoire Premium) */
.fenetre-memoire { text-align: left; }
.fenetre-memoire h2 { display: flex; align-items: center; gap: 8px; }
.liste-memoire { list-style: none; padding: 0; margin: 12px 0; max-height: 45vh; overflow-y: auto; display: grid; gap: 6px; }
.liste-memoire li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--bordure); border-radius: 12px; background: var(--surface); font-size: 14px; }
.liste-memoire li span { flex: 1; }
.liste-memoire li.vide { color: var(--texte-2); border-style: dashed; }
.liste-memoire .icone-btn { width: 28px; height: 28px; flex: none; }
.liste-memoire li::before { content: none !important; display: none; }
.fenetre .liste-memoire li { padding: 8px 10px; }


/* 5e scan : carte floutée + cadenas */
.carte-bloquee { position: relative; border-radius: 16px; overflow: hidden; }
.carte-bloquee .flou { filter: blur(9px) grayscale(1); pointer-events: none; user-select: none; }
.carte-bloquee .cadenas { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 16px; background: rgba(246, 244, 236, .55); }
.carte-bloquee .cadenas .ti { font-size: 28px; color: var(--cuir); }
.carte-bloquee .cadenas span { color: var(--texte-2); font-size: 14px; }
.carte-bloquee .cadenas .btn { margin-top: 6px; }
#bouton-memoire[hidden] { display: none; }

/* niveau de preuve sous chaque raison (idée reprise du scanner de Paul-Étienne) */
.score li .preuve { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; vertical-align: 1px; white-space: nowrap; }
.preuve-consensus { background: #e3f0dc; color: #2d5a1b; }
.preuve-debattu { background: #fbecd2; color: #7a4a06; }
.preuve-primal { background: var(--cuir-clair); color: var(--cuir); }

/* icônes à la place des émojis (suggestions, verdicts, encarts) */
.suggestion b .ti { color: var(--cuir); font-size: 17px; vertical-align: -2px; margin-right: 2px; }
.verdict .ti { font-size: 15px; vertical-align: -2px; }
.alternative .ti { font-size: 17px; vertical-align: -3px; margin-right: 4px; }
.etiquette-demo .ti { font-size: 13px; vertical-align: -2px; }
.badge-f .ti { font-size: 13px; vertical-align: -2px; }
.source-carte { margin-top: 10px; font-size: 11px; color: var(--texte-2); }
.mention a { color: inherit; text-decoration: underline; }