/* Vicsia mobile — styles (lot 3, d'après la maquette du 11/10/2026). Fond blanc. */
:root {
  --texte: #1f2937;
  --discret: #57606a;
  --pale: #6b7280;
  --bord: #e5e7eb;
  --doux: #f3f4f6;
  --fond-gris: #f7f7f8;
  --orange: #ea580c;
  --orange-texte: #c2410c;
  --orange-doux: #fff7ed;
  --orange-bord: #fed7aa;
  --rouge: #b91c1c;
  --vert: #15803d;
  --bas: env(safe-area-inset-bottom, 0px);
  --haut: env(safe-area-inset-top, 0px);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #fff; color: var(--texte); }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
/* Attente du serveur (chargement.js) : sobre — un trait qui glisse, un texte. */
.reveil { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 24px; text-align: center; }
.reveil p { margin: 0; color: var(--discret); font-size: 15px; max-width: 300px; }
.reveil .barre { width: 120px; height: 2px; background: var(--bord); position: relative; overflow: hidden; }
.reveil .barre::after { content: ""; position: absolute; top: 0; left: -40%; width: 40%; height: 100%;
  background: var(--texte); animation: glisser 1.4s ease-in-out infinite; }
@keyframes glisser { to { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .reveil .barre::after { animation: none; left: 30%; } }
.reveil button { border: 1px solid var(--texte); background: #fff; border-radius: 4px; padding: 10px 22px;
  font-size: 15px; font-weight: 600; }
.masque { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ecran { display: flex; flex-direction: column; height: 100dvh; padding-top: var(--haut); position: relative; }
.ecran.gris { background: var(--fond-gris); }

/* -- en-tête -- */
.entete { display: flex; align-items: center; gap: 6px; padding: 10px 12px 8px; }
.entete.bordure { border-bottom: 1px solid #eef0f2; }
.entete .centre { flex: 1; display: flex; justify-content: center; min-width: 0; }
.entete h1 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; flex: 1; padding-left: 8px; }
.btn-rond { width: 44px; height: 44px; border-radius: 50%; border: none; background: transparent;
  display: flex; align-items: center; justify-content: center; flex: none; }
.btn-rond.gris { background: var(--doux); }
.btn-rond svg { width: 22px; height: 22px; stroke: var(--texte); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pastille { height: 40px; padding: 0 14px; border-radius: 999px; border: none; background: var(--doux);
  font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 6px; max-width: 100%; }
.pastille svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.4; }

/* -- contenu -- */
.contenu { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.vide { min-height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 28px; padding: 0 20px 20px; }
.salut { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.salut img { width: 52px; height: 52px; }
.salut h2 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.salut p { margin: 0; font-size: 16px; color: var(--discret); }
.note-feuille { margin: 8px 4px; font-size: 14px; line-height: 1.45; color: var(--discret); }
.bandeau-installation { display: flex; align-items: center; gap: 10px; margin: 6px 16px 0; padding: 10px 8px 10px 12px;
  border: 1px solid var(--orange-bord); border-radius: 14px; background: var(--orange-doux); }
.bandeau-installation img { width: 32px; height: 32px; flex: none; }
.bandeau-installation .texte { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13px; line-height: 1.35; }
.bandeau-installation .texte span { color: var(--discret); }
.btn-installer { flex: none; height: 34px; padding: 0 14px; border-radius: 17px; border: none; background: var(--texte);
  color: #fff; font-size: 13px; font-weight: 700; }
.bandeau-installation .masquer { flex: none; width: 32px; height: 32px; border: none; background: none; color: var(--pale); font-size: 20px; }

.messages { display: flex; flex-direction: column; gap: 14px; padding: 18px 18px 24px; }
.bulle-user { align-self: flex-end; max-width: 82%; background: var(--texte); color: #fff; padding: 10px 14px;
  border-radius: 18px 18px 6px 18px; font-size: 15px; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; }
.reponse { font-size: 15px; line-height: 1.55; word-wrap: break-word; }
.reponse p { margin: 0 0 8px; }
.reponse p:last-child { margin-bottom: 0; }
.reponse ul, .reponse ol { margin: 0 0 8px; padding-left: 20px; }
.reponse li { margin: 3px 0; }
.reponse h1, .reponse h2, .reponse h3 { font-size: 16px; margin: 12px 0 6px; }
.reponse code { background: var(--doux); padding: 1px 5px; border-radius: 5px; font-size: 13px; }
.reponse pre { background: var(--doux); padding: 12px; border-radius: 12px; overflow-x: auto; }
.reponse pre code { background: none; padding: 0; }
.reponse a { color: var(--orange-texte); }
.reponse table { border-collapse: collapse; display: block; overflow-x: auto; font-size: 13px; }
.reponse th, .reponse td { border: 1px solid var(--bord); padding: 5px 8px; text-align: left; }
.attente { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--discret); }
.attente::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--orange-bord);
  border-top-color: var(--orange); animation: tourne .8s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
.erreur { padding: 12px 14px; border-radius: 14px; background: #fef2f2; color: var(--rouge); font-size: 14px; line-height: 1.45; }

.document { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-top: 1px solid var(--texte); border-bottom: 1px solid var(--bord); }
.document .etiquette { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--pale); }
.document .titre { font-size: 15px; font-weight: 700; }
.document iframe { width: 100%; height: 360px; border: 1px solid var(--bord); border-radius: 4px; background: #fff; }
.document pre { margin: 0; white-space: pre-wrap; font-size: 13px; background: var(--doux); padding: 10px; border-radius: 10px; }
.document button { align-self: flex-start; height: 34px; padding: 0 12px; border-radius: 4px; border: 1px solid var(--texte); background: #fff; font-size: 13px; font-weight: 600; }

/* -- saisie -- */
.puces { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 6px; }
.puce { font-size: 12px; font-weight: 700; color: #9a3412; background: var(--orange-doux); padding: 4px 10px; border-radius: 999px; }
.saisie { display: flex; align-items: flex-end; gap: 8px; padding: 8px 12px calc(10px + var(--bas)); border-top: 1px solid #eef0f2; background: #fff; }
.saisie.avec-onglets { padding-bottom: 10px; }
.saisie textarea { flex: 1; min-width: 0; min-height: 46px; max-height: 140px; resize: none; border: none; border-radius: 23px;
  background: var(--doux); padding: 12px 16px; font-size: 16px; line-height: 1.35; }
.pieces { display: flex; gap: 8px; padding: 8px 12px 0; overflow-x: auto; background: #fff; border-top: 1px solid #eef0f2; }
.piece { position: relative; flex: none; }
.piece img { width: 64px; height: 64px; object-fit: cover; border-radius: 12px; display: block; }
.piece button { position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff;
  background: var(--texte); color: #fff; font-size: 14px; line-height: 1; padding: 0; }
.vignettes { align-self: flex-end; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; max-width: 82%; }
.vignette { width: 120px; height: 120px; object-fit: cover; border-radius: 14px; display: block; }
.btn-envoyer { width: 46px; height: 46px; border-radius: 50%; border: none; background: var(--texte); flex: none;
  display: flex; align-items: center; justify-content: center; }
.btn-envoyer:disabled { background: #9ca3af; }
.btn-envoyer svg { width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* -- onglets -- */
.onglets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 8px 8px calc(8px + var(--bas));
  border-top: 1px solid #eef0f2; background: #fff; }
.onglet { display: flex; flex-direction: column; align-items: center; gap: 3px; border: none; background: none;
  font-size: 11px; font-weight: 600; color: var(--discret); padding: 4px 0; }
.onglet[aria-current="page"] { color: var(--orange-texte); font-weight: 700; }
.onglet svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* -- feuilles -- */
.voile { position: fixed; inset: 0; background: rgba(17, 24, 39, .35); display: flex; flex-direction: column; z-index: 10; }
.voile .fermer { flex: 1; border: none; background: transparent; }
.feuille { background: #fff; border-radius: 24px 24px 0 0; padding: 10px 16px calc(24px + var(--bas)); display: flex; flex-direction: column; gap: 6px; }
.feuille .poignee { align-self: center; width: 40px; height: 5px; border-radius: 3px; background: var(--bord); }
.feuille h2 { margin: 12px 8px 6px; font-size: 18px; font-weight: 800; }
.choix { display: flex; align-items: center; gap: 12px; padding: 14px 8px; border: none; border-radius: 14px; background: #fff; text-align: left; width: 100%; }
.choix .libelle { flex: 1; display: flex; flex-direction: column; gap: 2px; color: var(--texte); }
.choix strong { font-size: 16px; }
.choix .libelle > span { font-size: 13px; color: var(--discret); }
.choix .coche { color: var(--orange-texte); font-weight: 800; }
.choix:disabled { opacity: .55; }
.sous-titre { margin: 8px 8px 4px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--pale); }
.segmente { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 12px; background: var(--doux); margin: 0 8px; }
.segmente button { height: 38px; border-radius: 9px; border: none; background: transparent; font-size: 13px; font-weight: 600; color: var(--discret); }
.segmente button[aria-checked="true"] { background: #fff; color: var(--texte); font-weight: 700; box-shadow: 0 1px 3px rgba(17, 24, 39, .12); }
.btn-plein { height: 50px; border-radius: 14px; border: none; background: var(--texte); color: #fff; font-size: 15px; font-weight: 700; margin-top: 10px; }

/* -- listes (historique, connexions, réglages) -- */
.page { padding: 4px 16px 24px; display: flex; flex-direction: column; gap: 20px; }
.page > .note { margin: 0 8px; font-size: 14px; line-height: 1.45; color: var(--discret); }
.groupe { display: flex; flex-direction: column; gap: 8px; }
.carte { display: flex; flex-direction: column; border-radius: 18px; background: #fff; overflow: hidden; }
.ecran:not(.gris) .carte { border: 1px solid var(--bord); }
.ligne { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: none; background: #fff; text-align: left;
  width: 100%; border-bottom: 1px solid #f0f1f3; }
.ligne:last-child { border-bottom: none; }
.ligne .libelle { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; color: var(--texte); }
.ligne strong { font-size: 15px; font-weight: 600; }
.ligne .libelle > span { font-size: 13px; color: var(--discret); }
.ligne .apercu, .ligne strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ligne .valeur { font-size: 14px; color: var(--discret); }
.ligne.danger strong { color: var(--rouge); }
.etat { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.etat.bientot { color: #9a3412; background: var(--orange-doux); }
.etat.poste { color: #374151; background: var(--doux); }
.vide-liste { padding: 40px 16px; text-align: center; color: var(--pale); font-size: 15px; }

/* -- connexion -- */
.connexion { display: flex; flex-direction: column; gap: 22px; padding: calc(56px + var(--haut)) 24px calc(32px + var(--bas)); min-height: 100dvh; }
.marque { display: flex; align-items: center; gap: 10px; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.marque img { width: 44px; height: 44px; }
.connexion h1 { margin: 24px 0 0; font-size: 32px; line-height: 1.1; font-weight: 800; letter-spacing: -0.03em; }
.connexion p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--discret); }
.btn-google { height: 52px; border-radius: 14px; border: 1px solid var(--bord); background: #fff; color: var(--texte); font-size: 15px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 12px; }
.btn-google svg { width: 20px; height: 20px; }
.separateur { display: flex; align-items: center; gap: 12px; color: var(--pale); font-size: 13px; }
.separateur::before, .separateur::after { content: ""; flex: 1; height: 1px; background: var(--bord); }
.champ { display: flex; flex-direction: column; gap: 8px; }
.champ label { font-size: 13px; font-weight: 600; color: var(--discret); }
.champ input { height: 52px; border-radius: 14px; border: 1px solid var(--bord); background: var(--fond-gris); padding: 0 16px; font-size: 16px; }
.connexion .note { margin-top: auto; display: flex; gap: 10px; padding: 14px 16px; border-radius: 14px; background: var(--orange-doux);
  font-size: 13px; line-height: 1.45; color: #7c2d12; }

/* -- documents (S2) -- */
.recherche { height: 44px; border: 1px solid var(--bord); border-radius: 12px; padding: 0 14px; font-size: 15px; background: #fff; }
.filtres { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.filtre { flex: none; height: 34px; padding: 0 14px; border-radius: 17px; border: 1px solid var(--bord); background: #fff; font-size: 13px; font-weight: 700; color: var(--discret); }
.filtre[aria-pressed="true"] { background: var(--texte); border-color: var(--texte); color: #fff; }
.titre-doc { font-weight: 800; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 6px; }
.meta-doc { margin: 12px 18px 6px; font-size: 13px; color: var(--pale); }
.cadre-plein iframe { width: 100%; height: calc(100vh - 210px); border: none; display: block; }
.document-md { padding: 4px 18px 24px; }
.barre-doc { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #eef0f2; background: #fff; padding: 6px 4px calc(6px + var(--bas)); }
.barre-doc button { display: flex; flex-direction: column; align-items: center; gap: 3px; border: none; background: none; font-size: 12px; font-weight: 700; color: var(--texte); padding: 6px 0; }
.barre-doc svg { width: 22px; height: 22px; stroke: var(--texte); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.actions-carte { display: flex; gap: 8px; flex-wrap: wrap; }
.toast { position: fixed; left: 16px; right: 16px; bottom: calc(84px + var(--bas)); display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--texte); color: #fff; padding: 12px 14px; border-radius: 12px; font-size: 14px; z-index: 30; }
.toast button { border: none; background: none; color: #fdba74; font-weight: 800; font-size: 14px; }
.choix.danger strong { color: var(--rouge); }
#impression { display: none; }
@media print {
  body > *:not(#impression) { display: none !important; }
  #impression { display: block; font-family: -apple-system, system-ui, sans-serif; color: #000; }
}
.btn-plein.danger { background: var(--rouge); }
.btn-plein.secondaire { background: var(--doux); color: var(--texte); }

/* -- dictée -- */
.dictee { display: flex; align-items: center; gap: 8px; padding: 8px 16px 0; font-size: 14px; color: var(--discret); background: #fff; }
.dictee .point { width: 10px; height: 10px; border-radius: 50%; background: var(--rouge); animation: pulsation 1s infinite; }
.dictee #chrono-dictee { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--texte); }
.dictee button { margin-left: auto; border: none; background: none; color: var(--rouge); font-weight: 700; font-size: 14px; }
.btn-envoyer.arreter { background: var(--rouge); }
.btn-envoyer.arreter svg { fill: #fff; }
@keyframes pulsation { 50% { opacity: .3; } }
.rejouer { margin: 0 18px 8px; height: 34px; padding: 0 14px; border-radius: 17px; border: 1px solid var(--bord); background: #fff; font-size: 13px; font-weight: 700; }

/* -- mini-apps -- */
.formulaire-miniapp { padding: 16px; gap: 14px; }
.formulaire-miniapp select, .formulaire-miniapp textarea { border-radius: 14px; border: 1px solid var(--bord); background: var(--fond-gris); padding: 12px 14px; font-size: 16px; }
.formulaire-miniapp select { height: 52px; }
.formulaire-miniapp fieldset { border: none; margin: 0; padding: 0; }
.formulaire-miniapp legend { font-size: 13px; font-weight: 600; color: var(--discret); margin-bottom: 6px; }
.champ .aide { font-size: 12px; color: var(--pale); }
.case { display: flex; align-items: center; gap: 10px; font-size: 15px; padding: 6px 0; }
.case input { width: 20px; height: 20px; }
.resultat-miniapp { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
/* Style « rapport » : filets fins, une seule couleur d'accent, pas de cartes arrondies. */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--texte); border-bottom: 1px solid var(--bord); }
.stat { padding: 10px 12px 10px 0; display: flex; flex-direction: column; gap: 2px; min-width: 0; border-bottom: 1px solid var(--bord); }
.stat:nth-child(even) { padding-left: 12px; border-left: 1px solid var(--bord); }
.stats .stat:nth-last-child(-n+2) { border-bottom: none; }
.stat .lib { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--pale); }
.stat strong { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat .delta { font-size: 12px; color: var(--pale); }
.stat.etat-error strong { color: var(--rouge); } .stat.etat-warn strong { color: #92400e; }
.pastille-etat { padding: 2px 0 2px 10px; border-left: 2px solid var(--pale); display: flex; flex-direction: column; gap: 1px; font-size: 14px; }
.pastille-etat.etat-warn { border-left-color: #b45309; } .pastille-etat.etat-error { border-left-color: var(--rouge); }
.pastille-etat span { font-size: 13px; color: var(--discret); }
.bloc { padding: 0; }
.bloc h3 { margin: 0 0 6px; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--pale); font-weight: 600; }
.defile { overflow-x: auto; }
.bloc table { border-collapse: collapse; font-size: 13px; min-width: 100%; }
.bloc thead th { border-top: 1px solid var(--texte); border-bottom: 1px solid var(--texte); }
.bloc th, .bloc td { text-align: left; padding: 6px 10px 6px 0; border-bottom: 1px solid var(--bord); white-space: nowrap; }
.bloc th { color: var(--texte); font-weight: 600; font-size: 12px; }
.bloc td.vide { color: var(--pale); white-space: normal; }
.bloc.reponse { font-size: 15px; }
.barre-ligne { display: grid; grid-template-columns: 90px 1fr auto; gap: 8px; align-items: center; font-size: 13px; padding: 3px 0; }
.barre { height: 6px; background: var(--doux); overflow: hidden; }
.barre > span { display: block; height: 100%; background: var(--texte); }
.barre-ligne .val { color: var(--discret); font-variant-numeric: tabular-nums; }
.carte-miniapp { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 8px; }
.carte-miniapp > .etiquette { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--pale); }
.carte-miniapp .resultat-miniapp { margin-top: 0; }
.feuille .formulaire-miniapp { padding: 0; }
/* -- mails d'une mini-app (réponses proposées) : même style « rapport » -- */
.mails { display: flex; flex-direction: column; }
.mail { padding: 14px 0; border-top: 1px solid var(--bord); display: flex; flex-direction: column; gap: 4px; }
.mail:first-of-type { border-top: 1px solid var(--texte); }
.mail p { margin: 0; }
.mail-meta, .mail-petit { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--pale); }
.mail-petit { display: block; margin-top: 8px; }
.mail-objet { font-weight: 700; font-size: 15px; }
.mail-de { color: var(--discret); font-size: 14px; }
.mail-importance { font-size: 13px; color: var(--discret); }
.mail-importance span { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; font-weight: 700; }
.imp-haute { color: #9f1239; } .imp-moyenne { color: #92400e; } .imp-basse { color: var(--pale); }
.mail ul { margin: 2px 0 0; padding-left: 18px; font-size: 14px; }
.mail-question { font-style: italic; font-size: 14px; }
.mail-note { font-size: 12px; color: var(--pale); }
.mail-choix { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.mail-choix button { height: 30px; padding: 0 10px; border: 1px solid var(--bord); border-radius: 4px; background: #fff; font-size: 13px; color: var(--discret); }
.mail-choix button[aria-checked="true"] { border-color: var(--texte); color: var(--texte); font-weight: 600; }
.mail-texte { width: 100%; box-sizing: border-box; border: 1px solid var(--bord); border-radius: 4px; padding: 10px; font: inherit; font-size: 14px; line-height: 1.5; resize: vertical; background: #fff; }
.mail-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.mail-actions button { height: 34px; padding: 0 12px; border: 1px solid var(--texte); border-radius: 4px; background: #fff; font-size: 13px; font-weight: 600; color: var(--texte); }
.mail-actions button.principal { background: var(--texte); color: #fff; }
.mail-actions button:disabled { opacity: .4; }
.mail-envoye { white-space: pre-wrap; font-size: 14px; padding: 2px 0 2px 12px; border-left: 2px solid var(--bord); color: var(--discret); }
.mail-fait { font-size: 13px; color: var(--vert); }
.mail-fait button { border: none; background: none; text-decoration: underline; color: var(--discret); font-size: 13px; }