/* Le téléphone de Teo : EXPERAISE
   Charte : #030923 (nuit), #161EDD (bleu), #E8E8FC (brume). Interface iOS : police système.
   Tout l'intérieur du téléphone est en em : la taille de base suit la largeur de l'écran (390 px = 16 px). */

:root {
  --navy: #030923;
  --ink: #05081c;
  --card: #0d1330;
  --card-2: #151b44;
  --line: #ffffff1a;
  --blue: #161edd;
  --blue-hi: #3146ff;
  --pale: #8a98ff;
  --mist: #e8e8fc;
  --dim: #a9b0d6;
  --red: #ff453a;
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'Geist Mono', Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

html,
body {
  height: 100%;
}

body {
  font-family: var(--font);
  color: #fff;
  background: radial-gradient(60% 50% at 50% 0%, #0b1250 0%, transparent 70%), #02040f;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  overscroll-behavior: none;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--pale);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.noscript {
  position: fixed;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 1em;
  padding: 2em;
  text-align: center;
  background: var(--navy);
  z-index: 10;
}

/* ------------------------------------------------------------------ cadre */
.stage {
  display: grid;
  place-items: center;
  min-height: 100dvh;
}

.device {
  --w: min(390px, calc((100dvh - 32px) * 390 / 844));
  width: var(--w);
  aspect-ratio: 390 / 844;
  padding: calc(var(--w) * 0.028);
  border-radius: calc(var(--w) * 0.15);
  background: #0a0b12;
  box-shadow: 0 0 0 2px #2b2e42, 0 0 0 calc(var(--w) * 0.01) #14162200, 0 3em 8em #000a, 0 0 6em #161edd33;
}

.screen {
  position: relative;
  width: 100%;
  height: 100%;
  font-size: calc(var(--w) / 24.375);
  border-radius: calc(var(--w) * 0.122);
  overflow: hidden;
  isolation: isolate;
  background: var(--navy);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.screen::after {
  /* îlot dynamique */
  content: '';
  position: absolute;
  top: 0.75em;
  left: 50%;
  width: 7.4em;
  height: 2.1em;
  transform: translateX(-50%);
  border-radius: 1em;
  background: #000;
  z-index: 90;
  pointer-events: none;
}

@media (max-width: 520px) {
  .stage {
    display: block;
  }
  .device {
    --w: 100vw;
    width: 100vw;
    height: 100dvh;
    aspect-ratio: auto;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .screen {
    border-radius: 0;
  }
}

.wallpaper {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(85% 48% at 88% 2%, #161edd 0%, #161edd00 72%),
    radial-gradient(75% 42% at 4% 98%, #3146ff66 0%, #3146ff00 72%),
    linear-gradient(180deg, #060d38, #030923 62%);
}

/* ------------------------------------------------------------ barre d'état */
.statusbar {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 85;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 3.2em;
  padding: 0.25em 2em 0;
  font-size: 0.92em;
  font-weight: 600;
  pointer-events: none;
}

.sb-right {
  display: flex;
  align-items: center;
  gap: 0.35em;
}

.sb-right svg {
  height: 0.75em;
  width: auto;
}

.sb-batt {
  height: 0.85em !important;
}

.sb-batt-num {
  font-size: 9px;
  font-weight: 700;
  fill: #000;
  mix-blend-mode: normal;
}

/* ----------------------------------------------------------- écran verrouillé */
.lock {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4em 1.5em 1.1em;
  text-align: center;
  touch-action: none;
  transform: translateY(var(--drag, 0px));
  transition: transform 0.35s var(--ease);
}

.lock.is-dragging {
  transition: none;
}

.lock.is-lifting {
  transform: translateY(-105%);
  opacity: 0;
  transition:
    transform 0.6s var(--ease),
    opacity 0.55s ease;
  pointer-events: none;
}

.lock-icon svg {
  width: 0.8em;
  height: auto;
  opacity: 0.9;
}

.lock-date {
  margin-top: 0.6em;
  font-size: 1.05em;
  font-weight: 500;
  opacity: 0.92;
}

.lock-time {
  font-size: 5.4em;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.lock-text {
  margin-top: 2.2em;
  font-size: 0.95em;
  font-style: italic;
  opacity: 0.88;
}

.lock-spacer {
  flex: 1;
}

.lock-logo {
  height: 1.55em;
  width: auto;
  margin-bottom: 1.6em;
  opacity: 0.95;
}

.lock-cta {
  padding: 0.5em 1em;
  background: none;
  border: 0;
  font-size: 0.9em;
  font-weight: 500;
  opacity: 0.9;
  animation: nudge 2.6s ease-in-out infinite;
}

.lock-bar {
  width: 9em;
  height: 0.35em;
  margin-top: 0.6em;
  border-radius: 1em;
  background: #fff;
  opacity: 0.9;
}

@keyframes nudge {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.35em);
  }
}

/* ------------------------------------------------------------------ accueil */
.home {
  position: absolute;
  inset: 0;
  z-index: 10;
  padding: 4.6em 1.1em 0;
}

.home.is-locked {
  visibility: hidden;
}

.grid,
.dock {
  list-style: none;
  padding: 0;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5em 0.2em;
}

.app-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45em;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  transition: transform 0.15s var(--ease);
}

.app-icon:active {
  transform: scale(0.92);
}

.ic-wrap {
  position: relative;
  display: block;
}

.ic {
  display: block;
  width: 3.75em;
  height: 3.75em;
  border-radius: 22.37%;
}

.ic img {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-user-drag: none;
}

.ic-mini {
  flex: none;
  width: 2.3em;
  height: 2.3em;
}

.v-icon {
  width: 4.6em;
  height: 4.6em;
}

.app-label {
  font-size: 0.72em;
  font-weight: 500;
  line-height: 1.1;
  text-align: center;
  text-shadow: 0 1px 6px #0006;
}

.badge {
  position: absolute;
  top: -0.45em;
  right: -0.45em;
  min-width: 1.5em;
  height: 1.5em;
  padding: 0 0.4em;
  display: grid;
  place-items: center;
  border-radius: 1em;
  background: var(--red);
  font-size: 0.78em;
  font-weight: 700;
}

.widget {
  display: grid;
  gap: 0.2em;
  width: 100%;
  margin-top: 1.8em;
  padding: 1em 1.1em 1.1em;
  border: 0;
  border-radius: 1.7em;
  background: #ffffff1c;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: inset 0 0 0 1px #ffffff1f;
  text-align: left;
  transition: transform 0.15s var(--ease);
}

.widget:active {
  transform: scale(0.97);
}

.widget-eyebrow {
  font-family: var(--mono);
  font-size: 0.72em;
  letter-spacing: 0.12em;
  color: var(--pale);
}

.widget-title {
  font-size: 2.6em;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.widget-text {
  max-width: 17em;
  font-size: 0.88em;
  line-height: 1.4;
  color: var(--mist);
}

.widget-cta {
  justify-self: start;
  margin-top: 0.6em;
  padding: 0.4em 0.9em;
  border-radius: 1em;
  background: var(--blue-hi);
  font-size: 0.82em;
  font-weight: 600;
}

.dock {
  position: absolute;
  left: 0.9em;
  right: 0.9em;
  bottom: 1em;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 5.4em;
  padding: 0 0.6em;
  border-radius: 2.2em;
  background: #ffffff2e;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.dock .app-icon {
  width: auto;
}

/* --------------------------------------------------------------------- apps */
.app-layer {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}

.app {
  position: absolute;
  inset: 0;
  pointer-events: auto;
  background: var(--ink);
  transition:
    transform 0.4s var(--ease),
    opacity 0.28s ease,
    border-radius 0.4s var(--ease);
}

.app.is-entering {
  transform: translate(var(--from-x, 0), var(--from-y, 0)) scale(0.1);
  opacity: 0;
  border-radius: 3em;
}

.app.is-leaving {
  transform: scale(0.9);
  opacity: 0;
  pointer-events: none;
}

.stack {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.app-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 3.5em 1.1em 0.7em;
}

.app-back {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.4em;
  height: 2.4em;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ffffff14;
}

.app-back svg {
  width: 1.25em;
  height: 1.25em;
}

.app-title {
  font-size: 1.45em;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.app-body {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 5em;
  scrollbar-width: none;
  overscroll-behavior: contain;
}

.app-body::-webkit-scrollbar {
  display: none;
}

.enter-fwd {
  animation: in-right 0.3s var(--ease);
}

.enter-back {
  animation: in-left 0.3s var(--ease);
}

@keyframes in-right {
  from { transform: translateX(14%); opacity: 0; }
}

@keyframes in-left {
  from { transform: translateX(-14%); opacity: 0; }
}

.homebar {
  position: absolute;
  left: 50%;
  bottom: 0.2em;
  z-index: 60;
  width: 10em;
  height: 1.9em;
  transform: translateX(-50%);
  padding: 0;
  background: none;
  border: 0;
}

.homebar[hidden] {
  display: none;
}

.homebar::after {
  content: '';
  display: block;
  width: 9em;
  height: 0.35em;
  margin: 0.9em auto 0;
  border-radius: 1em;
  background: #fff;
  opacity: 0.85;
}

/* ------------------------------------------------------------- briques communes */
.pad-x {
  padding: 0 1.1em;
}

.sub {
  margin: 0 0 0.9em;
  font-size: 0.85em;
  color: var(--dim);
}

.intro {
  margin: 0.2em 0 1em;
  font-size: 0.92em;
  line-height: 1.45;
  color: var(--mist);
}

.foot {
  margin: 1.2em 0 0;
  font-size: 0.78em;
  line-height: 1.45;
  color: var(--dim);
}

.sec {
  margin: 1.5em 0 0.6em;
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pale);
  font-family: var(--mono);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.9em;
  padding: 0 1.3em;
  border: 0;
  border-radius: 1em;
  background: var(--blue-hi);
  color: #fff;
  font-size: 1em;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
}

.btn:active {
  filter: brightness(0.9);
}

.btn-block {
  display: flex;
  width: 100%;
  margin-top: 1.1em;
}

.btn-ghost {
  background: #ffffff14;
}

.btn-small {
  min-height: 2.3em;
  padding: 0 1em;
  font-size: 0.9em;
}

.tag {
  display: inline-block;
  flex: none;
  padding: 0.25em 0.6em;
  border-radius: 0.6em;
  font-family: var(--mono);
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  background: #2a2d3d;
  color: #d5d8ea;
}

.tag-mesure { background: #0f3a2c; color: #5cf0b4; }
.tag-declare { background: #3d3110; color: #ffd166; }
.tag-calcule { background: #1b2266; color: #aab4ff; }
.tag-exemple { background: #3d1530; color: #ffb3d6; }
.tag-observe { background: #0f3446; color: #7fd6ff; }
.tag-decrit { background: #2a2d3d; color: #d5d8ea; }

.rows {
  list-style: none;
  padding: 0;
  overflow: hidden;
  border-radius: 1.1em;
  background: var(--card);
}

.rows li + li {
  border-top: 1px solid var(--line);
}

.row {
  display: flex;
  align-items: center;
  gap: 0.8em;
  width: 100%;
  padding: 0.95em 1em;
  background: none;
  border: 0;
  text-align: left;
  text-decoration: none;
}

.row svg {
  flex: none;
  width: 1em;
  height: 1em;
  opacity: 0.5;
}

.row-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.25em;
  min-width: 0;
}

.row-main strong {
  font-weight: 600;
}

.row-sub {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.85em;
  line-height: 1.35;
  color: var(--dim);
}

/* ------------------------------------------------------------------ galerie */
.g-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.35em;
  list-style: none;
  padding: 0;
}

.g-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0.6em;
  background: var(--card);
}

.g-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.g-viewer {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  outline: none;
}

.g-stage {
  position: relative;
  min-height: 0;
  overflow: hidden;
  touch-action: pan-y;
}

.g-full {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  max-width: calc(100% - 2.2em);
  max-height: 100%;
  margin: auto;
  object-fit: contain;
  border-radius: 1em;
  box-shadow: 0 0 0 1px #ffffff1f;
}

.g-nav {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 2.4em;
  height: 2.4em;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  border-radius: 50%;
  background: #05081ccc;
  backdrop-filter: blur(8px);
}

.g-nav svg {
  width: 1.2em;
  height: 1.2em;
}

.g-nav:disabled {
  opacity: 0.25;
}

.g-prev { left: 1.6em; }
.g-next { right: 1.6em; }

.g-cap {
  display: grid;
  gap: 0.7em;
  padding: 0.9em 1.1em 3em;
}

.g-brand {
  display: block;
  font-size: 1.1em;
}

.g-meta {
  display: block;
  margin-top: 0.2em;
  font-size: 0.8em;
  color: var(--dim);
}

.g-actions:empty {
  display: none;
}

.g-count {
  font-family: var(--mono);
  font-size: 0.75em;
  color: var(--dim);
}

/* -------------------------------------------------------------------- notes */
.n-note {
  padding-top: 0.3em;
}

.n-title {
  margin: 0.1em 0 0.7em;
  font-size: 1.5em;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.n-p {
  margin: 0.7em 0;
  line-height: 1.5;
  color: var(--mist);
}

.n-tags {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.7em 0.8em;
  align-items: baseline;
  margin: 1em 0;
  padding: 1em;
  border-radius: 1em;
  background: var(--card);
}

.n-tags dd {
  line-height: 1.35;
  font-size: 0.92em;
  color: var(--mist);
}

.n-example {
  margin: 1.1em 0;
  padding: 1em;
  border-left: 0.25em solid var(--blue-hi);
  border-radius: 0.3em 1em 1em 0.3em;
  background: var(--card);
}

.n-example strong {
  display: block;
  margin-bottom: 0.5em;
  font-family: var(--mono);
  font-size: 0.78em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--pale);
}

.n-example ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.4em;
  font-size: 0.92em;
  line-height: 1.4;
}

/* --------------------------------------------------------------- calendrier */
.cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.7em;
}

.cal-month {
  font-size: 1.2em;
}

.cal-nav-btns {
  display: flex;
  gap: 0.4em;
}

.cal-btn {
  display: grid;
  place-items: center;
  width: 2.2em;
  height: 2.2em;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ffffff14;
}

.cal-btn svg {
  width: 1.1em;
  height: 1.1em;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  row-gap: 0.25em;
  padding: 0.6em;
  border-radius: 1.1em;
  background: var(--card);
  text-align: center;
}

.cal-dow {
  padding-bottom: 0.4em;
  font-size: 0.72em;
  color: var(--dim);
}

.cal-cell {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  font-size: 0.95em;
  font-variant-numeric: tabular-nums;
}

.cal-cell.is-today {
  border-radius: 50%;
  background: var(--blue-hi);
  font-weight: 700;
}

.cal-cell.has-event::after {
  content: '';
  position: absolute;
  bottom: 0.15em;
  width: 0.35em;
  height: 0.35em;
  border-radius: 50%;
  background: var(--pale);
}

.agenda {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.6em;
}

.agenda-item {
  display: grid;
  gap: 0.25em;
  padding: 0.8em 1em;
  border-left: 0.25em solid var(--blue-hi);
  border-radius: 0.3em 1em 1em 0.3em;
  background: var(--card);
}

.agenda-when {
  font-family: var(--mono);
  font-size: 0.74em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pale);
}

.agenda-what {
  font-size: 0.92em;
  line-height: 1.35;
}

.agenda-what em {
  font-style: normal;
  color: var(--dim);
}

/* ----------------------------------------------------------------- contacts */
.c-card {
  text-align: center;
}

.c-avatar {
  display: grid;
  place-items: center;
  width: 5.2em;
  height: 5.2em;
  margin: 0.2em auto 0.7em;
  border-radius: 50%;
  background: linear-gradient(150deg, #3146ff, #161edd);
  font-size: 1.5em;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.c-name {
  font-size: 1.6em;
}

.c-org {
  margin-top: 0.15em;
  color: var(--dim);
}

.c-actions {
  display: flex;
  justify-content: center;
  gap: 0.8em;
  margin: 1.1em 0 1.3em;
}

.c-action {
  display: grid;
  gap: 0.45em;
  justify-items: center;
  width: 5.2em;
  padding: 0.7em 0 0.6em;
  border-radius: 1em;
  background: var(--card);
  font-size: 0.78em;
  text-decoration: none;
}

.c-action-ic svg {
  width: 1.7em;
  height: 1.7em;
  color: var(--pale);
}

.rows-info {
  text-align: left;
}

.row-info {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2em;
}

.row-label {
  font-size: 0.74em;
  color: var(--dim);
  text-transform: lowercase;
}

.row-value {
  color: var(--pale);
}

.c-about {
  margin-top: 1em;
  padding: 1em;
  border-radius: 1.1em;
  background: var(--card);
  text-align: left;
  line-height: 1.5;
  font-size: 0.92em;
}

.c-proof {
  margin-top: 0.7em;
  font-weight: 600;
}

.c-proof-note {
  font-weight: 400;
  color: var(--dim);
}

/* ---------------------------------------------------------------- cas, calcul */
.k-detail .tag {
  font-size: 0.78em;
}

.k-fact {
  margin: 1em 0 0.6em;
  font-size: 1.05em;
  line-height: 1.5;
}

.k-note {
  line-height: 1.45;
  color: var(--dim);
}

.k-fields {
  display: grid;
  gap: 0.7em;
  margin: 0.4em 0 1em;
}

.k-field {
  display: grid;
  gap: 0.35em;
  font-size: 0.85em;
  color: var(--dim);
}

.k-input-wrap {
  display: flex;
  align-items: center;
  border-radius: 0.9em;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
}

.k-input-wrap:focus-within {
  box-shadow: inset 0 0 0 2px var(--pale);
}

.k-input {
  flex: 1;
  min-width: 0;
  padding: 0.75em 0.9em;
  border: 0;
  outline: none;
  background: none;
  color: #fff;
  font: inherit;
  font-size: 1.15em;
  font-variant-numeric: tabular-nums;
  user-select: text;
  -webkit-user-select: text;
}

.k-unit {
  padding-right: 1em;
  color: var(--dim);
}

.k-outs {
  display: grid;
  gap: 0.6em;
}

.k-out {
  display: grid;
  gap: 0.2em;
  padding: 0.9em 1em;
  border-radius: 1em;
  background: var(--card-2);
}

.k-out-label {
  font-size: 0.82em;
  color: var(--dim);
}

.k-out-value {
  font-size: 1.7em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.k-out-formula {
  font-family: var(--mono);
  font-size: 0.7em;
  color: var(--pale);
}

/* --------------------------------------------------------------- ressources */
.cards {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.7em;
}

.card {
  display: grid;
  gap: 0.35em;
  padding: 1em;
  border-radius: 1.1em;
  background: var(--card);
  text-decoration: none;
}

.card-text {
  font-size: 0.9em;
  line-height: 1.4;
  color: var(--mist);
}

.card-url {
  font-family: var(--mono);
  font-size: 0.72em;
  color: var(--pale);
  overflow-wrap: anywhere;
}

/* ----------------------------------------------------------------- messages */
.m-wrap {
  display: flex;
  flex-direction: column;
  gap: 1em;
  padding: 0.4em 1.1em 1em;
}

.m-thread {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
}

.m-bubble {
  max-width: 84%;
  padding: 0.6em 0.9em;
  border-radius: 1.2em;
  font-size: 0.95em;
  line-height: 1.4;
  animation: pop 0.25s var(--ease);
}

.m-them {
  align-self: flex-start;
  border-bottom-left-radius: 0.3em;
  background: #20264f;
}

.m-me {
  align-self: flex-end;
  border-bottom-right-radius: 0.3em;
  background: var(--blue-hi);
}

.m-typing {
  display: flex;
  gap: 0.3em;
  padding: 0.85em 1em;
}

.m-typing i {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--dim);
  animation: blink 1s infinite;
}

.m-typing i:nth-child(2) { animation-delay: 0.15s; }
.m-typing i:nth-child(3) { animation-delay: 0.3s; }

@keyframes blink {
  0%, 60%, 100% { opacity: 0.3; }
  30% { opacity: 1; }
}

@keyframes pop {
  from { transform: scale(0.94); opacity: 0; }
}

.m-cta {
  align-self: flex-start;
  margin-top: 0.3em;
}

.m-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}

.m-chips.is-busy {
  opacity: 0.4;
  pointer-events: none;
}

.m-chip {
  padding: 0.55em 0.95em;
  border: 0;
  border-radius: 1.5em;
  background: var(--card-2);
  box-shadow: inset 0 0 0 1px #8a98ff55;
  font-size: 0.9em;
  color: var(--mist);
}

/* -------------------------------------------------------------- téléphone, visio */
.p-transcript .sec {
  margin-top: 1.2em;
}

.v-card {
  display: grid;
  justify-items: center;
  gap: 0.7em;
  padding-top: 1.5em;
  text-align: center;
}

.v-title {
  font-size: 1.5em;
}

.v-text {
  max-width: 20em;
  line-height: 1.5;
  color: var(--mist);
}

/* ------------------------------------------------------------- bannières, alerte */
.banners {
  position: absolute;
  inset: 3em 0.6em auto;
  z-index: 70;
  pointer-events: none;
}

.banner {
  display: flex;
  gap: 0.7em;
  width: 100%;
  padding: 0.8em 0.9em;
  border: 0;
  border-radius: 1.7em;
  background: #23284ad9;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: 0 0.6em 2em #0006;
  text-align: left;
  pointer-events: auto;
  transform: translateY(-140%);
  opacity: 0;
  transition:
    transform 0.4s var(--ease),
    opacity 0.3s ease;
}

.banner.show {
  transform: none;
  opacity: 1;
}

.banner-txt {
  display: grid;
  flex: 1;
  gap: 0.1em;
  min-width: 0;
  font-size: 0.88em;
  line-height: 1.3;
}

.banner-head {
  display: flex;
  justify-content: space-between;
  font-size: 0.82em;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.banner-title {
  font-weight: 600;
}

.banner-text {
  color: var(--mist);
}

.overlays {
  position: absolute;
  inset: 0;
  z-index: 80;
  pointer-events: none;
}

.overlays > * {
  pointer-events: auto;
}

.alert-backdrop {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #0007;
}

.alert {
  width: 17.5em;
  overflow: hidden;
  border-radius: 1.3em;
  background: #1e2142f2;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  text-align: center;
  animation: pop 0.25s var(--ease);
}

.alert h3 {
  padding: 1.1em 1em 0.2em;
  font-size: 1.05em;
}

.alert p {
  padding: 0 1em 1em;
  font-size: 0.85em;
  color: var(--mist);
}

.alert-btn {
  display: block;
  width: 100%;
  padding: 0.85em;
  border: 0;
  border-top: 1px solid var(--line);
  background: none;
  font-size: 1em;
  color: var(--pale);
}

.alert-btn-main {
  font-weight: 600;
}

/* ------------------------------------------------------------------- appel */
.call {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 7em 1.6em 2.4em;
  background:
    radial-gradient(90% 55% at 50% 0%, #1b24a8aa 0%, #1b24a800 70%),
    #060c2cf2;
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  text-align: center;
  animation: pop 0.3s var(--ease);
}

.call.is-leaving {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.call-who h3 {
  font-size: 2.1em;
  font-weight: 500;
}

.call-who p,
.call-timer {
  margin-top: 0.3em;
  color: var(--mist);
  opacity: 0.85;
  font-variant-numeric: tabular-nums;
}

.call-opts {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: auto;
  padding: 0 0.4em;
}

.call-opt {
  display: grid;
  gap: 0.4em;
  justify-items: center;
  border: 0;
  background: none;
  font-size: 0.82em;
}

.call-opt-ic {
  display: grid;
  place-items: center;
  width: 3em;
  height: 3em;
  border-radius: 50%;
  background: #ffffff1f;
}

.call-opt-ic svg {
  width: 1.4em;
  height: 1.4em;
}

.call-slide {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 4.3em;
  margin-top: 1.4em;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 2.3em;
  background: #ffffff1f;
  touch-action: none;
}

.call-knob {
  position: absolute;
  left: 0.4em;
  display: grid;
  place-items: center;
  width: 3.5em;
  height: 3.5em;
  border-radius: 50%;
  background: #34c759;
  transform: translateX(var(--dx, 0px));
}

.call-knob svg {
  width: 1.6em;
  height: 1.6em;
}

.call-slide-text {
  padding-left: 3em;
  font-size: 1.05em;
  opacity: 0.85;
}

.call.is-answered {
  padding-top: 6em;
}

.call-label {
  margin: 2em 0 0.8em;
}

.call-caption {
  display: grid;
  gap: 0.8em;
  width: 100%;
  text-align: left;
  font-size: 1.05em;
  line-height: 1.45;
}

.call-caption p {
  animation: pop 0.35s var(--ease);
}

.call-hang {
  display: grid;
  place-items: center;
  width: 4.2em;
  height: 4.2em;
  margin-top: auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--red);
}

.call-hang svg {
  width: 1.8em;
  height: 1.8em;
  transform: rotate(135deg);
}

/* ------------------------------------------------------------- extinction, fin */
.off {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: #000;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.off.is-off {
  opacity: 1;
}

.off-dead {
  grid-area: 1 / 1;
  width: 5.5em;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.off.show-dead .off-dead {
  opacity: 1;
}

.off.show-end .off-dead {
  opacity: 0;
}

.off-end {
  grid-area: 1 / 1;
  display: grid;
  gap: 0.2em;
  justify-items: center;
  width: 100%;
  padding: 2em 1.8em;
  text-align: center;
  visibility: hidden;
  opacity: 0;
  transition:
    opacity 0.7s ease,
    visibility 0s 0.7s;
}

.off.show-end .off-end {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.7s ease;
}

.off-logo {
  height: 1.7em;
  width: auto;
  margin-bottom: 1.6em;
}

.off-end h3 {
  font-size: 1.7em;
}

.off-end p {
  max-width: 19em;
  margin-top: 0.5em;
  line-height: 1.5;
  color: var(--mist);
}

.off-end .btn {
  max-width: 18em;
}

.off-restart {
  margin-top: 1.6em;
  padding: 0.5em 1em;
  border: 0;
  background: none;
  font-size: 0.95em;
  color: var(--dim);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* ------------------------------------------------------------ mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}