/* Wintg Meet — la salle de réunion. Même charte que Wintg Mail (Slabo, Nuit, Orange, Blanc Wintg), version sombre. Pas d'ombres. */
@font-face { font-family: "Slabo 27px"; src: url("/fonts/Slabo27px-Regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Slabo 13px"; src: url("/fonts/Slabo13px-Regular.woff2") format("woff2"); font-display: swap; }

:root {
  --orange: #E67A1E; --orange-ton: #D96F14; --orange-profond: #A84A08; --orange-pale: #FDE8D4;
  --blanc: #FFF8EF; --blanc-pur: #FFFFFF; --cacao: #3A1C0A; --taupe: #6E5846; --argile: #B5A08C; --filet: #EADFD0;
  --nuit: #171310; --surface: #221A14; --surface-2: #2E241C; --bordure-sombre: #3B2F26; --rouge: #C4321F;
  --titre: "Slabo 27px", Georgia, serif; --petit: "Slabo 13px", Georgia, serif;
  --mouvement: cubic-bezier(.2, .8, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
/* Téléphone : 1 rem = 4,4 % de la largeur, le même format sur tous les écrans. */
@media (max-width: 600px) { html { font-size: 4.4vw; } }
body { margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--nuit); color: var(--blanc); font: 400 1rem/1.5 var(--titre); -webkit-font-smoothing: antialiased; }
img, svg { display: block; }
a { color: inherit; }
h1, h2 { font-weight: 400; margin: 0; letter-spacing: -.01em; }
button, input, select { font: inherit; color: inherit; }
svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }
.motif { position: relative; isolation: isolate; }
.motif::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("/img/motif-trait-blanc.svg") 0 0 / 35rem; opacity: .03; pointer-events: none; }

.marque { display: flex; align-items: center; gap: 0.5rem; }
.marque img { width: 5.25rem; height: auto; }
.puce { display: inline-block; padding: 0.25rem 0.625rem; border-radius: 999px; background: var(--orange); color: var(--cacao); font: 400 0.75rem/1 var(--petit); letter-spacing: .06em; }
.etiquette { display: flex; align-items: center; gap: 0.625rem; margin: 0 0 0.75rem; font: 400 0.75rem/1.3 var(--petit); letter-spacing: .16em; text-transform: uppercase; color: var(--orange); }
.etiquette::before { content: ""; width: 1.375rem; height: 1px; background: currentColor; }

.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem; width: 100%; padding: 0.9375rem 1.375rem; border: 0; border-radius: 999px; background: var(--orange); color: var(--cacao); font-size: 1.0625rem; text-decoration: none; cursor: pointer; transition: background .2s, transform .2s var(--mouvement); }
.bouton:hover { background: var(--orange-ton); }
.bouton:active { transform: scale(.98); }
.bouton:focus-visible { outline: 2px solid var(--orange); outline-offset: 0.1875rem; }
.bouton--attente { opacity: .75; cursor: progress; }
.bouton--contour { background: transparent; color: var(--blanc); border: 1px solid var(--bordure-sombre); }
.bouton--contour:hover { background: var(--surface); }
.champ { display: grid; gap: 0.4375rem; margin-bottom: 0.875rem; }
.champ > span { font: 400 0.8125rem/1.2 var(--petit); letter-spacing: .04em; color: var(--argile); }
.champ em { font-style: normal; opacity: .7; }
.champ input { width: 100%; padding: 0.8125rem 1rem; border: 1px solid var(--bordure-sombre); border-radius: 0.875rem; background: var(--surface); color: var(--blanc); font-size: 1rem; outline: none; transition: border-color .2s; }
.champ input:focus { border-color: var(--orange); }
.champ input::placeholder { color: var(--taupe); }
.note { margin: 0 0 0.875rem; padding: 0.75rem 1rem; border-radius: 0.875rem; font-size: 0.9375rem; line-height: 1.4; }
.note--erreur { background: #3A1A14; color: #F2A08F; }

/* Toast */
.toast { position: fixed; z-index: 90; top: calc(0.75rem + env(safe-area-inset-top)); left: 50%; display: flex; align-items: center; gap: 0.75rem; width: max-content; max-width: min(92%, 30rem); padding: 0.6875rem 0.75rem 0.6875rem 1.125rem; border-radius: 1.25rem; background: var(--blanc); color: var(--cacao); font-size: 0.9375rem; line-height: 1.35; transform: translate(-50%, -160%); transition: transform .4s var(--mouvement); cursor: pointer; }
.toast.est-visible { transform: translate(-50%, 0); }
.toast__action { flex: none; padding: 0.375rem 0.875rem; border: 0; border-radius: 999px; background: var(--orange); color: var(--cacao); font-size: 0.875rem; cursor: pointer; }

/* ---------- Accueil (entrer un code) ---------- */
.accueil { display: grid; align-content: center; justify-items: start; gap: 0.875rem; width: min(92%, 32rem); min-height: 100vh; min-height: 100dvh; margin: 0 auto; padding: 2rem 0; }
.accueil::before { position: fixed; }
.accueil .marque { margin-bottom: 1.5rem; }
.accueil h1 { font-size: 2.25rem; line-height: 1.1; }
.accueil__texte { margin: 0; color: var(--argile); }
.accueil__code { display: flex; gap: 0.5rem; width: 100%; margin-top: 0.5rem; padding: 0.3125rem; border: 1px solid var(--bordure-sombre); border-radius: 999px; background: var(--surface); }
.accueil__code:focus-within { border-color: var(--orange); }
.accueil__code input { flex: 1; min-width: 0; padding: 0 1rem; border: 0; background: transparent; color: var(--blanc); font-size: 1.125rem; letter-spacing: .06em; outline: none; }
.accueil__code input::placeholder { color: var(--taupe); }
.accueil__code .bouton { width: auto; padding: 0.75rem 1.25rem; font-size: 1rem; }
.accueil__lien { margin: 0.5rem 0 0; color: var(--argile); font-size: 0.9375rem; }
.accueil__lien a { color: var(--orange); }
.accueil__bouton { width: auto; margin-top: 0.5rem; }

/* ---------- Avant d'entrer ---------- */
.meet-app { min-height: 100vh; min-height: 100dvh; }
.avant { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; padding: calc(1rem + env(safe-area-inset-top)) 4vw calc(1rem + env(safe-area-inset-bottom)); }
.avant__haut { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.avant__retour { padding: 0.5rem 1rem; border: 1px solid var(--bordure-sombre); border-radius: 999px; color: var(--argile); text-decoration: none; font-size: 0.875rem; }
.avant__retour:hover { color: var(--blanc); border-color: var(--argile); }
.avant__corps { display: grid; gap: 1.25rem; align-content: start; flex: 1; }
.apercu { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 1.5rem; background: var(--surface); }
.apercu__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.apercu.sans-video .apercu__video { display: none; }
.apercu__avatar { position: absolute; inset: 0; display: none; place-items: center; }
.apercu.sans-video .apercu__avatar { display: grid; }
.apercu__avatar img, .apercu__avatar span { width: 6rem; height: 6rem; border-radius: 50%; object-fit: cover; }
.apercu__avatar span { display: grid; place-items: center; background: var(--orange); color: var(--cacao); font-size: 2.5rem; }
.apercu__message { position: absolute; left: 1rem; right: 1rem; top: 1rem; margin: 0; padding: 0.625rem 0.875rem; border-radius: 0.875rem; background: rgba(23, 19, 16, .85); color: var(--blanc); font-size: 0.875rem; line-height: 1.35; }
.apercu__niveau { position: absolute; left: 1rem; bottom: 1.25rem; width: 3rem; height: 0.3125rem; border-radius: 999px; background: rgba(255, 248, 239, .2); overflow: hidden; }
.apercu__niveau i { display: block; width: 100%; height: 100%; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .08s linear; }
.apercu__boutons { position: absolute; left: 50%; bottom: 0.875rem; display: flex; gap: 0.75rem; transform: translateX(-50%); }
.rond { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; padding: 0; border: 1px solid rgba(255, 248, 239, .35); border-radius: 50%; background: rgba(23, 19, 16, .45); color: var(--blanc); cursor: pointer; transition: background .2s; }
.rond svg { width: 1.375rem; height: 1.375rem; }
.rond:not(.est-actif) { background: var(--rouge); border-color: var(--rouge); }
.rond.est-actif .si-coupe, .rond:not(.est-actif) .si-actif, .commande.est-actif .si-coupe, .commande:not(.est-actif) .si-actif { display: none; }
.avant__panneau h1 { font-size: 1.75rem; line-height: 1.15; overflow-wrap: anywhere; }
.avant__quand { margin: 0.375rem 0 0; color: var(--argile); font-size: 0.9375rem; }
.avant__quand span::first-letter { text-transform: uppercase; }
.avant__letou { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0.75rem 0 0; padding: 0.3125rem 0.75rem 0.3125rem 0.3125rem; border-radius: 999px; background: var(--surface); color: var(--orange); font: 400 0.8125rem/1.2 var(--petit); }
.avant__letou img { width: 1.5rem; height: 1.5rem; }
.avant__texte { margin: 1.125rem 0; color: var(--blanc); line-height: 1.5; }
.avant__qui { margin: 1.25rem 0 0.875rem; color: var(--argile); }
.avant__qui b { font-weight: 400; color: var(--blanc); }
.avant__form { margin-top: 0.5rem; }
.avant__panneau > .champ { margin-top: 1.25rem; }
.avant__petit { margin: 0.875rem 0 0; color: var(--argile); font-size: 0.875rem; }
.avant__petit a { color: var(--orange); }
.attente { display: flex; align-items: center; gap: 0.875rem; margin-top: 1.25rem; padding: 1rem 1.125rem; border-radius: 1.125rem; background: var(--surface); }
.attente p { margin: 0; color: var(--argile); font-size: 0.9375rem; line-height: 1.4; }
.attente b { font-weight: 400; color: var(--blanc); }
.attente__points { display: flex; gap: 0.25rem; }
.attente__points i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--orange); animation: point 1.2s ease-in-out infinite; }
.attente__points i:nth-child(2) { animation-delay: .15s; }
.attente__points i:nth-child(3) { animation-delay: .3s; }
@keyframes point { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }
.appareils { margin-top: 1rem; color: var(--argile); font-size: 0.875rem; }
.appareils summary { cursor: pointer; padding: 0.375rem 0; }
.appareils label, .fenetre label { display: grid; gap: 0.3125rem; margin-top: 0.625rem; }
.appareils span, .fenetre label span { font: 400 0.75rem/1.2 var(--petit); letter-spacing: .04em; }
.appareils select, .fenetre select { width: 100%; padding: 0.625rem 0.75rem; border: 1px solid var(--bordure-sombre); border-radius: 0.75rem; background: var(--surface); color: var(--blanc); font-size: 0.875rem; }

/* ---------- La salle ---------- */
.salle { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; height: 100vh; height: 100dvh; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); overflow: hidden; }
.salle__haut { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 3vw; }
.salle__symbole { width: 1.75rem; height: 1.75rem; flex: none; }
.salle__titre { display: grid; flex: 1; min-width: 0; line-height: 1.2; }
.salle__titre b { font-weight: 400; font-size: 0.9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.salle__titre > span { color: var(--argile); font: 400 0.75rem/1.3 var(--petit); font-variant-numeric: tabular-nums; }
.salle__verrou { color: var(--orange); }
.salle__code { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.4375rem 0.75rem; border: 1px solid var(--bordure-sombre); border-radius: 999px; background: transparent; color: var(--argile); font: 400 0.8125rem/1 var(--petit); letter-spacing: .04em; cursor: pointer; }
.salle__code:hover { color: var(--blanc); border-color: var(--argile); }
.salle__code svg { width: 1rem; height: 1rem; }
.salle__milieu { display: flex; min-height: 0; }
.scene { position: relative; flex: 1; min-width: 0; padding: 0 3vw; }
.grille { display: grid; grid-template-columns: repeat(var(--colonnes, 1), minmax(0, 1fr)); grid-template-rows: repeat(var(--lignes, 1), minmax(0, 1fr)); gap: 0.5rem; height: 100%; }

.tuile { position: relative; overflow: hidden; min-height: 0; border-radius: 1.125rem; background: var(--surface); cursor: pointer; isolation: isolate; }
.tuile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tuile--miroir video { transform: scaleX(-1); }
.tuile--ecran { background: #0D0B09; }
.tuile--ecran video { object-fit: contain; }
.tuile__avatar { position: absolute; inset: 0; display: none; place-items: center; }
.tuile.sans-video .tuile__avatar { display: grid; }
.tuile__avatar img, .tuile__avatar span { width: min(36%, 6.5rem); aspect-ratio: 1; border-radius: 50%; object-fit: cover; }
.tuile__avatar span { display: grid; place-items: center; background: var(--orange); color: var(--cacao); font-size: 2.25rem; }
.tuile::after { content: ""; position: absolute; inset: 0; border: 0.1875rem solid transparent; border-radius: inherit; pointer-events: none; transition: border-color .15s; }
.tuile.parle::after { border-color: var(--orange); }
.tuile__bas { position: absolute; left: 0.5rem; bottom: 0.5rem; z-index: 2; display: flex; align-items: center; gap: 0.3125rem; max-width: calc(100% - 1rem); padding: 0.25rem 0.625rem; border-radius: 999px; background: rgba(23, 19, 16, .7); font-size: 0.8125rem; }
.tuile__nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tuile__micro { flex: none; width: 0.9375rem; height: 0.9375rem; color: #F2A08F; }
.tuile__main { position: absolute; top: 0.5rem; left: 0.5rem; z-index: 2; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--orange); font-size: 1rem; animation: main 1s var(--mouvement); }
@keyframes main { 0% { transform: translateY(0.75rem) scale(.5); } 60% { transform: translateY(-0.125rem) scale(1.1); } }
.tuile__epingle { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 2; display: grid; place-items: center; width: 1.875rem; height: 1.875rem; border-radius: 50%; background: rgba(23, 19, 16, .7); }
.tuile__epingle svg { width: 1rem; height: 1rem; }
/* Lètou : sa sphère au centre, qui respire quand elle parle */
.tuile--letou .tuile__avatar img { width: min(42%, 7.5rem); border-radius: 0; }
.tuile--letou.parle-letou .tuile__avatar img { animation: respire 1.1s ease-in-out infinite; }
.tuile--letou.reflechit .tuile__avatar img { animation: pense 1.6s ease-in-out infinite; }
.tuile--letou.parle-letou::after { border-color: var(--orange); }
@keyframes respire { 50% { transform: scale(1.08); } }
@keyframes pense { 50% { transform: translateY(-0.375rem); opacity: .8; } }

/* Présentation : l'écran partagé (ou la personne épinglée) en grand, les autres en bande */
.scene__principal { position: relative; min-height: 0; }
.scene__principal .tuile { position: absolute; inset: 0; }
.scene--presentation { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 0.5rem; }
.scene--presentation .grille { display: flex; gap: 0.5rem; height: auto; overflow-x: auto; scrollbar-width: none; }
.scene--presentation .grille::-webkit-scrollbar { display: none; }
.scene--presentation .grille .tuile { flex: none; width: 7.5rem; aspect-ratio: 3 / 4; }
.scene--presentation .grille .tuile__avatar span, .scene--presentation .grille .tuile__avatar img { width: 3rem; font-size: 1.25rem; }
.scene--presentation .grille .tuile__bas { font-size: 0.6875rem; padding: 0.125rem 0.5rem; }

/* Lètou parle : sous-titres en bas de la scène */
.letou-bandeau { position: absolute; z-index: 5; left: 50%; bottom: 0.75rem; display: flex; align-items: flex-start; gap: 0.75rem; width: min(calc(100% - 6vw - 1rem), 40rem); padding: 0.875rem 1rem; border: 1px solid var(--orange); border-radius: 1.25rem; background: rgba(23, 19, 16, .94); transform: translateX(-50%); animation: monte .35s var(--mouvement); }
.letou-bandeau img { flex: none; width: 2.25rem; height: 2.25rem; }
.letou-bandeau b { display: block; color: var(--orange); font: 400 0.75rem/1.3 var(--petit); letter-spacing: .06em; }
.letou-bandeau p { margin: 0.125rem 0 0; max-height: 7.5em; overflow-y: auto; font-size: 0.9375rem; line-height: 1.45; scrollbar-width: none; }
.letou-bandeau.est-reflechit img { animation: pense 1.6s ease-in-out infinite; }
.letou-bandeau.est-reflechit p { color: var(--argile); }
@keyframes monte { from { transform: translate(-50%, 1rem); opacity: 0; } }
.son-bloque { position: absolute; z-index: 6; top: 0.75rem; left: 50%; padding: 0.75rem 1.25rem; border: 0; border-radius: 999px; background: var(--orange); color: var(--cacao); transform: translateX(-50%); cursor: pointer; }

/* Réactions qui s'envolent */
.vol { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.vol__item { position: absolute; bottom: 0; display: grid; justify-items: center; animation: envol 4.2s ease-out forwards; }
.vol__item span { font-size: 2.25rem; line-height: 1; }
.vol__item small { margin-top: 0.125rem; padding: 0.0625rem 0.5rem; border-radius: 999px; background: rgba(23, 19, 16, .75); font: 400 0.6875rem/1.4 var(--petit); }
@keyframes envol { 0% { transform: translateY(0) scale(.6); opacity: 0; } 10% { opacity: 1; transform: translateY(-10%) scale(1); } 80% { opacity: 1; } 100% { transform: translateY(-420%) translateX(1.5rem); opacity: 0; } }

/* La barre des commandes */
.commandes { display: flex; align-items: center; justify-content: center; gap: 0.3125rem; padding: 0.75rem 3vw calc(0.75rem + env(safe-area-inset-bottom)); }
.commande { position: relative; display: grid; place-items: center; flex: none; width: 2.625rem; height: 2.625rem; padding: 0; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--blanc); cursor: pointer; transition: background .2s, transform .15s; }
.commande:hover { background: var(--bordure-sombre); }
.commande:active { transform: scale(.94); }
.commande svg { width: 1.25rem; height: 1.25rem; }
.commande img { width: 1.75rem; height: 1.75rem; }
.commande[data-micro]:not(.est-actif), .commande[data-camera]:not(.est-actif) { background: var(--rouge); }
.commande.est-bloque { opacity: .55; }
.commande.est-allume { background: var(--orange); color: var(--cacao); }
.commande--quitter { width: 3.25rem; border-radius: 999px; background: var(--rouge); }
.commande--quitter:hover { background: #A3291A; }
.commande__pastille { position: absolute; top: -0.125rem; right: -0.125rem; min-width: 1.125rem; height: 1.125rem; padding: 0 0.3125rem; border-radius: 999px; background: var(--orange); color: var(--cacao); font: 400 0.6875rem/1.125rem var(--petit); text-align: center; }
.commande__pastille--attente { background: var(--blanc); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.2); } }
.commande--ordi { display: none; }
.commande-groupe { position: relative; }
.reactions, .menu-plus { position: absolute; z-index: 30; bottom: calc(100% + 0.625rem); left: 50%; padding: 0.375rem; border: 1px solid var(--bordure-sombre); border-radius: 1.25rem; background: var(--surface); transform: translateX(-50%); animation: ouvre .2s var(--mouvement); }
@keyframes ouvre { from { opacity: 0; transform: translate(-50%, 0.5rem); } }
.reactions { display: flex; gap: 0.125rem; }
.reactions button { width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: 50%; background: transparent; font-size: 1.375rem; cursor: pointer; transition: transform .15s; }
.reactions button:hover { background: var(--surface-2); transform: scale(1.15); }
.menu-plus { display: grid; min-width: 14.5rem; }
.menu-plus button { display: flex; align-items: center; gap: 0.625rem; padding: 0.75rem 0.875rem; border: 0; border-radius: 0.875rem; background: transparent; color: var(--blanc); text-align: left; font-size: 0.9375rem; cursor: pointer; }
.menu-plus button:hover { background: var(--surface-2); }
.menu-plus img { width: 1.25rem; height: 1.25rem; }
.menu-plus .est-danger { color: #F2A08F; }
.menu-plus--quitter { left: auto; right: 0; transform: none; animation: none; }
.reactions { left: 50%; }

/* Le panneau (discussion, participants, Lètou) : clair, pour bien lire */
.panneau { position: fixed; z-index: 40; left: 3vw; right: 3vw; bottom: calc(5rem + env(safe-area-inset-bottom)); display: flex; flex-direction: column; height: 68vh; height: 68dvh; border-radius: 1.75rem; background: var(--blanc); color: var(--cacao); overflow: hidden; animation: panneau .3s var(--mouvement); }
@keyframes panneau { from { transform: translateY(1.5rem); opacity: 0; } }
.panneau__tete { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 0.75rem 0.5rem; border-bottom: 1px solid var(--filet); }
.panneau__onglets { display: flex; flex: 1; gap: 0.25rem; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.panneau__onglets button { flex: none; display: flex; align-items: center; gap: 0.375rem; padding: 0.5rem 0.875rem; border: 0; border-radius: 999px; background: transparent; color: var(--taupe); font-size: 0.9375rem; cursor: pointer; }
.panneau__onglets button.est-actif { background: var(--nuit); color: var(--blanc); }
.panneau__onglets b { font-weight: 400; padding: 0 0.375rem; border-radius: 999px; background: var(--filet); color: var(--cacao); font-size: 0.75rem; }
.panneau__onglets .est-actif b { background: var(--orange); }
.panneau__fermer { display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--taupe); cursor: pointer; }
.panneau__fermer:hover { background: var(--filet); }
.panneau__fermer svg { width: 1.125rem; height: 1.125rem; }
.onglet { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.onglet__titre { margin: 0.875rem 1rem 0.375rem; color: var(--taupe); font: 400 0.75rem/1.2 var(--petit); letter-spacing: .08em; text-transform: uppercase; }

.discussion { flex: 1; margin: 0; padding: 0.75rem 1rem; list-style: none; overflow-y: auto; }
.discussion__info { margin: 0 0 0.75rem; padding: 0.625rem 0.75rem; border-radius: 0.875rem; background: var(--orange-pale); color: var(--cacao); font: 400 0.8125rem/1.4 var(--petit); }
.msg { margin-top: 0.125rem; }
.msg__tete { display: flex; align-items: baseline; gap: 0.5rem; margin: 0.75rem 0 0.125rem; }
.msg__tete b { font-weight: 400; font-size: 0.875rem; }
.msg__tete time { color: var(--argile); font: 400 0.6875rem/1 var(--petit); }
.msg__texte { margin: 0; font-size: 0.9375rem; line-height: 1.45; overflow-wrap: anywhere; }
.msg__texte a { color: var(--orange-profond); }
.msg--moi .msg__tete b { color: var(--orange-profond); }
.msg--letou .msg__texte { padding: 0.5rem 0.75rem; border-left: 2px solid var(--orange); background: var(--blanc-pur); border-radius: 0 0.75rem 0.75rem 0; }
.ecrire-msg { display: flex; align-items: center; gap: 0.375rem; margin: 0.5rem 0.75rem 0.75rem; padding: 0.25rem 0.25rem 0.25rem 1rem; border: 1px solid var(--filet); border-radius: 999px; background: var(--blanc-pur); }
.ecrire-msg:focus-within { border-color: var(--orange); }
.ecrire-msg input { flex: 1; min-width: 0; height: 2.5rem; border: 0; background: transparent; color: var(--cacao); font-size: 0.9375rem; outline: none; }
.ecrire-msg button { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: 50%; background: var(--orange); color: var(--cacao); cursor: pointer; }
.ecrire-msg button svg { width: 1.125rem; height: 1.125rem; }
.ecrire-msg .ecrire-msg__dicter { background: var(--blanc); color: var(--cacao); margin-left: -0.75rem; }
.ecrire-msg .ecrire-msg__dicter.est-allume { background: var(--rouge); color: var(--blanc); animation: pulse 1.2s ease-in-out infinite; }

.participants, .attentes ul, .letou-proposees ul { margin: 0; padding: 0 0.5rem; list-style: none; }
.onglet[data-vue=participants] { overflow-y: auto; }
.participants li, .attentes li, .letou-proposees li { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem; border-radius: 0.875rem; }
.participants li:hover { background: var(--blanc-pur); }
.mini-avatar { display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--orange); color: var(--cacao); font-size: 1rem; overflow: hidden; }
.mini-avatar img { width: 100%; height: 100%; object-fit: cover; }
.participants__qui { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.participants__qui b { font-weight: 400; font-size: 0.9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.letou-proposees .participants__qui b { white-space: normal; }
.participants__qui small { color: var(--taupe); font: 400 0.75rem/1.3 var(--petit); }
.participants__main { font-size: 1.125rem; }
.participants__micro { color: var(--argile); }
.participants__micro svg { width: 1.125rem; height: 1.125rem; }
.participants__micro.est-actif { color: var(--cacao); }
.participants__actions { display: flex; gap: 0.25rem; }
.mini { padding: 0.3125rem 0.625rem; border: 1px solid var(--filet); border-radius: 999px; background: var(--blanc-pur); color: var(--cacao); font: 400 0.75rem/1.2 var(--petit); cursor: pointer; }
.mini:hover { border-color: var(--argile); }
.mini--danger { color: #B3261E; }
.mini[data-sur] { background: #B3261E; border-color: #B3261E; color: var(--blanc); }
.attentes { margin: 0.5rem 0.5rem 0; padding-bottom: 0.5rem; border-radius: 1.125rem; background: var(--orange-pale); }
.attentes .onglet__titre { margin-top: 0.75rem; color: var(--orange-profond); }
.attentes .petit-bouton { margin: 0.25rem 0.5rem 0; }
.organisation { display: grid; gap: 0.5rem; margin: 0.75rem 1rem 0; }
.petit-bouton { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.625rem 1rem; border: 1px solid var(--filet); border-radius: 999px; background: var(--blanc-pur); color: var(--cacao); font-size: 0.875rem; cursor: pointer; }
.petit-bouton:hover { border-color: var(--argile); }
.petit-bouton svg { width: 1.125rem; height: 1.125rem; }
.interrupteur-sombre { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 0.25rem 0.5rem 1rem; border: 1px solid var(--filet); border-radius: 999px; background: var(--blanc-pur); font-size: 0.875rem; cursor: pointer; }
.interrupteur-sombre input { position: absolute; opacity: 0; pointer-events: none; }
.interrupteur-sombre i { position: relative; flex: none; width: 2.75rem; height: 1.625rem; border-radius: 999px; background: var(--filet); transition: background-color .25s; }
.interrupteur-sombre i::after { content: ""; position: absolute; top: 0.1875rem; left: 0.1875rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--blanc-pur); transition: transform .25s var(--mouvement); }
.interrupteur-sombre input:checked + i { background: var(--orange); }
.interrupteur-sombre input:checked + i::after { transform: translateX(1.125rem); }

.letou-tete { display: flex; gap: 0.75rem; align-items: flex-start; margin: 0.75rem 1rem 0; padding: 0.75rem; border-radius: 1rem; background: var(--nuit); color: var(--blanc); }
.letou-tete img { flex: none; width: 2.5rem; height: 2.5rem; }
.letou-tete b { display: block; font-weight: 400; }
.letou-tete small { display: block; color: var(--argile); font: 400 0.75rem/1.4 var(--petit); }
.letou-fil { flex: 1; margin: 0; padding: 0.5rem 1rem; list-style: none; overflow-y: auto; }
.letou-fil__item { margin-top: 0.625rem; padding: 0.625rem 0.75rem; border-radius: 1rem; background: var(--blanc-pur); }
.letou-fil__item b { display: block; color: var(--taupe); font: 400 0.6875rem/1.3 var(--petit); letter-spacing: .06em; text-transform: uppercase; }
.letou-fil__item p { margin: 0.125rem 0 0; font-size: 0.9375rem; line-height: 1.45; }
.letou-fil__item--question { margin-left: 2rem; background: var(--orange-pale); }
.letou-fil__item--reponse { border-left: 2px solid var(--orange); }
.letou-fil__item--reponse.est-hors-sujet { border-left-color: var(--argile); }
.letou-fil__item--attente p { color: var(--taupe); animation: pense 1.6s ease-in-out infinite; }
.letou-proposees { border-top: 1px solid var(--filet); max-height: 40%; overflow-y: auto; }

/* Fin */
.fin { display: grid; align-content: center; justify-items: center; gap: 0.875rem; min-height: 100vh; min-height: 100dvh; padding: 2rem 6vw; text-align: center; }
.fin .marque { margin-bottom: 1rem; }
.fin h1 { font-size: 2rem; line-height: 1.15; }
.fin p { margin: 0; color: var(--argile); }
.fin__actions { display: grid; gap: 0.625rem; width: min(100%, 22rem); margin-top: 1rem; }

/* Réglages pendant la réunion */
.fenetre { position: fixed; inset: 0; z-index: 80; display: grid; place-items: end center; padding: 3vw; background: rgba(13, 11, 9, .6); }
.fenetre__boite { width: 100%; max-width: 28rem; padding: 1.5rem 1.25rem 1.25rem; border-radius: 1.75rem; background: var(--surface); }
.fenetre__boite h2 { font-size: 1.375rem; margin-bottom: 0.5rem; }
.fenetre__boite .bouton { margin-top: 1.25rem; }

.seul-telephone { }

/* ---------- Ordinateur ---------- */
@media (min-width: 901px) {
  .avant { padding: 1.5rem 3rem; }
  .avant__corps { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 3rem; align-items: center; align-content: center; max-width: 76rem; width: 100%; margin: 0 auto; }
  .apercu { aspect-ratio: 16 / 9; }
  .avant__panneau h1 { font-size: 2.25rem; }
  .avant__panneau .bouton { width: auto; min-width: 14rem; }
  .salle__haut { padding: 0.875rem 1.5rem; }
  .scene { padding: 0 1.5rem; }
  .commandes { gap: 0.625rem; padding: 0.875rem 1.5rem 1.125rem; }
  .commande { width: 3.125rem; height: 3.125rem; }
  .commande svg { width: 1.375rem; height: 1.375rem; }
  .commande--quitter { width: 4.25rem; }
  .commande--ordi { display: grid; }
  .seul-telephone { display: none !important; }
  .panneau { position: static; flex: none; width: 23rem; height: auto; margin: 0 1.5rem 0 0; border-radius: 1.5rem; animation: none; }
  .scene--presentation { grid-template-rows: none; grid-template-columns: minmax(0, 1fr) 12rem; }
  .scene--presentation .grille { flex-direction: column; overflow-x: hidden; overflow-y: auto; }
  .scene--presentation .grille .tuile { width: 100%; aspect-ratio: 16 / 10; }
  .fenetre { place-items: center; }
  .letou-bandeau { bottom: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }