/* Le serveur Discord de Rap France, recréé en HTML et CSS (fenêtre de la page « Le serveur », salon seul de la page
   « Le jeu »), chargé après site.css. Couleurs : celles de site.css (--dc-… pour Discord, --turquoise pour le serveur).
   Les tailles de la fenêtre sont en em : changer la taille du texte de .dc agrandit ou réduit toute la fenêtre.
   Sans JavaScript, tous les salons se suivent dans la fenêtre (qui défile) ; js/serveur.js pose data-pret sur .dc et
   n'en montre plus qu'un à la fois. Aucune animation ne cache un contenu : elles ne font que bouger ou briller. */

/* ================================================================================================ fenêtre Discord */
.dc {
  --dc-l-serveurs: 4.6em; --dc-l-salons: 15em; --dc-l-membres: 15em;
  position: relative; display: grid; grid-template-columns: var(--dc-l-serveurs) var(--dc-l-salons) minmax(0, 1fr) var(--dc-l-membres);
  height: 44em; font: 400 15px/1.375 var(--police); color: var(--dc-texte); text-align: left;
  background: var(--dc-2); border-radius: 0.9em; overflow: hidden; isolation: isolate;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 50px 120px -40px rgba(88, 101, 242, 0.55), 0 30px 60px -30px rgba(0, 0, 0, 0.8);
}
.dc p { margin: 0; }
.dc ul, .dc ol, .dc-vue ul, .dc-vue ol { list-style: none; margin: 0; padding: 0; }
.dc-etiquette { margin-left: auto !important; flex: none; font-size: 0.68em; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(148, 155, 164, 0.75); pointer-events: none; }

/* pictogrammes : masques SVG teintés par la couleur du texte */
.dc-ic { display: inline-block; flex: none; width: 1.25em; height: 1.25em; background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.ic-texte { --ic: url("/img/serveur/i-texte.svg"); }
.ic-annonce { --ic: url("/img/serveur/i-annonce.svg"); }
.ic-vocal { --ic: url("/img/serveur/i-vocal.svg"); }
.ic-regles { --ic: url("/img/serveur/i-regles.svg"); }
.ic-forum { --ic: url("/img/serveur/i-forum.svg"); }
.ic-salons { --ic: url("/img/serveur/i-salons.svg"); }
.ic-membres { --ic: url("/img/serveur/i-membres.svg"); }
.ic-micro { --ic: url("/img/serveur/i-micro.svg"); }
.ic-casque { --ic: url("/img/serveur/i-casque.svg"); }
.ic-discord { --ic: url("/img/serveur/i-discord.svg"); }
.ic-ouvert { --ic: url("/img/serveur/i-ouvert.svg"); }
.ic-carreau { --ic: url("/img/serveur/i-carreau.svg"); }
.ic-coche { --ic: url("/img/serveur/i-coche.svg"); }
.ic-coeur { --ic: url("/img/serveur/i-coeur.svg"); }
.ic-bot { --ic: url("/img/serveur/i-bot.svg"); }
.ic-feu { --ic: url("/img/serveur/i-feu.svg"); }
.ic-etoile { --ic: url("/img/serveur/i-etoile.svg"); }
.ic-commande { --ic: url("/img/serveur/i-commande.svg"); }
.ic-oeil { --ic: url("/img/serveur/i-oeil.svg"); }
.ic-main { --ic: url("/img/serveur/i-main.svg"); }
.ic-equipe { --ic: url("/img/serveur/i-equipe.svg"); }
.ic-cadenas { --ic: url("/img/serveur/i-cadenas.svg"); }

/* avatars : dégradés et initiales (aucun vrai membre) */
.dc-av {
  display: grid; place-items: center; flex: none; width: 2.67em; height: 2.67em; border-radius: 50%; overflow: hidden;
  color: #fff; font-weight: 600; font-size: 1em; line-height: 1; text-transform: uppercase; object-fit: cover; background: #5865f2;
}
.av-1 { background: linear-gradient(135deg, #f7b733, #fc4a1a); }
.av-2 { background: linear-gradient(135deg, #ff6fd8, #3813c2); }
.av-3 { background: linear-gradient(135deg, #43e97b, #0f8f8f); }
.av-4 { background: linear-gradient(135deg, #00c6fb, #005bea); }
.av-5 { background: linear-gradient(135deg, #f093fb, #f5576c); }
.av-6 { background: linear-gradient(135deg, #30cfd0, #330867); }
.av-7 { background: linear-gradient(135deg, #f6d365, #fda085); }
.av-8 { background: linear-gradient(135deg, #a18cd1, #fbc2eb); }
.av-9 { background: linear-gradient(135deg, #2bd6ff, #7b3dff); }
.av-10 { background: linear-gradient(135deg, #ff9a44, #fc6076); }
.av-11 { background: linear-gradient(135deg, #0ba360, #3cba92); }
.av-12 { background: linear-gradient(135deg, #e0c3fc, #8ec5fc); color: #1e1f22; }
.av-lil { background: radial-gradient(circle at 30% 30%, #5ef0d0, #128a7a 55%, #0b2e2c); box-shadow: inset 0 0 0 2px rgba(199, 255, 244, 0.5); }
.av-yop { background: radial-gradient(circle at 30% 30%, #c4b5fd, #6d28d9 60%, #2e1065); }
.av-moi { background: linear-gradient(135deg, #5865f2, #2bd6ff); }

/* ------------------------------------------------------------------------------------------------ barre des serveurs */
.dc-serveurs { display: flex; flex-direction: column; align-items: center; gap: 0.5em; padding: 0.8em 0; background: var(--dc-0); }
.dc-pastille { position: relative; display: grid; place-items: center; width: 3.2em; height: 3.2em; border-radius: 50%; background: var(--dc-2); color: var(--dc-texte); transition: border-radius 0.2s; }
.dc-pastille img { width: 100%; height: 100%; border-radius: inherit; }
.dc-pastille.actif { border-radius: 1em; }
.dc-pastille.actif::before { content: ""; position: absolute; left: -0.8em; top: 0.4em; bottom: 0.4em; width: 0.27em; border-radius: 0 4px 4px 0; background: #fff; }
.dc-accueil-discord { background: #5865f2; border-radius: 1em; color: #fff; }
.dc-accueil-discord .dc-ic { width: 1.7em; height: 1.7em; }
.dc-rf { background: var(--papier); }
.dc-ajout { color: var(--dc-vert); font-size: 1.5em; width: 2.13em; height: 2.13em; }
.dc-separe { width: 2em; height: 2px; border-radius: 1px; background: var(--dc-ligne); }
.dc-notif, .dc-badge {
  display: grid; place-items: center; min-width: 1.15em; height: 1.15em; padding: 0 0.3em; border-radius: 0.6em;
  background: var(--dc-rouge); color: #fff; font: 700 0.75em/1 var(--police); font-style: normal;
}
.dc-notif { position: absolute; right: -0.35em; bottom: -0.2em; min-width: 1.6em; height: 1.6em; box-shadow: 0 0 0 0.3em var(--dc-0); animation: dc-pouls 2.4s ease-out infinite; }
@keyframes dc-pouls { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.22); } 90% { transform: scale(0.96); } }

/* ------------------------------------------------------------------------------------------------ colonne des salons */
.dc-salons { display: flex; flex-direction: column; min-height: 0; background: var(--dc-1); }
.dc-serveur-tete { position: relative; flex: none; height: 8.4em; overflow: hidden; }
.dc-serveur-tete img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.dc-serveur-tete p { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 0.75em 1em; font-weight: 600; color: #fff; background: linear-gradient(rgba(0, 0, 0, 0.6), transparent); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); }
.dc-chevron { width: 1em; height: 1em; background: currentColor; -webkit-mask: url("/img/serveur/i-chevron.svg") center / contain no-repeat; mask: url("/img/serveur/i-chevron.svg") center / contain no-repeat; }
.dc-boost { display: flex; flex-direction: column; gap: 0.3em; margin: 0.6em 0.6em 0.2em !important; padding: 0.45em 0.6em; border-radius: 0.3em; background: linear-gradient(90deg, rgba(255, 115, 250, 0.16), rgba(88, 101, 242, 0.16)); font-size: 0.75em; font-weight: 600; color: #f6c5ff; }
.dc-boost-barre { height: 0.35em; border-radius: 1em; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.dc-boost-barre i { display: block; width: 92%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff73fa, #b473ff); }
.dc-ligne { display: flex; align-items: center; gap: 0.55em; margin: 0 0.5em !important; padding: 0.35em 0.5em; border-radius: 0.3em; color: var(--dc-doux); font-weight: 600; font-size: 0.93em; }
.dc-nouveau { margin-left: auto; padding: 0.1em 0.45em; border-radius: 0.3em; background: #5865f2; color: #fff; font-size: 0.7em; font-weight: 700; }
.dc-liste { position: relative; flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; padding: 0 0.5em 0.6em; }
.dc-liste::-webkit-scrollbar { display: none; }
.dc-cat { margin: 1.25em 0 0.25em !important; padding-left: 0.5em; font-size: 0.75em; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--dc-doux); }
.dc-salon { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em; margin: 0.1em 0; padding: 0.3em 0.5em; border-radius: 0.3em; color: var(--dc-doux); font-weight: 500; transition: background-color 0.25s, color 0.25s; }
.dc-salon .dc-ic { width: 1.2em; height: 1.2em; opacity: 0.8; }
.dc-salon-nom { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dc-salon.nonlu { color: var(--dc-titre); font-weight: 600; }
.dc-salon.nonlu::before { content: ""; position: absolute; left: -0.5em; top: 50%; width: 0.27em; height: 0.55em; margin-top: -0.27em; border-radius: 0 4px 4px 0; background: #fff; }
.dc-salon.actif { background: var(--dc-actif); color: #fff; }
.dc-badge { margin-left: auto; }
.dc-dedans { display: flex; flex-direction: column; gap: 0.25em; flex-basis: 100%; padding: 0.15em 0 0.1em 1.6em; font-size: 0.9em; color: var(--dc-doux); }
.dc-dedans > span { display: flex; align-items: center; gap: 0.5em; }
.dc-dedans .dc-av { width: 1.4em; height: 1.4em; font-size: 0.65em; }
.dc-moi { display: flex; align-items: center; gap: 0.55em; padding: 0.55em 0.6em; background: #232428; }
.dc-moi .dc-av { position: relative; width: 2.2em; height: 2.2em; font-size: 0.85em; }
.dc-moi p { flex: 1; line-height: 1.15; }
.dc-moi strong { display: block; color: var(--dc-titre); font-size: 0.9em; }
.dc-moi small { color: var(--dc-doux); font-size: 0.75em; }
.dc-moi .dc-ic { color: var(--dc-doux); width: 1.15em; height: 1.15em; margin: 0 0.25em; }

/* ------------------------------------------------------------------------------------------------ centre : salon et messages */
.dc-centre { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--dc-2); }
.dc-tete, .dc-vue-tete { display: flex; align-items: center; gap: 0.5em; flex: none; height: 3.2em; padding: 0 1em; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25), 0 1.5px 0 rgba(0, 0, 0, 0.06); color: var(--dc-doux); white-space: nowrap; overflow: hidden; }
.dc-tete strong, .dc-vue-tete strong { color: var(--dc-titre); font-weight: 600; }
.dc-tete span:last-child, .dc-vue-tete span:last-child { overflow: hidden; text-overflow: ellipsis; padding-left: 0.8em; margin-left: 0.3em; border-left: 1px solid var(--dc-ligne); font-size: 0.87em; }
/* le salon défile (jamais de message coupé en haut) ; comme dans Discord, il s'ouvre en bas, sur les derniers messages */
.dc-panneau { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.dc .dc-vue { display: flex; flex-direction: column; min-height: 100%; }
.dc .dc-vue + .dc-vue { border-top: 0.4em solid var(--dc-1); }
.dc[data-pret] .dc-vue:not(.actif) { display: none; }
.dc[data-pret] .dc-vue-tete { display: none; }
.dc-fil { position: relative; display: flex; flex-direction: column; justify-content: flex-end; flex: 1; padding: 0.6em 0 1.6em; }
.dc-saisie { display: flex; align-items: center; gap: 0.8em; flex: none; margin: 0 1em 1.4em !important; padding: 0 1em; height: 2.9em; border-radius: 0.55em; background: var(--dc-3); color: #6d6f78; white-space: nowrap; overflow: hidden; }
.dc-plus { display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: #b5bac1; color: var(--dc-3); font-weight: 700; }

/* ------------------------------------------------------------------------------------------------ liste des membres */
.dc-membres { min-height: 0; overflow: hidden; padding: 0.4em 0.5em; background: var(--dc-1); }
.dc-membres li { display: flex; align-items: center; gap: 0.75em; padding: 0.3em 0.5em; border-radius: 0.3em; }
.dc-membres .dc-av { position: relative; width: 2.13em; height: 2.13em; font-size: 0.85em; }
.dc-membres li > span { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.35em; min-width: 0; line-height: 1.2; }
.dc-membres strong { font-weight: 500; white-space: nowrap; }
.dc-membres small { flex-basis: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--dc-doux); font-size: 0.75em; }
.dc-membres .dc-cat { margin-top: 1.4em !important; }
.dc-membres .dc-cat:first-child { margin-top: 0.8em !important; }
/* pseudo coloré selon le rôle (couleurs du serveur : turquoise et bleus) */
.g-fondateur strong, .dc-nom.g-fondateur { color: #2dd4ae; }
.g-admin strong, .dc-nom.g-admin { color: #8e97ff; }
.g-equipe strong, .dc-nom.g-equipe { color: #b9bfff; }
.g-certifie strong, .dc-nom.g-certifie { color: #63b6ff; }
.g-bot strong, .dc-nom.g-bot { color: var(--dc-titre); }
.g-rang1 strong, .dc-nom.g-rang1 { color: #63b6ff; }
.g-rang2 strong, .dc-nom.g-rang2 { color: #36cadb; }
.g-rang3 strong, .dc-nom.g-rang3 { color: var(--turquoise); }
.g-rang4 strong, .dc-nom.g-rang4 { color: #67e6d4; }
.g-rang5 strong, .dc-nom.g-rang5 { color: #c7fff4; }
.dc-membres .g-bot .dc-av::after, .dc-membres li:not(.g-bot) .dc-av::after { content: ""; position: absolute; right: -0.1em; bottom: -0.1em; width: 0.7em; height: 0.7em; border-radius: 50%; background: var(--dc-vert); box-shadow: 0 0 0 0.2em var(--dc-1); }
.dc-membres .dc-av { overflow: visible; }

/* ================================================================================================ messages */
.dc-msg { display: grid; grid-template-columns: 2.67em minmax(0, 1fr); gap: 0 1em; margin-top: 1.05em; padding: 0.12em 1em 0.12em 1em; }
.dc-msg:first-child { margin-top: 0; }
.dc-suite { display: block; margin-top: 0.15em; padding-left: 4.67em; }
.dc-msg-corps { min-width: 0; }
.dc-msg-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.45em; line-height: 1.3; }
.dc-nom { font-weight: 600; color: var(--dc-titre); }
.dc-msg-tete time { color: var(--dc-doux); font-size: 0.75em; }
.dc-app { display: inline-grid; place-items: center; align-self: center; height: 1.15em; padding: 0 0.3em; border-radius: 0.2em; background: #5865f2; color: #fff; font-size: 0.65em; font-weight: 700; letter-spacing: 0.02em; }
.dc-texte { margin-top: 0.05em !important; color: var(--dc-texte); overflow-wrap: anywhere; }
.dc-mention { padding: 0 0.15em; border-radius: 0.2em; background: rgba(88, 101, 242, 0.3); color: #c9cdfb; font-weight: 500; }
.dc-cmd { display: inline-block; padding: 0 0.3em; border-radius: 0.25em; background: rgba(88, 101, 242, 0.2); color: #c9cdfb; font: 500 0.92em/1.4 ui-monospace, "Cascadia Code", Consolas, monospace; }
.dc-commande { display: flex; align-items: center; gap: 0.4em; margin: 1.05em 0 0 1em !important; padding-left: 2.2em; position: relative; color: var(--dc-doux); font-size: 0.87em; }
.dc-commande::before { content: ""; position: absolute; left: 1.3em; top: 0.75em; width: 1.6em; height: 0.8em; border: 2px solid #4e5058; border-right: 0; border-bottom: 0; border-radius: 0.4em 0 0 0; }
.dc-commande .dc-av { width: 1.2em; height: 1.2em; font-size: 0.6em; }
.dc-commande strong { color: var(--dc-titre); font-weight: 500; }
.dc-commande + .dc-msg { margin-top: 0.15em; }
.dc-prive { margin: 1em 0 -0.6em 4.67em !important; padding-left: 0; color: var(--dc-doux); font-size: 0.75em; }
.dc-prive span { color: var(--dc-lien, #00a8fc); }
.dc-reponse { position: relative; }
.dc-systeme { color: var(--dc-doux); }
.dc-systeme strong { color: var(--dc-titre); }
.dc-petit { margin-top: 0.5em !important; color: var(--dc-doux); font-size: 0.8em; }
.dc-niveau strong { color: var(--dc-titre); }
.dc-levelup { margin-left: 0; margin-right: 0; padding-left: 0.85em; background: rgba(240, 178, 50, 0.1); box-shadow: inset 0.15em 0 0 #f0b232; }
.dc-role-gagne { display: inline-flex; align-items: center; gap: 0.45em; margin-top: 0.45em !important; padding: 0.25em 0.7em 0.25em 0.3em; border-radius: 1em; background: rgba(54, 202, 219, 0.14); color: #a9eef6; font-size: 0.85em; }
.dc-role-gagne img { width: 1.6em; height: 1.6em; }
.dc-role-gagne strong { color: #36cadb; }
.dc-ecrit[hidden] { display: none; }
.dc-ecrit { position: absolute; left: 1em; bottom: 0.15em; display: flex; align-items: center; gap: 0.45em; margin: 0 !important; color: var(--dc-doux); font-size: 0.8em; }
.dc-ecrit strong { color: var(--dc-texte); }
.dc-points { display: inline-flex; gap: 0.2em; }
.dc-points i { width: 0.42em; height: 0.42em; border-radius: 50%; background: var(--dc-texte); animation: dc-points 1.2s ease-in-out infinite; }
.dc-points i:nth-child(2) { animation-delay: 0.15s; }
.dc-points i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dc-points { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-0.3em); opacity: 1; } }

/* bannières et blocs (embeds) */
.dc-banniere { max-width: 32em; margin-top: 0.4em; border-radius: 0.5em; overflow: hidden; background: #000; }
.dc-banniere img { width: 100%; height: auto; }
.dc-embed { --e: var(--turquoise); max-width: 32em; margin-top: 0.4em; padding: 0.75em 1em 0.9em 0.95em; border-radius: 0.3em; background: var(--dc-1); box-shadow: inset 0.25em 0 0 var(--e); }
.e-turquoise { --e: var(--turquoise); }
.e-or { --e: #f0b232; }
.e-violet { --e: #8b5cf6; }
.e-rose { --e: #ff3d6e; }
.e-casino { --e: var(--turquoise-2); }
.dc-embed > p + p { margin-top: 0.35em !important; }
.dc-embed-titre { color: var(--dc-titre); font-weight: 700; margin-bottom: 0.3em !important; }
.dc-embed p:not(.dc-embed-titre) { font-size: 0.93em; }
.dc-champs { display: grid; gap: 0.6em; margin-top: 0.8em; }
.dc-champ { display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.dc-champ p { font-size: 0.87em !important; color: var(--dc-doux); }
.dc-champ strong { display: block; color: var(--dc-titre); font-size: 1.07em; }
.dc-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; height: 2.2em; padding: 0 1em; border-radius: 0.2em; background: #4e5058; color: #fff; font-size: 0.87em; font-weight: 500; white-space: nowrap; transition: background-color 0.2s, box-shadow 0.3s; }
.dc-btn-bleu { background: #5865f2; }
.dc-btn-vert { background: #248046; }
.dc-btn.allume { box-shadow: 0 0 0 0.2em rgba(88, 101, 242, 0.35), 0 0 1.6em rgba(88, 101, 242, 0.9); background: #6b77ff; }
.dc-boutons { display: flex; flex-wrap: wrap; gap: 0.5em; margin-top: 0.5em !important; }
.dc-select { max-width: 32em; margin-top: 0.5em !important; padding: 0.55em 0.8em; border-radius: 0.25em; background: var(--dc-1); border: 1px solid #1e1f22; color: var(--dc-doux); font-size: 0.87em; position: relative; }
.dc-select::after { content: ""; position: absolute; right: 0.8em; top: 50%; width: 1em; height: 1em; margin-top: -0.5em; background: currentColor; -webkit-mask: url("/img/serveur/i-chevron.svg") center / contain no-repeat; mask: url("/img/serveur/i-chevron.svg") center / contain no-repeat; }
.dc-reglement .dc-regle { margin-top: 0.5em !important; font-size: 0.87em; color: var(--dc-doux); }
.dc-regle code { margin-right: 0.5em; padding: 0.05em 0.35em; border-radius: 0.25em; background: var(--dc-0); color: var(--dc-texte); font-size: 0.9em; }
.dc-regle strong { display: inline; color: var(--dc-titre); margin-right: 0.4em; }
.dc-emoji { display: inline-block; width: 1.5em; height: 1.5em; margin-right: 0.35em; vertical-align: -0.4em; }

/* ------------------------------------------------------------------------------------------------ Notoriété */
.dc-xp { display: flex; align-items: center; gap: 0.8em; margin: 0 1em 0.4em; padding: 0.7em 0.9em; border-radius: 0.6em; background: linear-gradient(135deg, rgba(45, 212, 174, 0.14), rgba(88, 101, 242, 0.12)), var(--dc-1); box-shadow: inset 0 0 0 1px rgba(45, 212, 174, 0.25); }
.dc-xp > div { flex: 1; }
.dc-xp p { display: flex; justify-content: space-between; font-size: 0.85em; color: var(--dc-doux); }
.dc-xp p strong { color: var(--dc-titre); }
.dc-xp b { color: var(--turquoise); font-variant-numeric: tabular-nums; }
.dc-xp-rang { display: grid; place-items: center; width: 2.8em; height: 2.8em; border-radius: 0.7em; background: radial-gradient(circle, rgba(54, 202, 219, 0.35), rgba(30, 31, 34, 0.9) 70%); box-shadow: inset 0 0 0 1px rgba(54, 202, 219, 0.4); }
.dc-xp-rang img { width: 2.4em; height: 2.4em; }
.dc-xp-barre { display: block; height: 0.55em; margin: 0.35em 0 0.25em; border-radius: 1em; background: var(--dc-0); overflow: hidden; }
.dc-xp-barre i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #36cadb, var(--turquoise), #c7fff4); transform-origin: 0 50%; transform: scaleX(0.72); box-shadow: 0 0 1em rgba(45, 212, 174, 0.8); }
.dc-xp-total { justify-content: flex-end !important; font-size: 0.75em !important; }
.dc-plus-xp { display: inline-block; margin-left: 0.5em; padding: 0 0.4em; border-radius: 0.6em; background: rgba(45, 212, 174, 0.16); color: var(--turquoise); font-size: 0.75em; font-weight: 700; vertical-align: 0.1em; }

.dc-escalier { display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; gap: 0.4em; margin-top: 0.9em; }
.dc-escalier li { --c: #63b6ff; position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.15em; padding: 0.5em 0.3em 0.6em; border-radius: 0.4em 0.4em 0.2em 0.2em; text-align: center; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 22%, transparent), rgba(0, 0, 0, 0.15)); box-shadow: inset 0 0.15em 0 var(--c); transform-origin: 50% 100%; }
.dc-escalier li.r-1 { min-height: 6em; }
.dc-escalier li.r-2 { --c: #36cadb; min-height: 7.2em; }
.dc-escalier li.r-3 { --c: var(--turquoise); min-height: 8.4em; }
.dc-escalier li.r-4 { --c: #67e6d4; min-height: 9.6em; }
.dc-escalier li.r-5 { --c: #c7fff4; min-height: 10.8em; }
.dc-escalier img { width: 2.6em; height: 2.6em; margin-top: -1.7em; filter: drop-shadow(0 0 0.6em color-mix(in srgb, var(--c) 70%, transparent)); }
.dc-escalier strong { color: var(--c); font-size: 0.78em; line-height: 1.15; }
.dc-escalier span { color: var(--dc-titre); font-size: 0.72em; font-weight: 600; }
.dc-escalier small { color: var(--dc-doux); font-size: 0.66em; line-height: 1.2; }
.dc-podium { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 0.5em; margin-top: 0.8em; }
.dc-podium li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.15em; padding-bottom: 0.4em; }
.dc-podium .dc-av { width: 2.4em; height: 2.4em; font-size: 0.95em; box-shadow: 0 0 0 0.15em var(--m, #b5bac1); }
.dc-podium strong { color: var(--dc-titre); font-size: 0.82em; }
.dc-podium span { color: var(--dc-doux); font-size: 0.75em; font-variant-numeric: tabular-nums; }
.dc-podium i { display: grid; place-items: center; width: 100%; margin-top: 0.3em; border-radius: 0.3em 0.3em 0 0; background: linear-gradient(180deg, var(--m), rgba(0, 0, 0, 0.2)); color: var(--dc-0); font: 900 1.3em/1 var(--police-titre); font-style: normal; transform-origin: 50% 100%; }
.dc-podium .p-1 { --m: #f0b232; }
.dc-podium .p-1 i { height: 3.6em; }
.dc-podium .p-2 { --m: #c0c6d0; }
.dc-podium .p-2 i { height: 2.6em; }
.dc-podium .p-3 { --m: #d08a4c; }
.dc-podium .p-3 i { height: 1.9em; }

/* ------------------------------------------------------------------------------------------------ profil */
.dc-profil {
  max-width: 34em; margin-top: 0.4em; padding: 1em; border-radius: 0.8em; color: var(--dc-texte);
  background: radial-gradient(120% 80% at 100% 0, rgba(45, 212, 174, 0.16), transparent 60%), linear-gradient(160deg, #10302f, #0b1b1e 55%, #0a1416);
  box-shadow: inset 0 0 0 1px rgba(103, 230, 212, 0.18);
}
.pf-tete { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.9em; }
.pf-tete > .dc-av { width: 4.4em; height: 4.4em; font-size: 1em; grid-row: 1; grid-column: 1; }
.pf-anneau circle { stroke-dasharray: 289.03; }
.pf-anneau { grid-row: 1; grid-column: 1; width: 5.1em; height: 5.1em; margin: -0.35em; fill: none; stroke: var(--turquoise); stroke-width: 3; stroke-linecap: round; transform: rotate(-90deg); filter: drop-shadow(0 0 0.35em rgba(45, 212, 174, 0.7)); }
.pf-nom { color: #fff; font: 900 1.35em/1.1 var(--police-titre); }
.pf-depuis { color: var(--dc-doux); font-size: 0.78em; }
.pf-titre { display: inline-block; margin-top: 0.3em !important; padding: 0.1em 0.5em; border-radius: 1em; background: rgba(240, 178, 50, 0.16); color: #ffd277; font-size: 0.75em; font-weight: 600; }
.pf-certifs { display: grid; gap: 0.35em; }
.pf-certifs li { display: flex; align-items: center; gap: 0.4em; padding: 0.3em 0.7em 0.3em 0.35em; border-radius: 0.5em; background: rgba(45, 212, 174, 0.12); box-shadow: inset 0 0 0 1px rgba(45, 212, 174, 0.4); color: #d7fff6; font-size: 0.75em; font-weight: 600; white-space: nowrap; }
.pf-certifs li::before { content: ""; width: 1.25em; height: 1.25em; border-radius: 50%; background: var(--turquoise) url("/img/serveur/i-coche.svg") center / 70% no-repeat; }
.pf-progres { margin-top: 0.9em; padding: 0.7em 0.8em; border-radius: 0.6em; background: rgba(0, 0, 0, 0.25); }
.pf-progres p { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; font-size: 0.75em; color: var(--dc-doux); }
.pf-progres p b { color: var(--turquoise); }
.pf-progres p strong { color: #fff; font-size: 1.15em; }
.pf-barre { display: block; height: 0.5em; margin: 0.4em 0; border-radius: 1em; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.pf-barre i { display: block; width: 74%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #128a7a, var(--turquoise)); transform-origin: 0 50%; }
.pf-bas { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0.8em; margin-top: 0.8em; }
.pf-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4em; }
.pf-stats li { padding: 0.45em 0.55em; border-radius: 0.45em; background: rgba(0, 0, 0, 0.25); }
.pf-stats small { display: block; color: var(--dc-doux); font-size: 0.62em; letter-spacing: 0.06em; text-transform: uppercase; }
.pf-stats b { color: #fff; font-size: 1.05em; font-variant-numeric: tabular-nums; }
.pf-creatif { margin: 0; padding: 0.5em 0.6em; border-radius: 0.45em; background: rgba(0, 0, 0, 0.25); font-size: 0.78em; }
.pf-creatif dt { color: var(--dc-doux); font-size: 0.8em; letter-spacing: 0.06em; text-transform: uppercase; }
.pf-creatif dd { margin: 0 0 0.35em; color: var(--dc-texte); }
.pf-creatif dd:last-child { margin: 0; color: var(--turquoise); }

/* ------------------------------------------------------------------------------------------------ casino */
.dc-tables { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.35em 1em; margin-top: 0.7em; }
.dc-tables li { display: flex; align-items: center; justify-content: space-between; gap: 0.5em; font-size: 0.85em; color: var(--dc-titre); }
.dc-tables .dc-btn { height: 1.9em; font-size: 0.85em; }
.dc-salle { max-width: 34em; margin-top: 0.4em; padding: 0.8em; border-radius: 0.7em; background: radial-gradient(100% 70% at 50% 0, rgba(65, 197, 184, 0.22), transparent 70%), linear-gradient(180deg, #0f2a2a, #0a1a1b); box-shadow: inset 0 0 0 1px rgba(65, 197, 184, 0.3); }
.dc-solde { position: relative; display: flex; align-items: baseline; gap: 0.5em; color: var(--dc-doux); font-size: 0.85em; }
.dc-solde strong { color: #fff; font: 900 1.45em/1 var(--police-titre); font-variant-numeric: tabular-nums; }
.dc-gain { margin-left: 0.3em; padding: 0.1em 0.45em; border-radius: 1em; background: rgba(35, 165, 90, 0.2); color: #57f287; font-weight: 700; }
.dc-jeux { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5em; margin-top: 0.7em; }
.dc-jeu { display: flex; flex-direction: column; align-items: center; gap: 0.45em; padding: 0.55em 0.4em 0.6em; border-radius: 0.5em; background: rgba(0, 0, 0, 0.3); text-align: center; }
.dc-jeu > p:first-child { color: var(--dc-titre); font-size: 0.75em; font-weight: 600; }
.dc-res { color: #8af0d8; font-size: 0.7em; line-height: 1.25; }
.dc-rouleaux { display: flex; gap: 0.25em; padding: 0.3em; border-radius: 0.4em; background: #061314; box-shadow: inset 0 0 0 1px rgba(65, 197, 184, 0.35), inset 0 0.6em 0.8em rgba(0, 0, 0, 0.6); }
.dc-rouleau { position: relative; width: 2.3em; height: 2.3em; overflow: hidden; border-radius: 0.25em; background: linear-gradient(180deg, #102526, #1a3a3a 50%, #102526); }
.dc-bande { display: flex; flex-direction: column; transform: translateY(-90.909%); }
.dc-bande img { width: 2.3em; height: 2.3em; padding: 0.25em; }
.dc-roulette { position: relative; width: 4.6em; height: 4.6em; }
.dc-roue {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, #d8a84a 0 9%, #3a2a12 9.5% 13%, transparent 13.5%), radial-gradient(circle, transparent 0 47%, #0b3d2c 47.5% 52%, transparent 52.5%),
    repeating-conic-gradient(#c62f3b 0 9.73deg, #16161a 9.73deg 19.46deg);
  box-shadow: 0 0 0 0.25em #6b4a1f, 0 0 0 0.35em #2a1b08, 0 0.4em 0.8em rgba(0, 0, 0, 0.6);
}
.dc-roue::after { content: ""; position: absolute; left: 50%; top: 0; width: 9.73%; height: 50%; margin-left: -4.86%; background: linear-gradient(#1f9d55, transparent 45%); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.dc-bille-orbite { position: absolute; inset: 0.2em; border-radius: 50%; transform: rotate(52deg); }
.dc-bille { position: absolute; left: 50%; top: 0.05em; width: 0.5em; height: 0.5em; margin-left: -0.25em; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #c9ccd1); box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.6); }
.dc-cartes { display: flex; gap: 0.2em; perspective: 30em; }
.dc-carte { position: relative; width: 2.2em; height: 3.1em; transform-style: preserve-3d; }
.dc-carte-dos, .dc-carte-face { position: absolute; inset: 0; border-radius: 0.3em; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.dc-carte-dos { transform: rotateY(180deg); background: repeating-linear-gradient(45deg, #128a7a 0 0.25em, #0b4f47 0.25em 0.5em); box-shadow: inset 0 0 0 0.15em #e9fffb; }
.dc-carte-face { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1em; background: #f7f6f2; color: #16161a; box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.45); }
.dc-carte-face b { font: 900 1em/1 var(--police-titre); }
.dc-carte-face::after { content: ""; width: 0.9em; height: 0.9em; background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.c-pique { --ic: url("/img/serveur/i-pique.svg"); }
.c-coeur { --ic: url("/img/serveur/i-coeur.svg"); color: #d0273b; }
.c-carreau { --ic: url("/img/serveur/i-carreau.svg"); color: #d0273b; }
.dc-boutique-titre { margin-top: 0.8em !important; color: var(--dc-doux); font-size: 0.72em; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.dc-boutique { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.45em; margin-top: 0.4em !important; }
.dc-boutique li { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0 0.5em; padding: 0.4em; border-radius: 0.45em; background: rgba(0, 0, 0, 0.3); line-height: 1.2; }
.dc-boutique strong { color: var(--dc-titre); font-size: 0.75em; }
.dc-boutique small { grid-column: 2; color: var(--dc-doux); font-size: 0.62em; }
.bq { grid-row: span 2; width: 2em; height: 2em; border-radius: 0.35em; }
.bq-or { border-radius: 50%; background: radial-gradient(circle, #2a1b08 0 12%, #f6d06a 13% 22%, #c9952c 23% 60%, #f7d77e 61% 64%, #b07d1f 65%); }
.bq-vinyle { background: repeating-linear-gradient(45deg, #1b1b1f 0 0.2em, #2b2d31 0.2em 0.4em); box-shadow: inset 0 0 0 0.12em #c7fff4; }
.bq-tapis { background: radial-gradient(circle at 50% 120%, #2dd4ae, #0f5e54 70%); box-shadow: inset 0 0 0 0.12em #f0b232; }

/* ------------------------------------------------------------------------------------------------ jeux de la communauté */
.dc-chaine { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35em 0.5em; margin-top: 0.4em !important; font: 900 1.15em/1.2 var(--police-titre) !important; letter-spacing: 0.02em; color: var(--dc-titre); }
.dc-maillon > span { display: inline-block; }
.dc-maillon > span:first-child, .dc-maillon > span:last-child { color: #c4b5fd; text-shadow: 0 0 0.6em rgba(139, 92, 246, 0.9); }
.dc-fleche { color: var(--dc-doux); font-style: normal; font-weight: 400; }
.dc-lettre { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 0.3em; background: #8b5cf6; color: #fff; }
.dc-coffre { margin-top: 0.6em; }
.dc-plage { position: relative; display: block; height: 0.7em; border-radius: 1em; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 2px, transparent 2px 10%), rgba(0, 0, 0, 0.35); overflow: hidden; }
.dc-plage i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: 1em; background: linear-gradient(90deg, #f0b232, #ffd277); box-shadow: 0 0 0.8em rgba(240, 178, 50, 0.8); transform-origin: 0 50%; transform: translateX(41.4%) scaleX(0.012); }
.dc-bornes { display: flex; justify-content: space-between; margin-top: 0.2em; font-size: 0.75em; color: var(--dc-doux); font-variant-numeric: tabular-nums; }
.dc-bornes b { color: #ffd277; }
.dc-coffre-fin strong { color: #ffd277; }
.dc-pendu { display: flex; gap: 0.3em; margin-top: 0.5em !important; }
.dc-pendu > span { display: grid; place-items: center; width: 1.8em; height: 2.1em; border-bottom: 0.15em solid #ff3d6e; background: rgba(255, 61, 110, 0.08); border-radius: 0.2em 0.2em 0 0; }
.dc-pendu b { color: #fff; font: 900 1.2em/1 var(--police-titre); }

/* ------------------------------------------------------------------------------------------------ sondage */
.dc-sondage { max-width: 30em; }
.dc-option { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1em; margin-top: 0.55em; padding-top: 0.55em; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.dc-option p { display: grid; grid-template-columns: 7.5em 1fr 3em; align-items: center; gap: 0.6em; font-size: 0.87em !important; }
.dc-option strong { color: var(--dc-titre); font-weight: 600; }
.dc-option small { text-align: right; color: var(--turquoise); font-weight: 700; font-variant-numeric: tabular-nums; }
.dc-option .dc-btn { height: 2em; }

/* ------------------------------------------------------------------------------------------------ sorties de la semaine */
.dc-sorties { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.55em; max-width: 36em; margin-top: 0.6em !important; }
.dc-sorties li { position: relative; display: flex; flex-direction: column; gap: 0.1em; line-height: 1.2; }
.dc-cover { display: block; aspect-ratio: 1; margin-bottom: 0.3em; border-radius: 0.35em; box-shadow: 0 0.5em 1em -0.4em rgba(0, 0, 0, 0.8); }
.dc-sorties b { position: absolute; left: 0.3em; top: 0.25em; color: #fff; font: 900 1.5em/1 var(--police-titre); text-shadow: 0 0.1em 0.4em rgba(0, 0, 0, 0.7); }
.dc-sorties strong { color: var(--dc-titre); font-size: 0.78em; }
.dc-sorties small { color: var(--dc-doux); font-size: 0.68em; }
.cv-1 { background: radial-gradient(circle at 70% 25%, #ff3d6e 0 10%, transparent 11%), linear-gradient(180deg, #0b1d3a, #3b1d8f 60%, #ff7a59); }
.cv-2 { background: radial-gradient(circle at 50% 50%, transparent 0 28%, #f5f0ff 29% 31%, transparent 32%), radial-gradient(circle at 50% 50%, #f093fb, #5f2c82 70%); }
.cv-3 { background: repeating-linear-gradient(115deg, #1b1b1f 0 0.6em, #2a2a30 0.6em 1.2em), #1b1b1f; box-shadow: inset 0 -2.2em 0 rgba(240, 178, 50, 0.85), 0 0.5em 1em -0.4em rgba(0, 0, 0, 0.8); }
.cv-4 { background: conic-gradient(from 45deg, #30cfd0, #330867, #2dd4ae, #0c0d16, #30cfd0); }
.cv-5 { background: linear-gradient(135deg, #e0c3fc 0 33%, #8ec5fc 33% 66%, #ffc23d 66%); }

/* ------------------------------------------------------------------------------------------------ collaborations */
.dc-match { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5em; max-width: 32em; margin-top: 0.8em; padding-bottom: 2.2em; }
.dc-fiche { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 0.25em; padding: 0.8em 0.5em; border-radius: 0.6em; background: var(--dc-1); text-align: center; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.dc-fiche strong { color: var(--dc-titre); font-size: 0.9em; }
.dc-fiche small { color: var(--dc-doux); font-size: 0.72em; line-height: 1.25; }
.f-1 { box-shadow: inset 0 0.18em 0 #ff5c8a; }
.f-2 { box-shadow: inset 0 0.18em 0 var(--turquoise); }
.f-3 { box-shadow: inset 0 0.18em 0 #f0b232; }
.dc-match-ok { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); padding: 0.3em 0.9em; border-radius: 1em; background: linear-gradient(90deg, #5865f2, var(--turquoise)); color: #fff; font-weight: 700; font-size: 0.85em; white-space: nowrap; box-shadow: 0 0 1.5em rgba(88, 101, 242, 0.7); }

/* ------------------------------------------------------------------------------------------------ clip partagé avec /partager */
.dc-clip { max-width: 30em; }
.dc-video { position: relative; margin-top: 0.6em; border-radius: 0.3em; overflow: hidden; background: #000; }
.dc-video img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.dc-lecture { position: absolute; left: 50%; top: 50%; width: 3.4em; height: 3.4em; margin: -1.7em 0 0 -1.7em; border-radius: 50%; background: rgba(0, 0, 0, 0.6); box-shadow: 0 0 0 0.15em rgba(255, 255, 255, 0.85); }
.dc-lecture::after { content: ""; position: absolute; left: 1.3em; top: 0.95em; border-left: 1.2em solid #fff; border-top: 0.75em solid transparent; border-bottom: 0.75em solid transparent; }
.dc-duree { position: absolute; right: 0.5em; bottom: 0.7em; padding: 0.05em 0.4em; border-radius: 0.25em; background: rgba(0, 0, 0, 0.7); color: #fff; font-size: 0.72em; }
.dc-video-progres { position: absolute; left: 0; right: 0; bottom: 0; height: 0.25em; background: rgba(255, 255, 255, 0.2); }
.dc-video-progres i { display: block; height: 100%; background: #ff3d6e; transform-origin: 0 50%; transform: scaleX(0.62); }
.dc-reactions { display: flex; gap: 0.35em; margin-top: 0.4em !important; }
.dc-reaction { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.15em 0.5em; border-radius: 0.5em; background: rgba(88, 101, 242, 0.15); box-shadow: inset 0 0 0 1px #5865f2; color: #dee0fc; font-size: 0.85em; }
.dc-reaction i { width: 1em; height: 1em; background: #ff7a3d; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.dc-reaction .ic-feu { --ic: url("/img/serveur/i-feu.svg"); }
.dc-reaction .ic-coeur { --ic: url("/img/serveur/i-coeur.svg"); background: #ff3d6e; }

/* ================================================================================================ une vue seule (sans fenêtre) */
.dc-seule {
  font: 400 15px/1.375 var(--police); color: var(--dc-texte); text-align: left; background: var(--dc-2); border-radius: 0.8em; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 40px 90px -40px rgba(88, 101, 242, 0.6), 0 24px 50px -28px rgba(0, 0, 0, 0.85);
}
.dc-seule .dc-fil { padding: 1em 0 1.3em; }
/* une vue seule déplacée dans la fenêtre de la visite : elle reprend l'apparence de la fenêtre */
.dc .dc-seule { font: inherit; background: none; border-radius: 0; box-shadow: none; overflow: visible; }
.dc .dc-seule .dc-fil { padding: 0.6em 0 1.2em; }
.dc-vue p { margin: 0; }
.dc-cadre { margin: 0; }

/* ================================================================================================ ajouts de la page « Le serveur » */
.dc-grand { height: min(46em, calc(100vh - 140px)); min-height: 34em; }
/* salons cliquables (liens vers leur section ; js/serveur.js les ouvre dans la fenêtre) */
a.dc-salon { text-decoration: none; cursor: pointer; }
a.dc-salon:hover { background: rgba(78, 80, 88, 0.3); color: var(--dc-titre); }
a.dc-salon:active { background: rgba(78, 80, 88, 0.45); }
a.dc-salon[aria-current="true"] { background: var(--dc-actif); color: #fff; }
a.dc-salon:focus-visible { outline: 2px solid #00a8fc; outline-offset: -2px; }
.dc-salon.dc-vedette:not([aria-current="true"]) .dc-salon-nom { color: var(--dc-titre); }
.dc-compte-vocal { margin-left: auto; padding: 0 0.45em; border-radius: 1em; background: rgba(35, 165, 90, 0.2); color: #57f287; font-size: 0.72em; font-weight: 700; }
.dc-temporaire .dc-salon-nom { font-style: italic; }
/* puces des salons (téléphone, où la colonne des salons n'a pas la place) */
.dc-puces { display: none; gap: 0.4em; flex: none; padding: 0.55em 0.8em; overflow-x: auto; scrollbar-width: none; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); }
.dc-puces::-webkit-scrollbar { display: none; }
.dc-puces a { flex: none; display: inline-flex; align-items: center; min-height: 2.4em; padding: 0 0.85em; border-radius: 1.2em; background: var(--dc-1); color: var(--dc-doux); font-weight: 600; font-size: 0.85em; text-decoration: none; white-space: nowrap; }
.dc-puces a[aria-current="true"] { background: #5865f2; color: #fff; }
.dc-puces a:focus-visible { outline: 2px solid #00a8fc; outline-offset: 2px; }

/* membres cliquables : chacun ouvre sa carte de profil */
.dc-membre { display: flex; align-items: center; gap: 0.75em; width: 100%; padding: 0.3em 0.5em; border: 0; border-radius: 0.3em; background: none; color: var(--dc-doux); font: inherit; text-align: left; cursor: pointer; }
.dc-membre:hover { background: rgba(78, 80, 88, 0.3); }
.dc-membre:active { background: rgba(78, 80, 88, 0.45); }
.dc-membre:focus-visible { outline: 2px solid #00a8fc; outline-offset: -2px; }
.dc-membres li { padding: 0; }
.dc-membre > span { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.35em; min-width: 0; line-height: 1.2; }
.dc-membres .dc-membre .dc-av::after { content: ""; position: absolute; right: -0.1em; bottom: -0.1em; width: 0.7em; height: 0.7em; border-radius: 50%; background: var(--dc-vert); box-shadow: 0 0 0 0.2em var(--dc-1); }

/* tag de serveur après le pseudo (icône et quatre caractères, comme dans Discord) */
.dc-tag { display: inline-flex; align-items: center; gap: 0.25em; height: 1.35em; padding: 0 0.35em; border-radius: 0.3em; background: rgba(255, 255, 255, 0.08); color: var(--dc-titre); font-size: 0.68em; font-weight: 700; letter-spacing: 0.02em; vertical-align: 0.1em; white-space: nowrap; }
.dc-tag i { width: 0.95em; height: 0.95em; flex: none; }
.tag-diamant { background: linear-gradient(135deg, #a5f3ff, #2bd6ff 45%, #5865f2); clip-path: polygon(50% 0, 100% 38%, 50% 100%, 0 38%); }
.tag-coeur { background: #ff5c8a; -webkit-mask: url("/img/serveur/i-coeur.svg") center / contain no-repeat; mask: url("/img/serveur/i-coeur.svg") center / contain no-repeat; }

/* début d'un salon sans vue animée (« Bienvenue dans #… ! ») */
.dc-debut { padding: 1em 1em 0.4em; }
.dc-debut-ic { display: grid; place-items: center; width: 4.4em; height: 4.4em; margin-bottom: 0.6em; border-radius: 50%; background: #41434a; color: #fff; }
.dc-debut-ic .dc-ic { width: 2.4em; height: 2.4em; }
.dc-debut-titre { color: #fff; font: 800 1.7em/1.15 var(--police); margin-bottom: 0.25em !important; }
.dc-debut p:last-child { color: var(--dc-doux); }

/* petits blocs des embeds */
.dc-citation { margin: 0.5em 0 !important; padding: 0.1em 0 0.1em 0.75em; box-shadow: inset 0.22em 0 0 #4e5058; color: var(--dc-texte); font-size: 0.93em; }
.dc-etapes { margin: 0.3em 0 0.4em !important; padding-left: 1.4em !important; list-style: decimal !important; font-size: 0.93em; }
.dc-etapes li + li { margin-top: 0.2em; }
.dc-recap, .dc-certifs { display: grid; gap: 0.3em; margin-top: 0.45em !important; font-size: 0.9em; }
.dc-recap li { position: relative; padding-left: 1em; }
.dc-recap li::before { content: ""; position: absolute; left: 0.1em; top: 0.55em; width: 0.4em; height: 0.4em; border-radius: 50%; background: #ff3d6e; }
.dc-certifs li { display: flex; align-items: center; gap: 0.45em; color: var(--dc-titre); }
.dc-certifs li::before { content: ""; flex: none; width: 1.2em; height: 1.2em; border-radius: 50%; background: var(--turquoise) url("/img/serveur/i-coche.svg") center / 70% no-repeat; }
.dc-essais { color: var(--dc-titre); font-weight: 600; letter-spacing: 0.06em; }
.dc-lien { color: #00a8fc; }
.dc-banniere-carree { max-width: 100%; margin-top: 0.7em; }

/* Rap France Radio : la vraie image du panneau, avec quelques mouvements par-dessus (direct, égaliseur, avancée) */
.dc-radio { position: relative; max-width: 40em; margin-top: 0.4em; border-radius: 0.7em; overflow: hidden; background: #071016; box-shadow: inset 0 0 0 1px rgba(103, 230, 212, 0.2); }
.dc-radio img { display: block; width: 100%; height: auto; }
.rd-direct { position: absolute; left: 80.2%; top: 11.3%; width: 1.9%; aspect-ratio: 1; font-size: 0; }
.rd-direct i { position: absolute; inset: 0; border-radius: 50%; background: rgba(43, 214, 200, 0.85); animation: rd-pouls 1.8s ease-out infinite; }
@keyframes rd-pouls { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(2.6); opacity: 0; } }
.rd-egaliseur { position: absolute; left: 9%; width: 18.5%; top: 71.5%; height: 5.5%; display: flex; align-items: flex-end; gap: 4%; }
.rd-egaliseur i { flex: 1; height: 100%; border-radius: 0.1em; background: linear-gradient(0deg, #1fc8c8, #9af6ff); transform-origin: 50% 100%; animation: rd-eq 0.9s ease-in-out infinite alternate; opacity: 0.85; }
.rd-egaliseur i:nth-child(3n) { animation-duration: 0.7s; }
.rd-egaliseur i:nth-child(3n + 1) { animation-duration: 1.1s; animation-delay: -0.3s; }
.rd-egaliseur i:nth-child(4n + 2) { animation-delay: -0.55s; }
@keyframes rd-eq { from { transform: scaleY(0.2); } to { transform: scaleY(1); } }
.rd-progres { position: absolute; left: 5.3%; right: 5.2%; top: 86.6%; height: 0.55%; border-radius: 1em; overflow: hidden; }
.rd-progres i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, transparent, #9af6ff 70%, #fff); transform-origin: 0 50%; animation: rd-avance 14s linear infinite; opacity: 0.9; }
@keyframes rd-avance { from { transform: scaleX(0.36); } to { transform: scaleX(1); } }

/* ================================================================================================ carte de profil (popover) */
.dc-popout { width: min(21em, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: 0.9em; overflow: auto; background: #232428; color: var(--dc-texte); font: 400 15px/1.4 var(--police); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 60px rgba(0, 0, 0, 0.7); }
.dc-popout::backdrop { background: rgba(5, 6, 10, 0.55); }
.dc-popout p { margin: 0; }
.pp-banniere { height: 5.4em; background: linear-gradient(120deg, #5865f2, #2bd6ff); }
.pp-banniere.g-fondateur { background: linear-gradient(120deg, #2dd4ae, #5865f2); }
.pp-banniere.g-admin { background: linear-gradient(120deg, #5865f2, #8e97ff); }
.pp-banniere.g-equipe { background: linear-gradient(120deg, #8e97ff, #2dd4ae); }
.pp-banniere.g-bot { background: linear-gradient(120deg, #128a7a, #5865f2); }
.pp-banniere.g-certifie { background: linear-gradient(120deg, #3d6fd8, #63b6ff); }
.pp-tete { position: relative; height: 2.6em; padding: 0 1em; }
.pp-av.dc-av { position: absolute; top: -2.9em; width: 5.4em; height: 5.4em; font-size: 1.1em; box-shadow: 0 0 0 0.35em #232428; }
.pp-statut { position: absolute; left: 5.3em; top: 1.5em; width: 1.1em; height: 1.1em; border-radius: 50%; background: var(--dc-vert); box-shadow: 0 0 0 0.3em #232428; }
.pp-corps { margin: 0 0.8em 0.9em; padding: 0.8em 0.9em 1em; border-radius: 0.6em; background: #111214; }
.pp-nom { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em; color: #fff; font: 800 1.25em/1.2 var(--police); }
.pp-nom .dc-tag { font-size: 0.55em; }
.pp-role { margin-top: 0.2em !important; font-weight: 600; font-size: 0.9em; }
.pp-role.g-fondateur { color: #2dd4ae; }
.pp-role.g-admin { color: #8e97ff; }
.pp-role.g-equipe { color: #b9bfff; }
.pp-titre { margin-top: 0.9em !important; color: var(--dc-titre); font-size: 0.72em; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.pp-bio, .pp-jeux { margin-top: 0.3em !important; font-size: 0.9em; }
.pp-roles { display: flex; flex-wrap: wrap; gap: 0.35em; margin: 0.4em 0 0 !important; padding: 0 !important; list-style: none; }
.pp-roles li { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.15em 0.5em; border-radius: 0.3em; background: #2b2d31; color: var(--dc-titre); font-size: 0.78em; font-weight: 600; }
.pp-roles li::before { content: ""; width: 0.65em; height: 0.65em; border-radius: 50%; background: #949ba4; }
.pp-roles .g-fondateur::before { background: #2dd4ae; }
.pp-roles .g-admin::before { background: #8e97ff; }
.pp-roles .g-equipe::before { background: #b9bfff; }
.pp-roles .g-certifie::before { background: #63b6ff; }
.pp-roles .g-bot::before { background: var(--turquoise); }
.pp-lien { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 1em; border-radius: 0.4em; background: #5865f2; color: #fff; font-weight: 600; text-decoration: none; }
.pp-lien:hover { background: #4752c4; }
.pp-lien:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pp-fictif { margin-top: 1em !important; color: var(--dc-doux); font-size: 0.78em; font-style: italic; }
.pp-fermer { position: absolute; top: 0.5em; right: 0.5em; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.45); color: #fff; font-size: 1.5em; line-height: 1; cursor: pointer; }
.pp-fermer:hover { background: rgba(0, 0, 0, 0.7); }
.pp-fermer:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* sans le popover natif (navigateurs anciens), la règle :popover-open est ignorée : les cartes restent cachées */
.dc-popout { display: none; }
.dc-popout:popover-open { display: block; }

/* fiche du staff avec son parcours sur Discord : plus large, le profil à gauche, le parcours à droite */
.dc-popout.pp-avec-parcours { width: min(54em, calc(100vw - 32px)); }
.pp-avec-parcours .pp-corps { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr); gap: 0 1.4em; }
.pp-avec-parcours .pp-infos { align-self: start; }
.pc { min-width: 0; padding-left: 1.4em; border-left: 1px solid rgba(255, 255, 255, 0.07); }
.pc-titre { margin-top: 0.3em !important; }
.pc-liste { position: relative; list-style: none; margin: 0.6em 0 0; padding: 0; display: grid; gap: 0.45em; }
/* le fil du parcours, d'une icône à l'autre */
.pc-liste::before { content: ""; position: absolute; left: 1.2em; top: 1.2em; bottom: 1.2em; width: 2px; background: linear-gradient(#5865f2, rgba(88, 101, 242, 0.15)); }
.pc-item { position: relative; display: grid; grid-template-columns: 2.4em minmax(0, 1fr) auto; align-items: start; gap: 0.75em; padding: 0.55em 0.6em 0.55em 0; border-radius: 0.6em; }
.pc-item:hover { background: rgba(255, 255, 255, 0.03); }
.pc-ic { position: relative; z-index: 1; display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 0.8em; overflow: hidden; background: #2b2d31; color: #fff; font: 900 0.8em/1 var(--police-titre); letter-spacing: 0.02em; box-shadow: 0 0 0 3px #111214; }
.pc-item .pc-ic { font-size: 1em; }
.pc-ic img { width: 100%; height: 100%; object-fit: cover; }
.pc-actuel .pc-ic { box-shadow: 0 0 0 3px #111214, 0 0 0 5px var(--turquoise); }
.pc-nom { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35em; color: #fff; font-size: 0.95em; line-height: 1.25; }
.pc-badge { flex: none; width: 1.15em; height: 1.15em; }
.pc-badge + strong { margin-left: -0.1em; }
.pc-membres { display: inline-block; color: var(--dc-doux); font-size: 0.78em; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pc-membres .point-gris { display: inline-block; width: 0.6em; height: 0.6em; margin-right: 0.35em; vertical-align: 0.05em; }
.pc-direct .point-gris, .pc-actuel .pc-membres .point-gris { background: var(--dc-vert); }
.pc-maintenant { padding: 0.05em 0.5em; border-radius: 1em; background: rgba(45, 212, 174, 0.16); color: var(--turquoise); font-size: 0.72em; font-weight: 700; }
.pc-role { margin-top: 0.15em !important; font-size: 0.82em; font-weight: 700; }
.r-fondateur { color: #2dd4ae; }
.r-admin { color: #8e97ff; }
.r-modo { color: #7c86ff; }
.pc-theme { margin-top: 0.15em !important; color: var(--dc-texte); font-size: 0.85em; }
.pc-faits { margin-top: 0.1em !important; color: var(--dc-doux); font-size: 0.78em; line-height: 1.4; }
.pc-rejoindre { align-self: center; display: inline-flex; align-items: center; min-height: 36px; padding: 0 0.85em; border-radius: 0.4em; background: #248046; color: #fff; font-size: 0.8em; font-weight: 700; text-decoration: none; white-space: nowrap; }
.pc-rejoindre:hover { background: #1a6334; }
.pc-rejoindre:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pc-sans-lien { align-self: center; color: var(--dc-doux); font-size: 0.72em; text-align: right; max-width: 7em; }
.pc-note { margin-top: 0.7em !important; color: var(--dc-doux); font-size: 0.72em; }
@media (max-width: 760px) {
  .pp-avec-parcours .pp-corps { grid-template-columns: minmax(0, 1fr); }
  .pc { margin-top: 1em; padding: 1em 0 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.07); }
}
@media (max-width: 420px) {
  .pc-item { grid-template-columns: 2.4em minmax(0, 1fr); }
  .pc-rejoindre, .pc-sans-lien { grid-column: 2; justify-self: start; text-align: left; max-width: none; }
}

/* ================================================================================================ écrans moyens et petits */
@media (max-width: 1240px) {
  .dc { --dc-l-membres: 0px; grid-template-columns: var(--dc-l-serveurs) var(--dc-l-salons) minmax(0, 1fr); }
  .dc .dc-membres { display: none; }
}
@media (max-width: 880px) {
  .dc { grid-template-columns: minmax(0, 1fr); font-size: 14px; }
  .dc-grand { height: min(40em, calc(100svh - 110px)); min-height: 30em; }
  .dc .dc-serveurs, .dc .dc-salons { display: none; }
  .dc .dc-puces { display: flex; }
  .dc-seule { font-size: 14px; }
  .dc-saisie .dc-etiquette { display: none; }
}
@media (max-width: 560px) {
  .dc, .dc-seule { font-size: 12.5px; }
  .dc-sorties { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dc-jeux { grid-template-columns: 1fr 1fr; }
  .dc-boutique { grid-template-columns: 1fr; }
  .pf-bas { grid-template-columns: 1fr; }
  .pf-tete { grid-template-columns: auto 1fr; }
  .pf-certifs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; }
  .dc-escalier { gap: 0.25em; }
}
/* « Réduire les animations » : plus rien ne bouge en continu dans la fenêtre */
html.reduit .dc *, html.reduit .dc-seule * { animation: none !important; }

/* sondage : barres de vote (largeur écrite dans data-pourcent, sans style dans la page) */
.dc-barre-vote { display: block; height: 0.5em; border-radius: 1em; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.dc-barre-vote i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #5865f2, var(--turquoise)); transform-origin: 0 50%; }
.dc-barre-vote i[data-pourcent="0"] { width: 0%; }
.dc-barre-vote i[data-pourcent="1"] { width: 1%; }
.dc-barre-vote i[data-pourcent="2"] { width: 2%; }
.dc-barre-vote i[data-pourcent="3"] { width: 3%; }
.dc-barre-vote i[data-pourcent="4"] { width: 4%; }
.dc-barre-vote i[data-pourcent="5"] { width: 5%; }
.dc-barre-vote i[data-pourcent="6"] { width: 6%; }
.dc-barre-vote i[data-pourcent="7"] { width: 7%; }
.dc-barre-vote i[data-pourcent="8"] { width: 8%; }
.dc-barre-vote i[data-pourcent="9"] { width: 9%; }
.dc-barre-vote i[data-pourcent="10"] { width: 10%; }
.dc-barre-vote i[data-pourcent="11"] { width: 11%; }
.dc-barre-vote i[data-pourcent="12"] { width: 12%; }
.dc-barre-vote i[data-pourcent="13"] { width: 13%; }
.dc-barre-vote i[data-pourcent="14"] { width: 14%; }
.dc-barre-vote i[data-pourcent="15"] { width: 15%; }
.dc-barre-vote i[data-pourcent="16"] { width: 16%; }
.dc-barre-vote i[data-pourcent="17"] { width: 17%; }
.dc-barre-vote i[data-pourcent="18"] { width: 18%; }
.dc-barre-vote i[data-pourcent="19"] { width: 19%; }
.dc-barre-vote i[data-pourcent="20"] { width: 20%; }
.dc-barre-vote i[data-pourcent="21"] { width: 21%; }
.dc-barre-vote i[data-pourcent="22"] { width: 22%; }
.dc-barre-vote i[data-pourcent="23"] { width: 23%; }
.dc-barre-vote i[data-pourcent="24"] { width: 24%; }
.dc-barre-vote i[data-pourcent="25"] { width: 25%; }
.dc-barre-vote i[data-pourcent="26"] { width: 26%; }
.dc-barre-vote i[data-pourcent="27"] { width: 27%; }
.dc-barre-vote i[data-pourcent="28"] { width: 28%; }
.dc-barre-vote i[data-pourcent="29"] { width: 29%; }
.dc-barre-vote i[data-pourcent="30"] { width: 30%; }
.dc-barre-vote i[data-pourcent="31"] { width: 31%; }
.dc-barre-vote i[data-pourcent="32"] { width: 32%; }
.dc-barre-vote i[data-pourcent="33"] { width: 33%; }
.dc-barre-vote i[data-pourcent="34"] { width: 34%; }
.dc-barre-vote i[data-pourcent="35"] { width: 35%; }
.dc-barre-vote i[data-pourcent="36"] { width: 36%; }
.dc-barre-vote i[data-pourcent="37"] { width: 37%; }
.dc-barre-vote i[data-pourcent="38"] { width: 38%; }
.dc-barre-vote i[data-pourcent="39"] { width: 39%; }
.dc-barre-vote i[data-pourcent="40"] { width: 40%; }
.dc-barre-vote i[data-pourcent="41"] { width: 41%; }
.dc-barre-vote i[data-pourcent="42"] { width: 42%; }
.dc-barre-vote i[data-pourcent="43"] { width: 43%; }
.dc-barre-vote i[data-pourcent="44"] { width: 44%; }
.dc-barre-vote i[data-pourcent="45"] { width: 45%; }
.dc-barre-vote i[data-pourcent="46"] { width: 46%; }
.dc-barre-vote i[data-pourcent="47"] { width: 47%; }
.dc-barre-vote i[data-pourcent="48"] { width: 48%; }
.dc-barre-vote i[data-pourcent="49"] { width: 49%; }
.dc-barre-vote i[data-pourcent="50"] { width: 50%; }
.dc-barre-vote i[data-pourcent="51"] { width: 51%; }
.dc-barre-vote i[data-pourcent="52"] { width: 52%; }
.dc-barre-vote i[data-pourcent="53"] { width: 53%; }
.dc-barre-vote i[data-pourcent="54"] { width: 54%; }
.dc-barre-vote i[data-pourcent="55"] { width: 55%; }
.dc-barre-vote i[data-pourcent="56"] { width: 56%; }
.dc-barre-vote i[data-pourcent="57"] { width: 57%; }
.dc-barre-vote i[data-pourcent="58"] { width: 58%; }
.dc-barre-vote i[data-pourcent="59"] { width: 59%; }
.dc-barre-vote i[data-pourcent="60"] { width: 60%; }
.dc-barre-vote i[data-pourcent="61"] { width: 61%; }
.dc-barre-vote i[data-pourcent="62"] { width: 62%; }
.dc-barre-vote i[data-pourcent="63"] { width: 63%; }
.dc-barre-vote i[data-pourcent="64"] { width: 64%; }
.dc-barre-vote i[data-pourcent="65"] { width: 65%; }
.dc-barre-vote i[data-pourcent="66"] { width: 66%; }
.dc-barre-vote i[data-pourcent="67"] { width: 67%; }
.dc-barre-vote i[data-pourcent="68"] { width: 68%; }
.dc-barre-vote i[data-pourcent="69"] { width: 69%; }
.dc-barre-vote i[data-pourcent="70"] { width: 70%; }
.dc-barre-vote i[data-pourcent="71"] { width: 71%; }
.dc-barre-vote i[data-pourcent="72"] { width: 72%; }
.dc-barre-vote i[data-pourcent="73"] { width: 73%; }
.dc-barre-vote i[data-pourcent="74"] { width: 74%; }
.dc-barre-vote i[data-pourcent="75"] { width: 75%; }
.dc-barre-vote i[data-pourcent="76"] { width: 76%; }
.dc-barre-vote i[data-pourcent="77"] { width: 77%; }
.dc-barre-vote i[data-pourcent="78"] { width: 78%; }
.dc-barre-vote i[data-pourcent="79"] { width: 79%; }
.dc-barre-vote i[data-pourcent="80"] { width: 80%; }
.dc-barre-vote i[data-pourcent="81"] { width: 81%; }
.dc-barre-vote i[data-pourcent="82"] { width: 82%; }
.dc-barre-vote i[data-pourcent="83"] { width: 83%; }
.dc-barre-vote i[data-pourcent="84"] { width: 84%; }
.dc-barre-vote i[data-pourcent="85"] { width: 85%; }
.dc-barre-vote i[data-pourcent="86"] { width: 86%; }
.dc-barre-vote i[data-pourcent="87"] { width: 87%; }
.dc-barre-vote i[data-pourcent="88"] { width: 88%; }
.dc-barre-vote i[data-pourcent="89"] { width: 89%; }
.dc-barre-vote i[data-pourcent="90"] { width: 90%; }
.dc-barre-vote i[data-pourcent="91"] { width: 91%; }
.dc-barre-vote i[data-pourcent="92"] { width: 92%; }
.dc-barre-vote i[data-pourcent="93"] { width: 93%; }
.dc-barre-vote i[data-pourcent="94"] { width: 94%; }
.dc-barre-vote i[data-pourcent="95"] { width: 95%; }
.dc-barre-vote i[data-pourcent="96"] { width: 96%; }
.dc-barre-vote i[data-pourcent="97"] { width: 97%; }
.dc-barre-vote i[data-pourcent="98"] { width: 98%; }
.dc-barre-vote i[data-pourcent="99"] { width: 99%; }
.dc-barre-vote i[data-pourcent="100"] { width: 100%; }

/* ================================================================================================ un salon qui s'ouvre (js/serveur.js) */
/* Quand on ouvre un salon, ses messages arrivent l'un après l'autre et ses éléments s'animent une fois. Chaque
   animation part d'un état et finit sur l'état normal de la page : rien ne peut rester à moitié affiché. */
.dc[data-pret] .dc-vue.entre .dc-fil > * { animation: dc-arrive 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.dc[data-pret] .dc-vue.entre .dc-fil > :nth-child(2) { animation-delay: 0.08s; }
.dc[data-pret] .dc-vue.entre .dc-fil > :nth-child(3) { animation-delay: 0.16s; }
.dc[data-pret] .dc-vue.entre .dc-fil > :nth-child(4) { animation-delay: 0.24s; }
.dc[data-pret] .dc-vue.entre .dc-fil > :nth-child(5) { animation-delay: 0.32s; }
.dc[data-pret] .dc-vue.entre .dc-fil > :nth-child(n + 6) { animation-delay: 0.4s; }
.dc[data-pret] .dc-vue.entre .dc-fil > .dc-attend { animation-delay: 1.1s; }
@keyframes dc-arrive { from { opacity: 0; transform: translateY(0.8em); } }
.dc-vue.entre .dc-xp-barre i { animation: dc-xp 1.4s 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes dc-xp { from { transform: scaleX(0.06); } }
.dc-vue.entre .dc-barre-vote i { animation: dc-vote 1s 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes dc-vote { from { transform: scaleX(0); } }
.dc-vue.entre .dc-bande { animation: dc-rouleau 1.6s 0.35s cubic-bezier(0.25, 0.8, 0.3, 1) both; }
.dc-vue.entre .dc-rouleau:nth-child(2) .dc-bande { animation-duration: 1.9s; }
.dc-vue.entre .dc-rouleau:nth-child(3) .dc-bande { animation-duration: 2.2s; }
@keyframes dc-rouleau { from { transform: translateY(0); } }
.dc-vue.entre .dc-bille-orbite { animation: dc-bille 2.4s 0.35s cubic-bezier(0.15, 0.6, 0.25, 1) both; }
@keyframes dc-bille { from { transform: rotate(-1028deg); } }
.dc-vue.entre .dc-roue { animation: dc-roue 2.4s 0.35s cubic-bezier(0.15, 0.6, 0.25, 1) both; }
@keyframes dc-roue { from { transform: rotate(560deg); } }
.dc-vue.entre .dc-carte { animation: dc-retourne 0.7s 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.dc-vue.entre .dc-carte:nth-child(2) { animation-delay: 0.7s; }
.dc-vue.entre .dc-carte:nth-child(3) { animation-delay: 0.9s; }
@keyframes dc-retourne { from { transform: rotateY(180deg); } }
html.reduit .dc-vue.entre * { animation: none !important; }