/* 16 octobre : une entrée en boucle, puis une page au défilement natif. */
[hidden]{display:none!important}
body.home-gated{height:100dvh;overflow:hidden;overscroll-behavior:none}
.acc.is-scroll-scene .acc-pin{position:relative;height:100svh;min-height:0;overflow:visible}
.acc.is-scroll-scene .acc-stage{overflow:visible}
.acc{overflow:clip}
.home-gated .acc-stage{touch-action:none}
/* Continuer (Michel, 16/10 : « il ne se remarque pas, améliore le clignotement »). Plus grand, et un vrai clignotement :
   la pastille s'allume en rose puis s'éteint, au rythme du point « Disponible » ; la flèche descend avec elle. */
.acc-continue[data-glass]{min-height:56px;padding:15px 28px 15px 30px;gap:14px;font-size:17px;font-weight:600}
.acc-continue>span{position:relative;z-index:1}
.acc-continue .acc-feu{position:absolute;inset:0;z-index:0;border-radius:inherit;background:#ff4fa8;opacity:0;pointer-events:none;
 box-shadow:0 0 0 0 #ff4fa800}
.acc-continue .acc-fleche{display:inline-block}
.home-gated .acc-continue .acc-feu{animation:acc-feu 1.25s cubic-bezier(.7,0,.3,1) infinite}
.home-gated .acc-continue .acc-fleche{animation:acc-fleche 1.25s cubic-bezier(.7,0,.3,1) infinite}
.home-gated .acc-continue:hover .acc-feu,.home-gated .acc-continue:focus-visible .acc-feu{animation:none;opacity:.95}
@keyframes acc-feu{0%,42%{opacity:.95;box-shadow:0 0 26px 2px #ff4fa866}52%,92%{opacity:0;box-shadow:0 0 0 0 #ff4fa800}100%{opacity:.95;box-shadow:0 0 26px 2px #ff4fa866}}
@keyframes acc-fleche{0%,42%{transform:translateY(2px)}52%,92%{transform:translateY(-1px)}100%{transform:translateY(2px)}}
.acc.is-scroll-scene .acc-meta{display:block;bottom:92px}
.home-gated .acc[data-scene-view=grid] .acc-meta{position:fixed;bottom:24px;left:0;width:auto;z-index:19}
.home-gated .acc[data-scene-view=grid]{height:100dvh;overflow-y:auto;padding-bottom:110px}
.home-gated .acc[data-scene-view=grid] .acc-pin{height:auto}
/* Même matériau, mêmes interactions, quel que soit le gabarit. */
.has-liquide [data-glass]{position:relative;isolation:isolate}
.site-header .brand[data-glass]{background:rgb(245 250 255/.15);box-shadow:inset 0 0 0 1px rgb(255 255 255/.35)}
.site-header :is(.brand,.menu-toggle,.language-switch)[data-glass]:hover{background:transparent;box-shadow:none;border-radius:999px}
.site-header .brand[data-glass] img{position:relative;z-index:1}
[data-glass]:hover::before{background:radial-gradient(ellipse at var(--lx) var(--ly),#ffffffb3,transparent 75%),linear-gradient(160deg,#ffffff35,#ff4fa820)}
.site-header .language-switch a{transition:background .24s ease;position:relative;z-index:1}
.site-header .language-switch a:hover{background:#ff4fa833}
/* La direction et les domaines forment un seul passage noir. C'est le fond du site qui passe au noir (body[data-theme=dark]),
   avec ses lignes de caractères : la section elle-même est transparente, sans bord ni démarcation. */
.identity-dark{background:transparent;color:#f4f5f8;--ink:#f4f5f8;--text:#f4f5f8;--muted:#c1c1cd;--line:#ffffff38}
.identity-dark .presentation{padding-top:clamp(90px,12vw,180px)}
.identity-dark .services{padding-top:40px;padding-bottom:clamp(90px,12vw,180px)}
.identity-dark .zk-tint{color:inherit!important}
.identity-dark a:hover{color:var(--pink)}
.playground-covers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:55px}
.playground-covers .work-card-media{aspect-ratio:4/3;border-radius:12px;overflow:hidden}
.playground-covers .work-card h3{font-size:clamp(22px,2.4vw,36px);margin:18px 0 10px}
.playground-covers .work-card-media img{width:100%;height:100%;object-fit:cover}
.playground-covers .work-ok-0moz .work-card-media{background:#ffc9e8}
.playground-covers .work-ok-0moz img{object-fit:contain;padding:26px}
@media(max-width:1000px){.playground-covers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
 .acc.is-scroll-scene .acc-meta{bottom:116px}
 .acc.is-scroll-scene .acc-ctrl{bottom:14px}
 .acc.is-scroll-scene .acc-work{top:240px}
 .acc-views{justify-self:end;grid-column:2;grid-row:1}
 .acc-ctrl{grid-template-columns:auto 1fr;gap:12px}
 .acc-arrows{grid-column:1;grid-row:1;gap:5px}
 .acc-arrows button[data-glass]{width:38px;height:42px}
 .acc-arrows p{font-size:11px;min-width:38px}
 .acc-views.has-gouttes>button{font-size:11px;padding:10px 7px}
 .acc-ctrl>.text-link{grid-column:1/-1;grid-row:2;justify-self:end}
 .acc.is-scroll-scene .acc-meta{bottom:114px}
 .playground-covers{grid-template-columns:1fr;gap:40px}
}
@media(max-height:740px) and (max-width:760px){
 .acc-dispo{top:84px}.acc-phrase.intro-title{top:112px;font-size:27px}
 .acc.is-scroll-scene .acc-work{top:210px}
 .acc-cap h3{font-size:24px}.acc-line{font-size:14px}
}
@media(prefers-reduced-motion:reduce){.home-gated .acc-continue :is(.acc-feu,.acc-fleche){animation:none}.home-gated .acc-continue .acc-feu{opacity:.95}}
body[data-motion=paused] .acc-continue :is(.acc-feu,.acc-fleche){animation:none}
body[data-motion=paused] .home-gated .acc-continue .acc-feu{opacity:.95}
/* Le bas du cadre pendant le défilement : des stries roses et cyan, sans filtre d'arrière-plan. Les lentilles SVG
   (bas et marge des fiches) coûtaient près de la moitié des images pendant le geste (16/10, mesuré sur PRISMA) :
   la fluidité passe avant. La matière du bas vient des stries de scripts/striations.js. */
.edge-lens{position:fixed;pointer-events:none;z-index:14;contain:layout style;isolation:isolate}
.edge-lens-bottom{inset:90% 0 0;height:10%;mask-image:linear-gradient(transparent,#000 24%);background:linear-gradient(transparent,#9badcf0a)}
.edge-lens-bottom::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 11px,#f283cb40 11px 12px,transparent 12px 23px,#8ad8ed36 23px 24px);opacity:0;transition:opacity .15s ease}
.edge-lens-bottom.is-moving::after{opacity:.6}
.case-sidebar{z-index:15}
.identity-dark .presentation>.eyebrow,.identity-dark .services>h2{position:relative;z-index:15}
@media(prefers-reduced-motion:reduce){.edge-lens{display:none}}

body[data-page=home] .background-blue{background:#3a3cff}

html.acc-boot body[data-page=home]{height:100dvh;overflow:hidden}
html.acc-boot body[data-page=home] main>:not(.acc),html.acc-boot body[data-page=home]>.site-footer{display:none}
html.acc-boot body[data-page=home] .acc{height:100svh;overflow:hidden}

@media(max-width:360px){
 .acc-ctrl{gap:8px}.acc-views.has-gouttes>button{font-size:10px;padding:10px 5px}
 .acc-arrows button[data-glass]{width:30px}.acc-arrows{gap:2px}.acc-arrows p{min-width:31px;font-size:10px}
}

.story-visual.is-sign,.story-cover.is-sign{background:#ffc5e3;border-radius:12px}
.story-visual.is-sign img,.story-cover.is-sign img{width:100%;height:100%;object-fit:contain;padding:16%;aspect-ratio:4/3}
.story-cover.is-sign figcaption{background:var(--paper);padding-top:12px}
.background-blue{background:#3a3cff}
body[data-theme=dark] .language-switch [aria-current=page]{background:#ff9dcd;color:#161626}

/* Alignements de l'entrée (16/10). Le sélecteur de vue se centre sur la page, pas sur l'espace restant entre les flèches
   et le lien ; rien de la scène ne passe sous le header (une vignette lointaine dépassait sous « Menu »). */
@media(min-width:1001px){
 .acc-ctrl{display:grid;grid-template-columns:1fr auto 1fr;justify-content:normal}
 .acc-ctrl>.acc-arrows{justify-self:start}
 .acc-ctrl>.acc-views{justify-self:center}
 .acc-ctrl>.text-link{justify-self:end}
}
.acc.is-scroll-scene .acc-stage{clip-path:inset(10px -100vw -100vh -100vw)}