/* Interface du prototype. Reprend les variables de /styles.css. */

body.app { height: 100dvh; overflow: hidden; }
[hidden] { display: none !important; }

.badge-proto { display: inline-block; font-size: 0.75rem; color: var(--or); border: 1px solid rgba(255, 209, 199, 0.4); border-radius: 999px; padding: 0.1rem 0.6rem; margin: 0.4rem 0 0; }
.petit { font-size: 0.85rem; color: var(--texte-doux); }
.erreur { color: var(--rose); min-height: 1.2rem; margin: 0; font-size: 0.9rem; }
.petit-bouton { padding: 0.5rem 0.9rem; font-size: 0.85rem; }
.bouton-danger { background: transparent; color: var(--rose); border-color: rgba(248, 169, 184, 0.5); }
.bouton-danger:hover { background: var(--rose); color: var(--nuit); }

/* Accueil */
.ecran-accueil { height: 100dvh; overflow-y: auto; display: grid; place-items: center; padding: 24px 16px; }
.accueil-carte { width: min(520px, 100%); }
.accueil-carte h1 { font-size: 2rem; margin: 1rem 0 0.5rem; }
.accueil-carte > p { color: var(--texte-doux); }

.formulaire { display: grid; gap: 1rem; margin-top: 1rem; }
.formulaire label { display: grid; gap: 0.35rem; font-size: 0.95rem; color: var(--lune); }
.formulaire input[type="text"], .formulaire input:not([type]), .formulaire input[type="date"], .formulaire input[type="number"] {
  padding: 0.7rem 0.9rem; border-radius: 12px; border: 1px solid var(--bordure); background: var(--nuit-3); color: var(--texte); font: 1rem var(--sans);
  color-scheme: dark;
}
.formulaire input:focus, textarea:focus { outline: 2px solid var(--rose); outline-offset: 1px; }
.formulaire fieldset { border: 1px solid var(--bordure); border-radius: 12px; padding: 0.6rem 0.9rem; display: flex; flex-wrap: wrap; gap: 1rem; }
.formulaire legend { color: var(--lune); font-size: 0.95rem; padding: 0 0.3rem; }
.formulaire label.choix { display: flex; align-items: center; gap: 0.4rem; color: var(--texte); }
.formulaire label.case { display: flex; align-items: flex-start; gap: 0.6rem; color: var(--texte-doux); font-size: 0.88rem; }
.formulaire input[type="checkbox"], .formulaire input[type="radio"] { accent-color: var(--rose); }
.formulaire input[type="checkbox"] { margin-top: 0.25rem; }

/* Coque principale */
.coque { display: grid; grid-template-columns: 300px 1fr; height: 100dvh; }
.barre { border-right: 1px solid var(--bordure); padding: 1.2rem 1rem; display: flex; flex-direction: column; gap: 1rem; overflow-y: auto; background: rgba(13, 16, 38, 0.6); }
.liste-persos { display: grid; gap: 0.4rem; }
.perso-item { display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem; border-radius: 14px; border: 1px solid transparent; background: transparent; color: var(--texte); text-align: left; cursor: pointer; font: inherit; width: 100%; }
.perso-item:hover { background: var(--nuit-2); }
.perso-item[aria-current="true"] { background: var(--nuit-2); border-color: var(--bordure); }
.perso-item strong { display: block; color: var(--lune); }
.perso-item small { color: var(--texte-doux); font-size: 0.8rem; }

.compte { margin-top: auto; border-top: 1px solid var(--bordure); padding-top: 1rem; display: grid; gap: 0.6rem; }
.compte-ligne { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.9rem; color: var(--texte-doux); }
.compte-ligne strong { color: var(--lune); }
.compte-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Discussion */
.discussion { display: flex; flex-direction: column; min-height: 0; position: relative; }
.vide { margin: auto; text-align: center; color: var(--texte-doux); padding: 16px; }
.discussion-entete { display: flex; align-items: center; gap: 0.8rem; padding: 0.8rem 1.2rem; border-bottom: 1px solid var(--bordure); flex-wrap: wrap; }
.entete-texte { display: grid; }
.entete-texte strong { color: var(--lune); font-family: var(--serif); font-size: 1.15rem; }
.mention-ia-petite { font-size: 0.78rem; color: var(--or); }
.entete-actions { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.retour { display: none; background: none; border: none; color: var(--lune); font-size: 1.4rem; cursor: pointer; padding: 0 0.3rem; }

.interrupteur { display: inline-flex; border: 1px solid var(--bordure); border-radius: 999px; padding: 2px; }
.interrupteur button { background: none; border: none; color: var(--texte-doux); padding: 0.35rem 0.8rem; border-radius: 999px; cursor: pointer; font: 0.85rem var(--sans); }
.interrupteur button[aria-pressed="true"] { background: var(--nuit-3); color: var(--lune); }
.pastille { background: none; border: 1px solid var(--bordure); color: var(--texte-doux); border-radius: 999px; padding: 0.4rem 0.8rem; cursor: pointer; font: 0.85rem var(--sans); }
.pastille:hover { color: var(--lune); border-color: var(--lune); }
.pastille[aria-pressed="true"] { background: rgba(255, 209, 199, 0.18); border-color: var(--or); color: var(--or); }
.pastille-cadeau { color: var(--rose); border-color: rgba(248, 169, 184, 0.45); }

.bandeau { margin: 0.8rem 1.2rem 0; border-radius: 14px; padding: 0.8rem 1rem; display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; font-size: 0.92rem; }
.bandeau-aide { background: rgba(248, 169, 184, 0.14); border: 1px solid rgba(248, 169, 184, 0.5); }
.bandeau-aide ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.bandeau-aide a { color: var(--lune); font-weight: 600; }
.bandeau-pause { background: rgba(255, 209, 199, 0.12); border: 1px solid rgba(255, 209, 199, 0.4); color: var(--lune); }
.fermer { background: none; border: none; color: var(--texte-doux); font-size: 1.3rem; cursor: pointer; line-height: 1; }

.fil { flex: 1; overflow-y: auto; padding: 1.2rem; display: flex; flex-direction: column; gap: 0.7rem; }
.msg { max-width: min(640px, 85%); padding: 0.75rem 1rem; border-radius: 18px; white-space: normal; overflow-wrap: anywhere; }
.msg em { color: var(--texte-doux); }
.msg-assistant { background: var(--nuit-3); border: 1px solid var(--bordure); border-bottom-left-radius: 6px; align-self: flex-start; }
.msg-user { background: var(--violet); color: #fff; border-bottom-right-radius: 6px; align-self: flex-end; }
.msg-user em { color: rgba(255, 255, 255, 0.78); }
.msg-aide { border-color: rgba(248, 169, 184, 0.6); }
.msg-evenement { align-self: center; font-size: 0.82rem; color: var(--or); background: rgba(255, 209, 199, 0.1); border-radius: 999px; padding: 0.3rem 0.9rem; text-align: center; }
.msg-erreur { align-self: center; font-size: 0.85rem; color: var(--rose); }
.ecrit { display: inline-flex; gap: 4px; }
.ecrit i { width: 6px; height: 6px; border-radius: 50%; background: var(--texte-doux); animation: rebond 1.2s infinite; }
.ecrit i:nth-child(2) { animation-delay: 0.15s; }
.ecrit i:nth-child(3) { animation-delay: 0.3s; }
@keyframes rebond { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.saisie { display: grid; grid-template-columns: 1fr auto; gap: 0.6rem; padding: 0.8rem 1.2rem calc(0.8rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--bordure); }
.saisie textarea { resize: none; max-height: 160px; padding: 0.75rem 1rem; border-radius: 18px; border: 1px solid var(--bordure); background: var(--nuit-2); color: var(--texte); font: 1rem/1.4 var(--sans); }
.info-saisie { grid-column: 1 / -1; margin: 0; font-size: 0.8rem; color: var(--texte-doux); }

/* Fenêtres */
.fenetre { width: min(520px, calc(100% - 32px)); max-height: calc(100dvh - 48px); overflow-y: auto; background: var(--nuit-2); color: var(--texte); border: 1px solid var(--bordure); border-radius: 22px; padding: 1.5rem; box-shadow: var(--ombre); }
.fenetre::backdrop { background: rgba(13, 16, 38, 0.7); backdrop-filter: blur(3px); }
.fenetre h2 { margin-top: 0; }
.fenetre > .bouton:last-child { margin-top: 1rem; width: 100%; }
.fenetre hr { border: none; border-top: 1px solid var(--bordure); margin: 1.4rem 0; }

.liste-cadeaux, .liste-recharges, .liste-album { display: grid; gap: 0.6rem; margin: 1rem 0; }
.cadeau { display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 1rem; align-items: center; text-align: left; padding: 0.8rem 1rem; border-radius: 14px; border: 1px solid var(--bordure); background: var(--nuit); color: var(--texte); cursor: pointer; font: inherit; }
.cadeau:hover:not(:disabled) { border-color: var(--rose); }
.cadeau:disabled { opacity: 0.5; cursor: not-allowed; }
.cadeau strong { color: var(--lune); }
.cadeau .prix-cadeau { grid-row: span 2; font: 600 1.05rem var(--serif); color: var(--rose); }
.cadeau small { color: var(--texte-doux); }
.liste-recharges { grid-template-columns: repeat(3, 1fr); }
.recharge { padding: 0.9rem 0.5rem; border-radius: 14px; border: 1px solid var(--bordure); background: var(--nuit); color: var(--lune); cursor: pointer; font: 600 1.1rem var(--serif); }
.recharge small { display: block; font: 0.78rem var(--sans); color: var(--texte-doux); margin-top: 0.2rem; }
.recharge:hover { border-color: var(--rose); }
.solde-grand { font: 600 2.2rem var(--serif); color: var(--lune); margin: 0.2rem 0; }
.jauge { height: 8px; border-radius: 999px; background: var(--nuit); overflow: hidden; margin: 0.5rem 0; }
.jauge-remplie { height: 100%; background: var(--or); width: 0; transition: width 0.3s ease; }
.souvenir { border: 1px solid var(--bordure); border-radius: 14px; padding: 0.8rem 1rem; background: var(--nuit); }
.souvenir strong { color: var(--lune); display: block; margin-bottom: 0.3rem; }
.souvenir p { margin: 0; color: var(--texte-doux); font-size: 0.92rem; }

/* Téléphone : une seule colonne, la liste puis la discussion */
@media (max-width: 760px) {
  .coque { grid-template-columns: 1fr; }
  .coque.en-discussion .barre { display: none; }
  .coque:not(.en-discussion) .discussion { display: none; }
  .barre { border-right: none; }
  .retour { display: block; }
  .discussion-entete { padding: 0.7rem 16px; }
  .entete-actions { margin-left: 0; width: 100%; }
  .fil { padding: 1rem 16px; }
  .saisie { padding-inline: 16px; }
  .bandeau { margin-inline: 16px; }
  .msg { max-width: 90%; }
}

.carte-abo { border: 1px solid rgba(248, 169, 184, 0.45); border-radius: 14px; padding: 1rem; background: var(--nuit); display: grid; gap: 0.6rem; }
.carte-abo strong { color: var(--lune); }
.carte-abo .prix-cadeau { font: 600 1.15rem var(--serif); color: var(--rose); }
.message-paiement { margin: 0.8rem 1.2rem 0; }

/* Comptes : Google, lien par e-mail, cases légales */
.bouton-google { width: 100%; background: #fff; color: #1f1f1f; border-color: #dadce0; font-weight: 600; margin-top: 0.4rem; }
.bouton-google:hover { background: var(--voile-lunaire); color: #1f1f1f; }
.separateur { display: flex; align-items: center; gap: 0.8rem; color: var(--texte-doux); font-size: 0.85rem; margin: 1.2rem 0 0.2rem; }
.separateur::before, .separateur::after { content: ""; flex: 1; border-top: 1px solid var(--bordure); }
.message-accueil, .message-google { background: rgba(107, 91, 149, 0.25); border: 1px solid var(--violet-lumineux); border-radius: 12px; padding: 0.7rem 1rem; color: var(--lune) !important; font-size: 0.92rem; }
.deja-compte { margin-top: 1.4rem; border-top: 1px solid var(--bordure); padding-top: 1rem; }
.deja-compte summary { cursor: pointer; color: var(--rose); font-size: 0.92rem; }
label.case-legale { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.85rem; color: var(--texte-doux); margin: 0.8rem 0; }
label.case-legale input { margin-top: 0.25rem; accent-color: var(--rose); }
.mention-ia-fil { margin-bottom: 0.4rem; }