/* css/planet-home.css — accueil « planète » (2026-10-23) : la Terre en plein écran, les rubriques en points sur le globe
   et en liste en bas. Fond d'espace dans les deux thèmes ; les cartes (home-cards.php) gardent le thème du site.
   Taille et position de la planète : --planet-d et --planet-shift (px). Les valeurs ci-dessous ne servent que sans JS ;
   includes/planet-home.js les recalcule pour que la planète tienne entre le haut (.planet-id) et le bas (.planet-foot).
   v2 (même jour) : tableau de bord — statut, lieu · météo · heure (en haut à gauche), bouton ♪ (en haut à droite) ;
   les pastilles du bas sont masquées et les anneaux sont dans la carte « à propos ». */

/* le blanc ne vaut que pour ce qui est posé sur l'espace : les cartes gardent les couleurs du thème */
body.planet-home{background:#000;overflow:hidden;min-height:100vh;min-height:100dvh}
.planet-id,.planet-foot{color:#fff}

/* scène : canvas 3D, image fixe de chargement, calque des points */
.planet-stage{position:fixed;inset:0;--planet-d:min(54vh,80vw);--planet-shift:-60px;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.planet-stage:active{cursor:grabbing}
.planet-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .9s ease}
.planet-stage.ready canvas{opacity:1}
.planet-poster{position:absolute;left:50%;top:50%;width:calc(var(--planet-d) * 1.25);aspect-ratio:1;
  transform:translate(calc(-50% + var(--planet-shift-x,0px)),calc(-50% + var(--planet-shift)));pointer-events:none;transition:opacity .9s ease}
.planet-poster img{width:100%;height:100%;display:block}
.planet-stage.ready .planet-poster{opacity:0}
.planet-marks{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .9s ease .3s}
.planet-stage.ready .planet-marks{opacity:1}

/* un point : pastille lumineuse + nom ; le centre de la pastille est sur le lieu (margin = -centre) */
.planet-mark{position:absolute;left:0;top:0;height:32px;margin:-16px 0 0 -12px;padding:0 10px 0 8px;display:flex;align-items:center;gap:8px;
  color:#fff;text-decoration:none;font-size:13px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;pointer-events:auto;
  text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 12px rgba(0,0,0,.65);will-change:transform,opacity}
.planet-mark:hover{color:#fff}
.planet-mark i{width:8px;height:8px;border-radius:50%;background:#fff;flex:none;
  box-shadow:0 0 0 3px rgba(155,138,251,.35),0 0 12px 2px rgba(255,255,255,.5);transition:box-shadow .25s,background .25s}
.planet-mark.on i,.planet-mark:hover i{background:#d9d2ff;box-shadow:0 0 0 5px rgba(155,138,251,.5),0 0 18px 5px rgba(196,185,255,.7)}
.planet-mark.away{pointer-events:none}
/* rubriques mises en avant (portfolio, à propos) : pastille et nom un peu plus présents */
.planet-mark.main{font-size:14px;font-weight:600}
.planet-mark.main i{width:10px;height:10px;box-shadow:0 0 0 4px rgba(155,138,251,.45),0 0 16px 3px rgba(255,255,255,.6)}
/* près du bord droit, le nom passe à gauche de la pastille (planet-home.js), la pastille restant sur le lieu */
.planet-mark.flip{flex-direction:row-reverse;padding:0 8px 0 10px}

/* en haut à gauche : nom, statut, lieu · météo · heure ; bouton clair/sombre en haut à droite */
.planet-id{position:fixed;left:clamp(18px,3vw,36px);top:clamp(16px,3vh,32px);z-index:5;display:grid;gap:3px;justify-items:start;pointer-events:none}
.planet-name{font-size:18px;font-weight:600;letter-spacing:-.02em}
.planet-sub{font-size:14px;line-height:1.45;color:rgba(255,255,255,.62);max-width:46ch}
.planet-status{display:flex;align-items:center;gap:7px;font-size:13px;color:rgba(255,255,255,.72)}
.planet-status i{width:7px;height:7px;border-radius:50%;background:#98a2b3;flex:none}
.planet-status.online i{background:#32d583}
.planet-status.dnd i{background:#f97066}
.planet-wx{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;padding:0;border:0;background:none;color:rgba(255,255,255,.6);
  font:inherit;font-size:13px;text-align:left;cursor:pointer;pointer-events:auto}
.planet-wx > span + span::before{content:"·";margin-right:6px;color:rgba(255,255,255,.35)}
.planet-wx:hover{color:#fff}
.planet-wx:focus-visible{outline:2px solid #9b8afb;outline-offset:3px;border-radius:4px}
.planet-home .theme-btn{top:clamp(14px,3vh,28px);bottom:auto;right:clamp(14px,3vw,32px);background:rgba(12,14,22,.7);border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.7)}
.planet-home .theme-btn:hover{color:#fff;border-color:rgba(255,255,255,.4)}

/* en bas : indication, lecteur + anneaux, rubriques en texte (la vraie navigation), crédit des textures */
.planet-foot{position:fixed;left:50%;bottom:clamp(14px,3vh,28px);transform:translateX(-50%);z-index:5;width:min(92vw,780px);
  display:grid;justify-items:center;gap:10px;pointer-events:none}
.planet-hint{font-size:12px;letter-spacing:.04em;color:rgba(255,255,255,.45)}
.planet-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 8px;pointer-events:auto}
.planet-nav a{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:9999px;border:1px solid rgba(255,255,255,.16);
  background:rgba(12,14,22,.6);color:rgba(255,255,255,.82);font-size:14px;font-weight:500;text-decoration:none;
  transition:color .2s,border-color .2s,background .2s}
.planet-nav a:hover,.planet-nav a.on{color:#fff;border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.1)}
.planet-nav a:focus-visible{outline:2px solid #9b8afb;outline-offset:2px;color:#fff}
/* pastilles retirées de l'affichage (2026-10-23, demande d'Ana) : on navigue avec les points du globe. La liste reste dans
   la page (points de la planète, clavier, lecteurs d'écran, moteurs de recherche) et réapparaît quand on y arrive au clavier. */
.planet-nav:not(:focus-within){position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.planet-credit{font-size:10px;color:rgba(255,255,255,.5);pointer-events:auto}
.planet-credit a{color:inherit;text-decoration:underline;text-decoration-color:rgba(255,255,255,.3)}
.planet-credit a:hover{color:rgba(255,255,255,.8)}

/* boutons ronds en haut à droite, de droite à gauche : clair/sombre, ♪ musique, lieux (même allure) */
.hud-btn{position:fixed;z-index:60;top:clamp(14px,3vh,28px);width:48px;height:48px;padding:0;
  display:grid;place-items:center;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:rgba(12,14,22,.7);
  color:rgba(255,255,255,.7);cursor:pointer;transition:color .2s,border-color .2s,box-shadow .3s}
.hud-btn[hidden]{display:none}
.hud-btn:hover,.places-btn[aria-expanded="true"]{color:#fff;border-color:rgba(255,255,255,.4)}
.hud-btn:focus-visible{outline:2px solid #9b8afb;outline-offset:2px}
.music-btn{right:calc(clamp(14px,3vw,32px) + 56px)}
.places-btn{right:calc(clamp(14px,3vw,32px) + 112px)}
.places-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* panneau « lieux » sous les boutons */
.places-pop{position:fixed;z-index:61;top:calc(clamp(14px,3vh,28px) + 58px);right:clamp(14px,3vw,32px);min-width:210px;padding:6px;
  display:grid;gap:2px;border-radius:16px;border:1px solid rgba(255,255,255,.14);background:rgba(12,14,22,.94);
  box-shadow:0 18px 40px -12px rgba(0,0,0,.8)}
.places-pop[hidden]{display:none}
.places-pop a{display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:10px;color:rgba(255,255,255,.82);
  font-size:15px;text-decoration:none;transition:background .15s,color .15s}
.places-pop a[data-main]{color:#fff;font-weight:600}
.places-pop a:hover,.places-pop a:focus-visible{background:rgba(255,255,255,.08);color:#fff;outline:none}
.music-btn .mb-note{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.music-btn .mb-eq{display:none;align-items:flex-end;gap:2.5px;height:16px}
.music-btn .mb-eq i{width:3px;height:100%;border-radius:1px;background:currentColor;transform-origin:bottom;animation:mb-eq 1s ease-in-out infinite}
.music-btn .mb-eq i:nth-child(2){animation-delay:-.35s}
.music-btn .mb-eq i:nth-child(3){animation-delay:-.7s}
.music-btn.playing{color:#fff;border-color:rgba(155,138,251,.6);box-shadow:0 0 18px -2px rgba(155,138,251,.55)}
.music-btn.playing .mb-note{display:none}
.music-btn.playing .mb-eq{display:flex}
@keyframes mb-eq{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}

/* cartes ajoutées (photos & film, favoris & liens, clio) : sections, et la vidéo passe au-dessus d'une carte ouverte */
.card-modal .about-in > .eb{margin-bottom:-6px}
.card-sec{display:grid;gap:10px;padding-top:18px;border-top:1px solid var(--line)}
.card-modal .about-in > .eb + .card-sec{border-top:0;padding-top:0}
.card-feat{justify-items:start}
.card-feat h3{font-size:18px;font-weight:500;line-height:1.3;letter-spacing:-.02em;color:var(--fg)}
.card-feat .desc{font-size:15px;line-height:1.6;color:var(--strong);max-width:62ch}
.card-modal .favs{overflow:visible}
.card-chat .chat{height:min(56vh,440px)}
/* clio, l'assistante d'histoire (2026-10-23) : sources en liens au-dessus de la réponse, état « je cherche… », note sous le champ */
.card-chat .hist-a{display:grid;gap:6px}
.card-chat .hist-src{font-size:12px;line-height:1.5;color:var(--g500)}
.card-chat .hist-src a{color:inherit;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:2px}
.card-chat .hist-src a:hover{color:var(--fg)}
.card-chat .hist-txt{white-space:pre-wrap}
.card-chat .hist-wait{color:var(--g400);animation:hist-wait 1.4s ease-in-out infinite}
.card-chat .msg.err .hist-txt,.card-chat .hist-err{color:var(--g500)}
.card-chat .hist-ex{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.card-chat .hist-ex button{padding:7px 12px;border-radius:9999px;border:1px solid var(--line);background:var(--card);color:var(--strong);
  font:inherit;font-size:13px;cursor:pointer;transition:border-color .2s,color .2s}
.card-chat .hist-ex button:hover{border-color:var(--g400);color:var(--fg)}
.card-chat .hist-ex button:focus-visible{outline:2px solid #9b8afb;outline-offset:2px}
.card-chat .hist-xl{display:block;margin-bottom:2px;font-size:11px;letter-spacing:.02em;color:var(--g500)}
.card-chat .chat-in button:disabled{opacity:.45;cursor:default}
.card-chat .hist-note{flex:none;font-size:11px;line-height:1.4;color:var(--g400);text-align:center}
@keyframes hist-wait{0%,100%{opacity:.45}50%{opacity:1}}
#screeningModal{z-index:88}
/* home.css garde des règles de l'ancienne grille pour les écrans ≥ 1000 px (tuiles à hauteur fixe) : elles masquaient des
   favoris (li:nth-child(n+3…5)), estompaient le bas de la liste et étiraient les anneaux. Neutralisées ici. */
.card-modal .fav-g li:nth-child(n){display:grid}
.card-modal .favs{flex:none;-webkit-mask-image:none;mask-image:none}
.card-rings .rings{flex:none;display:block;width:104px;min-height:0;max-height:none;height:auto;margin:0}
.card-rings .rings svg{width:100%;height:auto;max-width:none}
/* anneaux dans la carte « à propos » (2026-10-23) : cercles à gauche, légende à droite */
.card-rings{display:grid;grid-template-columns:104px minmax(0,1fr);gap:18px;align-items:center;margin-top:-8px}
.card-rings .ring-legend{gap:8px}
.card-rings .ring-legend li{font-size:14px;white-space:normal}
.card-rings .ring-legend li span{white-space:normal}

/* sans WebGL : l'image fixe et la liste restent, pas de points ni d'indication de glisser */
.planet-stage.no-webgl{cursor:default}
.planet-stage.no-webgl .planet-marks{display:none}
.planet-stage.no-webgl ~ .planet-foot .planet-hint{display:none}
/* téléphone couché : pas d'indication en bas (la planète prend la hauteur, planet-home.js) */
@media (orientation:landscape) and (max-height:560px){.planet-hint{display:none}}

@media(max-width:680px){
  .planet-stage{--planet-d:min(44vh,80vw);--planet-shift:-100px}
  .planet-id{right:184px;gap:2px}
  .planet-name{font-size:16px}
  .planet-sub,.planet-status,.planet-wx{font-size:12px}
  .planet-nav a{min-height:44px;padding:0 15px}
  .planet-mark{font-size:12px}
  .card-rings{grid-template-columns:84px minmax(0,1fr);gap:14px}
  .card-rings .rings{width:84px}
}
@media(prefers-reduced-motion:reduce){
  .planet-stage canvas,.planet-poster,.planet-marks,.planet-mark i,.planet-nav a,.hud-btn,.places-pop a{transition:none}
  .music-btn .mb-eq i,.card-chat .hist-wait{animation:none}
}