/* La page d'appel reprend les codes de Meet/Teams : fond sombre, tuile principale, vignette, barre de commandes ronde. */
#view-call {
  --surface: #1D1650;
  --panel: #2A2168;
  --ctl: #3B3180;
  --ctl-hover: #4A3F96;
  --line: #4C4394;
  --muted: #C5BFEA;
  position: fixed; inset: 0; z-index: 50;
  background: var(--surface);
  color: #fff;
  font-weight: 500;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.screen-lobby, .screen-call, .screen-ended { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* ---------- Commandes rondes ---------- */
.ctl {
  position: relative;
  width: 3rem; height: 3rem;
  display: grid; place-items: center; flex: none;
  border: 0; border-radius: 50%;
  background: var(--ctl);
  color: #fff;
  cursor: pointer;
  transition: background .12s, transform .12s;
}
.ctl:hover { background: var(--ctl-hover); }
.ctl svg { display: block; width: 1.400rem; height: 1.400rem; grid-area: 1 / 1; }
.ctl .off { display: none; }
.ctl.is-off { background: #EA4335; }
.ctl.is-off:hover { background: #D83A2D; }
.ctl.is-off .on { display: none; }
.ctl.is-off .off { display: block; }
.ctl.is-active { background: #D9D3FF; color: var(--surface); }
.ctl--emoji { font-size: 1.350rem; line-height: 1; }
.ctl--emoji:active { transform: scale(.85); }
.ctl--hangup { width: 4.500rem; border-radius: 1.500rem; background: #EA4335; margin-left: .5rem; }
.ctl--hangup:hover { background: #D83A2D; }
.ctl--hangup svg { width: 1.700rem; height: 1.700rem; }
.icon-btn {
  position: relative;
  width: 2.750rem; height: 2.750rem;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: transparent; color: #fff; cursor: pointer;
}
.icon-btn:hover { background: var(--ctl); }
.icon-btn.is-active { background: #D9D3FF; color: var(--surface); }
.icon-btn svg { width: 1.400rem; height: 1.400rem; }
.count {
  position: absolute; top: .1rem; right: .1rem;
  min-width: 1.050rem; height: 1.050rem;
  border-radius: 999px; background: var(--ctl-hover); color: #fff;
  font-size: .68rem; font-weight: 700; line-height: 1.100rem; text-align: center;
}

.btn-call {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .8rem 2rem;
  border: 0; border-radius: 999px;
  background: #1FB57E; color: #fff;
  font-size: 1.100rem; font-weight: 700;
  cursor: pointer;
  transition: background .12s;
}
.btn-call:hover { background: #179A6A; }
.btn-call svg { width: 1.300rem; height: 1.300rem; }
.btn-plain { padding: .8rem 1.500rem; border-radius: 999px; background: var(--ctl); color: #fff; font-weight: 700; text-decoration: none; }
.btn-plain:hover { background: var(--ctl-hover); }

/* ---------- Niveau micro (trois barres, comme Meet) ---------- */
.mic-meter, .speak-meter {
  --level: 0;
  display: flex; align-items: center; justify-content: center; gap: 3px;
  width: 1.800rem; height: 1.800rem;
  border-radius: 50%;
  background: #4B6BF5;
}
.mic-meter i, .speak-meter i {
  width: 3px; height: 3px; border-radius: 2px; background: #fff;
  transition: height .06s linear;
}
.mic-meter i:nth-child(1), .mic-meter i:nth-child(3), .speak-meter i:nth-child(1), .speak-meter i:nth-child(3) { height: calc(3px + var(--level) * 7px); }
.mic-meter i:nth-child(2), .speak-meter i:nth-child(2) { height: calc(3px + var(--level) * 12px); }
.mic-meter--corner { position: absolute; top: .7rem; right: .7rem; }
.mic-off .mic-meter--corner { display: none; }
.mic-meter--wide {
  width: 100%; height: .5rem; border-radius: 999px; background: var(--ctl); justify-content: flex-start;
  overflow: hidden;
}
.mic-meter--wide i { display: none; }
.mic-meter--wide::before { content: ''; display: block; height: 100%; width: calc(var(--level) * 100%); background: #1FB57E; transition: width .06s linear; }

/* ---------- Salle d'attente ---------- */
.screen-lobby { padding: 1.250rem clamp(1.250rem, 3vw, 2.500rem); overflow-y: auto; }
.lobby-back { font: 400 1.200rem/1 var(--display); text-decoration: none; align-self: flex-start; }
.lobby-grid {
  flex: 1;
  display: grid; grid-template-columns: minmax(0, 1.600fr) minmax(280px, 1fr); gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  width: min(1180px, 100%);
  margin-inline: auto;
  padding-block: 1.500rem;
}
.self-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 1rem;
  background: #120C3A;
  overflow: hidden;
}
.self-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); display: none; }
.cam-on .self-video { display: block; }
.self-off-note { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.250rem; color: var(--muted); }
.cam-on .self-off-note { display: none; }
.lobby-controls { position: absolute; left: 0; right: 0; bottom: 1rem; display: flex; justify-content: center; gap: .75rem; }
.lobby-controls .ctl:not(.is-off) { background: rgb(255 255 255 / .16); backdrop-filter: blur(4px); }
.lobby-privacy { margin-top: .75rem; font-size: .95rem; color: var(--muted); }
.lobby-side h1 { font: 400 clamp(1.700rem, 2.800vw, 2.500rem)/1.1 var(--display); }
.lobby-side > p { margin-top: .75rem; color: var(--muted); max-width: 26rem; }
.field { display: grid; gap: .35rem; margin-top: 1.100rem; font-size: .95rem; }
.field > span { color: var(--muted); }
.field input[type='text'], .field select {
  width: 100%;
  padding: .7rem .9rem;
  border: 2px solid var(--line); border-radius: .75rem;
  background: var(--panel); color: #fff;
  font: inherit;
}
.field input::placeholder { color: #8F88C8; }
.lobby-side .btn-call { margin-top: 1.400rem; width: 100%; }
.lobby-link { display: block; margin-top: .9rem; text-align: center; color: var(--muted); text-underline-offset: .25em; }

/* ---------- Appel ---------- */
.call-top {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .75rem 1.250rem;
  min-height: 3.250rem;
}
.call-title { display: flex; align-items: center; gap: .6rem; font-weight: 600; }
.call-lock { width: 1rem; height: 1rem; color: var(--muted); }
.call-timer { padding-left: .6rem; margin-left: .15rem; border-left: 1px solid var(--line); color: var(--muted); font-variant-numeric: tabular-nums; }
[data-screen='ringing'] .call-timer { visibility: hidden; }
.demo-badge { padding: .2rem .8rem; border-radius: 999px; background: var(--gold); color: var(--maroon); font-size: .85rem; font-weight: 700; white-space: nowrap; }

.call-stage { flex: 1; min-height: 0; display: flex; gap: .75rem; padding: 0 .75rem; }
.call-main { flex: 1; min-width: 0; display: flex; }
.tile {
  position: relative;
  flex: 1;
  border-radius: 1rem;
  background: #120C3A;
  overflow: hidden;
}
.tile-santa::after {
  content: ''; position: absolute; inset: 0; z-index: 6;
  border-radius: inherit;
  box-shadow: inset 0 0 0 0 transparent;
  transition: box-shadow .15s;
  pointer-events: none;
}
.tile-santa.is-speaking::after { box-shadow: inset 0 0 0 4px var(--gold); }

/* Le décor derrière le Père Noël : son atelier, en léger parallaxe de profondeur */
.workshop { position: absolute; inset: 0; overflow: hidden; }
.wk-wall { position: absolute; inset: 0; background: #7A3A2E; background-image: repeating-linear-gradient(90deg, transparent 0 9.900%, #6A3026 9.900% 10%); }
.wk-wall::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 17%; background: #4C2118; }
.wk-window {
  position: absolute; left: 5%; top: 16%; width: 15%; aspect-ratio: 4 / 5;
  border: .6rem solid #F2C686; border-radius: 45% 45% .5rem .5rem / 35% 35% .5rem .5rem;
  background: #3A2A92;
  overflow: hidden;
}
.wk-window::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: #FFF3F2; border-radius: 60% 40% 0 0; }
.wk-window::after { content: ''; position: absolute; inset: 0; background: linear-gradient(#F2C686, #F2C686) center / .4rem 100% no-repeat, linear-gradient(#F2C686, #F2C686) center / 100% .4rem no-repeat; }
.wk-window i {
  position: absolute; inset: -100% 0 0;
  background-image: radial-gradient(circle, #fff 2px, transparent 3px), radial-gradient(circle, #fff 1.500px, transparent 2.500px);
  background-size: 34px 34px, 22px 22px; background-position: 0 0, 11px 13px;
  animation: wk-snow 14s linear infinite;
}
@keyframes wk-snow { to { transform: translateY(50%); } }
.wk-garland { position: absolute; left: 0; top: 0; width: 100%; height: 13%; }
.wk-lights b { position: absolute; width: .9rem; height: .9rem; border-radius: 50%; background: var(--c, #FFB52E); animation: wk-light 1.800s ease-in-out infinite; animation-delay: var(--d, 0s); }
.wk-lights b:nth-child(2n) { --c: #FF4653; --d: .6s; }
.wk-lights b:nth-child(3n) { --c: #8FA2F2; --d: 1.200s; }
@keyframes wk-light { 50% { opacity: .45; } }
.wk-fire {
  position: absolute; left: 76%; bottom: 13%; width: 20%; aspect-ratio: 6 / 5;
  border: 1rem solid #5A5170; border-bottom-width: 1.500rem; border-radius: .5rem .5rem 0 0;
  background: #1E1030;
  overflow: hidden;
}
.wk-fire i { position: absolute; bottom: -6%; left: 50%; width: 36%; aspect-ratio: 3 / 4; margin-left: -18%; border-radius: 50% 50% 45% 45% / 65% 65% 35% 35%; background: #FF7A2E; transform-origin: 50% 100%; animation: wk-flame 1.100s ease-in-out infinite; }
.wk-fire i:nth-child(2) { width: 24%; margin-left: -12%; background: var(--gold); animation-duration: .8s; animation-delay: .2s; }
.wk-fire i:nth-child(3) { width: 12%; margin-left: -6%; background: #FFE9A8; animation-duration: .6s; }
@keyframes wk-flame { 50% { transform: scale(.88, 1.120) rotate(3deg); } }
.wk-tree { position: absolute; left: 12%; bottom: 7%; width: 11%; overflow: visible; }
.wk-chair {
  position: absolute; left: 50%; bottom: 0; height: 90%; aspect-ratio: .86;
  transform: translateX(-50%);
  border-radius: 46% 46% 0 0 / 34% 34% 0 0;
  background: #4B7A33;
  box-shadow: inset 0 0 0 .9rem var(--gold), inset 0 0 0 1.100rem #E58A1B;
}

.tile-santa-host { position: absolute; left: 50%; bottom: 0; height: 94%; aspect-ratio: 556 / 424; max-width: 100%; transform: translateX(-50%); }
.tile-santa-host .santa { height: 100%; width: 100%; }

.tile-tag {
  position: absolute; left: .75rem; bottom: .75rem; z-index: 7;
  display: flex; align-items: center; gap: .35rem;
  max-width: calc(100% - 1.500rem);
  padding: .2rem .6rem;
  border-radius: .4rem;
  background: rgb(18 12 58 / .72);
  font-size: .9rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.speak-meter { position: absolute; top: .75rem; right: .75rem; z-index: 7; opacity: 0; transition: opacity .15s; }
.is-speaking .speak-meter { opacity: 1; }

.captions {
  position: absolute; left: 50%; bottom: 1.250rem; z-index: 7;
  width: min(44rem, 62%);
  padding: .55rem 1rem .65rem;
  border-radius: .6rem;
  background: rgb(18 12 58 / .86);
  transform: translateX(-50%);
  font-size: 1.150rem; line-height: 1.3;
}
.captions-who { display: block; font-size: .8rem; font-weight: 700; color: var(--gold); }

/* Vignette de soi-même, dans le coin */
.tile-self {
  position: absolute; right: 1rem; bottom: 1rem; z-index: 8;
  flex: none;
  width: clamp(150px, 17%, 260px);
  aspect-ratio: 16 / 10;
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: .8rem;
}
.self-avatar { position: absolute; inset: 0; display: grid; place-items: center; }
.cam-on .self-avatar { display: none; }
.self-initial { width: 3.250rem; height: 3.250rem; display: grid; place-items: center; border-radius: 50%; background: var(--mint); font-size: 1.400rem; font-weight: 700; }
.tile-tag--small { left: .4rem; bottom: .4rem; font-size: .8rem; max-width: calc(100% - .8rem); }
.tile-self .mic-meter--corner { top: .4rem; right: .4rem; width: 1.500rem; height: 1.500rem; }
.tag-muted { width: .95rem; height: .95rem; color: #FF8A80; display: none !important; }
.mic-off .tag-muted { display: block !important; }

/* Sonnerie */
.ring-overlay {
  position: absolute; inset: 0; z-index: 9;
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
  background: rgb(29 22 80 / .9);
}
[data-screen='ringing'] .ring-overlay { display: flex; }
[data-screen='ringing'] .tile-self, [data-screen='ringing'] .tile-tag:not(.tile-tag--small) { visibility: hidden; }
.ring-avatar-wrap { position: relative; width: clamp(8rem, 22vh, 13rem); aspect-ratio: 1; margin-bottom: 1rem; }
.ring-avatar { position: absolute; inset: 0; border-radius: 50%; background: #FFE9A8; overflow: hidden; }
.ring-avatar-wrap > i { position: absolute; inset: 0; border-radius: 50%; background: var(--gold); opacity: .4; animation: ring 2s ease-out infinite; }
.ring-avatar-wrap > i:nth-child(2) { animation-delay: .8s; }
@keyframes ring { to { transform: scale(1.700); opacity: 0; } }
.ring-name { font: 400 1.700rem/1.1 var(--display); }
.ring-state { color: var(--muted); font-size: 1.100rem; }

/* Réactions */
.reaction-layer { position: absolute; inset: 0; z-index: 7; pointer-events: none; overflow: hidden; }
.reaction { position: absolute; bottom: 12%; left: var(--x); font-size: 2.600rem; animation: react 2.600s ease-out both; }
@keyframes react {
  0% { transform: translateY(0) scale(.4); opacity: 0; }
  12% { transform: translateY(-5%) scale(1.150) rotate(var(--tilt)); opacity: 1; }
  100% { transform: translateY(-22rem) scale(1) rotate(calc(var(--tilt) * -1)); opacity: 0; }
}

/* Panneau latéral */
.side-panel {
  width: 22rem; flex: none;
  display: flex; flex-direction: column;
  border-radius: 1rem;
  background: #F6F3FF; color: #241B5E;
}
.side-panel header { display: flex; align-items: center; justify-content: space-between; padding: .75rem .75rem .5rem 1.250rem; }
.side-panel .icon-btn { color: #241B5E; }
.side-panel .icon-btn:hover { background: #E6DBFF; }
.panel-title { font-size: 1.150rem; font-weight: 700; }
.panel-section { flex: 1; min-height: 0; overflow-y: auto; padding: .25rem 1.250rem 1rem; }
.transcript-empty { color: #6A6296; }
.transcript-log { display: grid; gap: .8rem; }
.transcript-log strong { display: block; font-size: .85rem; }
.people { display: grid; gap: .7rem; }
.people li { display: flex; align-items: center; gap: .7rem; font-weight: 600; }
.people-avatar { width: 2.250rem; height: 2.250rem; display: grid; place-items: center; border-radius: 50%; background: var(--mint); color: #fff; font-weight: 700; }
.people-avatar--santa { background: var(--red); }

/* Barre de commandes */
.call-bar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
  padding: .75rem 1.250rem;
}
.bar-left { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--muted); }
.bar-center { display: flex; align-items: center; gap: .5rem; }
.bar-right { display: flex; justify-content: flex-end; gap: .25rem; }
.reactions { display: flex; gap: .25rem; padding: 0 .35rem; }
.volume { display: flex; align-items: center; border-radius: 999px; background: var(--ctl); }
.volume .ctl { background: transparent; }
.volume .ctl.is-off { background: #EA4335; }
.volume-slider { display: block; width: 5.500rem; padding-right: .9rem; }
.volume-input { display: block; width: 100%; accent-color: var(--gold); cursor: pointer; }
[data-screen='ringing'] .reactions, [data-screen='ringing'] [data-action='captions'], [data-screen='ringing'] .bar-right { visibility: hidden; }

/* ---------- Fin d'appel ---------- */
.screen-ended { align-items: center; justify-content: center; text-align: center; padding: 1.500rem; }
.ended-avatar { width: 11rem; aspect-ratio: 1; border-radius: 50%; background: #FFE9A8; overflow: hidden; margin-bottom: 1.250rem; }
.ended-title { font: 400 clamp(1.700rem, 3vw, 2.500rem)/1.1 var(--display); }
.ended-sub { margin-top: .5rem; color: var(--muted); font-size: 1.100rem; }
.ended-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .75rem; margin-top: 1.500rem; }

/* ---------- Message d'erreur et réglages ---------- */
.call-notice {
  position: absolute; left: 50%; top: 1rem; z-index: 60;
  max-width: min(36rem, calc(100% - 2rem));
  padding: .7rem 1.100rem;
  border-radius: .75rem;
  background: #fff; color: #241B5E; font-weight: 600;
  transform: translate(-50%, -300%);
  transition: transform .25s;
}
.call-notice.is-on { transform: translate(-50%, 0); }
.settings {
  width: min(30rem, calc(100% - 2rem));
  padding: 1.250rem 1.500rem 1.500rem;
  border: 0; border-radius: 1.250rem;
  background: var(--panel); color: #fff;
}
.settings::backdrop { background: rgb(18 12 58 / .7); }
.settings header { display: flex; align-items: center; justify-content: space-between; }
.settings h2 { font-size: 1.300rem; font-weight: 700; }
.settings input[type='range'] { width: 100%; accent-color: var(--gold); }
.settings-meter { display: grid; gap: .35rem; margin-top: .75rem; font-size: .85rem; color: var(--muted); }

/* ---------- Écrans étroits : l'appel est pensé pour l'ordinateur, mais reste utilisable ---------- */
@media (max-width: 900px) {
  .lobby-grid { grid-template-columns: 1fr; align-items: start; }
  .side-panel { position: absolute; inset: 3.250rem .75rem 5rem; width: auto; z-index: 20; }
  .reactions, .bar-left, .volume-slider { display: none; }
  .call-bar { grid-template-columns: 1fr auto; padding-inline: .5rem; }
  .bar-center { gap: .3rem; }
  .ctl { width: 2.650rem; height: 2.650rem; }
  .ctl--hangup { width: 3.500rem; }
  .bar-right .icon-btn:first-child { display: none; }
  .captions { width: calc(100% - 2rem); bottom: auto; top: .75rem; font-size: 1rem; }
  .tile-self { width: 110px; }
  .demo-badge { display: none; }
}