/* Espace d'un serveur (<serveur>.modipho.com) : les couleurs viennent du thème (data-style, défini dans lecteur.css). */
body.espace { background:radial-gradient(1200px 600px at 10% -10%, var(--halo), transparent 60%), var(--fond); }
.espace a { color:var(--accent); } .espace .d-bouton { background:linear-gradient(180deg, var(--accent), var(--accent-2)); color:var(--encre); box-shadow:0 10px 24px -14px var(--accent); }
.espace .d-bouton.secondaire { background:var(--carte-2); color:var(--texte); box-shadow:none; }
.espace .surtitre { color:var(--accent); } .espace .onglet.actif { border-color:var(--accent); }
.e-entete { position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:22px; padding:12px max(20px, calc((100vw - 1160px) / 2)); background:color-mix(in srgb, var(--fond) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--trait); }
.e-marque { display:inline-flex; align-items:center; gap:10px; color:var(--texte) !important; font-weight:800; font-size:18px; white-space:nowrap; } .e-marque:hover { text-decoration:none; }
.e-nav { display:flex; gap:4px; } .e-nav a { color:var(--texte-2) !important; font-weight:700; font-size:15px; padding:7px 12px; border-radius:10px; }
.e-nav a:hover { text-decoration:none; background:var(--carte); color:var(--texte) !important; } .e-nav a.actif { color:var(--texte) !important; background:var(--carte-2); box-shadow:inset 0 -2px 0 var(--accent); }
.e-actions { margin-left:auto; display:flex; align-items:center; gap:14px; } .e-moi { display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:15px; white-space:nowrap; }
.e-icone { border-radius:22px; object-fit:cover; flex:none; } .e-icone.vide { display:grid; place-items:center; background:var(--carte-2); color:var(--accent); font-weight:800; }
.e-icone.petite { width:34px; height:34px; border-radius:10px; font-size:16px; } .e-icone.grande { width:112px; height:112px; font-size:46px; box-shadow:0 24px 50px -24px #000, 0 0 0 1px var(--trait-2); }

.e-heros { display:flex; align-items:flex-start; gap:28px; padding:64px 0 32px; }
.e-heros h1 { margin:0 0 14px; font-size:clamp(38px, 6vw, 64px); }
.e-texte { font-size:clamp(17px, 2vw, 21px); color:var(--texte-2); max-width:760px; margin:0 0 18px; line-height:1.55; }
.e-puces { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px; } .e-puce { padding:6px 12px; border-radius:999px; background:var(--carte); border:1px solid var(--trait-2); color:var(--texte-2); font-size:14px; font-weight:700; }
.e-invite { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin:10px 0 0; } .e-invite span { color:var(--texte-3); font-size:14px; }
.e-grille { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:14px; padding-bottom:20px; }
.e-tuile { display:grid; gap:6px; color:var(--texte) !important; transition:border-color .15s, transform .15s; } .e-tuile:hover { text-decoration:none; border-color:var(--accent); transform:translateY(-2px); }
.e-tuile-icone { display:grid; place-items:center; width:46px; height:46px; border-radius:14px; background:var(--halo); font-size:22px; margin-bottom:6px; }
.e-tuile strong { font-size:18px; } .e-tuile small { color:var(--texte-2); font-size:14px; line-height:1.45; }

.e-section { padding:44px 0 10px; } .e-section h1 { margin-bottom:10px; }
.e-profil { display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, .75fr); gap:18px; align-items:start; margin-top:14px; }
.e-carte { position:relative; margin:0; border-radius:var(--rayon); overflow:hidden; aspect-ratio:12 / 7; background:linear-gradient(110deg, var(--carte) 30%, var(--carte-2) 50%, var(--carte) 70%) 0 0 / 300% 100%; animation:chargement 1.4s linear infinite; border:1px solid var(--trait); }
.e-carte img { position:relative; z-index:1; display:block; width:100%; height:100%; object-fit:cover; }
.e-carte figcaption { position:absolute; inset:0; display:grid; place-items:center; color:var(--texte-3); font-weight:700; }
@keyframes chargement { to { background-position:-300% 0; } }
.e-chiffres { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.e-chiffre { display:grid; gap:2px; padding:14px 16px; } .e-chiffre span { color:var(--texte-3); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.e-chiffre strong { font-size:24px; } .e-chiffre small { color:var(--accent); font-size:13px; }
.e-barre { grid-column:1 / -1; display:grid; gap:8px; padding:14px 16px; } .e-barre span { color:var(--texte-2); font-size:14px; font-weight:700; }
.e-liens { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:8px; }
.e-liste { display:grid; gap:2px; padding:8px; margin-top:12px; }
.e-rang { display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:12px; color:var(--texte) !important; } .e-rang:hover { background:var(--carte-2); text-decoration:none; }
.e-rang.moi { background:var(--halo); } .e-rang strong { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.e-place { width:30px; text-align:center; font-weight:800; color:var(--texte-3); font-variant-numeric:tabular-nums; } .e-valeur { color:var(--texte-2); font-size:14px; font-weight:700; white-space:nowrap; }
.lp-mini.rond { border-radius:50%; width:36px; height:36px; object-fit:cover; }
.e-blocs { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:10px; } .e-bloc { display:grid; gap:14px; align-content:start; }
.e-quete { display:grid; gap:8px; } .e-quete div:first-child { display:grid; } .e-quete small { color:var(--texte-3); } .e-quete.faite strong { color:var(--accent); }
.e-pied { max-width:1160px; margin:40px auto 0; padding:26px 20px 40px; border-top:1px solid var(--trait); display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; color:var(--texte-3); font-size:14px; }
.espace .lecteur { padding-top:28px; }

@media (max-width: 900px) {
  .e-nav { position:fixed; left:0; right:0; bottom:0; z-index:6; justify-content:space-around; padding:8px 6px calc(8px + env(safe-area-inset-bottom)); background:var(--surface); border-top:1px solid var(--trait-2); }
  .e-nav a { font-size:13px; padding:7px 8px; } body.espace { padding-bottom:64px; }
  .e-heros { flex-direction:column; gap:18px; padding-top:36px; } .e-profil, .e-blocs { grid-template-columns:1fr; }
}
@media (max-width: 560px) { .e-moi span, .e-actions .d-lien { display:none; } .e-marque span { max-width:46vw; overflow:hidden; text-overflow:ellipsis; } .e-chiffre strong { font-size:20px; } }
@media (prefers-reduced-motion: reduce) { .e-carte { animation:none; } .e-tuile { transition:none; } }