/* =====================================================================
   Borne Jeanne — Fnac Jeanne d'Arc
   Écran paysage tactile. Tailles en rem : la base suit la taille de l'écran.
   ===================================================================== */

:root {
  --yellow: #EBB300;
  --yellow-light: #F7DC80;
  --ink: #121212;
  --ink-2: #242424;
  --ink-3: #3a3a3a;
  --paper: #FFFFFF;
  --mist: #F2F1EC;
  --line: #DAD8CF;
  --text-muted: #56544D;
  --on-ink-muted: #C4C2BA;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --radius-xl: 1.6rem;
  --radius-l: 1.1rem;
  --display: "Archivo", "Arial Narrow", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html {
  font-size: clamp(13px, 0.86vw + 0.36vh, 22px);
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}
/* Mode accessibilité : texte nettement plus grand (≈ +25 %), voir aussi la fin du fichier. */
html.a11y { font-size: clamp(15px, 1.06vw + 0.44vh, 28px); }

body {
  margin: 0;
  height: 100dvh;
  overflow: hidden;
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 500;
  font-stretch: 100%;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

::selection { background: var(--ink); color: var(--yellow); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
input { user-select: text; caret-color: var(--ink); }
:focus-visible { outline: 0.22rem solid var(--ink); outline-offset: 0.2rem; }
.map :focus-visible { outline-color: var(--yellow); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { width: 1.3rem; height: 1.3rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.logo {
  display: inline-block;
  /* Sans cela, le logo se laissait écraser à zéro par le nom du magasin et la
     pastille des horaires, qui ne se coupent pas, sur un écran étroit. */
  flex: 0 0 auto;
  width: 4.2rem;
  aspect-ratio: 499 / 515;
  background: var(--ink);
  -webkit-mask: url("../assets/fnac-logo.svg") center / contain no-repeat;
  mask: url("../assets/fnac-logo.svg") center / contain no-repeat;
}

/* =====================================================================
   Jeanne en 3D (une scène qui se déplace entre les deux écrans)
   ===================================================================== */

/* =====================================================================
   Écran de veille
   ===================================================================== */
.idle {
  position: fixed;
  z-index: 6;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 40fr) minmax(0, 35fr) minmax(0, 25fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  column-gap: 2vw;
  padding: 4.5vh 3vw 4.5vh 5vw;
  cursor: pointer;
  transition: opacity 0.6s ease, visibility 0.6s;
}
.is-app .idle { opacity: 0; visibility: hidden; }
.idle:focus-visible { outline: none; }

.idle-top { grid-column: 1; display: flex; align-items: center; gap: 1rem; flex-wrap: nowrap; }
.idle-top .logo { width: 5.4rem; }
.store {
  white-space: nowrap;
  font-size: 1.15rem;
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: 0.01em;
}

/* Pastille « Ouvert jusqu'à… », à côté du nom du magasin. */
.idle-hours {
  display: inline-flex;
  white-space: nowrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: rgba(18, 18, 18, 0.09);
  font-size: 1rem;
  font-weight: 700;
}
.idle-hours[hidden] { display: none; }
.idle-hours::before {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: #1c7a3c;
}
/* Fermeture proche, puis magasin fermé : la pastille change de couleur. */
.idle-hours.is-soon { background: var(--ink); color: var(--paper); }
.idle-hours.is-soon::before { background: #e8b923; }
.idle-hours.is-closed::before { background: #8a8a8a; }

.idle-copy {
  grid-column: 1;
  align-self: center;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  transition: opacity 0.42s ease, filter 0.42s ease, transform 0.42s var(--ease-out);
}
.idle-hello {
  margin: 0;
  font-size: clamp(3rem, 5.6vw, 7.5rem);
  font-weight: 900;
  font-stretch: 125%;
  line-height: 0.92;
  letter-spacing: -0.035em;
}
.idle-title {
  margin: 1.6rem 0 0;
  max-width: 17ch;
  font-size: clamp(1.9rem, 2.7vw, 3.6rem);
  font-weight: 800;
  font-stretch: 112%;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.idle-sub {
  margin: 1.2rem 0 0;
  max-width: 30ch;
  font-size: 1.35rem;
  font-weight: 500;
  color: #2c2a22;
  text-wrap: pretty;
}

.idle-avatar-slot {
  grid-column: 2;
  grid-row: 1 / 5;
  position: relative;
  margin: -4.5vh 0;
}
/* Photo de Jeanne sur l'écran de veille. */
.idle-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Image recadrée sur Jeanne : elle est posée en bas du cadre, en entier. */
  object-fit: contain;
  object-position: right bottom;
  border-radius: 0;
  animation: photo-life 24s ease-in-out infinite alternate;
}
.idle-photo[hidden] { display: none; }
@keyframes photo-life {
  from { transform: scale(1) translateY(0); }
  to { transform: scale(1.045) translateY(-0.6%); }
}
/* La bulle de l'image d'origine est hors cadre : la borne affiche la sienne,
   qui change de langue.
   Jeanne est posée en bas du cadre et sa taille suit la LARGEUR de la colonne,
   jamais la hauteur de l'écran : la bulle se cale donc sur le bas du cadre en
   « vw », sinon elle remontait loin au-dessus du visage sur un écran haut. */
.has-idle-photo .idle-bubble {
  top: auto;
  left: auto;
  right: 72%;
  bottom: 30.5vw;
}

.idle-bubble {
  position: absolute;
  z-index: 6;
  top: 13%;
  left: -6%;
  /* Sans « max-content », la bulle calée à droite se réduisait à la place
     restante et le texte tombait en colonne d'un mot. */
  width: max-content;
  max-width: 15ch;
  margin: 0;
  padding: 1rem 1.3rem;
  border-radius: 1.5rem 1.5rem 0.4rem 1.5rem;
  background: var(--paper);
  font-size: 1.35rem;
  font-weight: 700;
  font-stretch: 105%;
  line-height: 1.25;
  /* « drop-shadow » plutôt que « box-shadow » : l'ombre suit la pointe. */
  filter: drop-shadow(0 0.9rem 1.6rem rgba(60, 42, 0, 0.32));
  transition: opacity 0.42s ease, transform 0.42s var(--ease-out);
  animation: bubble-in 0.9s 0.6s var(--ease-out) both;
}
/* La petite pointe, tournée vers le visage de Jeanne. */
.idle-bubble::after {
  content: "";
  position: absolute;
  right: 1.3rem;
  bottom: -0.8rem;
  width: 1.5rem;
  height: 0.85rem;
  background: var(--paper);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
@keyframes bubble-in { from { opacity: 0; transform: translateY(1rem) scale(0.94); } }

.idle-greet[hidden] { display: none; }

/* « Notre histoire » : bouton discret, toujours dans le coin bas droit. */
.idle-story-button {
  grid-column: 3;
  grid-row: 4;
  justify-self: end;
  align-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 3.2rem;
  padding: 0 1.4rem;
  border: 0.13rem solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
}
.idle-story-button svg { width: 1.1rem; height: 1.1rem; }
.idle-story-button[hidden] { display: none; }

/* Fenêtre ouverte par ce bouton : le texte et la photo de la statue. */
.story {
  width: min(58rem, 92vw);
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.2rem 1.8rem;
  align-items: center;
  text-align: left;
}
/* « display: grid » seulement quand la fenêtre est ouverte : sinon elle
   resterait affichée par-dessus l'écran de veille. */
.story[open] { display: grid; }
.story-title { margin: 0 0 0.9rem; font-size: 2.2rem; font-weight: 900; font-stretch: 115%; line-height: 1.05; }
.story-parts { display: grid; gap: 1rem; }
.story-parts h3 { margin: 0 0 0.25rem; font-size: 1.05rem; font-weight: 800; color: #6b6151; }
.story-parts p { margin: 0; font-size: 1.1rem; font-weight: 500; line-height: 1.4; text-wrap: pretty; }
.story-figure { margin: 0; text-align: center; }
.story-figure[hidden] { display: none; }
.story-figure img { width: 12rem; height: 16rem; object-fit: cover; border-radius: var(--radius-l); }
.story-figure figcaption { margin-top: 0.5rem; max-width: 12rem; font-size: 0.85rem; font-weight: 600; opacity: 0.7; }
.story-close {
  grid-column: 1 / -1;
  justify-self: start;
  min-height: 3.4rem;
  padding: 0 2rem;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 1.1rem;
  font-weight: 800;
}

/* Colonne de droite : la carte Fnac+, puis « Notre histoire » en dessous. */
.idle-side {
  position: relative;
  z-index: 2;
  grid-column: 3;
  /* L'encadré s'arrête au-dessus de la dernière ligne, réservée au bouton
     « Notre histoire » : quelle que soit sa hauteur, il ne le pousse plus. */
  grid-row: 2 / 4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 1rem;
  min-height: 0;
  padding-bottom: 1.6vh;
}

.idle-card {
  display: grid;
  gap: 0.6rem;
  padding: 1.8rem 1.6rem;
  border-radius: var(--radius-l);
  background: var(--ink);
  color: var(--paper);
}
/* Photo de la campagne Fnac+, détourée : elle se pose sur le noir de la carte. */
.idle-card-photo {
  width: 100%;
  max-height: min(13rem, 18vh);
  object-fit: contain;
  object-position: bottom;
  margin-bottom: 0.2rem;
}
.idle-card-photo[hidden] { display: none; }
.idle-card-tag { margin: 0; font-size: 1rem; font-weight: 700; color: var(--yellow); }
.idle-card-title { margin: 0; font-size: clamp(1.9rem, 2.6vw, 2.6rem); font-weight: 900; font-stretch: 118%; line-height: 1; }
.idle-card-price { margin: 0 0 0.4rem; font-size: 1.25rem; font-weight: 800; }
.idle-card-list { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.45rem; font-size: 1rem; font-weight: 500; line-height: 1.35; }
.idle-card-foot { margin: 0.4rem 0 0; font-size: 0.95rem; font-weight: 500; opacity: 0.78; line-height: 1.35; }
.idle-card-button {
  justify-self: start;
  min-height: 3rem;
  margin-top: 0.5rem;
  padding: 0 1.4rem;
  border: 0;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
}
.idle-card-button[hidden] { display: none; }
.idle-card-offer[hidden], .idle-card-news[hidden] { display: none; }
/* Fondu quand l'encadré passe d'une publicité à la suivante. */
.idle-card { transition: opacity 0.42s ease; }
.idle-card.is-swapping { opacity: 0; }

/* Une actualité dans l'encadré : image, titre, texte, date. */
.idle-card-news { display: grid; gap: 0.55rem; }
.idle-card-news-image {
  width: 100%;
  max-height: 11rem;
  object-fit: contain;
  border-radius: var(--radius-l);
}
.idle-card-news-image[hidden] { display: none; }
/* Produit détouré : posé sur un fond clair, sinon un iPhone noir
   disparaîtrait dans le noir de l'encadré. */
.idle-card-news-image.is-cutout { background: var(--yellow); padding: 0.4rem; }
.idle-card-news-title {
  margin: 0;
  font-size: clamp(1.5rem, 2vw, 2.1rem);
  font-weight: 900;
  font-stretch: 118%;
  line-height: 1.02;
  text-wrap: balance;
}
.idle-card-news-text { margin: 0; font-size: 0.95rem; font-weight: 500; line-height: 1.35; }
.idle-card-news-date {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-size: 0.9rem;
  font-weight: 750;
  color: var(--yellow);
}
.idle-card-news-date svg { width: 1.1rem; height: 1.1rem; }

/* Écran peu haut (portable posé à l'entrée) : la photo de campagne s'efface
   et les textes se resserrent, sinon « Notre histoire » sortait de l'écran. */
@media (max-height: 800px) {
  .idle-card-photo { display: none; }
  .idle-card { padding: 1.4rem 1.3rem; gap: 0.45rem; }
  .idle-card-list { font-size: 0.92rem; gap: 0.3rem; }
  .idle-card-foot { font-size: 0.88rem; }
}

/* Fenêtre « la carte Fnac+, en détail ». */
.card-detail { width: min(62rem, 94vw); text-align: left; }
.card-detail[open] { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 2rem; align-items: start; }
.card-detail-head { grid-column: 1 / -1; }
.card-detail-title { margin: 0; font-size: 2.1rem; font-weight: 900; font-stretch: 115%; line-height: 1.05; }
.card-detail-price { margin: 0.3rem 0 0; font-size: 1.3rem; font-weight: 800; }
.card-detail-sections { display: grid; gap: 1.1rem; }
.card-detail-sections h3 { margin: 0 0 0.4rem; font-size: 1.1rem; font-weight: 800; }
.card-detail-sections ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.35rem; font-size: 1.05rem; font-weight: 500; line-height: 1.35; }
.card-detail-qr { margin: 0; text-align: center; }
.card-detail-qr[hidden] { display: none; }
.card-detail-qr img { width: 9rem; height: 9rem; }
.card-detail-qr figcaption { margin-top: 0.4rem; max-width: 9rem; font-size: 0.85rem; font-weight: 600; opacity: 0.75; }
.card-detail-close {
  grid-column: 1 / -1;
  justify-self: start;
  min-height: 3.4rem;
  padding: 0 2rem;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 1.1rem;
  font-weight: 800;
}

.is-swapping .idle-copy { opacity: 0; filter: blur(0.5rem); transform: translateY(0.6rem); }
.is-swapping .idle-bubble { opacity: 0; transform: translateY(0.4rem) scale(0.97); }

.idle-cta {
  grid-column: 1;
  justify-self: start;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2.4vh;
  padding: 1.25rem 2.1rem 1.25rem 1.5rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 1.5rem;
  font-weight: 700;
  font-stretch: 108%;
}
.idle-cta-dot {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--yellow);
}
.ripple { position: absolute; left: 2rem; top: 50%; pointer-events: none; }
.ripple i {
  position: absolute;
  width: 3rem;
  height: 3rem;
  margin: -1.5rem 0 0 -1.5rem;
  border-radius: 50%;
  border: 0.12rem solid var(--ink);
  opacity: 0;
  animation: ripple 3s var(--ease-out) infinite;
}
.ripple i:nth-child(2) { animation-delay: 1s; }
.ripple i:nth-child(3) { animation-delay: 2s; }
@keyframes ripple {
  0% { transform: scale(0.4); opacity: 0.5; }
  100% { transform: scale(5.5); opacity: 0; }
}

.idle-langs {
  grid-column: 1;
  display: flex;
  gap: 1.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1.05rem;
  font-weight: 650;
}
.idle-langs li { display: flex; align-items: center; gap: 0.55rem; opacity: 0.55; transition: opacity 0.4s ease; }
.idle-langs li.is-on { opacity: 1; }
.idle-langs svg { width: 1.8rem; height: 1.2rem; border-radius: 0.2rem; stroke: none; }

/* =====================================================================
   Page principale
   ===================================================================== */
.app {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 35fr) minmax(0, 65fr);
  gap: 1.1rem;
  padding: 1.1rem;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.015);
  transition: opacity 0.6s ease, visibility 0.6s, transform 0.8s var(--ease-out);
}
.is-app .app { opacity: 1; visibility: visible; transform: none; }

/* --- Colonne Jeanne --- */
.assistant {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto auto;
  gap: 0.95rem;
  padding: 1.1rem;
  border-radius: var(--radius-xl);
  background: var(--paper);
}

.assistant-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.logo-button { padding: 0.2rem; border: 0; background: none; border-radius: 0.5rem; }
.logo-button .logo { width: 3.3rem; }

.langs { display: flex; gap: 0.3rem; padding: 0.3rem; border-radius: 999px; background: var(--mist); }
.langs button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.9rem;
  padding: 0 0.95rem 0 0.75rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: 0.95rem;
  font-weight: 750;
  font-stretch: 110%;
  transition: background 0.25s ease, color 0.25s ease;
}
.langs button svg { width: 1.6rem; height: 1.07rem; border-radius: 0.18rem; stroke: none; }
.langs button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* Pendant un signe en LSF, le clip occupe la largeur du panneau : le nom
   s'efface, la conversation reste lisible en dessous. */
.is-signing .jeanne-id { opacity: 0; transition: opacity 0.3s ease; }
.jeanne-id, .chat { transition: opacity 0.4s ease; }

.jeanne {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1.1rem;
  /* Pendant un signe, ce bloc prend la hauteur du clip : la conversation
     descend au lieu de passer dessous. */
  min-height: 0;
  transition: min-height 0.3s var(--ease-out);
}
.is-signing .jeanne { min-height: 19rem; }
.jeanne-slot {
  position: relative;
  width: 8.6rem;
  height: 8.6rem;
  border-radius: var(--radius-l);
  background: var(--yellow);
  overflow: hidden;
}
/* Photo de Jeanne dans le panneau, remplacée par un clip pendant un signe. */
.jeanne-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.35s ease;
}
.is-signing .jeanne-photo { opacity: 0; }
/* Clip de langue des signes : il remplace le portrait et déborde sur la zone
   de la conversation (effacée le temps du geste), sinon les mains seraient
   trop petites pour être lues. Le clip est affiché en entier (contain) :
   on ne connaît pas d'avance le cadrage des vidéos tournées en magasin. */
.sign-video {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 100%;
  height: 19rem;
  /* Les clips sont détourés : la signante se pose sur le jaune de la borne,
     sans le décor qu'il y avait derrière elle. */
  object-fit: contain;
  border-radius: var(--radius-l);
  background: var(--yellow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
/* Le clip apparaît d'un coup : une opacité qui monte en fondu est encore
   « invisible » pour Chrome, qui refuse alors de lancer la lecture. */
.is-signing .sign-video { opacity: 1; transition: none; }
.jeanne-name {
  margin: 0;
  font-size: 2.3rem;
  font-weight: 900;
  font-stretch: 125%;
  line-height: 1;
  letter-spacing: -0.02em;
}
.jeanne-status {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0.55rem 0 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-muted);
}
.status-dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--yellow); transition: background 0.3s ease; }
.jeanne-status[data-state="listening"] .status-dot { background: #D23B2A; animation: blink 1s ease-in-out infinite; }
.jeanne-status[data-state="speaking"] .status-dot { background: var(--ink); animation: blink 0.7s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.25; } }

/* --- Conversation --- */
.chat {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.2rem 0.3rem 0.2rem 0;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  mask-image: linear-gradient(to bottom, transparent 0, #000 1.2rem);
}
.chat > :first-child { margin-top: auto; }
.msg {
  max-width: 88%;
  margin: 0;
  padding: 0.75rem 1.05rem;
  font-size: 1.12rem;
  line-height: 1.38;
  text-wrap: pretty;
  animation: msg-in 0.45s var(--ease-out) both;
}
.msg-jeanne { align-self: flex-start; border-radius: 0.35rem 1.2rem 1.2rem 1.2rem; background: var(--mist); }
.msg-user { align-self: flex-end; border-radius: 1.2rem 0.35rem 1.2rem 1.2rem; background: var(--ink); color: var(--paper); font-weight: 600; }
@keyframes msg-in { from { opacity: 0; transform: translateY(0.7rem); filter: blur(0.25rem); } }

/* Choix dans la conversation : réponses à une question de Jeanne, sondage */
.msg-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-width: 94%;
  animation: msg-in 0.45s var(--ease-out) 0.08s both;
}
.choice {
  min-height: 3.3rem;
  padding: 0 1.15rem;
  border: 0.15rem solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  font-size: 1.05rem;
  font-weight: 750;
  transition: background 0.2s ease, color 0.2s ease, opacity 0.25s ease, transform 0.15s ease;
}
.choice:active { transform: scale(0.97); }
.msg-choices.is-options .choice { background: var(--yellow); border-color: var(--yellow); }
.msg-choices.is-done .choice { opacity: 0.35; cursor: default; }
.msg-choices.is-done .choice.is-chosen { opacity: 1; background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* --- Suggestions --- */
.suggestions-title { margin: 0 0 0.5rem; font-size: 0.9rem; font-weight: 700; color: var(--text-muted); }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0 1rem 0 0.85rem;
  border: 0.13rem solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  font-size: 1rem;
  font-weight: 700;
  transition: background 0.2s ease, transform 0.15s ease;
}
.chip svg { width: 1.2rem; height: 1.2rem; }
.chip:active { background: var(--yellow); transform: scale(0.97); }

/* --- Micro + saisie --- */
.composer { display: grid; gap: 0.6rem; }
.mic {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  min-height: 4.8rem;
  padding: 0.7rem 1.2rem 0.7rem 0.7rem;
  border: 0;
  border-radius: 1.3rem;
  background: var(--yellow);
  font-size: 1.35rem;
  font-weight: 800;
  font-stretch: 110%;
  text-align: left;
  transition: background 0.3s ease, color 0.3s ease, transform 0.15s ease;
}
.mic:active { transform: scale(0.985); }
.mic-icon {
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  background: var(--ink);
  color: var(--yellow);
}
.mic-icon svg { width: 1.6rem; height: 1.6rem; }
.mic-label { flex: 1; }
.mic-wave { display: none; align-items: center; gap: 0.22rem; height: 2rem; }
.mic-wave i { width: 0.3rem; height: 100%; border-radius: 1rem; background: var(--yellow); animation: wave 0.9s ease-in-out infinite; }
.mic-wave i:nth-child(2) { animation-delay: -0.2s; }
.mic-wave i:nth-child(3) { animation-delay: -0.45s; }
.mic-wave i:nth-child(4) { animation-delay: -0.1s; }
.mic-wave i:nth-child(5) { animation-delay: -0.6s; }
@keyframes wave { 0%, 100% { transform: scaleY(0.25); } 50% { transform: scaleY(1); } }
.mic.is-listening { background: var(--ink); color: var(--paper); }
.mic.is-listening .mic-icon { background: var(--yellow); color: var(--ink); }
.mic.is-listening .mic-wave { display: flex; }

.ask { display: flex; gap: 0.5rem; }
.ask input {
  flex: 1;
  min-width: 0;
  min-height: 3.4rem;
  padding: 0 1.1rem;
  border: 0.13rem solid var(--line);
  border-radius: var(--radius-l);
  background: var(--mist);
  font-size: 1.1rem;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.ask input::placeholder { color: #6b6962; }
.ask input:focus { outline: none; border-color: var(--ink); background: var(--paper); }
.ask button {
  display: grid;
  place-items: center;
  width: 3.4rem;
  border: 0;
  border-radius: var(--radius-l);
  background: var(--ink);
  color: var(--yellow);
}
.ask button svg { width: 1.5rem; height: 1.5rem; }

/* --- Actions --- */
.actions { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 0.5rem; }
.action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3.4rem;
  padding: 0 0.7rem;
  border: 0;
  border-radius: var(--radius-l);
  background: var(--mist);
  font-size: 0.95rem;
  font-weight: 750;
  line-height: 1.1;
  text-align: left;
  transition: background 0.2s ease, color 0.2s ease;
}
.action-vendor { background: var(--ink); color: var(--paper); }
.action-vendor svg { color: var(--yellow); }
.action[aria-pressed="true"] { background: var(--yellow); }
.action:active { transform: scale(0.98); }

/* =====================================================================
   Plan
   ===================================================================== */
.map {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 1rem;
  padding: 1.25rem 1.5rem 1.1rem;
  border-radius: var(--radius-xl);
  background: var(--ink);
  color: var(--paper);
}
.map-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.map-head h2 {
  margin: 0;
  font-size: 2.1rem;
  font-weight: 900;
  font-stretch: 125%;
  letter-spacing: -0.02em;
}
.floors { display: flex; gap: 0.3rem; padding: 0.3rem; border-radius: 999px; background: var(--ink-2); }
.floors button {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 3.1rem;
  padding: 0 1.3rem 0 0.4rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--on-ink-muted);
  font-size: 1.05rem;
  font-weight: 750;
  transition: background 0.3s ease, color 0.3s ease;
}
.floors b {
  display: grid;
  place-items: center;
  min-width: 2.3rem;
  height: 2.3rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--ink-3);
  color: var(--paper);
  font-weight: 900;
  font-stretch: 112%;
}
.floors button[aria-selected="true"] { background: var(--yellow); color: var(--ink); }
.floors button[aria-selected="true"] b { background: var(--ink); color: var(--yellow); }

.map-stage { position: relative; min-height: 0; }
.floor {
  position: absolute;
  inset: 0;
  container-type: size;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(2.5rem);
  transition: opacity 0.55s ease, transform 0.8s var(--ease-out), visibility 0.8s;
}
.map-stage[data-dir="down"] .floor:not(.is-active) { transform: translateY(-2.5rem); }
.floor.is-active { opacity: 1; visibility: visible; transform: none; }

/* Chaque plan garde les proportions du plan d'architecte ; les cases sont
   positionnées en pourcentage à l'intérieur (voir index.html). */
.plan {
  position: relative;
  border-radius: 0.9rem;
  outline: 0.13rem dashed rgba(255, 255, 255, 0.18);
  outline-offset: 0.4rem;
}
/* Le plan garde ses proportions et tient toujours dans le cadre :
   la hauteur est la plus petite entre la hauteur disponible et
   la largeur disponible divisée par le rapport du plan. */
.plan-0 {
  /* Cadré sur la surface de vente (viewBox du SVG), pas sur toute la feuille. */
  outline: none;
  aspect-ratio: 344 / 426;
  width: min(100cqw, calc(100cqh * 344 / 426));
  height: auto;
}
.plan-m1 {
  /* Le plan du sous-sol dessine son propre contour (murs réels) : pas de cadre pointillé. */
  outline: none;
  aspect-ratio: 822 / 434;
  width: min(100cqw, calc(100cqh * 822 / 434));
  height: auto;
}

.tile {
  position: absolute;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.55rem 0.7rem;
  border: 0;
  border-radius: 0.8rem;
  background: var(--yellow);
  color: var(--ink);
  text-align: left;
  overflow: hidden;
  container-type: size;
  transition: background 0.35s ease, opacity 0.35s ease, transform 0.35s var(--ease-out), box-shadow 0.35s ease;
}
.tile:active { transform: scale(0.98); }
.tile-icon { width: 1.25rem; height: 1.25rem; margin-top: 0.05rem; }
.tile-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.tile-name {
  /* La taille suit celle de la case : le texte ne déborde plus. */
  font-size: clamp(0.58rem, min(8.5cqw, 19cqh), 1.15rem);
  font-weight: 800;
  font-stretch: 104%;
  line-height: 1.08;
  overflow-wrap: break-word;
  hyphens: auto;
}
.tile-detail { font-size: clamp(0.48rem, min(6cqw, 12cqh), 0.85rem); font-weight: 550; line-height: 1.15; color: #3d3520; }
@container (max-height: 3.4rem) {
  .tile { align-items: center; }
  .tile-detail { display: none; }
}
/* Cases étroites : on masque le détail puis l'icône, pour garder le nom lisible. */
@container (max-width: 8.5rem) {
  .tile-detail { display: none; }
}
@container (max-width: 6rem) {
  .tile-icon { display: none; }
}
@container (min-height: 7rem) {
  .tile { flex-direction: column; justify-content: space-between; }
  .tile-icon { width: 1.7rem; height: 1.7rem; }
  .tile-name { font-size: 1.15rem; }
  .tile-detail { font-size: 0.88rem; }
}
.plan-0 .tile-icon { width: 1.5rem; height: 1.5rem; }


/* Rayon trouvé */
.has-focus .tile:not(.is-hit):not(.is-route) { opacity: 0.4; }
.tile.is-hit {
  z-index: 2;
  background: var(--paper);
  animation: hit 1.8s ease-out infinite;
}
@keyframes hit {
  0% { box-shadow: 0 0 0 0.28rem var(--yellow), 0 0 0 0.28rem rgba(235, 179, 0, 0.7), 0 1rem 2rem -0.5rem rgba(0, 0, 0, 0.6); }
  100% { box-shadow: 0 0 0 0.28rem var(--yellow), 0 0 0 1.7rem rgba(235, 179, 0, 0), 0 1rem 2rem -0.5rem rgba(0, 0, 0, 0.6); }
}
.tile.is-route {
  z-index: 2;
  background: var(--paper);
  box-shadow: 0 0 0 0.28rem var(--yellow);
}

/* ---------------------------------------------------------------------
   Plan du sous-sol : vraies gondoles (SVG aux coordonnées de l'architecte)
   --------------------------------------------------------------------- */
.plan-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bm-floor {
  fill: rgba(255, 255, 255, 0.045);
  stroke: rgba(255, 255, 255, 0.42);
  stroke-width: 2px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.bm-shape {
  fill: var(--yellow);
  stroke: var(--ink);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  transition: fill 0.35s ease, opacity 0.35s ease;
}
.bm-counter { fill: var(--yellow-light); }
.bm-entrance { fill: var(--paper); }
.bm-neutral { fill: rgba(255, 255, 255, 0.16); stroke: none; cursor: default; }
/* Ascenseur PMR : bleu « accessibilité », reconnaissable même sans lire. */
.bm-elevator { fill: #2F6FEB; stroke: var(--paper); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.bm-elevator-icon { color: var(--paper); fill: none; stroke: currentColor; stroke-width: 2.4; pointer-events: none; }
.bm-shape.bm-elevator.is-hit { fill: #2F6FEB; stroke: var(--yellow); stroke-width: 3px; animation: none; }

/* Vous êtes ici (la borne, à l'entrée) */
.bm-here { pointer-events: none; }
.bm-here-dot { fill: var(--yellow); stroke: var(--ink); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.bm-here-pulse {
  fill: rgba(235, 179, 0, 0.35);
  transform-box: fill-box;
  transform-origin: center;
  animation: here-pulse 1.8s ease-out infinite;
}
@keyframes here-pulse { from { transform: scale(0.6); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }
.bm-here-text {
  fill: var(--yellow);
  font-size: 10px;
  font-weight: 800;
  paint-order: stroke;
  stroke: var(--ink);
  stroke-width: 3px;
}
/* Le plan de l'étage 0 est affiché un peu plus grand que celui du sous-sol
   (sa feuille est plus petite) : textes légèrement réduits pour garder la même
   taille à l'écran. */
.plan-0 .bm-label { font-size: 10.5px; stroke-width: 3px; }
.plan-0 .bm-label.is-hit { font-size: 12px; }
.plan-0 .route-casing, .plan-0 .route-line { vector-effect: non-scaling-stroke; }
.bm-stairs { cursor: pointer; }
.bm-stairs-band { fill: var(--yellow-light); stroke: var(--ink); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.bm-stairs line { stroke: rgba(18, 18, 18, 0.5); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.bm-stairs-arrow { fill: var(--ink); stroke: none; }
.bm-label {
  fill: var(--paper);
  font-size: 12.5px;
  font-weight: 800;
  font-stretch: 104%;
  letter-spacing: 0.01em;
  paint-order: stroke;
  stroke: var(--ink);
  stroke-width: 3.5px;
  stroke-linejoin: round;
  cursor: pointer;
  transition: fill 0.35s ease, opacity 0.35s ease;
}

/* Rayon trouvé : ses meubles s'allument, le reste s'efface. */
.has-focus .bm-shape:not(.is-hit):not(.is-zone) { opacity: 0.22; }
/* L'escalier fait partie de chaque trajet : il reste bien visible. */
.has-focus .bm-stairs:not(.is-hit) { opacity: 0.75; }
.has-focus .bm-label:not(.is-hit) { opacity: 0.3; }
.bm-shape.is-zone { opacity: 0.75; }
.bm-shape.is-hit {
  fill: var(--paper);
  stroke: var(--yellow);
  stroke-width: 3px;
  animation: bm-hit 1.6s ease-in-out infinite;
}
.bm-stairs.is-hit .bm-stairs-band,
.bm-stairs.is-route .bm-stairs-band { fill: var(--paper); stroke: var(--yellow); stroke-width: 3px; }
.has-focus .bm-stairs.is-route { opacity: 1; }
.bm-label.is-hit { fill: var(--yellow); font-size: 14px; }
@keyframes bm-hit { 50% { fill: var(--yellow-light); } }
.plan-m1 .route-casing, .plan-m1 .route-line { vector-effect: non-scaling-stroke; }
html.a11y .has-focus .bm-shape:not(.is-hit):not(.is-zone) { opacity: 0.12; }
@media (prefers-reduced-motion: reduce) { .bm-shape.is-hit, .bm-here-pulse { animation: none; } }


/* Produits éditoriaux : carte « Fnac Wilson » par-dessus le plan */
.other-store {
  position: absolute;
  z-index: 6;
  inset: 4% 6%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 2rem 2.4rem;
  border-radius: var(--radius-xl);
  background: var(--yellow);
  color: var(--ink);
  box-shadow: 0 2rem 4rem -1.2rem rgba(0, 0, 0, 0.7);
  animation: msg-in 0.5s var(--ease-out) both;
}
.other-store[hidden] { display: none; }
/* Adresse à gauche, QR code d'itinéraire à droite. */
.other-store:not([hidden]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 2.4rem;
}
.other-store-info { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.other-store-qr { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 0.8rem; }
.other-store-qr img {
  display: block;
  width: clamp(8.5rem, 12vw, 12rem);
  height: auto;
  padding: 0.6rem;
  border-radius: var(--radius-l);
  background: var(--paper);
}
.other-store-qr figcaption {
  max-width: 13rem;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-wrap: balance;
}
.other-store-icon { width: 3rem; height: 3rem; margin-bottom: 1rem; }
.other-store-title { margin: 0; font-size: clamp(2.4rem, 3.2vw, 3.6rem); font-weight: 900; font-stretch: 122%; line-height: 1; letter-spacing: -0.03em; }
.other-store-what { margin: 0.9rem 0 0; font-size: 1.35rem; font-weight: 600; }
.other-store-address { margin: 1.2rem 0 0; font-size: clamp(1.3rem, 1.6vw, 1.7rem); font-weight: 800; line-height: 1.2; }
.other-store-near {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1rem 0 0;
  padding: 0.4rem 1rem 0.4rem 0.6rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 1.05rem;
  font-weight: 700;
}
.other-store-near svg { color: var(--yellow); }
/* « Faire commander par un vendeur » : le magasin commande les livres, CD et
   DVD qu'il ne vend pas en rayon. Bouton plein, devant « Retour au plan ». */
.other-store-order {
  min-height: 3.4rem;
  margin-top: 1.4rem;
  padding: 0 1.8rem;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 1.1rem;
  font-weight: 800;
}
.other-store-order + .other-store-close { margin-top: 0.7rem; }
.other-store-close {
  min-height: 3.4rem;
  margin-top: 1.4rem;
  padding: 0 1.8rem;
  border: 0.13rem solid var(--ink);
  border-radius: 999px;
  background: transparent;
  font-size: 1.1rem;
  font-weight: 800;
}
.is-elsewhere .floor.is-active { opacity: 0.18; }

/* Tracé animé de l'itinéraire sur le plan */
.route-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.route-casing { fill: none; stroke: var(--ink); stroke-width: 0.85rem; stroke-linecap: round; stroke-linejoin: round; }
.route-line { fill: none; stroke: var(--paper); stroke-width: 0.38rem; stroke-linecap: round; stroke-linejoin: round; }
.route-start { fill: var(--ink); stroke: var(--paper); stroke-width: 0.2rem; }
.route-end {
  fill: var(--yellow);
  stroke: var(--ink);
  stroke-width: 0.25rem;
  transform-box: fill-box;
  transform-origin: center;
  animation: route-end 1.6s ease-out infinite;
}
@keyframes route-end { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
.route-walker { fill: var(--yellow); stroke: var(--ink); stroke-width: 0.2rem; }

/* Itinéraire */
.map-foot { min-height: 3.4rem; display: flex; align-items: center; }
.route-hint { margin: 0; font-size: 1.05rem; color: var(--on-ink-muted); }
.route { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.route[hidden], .route-hint[hidden], .route-step[hidden] { display: none; }
.route-step {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 3rem;
  padding: 0 1.1rem 0 0.8rem;
  border-radius: 999px;
  background: var(--ink-2);
  font-size: 1.05rem;
  font-weight: 700;
  animation: msg-in 0.5s var(--ease-out) both;
}
.route-step + .route-step::before {
  content: "";
  width: 1.1rem;
  height: 0.13rem;
  margin: 0 0.6rem 0 -1.2rem;
  border-radius: 1rem;
  background: var(--on-ink-muted);
}
.route-step:nth-child(2) { animation-delay: 0.08s; }
.route-step:nth-child(3) { animation-delay: 0.16s; }
.route-target { background: var(--yellow); color: var(--ink); }

/* =====================================================================
   Fenêtres, notification
   ===================================================================== */
dialog {
  padding: 2.2rem 2.4rem;
  border: 0;
  border-radius: var(--radius-xl);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 2rem 5rem -1.5rem rgba(0, 0, 0, 0.5);
}
dialog::backdrop { background: rgba(18, 18, 18, 0.55); }
dialog[open] { animation: msg-in 0.4s var(--ease-out) both; }

.idle-warning { width: min(34rem, 90vw); text-align: center; }

.survey { width: min(40rem, 92vw); text-align: center; }
.survey-title { margin: 0 0 1.6rem; font-size: 2rem; font-weight: 900; font-stretch: 115%; line-height: 1.12; text-wrap: balance; }
.survey-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.survey-buttons[hidden] { display: none; }
.survey-yes, .survey-no {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 8rem;
  border: 0.18rem solid var(--ink);
  border-radius: var(--radius-l);
  background: var(--paper);
  font-size: 1.5rem;
  font-weight: 850;
}
.survey-yes { background: var(--yellow); border-color: var(--yellow); }
.survey-yes span:first-child, .survey-no span:first-child { font-size: 2.8rem; line-height: 1; }
.survey-yes:active, .survey-no:active { transform: scale(0.98); }
.survey-skip {
  grid-column: 1 / -1;
  min-height: 3.2rem;
  border: 0;
  border-radius: 999px;
  background: var(--mist);
  font-size: 1.05rem;
  font-weight: 700;
}
.idle-warning-title { margin: 0; font-size: 2.2rem; font-weight: 900; font-stretch: 120%; line-height: 1.05; }
.idle-warning-body { margin: 0.8rem 0 1.6rem; font-size: 1.25rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.idle-warning button, .settings-buttons button {
  min-height: 3.6rem;
  padding: 0 2.2rem;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--yellow);
  font-size: 1.2rem;
  font-weight: 800;
}

.settings { width: min(54rem, 94vw); max-height: 92vh; overflow-y: auto; user-select: auto; }
.settings label.check { display: flex; align-items: center; gap: 0.8rem; font-weight: 600; }
.settings label.check input { width: 1.5rem; height: 1.5rem; min-height: 0; accent-color: var(--ink); flex: none; }
.neural { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 0.13rem solid var(--line); }
.neural h3 { margin: 0 0 0.8rem; font-size: 1.3rem; font-weight: 900; font-stretch: 112%; }
.neural-status { margin: 0.9rem 0; font-size: 0.95rem; line-height: 1.5; color: var(--text-muted); }
.neural-download {
  min-height: 3rem;
  padding: 0 1.2rem;
  border: 0.13rem solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  font-weight: 750;
}
.neural-download[disabled] { opacity: 0.5; }
.stats { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 0.13rem solid var(--line); }
.stats h3 { margin: 0 0 0.6rem; font-size: 1.3rem; font-weight: 900; font-stretch: 112%; }
.stats h4 { margin: 0 0 0.5rem; font-size: 1rem; font-weight: 800; }
.stats-summary { margin: 0 0 1.2rem; font-size: 1rem; line-height: 1.45; font-variant-numeric: tabular-nums; }
.stats-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.stats-list { margin: 0; padding: 0; list-style: none; font-size: 0.95rem; }
.stats-list li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0; border-bottom: 0.06rem solid var(--line); }
.stats-list li span { overflow-wrap: anywhere; }
.stats-list b { font-variant-numeric: tabular-nums; }
.stats-list .is-empty { color: var(--text-muted); border-bottom: 0; }
.stats-subtitle { margin-top: 1.4rem !important; font-size: 1.1rem !important; }
.stats-note { margin: 1rem 0 0.8rem; font-size: 0.85rem; color: var(--text-muted); }
.stats-reset {
  min-height: 3rem;
  padding: 0 1.2rem;
  border: 0.13rem solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  font-weight: 750;
}
.stats-export { margin: 1.4rem 0; padding-top: 1.2rem; border-top: 0.13rem solid var(--line); }
.stats-export-row { display: grid; grid-template-columns: minmax(0, 1fr) 9rem; gap: 0.8rem; }
.stats-export-buttons { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.stats-send {
  min-height: 3rem;
  padding: 0 1.3rem;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--yellow);
  font-weight: 800;
}
.stats-send[disabled] { opacity: 0.5; }
#reportStatus.is-error { color: #B3261E; font-weight: 700; }
#reportStatus.is-ok { color: var(--ink); font-weight: 700; }
.stats-reset.is-armed { background: #D23B2A; border-color: #D23B2A; color: var(--paper); }
.settings h2 { margin: 0 0 1.2rem; font-size: 1.6rem; font-weight: 900; font-stretch: 115%; }
.settings label { display: grid; gap: 0.35rem; margin-bottom: 0.9rem; font-size: 0.95rem; font-weight: 700; }
.settings select, .settings input {
  min-height: 3rem;
  padding: 0 0.8rem;
  border: 0.13rem solid var(--line);
  border-radius: 0.8rem;
  background: var(--mist);
  font-weight: 500;
}
.settings-buttons { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 1.4rem; }
.settings-buttons button:first-child { background: var(--mist); color: var(--ink); }

.toast {
  position: fixed;
  z-index: 20;
  left: 50%;
  bottom: 2.2rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1rem 1.6rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 1.15rem;
  font-weight: 700;
  box-shadow: 0 1.2rem 2.5rem -1rem rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: translate(-50%, 1.2rem);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.5s var(--ease-out);
}
.toast::before { content: ""; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--yellow); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* =====================================================================
   Mode accessibilité et mouvements réduits
   ===================================================================== */
/* Contraste renforcé : noir sur blanc ou sur jaune, bordures épaisses, aucun gris. */
html.a11y {
  --text-muted: #121212;
  --on-ink-muted: #FFFFFF;
  --line: #121212;
  --mist: #FFFFFF;
}
html.a11y .msg { font-size: 1.25rem; font-weight: 650; line-height: 1.42; }
html.a11y .msg-jeanne { background: var(--paper); box-shadow: inset 0 0 0 0.2rem var(--ink); }
html.a11y .msg-user { background: var(--ink); color: var(--paper); font-weight: 800; }
html.a11y .jeanne-status, html.a11y .suggestions-title, html.a11y .tile-detail { color: var(--ink); font-weight: 800; }
html.a11y .route-hint, html.a11y .floors button { color: var(--paper); }
html.a11y .suggestions { display: none; }
/* La conversation prend plus de largeur ; photo et nom de Jeanne réduits. */
html.a11y .app { grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); }
html.a11y .assistant { gap: 0.7rem; }
html.a11y .jeanne-slot { width: 4.6rem; height: 4.6rem; }
html.a11y .jeanne-name { font-size: 1.7rem; }
html.a11y .langs button { padding: 0 0.7rem 0 0.55rem; }
html.a11y .mic { min-height: 4rem; }
html.a11y .actions { grid-template-columns: 1.25fr 1fr 1fr; gap: 0.4rem; }
html.a11y .action { padding: 0 0.5rem; font-size: 0.9rem; }
html.a11y .floors button { gap: 0.4rem; padding: 0 0.9rem 0 0.35rem; }
html.a11y .floors button[aria-selected="true"] { color: var(--ink); }
html.a11y .map-head h2 { font-size: 1.7rem; white-space: nowrap; }
html.a11y .action, html.a11y .ask input, html.a11y .langs {
  box-shadow: inset 0 0 0 0.18rem var(--ink);
  font-weight: 850;
}
html.a11y .action[aria-pressed="true"] { background: var(--yellow); box-shadow: inset 0 0 0 0.26rem var(--ink); }
html.a11y .ask input::placeholder { color: var(--ink); opacity: 0.8; }
html.a11y .choice { border-width: 0.22rem; font-size: 1.2rem; font-weight: 850; }
html.a11y .msg-choices.is-options .choice { border-color: var(--ink); }
html.a11y .msg-choices.is-done .choice:not(.is-chosen) { opacity: 0.5; }
html.a11y :focus-visible { outline-width: 0.35rem; }
/* Plan : noms des rayons plus gros, tracé plus épais, rayon trouvé très visible. */
html.a11y .map { background: #000; }
html.a11y .bm-label { font-size: 14px; stroke-width: 4.5px; }
html.a11y .plan-0 .bm-label { font-size: 13px; stroke-width: 4px; }
html.a11y .bm-label.is-hit, html.a11y .plan-0 .bm-label.is-hit { font-size: 17px; }
html.a11y .has-focus .bm-label:not(.is-hit) { opacity: 0.55; }
html.a11y .bm-shape.is-hit { stroke-width: 5px; }
html.a11y .route-line { stroke-width: 0.55rem; }

html.a11y .has-focus .tile:not(.is-hit):not(.is-route) { opacity: 0.25; }

html.a11y *, html.a11y *::before, html.a11y *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Mesure du niveau du micro, dans les réglages du personnel : la barre monte
   avec le volume, le trait marque le seuil choisi. */
.mic-level {
  position: relative;
  height: 1.1rem;
  margin: 0.4rem 0 0.8rem;
  border-radius: 999px;
  background: rgba(18, 18, 18, 0.12);
  overflow: hidden;
}
.mic-level i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--ink);
  transition: width 0.08s linear;
}
.mic-level b {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0.18rem;
  background: #c62828;
  display: none;
}