/* Feuille commune aux deux variantes. Rien ici ne doit differer entre A et B,
   sinon la comparaison porterait sur autre chose que le cout du fond. */

@font-face{font-family:'Nyght Serif';src:url('fonts/NyghtSerif-Light.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Nyght Serif';src:url('fonts/NyghtSerif-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Nyght Serif';src:url('fonts/NyghtSerif-RegularItalic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
/* Candidates pour le nom de la marque, essayees au panneau (touche P). Une
   declaration ne telecharge rien tant que la famille n'est pas utilisee. */
@font-face{font-family:'Basteleur Moonlight';src:url('fonts/Basteleur-Moonlight.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Basteleur Bold';src:url('fonts/Basteleur-Bold.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Cantique';src:url('fonts/Cantique.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Happy Times';src:url('fonts/HappyTimes.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Mourier';src:url('fonts/Mourier.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Feroniapi';src:url('fonts/Feroniapi.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Ouroboros';src:url('fonts/Ouroboros-Regular.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Anthony';src:url('fonts/Anthony.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Trickster';src:url('fonts/Trickster.woff2') format('woff2');font-display:swap}

:root{
  --ink:#080840; --deep:#1A1C56; --accent:#8C00FF; --light:#FFFFFF;
  --blue:#3D91FF; --rose:#FF8ACE;
  --ui:'Jost',-apple-system,'Segoe UI',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--ink);color:var(--light);font-family:var(--ui);overflow-x:hidden}

/* Le hero reste colle en haut pendant que la suite monte par-dessus : la
   nebuleuse est un fond qui se dissout, pas une image qu'on quitte. */
.hero{position:sticky;top:0;height:100vh;width:100%;overflow:hidden;isolation:isolate}

/* --- Mon chemin ----------------------------------------------------------
   Vient recouvrir le ciel. Le fond part transparent pour que le gaz
   transparaisse sous les premieres lignes, et rejoint l'encre plus bas. */
.chemin{position:relative;z-index:2;min-height:100vh;
  padding:clamp(120px,18vh,220px) 8vw clamp(120px,16vh,200px);
  /* paliers en hauteur d'ecran, pas en pourcentage de la section : un texte
     plus long ne doit pas etirer la zone transparente sur la nebuleuse */
  --voile:.82;
  background:linear-gradient(180deg,transparent 0,
    color-mix(in srgb, var(--ink) 72%, transparent) 34vh,
    color-mix(in srgb, var(--ink) calc(var(--voile) * 100%), transparent) 62vh)}
/* Le repere : colonne de gauche collee pendant la lecture. Le titre, l'annee
   du paragraphe en cours, et un fil de lumiere qui s'allonge avec le recit. */
.chemin .repere{position:sticky;top:22vh;align-self:start}
.chemin .annee{font-family:'Nyght Serif',serif;font-weight:300;
  font-size:clamp(64px,8.5vw,136px);line-height:1;margin:clamp(18px,3vh,34px) 0 0;
  letter-spacing:-.01em;color:#fff;opacity:.92;
  text-shadow:0 2px 40px rgba(8,8,64,.85)}
.chemin .annee span{display:inline-block;animation:annee-vient .7s cubic-bezier(.22,1,.36,1) both}
@keyframes annee-vient{from{opacity:0;transform:translateY(.18em);filter:blur(6px)}}
/* Les croquis : un trait blanc au stylo, dasharray normalise par pathLength
   pour que chaque trait se dessine de 0 a 1 quel que soit sa longueur. Le
   filtre griffon tremble le trait comme une main. */
.chemin .croquis{position:relative;width:clamp(110px,13vw,170px);aspect-ratio:1;
  margin-top:clamp(14px,2.4vh,28px)}
.chemin .croquis svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;
  fill:none;stroke:rgba(255,255,255,.88);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
  filter:url(#griffon) drop-shadow(0 0 6px rgba(255,138,206,.35));
  opacity:0;transition:opacity .5s ease}
.chemin .croquis svg.actif{opacity:1;transition-delay:.15s}
.chemin .croquis path{stroke-dasharray:1;stroke-dashoffset:1}
.chemin .croquis svg.actif path{animation:griffonne 1.1s cubic-bezier(.4,0,.2,1) both;
  animation-delay:calc(.25s + var(--i, 0) * .22s)}
.chemin .croquis path:nth-child(2){--i:1}
.chemin .croquis path:nth-child(3){--i:2}
.chemin .croquis path:nth-child(4){--i:3}
.chemin .croquis path:nth-child(5){--i:4}
.chemin .croquis path:nth-child(6){--i:5}
.chemin .croquis path:nth-child(7){--i:6}
@keyframes griffonne{to{stroke-dashoffset:0}}
.chemin .fil{display:block;width:1px;height:clamp(80px,16vh,160px);margin-top:clamp(22px,4vh,44px);
  margin-left:.08em;position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.7),color-mix(in srgb, var(--rose) 70%, transparent) 60%,transparent);
  transform-origin:top;transform:scaleY(0)}
.chemin .fil::after{content:'';position:absolute;left:50%;bottom:0;width:5px;height:5px;
  translate:-50% 50%;border-radius:50%;background:#fff;
  box-shadow:0 0 12px 3px color-mix(in srgb, var(--rose) 80%, transparent)}
@supports (animation-timeline: view()){
  .chemin{view-timeline-name:--chemin}
  .chemin .fil{animation:fil-trace linear both;animation-timeline:--chemin;
    animation-range:entry 80% exit 20%}
}
@keyframes fil-trace{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){
  html:not([data-motion="force"]) .chemin .annee span{animation:none}
  html:not([data-motion="force"]) .chemin .fil{animation:none;transform:none}
  html:not([data-motion="force"]) .chemin .croquis path{animation:none;stroke-dashoffset:0}
  html:not([data-motion="force"]) .chemin .croquis svg{transition:none}
  html:not([data-motion="force"]) .chemin{--voile:1}
}
@media (max-width:760px){
  .chemin .repere{position:static}
  .chemin .fil{display:none}
  .chemin .annee{font-size:56px}
  .chemin .croquis{width:84px}
}
.chemin .cadre{max-width:1500px;display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,120px);
  align-items:start}
.chemin h2{font-family:'Nyght Serif',serif;font-weight:300;
  font-size:clamp(34px,4.2vw,64px);line-height:1.12;margin:0;
  letter-spacing:-.005em;max-width:12ch;
  text-shadow:0 2px 40px rgba(8,8,64,.85)}
.chemin p{font-size:clamp(16px,1.3vw,19px);line-height:1.8;font-weight:300;
  max-width:52ch;opacity:.86;margin:0 0 1.4em;
  text-shadow:0 1px 24px rgba(8,8,64,.9)}
.chemin p:last-child{margin-bottom:0}
/* Entree : chaque bloc arrive sur sa propre ligne de temps, celle de sa
   position dans la fenetre. Le titre s'allume au passage du meme degrade
   que le nom, puis se repose en blanc : les tiers extremes du degrade sont
   blancs, la couleur ne fait que traverser. */
@supports (animation-timeline: view()){
  .chemin h2,.chemin p{animation:arrive linear both;animation-timeline:view();
    animation-range:entry 0% cover 35%}
  .chemin p+p{animation-range:entry 0% cover 42%}
  .chemin h2{
    background:linear-gradient(90deg,#fff 0%,#fff 28%,var(--rose) 42%,
      var(--blue) 54%,#fff 68%,#fff 100%);
    background-size:300% 100%;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
    animation:arrive linear both, allume linear both;
    animation-timeline:view(),view();
    animation-range:entry 0% cover 35%, cover 6% cover 48%}
}
@keyframes arrive{from{opacity:0;transform:translateY(26px);filter:blur(5px)}}
@keyframes allume{from{background-position:0% 50%}to{background-position:100% 50%}}
@media (prefers-reduced-motion:reduce){
  html:not([data-motion="force"]) .chemin h2,
  html:not([data-motion="force"]) .chemin p{animation:none}
  html:not([data-motion="force"]) .chemin h2{background-position:100% 50%}
}
@media (max-width:760px){
  .chemin{padding-left:7vw;padding-right:7vw}
  .chemin .cadre{grid-template-columns:1fr;gap:28px}
}

/* --- couches de fond ---------------------------------------------------- */
.sky{position:absolute;inset:0;width:100%;height:100%;display:block;
  will-change:transform}
#dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen;will-change:transform}

/* Zone de calme : sans elle, les delies de Nyght Serif Light se hachent sur
   les filaments. Un degrade lateral, pas un voile uniforme, pour ne pas
   eteindre la nebuleuse sur toute la largeur. */
.calm{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(100deg, rgba(8,8,64,.92) 0%, rgba(8,8,64,.78) 26%,
                            rgba(8,8,64,.30) 52%, rgba(8,8,64,0) 72%),
    radial-gradient(120% 90% at 50% 50%, rgba(8,8,64,0) 45%, rgba(8,8,64,.55) 100%);}

/* --- marque -------------------------------------------------------------
   Calee sur le 8vw du contenu, pas plaquee dans l'angle : elle doit tomber
   sur la meme verticale que le titre, sinon on lit deux marges differentes.
   Posee apres .calm pour ne pas subir le voile qui protege le texte : le
   trace est deja en bleu nuit, l'assombrir une seconde fois l'effacerait.
   La drop-shadow ne retouche pas les couleurs de la marque, elle decolle la
   silhouette du fond, comme si la nebuleuse l'eclairait par derriere. */
/* Le nom accompagne le logo : l'embleme seul ne dit pas qui parle. Le
   groupe garde la place et l'inertie du logo (hors parallaxe, hors clic),
   l'alt de l'image passe au vide puisque le nom est desormais du texte. */
.marque-bloc{position:absolute;z-index:2;pointer-events:none;
  left:8vw;top:clamp(26px,4.4vh,46px);
  height:clamp(58px,7.2vh,88px);
  display:flex;align-items:center;gap:clamp(12px,1.3vw,19px)}
.marque{height:100%;width:auto;
  filter:drop-shadow(0 0 14px color-mix(in srgb, var(--rose) 38%, transparent))
         drop-shadow(0 2px 10px rgba(8,8,64,.7))}
.marque-nom{font-family:'Cantique',serif;font-weight:300;
  font-size:clamp(17px,1.5vw,21px);letter-spacing:.025em;line-height:1.25;
  color:#fff;white-space:nowrap;
  text-shadow:0 2px 14px rgba(8,8,64,.85)}
/* jamais d'italique : regle posee par Pierre le 8 septembre 2026 */
/* « by Pollyanna » : un degrade de la palette defile dans les lettres. Le
   rose reste dessous, c'est ce qu'on voit si le clip sur le texte manque. */
.marque-nom em{font-style:normal;color:var(--rose);
  background:linear-gradient(to right,var(--rose),var(--blue),var(--light),var(--rose));
  background-size:200%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:magie-defile 3s linear infinite}
@keyframes magie-defile{from{background-position:0% center}to{background-position:-200% center}}
@media (prefers-reduced-motion:reduce){ .marque-nom em{animation:none} }

/* --- navigation ---------------------------------------------------------
   Alignee sur la hauteur du logo, pas sur le haut de page : les deux se lisent
   comme une seule ligne. Serif en bas de casse, jamais de capitales espacees. */
.nav{position:absolute;z-index:3;right:8vw;top:clamp(26px,4.4vh,46px);
  height:clamp(58px,7.2vh,88px);display:flex;align-items:center;
  gap:clamp(20px,2.4vw,38px)}
.nav a{position:relative;font-family:'Nyght Serif',serif;font-weight:300;
  font-size:clamp(14px,1.05vw,16.5px);color:rgba(255,255,255,.66);
  text-decoration:none;white-space:nowrap;
  text-shadow:0 1px 16px rgba(8,8,64,.8);transition:color .45s ease}
/* Le filet ne souligne pas : il s'allume depuis le centre et s'eteint aux bords,
   comme le reste de la page. */
.nav a::after{content:'';position:absolute;left:0;right:0;bottom:-8px;height:1px;
  background:linear-gradient(90deg,transparent,
    color-mix(in srgb, var(--rose) 88%, transparent),transparent);
  transform:scaleX(0);transform-origin:50% 50%;
  transition:transform .6s cubic-bezier(.22,1,.36,1)}
.nav a:hover,.nav a:focus-visible{color:#fff}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:rgba(255,255,255,.94)}
.nav a[aria-current="page"]::after{transform:scaleX(1);opacity:.42}
.nav a:focus-visible{outline:1px solid rgba(255,255,255,.5);outline-offset:7px;
  border-radius:2px}
@media (prefers-reduced-motion:reduce){ .nav a::after{transition:none} }
/* Sous 760px la barre passe sous le logo et peut tenir sur deux lignes :
   mieux que d'escamoter des entrees derriere un menu. */
@media (max-width:760px){
  .nav{right:auto;left:0;width:100%;height:auto;justify-content:center;
    flex-wrap:wrap;row-gap:8px;gap:18px;
    top:calc(clamp(26px,4.4vh,46px) + clamp(58px,7.2vh,88px) + 12px)}
  .nav a{font-size:13.5px}
}

/* --- contenu ------------------------------------------------------------ */
.content{position:relative;height:100%;display:flex;flex-direction:column;
  justify-content:center;padding:0 8vw;max-width:1500px}
/* Sortie au defilement : le titre s'eleve et s'efface sur la premiere
   moitie de hauteur d'ecran, avant que le texte suivant n'arrive, tenu par
   le defilement lui-meme, pas par le
   temps. Sans prise en charge de animation-timeline, rien ne bouge et la
   section recouvre simplement le texte. */
@supports (animation-timeline: scroll()){
  .content{
    animation:quitte linear both;
    animation-timeline:scroll(root);
    animation-range:0 42vh}
}
@keyframes quitte{
  to{opacity:0;transform:translateY(-9vh);filter:blur(6px)}}
/* La marque et la navigation restent collees en haut avec le ciel : elles
   s'effacent a leur tour, plus tard que le titre, avant que le texte de la
   section ne vienne se superposer a elles. */
@supports (animation-timeline: scroll()){
  .marque-bloc,.nav{animation:efface linear both;
    animation-timeline:scroll(root);animation-range:55vh 95vh}
}
@keyframes efface{to{opacity:0}}
@media (prefers-reduced-motion:reduce){
  html:not([data-motion="force"]) .marque-bloc,
  html:not([data-motion="force"]) .nav{animation:none}
}
@media (prefers-reduced-motion:reduce){
  html:not([data-motion="force"]) .content{animation:none}
  /* Sans la sortie animee, le titre et les boutons resteraient sous la
     section et se superposeraient a son titre : le hero redevient un bloc
     ordinaire qui s'en va, et la section couvre en encre plein. */
  html:not([data-motion="force"]) .hero{position:relative}
  html:not([data-motion="force"]) .chemin{background:var(--ink)}
}
h1{font-family:'Nyght Serif',serif;font-weight:300;
  font-size:clamp(40px,6.2vw,92px);line-height:1.14;margin:0 0 26px;
  max-width:15ch;letter-spacing:-.005em;
  text-shadow:0 2px 40px rgba(8,8,64,.85)}
h1 em{font-style:normal;font-weight:400;color:var(--rose)}
.lede{font-size:clamp(15px,1.25vw,17.5px);line-height:1.75;max-width:46ch;
  font-weight:300;opacity:.84;margin:0 0 38px;
  text-shadow:0 1px 24px rgba(8,8,64,.9)}
.cta{display:flex;gap:14px;flex-wrap:wrap}
/* Les boutons empruntent au ciel, pas au tableau de bord : typographie du
   titre en bas de casse, filet fin plutot qu'aplat, et une lueur qui monte
   au lieu d'un anneau qui tourne. */
.btn{display:inline-block;padding:17px 34px;text-decoration:none;
  font-family:'Nyght Serif',serif;font-weight:400;font-size:18px;
  letter-spacing:.005em;line-height:1;border-radius:360px;
  transition:transform .5s cubic-bezier(.22,1,.36,1), color .5s ease}
.btn:hover{transform:translateY(-1px)}
/* --- bouton principal ------------------------------------------------
   Sans halo : un filet fin et fixe, un fond sombre translucide qui laisse
   passer la nebuleuse. Tout se joue au survol, ou une aurore monte du bas
   et une poussiere d'etoiles s'allume. */
.btn-1{
  /* plus d'overflow:hidden : la poussiere doit s'envoler au-dessus du
     bouton ; l'aurore se rogne elle-meme par son border-radius */
  position:relative; isolation:isolate; z-index:0;
  color:#fff;
  border:1px solid color-mix(in srgb, var(--rose) 34%, transparent);
  border-radius:360px;
  background:color-mix(in srgb, var(--ink) 55%, transparent);
  box-shadow:0 10px 48px -20px color-mix(in srgb, var(--accent) 52%, transparent);
  backdrop-filter:blur(3px);
  transition:transform .5s cubic-bezier(.22,1,.36,1), border-color .6s ease,
             box-shadow .6s ease, background-color .6s ease;
}
.btn-1 span{position:relative;z-index:1;
  text-shadow:0 0 0 transparent;transition:text-shadow .6s ease}
.btn-1:hover span,.btn-1:focus-visible span{
  transition-delay:.12s;
  text-shadow:0 0 18px rgba(255,255,255,.55),
              0 0 42px color-mix(in srgb, var(--rose) 60%, transparent)}

/* --- chatoiement du filet ---------------------------------------------
   Emprunte au shader-button : plusieurs degrades qui tournent, mais a des
   durees volontairement desaccordees. Une seule couche qui tourne se lit
   comme une horloge, c'est ce qui avait fait retirer le halo. Trois couches
   a 17, 23 et 31 s ne retombent en phase qu'au bout de plusieurs heures :
   l'oeil n'y trouve plus de periode, donc plus de mecanique.
   Deux ecarts assumes avec la reference : mix-blend-mode:screen au lieu de
   difference, parce que difference sur du violet sort les complementaires et
   quitte la palette ; et un masque en anneau, parce que le bouton doit rester
   un filet qui laisse passer la nebuleuse, pas une pastille pleine. */
.chatoie{
  position:absolute;inset:-1px;z-index:-1;pointer-events:none;
  border-radius:360px;overflow:hidden;
  padding:1px;                                  /* epaisseur de l'anneau */
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;   mask-composite:exclude;
  opacity:.4;transition:opacity .6s ease}

/* Chaque couche deborde largement du bouton : une bande de degrade doit
   traverser le filet, pas tourner a l'interieur comme une aiguille. */
.chatoie b{
  position:absolute;top:50%;left:50%;width:340%;aspect-ratio:1;
  margin:-170% 0 0 -170%;
  mix-blend-mode:screen;
  background:radial-gradient(ellipse at 65% 180%,
    var(--rose), var(--accent), var(--blue), var(--rose),
    var(--accent), var(--blue), var(--rose));
  animation:chatoie-tour linear infinite}
.chatoie b:nth-child(1){animation-duration:17s;animation-delay:0s}
.chatoie b:nth-child(2){animation-duration:23s;animation-delay:-6.4s;opacity:.75}
.chatoie b:nth-child(3){animation-duration:31s;animation-delay:-11.2s;
  mix-blend-mode:color-dodge;opacity:.5}

@keyframes chatoie-tour{ to { transform:rotate(360deg) } }

.btn-1:hover .chatoie,.btn-1:focus-visible .chatoie{opacity:1}

/* l'aurore : elle monte du bas au survol */
.btn-1::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  border-radius:inherit;
  background:radial-gradient(165% 210% at 50% 132%,
    color-mix(in srgb, var(--rose) 44%, transparent) 0%,
    color-mix(in srgb, var(--accent) 30%, transparent) 42%,
    transparent 84%);
  filter:blur(6px);
  /* au repos elle couve au lieu d'etre eteinte, et respire tres lentement :
     le bouton annonce ou tout se joue, sans crier. La respiration est
     desaccordee du chatoiement (9 s contre 17-31 s), l'oeil n'y trouve pas
     de mecanique. */
  opacity:.16;transform:translateY(42%);
  animation:aurore-couve 9s ease-in-out infinite;
  transition:opacity .6s ease, transform .85s cubic-bezier(.22,1,.36,1)}
.btn-1:hover::before,.btn-1:focus-visible::before{animation:none}
@keyframes aurore-couve{0%,100%{opacity:.11}50%{opacity:.21}}

/* poussiere d'etoiles, en echo au ciel */

.btn-1:focus-visible{outline:1px solid rgba(255,255,255,.55);outline-offset:5px}
.btn-1:hover,.btn-1:focus-visible{
  border-color:color-mix(in srgb, var(--rose) 68%, transparent);
  background:color-mix(in srgb, var(--ink) 42%, transparent);
  box-shadow:0 16px 64px -22px color-mix(in srgb, var(--accent) 66%, transparent)}
.btn-1:hover::before,.btn-1:focus-visible::before{opacity:.8;transform:translateY(0)}
.btn-1:active{transform:translateY(1px) scale(.985)}

/* L'onde du gong : le clic declenche le son, l'oeil recoit la meme chose,
   un cercle doux qui s'elargit depuis le centre et s'evanouit au meme
   tempo que la frappe. Portee par ::after, declenchee par la classe posee
   au clic et retiree a la fin de l'animation. */
.btn-1::after{
  content:'';position:absolute;left:50%;top:50%;z-index:0;pointer-events:none;
  width:130%;aspect-ratio:1;border-radius:50%;
  translate:-50% -50%;
  background:radial-gradient(circle,
    color-mix(in srgb, var(--rose) 50%, white) 0%,
    color-mix(in srgb, var(--rose) 30%, transparent) 34%,
    transparent 68%);
  opacity:0;scale:.2}
.btn-1.sonne::after{animation:onde-gong 1.4s cubic-bezier(.16,.84,.44,1) both}
/* la frappe embrase brievement le filet, qui se repose ensuite avec la
   transition de bordure existante, comme la resonance apres le coup */
.btn-1.sonne{border-color:color-mix(in srgb, var(--rose) 92%, white)}
@keyframes onde-gong{
  0%{opacity:.5;scale:.2}
  100%{opacity:0;scale:1.35}}

@media (prefers-reduced-motion: reduce){
  html:not([data-motion="force"]) .chatoie b{animation:none}
  html:not([data-motion="force"]) .chatoie{transition:none}
  html:not([data-motion="force"]) .btn-1,
  html:not([data-motion="force"]) .btn-1::before{transition:none}
  html:not([data-motion="force"]) .btn-1 .poussiere{transition:none;opacity:0}
  html:not([data-motion="force"]) .btn-1::before{animation:none}
  html:not([data-motion="force"]) .btn-2,
  html:not([data-motion="force"]) .btn-2::before{transition:none}
  html:not([data-motion="force"]) .btn-1.sonne::after{animation:none}
}

/* --- poussiere du bouton principal ------------------------------------
   Reste du composant d'Aaron Iker apres les retraits demandes (icone et
   trace en pointilles) : la seule poussiere, des braises qui naissent sur
   le pourtour et se dispersent delicatement de tous les cotes au survol. */
.btn-1 .poussiere{position:absolute;inset:0;width:100%;height:100%;
  overflow:visible;pointer-events:none;z-index:2;
  fill:color-mix(in srgb, var(--rose) 55%, white);
  opacity:0;transition:opacity .5s ease}
.btn-1:hover .poussiere,.btn-1:focus-visible .poussiere{opacity:.32}

/* --- bouton secondaire -------------------------------------------------
   La voie douce a cote de l'appel principal : lunaire la ou lui est rose.
   Pas d'aurore rose, pas d'onde, pas de poussiere, la hierarchie tient a
   cette retenue. Un voile de clair de lune se leve au survol, le label
   prend un eclat froid, l'appui et le focus parlent le meme langage que le
   reste de la page. */
.btn-2{position:relative;isolation:isolate;border-radius:360px;
  border:1px solid rgba(255,255,255,.26);color:rgba(255,255,255,.86);
  background:color-mix(in srgb, var(--ink) 24%, transparent);
  backdrop-filter:blur(2px);
  text-shadow:0 0 0 transparent;
  transition:transform .5s cubic-bezier(.22,1,.36,1), border-color .5s ease,
             color .5s ease, box-shadow .6s ease, text-shadow .6s ease}
.btn-2::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  border-radius:inherit;
  background:radial-gradient(150% 190% at 50% 128%,
    rgba(255,255,255,.15) 0%,
    color-mix(in srgb, var(--blue) 15%, transparent) 40%,
    transparent 80%);
  filter:blur(6px);
  opacity:0;transform:translateY(38%);
  transition:opacity .6s ease, transform .85s cubic-bezier(.22,1,.36,1)}
.btn-2:focus-visible{outline:1px solid rgba(255,255,255,.55);outline-offset:5px}
.btn-2:hover,.btn-2:focus-visible{
  border-color:rgba(255,255,255,.62);color:#fff;
  box-shadow:0 12px 44px -24px rgba(130,160,255,.6);
  text-shadow:0 0 16px rgba(255,255,255,.38)}
.btn-2:hover::before,.btn-2:focus-visible::before{opacity:.7;transform:translateY(0)}
.btn-2:active{transform:translateY(1px) scale(.985)}

/* --- bandeau de mesure -------------------------------------------------- */
.hud{position:fixed;top:12px;right:12px;z-index:20;background:rgba(6,6,26,.82);
  border:1px solid rgba(255,255,255,.16);border-radius:7px;padding:9px 12px;
  font-family:ui-monospace,'Cascadia Mono',monospace;font-size:11.5px;
  line-height:1.65;color:#cfd4e8;backdrop-filter:blur(8px);min-width:172px}
.hud b{color:#fff;font-weight:600}
.hud .v{float:right;font-variant-numeric:tabular-nums}
.hud .warn{color:#f0c674}
.hud .ok{color:#7fd6a0}

@media (max-width:760px){
  .calm{background:linear-gradient(180deg, rgba(8,8,64,.55) 0%, rgba(8,8,64,.88) 60%, rgba(8,8,64,.95) 100%)}
  .content{padding:0 7vw}
  .marque-bloc{left:7vw;height:clamp(48px,6vh,64px)}
  .marque-nom{font-size:15px}
}

/* --- musique de fond ----------------------------------------------------
   Rien ne demarre seul : les navigateurs refusent la lecture automatique, et
   sur un site de soin un son qui s'impose est un contresens. Le bouton dit
   l'etat plutot que de le suggerer, et les barres ne bougent que si du son
   sort vraiment, jamais pendant que le fichier se charge. */
.son{position:absolute;left:8vw;bottom:40px;z-index:25;
  display:flex;align-items:center;gap:11px;
  background:none;border:0;padding:6px 0;cursor:pointer;
  font-family:var(--ui);font-size:11px;font-weight:300;
  text-transform:uppercase;letter-spacing:.19em;
  color:rgba(255,255,255,.42);
  transition:color .45s ease}
.son:hover,.son:focus-visible{color:rgba(255,255,255,.86)}
.son:focus-visible{outline:1px solid rgba(255,255,255,.5);outline-offset:7px;border-radius:2px}

/* Quatre filets plutot qu'un pictogramme plein : le reste du hero est fait de
   traits fins, un haut-parleur en aplat y serait une piece d'interface. */
.barres{display:flex;align-items:flex-end;gap:2.5px;height:13px}
.barres i{width:1px;height:3px;background:currentColor;
  transition:height .5s cubic-bezier(.22,1,.36,1)}
.son.joue .barres i{animation:onde 1.9s ease-in-out infinite}
.son.joue .barres i:nth-child(2){animation-delay:-.55s}
.son.joue .barres i:nth-child(3){animation-delay:-1.15s}
.son.joue .barres i:nth-child(4){animation-delay:-.28s}
@keyframes onde{0%,100%{height:3px}50%{height:13px}}

/* Le fichier fait quelques megaoctets : entre le clic et le premier son il y a
   une attente, et un bouton muet pendant ce temps se lit comme un bouton casse.
   Les barres respirent en opacite, ce qui ne ressemble pas a l'onde de lecture. */
.son.charge{color:rgba(255,255,255,.3)}
.son.charge .barres i{animation:attente 1.4s ease-in-out infinite}
.son.charge .barres i:nth-child(2){animation-delay:-.35s}
.son.charge .barres i:nth-child(3){animation-delay:-.7s}
.son.charge .barres i:nth-child(4){animation-delay:-1.05s}
@keyframes attente{0%,100%{opacity:.22}50%{opacity:1}}

/* Mouvement reduit : les barres se figent a mi-hauteur. L'etat reste lisible,
   c'est l'agitation qui disparait. */
@media (prefers-reduced-motion:reduce){
  html:not([data-motion="force"]) .son.joue .barres i{animation:none;height:8px}
  html:not([data-motion="force"]) .son.charge .barres i{animation:none;opacity:.5}
}

@media (max-width:760px){ .son{left:7vw;bottom:28px} }