/* Intro de l'accueil (essai local, 27 oct. 2026) : le circuit imprimé se trace vers le logo, qui s'allume,
   puis le tout se fond dans le fond de la page. Une fois par visite (intro-tete.js pose html.intro-on). */
.intro { display: none; }
html:is(.intro-on, .intro-suite) .intro {
  display: block; position: fixed; inset: 0; z-index: 9999; overflow: hidden;
  background: rgba(10, 6, 7, var(--voile, 1)); transition: opacity .7s ease;
  /* filet de sécurité : si le script ne se charge pas, l'intro disparaît d'elle-même */
  animation: intro-secours 0s 9s forwards;
}
@keyframes intro-secours { to { visibility: hidden; opacity: 0; } }
.intro::before {                                         /* le même circuit que le fond de la page, en plus discret au départ */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("../img/circuit-rouge.svg") center / 820px 820px repeat;
  opacity: calc(var(--motif, .08) * var(--voile, 1)); transition: opacity 1.4s ease;
}
.intro.fond { --motif: .26; }
.intro.vol { pointer-events: none; }
.intro.vol::before { transition: none; }
.intro.vol .intro__passer { opacity: 0; }
.intro canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.intro__logo { display: none; }                          /* dessiné dans le canvas, l'image ne sert que de source */
.intro.sortie { opacity: 0; pointer-events: none; }
.intro__passer {
  position: absolute; right: 16px; top: 16px; z-index: 1;
  font: 500 .8rem/1 Montserrat, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; padding: .6rem 1rem; cursor: pointer;
}
.intro__passer:hover, .intro__passer:focus-visible { color: #fff; border-color: rgba(208, 52, 44, .7); }
@media (prefers-reduced-motion: reduce) { html.intro-on:not(.intro-force) .intro { display: none; } }   /* ?intro=1 passe outre */

/* ---- La page attend l'intro ----
   Pendant l'intro, l'accueil garde ses entrées en suspens : logo de l'anneau caché (c'est celui de l'intro qui vient
   s'y poser), anneau non tracé, services, titre tapé et textes invisibles. Quand le logo arrive, html.intro-on est
   retiré : les animations d'origine repartent de zéro, exactement comme à un chargement normal. */
html:is(.intro-on, .intro-suite) .noyau { animation: none; }           /* l'anneau ne glisse pas : le logo vient s'y poser */
html.intro-on :is(.heros h1, .heros__intro, .heros__puces, .heros .groupe-boutons, .heros .note-joindre, .heros__sante,
                  .noyau .heros__logo, .noyau__services li, .noyau__aura, .frappe__c, .frappe__curseur) {
  animation: none; opacity: 0;
}
html.intro-on .noyau__anneau circle { animation: none; }
/* les services suivent le logo d'un peu plus près qu'au chargement normal (le logo est déjà là) */
html.intro-suite .noyau__services li { animation-delay: calc(.45s + var(--k) * .11s); }