:root{
  --bg:#060606;
  --ink:#f2f2f2;
  --ink-45:rgba(242,242,242,.45);
  --ink-14:rgba(242,242,242,.13);
  --line:rgba(255,255,255,.10);
  --acc:#a9c2e8;
  --acc-glow:rgba(169,194,232,.45);
  --chrome:linear-gradient(175deg,#ffffff 0%,#c8c8c8 18%,#6f6f6f 38%,#f4f4f4 52%,#8a8a8a 68%,#ffffff 84%,#5a5a5a 100%);
  --silver:linear-gradient(175deg,#fff,#cfcfcf 55%,#9d9d9d);
  --ez:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{background:var(--bg);color:var(--ink);overflow-x:hidden}
/* Une fiche se lit de haut en bas, longuement. Sur le noir du site (#060606)
   le texte gris du bas devenait illisible : elle a son propre fond, plus clair. */
html:has(body[data-page="fiche"]),
body[data-page="fiche"]{background:#0e0e11}
body{font-family:'Space Grotesk',sans-serif;-webkit-font-smoothing:antialiased}
::selection{background:var(--acc);color:#060606}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{background:none;border:none;color:inherit;font:inherit;cursor:pointer}
input,textarea{font:inherit;color:inherit;outline:none}

/* ---------- fond ---------- */
.bg{position:fixed;inset:-5%;z-index:0;pointer-events:none;
  background:url("bg-desktop.webp") center/cover no-repeat;opacity:.6;will-change:transform}
@media (orientation:portrait){.bg{background-image:url("bg-mobile.webp")}}
.bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 90% 80% at 50% 40%,transparent 40%,rgba(6,6,6,.93) 100%)}
.noise{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:240px 240px}

/* ---------- header ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  padding:12px clamp(16px,3vw,44px);border-bottom:1px solid var(--line);
  background:rgba(6,6,6,.6);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
header .h-logo img{height:42px;width:auto;filter:drop-shadow(0 2px 10px rgba(255,255,255,.16))}
.h-cta{display:inline-flex;align-items:center;padding:10px 18px;border-radius:999px;
  background:var(--silver);color:#060606;font-family:'Archivo',sans-serif;font-weight:600;font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;transition:transform .3s var(--ez);
  box-shadow:0 6px 26px rgba(255,255,255,.10)}
.h-cta:active{transform:scale(.96)}
@media(max-width:640px){header .h-logo img{height:36px}.h-cta{font-size:9px;padding:9px 14px}}

/* ---------- structure ---------- */
.wrap{position:relative;z-index:2;max-width:1180px;margin:0 auto;width:100%;
  padding:0 clamp(18px,4vw,60px)}
section{position:relative;z-index:2}
.eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:16px;
  font-family:'Archivo',sans-serif;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-45)}
.eyebrow .sq{width:9px;height:9px;background:linear-gradient(135deg,#6f87b5,#e6eefb);box-shadow:0 0 10px var(--acc-glow)}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--acc);
  box-shadow:0 0 10px var(--acc-glow);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.h-big{font-family:'Bebas Neue',sans-serif;font-weight:400;text-transform:uppercase;
  line-height:.92;letter-spacing:.01em}
.h-big .mot{display:inline-block;white-space:nowrap}
.h-big i{font-style:normal;display:inline-block;background:var(--chrome);background-size:100% 300%;
  -webkit-background-clip:text;background-clip:text;color:transparent;will-change:transform}
.h-big em{font-style:normal;color:var(--acc)}
.rv{opacity:0}

/* ---------- hero ---------- */
.hero{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(118px,15vh,150px) 0 clamp(20px,2.6vw,32px)}
.hero .h-big{font-size:clamp(42px,8.2vw,116px);max-width:15ch}
.hero .sub{margin-top:18px;color:var(--ink-45);font-size:clamp(14px,1.3vw,16px);line-height:1.75;max-width:600px}
.hero .sub b{color:var(--ink);font-weight:500}
.hero .cta-row{display:flex;align-items:center;gap:16px;margin-top:28px;flex-wrap:wrap}
.btn-main{display:inline-flex;align-items:center;padding:16px 28px;border-radius:999px;
  background:var(--silver);color:#060606;font-family:'Archivo',sans-serif;font-weight:600;font-size:12px;
  letter-spacing:.2em;text-transform:uppercase;transition:transform .3s var(--ez);
  box-shadow:0 10px 40px rgba(255,255,255,.12)}
.btn-main:active{transform:scale(.97)}
.btn-ghost{display:inline-flex;align-items:center;padding:15px 24px;border-radius:999px;
  border:1px solid rgba(255,255,255,.22);color:var(--ink);
  font-family:'Archivo',sans-serif;font-weight:600;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  transition:all .3s var(--ez)}
.btn-ghost:hover{border-color:var(--acc);color:var(--acc)}
.hero .meta{margin-top:clamp(28px,4.4vh,48px);display:flex;gap:clamp(20px,4vw,54px);flex-wrap:wrap}
.hero .meta .m .k{font-family:'Archivo',sans-serif;font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-45);margin-bottom:5px}
.hero .meta .m .v{font-family:'Bebas Neue',sans-serif;font-size:clamp(20px,2.2vw,28px);letter-spacing:.06em}
.hero .meta .m .v i{font-style:normal;color:var(--acc)}

/* ---------- filtres ---------- */
.tools{position:sticky;top:66px;z-index:40;padding:14px 0;
  background:rgba(6,6,6,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tools-in{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.search{flex:1 1 220px;min-width:0;position:relative}
.search input{width:100%;background:rgba(6,6,6,.7);border:1px solid rgba(255,255,255,.13);
  padding:12px 14px 12px 40px;font-size:14.5px;border-radius:3px;transition:border-color .3s var(--ez)}
.search input:focus{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc-glow)}
.search input::placeholder{color:var(--ink-45)}
.search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);opacity:.45}
.tbtn{display:inline-flex;align-items:center;padding:12px 18px;border-radius:999px;
  border:1px solid rgba(255,255,255,.22);font-family:'Archivo',sans-serif;font-weight:600;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-45);
  transition:all .3s var(--ez);white-space:nowrap}
.tbtn:hover{border-color:var(--acc);color:var(--acc)}
.chips{display:flex;gap:7px;flex-wrap:wrap;padding:14px 0 0}
.chips.prat{padding-top:9px}
.chips.prat .chip{border-style:dashed}
.chips.prat .chip[aria-pressed="true"]{border-style:solid;border-color:var(--acc);
  color:var(--acc);background:rgba(169,194,232,.08)}
.chip{font-family:'Archivo',sans-serif;font-size:10px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;background:rgba(6,6,6,.5);border:1px solid var(--ink-14);
  border-radius:999px;color:var(--ink-45);padding:8px 15px;transition:all .3s var(--ez)}
.chip:hover{color:var(--ink);border-color:rgba(255,255,255,.3)}
.chip[aria-pressed="true"]{border-color:var(--acc);color:var(--acc);background:rgba(169,194,232,.08)}
.chip .n{opacity:.5;margin-left:6px}
/* une puce qui porte son picto : sert aux deux volets d'Organisateurs & lieux,
   où « Collectifs » et « Lieux » se lisent plus vite avec une forme devant */
.chip-p{display:inline-flex;align-items:center;gap:8px}
.chip-p svg{width:14px;height:14px;opacity:.75}
.chip-p[aria-pressed="true"] svg{opacity:1}
.countline{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:18px 2px 22px;font-family:'Archivo',sans-serif;font-size:9.5px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink-45)}
.countline b{color:var(--acc);font-weight:600}

/* ---------- grille ---------- */
.pool{padding:0 0 clamp(30px,4vw,54px)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:12px}
.card{position:relative;display:flex;flex-direction:column;gap:12px;text-align:left;width:100%;
  padding:clamp(18px,2vw,24px);background:rgba(6,6,6,.55);border:1px solid var(--line);
  border-radius:6px;box-shadow:inset 0 1px 1px rgba(255,255,255,.05);
  transition:border-color .3s var(--ez),transform .3s var(--ez)}
.card:hover{border-color:rgba(169,194,232,.4);transform:translateY(-3px)}
.card i.c{position:absolute;width:15px;height:15px;opacity:.45;pointer-events:none;
  border-top:1px solid var(--acc);border-left:1px solid var(--acc)}
.card i.c1{top:7px;left:7px}
.card i.c2{bottom:7px;right:7px;transform:rotate(180deg)}
.card-top{display:flex;gap:13px;align-items:center}
.av{width:56px;height:56px;border-radius:50%;flex:none;object-fit:cover;
  border:1px solid rgba(255,255,255,.2);filter:grayscale(1);transition:filter .35s var(--ez)}
.card:hover .av{filter:grayscale(0)}
.who{min-width:0;flex:1}
.nom{font-family:'Archivo Black',sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(12.5px,1.15vw,15px);letter-spacing:.02em;line-height:1.25;
  display:flex;align-items:center;gap:6px}
.nom span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.verif{width:12px;height:12px;flex:none}
.handle{font-size:11.5px;color:var(--ink-45);margin-top:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tags{display:flex;gap:5px;flex-wrap:wrap}
.tag{font-family:'Archivo',sans-serif;font-size:9px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;border:1px solid var(--ink-14);border-radius:3px;
  color:var(--ink-45);padding:4px 8px}
.foot{margin-top:auto;padding-top:2px;font-family:'Bebas Neue',sans-serif;font-size:15px;
  letter-spacing:.1em;color:var(--ink-45);display:flex;gap:14px;flex-wrap:wrap}
.foot i{font-style:normal;color:var(--acc)}
.empty{grid-column:1/-1;text-align:center;color:var(--ink-45);padding:60px 0;font-size:14px}

/* ---------- fiche ---------- */
dialog{border:none;padding:0;background:transparent;max-width:min(560px,92vw);width:100%}
dialog::backdrop{background:rgba(4,4,4,.86);backdrop-filter:blur(7px)}
.sheet{position:relative;background:rgba(9,9,9,.97);border:1px solid var(--line);border-radius:8px;
  padding:clamp(24px,3vw,34px);box-shadow:inset 0 1px 1px rgba(255,255,255,.05)}
.close{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:999px;
  border:1px solid var(--ink-14);color:var(--ink-45);font-size:15px;line-height:1}
.close:hover{color:var(--ink);border-color:var(--acc)}
.sheet .av{width:78px;height:78px;filter:none}
.sheet .nom{font-size:18px}
.sheet .bio{margin-top:18px;font-size:14px;line-height:1.75;color:var(--ink-45)}
.sheet h3{font-family:'Archivo',sans-serif;font-size:9.5px;font-weight:600;letter-spacing:.26em;
  text-transform:uppercase;color:var(--acc);margin:26px 0 10px}
.rows{display:flex;flex-direction:column;gap:6px}
.row{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:12px 15px;
  background:rgba(6,6,6,.6);border:1px solid var(--ink-14);border-radius:3px;font-size:13.5px;
  overflow-wrap:anywhere}
.row .k{font-family:'Archivo',sans-serif;font-size:9px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-45);flex:none}
.row .v{text-align:right}
.row .v.off{color:rgba(242,242,242,.25)}
.row a{color:var(--acc)}

/* ---------- formulaire ---------- */
.apply{padding:clamp(26px,3.2vw,44px) 0 clamp(34px,4vw,56px)}
.apply .h-big{font-size:clamp(44px,7.5vw,96px)}
.apply .lead{margin:14px 0 26px;color:var(--ink-45);font-size:14.5px;line-height:1.75;max-width:600px}
form.f{max-width:760px;background:rgba(4,4,4,.72);border:1px solid var(--line);border-radius:8px;
  padding:clamp(20px,3vw,34px);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.05)}
@media(max-width:640px){form.f{background:rgba(4,4,4,.82);backdrop-filter:none;-webkit-backdrop-filter:none;padding:16px 14px}}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 14px}
@media(max-width:700px){.f-grid{grid-template-columns:1fr}}
.fld{display:flex;flex-direction:column}
.fld.full{grid-column:1/-1}
.fld label{font-family:'Archivo',sans-serif;font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-45);margin-bottom:7px}
.fld label b{color:var(--acc);font-weight:600}
.fld label small{color:rgba(242,242,242,.3);letter-spacing:.14em;margin-left:6px}
.fld input,.fld textarea{width:100%;background:rgba(6,6,6,.7);color:var(--ink);
  border:1px solid rgba(255,255,255,.13);padding:14px 15px;font-size:14.5px;border-radius:3px;
  transition:border-color .3s var(--ez)}
.fld input:focus,.fld textarea:focus{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc-glow)}
.fld textarea{min-height:110px;resize:vertical;line-height:1.6}
.consent{grid-column:1/-1;display:flex;gap:11px;align-items:flex-start;
  font-size:13px;line-height:1.65;color:var(--ink-45)}
.consent input{margin-top:3px;accent-color:var(--acc);width:16px;height:16px;flex:none}
.send-row{margin-top:26px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.send-row .m-note{font-size:11.5px;color:var(--ink-45);line-height:1.6}
.btn-send{display:inline-flex;align-items:center;padding:17px 30px;border-radius:999px;
  background:var(--silver);color:#060606;font-family:'Archivo',sans-serif;font-weight:600;font-size:12px;
  letter-spacing:.2em;text-transform:uppercase;transition:transform .3s var(--ez);
  box-shadow:0 10px 40px rgba(255,255,255,.12)}
.btn-send:active{transform:scale(.97)}
.btn-send[disabled]{opacity:.55;cursor:wait}
.f-error{display:none;margin-top:14px;font-size:13px;color:#ff8a8a}
.f-ok{display:none;max-width:640px;text-align:center;padding:40px 20px;
  border:1px solid rgba(169,194,232,.35);border-radius:8px;background:rgba(169,194,232,.05)}
.f-ok .t{font-family:'Bebas Neue',sans-serif;font-size:34px;text-transform:uppercase;
  background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent}
.f-ok p{margin-top:8px;font-size:14px;color:var(--ink-45);line-height:1.75}


/* ---------- titre en blanc ---------- */
/* pas de halo derrière un titre : il est déjà blanc sur du noir, l'auréole
   n'ajoutait que du flou sur les bords des lettres */
.h-big.blanc i{background:none;-webkit-background-clip:initial;background-clip:initial;
  color:#fff}

/* ---------- couleur par style ---------- */
.tag{border-color:color-mix(in srgb,var(--sc,#8a94a3) 34%,transparent);
  color:var(--sc,#8a94a3);background:color-mix(in srgb,var(--sc,#8a94a3) 7%,transparent)}
.chip[aria-pressed="true"]{border-color:var(--sc,var(--acc));color:var(--sc,var(--acc));
  background:color-mix(in srgb,var(--sc,var(--acc)) 9%,transparent)}
.chip .pt{width:6px;height:6px;border-radius:50%;background:var(--sc,var(--acc));
  display:inline-block;margin-right:8px;vertical-align:middle;opacity:.85}

/* ---------- carte : invitation au clic ---------- */
.card{cursor:pointer}
.card::after{content:"";position:absolute;inset:0;border-radius:6px;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 0%,color-mix(in srgb,var(--sc,var(--acc)) 13%,transparent),transparent 62%);
  opacity:0;transition:opacity .35s var(--ez)}
.card:hover::after{opacity:1}
.card:hover{border-color:color-mix(in srgb,var(--sc,var(--acc)) 46%,transparent)}
.go{margin-top:12px;padding-top:13px;border-top:1px solid var(--ink-14);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-family:'Archivo',sans-serif;font-size:9px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-45);transition:color .3s var(--ez)}
.card:hover .go{color:var(--sc,var(--acc))}
.go .arr{width:26px;height:26px;border-radius:50%;border:1px solid var(--ink-14);flex:none;
  display:flex;align-items:center;justify-content:center;transition:all .35s var(--ez)}
.card:hover .go .arr{border-color:var(--sc,var(--acc));transform:translateX(4px);
  background:color-mix(in srgb,var(--sc,var(--acc)) 14%,transparent)}
.go .arr svg{width:12px;height:12px}

/* ---------- page profil ---------- */
.profil{position:fixed;inset:0;z-index:70;overflow-y:auto;overscroll-behavior:contain;
  background:#0e0e11;display:none}
.profil.on{display:block}
/* Le fond d'une fiche : un halo teinté en haut, et surtout un fond général
   plus clair que le noir du site. On lit une fiche de haut en bas — la garder
   à #060606 sur toute la hauteur la rendait pesante et illisible en bas. */
.p-glow{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(92% 52vh at 50% -8%,color-mix(in srgb,var(--sc,var(--acc)) 30%,transparent),transparent 70%),
    linear-gradient(180deg,#131316 0%,#111114 38%,#0e0e11 100%)}
.p-nav{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:14px clamp(18px,4vw,60px);background:rgba(6,6,6,.72);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.p-back{display:inline-flex;align-items:center;gap:11px;font-family:'Archivo',sans-serif;
  font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-45);
  transition:color .3s var(--ez)}
.p-back:hover{color:var(--ink)}
.p-back .arr{width:30px;height:30px;border-radius:50%;border:1px solid var(--ink-14);
  display:flex;align-items:center;justify-content:center;transition:all .3s var(--ez);
  transform:rotate(180deg)}
.p-back .arr svg{width:12px;height:12px}
.p-back:hover .arr{transform:rotate(180deg) translateX(3px)}
.p-back:hover .arr{border-color:var(--sc,var(--acc));background:color-mix(in srgb,var(--sc,var(--acc)) 12%,transparent)}
.p-nav .p-ig{font-family:'Archivo',sans-serif;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-45)}

.p-in{position:relative;z-index:2;max-width:1040px;margin:0 auto;
  padding:clamp(34px,6vw,72px) clamp(18px,4vw,60px) clamp(50px,8vw,110px)}
.p-head{display:flex;gap:clamp(20px,3.4vw,40px);align-items:center;flex-wrap:wrap}
.p-av{width:clamp(112px,15vw,168px);height:clamp(112px,15vw,168px);border-radius:50%;
  object-fit:cover;flex:none;border:1px solid color-mix(in srgb,var(--sc,var(--acc)) 48%,transparent);
  box-shadow:0 0 0 8px color-mix(in srgb,var(--sc,var(--acc)) 6%,transparent),
             0 26px 70px rgba(0,0,0,.7)}
.p-id{min-width:0;flex:1}
.p-nom{font-family:'Bebas Neue',sans-serif;color:#fff;line-height:.92;letter-spacing:.015em;
  font-size:clamp(48px,8.5vw,110px);display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.p-nom .verif{width:clamp(20px,2.4vw,30px);height:clamp(20px,2.4vw,30px)}
.p-nom{text-decoration:none;transition:color .3s var(--ez)}
.p-nom:hover{color:var(--sc,var(--acc))}
.p-ext{width:clamp(30px,3.4vw,44px);height:clamp(30px,3.4vw,44px);border-radius:50%;flex:none;
  border:1px solid var(--ink-14);display:flex;align-items:center;justify-content:center;
  transform:rotate(-45deg);transition:all .3s var(--ez);margin-left:4px}
.p-ext svg{width:44%;height:44%}
.p-nom:hover .p-ext{border-color:var(--sc,var(--acc));transform:rotate(-45deg) translateX(3px);
  background:color-mix(in srgb,var(--sc,var(--acc)) 14%,transparent)}
.p-sub{margin-top:8px;font-family:'Archivo',sans-serif;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-45)}
.p-styles{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.p-styles .tag{font-size:10.5px;padding:7px 14px;border-radius:999px;letter-spacing:.16em}
.p-cta{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start;margin-top:22px}
.p-cta a,.p-cta button{display:inline-flex;align-items:center;gap:9px;padding:12px 20px;
  white-space:nowrap;
  border-radius:999px;border:1px solid var(--ink-14);background:transparent;color:var(--ink);
  font-family:'Archivo',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;cursor:pointer;transition:all .3s var(--ez)}
.p-cta .prim{background:color-mix(in srgb,var(--sc,var(--acc)) 15%,transparent);
  border-color:color-mix(in srgb,var(--sc,var(--acc)) 52%,transparent)}
.p-cta a:hover,.p-cta button:hover{border-color:var(--sc,var(--acc));transform:translateY(-2px);
  background:color-mix(in srgb,var(--sc,var(--acc)) 22%,transparent)}
.p-cta svg{width:14px;height:14px;flex:none}
.p-url{padding:12px 20px;border-radius:999px;border:1px solid var(--sc,var(--acc));
  background:rgba(255,255,255,.03);color:var(--ink);font-family:'Space Grotesk',sans-serif;
  font-size:13px;min-width:min(300px,72vw)}
.p-cta .copie{color:var(--sc,var(--acc));border-color:color-mix(in srgb,var(--sc,var(--acc)) 60%,transparent)}
.p-bio{margin-top:clamp(28px,4vw,44px);font-size:clamp(16px,1.7vw,20px);line-height:1.75;
  color:var(--ink);max-width:44ch;font-weight:300}

.p-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;
  margin-top:clamp(28px,4vw,44px)}
.p-stats:has(.p-stat:only-child){grid-template-columns:246px}
.p-stat{padding:20px 22px;border:1px solid var(--line);border-radius:6px;
  background:rgba(255,255,255,.02);box-shadow:inset 0 1px 1px rgba(255,255,255,.04)}
.p-stat .k{font-family:'Archivo',sans-serif;font-size:9px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-45);margin-bottom:8px}
.p-stat .v{font-family:'Bebas Neue',sans-serif;font-size:clamp(26px,3.4vw,38px);
  line-height:1;color:#fff}
.p-stat .v.sc{color:var(--sc,var(--acc))}
.p-stat .v.sm{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:500;line-height:1.5}

.p-sec{margin-top:clamp(34px,5vw,58px)}
.p-sec h3{font-family:'Archivo',sans-serif;font-size:9.5px;font-weight:600;letter-spacing:.28em;
  text-transform:uppercase;color:var(--sc,var(--acc));margin-bottom:14px;
  display:flex;align-items:center;gap:12px}
.p-sec h3::after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--sc,var(--acc)) 32%,transparent),transparent)}
.p-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px}
.p-link{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:17px 20px;
  border:1px solid var(--line);border-radius:6px;background:rgba(255,255,255,.02);
  transition:all .3s var(--ez);overflow-wrap:anywhere}
.p-link:hover{border-color:color-mix(in srgb,var(--sc,var(--acc)) 50%,transparent);
  background:color-mix(in srgb,var(--sc,var(--acc)) 6%,transparent);transform:translateY(-2px)}
.p-link .k{font-family:'Archivo',sans-serif;font-size:9px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-45);margin-bottom:5px}
.p-link .v{font-size:14.5px;color:var(--ink)}
.p-link.off{opacity:.42}
.p-link.off .v{color:var(--ink-45)}
.p-link .arr{width:30px;height:30px;border-radius:50%;flex:none;border:1px solid var(--ink-14);
  display:flex;align-items:center;justify-content:center;transition:all .3s var(--ez)}
.p-link:hover .arr{border-color:var(--sc,var(--acc));transform:translateX(3px)}
.p-link .arr svg{width:12px;height:12px}

.fdlg{border:none;padding:0;background:transparent;max-width:min(820px,94vw);width:100%;
  /* un dialog est dans le top layer : il n'hérite ni la couleur ni le centrage du body */
  color:var(--ink);margin:auto;max-height:92vh}
.fdlg::backdrop{background:rgba(4,4,4,.88);backdrop-filter:blur(8px)}
.fdlg-in{position:relative;background:rgba(9,9,9,.98);border:1px solid var(--line);border-radius:10px;
  padding:clamp(24px,3.4vw,44px);max-height:88vh;overflow-y:auto;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.05),0 40px 100px rgba(0,0,0,.7)}
.fdlg-t{font-size:clamp(32px,4.6vw,52px);margin-bottom:12px}
.fdlg-lead{color:var(--ink-45);font-size:14.5px;line-height:1.75;max-width:60ch;margin-bottom:26px}
.fdlg-lead b{color:var(--ink);font-weight:500}
.fdlg form.f{max-width:none;background:none;border:none;padding:0;backdrop-filter:none;box-shadow:none}
.p-prat{display:grid;gap:10px}
.p-pr{display:flex;gap:18px;align-items:baseline;padding:14px 18px;border:1px solid var(--line);
  border-radius:6px;background:rgba(255,255,255,.02);box-shadow:inset 0 1px 1px rgba(255,255,255,.04)}
.p-pr .k{flex:0 0 122px;font-family:'Archivo',sans-serif;font-size:9px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-45)}
.p-pr .v{font-family:'Space Grotesk',sans-serif;font-size:14.5px;line-height:1.45;color:var(--ink)}
@media(max-width:560px){.p-pr{flex-direction:column;gap:7px}.p-pr .k{flex:none}}
.p-note{margin-top:14px;font-size:12.5px;line-height:1.7;color:var(--ink-45);max-width:62ch}
.p-near{display:flex;gap:9px;flex-wrap:wrap}
.p-near a{display:flex;align-items:center;gap:11px;padding:9px 16px 9px 9px;border-radius:999px;
  border:1px solid var(--ink-14);background:rgba(6,6,6,.5);transition:all .3s var(--ez)}
.p-near a:hover{border-color:var(--sc,var(--acc));transform:translateY(-2px)}
.p-near img{width:36px;height:36px;border-radius:50%;object-fit:cover;filter:grayscale(1);
  transition:filter .3s var(--ez)}
.p-near a:hover img{filter:grayscale(0)}
.p-near b{font-family:'Archivo Black',sans-serif;font-weight:400;font-size:10px;letter-spacing:.04em;
  text-transform:uppercase;white-space:nowrap}

footer{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;
  gap:14px;flex-wrap:wrap;max-width:1180px;margin:0 auto;width:100%;
  padding:clamp(26px,4vw,50px) clamp(18px,4vw,60px) 26px;border-top:1px solid var(--line);
  font-family:'Archivo',sans-serif;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-45)}
footer .f-mail{color:var(--ink);letter-spacing:.18em;transition:color .3s var(--ez)}
footer .f-mail:hover{color:var(--acc)}
@media(max-width:780px){
  .p-head{flex-direction:column;align-items:flex-start;gap:22px}
  .p-av{width:104px;height:104px}
  .p-nom{font-size:clamp(42px,12vw,72px)}
  .p-bio{max-width:none}
}
@media(max-width:640px){
  footer{justify-content:center;text-align:center}
  .tools{top:60px}
  .hero .cta-row{flex-direction:column;align-items:stretch;gap:12px}
  .btn-main,.btn-ghost{width:100%;justify-content:center;padding:16px 24px;min-height:60px}
}

/* ═══════════════════════════════════════════════════════════
   PLATEFORME — ajouts 2026
   ═══════════════════════════════════════════════════════════ */

/* ---------- barre haute : onglets ---------- */
header{gap:14px}
.h-nav{display:flex;align-items:center;gap:2px;flex:1;justify-content:center;min-width:0}
/* 11,5 px sur grand écran : à 10 px les libellés se lisaient mal une fois
   passés en capitales espacées. En dessous de 1340 px, la règle de
   condensation reprend la main et les redescend. */
.h-nav a{position:relative;padding:10px 15px;border-radius:999px;white-space:nowrap;
  font-family:'Archivo',sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink);transition:all .3s var(--ez)}
/* les libellés sont blancs au repos : le survol se marque au fond, plus à
   la couleur du texte, qui n'a plus de marge pour s'éclaircir */
.h-nav a:hover{background:rgba(255,255,255,.07)}
.h-nav a[aria-current]{color:var(--acc);background:rgba(169,194,232,.09);
  box-shadow:inset 0 0 0 1px rgba(169,194,232,.28)}
/* la pastille se pose après le libellé, jamais dessus */
.h-nav a:has(.pastille){padding-right:9px}
.h-nav a .pastille{display:inline-block;margin-left:7px;vertical-align:1px;
  min-width:16px;height:16px;padding:0 5px;border-radius:999px;background:var(--acc);
  color:#060606;font-size:9px;font-weight:600;line-height:16px;text-align:center;letter-spacing:0}
.h-right{display:flex;align-items:center;gap:9px;flex:none}
.h-moi{display:flex;align-items:center;gap:8px;padding:5px 13px 5px 5px;border-radius:999px;
  border:1px solid var(--ink-14);transition:all .3s var(--ez)}
.h-moi:hover{border-color:var(--acc)}
.h-moi img{width:27px;height:27px;border-radius:50%;object-fit:cover;flex:none}
.h-moi span{font-family:'Archivo',sans-serif;font-size:9.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.h-burger{display:none;width:38px;height:38px;border-radius:999px;border:1px solid var(--ink-14);
  align-items:center;justify-content:center}
.h-burger span{display:block;width:15px;height:1.4px;background:var(--ink);position:relative}
.h-burger span::before,.h-burger span::after{content:"";position:absolute;left:0;width:15px;height:1.4px;background:var(--ink)}
.h-burger span::before{top:-5px}.h-burger span::after{top:5px}
@media(max-width:900px){
  .h-nav{position:fixed;inset:66px 0 auto 0;flex-direction:column;justify-content:flex-start;
    gap:0;padding:8px 0 14px;background:#050505;border-bottom:1px solid var(--line);
    display:none}
  .h-nav.on{display:flex}
  .h-nav a{width:100%;text-align:center;padding:15px;border-radius:0}
  .h-burger{display:flex}
  /* « Se connecter » reste visible : c'est l'action principale d'un
     visiteur, et le menu déroulant ne la propose pas. Elle était masquée
     depuis l'arrivée du menu, ce qui rendait la connexion impossible
     au téléphone. */
  .h-cta{display:inline-flex;font-size:10px;letter-spacing:.09em;padding:10px 15px}
  .h-moi span{display:none}
  .h-moi{padding:4px}
}
@media(max-width:420px){
  .h-cta{font-size:9.5px;padding:9px 12px;letter-spacing:.06em}
  header{gap:8px;padding-left:12px;padding-right:12px}
  header .h-logo img{height:32px}
}

/* ---------- filtres repliés ---------- */
.f-toggle{display:inline-flex;align-items:center;gap:9px;padding:12px 18px;border-radius:999px;
  border:1px solid rgba(255,255,255,.22);font-family:'Archivo',sans-serif;font-weight:600;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-45);
  transition:all .3s var(--ez);white-space:nowrap}
.f-toggle:hover,.f-toggle[aria-expanded="true"]{border-color:var(--acc);color:var(--acc)}
.f-toggle .n{min-width:17px;height:17px;padding:0 5px;border-radius:999px;background:var(--acc);
  color:#060606;font-size:9px;line-height:17px;letter-spacing:0}
.f-toggle svg{width:11px;height:11px;transition:transform .3s var(--ez)}
.f-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.f-panneau{display:none;border-top:1px solid var(--line);margin-top:14px;padding-top:4px}
.f-panneau.on{display:block}
.f-panneau .lg{font-family:'Archivo',sans-serif;font-size:9px;letter-spacing:.26em;
  text-transform:uppercase;color:rgba(242,242,242,.32);padding:14px 0 0}

/* ---------- carte générique ---------- */
.bloc{background:rgba(9,9,9,.72);border:1px solid var(--line);border-radius:8px;
  padding:clamp(20px,2.6vw,30px);box-shadow:inset 0 1px 1px rgba(255,255,255,.05)}
.bloc + .bloc{margin-top:14px}
.bloc h2{font-family:'Bebas Neue',sans-serif;font-size:clamp(24px,3vw,32px);
  text-transform:uppercase;letter-spacing:.02em;line-height:1}
.bloc h3{font-family:'Archivo',sans-serif;font-size:9.5px;font-weight:600;letter-spacing:.26em;
  text-transform:uppercase;color:var(--acc);margin:0 0 14px;display:flex;align-items:center;gap:12px}
.bloc h3::after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,rgba(169,194,232,.32),transparent)}
.txt{color:var(--ink-45);font-size:14.5px;line-height:1.75}
.txt b{color:var(--ink);font-weight:500}
.txt a{color:var(--acc);text-decoration:underline;text-underline-offset:3px}
.page{position:relative;z-index:2;max-width:1180px;margin:0 auto;width:100%;
  padding:clamp(96px,13vh,132px) clamp(18px,4vw,60px) clamp(50px,7vw,90px)}
.page.etroit{max-width:820px}
.page-t{font-family:'Bebas Neue',sans-serif;font-size:clamp(38px,6.4vw,80px);
  text-transform:uppercase;line-height:.94;color:#fff}
.page-lead{margin:14px 0 30px;color:var(--ink-45);font-size:15px;line-height:1.75;max-width:64ch}
.page-lead b{color:var(--ink);font-weight:500}

/* ---------- connexion ---------- */
.centre{min-height:100dvh;display:flex;align-items:center;justify-content:center;
  padding:96px clamp(18px,4vw,40px) 40px;position:relative;z-index:2}
.carte-co{width:100%;max-width:440px}
.carte-co .logo{height:52px;width:auto;margin:0 auto 26px;
  filter:drop-shadow(0 2px 14px rgba(255,255,255,.18))}
.carte-co h1{font-family:'Bebas Neue',sans-serif;font-size:44px;text-transform:uppercase;
  text-align:center;line-height:1;color:#fff}
.carte-co .lead{text-align:center;color:var(--ink-45);font-size:13.5px;line-height:1.7;margin:10px 0 26px}
.carte-co .fld{margin-bottom:15px}
.carte-co .btn-send{width:100%;justify-content:center}
.sous{margin-top:20px;text-align:center;font-size:12.5px;line-height:1.8;color:var(--ink-45)}
.sous a{color:var(--acc)}
.alerte{display:none;margin:0 0 16px;padding:13px 16px;border-radius:4px;font-size:13px;line-height:1.6;
  border:1px solid rgba(255,138,138,.4);background:rgba(255,138,138,.07);color:#ffb3b3}
.alerte.on{display:block}
.alerte.ok{border-color:rgba(169,194,232,.45);background:rgba(169,194,232,.07);color:var(--acc)}

/* ---------- la bulle « enregistré » ----------
   Le bandeau d'alerte est en haut de page ; sur un formulaire de profil, le
   bouton est tout en bas. On confirmait donc à un endroit que la personne ne
   regardait pas — d'où l'impression que rien ne se passait. */
.sauve-bulle{position:fixed;z-index:90;left:50%;
  bottom:calc(26px + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:11px;max-width:min(440px,calc(100vw - 32px));
  padding:14px 20px;border-radius:10px;
  background:linear-gradient(180deg,#17171b,#101013);
  border:1px solid color-mix(in srgb,var(--acc) 42%,transparent);
  box-shadow:0 18px 50px rgba(0,0,0,.66),0 0 0 1px rgba(255,255,255,.05);
  color:var(--ink);font-size:13.5px;line-height:1.45;
  opacity:0;transform:translate(-50%,16px);pointer-events:none;
  transition:opacity .3s var(--ez),transform .38s var(--ez)}
.sauve-bulle.on{opacity:1;transform:translate(-50%,0)}
.sauve-bulle svg{flex:none;width:19px;height:19px;color:var(--acc)}
@media(max-width:640px){
  .sauve-bulle{left:16px;right:16px;max-width:none;transform:translateY(16px);
    padding:13px 16px;font-size:13px}
  .sauve-bulle.on{transform:translateY(0)}
}
@media(prefers-reduced-motion:reduce){
  .sauve-bulle{transition:opacity .2s linear}
}

/* ---------- mon profil ---------- */
.edit-grille{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:960px){.edit-grille{grid-template-columns:1fr 340px;align-items:start}}
.apercu{position:sticky;top:88px}
.couv{position:relative;height:160px;border-radius:8px;overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(140deg,rgba(255,255,255,.05),rgba(255,255,255,.01))}
.couv img{width:100%;height:100%;object-fit:cover}
.couv .vide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'Archivo',sans-serif;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(242,242,242,.3)}
.photo-ligne{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:-38px;
  padding:0 18px;position:relative;z-index:2}
.photo-ligne img.rond{width:84px;height:84px;border-radius:50%;object-fit:cover;flex:none;
  border:2px solid #0b0b0b;box-shadow:0 10px 30px rgba(0,0,0,.6)}
.fichier{display:inline-flex;align-items:center;gap:9px;padding:11px 18px;border-radius:999px;
  border:1px dashed rgba(255,255,255,.26);font-family:'Archivo',sans-serif;font-size:9.5px;
  font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-45);
  cursor:pointer;transition:all .3s var(--ez)}
.fichier:hover{border-color:var(--acc);color:var(--acc);border-style:solid}
.fichier input{display:none}
.couleurs{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.pastille-c{display:block;width:34px;height:34px;border-radius:50%;flex:none;
  cursor:pointer;overflow:hidden;padding:0;
  border:2px solid transparent;transition:transform .25s var(--ez)}
.pastille-c:hover{transform:scale(1.12)}
.pastille-c[aria-pressed="true"]{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.14)}
.pastille-c.libre{background:conic-gradient(#ff4d4d,#ffd24d,#4dff88,#4dd2ff,#a94dff,#ff4d4d);
  position:relative;overflow:hidden}
/* Le sélecteur de couleur natif se dessine en RECTANGLE, et Safari ignore
   l'opacité sur les contrôles de formulaire : le carré ressortait par-dessus
   la pastille ronde. On remet donc l'apparence à zéro et on arrondit aussi le
   pavé natif, pour que ça tienne quel que soit le navigateur. */
.pastille-c.libre input{position:absolute;inset:0;width:100%;height:100%;
  opacity:0;cursor:pointer;border:none;padding:0;margin:0;border-radius:50%;
  -webkit-appearance:none;appearance:none;background:transparent}
.pastille-c.libre input::-webkit-color-swatch-wrapper{padding:0;border:none;border-radius:50%}
.pastille-c.libre input::-webkit-color-swatch{border:none;border-radius:50%}
.pastille-c.libre input::-moz-color-swatch{border:none;border-radius:50%}
.pastille-c.libre::after{content:"";position:absolute;inset:0;border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.35);pointer-events:none}
.sc-ligne{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px}
.sc-ligne .fld{flex:1;margin:0}
.sc-ligne button{flex:none;width:44px;height:47px;margin-top:23px;border-radius:3px;
  border:1px solid var(--ink-14);color:var(--ink-45);font-size:16px;transition:all .3s var(--ez)}
.sc-ligne button:hover{border-color:#ff8a8a;color:#ff8a8a}
.sc-vu{display:flex;gap:12px;align-items:center;padding:11px 14px;border:1px solid var(--line);
  border-radius:4px;background:rgba(255,255,255,.02);margin:-4px 0 12px;font-size:13px}
.sc-vu img{width:42px;height:42px;border-radius:3px;object-fit:cover;flex:none}
.sc-vu .t{min-width:0}
.sc-vu .t b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.sc-vu .t span{color:var(--ink-45);font-size:11.5px}
.barre-fixe{position:sticky;bottom:0;z-index:5;margin:18px -1px -1px;padding:16px 18px;
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  background:rgba(6,6,6,.94);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);border-radius:0 0 8px 8px}
.barre-fixe .etat{font-size:12.5px;color:var(--ink-45)}

/* ---------- badge d'état ---------- */
.badge{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:999px;
  font-family:'Archivo',sans-serif;font-size:9px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;border:1px solid var(--ink-14);color:var(--ink-45)}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge.att{color:#ffd27d;border-color:rgba(255,210,125,.35);background:rgba(255,210,125,.07)}
.badge.ok{color:#8ee6a8;border-color:rgba(142,230,168,.35);background:rgba(142,230,168,.07)}
.badge.non{color:#ff8a8a;border-color:rgba(255,138,138,.35);background:rgba(255,138,138,.07)}

/* ---------- atelier (messages) ---------- */
.salon{display:flex;flex-direction:column;height:calc(100dvh - 66px);margin-top:66px;
  position:relative;z-index:2}
.salon-onglets{display:flex;gap:8px;padding:12px clamp(18px,4vw,60px);flex-wrap:wrap;
  border-bottom:1px solid var(--line);background:rgba(6,6,6,.8);backdrop-filter:blur(14px)}
.fil{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:22px clamp(18px,4vw,60px) 10px;
  display:flex;flex-direction:column;gap:3px}
.fil .jour{align-self:center;margin:16px 0 10px;padding:5px 14px;border-radius:999px;
  background:rgba(255,255,255,.05);font-family:'Archivo',sans-serif;font-size:9px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink-45)}
.msg{display:flex;gap:11px;max-width:min(680px,86%);padding:3px 0}
.msg img{width:33px;height:33px;border-radius:50%;object-fit:cover;flex:none;align-self:flex-end;
  border:1px solid var(--ink-14)}
.msg .b{padding:11px 15px;border-radius:14px 14px 14px 3px;background:rgba(255,255,255,.045);
  border:1px solid var(--line);font-size:14.5px;line-height:1.6;overflow-wrap:anywhere;min-width:0}
.msg .qui{font-family:'Archivo',sans-serif;font-size:9px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--acc);margin-bottom:5px;display:flex;gap:9px;align-items:center}
.msg .qui time{color:rgba(242,242,242,.28);letter-spacing:.1em}
.msg .b a{color:var(--acc);text-decoration:underline;text-underline-offset:2px}
.msg.moi{align-self:flex-end;flex-direction:row-reverse}
.msg.moi .b{border-radius:14px 14px 3px 14px;background:rgba(169,194,232,.10);
  border-color:rgba(169,194,232,.24)}
.msg.moi .qui{flex-direction:row-reverse;color:var(--ink-45)}
.msg.suite{padding-top:0}
.msg.suite img{visibility:hidden}
.msg.suite .qui{display:none}
.msg .sup{opacity:0;font-size:11px;color:var(--ink-45);align-self:center;padding:0 4px;transition:opacity .2s}
.msg:hover .sup{opacity:.7}
.msg .sup:hover{color:#ff8a8a;opacity:1}
.composeur{flex:none;display:flex;gap:10px;align-items:flex-end;
  padding:12px clamp(18px,4vw,60px) calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);background:rgba(6,6,6,.92);backdrop-filter:blur(14px)}
.composeur textarea{flex:1;min-height:48px;max-height:160px;resize:none;line-height:1.55;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.13);border-radius:24px;
  padding:14px 18px;font-size:14.5px;transition:border-color .3s var(--ez)}
.composeur textarea:focus{border-color:var(--acc)}
.composeur .env{flex:none;width:48px;height:48px;border-radius:50%;background:var(--silver);
  color:#060606;display:flex;align-items:center;justify-content:center;transition:transform .25s var(--ez)}
.composeur .env:active{transform:scale(.92)}
.composeur .env[disabled]{opacity:.4;cursor:not-allowed}
.composeur .env svg{width:17px;height:17px}
.mur{margin:auto;text-align:center;color:var(--ink-45);font-size:14px;line-height:1.8;max-width:44ch}

/* ---------- opportunités ---------- */
.annonces{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.annonce{display:flex;flex-direction:column;gap:13px;padding:22px;border:1px solid var(--line);
  border-radius:8px;background:rgba(9,9,9,.66);box-shadow:inset 0 1px 1px rgba(255,255,255,.05);
  transition:border-color .3s var(--ez)}
.annonce:hover{border-color:rgba(169,194,232,.36)}
.annonce .haut{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.annonce .titre{font-family:'Archivo Black',sans-serif;font-weight:400;text-transform:uppercase;
  font-size:15px;letter-spacing:.02em;line-height:1.3}
.annonce .par{font-size:12px;color:var(--ink-45);margin-top:5px}
.annonce .par a{color:var(--acc)}
.annonce .quand{font-family:'Bebas Neue',sans-serif;font-size:17px;letter-spacing:.08em;
  color:var(--acc);white-space:nowrap;text-align:right;line-height:1.2}
.annonce .quand small{display:block;font-family:'Archivo',sans-serif;font-size:9px;
  letter-spacing:.2em;color:var(--ink-45)}
.annonce .desc{font-size:14px;line-height:1.7;color:var(--ink-45);overflow-wrap:anywhere}
.annonce .infos{display:flex;gap:8px;flex-wrap:wrap}
.annonce .bas{margin-top:auto;padding-top:14px;border-top:1px solid var(--ink-14);
  display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.annonce.close{opacity:.5}
/* ---------- qui a vu une annonce ----------
   Visible seulement par l'auteur. Ce n'est pas une statistique de vanité :
   c'est ce qui lui dit si son offre n'intéresse personne ou si personne ne
   l'a simplement vue passer. */
.an-vues{display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line)}
.an-vues.vide{font-size:12.5px;line-height:1.55;color:var(--ink-45)}
.an-vues-t{font-family:'Archivo',sans-serif;font-size:9.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-45)}
.an-vus{display:flex;align-items:center}
.an-vu{display:block;width:28px;height:28px;border-radius:50%;overflow:hidden;
  margin-left:-8px;border:2px solid #0c0c0f;background:#141417;
  transition:transform .25s var(--ez),z-index 0s}
.an-vu:first-child{margin-left:0}
.an-vu:hover{transform:translateY(-3px) scale(1.12);z-index:2;position:relative}
.an-vu img{width:100%;height:100%;object-fit:cover}
.an-vu.plus{display:flex;align-items:center;justify-content:center;
  font-family:'Archivo',sans-serif;font-size:10px;font-weight:600;color:var(--ink-45)}

.cands{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.cand{display:flex;gap:11px;align-items:center;padding:9px 13px;border:1px solid var(--ink-14);
  border-radius:5px;background:rgba(255,255,255,.02);font-size:13.5px}
.cand img{width:32px;height:32px;border-radius:50%;object-fit:cover;flex:none}
.cand .m{color:var(--ink-45);font-size:12.5px;margin-top:2px;overflow-wrap:anywhere}
.cand{align-items:flex-start}
.cand>div{flex:1}
.cand-ecrire{flex:none;display:inline-flex;align-items:center;gap:6px;align-self:center}
.cand-ecrire svg{width:13px;height:13px;flex:none}

/* Un candidat qui n'a pas donné son nom. La silhouette dit clairement qu'il
   manque quelqu'un derrière — mieux qu'un avatar générique, qu'on lirait
   comme une photo absente. */
.cand.masque{border-style:dashed;border-color:var(--ink-22)}
.cand-anon{width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;
  border:1px dashed var(--ink-22);color:var(--ink-45)}
.cand-anon svg{width:17px;height:17px}
.cand-sans{font-family:'Archivo',sans-serif;font-size:9px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-45);border:1px solid var(--ink-14);
  border-radius:999px;padding:2px 8px;margin-left:6px;white-space:nowrap}
.cand-quoi{color:var(--ink-45);font-size:12px;margin-top:3px}
.cand-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.cand-tags:empty{display:none}
.cand.masque .mini{margin-top:9px}
.cand-att{color:var(--ink-45);font-size:11.5px;margin-top:8px;font-style:italic}

/* Le choix qu'on fait en se positionnant. Deux pavés qu'on lit vraiment :
   c'est la question la plus lourde du formulaire, elle ne peut pas tenir sur
   une case à cocher perdue sous un champ. */
.anon{margin:22px 0 4px;display:flex;flex-direction:column;gap:9px}
.anon-t{font-family:'Archivo',sans-serif;font-size:10px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-45);margin-bottom:2px}
.anon-o{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;cursor:pointer;
  border:1px solid var(--ink-14);border-radius:6px;transition:all .3s var(--ez)}
.anon-o:hover{border-color:var(--ink-22)}
.anon-o input{margin-top:3px;flex:none;accent-color:var(--acc)}
.anon-o:has(input:checked){border-color:rgba(169,194,232,.5);background:rgba(169,194,232,.06)}
.anon-b{font-size:12.5px;line-height:1.55;color:var(--ink-45)}
.anon-b b{display:block;color:var(--ink);font-size:13.5px;margin-bottom:3px;font-weight:500}
.mini{padding:9px 15px;border-radius:999px;border:1px solid var(--ink-14);
  font-family:'Archivo',sans-serif;font-size:9.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-45);transition:all .3s var(--ez);white-space:nowrap}
.mini:hover{border-color:var(--acc);color:var(--acc)}
.mini.prim{background:rgba(169,194,232,.14);border-color:rgba(169,194,232,.5);color:var(--ink)}
.mini.danger:hover{border-color:#ff8a8a;color:#ff8a8a}
.mini[disabled]{opacity:.45;cursor:default}
.mini[disabled]:hover{border-color:var(--ink-14);color:var(--ink-45)}

/* ---------- admin ---------- */
.rangee{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:14px 16px;
  border:1px solid var(--line);border-radius:6px;background:rgba(255,255,255,.02);margin-bottom:9px}
.rangee img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.rangee .id{flex:1;min-width:170px}
.rangee .id b{font-family:'Archivo Black',sans-serif;font-weight:400;font-size:13px;
  text-transform:uppercase;display:block}
.rangee .id span{font-size:12px;color:var(--ink-45)}
.rangee .act{display:flex;gap:7px;flex-wrap:wrap}
.compteurs{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-bottom:24px}
.compteur{padding:17px 19px;border:1px solid var(--line);border-radius:6px;background:rgba(255,255,255,.02)}
.compteur .k{font-family:'Archivo',sans-serif;font-size:9px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-45);margin-bottom:7px}
.compteur .v{font-family:'Bebas Neue',sans-serif;font-size:32px;line-height:1;color:#fff}
.compteur .v.acc{color:var(--acc)}

/* ---------- fiche publique : couverture + sons ---------- */
.p-couv{position:absolute;inset:0 0 auto 0;height:clamp(190px,32vh,330px);overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 34%,transparent);mask-image:linear-gradient(#000 34%,transparent)}
.p-couv img{width:100%;height:100%;object-fit:cover;opacity:.5}
.sc-grille{display:grid;gap:11px}
.sc-grille iframe{width:100%;height:126px;border:none;border-radius:6px;
  background:rgba(255,255,255,.02);display:block}

/* ---------- prose légale ---------- */
.prose h2{font-family:'Bebas Neue',sans-serif;font-size:clamp(21px,2.6vw,27px);
  text-transform:uppercase;letter-spacing:.02em;color:#fff;margin:34px 0 12px}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{color:var(--ink-45);font-size:14.5px;line-height:1.8}
.prose p+p{margin-top:11px}
.prose ul{margin:11px 0 0 20px;display:flex;flex-direction:column;gap:7px}
.prose b{color:var(--ink);font-weight:500}
.prose a{color:var(--acc);text-decoration:underline;text-underline-offset:3px}
.prose table{width:100%;border-collapse:collapse;margin-top:13px;font-size:13.5px}
.prose th,.prose td{text-align:left;padding:11px 13px;border:1px solid var(--line);
  vertical-align:top;color:var(--ink-45)}
.prose th{font-family:'Archivo',sans-serif;font-size:9px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink);background:rgba(255,255,255,.03)}

/* ---------- divers ---------- */
.chargement{display:flex;align-items:center;justify-content:center;gap:12px;padding:70px 0;
  font-family:'Archivo',sans-serif;font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-45)}
.chargement::before{content:"";width:13px;height:13px;border-radius:50%;
  border:1.6px solid var(--ink-14);border-top-color:var(--acc);animation:tourne .8s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}
.rien{text-align:center;color:var(--ink-45);padding:52px 20px;font-size:14px;line-height:1.8}
[hidden]{display:none !important}

/* une page courte ne doit pas laisser le pied de page flotter au milieu */
main.page{min-height:calc(100dvh - 230px)}

/* un fil peu rempli se lit mieux posé en bas, comme une messagerie */
.fil::before{content:"";flex:1 0 auto}

/* ---------- « mon compte » dans la barre haute ---------- */
.h-moi span{display:flex;flex-direction:column;gap:1px;line-height:1.2;max-width:130px}
.h-moi span b{font-family:'Archivo Black',sans-serif;font-weight:400;font-size:10px;
  letter-spacing:.02em;text-transform:uppercase;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.h-moi span i{font-style:normal;font-family:'Archivo',sans-serif;font-size:8px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-45)}
.h-moi img{width:32px;height:32px;border:1px solid var(--ink-14)}

/* ---------- messages privés ---------- */
.dm{display:grid;height:calc(100dvh - 66px);margin-top:66px;position:relative;z-index:2;
  grid-template-columns:320px 1fr}
@media(max-width:820px){
  .dm{grid-template-columns:1fr}
  .dm .liste{display:none}
  .dm.liste-ouverte .liste{display:flex}
  .dm.liste-ouverte .fil-dm{display:none}
}
.dm .liste{display:flex;flex-direction:column;border-right:1px solid var(--line);
  background:rgba(6,6,6,.6);overflow-y:auto}
.dm .liste .titre{padding:16px 18px 12px;font-family:'Archivo',sans-serif;font-size:9.5px;
  font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-45);
  border-bottom:1px solid var(--line)}
.conv{display:flex;gap:12px;align-items:center;padding:13px 16px;width:100%;text-align:left;
  border-bottom:1px solid rgba(255,255,255,.04);transition:background .25s var(--ez)}
.conv:hover{background:rgba(255,255,255,.03)}
.conv[aria-current]{background:rgba(169,194,232,.09);
  box-shadow:inset 3px 0 0 var(--acc)}
.conv img{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:none;
  border:1px solid var(--ink-14)}
.conv .t{min-width:0;flex:1}
.conv .t b{display:block;font-family:'Archivo Black',sans-serif;font-weight:400;font-size:12px;
  text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv .t span{display:block;font-size:12.5px;color:var(--ink-45);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv .q{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.conv .q time{font-size:10px;color:rgba(242,242,242,.3);white-space:nowrap}
.conv .q .n{min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--acc);
  color:#060606;font-size:10px;font-weight:600;line-height:18px;text-align:center}
.fil-dm{display:flex;flex-direction:column;min-width:0}
.dm-tete{flex:none;display:flex;gap:13px;align-items:center;padding:12px clamp(16px,3vw,26px);
  border-bottom:1px solid var(--line);background:rgba(6,6,6,.8);backdrop-filter:blur(14px)}
.dm-tete img{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none}
.dm-tete .t{min-width:0;flex:1}
.dm-tete .t b{display:block;font-family:'Archivo Black',sans-serif;font-weight:400;
  font-size:13px;text-transform:uppercase}
.dm-tete .t span{font-size:11.5px;color:var(--ink-45)}
.dm-retour{display:none;width:34px;height:34px;border-radius:999px;border:1px solid var(--ink-14);
  align-items:center;justify-content:center;flex:none}
.dm-retour svg{width:13px;height:13px;transform:rotate(180deg)}
/* La photo et le nom en haut du fil mènent à la fiche : c'est là qu'on
   regarde quand on se demande à qui on est en train d'écrire. */
.dm-qui{flex:1;min-width:0;display:flex;gap:13px;align-items:center;padding:4px 8px 4px 4px;
  margin:-4px -8px -4px -4px;border-radius:999px;transition:background .25s var(--ez)}
.dm-qui:hover{background:rgba(169,194,232,.08)}
.dm-qui:hover .t b{color:var(--acc)}
@media(max-width:820px){.dm-retour{display:flex}}

/* ---------- annuaire des organisateurs ---------- */
.orgas{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:13px}
.orga{display:flex;flex-direction:column;gap:13px;padding:20px;border:1px solid var(--line);
  border-radius:8px;background:rgba(9,9,9,.66);transition:border-color .3s var(--ez)}
.orga:hover{border-color:rgba(169,194,232,.36)}
.orga .haut{display:flex;gap:13px;align-items:center}
.orga img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none;
  border:1px solid var(--ink-14)}
.orga .n{min-width:0}
.orga .n b{display:block;font-family:'Archivo Black',sans-serif;font-weight:400;font-size:14px;
  text-transform:uppercase;line-height:1.25}
.orga .n span{font-size:12px;color:var(--ink-45)}
.orga .desc{font-size:13.5px;line-height:1.65;color:var(--ink-45)}
.orga .act{margin-top:auto;padding-top:12px;border-top:1px solid var(--ink-14);
  display:flex;gap:8px;flex-wrap:wrap}

/* ---------- compteurs d'abonnés ---------- */
.chiffres{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}
.chiffre{display:flex;align-items:center;gap:9px;padding:9px 15px;border-radius:999px;
  border:1px solid var(--ink-14);background:rgba(255,255,255,.02)}
.chiffre svg{width:14px;height:14px;flex:none;opacity:.75}
.chiffre b{font-family:'Bebas Neue',sans-serif;font-size:17px;letter-spacing:.06em;line-height:1}
.chiffre span{font-family:'Archivo',sans-serif;font-size:8.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-45)}

/* ---------- mise en avant ---------- */
.avant{display:flex;gap:8px;flex-wrap:wrap}
.avant button{padding:9px 15px;border-radius:999px;border:1px dashed rgba(255,255,255,.22);
  font-family:'Archivo',sans-serif;font-size:9.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-45);transition:all .3s var(--ez)}
.avant button:hover{border-color:var(--acc);color:var(--acc)}
.avant button[aria-pressed="true"]{border-style:solid;border-color:var(--acc);color:var(--acc);
  background:rgba(169,194,232,.10)}
.avant button[disabled]{opacity:.35;cursor:not-allowed}
.avant button[disabled]:hover{border-color:rgba(255,255,255,.22);color:var(--ink-45)}

/* ---------- deux volets : je modifie / je vois ---------- */
.volets{display:flex;gap:8px;margin:0 0 22px}
.volet{flex:1;padding:13px 18px;border-radius:999px;border:1px solid var(--ink-14);
  font-family:'Archivo',sans-serif;font-size:10px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-45);transition:all .3s var(--ez)}
.volet[aria-pressed="true"]{border-color:var(--acc);color:var(--acc);
  background:rgba(169,194,232,.09)}
.cadre-apercu{border:1px solid var(--line);border-radius:10px;overflow:hidden;
  background:#060606;position:relative;min-height:420px}
.cadre-apercu iframe{width:100%;height:min(76vh,900px);border:none;display:block;background:#060606}
.apercu-note{padding:12px 18px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.02);
  font-family:'Archivo',sans-serif;font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-45);display:flex;justify-content:space-between;gap:14px;align-items:center;
  flex-wrap:wrap}

/* ═══════════════════════════════════════════════════════════
   HUB — la bulle d'activité
   ═══════════════════════════════════════════════════════════ */
/* Le hub est un TIROIR collé au bord droit, plus un panneau flottant.
   L'ancien flottait au-dessus du contenu, se faisait couper sur les petits
   écrans, et laissait trop peu de place aux messages. */
.hub{position:fixed;inset:0;z-index:80;pointer-events:none}

/* le voile : il ferme au clic et détache le tiroir de la page */
.hub-voile{position:absolute;inset:0;background:rgba(4,4,5,.62);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;transition:opacity .32s var(--ez);pointer-events:auto}
.hub.ouvert .hub-voile{opacity:1}
.hub-voile[hidden]{display:none}

/* la bulle d'appel, seule chose visible tant que le tiroir est fermé */
.hub-bulle{position:absolute;pointer-events:auto;
  right:clamp(14px,3vw,26px);bottom:calc(clamp(14px,3vw,26px) + env(safe-area-inset-bottom));
  width:60px;height:60px;
  /* une bulle de conversation : trois coins ronds, le quatrième pointe vers le bas */
  border-radius:24px 24px 7px 24px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,#fff 0%,#e4eaf5 46%,color-mix(in srgb,var(--acc) 85%,#fff) 125%);
  color:#08090c;
  box-shadow:0 14px 38px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.22),
             inset 0 1px 0 rgba(255,255,255,.9),inset 0 -10px 18px color-mix(in srgb,var(--acc) 30%,transparent);
  transform:rotate(-7deg);
  transition:transform .35s var(--ez),opacity .25s var(--ez),box-shadow .35s var(--ez)}
.hub-bulle:hover,.hub-bulle:focus-visible{transform:rotate(0) translateY(-3px) scale(1.05);
  box-shadow:0 18px 44px rgba(0,0,0,.66),0 0 0 1px rgba(255,255,255,.3),
             0 0 0 9px color-mix(in srgb,var(--acc) 14%,transparent),inset 0 1px 0 rgba(255,255,255,.9)}
.hub-bulle:active{transform:rotate(-3deg) scale(.94)}
.hub-bulle svg{width:29px;height:29px;position:relative;z-index:1}
/* le halo : un anneau qui respire doucement, plus net quand il y a du neuf */
.hub-bulle .halo{position:absolute;inset:-7px;border-radius:30px 30px 10px 30px;pointer-events:none;
  border:1.5px solid color-mix(in srgb,var(--acc) 50%,transparent);
  animation:halo 3.4s ease-in-out infinite}
.hub.actif .hub-bulle .halo{border-color:var(--acc);animation-duration:1.8s}
.hub.actif .hub-bulle svg{animation:coucou 4s ease-in-out infinite}
@keyframes halo{0%,100%{transform:scale(.9);opacity:.2}50%{transform:scale(1.05);opacity:.8}}
@keyframes coucou{0%,80%,100%{transform:rotate(0)}85%{transform:rotate(-12deg)}90%{transform:rotate(10deg)}95%{transform:rotate(-6deg)}}
/* le mot qui glisse à gauche au survol, pour dire ce qu'il y a derrière */
.hub-bulle::before{content:attr(data-mot);position:absolute;right:calc(100% + 16px);top:50%;
  transform:translate(10px,-50%);white-space:nowrap;padding:8px 13px;border-radius:999px;
  background:#16161a;color:var(--ink);border:1px solid rgba(255,255,255,.14);
  box-shadow:0 8px 24px rgba(0,0,0,.5);
  font-family:'Archivo',sans-serif;font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  opacity:0;pointer-events:none;transition:opacity .25s var(--ez),transform .32s var(--ez)}
.hub-bulle:hover::before,.hub-bulle:focus-visible::before{opacity:1;transform:translate(0,-50%)}
@media(hover:none){.hub-bulle::before{display:none}}
/* une fois le tiroir ouvert, la bulle n'a plus rien à dire */
.hub.ouvert .hub-bulle{opacity:0;pointer-events:none;transform:rotate(-7deg) scale(.85)}
.hub-bulle .n{position:absolute;top:-6px;right:-6px;z-index:2;min-width:23px;height:23px;padding:0 6px;
  border-radius:999px;background:var(--acc);color:#060606;border:2px solid #0b0b0e;
  box-shadow:0 4px 12px rgba(0,0,0,.5);
  font-family:'Archivo',sans-serif;font-size:10px;font-weight:600;line-height:19px;text-align:center}

/* ---------- le tiroir ---------- */
.hub-panneau{position:absolute;top:0;right:0;bottom:0;pointer-events:auto;
  width:min(430px,100vw);display:flex;flex-direction:column;
  /* plus clair que le fond du site : on lit des messages ici, pas un décor */
  background:linear-gradient(180deg,#16161a,#111114 42%,#0d0d10);
  border-left:1px solid rgba(255,255,255,.12);
  box-shadow:-30px 0 90px rgba(0,0,0,.7);
  transform:translateX(100%);transition:transform .34s var(--ez);
  padding-bottom:env(safe-area-inset-bottom)}
.hub.ouvert .hub-panneau{transform:none}
.hub-panneau[hidden]{display:none}
body.hub-ouvert{overflow:hidden}

.hub-tete{flex:none;display:flex;gap:7px;align-items:center;
  padding:calc(16px + env(safe-area-inset-top)) 16px 13px;
  border-bottom:1px solid rgba(255,255,255,.09)}
.hub-onglet{padding:10px 17px;border-radius:999px;font-family:'Archivo',sans-serif;
  font-size:10.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(242,242,242,.5);transition:all .3s var(--ez)}
.hub-onglet:hover{color:var(--ink)}
.hub-onglet[aria-pressed="true"]{color:var(--acc);background:rgba(169,194,232,.12)}
.hub-fermer{margin-left:auto;width:38px;height:38px;border-radius:999px;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:15px;
  color:rgba(242,242,242,.5);border:1px solid rgba(255,255,255,.12);
  transition:all .3s var(--ez)}
.hub-fermer:hover{color:var(--ink);border-color:var(--acc);background:rgba(169,194,232,.08)}

.hub-corps{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:6px 0}

.hub-l{display:flex;gap:13px;align-items:center;padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,.05);transition:background .2s var(--ez)}
.hub-l:hover{background:rgba(255,255,255,.05)}
.hub-l.neuf{background:rgba(169,194,232,.08);box-shadow:inset 3px 0 0 var(--acc)}
.hub-l img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none;
  border:1px solid rgba(255,255,255,.12)}
.hub-l .ic{width:40px;height:40px;border-radius:50%;flex:none;display:flex;
  align-items:center;justify-content:center;color:var(--acc);
  border:1px solid rgba(169,194,232,.26);background:rgba(169,194,232,.07)}
.hub-l .ic svg{width:17px;height:17px}
/* Le type de la notification est préfixé : sans ça, une notification de type
   « profil » recevait class="ic profil", et .profil est la classe de la fiche
   en PLEIN ÉCRAN (position:fixed; inset:0). Un carré gris se posait alors en
   haut à gauche de l'écran, à côté de la plaque. */
.hub-l .ic.t-offre{color:#8ee6a8;border-color:rgba(142,230,168,.3)}
.hub-l .ic.t-candidature{color:#ffd27d;border-color:rgba(255,210,125,.3)}
.hub-l .t{min-width:0;flex:1}
.hub-l .t b{display:block;font-size:14px;font-weight:500;line-height:1.35;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hub-l .t span{display:block;font-size:13px;color:rgba(242,242,242,.6);margin-top:4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.45}
.hub-l time{flex:none;font-size:10.5px;color:rgba(242,242,242,.38);white-space:nowrap}
.hub-l .p{flex:none;min-width:20px;height:20px;padding:0 6px;border-radius:999px;
  background:var(--acc);color:#060606;font-family:'Archivo',sans-serif;font-size:10px;
  font-weight:600;line-height:20px;text-align:center}

/* une conversation se lit comme une conversation : nom et heure sur une ligne,
   le message dessous, en entier */
.hub-l.dm{align-items:flex-start;padding:15px 16px}
.hub-l.dm .t .h{display:flex;align-items:baseline;gap:10px;margin:0}
.hub-l.dm .t .h b{flex:1}
.hub-l.dm .t .h time,.hub-l.dm .t .h .p{margin-left:auto}
.hub-l.dm .t > span{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}

.hub-vide{padding:56px 28px;text-align:center;font-size:14px;line-height:1.8;
  color:rgba(242,242,242,.45)}
.hub-pied{flex:none;display:flex;gap:9px;padding:13px 16px;
  border-top:1px solid rgba(255,255,255,.09);background:rgba(0,0,0,.2)}
.hub-pied .mini{flex:1;text-align:center;padding:11px 10px;font-size:9.5px}

@media(max-width:520px){
  .hub-panneau{width:100vw;border-left:none}
  .hub-bulle{width:56px;height:56px;right:16px;border-radius:22px 22px 6px 22px;
    bottom:calc(16px + env(safe-area-inset-bottom))}
  .hub-bulle svg{width:27px;height:27px}
}

/* ═══════════════════════════════════════════════════════════
   MOBILE — reprise complète
   Une plateforme qu'on consulte au téléphone, entre deux sets :
   il faut que tout se lise sans zoomer et que rien ne déborde.
   ═══════════════════════════════════════════════════════════ */
@media(max-width:760px){

  /* on ne veut jamais de barre de défilement horizontale */
  html,body{max-width:100%;overflow-x:hidden}
  .wrap,.page{padding-left:16px;padding-right:16px}
  .page{padding-top:88px}

  /* titres : lisibles sans écraser l'écran */
  .page-t{font-size:clamp(32px,10.5vw,46px)}
  .page-lead{font-size:14.5px;line-height:1.7}
  .hero{padding-top:104px}
  .hero .h-big{font-size:clamp(38px,11.5vw,60px);max-width:none}
  .hero .sub{font-size:14.5px}
  .hero .meta{gap:18px 26px}

  /* barre d'outils : la recherche seule sur sa ligne, les boutons dessous */
  .tools{top:60px;padding:11px 0}
  .tools-in{gap:8px}
  .search{flex:1 1 100%}
  .f-toggle,.tbtn{flex:1;justify-content:center;padding:12px 12px;font-size:9.5px}

  /* cartes : une par ligne, plus aérées */
  .grid{grid-template-columns:1fr;gap:10px}
  .annonces,.orgas{grid-template-columns:1fr}
  .card{padding:16px}
  .countline{padding:14px 2px 16px;font-size:9px;gap:6px}

  /* blocs et formulaires */
  .bloc{padding:18px 16px;border-radius:7px}
  .bloc h2{font-size:24px}
  .f-grid{grid-template-columns:1fr;gap:14px}
  .fld input,.fld textarea{padding:13px 14px;font-size:16px}   /* 16px : iOS ne zoome pas */
  .search input{font-size:16px}
  .volets{flex-direction:column;gap:7px}
  .volet{padding:14px}

  /* la barre d'enregistrement colle en bas, au-dessus de la bulle */
  .barre-fixe{margin-left:-16px;margin-right:-16px;padding:14px 16px calc(14px + env(safe-area-inset-bottom));
    flex-direction:column;align-items:stretch;gap:9px}
  .barre-fixe .btn-send{width:100%;justify-content:center;min-height:54px}
  .barre-fixe .etat{text-align:center}

  /* fiche artiste */
  .p-in{padding:26px 16px 60px}
  .p-nom{font-size:clamp(38px,11vw,56px)}
  .p-bio{font-size:16px}
  .p-stats{grid-template-columns:1fr 1fr;gap:9px}
  .p-stat{padding:15px 16px}
  .p-stat .v{font-size:24px}
  .p-cta{gap:8px}
  .p-cta a,.p-cta button{flex:1 1 calc(50% - 4px);justify-content:center;padding:13px 12px;
    font-size:9.5px;letter-spacing:.14em}
  .p-links{grid-template-columns:1fr}
  .chiffres{gap:7px}
  .chiffre{padding:8px 13px}

  /* administration : les actions passent sous l'identité */
  .rangee{gap:11px;padding:13px}
  .rangee .id{flex:1 1 100%;min-width:0;order:2}
  .rangee img{order:1}
  .rangee .badge{order:1}
  .rangee .act{flex:1 1 100%;order:3}
  .rangee .act .mini{flex:1;text-align:center}
  /* des compteurs courts : deux par ligne, compacts, plutôt qu'un mur */
  .compteurs{grid-template-columns:1fr 1fr;gap:8px}
  .compteur{padding:13px 14px}
  .compteur .k{font-size:8px;letter-spacing:.18em;margin-bottom:5px}
  .compteur .v{font-size:26px}

  /* les fenêtres modales prennent l'écran */
  .fdlg{max-width:100vw;max-height:100dvh;margin:0}
  .fdlg-in{border-radius:0;max-height:100dvh;padding:22px 16px calc(22px + env(safe-area-inset-bottom))}
  .fdlg-t{font-size:30px}

  /* prose légale */
  .prose table{display:block;overflow-x:auto;white-space:nowrap}
  .prose th,.prose td{padding:9px 11px}

  /* on laisse la place à la bulle du hub */
  footer{padding-bottom:96px;justify-content:center;text-align:center}
  .pool{padding-bottom:40px}
}

@media(max-width:400px){
  .p-cta a,.p-cta button{flex:1 1 100%}
  .p-stats{grid-template-columns:1fr}
  .hero .h-big{font-size:34px}
  .page-t{font-size:30px}
}

/* les salons occupent l'écran : pas de bulle par-dessus le composeur */
.salon .composeur,.fil-dm .composeur{padding-right:clamp(16px,3vw,26px)}
@media(max-width:520px){
  .salon .composeur,.fil-dm .composeur{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
}

/* ---------- publications Instagram ---------- */
/* ---------- publications Instagram, en vignettes carrées ----------
   La formule de recadrage tient de 180 à 600 px de large : en dessous, la
   mise en page interne de l'embed change et le calcul devient faux. La grille
   ne descend donc jamais sous 190. */
.ig-grille{display:grid;gap:9px;grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.ig-carre{position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:6px;
  background:#141416;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.ig-carre iframe{position:absolute;left:0;top:0;width:100%;height:1400px;border:0;
  display:block;opacity:0;transition:opacity .45s var(--ez);
  transform-origin:50% 0}   /* impératif : au centre, le décalage part de travers */
.ig-carre.pret iframe{opacity:1}

/* la flèche d'ouverture, posée au-dessus du cadre */
.ig-ouvre{position:absolute;z-index:2;right:8px;top:8px;width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:rgba(6,6,6,.62);backdrop-filter:blur(6px);color:#f2f2f2;
  font-size:13px;line-height:1;opacity:0;transition:all .3s var(--ez)}
.ig-carre:hover .ig-ouvre,.ig-carre.muet .ig-ouvre{opacity:1}
.ig-ouvre:hover{background:var(--sc,var(--acc));color:#060606}

/* une publication qu'Instagram refuse d'encadrer : un carreau qui se tient,
   plutôt qu'une case blanche */
.ig-carre.muet{background:
  repeating-linear-gradient(135deg,#141416 0 9px,#17171a 9px 18px)}
.ig-carre.muet::after{content:"Voir sur Instagram";position:absolute;inset:auto 0 0 0;
  padding:11px 12px;font-family:'Archivo',sans-serif;font-size:9.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(242,242,242,.45);
  text-align:center;pointer-events:none}
.ig-carre.muet iframe{opacity:0}

@media(max-width:760px){
  .ig-grille{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
  .ig-ouvre{opacity:1}
}
.ig-lien{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 18px;border:1px solid var(--line);border-radius:6px;
  background:rgba(255,255,255,.02);overflow-wrap:anywhere}
.ig-lien:hover{border-color:color-mix(in srgb,var(--sc,var(--acc)) 50%,transparent)}
.ig-ligne{display:flex;gap:10px;align-items:flex-end;margin-bottom:11px}
.ig-ligne .fld{flex:1;margin:0;min-width:0}
.ig-ligne button{flex:none;height:47px;padding:0 16px;border-radius:3px;
  border:1px solid var(--ink-14);color:var(--ink-45);font-family:'Archivo',sans-serif;
  font-size:9px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  transition:all .3s var(--ez)}
.ig-ligne button:hover{border-color:#ff8a8a;color:#ff8a8a}

/* ═══════════════════════════════════════════════════════════
   FAMILLES DE STYLES — le panneau de filtres rangé
   ═══════════════════════════════════════════════════════════ */

.famille-t{display:inline-flex;align-items:center;gap:10px;margin-bottom:11px;padding:6px 14px 6px 11px;
  border-radius:999px;border:1px solid transparent;
  font-family:'Archivo',sans-serif;font-size:9.5px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(242,242,242,.42);transition:all .3s var(--ez)}
.famille-t:hover{color:var(--ink);border-color:rgba(255,255,255,.14)}
.famille-t[aria-pressed="true"]{color:var(--fc);border-color:color-mix(in srgb,var(--fc) 44%,transparent);
  background:color-mix(in srgb,var(--fc) 9%,transparent)}
.famille-t .pt{width:7px;height:7px;border-radius:50%;background:var(--fc);
  box-shadow:0 0 9px color-mix(in srgb,var(--fc) 60%,transparent)}
.famille-t .n{opacity:.5;letter-spacing:0;font-size:9px}
.famille-l{display:flex;gap:7px;flex-wrap:wrap}
.chips.prat{display:flex;padding-top:9px}

/* ═══════════════════════════════════════════════════════════
   MENUS — finition chrome
   Les onglets, les puces et les boutons reprennent le métal poli
   de l'identité plutôt qu'un simple aplat.
   ═══════════════════════════════════════════════════════════ */
header{border-bottom:1px solid transparent;
  border-image:linear-gradient(90deg,transparent,rgba(255,255,255,.16) 22%,
    rgba(255,255,255,.16) 78%,transparent) 1}
.h-nav a{overflow:hidden}
.h-nav a::before{content:"";position:absolute;inset:auto 12px 4px;height:1px;
  background:var(--chrome);background-size:100% 400%;
  transform:scaleX(0);transform-origin:center;transition:transform .35s var(--ez)}
.h-nav a:hover::before{transform:scaleX(1)}
.h-nav a[aria-current]{background:rgba(169,194,232,.08);box-shadow:none}
.h-nav a[aria-current]::before{transform:scaleX(1);height:1.5px;
  background:linear-gradient(90deg,transparent,var(--acc),transparent)}

/* la puce du compte : un liseré métal, pas une simple bordure */
.h-moi{position:relative;border-color:transparent;
  background:linear-gradient(rgba(6,6,6,.6),rgba(6,6,6,.6)) padding-box,
             linear-gradient(150deg,rgba(255,255,255,.30),rgba(255,255,255,.05) 46%,
               rgba(255,255,255,.24)) border-box;
  border:1px solid transparent}
.h-moi:hover{background:linear-gradient(rgba(169,194,232,.10),rgba(6,6,6,.6)) padding-box,
             linear-gradient(150deg,var(--acc),rgba(255,255,255,.12) 52%,var(--acc)) border-box}
.h-moi img{border-color:rgba(255,255,255,.22)}

/* les boutons pleins gardent le reflet du chrome au survol */
.btn-main,.btn-send,.h-cta{position:relative;overflow:hidden;background:var(--silver)}
.btn-main::after,.btn-send::after,.h-cta::after{content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.85) 50%,transparent 66%);
  transform:translateX(-120%);transition:transform .7s var(--ez)}
.btn-main:hover::after,.btn-send:hover::after,.h-cta:hover::after{transform:translateX(120%)}

/* les onglets du hub et les volets : même liseré */
.volet[aria-pressed="true"]{
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 34%,transparent),
             0 0 22px -8px var(--acc-glow)}

/* le menu déplié au téléphone : plus lisible, séparateurs francs */
@media(max-width:900px){
  .h-nav{padding:0 0 10px;box-shadow:0 24px 60px rgba(0,0,0,.7)}
  .h-nav a{border-bottom:1px solid rgba(255,255,255,.05);font-size:11px;letter-spacing:.24em}
  .h-nav a:last-child{border-bottom:none}
  .h-nav a::before{inset:auto 0 0;height:2px}
  .h-nav a[aria-current]{background:rgba(169,194,232,.10)}
}

/* ---------- liens libres d'un profil ---------- */
.p-liens-libres{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:9px}
.p-ll{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 17px;border:1px solid var(--line);border-radius:6px;
  background:rgba(255,255,255,.02);transition:all .3s var(--ez);overflow-wrap:anywhere}
.p-ll:hover{border-color:color-mix(in srgb,var(--sc,var(--acc)) 50%,transparent);
  background:color-mix(in srgb,var(--sc,var(--acc)) 7%,transparent);transform:translateY(-2px)}
.p-ll b{font-family:'Archivo',sans-serif;font-size:10px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase}
.p-ll .arr{width:26px;height:26px;border-radius:50%;flex:none;border:1px solid var(--ink-14);
  display:flex;align-items:center;justify-content:center;transition:all .3s var(--ez)}
.p-ll:hover .arr{border-color:var(--sc,var(--acc));transform:translateX(3px)}
.p-ll .arr svg{width:11px;height:11px}
.lien-ligne{display:flex;gap:9px;align-items:flex-end;margin-bottom:10px;flex-wrap:wrap}
.lien-ligne .fld{margin:0;min-width:0}
.lien-ligne .fld.i{flex:0 0 190px}
.lien-ligne .fld.u{flex:1 1 240px}
.lien-ligne button{flex:none;height:47px;padding:0 15px;border-radius:3px;
  border:1px solid var(--ink-14);color:var(--ink-45);font-family:'Archivo',sans-serif;
  font-size:9px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  transition:all .3s var(--ez)}
.lien-ligne button:hover{border-color:#ff8a8a;color:#ff8a8a}
@media(max-width:600px){.lien-ligne .fld.i,.lien-ligne .fld.u{flex:1 1 100%}
  .lien-ligne button{width:100%}}

/* ---------- choix du rôle à l'inscription ---------- */
.choix{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:10px}
@media(max-width:640px){.choix{grid-template-columns:1fr}}
.choix-c{display:flex;flex-direction:column;gap:7px;text-align:left;padding:18px 20px;
  border-radius:8px;border:1px solid var(--ink-14);background:rgba(255,255,255,.02);
  transition:all .3s var(--ez)}
.choix-c:hover{border-color:rgba(255,255,255,.3)}
.choix-c[aria-pressed="true"]{border-color:var(--acc);background:rgba(169,194,232,.08);
  box-shadow:inset 0 0 0 1px rgba(169,194,232,.25),0 0 26px -10px var(--acc-glow)}
.choix-c .t{font-family:'Archivo Black',sans-serif;font-weight:400;font-size:14px;
  text-transform:uppercase;letter-spacing:.02em}
.choix-c[aria-pressed="true"] .t{color:var(--acc)}
.choix-c .d{font-size:13px;line-height:1.6;color:var(--ink-45)}

/* Quatre rôles au lieu de trois : à 228 px minimum, la grille tombait sur
   deux lignes de deux et la dernière carte restait seule. On resserre, et
   chaque carte porte son picto — quatre pavés de texte se ressemblent trop
   pour qu'on les distingue d'un coup d'œil. */
.choix-4{grid-template-columns:repeat(auto-fit,minmax(196px,1fr))}
.choix-c .p{display:flex;width:38px;height:38px;margin-bottom:3px;
  align-items:center;justify-content:center;border-radius:9px;
  border:1px solid var(--ink-14);background:rgba(255,255,255,.03);
  color:var(--ink-45);transition:all .3s var(--ez)}
.choix-c:hover .p{color:var(--ink)}
.choix-c[aria-pressed="true"] .p{color:var(--acc);border-color:var(--acc);
  background:rgba(169,194,232,.12)}
.choix-c .p svg{width:21px;height:21px}
@media(max-width:640px){
  /* en une colonne, le picto passe à gauche du titre plutôt qu'au-dessus :
     quatre cartes empilées faisaient défiler la page entière */
  .choix-4 .choix-c{display:grid;grid-template-columns:auto 1fr;
    column-gap:13px;row-gap:5px;padding:15px 16px;align-items:center}
  .choix-4 .choix-c .p{grid-row:1/3;width:34px;height:34px;margin:0}
  .choix-4 .choix-c .t{align-self:end}
  .choix-4 .choix-c .d{align-self:start;font-size:12.5px;line-height:1.5}
}

/* ---------- aide sous un champ ---------- */
.aide{margin-top:7px;font-size:12px;line-height:1.55;color:rgba(242,242,242,.34)}
.aide.ok{color:#8ee6a8}
.aide.nok{color:#ffb3b3}

/* ---------- familles repliables ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:12px 0 0;align-items:flex-start}
.famille{padding:0;border:none;flex:0 0 auto}
.famille.ouverte{flex:1 1 100%;border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);padding:12px 0;margin:4px 0}
.famille-t{margin-bottom:0}
.famille.ouverte .famille-t{margin-bottom:11px}
.famille-t .fl{width:11px;height:11px;opacity:.5;transition:transform .3s var(--ez)}
.famille-t[aria-expanded="true"] .fl{transform:rotate(180deg);opacity:1}
.famille-t[aria-pressed="true"] .n{opacity:1;color:var(--fc);letter-spacing:.1em}
.chip.tout{border-style:dashed;color:rgba(242,242,242,.34);letter-spacing:.16em}
.chip.tout:hover{border-color:var(--fc);color:var(--fc);border-style:solid}

/* ---------- accueil des messages privés ---------- */
.accueil{margin:auto;max-width:52ch;padding:40px clamp(20px,5vw,44px);text-align:left}
.accueil h2{font-family:'Bebas Neue',sans-serif;font-size:clamp(28px,4vw,38px);
  text-transform:uppercase;letter-spacing:.02em;color:#fff;line-height:1;margin-bottom:16px}
.accueil p{color:var(--ink-45);font-size:14.5px;line-height:1.75}
.accueil p + p{margin-top:14px}
.accueil b{color:var(--ink);font-weight:500}
.accueil .confid{padding:15px 18px;border-radius:6px;
  border:1px solid rgba(142,230,168,.28);background:rgba(142,230,168,.06)}
.accueil .confid b{color:#8ee6a8}
.accueil .exemple{margin-top:20px;padding:16px 18px;border-left:2px solid var(--acc);
  background:rgba(255,255,255,.025);font-style:italic;font-size:14px}
.accueil .exemple .q{display:block;font-style:normal;font-family:'Archivo',sans-serif;
  font-size:9px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--acc);margin-bottom:9px}
.accueil .ou{display:flex;gap:9px;flex-wrap:wrap;margin-top:24px}

/* ---------- exemple d'offre ---------- */
.exemple-bloc{margin-bottom:26px;border:1px dashed rgba(255,255,255,.16);
  border-radius:9px;overflow:hidden}
.exemple-t{padding:11px 18px;background:rgba(255,255,255,.03);
  border-bottom:1px dashed rgba(255,255,255,.16);
  font-family:'Archivo',sans-serif;font-size:9px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-45)}
.exemple-c{padding:18px;display:grid;gap:16px;
  grid-template-columns:minmax(0,380px) minmax(0,1fr);align-items:start}
@media(max-width:760px){.exemple-c{grid-template-columns:1fr}}
.exemple-c .annonce{opacity:.72}
.exemple-n{color:var(--ink-45);font-size:13.5px;line-height:1.8}
.exemple-n b{color:var(--ink);font-weight:500}

/* ═══════════════════════════════════════════════════════════
   TYPOGRAPHIE — refonte pour la lisibilité
   Le problème n'était pas seulement la taille : un interlettrage à .26em
   sur du 9 px détruit la forme des mots, on épelle au lieu de lire.
   On remonte les tailles ET on resserre l'espacement. Le caractère de la
   charte reste — il est dans les polices et les capitales, pas dans
   l'écartement extrême.
   ═══════════════════════════════════════════════════════════ */

/* ---------- micro-libellés ---------- */
.row .k,.p-link .k,.p-stat .k,.p-pr .k,.compteur .k,.p-ll b,
.hero .meta .m .k,.fld label,.sc-vu .t span{
  font-size:10.5px;letter-spacing:.13em}
.fld label{font-size:11px;letter-spacing:.12em;margin-bottom:9px;color:rgba(242,242,242,.62)}
.fld label small{font-size:10.5px;letter-spacing:.06em;color:rgba(242,242,242,.36)}

/* ---------- étiquettes de genre ---------- */
.tag{font-size:11px;letter-spacing:.06em;padding:5px 11px;font-weight:600}
.p-styles .tag{font-size:12px;padding:8px 16px;letter-spacing:.05em}

/* ---------- puces de filtre ---------- */
.chip{font-size:12px;letter-spacing:.05em;padding:9px 16px;font-weight:600}
.chip .n{font-size:11px;opacity:.55;margin-left:8px}
.famille-t{font-size:12.5px;letter-spacing:.12em;padding:8px 16px 8px 13px}
.famille-t .n{font-size:11px;letter-spacing:.02em}
.f-panneau .lg{font-size:10.5px;letter-spacing:.16em;padding-top:16px}

/* ---------- boutons ---------- */
.mini{font-size:11px;letter-spacing:.09em;padding:10px 17px}
.tbtn,.f-toggle{font-size:11.5px;letter-spacing:.11em;padding:13px 20px}
.btn-main,.btn-send{font-size:13px;letter-spacing:.11em}
.btn-ghost{font-size:12px;letter-spacing:.11em}
.h-cta{font-size:11px;letter-spacing:.11em;padding:11px 20px}
.volet{font-size:12px;letter-spacing:.11em}
.hub-onglet{font-size:11px;letter-spacing:.09em;padding:9px 16px}
.p-cta a,.p-cta button{font-size:11.5px;letter-spacing:.09em;padding:13px 22px}
.fichier{font-size:11px;letter-spacing:.09em}
.choix-c .t{font-size:15px}
.lien-ligne button,.ig-ligne button{font-size:10.5px;letter-spacing:.09em}

/* ---------- titres de section ---------- */
.bloc h3,.p-sec h3{font-size:12.5px;letter-spacing:.13em;gap:14px}
.p-sec h3{margin-bottom:18px}
.bloc h3{margin-bottom:18px}
.eyebrow{font-size:11.5px;letter-spacing:.2em;margin-bottom:18px}
.countline{font-size:11px;letter-spacing:.1em;padding:20px 2px 24px}
.exemple-t,.dm .liste .titre,.apercu-note,.accueil .exemple .q{
  font-size:10.5px;letter-spacing:.16em}

/* ---------- navigation ---------- */
.h-nav a{font-size:11.5px;letter-spacing:.1em;padding:10px 16px}
.h-moi span b{font-size:11.5px;letter-spacing:.01em}
.h-moi span i{font-size:9.5px;letter-spacing:.12em}
.p-back{font-size:11.5px;letter-spacing:.11em}
.p-nav .p-ig{font-size:11px;letter-spacing:.11em}

/* ---------- corps de texte ---------- */
.txt,.page-lead,.hero .sub,.p-note,.fdlg-lead,.exemple-n,.accueil p{
  font-size:15px;line-height:1.78}
.prose p,.prose li{font-size:15px;line-height:1.85}
.card .handle{font-size:12.5px}
.nom{font-size:clamp(13.5px,1.2vw,15.5px);letter-spacing:.01em}
.annonce .titre{font-size:16px;letter-spacing:.01em;line-height:1.35}
.annonce .desc{font-size:14.5px;line-height:1.75}
.annonce .par{font-size:12.5px}
.orga .n b{font-size:15px}
.orga .n span{font-size:12.5px}
.orga .desc{font-size:14.5px}
.msg .b{font-size:15px;line-height:1.65}
.msg .qui{font-size:10.5px;letter-spacing:.09em}
.conv .t b{font-size:13px}
.conv .t span{font-size:13px}
.hub-l .t b{font-size:13.5px}
.hub-l .t span{font-size:12.5px}
.rangee .id b{font-size:14px}
.rangee .id span{font-size:12.5px}
.badge{font-size:10px;letter-spacing:.1em;padding:6px 14px}
.foot{font-size:16px;letter-spacing:.06em}
.p-sub{font-size:12.5px;letter-spacing:.13em}
.p-stat .k,.compteur .k{margin-bottom:9px}
.p-pr .v,.p-link .v,.row .v{font-size:15px}
.chiffre span{font-size:9.5px;letter-spacing:.13em}
footer{font-size:11px;letter-spacing:.12em}

/* ---------- au téléphone, on ne descend jamais sous 11 px ---------- */
@media(max-width:760px){
  .tag{font-size:11.5px}
  .chip{font-size:12.5px;padding:10px 16px}
  .famille-t{font-size:13px}
  .mini{font-size:11.5px;padding:11px 16px}
  .bloc h3,.p-sec h3{font-size:13px}
  .countline{font-size:11px;line-height:1.6}
  .txt,.page-lead,.hero .sub,.prose p,.prose li{font-size:15.5px}
  .fld label{font-size:11.5px}
  .h-nav a{font-size:12.5px}
}

/* ---------- champ de saisie des genres ---------- */
.styles-choisis{display:flex;gap:8px;flex-wrap:wrap;min-height:38px;align-items:center;
  margin-bottom:12px}
.styles-vide{font-size:13.5px;color:rgba(242,242,242,.3)}
.tag-ret{display:inline-flex;align-items:center;gap:10px;padding:8px 12px 8px 15px;
  border-radius:999px;font-family:'Archivo',sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;color:var(--sc,var(--acc));
  border:1px solid color-mix(in srgb,var(--sc,var(--acc)) 46%,transparent);
  background:color-mix(in srgb,var(--sc,var(--acc)) 11%,transparent);
  transition:all .3s var(--ez)}
.tag-ret span{font-size:11px;opacity:.6}
.tag-ret:hover{border-color:#ff8a8a;color:#ff8a8a;background:rgba(255,138,138,.09)}
.styles-saisie{display:flex;gap:9px;align-items:stretch}
.styles-saisie input{flex:1;min-width:0;background:rgba(6,6,6,.7);color:var(--ink);
  border:1px solid rgba(255,255,255,.13);padding:13px 15px;font-size:15px;border-radius:3px;
  transition:border-color .3s var(--ez)}
.styles-saisie input:focus{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc-glow)}
.styles-saisie input[disabled]{opacity:.4}
.styles-saisie .mini{flex:none;padding:0 20px}
.styles-suggest{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-top:14px}
.styles-lg{font-family:'Archivo',sans-serif;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(242,242,242,.3);margin-right:4px}
.styles-suggest .chip{cursor:pointer}
.styles-suggest .chip:hover{border-color:var(--sc);color:var(--sc)}

/* Les compétences du Studio, groupées par métier. Une liste à plat donnait
   l'impression d'un formulaire de photographe : le vidéaste et le graphiste
   doivent voir leur propre rubrique tout de suite. */
.comp-fams{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.comp-fam{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.comp-fam .styles-lg{width:100%;margin:0 0 2px;color:var(--sc,var(--ink-45))}
.comp-fam .chip{font-size:11px;letter-spacing:.04em;text-transform:none;padding:6px 12px}
@media(max-width:640px){.comp-fam .chip{font-size:12px;padding:7px 13px}}

/* ---------- le line-up d'une soirée ----------
   Qui joue, choisi parmi les profils inscrits. Chacun reçoit une invitation :
   la date n'apparaît sur sa fiche que s'il l'accepte. */
.lu-choisis{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:10px;min-height:34px;
  align-items:center}
.lu-tag{display:inline-flex;align-items:center;gap:7px;padding:5px 11px 5px 5px;
  border-radius:999px;border:1px solid var(--ink-14);background:rgba(255,255,255,.03);
  font-size:12.5px;transition:all .3s var(--ez)}
.lu-tag:hover{border-color:#ff8a8a;color:#ff8a8a}
.lu-tag img{width:24px;height:24px;border-radius:50%;object-fit:cover;flex:none}
.lu-tag span{opacity:.45;font-size:11px;margin-left:2px}
.lu-cherche input{width:100%;padding:12px 15px;border-radius:8px;
  border:1px solid var(--ink-14);background:rgba(6,6,6,.5);font-size:13.5px}
.lu-cherche input:focus{border-color:var(--acc)}
.lu-liste{margin-top:7px;border:1px solid var(--ink-14);border-radius:8px;
  background:#101013;overflow:hidden;max-height:290px;overflow-y:auto}
.lu-liste[hidden]{display:none}
.lu-p{display:flex;align-items:center;gap:11px;width:100%;padding:9px 13px;
  text-align:left;border-bottom:1px solid rgba(255,255,255,.05);
  transition:background .2s var(--ez)}
.lu-p:last-child{border-bottom:0}
.lu-p:hover{background:rgba(169,194,232,.08)}
.lu-p img{width:32px;height:32px;border-radius:50%;object-fit:cover;flex:none}
.lu-p b{display:block;font-size:13px;font-weight:600}
.lu-p i{display:block;font-style:normal;font-size:11.5px;color:var(--ink-45);margin-top:1px}
.lu-rien{padding:13px;font-size:12.5px;line-height:1.5;color:var(--ink-45)}

/* le line-up rappelé sous une date, sur la fiche comme dans le profil */
.date-lu{display:block;font-size:11.5px;line-height:1.45;margin-top:4px;
  color:color-mix(in srgb,var(--sc,var(--acc)) 72%,var(--ink-45))}
.date-lu b{font-weight:600}
.date-l.invite{border-left:2px solid color-mix(in srgb,var(--acc) 55%,transparent)}

/* le panneau qui s'ouvre sous une date pour composer son line-up */
.date-lu-edit{margin:-4px 0 12px;padding:14px 16px;border-radius:0 0 8px 8px;
  border:1px solid var(--ink-14);border-top:0;background:rgba(255,255,255,.02)}
.date-lu-edit[hidden]{display:none}
.lu-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
@media(max-width:640px){
  .lu-p{padding:11px 13px}
  .lu-p img{width:36px;height:36px}
  .lu-actions .mini{flex:1;text-align:center}
}

/* ---------- genres en attente, côté administration ---------- */
.genre-l{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:13px 16px;
  border:1px solid var(--line);border-radius:6px;background:rgba(255,255,255,.02);
  margin-bottom:9px}
.genre-l b{font-family:'Archivo Black',sans-serif;font-weight:400;font-size:14px;
  text-transform:uppercase;letter-spacing:.02em}
.genre-l .par{font-size:12.5px;color:var(--ink-45);flex:1;min-width:150px}
.genre-l select{background:rgba(6,6,6,.7);color:var(--ink);border:1px solid var(--ink-14);
  padding:9px 12px;border-radius:3px;font-size:13px}
.genre-l .act{display:flex;gap:7px;flex-wrap:wrap}

/* ---------- complétion de fiche ---------- */
.compl{padding:22px 24px;border-radius:9px;margin-bottom:16px;
  border:1px solid color-mix(in srgb,var(--acc) 26%,transparent);
  background:linear-gradient(150deg,rgba(169,194,232,.09),rgba(255,255,255,.015))}
.compl.pleine{border-color:rgba(142,230,168,.34);
  background:linear-gradient(150deg,rgba(142,230,168,.09),rgba(255,255,255,.015))}
.compl-h{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  flex-wrap:wrap;margin-bottom:14px}
.compl-h b{font-family:'Archivo',sans-serif;font-size:12.5px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase}
.compl-h .pc{font-family:'Bebas Neue',sans-serif;font-size:30px;line-height:1;color:var(--acc)}
.compl.pleine .compl-h .pc{color:#8ee6a8}
.compl-jauge{height:5px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.compl-jauge i{display:block;height:100%;border-radius:99px;background:var(--silver);
  transition:width .8s var(--ez)}
.compl.pleine .compl-jauge i{background:linear-gradient(90deg,#8ee6a8,#cfeed8)}
.compl-l{display:flex;flex-direction:column;gap:9px;margin-top:16px}
.compl-l li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;line-height:1.55;
  list-style:none}
.compl-l li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;
  background:var(--acc);margin-top:7px;box-shadow:0 0 9px var(--acc-glow)}
.compl-l li span{color:var(--ink-45);font-size:13.5px}
.compl-fait{font-size:14.5px;line-height:1.7;color:var(--ink-45)}
.compl-fait b{color:#8ee6a8}

/* les derniers libellés sous le seuil de lisibilité */
.hub-pied .mini{font-size:10.5px;letter-spacing:.08em;padding:11px 10px}
.h-moi span i{font-size:10px;letter-spacing:.1em}
.chiffre span{font-size:10px}
.styles-lg{font-size:10.5px}
.msg .qui time,.conv .q time,.hub-l time{font-size:11px}
.chargement{font-size:11px;letter-spacing:.14em}

/* ═══════════════════════════════════════════════════════════
   CARTES D'ARTISTE — refonte
   La photo prend toute la carte, le reste monte du bas. Un annuaire de
   DJ se regarde autant qu'il se lit : une vignette de 56 px ne donne
   envie de cliquer sur personne.
   ═══════════════════════════════════════════════════════════ */
/* Des vignettes plus petites et plus espacées : à 232 px elles se touchaient
   presque, et l'œil ne trouvait plus où se poser. */
.grid{grid-template-columns:repeat(auto-fill,minmax(208px,1fr));gap:20px}

.card{position:relative;display:block;padding:0;aspect-ratio:3/4;overflow:hidden;
  border-radius:10px;border:1px solid var(--line);background:#0a0a0b;
  box-shadow:0 2px 14px rgba(0,0,0,.5);
  transition:transform .55s var(--ez),box-shadow .55s var(--ez),border-color .45s var(--ez);
  will-change:transform}
.card:hover{transform:translateY(-6px);
  border-color:color-mix(in srgb,var(--sc,var(--acc)) 55%,transparent);
  box-shadow:0 18px 48px rgba(0,0,0,.66),
             0 0 0 1px color-mix(in srgb,var(--sc,var(--acc)) 26%,transparent),
             0 0 38px -12px color-mix(in srgb,var(--sc,var(--acc)) 60%,transparent)}
.card:active{transform:translateY(-2px) scale(.993)}

/* ---------- la photo ---------- */
.c-photo{position:absolute;inset:0;overflow:hidden;background:#0a0a0b}
.c-photo img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.06) brightness(.86);
  transform:scale(1.02);
  transition:transform 1.1s var(--ez),filter .6s var(--ez)}
.card:hover .c-photo img{transform:scale(1.09);filter:grayscale(0) contrast(1) brightness(1)}

/* le voile : sans lui, le nom se perd sur une photo claire */
.c-voile{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,6,6,.34) 0%,rgba(6,6,6,0) 30%,
    rgba(6,6,6,.62) 62%,rgba(6,6,6,.94) 100%);
  transition:opacity .5s var(--ez)}
.card:hover .c-voile{opacity:.92}

/* la teinte du genre, qui monte du bas au survol */
.c-teinte{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,transparent 44%,
    color-mix(in srgb,var(--sc,var(--acc)) 30%,transparent) 100%);
  transition:opacity .55s var(--ez);mix-blend-mode:screen}
.card:hover .c-teinte{opacity:1}

/* le halo qui suit le curseur */
.c-halo{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(180px circle at var(--mx,50%) var(--my,50%),
    color-mix(in srgb,var(--sc,var(--acc)) 26%,transparent),transparent 62%);
  transition:opacity .4s var(--ez)}
.card:hover .c-halo{opacity:1}

/* ---------- le contenu ---------- */
.c-bas{position:absolute;inset:auto 0 0 0;padding:18px 17px 17px;z-index:2;
  display:flex;flex-direction:column;gap:9px}
.c-nom{font-family:'Archivo Black',sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(15px,1.5vw,18px);letter-spacing:.005em;line-height:1.16;color:#fff;
  text-shadow:0 2px 16px rgba(0,0,0,.9);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  transition:transform .5s var(--ez)}
.card:hover .c-nom{transform:translateY(-2px)}
.c-sous{font-size:12.5px;color:rgba(255,255,255,.62);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-shadow:0 1px 8px rgba(0,0,0,.8)}

/* les genres : repliés, ils se déploient au survol */
.c-tags{display:flex;gap:5px;flex-wrap:wrap;max-height:0;opacity:0;overflow:hidden;
  transition:max-height .5s var(--ez),opacity .4s var(--ez)}
.card:hover .c-tags,.card:focus-visible .c-tags{max-height:70px;opacity:1}
.c-tags .tag{font-size:10px;padding:4px 9px;letter-spacing:.04em;
  background:rgba(0,0,0,.42);backdrop-filter:blur(6px)}

/* la flèche, en pastille */
.c-go{position:absolute;top:14px;right:14px;z-index:2;
  width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.2);background:rgba(6,6,6,.42);
  backdrop-filter:blur(8px);color:#fff;
  opacity:0;transform:translateY(-6px) scale(.9);
  transition:all .45s var(--ez)}
.card:hover .c-go{opacity:1;transform:translateY(0) scale(1);
  border-color:var(--sc,var(--acc));background:color-mix(in srgb,var(--sc,var(--acc)) 30%,rgba(6,6,6,.5))}
.c-go svg{width:14px;height:14px}

/* le liseré chrome qui parcourt le bord */
.card::after{content:"";position:absolute;inset:0;border-radius:10px;pointer-events:none;
  padding:1px;opacity:0;transition:opacity .5s var(--ez);
  background:linear-gradient(130deg,transparent 28%,
    color-mix(in srgb,var(--sc,var(--acc)) 85%,white) 47%,
    rgba(255,255,255,.9) 52%,
    color-mix(in srgb,var(--sc,var(--acc)) 85%,white) 57%,transparent 76%);
  background-size:280% 280%;background-position:0% 0%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.card:hover::after{opacity:.85;animation:liserer 1.5s var(--ez)}
@keyframes liserer{from{background-position:0% 0%}to{background-position:100% 100%}}

/* le coin gravé, repris de l'ancienne carte */
.card i.c{position:absolute;z-index:2;width:16px;height:16px;opacity:.4;pointer-events:none;
  border-top:1px solid rgba(255,255,255,.7);border-left:1px solid rgba(255,255,255,.7);
  transition:opacity .4s var(--ez),width .5s var(--ez),height .5s var(--ez)}
.card i.c1{top:10px;left:10px}
.card i.c2{bottom:10px;right:10px;transform:rotate(180deg);border-color:rgba(255,255,255,.35)}
.card:hover i.c{opacity:.9;width:22px;height:22px;border-color:var(--sc,var(--acc))}

/* ---------- sans photo ---------- */
.c-photo.vide{display:flex;align-items:center;justify-content:center;
  background:linear-gradient(155deg,
    color-mix(in srgb,var(--sc,var(--acc)) 16%,#0c0c0e),#08080a 62%)}
.c-init{font-family:'Bebas Neue',sans-serif;font-size:clamp(46px,7vw,64px);line-height:1;
  letter-spacing:.06em;color:rgba(255,255,255,.13);
  transition:color .5s var(--ez),transform .8s var(--ez)}
.card:hover .c-init{color:color-mix(in srgb,var(--sc,var(--acc)) 46%,transparent);
  transform:scale(1.06)}

/* ---------- apparition au défilement ---------- */
.card.entre{opacity:0;transform:translateY(22px)}
.card.vue{opacity:1;transform:translateY(0);
  transition:opacity .62s var(--ez),transform .62s var(--ez)}
.card.vue:hover{transform:translateY(-6px)}

@media(max-width:760px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:11px}
  .card{aspect-ratio:3/4;border-radius:8px}
  .c-bas{padding:13px 12px 12px;gap:7px}
  .c-nom{font-size:14px}
  .c-sous{font-size:11.5px}
  /* au doigt, il n'y a pas de survol : on montre tout d'emblée */
  .c-tags{max-height:70px;opacity:1}
  .c-go{opacity:1;transform:none;width:30px;height:30px;top:10px;right:10px}
  .c-voile{background:linear-gradient(180deg,rgba(6,6,6,.3) 0%,rgba(6,6,6,0) 26%,
    rgba(6,6,6,.7) 58%,rgba(6,6,6,.96) 100%)}
  .c-photo img{filter:grayscale(.35) contrast(1.02) brightness(.92)}
}

/* ---------- on respecte ceux qui coupent les animations ---------- */
@media (prefers-reduced-motion:reduce){
  .card,.card *,.card::after{transition:none !important;animation:none !important}
  .card:hover{transform:none}
  .card.entre{opacity:1;transform:none}
  .c-tags{max-height:70px;opacity:1}
  .c-go{opacity:1;transform:none}
}

/* Le bloc du bas ne doit jamais dépasser la carte : au téléphone, trois
   étiquettes passent à la ligne et se font couper par le bord. */
.c-bas{max-height:74%;overflow:hidden}
@media(max-width:760px){
  .c-tags{flex-wrap:nowrap;overflow:hidden;max-height:26px}
  /* sur une vignette de 150 px, un troisième genre serait tronqué :
     mieux vaut deux entiers qu'un demi */
  .c-tags .tag:nth-child(n+3){display:none}
  .c-tags .tag{flex:none;font-size:10.5px;padding:4px 9px}
  .c-bas{gap:6px;max-height:62%}
}
@media(max-width:400px){
  .grid{grid-template-columns:1fr 1fr;gap:9px}
  .c-tags .tag:nth-child(n+2){display:none}
}

/* ═══════════════════════════════════════════════════════════
   CARTES — la couleur et les genres, tout de suite
   Le noir et blanc au repos donnait un annuaire d'archives. La couleur
   des photos porte la vie de la scène, et les genres sont l'information
   qu'on cherche en premier : ni l'une ni les autres ne doivent se mériter.
   Le survol garde de quoi répondre : zoom, liseré, flèche, halo, élévation.
   ═══════════════════════════════════════════════════════════ */
.c-photo img{filter:contrast(1.02) saturate(1.04) brightness(.94)}
.card:hover .c-photo img{filter:contrast(1.04) saturate(1.12) brightness(1.04);
  transform:scale(1.07)}

.c-tags{max-height:none;opacity:1;overflow:visible}
.card:hover .c-tags,.card:focus-visible .c-tags{max-height:none}
.c-tags .tag{background:rgba(0,0,0,.55);backdrop-filter:blur(7px);
  border-color:color-mix(in srgb,var(--sc,#8a94a3) 52%,transparent);
  transition:border-color .4s var(--ez),background .4s var(--ez)}
.card:hover .c-tags .tag{background:rgba(0,0,0,.4);
  border-color:color-mix(in srgb,var(--sc,#8a94a3) 78%,transparent)}

/* la photo est en couleur : le voile doit travailler plus pour que le nom
   tienne sur un fond clair */
.c-voile{background:linear-gradient(180deg,rgba(6,6,6,.42) 0%,rgba(6,6,6,.06) 26%,
  rgba(6,6,6,.72) 58%,rgba(6,6,6,.96) 100%)}
.card:hover .c-voile{opacity:1}
.c-nom{text-shadow:0 2px 20px rgba(0,0,0,.95),0 0 40px rgba(0,0,0,.7)}
.c-sous{text-shadow:0 1px 12px rgba(0,0,0,.9)}

/* la flèche reste le signal du survol */
.c-go{background:rgba(6,6,6,.55)}

/* ═══════════════════════════════════════════════════════════
   FONDS PAR SCÈNE
   Chaque page a son décor. Le fond reste très sombre et sans détail au
   centre : il porte l'atmosphère, jamais l'information.
   ═══════════════════════════════════════════════════════════ */
.bg{background-image:url("fond/annuaire-bureau.webp")}
@media (orientation:portrait){.bg{background-image:url("fond/annuaire-mobile.webp")}}

body[data-scene="organisateurs"] .bg{background-image:url("fond/organisateurs-bureau.webp")}
body[data-scene="opportunites"]  .bg{background-image:url("fond/opportunites-bureau.webp")}
body[data-scene="salon"]         .bg{background-image:url("fond/salon-bureau.webp")}
body[data-scene="compte"]        .bg{background-image:url("fond/compte-bureau.webp")}
body[data-scene="portail"]       .bg{background-image:url("fond/portail-bureau.webp")}
body[data-scene="gestion"]       .bg{background-image:url("fond/gestion-bureau.webp")}

@media (orientation:portrait){
  body[data-scene="organisateurs"] .bg{background-image:url("fond/organisateurs-mobile.webp")}
  body[data-scene="opportunites"]  .bg{background-image:url("fond/opportunites-mobile.webp")}
  body[data-scene="salon"]         .bg{background-image:url("fond/salon-mobile.webp")}
  body[data-scene="compte"]        .bg{background-image:url("fond/compte-mobile.webp")}
  body[data-scene="portail"]       .bg{background-image:url("fond/portail-mobile.webp")}
  body[data-scene="gestion"]       .bg{background-image:url("fond/gestion-mobile.webp")}
}

/* ═══════════════════════════════════════════════════════════
   PICTOS CHROMÉS
   Utilisés là où ils portent : navigation, écrans vides, titres.
   Le trait fin reste pour les usages minuscules, où le métal deviendrait
   une tache grise.
   ═══════════════════════════════════════════════════════════ */
.ic{display:inline-block;flex:none;background:no-repeat center/contain;
  vertical-align:middle}
.ic-16{width:16px;height:16px}
.ic-20{width:20px;height:20px}
.ic-28{width:28px;height:28px}
.ic-120{width:clamp(74px,16vw,116px);height:clamp(74px,16vw,116px);opacity:.9}

/* Dans la navigation, les pictos chromés se noyaient dans le fond : à 16 px,
   un dégradé argent sur du noir devient une tache grise. On les aplatit en
   silhouette blanche — même taille, mais nettement plus lisible. */
.h-nav a .ic{margin-right:9px;opacity:1;
  filter:brightness(0) invert(1);
  transition:filter .3s var(--ez)}
.h-nav a:hover .ic{filter:brightness(0) invert(1) drop-shadow(0 0 6px rgba(255,255,255,.45))}
.h-nav a[aria-current] .ic{filter:brightness(0) invert(1) drop-shadow(0 0 7px var(--acc-glow))}
@media(max-width:900px){.h-nav a .ic{margin-right:11px}}

/* au-dessus d'un écran vide, un picto en grand change tout */
.vide-ic{display:flex;flex-direction:column;align-items:center;gap:18px}
.vide-ic .ic{filter:drop-shadow(0 6px 26px rgba(0,0,0,.8))}

/* ---------- collaborations déclarées ---------- */
.p-near a{position:relative;flex-direction:column;align-items:flex-start;gap:4px;
  padding:9px 16px 9px 9px}
.p-near a{flex-direction:row;align-items:center;gap:11px}
.p-near .quand{font-family:'Archivo',sans-serif;font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-45);margin-left:2px}

.collab-choix{display:flex;gap:9px;align-items:flex-end;flex-wrap:wrap;margin-bottom:14px}
.collab-choix .fld{flex:1 1 240px;margin:0;min-width:0}
.collab-choix .fld.q{flex:0 0 170px}
.collab-l{display:flex;gap:11px;align-items:center;flex-wrap:wrap;padding:11px 14px;
  border:1px solid var(--line);border-radius:6px;background:rgba(255,255,255,.02);
  margin-bottom:8px}
.collab-l img{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none}
.collab-l .n{flex:1;min-width:140px}
.collab-l .n b{display:block;font-family:'Archivo Black',sans-serif;font-weight:400;
  font-size:13px;text-transform:uppercase}
.collab-l .n span{font-size:12.5px;color:var(--ink-45)}

/* le bouton de connexion ne doit jamais passer sous le menu déroulant */
.h-right{position:relative;z-index:2}

/* au doigt, une cible de 34 px se rate : on remonte à 44 px sans grossir
   le libellé, la barre garde sa hauteur */
@media(max-width:900px){
  .h-cta{min-height:44px}
  .h-burger{width:44px;height:44px}
  .h-moi img{width:34px;height:34px}
}

/* ---------- fréquentation, écran d'administration ---------- */
.freq{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:10px;
  margin-bottom:18px}
.freq .b{padding:16px 18px;border:1px solid var(--line);border-radius:6px;
  background:rgba(255,255,255,.02)}
.freq .b .v{font-family:'Bebas Neue',sans-serif;font-size:30px;line-height:1;color:#fff}
.freq .b .v.acc{color:var(--acc)}
.freq .b .v.chaud{color:#ffd27d}
.freq .b .k{font-family:'Archivo',sans-serif;font-size:9.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-45);margin-top:8px;line-height:1.4}
.courbe{display:flex;align-items:flex-end;gap:5px;height:96px;padding:0 2px;
  border-bottom:1px solid var(--line);margin-bottom:9px}
.courbe .j{flex:1;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;gap:5px;height:100%}
.courbe .bar{width:100%;border-radius:3px 3px 0 0;min-height:3px;
  background:linear-gradient(180deg,var(--acc),color-mix(in srgb,var(--acc) 26%,transparent));
  transition:height .6s var(--ez)}
.courbe .n{font-family:'Bebas Neue',sans-serif;font-size:14px;color:var(--ink);line-height:1}
.courbe-l{display:flex;gap:5px;padding:0 2px}
.courbe-l span{flex:1;text-align:center;font-family:'Archivo',sans-serif;font-size:9px;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(242,242,242,.35)}

/* ---------- se déconnecter, dans la barre ---------- */
.h-sortir{padding:9px 14px;border-radius:999px;white-space:nowrap;
  font-family:'Archivo',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(242,242,242,.34);
  border:1px solid transparent;transition:all .3s var(--ez)}
.h-sortir:hover{color:#ffb3b3;border-color:rgba(255,138,138,.32);
  background:rgba(255,138,138,.06)}
.h-sortir[disabled]{opacity:.5;cursor:wait}
@media(max-width:900px){
  .h-sortir{width:100%;padding:15px;border-radius:0;font-size:12px;
    border-top:1px solid rgba(255,255,255,.08);margin-top:4px}
  .h-sortir:hover{border-color:transparent;border-top-color:rgba(255,138,138,.3)}
}

/* ═══════════════════════════════════════════════════════════
   PICTOS VECTORIELS
   Tracés en currentColor : posés dans un bloc teinté par la couleur du
   profil, ils prennent cette couleur sans qu'on ait à générer un fichier
   par artiste. Le chrome reste pour les grands formats, où il paye.
   ═══════════════════════════════════════════════════════════ */
.p{display:inline-block;flex:none;vertical-align:-.18em;color:inherit}
.p-fort{filter:drop-shadow(0 0 9px color-mix(in srgb,currentColor 45%,transparent))}

/* la pastille qui porte un picto : c'est elle qui donne la teinte */
.pic{display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;flex:none;border-radius:50%;
  color:var(--sc,var(--acc));
  border:1px solid color-mix(in srgb,currentColor 26%,transparent);
  background:color-mix(in srgb,currentColor 7%,transparent);
  transition:all .35s var(--ez)}
a.pic:hover,button.pic:hover{background:color-mix(in srgb,currentColor 15%,transparent);
  border-color:color-mix(in srgb,currentColor 55%,transparent);transform:translateY(-2px)}
.pic-s{width:30px;height:30px}

/* rangée de liens : un picto par réseau, reconnaissable d'un coup d'œil */
.liens-p{display:flex;gap:9px;flex-wrap:wrap;align-items:center}

/* ---------- écusson de ville ---------- */
.ec{display:block;color:var(--sc,var(--acc));
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.55))}
.ville-ec{display:flex;align-items:center;gap:12px}
.ville-ec .t{font-family:'Archivo',sans-serif;font-size:10px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-45);line-height:1.5}
.ville-ec .t b{display:block;font-family:'Bebas Neue',sans-serif;font-size:19px;
  font-weight:400;letter-spacing:.04em;color:var(--ink)}

/* ═══════════════════════════════════════════════════════════
   LIEUX JOUÉS
   Des étiquettes, pas des fiches. On coche, on décoche.
   ═══════════════════════════════════════════════════════════ */
.lieux-g{display:flex;flex-wrap:wrap;gap:8px}
.lieu-c{display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 7px;
  border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.02);
  font-family:'Archivo',sans-serif;font-size:12.5px;font-weight:500;color:var(--ink-45);
  transition:all .3s var(--ez);cursor:pointer;text-align:left}
.lieu-c img{width:26px;height:26px;border-radius:50%;object-fit:cover;flex:none;
  filter:grayscale(1) contrast(1.1);transition:filter .35s var(--ez)}
.lieu-c .pt{display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;flex:none;
  background:rgba(255,255,255,.05);color:var(--ink-45)}
.lieu-c:hover{border-color:var(--ink-14);color:var(--ink)}
.lieu-c[aria-pressed="true"]{border-color:var(--acc);color:var(--ink);
  background:rgba(169,194,232,.08);box-shadow:inset 0 0 0 1px rgba(169,194,232,.2)}
.lieu-c[aria-pressed="true"] img{filter:none}
.lieux-fiche{display:flex;flex-wrap:wrap;gap:7px}
.lieux-fiche .l{display:inline-flex;align-items:center;gap:8px;padding:6px 13px 6px 6px;
  border-radius:999px;border:1px solid color-mix(in srgb,var(--sc,var(--acc)) 22%,transparent);
  background:color-mix(in srgb,var(--sc,var(--acc)) 6%,transparent);
  font-family:'Archivo',sans-serif;font-size:12px;font-weight:500;color:var(--ink)}
.lieux-fiche .l img{width:24px;height:24px;border-radius:50%;object-fit:cover;flex:none}

/* ---------- proposer un lieu absent de la liste ---------- */
.lieu-add{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px;
  padding-top:13px;border-top:1px solid var(--line)}
.lieu-add input{flex:1 1 190px;min-width:0}

/* ═══════════════════════════════════════════════════════════
   MENU DÉROULANT — version travaillée
   Il s'ouvre en glissant, se ferme au clic dehors et à Échap, et l'onglet
   courant se repère à une barre plutôt qu'à une pastille écrasée.
   ═══════════════════════════════════════════════════════════ */
@media(max-width:900px){
  .h-nav{display:flex;transform:translateY(-10px);opacity:0;pointer-events:none;
    max-height:calc(100dvh - 66px);overflow-y:auto;overscroll-behavior:contain;
    box-shadow:0 26px 50px rgba(0,0,0,.6);
    transition:opacity .28s var(--ez),transform .28s var(--ez)}
  .h-nav.on{transform:none;opacity:1;pointer-events:auto}
  .h-nav a{display:flex;align-items:center;justify-content:flex-start;
    text-align:left;padding:16px 26px;gap:0;font-size:12.5px;letter-spacing:.15em;
    border-left:2px solid transparent}
  .h-nav a[aria-current]{background:rgba(169,194,232,.07);box-shadow:none;
    border-left-color:var(--acc)}
  .h-nav a::before{display:none}
  .h-nav a .pastille{margin-left:auto}
  /* le burger devient une croix : on sait comment refermer */
  .h-burger span{transition:background .2s var(--ez)}
  .h-burger span::before,.h-burger span::after{transition:transform .3s var(--ez)}
  .h-burger[aria-expanded="true"] span{background:transparent}
  .h-burger[aria-expanded="true"] span::before{transform:translateY(5px) rotate(45deg)}
  .h-burger[aria-expanded="true"] span::after{transform:translateY(-5px) rotate(-45deg)}
  body.menu-ouvert{overflow:hidden}
}

/* ═══════════════════════════════════════════════════════════
   LISIBILITÉ SUR TÉLÉPHONE
   Un cran au-dessus : le corps de texte doit rester confortable à bout de
   bras, dans le métro, sans zoomer.
   ═══════════════════════════════════════════════════════════ */
@media(max-width:760px){
  .txt,.page-lead,.hero .sub,.prose p,.prose li{font-size:16.5px;line-height:1.66}
  .mini{font-size:12.5px;padding:12px 17px}
  .chip{font-size:13.5px;padding:11px 17px}
  .tag{font-size:12px}
  .famille-t{font-size:14px}
  .bloc h3,.p-sec h3{font-size:14px;letter-spacing:.13em}
  .fld label{font-size:12.5px;letter-spacing:.12em}
  .fld input,.fld textarea,.fld select{font-size:16px;padding:14px 15px}
  .compl-l li{font-size:15.5px}
  .compl-l li span{font-size:14.5px}
  .compl-fait{font-size:15.5px}
  .countline{font-size:12px}
  .c-nom{font-size:15px}
  .c-sous{font-size:12.5px}
  .collab-l .n b{font-size:13.5px}
  .collab-l .n span{font-size:13px}
  .lieu-c,.lieux-fiche .l{font-size:13.5px}
  .msg .t,.conv .q p{font-size:15.5px}
  footer{font-size:12px}
}

/* ═══════════════════════════════════════════════════════════
   ANNONCES — deux natures
   Une date proposée par un collectif, une recherche de photo/vidéo postée
   par n'importe qui. Elles ne doivent pas se confondre dans la liste.
   ═══════════════════════════════════════════════════════════ */
.an-genre{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;
  border-radius:999px;font-family:'Archivo',sans-serif;font-size:9.5px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase}
.an-genre.date{color:var(--acc);background:rgba(169,194,232,.1);
  box-shadow:inset 0 0 0 1px rgba(169,194,232,.24)}
.an-genre.image{color:#e8d0a9;background:rgba(232,208,169,.1);
  box-shadow:inset 0 0 0 1px rgba(232,208,169,.26)}
.filtre-an{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}

/* ---------- choisir un collectif, logo à l'appui ---------- */
.co-menu{position:relative}
.co-liste{position:absolute;left:0;right:0;top:calc(100% + 5px);z-index:30;
  max-height:296px;overflow-y:auto;overscroll-behavior:contain;
  background:rgba(9,9,9,.98);border:1px solid var(--ink-14);border-radius:7px;
  box-shadow:0 22px 44px rgba(0,0,0,.62);backdrop-filter:blur(16px);padding:5px}
.co-liste[hidden]{display:none}
.co-l{display:flex;align-items:center;gap:11px;width:100%;padding:9px 11px;
  border-radius:5px;text-align:left;transition:background .2s var(--ez)}
.co-l:hover,.co-l[aria-selected="true"]{background:rgba(255,255,255,.06)}
.co-l img{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none;
  border:1px solid var(--ink-14)}
.co-l .n{min-width:0}
.co-l .n b{display:block;font-family:'Archivo Black',sans-serif;font-weight:400;
  font-size:12.5px;text-transform:uppercase;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.co-l .n span{font-size:11.5px;color:var(--ink-45)}
.co-vide{padding:15px 12px;font-size:13px;color:var(--ink-45);text-align:center}

/* ---------- carte d'un métier de l'image ---------- */
/* La grille du Studio. Elle n'avait aucune règle : les cartes s'empilaient
   en blocs pleine largeur, ce qui explique l'impression de liste terne. */
.grille{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(288px,1fr))}
@media(max-width:640px){.grille{grid-template-columns:1fr;gap:12px}}

/* ---------- la carte du Studio ----------
   Ces gens fabriquent des images : la leur passe avant leur nom. La
   couverture occupe le haut de la carte, le nom se pose dessus. C'est ce
   qui distingue un annuaire de créateurs d'un annuaire de DJ. */
.im-c{--sc:var(--acc);position:relative;display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:10px;
  background:rgba(255,255,255,.018);overflow:hidden;
  transition:border-color .4s var(--ez),transform .4s var(--ez)}
.im-c.cliquable{cursor:pointer}
.im-c.cliquable a,.im-c.cliquable button{position:relative;z-index:3}
.im-c:hover{border-color:color-mix(in srgb,var(--sc) 45%,transparent);
  transform:translateY(-3px)}

.im-vue{position:relative;aspect-ratio:4/3;overflow:hidden;
  background:linear-gradient(150deg,
    color-mix(in srgb,var(--sc) 16%,#0c0c0f), #0a0a0c 70%)}
.im-fond{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--ez),filter .4s var(--ez)}
.im-c:hover .im-fond{transform:scale(1.04)}
.im-vide{display:flex;align-items:center;justify-content:center;color:var(--sc);opacity:.32}
/* le voile : le nom se lit sur n'importe quelle image, claire ou sombre */
.im-vue::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,6,6,.55) 0%,rgba(6,6,6,0) 32%,
    rgba(6,6,6,.28) 58%,rgba(6,6,6,.92) 100%)}

.im-metier{position:absolute;z-index:2;left:13px;top:12px;
  padding:5px 10px;border-radius:999px;
  background:rgba(6,6,6,.62);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  border:1px solid rgba(255,255,255,.14);
  font-family:'Archivo',sans-serif;font-size:9px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--sc)}
.im-ville{position:absolute;z-index:2;right:12px;top:11px;opacity:.9;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.8))}
.im-nom{position:absolute;z-index:2;left:13px;right:13px;bottom:12px;
  display:flex;align-items:center;gap:10px;min-width:0}
.im-nom img{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none;
  border:1.5px solid rgba(255,255,255,.75);
  box-shadow:0 3px 12px rgba(0,0,0,.7)}
.im-nom b{font-family:'Archivo Black',sans-serif;font-weight:400;font-size:16px;
  text-transform:uppercase;line-height:1.15;color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-shadow:0 2px 14px rgba(0,0,0,.95)}

.im-bas{display:flex;flex-direction:column;gap:11px;padding:14px 15px 15px}
.im-bas .desc{font-size:12.5px;line-height:1.55;color:var(--ink-45);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.im-liens{display:inline-flex;gap:5px;margin-left:auto}
/* « direction artistique », « community management » : à taille normale,
   chaque étiquette prend toute la largeur d'une carte et elles s'empilent
   une par ligne. On les resserre ici, et seulement ici. */
.im-bas .tag{font-size:8.5px;letter-spacing:.08em;padding:3px 7px}

@media(max-width:640px){
  .im-vue{aspect-ratio:16/10}
  .im-nom b{font-size:15px}
  .im-bas{padding:13px 13px 14px}
  .im-liens{margin-left:0;width:100%;margin-top:2px}
}

/* ---------- ce qu'ils ont partagé ----------
   Les publications posées sur les fiches, réunies en bas de la page : on
   voit le travail sans avoir à ouvrir six profils. */
.im-pubs{margin-top:clamp(38px,6vw,64px);padding-top:clamp(26px,4vw,38px);
  border-top:1px solid var(--line)}
.im-pubs-t{margin-bottom:20px}
.im-pubs-t h2{font-family:'Bebas Neue',sans-serif;font-weight:400;
  font-size:clamp(24px,3.2vw,34px);letter-spacing:.02em;color:#fff;line-height:1.05}
.im-pubs-t p{margin-top:7px;font-size:13.5px;line-height:1.65;color:var(--ink-45);max-width:60ch}
.im-pubs-t p b{color:var(--ink);font-weight:500}
.im-pub{margin:0}
.im-pub figcaption{margin-top:7px}
.im-pub figcaption a{display:inline-flex;align-items:center;gap:7px;
  font-family:'Archivo',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-45);
  transition:color .3s var(--ez)}
.im-pub figcaption a:hover{color:var(--acc)}
.im-pub figcaption img{width:20px;height:20px;border-radius:50%;object-fit:cover;flex:none}

/* ═══════════════════════════════════════════════════════════
   BARRE DE NAVIGATION — six onglets, ça ne tient plus partout
   L'onglet « L'image » a fait déborder la barre sur les portables : les
   libellés se coupaient en plein mot. Plutôt que d'abréger les mots, on
   resserre l'espacement puis on bascule sur le menu plus tôt.
   ═══════════════════════════════════════════════════════════ */
/* ---------- condenser la barre sur écran de portable ----------
   À 1280 px, la rangée d'onglets prenait 954 px sur 1280 : huit entrées
   collées bord à bord, plus rien ne respirait. Trois leviers, dans l'ordre
   d'efficacité. Les seuils suivent ceux qui existaient déjà : la barre
   horizontale vit entre 1081 px et l'infini, en dessous c'est le menu. */

/* 1 · Se déconnecter quitte la rangée. Ce n'est pas une destination, et ça
       coûtait 121 px — le huitième onglet qu'on lisait pour rien. Sur grand
       écran, une icône près du compte ; dans le menu, le texte en clair. */
.h-sortir{display:none}
.h-sortir-ic{display:flex;align-items:center;justify-content:center;flex:none;
  width:36px;height:36px;border-radius:999px;border:1px solid var(--ink-14);
  color:var(--ink-45);transition:all .3s var(--ez)}
.h-sortir-ic:hover{border-color:#ff8a8a;color:#ff8a8a}
.h-sortir-ic svg{width:17px;height:17px}
.h-sortir-ic:disabled{opacity:.5;cursor:wait}

/* 2 · le libellé court prend le relais quand la place manque */
.h-nav a .ct{display:none}

@media(min-width:1081px) and (max-width:1340px){
  .h-nav a .lg{display:none}
  .h-nav a .ct{display:inline}
  /* 3 · et on resserre le reste autour */
  header{gap:10px;padding-left:clamp(14px,2vw,30px);padding-right:clamp(14px,2vw,30px)}
  header .h-logo img{height:36px}
  .h-sortir-ic{width:34px;height:34px}
}
@media(min-width:1081px) and (max-width:1180px){
  .h-nav a .ic{display:none}        /* le picto part avant le mot */
  .h-moi span{display:none}
  .h-moi{padding:4px}
}

/* dans le menu déroulant, la place ne manque pas : mots entiers, pictos
   rendus, et la déconnexion redevient une ligne lisible */
@media(max-width:1080px){
  .h-nav a .lg{display:inline}
  .h-nav a .ct{display:none}
  .h-sortir{display:block}
  .h-sortir-ic{display:none}
}

@media(min-width:901px) and (max-width:1340px){
  .h-nav{gap:0}
  .h-nav a{padding:9px 10px;letter-spacing:.11em;font-size:9.5px}
  .h-nav a .ic{margin-right:6px}
  .h-sortir{padding:9px 10px;letter-spacing:.08em;font-size:9.5px}
  .h-moi span{max-width:74px}
}
@media(max-width:1080px){
  /* en dessous, même resserrée la barre ne tient pas : au menu */
  .h-nav{position:fixed;inset:66px 0 auto 0;flex-direction:column;
    justify-content:flex-start;gap:0;padding:8px 0 14px;
    background:#050505;border-bottom:1px solid var(--line);
    transform:translateY(-10px);opacity:0;
    pointer-events:none;max-height:calc(100dvh - 66px);overflow-y:auto;
    overscroll-behavior:contain;box-shadow:0 26px 50px rgba(0,0,0,.6);
    transition:opacity .28s var(--ez),transform .28s var(--ez)}
  .h-nav.on{transform:none;opacity:1;pointer-events:auto}
  .h-nav a{display:flex;align-items:center;justify-content:flex-start;width:100%;
    text-align:left;padding:16px 26px;font-size:12.5px;letter-spacing:.15em;
    border-radius:0;border-left:2px solid transparent}
  .h-nav a[aria-current]{background:rgba(169,194,232,.07);box-shadow:none;
    border-left-color:var(--acc)}
  .h-nav a::before{display:none}
  .h-nav a .pastille{margin-left:auto}
  .h-nav a .ic{margin-right:11px}
  .h-burger{display:flex;width:44px;height:44px}
  .h-burger span{transition:background .2s var(--ez)}
  .h-burger span::before,.h-burger span::after{transition:transform .3s var(--ez)}
  .h-burger[aria-expanded="true"] span{background:transparent}
  .h-burger[aria-expanded="true"] span::before{transform:translateY(5px) rotate(45deg)}
  .h-burger[aria-expanded="true"] span::after{transform:translateY(-5px) rotate(-45deg)}
  .h-sortir{width:100%;padding:15px 26px;border-radius:0;font-size:12px;
    text-align:left;letter-spacing:.15em;
    border-top:1px solid rgba(255,255,255,.08);margin-top:4px}
  .h-sortir:hover{border-color:transparent;border-top-color:rgba(255,138,138,.3)}
  .h-cta{min-height:44px}
  .h-moi img{width:34px;height:34px}
  body.menu-ouvert{overflow:hidden}
}

/* ═══════════════════════════════════════════════════════════
   MENTIONS @
   Un @pseudo dans une bio ou dans le chat mène au compte Instagram. Il doit
   se voir comme un lien sans casser la lecture de la phrase : la couleur du
   profil, un soulignement fin qui s'épaissit au survol.
   ═══════════════════════════════════════════════════════════ */
.mention{color:var(--sc,var(--acc));text-decoration:none;
  box-shadow:inset 0 -1px 0 color-mix(in srgb,currentColor 34%,transparent);
  transition:box-shadow .25s var(--ez),background .25s var(--ez);
  border-radius:2px;padding:0 1px;word-break:break-word}
.mention:hover{box-shadow:inset 0 -1px 0 currentColor;
  background:color-mix(in srgb,currentColor 10%,transparent)}
.mention:focus-visible{outline:2px solid currentColor;outline-offset:2px}

/* dans le chat, la teinte du profil n'a pas cours : on reste sur l'accent */
.msg .mention,.conv .mention{color:var(--acc)}

/* ═══════════════════════════════════════════════════════════
   PROCHAINES DATES — Shotgun
   ═══════════════════════════════════════════════════════════ */
.dates{display:flex;flex-direction:column;gap:9px}
.date-l{display:flex;align-items:center;gap:15px;padding:14px 17px;
  border:1px solid var(--line);border-radius:7px;background:rgba(255,255,255,.02);
  transition:border-color .35s var(--ez),transform .35s var(--ez)}
a.date-l:hover{border-color:color-mix(in srgb,var(--sc,var(--acc)) 45%,transparent);
  transform:translateX(3px)}
.date-l .q{flex:none;width:52px;text-align:center;color:var(--sc,var(--acc))}
.date-l .q b{display:block;font-family:'Bebas Neue',sans-serif;font-size:27px;
  line-height:1;letter-spacing:.02em}
.date-l .q span{display:block;font-family:'Archivo',sans-serif;font-size:9px;
  font-weight:600;letter-spacing:.15em;text-transform:uppercase;margin-top:3px;
  color:var(--ink-45)}
.date-l .t{flex:1;min-width:0}
.date-l .t b{display:block;font-family:'Archivo',sans-serif;font-weight:600;
  font-size:14.5px;line-height:1.35;color:var(--ink)}
.date-l .t span{display:block;font-size:12.5px;color:var(--ink-45);margin-top:3px}
.date-l .arr{flex:none;color:var(--ink-45)}
.date-l.passe{opacity:.45}
@media(max-width:760px){
  .date-l{padding:13px 14px;gap:12px}
  .date-l .t b{font-size:15px}
  .date-l .t span{font-size:13px}
}

/* ---------- lieux groupés par ville ---------- */
.lieux-ville{margin-bottom:18px}
.lieux-ville:last-child{margin-bottom:0}
.lv-t{display:flex;align-items:center;gap:9px;margin-bottom:10px;
  font-family:'Archivo',sans-serif;font-size:10px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-45)}
.lv-t::after{content:"";flex:1;height:1px;background:var(--line)}
.lv-t span{order:3;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.05);
  font-size:9.5px;letter-spacing:.08em;color:rgba(242,242,242,.4)}

/* ---------- l'affiche d'une date ---------- */
.date-l .aff{flex:none;width:48px;height:64px;object-fit:cover;border-radius:4px;
  border:1px solid var(--line);background:#0b0b0d}
.aff-poser{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;
  padding:15px;border:1px dashed var(--ink-14);border-radius:7px}
.aff-poser > div:last-child{flex:1;min-width:200px}
.aff-vue{flex:none;width:84px;height:112px;border-radius:5px;border:1px solid var(--line);
  background:rgba(255,255,255,.02);display:flex;align-items:center;justify-content:center;
  overflow:hidden}
.aff-vue span{font-family:'Archivo',sans-serif;font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(242,242,242,.3);text-align:center;padding:0 8px}
.aff-vue img{width:100%;height:100%;object-fit:cover}
.aff-poser label.mini{display:inline-flex;cursor:pointer;margin-right:8px}

/* ---------- une case à cocher qui se voit ---------- */
.case{display:flex;align-items:flex-start;gap:11px;cursor:pointer;
  font-size:14px;line-height:1.5;color:var(--ink)}
.case input{flex:none;width:19px;height:19px;margin-top:2px;accent-color:var(--acc)}

@media(max-width:760px){
  .date-l .aff{width:42px;height:56px}
  .aff-vue{width:72px;height:96px}
  .lv-t{font-size:11px}
}

/* ═══════════════════════════════════════════════════════════
   PROFIL CERTIFIÉ
   Une pastille bleue, identique partout. Elle atteste d'une identité
   vérifiée, jamais d'un niveau : ici on ne classe personne.
   ═══════════════════════════════════════════════════════════ */
.certif{display:inline-block;flex:none;vertical-align:-.1em;margin-left:.24em;
  color:#3b9dff;filter:drop-shadow(0 0 6px rgba(59,157,255,.45))}
.c-nom .certif{vertical-align:-.06em;margin-left:.22em}
/* sur la fiche, la pastille se cale en haut du nom et le serre : posée sur la
   ligne de base elle tombait au niveau du pseudo, à qui elle ne se rapporte pas */
.p-nom .certif{vertical-align:.42em;margin-left:.1em}
.p-near b .certif{margin-left:.2em;filter:none}

/* Une vignette gravée remplace le tracé. Elle est détourée sur fond
   transparent : pas d'aplat derrière, l'ombre portée suffit à la décoller. */
.ec-grave{border-radius:0;background:none;object-fit:contain;
  filter:drop-shadow(0 3px 9px rgba(0,0,0,.6))}

/* une vignette gravée porte du détail : elle mérite plus d'air que le tracé */
.ville-ec .ec-grave{width:58px;height:58px}
@media(max-width:760px){.ville-ec .ec-grave{width:52px;height:52px}}

/* ═══════════════════════════════════════════════════════════
   RESPIRATION SUR TÉLÉPHONE
   La page était juste : tout tenait, mais tout se touchait. On desserre les
   blocs et on réduit les cartes — mieux vaut voir six vignettes aérées que
   quatre serrées.
   ═══════════════════════════════════════════════════════════ */
@media(max-width:760px){
  /* les sections respirent au lieu de s'enchaîner sans repère */
  .p-sec{margin-top:34px;padding-top:26px}
  .bloc{padding:20px 17px;margin-bottom:16px;border-radius:9px}
  .p-head{gap:18px;margin-bottom:6px}
  .p-bio{margin-top:26px;margin-bottom:4px}
  .p-stats{gap:10px}
  .p-stat{padding:15px 16px}
  .p-cta{gap:9px;margin-top:20px}

  /* deux colonnes, cartes plus petites, et de l'air entre elles */
  .grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .hero{padding-bottom:26px}
  .tools{padding:12px 0}

  /* les listes de puces et les groupes de filtres */
  .chips{gap:8px}
  .famille-l{gap:8px}
  .lieux-ville{margin-bottom:22px}
}

/* la carte d'un organisateur s'ouvre entièrement */
.orga.cliquable{cursor:pointer;transition:border-color .35s var(--ez),transform .35s var(--ez)}
.orga.cliquable:hover{border-color:color-mix(in srgb,var(--sc,var(--acc)) 42%,transparent);
  transform:translateY(-2px)}
.orga.cliquable:active{transform:translateY(0)}
.orga.cliquable a,.orga.cliquable button{position:relative;z-index:2}

/* la seconde ligne d'une rangée d'administration : inscription et dernière visite */
.rangee .id .quand{display:block;margin-top:4px;font-family:'Archivo',sans-serif;
  font-size:10px;letter-spacing:.08em;color:rgba(242,242,242,.32)}
.rangee .id .quand .jamais{color:#ffd27d;font-weight:600}

/* ═══════════════════════════════════════════════════════════
   LE FLUX — les respirations entre les vignettes
   Une grille de quarante cartes identiques se balaye sans s'arrêter. Ces
   blocs prennent toute la largeur et cassent le rythme. Ce ne sont jamais
   des classements : on le dit dans le texte, et rien n'est numéroté.
   ═══════════════════════════════════════════════════════════ */
.flux{grid-column:1/-1;padding:22px 22px 24px;border-radius:12px;
  border:1px solid var(--line);background:rgba(255,255,255,.022);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.04)}
/* Chaque bloc porte son fond : une image sombre et colorée, posée SOUS un
   voile qui part du bord gauche. Le texte vit à gauche — c'est là que le
   voile est le plus opaque, et c'est ce qui garantit la lisibilité quelle
   que soit l'image. Tant qu'un fichier manque, le dégradé seul s'affiche :
   rien ne casse. */
.flux{position:relative;isolation:isolate;overflow:hidden}
.flux::before{content:"";position:absolute;inset:0;z-index:-2;
  background-position:center;background-size:cover;background-repeat:no-repeat;
  opacity:.55}
.flux::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,
    rgba(6,6,6,.94) 0%, rgba(6,6,6,.86) 34%, rgba(6,6,6,.62) 68%, rgba(6,6,6,.45) 100%)}

.flux.coeur{background:
  radial-gradient(120% 90% at 0% 0%,rgba(232,169,169,.09),transparent 62%),
  rgba(255,255,255,.022)}
.flux.coeur::before{background-image:url("fonds/coeur.webp")}

.flux.dates{background:
  radial-gradient(120% 90% at 0% 0%,rgba(169,194,232,.09),transparent 62%),
  rgba(255,255,255,.022)}
.flux.dates::before{background-image:url("fonds/dates.webp")}

.flux.zoom{background:
  radial-gradient(120% 90% at 0% 0%,color-mix(in srgb,var(--fc) 13%,transparent),transparent 62%),
  rgba(255,255,255,.022)}
.flux.zoom::before{background-image:url("fonds/zoom.webp")}

.flux.sons{background:
  radial-gradient(120% 90% at 0% 0%,rgba(232,208,169,.09),transparent 62%),
  rgba(255,255,255,.022)}
.flux.sons::before{background-image:url("fonds/sons.webp")}

@media(max-width:640px){
  /* sur un écran étroit le texte occupe toute la largeur : le voile devient
     uniforme, sinon la colonne de droite passe sous l'image */
  .flux::before{opacity:.42}
  .flux::after{background:linear-gradient(180deg,
    rgba(6,6,6,.9) 0%, rgba(6,6,6,.82) 45%, rgba(6,6,6,.9) 100%)}
}
@media(prefers-reduced-transparency:reduce){.flux::before{opacity:.28}}

.flux-t{margin-bottom:17px}
.flux-t b{display:block;font-family:'Bebas Neue',sans-serif;font-weight:400;
  font-size:clamp(21px,2.4vw,27px);line-height:1.05;letter-spacing:.02em;color:#fff}
.flux-t span{display:block;margin-top:6px;font-size:13px;line-height:1.6;color:var(--ink-45)}
.flux-lien{color:var(--acc);text-decoration:underline;text-underline-offset:3px;
  font-size:13px;font-family:inherit}
.flux-lien:hover{color:#fff}

/* trois profils côte à côte, plus petits qu'une vignette d'annuaire */
/* la description d'une famille : plus large et plus lisible que la ligne de
   comptage qui la suit, parce que c'est elle qu'on vient lire */
.zoom-q{display:block;max-width:62ch;margin:10px 0 12px;
  font-size:13.5px;line-height:1.62;color:rgba(242,242,242,.72)}
@media(max-width:640px){.zoom-q{font-size:13px;line-height:1.6;margin:9px 0 11px}}

.flux-p{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.fm-p{display:flex;flex-direction:column;gap:8px;padding:13px;border-radius:9px;
  border:1px solid var(--line);background:rgba(6,6,6,.4);
  transition:border-color .3s var(--ez),transform .3s var(--ez)}
.fm-p:hover{border-color:color-mix(in srgb,var(--sc,var(--acc)) 48%,transparent);
  transform:translateY(-2px)}
.fm-p img,.fm-init{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none;
  border:1px solid rgba(255,255,255,.12)}
.fm-init{display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.05);font-family:'Bebas Neue',sans-serif;font-size:20px;
  color:var(--sc,var(--acc))}
.fm-n{font-family:'Archivo Black',sans-serif;font-weight:400;font-size:12.5px;
  text-transform:uppercase;line-height:1.25;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* la phrase du profil : deux lignes, coupées proprement au-delà. Elle
   remplace la liste de genres — qui figure déjà sur chaque carte de la
   grille, et que la phrase répétait mot pour mot. */
.fm-s{font-size:11.5px;line-height:1.42;color:var(--ink-45);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- les tracks du jour ----------
   La pochette en haut, la waveform en dessous. On voit le visuel du morceau
   ET on l'écoute sans quitter la page.

   La waveform, c'est le lecteur SoundCloud en mode classique avec sa propre
   pochette masquée — celle de la carte est juste au-dessus, l'afficher deux
   fois n'aurait servi à rien. Il est inversé parce que ce lecteur est blanc
   par nature et trouerait la page ; l'inversion le rend sombre, et le logo
   SoundCloud s'y affiche en blanc, exactement comme SoundCloud l'affiche
   lui-même sur fond sombre. */
.son-c{--sc:var(--acc);display:flex;flex-direction:column;gap:9px;padding:11px;
  border-radius:9px;border:1px solid var(--line);background:rgba(6,6,6,.4);
  transition:border-color .3s var(--ez)}
.son-c:hover{border-color:color-mix(in srgb,var(--sc) 48%,transparent)}

.son-ec{position:relative;display:block;aspect-ratio:16/10;border-radius:6px;
  overflow:hidden;background:rgba(255,255,255,.04)}
.son-ec img{width:100%;height:100%;object-fit:cover;
  transition:transform .45s var(--ez)}
.son-c:hover .son-ec img{transform:scale(1.04)}
.son-vide{display:flex;width:100%;height:100%;align-items:center;justify-content:center;
  color:var(--sc);opacity:.5}

/* le cadre est chargé en différé : le bloc est loin sous la ligne de
   flottaison, il ne pèse rien tant qu'on n'a pas fait défiler jusqu'à lui */
.son-wave{border-radius:6px;overflow:hidden;background:#0d0d10;
  border:1px solid rgba(255,255,255,.09)}
.son-wave iframe{display:block;width:100%;height:104px;border:0;
  filter:invert(1) hue-rotate(180deg)}

.son-t b{font-family:'Archivo',sans-serif;font-weight:600;font-size:12.5px;
  line-height:1.35;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.son-qui{display:inline-flex;align-items:center;gap:6px;margin-top:6px;
  font-size:11.5px;color:var(--ink-45);transition:color .3s var(--ez)}
.son-qui:hover{color:var(--sc)}
.son-qui img{width:19px;height:19px;border-radius:50%;object-fit:cover;flex:none}

@media(max-width:640px){
  /* en une colonne, la pochette s'aplatit pour que les trois cartes ne
     fassent pas défiler la page entière — la waveform, elle, garde sa
     hauteur : c'est elle qu'on vient utiliser */
  .son-c{padding:10px;gap:8px}
  .son-ec{aspect-ratio:21/9}
  .son-t b{font-size:13px}
}

/* les prochaines dates, en lignes */
.flux-d{display:flex;flex-direction:column;gap:8px}
.fd{--sc:var(--acc);display:flex;align-items:center;gap:13px;padding:11px 14px;border-radius:8px;
  border:1px solid var(--line);background:rgba(6,6,6,.4);cursor:pointer;
  transition:border-color .3s var(--ez),transform .3s var(--ez)}
.fd:hover{border-color:color-mix(in srgb,var(--sc) 50%,transparent);transform:translateX(3px)}
.fd:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.fd .av{flex:none;width:40px;height:40px;border-radius:50%;object-fit:cover;background:#111;
  border:1.5px solid color-mix(in srgb,var(--sc) 60%,transparent)}
.fd .b{position:relative;z-index:2}
.fd .b:hover{background:color-mix(in srgb,var(--acc) 14%,transparent)}
.fd .q{flex:none;width:46px;text-align:center;color:var(--acc)}
.fd .q b{display:block;font-family:'Bebas Neue',sans-serif;font-size:24px;line-height:1}
.fd .q i{display:block;font-style:normal;font-family:'Archivo',sans-serif;font-size:8.5px;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-45);margin-top:2px}
.fd .t{flex:1;min-width:0}
.fd .t b{display:block;font-family:'Archivo',sans-serif;font-weight:600;font-size:13.5px;
  line-height:1.3;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fd .t i{display:block;font-style:normal;font-size:12px;color:var(--ink-45);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fd .b{flex:none;padding:6px 12px;border-radius:999px;font-family:'Archivo',sans-serif;
  font-size:8.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--acc);border:1px solid color-mix(in srgb,var(--acc) 30%,transparent)}

@media(max-width:640px){
  .flux{padding:19px 16px 20px}
  .flux-p{grid-template-columns:1fr;gap:9px}
  /* Avatar à gauche sur deux rangées, nom puis phrase à droite. La phrase
     était masquée ici tant qu'elle ne portait que les genres ; maintenant
     qu'elle décrit le profil, c'est justement ce qu'on vient lire — et le
     téléphone est l'écran principal du site. */
  .fm-p{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
    align-items:center;column-gap:12px;row-gap:3px;padding:11px 13px}
  .fm-p img,.fm-init{width:44px;height:44px;grid-row:1/3;align-self:center}
  .fm-p .fm-n{grid-column:2;align-self:end;min-width:0}
  /* trois lignes ici : la colonne ne fait que 225 px, et le champ autorise
     100 caractères — à deux lignes, les phrases longues se coupaient net */
  .fm-p .fm-s{grid-column:2;align-self:start;-webkit-line-clamp:3}
  .fd{gap:10px;padding:10px 11px}
  .fd .av{width:34px;height:34px}
  .fd .q{width:38px}
  .fd .b{padding:5px 9px;font-size:8px;letter-spacing:.1em}
}

/* ═══════════════════════════════════════════════════════════
   LA RECHERCHE DU SITE
   Une loupe dans l'en-tête, une fenêtre par-dessus tout le reste.
   ═══════════════════════════════════════════════════════════ */
.h-loupe{display:flex;align-items:center;justify-content:center;flex:none;
  width:36px;height:36px;border-radius:999px;border:1px solid var(--ink-14);
  color:var(--ink-45);transition:all .3s var(--ez)}
.h-loupe:hover{border-color:var(--acc);color:var(--acc)}
.h-loupe svg{width:17px;height:17px}

.rg{position:fixed;inset:0;z-index:400;display:flex;justify-content:center;
  padding:12vh 20px 20px;background:rgba(6,6,6,.72);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  animation:rgEntre .22s var(--ez)}
@keyframes rgEntre{from{opacity:0}to{opacity:1}}
body.rg-on{overflow:hidden}

.rg-boite{width:min(620px,100%);max-height:74vh;display:flex;flex-direction:column;
  border:1px solid var(--ink-22);border-radius:11px;overflow:hidden;
  background:#0b0b0b;box-shadow:0 34px 90px rgba(0,0,0,.7);
  animation:rgMonte .26s var(--ez)}
@keyframes rgMonte{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}

.rg-haut{display:flex;align-items:center;gap:12px;padding:16px 18px;flex:none;
  border-bottom:1px solid var(--ink-14)}
.rg-loupe{width:19px;height:19px;flex:none;color:var(--ink-45)}
.rg-haut input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--ink);
  font-family:'Space Grotesk',sans-serif;font-size:16px}
.rg-haut input::placeholder{color:var(--ink-45)}
.rg-esc{flex:none;font-family:'Archivo',sans-serif;font-size:9px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-45);
  border:1px solid var(--ink-14);border-radius:5px;padding:4px 8px}

.rg-res{overflow-y:auto;padding:8px}
.rg-g{font-family:'Archivo',sans-serif;font-size:9px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-45);padding:13px 12px 7px}
.rg-r{display:flex;align-items:center;gap:6px}
.rg-l{flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:9px 12px;
  border-radius:7px;transition:background .18s var(--ez)}
.rg-l:hover,.rg-l.on{background:rgba(169,194,232,.1)}
.rg-ic{width:32px;height:32px;border-radius:7px;flex:none;display:grid;place-items:center;
  border:1px solid var(--ink-14);color:var(--ink-45);overflow:hidden}
.rg-ic.ph{border-radius:50%;border-color:var(--ink-22)}
.rg-ic svg{width:16px;height:16px}
.rg-ic img{width:100%;height:100%;object-fit:cover}
.rg-t{min-width:0;display:flex;flex-direction:column;gap:2px}
.rg-t b{font-weight:500;font-size:14.5px;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rg-t i{font-style:normal;font-size:12px;color:var(--ink-45);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rg-dm{flex:none;width:34px;height:34px;border-radius:999px;display:grid;place-items:center;
  border:1px solid var(--ink-14);color:var(--ink-45);transition:all .25s var(--ez)}
.rg-dm:hover{border-color:var(--acc);color:var(--acc);background:rgba(169,194,232,.1)}
.rg-dm svg{width:15px;height:15px}

.rg-vide{padding:34px 20px 40px;text-align:center;color:var(--ink-45);font-size:13.5px;
  line-height:1.7}
.rg-vide span{display:block;margin-top:9px;font-size:12px;opacity:.75}
.rg-vide kbd{font-family:'Archivo',sans-serif;font-size:10px;border:1px solid var(--ink-14);
  border-radius:4px;padding:1px 6px}

@media (max-width:640px){
  .rg{padding:0}
  .rg-boite{width:100%;max-height:100%;height:100%;border:0;border-radius:0}
  .rg-esc{display:none}
  /* plein écran : une entrée par le bas décalerait le champ hors de l'écran
     le temps de l'animation. Ici, seule l'opacité bouge. */
  .rg-boite{animation-name:rgEntre}
  .rg-haut{padding:14px 16px;padding-top:max(14px,env(safe-area-inset-top))}
}