/* ==========================================================
   Paradigmatiks · accueil « hub »
   Le logo au centre de la page, l'équation dessous,
   les sites en bulles qui flottent librement autour.
   Les questions, en bas, réorganisent l'univers.
   ========================================================== */

/* ---------- Le champ ---------- */
.cosmos{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;padding-top:64px;padding-bottom:0;overflow:hidden;isolation:isolate}
.admin-bar .cosmos{padding-top:96px}
@media(max-width:782px){.admin-bar .cosmos{padding-top:110px}}
.cosmos::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 44% 40% at 50% 42%,rgba(230,175,71,.085),transparent 72%)}
.cosmos .sky{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0}
.field{position:relative;z-index:1;flex:1 1 auto;width:100%;max-width:1440px;margin:0 auto;min-height:520px;--bs:clamp(86px,9.2vw,132px)}

/* Le cœur : logo en relief, équation, puis la voix du logo */
.hub-core{position:absolute;left:50%;top:50%;z-index:4;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:clamp(10px,1.3vw,16px);max-width:min(420px,74%);text-align:center;pointer-events:none}
.hub-core .eq{font-size:clamp(17px,2vw,27px);line-height:1.08;letter-spacing:-.035em}
.hub-core .eq .row{display:block;white-space:nowrap}
.hub-core .eq em{display:inline;font-size:1.08em}
.hub-core .eq .t{transition-delay:.2s}
.hub-core .eq .row + .row .t{transition-delay:.5s}
.hub-core .eq .row + .row em.t{transition-delay:.65s}
.whisper{color:var(--muted-d);font-size:10px;letter-spacing:.16em;line-height:1.7}
.echo{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:22em}
.echo-l{color:var(--gold);font-size:10px}
.echo-q{font-family:var(--serif);font-style:italic;font-size:clamp(19px,1.8vw,25px);line-height:1.2;color:var(--paper)}
.echo.swap{animation:swap .6s var(--ease)}

/* Le logo en relief : des couches empilées en profondeur, la face avant en or */
.mark3d{position:relative;width:clamp(70px,7.4vw,112px);aspect-ratio:248.2/352;perspective:520px}
.mark3d::before{content:"";position:absolute;left:-70%;right:-70%;top:-34%;bottom:-34%;z-index:-1;background:radial-gradient(closest-side,rgba(230,175,71,.24),transparent);filter:blur(6px);animation:breathe 7s ease-in-out infinite}
@keyframes breathe{50%{opacity:.6;transform:scale(.94)}}
.m3{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.m3-l{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform:translateZ(var(--z,0px));fill:var(--f,#7a5414)}
.m3-front{fill:url(#pdk-gold)}

/* ---------- Les bulles ---------- */
.bub{position:relative;z-index:3;width:calc(var(--bs) * var(--sz,1));height:calc(var(--bs) * var(--sz,1));border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:8px;text-align:center;text-decoration:none;color:var(--paper);
  background:radial-gradient(circle at 32% 24%,rgba(255,255,255,.16),rgba(255,255,255,0) 30%),radial-gradient(circle at 50% 62%,color-mix(in srgb,var(--c) 30%,#17130f),#0f0c0a 80%);
  border:1px solid color-mix(in srgb,var(--c) 55%,transparent);
  box-shadow:inset 0 -12px 26px color-mix(in srgb,var(--c) 20%,transparent),inset 0 1px 0 rgba(255,255,255,.08),0 24px 40px -26px rgba(0,0,0,.9);
  transition:box-shadow .4s,border-color .4s;will-change:transform,opacity}
.js .field .bub{position:absolute;left:0;top:0;opacity:0}
.bub.soon{border-style:dashed}
.bub .bn{font-weight:700;font-size:clamp(12px,1.05vw,15px);letter-spacing:-.02em;line-height:1.08}
.bub.long .bn{font-size:clamp(11px,.98vw,14px)}
.bub .bd{font:500 8.5px/1.2 var(--mono);letter-spacing:.06em;color:color-mix(in srgb,var(--c) 70%,var(--paper))}
.bub .bp,.bub .bst{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bub:hover,.bub.hot,.bub:focus-visible{border-color:var(--c);box-shadow:0 0 0 6px color-mix(in srgb,var(--c) 16%,transparent),0 0 50px color-mix(in srgb,var(--c) 36%,transparent),inset 0 -12px 26px color-mix(in srgb,var(--c) 26%,transparent),inset 0 1px 0 rgba(255,255,255,.1)}
.bub:focus-visible{outline:none}
/* effacée (téléphone, question choisie) : elle ne répond plus au doigt */
.bub.gone{pointer-events:none}

/* La carte de promesse, posée à côté de la bulle approchée */
.fcard{position:absolute;left:0;top:0;z-index:6;width:300px;max-width:calc(100% - 8px);padding:16px 18px 14px;border-radius:16px;background:rgba(23,20,17,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid color-mix(in srgb,var(--cc,#E6AF47) 40%,var(--line-dd));box-shadow:0 30px 60px -28px rgba(0,0,0,.95);opacity:0;scale:.96;pointer-events:none;transition:opacity .22s ease,scale .22s ease}
.fcard.on{opacity:1;scale:1}
.fcard.touch.on{pointer-events:auto}
.fc-h{display:flex;align-items:center;gap:10px}
.fc-h i{width:9px;height:9px;border-radius:50%;flex:none;background:var(--cc,var(--gold));box-shadow:0 0 0 4px color-mix(in srgb,var(--cc,#E6AF47) 18%,transparent)}
.fc-h b{font-size:18px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.fc-d{display:block;margin-top:6px;color:var(--gold);font-size:10px;letter-spacing:.1em}
.fc-d:empty{display:none}
.fcard p{margin:10px 0 12px;font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.3;color:var(--soft-d)}
.fc-go{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--paper);text-decoration:none}
.fc-go .arr{color:var(--ver);margin-left:6px}

/* ---------- Les questions ---------- */
.asks{position:relative;z-index:2;text-align:center;padding:clamp(8px,1.4vw,16px) 0 clamp(18px,2.4vw,28px)}
.asks .eyebrow{margin-bottom:12px}
.ask-list{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 10px;max-width:1220px;margin:0 auto}
.ask{display:inline-flex;align-items:center;gap:10px;padding:9px 18px 10px 14px;border-radius:999px;border:1px solid var(--line-dd);background:rgba(13,11,9,.6);color:var(--soft-d);font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(17px,1.3vw,20px);line-height:1.2;cursor:pointer;transition:color .25s,border-color .25s,background .25s,transform .25s}
.ask::before{content:"";width:8px;height:8px;border-radius:50%;flex:none;border:1.5px solid var(--muted-d);transition:background .25s,border-color .25s,box-shadow .25s}
.ask:hover{color:var(--paper);border-color:var(--soft-d);transform:translateY(-1px)}
.ask[aria-pressed="true"]{color:var(--paper);border-color:var(--ver);background:rgba(217,69,43,.08)}
.ask[aria-pressed="true"]::before{background:var(--ver);border-color:var(--ver);box-shadow:0 0 0 4px rgba(217,69,43,.18)}
.ask .rebond{display:none}
.ask-reset{display:inline-block;margin-top:12px;background:none;border:0;padding:0;cursor:pointer;color:var(--muted-d);font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;text-decoration:underline;text-underline-offset:4px;visibility:hidden}
.ask-reset.on{visibility:visible}
.ask-reset:hover{color:var(--paper)}

/* ---------- Téléphone ---------- */
@media(max-width:640px){
  .field{--bs:88px;min-height:440px}
  .mark3d{width:64px}
  .hub-core{max-width:78%}
  .hub-core .eq{font-size:14px}
  .hub-core .eq .seg2{display:block}
  .whisper{display:none}
  .echo-q{font-size:17px}
  .bub{padding:6px}
  .bub .bn,.bub.long .bn{font-size:10px;letter-spacing:-.03em}
  .bub .bd{display:none}
  .fcard.dock{left:0;right:0;top:auto;bottom:6px;width:auto;max-width:none}
  .asks{text-align:left}
  .ask-list{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 84%,transparent);mask-image:linear-gradient(90deg,#000 84%,transparent)}
  .ask-list::-webkit-scrollbar{display:none}
  .ask-list li{flex:none}
  .ask{white-space:nowrap;font-size:16px}
}
@media(min-width:641px) and (max-width:1000px){
  .field{--bs:100px}
  .bub{padding:6px}
  .bub .bn{font-size:11.5px}
  .bub.long .bn{font-size:11px}
}
/* petit téléphone : la question soulevée s'affiche sans son intitulé, pour laisser la place aux bulles */
@media(max-width:640px) and (max-height:700px){
  .echo-l{display:none}
}
@media(max-width:380px){
  .field{--bs:78px}
  .mark3d{width:58px}
  .hub-core .eq{font-size:13px}
}

/* ---------- L'univers, en toutes lettres ---------- */
.uni-lead{margin-top:22px}
.uni{list-style:none;border-top:1px solid var(--line-d);margin-top:clamp(32px,4vw,56px)}
.uni-row{display:grid;grid-template-columns:22px minmax(0,1fr) minmax(0,1.35fr) 150px 22px;gap:20px;align-items:center;padding:24px 0;border-bottom:1px solid var(--line-d);text-decoration:none;color:inherit;transition:padding .4s var(--ease)}
.uni-row .dt{width:11px;height:11px;border-radius:50%;background:var(--c);box-shadow:0 0 0 5px color-mix(in srgb,var(--c) 14%,transparent)}
.uni-row h3{font-size:clamp(24px,2.4vw,32px);transition:color .3s}
.uni-row p{color:var(--soft-d);font-size:clamp(16px,1.4vw,18px);line-height:1.5}
.uni-row .st{justify-self:start;font:500 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:7px 10px;border-radius:999px;border:1px solid var(--line-dd);color:var(--soft-d)}
.uni-row .st.soon{border-style:dashed;color:var(--gold);border-color:rgba(230,175,71,.5)}
.uni-row .go{color:var(--ver);transition:transform .3s}
/* un site externe : la flèche pointe vers le dehors */
.uni-row .go.ext{rotate:-45deg}
/* une ligne réduite à sa phrase */
.uni-row.solo h3{grid-column:2 / 5;font-size:clamp(22px,2.2vw,29px);letter-spacing:-.03em;line-height:1.12}
.uni-row.solo h3 em{display:inline-block;font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.12em;letter-spacing:-.01em}
.uni-row:hover{padding-left:10px}
.uni-row:hover h3{color:var(--c)}
.uni-row:hover .go{transform:translateX(4px)}
@media(max-width:860px){
  .uni-row{grid-template-columns:18px minmax(0,1fr) 22px;gap:8px 14px;align-items:start}
  .uni-row .dt{margin-top:12px}
  .uni-row p,.uni-row .st{grid-column:2}
  .uni-row.solo h3{grid-column:2}
  .uni-row .go{grid-column:3;grid-row:1;margin-top:8px}
}

@media (prefers-reduced-motion:reduce){.echo.swap{animation:none}.mark3d::before{animation:none}}