/* Croquis des pages des marques : dessins au trait qui se tracent au défilement.
   --d (0 à 1) est posé par croquis.js sur chaque figure ; chaque trait a son départ --s et sa durée --w. */
.sk{position:absolute;z-index:0;pointer-events:none;width:min(38rem,46%);aspect-ratio:4/3;top:50%;transform:translateY(-50%);opacity:var(--o,1)}
.sk:not(.m){visibility:hidden}
.sk svg{display:block;width:100%;height:100%;overflow:visible}
.chap>.pin>.panel{position:relative;z-index:1}
.chap[data-side="left"]>.pin>.sk{left:calc(var(--gl) + 1rem)}
.chap[data-side="right"]>.pin>.sk{right:calc(var(--gr) + 1rem)}
.hero>.sk{top:9svh;right:var(--gr);width:min(34rem,42vw,52svh);transform:none}
.sheet .sk{position:relative;top:auto;transform:none;display:block;width:min(30rem,100%);margin:.4rem 0 1.6rem}

.sk .k,.sk .t,.sk .a{fill:none;stroke-linecap:round;stroke-linejoin:round;
  --dd:clamp(0,calc((var(--d,1) - var(--s,0)) / var(--w,.7)),1);
  stroke-dasharray:var(--L,1) var(--L,1);stroke-dashoffset:calc(var(--L,1) * (1 - var(--dd)))}
.sk .k{stroke:var(--ink);stroke-width:1.35}
.sk .t{stroke:var(--ink);stroke-width:.8;opacity:.5}
.sk .a{stroke:var(--accent);stroke-width:1.5}
.sk .h,.sk .f,.sk .l,.sk .p{--dd:clamp(0,calc((var(--d,1) - var(--s,0)) / var(--w,.7)),1);opacity:var(--dd)}
.sk .h{fill:none;stroke:var(--ink);stroke-width:1;stroke-dasharray:3 5;stroke-linecap:round}
.sk .f{fill:var(--ink)}
.sk .p{fill:var(--ink);opacity:calc(var(--dd) * .4)}
.sk .l{font:9px "JetBrains Mono",ui-monospace,monospace;letter-spacing:.16em;fill:var(--mist)}
.sk .road{offset-rotate:0deg;offset-distance:calc(var(--d,1) * 100%)}

/* Bloc Vsai */
.vsai-logo{display:block;width:9.5rem;height:auto;padding:.55rem .8rem;border-radius:12px;background:#fff}
.chap .note{font-size:.92rem;color:var(--mist)}

/* Contact : boutons du standard */
.callrow{display:flex;flex-wrap:wrap;gap:.6rem;margin:0 0 1.6rem}

@media (max-width:860px){
  .chap>.pin>.sk{width:auto;left:var(--gl)!important;right:var(--gr)!important;top:5.2rem;transform:none;height:min(36svh,64vw);aspect-ratio:auto}
  .hero>.sk{top:12svh;left:var(--gl);right:var(--gr);width:auto;height:min(34svh,62vw);aspect-ratio:auto}
}
@media (prefers-reduced-motion:reduce){.sk{--d:1!important;--o:1!important}}

/* Comète OPTV (comete.js) : l'ancienne comète tracée au défilement est retirée */
.nightsky .ns-comet,.nightsky .ns-comet-head{display:none!important}
canvas.comete{position:fixed;inset:0;width:100vw;height:100vh;z-index:3;pointer-events:none;display:none;mix-blend-mode:screen}

/* Bouton du générique OPTV (generique.js) */
.son{position:fixed;z-index:45;left:var(--gl);bottom:calc(22px + env(safe-area-inset-bottom,0px));display:inline-flex;align-items:center;gap:.55rem;min-height:44px;padding:.55rem 1rem;color:var(--ink);font:500 .82rem var(--f-body);cursor:pointer;border:0}
.son[hidden]{display:none}

/* Clé 3D de Vvigiaccess (cle3d.js) */
.k3d{position:absolute;z-index:0;pointer-events:none;width:min(40rem,48%);aspect-ratio:4/3;top:50%;transform:translateY(-50%);left:calc(var(--gl) + 1rem);opacity:0}
.k3d canvas{display:block;width:100%!important;height:100%!important}
@media (max-width:860px){.k3d{width:auto;left:var(--gl);right:var(--gr);top:5.2rem;transform:none;height:min(38svh,66vw);aspect-ratio:auto}}
.k3d.r{left:auto;right:calc(var(--gr) + 1rem)}
@media (max-width:860px){.k3d.r{left:var(--gl);right:var(--gr)}}
@media (max-width:860px){.son{bottom:auto;top:calc(72px + env(safe-area-inset-top,0px));min-height:38px;padding:.4rem .85rem;font-size:.78rem}}

/* Vvigiaccess tout en contours : trousseau 3D du haut de page, logo VSAI en blanc */
.hero>.k3d{top:7svh;left:auto;right:var(--gr);transform:none;width:min(40rem,46vw,66svh)}
@media (max-width:860px){.hero>.k3d{top:10svh;left:var(--gl);right:var(--gr);width:auto;height:min(38svh,66vw)}}
#p-vvigiaccess .vsai-logo{background:none;padding:0;width:8.5rem;filter:brightness(0) invert(1);opacity:.92}
/* OPTV : objets en contours (vvg3d.js) */
.hero.genre>.k3d{top:14svh;left:auto;right:calc(var(--gr) + 1rem);transform:none;width:min(40rem,46vw,70svh)}
@media (max-width:860px){.hero.genre>.k3d{top:12svh;left:var(--gl);right:var(--gr);transform:none;width:auto;height:min(40svh,70vw)}}
/* OPTV : le texte d'ouverture s'efface pendant que le logo se forme, et revient quand il est parti (--gtx posé par main.js) */
.hero.genre .sub{opacity:var(--gtx,1);transition:opacity .2s}
/* OPTV : l'auréole suit l'écran comme le logo, pour être derrière les lettres quand il est en place ; elle part avec lui (--gone posé par main.js) */
#p-optv .hero.genre .spot{position:fixed;inset:0;opacity:calc(1 - var(--gone,0))}

/* Sur téléphone le bouton MENU est à gauche : la barre courte de l'icône part de la gauche (même règle que l'accueil) */
@media (max-width:720px){.menu-btn svg{transform:scaleX(-1)}}

.simple a.btn.glass{color:var(--ink);box-shadow:inset 0 0 0 1px rgb(238 241 247 / .35)}