/* 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. */

/* Jost, servie par le site et non plus par Google Fonts : aucune adresse IP de
   visiteur ne part chez Google pour afficher une lettre, et la politique de
   confidentialite peut le dire. Fonte variable, une graisse de 100 a 900 par
   fichier ; les deux sous-ensembles et leurs plages sont ceux de Google. */
@font-face{font-family:'Jost';src:url('../fonts/Jost-latin.woff2') format('woff2');font-weight:100 900;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Jost';src:url('../fonts/Jost-latin-ext.woff2') format('woff2');font-weight:100 900;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@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}
/* Ecriture cursive des feuillets. Deux candidates, OFL toutes deux (Google
   Fonts) : Cedarville, liee et legere, l'ecriture d'ecole ; Homemade Apple,
   plus appuyee, le stylo sur le carnet. Cedarville est en place. */
@font-face{font-family:'Cedarville Cursive';src:url('../fonts/CedarvilleCursive.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Homemade Apple';src:url('../fonts/HomemadeApple.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}
/* Le doigt trace dans le ciel : la page garde le defilement vertical et le
   pincement, les traits de cote arrivent au nuanceur. */
body{background:var(--ink);color:var(--light);font-family:var(--ui);overflow-x:hidden;touch-action:pan-y pinch-zoom}

/* 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. */
/* Le hero reste colle en haut et passe au-dessus de la galaxie fixe. On ne le
   fait pas glisser hors champ : il grandit et s'efface, comme si on entrait
   dedans, et la galaxie derriere se decouvre sans jamais avoir bouge. */
/* Longueur de la plongee, en hauteurs d'ecran. Une seule valeur : la page
   la lit pour mesurer l'avancee, la section s'en ecarte d'autant. */
html{--plongee:3}
.hero{position:sticky;top:0;height:100vh;width:100%;overflow:hidden;
  isolation:isolate;z-index:3;will-change:opacity}

/* --- 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:1;min-height:100vh;
  margin-top:calc((var(--plongee) - 1) * 100vh);
  padding:0 8vw;
  /* 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 */
  /* Plus dense qu'avant : la galaxie est faite de lumiere ajoutee, elle ne
     se lit que sur un fond profond. A 0,82 la nebuleuse du hero passait au
     travers et mangeait les bras. */
  --voile:.96;
  /* Aucun fond : la galaxie fixe est derriere, un voile d'encre la masquerait.
     Le texte de la section retrouvera sa lisibilite par son propre fond, pose
     sous lui, pas par un voile sur toute la hauteur. */
  background:none}
/* La constellation : cinq galaxies sur un arc, de 1991 a aujourd’hui. Les
   boutons portent la position (--x, --y en pourcentage du cadre) ; le canvas
   lit leurs coordonnees reelles et peint par-dessous. Rien de la mise en page
   ne vit dans le dessin, donc la colonne mobile ne demande aucun code. */
/* The fixed galaxy and dates need exactly one viewport in document flow.
   Extra padding here delays the following section after the galaxy leaves. */
.chemin .constellation{position:relative;margin-top:0;height:100vh}
/* Le canvas deborde du cadre de part et d'autre : ses bords tombent hors de
   l'ecran, donc aucune arete ne peut se deviner. */
.chemin .constellation > *{overflow:visible}
/* Aucun fond sous la galaxie. Une ellipse d'encre y a servi au moteur
   precedent, qui ne se lisait que sur du sombre ; avec le moteur WebGPU elle
   dessinait exactement le bord qu'on ne veut pas voir. La galaxie se fond
   maintenant dans la nebuleuse de la page, sans limite. */
/* L'ilot React porte son propre canvas : on lui donne la place et le mode de
   composition, il gere le reste. */
/* La galaxie est un fond, pas un element de section : fixee, plein ecran,
   toujours a la meme pose. Elle est deja la pendant le hero, derriere lui, et
   c'est le hero qui s'ouvre pour la laisser paraitre. */
.chemin #galaxie3d{position:fixed;inset:0;pointer-events:none;
  /* Un voile de la nebuleuse du hero derriere le disque (deep #303291 et
     accent #8C00FF, tres attenues) : le vide de la section est le meme ciel
     que celui d'ou l'on vient, pas un fond noir. Ajoute par screen comme le
     canvas. */
  background:
    radial-gradient(ellipse 62% 48% at 50% 46%, rgba(48,50,145,.34), transparent 70%),
    radial-gradient(ellipse 80% 60% at 30% 70%, rgba(140,0,255,.10), transparent 70%);
  /* screen : la ou le canvas est noir, la page passe au travers. C'est ce qui
     fait disparaitre le rectangle. */
  mix-blend-mode:screen}
.chemin #galaxie3d canvas{display:block;width:100%!important;height:100%!important}
/* Only a few distant stars shimmer; the open sky stays free of ornaments. */
.experience::after{
  content:'';position:fixed;inset:0;z-index:5;pointer-events:none;}
.experience::after{background:
  radial-gradient(circle at 13% 29%,rgba(220,230,255,.65) 0 .65px,rgba(127,161,232,.13) 1.5px,transparent 6px),
  radial-gradient(circle at 82% 19%,rgba(237,221,244,.55) 0 .7px,rgba(189,145,218,.12) 1.6px,transparent 7px),
  radial-gradient(circle at 91% 53%,rgba(218,230,255,.45) 0 .5px,rgba(127,161,232,.10) 1.2px,transparent 5px),
  radial-gradient(circle at 22% 82%,rgba(231,225,245,.5) 0 .6px,rgba(175,161,216,.12) 1.4px,transparent 6px),
  radial-gradient(circle at 73% 88%,rgba(218,230,255,.4) 0 .5px,rgba(127,161,232,.1) 1.2px,transparent 5px);
  opacity:calc(.7 * var(--shared-stars,0));animation:distant-stars 19s ease-in-out infinite;animation-play-state:paused;}
.experience:has(.chemin.arrive:not(.lecture))::after{animation-play-state:running;}
.experience:has(.chemin.lecture)::after{visibility:hidden;}
@keyframes distant-stars{
  0%,100%{opacity:calc(.7 * var(--shared-stars,0));}
  23%{opacity:calc(.46 * var(--shared-stars,0));}
  57%{opacity:calc(.82 * var(--shared-stars,0));}
  81%{opacity:calc(.58 * var(--shared-stars,0));}}
/* Preserve the full galaxy at rest; feather its canvas edge only on departure. */
.chemin #galaxie3d{
  --galaxy-edge:linear-gradient(#000 65%,rgba(0,0,0,calc(1 - .25 * var(--scene-blend,0))) 82%,rgba(0,0,0,calc(1 - var(--scene-blend,0))));
  -webkit-mask-image:var(--galaxy-edge);mask-image:var(--galaxy-edge);}
.chemin.lecture #galaxie3d{opacity:.55;}
@media(prefers-reduced-motion:reduce){
  html:not([data-motion="force"]) .experience::after{animation:none;}
}
/* La galaxie suit le defilement (Pierre, 26 septembre) : une fois la plongee
   finie, elle monte avec la page, a sa vitesse, et laisse venir la suite.
   C'est le defilement qui tient l'animation (animation-timeline) : elle
   avance dans le compositeur, au pixel pres avec la page, sans le retard
   d'un script qui courrait apres. Les dates et le titre en carton montent
   avec elle. Sans prise en charge, hero.html fait la meme chose au script. */
@supports (animation-timeline: scroll()){
  .chemin #galaxie3d,.chemin .etapes,.chemin h2{animation:galaxie-monte linear both;
    animation-timeline:scroll(root);
    animation-range:calc(var(--plongee) * 100vh) calc(var(--plongee) * 100vh + 200vh)}
}
@keyframes galaxie-monte{from{translate:0 0}to{translate:0 -200vh}}
/* les dates s'effacent en montant, avant d'atteindre la navigation */
@supports (animation-timeline: scroll()){ .chemin .etapes{animation-name:galaxie-monte-dates} }
@keyframes galaxie-monte-dates{from{translate:0 0;opacity:1}12%{opacity:0}to{translate:0 -200vh;opacity:0}}
/* Les stations : cinq points sur un bras de la spirale, du bord (1991) au
   coeur (aujourd'hui). Elles vivent dans le meme cadre fixe que la galaxie ;
   c'est le moteur qui pose chaque <li> a l'ecran, chaque image, par la
   camera : elles tournent avec le disque. Elles n'apparaissent qu'une fois
   la plongee finie (.arrive, pose par la page) et que le moteur les place
   (data-stations), sinon elles tomberaient en haut a gauche. */
.chemin .etapes{position:fixed;inset:0;margin:0;padding:0;list-style:none;
  pointer-events:none;visibility:hidden;transition:visibility 0s 1.2s}
.chemin.arrive #galaxie3d[data-stations] ~ .etapes{visibility:visible;transition-delay:0s}
/* Chaque station s'allume a son tour, dans un ordre et avec des retards
   tires au sort par la page a chaque arrivee (--retard). Elle nait petite
   et grandit ; au depart elles s'eteignent toutes vite, sans retard. */
.chemin .etapes li{position:absolute;left:0;top:0;will-change:transform;
  opacity:0;transition:opacity .4s ease}
.chemin.arrive #galaxie3d[data-stations] ~ .etapes li{opacity:1;
  transition:opacity 1.1s ease var(--retard,0s)}
.chemin .etapes li .etape{transform:scale(.55);transition:transform .6s cubic-bezier(.22,1,.36,1)}
.chemin.arrive #galaxie3d[data-stations] ~ .etapes li .etape{transform:none;
  transition:transform 1.3s cubic-bezier(.22,1,.36,1) var(--retard,0s)}
/* Pendant la lecture d'un feuillet les stations s'effacent : elles
   transparaissaient sous le voile, derriere le texte. Elles reviennent a la
   fermeture, une a une, avec leurs retards. */
.chemin.lecture.arrive #galaxie3d[data-stations] ~ .etapes li{opacity:0;transition:opacity .5s ease}
/* On closing the book, return the dates with the scene, without replaying
   the staggered entrance used when first arriving from the hero. */
.chemin:not(.lecture):has(.livre:not([hidden])) #galaxie3d[data-stations] ~ .etapes li{
  transition:opacity .7s ease;}
.chemin .etape{
  appearance:none;border:0;background:none;cursor:pointer;padding:0;
  pointer-events:auto;
  display:grid;justify-items:center;gap:clamp(8px,1vh,14px);
  color:#fff;-webkit-tap-highlight-color:transparent;
  transition:transform .6s cubic-bezier(.22,1,.36,1)}
/* Le point : une etoile un peu plus vive que ses voisines, avec son halo. */
.chemin .astre{display:block;width:9px;height:9px;border-radius:50%;
  /* rose stellaire tres pale : un coeur presque blanc, le rose de la marque
     (#FF8ACE) seulement dans le halo */
  background:#FFE4F3;
  box-shadow:0 0 10px 3px rgba(255,190,228,.7),0 0 34px 12px rgba(255,138,206,.28);
  transition:box-shadow .5s ease,background .5s ease}
.chemin .etape:hover .astre,.chemin .etape:focus-visible .astre{
  background:#FFF6FB;
  box-shadow:0 0 14px 5px rgba(255,190,228,.95),0 0 48px 18px rgba(255,138,206,.42)}
/* Le millesime flotte au-dessus de son etoile, en Cantique, et respire :
   un lent va-et-vient vertical, decale d'une station a l'autre pour qu'elles
   ne montent pas toutes ensemble. */
.chemin .etape .an{order:-1;font-family:'Cantique',serif;font-weight:300;
  font-size:clamp(18px,1.7vw,26px);letter-spacing:.06em;
  /* Meme rose tres pale que le point, halo rose de la marque : le mot et
     son etoile sont une seule lumiere. L'or a ete essaye, trop chaud une
     fois le disque passe au bleu du hero. */
  color:#FFE4F3;opacity:.92;transition:opacity .5s ease,text-shadow .5s ease,color .5s ease;
  text-shadow:0 2px 18px rgba(8,8,64,.9),0 0 14px rgba(255,138,206,.4);
  animation:flotter 5.2s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * -1.3s)}
.chemin .etapes li:nth-child(2) .an{--i:1}
.chemin .etapes li:nth-child(3) .an{--i:2}
.chemin .etapes li:nth-child(4) .an{--i:3}
.chemin .etapes li:nth-child(5) .an{--i:4}
@keyframes flotter{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* L'etoile d'aujourd'hui, au coeur : une etoile en fusion, dessinee par un
   nuanceur (NEB.astre) sur un petit canvas. Surface qui bout, couronne de
   filaments, bouffees irregulieres : rien d'un fondu. Le canvas est large
   pour loger la couronne ; les marges negatives lui rendent l'empreinte
   d'un point de 30 px, pour que le millesime reste a sa place. */
.chemin .astre-coeur{width:96px;height:96px;margin:-33px;border-radius:0;
  background:none;box-shadow:none;mix-blend-mode:screen;
  transition:filter .5s ease}
/* Le survol du point (fond clair) ne doit pas s'appliquer au canvas : il en
   faisait un carre blanc qui s'allumait des que le curseur passait sur
   l'etoile. Ici le survol avive la lumiere, sans fond. */
.chemin .etape:hover .astre-coeur,.chemin .etape:focus-visible .astre-coeur{
  background:none;box-shadow:none;filter:brightness(1.3)}
@media (prefers-reduced-motion:reduce){
  html:not([data-motion="force"]) .chemin .etape .an{animation:none}
}
.chemin.arrive .etape:hover,.chemin.arrive .etape:focus-visible{transform:translateY(-3px);
  transition-delay:0s}
.chemin .etape:hover .an,.chemin .etape:focus-visible .an{
  opacity:1;color:#FFF6FB;text-shadow:0 0 18px rgba(255,138,206,.65)}
/* Foyer clavier : pas de cadre autour de la station, c'est l'etoile qui
   s'avive (regle du survol) et le millesime qui s'eclaire. */
.chemin .etape:focus-visible{outline:none}

@media (max-width:760px){
  .chemin .constellation{aspect-ratio:auto;min-height:0}
}

/* --- le livre, le carnet --------------------------------------------------
   Une page a part entiere, sans la galaxie. Dessus, un seul nuage de papier
   qui prend l'ecran : le dessin a gauche, le cahier a droite, d'une seule
   piece. Le nuage est l'intersection de deux masques SVG faits de lobes
   doux (dessin, haut et bas du cahier, pont), deplaces par un bruit et
   floutes : aucune ligne droite, et le bloc de texte est dans le coeur
   opaque par construction, on ne cache jamais un titre. Chaque feuillet a
   ses masques et son cadrage : cinq nuages differents. Les deux masques
   derivent lentement l'un contre l'autre : le contour change sans cesse.
   Rien ne defile : le corps du texte est ajuste par la page pour tenir. */
.livre{position:fixed;inset:0;z-index:40;overflow:hidden;
  background:radial-gradient(ellipse 70% 60% at 40% 50%,#100d40,#07072C 70%);
  opacity:0;transition:opacity .7s ease}
.livre[hidden]{display:none}
.livre.ouvert{opacity:1}
.feuillet{width:100%;height:100%}
/* Un feuillet cache reste dans la page, invisible, plutot que retire
   (display:none) : ses animations lentes (contour, respiration du dessin)
   ne repartent pas de zero quand on y revient, rien ne saute. Ses lettres
   n'ont pas d'animation tant qu'il est cache (regle plus bas). */
.feuillet[hidden]{visibility:hidden;opacity:0;position:absolute;inset:0;pointer-events:none}
.toile{display:grid;grid-template-columns:44fr 56fr;width:100%;height:100%;
  background:url(papier.svg),
    radial-gradient(ellipse 80% 90% at 35% 30%,#FBF5E8,#F1E6CF 60%,#E3D3B4);
  -webkit-mask-repeat:no-repeat;-webkit-mask-composite:source-in;-webkit-mask-size:100% 100%;
  mask-repeat:no-repeat;mask-composite:intersect;mask-size:100% 100%;
  animation:contour 36s ease-in-out infinite alternate;
  transform:scale(.985);transition:transform .8s cubic-bezier(.22,1,.36,1)}
.livre.ouvert .toile{transform:none}
/* la derive : un peu plus d'un vw d'ecart entre les deux masques, en sens contraires */
@keyframes contour{
  0%{mask-position:calc(50% - 1.2vw) calc(50% + .8vh),calc(50% + 1.2vw) calc(50% - .8vh);
     -webkit-mask-position:calc(50% - 1.2vw) calc(50% + .8vh),calc(50% + 1.2vw) calc(50% - .8vh)}
  50%{mask-position:calc(50% + 1.2vw) calc(50% - .8vh),calc(50% - .8vw) calc(50% + 1.2vh);
     -webkit-mask-position:calc(50% + 1.2vw) calc(50% - .8vh),calc(50% - .8vw) calc(50% + 1.2vh)}
  100%{mask-position:calc(50% - .4vw) calc(50% + 1.2vh),calc(50% + .8vw) calc(50% - 1.2vh);
     -webkit-mask-position:calc(50% - .4vw) calc(50% + 1.2vh),calc(50% + .8vw) calc(50% - 1.2vh)}}
.feuillet[data-annee="1991"] .toile{-webkit-mask-image:url(masque-1991-a.svg),url(masque-1991-b.svg);mask-image:url(masque-1991-a.svg),url(masque-1991-b.svg)}
.feuillet[data-annee="2011"] .toile{-webkit-mask-image:url(masque-2011-a.svg),url(masque-2011-b.svg);mask-image:url(masque-2011-a.svg),url(masque-2011-b.svg)}
.feuillet[data-annee="2015"] .toile{-webkit-mask-image:url(masque-2015-a.svg),url(masque-2015-b.svg);mask-image:url(masque-2015-a.svg),url(masque-2015-b.svg)}
.feuillet[data-annee="2019"] .toile{-webkit-mask-image:url(masque-2019-a.svg),url(masque-2019-b.svg);mask-image:url(masque-2019-a.svg),url(masque-2019-b.svg)}
.feuillet[data-annee="aujourd’hui"] .toile{-webkit-mask-image:url(masque-aujourdhui-a.svg),url(masque-aujourdhui-b.svg);mask-image:url(masque-aujourdhui-a.svg),url(masque-aujourdhui-b.svg)}
.feuillet[data-annee="1991"] img{object-position:50% 60%}
.feuillet[data-annee="2011"] img{object-position:46% 50%}
.feuillet[data-annee="2015"] img{object-position:54% 46%}
.feuillet[data-annee="2019"] img{object-position:50% 42%}
.feuillet[data-annee="aujourd’hui"] img{object-position:50% 55%}
/* Le dessin remplit sa colonne, hors flux ; son bord droit se dilue dans le
   papier, la couleur continue d'un cote a l'autre. */
.toile .vue{position:relative;height:100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,#000 62%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to right,#000 62%,rgba(0,0,0,0) 100%)}
/* a peine agrandi : les dessins n'ont pas la definition d'un vrai gros plan */
.toile img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;
  mix-blend-mode:multiply;transform:scale(1.06);
  animation:respirer 40s ease-in-out infinite alternate}
@keyframes respirer{from{transform:scale(1.06)}to{transform:scale(1.11) translate(-1%,.6%)}}
/* Le cahier : dans le coeur des lobes de droite (x 46 a 82 %, y 18 a 82 %
   de l'ecran, a moins de 0,7 rayon de leurs centres). Jamais de flou. */
.toile .page{min-width:0;height:100%;box-sizing:border-box;
  display:flex;flex-direction:column;justify-content:center;
  padding:18vh 18vw 18vh 2vw;overflow:hidden;
  opacity:0;transition:opacity .6s ease .15s}
.livre.ouvert .toile .page{opacity:1}
.toile .texte{min-width:0;max-width:640px;color:#3A2C1E;
  font-family:'Homemade Apple',cursive}
/* Les regles sont posees sur le paragraphe lui-meme : .chemin p fixe corps,
   interligne, une ombre bleue portee et une animation au defilement, et
   l'emporte sur ce qu'herite le conteneur. Le corps est --corps, pose par
   la page pour que tout tienne. */
.toile .texte p{max-width:none;opacity:1;margin:0 0 .7em;font-weight:400;
  font-size:var(--corps,24px);line-height:1.6;text-shadow:none;animation:none;filter:none}
.toile .texte .an{font-family:'Cantique',serif;font-size:clamp(26px,2.1vw,40px);
  color:#8A6535;margin:0;letter-spacing:.06em;line-height:1.2;text-shadow:none}
.toile .titre{font-family:'Cantique',serif;font-weight:300;font-size:clamp(32px,2.9vw,56px);
  color:#3A2C1E;margin:.15em 0 .45em;line-height:1.1;letter-spacing:.01em;
  animation:none;filter:none;opacity:1}
/* L'ecriture se trace, lettre a lettre, plus vite qu'une main : chaque
   lettre a son rang (--i) et le paragraphe son pas (--pas). Les mots sont
   insecables pour que la coupe de ligne reste celle du texte. */
.toile .texte .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.toile .texte .mot{display:inline-block;white-space:nowrap}
.toile .texte .l{opacity:0}
.livre.ouvert .feuillet:not([hidden]) .l{animation:tracer .18s ease-out forwards;
  animation-delay:calc(.9s + var(--i) * var(--pas))}
/* Deja ecrit : le texte est la tout de suite, sans rien. La regle doit
   l'emporter sur celle de l'ecriture (plus lourde, avec :not([hidden])) :
   sinon l'animation restait posee et chaque lettre clignotait a son tour
   au retour, un « resurlignage » que Pierre a vu. */
.livre.ouvert .feuillet.deja:not([hidden]) .l{animation:none;opacity:1;transform:none}
@keyframes tracer{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:none}}
.fermer,.feuilleter{position:absolute;z-index:1;border-radius:50%;
  border:1px solid rgba(255,255,255,.28);background:rgba(7,7,44,.5);color:#fff;
  cursor:pointer;display:grid;place-items:center;
  transition:background .3s ease,border-color .3s ease,opacity .3s ease}
.fermer{top:clamp(14px,2.6vh,28px);right:clamp(14px,2.6vw,28px);width:46px;height:46px}
.feuilleter{top:50%;transform:translateY(-50%);width:54px;height:54px}
.feuilleter.prec{left:clamp(12px,2vw,28px)}
.feuilleter.suiv{right:clamp(12px,2vw,28px)}
.feuilleter[hidden]{display:none}
.fermer:hover,.fermer:focus-visible,.feuilleter:hover,.feuilleter:focus-visible{
  background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.6);outline:none}
@media (prefers-reduced-motion:reduce){
  html:not([data-motion="force"]) .toile img,
  html:not([data-motion="force"]) .toile{animation:none}
  html:not([data-motion="force"]) .toile .texte .l{opacity:1;animation:none}
  .toile .page{transition:none}
}
@media (max-width:900px){
  .toile{grid-template-columns:1fr;grid-template-rows:42% 58%}
  .toile .vue{height:100%;
    -webkit-mask-image:linear-gradient(to bottom,#000 60%,rgba(0,0,0,0) 100%);
    mask-image:linear-gradient(to bottom,#000 60%,rgba(0,0,0,0) 100%)}
  .toile .page{justify-content:flex-start;padding:2vh 12vw 12vh}
}

.chemin .cadre{max-width:1700px;margin:0 auto}
/* Le titre est ancre dans la fenetre, comme la galaxie et les stations : en
   bas a gauche, en Cantique, du meme rose pale que les dates. Il apparait
   avec l'arrivee et ne bouge plus. */
/* Le titre est ancre dans la fenetre, comme la galaxie et les stations : en
   bas a gauche, en Cantique, du meme rose pale que les dates. Il apparait
   avec l'arrivee et ne bouge plus. (Essai en haut a cote du logo le 14
   septembre, puis retour ici a la demande de Pierre.) */
/* Le titre en carton : a l'arrivee, grand et centre sur la galaxie, en
   rose pale, le temps d'un souffle (classe carte, posee par la page), puis
   il se dissout et laisse la galaxie nue ; le filet de la navigation dit
   ensuite ou l'on est. Il ne capte rien. */
.chemin h2{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;margin:0;
  white-space:nowrap;pointer-events:none;
  font-family:'Cantique',serif;font-weight:400;
  font-size:clamp(44px,6vw,112px);line-height:1;letter-spacing:.02em;
  color:#FFE4F3;text-shadow:0 2px 60px rgba(8,8,64,.9),0 0 30px rgba(255,138,206,.45);
  opacity:0;transition:opacity .9s ease}
.chemin.carte h2{opacity:1;transition:opacity .45s ease .1s}
.chemin h2 span{display:inline-block}
.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 p{animation:arrive linear both;animation-timeline:view();
    animation-range:entry 0% cover 35%}
  .chemin p+p{animation-range:entry 0% cover 42%}
  /* (le titre, ancre, n'a plus d'animation au defilement) */
}
@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}
@media (hover:hover) and (pointer:fine){
  .hero{cursor:auto}
  .hero a,.hero button{cursor:pointer}
}
#dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen;will-change:transform}
#warp{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen}

/* 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:fixed;z-index:6;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);
  /* glisse entre sa place du hero et celle des sections de lecture */
  transition:top .9s cubic-bezier(.22,1,.36,1),height .9s cubic-bezier(.22,1,.36,1),gap .9s cubic-bezier(.22,1,.36,1)}
.marque-lien{display:block;height:100%;pointer-events:auto;cursor:pointer;border-radius:50%}
.marque-lien:focus-visible{outline:1px solid rgba(255,255,255,.5);outline-offset:6px}
.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-textes{position:relative;display:block}
.marque-nom,.marque-section{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);
  transition:opacity .9s ease,font-size .9s cubic-bezier(.22,1,.36,1)}
/* Le nom de la section prend la place du nom a l'arrivee, en fondu croise :
   a la taille et a la couleur du titre (rose pale des dates), sans le
   degrade, centre sur le logo. */
/* + .32em : Cantique porte ses lettres haut dans sa ligne ; mesure sur
   l'encre, le centre du mot tombe ainsi sur celui du logo */
.marque-section{position:absolute;left:0;top:calc(50% + .32em);transform:translateY(-50%);opacity:0;
  font-size:clamp(28px,3vw,56px);font-weight:400;line-height:1;letter-spacing:.01em;
  color:#FFE4F3;text-shadow:0 2px 40px rgba(8,8,64,.85),0 0 18px rgba(255,138,206,.4)}
/* plus precis que la regle du degrade, posee plus bas dans le fichier */
.marque-bloc .marque-section em{background:none;-webkit-text-fill-color:currentColor;animation:none;color:inherit}
/* (le remplacement du nom par « Mon chemin » a cote du logo n'est pas
   retenu : le titre vit en bas a gauche ; les regles restent pour un essai) */
.marque-section{display:none}
/* 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,.marque-section 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,.marque-section 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:fixed;z-index:6;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);
  /* s'efface pendant la plongee (classe posee par la page), revient avec la
     premiere date : le retard est celui de la station la plus prompte */
  transition:opacity 1.1s ease var(--retard-nav,0s),
    top .9s cubic-bezier(.22,1,.36,1),height .9s cubic-bezier(.22,1,.36,1)}
body.plongee .nav{opacity:0;pointer-events:none;transition-delay:0s}
.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,text-shadow .9s ease}
/* Expand the hit area without moving the navigation's luminous thread. */
.nav a::before{content:'';position:absolute;inset:-14px -5px;min-height:44px}
/* 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:4px;
  border-radius:2px}
@media (prefers-reduced-motion:reduce){ .nav a::after{transition:none} }
/* Le fil. Les quatre entrees reposent sur un fil de lumiere, celui qui relie
   les dates de « Mon chemin ». La section ou l'on se trouve porte une
   etoile a quatre branches, l'etincelle des tarifs, allumee comme les
   etoiles de la nebuleuse : coeur rose tres pale, halo rose de la marque.
   Elle scintille lentement. Quand la section change, elle glisse le long du
   fil jusqu'a son mot en semant un peu de poussiere, et la lumiere du fil la
   suit ; le mot qu'elle eclaire prend un reflet rose. Au survol d'un mot,
   elle se penche vers lui. Quand la navigation apparait, le fil se deroule
   depuis l'etoile. sections.js tient --x, --w, --demi, --debut et --long ;
   sans script, le filet d'origine reste. */
.nav{--fil:calc(50% + var(--demi, 17px))}
.nav.filee a[aria-current]::after{transform:scaleX(0)}
.nav.filee a[aria-current]{text-shadow:0 1px 16px rgba(8,8,64,.8),0 0 16px rgba(255,138,206,.42)}
.nav.filee::before,.nav-lueur,.nav-astre,.nav-astre::before,.nav-poussiere{content:'';position:absolute;pointer-events:none}
.nav.filee::before{left:var(--debut);width:var(--long);top:var(--fil);height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,228,243,.17) 14%,rgba(255,228,243,.17) 86%,transparent);
  transform-origin:calc(var(--x) - var(--debut)) 50%;
  transition:transform 1.9s cubic-bezier(.22,1,.36,1) calc(var(--retard-nav,0s) + .25s)}
@starting-style{.nav.filee::before{transform:scaleX(0)}}
body.plongee .nav.filee::before{transform:scaleX(0);transition:transform .4s ease}
.nav-lueur{left:calc(var(--x) - var(--w) / 2 - 12px);width:calc(var(--w) + 24px);top:var(--fil);height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb, var(--rose) 80%, transparent),transparent);
  transition:left .95s cubic-bezier(.65,0,.35,1),width .95s cubic-bezier(.65,0,.35,1)}
.nav-astre{left:var(--x);top:var(--fil);width:15px;height:15px;margin:-7.5px 0 0 -7.5px;
  filter:drop-shadow(0 0 1.5px rgba(255,214,238,.95)) drop-shadow(0 0 6px rgba(255,138,206,.6));
  translate:var(--penche,0px) 0;
  transition:translate .8s cubic-bezier(.22,1,.36,1)}
.nav-astre::before{inset:0;background:#FFF1F8;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0 8.85 7.15 16 8 8.85 8.85 8 16 7.15 8.85 0 8 7.15 7.15z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0 8.85 7.15 16 8 8.85 8.85 8 16 7.15 8.85 0 8 7.15 7.15z'/%3E%3C/svg%3E") center/contain no-repeat;
  animation:astre-scintille 5.2s ease-in-out infinite}
@keyframes astre-scintille{50%{scale:.74;opacity:.82}}
/* la poussiere semee pendant le glissement : posee et animee par le script */
.nav-poussiere{top:var(--fil);width:2px;height:2px;margin:-1px 0 0 -1px;border-radius:50%;
  background:#FFE4F3;box-shadow:0 0 4px 1px rgba(255,138,206,.55)}
.nav.calme::before,.nav.calme .nav-astre,.nav.calme .nav-lueur{transition:none}
.nav.calme .nav-astre::before{animation:none}
body:has(.nav.calme) .marque-bloc,body:has(.nav.calme) .nav{transition:opacity 1.1s ease}
/* Sous 900px la barre passe sous le logo. Une seule ligne, l'ecart se
   resserre avec l'ecran : le fil doit rester droit. */
@media (max-width:900px){
  .nav{right:auto;left:0;width:100%;height:auto;justify-content:center;
    gap:clamp(9px,3.5vw,18px);
    top:calc(clamp(26px,4.4vh,46px) + clamp(58px,7.2vh,88px) + 12px)}
  .nav a{font-size:13.5px}
}
@media (max-width:360px){
  .nav{gap:10px}
  .nav a{font-size:12.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 sont fixees dans la fenetre, voir plus haut ;
   la marque ne s'efface jamais) */
@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)}

/* The opening has one enclosed action; its companion is a quiet text link.
   Scope this to the hero because other sections also use .btn-2. */
.hero .cta{align-items:center;gap:14px 24px}
.hero .btn-2{padding:17px 2px;border:0;border-radius:2px;background:none;
  backdrop-filter:none;color:rgba(255,255,255,.88);font-size:17px;
  text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);
  text-decoration-thickness:1px;text-underline-offset:6px;box-shadow:none}
.hero .btn-2::before{display:none}
.hero .btn-2:hover,.hero .btn-2:focus-visible{color:#fff;text-decoration-color:var(--rose);box-shadow:none}
@media (max-width:600px){
  .hero .cta{align-items:flex-start;flex-direction:column;gap:8px}
  .hero .btn-2{margin-left:14px}
}
@media (orientation:portrait) and (min-width:601px){
  .hero .content{justify-content:flex-start;padding-top:clamp(190px,24vh,300px)}
}
@media (max-width:600px) and (max-height:700px){
  .hero .content{justify-content:flex-start;padding-top:146px}
  .hero h1{font-size:34px;line-height:1.08;margin-bottom:18px}
  .hero .lede{font-size:14px;line-height:1.5;margin-bottom:20px}
}

/* --- 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 l'onde ne bouge que si du son
   sort vraiment, jamais pendant que le fichier se charge. */
/* Fixe, en bas a droite : present d'un bout a l'autre du site, au-dessus du
   livre (40) ; a gauche il tombait sur les mentions du pied de page. Sur les
   pages de lecture, un verre de nuit le detache du texte qui passe dessous. */
.son{position:fixed;right:8vw;bottom:32px;z-index:45;
  display:flex;align-items:center;gap:11px;
  background:none;border:0;padding:12px 0;min-height:44px;cursor:pointer;
  font-family:var(--ui);font-size:12px;font-weight:400;
  text-transform:uppercase;letter-spacing:.19em;
  color:rgba(255,255,255,.72);
  border-radius:999px;transition:color .45s ease,background .45s ease,padding .45s ease}
body.practical .son{background:rgba(8,8,64,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  padding:12px 16px;box-shadow:inset 0 0 0 1px rgba(255,228,243,.14)}
.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}

/* L'onde : cinq filets de hauteurs inegales 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. Les quatre filets d'avant, a 3 px au repos,
   se lisaient comme quatre points ; l'onde se lit comme un son meme a
   l'arret (propositions/musique.html, D, choisie par Pierre). */
.onde{width:17px;height:17px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.15;stroke-linecap:round}
.onde line{transform-box:fill-box;transform-origin:50% 50%}
/* pendant la lecture, chaque filet respire a son propre moment */
.son.joue .onde line{animation:onde 1.9s ease-in-out infinite}
.son.joue .onde line:nth-child(2){animation-delay:-.5s}
.son.joue .onde line:nth-child(3){animation-delay:-1.1s}
.son.joue .onde line:nth-child(4){animation-delay:-.3s}
.son.joue .onde line:nth-child(5){animation-delay:-1.5s}
@keyframes onde{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.35)}}

/* 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 filets respirent en opacite, ce qui ne ressemble pas a l'onde de lecture. */
.son.charge{color:rgba(255,255,255,.3)}
.son.charge .onde line{animation:attente 1.4s ease-in-out infinite}
.son.charge .onde line:nth-child(2){animation-delay:-.28s}
.son.charge .onde line:nth-child(3){animation-delay:-.56s}
.son.charge .onde line:nth-child(4){animation-delay:-.84s}
.son.charge .onde line:nth-child(5){animation-delay:-1.12s}
@keyframes attente{0%,100%{opacity:.22}50%{opacity:1}}

/* Mouvement reduit : l'onde reste figee, l'etat se lit a la couleur du
   bouton. C'est l'agitation qui disparait. */
@media (prefers-reduced-motion:reduce){
  html:not([data-motion="force"]) .son.joue .onde line{animation:none}
  html:not([data-motion="force"]) .son.charge .onde line{animation:none;opacity:.5}
}

/* Sur un telephone, en haut a droite, dans la rangee de la marque. */
@media (max-width:760px){
  .son{right:7vw;bottom:auto;top:calc(clamp(26px,4.4vh,46px) + (clamp(48px,6vh,64px) - 44px) / 2);transition:color .45s ease,top .9s cubic-bezier(.22,1,.36,1)}
  body.practical .son{top:calc(18px + env(safe-area-inset-top));padding:12px 14px}
}