/* Page participant (téléphone) — direction « sombre épuré » (les règles « sombre » en fin de fichier priment). */

html, body { height: 100%; }
body { background: #F4F4F6; }
.app { min-height: 100%; display: flex; flex-direction: column; }

.hdr {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: calc(var(--sp-3) + env(safe-area-inset-top)) var(--sp-4) var(--sp-3);
  background: #fff; color: #15151A; box-shadow: 0 1px 0 #E6E6EB;
}
.hdr__brand { display: flex; align-items: center; gap: 12px; }
.hdr__logo { width: 64px; height: auto; }
.hdr__sep { width: 1px; height: 26px; background: #E1E1E6; }
/* Logo recadré (sans les marges vides du fichier d'origine) : bien lisible sur téléphone. */
.hdr__ooredoo { height: 24px; width: auto; }
.demo-badge {
  padding: 2px 10px; border-radius: var(--r-full);
  background: #fff; color: var(--red); font: 700 var(--fs-xs)/1.6 var(--font-head); letter-spacing: .08em;
}
.hdr .conn { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: #71717A; }
.hdr .conn__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: none; }
.hdr .conn.is-off .conn__dot { background: var(--amber); }

.main { flex: 1 1 auto; display: flex; }
.scr { flex: 1 1 auto; display: flex; }
.scr__body {
  width: 100%; max-width: 480px; margin: 0 auto;
  padding: var(--sp-6) var(--sp-5) calc(var(--sp-8) + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.scr__body--center { align-items: center; justify-content: center; text-align: center; }
.scr__title { font-size: var(--fs-2xl); }
.scr__sub { font-size: var(--fs-md); }
.u-full { width: 100%; text-align: start; }

/* RED, mascotte : même image que le quiz */
.red {
  background: url('/shared/img/red.webp') center / contain no-repeat;
  border-radius: 50%;
}
.red--md { width: 96px; height: 96px; }
.red--lg { width: 150px; height: 150px; }
.join-hero { display: flex; justify-content: center; padding-top: var(--sp-2); }

.lobby-hero {
  position: relative; display: grid; place-items: center;
  width: 220px; height: 220px; margin-bottom: var(--sp-2);
}
.lobby-hero::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: var(--red-soft);
  animation: pulse 2.4s var(--ease) infinite;
}
.lobby-hero .red { position: relative; }
@keyframes pulse { 0%, 100% { transform: scale(.92); opacity: .9; } 50% { transform: scale(1); opacity: 1; } }

.state-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: var(--r-full);
  background: var(--green-soft); color: var(--green);
  font: 600 var(--fs-sm)/1.3 var(--font-head);
}

.lobby-wait { display: flex; gap: 8px; margin-top: var(--sp-2); }
.lobby-wait i, .dots i {
  width: 8px; height: 8px; border-radius: 50%; background: var(--red);
  animation: blink 1.2s infinite;
}
.lobby-wait i:nth-child(2), .dots i:nth-child(2) { animation-delay: .2s; }
.lobby-wait i:nth-child(3), .dots i:nth-child(3) { animation-delay: .4s; }
.dots { display: flex; gap: 8px; }
@keyframes blink { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* Formulaire */
.form { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-2); }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* La largeur « naturelle » d'un champ dépend de la police (arabe plus large) : jamais plus large que l'écran. */
.field__input { width: 100%; min-width: 0; }
.scr { min-width: 0; }
.field__label { font: 600 var(--fs-sm)/1.2 var(--font-head); }
.field__input {
  min-height: var(--tap-min); padding: 0 var(--sp-4);
  border: 2px solid var(--border); border-radius: 10px; background: #fff;
  font-size: var(--fs-lg);
}
.field__input:focus { border-color: var(--red); outline: none; }
.field__input.is-invalid { border-color: var(--wrong); background: var(--wrong-soft); }
.form__error { color: var(--wrong); font-size: var(--fs-sm); }
.btn { border-radius: 10px; }

/* Groupe attribué */
.group-hero {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: var(--sp-6) var(--sp-4) var(--sp-5);
  border-radius: var(--r-xl); background: #fff;
  box-shadow: 0 1px 2px rgba(21,21,26,.05), 0 12px 32px rgba(21,21,26,.08);
  animation: pop 420ms var(--ease);
}
.group-hero__hello { font-size: var(--fs-md); color: #52525B; }
.group-hero__kicker { margin-top: var(--sp-3); font: 700 var(--fs-xs)/1 var(--font-head); letter-spacing: .16em; text-transform: uppercase; color: var(--red); }
.group-hero__num {
  display: grid; place-items: center; width: 96px; height: 96px; margin-top: var(--sp-3); border-radius: 50%;
  background: var(--red); color: #fff; font: 800 3.4rem/1 var(--font-head);
  box-shadow: 0 10px 24px rgba(237,28,36,.30);
}
.group-hero__label { font: 800 2.2rem/1.1 var(--font-head); margin-top: var(--sp-3); color: #15151A; }
.group-hero__count { margin-top: 8px; padding: 3px 12px; border-radius: var(--r-full); background: #FDECED; color: var(--red-dark); font: 600 var(--fs-sm)/1.5 var(--font-head); }
@keyframes pop { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.list-title { font-size: var(--fs-lg); margin-top: var(--sp-2); }
.members { display: flex; flex-direction: column; background: #fff; border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 1px 2px rgba(21,21,26,.05), 0 8px 24px rgba(21,21,26,.06); }
.members li {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border);
  font-size: var(--fs-md);
}
.members li:first-child { border-top: 0; }
.members li.is-me { background: var(--red-soft); font-weight: 700; }
.members .me-tag {
  margin-inline-start: auto; padding: 2px 8px; border-radius: var(--r-full);
  background: var(--red); color: #fff; font: 600 var(--fs-xs)/1.5 var(--font-head);
}

.all-group { border: 1px solid var(--border); border-radius: var(--r-lg); margin-top: var(--sp-3); overflow: hidden; }
.all-group summary {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--sp-3) var(--sp-4); cursor: pointer; list-style: none;
  font: 700 var(--fs-md)/1.2 var(--font-head);
}
.all-group summary::-webkit-details-marker { display: none; }
.all-group summary span { font: 500 var(--fs-sm)/1 var(--font-body); color: var(--text-muted); }
.all-group ul { padding: 0 var(--sp-4) var(--sp-3); columns: 2; column-gap: var(--sp-4); font-size: var(--fs-sm); }
.all-group li { padding: 3px 0; break-inside: avoid; }
.all-group.is-mine { border-color: var(--red); }

@media (prefers-reduced-motion: reduce) {
  .lobby-hero::before, .group-hero, .lobby-wait i, .dots i { animation: none; }
}

/* Recherche dans la liste */
.results { display: flex; flex-direction: column; gap: var(--sp-2); }
.results button {
  width: 100%; text-align: start; min-height: var(--tap-min);
  padding: var(--sp-3) var(--sp-4); border: 2px solid var(--border); border-radius: 10px; background: #fff;
  display: flex; flex-direction: column; justify-content: center;
}
.results button:active { border-color: var(--red); background: var(--red-soft); }
.results b { font: 600 var(--fs-lg)/1.2 var(--font-head); }
.results small { color: var(--text-muted); font-size: var(--fs-sm); }
.results .hint { color: var(--text-muted); font-size: var(--fs-sm); padding: 0 var(--sp-1); }
.confirm {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); text-align: center;
  padding: var(--sp-5); border: 2px solid var(--red); border-radius: var(--r-xl); background: var(--red-soft);
}
.confirm__q { font-size: var(--fs-md); }
.confirm__name { font: 800 var(--fs-2xl)/1.15 var(--font-head); }
.confirm__info:empty { display: none; }

.not-me { align-self: center; margin-top: var(--sp-4); padding: var(--sp-2) var(--sp-3); color: var(--text-muted); font-size: var(--fs-sm); text-decoration: underline; }

/* RED animé (vidéo Higgsfield sur fond blanc pur) : cadrage identique à l'image fixe,
   fond blanc rendu invisible par le mode de fusion « multiply ». Image fixe si mouvement réduit. */
.red--anim { position: relative; background: none; overflow: visible; }
.red--anim video {
  position: absolute; width: 161%; height: 161%; left: -30.5%; top: -30.5%;
  object-fit: cover; mix-blend-mode: multiply; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .red--anim video { display: none; }
  .red--anim { background: url('/shared/img/red.webp') center / contain no-repeat; }
}

/* ======================= Direction « sombre épuré » =======================
   Fond anthracite, cartes sombres, touches de rouge. RED toujours posé sur un médaillon clair :
   sa vidéo a un fond blanc (fusion « multiply ») et son casque noir disparaîtrait sur le fond sombre. */
body { background: #141419; color: #F4F4F6; }
.hdr { background: #1B1B22; color: #F4F4F6; box-shadow: 0 1px 0 #2A2A34; }
.hdr__sep { background: #34343D; }
.hdr .conn { color: #9A9AA6; }
.scr__sub, .u-muted { color: #9A9AA6; }
.field__label { color: #D8D8DF; }
.field__input { background: #1E1E26; border-color: #34343D; color: #fff; }
.field__input::placeholder { color: #6B6B78; }
.field__input.is-invalid { background: rgba(220,38,38,.14); }
.form__error { color: #FF8A8F; }
.btn--ghost { color: #9A9AA6; }
.state-pill { background: rgba(22,163,74,.16); color: #4ADE80; }

/* Médaillon blanc pur = même blanc que le fond de la vidéo : aucun mode de fusion nécessaire
   (la fusion « multiply » sur une vidéo n'est pas fiable sur tous les téléphones). */
.red--anim {
  background: #fff; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 3px #141419, 0 0 0 5px var(--red);
}
.red--anim video { mix-blend-mode: normal; width: 130%; height: 130%; left: -15%; top: -15%; }
.red--md { width: 112px; height: 112px; }
.lobby-hero { border-radius: 50%; overflow: hidden; background: #fff; box-shadow: 0 0 0 6px #141419, 0 0 0 8px var(--red); }
.lobby-hero::before { display: none; }
.lobby-hero .red--anim { width: 100%; height: 100%; box-shadow: none; }

.results button { background: #1E1E26; border-color: #2A2A34; color: #F4F4F6; }
.results button:active { border-color: var(--red); background: rgba(237,28,36,.14); }
.results small, .results .hint { color: #9A9AA6; }
.confirm { background: rgba(237,28,36,.10); border-color: var(--red); }
.confirm__name { color: #fff; }

.group-hero { background: #1E1E26; box-shadow: none; border: 1px solid #2A2A34; }
.group-hero__hello { color: #9A9AA6; }
.group-hero__label { color: #fff; }
.group-hero__count { background: rgba(237,28,36,.16); color: #FF8A8F; }
.list-title { color: #fff; }
.members { background: #1E1E26; box-shadow: none; border: 1px solid #2A2A34; }
.members li { border-top-color: #2A2A34; color: #D8D8DF; }
.members li.is-me { background: rgba(237,28,36,.14); color: #fff; }
.all-group { border-color: #2A2A34; background: #1E1E26; }
.all-group summary span { color: #9A9AA6; }
.not-me { color: #9A9AA6; }

/* Bouton de langue FR / عربي (en-tête) */
.hdr__right { display: flex; align-items: center; gap: 12px; }
.lang-btn {
  min-height: 34px; padding: 4px 14px; border-radius: var(--r-full);
  border: 1px solid #3A3A45; background: transparent; color: #F4F4F6;
  font: 600 var(--fs-sm)/1 var(--font-body); cursor: pointer;
}
.lang-btn[lang="ar"] { font-family: var(--font-ar); }
.lang-btn[lang="fr"] { font-family: 'Rubik', system-ui, sans-serif; }
.lang-btn:active { border-color: var(--red); }
/* Les noms (écrits en lettres latines) gardent leur sens de lecture dans l'interface arabe. */
[dir="rtl"] .field__input[type="search"] { text-align: right; }

/* En-tête sur petit écran : le logo Ooredoo agrandi garde sa place.
   « Connecté » n'est écrit que s'il y a un problème (« Reconnexion… ») ; sinon, seul le point vert reste. */
.hdr .conn:not(.is-off) #conn-label { display: none; }
@media (max-width: 340px) {
  .hdr__brand { gap: 8px; }
  .hdr__logo { width: 56px; }
  .hdr__ooredoo { height: 20px; }
}