/* Alter ego : thème sombre partout, sans exception (règle de Max). Aucune variante claire,
   même si le téléphone est réglé en clair. iPhone d'abord, ordinateur ensuite.
   Toutes les couleurs vivent ici, dans :root. Fiche docs/alter-ego/35-web-app-v1.md § Design. */
:root {
  color-scheme: dark;
  /* Fonds : bleu nuit, jamais de noir plat */
  --fond: #0a0e1a;
  --fond-2: #0e1528;
  /* Verre */
  --verre: rgb(255 255 255 / 4.5%);
  --verre-fort: rgb(255 255 255 / 7.5%);
  --verre-actif: rgb(255 255 255 / 11%);
  --bord: rgb(170 190 240 / 12%);
  --bord-fort: rgb(170 190 240 / 22%);
  --flou: blur(20px) saturate(150%);
  /* Texte */
  --texte: #eef2fb;
  --discret: #9aa6c0;
  --pale: #6d7a96;
  --sur-accent: #06101f;
  /* Couleurs des modes */
  --bleu: #5aa9ff;
  --rouge: #ff6b5e;
  --vert: #34d399;
  --ambre: #f5b83d;
  --violet: #a78bfa;
  --cyan: #5ee0d6;
  --danger: #ff8f87;
  --accent: var(--bleu);
  /* Alias gardés pour les blocs qui les utilisent (lexique) */
  --surface: var(--verre);
  --surface-2: var(--verre-fort);
  /* Formes et mouvements */
  --rayon: 22px;
  --rayon-petit: 14px;
  --ombre: 0 18px 40px -18px rgb(0 0 0 / 70%);
  --doux: cubic-bezier(.2, .7, .3, 1);
  --police: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, sans-serif;
  --police-titre: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", Roboto, sans-serif;
  --barre: 74px; /* hauteur de la barre du bas, sans la zone sûre */
}

/* Couleur du mode affiché : halo de fond, boutons principaux, onglet actif */
html[data-ecran="dicter"] { --accent: var(--rouge); }
html[data-ecran="action"] { --accent: var(--ambre); }
html[data-ecran="fichiers"] { --accent: var(--cyan); }
html[data-ecran="lexique"] { --accent: var(--violet); }
#vue-action[data-mode="envoyer"] { --accent: var(--vert); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--fond); }
body {
  position: relative;
  z-index: 0;
  margin: 0;
  min-height: 100dvh;
  background: var(--fond);
  color: var(--texte);
  font: 17px/1.45 var(--police);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
/* Halos de fond (repris de test.anacod.fr), qui dérivent très lentement */
body::before {
  content: "";
  position: fixed;
  inset: -15%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(55% 40% at 88% 4%, rgb(47 123 255 / 17%), transparent 70%),
    radial-gradient(50% 38% at 4% 100%, rgb(31 169 113 / 10%), transparent 70%),
    radial-gradient(45% 35% at 50% 42%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 72%),
    linear-gradient(180deg, var(--fond-2), var(--fond) 60%);
  animation: derive 36s ease-in-out infinite alternate;
}
@keyframes derive {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-3%, 2%, 0) scale(1.06); }
}
[hidden] { display: none !important; }
h1, h2, h3, p, dl, dd, ul, ol { margin: 0; padding: 0; }
h1, h2, h3 { font-family: var(--police-titre); font-weight: 600; letter-spacing: -.01em; }
h2 { font-size: 22px; margin: 24px 0 12px; }
.vue > h2:first-child { margin-top: 6px; }
h3 { font-size: 17px; }
svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.visuel-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Orbe ---------------------------------------------------------------------------------
   Sphère, lueur et rotation : .orb de test.anacod.fr (anacod-app/app/globals.css).
   Anneaux pilotés par le micro : mode écoute d'anaCORP (app/mode-ecoute.tsx, lib/ecoute.ts),
   portés dans js/orbe.js. L'état vient de html[data-orbe] : repos, ecoute, reflexion, parole. */
.orbe {
  --taille: 200px;
  --c1: #9bdcff; --c2: #2f7bff; --c3: #16235e; --c4: #0c1430;
  --lueur: 47 123 255;
  --pouls: 4.5s;
  --tour: 9s;
  position: relative;
  display: grid;
  place-items: center;
  width: var(--taille);
  height: var(--taille);
  flex: none;
  pointer-events: none;
}
.orbe.grande { --taille: min(58vw, 230px); }
.orbe.moyenne { --taille: 132px; }
.orbe.mini { --taille: 46px; }
html[data-orbe="ecoute"] .orbe { --c1: #b8ffe6; --c2: #23bd84; --c3: #0f4030; --c4: #072519; --lueur: 35 189 132; --pouls: 1.5s; }
html[data-orbe="reflexion"] .orbe { --c1: #e2d8ff; --c2: #8b6cff; --c3: #2a1a6e; --c4: #120a33; --lueur: 139 108 255; --pouls: 2.2s; --tour: 2.4s; }
html[data-orbe="parole"] .orbe { --c1: #d4f6ff; --c2: #36b5ff; --c3: #0f3a78; --c4: #0a1838; --lueur: 54 181 255; --pouls: .9s; --tour: 5s; }

.orbe-sphere {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, var(--c1) 0%, var(--c2) 42%, var(--c3) 78%, var(--c4) 100%);
  box-shadow:
    0 0 calc(var(--taille) * .3) calc(var(--taille) * -.04) rgb(var(--lueur) / 55%),
    inset 0 0 calc(var(--taille) * .22) rgb(255 255 255 / 14%);
  animation: orbe-pouls var(--pouls) ease-in-out infinite;
  transition: box-shadow .5s var(--doux);
  will-change: transform;
}
.orbe-sphere::after {
  content: "";
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, rgb(127 227 218 / 30%), transparent 55%);
  filter: blur(calc(var(--taille) * .05));
  animation: orbe-tour var(--tour) linear infinite;
}
.orbe-sphere::before {
  content: "";
  position: absolute;
  inset: 9% 22% 58% 18%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, rgb(255 255 255 / 38%), transparent 70%);
  filter: blur(calc(var(--taille) * .02));
}
.orbe-halo {
  position: absolute;
  inset: -38%;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--lueur) / 30%) 0%, rgb(var(--lueur) / 8%) 45%, transparent 68%);
  opacity: calc(.7 + var(--niveau, 0) * .3);
  transform: scale(calc(1 + var(--niveau, 0) * .22));
  transition: opacity .2s linear;
}
.orbe-anneau {
  position: absolute;
  inset: -3%;
  border-radius: 50%;
  border: 1.5px solid rgb(var(--lueur) / 70%);
  opacity: 0;
  will-change: transform, opacity;
}
.orbe.mini .orbe-anneau { border-width: 1px; }
html[data-orbe="reflexion"] .orbe-anneau { animation: orbe-cherche 2.1s ease-in-out infinite; }
html[data-orbe="parole"] .orbe-anneau { animation: orbe-onde 1.8s ease-out infinite; }
html[data-orbe] .orbe-anneau:nth-of-type(3) { animation-delay: .35s; }
html[data-orbe] .orbe-anneau:nth-of-type(4) { animation-delay: .7s; }
@keyframes orbe-pouls { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes lueur { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
@keyframes lueur-verte {
  0%, 100% { box-shadow: 0 0 0 0 rgb(35 189 132 / 0%); }
  50% { box-shadow: 0 0 0 6px rgb(35 189 132 / 18%); }
}
@keyframes orbe-tour { to { transform: rotate(360deg); } }
@keyframes orbe-cherche { 0%, 100% { transform: scale(1); opacity: .16; } 50% { transform: scale(1.28); opacity: .5; } }
@keyframes orbe-onde { 0% { transform: scale(.92); opacity: .55; } 100% { transform: scale(1.55); opacity: 0; } }
@keyframes orbe-onde-court { 0% { transform: scale(.92); opacity: .55; } 100% { transform: scale(1.28); opacity: 0; } }

/* Petite pastille de marque (en-tête, colonne de gauche) : l'orbe immobile */
.orbe-point {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #9bdcff 0%, #2f7bff 45%, #16235e 85%);
  box-shadow: 0 0 14px rgb(47 123 255 / 55%);
  flex: none;
}

/* ---- En-tête ------------------------------------------------------------------------------ */
.entete {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: calc(env(safe-area-inset-top) + 8px) 16px 4px;
  max-width: 960px;
  margin: 0 auto;
}
.entete h1 {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1;
  font-size: 17px;
  font-weight: 600;
}
.entete h1 .orbe-point { width: 16px; height: 16px; }
html[data-ecran="connexion"] .entete h1 { visibility: hidden; }
.retour {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 44px;
  padding: 0 10px 0 2px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--texte);
  font: inherit;
  font-size: 16px;
  cursor: pointer;
}
.retour svg { width: 22px; height: 22px; color: var(--accent); }
.entete h1 { justify-content: center; }
/* La barre du bas mène déjà à l'accueil : le retour ne sert qu'au Lexique, absent de la barre. */
html:not([data-ecran="lexique"]) .retour { display: none; }
html[data-ecran="lexique"] .entete h1 { margin-right: 84px; }
.pastilles { display: flex; gap: 6px; position: absolute; right: 16px; bottom: 12px; }
.pastille {
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 99px;
  background: rgb(245 184 61 / 12%);
  color: var(--ambre);
  border: 1px solid rgb(245 184 61 / 30%);
  white-space: nowrap;
}

main {
  max-width: 960px;
  margin: 0 auto;
  overflow-x: clip; /* la lueur de l'orbe ne doit pas élargir la page */
  padding: 8px 16px calc(env(safe-area-inset-bottom) + var(--barre) + 28px);
}
.vue { max-width: 640px; margin: 0 auto; animation: entree .38s var(--doux); }
@keyframes entree { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- Verre --------------------------------------------------------------------------------- */
.carte, .tuile, .mesures > div, .bulle.alter-ego, .compositeur, .ligne-lexique:not(.entete-lexique) {
  background: linear-gradient(180deg, rgb(255 255 255 / 6%), rgb(255 255 255 / 2.5%));
  border: 1px solid var(--bord);
  -webkit-backdrop-filter: var(--flou);
  backdrop-filter: var(--flou);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 6%), var(--ombre);
}
.carte {
  border-radius: var(--rayon);
  padding: 18px;
  margin-bottom: 12px;
  display: grid;
  gap: 12px;
}
.note { color: var(--discret); font-size: 15px; margin: 10px 0; }
.carte .note { margin: 0; }
.petit { font-size: 13px; }
.erreur { color: var(--danger); font-weight: 500; }
.cache { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ---- Connexion ----------------------------------------------------------------------------- */
.connexion {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 6px;
  max-width: 400px;
  margin: 6vh auto 0;
}
.connexion .orbe { margin: 28px 0 30px; }
.marque { font-size: 34px; margin: 0; letter-spacing: -.02em; }
.accroche { color: var(--discret); font-size: 17px; margin-bottom: 22px; }
.connexion form { width: 100%; text-align: left; padding: 20px; gap: 10px; }
.connexion form .bouton { margin-top: 4px; }
.connexion > .note { margin-top: 4px; color: var(--pale); }

/* ---- Accueil ------------------------------------------------------------------------------- */
.scene-accueil { display: grid; justify-items: center; text-align: center; }
.assistant { min-height: 64px; display: grid; align-content: center; gap: 6px; padding: 6px 8px 0; }
.assistant .dit {
  font-family: var(--police-titre);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.assistant .entendu { color: var(--vert); font-size: 15px; }
.bouton-parler {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0;
  margin: 4px auto 8px;
  padding: 0 0 6px;
  border: 0;
  border-radius: 40px;
  background: transparent;
  color: var(--texte);
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.bouton-parler .orbe-sphere { transition: transform .2s var(--doux), box-shadow .5s var(--doux); }
.bouton-parler:active .orbe { transform: scale(.96); }
.bouton-parler .orbe { transition: transform .25s var(--doux); }
/* Place gardée autour de la grande orbe (08/11) : les anneaux, bornés par --ampleur (js/orbe.js),
   montent au plus à 1,06 × 1,29 de la taille, soit 0,19 de la taille de chaque côté ; la marge en
   garde 0,2 en haut et 0,2 + 14 px en bas : le libellé ne passe jamais sous un anneau. */
.bouton-parler .orbe.grande { --ampleur: .42; margin: calc(var(--taille) * .2) 0 calc(var(--taille) * .2 + 14px); }
html[data-orbe="parole"] .bouton-parler .orbe.grande .orbe-anneau { animation-name: orbe-onde-court; }
.parler-libelle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  min-height: 46px;
  padding: 0 20px;
  border-radius: 99px;
  background: var(--verre-fort);
  border: 1px solid var(--bord-fort);
  -webkit-backdrop-filter: var(--flou);
  backdrop-filter: var(--flou);
  font-size: 17px;
  font-weight: 500;
  transition: background .3s, border-color .3s, color .3s;
}
.parler-libelle svg { width: 20px; height: 20px; color: var(--bleu); }
.bouton-parler.ecoute .parler-libelle { background: rgb(35 189 132 / 14%); border-color: rgb(35 189 132 / 45%); }
.bouton-parler.ecoute .parler-libelle svg { color: var(--vert); }
.actions-ecoute { display: flex; gap: 10px; width: 100%; max-width: 360px; margin: 8px auto 4px; }
.actions-ecoute .bouton { flex: 1; }
.actions-ecoute .bouton.principal { --accent: var(--vert); }
html[data-ecoute="oui"] .modes-accueil { opacity: .28; filter: saturate(.4); }
.modes-accueil { margin-top: 18px; transition: opacity .4s var(--doux), filter .4s; }

.tuiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.tuile {
  --accent: var(--bleu);
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 4px;
  min-height: 112px;
  padding: 16px;
  border-radius: var(--rayon);
  color: var(--texte);
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .2s var(--doux), border-color .2s, background .2s;
}
.tuile:active { transform: scale(.98); background: var(--verre-actif); }
.tuile[data-mode="action"] { --accent: var(--ambre); }
.tuile[data-mode="envoyer"] { --accent: var(--vert); }
.tuile-icone {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 6px;
  border-radius: 13px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}
.tuile-icone svg { width: 22px; height: 22px; }
.tuile > svg { width: 28px; height: 28px; color: var(--accent); }
.tuile strong { font-size: 18px; font-weight: 600; }
.tuile small { color: var(--discret); font-size: 14px; line-height: 1.3; }
.tuile.petite {
  --accent: var(--violet);
  width: 100%;
  min-height: 58px;
  grid-auto-flow: column;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  border-radius: 18px;
}
.tuile.petite svg { width: 22px; height: 22px; color: var(--accent); }
.tuile.petite strong { font-size: 16px; font-weight: 500; }
.tuile.petite .chevron { width: 18px; height: 18px; color: var(--pale); }
.tuiles.deux .tuile { min-height: 110px; --accent: var(--cyan); }

/* ---- Dicter (repris du labo) --------------------------------------------------------------- */
.scene { display: grid; justify-items: center; gap: 4px; padding: 6px 0 18px; }
.duree { font-family: var(--police-titre); font-size: 54px; font-weight: 200; font-variant-numeric: tabular-nums; letter-spacing: -1px; line-height: 1.1; }
.etat-texte { color: var(--discret); font-size: 15px; min-height: 22px; text-align: center; margin-bottom: 18px; }
.bouton-principal {
  position: relative;
  width: min(56vw, 210px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 0;
  background: radial-gradient(circle at 36% 30%, #ffd2ca 0%, #ff6b5e 42%, #7a221c 80%, #2c0d0b 100%);
  color: #fff;
  font: inherit;
  font-size: 21px;
  font-weight: 600;
  text-shadow: 0 1px 8px rgb(0 0 0 / 35%);
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: 0 0 60px -8px rgb(255 107 94 / 55%), inset 0 0 46px rgb(255 255 255 / 14%);
  transition: transform .2s var(--doux), box-shadow .4s, filter .4s;
}
.bouton-principal .anneau {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1.5px solid var(--rouge);
  opacity: 0;
}
.bouton-principal.en-cours .anneau { opacity: 1; animation: orbe-onde 1.6s ease-out infinite; }
.bouton-principal:active { transform: scale(.97); }
.bouton-principal:disabled { opacity: .55; }
.bouton-principal::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 110px 4px rgb(255 107 94 / 75%);
  opacity: 0;
  pointer-events: none;
}
/* Pendant l'enregistrement, seule une lueur respire (opacité d'un calque à part) : le bouton
   lui-même ne bouge pas, il reste facile à toucher et ne coûte presque rien à dessiner. */
.bouton-principal.en-cours::after { animation: lueur 1.4s ease-in-out infinite; }
.mesures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mesures > div { border-radius: 16px; padding: 12px 14px; min-width: 0; box-shadow: none; }
.mesures dt { color: var(--discret); font-size: 12px; }
.valeur { font-weight: 500; font-size: 15px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.valeur.bon { color: var(--vert); }
.valeur.vigilance { color: var(--ambre); }
.parties { list-style: none; display: grid; gap: 6px; }
.parties li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: space-between; font-size: 15px; }
.etat { font-weight: 500; font-size: 14px; color: var(--discret); }
.etat.envoye { color: var(--vert); }
.etat.attente { color: var(--ambre); }
.etat.refuse, .etat.trop_gros, .etat.perdu { color: var(--danger); }

/* ---- Bandeaux et alertes ------------------------------------------------------------------- */
.bandeau { border-radius: var(--rayon); padding: 18px; margin-bottom: 12px; display: grid; gap: 8px; border: 1px solid; }
.bandeau.alerte { background: rgb(245 184 61 / 9%); border-color: rgb(245 184 61 / 32%); }
.bandeau.info { background: rgb(90 169 255 / 9%); border-color: rgb(90 169 255 / 30%); }
.alerte:not(.bandeau) { background: rgb(245 184 61 / 9%); border: 1px solid rgb(245 184 61 / 32%); border-radius: 14px; padding: 12px 14px; margin: 12px 0; font-size: 15px; }

/* ---- Conversations (Demander, Action, Envoyer) ---------------------------------------------- */
.conversation {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 64px - var(--barre) - 36px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}
.tete-vue { display: flex; align-items: center; gap: 14px; margin: 4px 0 16px; }
.tete-vue .orbe { margin: 0 4px; }
.tete-texte { flex: 1; min-width: 0; }
.tete-vue h2 { margin: 0; font-size: 22px; }
.tete-vue .note { margin: 2px 0 0; font-size: 14px; line-height: 1.35; }
.tete-vue .bouton-rond { color: var(--discret); }
.fil { flex: 1; display: grid; align-content: end; gap: 10px; margin-bottom: 14px; }
.fil:empty::before {
  content: attr(data-vide);
  align-self: center;
  justify-self: center;
  color: var(--pale);
  font-size: 15px;
  text-align: center;
  padding: 24px 0;
}
.bulle {
  max-width: 86%;
  padding: 11px 15px;
  border-radius: 20px;
  display: grid;
  gap: 3px;
  overflow-wrap: anywhere;
  animation: bulle .32s var(--doux);
}
@keyframes bulle { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
.bulle p { font-size: 16px; }
.bulle small { color: var(--discret); font-size: 12px; }
.bulle.moi {
  justify-self: end;
  background: linear-gradient(180deg, #24406b, #1b3256);
  border: 1px solid rgb(120 170 255 / 28%);
  border-bottom-right-radius: 6px;
}
.bulle.alter-ego { position: relative; justify-self: start; margin-left: 34px; border-bottom-left-radius: 6px; box-shadow: none; }
.bulle.alter-ego::before {
  content: "";
  position: absolute;
  left: -34px;
  bottom: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #9bdcff 0%, #2f7bff 45%, #16235e 85%);
  box-shadow: 0 0 12px rgb(47 123 255 / 45%);
}
.bulle.erreur { border-color: rgb(255 143 135 / 35%); background: rgb(255 107 94 / 9%); }
.saisie { display: grid; gap: 8px; }
.pied-conversation { position: sticky; bottom: calc(env(safe-area-inset-bottom) + var(--barre) + 10px); display: grid; gap: 10px; z-index: 2; }
.compositeur {
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: end;
  gap: 6px;
  padding: 6px;
  border-radius: 28px;
  background: rgb(18 26 46 / 78%);
  transition: border-color .2s, box-shadow .2s;
}
.compositeur:focus-within { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.compositeur textarea {
  min-height: 46px;
  max-height: 160px;
  padding: 12px 10px 12px 14px;
  border: 0;
  background: transparent;
  resize: none;
  field-sizing: content;
}
.compositeur textarea:focus-visible { outline: none; }
.compositeur .bouton { min-height: 46px; border-radius: 23px; }
.compositeur .bouton.principal:not(.bouton-rond) { padding: 0 20px; }
.bouton-rond { width: 46px; padding: 0; display: grid; place-items: center; border-radius: 50%; }
.bouton-rond svg { width: 21px; height: 21px; }
.compositeur .bouton.micro { background: transparent; border-color: transparent; }
.options-conversation { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 6px; }
.pied-conversation > .note { margin: 0; padding: 0 8px; color: var(--pale); }
.confirmer {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 14%, transparent), color-mix(in srgb, var(--accent) 5%, transparent));
  box-shadow: 0 0 40px -14px color-mix(in srgb, var(--accent) 70%, transparent), inset 0 1px 0 rgb(255 255 255 / 6%);
  animation: bulle .32s var(--doux);
  margin-bottom: 0;
}
.confirmer p { display: flex; align-items: center; gap: 10px; font-family: var(--police-titre); font-size: 19px; font-weight: 500; }
.confirmer p svg { width: 22px; height: 22px; color: var(--accent); }
.interrupteur { display: flex; gap: 10px; align-items: center; min-height: 44px; font-size: 15px; color: var(--discret); cursor: pointer; }
.interrupteur input {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 44px;
  height: 26px;
  margin: 0;
  border-radius: 99px;
  background: var(--verre-actif);
  border: 1px solid var(--bord-fort);
  cursor: pointer;
  transition: background .25s;
  flex: none;
}
.interrupteur input::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--texte);
  box-shadow: 0 2px 6px rgb(0 0 0 / 40%);
  transition: transform .25s var(--doux);
}
.interrupteur input:checked { background: color-mix(in srgb, var(--accent) 80%, transparent); border-color: transparent; }
.interrupteur input:checked::after { transform: translateX(18px); }

/* ---- Boutons ------------------------------------------------------------------------------- */
.bouton {
  min-height: 52px;
  padding: 10px 18px;
  border-radius: 16px;
  border: 1px solid var(--bord);
  background: var(--verre-fort);
  color: var(--texte);
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .15s var(--doux), background .2s, border-color .2s, filter .2s;
}
.bouton:active { transform: scale(.97); background: var(--verre-actif); }
.bouton:disabled { opacity: .45; }
.bouton.principal {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 82%, white), var(--accent));
  border-color: transparent;
  color: var(--sur-accent);
  font-weight: 600;
  box-shadow: 0 8px 24px -10px color-mix(in srgb, var(--accent) 80%, transparent), inset 0 1px 0 rgb(255 255 255 / 35%);
}
.bouton.principal:active { filter: brightness(.95); }
.bouton.danger { color: var(--danger); }
.bouton.leger { background: transparent; border-color: transparent; color: var(--discret); }
.bouton.large { width: 100%; }
.bouton.micro { color: var(--accent); }
.bouton.micro.ecoute { color: var(--vert); background: rgb(35 189 132 / 16%); border-color: rgb(35 189 132 / 45%); animation: lueur-verte 1.5s ease-in-out infinite; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.actions .bouton { flex: 1 1 140px; }
button:focus-visible, input:focus-visible, textarea:focus-visible, label.tuile:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.bouton-parler:focus-visible { outline: 0; }
.bouton-parler:focus-visible .parler-libelle { outline: 2px solid var(--bleu); outline-offset: 3px; }

/* Champs : 16 px au moins, sinon iOS zoome */
.champ { font-size: 14px; color: var(--discret); }
input[type="text"], input[type="password"], textarea {
  width: 100%;
  min-height: 52px;
  border-radius: 14px;
  border: 1px solid var(--bord);
  background: rgb(4 8 18 / 45%);
  color: var(--texte);
  font: inherit;
  font-size: 16px;
  padding: 12px 14px;
  transition: border-color .2s, box-shadow .2s;
}
input[type="text"]:focus, input[type="password"]:focus { border-color: color-mix(in srgb, var(--accent) 60%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); }
input:focus-visible { outline: none; }
textarea { resize: vertical; }
::placeholder { color: var(--pale); }
.choix { display: flex; gap: 12px; align-items: center; min-height: 46px; font-size: 16px; }
.choix input {
  appearance: none;
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  margin: 0;
  border-radius: 50%;
  border: 1.5px solid var(--bord-fort);
  background: rgb(4 8 18 / 45%);
  flex: none;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}
.choix input:checked { border-color: var(--bleu); box-shadow: inset 0 0 0 5px var(--fond-2), inset 0 0 0 12px var(--bleu); }

/* ---- Fichiers ------------------------------------------------------------------------------ */
.depot-zone {
  display: grid;
  place-items: center;
  min-height: 88px;
  margin: 4px 0 8px;
  border: 1.5px dashed var(--bord-fort);
  border-radius: var(--rayon);
  color: var(--discret);
  font-size: 15px;
  transition: border-color .2s, color .2s, background .2s;
}
.depot-zone.survol { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.fichier { gap: 4px; }
.fichier strong { font-weight: 500; overflow-wrap: anywhere; }
.fichier small { color: var(--discret); }

/* Lexique */
.lexique { display: grid; gap: 8px; margin-bottom: 12px; }
.ligne-lexique {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--bord);
  overflow-wrap: anywhere;
}
.entete-lexique { background: transparent; border: 0; padding: 0 12px; color: var(--discret); font-size: 13px; }
.statut-lexique { color: var(--discret); font-weight: 400; font-size: 13px; }
.prononce { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.prononce input[type="text"] { min-height: 44px; }
.valeur-prononce { flex: 1 1 auto; min-width: 0; }
.actions-prononce { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.bouton.petit-bouton { min-height: 40px; padding: 6px 12px; font-size: 14px; }
.note-prononce { color: var(--discret); font-size: 13px; width: 100%; }
.note-prononce:empty { display: none; }
/* Ajout à la main (08/11) : un champ, la prononciation proposée, « Avancé » replié */
.ajout-lexique { gap: 10px; margin: 6px 0 14px; }
.ajout-lexique .champ { display: block; margin-bottom: -4px; }
.ajout-suite { display: grid; gap: 10px; }
.ligne-champ { display: flex; gap: 8px; align-items: stretch; min-width: 0; }
.ligne-champ input { flex: 1 1 auto; min-width: 0; }
.ligne-champ .bouton { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; color: var(--accent); }
.ligne-champ .bouton svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ligne-champ .bouton span { color: var(--texte); }
.ajout-lexique .note { margin: 0; }
.ajout-lexique .note:empty { display: none; }
.avance { display: grid; gap: 10px; }
.avance > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  width: max-content;
  color: var(--discret);
  font-size: 14px;
  cursor: pointer;
  list-style: none;
}
.avance > summary::-webkit-details-marker { display: none; }
.avance > summary::before { content: "›"; display: inline-block; font-size: 18px; line-height: 1; transition: transform .2s var(--doux); }
.avance[open] > summary::before { transform: rotate(90deg); }
.avance[open] { gap: 10px; }
.avance[open] > summary { color: var(--texte); }
/* Vérifier le lexique (08/11, fiche 35 § 14) : résumé, puis points par gravité (rouge, ambre, clair) */
.verif-lexique { display: grid; gap: 12px; margin: 0 0 14px; }
.verif-lancer { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.verif-lancer svg, .verif-ecouter svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.verif-lancer svg { color: var(--accent); }
.verif-carte { margin: 0; gap: 14px; }
.verif-lexique [data-gravite="0"] { --c: var(--vert); }
.verif-lexique [data-gravite="1"] { --c: var(--rouge); }
.verif-lexique [data-gravite="2"] { --c: var(--ambre); }
.verif-lexique [data-gravite="3"] { --c: var(--discret); }
.verif-pastille {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c, var(--discret));
  box-shadow: 0 0 10px color-mix(in srgb, var(--c, var(--discret)) 65%, transparent);
}
.verif-resume { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px 12px; min-width: 0; }
.verif-resume > .verif-pastille { width: 12px; height: 12px; }
.verif-resume-texte { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.verif-resume strong { font-family: var(--police-titre); font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.verif-resume small { color: var(--discret); font-size: 13px; line-height: 1.35; }
.bouton.verif-ecouter { flex: none; display: inline-flex; align-items: center; gap: 6px; color: var(--accent); }
.verif-ecouter span { color: var(--texte); }
.verif-groupe { display: block; border-top: 1px solid var(--bord); padding-top: 12px; }
.verif-titre { display: flex; align-items: center; gap: 10px; min-height: 32px; margin: 0; font-size: 15px; font-weight: 600; }
.verif-compte {
  padding: 1px 9px;
  border-radius: 999px;
  border: 1px solid var(--bord);
  background: var(--verre-fort);
  color: var(--discret);
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
details.verif-groupe > summary { min-height: 40px; cursor: pointer; list-style: none; }
details.verif-groupe > summary::-webkit-details-marker { display: none; }
details.verif-groupe > summary::after { content: "›"; margin-left: auto; padding: 0 4px; color: var(--discret); font-size: 20px; line-height: 1; transition: transform .2s var(--doux); }
details.verif-groupe[open] > summary::after { transform: rotate(90deg); }
.verif-points { display: grid; gap: 8px; margin-top: 8px; }
.verif-point {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px 12px;
  padding: 12px 12px 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--bord);
  background: var(--verre);
  box-shadow: inset 3px 0 0 var(--c); /* trait de la gravité, sans courbe aux coins */
  overflow-wrap: anywhere;
}
.verif-texte { display: grid; gap: 4px; min-width: 0; }
.verif-texte p { margin: 0; }
.verif-mot strong { font-weight: 600; }
.verif-mot small { margin-left: 6px; color: var(--discret); font-size: 13px; }
.verif-probleme { font-size: 15px; line-height: 1.4; }
.verif-conseil { color: var(--discret); font-size: 14px; line-height: 1.4; }
.verif-conseil span { color: var(--texte); font-weight: 500; }
.verif-erreur { margin: 0; }
@media (max-width: 420px) {
  /* Téléphone : le résumé garde toute la largeur (une ligne), « Écouter » passe dessous */
  .verif-resume { grid-template-columns: auto minmax(0, 1fr); }
  .verif-resume strong { font-size: 17px; }
  .bouton.verif-ecouter { grid-column: 2; justify-self: start; }
  .verif-point { grid-template-columns: minmax(0, 1fr); }
  .verif-point > .bouton { justify-self: start; }
  .ligne-lexique { grid-template-columns: 1fr; gap: 2px; }
  .ligne-lexique > [data-titre]::before { content: attr(data-titre) " : "; color: var(--discret); font-size: 13px; font-weight: 400; }
  .entete-lexique { display: none; }
}

/* ---- Listes et journal --------------------------------------------------------------------- */
.liste-simple { display: grid; gap: 10px; }
.liste-simple > div { display: flex; justify-content: space-between; gap: 16px; }
.liste-simple dt { color: var(--discret); font-size: 15px; }
.liste-simple dd { font-weight: 500; font-size: 15px; text-align: right; overflow-wrap: anywhere; }
.etapes { padding-left: 22px; display: grid; gap: 6px; }
.journal {
  margin: 0;
  max-height: 320px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: 12px/1.45 ui-monospace, Menlo, Consolas, monospace;
  color: var(--discret);
}

/* ---- Message bref -------------------------------------------------------------------------- */
.avis {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(env(safe-area-inset-bottom) + var(--barre) + 14px);
  max-width: 560px;
  margin: 0 auto;
  padding: 13px 16px;
  border-radius: 16px;
  background: rgb(22 32 56 / 88%);
  border: 1px solid var(--bord-fort);
  -webkit-backdrop-filter: var(--flou);
  backdrop-filter: var(--flou);
  box-shadow: var(--ombre);
  color: var(--texte);
  font-size: 15px;
  z-index: 5;
  animation: bulle .3s var(--doux);
}
.avis.vigilance { background: rgb(60 42 12 / 90%); border-color: rgb(245 184 61 / 40%); }

/* ---- Barre du bas, à portée de pouce ------------------------------------------------------- */
.onglets {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  min-height: calc(var(--barre) + env(safe-area-inset-bottom));
  background: rgb(10 15 30 / 72%);
  -webkit-backdrop-filter: var(--flou);
  backdrop-filter: var(--flou);
  border-top: 1px solid var(--bord);
  padding: 6px 6px calc(env(safe-area-inset-bottom) + 6px);
  z-index: 4;
}
.nav-marque { display: none; }
.onglet {
  --accent: var(--bleu);
  position: relative;
  min-height: 58px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 3px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: var(--pale);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
  touch-action: manipulation;
  transition: color .2s;
}
.onglet[data-vers="dicter"] { --accent: var(--rouge); }
.onglet[data-vers="fichiers"] { --accent: var(--cyan); }
.onglet[data-vers="reglages"] { --accent: var(--texte); }
.onglet svg { width: 24px; height: 24px; transition: transform .25s var(--doux); }
.onglet.actif { color: var(--texte); }
.onglet.actif svg { color: var(--accent); transform: translateY(-1px); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 60%, transparent)); }
.onglet.actif::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  width: 22px;
  height: 3px;
  margin-left: -11px;
  border-radius: 0 0 3px 3px;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
}

/* ---- Ordinateur : colonne de gauche, orbe au centre, modes à droite ------------------------ */
@media (min-width: 1024px) {
  :root { --barre: 0px; --cote: 248px; }
  .onglets {
    top: 0;
    right: auto;
    width: var(--cote);
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 26px 14px;
    border-top: 0;
    border-right: 1px solid var(--bord);
    background: rgb(10 15 30 / 55%);
  }
  .nav-marque {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 4px 12px 26px;
    font-family: var(--police-titre);
    font-size: 19px;
    font-weight: 600;
  }
  .nav-marque .orbe-point { width: 22px; height: 22px; }
  .onglet {
    grid-auto-flow: column;
    justify-content: start;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 0 14px;
    font-size: 15px;
    color: var(--discret);
  }
  .onglet:hover { background: var(--verre); color: var(--texte); }
  .onglet svg { width: 21px; height: 21px; }
  .onglet.actif { background: color-mix(in srgb, var(--accent) 13%, transparent); }
  .onglet.actif::before { top: 12px; bottom: 12px; left: 0; width: 3px; height: auto; margin: 0; border-radius: 0 3px 3px 0; }
  .onglet.actif svg { transform: none; }
  .entete, main { margin-left: var(--cote); max-width: none; }
  .entete { min-height: 40px; padding: 18px 40px 0; }
  .entete h1, .retour { display: none; }
  .pastilles { right: 40px; bottom: auto; top: 18px; }
  main { padding: 8px 40px 40px; }
  .vue { max-width: 780px; }
  .avis { left: calc(var(--cote) + 24px); bottom: 24px; }
  .tuile:hover, .bouton:not(.principal):not(:disabled):hover { border-color: var(--bord-fort); background: var(--verre-actif); }
  .bouton.principal:hover { filter: brightness(1.06); }

  /* Connexion : pas de colonne, l'orbe au centre de l'écran */
  html[data-ecran="connexion"] .entete, html[data-ecran="connexion"] main { margin-left: 0; }
  .connexion { margin-top: 8vh; }
  .connexion .orbe { --taille: 168px; margin: 30px 0 36px; }
  .marque { font-size: 40px; }

  /* Accueil : la scène de l'orbe, et les modes en colonne à droite */
  .vue[data-vue="accueil"] {
    max-width: 1060px;
    min-height: calc(100vh - 110px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: center;
    gap: 56px;
  }
  .orbe.grande { --taille: 290px; }
  .assistant .dit { font-size: 28px; }
  .bouton-parler { margin-top: 12px; }
  .assistant { min-height: 80px; }
  .modes-accueil { margin: 0; padding-left: 40px; border-left: 1px solid var(--bord); }
  .modes-accueil .tuiles { grid-template-columns: 1fr; }
  .modes-accueil .tuile:not(.petite) { grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 16px; row-gap: 2px; min-height: 96px; }
  .modes-accueil .tuile-icone { grid-row: 1 / 3; margin: 0; width: 48px; height: 48px; }
  .modes-accueil .tuile strong { align-self: end; }
  .modes-accueil .tuile small { align-self: start; }

  /* Conversations : une colonne de lecture large, la saisie en bas de l'écran */
  .conversation { min-height: calc(100vh - 66px); }
  .tete-vue { margin-top: 10px; }
  .orbe.mini { --taille: 56px; }
  .tete-vue h2 { font-size: 26px; }
  .pied-conversation { bottom: 20px; }
  .bulle { max-width: 76%; }
  .mesures { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tuiles.deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Mouvement réduit : rien ne bouge seul, la lueur seule suit le micro -------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .orbe-halo { transform: none; }
  html[data-orbe="reflexion"] .orbe-anneau, html[data-orbe="parole"] .orbe-anneau { opacity: .35; }
}