/* Une seule scène : un fond sombre continu sur toute la page, le visage
   holographique d'un côté, la conversation de l'autre, sans cadre entre eux.
   Couleurs EDC (charte-edc.md) en accent : bleu pour vos messages, magenta
   pour les actions. */
@font-face { font-family: "Comfortaa"; src: url("/polices/Comfortaa-latin.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("/polices/SourceSans3-latin.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }

:root {
  --bleu: #113A83;
  --magenta: #DA0C77;
  --alerte: #C0392B;
  --cyan: #38e8ff;
  --texte: #e6f1ff;
  --texte-doux: #9fb6d3;
  --verre: rgba(8, 20, 40, .7);
  --verre-clair: rgba(255, 255, 255, .06);
  --filet: rgba(56, 232, 255, .16);
}

* { box-sizing: border-box; }
/* L'attribut hidden doit toujours gagner, même sur un bouton en inline-flex. */
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  /* dvh : la hauteur réellement visible sur mobile, barres du navigateur déduites. */
  height: 100dvh; margin: 0; display: flex; flex-direction: column;
  font: 16px/1.5 "Source Sans 3", system-ui, sans-serif; color: var(--texte); background: #03070f;
}
h1 { font: 700 1.3rem "Comfortaa", system-ui, sans-serif; margin: 0; color: #fff; }
h1 small { font: 400 .8rem "Source Sans 3", system-ui, sans-serif; color: var(--texte-doux); margin-left: .3rem; letter-spacing: .02em; }
button, textarea { font: inherit; }

.masque { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Le fond vivant, derrière tout. */
#visage { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
body > :not(#visage) { position: relative; z-index: 1; }

.bandeau { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .9rem 1.5rem; }
.etat { margin: 0; font-size: .9rem; color: var(--texte-doux); flex: 1; }
.etat.erreur { color: #ffb4aa; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; }

button {
  border: 0; border-radius: 999px; padding: .5rem 1rem; cursor: pointer;
  background: var(--magenta); color: #fff; font-weight: 600;
}
button:disabled { opacity: .45; cursor: not-allowed; }
button:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
button.secondaire { background: var(--verre-clair); color: var(--texte); border: 1px solid var(--filet); }

.bascule { display: inline-flex; align-items: center; gap: .4rem; background: var(--verre-clair); color: var(--texte); border: 1px solid var(--filet); }
.bascule[aria-pressed="true"] { background: rgba(56, 232, 255, .14); color: #fff; border-color: var(--cyan); }
svg { width: 1.2em; height: 1.2em; fill: currentColor; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.bascule[aria-pressed="false"] .ondes { display: none; }

button.interrompre { background: var(--alerte); }
/* Pendant qu'elle parle, toucher son visage l'interrompt. */
body.occupee .scene { cursor: pointer; }
/* En conversation, le micro est déjà ouvert : la dictée s'efface. */
body.conversation #dicter { display: none; }

/* Sous-titre : ce qu'elle dit, quand le fil écrit est masqué. */
.sous-titre { display: none; margin: 0 auto .5rem; max-width: 42rem; text-align: center; font-size: 1.05rem; line-height: 1.45; color: var(--texte); text-shadow: 0 1px 8px #000; min-height: 1.5em; }
.sous-titre.question { color: var(--texte-doux); font-style: italic; }
.sous-titre.aide { color: var(--texte-doux); font-size: .95rem; }
.sous-titre.erreur { color: #ffb4aa; }
body.sans-fil .sous-titre { display: block; }

/* Fil masqué (par défaut) : Adèle occupe la scène, la saisie reste en bas. */
body.sans-fil .fil, body.sans-fil .reglages { display: none; }
body.sans-fil .plateau, body.sans-fil.conversation .plateau { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
body.sans-fil .colonne { width: 100%; max-width: 46rem; margin: 0 auto; padding: 0 1.25rem; }
#envoyer, #arreter { display: inline-flex; align-items: center; gap: .4rem; }

/* Plateau : le visage à gauche, la conversation à droite. Aucune bordure, le
   fond est le même : une seule scène. En mode Conversation, le visage s'élargit. */
.plateau {
  flex: 1; min-height: 0; display: grid;
  grid-template-columns: minmax(260px, 2fr) minmax(0, 3fr);
  transition: grid-template-columns .5s ease;
}
body.conversation .plateau { grid-template-columns: minmax(260px, 3fr) minmax(0, 2fr); }
.scene { min-height: 0; }
.colonne { min-height: 0; display: flex; flex-direction: column; padding-right: 1.5rem; }

.reglages { margin: 0 0 .5rem; background: var(--verre); border: 1px solid var(--filet); border-radius: 12px; padding: .5rem 1rem; }
.reglages summary { cursor: pointer; font-weight: 600; color: var(--texte); }
.reglages textarea { width: 100%; border: 1px solid var(--filet); border-radius: 8px; padding: .5rem; resize: vertical; color: var(--texte); background: rgba(0, 0, 0, .35); }
.aide { margin: .25rem 0 .5rem; font-size: .9rem; color: var(--texte-doux); }
.ligne { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: .5rem 0; }
.compteur { font-size: .85rem; color: var(--texte-doux); }

.fil {
  flex: 1; min-height: 0; overflow-y: auto; padding: .5rem .25rem 1rem;
  display: flex; flex-direction: column; gap: .75rem;
  /* Les anciens messages s'effacent en haut au lieu de buter contre un bord. */
  -webkit-mask-image: linear-gradient(transparent, #000 2.5rem); mask-image: linear-gradient(transparent, #000 2.5rem);
}
.vide { margin: auto 0; text-align: center; color: var(--texte-doux); }
.msg {
  max-width: 92%; padding: .6rem .9rem; border-radius: 14px;
  white-space: pre-wrap; overflow-wrap: anywhere; background: var(--verre); border: 1px solid var(--filet);
}
.msg.user { align-self: flex-end; background: rgba(17, 58, 131, .85); border-color: rgba(120, 160, 255, .35); color: #fff; }
.msg.assistant { align-self: flex-start; box-shadow: inset 2px 0 0 var(--cyan); }
.msg.assistant.en-cours::after { content: "\2009\25CF"; color: var(--cyan); animation: clignote 1s infinite; }
.msg.interrompue { border-style: dashed; }
.msg.erreur { align-self: center; background: rgba(120, 20, 15, .75); color: #ffd7d2; border-color: rgba(255, 140, 120, .4); }
.msg .relire { display: block; margin-top: .4rem; padding: .15rem .6rem; font-size: .8rem; background: var(--verre-clair); color: var(--cyan); border: 1px solid var(--filet); }
@keyframes clignote { 50% { opacity: 0; } }

.saisie { display: flex; gap: .5rem; align-items: flex-end; padding: .5rem 0 1.25rem; }
.saisie > * { flex: none; }
.saisie textarea {
  flex: 1; resize: none; border: 1px solid var(--filet); border-radius: 12px; padding: .55rem .8rem;
  color: var(--texte); background: var(--verre); max-height: 10rem;
}
.saisie textarea::placeholder { color: var(--texte-doux); }
button.icone { padding: .5rem .65rem; background: var(--verre-clair); color: var(--texte); border: 1px solid var(--filet); }
button.icone[aria-pressed="true"] { background: var(--alerte); color: #fff; border-color: var(--alerte); }

/* Écran étroit : le visage au-dessus, la conversation dessous. */
@media (max-width: 860px) {
  .plateau, body.conversation .plateau { grid-template-columns: 1fr; grid-template-rows: 170px minmax(0, 1fr); }
  body.conversation .plateau { grid-template-rows: 40dvh minmax(0, 1fr); }
  .colonne { padding: 0 1rem; }
  .bandeau { padding: .75rem 1rem; }
}

/* Téléphone : tout tient sur une ligne d'en-tête et une ligne de saisie. */
@media (max-width: 600px) {
  body { font-size: 15px; }
  .bandeau {
    display: grid; grid-template-columns: 1fr auto; gap: .15rem .5rem;
    padding: calc(.5rem + env(safe-area-inset-top)) .75rem .25rem;
  }
  h1 { font-size: 1.1rem; }
  h1 small { display: none; }
  .actions { gap: .35rem; flex-wrap: nowrap; }
  .etat { grid-column: 1 / -1; grid-row: 2; font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Boutons réduits à leur icône ; le nom reste lu par les lecteurs d'écran (aria-label). */
  .actions button span, #envoyer span, #arreter span { display: none; }
  .actions button, #envoyer, #arreter, button.icone { padding: .5rem; min-width: 2.5rem; min-height: 2.5rem; justify-content: center; }
  .plateau, body.conversation .plateau { grid-template-rows: 150px minmax(0, 1fr); }
  body.conversation .plateau { grid-template-rows: 40dvh minmax(0, 1fr); }
  .colonne { padding: 0 .75rem; }
  .reglages { padding: .3rem .75rem; font-size: .85rem; margin-bottom: .35rem; }
  .fil { gap: .5rem; padding-top: .25rem; }
  .msg { max-width: 94%; padding: .5rem .75rem; }
  /* 16 px minimum dans le champ : sinon iOS zoome à la saisie. */
  .saisie { padding: .4rem 0 calc(.6rem + env(safe-area-inset-bottom)); gap: .35rem; }
  .saisie textarea { font-size: 16px; padding: .5rem .7rem; }
  /* En conversation, le fil ne garde que l'échange en cours : le visage prend la place. */
  body.conversation .reglages { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .msg.assistant.en-cours::after { animation: none; }
  .plateau { transition: none; }
}

/* Fil masqué : prime sur les dispositions mobiles ci-dessus (visage en haut,
   conversation en bas) ; le visage prend toute la hauteur disponible. */
html body.sans-fil .plateau { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
@media (max-width: 600px) { html body.sans-fil .colonne { padding: 0 .75rem; } .sous-titre { font-size: .98rem; } }