/* Fanilo — feuille unique.

   Les couleurs, la police et les rayons viennent d'acfai.org, relevés dans sa
   feuille le 30 octobre 2026 et convertis d'oklch en hexadécimal : les WebView
   des téléphones d'entrée de gamme ne connaissent pas oklch, et un fond qui ne
   se calcule pas est un fond blanc.

   Le reste des contraintes n'a pas bougé : écran lu dehors en plein soleil,
   données payées au mégaoctet, pas de framework, aucune animation coûteuse.
   Une seule police, hébergée ici (voir polices.css). */

:root {
  --fond: #fdfdfc;
  --fond-carte: #ffffff;
  --encre: #0b110d;
  --encre-douce: #5e6560;
  --accent: #008a3b;          /* brand-green d'ACFAI */
  --accent-fonce: #00682a;
  --accent-clair: #dff3e3;
  --or: #fe9a00;              /* brand-gold, pour les accents chauds */
  --bord: #e4e3de;
  --alerte: #e7000b;
  --sur-accent: #ffffff;      /* ce qu'on écrit SUR le vert */
  --rayon: 12px;              /* --radius: .75rem chez ACFAI */
  --barre-h: 52px;
}

/* En sombre, le vert d'ACFAI s'éclaircit — et du blanc dessus deviendrait
   illisible. Leur feuille met alors du texte sombre sur le vert, pas du
   blanc : --sur-accent suit. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #0a0a0a;
    --fond-carte: #171717;
    --encre: #fafafa;
    --encre-douce: #a1a1a1;
    --accent: #00bc7d;
    --accent-fonce: #008236;
    --accent-clair: #262626;
    --bord: rgba(255, 255, 255, .12);
    --alerte: #ff6467;
    --sur-accent: #0a0a0a;
  }
}
:root[data-theme="dark"] {
  --fond: #0a0a0a; --fond-carte: #171717; --encre: #fafafa; --encre-douce: #a1a1a1;
  --accent: #00bc7d; --accent-fonce: #008236; --accent-clair: #262626;
  --bord: rgba(255, 255, 255, .12); --alerte: #ff6467; --sur-accent: #0a0a0a;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--fond);
  color: var(--encre);
  font: 16px/1.5 'Geist', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior-y: none;
}

body {
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
}

/* ── Barre ─────────────────────────────────────────────────────────────── */
.barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: var(--barre-h);
  padding: 0 16px;
  padding-top: env(safe-area-inset-top);
  background: var(--accent);
  color: var(--sur-accent);
  flex: 0 0 auto;
}
.logo { flex: 0 0 auto; display: block; border-radius: 7px; }
.titre { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.titre strong { font-size: 17px; letter-spacing: .2px; }
.titre span {
  font-size: 12px; opacity: .85;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.icone {
  background: none; border: 0; color: inherit;
  font-size: 20px; line-height: 1; padding: 10px;
  cursor: pointer; border-radius: 10px;
}
.icone:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* ── Fil de conversation ───────────────────────────────────────────────── */
.fil {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-behavior: smooth;
}

.bulle {
  max-width: min(42rem, 85%);
  padding: 10px 14px;
  border-radius: var(--rayon);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  animation: entree .18s ease-out;
}
@keyframes entree { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) {
  .bulle { animation: none; }
  .fil { scroll-behavior: auto; }
}

.bulle.agent {
  align-self: flex-start;
  background: var(--fond-carte);
  border: 1px solid var(--bord);
  border-bottom-left-radius: 4px;
}
.bulle.moi {
  align-self: flex-end;
  background: var(--accent);
  color: var(--sur-accent);
  border-bottom-right-radius: 4px;
}
.bulle.systeme {
  align-self: center;
  max-width: 100%;
  background: transparent;
  border: 1px dashed var(--bord);
  color: var(--encre-douce);
  font-size: 13.5px;
  text-align: center;
}
.bulle.erreur {
  align-self: center; max-width: 100%;
  background: transparent; border: 1px solid var(--alerte);
  color: var(--alerte); font-size: 14px;
}

.frappe { display: inline-flex; gap: 4px; padding: 4px 0; }
.frappe i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--encre-douce); animation: pulse 1.1s infinite;
}
.frappe i:nth-child(2) { animation-delay: .18s; }
.frappe i:nth-child(3) { animation-delay: .36s; }
@keyframes pulse { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

/* Choix rapides — pour éviter de taper sur un clavier de téléphone */
.choix { display: flex; flex-wrap: wrap; gap: 8px; align-self: flex-start; max-width: 100%; }
.choix button {
  background: var(--accent-clair);
  color: var(--encre);
  border: 1px solid var(--bord);
  border-radius: 999px;
  padding: 9px 15px;
  font-size: 15px;
  cursor: pointer;
}
.choix button:active { transform: scale(.97); }

/* ── Saisie ────────────────────────────────────────────────────────────── */
.saisie {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: var(--fond-carte);
  border-top: 1px solid var(--bord);
}
.saisie textarea {
  flex: 1;
  resize: none;
  max-height: 40vh;
  padding: 11px 14px;
  border: 1px solid var(--bord);
  border-radius: 22px;
  background: var(--fond);
  color: var(--encre);
  font: inherit;
}
.saisie textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.saisie button {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border: 0; border-radius: 50%;
  background: var(--accent); color: var(--sur-accent);
  font-size: 20px; cursor: pointer;
}
.saisie button:disabled { opacity: .4; cursor: default; }

/* ── Panneau ───────────────────────────────────────────────────────────── */
.voile {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, .45);
  z-index: 8;
}
/* Deux tiroirs, même boîte : les conversations à gauche, le dossier à droite.
   C'est la disposition que les gens connaissent déjà — l'historique où ils
   vont le chercher, et leurs affaires de l'autre côté. */
.tiroir {
  position: fixed;
  top: 0;
  bottom: 0;
  width: min(22rem, 86vw);
  z-index: 9;
  background: var(--fond);
  overflow-y: auto;
  padding: 0 18px 32px;
  padding-top: env(safe-area-inset-top);
}
.tiroir.gauche { left: 0; border-right: 1px solid var(--bord); }
.tiroir.droite { right: 0; width: min(26rem, 92vw); border-left: 1px solid var(--bord); }

.tiroir-tete {
  position: sticky; top: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0;
  background: var(--fond);
  border-bottom: 1px solid var(--bord);
}
.tiroir.droite section { padding: 18px 0; border-bottom: 1px solid var(--bord); }
.tiroir.droite section:last-child { border-bottom: 0; }
.tiroir h2 {
  font-size: 13px; text-transform: uppercase; letter-spacing: .7px;
  color: var(--encre-douce); margin: 0 0 10px;
}
.vide { color: var(--encre-douce); font-size: 14.5px; margin: 0; }
.aide { color: var(--encre-douce); font-size: 13.5px; }
.pastille {
  display: inline-block; min-width: 20px; padding: 1px 7px;
  background: var(--accent-clair); color: var(--encre);
  border-radius: 999px; font-size: 12px; text-align: center;
  letter-spacing: 0;
}

.entree-carnet {
  background: var(--fond-carte);
  border: 1px solid var(--bord);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  font-size: 14.5px;
}
.entree-carnet .date { color: var(--encre-douce); font-size: 12px; }
.entree-carnet .comp { font-weight: 600; }

.ligne-plan { display: flex; gap: 8px; padding: 4px 0; font-size: 14.5px; }
.ligne-plan b { flex: 0 0 5.5rem; color: var(--encre-douce); font-weight: 600; }

.tiroir.droite button, .tiroir .secondaire, .tiroir .danger {
  display: block; width: 100%;
  margin-top: 8px; padding: 11px;
  border-radius: 10px; font: inherit; cursor: pointer;
}
.secondaire { background: var(--fond-carte); color: var(--encre); border: 1px solid var(--bord); }
.danger { background: transparent; color: var(--alerte); border: 1px solid var(--alerte); }

.champ-reglage { display: block; font-size: 13.5px; color: var(--encre-douce); }
.champ-reglage input {
  display: block; width: 100%; margin-top: 6px; padding: 10px;
  border: 1px solid var(--bord); border-radius: 10px;
  background: var(--fond-carte); color: var(--encre); font: inherit;
}

/* ── Grand écran ───────────────────────────────────────────────────────────
   La feuille est écrite pour un téléphone, et c'est l'ordre des priorités :
   c'est l'appareil de ceux à qui l'application s'adresse. Mais elle s'ouvre
   aussi sur un ordinateur, et une conversation étalée sur 1920 pixels ne se
   lit pas — l'œil perd la ligne.

   On ramène donc tout sur une colonne de 52rem. La barre, elle, reste pleine
   largeur parce que c'est le bandeau du site : seul son CONTENU s'aligne sur
   la colonne, sinon le logo flotte seul dans un coin pendant que la
   conversation est au milieu.

   L'alignement se fait par la marge intérieure plutôt qu'en ajoutant un
   conteneur dans le HTML : 52rem pour la colonne, plus les 16px de marge
   interne du fil, pour que le logo tombe exactement sur le bord des bulles. */
/* ── La liste des conversations ────────────────────────────────────────── */
.nouvelle {
  display: block;
  width: 100%;
  margin: 14px 0 6px;
  padding: 11px;
  background: var(--accent-clair);
  color: var(--encre);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
}
.nouvelle:hover { border-color: var(--accent); }

.liste-dossiers { list-style: none; margin: 8px 0 0; padding: 0; }
.liste-dossiers li { display: flex; align-items: center; gap: 4px; }

.liste-dossiers .ouvrir {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  padding: 10px 10px;
  background: none;
  border: 0;
  border-radius: 10px;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.liste-dossiers .ouvrir:hover { background: var(--accent-clair); }
.liste-dossiers .encours .ouvrir { background: var(--accent-clair); font-weight: 600; }

.liste-dossiers .nom {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14.5px;
}
.liste-dossiers .quand { display: block; font-size: 12px; color: var(--encre-douce); }

/* Les actions n'apparaissent qu'au survol sur grand écran. Sur un écran
   tactile il n'y a pas de survol : elles restent visibles, sinon elles
   seraient inatteignables. */
.liste-dossiers .agir {
  flex: 0 0 auto;
  background: none; border: 0; cursor: pointer;
  color: var(--encre-douce);
  padding: 8px; border-radius: 8px; font-size: 14px; line-height: 1;
}
.liste-dossiers .agir:hover { color: var(--encre); background: var(--accent-clair); }
@media (hover: hover) {
  .liste-dossiers .agir { opacity: 0; }
  .liste-dossiers li:hover .agir, .liste-dossiers .agir:focus-visible { opacity: 1; }
}

.tiroir-note { margin-top: 24px; }

/* ── Le compte ─────────────────────────────────────────────────────────── */
.compte {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--bord);
}
.compte h2 {
  font-size: 13px; text-transform: uppercase; letter-spacing: .7px;
  color: var(--encre-douce); margin: 0 0 10px;
}
/* Le bouton de Google a sa propre largeur : on le centre au lieu de le
   forcer, parce que leurs regles d'usage interdisent de le redessiner. */
.bouton-google { display: flex; justify-content: center; margin: 12px 0; min-height: 44px; }
.compte .fin { font-size: 12.5px; margin-top: 10px; }

@media (min-width: 900px) {
  .fil, .saisie { width: min(52rem, 100%); margin: 0 auto; }
  .fil { padding: 24px 16px; gap: 12px; }

  .barre {
    padding-inline: max(16px, calc((100% - 52rem) / 2 + 16px));
    height: 60px;
  }
  .titre strong { font-size: 18px; }

  /* La saisie gagne une bordure sur les côtés : sans elle, la zone blanche
     s'étend au-delà de la colonne et la page paraît cassée en deux. */
  .saisie {
    border: 1px solid var(--bord);
    border-bottom: 0;
    border-radius: var(--rayon) var(--rayon) 0 0;
  }
}