/* holos : la charte de websilon (unités, couleurs, polices, en-tête, règle, ouverture, boutons) posée sur une scène 3D fixe.
   Texte à gauche et objet à droite sur ordinateur ; objet en haut et texte en bas sur téléphone. */
@font-face{font-family:"Anybody";src:url(fonts/anybody.woff2) format("woff2");font-weight:100 900;font-stretch:50% 150%;font-display:swap}
@font-face{font-family:"Hanken";src:url(fonts/hanken.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{--u:min(1vw,1.78vh);--encre:#05080f;--nuit:#0a1422;--acier:#16324a;--petrole:#0e5a7c;--cyan:#35c6f0;--glace:#cfe9f4;--platine:#e8edf1;--blanc:#f6f9fb;
  --tete:#0a2238;--bord:clamp(18px,3vw,44px);color-scheme:dark}
@supports (height:1svh){:root{--u:min(1vw,1.78svh)}}
[data-accent=a]{--acc:#ff5b22;--sur-acc:#05080f}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-snap-type:y proximity;background:var(--encre);overflow-x:clip}
body{font-family:"Hanken",Arial,sans-serif;color:var(--blanc);background:var(--encre);font-size:17px;line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit}
#scene{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;background:radial-gradient(ellipse at 70% 40%,#0b1d33 0,var(--encre) 62%)}

/* En-tête de websilon : bleu uni, texte blanc, menu sans couleur d'accent */
.tete{display:flex;position:fixed;z-index:30;left:0;right:0;top:0;padding:clamp(14px,1.7vw,24px) var(--bord);padding-top:calc(clamp(14px,1.7vw,24px) + env(safe-area-inset-top,0px));
  justify-content:space-between;align-items:center;background:var(--tete);color:#fff}
.tete a{text-decoration:none}
.marque{display:flex;align-items:center;gap:.5em;font-size:clamp(19px,calc(1.6*var(--u)),30px);letter-spacing:-.02em;line-height:1}
.marque img{width:1.8em;height:auto}
.marque b{font-weight:800;color:var(--acc,#ff5b22)}.marque i{font-style:normal;font-weight:250}
.marque .sous{font-weight:250;opacity:.7;padding-left:.5em;margin-left:.1em;border-left:1px solid rgba(246,249,251,.3);font-size:.8em}
.tete__droite{display:flex;gap:2.2em;font-size:clamp(13px,calc(.95*var(--u)),19px);align-items:center}
.langues{display:flex;gap:.7em}
.langues a{opacity:.55;padding:6px 2px}
.langues a[aria-current],.langues a:hover{opacity:1;font-weight:700}
.tete__droite>a:hover,.tete__droite>a:focus-visible{text-decoration:underline;text-underline-offset:4px;outline:none}

/* Étapes */
main{position:relative;z-index:10}
.station{position:relative;min-height:100vh;min-height:100svh;scroll-snap-align:start;display:flex;align-items:center;padding:calc(100px + 2vh) var(--bord) calc(100px + 3vh)}
.texte{max-width:calc(46*var(--u) + 220px);margin-left:max(0px,calc(4vw - 18px))}
.js .texte{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.js .station.vue .texte{opacity:1;transform:none}
.sur{font-size:clamp(12px,calc(.85*var(--u)),15px);letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);margin-bottom:1.3em}
.titre{font-family:"Anybody",Arial,sans-serif;font-weight:280;font-stretch:118%;line-height:1;letter-spacing:-.015em;font-size:clamp(34px,calc(5*var(--u)),84px);margin-bottom:.32em;text-wrap:balance}
h1.titre{font-size:clamp(40px,calc(6.2*var(--u)),104px)}
/* Mot fort : se remplit de Braise de gauche à droite, comme sur websilon */
.titre b{font-weight:760;background:linear-gradient(90deg,var(--acc) 50%,currentColor 50%) 100% 0/200% 100% no-repeat;background-position:calc(100% - var(--f,1)*100%) 0;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.texte>p:not(.sur):not(.actions):not(.direct):not(.ref):not(.credits){font-size:clamp(15px,calc(1.2*var(--u)),26px);line-height:1.45;max-width:30em;margin-bottom:.7em;text-shadow:0 2px 22px rgba(5,8,15,.9)}
.cle{font-style:normal;color:var(--acc);font-weight:650}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px;margin-top:clamp(18px,2.6vh,32px)}
.btn{display:inline-block;text-decoration:none;cursor:pointer;background:var(--acc);color:var(--sur-acc);font:650 15px/1 "Hanken",Arial,sans-serif;padding:14px 26px;border-radius:40px;transition:transform .3s,filter .3s}
.btn:hover,.btn:focus-visible{transform:translateY(-2px);filter:brightness(1.08);outline:none}
.suite{display:inline-block;font-weight:600;text-decoration:none;border-bottom:2px solid var(--acc);padding-bottom:3px}
.suite:hover,.suite:focus-visible{color:#fff;outline:none}
.direct{margin-top:clamp(16px,2.4vh,28px);font-size:clamp(15px,calc(1.1*var(--u)),22px);font-weight:500;padding-top:14px;border-top:2px solid var(--acc);display:inline-block;max-width:30em}
.ref{margin-top:clamp(20px,3vh,34px);font-size:clamp(14px,calc(.95*var(--u)),18px);color:#b9c6d3;max-width:32em}
.ref a{color:#fff}
.credits{font-size:12px;color:#6c7e90;margin-top:16px}
.indice{position:absolute;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#9db0c2;display:flex;flex-direction:column;align-items:center;gap:10px}
.indice i{display:block;width:1px;height:40px;background:linear-gradient(var(--platine),transparent);animation:descend 2.2s ease-in-out infinite}
@keyframes descend{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* Galerie de l'étape « visuels » : la liste pilote la scène ; le trait Braise du nom actif avance avec le temps */
.galerie{display:flex;flex-wrap:wrap;gap:4px 26px;margin-top:clamp(14px,2.2vh,26px);max-width:34em}
.galerie button{position:relative;display:grid;grid-template-columns:auto auto;column-gap:8px;align-items:baseline;background:none;border:0;padding:8px 0 9px;color:inherit;font:inherit;text-align:left;cursor:pointer;opacity:.55;transition:opacity .3s}
.galerie button:hover,.galerie button:focus-visible{opacity:.9;outline:none}
.galerie button[aria-selected="true"]{opacity:1}
.galerie .g-n{font-size:11.5px;letter-spacing:.08em;color:var(--cyan);font-variant-numeric:tabular-nums}
.galerie .g-nom{font-weight:600;font-size:clamp(14px,calc(1*var(--u)),18px)}
.galerie small{grid-column:2;font-size:11.5px;color:#8fa3b6;letter-spacing:.02em}
.galerie button::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--acc)}
.galerie button[aria-selected="true"]::after{width:calc(var(--prog,0) * 100%)}
.galerie--ecrans{gap:2px 22px;max-width:38em}
.galerie--ecrans button{padding:6px 0 7px}
.galerie--ecrans small{display:none}
.galerie--ecrans button[aria-selected="true"] small{display:block}

/* La règle de websilon : traits vivants, curseur sur l'étape, noms des étapes */
.regle{display:block;position:fixed;z-index:30;left:var(--bord);right:var(--bord);bottom:calc(clamp(6px,1.2vh,14px) + env(safe-area-inset-bottom,0px));color:#fff;cursor:pointer}
.traits{display:flex;justify-content:space-between;align-items:flex-end;height:26px;cursor:pointer}
.traits i{display:block;width:1px;height:5px;background:currentColor;opacity:.55;transform-origin:50% 100%;will-change:transform;transition:background .35s,opacity .35s}
.traits i.act{background:var(--acc,#fff);opacity:1}
.curseur{position:absolute;top:0;left:0;height:3px;width:44px;background:var(--acc,currentColor);will-change:transform;transition:box-shadow .2s}
.etapes{position:relative;height:28px;margin-top:3px;list-style:none;font-size:clamp(11px,calc(.82*var(--u)),16px)}
.etapes li{position:absolute;top:0;white-space:nowrap;transform-origin:0 100%;will-change:transform}
.etapes a{text-decoration:none;opacity:.55;transition:opacity .25s;padding:6px 0;display:block}
.etapes a.on,.etapes a:hover,.etapes a:focus-visible{opacity:1;font-weight:650;outline:none}
.etapes a.on{color:var(--acc)}

/* Ouverture de holos : l'anneau du tout se trace, 64 points s'allument, « ὅλος » devient « holos »,
   puis l'anneau s'ouvre en iris sur le monde. « by websilon » paraît à la fin. CSS seul : se termine même si le JavaScript échoue. 2,8 s. */
@property --iris{syntax:"<length>";inherits:false;initial-value:0px}
.ouverture{position:fixed;inset:0;z-index:40;display:grid;place-items:center;background:var(--encre);pointer-events:none;
  -webkit-mask:radial-gradient(circle at 50% 50%,transparent var(--iris),#000 calc(var(--iris) + 1px));mask:radial-gradient(circle at 50% 50%,transparent var(--iris),#000 calc(var(--iris) + 1px));
  animation:ouv-iris .75s cubic-bezier(.7,0,.2,1) 1.95s forwards,ouv-fin .25s linear 2.55s forwards}
.ouv-anneau{position:relative;width:min(46vmin,340px);aspect-ratio:1;display:grid;place-items:center;animation:ouv-recul .75s cubic-bezier(.7,0,.2,1) 1.95s forwards}
.ouv-anneau svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ouv-trace{fill:none;stroke:var(--acc);stroke-width:1.2;stroke-dasharray:503;stroke-dashoffset:503;animation:ouv-trace .8s cubic-bezier(.6,0,.2,1) .1s forwards}
.ouv-points{position:absolute;inset:0}
.ouv-points i{position:absolute;left:50%;top:50%;width:3px;height:3px;margin:-1.5px;border-radius:50%;background:var(--cyan);opacity:0;
  transform:rotate(calc(var(--i) * 5.625deg)) translateY(calc(min(46vmin,340px) * -.5)) scale(.2);animation:ouv-point .45s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(.35s + var(--i) * 9ms);box-shadow:0 0 6px var(--cyan)}
.ouv-points i.m{background:var(--platine);width:4px;height:4px;margin:-2px;box-shadow:0 0 8px var(--platine)}
.ouv-mot{position:relative;font-family:"Anybody",Arial,sans-serif;font-weight:250;font-stretch:125%;font-size:min(9vmin,64px);line-height:1;color:#fff;display:grid}
.ouv-mot span{grid-area:1/1;text-align:center}
.ouv-grec{opacity:0;letter-spacing:.5em;margin-right:-.5em;animation:ouv-grec 1.05s ease .3s forwards}
.ouv-latin{opacity:0;letter-spacing:.6em;margin-right:-.6em;animation:ouv-latin .7s cubic-bezier(.2,.8,.2,1) 1.05s forwards}
.ouv-par{position:absolute;left:0;right:0;top:calc(50% + min(9vmin,64px) * .78);text-align:center;font-family:"Hanken",Arial,sans-serif;font-size:min(2.6vmin,15px);letter-spacing:.24em;color:var(--platine);opacity:0;transform:translateY(8px);animation:ouv-par .55s cubic-bezier(.2,.8,.2,1) 1.4s forwards}
.ouv-par b{color:var(--acc);font-weight:700}
@keyframes ouv-par{to{opacity:.85;transform:none}}
@keyframes ouv-trace{to{stroke-dashoffset:0}}
@keyframes ouv-point{to{opacity:1;transform:rotate(calc(var(--i) * 5.625deg)) translateY(calc(min(46vmin,340px) * -.5)) scale(1)}}
@keyframes ouv-grec{0%{opacity:0;letter-spacing:.5em}35%{opacity:1}70%{opacity:1;letter-spacing:.14em}100%{opacity:0;letter-spacing:.1em}}
@keyframes ouv-latin{to{opacity:1;letter-spacing:.12em;margin-right:-.12em}}
@keyframes ouv-iris{to{--iris:150vmax}}
@keyframes ouv-recul{to{transform:scale(3.2);opacity:0}}
@keyframes ouv-fin{to{visibility:hidden;opacity:0}}

.sans-3d #scene{background:radial-gradient(circle at 75% 35%,rgba(53,198,240,.18),transparent 40%),radial-gradient(circle at 20% 80%,rgba(255,91,34,.12),transparent 45%),var(--encre)}

@media (max-width:820px){
  .tete{padding:8px 16px;padding-top:calc(8px + env(safe-area-inset-top,0px))}
  .tete__droite{gap:1.1em}
  .marque .sous{display:none}
  .regle{bottom:env(safe-area-inset-bottom,0px);left:16px;right:16px}
  .traits{height:14px}
  .etapes{margin-top:0;height:24px}
  .etapes a{padding:3px 0}
  .etapes li:not(.vue){display:none}
  .etapes li{left:0!important}
  .station{align-items:flex-end;padding:22vh 16px calc(72px + env(safe-area-inset-bottom,0px))}
  .texte{margin-left:0}
  .station::before{content:"";position:absolute;inset:auto 0 0 0;height:64%;background:linear-gradient(transparent,rgba(5,8,15,.84) 42%);pointer-events:none;z-index:-1}
  .titre{font-size:clamp(27px,7.4vw,40px)}
  h1.titre{font-size:clamp(32px,9.4vw,50px)}
  .texte>p:not(.sur):not(.actions):not(.direct):not(.ref):not(.credits){font-size:15px;line-height:1.42;margin-bottom:.55em}
  .btn{padding:12px 22px}
  .actions{margin-top:14px}
  .sur{margin-bottom:.7em;font-size:11px}
  .indice{display:none}
  .galerie{flex-wrap:nowrap;overflow-x:auto;gap:0 18px;scrollbar-width:none;max-width:calc(100vw - 32px)}
  .texte{min-width:0;max-width:100%}
  .galerie small{display:none}
  .galerie button{flex:none}
}
.retour{opacity:.75}.retour:hover,.retour:focus-visible{opacity:1}
@media (max-width:520px){.contact-haut{display:none}}
@media (max-width:420px){.tete__droite{gap:.75em;font-size:12px}.marque{font-size:17px}}
@media (prefers-reduced-motion:reduce){.js .texte{transition:none;transform:none}.ouverture{display:none}.indice i{animation:none}}

/* Visionneuse des captations : le film en grand, lisible, avec flèches, liste, clavier et glissé du doigt */
#outils{cursor:zoom-in}
#outils .texte{cursor:auto}
.visionneuse{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:clamp(10px,1.8vh,22px) clamp(10px,2vw,32px);border:0;
  background:rgba(5,8,15,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--blanc);display:none;flex-direction:column;gap:clamp(10px,1.6vh,18px);overflow:hidden}
.visionneuse[open]{display:flex;animation:vis-entre .45s cubic-bezier(.2,.8,.2,1)}
.visionneuse::backdrop{background:transparent}
@keyframes vis-entre{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.vis-tete{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding-right:56px;position:relative}
.vis-n{font-size:13px;color:var(--cyan);letter-spacing:.08em;font-variant-numeric:tabular-nums}
.vis-nom{font-family:"Anybody",Arial,sans-serif;font-weight:300;font-stretch:118%;font-size:clamp(22px,2.4vw,36px);line-height:1}
.vis-desc{color:#9db0c2;font-size:clamp(14px,1.1vw,17px)}
.vis-fermer{position:absolute;right:0;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;border-radius:50%;background:rgba(232,237,241,.08);cursor:pointer;display:grid;place-items:center}
.vis-fermer svg,.vis-fleche svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.vis-fermer:hover,.vis-fermer:focus-visible{background:var(--acc);outline:none}
.vis-scene{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:clamp(6px,1vw,16px)}
.vis-cadre{position:relative;flex:1;min-width:0;height:100%;display:flex;align-items:center;justify-content:center}
.vis-ecran{position:relative;width:min(100%,calc((100vh - 190px) * 16 / 9));aspect-ratio:16/9;max-height:100%;border-radius:12px;overflow:hidden;background:#0b1626;
  box-shadow:0 0 0 1px rgba(232,237,241,.08),0 30px 90px -20px rgba(255,91,34,.45),0 0 120px -30px rgba(53,198,240,.35);transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1)}
.vis-ecran video{display:block;width:100%;height:100%;object-fit:contain;cursor:pointer}
.vis-cadre.change .vis-ecran{opacity:0;transform:translateX(calc(var(--sens,1) * 40px)) scale(.985)}
.vis-grand-lire{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px;border:0;border-radius:50%;background:var(--acc);display:none;place-items:center;cursor:pointer;box-shadow:0 10px 40px -8px rgba(255,91,34,.7)}
.vis-grand-lire svg{width:34px;height:34px;fill:#fff;margin-left:4px}
.vis-ecran.en-pause .vis-grand-lire{display:grid}
.vis-lecteur{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:12px;padding:10px 14px;background:linear-gradient(transparent,rgba(5,8,15,.82));opacity:0;transition:opacity .3s}
.vis-ecran:hover .vis-lecteur,.vis-ecran.en-pause .vis-lecteur,.vis-lecteur:focus-within{opacity:1}
@media (hover:none){.vis-lecteur{opacity:1}}
.vis-lp{width:36px;height:36px;border:0;border-radius:50%;background:rgba(232,237,241,.14);display:grid;place-items:center;cursor:pointer;flex:none}
.vis-lp svg{width:18px;height:18px;fill:#fff}
.vis-lp .i-lire,.vis-ecran.en-pause .vis-lp .i-pause{display:none}
.vis-ecran.en-pause .vis-lp .i-lire{display:block}
.vis-lp:hover,.vis-lp:focus-visible{background:var(--acc);outline:none}
.vis-barre{flex:1;height:18px;display:flex;align-items:center;cursor:pointer;position:relative}
.vis-barre::before{content:"";position:absolute;left:0;right:0;height:3px;border-radius:2px;background:rgba(232,237,241,.25)}
.vis-barre i{position:relative;height:3px;width:0;border-radius:2px;background:var(--acc)}
.vis-barre:focus-visible{outline:1px solid var(--acc);outline-offset:2px}
.vis-temps{font-size:12.5px;color:#cfd8e2;font-variant-numeric:tabular-nums;min-width:3.2em;text-align:right}
.vis-fleche{flex:none;width:52px;height:52px;border:0;border-radius:50%;background:rgba(232,237,241,.08);cursor:pointer;display:grid;place-items:center;transition:background .25s,transform .25s}
.vis-fleche:hover,.vis-fleche:focus-visible{background:var(--acc);transform:scale(1.06);outline:none}
.vis-liste{display:flex;gap:4px 22px;flex-wrap:wrap;justify-content:center}
.vis-liste button{background:none;border:0;color:inherit;font:inherit;font-size:14px;padding:6px 0;opacity:.5;cursor:pointer;position:relative}
.vis-liste button[aria-selected="true"]{opacity:1;font-weight:600}
.vis-liste button[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--acc)}
.vis-liste button:hover,.vis-liste button:focus-visible{opacity:.9;outline:none}
.vis-note{text-align:center;font-size:12px;color:#6c7e90;margin:0}
@media (max-width:820px){
  .vis-ecran{width:100%}
  .vis-fleche{position:absolute;bottom:clamp(70px,14vh,120px);width:44px;height:44px;background:rgba(10,34,56,.85);z-index:2}
  .vis-prec{left:12px}.vis-suiv{right:12px}
  .vis-scene{position:static}
  .vis-liste{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scrollbar-width:none}
  .vis-liste button{flex:none}
  .vis-desc{width:100%}
}
@media (prefers-reduced-motion:reduce){.visionneuse[open]{animation:none}.vis-cadre video{transition:none}}

/* Démo : le thème du visiteur, dans la galerie */
.demo{margin-top:clamp(12px,2vh,22px);max-width:36em}
.demo summary{display:inline-block;cursor:pointer;font-weight:600;list-style:none;border-bottom:2px solid var(--cyan);padding-bottom:3px}
.demo summary::-webkit-details-marker{display:none}
.demo summary::after{content:" +";color:var(--cyan)}
.demo[open] summary::after{content:" −"}
.demo-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:12px 16px;align-items:end;margin-top:14px}
.demo-form label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:#9db0c2;min-width:0}
.demo-form input{font:inherit;font-size:15px;color:#fff;background:transparent;border:0;border-bottom:1px solid rgba(232,237,241,.35);padding:6px 0;min-width:0;color-scheme:dark}
.demo-form input:focus{outline:none;border-bottom-color:var(--acc)}
.demo-form .btn{padding:11px 18px;white-space:nowrap}
.demo-etat{margin-top:12px;font-size:15px;min-height:1.2em}
.demo-etat.erreur{color:#ff9b7a}
.demo-appel{margin-top:6px}
.demo-note{margin-top:8px;font-size:12px;color:#6c7e90}
@media (max-width:820px){.demo-form{grid-template-columns:1fr 1fr}.demo-form .btn{grid-column:1/-1}}

/* Contact : la méthode en trois temps */
.methode{list-style:none;counter-reset:m;display:grid;gap:10px;margin:clamp(14px,2.2vh,24px) 0 0;max-width:32em}
.methode li{counter-increment:m;display:grid;grid-template-columns:2.2em 1fr;column-gap:10px;align-items:baseline}
.methode li::before{content:"0" counter(m);grid-row:span 2;font-size:13px;color:var(--acc);font-variant-numeric:tabular-nums;letter-spacing:.06em}
.methode b{font-weight:650}
.methode span{color:#b9c6d3;font-size:15px}
.suite--discret{border-bottom-color:rgba(232,237,241,.3);font-weight:500}

/* Étude de cas : le site de Nathalie, en grand, et ce qui a été fait */
.etude{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;padding:clamp(16px,3vh,40px) clamp(14px,3vw,48px);
  background:rgba(5,8,15,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--blanc);display:none;overflow-y:auto}
.etude[open]{display:block;animation:vis-entre .45s cubic-bezier(.2,.8,.2,1)}
.etude::backdrop{background:transparent}
.etude-fermer{position:fixed;top:calc(16px + env(safe-area-inset-top,0px));right:clamp(14px,3vw,40px);transform:none;z-index:2}
.etude-corps{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:center;min-height:100%;max-width:1500px;margin:0 auto}
.etude-films{position:relative;padding-bottom:6%}
.etude-ordi{display:block;width:100%;border-radius:12px;box-shadow:0 30px 90px -20px rgba(255,91,34,.45),0 0 0 1px rgba(232,237,241,.08)}
.etude-tel{position:absolute;right:-2%;bottom:0;width:22%;border-radius:16px;border:3px solid #05080f;box-shadow:0 20px 60px -10px rgba(0,0,0,.7)}
.etude-texte .titre{font-size:clamp(30px,3.6vw,56px)}
.etude-texte h3{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);font-weight:500;margin:20px 0 6px}
.etude-texte p,.etude-texte li{font-size:clamp(15px,1.05vw,17px);color:#d5dde5}
.etude-texte ul{list-style:none;display:grid;gap:6px}
.etude-texte li{padding-left:18px;position:relative}
.etude-texte li::before{content:"";position:absolute;left:0;top:.72em;width:10px;height:2px;background:var(--acc)}
@media (max-width:820px){.etude-corps{grid-template-columns:1fr;align-items:start;padding-top:44px}}

@media (max-width:820px){.station:has(.demo[open]){padding-bottom:calc(120px + env(safe-area-inset-bottom,0px));padding-top:14vh}}

/* Sélecteur de lieu de la démo : suggestions sous le champ, comme sur rosmaryn.app */
.lieu{position:relative;display:flex;flex-direction:column;gap:4px;font-size:12px;color:#9db0c2;min-width:0}
.lieu label{display:block}
.lieu input{font:inherit;font-size:15px;color:#fff;background:transparent;border:0;border-bottom:1px solid rgba(232,237,241,.35);padding:6px 0;min-width:0;width:100%}
.lieu input:focus{outline:none;border-bottom-color:var(--acc)}
.lieu input::placeholder{color:#5f7184}
.lieu-liste{position:absolute;left:0;top:100%;z-index:30;width:max(100%,260px);max-height:260px;overflow-y:auto;margin-top:6px;list-style:none;padding:6px 0;
  background:#0a1626;border-radius:10px;box-shadow:0 18px 50px -12px rgba(0,0,0,.8),0 0 0 1px rgba(53,198,240,.18)}
.lieu-liste li{padding:8px 14px;cursor:pointer;font-size:14.5px;color:#e8edf1;line-height:1.3}
.lieu-liste li small{display:block;font-size:12px;color:#8fa3b6}
.lieu-liste li[aria-selected="true"],.lieu-liste li:hover{background:rgba(255,91,34,.16)}
.lieu-liste li.vide{cursor:default;color:#8fa3b6;background:none}

/* Dé de test, réservé à l'administrateur de websilon (marque holos_admin) */
.demo{position:relative}
.demo-de{position:absolute;right:0;top:0;width:34px;height:34px;border:0;border-radius:8px;background:rgba(232,237,241,.08);color:#cfd8e2;cursor:pointer;display:grid;place-items:center;transition:transform .25s,color .25s,background .25s}
.demo-de[hidden]{display:none}
.demo-de svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
.demo-de svg circle{fill:currentColor;stroke:none}
.demo-de:hover,.demo-de:focus-visible{color:var(--acc);background:rgba(255,91,34,.14);transform:rotate(15deg);outline:none}

/* Logo de l'en-tête : « holos by websilon », l'anneau de l'ouverture en miniature */
.marque{gap:12px;align-items:center}
.marque-anneau{position:relative;flex:none;width:40px;height:40px}
.marque-anneau svg{position:absolute;inset:0;width:100%;height:100%}
.marque-anneau circle{fill:none;stroke:var(--acc);stroke-width:1.6}
.marque-anneau i{position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(var(--cyan) 0 3deg,transparent 3deg 11.25deg);
  -webkit-mask:radial-gradient(circle,transparent 16.5px,#000 17px 19px,transparent 19.5px);mask:radial-gradient(circle,transparent 16.5px,#000 17px 19px,transparent 19.5px);animation:marque-tourne 24s linear infinite}
.marque:hover .marque-anneau i{animation-duration:4s}
.marque-mots{display:flex;flex-direction:column;line-height:1}
.marque-holos{font-family:"Anybody",Arial,sans-serif;font-weight:300;font-stretch:125%;font-size:clamp(22px,calc(1.7*var(--u)),30px);letter-spacing:.08em;color:#fff}
.marque-par{font-family:"Hanken",Arial,sans-serif;font-size:10.5px;letter-spacing:.24em;color:#c9d4de;margin-top:5px;font-weight:400}
.marque-par em{font-style:normal;color:var(--acc);font-weight:700}
@keyframes marque-tourne{to{transform:rotate(360deg)}}
@media (max-width:820px){.marque-anneau{width:32px;height:32px}.marque-anneau i{-webkit-mask:radial-gradient(circle,transparent 13px,#000 13.5px 15px,transparent 15.5px);mask:radial-gradient(circle,transparent 13px,#000 13.5px 15px,transparent 15.5px)}.marque-holos{font-size:20px}.marque-par{font-size:9px;letter-spacing:.2em;margin-top:4px}}
@media (prefers-reduced-motion:reduce){.marque-anneau i{animation:none}}
.marque .marque-holos{font-weight:300;color:#fff}
.marque-par{display:flex;align-items:center;gap:0}
.marque-symbole{width:15px;height:15px;margin:0 5px 0 6px;flex:none}
@media (max-width:820px){.marque-symbole{width:12px;height:12px;margin:0 4px 0 5px}}

/* « by » + le VRAI logo websilon, comme dans l'en-tête de websilon.net : symbole, web 800 Braise, silon 250, serré */
.marque-par{display:flex;align-items:center;gap:8px;margin-top:5px;letter-spacing:0}
.par-by{font-family:"Hanken",Arial,sans-serif;font-size:10.5px;letter-spacing:.24em;color:#c9d4de}
.logo-websilon{display:inline-flex;align-items:center;gap:.45em;font-family:"Hanken",Arial,sans-serif;font-size:15px;letter-spacing:-.02em;line-height:1;color:#fff}
.logo-websilon img{width:1.8em;height:auto}
.logo-websilon b{font-weight:800;color:var(--acc,#ff5b22)}
.logo-websilon i{font-style:normal;font-weight:250}
@media (max-width:820px){.logo-websilon{font-size:13px}.par-by{font-size:9px}}

/* Formulaire de la démo à quatre champs : deux par ligne, le bouton dessous */
.demo-form{grid-template-columns:repeat(2,minmax(0,1fr))}
.demo-form .btn{grid-column:1/-1;justify-self:start}
.demo-3d{margin-left:14px;background:none;border:0;color:#fff;font:inherit;font-weight:600;border-bottom:2px solid var(--acc);padding:0 0 2px;cursor:pointer}

/* Le thème en 3D : plein écran, onglets Body Graph / Thème astral */
.theme3d{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;padding:0;background:#05080f;color:var(--blanc);display:none;overflow:hidden}
.theme3d[open]{display:block;animation:vis-entre .45s cubic-bezier(.2,.8,.2,1)}
.theme3d::backdrop{background:#05080f}
.btn-balade{display:inline-flex;align-items:center;gap:10px;margin-top:14px;background:rgba(232,237,241,.06);border:1px solid rgba(232,237,241,.18);color:var(--blanc);font:600 14px/1 "Hanken",Arial,sans-serif;padding:11px 18px 11px 14px;border-radius:40px;cursor:pointer;transition:border-color .3s,background .3s;animation:vis-entre .45s cubic-bezier(.2,.8,.2,1)}
.btn-balade[hidden]{display:none}
.btn-balade:hover,.btn-balade:focus-visible{border-color:var(--acc);background:rgba(255,91,34,.12);outline:none}
.btn-balade svg{width:20px;height:20px;fill:none;stroke:var(--acc);stroke-width:1.6}
.btn-balade svg circle:first-child{fill:var(--acc);stroke:none}
.balade-scene{position:absolute;inset:0}
.balade-scene canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}
.balade-scene canvas:active{cursor:grabbing}
.balade .t3d-tete{pointer-events:none}.balade .t3d-tete>*{pointer-events:auto}
.balade-aide{position:absolute;z-index:2;left:50%;bottom:calc(46px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);margin:0;width:max-content;max-width:calc(100% - 32px);text-align:center;font-size:13.5px;color:#cfd8e2;background:rgba(5,8,15,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:9px 16px;border-radius:40px;pointer-events:none;transition:opacity 1.2s .6s}
.balade-aide.vue{opacity:0}
.balade-credits{position:absolute;z-index:2;right:clamp(14px,2.4vw,32px);bottom:calc(10px + env(safe-area-inset-bottom,0px));margin:0;max-width:calc(100% - 28px);font-size:10.5px;color:#6f8296;text-align:right;pointer-events:none}
.t3d-toile{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
.t3d-toile:active{cursor:grabbing}
.t3d-tete{position:absolute;z-index:2;left:0;right:0;top:0;display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:calc(16px + env(safe-area-inset-top,0px)) 76px 12px clamp(16px,3vw,40px);background:linear-gradient(rgba(5,8,15,.85),transparent)}
.t3d-titre{font-family:"Anybody",Arial,sans-serif;font-weight:300;font-stretch:118%;font-size:clamp(22px,2.4vw,34px);line-height:1;margin:0}
.t3d-onglets{display:flex;gap:6px;background:rgba(232,237,241,.08);border-radius:999px;padding:4px}
.t3d-onglets button{border:0;background:none;color:#cfd8e2;font:inherit;font-size:14px;font-weight:600;padding:8px 16px;border-radius:999px;cursor:pointer}
.t3d-onglets button[aria-selected="true"]{background:var(--acc);color:#05080f}
.t3d-fermer{position:absolute;right:clamp(14px,3vw,36px);top:calc(14px + env(safe-area-inset-top,0px));transform:none}
.t3d-infos{position:absolute;z-index:2;left:clamp(16px,3vw,40px);bottom:calc(18px + env(safe-area-inset-bottom,0px));max-width:min(30em,calc(100% - 32px));pointer-events:none}
.t3d-resume{font-size:clamp(15px,1.1vw,18px);font-weight:600;margin:0 0 6px;text-shadow:0 2px 14px #05080f}
.t3d-legende,.t3d-aide,.t3d-note{font-size:12.5px;color:#9db0c2;margin:0 0 3px;text-shadow:0 2px 10px #05080f}
.t3d-note[hidden]{display:none}
.t3d-tableau{position:absolute;z-index:2;right:clamp(14px,2.4vw,32px);top:calc(84px + env(safe-area-inset-top,0px));width:min(330px,calc(100% - 28px));background:rgba(7,12,22,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:14px;color:#e8edf1;font-size:13px}
.t3d-tableau[hidden]{display:none}
.t3d-tableau summary{cursor:pointer;list-style:none;padding:11px 16px;font-weight:700;font-size:13.5px;display:flex;justify-content:space-between;align-items:center}
.t3d-tableau summary::-webkit-details-marker{display:none}
.t3d-tableau summary::after{content:"+";color:var(--acc);font-size:18px;line-height:1}
.t3d-tableau[open] summary::after{content:"\2212"}
.t3d-tableau-corps{overflow:auto;padding:0 16px 14px;overscroll-behavior:contain;max-height:calc(100vh - 190px);max-height:calc(100dvh - 190px)}
.t3d-tableau h3{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--acc);margin:12px 0 4px;font-weight:700}
.t3d-tableau table{width:100%;border-collapse:collapse}
.t3d-tableau td{padding:3px 4px;border-bottom:1px solid rgba(232,237,241,.07);white-space:nowrap;font-variant-numeric:tabular-nums}
.t3d-tableau td.g{width:1.6em;text-align:center;font-family:"DejaVu Sans","Segoe UI Symbol",sans-serif;color:#ffc94d}
.t3d-tableau td.m{color:#9db0c2;text-align:right}
@media (max-width:820px){.t3d-tableau{top:auto;bottom:calc(84px + env(safe-area-inset-bottom,0px));font-size:12.5px}.t3d-tableau-corps{max-height:40vh;max-height:40dvh}}
@media (max-width:820px){.t3d-infos{bottom:calc(10px + env(safe-area-inset-bottom,0px))}.t3d-resume{font-size:14px}.t3d-aide{display:none}}

/* La voûte astrale : les étiquettes du ciel, placées à chaque image (voute/voute.js) */
.voute-calque{position:absolute;inset:0;pointer-events:none;overflow:hidden;transition:opacity .6s}
.vo-e{position:absolute;left:0;top:0;white-space:nowrap;font:600 12.5px/1.2 "Hanken",Arial,sans-serif;color:#dfe7ef;text-shadow:0 1px 6px #03060d,0 0 2px #03060d;will-change:transform;transition:opacity .4s}
.vo-e[hidden]{display:none}
.vo-e.is-sous{opacity:.32}
.vo-e--astre{display:inline-flex;align-items:center;gap:5px;font-size:13px}
.vo-e--astre b{font:400 17px/1 "DejaVu Sans","Segoe UI Symbol","Noto Sans Symbols 2",sans-serif;color:var(--teinte,#fff)}
.vo-e--signe{font:400 22px/1 "DejaVu Sans","Segoe UI Symbol","Noto Sans Symbols 2",sans-serif;opacity:.9}
.vo-el0{color:#ff7a4d}.vo-el1{color:#9ccf7a}.vo-el2{color:#f2d774}.vo-el3{color:#6fb3ff}
.vo-e--maison{font-size:11px;color:#9fb0c5;font-weight:700}
.vo-e--angle{font-size:12px;font-weight:800;color:var(--acc,#ff5b22);letter-spacing:.04em}
.vo-e--cardinal{font:300 18px/1 "Anybody",Arial,sans-serif;font-stretch:118%;color:#fff}
.vo-e--etoile{font-size:11px;font-weight:500;color:#b9c7da}
.voute .voute-titre{font-size:clamp(17px,2vw,28px)}
@media (max-width:820px){.vo-e--astre span,.vo-e--etoile{display:none}.vo-e--signe{font-size:18px}}

/* Le bouton magnétique (04/11/2026) : attiré par le pointeur, une lueur qui le suit, un ressort au relâchement.
   Sur écran tactile, une simple pression. */
.aimant{position:relative;overflow:visible;will-change:transform;transition:border-color .3s,background .3s,box-shadow .4s;isolation:isolate}
.aimant__fond{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.aimant__fond::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-40%;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-120%) skewX(-18deg);opacity:0}
.aimant__in{position:relative;z-index:1;display:inline-flex;align-items:center;gap:10px;will-change:transform}
.aimant__fond::before{content:"";position:absolute;left:var(--mx,50%);top:var(--my,50%);width:180px;height:180px;margin:-90px 0 0 -90px;border-radius:50%;background:radial-gradient(circle,rgba(255,91,34,.5),rgba(255,91,34,0) 65%);opacity:var(--g,0);transition:opacity .3s;pointer-events:none}
.aimant.est-proche{border-color:var(--acc);box-shadow:0 10px 34px -12px rgba(255,91,34,.6)}
.aimant.est-proche svg{animation:aimant-tourne 2.4s linear infinite}
@keyframes aimant-tourne{to{transform:rotate(360deg)}}
.aimant:active{transform:scale(.96)}
@media (hover:none){.aimant:active{background:rgba(255,91,34,.18);border-color:var(--acc)}}
@media (prefers-reduced-motion:reduce){.aimant,.aimant__in{transform:none!important;animation:none!important}.aimant svg,.aimant__onde,.aimant__fond::after{animation:none!important}}

/* L'APPEL : à l'arrivée sur la section, le bouton surgit, des ondes partent comme un sonar, un reflet le traverse ;
   puis l'appel revient toutes les six secondes (téléphone compris). */
.aimant__onde{position:absolute;inset:-2px;border-radius:inherit;border:2px solid var(--acc);opacity:0;pointer-events:none;z-index:-1}
.aimant.appelle{animation:aimant-surgit .9s cubic-bezier(.2,1.6,.4,1) both;border-color:var(--acc);background:rgba(255,91,34,.16);box-shadow:0 0 0 0 rgba(255,91,34,.6),0 14px 40px -14px rgba(255,91,34,.8)}
.aimant.appelle .aimant__onde{animation:aimant-onde 2s cubic-bezier(.2,.7,.2,1) 3 .5s}
.aimant.appelle .aimant__onde+.aimant__onde{animation-delay:1s}
.aimant.appelle .aimant__fond::after{animation:aimant-reflet 1.1s .55s cubic-bezier(.4,0,.2,1) both}
.aimant.rappel .aimant__onde{animation:aimant-onde 2s cubic-bezier(.2,.7,.2,1) 1}
.aimant.rappel .aimant__onde+.aimant__onde{animation-delay:.35s}
.aimant.rappel .aimant__fond::after{animation:aimant-reflet 1.1s cubic-bezier(.4,0,.2,1) both}
.aimant.rappel{animation:aimant-souffle 1.2s ease-in-out}
.aimant svg{animation:aimant-tourne 6s linear infinite}
.aimant.appelle svg,.aimant.est-proche svg{animation-duration:2.2s}
@keyframes aimant-surgit{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.12);opacity:1}100%{transform:scale(1)}}
@keyframes aimant-onde{0%{transform:scale(1);opacity:.85}100%{transform:scale(1.55,2.3);opacity:0}}
@keyframes aimant-reflet{0%{transform:translateX(-120%) skewX(-18deg);opacity:1}100%{transform:translateX(560%) skewX(-18deg);opacity:1}}
@keyframes aimant-souffle{50%{transform:scale(1.07)}}