/* FICHIER COPIÉ par Outils/build.py depuis Outils/assets/heros.css — NE PAS MODIFIER ICI. */
/* ════════ Esteban DC · le visuel propre à chaque page annexe (25/10) ════════
   Source : Outils/assets/heros.css → copié dans Site web/assets/ par Outils/build.py (ne pas modifier la copie).
   Va avec assets/heros.js. Chargé par la page elle-même (Services, Méthode, À propos, Contact).
   Même place que l'ancien globe : à droite du titre sur ordinateur, en fond atténué sur téléphone.
   Couleurs : papier #f3efe6, lave #ff5a1f (variables de site.css). Polices : Bricolage Grotesque et Inter, sans italique. */

/* ─── La boîte ─── */
.heros{position:absolute;z-index:0;pointer-events:none;right:clamp(24px,6vw,96px);top:calc(72px + 6vh);width:clamp(260px,31vw,470px);aspect-ratio:1/1;
  opacity:0;transform:scale(.96) translateY(12px);transition:opacity 1.6s var(--ease) .25s,transform 1.8s var(--ease) .25s}
.pret .heros,.calme .heros{opacity:1;transform:none}
.heros svg{display:block;width:100%;height:auto;overflow:visible}
.heros canvas{display:block;width:100%;height:100%}
.heros a{cursor:pointer;outline:none}
.heros .zone{fill:transparent;pointer-events:all}
.heros text{font-family:var(--sans)}
.heros-pause *{animation-play-state:paused!important}
@keyframes hr-scintille{0%,100%{opacity:.3}50%{opacity:.85}}

/* ─── Services : la constellation ─── */
.heros-constellation{top:calc(72px + 4vh)}
.cs-fond circle{fill:#f3efe6}
.cs-fond .scintille{animation:hr-scintille 3s ease-in-out infinite}
.cs-lignes path{fill:none;stroke:rgba(243,239,230,.3);stroke-width:.8;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 1.3s var(--ease),stroke .3s,stroke-width .3s}
.heros.on .cs-lignes path{stroke-dashoffset:0}
.cs-lignes path.vive{stroke:rgba(255,90,31,.75);stroke-width:1.2}
.cs-etoile{opacity:0;transition:opacity .9s var(--ease)}
.heros.on .cs-etoile{opacity:1}
.cs-etoile .coeur{transform-box:fill-box;transform-origin:center;transition:transform .45s var(--ease)}
.cs-etoile.actif .coeur{transform:scale(1.9)}
.cs-etoile .lueur{fill:url(#hrLueur);animation:hr-scintille 3s ease-in-out infinite}
.cs-etoile.actif .lueur{fill:url(#hrLueurLave);animation:none;opacity:1}
.cs-etoile .point{fill:#f3efe6;transition:fill .3s}
.cs-etoile.actif .point{fill:#fff4ea}
.cs-num{font-size:9px;font-weight:600;letter-spacing:.16em;fill:rgba(255,90,31,.8)}
.cs-nom{font-family:var(--titre);font-size:15.5px;font-weight:700;letter-spacing:-.02em;fill:#f3efe6;opacity:0;transition:opacity .3s}
.cs-etoile.actif .cs-nom{opacity:1}

/* ─── Méthode : la trajectoire en 4 étages ─── */
.heros-fusee{aspect-ratio:400/420;top:calc(72px + 3vh)}
.fu-orbite{fill:none;stroke:rgba(243,239,230,.2);stroke-width:.9;stroke-dasharray:2 5}
.fu-sol{fill:none;stroke:rgba(243,239,230,.28);stroke-width:1}
.fu-pas{fill:rgba(255,90,31,.7)}
.fu-route{fill:none;stroke:rgba(243,239,230,.22);stroke-width:.9;stroke-dasharray:2 4}
.fu-trace{fill:none;stroke:rgba(255,90,31,.85);stroke-width:1.6;stroke-linecap:round}
.fu-point .tete{fill:#fff4ea}
.fu-etage .anneau{fill:rgba(11,13,18,.85);stroke:rgba(243,239,230,.35);stroke-width:1;transition:stroke .4s,fill .4s}
.fu-etage .coeur{fill:rgba(243,239,230,.45);transition:fill .4s}
.fu-etage.on .anneau{stroke:rgba(255,90,31,.9)}
.fu-etage.on .coeur{fill:#ff5a1f}
.fu-etage.vif .anneau{fill:rgba(255,90,31,.25);stroke:#ff8a55}
.fu-num{font-size:9px;font-weight:600;letter-spacing:.16em;fill:rgba(255,90,31,.85)}
.fu-titre{font-family:var(--titre);font-size:17px;font-weight:800;letter-spacing:-.03em;fill:rgba(243,239,230,.5);transition:fill .5s}
.fu-duree{font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;fill:rgba(243,239,230,.38);transition:fill .5s}
.fu-etage.on .fu-titre,.fu-etage.actif .fu-titre{fill:#f3efe6}
.fu-etage.on .fu-duree,.fu-etage.actif .fu-duree{fill:rgba(243,239,230,.72)}
.fu-etage.actif .fu-titre{fill:#ff8a55}
.fu-eteint .fu-etage *{transition-duration:1s}

/* ─── À propos : l'île (un peu plus large que haute) ─── */
.heros-ile{aspect-ratio:5/4;width:clamp(280px,36vw,560px);top:calc(72px + 5vh);right:clamp(12px,4vw,72px)}

/* ─── Contact : le signal (bandeau court : plus petit) ─── */
.heros-signal{width:clamp(190px,21vw,320px);top:calc(72px + 3vh)}

/* les ancres visées par la constellation et la fusée ne passent pas sous l'en-tête fixe */
.service[id],.etape[id]{scroll-margin-top:110px}

/* ─── Téléphone (27/10, demande d'Esteban : lisible, aucun texte superposé) ───
   Le visuel ne passe plus DERRIÈRE le titre : il prend sa place SOUS le texte d'intro, à pleine opacité.
   Ordre dans le bandeau : sur-titre → titre → intro/fil d'Ariane → visuel → trait. */
@media (max-width:760px){
  .tete-page:has(> .heros){display:flex;flex-direction:column}
  .tete-page:has(> .heros) > .tp-trait{order:30}
  .heros{position:relative;order:20;right:auto;top:auto;align-self:center;
    width:min(86vw,380px);margin:34px auto 0;transform:translateY(12px)}
  .pret .heros,.calme .heros{opacity:1;transform:none}
  .heros-fusee{width:min(88vw,380px)}
  .heros-ile{width:min(92vw,440px)}
  .heros-signal{width:min(62vw,260px);margin-top:26px}
  .service[id],.etape[id]{scroll-margin-top:90px}
}

/* « Réduire les animations » : image fixe, pas de transitions */
.calme .heros,.calme .heros *{transition:none!important;animation:none!important}