/* Tout lien qui ouvre une autre page est souligné. */
a { text-decoration: underline; }
:root {
  --vert: #0b6e4f;
  --vert-clair: #e5f3ed;
  --jaune: #f4c542;
  --texte: #1c2321;
  --discret: #5e6b66;
  --fond: #f6f7f5;
  --carte: #fff;
  --bord: #dde3e0;
}
* { box-sizing: border-box; }
body {
  margin: 0; font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--texte); background: var(--fond);
  padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px));
}
.barre {
  position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px; background: var(--vert); color: #fff;
}
.marque { display: flex; flex-direction: column; }
.marque strong { font-size: 1.15rem; }
.marque span { font-size: .8rem; opacity: .85; }
.langues { display: flex; border: 1px solid #ffffff80; border-radius: 999px; overflow: hidden; }
.langues button { background: none; border: 0; color: #fff; padding: 6px 14px; font-weight: 600; }
.langues .actif { background: #fff; color: var(--vert); }
.bandeau { background: var(--jaune); padding: 8px 16px; font-size: .85rem; font-weight: 600; }
main { max-width: 640px; margin: 0 auto; padding: 12px 16px; }

.chat { display: flex; flex-direction: column; gap: 8px; }
.bulle { max-width: 85%; padding: 10px 14px; border-radius: 18px; white-space: pre-wrap; }
.bulle.bot { align-self: flex-start; background: var(--carte); border: 1px solid var(--bord); border-bottom-left-radius: 4px; }
.bulle.moi { align-self: flex-end; background: var(--vert); color: #fff; border-bottom-right-radius: 4px; }
.bulle.attente { color: var(--discret); font-style: italic; }
.lien-web { color: inherit; text-decoration: underline; word-break: break-all; }
.sources { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--bord); font-size: .8rem; color: var(--discret); }
.sources b { color: var(--vert); }

.carte, .calendrier {
  margin-top: 16px; padding: 16px; background: var(--carte); border: 1px solid var(--bord); border-radius: 16px;
}
.surtitre { margin: 0; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--discret); }
.carte h2 { margin: 4px 0 0; color: var(--vert); font-size: 1.5rem; }
.discret { margin: 2px 0 12px; color: var(--discret); }
.total { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap;
  background: var(--vert-clair); border-radius: 12px; padding: 12px; }
.total strong { font-size: 1.4rem; color: var(--vert); }
.detail, .afaire { list-style: none; margin: 12px 0 0; padding: 0; font-size: .9rem; }
.detail li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--bord); }
.detail small { display: block; color: var(--discret); }
.afaire li { padding: 8px 10px; margin-top: 6px; border-left: 4px solid var(--jaune); background: #fdf6dd; border-radius: 6px; }

.calendrier ol { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.calendrier li { display: flex; gap: 12px; align-items: center; }
.declarer-en-ligne { display: block; margin-top: 12px; padding: 10px 16px; border-radius: 999px; background: var(--vert);
  color: #fff; font-weight: 700; text-align: center; text-decoration: underline; }
.declarer-en-ligne[hidden] { display: none; }
.jour { flex: 0 0 56px; text-align: center; border-radius: 10px; overflow: hidden; border: 1px solid var(--bord); }
.jour .mois { background: var(--vert); color: #fff; font-size: .7rem; text-transform: uppercase; padding: 2px 0; }
.jour .num { font-size: 1.35rem; font-weight: 700; padding: 2px 0; }
.calendrier .quoi { flex: 1; min-width: 0; }
.calendrier .quoi small { display: block; color: var(--discret); }

.saisie {
  position: fixed; left: 0; right: 0; bottom: 0; background: var(--carte); border-top: 1px solid var(--bord);
  padding: 8px 16px calc(10px + env(safe-area-inset-bottom, 0px));
}
#form { display: flex; gap: 8px; max-width: 640px; margin: 0 auto; align-items: center; }
#form input { flex: 1; min-width: 0; font-size: 1rem; padding: 12px 14px; border: 1px solid var(--bord); border-radius: 999px; }
.micro, .envoyer { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; border: 0; display: grid; place-items: center; }
.micro { background: var(--vert); }
.micro svg { width: 26px; height: 26px; fill: #fff; }
.micro.enregistre { background: #c62828; animation: pulse 1s infinite; }
.envoyer { background: var(--vert-clair); color: var(--vert); font-size: 1.2rem; width: 44px; height: 44px; }
@keyframes pulse { 50% { box-shadow: 0 0 0 10px #c6282833; } }

/* --- Navigation basse (application) --- */
.avec-nav { padding-bottom: calc(210px + env(safe-area-inset-bottom, 0px)); }
.avec-nav .saisie { bottom: calc(58px + env(safe-area-inset-bottom, 0px)); padding-bottom: 10px; }
.nav-bas {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; background: var(--carte);
  border-top: 1px solid var(--bord); padding-bottom: env(safe-area-inset-bottom, 0px);
}
.nav-bas a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0;
  text-decoration: none; color: var(--discret); font-size: 1.2rem; min-height: 58px; }
.nav-bas a span { font-size: .75rem; }
.nav-bas a.actif { color: var(--vert); font-weight: 600; }
body.avec-nav:has(#compte), body.avec-nav:has(#accueil) { padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }

/* --- Formulaires / profil --- */
.onglets { display: flex; background: var(--carte); border: 1px solid var(--bord); border-radius: 999px; padding: 4px; margin-top: 8px; }
.onglets button { flex: 1; border: 0; background: none; padding: 10px; border-radius: 999px; font-weight: 600; color: var(--discret); }
.onglets .actif { background: var(--vert); color: #fff; }
.formulaire { display: flex; flex-direction: column; gap: 12px; }
.formulaire label { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; font-weight: 600; }
.formulaire input:not([type=checkbox]), .formulaire select {
  font: inherit; font-weight: 400; padding: 12px; border: 1px solid var(--bord); border-radius: 10px; background: #fff; width: 100%;
}
.cases { display: flex; flex-direction: column; gap: 8px; }
.formulaire .case, .formulaire .bascule { flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 400;
  padding: 10px; border: 1px solid var(--bord); border-radius: 10px; }
.case input, .bascule input { width: 22px; height: 22px; flex: 0 0 auto; accent-color: var(--vert); }
.principal { background: var(--vert); color: #fff; border: 0; border-radius: 12px; padding: 14px; font: inherit; font-weight: 700; }
.secondaire { margin-top: 12px; background: var(--vert-clair); color: var(--vert); border: 0; border-radius: 12px; padding: 12px; font: inherit; font-weight: 600; width: 100%; }
.lien { display: block; margin: 20px auto; background: none; border: 0; color: #c62828; font: inherit; text-decoration: underline; }
.espace { margin-top: 12px; }
.petit { font-size: .8rem; margin: 0; }
.erreur { color: #c62828; font-weight: 600; margin: 0; }
.succes { color: var(--vert); font-weight: 600; margin: 0; }
.liste { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; font-size: .9rem; }
.liste li { padding: 8px 10px; background: var(--fond); border-radius: 8px; }
.installer { margin-top: 8px;
  display: flex; align-items: center; gap: 10px; background: var(--texte); color: #fff; border-radius: 12px; padding: 10px 12px; }
.installer span { flex: 1; font-size: .9rem; }
.installer button { border: 0; border-radius: 8px; padding: 8px 12px; font-weight: 700; }
.installer .oui { background: var(--jaune); }
.installer .non { background: none; color: #fff; }

.aller-assistant { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px;
  background: var(--vert); color: #fff; text-decoration: underline; border-radius: 14px; padding: 16px; font-weight: 700; font-size: 1.05rem; }

.barre-droite { display: flex; align-items: center; gap: 8px; }
.bouton-sortie {
  background: none; border: 1px solid #ffffff80; border-radius: 999px; color: #fff;
  padding: 6px 12px; font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
}
.bouton-sortie[hidden] { display: none; }

/* --- Mes échéances --- */
.onglets.petits { margin: 8px 0 4px; }
.onglets.petits button { padding: 7px; font-size: .9rem; }
.echeances .echeance { display: flex; flex-direction: column; gap: 2px; }
.ech-haut { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.statut { font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.statut.payee { background: var(--vert); color: #fff; }
.statut.non-confirmee { background: #fde2e1; color: #c62828; }
.statut.a-venir { background: var(--vert-clair); color: var(--vert); }
.marquer { align-self: flex-start; margin-top: 4px; border: 1px solid var(--vert); background: #fff; color: var(--vert);
  border-radius: 8px; padding: 5px 10px; font: inherit; font-size: .82rem; font-weight: 600; }

/* 4 langues : boutons plus serrés pour tenir sur un téléphone */
.langues button { padding: 6px 9px; font-size: .85rem; }
@media (max-width: 400px) { .marque span { display: none; } .bouton-sortie { padding: 6px 9px; } }

/* Boutons dans une bulle de l'assistant (proposition d'impôts) */
.actions-bulle { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; white-space: normal; }
.actions-bulle button, .actions-bulle a { border-radius: 999px; padding: 8px 16px; font: inherit; font-weight: 700;
  text-decoration: underline; cursor: pointer; }
.actions-bulle button { text-decoration: none; }
.actions-bulle .oui { background: var(--vert); color: #fff; border: 0; }
.actions-bulle .non { background: #fff; color: var(--vert); border: 1px solid var(--vert); }

/* Alertes d'échéances (profil) */
.alertes .liste { gap: 6px; }
.alerte { display: flex; flex-direction: column; gap: 3px; border-left: 5px solid; }
.alerte.retard { border-color: #c62828; background: #fdecea; }
.alerte.aujourdhui { border-color: #e65100; background: #fff1e0; }
.alerte.bientot { border-color: var(--jaune); background: #fff8e1; }
.alerte.retard .ech-haut b { color: #c62828; }
.alerte.aujourdhui .ech-haut b { color: #e65100; }
.alerte-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.alerte-actions .marquer { margin-top: 0; }
/* Pastille d'alertes sur « Mon profil » */
.avec-pastille { position: relative; }
.pastille { position: absolute; top: 4px; left: calc(50% + 8px); min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: #c62828; color: #fff; font-size: .7rem; line-height: 18px; text-align: center; }
.pastille[hidden] { display: none; }
.bulle.rappel { border-color: var(--jaune); background: #fff8e1; }

.lien-serveur { display: block; margin: 8px auto 20px; background: none; border: 1px dashed var(--bord); border-radius: 999px;
  color: var(--discret); font: inherit; font-size: .85rem; padding: 6px 14px; }
.lien-serveur[hidden] { display: none; }

/* Bandeau hors connexion / envoi des actions en attente */
.bandeau-reseau { position: sticky; top: 0; z-index: 5; padding: 8px 16px; font-size: .9rem; text-align: center; }
.bandeau-reseau.hors { background: #fff3cd; color: #6b4e00; border-bottom: 1px solid #f0d78c; }
.bandeau-reseau.envoi { background: var(--vert-clair); color: var(--vert); }