/* ZICLOVE — fond TOTALEMENT noir (François, 30/10), or pour les rangs, rose pour l'action */
:root {
  --nuit: #000; --nuit-2: #121212; --ligne: rgba(255,255,255,.12);
  --texte: #f6f3fb; --doux: rgba(246,243,251,.68); --or: #ffd64a; --rose: #ff3d7f; --rose-2: #ff7aa8;
  --rayon: 18px; --gouttiere: 16px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100svh; background: var(--nuit); color: var(--texte); font: 500 17px/1.45 "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif; display: flex; flex-direction: column; overflow-x: hidden; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--or); outline-offset: 3px; border-radius: 8px; }

.lueur { display: none; position: fixed; inset: -20%; z-index: -1; background-size: cover; background-position: center; filter: blur(70px) saturate(1.7) brightness(.55); transform: scale(1.1); }
.lueur::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 30%, transparent 0, rgba(11,10,16,.55) 55%, var(--nuit) 90%); }
.lueur-vide { background: radial-gradient(circle at 25% 20%, #5b2bff 0, transparent 45%), radial-gradient(circle at 80% 35%, #ff3d7f 0, transparent 40%), radial-gradient(circle at 50% 90%, #ffb23d 0, transparent 40%); filter: blur(60px) brightness(.6); }

.haut { display: flex; align-items: center; justify-content: space-between; padding: 18px var(--gouttiere); max-width: 720px; width: 100%; margin: 0 auto; }
.logo { font-weight: 900; font-size: 24px; letter-spacing: -.04em; text-decoration: none; }
.logo b { color: var(--rose); font-weight: 900; }
.haut-lien { font-weight: 700; font-size: 15px; text-decoration: none; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.1); }

main { flex: 1; width: 100%; max-width: 720px; margin: 0 auto; padding: 8px var(--gouttiere) 32px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; padding: 0 26px; border: 0; border-radius: 999px; background: var(--rose); color: #fff; font-weight: 800; font-size: 17px; text-decoration: none; cursor: pointer; box-shadow: 0 10px 30px -10px rgba(255,61,127,.8); transition: transform .15s ease, background .15s ease; }
.btn:hover { background: var(--rose-2); }
.btn:active { transform: scale(.97); }
.btn.sec { background: rgba(255,255,255,.12); box-shadow: none; }
.btn.sec:hover { background: rgba(255,255,255,.2); }
.btn[disabled] { opacity: .5; cursor: default; }
.lien-doux { color: var(--doux); font-weight: 700; font-size: 15px; text-align: center; padding: 8px; }

/* ACCUEIL */
.titre-h { font-weight: 900; font-size: clamp(40px, 11vw, 68px); line-height: .98; letter-spacing: -.045em; margin: 18px 0 14px; text-wrap: balance; }
.titre-h span { background: linear-gradient(90deg, var(--rose), var(--or)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.chapeau { color: var(--doux); font-size: 18px; margin: 0 0 26px; max-width: 34ch; }
.cases { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.case { width: 100%; display: flex; align-items: center; gap: 14px; min-height: 84px; padding: 12px; text-align: left; border: 1.5px dashed var(--ligne); border-radius: var(--rayon); background: rgba(255,255,255,.05); cursor: pointer; transition: background .15s, border-color .15s; }
.case:hover { background: rgba(255,255,255,.09); }
.case.pleine { border-style: solid; border-color: transparent; background: rgba(255,255,255,.1); }
.case .num { flex: none; width: 34px; text-align: center; font-weight: 900; font-size: 26px; color: var(--or); }
.case .vide { font-weight: 700; color: var(--doux); }
.case img { width: 60px; height: 60px; border-radius: 10px; object-fit: cover; flex: none; }
.case .txt { min-width: 0; display: flex; flex-direction: column; }
.case .t { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.case .a { color: var(--doux); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.case .poignee { margin-left: auto; flex: none; display: grid; gap: 5px; place-content: center; width: 44px; height: 56px; touch-action: none; cursor: grab; }
.case .poignee i { display: block; width: 22px; height: 3px; border-radius: 2px; background: var(--doux); }
.cases li { transition: transform .18s ease; }
.cases li.glisse { transition: none; position: relative; z-index: 3; }
.cases li.glisse .case { background: rgba(255,255,255,.16); box-shadow: 0 12px 30px rgba(0,0,0,.6); }
.resultats li.deja { opacity: .45; }
.resultats li.deja .choisir { cursor: default; }
.fin-titre { margin: 0; font-weight: 800; font-size: 18px; }
.fin { margin-top: 26px; display: grid; gap: 10px; }
.fin label { font-weight: 800; }
.fin input { width: 100%; min-height: 54px; padding: 0 18px; border-radius: 14px; border: 1.5px solid var(--ligne); background: rgba(0,0,0,.35); color: var(--texte); font: 700 18px "Inter Tight", system-ui, sans-serif; }
.fin input:focus { outline: none; border-color: var(--or); }
/* « @ » fixe dans le champ, visible même une fois le nom tapé (François, 30/10) */
.champ-at { position: relative; display: block; }
.champ-at > span { position: absolute; left: 52px; top: 50%; transform: translateY(-50%); font-weight: 800; font-size: 18px; color: var(--or); pointer-events: none; }
.champ-at > .ico { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); display: grid; color: var(--doux); pointer-events: none; }   /* icône du réseau à la place de l'intitulé : gain de hauteur (François, 30/10) */
.fin .champ-at input { padding-left: 74px; }
.lecteur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fin .btn { margin-top: 6px; }
.note { color: var(--doux); font-size: 14px; margin: 2px 0 0; }
.erreur { color: #ffb4c8; font-weight: 700; font-size: 15px; margin: 0; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* RECHERCHE (feuille) */
.feuille { border: 0; padding: 0; background: var(--nuit-2); color: var(--texte); border-radius: 22px; width: min(640px, calc(100% - 2 * var(--gouttiere))); max-height: 86svh; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.feuille::backdrop { background: #000; }   /* noir uni, sans flou (François, 30/10) */
.feuille:not(.recherche) { padding: 26px 22px; }
.feuille h2 { margin: 0 0 10px; font-weight: 900; font-size: 26px; letter-spacing: -.02em; }
.feuille p { color: var(--doux); margin: 0 0 20px; }
/* feuille de recherche : collée en haut, hauteur = fenêtre VISIBLE (clavier déduit, réglée en JS via visualViewport) ; seule la liste défile,
   le champ reste toujours visible (vécu 30/10 sur iPhone : la barre remontait hors de l'écran) */
.recherche { display: none; flex-direction: column; overflow: hidden; margin: 12px auto 0; height: calc(100dvh - 24px); max-height: calc(100dvh - 24px); }
.recherche[open] { display: flex; }
.rech-haut { display: flex; gap: 8px; padding: 14px; border-bottom: 1px solid var(--ligne); flex: none; }
.rech-haut input { flex: 1; min-width: 0; min-height: 50px; padding: 0 16px; border-radius: 14px; border: 0; background: rgba(255,255,255,.08); color: var(--texte); font: 700 18px "Inter Tight", system-ui, sans-serif; }
.rech-haut input:focus { outline: 2px solid var(--or); }
.fermer { width: 50px; border: 0; border-radius: 14px; background: rgba(255,255,255,.08); font-size: 28px; line-height: 1; cursor: pointer; }
.resultats { list-style: none; margin: 0; padding: 6px; overflow-y: auto; flex: 1; min-height: 0; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
body.rech-ouverte { overflow: hidden; position: fixed; width: 100%; }
.resultats li { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 14px; }
.resultats li:hover { background: rgba(255,255,255,.06); }
.resultats .ecoute { position: relative; flex: none; width: 56px; height: 56px; border: 0; padding: 0; border-radius: 10px; overflow: hidden; cursor: pointer; background: #222; }
.resultats .ecoute img { width: 100%; height: 100%; object-fit: cover; display: block; }
.resultats .ecoute::after { content: "▶"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 18px; background: rgba(0,0,0,.35); opacity: 0; transition: opacity .15s; }
.resultats .ecoute:hover::after, .resultats .ecoute.joue::after { opacity: 1; }
.resultats .ecoute.joue::after { content: "❚❚"; font-size: 14px; }
.resultats .choisir { flex: 1; min-width: 0; text-align: left; border: 0; background: none; padding: 6px 0; cursor: pointer; display: flex; flex-direction: column; }
.resultats .choisir .t { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resultats .choisir .a { color: var(--doux); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resultats .info { color: var(--doux); padding: 18px 10px; justify-content: center; text-align: center; }

/* @ (facultatif) à la création */
.reseaux { border-radius: 14px; background: rgba(255,255,255,.05); padding: 4px 14px; }
.reseaux summary { cursor: pointer; font-weight: 800; padding: 12px 0; }
.reseaux summary span { color: var(--doux); font-weight: 600; }
.reseaux[open] { display: grid; gap: 8px; padding-bottom: 14px; }
.reseaux .note { margin: 0 0 4px; }

/* PROFIL */
.profil { text-align: center; }
.sur { margin: 0; font-weight: 700; color: var(--doux); letter-spacing: .14em; text-transform: uppercase; font-size: 13px; }
.pseudo { margin: 4px 0 8px; font-weight: 900; font-size: clamp(30px, 9vw, 52px); line-height: 1; letter-spacing: -.045em; text-wrap: balance; overflow-wrap: anywhere; }
/* page publique compacte (François, 30/10) : les TROIS titres visibles sans défiler sur un téléphone */
.podium { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; max-width: 360px; }
.piste { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.piste.r1 { grid-column: 1 / -1; }
.poch { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 16px; background: none; cursor: pointer; }
.piste.r1 .poch { width: min(50%, 240px); }
.piste.r2 .poch, .piste.r3 .poch { width: 76%; }
.poch img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; border-radius: 16px; display: block; box-shadow: 0 18px 40px -12px rgba(0,0,0,.7); }
.poch .halo { position: absolute; inset: 8%; z-index: 0; background-size: cover; filter: blur(28px) saturate(1.8); opacity: .85; border-radius: 30px; transform: translateY(10%); }
.poch .lecture { position: absolute; z-index: 2; right: 10px; bottom: 10px; width: 44px; height: 44px; border-radius: 50%; background: rgba(0,0,0,.55); backdrop-filter: blur(4px); display: grid; place-items: center; }
.poch .lecture::before { content: ""; border-left: 14px solid #fff; border-top: 9px solid transparent; border-bottom: 9px solid transparent; margin-left: 4px; }
.poch.joue .lecture::before { border: 0; width: 14px; height: 16px; margin: 0; background: linear-gradient(90deg, #fff 0 35%, transparent 35% 65%, #fff 65%); }
.poch.joue img { animation: battement .9s ease-in-out infinite alternate; }
@keyframes battement { to { transform: scale(1.025); } }
.rang { margin-top: 8px; font-weight: 900; font-size: 18px; color: var(--or); line-height: 1; }
.piste.r1 .rang { font-size: 22px; }
.titre { margin-top: 3px; font-weight: 800; font-size: 15px; line-height: 1.2; max-width: 100%; overflow-wrap: anywhere; }
.piste.r1 .titre { font-size: 19px; }
.artiste { color: var(--doux); font-size: 13px; max-width: 100%; overflow-wrap: anywhere; }
.reseaux-profil { display: flex; justify-content: center; gap: 16px; margin: 0 0 16px; }
.reseaux-profil a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--texte); background: rgba(255,255,255,.08); }   /* icônes seules, sans répéter le @ (François, 30/10) */
.reseaux-profil a:hover { background: rgba(255,255,255,.16); }
.btn.video { background: linear-gradient(90deg, var(--rose), #ff8a3d); }
#fVideo { padding: 14px; text-align: center; }
.video-boite { display: flex; justify-content: center; }
#lecteur { width: auto; max-width: 100%; max-height: 64svh; aspect-ratio: 9 / 16; border-radius: 14px; background: #000; }
.video-etat { padding: 40px 10px; font-weight: 700; color: var(--texte) !important; }
.video-actions { display: grid; gap: 10px; margin: 14px 0 4px; }
#fReseau .fin { margin-top: 0; }
.actions { display: grid; gap: 10px; max-width: 420px; margin: 24px auto 0; }
.p-profil { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.barre-bas { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; padding: 14px var(--gouttiere) calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(0,0,0,0), #000 40%); display: flex; justify-content: center; }
.barre-bas .btn { width: 100%; max-width: 420px; }

.bandeau { position: static; display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 auto; width: 100%; max-width: 720px; padding: 16px var(--gouttiere) calc(16px + env(safe-area-inset-bottom)); text-decoration: none; font-weight: 800; font-size: 15px; text-align: center; }
.bandeau span { text-wrap: balance; }
.bandeau i { font-style: normal; color: var(--rose); font-size: 20px; }
.bandeau.jumeaux span { background: linear-gradient(90deg, var(--or), var(--rose-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }

.vide-404 { text-align: center; padding-top: 60px; }
.vide-404 h1 { text-wrap: balance; font-weight: 900; font-size: 36px; letter-spacing: -.03em; }
.vide-404 p { color: var(--doux); margin-bottom: 26px; }

.pied { text-align: center; color: rgba(246,243,251,.45); font-size: 13px; padding: 18px var(--gouttiere) 26px; }

.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); z-index: 20; margin: 0; padding: 12px 20px; border-radius: 999px; background: #fff; color: #000; font-weight: 800; font-size: 15px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.toast.vu { opacity: 1; transform: translate(-50%, 0); }
/* MENU (burger) */
.burger { width: 44px; height: 44px; border: 0; border-radius: 12px; background: rgba(255,255,255,.08); display: grid; place-content: center; gap: 5px; cursor: pointer; }
.burger i { display: block; width: 20px; height: 2.5px; border-radius: 2px; background: var(--texte); }
.menu { position: fixed; inset: 0 0 0 auto; border: 0; padding: 0; margin: 0 0 0 auto; width: min(380px, 88vw); max-width: none; height: 100dvh; max-height: none; background: #0c0c0e; color: var(--texte); }
.menu::backdrop { background: rgba(0,0,0,.7); }
.menu[open] { display: flex; flex-direction: column; animation: menuEntre .22s ease; }
@keyframes menuEntre { from { transform: translateX(30px); opacity: 0; } }
.menu-haut { display: flex; align-items: center; justify-content: space-between; padding: 18px 18px 8px; }
.menu-haut .fermer { width: 44px; height: 44px; border: 0; border-radius: 12px; background: rgba(255,255,255,.08); font-size: 28px; cursor: pointer; }
.menu-liens { display: grid; padding: 8px; }
.menu-liens a { display: grid; gap: 2px; padding: 14px 12px; border-radius: 14px; text-decoration: none; }
.menu-liens a:hover { background: rgba(255,255,255,.06); }
.menu-liens span { font-weight: 800; font-size: 18px; }
.menu-liens small { color: var(--doux); font-size: 14px; overflow-wrap: anywhere; }
.menu-legal { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 18px 20px calc(22px + env(safe-area-inset-bottom)); }
.menu-legal a { color: var(--doux); font-size: 14px; }
.pied nav { margin-bottom: 6px; }
.pied a { color: inherit; }
/* PAGES (jumeaux, classement, tendances, légal, connexion) */
.page { max-width: 720px; }
.h-page { font-weight: 900; font-size: clamp(30px, 8vw, 44px); letter-spacing: -.03em; line-height: 1.05; margin: 10px 0 12px; text-wrap: balance; }
.groupe { margin-top: 28px; }
.groupe h2 { font-size: 19px; font-weight: 800; margin: 0 0 10px; display: flex; gap: 10px; align-items: baseline; }
.groupe h2 span { color: var(--or); }
.vide-doux { color: var(--doux); margin: 0; }
.liste-titres { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.liste-titres li { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 14px; background: rgba(255,255,255,.04); }
.lt-rang { width: 26px; text-align: center; font-weight: 900; color: var(--or); flex: none; font-variant-numeric: tabular-nums; }
.liste-titres img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; flex: none; }
.lt-txt { min-width: 0; flex: 1; display: grid; }
.lt-txt b, .lt-txt span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-txt span { color: var(--doux); font-size: 14px; }
.lt-info { flex: none; color: var(--doux); font-size: 13px; text-align: right; }
.hausse { color: #5ee08a; font-size: 17px; } .baisse { color: #ff7a7a; font-size: 17px; }
.jumeaux { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.jumeaux li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.04); }
.jumeaux li > a:first-child { font-weight: 800; text-decoration: none; margin-right: auto; overflow-wrap: anywhere; }
.j-res { color: var(--doux); font-size: 14px; font-weight: 700; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
.legal-nav a { font-size: 14px; font-weight: 700; color: var(--doux); text-decoration: none; padding: 7px 13px; border-radius: 999px; background: rgba(255,255,255,.06); }
.legal-nav a.on { color: #000; background: var(--or); }
.legal h2 { font-size: 18px; font-weight: 800; margin: 26px 0 6px; }
.legal p, .legal li { color: #d8d4e2; line-height: 1.6; font-size: 16px; max-width: 65ch; }
.legal a, .note a { color: var(--or); }
.case-coche { display: flex; gap: 12px; align-items: center; font-weight: 600 !important; font-size: 15px; line-height: 1.35; color: var(--doux); cursor: pointer; }
/* vraie case à cocher, carrée (vécu 30/10 : héritait du style des champs et ressemblait à un bouton radio décalé) */
.fin .case-coche input { -webkit-appearance: none; appearance: none; flex: none; width: 24px; height: 24px; min-height: 0; margin: 0; padding: 0; border: 2px solid rgba(255,255,255,.35); border-radius: 7px; background: transparent; display: grid; place-content: center; cursor: pointer; }
.fin .case-coche input::after { content: ""; width: 6px; height: 11px; border: solid #000; border-width: 0 3px 3px 0; transform: rotate(45deg) translate(-1px, -1px); opacity: 0; }
.fin .case-coche input:checked { background: var(--or); border-color: var(--or); }
.fin .case-coche input:checked::after { opacity: 1; }
.fin .case-coche input:focus-visible { outline: 3px solid var(--or); outline-offset: 2px; }
.merci { padding: 18px; border-radius: 16px; background: rgba(255,214,74,.1); line-height: 1.5; }
.merci b { color: var(--or); }
.p-page .form-compte { margin-top: 18px; max-width: 460px; }
/* identité : photo ronde à gauche du @ (gain de hauteur) */
.ident { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 4px; }
.ident.avec-photo .ident-txt { text-align: left; min-width: 0; }
.ident.avec-photo .pseudo { font-size: clamp(26px, 7.5vw, 44px); margin-bottom: 0; }
.avatar { position: relative; flex: none; width: 72px; height: 72px; border-radius: 50%; padding: 0; border: 2px solid rgba(255,214,74,.7); background: #151515; display: grid; place-items: center; overflow: visible; cursor: pointer; }
span.avatar { cursor: default; }
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.avatar-plus { font-size: 34px; font-weight: 500; color: var(--or); line-height: 1; }
.avatar-badge { position: absolute; right: -4px; bottom: -4px; width: 26px; height: 26px; border-radius: 50%; background: var(--or); color: #000; font-style: normal; font-size: 14px; display: grid; place-items: center; }
.avatar.envoi { opacity: .5; }
/* connexion Google + séparateur « ou par e-mail » */
.g-bloc { margin-top: 18px; max-width: 460px; }
.g-bouton { min-height: 44px; display: flex; justify-content: center; }
.g-bouton iframe { color-scheme: light; }   /* sinon, page en thème sombre → rectangle blanc derrière le bouton Google (vécu 30/10) */
.ou { display: flex; align-items: center; gap: 12px; margin: 16px 0 0; color: var(--doux); font-size: 14px; }
.ou::before, .ou::after { content: ""; flex: 1; height: 1px; background: var(--ligne); }
.g-bloc + .form-compte { margin-top: 12px !important; }
/* CARTE DE CONNEXION (jumeaux, se connecter) — même univers que la vidéo : vinyle, or, noir profond */
.carte-connexion { position: relative; max-width: 460px; margin: 0 auto; text-align: center; }
.cc-visuel { position: relative; height: 210px; margin: 4px auto 6px; display: grid; place-items: center; }
.cc-vinyle { position: absolute; width: 230px; height: 230px; object-fit: contain; opacity: .9; animation: ccTourne 24s linear infinite; filter: drop-shadow(0 0 40px rgba(255,170,60,.25)); }
@keyframes ccTourne { to { transform: rotate(360deg); } }
.cc-poch { position: absolute; width: 96px; height: 96px; border-radius: 14px; object-fit: cover; box-shadow: 0 14px 30px rgba(0,0,0,.7); border: 1px solid rgba(255,255,255,.12); }
.cc-p1 { z-index: 3; transform: translateY(-6px); width: 112px; height: 112px; }
.cc-p2 { z-index: 2; transform: translate(-78px, 14px) rotate(-12deg); }
.cc-p3 { z-index: 2; transform: translate(78px, 14px) rotate(12deg); }
.cc-fantomes { position: absolute; bottom: -2px; display: flex; z-index: 4; }
.cc-fantomes i { width: 34px; height: 34px; margin-left: -9px; border-radius: 50%; border: 2px solid #000; background: radial-gradient(circle at 50% 38%, #5a5560 0 22%, transparent 23%), radial-gradient(circle at 50% 100%, #5a5560 0 42%, #2a2730 43%); }
.cc-fantomes i:first-child { margin-left: 0; }
.cc-fantomes i:last-child { display: grid; place-items: center; background: var(--or); }
.cc-fantomes i:last-child::after { content: "?"; font-style: normal; font-weight: 900; color: #000; font-size: 16px; }
.cc-titre { font-weight: 900; font-size: clamp(30px, 8.5vw, 40px); letter-spacing: -.035em; line-height: 1.05; margin: 22px 0 10px; text-wrap: balance; }
.cc-titre span { background: linear-gradient(180deg, #ffe08a, #ff9a3c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cc-accroche { color: #cfcad8; font-size: 17px; line-height: 1.45; margin: 0 auto 18px; max-width: 34ch; text-wrap: balance; }
.cc-accroche b { color: var(--or); }
.cc-avantages { list-style: none; margin: 0 auto 22px; padding: 0; display: grid; gap: 9px; text-align: left; width: fit-content; max-width: 100%; }
.cc-avantages li { display: flex; gap: 10px; align-items: center; font-weight: 700; font-size: 15px; color: #e9e5ef; }
.cc-avantages li::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; background: rgba(255,214,74,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23ffd64a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; }
.cc-form { text-align: left; padding: 20px 18px 16px; border-radius: 24px; background: linear-gradient(180deg, rgba(255,214,74,.07), rgba(255,255,255,.025) 40%); border: 1px solid rgba(255,214,74,.18); box-shadow: 0 30px 60px -30px rgba(255,160,60,.25); }
.cc-form .g-bloc { margin-top: 0; }
.cc-form .form-compte { margin-top: 12px !important; }
.cc-form .note { text-align: center; }
@media (prefers-reduced-motion: reduce) { .cc-vinyle { animation: none; } }
.maj-ok { margin: 4px 0 0; font-weight: 700; color: #5ee08a; }
.maj-ok a { color: var(--or); }
/* ÉCRAN D'ATTENTE DE LA VIDÉO */
.chargement { display: grid; justify-items: center; gap: 6px; padding: 18px 8px 4px; text-align: center; }
.ch-disque { position: relative; width: 200px; height: 200px; margin-bottom: 14px; }
.ch-disque img { width: 100%; height: 100%; animation: ccTourne 3.2s linear infinite; filter: drop-shadow(0 0 34px rgba(255,170,60,.3)); }
.ch-label { position: absolute; inset: 31%; border-radius: 50%; background: #1a1712 center/cover; box-shadow: 0 0 0 3px rgba(255,214,74,.55); animation: ccTourne 3.2s linear infinite; }
.ch-label::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: #000; }
.chargement .ch-titre { margin: 0; font-weight: 900; font-size: 24px; letter-spacing: -.02em; color: var(--texte); }
.chargement .ch-etape { margin: 0; min-height: 1.4em; font-weight: 700; color: var(--or); }
.ch-barre { width: min(280px, 80%); height: 6px; margin: 12px 0 8px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; }
.ch-barre i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #ffd64a, #ff8a3d); transition: width .5s linear; }
.chargement .ch-note { margin: 0; color: var(--doux) !important; font-size: 14px; font-weight: 600; line-height: 1.5; }
#videoEtat { padding: 0 !important; }
#fVideo .lien-doux { display: block; margin: 8px auto 0; background: none; border: 0; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .ch-disque img, .ch-label { animation: none; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ===== 30/10 (François) : fenêtre vidéo sans fond gris, bordure fine, croix ; page publique en vrai podium ===== */
#fVideo { background: transparent; box-shadow: none; padding: 52px 0 0; overflow: visible; width: min(420px, calc(100% - 32px)); max-height: 100dvh; }
#fVideo::backdrop { background: #000; }
.video-fermer { position: absolute; top: 4px; right: 0; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
#lecteur { border: 1px solid rgba(255,255,255,.22); border-radius: 18px; max-height: 62dvh; }
#fVideo .video-actions { margin: 16px 0 0; }
#fVideo .chargement { border: 1px solid rgba(255,255,255,.14); border-radius: 22px; padding: 26px 12px 22px; }

.p-profil .profil { padding-top: 0; }
.ident, .ident.avec-photo { flex-direction: column; gap: 10px; margin-bottom: 2px; }
.ident.avec-photo .ident-txt { text-align: center; }
.ident .avatar { width: 84px; height: 84px; }
.sur { font-size: 12px; }
.pseudo, .ident.avec-photo .pseudo { font-size: clamp(26px, 7.4vw, 38px); margin: 2px 0 0; letter-spacing: -.03em; }
.reseaux-profil { margin: 8px 0 22px; gap: 10px; }
.reseaux-profil a { width: 36px; height: 36px; }
.reseaux-profil svg { width: 19px; height: 19px; }
/* podium sur une ligne : n° 2 | n° 1 (plus grand, plus haut) | n° 3 */
.podium { grid-template-columns: 1fr 1.32fr 1fr; align-items: end; gap: 10px; max-width: 460px; }
.piste.r1 { grid-column: auto; order: 2; }
.piste.r2 { order: 1; } .piste.r3 { order: 3; }
.piste.r1 .poch, .piste.r2 .poch, .piste.r3 .poch { width: 100%; }
.piste.r1 .poch { margin-bottom: 18px; }
.poch img, .poch .halo { border-radius: 12px; }
.poch .lecture { width: 32px; height: 32px; right: 6px; bottom: 6px; }
.poch .lecture::before { border-left-width: 10px; border-top-width: 6px; border-bottom-width: 6px; margin-left: 3px; }
.poch.joue .lecture::before { width: 10px; height: 12px; }
.rang, .piste.r1 .rang { font-size: 18px; margin-top: 8px; }
.piste.r1 .rang { font-size: 24px; }
.titre, .piste.r1 .titre { font-size: 14px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.piste.r1 .titre { font-size: 16px; }
.artiste { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.actions { margin-top: 26px; }

/* MON COMPTE : nom d'utilisateur */
.champ-url { position: relative; display: block; }
.champ-url > span { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--doux); font-weight: 700; font-size: 17px; pointer-events: none; }
.fin .champ-url input { padding-left: 118px; }
.pseudo-etat { margin: 2px 0 0; min-height: 1.4em; font-weight: 700; font-size: 15px; color: var(--doux); }
.pseudo-etat.libre { color: #5ee08a; } .pseudo-etat.pris { color: #ff7a7a; }
.pseudo-etat a { color: var(--or); }

/* croix de fermeture dessinée (François, 30/10 : « une vraie croix propre ») */
.video-fermer, .menu-haut .fermer, .rech-haut .fermer { display: grid; place-items: center; padding: 0; color: #fff; font-size: 0; }
.video-fermer svg, .menu-haut .fermer svg, .rech-haut .fermer svg { display: block; }

/* LANGUES : sélecteur dans le pied de page ; choix dans Mon compte */
.langues { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin: 10px 0 8px; }
.langues a { color: rgba(246,243,251,.5); text-decoration: none; font-weight: 700; font-size: 13px; }
.langues a.on { color: var(--or); }
.choix-langue { width: 100%; min-height: 54px; padding: 0 16px; border-radius: 14px; border: 1.5px solid var(--ligne); background: #000; color: var(--texte); font: 700 17px "Inter Tight", system-ui, sans-serif; }
/* pochettes cliquables dans les listes (classement, tendances) : même icône de lecture que le podium */
.liste-titres .lt-poch { position: relative; flex: none; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 8px; background: none; cursor: pointer; }
.liste-titres .lt-poch img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; display: block; box-shadow: none; }
.liste-titres .lt-poch .lecture { width: 22px; height: 22px; right: 3px; bottom: 3px; }
.liste-titres .lt-poch .lecture::before { border-left-width: 7px; border-top-width: 4.5px; border-bottom-width: 4.5px; margin-left: 2px; }
.liste-titres .lt-poch.joue .lecture::before { width: 7px; height: 9px; border: 0; margin: 0; background: linear-gradient(90deg, #fff 0 35%, transparent 35% 65%, #fff 65%); }

/* fine bordure claire autour de TOUTES les pochettes : une pochette noire ne se perd plus dans le fond noir (François, 30/10) */
.poch img, .case img, .resultats .ecoute img, .cc-poch { box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 18px 40px -12px rgba(0,0,0,.7); outline: 1px solid rgba(255,255,255,.16); outline-offset: -1px; }
.liste-titres .lt-poch img { outline: 1px solid rgba(255,255,255,.16); outline-offset: -1px; }

/* logo : note-cœur rose fluo devant « ziclove » (François, 30/10) */
.logo { display: inline-flex; align-items: center; gap: 0; }   /* pas d'espace entre « zic » et « love » */
.logo img { width: 30px; height: 30px; margin-right: 7px; flex: none; filter: drop-shadow(0 0 8px rgba(255,45,149,.55)); }
.logo b { color: #ff2d95; }

/* langue du compte : pastilles (remplacent la liste déroulante) */
.pastilles-langue { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pastilles-langue button { min-height: 48px; border-radius: 14px; border: 1.5px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: var(--texte); font: 700 16px "Inter Tight", system-ui, sans-serif; cursor: pointer; transition: background .15s, border-color .15s; }
.pastilles-langue button:hover { background: rgba(255,255,255,.08); }
.pastilles-langue button.on { background: var(--or); border-color: var(--or); color: #000; }

/* essai (François, 30/10) : le numéro AU-DESSUS des pochettes du podium */
.piste .rang { order: -1; margin: 0 0 8px; }
.piste.r1 .poch { margin-bottom: 0; }
.piste.r1 .rang { margin-bottom: 10px; }
.piste.r1 { padding-bottom: 18px; }
.piste .titre, .piste .artiste { position: relative; z-index: 3; }   /* le halo de la pochette ne délave plus le titre */
.poch .halo { inset: 12%; transform: translateY(6%); }

/* icônes Instagram et TikTok de part et d'autre de la photo de profil (François, 30/10) */
.ident-photo { display: flex; align-items: center; justify-content: center; gap: 22px; }
.ident-photo .res-g, .ident-photo .res-d { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: var(--texte); background: rgba(255,255,255,.08); flex: none; }
.ident-photo .res-g:hover, .ident-photo .res-d:hover { background: rgba(255,255,255,.16); }
.ident-photo svg { width: 20px; height: 20px; }
.ident { margin-bottom: 20px; }
.p-profil .podium { margin-top: 26px; }

/* bloc d'appel sous les boutons (François, 30/10 : « un vrai bouton, même dimension que les autres, un bloc visuel ») */
.cta-bloc { max-width: 420px; margin: 14px auto 0; padding: 0 var(--gouttiere); box-sizing: content-box; }
.cta-bloc .btn { width: 100%; text-align: center; line-height: 1.25; padding-top: 12px; padding-bottom: 12px; }
.cta-visiteur { display: grid; gap: 12px; padding: 20px 18px; border-radius: 24px; border: 1px solid rgba(255,214,74,.3); background: linear-gradient(180deg, rgba(255,214,74,.08), rgba(255,255,255,.02)); text-align: center; }
.cta-visiteur p { margin: 0; font-weight: 900; font-size: 22px; letter-spacing: -.02em; }
.bandeau-moi.jumeaux { color: var(--or); }
@media (max-width: 460px) { .cta-bloc { margin-left: var(--gouttiere); margin-right: var(--gouttiere); padding-left: 0; padding-right: 0; } .cta-visiteur { padding: 20px 18px; } }

/* bouton large sur plusieurs lignes : arrondi léger (François, 30/10) */
.cta-bloc .bandeau-moi { border-radius: 18px; font-size: 16px; padding: 16px 20px; }

/* « Plus tard » : simple lien discret, centré sur toute la largeur (François, 30/10) */
.feuille .lien-doux { display: block; width: 100%; margin: 6px 0 0; padding: 14px; border: 0; background: none; border-radius: 0; color: var(--doux); font: 700 16px "Inter Tight", system-ui, sans-serif; text-align: center; cursor: pointer; }
.feuille .lien-doux:hover { color: var(--texte); }

/* signalement et contact */
.signaler-lien { text-align: center; margin: 18px 0 0; }
.signaler-lien button { background: none; border: 0; color: rgba(246,243,251,.45); font: 600 13px "Inter Tight", system-ui, sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.raisons { border: 0; margin: 0; padding: 0; display: grid; gap: 12px; }
.raisons legend { font-weight: 800; margin-bottom: 10px; padding: 0; }
.fin .raisons input[type=radio] { -webkit-appearance: none; appearance: none; flex: none; width: 22px; height: 22px; min-height: 0; margin: 0; padding: 0; border: 2px solid rgba(255,255,255,.35); border-radius: 50%; background: transparent; cursor: pointer; }
.fin .raisons input[type=radio]:checked { border: 7px solid var(--or); }
.fin textarea { width: 100%; padding: 14px 18px; border-radius: 14px; border: 1.5px solid var(--ligne); background: rgba(0,0,0,.35); color: var(--texte); font: 600 16px "Inter Tight", system-ui, sans-serif; resize: vertical; }
.fin textarea:focus { outline: none; border-color: var(--or); }
.form-contact { max-width: 520px; margin-top: 18px; }
.form-contact input:not(.piege), .form-contact textarea { box-sizing: border-box; }