/* Écrans du client : compte, première fois, conversation.
   Charte : DESIGN.md. Papier chaud, serif d'affichage, un seul accent terracotta,
   cadres à double bord, aucune ombre portée, thème clair uniquement. */

:root {
  --bg: #F5F4F0;
  --paper: #FCFBF8;
  --ink: #2A2F35;
  --muted: #6A7078;
  --line: rgba(42, 47, 53, .10);
  --line-strong: rgba(42, 47, 53, .22);
  --shell: rgba(42, 47, 53, .05);
  --accent: #B5533C;
  --accent-deep: #9A4330;
  --accent-tint: #F3E4DF;
  --danger: #9A2F2A;
  --warn: #8A5A00;
  --warn-bg: #F7EFDD;
  --ease: cubic-bezier(.32, .72, 0, 1);
  --r-out: 28px;
  --r-in: 22px;
  --display: "Libre Caslon Display", "Libre Caslon Text", Georgia, serif;
  --serif: "Libre Caslon Text", Georgia, serif;
  --sans: "Albert Sans", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  min-height: 100%;
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.65;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }

/* === Structure === */

.screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 48px 24px;
  gap: 32px;
  text-align: center;
}

.brand {
  font-family: var(--display);
  font-size: 21px;
  color: var(--ink);
  text-decoration: none;
}
.brand:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(34px, 4.4vw, 52px);
  line-height: 1.08;
  letter-spacing: -.01em;
  max-width: 16em;
}
h1 em { font-family: var(--serif); font-style: italic; color: var(--accent); }

.intro { font-size: 19px; color: var(--muted); max-width: 32em; }
/* Une note reste du texte courant : elle porte des consignes lues au moment où
   quelque chose coince (« Chrome vous pose une question… », l'attente du
   paiement), jamais de la mention en petits caractères. Le niveau en dessous,
   c'est l'étiquette (.step-count, .sep, .mic-label), à 16 px et en demi-gras. */
.note { font-size: 18px; line-height: 1.5; color: var(--muted); max-width: 32em; }

/* Double bord : enveloppe puis cœur. */
.frame {
  width: 100%;
  max-width: 480px;
  background: var(--shell);
  border: 1px solid var(--line);
  border-radius: var(--r-out);
  padding: 6px;
}
.frame-core {
  background: var(--paper);
  border-radius: var(--r-in);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .6);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-align: left;
}

/* === Formulaires === */

form { display: flex; flex-direction: column; gap: 20px; }

.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 18px; font-weight: 600; }
.field .help { font-size: 18px; line-height: 1.5; color: var(--muted); }
.field input {
  width: 100%;
  height: 56px;
  padding: 0 16px;
  font-family: var(--sans);
  font-size: 18px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  transition: border-color .2s var(--ease);
}
.field input:hover { border-color: var(--ink); }
.field input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-color: var(--ink); }
.field input[aria-invalid="true"] { border-color: var(--danger); }

.password-row { position: relative; }
.password-row input { padding-right: 112px; }
.password-row .reveal {
  position: absolute;
  top: 4px;
  right: 4px;
  height: 48px;
  padding: 0 16px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.password-row .reveal:hover { color: var(--accent-deep); }
.password-row .reveal:focus-visible { outline: 3px solid var(--accent); outline-offset: 0; }

.msg-error { font-size: 18px; line-height: 1.5; color: var(--danger); }
.msg-ok { font-size: 18px; line-height: 1.5; color: var(--ink); }

.sep {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 16px;
  color: var(--muted);
}
.sep::before, .sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }

#google-signin { display: flex; justify-content: center; min-height: 48px; }

/* === Boutons === */

.btn-accent, .btn-grey {
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 600;
  min-height: 56px;
  padding: 0 32px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background .4s var(--ease), border-color .4s var(--ease), transform .15s var(--ease);
}
.btn-accent { background: var(--accent); color: #fff; border: none; }
.btn-accent:hover { background: var(--accent-deep); }
.btn-grey { background: var(--paper); color: var(--ink); border: 1px solid var(--line-strong); }
.btn-grey:hover { border-color: var(--ink); }
.btn-accent:active, .btn-grey:active { transform: scale(.98); }
.btn-accent:focus-visible, .btn-grey:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.btn-accent:disabled, .btn-grey:disabled { background: var(--shell); color: var(--muted); border-color: var(--line); cursor: not-allowed; transform: none; }
/* Variante secondaire : plus basse et plus discrète qu'un bouton plein, même
   taille de texte (les écrans de conversation n'ont pas d'autre bouton). */
.btn-grey.small { min-height: 48px; padding: 0 24px; }

.link {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  background: none;
  border: none;
  padding: 0;
  min-height: 48px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  /* Le soulignement suit le texte et non la boîte : le texte s'aligne sur
     celui des boutons voisins, et un lien étiré (colonne à 375 px) ne trace
     plus un trait de séparation sur toute la largeur. */
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 6px;
  transition: text-decoration-color .4s var(--ease);
}
.link:hover { text-decoration-color: var(--accent); }
.link:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.link:disabled { color: var(--muted); text-decoration-color: transparent; cursor: default; }

.actions { display: flex; gap: 16px 24px; flex-wrap: wrap; align-items: center; justify-content: center; }
.frame-core .actions { justify-content: flex-start; }

/* Un écran = un bouton. Le reste (« On vous rappelle », « Plus tard »,
   « Mon compte ») tient sur une ligne d'aide en dessous, en gris : le client
   voit d'abord ce qu'il doit faire, et seulement ensuite ce qu'il peut faire.
   Retour du test du 23/09 : « trop de boutons, je ne sais plus où cliquer ». */
.aide { font-size: 18px; line-height: 1.5; color: var(--muted); max-width: 32em; }
.aide .link { font-weight: 500; min-height: 0; display: inline; color: var(--muted); white-space: nowrap; }
.aide .link:hover { color: var(--ink); }

/* === Fenêtre « On vous rappelle » === */

dialog.rappel {
  margin: auto;
  width: min(480px, calc(100vw - 32px));
  background: var(--shell);
  border: 1px solid var(--line);
  border-radius: var(--r-out);
  padding: 6px;
  color: var(--ink);
}
dialog.rappel::backdrop { background: rgba(42, 47, 53, .45); }
dialog.rappel h2 { font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 1.15; }
/* La confirmation est bâtie par commun.js : même respiration que le formulaire. */
#rappel-done { display: flex; flex-direction: column; gap: 24px; }

/* === Conversation === */

#screen-session { position: relative; }

#screen-preview {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 240px;
  height: auto;
  background: var(--ink);
  border: 6px solid var(--shell);
  outline: 1px solid var(--line);
  border-radius: var(--r-in);
}

.live { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }
.live h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(32px, 3.8vw, 48px);
  line-height: 1.1;
}
.caption { min-height: 2.6em; max-width: 36em; font-size: 20px; line-height: 1.4; }

.pulse {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 1s ease-in-out infinite;
}
.pulse.thinking { background: var(--muted); }
.pulse.speaking { background: var(--ink); }
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: .6; }
}

.mic-row { display: flex; align-items: center; gap: 12px; justify-content: center; flex-wrap: wrap; }
.mic-label { font-size: 16px; color: var(--muted); }
.mic-level { width: 160px; height: 8px; background: var(--shell); border-radius: 999px; overflow: hidden; }
#mic-level-bar { height: 100%; width: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); transition: transform 120ms linear; }
#mic-select { min-height: 48px; font-family: var(--sans); font-size: 18px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--paper); color: var(--ink); }
#mic-select:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.warning { font-size: 18px; color: var(--warn); }

.banner {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  background: var(--warn-bg);
  border: 1px solid var(--warn);
  color: #5A3B00;
  border-radius: 12px;
  padding: 16px 24px;
  font-size: 18px;
  line-height: 1.5;
  max-width: 40em;
}

.help-steps {
  text-align: left;
  max-width: 34em;
  padding-left: 24px;
  font-size: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.help-steps li::marker { font-family: var(--display); color: var(--accent); }

/* === Première fois : une étape par écran, l'illustration à gauche === */

.screen.step {
  flex-direction: row;
  gap: 64px;
  text-align: left;
  max-width: 1180px;
  margin: 0 auto;
}
/* L'étape appareil n'a pas d'illustration, et l'écran de fin n'en a pas non
   plus quand il n'y a pas d'icône sur le bureau à montrer (.solo) : sans
   mesure, leur texte s'étalerait sur les 1180 px du gabarit à deux colonnes. */
#screen-bv-appareil, .screen.step.solo { max-width: 640px; }
.step-art, .step-body { flex: 1 1 0; min-width: 0; }
.step-body { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.step-body .actions { justify-content: flex-start; }
.step-count { font-size: 16px; font-weight: 600; color: var(--muted); }
.step-live { width: 100%; }
/* Pendant une étape, l'assistant n'a que la parole : sa phrase, rien d'autre.
   Le titre « Je vous écoute », la pastille, la jauge du micro et ses alertes
   attendent l'écran de conversation, sinon la page donne deux consignes. */
.step-live .live { align-items: flex-start; padding-top: 24px; border-top: 1px solid var(--line); }
.screen.step .step-live .live > :not(.caption) { display: none; }
.screen.step .step-live .live:has(> .caption:empty) { display: none; }
.screen.step .step-live .caption { min-height: 0; color: var(--muted); }
#screen-session .step-live .live { align-items: center; padding-top: 0; border-top: none; }

/* Maquette de la fenêtre Chrome : ce que le client va voir, et où cliquer. */
.mock {
  background: var(--shell);
  border: 1px solid var(--line);
  border-radius: var(--r-out);
  padding: 6px;
}
.mock-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  padding: 0 16px;
  background: var(--paper);
  border-radius: var(--r-in) var(--r-in) 0 0;
  border-bottom: 1px solid var(--line);
}
.mock-dots { width: 36px; height: 8px; background: radial-gradient(circle, var(--line-strong) 4px, transparent 4.5px) 0 0 / 12px 8px repeat-x; }
.mock-url { flex: 1; height: 28px; line-height: 28px; padding: 0 12px; font-size: 14px; color: var(--muted); background: var(--bg); border-radius: 999px; overflow: hidden; white-space: nowrap; }
.mock-install { width: 20px; height: 20px; border: 2px solid var(--line-strong); border-radius: 4px; }
.mock-install.on { border-color: var(--accent); background: var(--accent-tint); }
.mock-page { position: relative; height: 320px; background: var(--paper); border-radius: 0 0 var(--r-in) var(--r-in); }
.mock-bubble {
  position: absolute;
  width: min(280px, calc(100% - 32px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.4;
}
.mock-bubble.top-left { top: 12px; left: 16px; }
.mock-bubble.top-right { top: 12px; right: 16px; }
.mock-bubble.center { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.mock-btn { padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: 999px; text-align: center; color: var(--muted); }
.mock-btn.on { border: 2px solid var(--accent); background: var(--accent-tint); color: var(--ink); font-weight: 600; }
.mock-tabs { display: flex; gap: 4px; font-size: 12px; }
.mock-tabs span { flex: 1; padding: 4px; text-align: center; white-space: nowrap; border-bottom: 2px solid var(--line); color: var(--muted); }
.mock-tabs span.on { border-bottom-color: var(--accent); color: var(--ink); font-weight: 600; }
.mock-thumb { height: 64px; border: 2px solid var(--accent); border-radius: 8px; background: var(--paper); }
.mock.desk { display: flex; align-items: center; justify-content: center; min-height: 376px; }
.mock-icon { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); }
.mock-icon img { border-radius: 12px; }

@media (max-width: 900px) {
  .screen.step { flex-direction: column; gap: 32px; text-align: center; }
  .step-art { width: 100%; max-width: 480px; flex: none; }
  .step-body { align-items: center; flex: none; }
  .step-body .actions, .step-live .mic-row { justify-content: center; }
  .step-live .live { align-items: center; }
  .mock-page { height: 240px; }
  .mock.desk { min-height: 200px; }
}

@media (max-width: 500px) {
  .screen { padding: 32px 16px; gap: 24px; }
  .frame-core { padding: 24px; }
  .btn-accent, .btn-grey { width: 100%; padding: 0 24px; }
  .frame-core .actions { flex-direction: column; align-items: stretch; }
  .frame-core .actions .link { align-self: center; }
  #screen-preview { position: static; width: 100%; max-width: 240px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Case d'opt-in au paiement : lisible, cliquable sur tout le texte, une seule couleur d'accent. */
.cgv { display: flex; gap: 14px; align-items: flex-start; max-width: 32em; margin: 0 0 20px;
  font-size: 17px; line-height: 1.5; color: var(--ink); cursor: pointer; text-align: left; }
.cgv input { flex: none; width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--accent); cursor: pointer; }
.cgv input:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.cgv .link { display: inline; min-height: 0; font-weight: 500; }

/* Page /pret : trois questions, réponses empilées de même poids, une seule action finale en accent. */
.pret .pret-etape { margin: 0 0 8px; font-size: 16px; }
.pret .pret-choix { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 26em; margin-top: 8px; }
.pret .pret-choix .btn-grey { width: 100%; }
.pret h1:focus { outline: none; }