/* homme-zodiacal.css · l'homme zodiacal interactif · page Astrologie médicale · 24/09/2026
   La scène garde son propre ciel sombre quel que soit le thème du site ; le panneau de lecture
   reprend les couleurs de la page. Pour modifier : changer le ?v= sur la page (dossier /css immuable). */

/* ── La scène : pleine largeur, bords fondus dans le noir ── */
.hz-scene,main#main > section.hz-scene{position:relative;background:#05040d;color:#f6f2e8;overflow:hidden;isolation:isolate;padding:0;margin:0}
/* Ordinateur : la scène fait exactement la hauteur de l'écran sous le menu, l'image entière y tient,
   et la couleur du ciel comble ce qui reste de part et d'autre. Mobile : l'image prend toute la largeur. */
.hz-stage{position:relative;margin:0 auto;width:100%;height:calc(100svh - 65px - 14px);min-height:420px}
@supports not (height:100svh){.hz-stage{height:calc(100vh - 79px)}}
.hz-scene--portrait .hz-stage{height:auto;min-height:0;aspect-ratio:941/1672}
@supports not (aspect-ratio:1/1){.hz-scene--portrait .hz-stage{height:calc(100vw*1.777)}}
.hz-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.hz-img{filter:saturate(1.02)}
/* les fondus sont maintenant dessinés dans l'image elle-même (SVG) : les voiles HTML ne servent plus */
.hz-fade{display:none}

/* ── Vie au repos ── */
.hz-breath{opacity:.5;transform-origin:center;transform-box:fill-box;animation:hz-breath 7s ease-in-out infinite}
@keyframes hz-breath{0%,100%{opacity:.35;transform:scale(.96)}50%{opacity:.75;transform:scale(1.06)}}
.hz-star{opacity:.15;animation:hz-twinkle 4.5s ease-in-out infinite}
@keyframes hz-twinkle{0%,100%{opacity:.1}50%{opacity:.9}}
.hz-pulse{fill:#ffe7b0;opacity:0;animation:hz-pulse 5.2s ease-in-out infinite}
@keyframes hz-pulse{0%,70%,100%{opacity:0;transform:scale(1)}82%{opacity:.35}90%{opacity:0;transform:scale(1.9)}}
.hz-pulse{transform-origin:center;transform-box:fill-box}
.hz-svg[data-active]:not([data-active=""]) .hz-pulse{animation-play-state:paused;opacity:0}

/* ── Survol : voile, halo, trait, anneau ── */
.hz-dim{opacity:0;transition:opacity .45s ease}
.hz-svg[data-active]:not([data-active=""]) .hz-dim{opacity:.5}
.hz-hole{opacity:0}
.hz-hole.is-on{opacity:1}
.hz-halo{opacity:0;transform-origin:center;transform-box:fill-box;transform:scale(.7);transition:opacity .35s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.hz-zone.is-on .hz-halo{opacity:1;transform:scale(1)}
.hz-line{stroke:#ffe7b0;stroke-width:1.6;stroke-linecap:round;fill:none;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset .55s cubic-bezier(.2,.7,.2,1),opacity .2s ease}
.hz-line-glow{stroke:#e4c07e;stroke-width:7;opacity:0;filter:blur(3px)}
.hz-zone.is-on .hz-line{stroke-dashoffset:0;opacity:.95}
.hz-zone.is-on .hz-line-glow{opacity:.45}
.hz-ring{fill:none;stroke:#ffe7b0;stroke-width:2.2;opacity:0;transform-origin:center;transform-box:fill-box;transform:scale(.92);transition:opacity .3s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
.hz-zone.is-on .hz-ring{opacity:.95;transform:scale(1);filter:drop-shadow(0 0 10px rgba(228,192,126,.85))}
.hz-hit{cursor:pointer;outline:none}
.hz-hit:focus-visible circle{stroke:#ffe7b0;stroke-width:2;stroke-dasharray:4 4}
.hz-zones{pointer-events:visiblePainted}

/* ── Étiquette, posée près du médaillon, hors du corps ── */
.hz-tip{position:absolute;z-index:3;pointer-events:none;opacity:0;transition:opacity .25s ease;width:max-content;max-width:min(260px,60vw);transform:translate(0,-50%)}
.hz-tip.is-on{opacity:1}
.hz-tip--gauche{transform:translate(-100%,-50%)}
.hz-tip--droite{transform:translate(0,-50%)}
.hz-tip--dessous{transform:translate(-50%,0)}
.hz-tip--dessus{transform:translate(-50%,-100%)}
.hz-tip-in{position:relative;background:rgba(5,4,13,.55);border:1px solid rgba(228,192,126,.6);border-radius:4px;padding:5px 9px 4px;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.hz-tip-t{display:block;font-family:var(--font-serif);font-size:.8rem;line-height:1.25;color:#fbf6ea;white-space:normal;text-wrap:balance}
.hz-tip-l{display:block;margin-top:2px;font-family:var(--font-sans);font-size:.62rem;letter-spacing:.01em;color:#e4c07e}
@media (max-width:640px){.hz-tip-t{font-size:.74rem}.hz-tip-in{padding:4px 7px 3px}}

/* ── Panneau de lecture ── */
.hz-panel,main#main > section.hz-panel{position:relative;z-index:2;padding:clamp(1.6rem,4vh,3rem) 0 clamp(2rem,5vh,3.5rem)}
.hz-panel .grimoire-breadcrumb{margin-bottom:.9rem}
.hz-panel-head{text-align:center;margin-bottom:clamp(1.4rem,3vh,2.2rem)}
.hz-panel-head .grimoire-page-h1{margin-bottom:.9rem}
.hz-glyphes{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0 auto clamp(1.2rem,3vh,2rem);padding:0;max-width:960px}
.hz-glyphes button{appearance:none;background:transparent;border:1px solid var(--line);color:var(--ink-2);border-radius:999px;padding:7px 12px 7px 9px;display:inline-flex;align-items:center;gap:7px;font-family:var(--font-sans);font-size:.85rem;cursor:pointer;transition:border-color .2s ease,color .2s ease,background .2s ease}
.hz-glyphes .hz-g{font-size:1.05rem;line-height:1;font-family:var(--font-glyph);color:var(--gold)}
.hz-glyphes button:hover,.hz-glyphes button:focus-visible{border-color:var(--gold);color:var(--gold)}
.hz-glyphes button[aria-pressed="true"]{border-color:var(--gold);color:var(--gold);background:var(--surface-2)}
#hz-lecture{scroll-margin-top:84px}
.hz-lecture-corps{max-width:980px;margin:0 auto;transition:opacity .2s ease;opacity:1}
.hz-lecture-corps.is-fading{opacity:0}
.hz-lecture-corps.is-vide{text-align:center;color:var(--ink-3);font-weight:300;font-size:1.02rem;line-height:1.65}
.hz-lecture-h2{font-family:var(--font-serif);font-weight:300;font-size:clamp(1.6rem,3.2vw,2.3rem);line-height:1.15;margin:0 0 1.3rem;display:flex;align-items:center;justify-content:center;text-align:center;gap:.5em;flex-wrap:wrap}
.hz-lecture-g{color:var(--gold);font-size:1.15em;font-family:var(--font-glyph)}
.hz-lecture-h3{font-family:var(--font-serif);font-weight:400;font-size:1.35rem;margin:2.2rem 0 .8rem;text-align:center}
.hz-lecture-suite{text-align:center}
.hz-lecture-corps p{font-weight:300;line-height:1.72;margin:0 0 1rem;color:var(--ink)}
.hz-lecture-ouverture p:first-child{font-size:1.08rem}
.hz-det{border-top:1px solid var(--line);padding:.55rem 0}
.hz-dets .hz-det:last-child{border-bottom:1px solid var(--line)}
.hz-det summary{cursor:pointer;font-family:var(--font-sans);font-weight:500;color:var(--ink-2);padding:.35rem 0;list-style:none;display:flex;justify-content:space-between;align-items:center}
.hz-det summary::-webkit-details-marker{display:none}
.hz-det summary::after{content:"+";color:var(--gold);font-weight:300;font-size:1.25rem;line-height:1}
.hz-det[open] summary::after{content:"–"}
.hz-det[open] summary{color:var(--gold)}
.hz-det > p{margin-top:.5rem}
.hz-lecture-suite{margin-top:1.6rem}
.hz-lien{color:var(--gold);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.hz-lien:hover{border-bottom-color:var(--gold)}
.hz-portes{margin-top:clamp(1.6rem,4vh,2.6rem)}
.hz-portes .grimoire-grid{max-width:760px;margin:0 auto}


/* ══════════ Mon corps : le thème posé sur l'image ══════════ */
.hz-aura{opacity:0;transition:opacity 1.2s ease}
.hz-svg.is-perso .hz-aura{opacity:1;animation:hz-aura 9s ease-in-out infinite}
@keyframes hz-aura{0%,100%{opacity:.75}50%{opacity:1}}
.hz-svg.is-perso .hz-dim{opacity:.45}
.hz-svg.is-perso .hz-pulse{animation-play-state:paused;opacity:0}
.hz-svg.is-perso .hz-breath{opacity:.35}
/* zones personnelles : halo, anneau et trait restent allumés à la mesure de leur poids */
.hz-zone.is-perso .hz-halo{opacity:var(--w,.6);transform:scale(1);transition-delay:var(--delai,0s)}
.hz-zone.is-perso .hz-ring{opacity:calc(.35 + var(--w,.6) * .6);transform:scale(1);transition-delay:var(--delai,0s)}
.hz-zone.is-perso .hz-line{stroke-dashoffset:0;opacity:calc(.25 + var(--w,.6) * .5);transition-delay:var(--delai,0s)}
.hz-zone.is-perso .hz-line-glow{opacity:calc(var(--w,.6) * .3)}
.hz-zone.is-reflexe .hz-halo{opacity:.22;transform:scale(.9)}
.hz-zone.is-reflexe .hz-ring{opacity:.3;transform:scale(1)}
.hz-zone.is-on .hz-halo{opacity:1;transform:scale(1)}
.hz-zone.is-on .hz-ring{opacity:.95}
.hz-zone.is-on .hz-line{opacity:.95}
.hz-zone.is-on .hz-line-glow{opacity:.45}
/* voile de carence sur les médaillons de l'élément manquant */
.hz-carence{opacity:0;transition:opacity .8s ease;pointer-events:none}
.hz-svg.is-perso .hz-zone.is-carence .hz-carence{opacity:.42}
.hz-zone.is-on .hz-carence{opacity:0}
/* glyphes des planètes posés sur le corps */
.hz-badge{opacity:0;transform:scale(.6);transform-origin:center;transform-box:fill-box;transition:opacity .45s ease,transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:var(--delai,0s);pointer-events:none}
.hz-svg.is-perso .hz-zone.is-perso .hz-badge{opacity:1;transform:scale(1)}
.hz-badge-fond{fill:rgba(5,4,13,.82);stroke:#e4c07e;stroke-width:1.1}
.hz-badge-g{fill:#ffe7b0;font-family:var(--font-glyph);paint-order:stroke;stroke:rgba(5,4,13,.6);stroke-width:.6}
.hz-badge-ac{font-family:var(--font-sans);font-weight:600;letter-spacing:.02em}
.hz-zone.is-on .hz-badge-fond{stroke:#ffe7b0;filter:drop-shadow(0 0 6px rgba(228,192,126,.9))}

/* ══════════ Le formulaire, sous l'image ══════════ */
.hz-calcul{margin:0 auto clamp(1.2rem,3vh,2rem);max-width:980px;scroll-margin-top:84px}
.hz-form{display:grid;grid-template-columns:minmax(140px,1fr) minmax(120px,.8fr) minmax(200px,1.6fr) auto;gap:10px 14px;align-items:end;padding:18px 20px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.hz-form label{display:block;font-family:var(--font-sans);font-size:.78rem;color:var(--ink-3);margin:0 0 6px}
.hz-form input{width:100%;min-height:44px}
.hz-form .hz-form-submit{align-self:end}
.hz-form button[type="submit"]{white-space:nowrap;min-height:44px}
.hz-form-etat{grid-column:1 / -1;margin:2px 0 0;font-family:var(--font-sans);font-size:.85rem;color:var(--ink-3);min-height:1.2em}
.hz-form-etat.is-erreur{color:#c0392b}
[data-theme="dark"] .hz-form-etat.is-erreur{color:#ff9b8a}
.hz-form-hint{grid-column:1 / -1;margin:0;font-family:var(--font-sans);font-size:.78rem;color:var(--ink-3);line-height:1.45}
.hz-form .profile-loader{grid-column:1 / -1}
@media (max-width:900px){.hz-form{grid-template-columns:1fr 1fr}.hz-form .hz-form-city{grid-column:1 / -1}.hz-form .hz-form-submit{grid-column:1 / -1}.hz-form button[type="submit"]{width:100%}}
@media (max-width:480px){.hz-form{grid-template-columns:1fr;padding:14px 14px 12px}}

/* ══════════ Les deux états du panneau ══════════ */
.hz-modes{display:flex;justify-content:center;gap:0;margin:0 auto clamp(1rem,2.4vh,1.6rem);border:1px solid var(--line);border-radius:999px;padding:3px;width:max-content;max-width:100%}
.hz-modes[hidden]{display:none}
.hz-modes button{appearance:none;border:0;background:transparent;color:var(--ink-2);font-family:var(--font-sans);font-size:.88rem;padding:8px 18px;border-radius:999px;cursor:pointer;transition:background .2s ease,color .2s ease}
.hz-modes button[aria-pressed="true"]{background:var(--gold);color:var(--on-gold,#1a1408)}
.hz-glyphes button.is-perso{border-color:var(--gold)}
.hz-glyphes button.is-perso .hz-gn::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--gold);margin-left:7px;vertical-align:middle}

/* ══════════ Le panneau personnel ══════════ */
.hz-lecture-meta{text-align:center;color:var(--ink-3);font-family:var(--font-sans);font-size:.9rem;margin:-.4rem 0 1.4rem}
.hz-synthese{padding:clamp(1rem,2.4vw,1.6rem) clamp(1.1rem,2.6vw,1.9rem);border:1px solid var(--line);border-radius:12px;background:var(--surface);margin:0 0 1.2rem}
.hz-synthese p{font-size:1.04rem}
.hz-synthese p:last-child{margin-bottom:0}
.hz-centre-note{text-align:center;color:var(--ink-3);font-size:.92rem;margin:-.3rem 0 1rem}
.hz-zones-liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:0 0 .6rem}
.hz-zone-btn{appearance:none;display:flex;align-items:center;gap:12px;text-align:left;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);cursor:pointer;transition:border-color .2s ease,background .2s ease}
.hz-zone-btn:hover,.hz-zone-btn:focus-visible{border-color:var(--gold);background:var(--surface-2)}
.hz-zone-btn .hz-g{font-family:var(--font-glyph);color:var(--gold);font-size:1.5rem;line-height:1;flex:0 0 auto}
.hz-zone-btn-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.hz-zone-btn-t strong{font-family:var(--font-serif);font-weight:400;font-size:1.05rem;line-height:1.2}
.hz-zone-btn-t small{font-family:var(--font-sans);font-size:.78rem;color:var(--ink-3)}
.hz-temp-titre{text-align:center;font-family:var(--font-serif);font-size:1.25rem;margin:0 0 .9rem}
.hz-temp-note,.corps-temp-note{text-align:center;font-size:.88rem;color:var(--ink-2);margin:-.3rem 0 1rem}
.hz-det-g{font-family:var(--font-glyph);color:var(--gold);margin-right:.5em;font-size:1.05em}
.hz-det-meta{display:block;font-family:var(--font-sans);font-weight:400;font-size:.8rem;color:var(--ink-3);margin-top:2px;flex:1 1 100%}
.hz-lecture-h3 .hz-det-meta{text-align:center;margin-top:4px}
.hz-det summary{flex-wrap:wrap}
.hz-det summary .hz-det-meta{order:3}
.hz-note{font-family:var(--font-sans);font-size:.88rem;color:var(--ink-3);text-align:center;margin:-.6rem 0 1.2rem}
.hz-avert{font-size:.92rem;color:var(--ink-3);border-top:1px solid var(--line);padding-top:1rem;margin-top:1.8rem}
.hz-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:1.4rem 0 0}
.hz-btn{appearance:none;border:1px solid var(--gold);background:var(--gold);color:var(--on-gold,#1a1408);font-family:var(--font-sans);font-size:.9rem;padding:10px 18px;border-radius:999px;cursor:pointer;transition:filter .2s ease}
.hz-btn:hover{filter:brightness(1.06)}
.hz-btn-quiet{background:transparent;color:var(--ink-2);border-color:var(--line)}
.hz-btn-quiet:hover{border-color:var(--gold);color:var(--gold)}
.hz-retour{text-align:center;margin:0 0 1rem;font-family:var(--font-sans);font-size:.9rem}

@media print{
  .hz-scene,.hz-calcul,.hz-modes,.hz-glyphes,.hz-actions,.hz-centre-note,nav.v5-nav,.v5-nav-sheet,footer,.back-to-top{display:none}
  .hz-det{break-inside:avoid}
  .hz-det[open] summary::after,.hz-det summary::after{content:""}
  .hz-lecture-corps details > *{display:block}
}

@media (prefers-reduced-motion:reduce){
  .hz-breath,.hz-star,.hz-pulse{animation:none}
  .hz-halo,.hz-line,.hz-line-glow,.hz-ring,.hz-dim,.hz-tip,.hz-lecture-corps,.hz-badge,.hz-aura,.hz-carence{transition:none}
  .hz-svg.is-perso .hz-aura{animation:none;opacity:.9}
}