/*
Theme Name: Les Mouches
Description: Thème portfolio minimaliste sur mesure pour Les Mouches Graphic Design.
Version: 4.61
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: les-mouches
*/

@font-face{
  font-family:"Google Sans Flex";
  src:url("assets/fonts/google-sans-flex-wght.woff2") format("woff2");
  font-weight:1 1000;
  font-style:normal;
  font-display:swap;
}

/* Angle animable, pour le survol « dessiné » des flèches (balayage circulaire type cadran) */
/* ---------- Réglages (modifiables ici) ---------- */
:root{
  --green:#00ff00;
  --pink:#ff00ff;        /* couleur du survol (cercle + coup de crayon) */
  --glitch:#00ffff;      /* couleur du glitch horizontal à la révélation des vignettes */
  --glitch-delay:.1s;    /* délai avant le glitch, réglable dans Personnaliser */
  --glitch-duration:.5s; /* vitesse du glitch, réglable dans Personnaliser */
  --strip-base-delay:0s; /* délai avant l'animation des bandes, réglable dans Personnaliser */
  --strip-duration:.35s; /* vitesse de l'animation des bandes, réglable dans Personnaliser */
  --bg:#f1f1f1;          /* fond du site ET du bandeau menu desktop (blanc cassé) */
  --white:#fff;          /* fond du carré burger et du panneau de menu (tablette/mobile) */
  --black:#000;
  --gut:24px;
  --rule:3px;            /* épaisseur des filets */
  --margin:8.333vw;      /* 120 px à 1440 px */
  --cols:4;
  --header-h:77px;
  --burger:100px;        /* carré du bouton burger */
  --burger-bar-w:40px;   /* largeur des tirets */
  --burger-bar-h:3px;    /* épaisseur des tirets */
  --btn:40px;            /* boutons flèches (desktop et tablette) */
  --title-h:40px;        /* bloc titre de la page projet, fixe sur toutes les tailles */
  --logo-w:282px;        /* logo, fixe sur toutes les tailles */
  --fs-nav:14px;         /* menu desktop */
  --fs-menu:24px;        /* menu burger tablette et mobile */
  --fs-title:20px;       /* titre de projet */
  --fs-thumb:10px;       /* titre de vignette */
  --fs-footer:14px;      /* texte du pied de page */
  --fs-text:15px;        /* texte page info */
  --head-min:280px;      /* hauteur du bloc logo / titre avant les filets */
  --thumb-blur:24px;     /* flou des vignettes au repos (0 = net en permanence) */
}
@media (max-width:1023px){
  :root{--cols:2;--margin:32px;--head-min:380px}
}
@media (max-width:767px){
  :root{--cols:1;--margin:20px;--head-min:390px;--btn:60px} /* boutons flèches inchangés sur mobile */
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--black);
  font-family:"Google Sans Flex",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  font-weight:400;line-height:1.3;-webkit-font-smoothing:antialiased;
}
body.menu-open{overflow:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{width:calc(100% - 2 * var(--margin));max-width:1200px;margin-inline:auto}
.cols{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:var(--gut)}

/* ---------- Menu desktop ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;height:var(--header-h);
  background:var(--bg);color:var(--green);font-size:var(--fs-nav);
}
body.admin-bar .site-header{top:32px}
.site-header .wrap{height:100%}
.site-header .cols{height:100%;align-items:center}
.brand{font-weight:700}
.nav-link{position:relative;isolation:isolate;justify-self:start;padding:1px 3px;margin-left:-3px;transition:color .25s ease .05s}
.nav-link.is-current{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.nav-pair{display:flex;gap:14px;align-items:center}
.nav-spring{white-space:nowrap}
.nav-spring.is-current span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}   /* soulignement des lettres séparées */   /* « playground » : les lettres s'écartent au survol sans passer à la ligne (assets/menu-ressort.js) */
.nav-email{justify-self:end;text-align:right}
/* Remplissage vert, déployé depuis le coin haut-gauche (même principe que l'ouverture du menu mobile) */
.nav-link::before{
  content:"";position:absolute;inset:0;background:var(--green);
  clip-path:circle(0% at 0 0);z-index:-1;pointer-events:none;
  transition:clip-path .45s cubic-bezier(.65,0,.35,1);
}
.nav-link:active::before,.nav-link:focus-visible::before{clip-path:circle(150% at 0 0)}
.nav-link:active,.nav-link:focus-visible{color:var(--bg)}
@media (hover:hover) and (pointer:fine){
  .nav-link:hover::before{clip-path:circle(150% at 0 0)}
  .nav-link:hover{color:var(--bg)}
}

/* ---------- Burger + panneau (tablette et mobile) ---------- */
.burger,.menu-panel{display:none}

/* ---------- En-tête de page (logo ou titre) + filets ---------- */
.page-head{
  display:flex;align-items:flex-end;min-height:var(--head-min);
  padding-top:calc(var(--header-h) + 40px);padding-bottom:var(--gut);
}
/* Pages projet : pas de logo au-dessus, donc 100px de moins qu'ailleurs */
.page-head--tight{padding-top:calc(var(--header-h) + 70px);min-height:0} /* 70px sous le bandeau menu (desktop) ; min-height:0 annule la réserve de hauteur du logo, sinon le titre est repoussé plus bas */
.page-head > *{width:100%}
.logo{width:var(--logo-w);margin-bottom:var(--gut);position:relative;isolation:isolate}
.logo img,.logo svg{width:100%;height:auto;display:block}
/* Glitch spontané du logo (voir assets/theme.js pour le déclenchement aléatoire) : des
   copies colorées du logo se décalent légèrement, par-dessus de fines bandes de couleur
   (1 à 5px), puis tout disparaît d'un coup. Invisibles au repos. La hauteur et la position
   de chaque bande sont tirées au hasard à chaque déclenchement (clip-path posé directement
   en style par le JS) ; ici, seuls le mouvement et le fondu sont réglés. */
.logo-shift{position:absolute;inset:0;pointer-events:none}
.logo-shift__row{position:absolute;inset:0;overflow:hidden;opacity:0}
.logo-shift__row:nth-child(3n+1){--green:var(--glitch)}
.logo-shift__row:nth-child(3n+2){--green:var(--pink)}
.logo-shift__row:nth-child(3n+3){--green:var(--green)}
.logo-glitch{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen}
.logo-glitch__band{position:absolute;inset:0;opacity:0}
.logo-glitch__band--cyan{background:var(--glitch)}
.logo-glitch__band--pink{background:var(--pink)}
.logo-glitch__band--green{background:var(--green)}
.logo.is-glitching .logo-shift__row:nth-child(1){animation:lm-logo-shift .5s steps(5,jump-end)}
.logo.is-glitching .logo-shift__row:nth-child(2){animation:lm-logo-shift .5s steps(5,jump-end) .03s}
.logo.is-glitching .logo-shift__row:nth-child(3){animation:lm-logo-shift .5s steps(5,jump-end) .06s}
.logo.is-glitching .logo-shift__row:nth-child(4){animation:lm-logo-shift .5s steps(5,jump-end) .09s}
.logo.is-glitching .logo-shift__row:nth-child(5){animation:lm-logo-shift .5s steps(5,jump-end) .12s}
.logo.is-glitching .logo-shift__row:nth-child(6){animation:lm-logo-shift .5s steps(5,jump-end) .15s}
.logo.is-glitching .logo-shift__row:nth-child(7){animation:lm-logo-shift .5s steps(5,jump-end) .18s}
.logo.is-glitching .logo-shift__row:nth-child(8){animation:lm-logo-shift .5s steps(5,jump-end) .21s}
.logo.is-glitching .logo-glitch__band--cyan{animation:lm-logo-band-flicker .5s steps(6,jump-end)}
.logo.is-glitching .logo-glitch__band--pink{animation:lm-logo-band-flicker .5s steps(6,jump-end) .06s}
.logo.is-glitching .logo-glitch__band--green{animation:lm-logo-band-flicker .5s steps(6,jump-end) .12s}
@keyframes lm-logo-shift{
  0%{transform:translateX(0);opacity:0}
  10%{opacity:.9}
  25%{transform:translateX(calc(var(--shift-dir,1) * 8px))}
  45%{transform:translateX(calc(var(--shift-dir,1) * -7px))}
  65%{transform:translateX(calc(var(--shift-dir,1) * 5px));opacity:.85}
  85%{transform:translateX(calc(var(--shift-dir,1) * -3px));opacity:.3}
  100%{transform:translateX(0);opacity:0}
}
@keyframes lm-logo-band-flicker{
  0%{opacity:0}
  15%{opacity:.8}
  30%{opacity:.25}
  45%{opacity:.75}
  60%{opacity:.4}
  100%{opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .logo-shift__row,.logo-glitch__band{animation:none !important}
}
.rules{margin-bottom:var(--gut)}
.rules span{border-top:var(--rule) solid var(--green)}
.rules span:nth-child(n+3){display:none}
@media (min-width:1024px){.rules span:nth-child(n+3){display:block}}
@media (max-width:767px){.rules span:nth-child(n+2){display:none}}

/* ---------- Grille d'accueil ---------- */
.grid{row-gap:var(--gut)}
.vignette{position:relative}
.vignette a{display:block}
.thumb{position:relative;aspect-ratio:1/1;background:var(--bg);overflow:hidden}
/* Deux images superposées (floue fournie + nette), ou une seule avec flou automatique si aucune n'a été choisie */
.thumb-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .35s ease,filter .35s ease;
}
.thumb-img--blur{opacity:1}
.thumb-img--sharp{opacity:0}
.thumb-img--auto-blur{opacity:1;filter:blur(var(--thumb-blur))} /* image unique, flou automatique par le code */
/* Bandes horizontales (hauteurs variées, posées par le code) qui glissent chacune depuis un
   côté pour venir reconstituer l'image nette au survol/toucher, en plus du fondu existant.
   Au repos elles restent décalées hors cadre (donc invisibles) ; seul le survol les ramène en place. */
.thumb-strips{position:absolute;inset:0;pointer-events:none}
.strip{position:absolute;inset:0;overflow:hidden}
.strip-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:translateX(var(--strip-dx,0%)) scale(1);
  /* Pas de transition ici : au repos (hors survol), les bandes repartent d'un coup, sans animation */
}
/* Le cadre suit exactement la taille de l'image : même transform, mêmes dimensions que .thumb */
.frame{
  position:absolute;inset:0;border:1px solid var(--green);opacity:0;pointer-events:none;
  transition:opacity .25s ease,transform .35s cubic-bezier(.2,.7,.2,1);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0L100 100M100 0L0 100' stroke='%2300ff00' stroke-width='1' vector-effect='non-scaling-stroke' fill='none'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
}
/* Carré rose dessiné à la main, par-dessus le cadre vert : même couleur/épaisseur que les
   cercles roses des flèches (réglables dans Personnaliser > Couleurs du thème). */
.frame__pink{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.frame__pink svg{display:block;width:130%;height:130%;margin:-15% 0 0 -15%;overflow:hidden}
.frame__pink .sq-trace{
  fill:none;stroke:var(--pink);stroke-linecap:round;stroke-width:var(--pink-stroke,2);
  vector-effect:non-scaling-stroke;stroke-dasharray:800;stroke-dashoffset:800;
  /* Pas de transition ici : au repos (hors survol), le trait disparaît d'un coup, sans animation */
}
/* Glitch horizontal (bandes cyan) qui passe brièvement sur la vignette au moment de sa révélation.
   Couleur et délai réglables dans Personnaliser > Couleurs du thème. Quatre variantes (nombre de
   bandes différent) existent ; le code en choisit une au hasard à chaque affichage de la page,
   pour que l'effet ne soit jamais identique d'une vignette ou d'un rechargement à l'autre. */
.thumb-glitch{position:absolute;inset:0;pointer-events:none;z-index:2;background:var(--glitch);mix-blend-mode:screen;opacity:0}
@keyframes lm-glitch-a{
  0%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateX(0)}
  7%{opacity:.86;clip-path:inset(86% 0 12% 0);transform:translateX(-6%)}
  23%{opacity:.68;clip-path:inset(11% 0 87% 0);transform:translateX(-6%)}
  53%{opacity:.76;clip-path:inset(28% 0 67% 0);transform:translateX(2%)}
  60%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateX(0)}
  100%{opacity:0}
}
@keyframes lm-glitch-b{
  0%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateX(0)}
  23%{opacity:.63;clip-path:inset(13% 0 83% 0);transform:translateX(-4%)}
  27%{opacity:.86;clip-path:inset(5% 0 77% 0);transform:translateX(-5%)}
  33%{opacity:.82;clip-path:inset(80% 0 16% 0);transform:translateX(6%)}
  50%{opacity:.83;clip-path:inset(5% 0 93% 0);transform:translateX(2%)}
  57%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateX(0)}
  100%{opacity:0}
}
@keyframes lm-glitch-c{
  0%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateX(0)}
  12%{opacity:.73;clip-path:inset(20% 0 59% 0);transform:translateX(-4%)}
  23%{opacity:.82;clip-path:inset(77% 0 11% 0);transform:translateX(-3%)}
  30%{opacity:.84;clip-path:inset(81% 0 1% 0);transform:translateX(-4%)}
  61%{opacity:.89;clip-path:inset(29% 0 60% 0);transform:translateX(5%)}
  70%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateX(0)}
  100%{opacity:0}
}
@keyframes lm-glitch-d{
  0%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateX(0)}
  10%{opacity:.65;clip-path:inset(58% 0 20% 0);transform:translateX(-3%)}
  19%{opacity:.86;clip-path:inset(33% 0 40% 0);transform:translateX(6%)}
  26%{opacity:.78;clip-path:inset(17% 0 80% 0);transform:translateX(-2%)}
  42%{opacity:.66;clip-path:inset(80% 0 6% 0);transform:translateX(6%)}
  51%{opacity:.95;clip-path:inset(76% 0 19% 0);transform:translateX(6%)}
  58%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateX(0)}
  100%{opacity:0}
}
@keyframes lm-glitch-e{
  0%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateX(0)}
  13%{opacity:.7;clip-path:inset(14% 0 66% 0);transform:translateX(-5%)}
  49%{opacity:.87;clip-path:inset(64% 0 32% 0);transform:translateX(-4%)}
  52%{opacity:.65;clip-path:inset(25% 0 49% 0);transform:translateX(-6%)}
  62%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateX(0)}
  100%{opacity:0}
}
@keyframes lm-glitch-f{
  0%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateX(0)}
  6%{opacity:.93;clip-path:inset(72% 0 25% 0);transform:translateX(-5%)}
  7%{opacity:.64;clip-path:inset(16% 0 57% 0);transform:translateX(6%)}
  13%{opacity:.93;clip-path:inset(27% 0 68% 0);transform:translateX(-4%)}
  26%{opacity:.91;clip-path:inset(56% 0 40% 0);transform:translateX(2%)}
  29%{opacity:.61;clip-path:inset(43% 0 55% 0);transform:translateX(-6%)}
  37%{opacity:.82;clip-path:inset(90% 0 8% 0);transform:translateX(-2%)}
  44%{opacity:.78;clip-path:inset(9% 0 71% 0);transform:translateX(5%)}
  52%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateX(0)}
  100%{opacity:0}
}
@keyframes lm-glitch-g{
  0%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateX(0)}
  14%{opacity:.67;clip-path:inset(52% 0 23% 0);transform:translateX(-5%)}
  40%{opacity:.9;clip-path:inset(59% 0 36% 0);transform:translateX(-2%)}
  42%{opacity:.69;clip-path:inset(13% 0 83% 0);transform:translateX(-6%)}
  52%{opacity:.7;clip-path:inset(23% 0 72% 0);transform:translateX(-2%)}
  62%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateX(0)}
  100%{opacity:0}
}
@keyframes lm-glitch-h{
  0%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateX(0)}
  9%{opacity:.66;clip-path:inset(30% 0 58% 0);transform:translateX(5%)}
  12%{opacity:.66;clip-path:inset(7% 0 88% 0);transform:translateX(-5%)}
  41%{opacity:.75;clip-path:inset(36% 0 59% 0);transform:translateX(3%)}
  47%{opacity:.8;clip-path:inset(7% 0 90% 0);transform:translateX(-4%)}
  57%{opacity:.92;clip-path:inset(64% 0 31% 0);transform:translateX(-2%)}
  60%{opacity:.62;clip-path:inset(23% 0 65% 0);transform:translateX(-3%)}
  70%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateX(0)}
  100%{opacity:0}
}
@keyframes lm-glitch-i{
  0%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateX(0)}
  8%{opacity:.67;clip-path:inset(33% 0 63% 0);transform:translateX(3%)}
  13%{opacity:.83;clip-path:inset(85% 0 12% 0);transform:translateX(4%)}
  21%{opacity:.76;clip-path:inset(1% 0 87% 0);transform:translateX(-2%)}
  42%{opacity:.65;clip-path:inset(33% 0 41% 0);transform:translateX(2%)}
  43%{opacity:.66;clip-path:inset(36% 0 43% 0);transform:translateX(6%)}
  44%{opacity:.83;clip-path:inset(1% 0 73% 0);transform:translateX(2%)}
  54%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateX(0)}
  100%{opacity:0}
}
@keyframes lm-glitch-j{
  0%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateX(0)}
  12%{opacity:.67;clip-path:inset(77% 0 19% 0);transform:translateX(3%)}
  13%{opacity:.77;clip-path:inset(64% 0 18% 0);transform:translateX(-2%)}
  22%{opacity:.6;clip-path:inset(5% 0 77% 0);transform:translateX(-4%)}
  53%{opacity:.85;clip-path:inset(70% 0 25% 0);transform:translateX(-2%)}
  63%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateX(0)}
  100%{opacity:0}
}
.vignette-title{
  display:block;font-size:var(--fs-thumb);font-weight:500;text-transform:uppercase;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Souris : le rétrécissement de l'image (centré, -20%) libère une bande tout autour ;
   le titre occupe la bande basse, à l'intérieur du carré (la vignette garde sa hauteur fixe) */
@media (hover:hover) and (pointer:fine){
  .vignette-title{
    position:absolute;left:0;right:0;bottom:0;height:10%;
    display:flex;align-items:center;justify-content:center;
    opacity:0;transition:opacity .25s ease;
  }
  .vignette a:hover .thumb-img,.vignette a:focus-visible .thumb-img,
  .vignette a:hover .frame,.vignette a:focus-visible .frame{transform:scale(.8)}
  /* Les bandes glissent jusqu'à leur place en se réduisant en même temps que le reste de la vignette */
  .vignette a:hover .strip-img,.vignette a:focus-visible .strip-img{
    transform:translateX(0) scale(.8);
    transition:transform var(--strip-duration,.35s) cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--strip-delay,0s) + var(--strip-base-delay,0s));
  }
  .vignette a:hover .thumb-img--sharp,.vignette a:focus-visible .thumb-img--sharp{opacity:1}
  .vignette a:hover .thumb-img--blur,.vignette a:focus-visible .thumb-img--blur{opacity:0}
  .vignette a:hover .thumb-img--auto-blur,.vignette a:focus-visible .thumb-img--auto-blur{filter:blur(0)}
  .vignette a:hover .frame,.vignette a:focus-visible .frame,
  .vignette a:hover .vignette-title,.vignette a:focus-visible .vignette-title{opacity:1}
  /* Petit wiggle au moment où le cadre vert apparaît (une seule fois, puis il reste stable) */
  .vignette a:hover .frame,.vignette a:focus-visible .frame{animation:lm-frame-wiggle .4s ease}
  /* Le carré rose se dessine par-dessus, un peu après le cadre vert, trait par trait, avec son propre petit wiggle */
  .vignette a:hover .frame__pink,.vignette a:focus-visible .frame__pink{transform:scale(.8);animation:lm-square-wiggle .9s ease .15s backwards}
  .vignette a:hover .frame__pink .sq-trace,.vignette a:focus-visible .frame__pink .sq-trace{stroke-dashoffset:0;transition:stroke-dashoffset .5s ease}
  .vignette a:hover .frame__pink .sq-trace:nth-child(1),.vignette a:focus-visible .frame__pink .sq-trace:nth-child(1){transition-delay:.15s}
  .vignette a:hover .frame__pink .sq-trace:nth-child(2),.vignette a:focus-visible .frame__pink .sq-trace:nth-child(2){transition-delay:.35s}
  .vignette a:hover .frame__pink .sq-trace:nth-child(3),.vignette a:focus-visible .frame__pink .sq-trace:nth-child(3){transition-delay:.55s}
  .vignette a:hover .frame__pink .sq-trace:nth-child(4),.vignette a:focus-visible .frame__pink .sq-trace:nth-child(4){transition-delay:.75s}
  .vignette a:hover .frame__pink .sq-trace:nth-child(5),.vignette a:focus-visible .frame__pink .sq-trace:nth-child(5){transition-delay:.95s}
  /* Glitch cyan qui passe une fois sur la vignette à la révélation (délai réglable dans Personnaliser) */
  .vignette a:hover .thumb-glitch,.vignette a:focus-visible .thumb-glitch{animation:var(--glitch-anim,lm-glitch-a) var(--glitch-duration,.5s) steps(8,jump-end) var(--glitch-delay)}
}
@keyframes lm-frame-wiggle{
  0%{transform:scale(.8) rotate(0deg)}
  30%{transform:scale(.8) rotate(-3deg)}
  60%{transform:scale(.8) rotate(2deg)}
  100%{transform:scale(.8) rotate(0deg)}
}
@keyframes lm-square-wiggle{
  0%{transform:scale(.8) rotate(0deg)}
  25%{transform:scale(.8) rotate(-2deg)}
  50%{transform:scale(.8) rotate(1.5deg)}
  75%{transform:scale(.8) rotate(-1deg)}
  100%{transform:scale(.8) rotate(0deg)}
}
/* Tactile : titre toujours visible, cadre vert et image nette au toucher */
@media (hover:none),(pointer:coarse){
  .vignette-title{margin-top:8px}
  .vignette a.is-pressed .thumb-img,.vignette a:active .thumb-img,
  .vignette a.is-pressed .frame,.vignette a:active .frame{transform:scale(.8)}
  .vignette a.is-pressed .strip-img,.vignette a:active .strip-img{
    transform:translateX(0) scale(.8);
    transition:transform var(--strip-duration,.35s) cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--strip-delay,0s) + var(--strip-base-delay,0s));
  }
  .vignette a.is-pressed .thumb-img--sharp,.vignette a:active .thumb-img--sharp{opacity:1}
  .vignette a.is-pressed .thumb-img--blur,.vignette a:active .thumb-img--blur{opacity:0}
  .vignette a.is-pressed .thumb-img--auto-blur,.vignette a:active .thumb-img--auto-blur{filter:blur(0)}
  .vignette a.is-pressed .frame,.vignette a:active .frame{opacity:1}
  .vignette a.is-pressed .frame__pink,.vignette a:active .frame__pink{transform:scale(.8);animation:lm-square-wiggle .9s ease .15s backwards}
  .vignette a.is-pressed .frame__pink .sq-trace,.vignette a:active .frame__pink .sq-trace{stroke-dashoffset:0;transition:stroke-dashoffset .5s ease}
  .vignette a.is-pressed .frame__pink .sq-trace:nth-child(1),.vignette a:active .frame__pink .sq-trace:nth-child(1){transition-delay:.15s}
  .vignette a.is-pressed .frame__pink .sq-trace:nth-child(2),.vignette a:active .frame__pink .sq-trace:nth-child(2){transition-delay:.35s}
  .vignette a.is-pressed .frame__pink .sq-trace:nth-child(3),.vignette a:active .frame__pink .sq-trace:nth-child(3){transition-delay:.55s}
  .vignette a.is-pressed .frame__pink .sq-trace:nth-child(4),.vignette a:active .frame__pink .sq-trace:nth-child(4){transition-delay:.75s}
  .vignette a.is-pressed .frame__pink .sq-trace:nth-child(5),.vignette a:active .frame__pink .sq-trace:nth-child(5){transition-delay:.95s}
  .vignette a.is-pressed .thumb-glitch,.vignette a:active .thumb-glitch{animation:var(--glitch-anim,lm-glitch-a) var(--glitch-duration,.5s) steps(8,jump-end) var(--glitch-delay)}
}

/* ---------- Page projet ---------- */
.project-head{display:flex;align-items:flex-end;gap:var(--gut)}
.project-title{
  flex:1 1 auto;min-width:0;background:var(--green);color:var(--white);
  font-size:var(--fs-title);font-weight:700;text-transform:uppercase;line-height:1.1;
  height:var(--title-h);overflow:hidden;padding:8px 12px;display:flex;align-items:center;margin:0;
}
/* Les flèches de navigation entre projets : ce sont toujours les mêmes (pas de doublon),
   fixées à l'écran collées sous le bandeau menu (ou le burger) dès le départ, et qui ne
   bougent donc plus du tout pendant le défilement. Alignées dans la même zone centrale de
   1200px que le reste du contenu, via .wrap (jamais collées au bord de l'écran). */
.arrows-bar{position:fixed;left:0;right:0;top:var(--header-h);z-index:60;pointer-events:none} /* au-dessus du bandeau menu (z-index:50), pour que le cercle rose ne soit jamais coupé par lui */
.arrows-bar__inner{display:flex;justify-content:flex-end}
.arrows{display:flex;gap:var(--gut);pointer-events:auto}
.arrow{
  position:relative;isolation:isolate;
  width:var(--btn);height:var(--btn);display:block;color:var(--green);
  border:1px solid var(--green);background:var(--bg);transition:color .25s ease .05s;
}
.arrow svg{position:relative;display:block;width:100%;height:100%}
/* Remplissage vert, déployé depuis le coin haut-gauche (même principe que l'ouverture du menu mobile) */
.arrow::before{
  content:"";position:absolute;inset:0;background:var(--green);
  clip-path:circle(0% at 0 0);z-index:-1;pointer-events:none;
  transition:clip-path .45s cubic-bezier(.65,0,.35,1);
}
/* Cercle rose « dessiné à la main » : un vrai tracé SVG (pas une image), qui se dessine
   au survol comme un stylo qui trace, grâce à stroke-dasharray/dashoffset. Longueur du
   tracé fournie par Les Mouches : 358,34 (arrondie à 359 pour fermer proprement le trait). */
.arrow__pink{
  position:absolute;left:50%;top:50%;width:85px;aspect-ratio:71.1/57;
  transform:translate(-50%,-50%);overflow:visible;
  z-index:3;pointer-events:none;
}
.arrow__pink svg{display:block;width:100%;height:100%;overflow:visible}
.arrow__pink .pink-trace{
  fill:none;stroke:var(--pink);stroke-linecap:round;stroke-width:var(--pink-stroke,2);
  vector-effect:non-scaling-stroke;
  stroke-dasharray:1000;stroke-dashoffset:1000;
  transition:stroke-dashoffset .9s ease;
}
.arrow:active::before,.arrow:focus-visible::before{clip-path:circle(150% at 0 0)}
.arrow:active .pink-trace,.arrow:focus-visible .pink-trace{stroke-dashoffset:0}
.arrow:active,.arrow:focus-visible{color:var(--white)}
/* Léger wiggle du cercle rose pendant qu'il se dessine, pour une apparition plus organique */
.arrow:active .arrow__pink,.arrow:focus-visible .arrow__pink{animation:lm-pink-wiggle .9s ease}
@keyframes lm-pink-wiggle{
  0%{transform:translate(-50%,-50%) rotate(0deg)}
  25%{transform:translate(-50%,-50%) rotate(-4deg)}
  50%{transform:translate(-50%,-50%) rotate(3deg)}
  75%{transform:translate(-50%,-50%) rotate(-2deg)}
  100%{transform:translate(-50%,-50%) rotate(0deg)}
}
@media (hover:hover){
  .arrow:hover::before{clip-path:circle(150% at 0 0)}
  .arrow:hover .pink-trace{stroke-dashoffset:0}
  .arrow:hover{color:var(--white)}
  .arrow:hover .arrow__pink{animation:lm-pink-wiggle .9s ease}
}
.entry-content > *{margin-block:0}
.entry-content > * + *{margin-top:var(--gut)}
.entry-content figure,.entry-content .wp-block-image{margin:0;max-width:none}
.entry-content img{width:100%;height:auto}
/* Marge de 24px aussi entre images qui ne seraient pas des blocs de premier niveau
   (ex. plusieurs images ajoutées dans un bloc Galerie plutôt qu'en blocs Image séparés) */
.entry-content img + img,
.entry-content figure + figure,
.entry-content .wp-block-image + .wp-block-image{margin-top:var(--gut)}
.entry-content .alignwide,.entry-content .alignfull,.entry-content .aligncenter{max-width:none;width:100%;margin-inline:0}
/* Légende sous une image (champ « Légende » du bloc Image dans l'éditeur WordPress) :
   noir, centrée, 9px/300, 10px sous l'image ; les 24px avant l'image suivante viennent
   de la marge déjà posée entre blocs juste au-dessus, pas besoin d'y retoucher. */
.entry-content figcaption{
  margin-top:10px;text-align:center;
  color:var(--black);font-size:9px;font-weight:300;
}
.entry-content figcaption a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* ---------- Page projet : slider vertical infini + parallaxe (Smooothy) ----------
   Activé par assets/projet-slider.js. Sans le script, les images restent empilées comme avant.
   Mise en page quand le slider est actif :
   - menu (fond crème) tout en haut ; juste dessous, SANS fond, le titre vert, les flèches au bout de
     la même ligne, puis les filets verts : ils flottent par-dessus le slider, les images passent derrière ;
   - une fine ligne de pied de page fixe en bas de la fenêtre, les images passent dessous aussi. */
html.lm-has-slider,body.lm-has-slider{overflow:hidden;height:100%;overscroll-behavior:none}
/* Bloc titre + filets, fixe */
body.lm-has-slider .project-top{
  position:fixed;top:0;left:var(--margin);right:var(--margin);max-width:1200px;margin-inline:auto;
  z-index:40;pointer-events:none;
}
body.lm-has-slider .page-head--project{padding-top:var(--header-h);padding-bottom:var(--gut);min-height:0}
body.lm-has-slider .project-top .rules{margin-bottom:0}
@media (min-width:768px){
  /* la place des deux flèches au bout de la ligne du titre */
  body.lm-has-slider .project-top.has-arrows .project-head{padding-right:calc(2 * var(--btn) + 2 * var(--gut))}
}
@media (max-width:1023px){
  body.lm-has-slider .page-head--project{padding-top:var(--burger)}
}
@media (max-width:767px){
  body.lm-has-slider .page-head--project{padding-top:calc(var(--burger) + 24px)}
}

/* Pied de page, fin et fixe */
body.lm-has-slider .site-footer{
  position:fixed;bottom:0;left:var(--margin);right:var(--margin);max-width:1200px;margin:0 auto;
  z-index:40;background:var(--bg);padding:8px 0 12px;pointer-events:none;
}
body.lm-has-slider .site-footer .wrap{width:100%}
body.lm-has-slider .site-footer .line{margin-bottom:6px}
@media (max-width:1439px){
  body.lm-has-slider .site-footer p{padding-right:calc(var(--btn) + var(--gut))} /* laisse la place au bouton son */
}

/* Le slider : plein écran entre le bandeau menu (en haut) et le pied de page (en bas) ; le titre,
   les flèches et les filets flottent par-dessus. Sur mobile il démarre tout en haut de l'écran. */
.lm-slider{
  --lm-win-h:calc(100vh - var(--lm-top,0px) - var(--lm-bot,0px));
  --lm-img-maxh:calc(var(--lm-win-h) - 2 * var(--gut) - 30px);
  position:fixed;left:0;right:0;top:var(--lm-top,0px);bottom:var(--lm-bot,0px);
  height:var(--lm-win-h);
  display:flex;flex-direction:column;overflow:hidden;
  touch-action:none;user-select:none;-webkit-user-select:none;
}
@supports (height:100svh){
  .lm-slider{
    --lm-win-h:calc(100svh - var(--lm-top,0px) - var(--lm-bot,0px));
  }
}
.lm-slider:focus-visible{outline:2px solid var(--pink);outline-offset:-2px}
.lm-slide{flex:0 0 auto;padding-bottom:var(--lm-gap,var(--gut));will-change:transform}
.lm-slide__frame{
  --lm-col:min(1200px,calc(100vw - 2 * var(--margin)));
  width:min(var(--lm-col),calc(var(--lm-img-maxh) * var(--ar,1.5)));
  margin-inline:auto;will-change:transform;
}
.lm-slide img{
  display:block;width:100%;height:auto;max-width:none;
  -webkit-user-drag:none;pointer-events:none;
}
.lm-slide figcaption{
  margin-top:10px;text-align:center;
  color:var(--black);font-size:9px;font-weight:300;
}

/* Entrées animées (pages projet et accueil) : voir assets/entrees.js.
   Tant que le script n'a pas placé les éléments hors cadre, on les masque pour éviter un flash.
   Si le script ne s'exécute pas, tout réapparaît tout seul après 2,5 s. */
@keyframes lm-reveal{to{opacity:1}}
.logo.is-assembling>svg,.logo.is-assembling>.logo-shift{visibility:hidden}
.logo-band{position:absolute;inset:0;will-change:transform;pointer-events:none}
.logo-band svg{display:block;width:100%;height:100%}
html.lm-enter .project-title,
html.lm-enter .arrows .arrow,
html.lm-enter .rules span,
html.lm-enter body.splash .logo,
html.lm-enter .grid .vignette{opacity:0;animation:lm-reveal 0s 2.5s forwards}

/* ---------- Page d'accueil verte (adresse /) ----------
   Fond vert sur tout l'écran, logo blanc centré qui glitche souvent (réglable dans Personnaliser),
   menu en blanc. Un clic n'importe où ouvre le portfolio (/works/). */
body.splash{--splash-fg:#fff;background:var(--green);color:var(--splash-fg)}
html:has(body.splash),body.splash{overflow:hidden;height:100%}
body.splash .splash-enter{position:fixed;inset:0;z-index:10;cursor:pointer}
html.has-cursor-dot body.splash .splash-enter{cursor:none}   /* la croix du thème remplace la main */
body.splash .logo{--green:var(--splash-fg)}
.lm-echo-on .cursor-trail{display:none}   /* sur l'accueil, la traînée de croix est dessinée par echo.js */
.lm-echo{position:fixed;inset:0;width:100%;height:100%;z-index:5;pointer-events:none}
body.splash .rules span{border-top-color:var(--splash-fg)}
body.splash .logo-shift__row:nth-child(3n+3){--green:var(--splash-fg)}
body.splash .site-header{background:transparent;color:var(--splash-fg)}
body.splash .nav-link::before{background:var(--splash-fg)}
body.splash .nav-link:active,body.splash .nav-link:focus-visible{color:var(--green)}
@media (hover:hover) and (pointer:fine){
  body.splash .nav-link:hover{color:var(--green)}
}
/* Pied de page en blanc, fixe en bas */
body.splash .site-footer{
  position:fixed;left:var(--margin);right:var(--margin);bottom:0;max-width:1200px;margin:0 auto;
  z-index:20;color:var(--splash-fg);padding-bottom:12px;pointer-events:none;
}
body.splash .site-footer .wrap{width:100%}
body.splash .site-footer .line{border-top-color:var(--splash-fg)}
@media (max-width:1439px){
  body.splash .site-footer p{padding-right:calc(var(--btn) + var(--gut))} /* laisse la place au bouton son */
}

/* ---------- Page info (texte) ---------- */
.text-page .entry-content{max-width:600px;font-size:var(--fs-text);line-height:1.5}
.text-page .entry-content > * + *{margin-top:1em}
.text-page .entry-content a{text-decoration:underline;text-underline-offset:3px}
.info-title{display:inline-flex;width:auto;max-width:100%}

/* Gribouillis-slogans : zone fixe qui démarre au même endroit que le haut du titre
   (comme dans les fichiers fournis par Les Mouches, plan de travail 1200x800 = 600x400
   affichés). Un seul dessin visible à la fois, choisi au hasard par assets/theme.js au
   survol de tout le texte, et qui disparaît d'un coup dès qu'on quitte le survol. */
.page-head--tight{position:relative}
.slogan-overlay{
  position:absolute;left:0;top:calc(var(--header-h) + 70px);z-index:5;
  width:min(600px,calc(100vw - 2 * var(--margin)));aspect-ratio:600/400;
  pointer-events:none;
}
.slogan-overlay__item{position:absolute;inset:0;opacity:0}
.slogan-overlay__item svg{display:block;width:100%;height:100%;overflow:visible}
.slogan-overlay__item .slogan-trace{
  fill:none;stroke:var(--pink);stroke-linecap:round;stroke-width:var(--slogan-stroke,2);
  vector-effect:non-scaling-stroke;
  stroke-dasharray:3000;stroke-dashoffset:3000;
}
.slogan-overlay__item.is-active{opacity:1}
.slogan-overlay__item.is-active .slogan-trace{
  stroke-dashoffset:0;transition:stroke-dashoffset 1.1s ease;
}
@media (max-width:1023px){
  .slogan-overlay{top:calc(var(--burger) + 70px)}
}
@media (max-width:767px){
  .slogan-overlay{top:var(--burger)}
}
@media (prefers-reduced-motion:reduce){
  .slogan-overlay__item.is-active .slogan-trace{transition:none}
}

/* ---------- Pied de page ---------- */
.site-footer{margin-top:var(--gut);padding-bottom:40px;color:var(--green);font-size:var(--fs-footer)}
.site-footer .line{border-top:1px solid var(--green);margin-bottom:8px}
.site-footer p{margin:0;text-align:right}

/* ---------- Tablette et mobile : burger ---------- */
@media (max-width:1023px){
  .site-header{display:none}
  .page-head{padding-top:130px}
  .page-head--tight{padding-top:calc(var(--burger) + 70px)} /* 70px sous le burger (tablette) */
  .arrows-bar{top:var(--burger)} /* flèches collées sous le bouton burger, qui remplace le bandeau menu ici */
  .burger{
    display:flex;align-items:center;justify-content:center;
    position:fixed;z-index:70;top:0;left:0;
    width:var(--burger);height:var(--burger);padding:0;border:0;background:var(--white);
    color:var(--green);cursor:pointer;
  }
  body.admin-bar .burger{top:32px} /* hauteur de la barre d'administration WordPress */
  /* 5 tirets de 40 x 3 px, répartis pour former un carré de 40 x 40 px */
  .burger .bars{position:relative;width:var(--burger-bar-w);height:var(--burger-bar-w)}
  .burger .bars span{
    position:absolute;left:0;width:var(--burger-bar-w);height:var(--burger-bar-h);background:currentColor;
    top:calc(var(--i) * (100% - var(--burger-bar-h)) / 4);
    transition:top .3s cubic-bezier(.6,0,.2,1),transform .3s cubic-bezier(.6,0,.2,1) .1s,opacity .2s;
    transform-origin:center;
  }
  .burger.is-open .bars span{top:50%;transform:translateY(-50%)}
  .burger.is-open .bars span:nth-child(1),
  .burger.is-open .bars span:nth-child(3),
  .burger.is-open .bars span:nth-child(5){opacity:0}
  .burger.is-open .bars span:nth-child(2){transform:translateY(-50%) rotate(45deg)}
  .burger.is-open .bars span:nth-child(4){transform:translateY(-50%) rotate(-45deg)}

  /* Le fond blanc se déploie depuis le burger pour révéler le menu */
  .menu-panel{
    display:block;position:fixed;inset:0;z-index:60;background:var(--white);color:var(--green);
    padding:140px var(--margin) 40px 88px;font-size:var(--fs-menu);line-height:1.25;
    clip-path:circle(0% at 50px 50px);pointer-events:none;
    transition:clip-path .55s cubic-bezier(.7,0,.3,1);
  }
  body.admin-bar .menu-panel{padding-top:172px;clip-path:circle(0% at 50px 82px)}
  .menu-panel.is-open{clip-path:circle(150% at 50px 50px);pointer-events:auto}
  body.admin-bar .menu-panel.is-open{clip-path:circle(150% at 50px 82px)}
  .menu-panel ul{list-style:none;margin:0;padding:0}
  .menu-panel li{margin-bottom:1.1em}
  .menu-panel .brand-block{margin-bottom:1.6em}
  .menu-panel .is-current{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
}
@media (max-width:767px){
  .menu-panel{padding-left:calc(var(--margin) + 12px)}
  /* Page info : 0px entre le burger et le titre */
  .page-head--tight{padding-top:var(--burger)}
  /* Page projet : le titre laisse 24px sous les flèches (voir .arrows-bar ci-dessous) au lieu
     d'être collé directement sous le burger. */
  .page-head--project{padding-top:calc(var(--burger) + 24px)}
  /* Les flèches sont calées par le bas : le bas des carrés touche le bas du carré blanc du burger. */
  .arrows-bar{top:calc(var(--burger) - var(--btn))}
}
@media (prefers-reduced-motion:reduce){
  .menu-panel{transition:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* ---------- Curseur personnalisé (souris uniquement, ajouté par le script) ---------- */
html.has-cursor-dot,html.has-cursor-dot a,html.has-cursor-dot button{cursor:none}
.cursor-dot{position:fixed;top:0;left:0;width:0;height:0;z-index:200;pointer-events:none;opacity:0;transition:opacity .2s ease}
html.has-cursor-dot .cursor-dot{opacity:1}
.cursor-dot__mark{position:absolute;left:-15px;top:-15px;width:30px;height:30px;transition:transform .2s ease}
.cursor-dot__mark::before,.cursor-dot__mark::after{content:"";position:absolute;background:var(--pink)}
.cursor-dot__mark::before{left:50%;top:0;width:1px;height:100%;margin-left:-.5px}
.cursor-dot__mark::after{top:50%;left:0;width:100%;height:1px;margin-top:-.5px}
.cursor-dot.is-active .cursor-dot__mark{transform:rotate(45deg)}

/* Traînée de petites croix derrière le curseur : même couleur/épaisseur que la croix du
   curseur, tailles variables, posées par le script au fil du déplacement puis retirées. */
.cursor-trail{position:fixed;top:0;left:0;z-index:199;pointer-events:none;transform:translate(-50%,-50%);animation:lm-trail-pop .7s ease forwards}
.cursor-trail::before,.cursor-trail::after{content:"";position:absolute;background:var(--pink)}
.cursor-trail::before{left:50%;top:0;width:1px;height:100%;margin-left:-.5px}
.cursor-trail::after{top:50%;left:0;width:100%;height:1px;margin-top:-.5px}
@keyframes lm-trail-pop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.5) rotate(0deg)}
  15%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-6deg)}
  45%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(4deg)}
  75%{opacity:.6;transform:translate(-50%,-50%) scale(.95) rotate(-2deg)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(.85) rotate(0deg)}
}

/* ---------- Bouton son (sons glitch au survol des vignettes de l'accueil) ----------
   Fixe en bas à droite, visible sur toutes les pages. Coupé par défaut (icône barrée) ;
   un clic l'active/le coupe, et le choix est mémorisé pour les prochaines visites. */
.sound-toggle{
  display:flex;align-items:center;justify-content:center;
  position:fixed;z-index:80;right:var(--gut);bottom:var(--gut);
  width:var(--btn);height:var(--btn);padding:0;border:0;border-radius:50%;
  background:var(--white);color:var(--black);cursor:pointer;
}
.sound-toggle__icon{width:22px;height:22px}
.sound-toggle__icon svg{width:100%;height:100%;overflow:visible}
.sound-toggle__speaker{fill:currentColor}
.sound-toggle__wave{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;transition:opacity .15s ease}
.sound-toggle__mute{fill:none;stroke:var(--pink);stroke-width:1.8;stroke-linecap:round}
/* Coupé (par défaut) : pas d'ondes, croix rose visible */
.sound-toggle__wave{opacity:0}
.sound-toggle__mute{opacity:1}
/* Activé : ondes visibles, croix masquée */
.sound-toggle.is-active .sound-toggle__wave{opacity:1}
.sound-toggle.is-active .sound-toggle__mute{opacity:0}
@media (max-width:1023px){
  .sound-toggle{right:var(--gut);bottom:var(--gut)}
  body.admin-bar .sound-toggle{bottom:var(--gut)}
}

/* ---------- Accueil vert : touches du code Konami (ordinateur seulement) ----------
   6 touches sans légende, en haut à droite, dont le bas est aligné sur le bas du logo
   (bas = marge basse du bloc logo + marge basse de .page-head, soit 2 × var(--gut)).
   Voir assets/konami.js. */
body.splash .page-head{position:relative}
.page-head > .konami{width:auto}   /* annule « .page-head > *{width:100%} », sinon les touches restent à gauche */
.konami{
  position:absolute;right:0;bottom:calc(2 * var(--gut));z-index:30;
  display:grid;grid-template-columns:repeat(5,32px);grid-template-rows:32px 32px;gap:4px;
  animation:lm-konami-in .6s ease 2.2s both;
}
@keyframes lm-konami-in{from{opacity:0}to{opacity:1}}
.konami button{
  box-sizing:border-box;width:32px;height:32px;padding:0;margin:0;
  display:flex;align-items:center;justify-content:center;
  background:transparent;color:var(--splash-fg,#fff);border:2px solid var(--splash-fg,#fff);border-radius:0;
  font:500 14px/1 "Google Sans Flex",system-ui,sans-serif;cursor:pointer;
  transition:border-width .09s ease-out;
}
.konami button svg{width:10px;height:10px;fill:currentColor;display:block}
.konami button[data-k="a"],.konami button[data-k="b"]{opacity:.55}
.konami button.is-down,.konami button.is-wave{border-width:5px}
.konami button:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
.konami [data-k="ArrowUp"]{grid-column:3;grid-row:1}
.konami [data-k="a"]{grid-column:1;grid-row:2}
.konami [data-k="ArrowLeft"]{grid-column:2;grid-row:2}
.konami [data-k="ArrowDown"]{grid-column:3;grid-row:2}
.konami [data-k="ArrowRight"]{grid-column:4;grid-row:2}
.konami [data-k="b"]{grid-column:5;grid-row:2}
html.has-cursor-dot .konami button{cursor:none}
@media (hover:none),(max-width:1023px){.konami{display:none}}
@media (prefers-reduced-motion:reduce){.konami{animation:none}.konami button{transition:none}}