/* da : la structure de la plateforme h (cartes chiffres, onglets, lignes, gros nombres, rien de superflu)
   avec les couleurs et l'aspect premium d'unaite.fr : quasi-noir grainé, halos indigo, satoshi,
   étiquettes en mono majuscules, bords fins à angles droits, boutons en capitales soulignés de lavande. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --bg:#020308; --card:rgba(255,255,255,.025); --card-2:rgba(255,255,255,.045);
  --border:rgba(255,255,255,.08); --border-2:rgba(255,255,255,.18); --coin:rgba(255,255,255,.38);
  --text:#fafaf7; --text-2:rgba(255,255,255,.75); --text-3:rgba(255,255,255,.45); --text-4:rgba(255,255,255,.28);
  --hover:rgba(255,255,255,.035);
  --lavande:#b9b1ff; --indigo:#6e62ff; --indigo-soft:rgba(110,98,255,.14); --glow:rgba(110,98,255,.28);
  --vert:#8ef0c0; --vert-soft:rgba(16,197,109,.14);
  --orange:#ffc18a; --orange-soft:rgba(247,104,8,.16);
  --ease:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; color-scheme:dark}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15.5px; line-height:1.55; -webkit-font-smoothing:antialiased; min-height:100vh; position:relative;
}
/* le halo indigo en haut + le grain, comme chez unaite */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(55% 40% at 50% -5%, var(--glow), transparent 70%),
    radial-gradient(40% 30% at 85% 30%, rgba(110,98,255,.08), transparent 75%),
    linear-gradient(rgba(0,0,0,0), rgba(2,3,8,.6) 60%, var(--bg));
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.14; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit}
.mono{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace}

.page{max-width:900px; margin:0 auto; padding:0 22px; padding-block:26px 70px}

/* la barre du haut : marque, chemin, pages, action */
.top{display:flex; align-items:center; gap:14px; margin-bottom:46px}
.marque{display:flex; align-items:center; gap:10px; font-weight:700; font-size:19px; letter-spacing:-.03em}
.marque .h{width:26px; height:26px; display:grid; place-items:center; font-size:13px; font-weight:700; color:#fff; background:linear-gradient(135deg, var(--lavande), var(--indigo)); box-shadow:0 0 22px var(--glow)}
.top .sep{color:var(--text-4)}
.top .fil{font-family:"JetBrains Mono",monospace; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3)}
.top nav{display:flex; gap:18px; margin-left:auto}
.top nav a{color:var(--text-2); font-weight:500; font-size:15px; padding:6px 0; border-bottom:1px solid transparent; transition:color .2s var(--ease), border-color .2s var(--ease)}
.top nav a:hover{color:var(--text)}
.top nav a[aria-current]{color:var(--text); border-bottom-color:var(--lavande)}

/* le bouton "join us" d'unaite : capitales mono, bord fin, filet lavande qui luit */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:12px 22px;
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text); background:rgba(255,255,255,.02); border:1px solid var(--border-2); border-bottom-color:var(--lavande);
  box-shadow:0 1px 0 var(--indigo), 0 8px 26px -8px var(--glow); cursor:pointer; white-space:nowrap;
  transition:background .2s var(--ease), box-shadow .25s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
}
.btn svg{width:13px; height:13px; flex:none}
.btn:hover{background:rgba(255,255,255,.06); box-shadow:0 1px 0 var(--lavande), 0 12px 34px -8px var(--glow); border-color:var(--border-2)}
.btn:active{transform:translateY(1px)}
.btn.calme{border-bottom-color:var(--border-2); box-shadow:none}
.btn.calme:hover{box-shadow:none; border-color:var(--lavande)}

/* les étiquettes mono "# ..." et les titres serrés */
.etiq{font-family:"JetBrains Mono",monospace; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-3)}
h1{font-size:clamp(30px,5vw,42px); font-weight:500; letter-spacing:-.04em; margin:8px 0 0; line-height:1.05}
h1 b{font-weight:700; color:var(--lavande)}
.sous{margin:12px 0 0; color:var(--text-2); font-size:15.5px; max-width:560px; font-weight:300}
.entete{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:26px}
h2{font-family:"JetBrains Mono",monospace; font-size:11.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--text-3); margin:40px 0 12px}
h2::before{content:"# "; color:var(--indigo)}

/* le sélecteur de ville */
select{
  font:inherit; font-size:14px; font-weight:500; color:var(--text); background:var(--card); border:1px solid var(--border-2);
  padding:9px 34px 9px 13px; -webkit-appearance:none; appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b9b1ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center; background-size:14px;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
select:hover{border-color:var(--lavande)}
select:focus{outline:none; border-color:var(--lavande); box-shadow:0 0 0 3px var(--indigo-soft)}
select option{background:#0b0c14; color:var(--text)}
.ville{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.ville .autre{font-size:13px; color:var(--text-3)}
.ville .autre a{color:var(--lavande)}
.ville .autre a:hover{text-decoration:underline}

/* les cartes chiffres (structure h, peau unaite) avec le petit coin ┘ */
.cartes{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
@media(max-width:640px){ .cartes{grid-template-columns:1fr 1fr} .cartes .c:last-child{grid-column:1/-1} }
.c{
  position:relative; background:var(--card); border:1px solid var(--border); padding:20px 22px 18px; text-align:left; color:inherit; cursor:pointer;
  transition:border-color .2s var(--ease), background .2s var(--ease), transform .25s var(--ease);
}
.c::after{content:""; position:absolute; right:8px; bottom:8px; width:9px; height:9px; border-right:1px solid var(--coin); border-bottom:1px solid var(--coin); opacity:.7; transition:opacity .2s}
.c:hover{border-color:var(--border-2); background:var(--card-2)}
.c[aria-pressed=true]{border-color:var(--lavande); background:var(--card-2); box-shadow:0 0 0 1px rgba(185,177,255,.25), 0 14px 40px -18px var(--glow)}
.c[aria-pressed=true]::after{opacity:1; border-color:var(--lavande)}
.c .l{font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-3)}
.c .n{font-size:40px; font-weight:500; letter-spacing:-.05em; line-height:1; margin-top:12px; font-variant-numeric:tabular-nums}
.c .p{font-size:13.5px; color:var(--text-3); margin-top:12px; font-weight:300}
.c .p b{color:var(--lavande); font-weight:500}

/* les onglets, soulignés en lavande */
.onglets{display:flex; gap:2px; border-bottom:1px solid var(--border); margin:34px 0 0; overflow-x:auto; scrollbar-width:none}
.onglets::-webkit-scrollbar{display:none}
.onglet{
  position:relative; padding:12px 14px; border:0; background:none; color:var(--text-3); cursor:pointer; white-space:nowrap;
  font-family:"JetBrains Mono",monospace; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; transition:color .2s var(--ease);
}
.onglet:hover{color:var(--text)}
.onglet .k{margin-left:8px; color:var(--text-4)}
.onglet[aria-selected=true]{color:var(--text)}
.onglet[aria-selected=true] .k{color:var(--lavande)}
.onglet::after{content:""; position:absolute; left:10px; right:10px; bottom:-1px; height:1px; background:var(--lavande); box-shadow:0 0 12px var(--indigo); transform:scaleX(0); transition:transform .25s var(--ease)}
.onglet[aria-selected=true]::after{transform:scaleX(1)}

/* la liste : une ligne par événement */
.liste{background:var(--card); border:1px solid var(--border); margin-top:14px; overflow:hidden; position:relative}
.liste::after{content:""; position:absolute; right:8px; bottom:8px; width:9px; height:9px; border-right:1px solid var(--coin); border-bottom:1px solid var(--coin); opacity:.6; pointer-events:none}
.row{
  display:flex; align-items:center; gap:18px; padding:14px 20px; border-top:1px solid var(--border);
  transition:background .2s var(--ease); animation:entre .45s var(--ease) both;
}
.row:first-child{border-top:0}
.row:hover{background:var(--hover)}
@keyframes entre{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
.date{flex:none; width:46px; text-align:center; line-height:1}
.date .j{display:block; font-size:22px; font-weight:500; letter-spacing:-.04em; font-variant-numeric:tabular-nums}
.date .m{display:block; font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); margin-top:5px}
.row.today .date .j{color:var(--lavande); text-shadow:0 0 18px var(--glow)}
.txt{flex:1; min-width:0}
.t1{font-size:15.5px; font-weight:500; letter-spacing:-.01em; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.t2{display:block; font-size:13px; color:var(--text-3); margin-top:3px; font-weight:300; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.right{flex:none; display:flex; align-items:center; gap:10px}
.pill{font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; padding:5px 9px; border:1px solid var(--border-2); color:var(--text-2); white-space:nowrap; max-width:170px; overflow:hidden; text-overflow:ellipsis}
.pill.vert{background:var(--vert-soft); color:var(--vert); border-color:transparent}
.pill.violet{background:var(--indigo-soft); color:var(--lavande); border-color:transparent}
.pill.orange{background:var(--orange-soft); color:var(--orange); border-color:transparent}
.fleche{width:16px; height:16px; color:var(--text-4); transition:color .2s var(--ease), transform .2s var(--ease)}
.row:hover .fleche{color:var(--lavande); transform:translateX(3px)}
@media(max-width:560px){ .pill.prix{display:none} .right{gap:6px} }
.plus{display:block; width:100%; padding:12px; border:0; border-top:1px solid var(--border); background:none; color:var(--lavande); cursor:pointer; font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; transition:background .2s var(--ease)}
.plus:hover{background:var(--hover)}
.vide{padding:30px 18px; color:var(--text-3); text-align:center; font-size:14px; font-weight:300}

/* le classement */
.rang{flex:none; width:22px; font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--text-3); text-align:right; font-variant-numeric:tabular-nums}
.avatar{flex:none; width:32px; height:32px; display:grid; place-items:center; font-weight:700; font-size:13px; color:var(--lavande); border:1px solid var(--border-2); background:var(--indigo-soft)}
.row.premier .avatar{background:linear-gradient(135deg, var(--lavande), var(--indigo)); color:#fff; border-color:transparent; box-shadow:0 0 18px var(--glow)}
.row.premier .rang{color:var(--lavande)}
.elo{font-size:21px; font-weight:500; letter-spacing:-.04em; font-variant-numeric:tabular-nums}
.elo small{font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); margin-left:6px}

/* le barème : des lignes à pointillés */
.bareme{background:var(--card); border:1px solid var(--border); padding:6px 20px; position:relative}
.bareme::after{content:""; position:absolute; right:8px; bottom:8px; width:9px; height:9px; border-right:1px solid var(--coin); border-bottom:1px solid var(--coin); opacity:.6}
.bareme .b{display:flex; align-items:baseline; gap:12px; padding:12px 0; font-size:15px}
.bareme .b + .b{border-top:1px solid var(--border)}
.bareme .l{color:var(--text-2); font-weight:400}
.bareme .pts{flex:1; border-bottom:1px dotted var(--border-2); transform:translateY(-5px)}
.bareme .n{font-weight:500; letter-spacing:-.02em; font-variant-numeric:tabular-nums; font-size:17px}
.bareme .n small{font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); margin-left:5px}

/* le bandeau du bas */
.bandeau{display:flex; align-items:center; gap:18px; flex-wrap:wrap; background:var(--card); border:1px solid var(--border); padding:18px 22px; margin-top:34px; position:relative}
.bandeau::after{content:""; position:absolute; right:8px; bottom:8px; width:9px; height:9px; border-right:1px solid var(--coin); border-bottom:1px solid var(--coin); opacity:.6}
.bandeau b{font-size:16px; font-weight:500; letter-spacing:-.02em}
.bandeau span{color:var(--text-2); font-size:14.5px; flex:1; min-width:220px; font-weight:300}

footer{margin-top:52px; padding-top:16px; border-top:1px solid var(--border); font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-4); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}
footer a:hover{color:var(--lavande)}
@media(prefers-reduced-motion:reduce){ *{transition:none!important; animation:none!important} }

/* ── images + inscription (17/09 soir) ───────────────────────── */
/* les hackathons en cartes avec leur visuel, le reste en lignes avec une vignette */
.grille{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:14px}
@media(max-width:640px){ .grille{grid-template-columns:1fr} }
.carte{
  position:relative; display:flex; flex-direction:column; background:var(--card); border:1px solid var(--border);
  transition:border-color .2s var(--ease), background .2s var(--ease), transform .25s var(--ease); animation:entre .45s var(--ease) both;
}
.carte:hover{border-color:var(--border-2); background:var(--card-2)}
@media(hover:hover){ .carte:hover{transform:translateY(-2px)} }
.carte::after{content:""; position:absolute; right:8px; bottom:8px; width:9px; height:9px; border-right:1px solid var(--coin); border-bottom:1px solid var(--coin); opacity:.6; pointer-events:none}
.visuel{position:relative; aspect-ratio:16/9; overflow:hidden; background:linear-gradient(135deg, rgba(110,98,255,.22), rgba(2,3,8,.6)); border-bottom:1px solid var(--border)}
.visuel img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease), opacity .4s var(--ease); opacity:0}
.visuel img.ok{opacity:1}
.carte:hover .visuel img{transform:scale(1.03)}
.visuel .init{position:absolute; inset:0; display:grid; place-items:center; font-size:44px; font-weight:700; letter-spacing:-.05em; color:rgba(185,177,255,.35)}
.visuel .jour{position:absolute; left:10px; top:10px; padding:6px 9px; background:rgba(2,3,8,.78); border:1px solid var(--border-2); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--text)}
.visuel .jour b{color:var(--lavande); font-weight:500}
.corps{padding:14px 16px 16px; display:flex; flex-direction:column; gap:6px; flex:1}
.corps .t1{white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:1.3; font-size:16px}
.corps .t2{white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.corps .bas{display:flex; align-items:center; gap:8px; margin-top:auto; padding-top:12px; flex-wrap:wrap}
.corps .bas .pill{max-width:none}
.inscrire{
  margin-left:auto; display:inline-flex; align-items:center; gap:7px; padding:8px 12px;
  font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--text);
  border:1px solid var(--border-2); border-bottom-color:var(--lavande); box-shadow:0 1px 0 var(--indigo);
  transition:background .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease);
}
.inscrire svg{width:12px; height:12px}
.inscrire:hover{background:rgba(255,255,255,.06); box-shadow:0 1px 0 var(--lavande), 0 8px 22px -8px var(--glow)}
/* les lignes gagnent une vignette et le lien */
.vig{flex:none; width:56px; height:56px; border:1px solid var(--border); background:linear-gradient(135deg, rgba(110,98,255,.22), rgba(2,3,8,.6)); overflow:hidden; display:grid; place-items:center; font-weight:700; color:rgba(185,177,255,.45); font-size:18px}
.vig img{width:100%; height:100%; object-fit:cover; display:block; opacity:0; transition:opacity .4s var(--ease)}
.vig img.ok{opacity:1}
.row .inscrire{margin-left:0}
@media(max-width:560px){ .row .inscrire span{display:none} .row .inscrire{padding:8px 9px} .vig{width:44px; height:44px} }

/* ── images entières (17/09, « pas couper ») ─────────────────── */
/* l'image nette est contenue en entier ; derrière, la même floutée remplit le cadre */
.visuel{aspect-ratio:16/9; background:#0b0b14}
.visuel img.fond{position:absolute; inset:-12%; width:124%; height:124%; object-fit:cover; filter:blur(22px) saturate(1.2) brightness(.55); transform:none!important}
.visuel img.net{position:relative; object-fit:contain; z-index:1}
.carte:hover .visuel img.net{transform:scale(1.02)}
.visuel .jour{display:none}
.corps .quand{font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--lavande); margin-bottom:2px}
.corps .quand span{color:var(--text-3)}
.vig{width:84px; height:56px; position:relative}
.vig img.fond{position:absolute; inset:-15%; width:130%; height:130%; object-fit:cover; filter:blur(12px) saturate(1.2) brightness(.55)}
.vig img.net{position:relative; object-fit:contain; z-index:1}
@media(max-width:560px){ .vig{width:66px; height:44px} }

/* ── le classement en travaux ─────────────────────────────────── */
.travaux{position:relative; background:var(--card); border:1px solid var(--border); padding:24px 24px 20px; margin-top:6px}
.travaux::after{content:""; position:absolute; right:8px; bottom:8px; width:9px; height:9px; border-right:1px solid var(--coin); border-bottom:1px solid var(--coin); opacity:.6}
.travaux .etiq{display:flex; align-items:center; gap:8px; color:var(--orange)}
.travaux .point{width:7px; height:7px; border-radius:50%; background:var(--orange); box-shadow:0 0 12px var(--orange); animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1} 50%{opacity:.35}}
.travaux .titre{font-family:"Inter",sans-serif; font-size:26px; font-weight:500; letter-spacing:-.03em; text-transform:none; color:var(--text); margin:12px 0 8px}
.travaux .titre::before{content:none}
.travaux p{margin:0; color:var(--text-2); font-weight:300}
.travaux ul{margin:12px 0 0; padding:0; list-style:none; display:grid; gap:8px}
.travaux li{padding-left:18px; position:relative; color:var(--text-2); font-weight:300}
.travaux li::before{content:""; position:absolute; left:2px; top:.62em; width:7px; height:7px; border-right:1px solid var(--lavande); border-bottom:1px solid var(--lavande); transform:rotate(-45deg)}
.bareme.compact{margin-top:18px; padding:2px 16px; background:rgba(255,255,255,.02)}
.bareme.compact .b{padding:9px 0; font-size:14px}
.bareme.compact::after{content:none}

/* ── mobile ───────────────────────────────────────────────────── */
@media(max-width:700px){
  .page{padding:0 16px; padding-block:16px 48px}
  .top{flex-wrap:wrap; gap:10px 12px; margin-bottom:28px}
  .top .sep, .top .fil{display:none}
  .top nav{margin-left:auto; gap:12px}
  .top nav a{font-size:14px}
  .top .btn{width:100%; order:9}
  h1{font-size:30px}
  .sous{font-size:14.5px}
  .entete{margin-bottom:18px; gap:14px}
  .ville{width:100%}
  .ville select{flex:1}
  .cartes{gap:8px}
  .c{padding:14px 14px 12px}
  .c .n{font-size:30px; margin-top:8px}
  .c .p{font-size:12.5px; margin-top:8px}
  .onglets{margin-top:22px; margin-inline:-16px; padding-inline:16px}
  .row{gap:12px; padding:12px 12px}
  .date{width:36px}
  .date .j{font-size:19px}
  .corps{padding:12px 14px 14px}
  .bandeau{padding:16px}
  .bandeau .btn{width:100%}
}
@media(max-width:380px){ .top nav{gap:8px} .top nav a{font-size:13px} }

/* ── les membres et ma fiche (17/09) ─────────────────────────── */
.moi{display:flex; align-items:center; gap:10px; font-size:14px}
.moi img{width:30px; height:30px; border:1px solid var(--border-2)}
.moi a{color:var(--text); font-weight:500}
.lien{background:none; border:0; padding:0; color:var(--lavande); cursor:pointer; font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase}
.lien:hover{text-decoration:underline}
.lien.danger{color:var(--text-3)}
.lien.danger:hover{color:var(--orange)}
.entete .btn{flex:none}
.membres{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
@media(max-width:700px){ .membres{grid-template-columns:1fr} .entete > .btn{width:100%} .moi{width:100%; order:9} }
.membre{position:relative; background:var(--card); border:1px solid var(--border); padding:16px 18px 14px; animation:entre .45s var(--ease) both; min-width:0}
.membre::after{content:""; position:absolute; right:8px; bottom:8px; width:9px; height:9px; border-right:1px solid var(--coin); border-bottom:1px solid var(--coin); opacity:.6}
.membre header{display:flex; align-items:center; gap:12px; margin-bottom:10px}
.membre header img{width:44px; height:44px; flex:none; border:1px solid var(--border-2); background:var(--indigo-soft)}
.membre header b{display:block; font-size:16px; font-weight:500; letter-spacing:-.02em}
.membre header span{display:block; font-size:13px; color:var(--text-3)}
.membre header a:hover, .membre footer a:hover{color:var(--lavande)}
.membre .bio{font-size:14.5px; color:var(--text-2); font-weight:300; line-height:1.55; overflow-wrap:anywhere}
.membre .bio.coupe{max-height:240px; overflow:hidden; -webkit-mask-image:linear-gradient(#000 70%, transparent); mask-image:linear-gradient(#000 70%, transparent)}
.membre .bio > :first-child{margin-top:0}
.membre .bio h1,.membre .bio h2,.membre .bio h3{font-size:16px; font-weight:500; letter-spacing:-.02em; margin:14px 0 6px; color:var(--text)}
.membre .bio p{margin:0 0 8px}
.membre .bio img{max-width:100%; height:auto; border:1px solid var(--border)}
.membre .bio a{color:var(--lavande)}
.membre .bio code{font-family:"JetBrains Mono",monospace; font-size:12.5px; background:var(--chip,rgba(255,255,255,.06)); padding:1px 5px}
.membre .bio pre{overflow:auto; padding:10px 12px; background:rgba(255,255,255,.04); border:1px solid var(--border); font-size:12.5px}
.membre .bio ul,.membre .bio ol{padding-left:20px; margin:0 0 8px}
.membre .bio table{border-collapse:collapse; font-size:13px} .membre .bio td,.membre .bio th{border:1px solid var(--border); padding:4px 8px}
.membre footer{margin-top:10px; padding-top:10px; border-top:1px solid var(--border); font-size:13px; color:var(--text-3); display:block}
.membre > .lien{margin-top:8px}
.fiche{margin-top:6px}
.fiche-grille{display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start}
@media(max-width:760px){ .fiche-grille{grid-template-columns:1fr} }
.fiche-form{background:var(--card); border:1px solid var(--border); padding:18px; display:grid; gap:14px}
.champ{display:grid; gap:6px; min-width:0}
.radio{display:flex; align-items:center; gap:8px; font-size:14.5px; color:var(--text-2); cursor:pointer}
.radio input{accent-color:var(--indigo)}
.note{font-size:12.5px; color:var(--text-3)}
.note code{font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--lavande)}
textarea,input[type=text],input[type=url]{font:inherit; font-size:14.5px; color:var(--text); background:rgba(255,255,255,.03); border:1px solid var(--border-2); padding:9px 12px; width:100%; min-width:0}
textarea{resize:vertical; font-weight:300; line-height:1.5}
textarea:focus,input:focus{outline:none; border-color:var(--lavande); box-shadow:0 0 0 3px var(--indigo-soft)}
.ligne-champs{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px}
@media(max-width:520px){ .ligne-champs{grid-template-columns:1fr} }
.ligne-champs select{width:100%}
.actions{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.apercu{display:grid; gap:8px}
[hidden]{display:none!important}
@media(max-width:560px){ .row .pill{display:none} }

/* ── le chat des membres ─────────────────────────────────────── */
.chat{margin-top:6px}
.chat-boite{position:relative; background:var(--card); border:1px solid var(--border); display:flex; flex-direction:column; height:520px; max-height:70vh}
.chat-boite::after{content:""; position:absolute; right:8px; bottom:8px; width:9px; height:9px; border-right:1px solid var(--coin); border-bottom:1px solid var(--coin); opacity:.6; pointer-events:none}
.salons{display:flex; gap:2px; border-bottom:1px solid var(--border); overflow-x:auto; scrollbar-width:none; padding:0 6px; flex:none}
.salons::-webkit-scrollbar{display:none}
.salons .onglet{padding:11px 12px; font-size:11px}
.messages{flex:1; overflow-y:auto; padding:12px 16px; display:flex; flex-direction:column; gap:10px; scroll-behavior:smooth}
.messages .vide{margin:auto}
.msg{display:flex; gap:10px; align-items:flex-start; animation:entre .3s var(--ease) both}
.msg img{width:30px; height:30px; flex:none; border:1px solid var(--border-2); background:var(--indigo-soft)}
.msg > div{min-width:0; flex:1}
.msg header{display:flex; align-items:baseline; gap:8px; font-size:12.5px}
.msg header b{font-weight:500; color:var(--text)}
.msg header span{font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.08em; color:var(--text-4)}
.msg header .effacer{margin-left:auto; font-size:14px; letter-spacing:0; color:var(--text-4); opacity:0; transition:opacity .15s}
.msg:hover header .effacer{opacity:1}
.msg p{margin:2px 0 0; font-size:14.5px; font-weight:300; color:var(--text-2); overflow-wrap:anywhere; white-space:pre-wrap}
.msg.moi p{color:var(--text)}
.msg p a{color:var(--lavande)}
.saisie{display:flex; gap:8px; padding:10px; border-top:1px solid var(--border); flex:none}
.saisie input{flex:1; min-width:0}
.saisie .btn{padding:10px 16px}
@media(max-width:560px){ .saisie .btn span{display:none} .saisie .btn::after{content:"→"} .chat-boite{height:440px} }

.chat-boite:has(#chat-verrou){height:auto; min-height:0}
.chat-boite:has(#chat-verrou) .messages{padding:34px 16px}
.membre .bio img[width="16"],.membre .bio img[width="20"],.membre .bio img[height="16"]{display:inline; width:16px; height:16px; vertical-align:-2px; border:0; margin-right:2px}
.membre .bio br{content:""}

.membre .bio strong,.membre .bio b{font-weight:600; color:var(--text)}
.membre .bio em{color:var(--text-3)}
.membre .bio p.esp{height:6px; margin:0}
.membre .bio h4{font-size:11.5px; font-family:"JetBrains Mono",monospace; letter-spacing:.16em; text-transform:uppercase; color:var(--text-3); margin:18px 0 8px}
.membre .bio h4::before{content:"# "; color:var(--indigo)}

/* ── langue, vues liste/carte, la carte ─────────────────────── */
.lang{background:none; border:1px solid var(--border-2); color:var(--text-2); padding:4px 8px; font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.14em; cursor:pointer; margin-left:6px; transition:border-color .2s,color .2s}
.lang:hover{border-color:var(--lavande); color:var(--text)}
.barre-onglets{display:flex; align-items:flex-end; gap:10px; border-bottom:1px solid var(--border); margin:34px 0 0}
.barre-onglets .onglets{border-bottom:0; margin:0; flex:1; min-width:0}
.vues{display:flex; flex:none; margin-bottom:6px}
.vue{background:none; border:1px solid var(--border-2); color:var(--text-3); padding:6px 12px; font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; cursor:pointer; transition:background .2s,color .2s}
.vue + .vue{border-left:0}
.vue[aria-pressed=true]{background:var(--indigo-soft); color:var(--lavande); border-color:var(--lavande)}
.vue + .vue[aria-pressed=true]{border-left:1px solid var(--lavande)}
.carte-boite{position:relative; margin-top:14px; border:1px solid var(--border); background:var(--card)}
#carte{height:520px; background:#06070c}
.carte-note{position:absolute; left:10px; bottom:10px; z-index:500; padding:6px 10px; background:rgba(2,3,8,.8); border:1px solid var(--border-2); font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-2); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
.maplibregl-map{font-family:"Inter",sans-serif}
.maplibregl-ctrl-group{background:#0b0c14!important; border:1px solid var(--border-2); border-radius:0!important; box-shadow:none!important}
.maplibregl-ctrl-group button{border-radius:0!important} .maplibregl-ctrl-group button+button{border-top:1px solid var(--border)!important}
.maplibregl-ctrl-group button .maplibregl-ctrl-icon{filter:invert(1) opacity(.8)}
.maplibregl-ctrl-attrib{background:rgba(2,3,8,.7)!important; color:var(--text-4)!important; font-size:10px} .maplibregl-ctrl-attrib a{color:var(--text-3)!important}
.maplibregl-popup-content{background:#0b0c14; color:var(--text); border:1px solid var(--border-2); border-radius:0; box-shadow:0 12px 40px -10px var(--glow); padding:12px 14px; font-size:13.5px; line-height:1.45; display:grid; gap:4px}
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip{border-top-color:#0b0c14} .maplibregl-popup-anchor-top .maplibregl-popup-tip{border-bottom-color:#0b0c14}
.maplibregl-popup-anchor-left .maplibregl-popup-tip{border-right-color:#0b0c14} .maplibregl-popup-anchor-right .maplibregl-popup-tip{border-left-color:#0b0c14}
.maplibregl-popup-content b{font-weight:500; letter-spacing:-.01em}
.maplibregl-popup-content span{color:var(--text-3); font-size:12.5px}
.maplibregl-popup-content a{color:var(--lavande); font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; margin-top:4px}
.maplibregl-cooperative-gesture-screen{font-family:"Inter",sans-serif; font-size:13px}
@media(max-width:700px){ .barre-onglets{flex-wrap:wrap} .vues{width:100%; margin:6px 0 8px} .vue{flex:1} #carte{height:420px} .lang{margin-left:0} }
.barre-onglets{flex-wrap:wrap}
.vues{margin-left:auto}
.onglets{mask-image:linear-gradient(90deg,#000 92%,transparent); -webkit-mask-image:linear-gradient(90deg,#000 92%,transparent)}

/* ── release : logo, descriptions, localisation, pied de page ── */
.marque .logo{width:26px; height:26px; box-shadow:0 0 22px var(--glow); display:block}
.t3{display:block; font-size:13px; color:var(--text-3); font-weight:300; margin-top:4px; line-height:1.45; overflow:hidden; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; white-space:normal}
.corps .t3{-webkit-line-clamp:2; margin-top:6px}
.localiser{padding:9px 12px; font-size:10.5px}
.localiser svg{width:13px; height:13px}
footer{align-items:center}
footer > span{display:inline-flex; align-items:center; gap:6px}
footer > span img{opacity:.7}
footer nav{display:flex; gap:16px; flex-wrap:wrap}
@media(max-width:560px){ .row .t3{display:none} .ville .localiser span{display:none} }


/* ═══ DA v2 (17/09) : sombre plateforme H + bleu DeepMind + faisceau de lumière ═══ */
:root{
  --bg:#0e0e10; --card:#141416; --card-2:#19191c;
  --border:rgba(255,255,255,.08); --border-2:rgba(255,255,255,.16); --coin:rgba(255,255,255,.35);
  --text:#ececee; --text-2:#cfcfd4; --text-3:#9a9aa3; --text-4:#6c6c75;
  --hover:rgba(255,255,255,.035); --chip:#1f1f23;
  --lavande:#8fbaff; --indigo:#2f7cf6; --indigo-soft:rgba(47,124,246,.16); --glow:rgba(47,124,246,.38);
  --vert:#8ef0c0; --vert-soft:rgba(16,197,109,.14); --orange:#ffc18a; --orange-soft:rgba(247,104,8,.16);
  --r:10px;
}
body{font-family:"Inter",-apple-system,"Segoe UI",system-ui,sans-serif; letter-spacing:-.005em}
body::before{background:
    radial-gradient(60% 34% at 50% 0%, rgba(47,124,246,.20), transparent 70%),
    radial-gradient(30% 24% at 88% 22%, rgba(47,124,246,.07), transparent 75%),
    linear-gradient(rgba(0,0,0,0), rgba(14,14,16,.7) 60%, var(--bg))}
body::after{opacity:.07}
h1{font-weight:600; letter-spacing:-.035em}
h1 b{font-weight:600; color:var(--lavande)}
.sous{font-weight:400; color:var(--text-2)}
.marque{font-weight:600}
.marque .logo{border-radius:7px}

/* le faisceau : une ligne lumineuse fine, la lumière tombe en dessous */
.faisceau{position:relative; height:1px; margin:-22px 0 34px; background:linear-gradient(90deg, transparent 4%, rgba(190,215,255,.95) 50%, transparent 96%); box-shadow:0 0 18px 1px rgba(143,186,255,.55), 0 0 60px 6px rgba(47,124,246,.25)}
.faisceau::after{content:""; position:absolute; left:6%; right:6%; top:1px; height:260px; pointer-events:none;
  background:linear-gradient(180deg, rgba(47,124,246,.20), rgba(47,124,246,.06) 45%, transparent);
  clip-path:polygon(12% 0, 88% 0, 100% 100%, 0 100%); -webkit-clip-path:polygon(12% 0, 88% 0, 100% 100%, 0 100%)}
.faisceau::before{content:""; position:absolute; left:30%; right:30%; top:-2px; height:5px; background:rgba(200,222,255,.35); filter:blur(4px); border-radius:50%}

/* boutons : le principal est plein, bleu ; le calme reste filaire */
.btn{background:var(--indigo); color:#fff; border:1px solid rgba(255,255,255,.08); border-radius:8px; box-shadow:0 8px 26px -10px var(--glow); letter-spacing:.12em}
.btn:hover{background:#3d88ff; box-shadow:0 10px 32px -10px var(--glow)}
.btn.calme, .localiser{background:var(--card); color:var(--text); border:1px solid var(--border-2); box-shadow:none}
.btn.calme:hover, .localiser:hover{background:var(--card-2); border-color:var(--lavande); box-shadow:none}
.inscrire{border-radius:7px; border:1px solid var(--border-2); box-shadow:none; background:var(--card)}
.inscrire:hover{background:var(--indigo); color:#fff; border-color:var(--indigo); box-shadow:0 8px 22px -8px var(--glow)}
.vue{border-radius:0} .vue:first-child{border-radius:7px 0 0 7px} .vue:last-child{border-radius:0 7px 7px 0}
.lang{border-radius:6px}
select{border-radius:8px; background-color:var(--card)}
textarea,input[type=text],input[type=url]{border-radius:8px; background:var(--card)}

/* cartes, listes, bulles : coins arrondis, bords fins */
.c,.liste,.carte,.membre,.bareme,.bandeau,.travaux,.chat-boite,.fiche-form,.carte-boite,.apercu .membre{border-radius:var(--r)}
.c::after,.liste::after,.carte::after,.membre::after,.bareme::after,.bandeau::after,.travaux::after,.chat-boite::after{right:9px; bottom:9px; opacity:.45}
.c[aria-pressed=true]{box-shadow:0 0 0 1px rgba(143,186,255,.35), 0 16px 44px -20px var(--glow)}
.visuel{border-radius:var(--r) var(--r) 0 0}
.vig{border-radius:6px}
.pill{border-radius:999px; font-size:10px}
.pill.violet{background:var(--indigo-soft); color:var(--lavande)}
.avatar,.moi img,.membre header img,.msg img{border-radius:8px}
.row.premier .avatar,.marque .h{background:linear-gradient(135deg, var(--lavande), var(--indigo))}
.onglet::after{background:var(--lavande); box-shadow:0 0 12px var(--indigo)}
.date .j{font-weight:600}
.c .n{font-weight:600; letter-spacing:-.04em}
.elo{font-weight:600}
h2::before{color:var(--indigo)}
.travaux .etiq{color:var(--orange)}
.maplibregl-popup-content{border-radius:8px}
.leaflet-popup-content-wrapper{border-radius:8px}
@media(max-width:700px){ .faisceau{margin:-14px 0 26px} .faisceau::after{height:180px} }
.faisceau::after{filter:blur(16px); left:2%; right:2%; clip-path:polygon(16% 0, 84% 0, 100% 100%, 0 100%); -webkit-clip-path:polygon(16% 0, 84% 0, 100% 100%, 0 100%)}


/* ═══ DA v3 (17/09) : premium — grain vivant, lumière volumétrique, verre, dégradés ═══ */
:root{ --bg:#0b0c12; --card:rgba(20,22,30,.72); --card-2:rgba(26,28,38,.8); }
body{background:#0b0c12; background-image:linear-gradient(180deg,#12141e 0%,#0d0e16 40%,#090a0f 100%); background-attachment:fixed}
/* le halo bleu nuit en haut, discret, et une teinte qui descend */
body::before{background:
    radial-gradient(70% 38% at 50% -6%, rgba(47,124,246,.22), transparent 72%),
    radial-gradient(28% 22% at 90% 24%, rgba(47,124,246,.06), transparent 75%),
    radial-gradient(28% 22% at 8% 60%, rgba(47,124,246,.05), transparent 75%)}
/* le grain : fin, visible, et il vit (le motif se déplace par à-coups) */
body::after{opacity:.22; mix-blend-mode:soft-light; background-size:220px 220px; animation:grain 1.2s steps(6) infinite;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes grain{0%{background-position:0 0} 20%{background-position:-60px 40px} 40%{background-position:30px -70px} 60%{background-position:-40px -30px} 80%{background-position:70px 20px} 100%{background-position:0 0}}

/* la lumière : un fil incandescent, un cône volumétrique flouté, et ça respire */
.faisceau{height:1px; margin:-22px 0 38px; background:linear-gradient(90deg, transparent 2%, rgba(170,200,255,.55) 20%, #eaf2ff 50%, rgba(170,200,255,.55) 80%, transparent 98%);
  box-shadow:0 0 6px 0 rgba(234,242,255,.9), 0 0 22px 2px rgba(143,186,255,.55), 0 0 70px 8px rgba(47,124,246,.28); animation:respire 6s ease-in-out infinite}
.faisceau::before{content:""; position:absolute; left:38%; right:38%; top:-3px; height:7px; background:rgba(234,242,255,.55); filter:blur(5px); border-radius:50%}
.faisceau::after{content:""; position:absolute; left:-6%; right:-6%; top:0; height:340px; pointer-events:none; clip-path:none; -webkit-clip-path:none;
  background:conic-gradient(from 180deg at 50% 0, transparent 38%, rgba(60,130,255,.30) 46%, rgba(120,170,255,.36) 50%, rgba(60,130,255,.30) 54%, transparent 62%);
  filter:blur(28px); -webkit-mask-image:linear-gradient(180deg, #000 0, rgba(0,0,0,.6) 40%, transparent 95%); mask-image:linear-gradient(180deg, #000 0, rgba(0,0,0,.6) 40%, transparent 95%); opacity:.9}
@keyframes respire{0%,100%{opacity:1} 50%{opacity:.78}}
h1{text-shadow:0 0 40px rgba(143,186,255,.18)}
h1 b{background:linear-gradient(180deg,#eaf2ff 0%,#8fbaff 55%,#5c9cff 100%); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:none; filter:drop-shadow(0 0 18px rgba(80,140,255,.35))}

/* le verre : cartes translucides sur le grain, liseré de lumière en haut */
.c,.liste,.carte,.membre,.bareme,.bandeau,.travaux,.chat-boite,.fiche-form,.carte-boite{
  background:var(--card); -webkit-backdrop-filter:blur(14px) saturate(120%); backdrop-filter:blur(14px) saturate(120%);
  border:1px solid rgba(255,255,255,.08); box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 20px 50px -30px rgba(0,0,0,.8)}
.c:hover,.carte:hover,.membre:hover{border-color:rgba(255,255,255,.14); box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 24px 60px -28px rgba(47,124,246,.35)}
.c[aria-pressed=true]{border-color:rgba(143,186,255,.45); box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 0 0 1px rgba(143,186,255,.18), 0 20px 50px -24px var(--glow)}
.c .n{background:linear-gradient(180deg,#fff,#c9d8f5); -webkit-background-clip:text; background-clip:text; color:transparent}
.row{border-top:1px solid rgba(255,255,255,.06)}
.row:hover{background:rgba(255,255,255,.04)}

/* les boutons : dégradé, reflet, ombre portée bleue */
.btn{background:linear-gradient(180deg,#4a8fff 0%,#2f7cf6 60%,#2a6fe0 100%); border:1px solid rgba(255,255,255,.14); box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 10px 30px -10px rgba(47,124,246,.7); position:relative; overflow:hidden}
.btn::after{content:""; position:absolute; inset:0; background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%); transform:translateX(-120%); transition:transform .6s var(--ease)}
.btn:hover::after{transform:translateX(120%)}
.btn:hover{background:linear-gradient(180deg,#5a9aff,#3d88ff 60%,#2f7cf6); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 14px 36px -10px rgba(47,124,246,.8)}
.btn.calme,.localiser{background:rgba(255,255,255,.04); box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.btn.calme::after,.localiser::after{display:none}
.btn.calme:hover,.localiser:hover{background:rgba(255,255,255,.07)}
.inscrire{background:rgba(255,255,255,.04)}

/* la marque */
.marque .logo{border-radius:9px; box-shadow:0 0 24px rgba(47,124,246,.45), 0 0 0 1px rgba(255,255,255,.04)}
.marque{letter-spacing:-.025em}

/* onglets, sélecteur, pilules */
.onglet[aria-selected=true]{text-shadow:0 0 14px rgba(143,186,255,.5)}
select{background-color:rgba(255,255,255,.04)}
.pill{background:rgba(255,255,255,.04)}
.pill.vert{background:rgba(16,197,109,.12)} .pill.orange{background:rgba(247,104,8,.14)} .pill.violet{background:rgba(47,124,246,.18)}

/* le pied de page */
footer{border-top:1px solid rgba(255,255,255,.07)}
@media(prefers-reduced-motion:reduce){ body::after{animation:none} .faisceau{animation:none} }
/* le grain, plus présent : speckles clairs en "screen" sur le bleu nuit, motif fin, toujours animé */
body::after{opacity:.16; mix-blend-mode:screen; background-size:180px 180px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 .25 .6 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* poussière à la place du grain */
body::after{display:none}
#poussiere{position:fixed; inset:0; z-index:-1; pointer-events:none}

/* ═══ mobile simplifié (17/09) ═══ */
@media(max-width:700px){
  .page{padding:0 14px; padding-block:12px 40px}
  /* l'en-tête tient sur une ligne : marque, pages, langue, et le groupe X en icône */
  .top{flex-wrap:nowrap; align-items:center; gap:8px; margin-bottom:22px}
  .marque{font-size:16px; gap:8px; flex:none} .marque .logo{width:24px; height:24px}
  .top nav{margin-left:auto; gap:10px} .top nav a{font-size:13px; padding:4px 0}
  .lang{padding:3px 6px; font-size:10px; margin-left:0}
  .top .btn{width:40px; height:40px; padding:0; order:0; justify-content:center; flex:none; border-radius:10px}
  .top .btn span{display:none} .top .btn svg{width:15px; height:15px}
  .moi{width:auto; order:0; gap:8px} .moi a{display:none} .moi img{width:34px; height:34px} .moi .lien{font-size:9.5px}
  .faisceau{margin:-10px 0 22px} .faisceau::after{height:160px}
  h1{font-size:27px; line-height:1.1}
  .sous{font-size:14px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-top:8px}
  .entete{margin-bottom:14px; gap:12px}
  /* la ville et « me localiser » sur une ligne, sans le texte d'aide */
  .ville{flex-wrap:nowrap; gap:8px; width:100%}
  .ville select{flex:1; min-width:0; padding:11px 34px 11px 12px}
  .localiser{width:46px; height:46px; padding:0; justify-content:center; flex:none} .localiser span{display:none} .localiser svg{width:16px; height:16px}
  .ville .autre{display:none}
  /* trois compteurs compacts sur une ligne */
  .cartes{grid-template-columns:repeat(3,1fr); gap:8px}
  .cartes .c:last-child{grid-column:auto}
  .c{padding:12px 10px 11px; border-radius:10px}
  .c .l{font-size:8.5px; letter-spacing:.1em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .c .n{font-size:24px; margin-top:6px}
  .c .p, .c::after{display:none}
  /* onglets qui défilent, liste/carte compact à droite */
  .barre-onglets{flex-wrap:nowrap; align-items:center; margin-top:22px; gap:6px}
  .barre-onglets .onglets{margin:0; padding:0}
  .onglet{padding:10px 9px; font-size:10.5px}
  .vues{width:auto; margin:0 0 0 auto; flex:none} .vue{padding:7px 9px; font-size:10px; flex:none}
  /* les cartes et lignes, plus serrées */
  .grille{gap:10px; margin-top:12px}
  .corps{padding:12px 13px 13px; gap:4px} .corps .t1{font-size:15px} .corps .t3{display:none}
  .corps .bas{padding-top:10px}
  .row{gap:10px; padding:11px 10px}
  .date{width:34px} .date .j{font-size:18px} .date .m{font-size:9px}
  .vig{width:56px; height:40px}
  .t1{font-size:14.5px} .t2{font-size:12.5px}
  .inscrire{padding:8px 9px}
  /* les bandeaux et le pied de page en colonne */
  .bandeau{flex-direction:column; align-items:stretch; gap:10px; padding:14px; margin-top:24px}
  .bandeau b{font-size:15px} .bandeau span{font-size:13.5px; min-width:0}
  .bandeau .btn{width:100%}
  footer{flex-direction:column; align-items:flex-start; gap:10px; margin-top:32px}
  footer nav{gap:12px}
  /* le club */
  .entete > .btn{width:100%}
  .chat-boite{height:400px} .messages{padding:10px 12px}
  .salons .onglet{padding:10px 9px}
  .fiche-form{padding:14px}
  #carte{height:380px}
}
@media(max-width:380px){ .top nav{gap:7px} .top nav a{font-size:12px} .c .n{font-size:21px} }

/* ═══ fond spatial granulaire (17/09) ═══
   des nappes de lumière bleue floues qui dérivent lentement (la nébuleuse), un grain fin qui
   n'apparaît que dans la lumière (dégradé granuleux), et la poussière d'étoiles par-dessus. */
#nebuleuse{position:fixed; inset:0; z-index:-2; overflow:hidden; pointer-events:none; background:#07080d}
#nebuleuse .blob{position:absolute; border-radius:50%; filter:blur(70px); will-change:transform; opacity:.9; mix-blend-mode:screen}
#nebuleuse .b1{width:70vw; height:70vw; left:-10vw; top:-30vw; background:radial-gradient(circle, rgba(47,124,246,.55) 0%, rgba(47,124,246,.18) 40%, transparent 68%); animation:derive1 46s ease-in-out infinite alternate}
#nebuleuse .b2{width:55vw; height:55vw; right:-15vw; top:5vh; background:radial-gradient(circle, rgba(74,80,230,.42) 0%, rgba(74,80,230,.14) 40%, transparent 68%); animation:derive2 58s ease-in-out infinite alternate}
#nebuleuse .b3{width:60vw; height:60vw; left:20vw; bottom:-35vw; background:radial-gradient(circle, rgba(42,150,255,.28) 0%, rgba(42,150,255,.1) 40%, transparent 68%); animation:derive3 64s ease-in-out infinite alternate}
#nebuleuse .b4{width:26vw; height:26vw; left:55vw; top:18vh; background:radial-gradient(circle, rgba(200,225,255,.22) 0%, transparent 60%); filter:blur(40px); animation:derive2 38s ease-in-out infinite alternate-reverse}
@keyframes derive1{from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(14vw,10vh,0) scale(1.15)}}
@keyframes derive2{from{transform:translate3d(0,0,0) scale(1.05)} to{transform:translate3d(-12vw,14vh,0) scale(.9)}}
@keyframes derive3{from{transform:translate3d(0,0,0) scale(.95)} to{transform:translate3d(-10vw,-12vh,0) scale(1.12)}}
/* le grain, en overlay : visible dans les nappes, invisible dans le noir */
#nebuleuse::after{content:""; position:absolute; inset:0; mix-blend-mode:overlay; opacity:.55; background-size:200px 200px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.05' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 .15 .5 .85 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* un voile fin de grain clair partout, très faible, pour lier le tout */
#nebuleuse::before{content:""; position:absolute; inset:0; mix-blend-mode:screen; opacity:.07; background-size:180px 180px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
body{background:#07080d; background-image:none}
body::before{background:radial-gradient(70% 36% at 50% -8%, rgba(47,124,246,.16), transparent 72%)}
#poussiere{z-index:-1}
@media(max-width:700px){ #nebuleuse .blob{filter:blur(44px)} #nebuleuse .b1{width:120vw; height:120vw; left:-30vw; top:-60vw} #nebuleuse .b2{width:90vw; height:90vw} #nebuleuse .b3{width:100vw; height:100vw; left:0; bottom:-60vw} #nebuleuse .b4{display:none} }
@media(prefers-reduced-motion:reduce){ #nebuleuse .blob{animation:none} }
#nebuleuse::after{opacity:.72}
#nebuleuse .b1{background:radial-gradient(circle, rgba(47,124,246,.66) 0%, rgba(47,124,246,.22) 40%, transparent 68%)}

/* ═══ plus sombre, et la barre lumineuse retravaillée (17/09) ═══ */
:root{ --card:rgba(15,17,25,.74); --card-2:rgba(20,23,33,.82); }
body{background:#050609}
#nebuleuse{background:#050609}
#nebuleuse .b1{background:radial-gradient(circle, rgba(47,124,246,.42) 0%, rgba(47,124,246,.14) 40%, transparent 68%)}
#nebuleuse .b2{background:radial-gradient(circle, rgba(74,80,230,.28) 0%, rgba(74,80,230,.09) 40%, transparent 68%)}
#nebuleuse .b3{background:radial-gradient(circle, rgba(42,150,255,.18) 0%, rgba(42,150,255,.06) 40%, transparent 68%)}
#nebuleuse .b4{background:radial-gradient(circle, rgba(200,225,255,.14) 0%, transparent 60%)}
#nebuleuse::before{opacity:.05}
body::before{background:radial-gradient(70% 36% at 50% -8%, rgba(47,124,246,.10), transparent 72%)}

/* la barre : un cœur incandescent d'un pixel, un point chaud, trois couches de halo, et une nappe
   de lumière projetée en dessous comme un projecteur, avec de fins rayons qui glissent */
.faisceau{height:1px; margin:-22px 0 44px; opacity:1; animation:respire 7s ease-in-out infinite;
  background:linear-gradient(90deg, transparent 0%, rgba(150,190,255,.28) 14%, rgba(200,222,255,.85) 38%, #f2f7ff 50%, rgba(200,222,255,.85) 62%, rgba(150,190,255,.28) 86%, transparent 100%);
  box-shadow:0 0 3px rgba(240,246,255,.95), 0 0 12px 1px rgba(170,205,255,.75), 0 0 40px 3px rgba(60,130,255,.42), 0 0 110px 14px rgba(47,124,246,.18)}
.faisceau::before{left:42%; right:42%; top:-2px; height:5px; background:#ffffff; filter:blur(3px); opacity:.9; border-radius:50%}
.faisceau::after{left:2%; right:2%; top:1px; height:440px; clip-path:none; -webkit-clip-path:none; filter:blur(14px); opacity:1;
  background:radial-gradient(58% 100% at 50% 0%, rgba(100,160,255,.30) 0%, rgba(70,130,245,.14) 32%, rgba(45,95,210,.05) 58%, transparent 78%);
  -webkit-mask-image:linear-gradient(180deg, #000 0, rgba(0,0,0,.75) 35%, transparent 100%); mask-image:linear-gradient(180deg, #000 0, rgba(0,0,0,.75) 35%, transparent 100%)}
.faisceau i{position:absolute; left:8%; right:8%; top:2px; height:320px; pointer-events:none; opacity:.55;
  background:repeating-linear-gradient(90deg, transparent 0 22px, rgba(160,195,255,.07) 22px 24px, transparent 24px 46px);
  -webkit-mask-image:radial-gradient(60% 100% at 50% 0%, #000 0%, rgba(0,0,0,.5) 45%, transparent 80%); mask-image:radial-gradient(60% 100% at 50% 0%, #000 0%, rgba(0,0,0,.5) 45%, transparent 80%);
  animation:rayons 24s linear infinite}
@keyframes rayons{from{background-position:0 0} to{background-position:46px 0}}
@keyframes respire{0%,100%{opacity:1} 50%{opacity:.82}}
@media(max-width:700px){ .faisceau{margin:-10px 0 26px} .faisceau::after{height:260px} .faisceau i{height:200px} }
@media(prefers-reduced-motion:reduce){ .faisceau i{animation:none} }

.visiteurs b{color:var(--lavande); font-weight:600}

/* liens vers toutes les villes (référencement : maillage interne crawlable) */
.villes-liens{margin-top:40px; display:flex; flex-wrap:wrap; gap:6px 14px; align-items:baseline; font-size:13px}
.villes-liens .etiq{width:100%; margin-bottom:4px}
.villes-liens a{color:var(--text-3); transition:color .2s var(--ease)}
.villes-liens a:hover{color:var(--lavande)}

/* faq (référencement / moteurs ia) : sobre, repliée */
.faq{margin-top:40px}
.faq h2::before{content:"# "}
.faq details{background:var(--card); border:1px solid var(--border); border-radius:var(--r,10px); margin-top:8px; overflow:hidden}
.faq summary{cursor:pointer; padding:13px 16px; font-size:14.5px; font-weight:500; color:var(--text); list-style:none; display:flex; justify-content:space-between; gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--lavande); font-weight:400}
.faq details[open] summary::after{content:"−"}
.faq details p{margin:0; padding:0 16px 14px; color:var(--text-2); font-size:14px; font-weight:300; line-height:1.55}

/* ── description dépliable (17/09) : un appui déroule le petit texte ───────────── */
/* le titre est le lien et s'étend sur toute la carte / la ligne ; la description passe au-dessus */
.carte, .row{position:relative}
.couvre{color:inherit}
.couvre::before{content:""; position:absolute; inset:0; z-index:2}
.couvre:focus-visible{outline:none}
.couvre:focus-visible::before{outline:1px solid var(--lavande); outline-offset:-1px; border-radius:inherit}
.row .t1.couvre{display:block}
.plier{
  position:relative; z-index:3; display:flex; align-items:flex-start; gap:10px; width:100%; margin:6px 0 0; padding:0;
  background:none; border:0; font:inherit; text-align:left; color:var(--text-3); cursor:default; pointer-events:none;
  -webkit-tap-highlight-color:transparent;
}
.plier .d{flex:1; min-width:0; font-size:13px; font-weight:300; line-height:1.5; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; transition:color .2s var(--ease)}
.row .plier{margin-top:4px}
.row .plier .d{-webkit-line-clamp:1}
.plier i{display:none; flex:none; width:22px; height:22px; margin-top:-1px; border:1px solid var(--border-2); border-radius:6px; position:relative; transition:transform .25s var(--ease), border-color .2s var(--ease), background .2s var(--ease)}
.plier i::before{content:""; position:absolute; left:50%; top:45%; width:6px; height:6px; border-right:1.5px solid var(--lavande); border-bottom:1.5px solid var(--lavande); transform:translate(-50%,-50%) rotate(45deg)}
.plier.long{pointer-events:auto; cursor:pointer}
.plier.long i{display:block}
.plier.long:hover .d{color:var(--text-2)}
.plier.long:hover i{border-color:var(--lavande); background:rgba(47,124,246,.12)}
.plier.long:focus-visible{outline:1px solid var(--lavande); outline-offset:3px; border-radius:4px}
.plier[aria-expanded="true"] .d{-webkit-line-clamp:unset; display:block; color:var(--text-2)}
.plier[aria-expanded="true"] i{transform:rotate(180deg); border-color:var(--lavande)}
.plier[aria-expanded="true"]{pointer-events:auto; cursor:pointer}
/* mobile : la description revient, repliée sur une ligne pour rester simple */
@media(max-width:700px){
  .corps .plier, .row .plier{display:flex}
  .corps .plier .d{-webkit-line-clamp:1}
  .plier .d{font-size:12.5px}
  .plier i{width:20px; height:20px}
}