/* Maquette « Top of the World » : tout se passe dans le téléphone de l'artiste (look 3 bis, choisi le 04/11).
   Accueil = écran verrouillé ; chaque moment = une vidéo verticale en plein écran qu'on glisse à gauche ou à droite ;
   le fil Social Network défile vers le haut ; le concert est un direct. Clair et de jour, loin du stade de nuit bleu
   et or de THE GOAT (demande de son frère). */
:root {
  --fond: #F1F2F4;
  --blanc: #FFFFFF;
  --encre: #101114;
  --gris: #6B6F7A;
  --filet: #DCDFE5;
  --corail: #FF3D57;
  --menthe: #12B886;
  --plus: #12B886;
  --moins: #FF3D57;
  --style: #FF3D57;
  --verre: rgba(255, 255, 255, 0.16);
  --police: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--fond); color: var(--encre); font-family: var(--police); -webkit-font-smoothing: antialiased; overscroll-behavior: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.mono { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gris); }
.cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

#app { max-width: 480px; margin: 0 auto; min-height: 100dvh; position: relative; }
.ecran { display: flex; flex-direction: column; min-height: 100dvh; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); }

/* Boutons */
.btn {
  display: block; width: 100%; padding: 16px; border: 0; border-radius: 12px; background: var(--encre); color: var(--blanc);
  font-weight: 900; font-size: 18px; text-align: center; transition: transform 0.1s, opacity 0.2s;
}
.btn:active { transform: scale(0.99); }
.btn:disabled { background: var(--filet); color: var(--gris); cursor: not-allowed; }
.btn-large { padding: 18px 16px; font-size: 20px; }
.btn-fantome { background: transparent; color: var(--encre); border: 2px solid var(--filet); font-size: 16px; }
.lien { background: none; border: 0; padding: 10px 0; color: var(--gris); font-weight: 800; font-size: 14px; }
.lien.retour::before { content: '← '; }
.rond-aide { width: 38px; height: 38px; flex: none; border: 2px solid var(--filet); border-radius: 10px; background: var(--blanc); font-weight: 900; font-size: 17px; }

/* Accueil : l'écran verrouillé */
#accueil { gap: 12px; }
.statut { display: flex; justify-content: space-between; font-weight: 800; font-size: 12px; }
.verrou { text-align: center; margin: 22px 0 8px; }
.verrou b { display: block; font-weight: 900; font-size: min(22vw, 92px); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.verrou span { font-weight: 700; font-size: 16px; color: var(--gris); }
.notifs { display: grid; gap: 10px; }
.notif { background: var(--blanc); border-radius: 14px; padding: 11px 12px; display: grid; grid-template-columns: 36px 1fr; gap: 11px; align-items: center; animation: arrivee-notif 0.5s ease-out backwards; }
.notif:nth-child(2) { animation-delay: 0.15s; }
.notif:nth-child(3) { animation-delay: 0.3s; }
@keyframes arrivee-notif { from { transform: translateY(-12px); opacity: 0; } }
.notif i { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; color: var(--blanc); font-style: normal; font-weight: 900; font-size: 13px; }
.notif i.sn { background: var(--corail); }
.notif i.do { background: var(--encre); }
.notif i.tw { background: var(--menthe); }
.notif p { margin: 0; font-size: 14px; line-height: 1.3; }
.notif p b { display: flex; justify-content: space-between; gap: 8px; white-space: nowrap; font-size: 12px; color: var(--gris); font-weight: 800; margin-bottom: 1px; }
.notif p b em { font-style: normal; font-weight: 600; }
.app { margin-top: auto; text-align: center; padding-top: 16px; }
.app h1 { margin: 0; font-weight: 900; font-size: min(10vw, 40px); line-height: 1; letter-spacing: -0.02em; }
.app p { margin: 8px 0 14px; color: var(--gris); font-weight: 700; font-size: 15px; }

/* Création */
.barre { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.barre-titre { font-weight: 900; font-size: 18px; }
.pass { position: sticky; top: 8px; z-index: 5; display: flex; gap: 14px; align-items: center; padding: 12px; background: var(--blanc); border-radius: 16px; box-shadow: 0 10px 30px rgba(16, 17, 20, 0.08); }
.pass-avatar { width: 72px; height: 72px; flex: none; border-radius: 50%; overflow: hidden; background: color-mix(in srgb, var(--style) 22%, var(--blanc)); border: 3px solid var(--style); }
.pass-avatar svg { width: 100%; height: 100%; display: block; }
.pass-nom { margin: 2px 0; font-weight: 900; font-size: 22px; line-height: 1.05; word-break: break-word; }
.pass-style { color: var(--encre) !important; }
form { display: grid; gap: 4px; padding-top: 6px; }
fieldset { border: 0; border-bottom: 1px solid var(--filet); margin: 0; padding: 16px 0; min-width: 0; }
legend { padding: 0; margin-bottom: 12px; font-weight: 900; font-size: 17px; float: left; width: 100%; }
legend b { color: var(--corail); font-size: 13px; margin-right: 6px; }
fieldset > *:not(legend) { clear: both; }
input, select { width: 100%; padding: 14px; background: var(--blanc); border: 2px solid var(--filet); border-radius: 12px; font-size: 18px; font-weight: 700; }
input:focus, select:focus { outline: none; border-color: var(--encre); }
.sous { margin: 12px 0 8px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gris); }
.sous:first-of-type { margin-top: 0; }
.sous-voix { margin-top: 14px !important; }
.choix-ligne { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { width: 56px; height: 56px; padding: 0; border: 2px solid var(--filet); border-radius: 12px; background: var(--blanc); overflow: hidden; }
.opt svg { width: 100%; height: 100%; display: block; }
.opt.couleur { width: 44px; height: 44px; background: var(--c); }
.opt.couleur.style { background: linear-gradient(135deg, var(--style) 50%, var(--blanc) 50%); }
.opt[aria-pressed='true'] { border-color: var(--encre); box-shadow: 0 0 0 3px var(--corail); }
.choix-genre { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.choix-voix { grid-template-columns: 1fr 1fr; }
.opt-genre { min-height: 50px; padding: 8px; border: 2px solid var(--filet); border-radius: 12px; background: var(--blanc); font-weight: 800; font-size: 15px; }
.opt-genre[aria-pressed='true'] { border-color: var(--encre); background: var(--encre); color: var(--blanc); }
.grille-styles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tuile { position: relative; overflow: hidden; text-align: left; padding: 12px 12px 12px 18px; border: 2px solid var(--filet); border-radius: 12px; background: var(--blanc); min-height: 84px; }
.tuile::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--c); }
.tuile b { display: block; font-weight: 900; font-size: 17px; margin-bottom: 4px; }
.tuile span { display: block; font-size: 12.5px; color: var(--gris); line-height: 1.3; }
.tuile[aria-pressed='true'] { border-color: var(--encre); background: color-mix(in srgb, var(--c) 14%, var(--blanc)); }
.go { position: sticky; bottom: 0; padding: 14px 0 max(4px, env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--fond) 30%); }
.manque { margin: 0 0 8px; min-height: 16px; font-size: 12px; font-weight: 700; color: var(--gris); }

/* Partie : le moment en plein écran */
#jeu { position: relative; height: 100dvh; min-height: 0; padding: 0; overflow: hidden; background: #000; color: var(--blanc); }
.scene { position: absolute; inset: 0; }
.pile, .zone-carte { position: absolute; inset: 0; }
.pile { background: #000 center / cover no-repeat; transform: scale(0.94); transform-origin: 50% 100%; border-radius: 18px; filter: brightness(0.5); }
.pile.vide { background-image: none !important; }
.carte {
  position: absolute; inset: 0; overflow: hidden; background: #000; color: var(--blanc);
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: grab;
  will-change: transform; animation: monte 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes monte { from { transform: translateY(100%); } to { transform: none; } }
.carte.tenue { cursor: grabbing; border-radius: 18px; }
.carte.retour { transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
.carte.part { border-radius: 18px; transition: transform 0.34s ease-in, opacity 0.34s ease-in; opacity: 0; }
.carte.refus { animation: secoue 0.36s; }
@keyframes secoue { 25% { transform: translateX(-12px); } 50% { transform: translateX(9px); } 75% { transform: translateX(-4px); } }
.c-illu { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 50% 30%, #3A3F55, #0D0F16 70%); }
.c-dessin { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; animation: vivant 14s ease-in-out infinite alternate; }
/* En attendant de vraies vidéos : le dessin avance doucement, comme une caméra (gratuit). */
@keyframes vivant { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.1) translate(-2%, -1.5%); } }
.c-icone { width: 38%; max-width: 140px; aspect-ratio: 1; color: var(--blanc); opacity: 0.85; }
.c-icone svg { width: 100%; height: 100%; display: block; }
.c-voile { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(0,0,0,0.55), transparent 20%, transparent 45%, rgba(0,0,0,0.9)); }
.c-reseau { position: absolute; left: 12px; top: 64px; display: flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 8px; background: rgba(0,0,0,0.45); backdrop-filter: blur(6px); font-weight: 800; font-size: 12px; }
.c-reseau i { width: 8px; height: 8px; border-radius: 2px; background: var(--corail); }
.c-reseau b { font-weight: 900; }
.c-bas { position: absolute; left: 14px; right: 76px; bottom: 116px; pointer-events: none; }
.c-tete { margin: 0 0 6px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 15px; }
.c-qui { font-weight: 900; }
.c-num { font-weight: 600; font-size: 12px; opacity: 0.85; }
.c-texte { margin: 0; font-weight: 800; font-size: 22px; line-height: 1.22; text-shadow: 0 1px 8px rgba(0,0,0,0.4); }
.c-banniere {
  position: absolute; left: 16px; top: 104px; max-width: 70%; padding: 8px 12px; border-radius: 10px; transform: rotate(-7deg);
  background: rgba(16, 17, 20, 0.85); border: 2px solid var(--blanc); color: var(--blanc);
  font-weight: 900; font-size: 18px; line-height: 1.12; opacity: 0; transition: opacity 0.1s; pointer-events: none;
}
.c-banniere::before { content: 'Tu choisis'; display: block; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; }
.c-banniere.d { background: rgba(255, 61, 87, 0.92); border-color: var(--corail); }
.c-banniere.refus { background: var(--encre); border-color: var(--encre); }
.c-banniere.refus::before { content: 'Impossible'; }

.progres { position: absolute; z-index: 4; left: 12px; right: 12px; top: max(10px, env(safe-area-inset-top)); display: grid; grid-template-columns: repeat(20, 1fr); gap: 3px; pointer-events: none; }
.progres i { height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.35); }
.progres i.on { background: var(--blanc); }
.info { position: absolute; z-index: 4; left: 12px; right: 12px; top: calc(max(10px, env(safe-area-inset-top)) + 12px); display: flex; align-items: center; gap: 8px; }
.btn-reseau { position: relative; display: flex; align-items: center; gap: 7px; min-width: 0; padding: 6px 10px; border: 0; border-radius: 9px; background: var(--verre); backdrop-filter: blur(8px); color: var(--blanc); font-weight: 800; font-size: 12.5px; white-space: nowrap; }
.btn-reseau > i { width: 9px; height: 9px; flex: none; border-radius: 2px; background: var(--corail); }
.btn-reseau span { overflow: hidden; text-overflow: ellipsis; }
.pastille { position: absolute; right: -7px; top: -7px; min-width: 19px; height: 19px; padding: 0 5px; display: grid; place-items: center; border-radius: 10px; background: var(--corail); color: var(--blanc); font-style: normal; font-weight: 900; font-size: 11px; }
.argent { position: relative; margin-left: auto; cursor: pointer; }
.argent b { display: block; padding: 6px 10px; border-radius: 9px; background: var(--blanc); color: var(--encre); font-weight: 900; font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.argent i { position: absolute; right: 0; top: 34px; padding: 2px 6px; border-radius: 6px; font-style: normal; font-weight: 900; font-size: 11.5px; white-space: nowrap; color: var(--blanc); }
.argent i:empty { display: none; }
.argent i.plus { background: var(--plus); }
.argent i.moins { background: var(--moins); }
.btn-son { display: grid; place-items: center; }
.btn-son svg { width: 18px; height: 18px; fill: none; stroke: var(--blanc); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.btn-son svg path:first-child { fill: var(--blanc); }
.btn-son .barre-muet { display: none; }
.btn-son.coupe .ondes { display: none; }
.btn-son.coupe .barre-muet { display: inline; }
.rond-aide.petit { width: 32px; height: 32px; border: 0; border-radius: 9px; background: var(--verre); backdrop-filter: blur(8px); color: var(--blanc); font-size: 15px; }

/* Les jauges : la colonne de droite, comme les boutons d'une vidéo verticale */
.hud { position: absolute; z-index: 4; right: 8px; bottom: 112px; }
.jauges { display: grid; gap: 7px; justify-items: center; }
.jauge { position: relative; display: grid; justify-items: center; gap: 2px; }
.j-anneau { position: relative; width: 46px; height: 46px; border-radius: 50%; background: rgba(0, 0, 0, 0.38); backdrop-filter: blur(4px); }
.j-anneau svg { position: absolute; inset: 0; width: 46px; height: 46px; transform: rotate(-90deg); }
.j-anneau circle { fill: none; stroke-width: 4.5; }
.j-anneau .fondc { stroke: rgba(255, 255, 255, 0.25); }
.j-anneau .val { stroke: var(--blanc); transition: stroke-dasharray 0.45s ease-out, stroke 0.3s; }
.j-val { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 900; font-size: 13px; font-variant-numeric: tabular-nums; }
.j-nom { font-weight: 800; font-size: 10px; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
.jauge.danger .val { stroke: var(--corail); }
.jauge.danger .j-anneau { animation: alerte 0.9s ease-in-out infinite; }
@keyframes alerte { 50% { box-shadow: 0 0 0 4px rgba(255, 61, 87, 0.45); } }
.jauge.vise .j-anneau { box-shadow: 0 0 0 2px var(--blanc); }
.j-apercu { position: absolute; z-index: 1; right: -7px; top: -5px; min-width: 18px; padding: 1px 4px; border-radius: 6px; font-size: 11px; line-height: 15px; text-align: center; color: var(--blanc); }
.j-apercu:empty { display: none; }
.j-apercu.haut { background: var(--plus); }
.j-apercu.bas { background: var(--moins); }
.delta { position: absolute; left: -38px; top: 12px; font-weight: 900; font-size: 14px; animation: monte-delta 1.1s ease-out forwards; pointer-events: none; white-space: nowrap; text-shadow: 0 1px 4px rgba(0,0,0,0.7); }
.delta.plus { color: #5CF0B5; } .delta.moins { color: #FF8597; }
@keyframes monte-delta { from { opacity: 1; transform: translateY(4px); } to { opacity: 0; transform: translateY(-20px); } }

.astuce { position: absolute; z-index: 4; left: 12px; right: 12px; bottom: 84px; margin: 0; text-align: center; font-weight: 700; font-size: 12px; opacity: 0.85; pointer-events: none; text-shadow: 0 1px 4px rgba(0,0,0,0.7); }
.astuce.rappel { animation: rappel 0.9s ease-out; }
@keyframes rappel { 0%, 60% { opacity: 1; transform: scale(1.12); color: #FFD3DA; } }
.btn-choix.rappel { animation: secoue-btn 0.5s; }
@keyframes secoue-btn { 25% { transform: translateY(-4px); } 50% { transform: translateY(2px); } 75% { transform: translateY(-2px); } }
.choix { position: absolute; z-index: 4; left: 12px; right: 12px; bottom: max(14px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn-choix { display: flex; align-items: center; gap: 6px; min-height: 58px; padding: 9px 11px; border: 2px solid transparent; border-radius: 12px; background: rgba(255, 255, 255, 0.16); backdrop-filter: blur(8px); color: var(--blanc); text-align: left; font-weight: 800; font-size: 13.5px; line-height: 1.2; }
.btn-choix::before { content: '←'; font-weight: 900; }
#choix-d { justify-content: flex-end; text-align: right; background: rgba(255, 61, 87, 0.9); }
#choix-d::before { content: none; }
#choix-d::after { content: '→'; font-weight: 900; }
.btn-choix.vise { border-color: var(--blanc); }
.btn-choix.trop-cher { opacity: 0.5; }
.btn-choix:disabled { opacity: 0.5; cursor: default; }

/* Le toast : une notification qui descend */
.toast { position: absolute; z-index: 6; left: 50%; top: 58px; width: min(88%, 380px); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 0; border-radius: 14px; background: var(--blanc); color: var(--encre); text-align: left; font-weight: 800; font-size: 13.5px; line-height: 1.25; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35); }
.toast > i { width: 30px; height: 30px; flex: none; border-radius: 8px; background: var(--corail); }
.toast.entre { animation: descend 0.32s ease-out; }
@keyframes descend { from { transform: translate(-50%, -16px); opacity: 0; } }

/* Le concert en direct */
.direct { position: absolute; z-index: 4; left: 12px; top: 60px; display: flex; align-items: center; gap: 8px; }
.en-direct { padding: 3px 8px; border-radius: 5px; background: var(--corail); font-weight: 900; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; animation: clignote 1.6s ease-in-out infinite; }
@keyframes clignote { 50% { opacity: 0.65; } }
.spectateurs { padding: 3px 8px; border-radius: 5px; background: var(--verre); backdrop-filter: blur(6px); font-weight: 800; font-size: 12px; font-variant-numeric: tabular-nums; }
.ambiance { position: absolute; z-index: 4; left: 12px; right: 68px; top: 90px; display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
.barre-amb { flex: 1; display: grid; grid-template-columns: repeat(20, 1fr); gap: 2px; height: 8px; }
.barre-amb i { border-radius: 2px; background: rgba(255, 255, 255, 0.25); }
.barre-amb i.on { background: var(--blanc); }
.amb-apercu { width: 24px; font-style: normal; text-align: right; }
.amb-apercu.haut { color: #5CF0B5; } .amb-apercu.bas { color: #FF8597; }
.fil-direct { position: absolute; z-index: 3; left: 12px; width: 64%; bottom: 112px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; max-height: 210px; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(transparent, #000 35%); mask-image: linear-gradient(transparent, #000 35%); }
body:not(.concert) .fil-direct, body:not(.concert) .coeurs, body.en-rythme .fil-direct { display: none; }
/* Pendant les cartes du concert, les commentaires passent au-dessus du texte du moment. */
body.concert .fil-direct { bottom: auto; top: 118px; max-height: 150px; -webkit-mask-image: linear-gradient(transparent, #000 30%); mask-image: linear-gradient(transparent, #000 30%); }
.com-direct { align-self: flex-start; max-width: 100%; padding: 6px 9px; border-radius: 10px; background: rgba(0, 0, 0, 0.42); backdrop-filter: blur(4px); font-weight: 700; font-size: 12.5px; line-height: 1.3; animation: arrive-com 0.3s ease-out; }
.com-direct b { font-weight: 900; opacity: 0.75; margin-right: 4px; }
.com-direct.hater { border-left: 3px solid var(--corail); }
@keyframes arrive-com { from { transform: translateY(10px); opacity: 0; } }
.coeurs { position: absolute; z-index: 3; right: 16px; bottom: 110px; width: 60px; height: 320px; pointer-events: none; }
.coeur { position: absolute; bottom: 0; width: 22px; height: 22px; animation: envol 1.8s ease-out forwards; }
.coeur svg { width: 100%; height: 100%; display: block; }
@keyframes envol { 0% { transform: translate(0, 0) scale(0.6); opacity: 1; } 100% { transform: translate(var(--x), -300px) scale(1.15); opacity: 0; } }
.foule { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 64px; display: none; grid-template-columns: repeat(18, 1fr); gap: 3px; align-items: end; padding: 0 6px; pointer-events: none; opacity: 0.5; }
body.concert .foule { display: grid; }
.foule i { height: 8px; border-radius: 3px 3px 0 0; background: var(--blanc); transform-origin: bottom; }

.rythme { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; padding: 118px 66px 100px 12px; background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.78)), url(dessins/bar.webp) center / cover; touch-action: none; user-select: none; -webkit-user-select: none; }
.r-haut { display: flex; justify-content: space-between; padding: 6px 2px 8px; font-weight: 900; font-size: 13px; }
#r-combo { color: #5CF0B5; }
.piste { position: relative; flex: 1; overflow: hidden; border-radius: 12px; background: linear-gradient(90deg, transparent calc(50% - 50px), rgba(255,255,255,0.07) calc(50% - 50px), rgba(255,255,255,0.07) calc(50% + 50px), transparent calc(50% + 50px)); }
.note { position: absolute; left: 50%; top: 0; width: 84px; height: 20px; margin: -10px 0 0 -42px; border-radius: 7px; background: var(--corail); box-shadow: 0 0 18px rgba(255, 61, 87, 0.8); will-change: transform; }
.note.touchee { background: var(--blanc); transition: opacity 0.2s, transform 0.2s; opacity: 0; }
.note.ratee { background: #555; box-shadow: none; opacity: 0.6; }
.ligne-frappe { position: absolute; left: 10px; right: 10px; height: 4px; border-radius: 2px; background: var(--blanc); box-shadow: 0 0 16px rgba(255,255,255,0.6); }
.ligne-frappe.tape { background: #5CF0B5; box-shadow: 0 0 26px #5CF0B5; }
.r-juge { position: absolute; left: 0; right: 0; bottom: 38%; text-align: center; font-weight: 900; font-size: 30px; text-transform: uppercase; pointer-events: none; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.r-juge.pop { animation: juge 0.45s ease-out; }
.r-juge.parfait { color: #5CF0B5; } .r-juge.bien { color: var(--blanc); } .r-juge.rate { color: #FF8597; }
@keyframes juge { from { transform: scale(1.35); } to { transform: none; } }
.r-decompte { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 900; font-size: 96px; pointer-events: none; text-shadow: 0 4px 30px rgba(0,0,0,0.5); }
.pad { position: absolute; z-index: 4; left: 12px; right: 12px; bottom: max(14px, env(safe-area-inset-bottom)); height: 76px; border: 0; border-radius: 14px; background: var(--corail); color: var(--blanc); font-weight: 900; font-size: 24px; text-transform: uppercase; touch-action: none; }
.pad.tape { background: var(--blanc); color: var(--corail); }

/* Panneaux */
.panneau { position: fixed; inset: 0; z-index: 20; display: grid; place-items: end center; padding: 12px; background: rgba(16, 17, 20, 0.5); backdrop-filter: blur(4px); animation: fondu 0.2s; }
@keyframes fondu { from { opacity: 0; } }
.feuille { width: 100%; max-width: 456px; max-height: calc(100dvh - 24px); overflow: auto; padding: 22px 18px 18px; border-radius: 18px; background: var(--blanc); color: var(--encre); display: grid; gap: 14px; animation: glisse 0.3s ease-out; }
@keyframes glisse { from { transform: translateY(30px); } }
.feuille h2 { margin: 0; font-weight: 900; font-size: 26px; line-height: 1.05; }
.regles { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.regles li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.35; }
.regles b { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; background: var(--corail); color: var(--blanc); font-size: 13px; }
.regles em { font-style: normal; }
.regles em.haut { color: var(--plus); } .regles em.bas { color: var(--moins); }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stat { position: relative; padding: 12px; border-radius: 12px; background: var(--fond); display: grid; gap: 6px; }
.stat b { font-weight: 900; font-size: 26px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat i { position: absolute; right: 10px; top: 10px; font-style: normal; font-weight: 900; font-size: 12px; color: var(--plus); }
.graphe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; align-items: end; height: 120px; padding: 0 2px; border-bottom: 1px solid var(--filet); }
.barre-g { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
.barre-g i { width: 100%; min-height: 3px; border-radius: 6px 6px 0 0; background: var(--filet); transition: height 0.8s ease-out; }
.barre-g.actuel i { background: var(--corail); }
.barre-g span { font-size: 10.5px; font-weight: 700; color: var(--gris); }
.barre-g.vide i { height: 20px; background: repeating-linear-gradient(135deg, var(--filet) 0 2px, transparent 2px 6px); }
.bilan-ligne { margin: 0; font-size: 15px; line-height: 1.35; }
.defaite-texte { margin: 0; font-size: 17px; line-height: 1.35; }
.intro-bonus { color: var(--corail); }
.note-geante { display: flex; align-items: baseline; gap: 6px; }
.note-geante b { font-size: 64px; color: var(--corail); font-variant-numeric: tabular-nums; }
.note-geante span { font-size: 18px; color: var(--gris); }
.detail { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--filet); }
.detail li { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--filet); font-size: 15px; }
.detail li b { font-variant-numeric: tabular-nums; }
.verdict { padding: 14px; border-radius: 12px; background: var(--fond); border-left: 6px solid var(--corail); font-weight: 800; font-size: 17px; line-height: 1.3; }
.verdict small { display: block; margin-top: 6px; font-weight: 600; font-size: 14px; color: var(--gris); }
.verdict.non { border-left-color: var(--gris); }

/* Social Network : le fil qui défile vers le haut */
.panneau.plein-ecran { padding: 0; place-items: stretch center; background: rgba(0, 0, 0, 0.6); }
.feuille-reseau { position: relative; display: block; width: 100%; max-width: 480px; height: 100dvh; max-height: none; padding: 0; border-radius: 0; background: #000; color: var(--blanc); overflow: hidden; }
.sn-tete { position: absolute; z-index: 3; left: 0; right: 0; top: 0; display: flex; justify-content: flex-start; padding: max(14px, env(safe-area-inset-top)) 90px 18px 16px; background: linear-gradient(rgba(0,0,0,0.6), transparent); pointer-events: none; }
.sn-onglets { display: flex; gap: 20px; pointer-events: auto; }
.sn-onglets button { padding: 0 0 5px; border: 0; border-bottom: 3px solid transparent; background: none; color: rgba(255, 255, 255, 0.65); font-weight: 800; font-size: 15px; }
.sn-onglets button[aria-selected='true'] { color: var(--blanc); border-bottom-color: var(--blanc); }
.sn-onglets b { color: var(--corail); }
.lien-fermer { position: absolute; right: 12px; top: max(10px, env(safe-area-inset-top)); padding: 6px 10px; border: 0; border-radius: 9px; background: var(--verre); backdrop-filter: blur(8px); color: var(--blanc); font-weight: 800; font-size: 12.5px; pointer-events: auto; }
.sn-videos { position: absolute; inset: 0; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; }
.sn-videos::-webkit-scrollbar { display: none; }
.sn-page { position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; }
.sn-page > img, .sn-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.c-video { animation: none; }
.sn-page .c-voile { background: linear-gradient(rgba(0,0,0,0.5), transparent 18%, transparent 50%, rgba(0,0,0,0.9)); }
.sn-duree { position: absolute; right: 12px; top: 58px; padding: 3px 7px; border-radius: 6px; background: rgba(0, 0, 0, 0.5); font-weight: 800; font-size: 11.5px; }
.sn-reac { position: absolute; right: 10px; bottom: 120px; display: grid; gap: 14px; justify-items: center; font-weight: 800; font-size: 12px; text-shadow: 0 1px 3px rgba(0,0,0,0.7); }
.sn-reac div { display: grid; justify-items: center; gap: 3px; }
.sn-reac svg { width: 30px; height: 30px; fill: none; stroke: var(--blanc); stroke-width: 2.3; }
.sn-bas { position: absolute; left: 14px; right: 74px; bottom: 56px; }
.sn-bas b { font-weight: 800; font-size: 15px; }
.sn-bas h3 { margin: 4px 0 4px; font-weight: 800; font-size: 19px; line-height: 1.2; }
.sn-chiffres { margin: 0 0 6px; font-weight: 700; font-size: 13px; opacity: 0.85; font-variant-numeric: tabular-nums; }
.sn-coms { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sn-coms li { padding: 7px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(6px); font-weight: 700; font-size: 13px; line-height: 1.3; }
.sn-coms li b { font-weight: 800; font-size: 12px; opacity: 0.75; margin-right: 4px; }
.sn-coms li.hater { border-left: 3px solid var(--corail); }
.sn-suivant { position: absolute; left: 0; right: 0; bottom: max(16px, env(safe-area-inset-bottom)); margin: 0; text-align: center; font-weight: 700; font-size: 11.5px; opacity: 0.8; }
.sn-profil { background: linear-gradient(160deg, #22252F, #0D0F16); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; padding: 80px 24px 60px; text-align: center; }
.sn-avatar { width: 108px; height: 108px; border-radius: 50%; overflow: hidden; background: color-mix(in srgb, var(--style) 25%, var(--blanc)); border: 4px solid var(--style); }
.sn-avatar svg { width: 100%; height: 100%; display: block; }
.sn-qui b { display: block; font-weight: 900; font-size: 26px; }
.sn-qui span { font-weight: 700; font-size: 14px; opacity: 0.75; }
.sn-stats { margin: 6px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sn-stats dt { font-weight: 700; font-size: 12px; opacity: 0.7; }
.sn-stats dd { margin: 2px 0 0; font-weight: 900; font-size: 20px; font-variant-numeric: tabular-nums; }
.sn-messages { position: absolute; inset: 0; overflow-y: auto; padding: 70px 14px 24px; display: grid; gap: 12px; align-content: start; background: #0F1014; }
.sn-message { padding: 12px; border-radius: 14px; background: #1C1E25; display: grid; gap: 6px; }
.sn-message p { margin: 0; font-size: 15px; line-height: 1.35; }
.sn-message .mono { color: #5CF0B5; }
.sn-de { display: flex; align-items: center; gap: 8px; }
.sn-de em { padding: 2px 6px; border-radius: 5px; background: var(--corail); font-style: normal; font-weight: 900; font-size: 10.5px; text-transform: uppercase; }
.sn-message.suspect { box-shadow: inset 0 0 0 2px var(--corail); }
.sn-vide { margin: 30px 0; text-align: center; font-weight: 700; font-size: 15px; opacity: 0.8; }

/* Fin de la maquette */
#fin-maquette { justify-content: center; gap: 18px; }
.etiquette { align-self: flex-start; margin: 0; padding: 6px 10px; border-radius: 8px; background: var(--encre); color: var(--blanc); font-weight: 800; font-size: 12px; }
.pass-final { position: static; flex-wrap: wrap; }
.pass-final .pass-avatar { width: 92px; height: 92px; }
.pass-final dl { width: 100%; margin: 4px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pass-final dl div { padding: 10px; border-radius: 10px; background: var(--fond); }
.pass-final dt { font-size: 11px; font-weight: 800; text-transform: uppercase; color: var(--gris); }
.pass-final dd { margin: 2px 0 0; font-weight: 900; font-size: 16px; font-variant-numeric: tabular-nums; }
.suite { margin: 0; font-weight: 700; font-size: 18px; line-height: 1.3; }
.feuille-route { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.feuille-route li { padding: 7px 10px; border-radius: 8px; border: 2px solid var(--filet); font-weight: 800; font-size: 12.5px; color: var(--gris); }
.feuille-route li.fait { border-color: var(--corail); color: var(--corail); }
.actions { display: grid; gap: 10px; }

@media (max-height: 680px) {
  .c-texte { font-size: 18px; }
  .c-bas { bottom: 104px; }
  .hud { bottom: 100px; }
  .jauges { gap: 4px; }
  .j-anneau, .j-anneau svg { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) { .carte, .notif, .en-direct, .c-dessin { animation: none; } }