/* Le portfolio de Mathieu — un seul écran, jamais de défilement : c'est le temps qui avance (js/film.js).
   Le fond, la grille, la craie et la 3D sont fixes (#stage, toiles) ; les scènes (.scene) se superposent,
   chacune visible seulement dans sa plage de la ligne du temps. */
:root{
  --bp:#DADBD8;             /* le fond (papier gris, style Esquisse) */
  --bp-deep:#C4C6C2;        /* le fond, sur les bords */
  --bp-hi:#E8E9E6;          /* le centre, plus clair */
  --ink:34,36,40;           /* le trait, en r,g,b */
  --display:"Barlow Condensed","Arial Narrow","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --text:"Barlow",system-ui,-apple-system,"Segoe UI","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,"Noto Sans SC","PingFang SC","Microsoft YaHei",monospace;
  --hand:"Architects Daughter","Caveat",cursive;
  --gutter:clamp(22px,5vw,72px);
  --sheet:12px;             /* le cadre de la planche */
  --vig:rgba(90,80,60,.14); /* le vignetage des bords */
  color-scheme:light;
}
/* ——— les thèmes : les couleurs et les polices arrivent en variables sur <html> (js/theme.js) ; ici, quelques retouches par style ——— */
#titles{filter:var(--glow-t,none)}
[data-style="cao"] h1,[data-style="cao"] h2{letter-spacing:-.01em}
[data-style="cao"] .sheet{border-color:rgba(var(--ink),.3)}
[data-style="ardoise"] #stage{background-image:var(--noise,none),radial-gradient(ellipse at 40% 35%,var(--bp-hi) 0%,var(--bp) 50%,var(--bp-deep) 100%)}

/* ——— les sélecteurs (thème, langue) : un bouton discret, un petit panneau ——— */
.picks{display:flex;gap:8px;align-items:center}
.pick{position:relative}
.pick>button{display:flex;align-items:center;gap:7px;height:28px;padding:0 10px;position:relative;border:0;border-radius:0;background:none;color:rgb(var(--ink));
  font:500 .64rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:border-color .2s,background .2s}
.pick>button:hover,.pick>button:focus-visible,.pick.open>button{outline:none}
.pick>button::after{content:"";width:5px;height:5px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.7;transition:transform .2s}
.pick.open>button::after{transform:translateY(1px) rotate(-135deg)}
.pick ul{position:absolute;right:0;top:calc(100% + 6px);min-width:11rem;margin:0;padding:6px;list-style:none;background:var(--bp-deep);border:0;overflow:visible;
  box-shadow:0 12px 30px rgba(0,0,0,.25);opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .18s,transform .18s;z-index:6}
.pick.open ul{opacity:1;transform:none;pointer-events:auto}
.pick li button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;background:none;color:rgb(var(--ink));font:500 .7rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;text-align:left;cursor:pointer;opacity:.75}
.pick li button:hover,.pick li button:focus-visible{opacity:1;background:rgba(var(--ink),.08);outline:none}
.pick li button[aria-current="true"]{opacity:1}
.pick li button[aria-current="true"]::after{content:"";margin-left:auto;width:9px;height:5px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg) translateY(-2px)}
.pick li span{font-family:var(--mono),"Noto Sans SC",sans-serif}
.pick li small{opacity:.55;letter-spacing:.06em;text-transform:none;font-size:.68rem}
/* ——— un cadre tracé à la craie (js/picker.js : chalkFrame) : un seul trait à main levée, qui se trace à l'apparition ;
   au survol, un second trait vient s'y ajouter ——— */
.cf{position:absolute;left:-6px;top:-6px;width:calc(100% + 12px);height:calc(100% + 12px);overflow:visible;pointer-events:none;fill:none;stroke:rgb(var(--ink));stroke-linecap:round;stroke-linejoin:round;filter:url(#chalk-rough)}
.cf path{stroke-dasharray:1;stroke-dashoffset:1}
.cf .cf-a{stroke-width:1.6;opacity:.95;animation:cf-draw 1s cubic-bezier(.6,0,.2,1) .4s forwards}
.cf .cf-b{stroke-width:1;opacity:0;transition:opacity .2s}
@keyframes cf-draw{to{stroke-dashoffset:0}}
:hover>.cf .cf-b,:focus-visible>.cf .cf-b,.open>button>.cf .cf-b{opacity:.65;animation:cf-draw .55s cubic-bezier(.6,0,.2,1) forwards}
.cf-panel{left:0;top:0;width:100%;height:100%}   /* dans les panneaux (qui coupent ce qui dépasse), le cadre est tracé à l'intérieur */
.cf-panel .cf-a{stroke-width:1.3;animation-delay:0s;animation-duration:.6s}
[data-style="cao"] .cf{filter:none}

/* ——— le sélecteur de thème : au centre de l'en-tête ———
   Un bouton (la miniature du thème et son nom) ; un panneau : les styles à gauche, le grand aperçu et les couleurs à droite. */
.tpick{position:absolute;left:50%;top:calc(12px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:7;pointer-events:auto}
.tp-btn{display:flex;align-items:center;gap:10px;height:38px;padding:4px 12px 4px 4px;position:relative;border:0;background:none;color:rgb(var(--ink));cursor:pointer;
  font:500 .64rem/1.15 var(--mono);letter-spacing:.12em;text-transform:uppercase;transition:border-color .2s,background .2s;backdrop-filter:blur(6px)}
.tp-btn:hover,.tp-btn:focus-visible,.tpick.open .tp-btn{outline:none}
.tp-mini{display:block;box-shadow:0 0 0 1px rgba(var(--ink),.25)}
.tp-name{display:flex;flex-direction:column;align-items:flex-start;white-space:nowrap}
.tp-name small{font-size:.5rem;letter-spacing:.2em;opacity:.55;margin-bottom:2px}
.tp-btn::after{content:"";width:5px;height:5px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.7;transition:transform .2s;margin-left:2px}
.tpick.open .tp-btn::after{transform:translateY(1px) rotate(-135deg)}
.tp-panel{position:absolute;left:50%;top:calc(100% + 10px);width:min(540px,calc(100vw - 24px));transform:translate(-50%,-6px);padding:12px 14px 14px;
  background:var(--bp-deep);color:rgb(var(--ink));border:0;box-shadow:0 20px 60px rgba(0,0,0,.4);
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-height:calc(100vh - 90px);overflow:auto}
.tpick.open .tp-panel{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.tp-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font:500 .66rem/1 var(--mono);letter-spacing:.22em;text-transform:uppercase}
.tp-x{border:0;background:none;color:inherit;font-size:.95rem;cursor:pointer;opacity:.75;padding:4px 6px}
.tp-x:hover{opacity:1}
.tp-body{display:grid;grid-template-columns:178px 1fr;gap:12px;align-items:stretch}
.tp-cap{margin:0 0 8px;font:500 .58rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;opacity:.6}
.tp-list{display:flex;flex-direction:column;gap:3px}
.tp-list .tp-item{flex:1}   /* la liste occupe toute la hauteur de l'aperçu et des couleurs */
.tp-item{display:flex;align-items:center;gap:8px;padding:4px;border:1px solid transparent;background:none;color:inherit;text-align:left;cursor:pointer;transition:background .15s,border-color .15s}
.tp-item:hover,.tp-item:focus-visible{background:rgba(var(--ink),.07);outline:none}
.tp-item[aria-checked="true"]{border-color:rgb(var(--ink));background:rgba(var(--ink),.08)}
.tp-thumb{flex:none;display:block;box-shadow:0 0 0 1px rgba(var(--ink),.2)}
.tp-item b{display:block;font:600 .8rem/1.1 var(--display);letter-spacing:.05em;text-transform:uppercase}
.tp-item small{display:none}
.tp-big canvas{display:block;width:100%!important;height:auto!important;aspect-ratio:320/180;box-shadow:0 0 0 1px rgba(var(--ink),.25)}
.tp-capc{margin-top:10px}
.tp-desc{margin:6px 0 0;font:400 .72rem/1.35 var(--text);opacity:.7;min-height:1.35em}
.tp-colors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.tp-col{display:flex;flex-direction:column;gap:4px;padding:3px;border:1px solid rgba(var(--ink),.15);background:none;color:inherit;cursor:pointer;font:500 .62rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;text-align:left;transition:border-color .15s}
.tp-col canvas{display:block;width:100%!important;height:auto!important;aspect-ratio:96/54}
.tp-col:hover,.tp-col:focus-visible{border-color:rgba(var(--ink),.55);outline:none}
.tp-col[aria-checked="true"]{border-color:rgb(var(--ink));box-shadow:inset 0 0 0 1px rgb(var(--ink))}
.tp-col[aria-checked="true"] span::after{content:" ✓"}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bp-deep)}
/* rien ne défile, rien ne zoome au doigt : les gestes sont pour le film (js/film.js) */
body{color:rgb(var(--ink));font:400 1.0625rem/1.6 var(--text);-webkit-font-smoothing:antialiased;overscroll-behavior:none;touch-action:none;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
a{color:inherit}
:focus-visible{outline:2px solid rgb(var(--ink));outline-offset:3px}

/* ——— le fond : papier, quadrillage, grain ——— */
#stage{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background-color:var(--bp);
  background-image:var(--noise,none),radial-gradient(ellipse at 50% 40%,var(--bp-hi) 0%,var(--bp) 45%,var(--bp-deep) 100%);
  background-size:180px 180px,100% 100%}
#grid{position:absolute;inset:0;width:100%;height:100%;display:block}
#stage::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,transparent 55%,var(--vig) 100%)}
.sheet{position:fixed;inset:var(--sheet);z-index:3;pointer-events:none;border:1px solid rgba(var(--ink),.55)}
.sheet::after{content:"";position:absolute;inset:4px;border:1px solid rgba(var(--ink),.18)}

/* ——— les toiles : les objets 3D en traits, puis la craie (titres et dessins des scènes) par-dessus ——— */
#titles,#obj,#fil{position:fixed;inset:0;z-index:1;width:100%;height:100%;pointer-events:none;display:block}
#obj{filter:var(--glow-f,none)}

/* on peut attraper un objet : un curseur (tourner ou prendre), et une bulle tant qu'on n'a encore rien attrapé */
.can-grab,.can-grab body{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23DADBD8' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M9 16a12 12 0 0 1 21-4M31 24a12 12 0 0 1-21 4'/%3E%3C/g%3E%3Cg fill='none' stroke='%23222428' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 16a12 12 0 0 1 21-4M31 24a12 12 0 0 1-21 4'/%3E%3Cpath d='M30 5v7h-7M10 35v-7h7'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='2.4' fill='%23222428'/%3E%3C/svg%3E") 20 20,grab}
.can-hold,.can-hold body{cursor:grab}
.grabbing,.grabbing body,.grabbing *{cursor:grabbing!important}
.grab-hint{position:fixed;z-index:6;left:0;top:0;pointer-events:none;padding:6px 10px;border:1px solid rgba(var(--ink),.6);background:var(--bp-deep);font:500 .62rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;opacity:0;transition:opacity .25s}
.can-grab .grab-hint:not(.done){opacity:1}

/* ——— l'en-tête : le nom à gauche, le thème au centre, la langue à droite ——— */
.top{position:fixed;z-index:5;top:var(--sheet);left:var(--sheet);right:var(--sheet);display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px calc(var(--gutter) - var(--sheet));padding-top:calc(18px + env(safe-area-inset-top,0px));pointer-events:none}
.top > *{pointer-events:auto}
/* le nom, écrit à la main (en attendant le logo de Mathieu) */
.brand{display:flex;align-items:center;text-decoration:none;font:400 1.35rem/1 var(--hand);letter-spacing:.02em;transition:letter-spacing .4s}
.brand:hover{letter-spacing:.08em}
/* le logo (js/logo.js) : sa toile déborde un peu (les oreilles au-dessus, la queue à droite) */
.brand canvas{display:block;margin:-16px 0 -8px -6px}
/* le logo en 3D (js/logo.js) : la place de la tête, dessinée dans la toile 3D */
.brand .tete{display:block;width:44px;height:52px}
.brand:hover{letter-spacing:.02em}
[data-style="cao"] .brand{font-size:.95rem;letter-spacing:.14em;text-transform:uppercase}

/* ——— les scènes : des calques plein écran, montrés par la ligne du temps (opacité posée par js/film.js) ——— */
.scenes{position:fixed;inset:0;z-index:2;pointer-events:none;margin:0}
.scene{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(18px,4vh,40px);padding:calc(var(--sheet) + 96px) var(--gutter) calc(var(--sheet) + 120px);text-align:center;visibility:hidden;opacity:0}
.scene button,.scene a{pointer-events:auto}
h1,h2{font-family:var(--title,var(--display));font-weight:600;text-transform:uppercase;margin:0;text-wrap:balance}
/* la hauteur compte aussi : écrans larges et peu hauts */
h1{max-width:26ch;font-size:clamp(2.2rem,min(6.2vw,10vh),5.4rem);line-height:.92;letter-spacing:.02em}
h2{font-size:clamp(1.9rem,min(5.2vw,8.2vh),4.4rem);line-height:.95;letter-spacing:.01em}
/* l'esquisse : des titres à la main, en minuscules, un peu plus grands (la graisse de Caveat est plus fine) */
[data-style="esquisse"] :is(h1,h2){font-weight:700;text-transform:none;letter-spacing:0;line-height:1}
[data-style="esquisse"] h1{max-width:22ch;font-size:clamp(2.6rem,min(7vw,11.5vh),6.2rem)}
[data-style="esquisse"] h2{font-size:clamp(2.2rem,min(6vw,9.5vh),5.2rem)}
/* les titres restent dans la page pour la lecture ; c'est la toile qui les dessine (js/titles.js) */
.js [data-title]{color:transparent}
:lang(zh) h1,:lang(zh) h2{font-family:var(--display),"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;letter-spacing:.04em}
/* un bouton de scène : pas de bordure de navigateur, son cadre est tracé à la craie (js/outils.js : sketchBox) */
.cta{all:unset;box-sizing:border-box;cursor:pointer;padding:.95rem 1.6rem;font:600 clamp(.9rem,1.4vw,1.05rem)/1 var(--display);letter-spacing:.16em;text-transform:uppercase;transition:letter-spacing .3s,opacity .5s}
.cta:hover,.cta:focus-visible{letter-spacing:.22em}
.cta:focus-visible{outline:2px dashed rgba(var(--ink),.6);outline-offset:10px}
.js .cta{opacity:0}.js .cta.drawn{opacity:1}
/* l'accueil : le texte en haut (la scène des chats a la place en bas) ; deux boutons côte à côte */
/* --chat : la taille d'un chat à l'écran (comme size0 dans js/chats.js) ; il faut qu'un chat tienne debout au-dessus du titre
   et sur un bouton sans passer sous le texte */
[data-scene="salut"]{--chat:clamp(64px,min(19vw,19vh),165px);justify-content:flex-start;gap:calc(var(--chat) * .62);padding-top:calc(var(--sheet) + max(clamp(78px,12vh,140px),var(--chat) * 1.15))}
[data-scene="salut"] h1{font-size:clamp(2.6rem,min(6vw,10vh),5.6rem)}
.ctas{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(30px,4vw,64px)}
/* (20:04, Mathieu : les deux boutons de l'accueil, l'un à côté de l'autre) */
[data-scene="salut"] .ctas{gap:clamp(18px,1.8vw,26px)}
/* (29/09, 07:32, Mathieu : « remonte les boutons, moins grands ; le bouton Mode sérieux aussi grand que Entrer dans mon univers ») :
   deux colonnes de même largeur (celle du plus long), un peu plus petits */
[data-scene="salut"] .ctas{display:grid;grid-auto-flow:column;grid-auto-columns:1fr}
[data-scene="salut"] .cta{padding:.72rem 1.2rem;font-size:clamp(.78rem,1.05vw,.9rem);text-align:center}
/* « Restez jouer ici » : comme l'autre bouton, mais lumineux (le halo et les étoiles sont dessinés par js/scenes.js) :
   un reflet de lumière le traverse de temps en temps */
.cta-jeu{--m:0;position:relative;overflow:hidden;text-shadow:0 0 12px rgba(255,255,255,calc(.95 * (1 - var(--m))));color:color-mix(in srgb,rgb(var(--ink)) calc(100% - var(--m) * 100%),#EEF5FF);background:linear-gradient(#1C58A2,#1C58A2) center/calc(var(--m) * 100%) 100% no-repeat}
/* (au survol, il devient le bouton du mode sérieux : js/scenes.js, morphButton ; l'autre police une fois les lettres brouillées) */
.cta-jeu.serieux-on{font-family:"Space Grotesk","Barlow",system-ui,sans-serif;font-weight:600;letter-spacing:.08em}
.cta-jeu.serieux-on:hover,.cta-jeu.serieux-on:focus-visible{letter-spacing:.1em}
.cta-jeu::after{opacity:calc(1 - var(--m));content:"";position:absolute;inset:-20% auto -20% -40%;width:30%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.85),rgba(255,255,255,0));transform:skewX(-20deg);animation:reflet 3.2s ease-in-out infinite;pointer-events:none}
@keyframes reflet{0%,55%{left:-40%}85%,100%{left:120%}}
@media (prefers-reduced-motion:reduce){.cta-jeu::after{animation:none;opacity:0}}
/* on reste jouer : le titre et ce bouton s'en vont, le bouton d'entrée monte en haut de l'écran */
.jeu [data-scene="salut"] h1,.jeu #stay{display:none}
.jeu #enter{position:fixed;z-index:4;left:50%;top:calc(var(--sheet) + 14px + env(safe-area-inset-top,0px));translate:-50% 0;padding:.7rem 1.2rem;font-size:.78rem}
/* une phrase à la main, sous un titre */
.scene .note{margin:0;font:400 clamp(.95rem,1.5vw,1.2rem)/1.3 var(--hand);opacity:.75}
/* la scène d'essai : le titre en haut à gauche, l'objet à droite (js/scenes.js) */
[data-scene="essai"]{align-items:flex-start;text-align:left;justify-content:flex-start;padding-top:calc(var(--sheet) + 20vh)}
[data-scene="essai"] h2{max-width:9ch}
[data-scene="jeu"]{justify-content:flex-start;padding-top:calc(var(--sheet) + 16vh)}

/* ——— les phrases de la ligne du temps (CAPS), lettre à lettre ——— */
#caps{position:fixed;z-index:3;left:50%;bottom:calc(var(--sheet) + 104px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:min(42rem,calc(100vw - 2 * var(--gutter)));pointer-events:none;text-align:center}
.cap{position:absolute;left:0;right:0;bottom:0;margin:0;font:400 clamp(1.1rem,2vw,1.6rem)/1.3 var(--hand);transition:opacity .9s ease,filter .9s ease}
.cap .w{display:inline-block;white-space:nowrap}
.cap .ch{display:inline-block;opacity:0;filter:blur(6px);transform:translateY(.3em);transition:opacity .7s ease,filter .9s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
.cap.in .ch{opacity:1;filter:blur(0);transform:none}
.cap.out{opacity:0;filter:blur(6px)}

/* ——— la barre du film : lecture, rejouer, son ; les chapitres en bas (on y clique, on y glisse) ——— */
.film-ui{position:fixed;z-index:4;left:calc(var(--sheet) + clamp(14px,3vw,36px));right:calc(var(--sheet) + clamp(14px,3vw,36px));bottom:calc(var(--sheet) + 12px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:8px;pointer-events:none}
.film-ui > *{pointer-events:auto}
.ctrl{display:flex;justify-content:flex-end;gap:10px;align-self:flex-end}
.btn{all:unset;position:relative;cursor:pointer;display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 10px;font:500 .62rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;opacity:.85;transition:opacity .2s}
.btn:hover,.btn:focus-visible{opacity:1}
.btn:focus-visible{outline:2px solid rgb(var(--ink));outline-offset:3px}
.btn .ic{width:12px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.btn[aria-pressed="false"] .ic-on,.btn[aria-pressed="true"] .ic-off{display:none}
#chap{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:8px;touch-action:none;cursor:ew-resize;padding-top:6px}
#chap button{all:unset;cursor:ew-resize;display:flex;flex-direction:column;gap:7px;min-width:0}
#chap .lbl{font:500 .6rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;opacity:.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .4s}
#chap button.on .lbl,#chap button:hover .lbl{opacity:1}
#chap .bar{position:relative;height:2px;overflow:hidden;transition:height .2s}
#chap.drag .bar{height:4px}
#chap .bar::before{content:"";position:absolute;inset:0;background:rgb(var(--ink));opacity:.2}
#chap .bar i{position:absolute;inset:0;background:rgb(var(--ink));transform-origin:left;transform:scaleX(0)}
/* une station attend un geste : son segment respire */
#chap button.hold.on .bar i{animation:hold-pulse 1.6s ease-in-out infinite}
@keyframes hold-pulse{50%{opacity:.4}}
#chap button:focus-visible{outline:2px solid rgb(var(--ink));outline-offset:3px}

/* ——— l'accès réservé ——— */
#gate{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4rem;padding:0 var(--gutter);text-align:center;transition:opacity 1.1s ease,transform 1.2s cubic-bezier(.6,0,.2,1)}
.locked body{overflow:hidden}
.locked body>*:not(#gate):not(#stage):not(#obj):not(svg){visibility:hidden}
html:not(.locked) #gate:not(.open){display:none}
#gate.open{opacity:0;transform:scale(1.04);pointer-events:none}
.gate-kick{margin:0;font:600 clamp(1.6rem,3vw,2.2rem)/1 "Caveat","Segoe Print",cursive;opacity:0;transform:translateY(6px);transition:opacity .8s ease 1.6s,transform .8s ease 1.6s}
#gate.in .gate-kick{opacity:.95;transform:none}
.gate-form{display:flex;flex-direction:column;align-items:center;gap:.9rem}
.gate-field{position:relative;width:min(320px,80vw);height:76px}
.gate-box{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.gate-box path{fill:none;stroke:rgb(var(--ink));stroke-width:2.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
#gate.in .gate-box path:first-child{animation:logo-draw 1.4s cubic-bezier(.6,0,.2,1) 2s forwards}
.gate-box .gate-tick{stroke-width:4;opacity:0}
#gate.good .gate-box .gate-tick{opacity:1;animation:logo-draw .6s ease forwards}
#gate.good input{opacity:.6}
.gate-field input{all:unset;box-sizing:border-box;position:absolute;inset:0;width:100%;text-align:center;font:600 2rem/76px "Caveat","Segoe Print",cursive;letter-spacing:.3em;color:rgb(var(--ink));caret-color:rgb(var(--ink));opacity:0;transition:opacity .6s ease 3s}
#gate.in .gate-field input{opacity:1}
.gate-field input::selection{background:rgba(var(--ink),.2)}
.gate-field input::placeholder{color:rgba(var(--ink),.35);letter-spacing:.1em}
.gate-field input:focus-visible{outline:none}
#gate.bad .gate-field{animation:gate-shake .5s cubic-bezier(.36,.07,.19,.97)}
@keyframes gate-shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-8px)}40%,60%{transform:translateX(8px)}}
.gate-go{all:unset;cursor:pointer;padding:.6rem 1.2rem;font:500 .72rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;border-bottom:1.5px solid rgba(var(--ink),.7);opacity:0;transition:opacity .6s ease 3.2s,letter-spacing .3s}
#gate.in .gate-go{opacity:.9}
.gate-go:hover,.gate-go:focus-visible{letter-spacing:.28em;opacity:1}
.gate-msg{margin:0;min-height:1.4em;font:600 1.3rem/1 "Caveat","Segoe Print",cursive}
@media (prefers-reduced-motion:reduce){#gate *{animation-duration:.01s!important;transition:none!important}}
.gate-name{margin:0;font:400 clamp(2.6rem,7vw,4.4rem)/1 var(--hand);opacity:0;transition:opacity 1.2s ease .2s}
#gate.in .gate-name{opacity:1}
@keyframes logo-draw{to{stroke-dashoffset:0}}

/* l'arrivée depuis l'écran d'accès : le site apparaît en fondu, sur le même fond, quand tout est prêt */
.entering #obj,.entering #fil,.entering #titles,.entering .scenes,.entering .top,.entering .film-ui{opacity:0!important}
.fading-in #obj,.fading-in #fil,.fading-in #titles,.fading-in .scenes,.fading-in .top,.fading-in .film-ui{transition:opacity 1s ease!important}

/* masqué à l'écran, lu par les lecteurs d'écran et les moteurs de recherche */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ——— téléphones, et tout écran en hauteur (tablettes en portrait) : même logique que js/film.js (wide = largeur > hauteur) ——— */
@media (max-width:760px),(max-aspect-ratio:1/1){
  :root{--sheet:8px}
  .top{gap:12px;padding:20px 16px 12px;padding-top:calc(20px + env(safe-area-inset-top,0px))}
  .brand{font-size:1.1rem}
  .picks{gap:6px}
  .pick>button{height:26px;padding:0 8px}
  .pick ul{min-width:12rem}
  /* le thème : juste la miniature ; le panneau en pleine largeur : les styles en bande qui défile, l'aperçu, les couleurs */
  .tp-name{display:none}
  .tp-btn{padding-right:10px;height:36px}
  .tp-body{grid-template-columns:1fr;gap:12px}
  .tp-list{flex-direction:row;overflow-x:auto;gap:6px;padding-bottom:4px;scrollbar-width:none}
  .tp-list .tp-cap{display:none}
  .tp-list .tp-item{flex:none}
  .tp-item{flex-direction:column;align-items:flex-start;gap:4px;width:86px;padding:4px}
  .tp-item b{font-size:.74rem}
  .tpick{top:calc(14px + env(safe-area-inset-top,0px));left:0;right:0;margin:0 auto;width:max-content;transform:none}
  /* le panneau reste compact (540 px au plus), centré sous l'en-tête ; sur un téléphone, toute la largeur */
  .tp-panel{position:fixed;left:50%;right:auto;width:min(540px,calc(100vw - 24px));top:62px;transform:translate(-50%,-6px)}
  .tpick.open .tp-panel{transform:translate(-50%,0)}
  .scene{padding:calc(var(--sheet) + 84px) 20px calc(var(--sheet) + 130px)}
  h1{font-size:clamp(2rem,min(10.5vw,7.5vh),3.6rem)}
  [data-scene="salut"]{--chat:clamp(64px,min(20vw,19vh),165px);padding-top:calc(var(--sheet) + max(92px,var(--chat) * 1.2))}
  [data-scene="salut"] h1{font-size:clamp(2.2rem,11vw,3.4rem)}
  /* (la barre des événements à gauche : le titre et les boutons se poussent un peu) */
  [data-scene="salut"]{padding-left:58px;padding-right:12px}
  .ctas{flex-direction:column;gap:14px}
  [data-scene="salut"] .ctas{gap:16px;grid-auto-flow:row}
  .jeu #enter{top:calc(var(--sheet) + 60px + env(safe-area-inset-top,0px));font-size:.68rem;white-space:nowrap}
  [data-scene="essai"]{padding-top:calc(var(--sheet) + 96px)}
  [data-scene="jeu"]{padding-top:calc(var(--sheet) + 104px)}
  .ctrl{gap:2px}
  .btn .t{display:none}
  .btn{padding:0 9px}
  #chap .lbl{opacity:0}
  #chap button.on .lbl{opacity:1;overflow:visible}
  #caps{bottom:calc(var(--sheet) + 104px + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce){
  .cap,.cap .ch{transition:none!important}
  #chap button.hold.on .bar i{animation:none}
}

/* un seul thème pour l'instant (js/theme.js : LOCK) : le sélecteur est caché */
#theme-pick{display:none}

/* le tuto et les indices (js/accueil.js) : une bulle au trait, sa queue pointe vers ce dont elle parle */
.tuto{position:fixed;left:0;top:0;z-index:30;max-width:min(78vw,300px);padding:.55rem .85rem;background:var(--bp-hi);color:rgb(var(--ink));
  font:400 clamp(.95rem,1.6vw,1.1rem)/1.3 var(--hand);border:2px solid rgb(var(--ink));border-radius:14px 16px 13px 15px;pointer-events:none;
  box-shadow:3px 3px 0 rgba(var(--ink),.18);opacity:0;scale:.9;transition:opacity .3s,scale .3s cubic-bezier(.3,1.6,.5,1)}
.tuto.on{opacity:1;scale:1}
.tuto.cote::after{display:none}
.tuto::after{content:"";position:absolute;left:var(--queue,50%);bottom:-9px;width:14px;height:14px;margin-left:-7px;background:inherit;
  border-right:2px solid rgb(var(--ink));border-bottom:2px solid rgb(var(--ink));transform:rotate(45deg) skew(6deg,6deg)}

/* le menu des événements (js/menu.js) : au bord gauche, six grandes pastilles au trait (les gros événements), leur nom écrit à la main à côté au survol ;
   puis, un peu à l'écart, le carnet et les hauts faits (28/09, Mathieu : « revois l'apparence de la sidebar et du menu, je n'aime pas trop ») */
.evts{--b:clamp(38px,calc((100dvh - 230px) / 8 - 12px),54px);position:fixed;left:14px;top:84px;bottom:56px;z-index:25;display:flex;align-items:center;
  opacity:0;pointer-events:none;transition:opacity .4s}
.evts.vu{opacity:1;pointer-events:auto}
.evts button{font:inherit;color:rgb(var(--ink));background:var(--bp-hi);border:1.8px solid rgb(var(--ink));cursor:pointer;padding:0}
.evts svg{width:calc(var(--b) * .64);height:calc(var(--b) * .64);fill:none;stroke:rgb(var(--ink));stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.evts svg .p{fill:rgb(var(--ink));stroke:none}
.evts-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;max-height:100%}
.evts-list li{position:relative}
/* (une pastille : le cercle un peu irrégulier, et un second trait fin autour, comme repassé au stylo) */
.evts-list button{width:var(--b);height:var(--b);display:grid;place-items:center;border-radius:50% 46% 52% 48% / 48% 52% 47% 53%;
  box-shadow:0 0 0 3px var(--bp-hi),0 0 0 4.2px rgba(var(--ink),.3);
  transition:transform .2s cubic-bezier(.3,1.6,.5,1),box-shadow .2s;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.evts-list li:nth-child(odd) button{rotate:-4deg}.evts-list li:nth-child(even) button{rotate:3deg}
.evts-list button:active{transform:scale(.9)}
.evts-list button.pop{animation:evts-pop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes evts-pop{0%{transform:scale(.8)}60%{transform:scale(1.25) rotate(8deg)}100%{transform:none}}
/* le carnet et les hauts faits : plus petits, en pointillés, séparés des événements par un petit trait */
.evts-list li:has(.dex-btn){--b:clamp(32px,calc((100dvh - 230px) / 8 - 20px),42px);margin-left:calc((clamp(38px,calc((100dvh - 230px) / 8 - 12px),54px) - var(--b)) / 2)}
.evts-list li:not(:has(.dex-btn))+li:has(.dex-btn){margin-top:14px}
.evts-list li:not(:has(.dex-btn))+li:has(.dex-btn)::before{content:"";position:absolute;left:10%;right:10%;top:-15px;border-top:1.5px solid rgba(var(--ink),.35);border-radius:50%}
/* le nom, écrit à la main à côté, au survol (au doigt, il restait collé) */
.evts-nom{position:absolute;left:calc(100% + 12px);top:50%;translate:0 -50%;white-space:nowrap;padding:0;background:none;color:rgb(var(--ink));
  font:400 1rem/1.1 var(--hand);pointer-events:none;opacity:0;transition:opacity .2s,translate .2s;z-index:2;text-shadow:0 0 4px var(--bp-hi),0 0 8px var(--bp-hi)}
@media (hover:hover){.evts-list button:hover{transform:scale(1.1) rotate(-6deg);box-shadow:0 0 0 3px var(--bp-hi),0 0 0 4.2px rgba(var(--ink),.7)}
  .evts-list button:hover .evts-nom,.evts-list button:focus-visible .evts-nom{opacity:1;translate:4px -50%}}
@media (max-width:700px){.evts{--b:clamp(36px,calc((100dvh - 200px) / 8 - 10px),46px);left:8px;top:74px;bottom:48px}.evts-list{gap:10px}}
/* l'annonce d'un événement : son nom, en grand, qui surgit puis s'efface */
.evts-annonce{position:fixed;left:50%;top:36%;z-index:24;translate:-50% -50%;pointer-events:none;white-space:nowrap;max-width:94vw;
  font:400 clamp(2rem,7vw,4.6rem)/1 var(--hand);color:rgb(var(--ink));text-shadow:3px 3px 0 rgba(var(--ink),.15);opacity:0}
.evts-annonce.go{animation:evts-annonce 2.6s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes evts-annonce{0%{opacity:0;transform:scale(.3) rotate(-12deg)}18%{opacity:1;transform:scale(1.15) rotate(3deg)}30%{transform:scale(1) rotate(-2deg)}75%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.1) translateY(-30px)}}
@media (prefers-reduced-motion:reduce){.evts-annonce.go{animation:none;opacity:0}}
@media (prefers-reduced-motion:reduce){.evts *{transition:none!important;animation:none!important}}

/* ——— le carnet de découvertes (js/decouvertes.js) : le bouton en bas de la barre, l'annonce, le carnet ouvert ——— */
.dex-btn{position:relative;border-style:dashed!important}
.dex-n{position:absolute;right:-12px;bottom:-7px;padding:0 4px;border-radius:7px;background:var(--bp-hi);color:rgb(var(--ink));border:1.2px solid rgb(var(--ink));font:600 .56rem/1.35 var(--mono);font-style:normal;white-space:nowrap;pointer-events:none}
.dex-toast{position:fixed;left:calc(var(--b,40px) + 26px);bottom:calc(92px + env(safe-area-inset-bottom,0px));z-index:30;display:flex;align-items:baseline;gap:.5rem;max-width:min(80vw,380px);padding:.45rem .8rem;
  background:var(--bp-hi);color:rgb(var(--ink));border:2px solid rgb(var(--ink));border-radius:14px 10px 16px 12px;box-shadow:3px 3px 0 rgba(var(--ink),.18);
  font:400 1.05rem/1.2 var(--hand);opacity:0;pointer-events:none;transform:translateY(20px)}
.dex-toast b{font-weight:700;white-space:nowrap}.dex-toast i{font:500 .7rem/1 var(--mono);font-style:normal;opacity:.7;white-space:nowrap}
.dex-toast.go{animation:dex-toast .45s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes dex-toast{0%{opacity:0;transform:translateY(20px) rotate(-3deg)}40%{opacity:1}100%{opacity:1;transform:none}}
/* (vague 10) le mot s'écrit à la main, de gauche à droite ; à la fin, la carte se plie (elle s'écrase en un point) et devient un avion de papier */
.dex-toast.go span{animation:dex-ecrit .8s steps(18) .25s both}
@keyframes dex-ecrit{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.dex-toast.plie{animation:dex-plie .26s cubic-bezier(.5,0,.8,.3) forwards}
@keyframes dex-plie{0%{opacity:1;transform:none}45%{opacity:1;transform:scale(1,.12) rotate(-4deg)}100%{opacity:1;transform:scale(.04,.12) rotate(-12deg)}}
.dex-avion{position:fixed;left:0;top:0;z-index:35;width:30px;height:22px;margin:-11px 0 0 -15px;pointer-events:none}
.dex-avion svg{width:100%;height:100%;fill:var(--bp-hi);stroke:rgb(var(--ink));stroke-width:2.4;stroke-linejoin:round}
.dex{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:16px;background:rgba(var(--ink),.25)}
.dex[hidden]{display:none}
.dex-page{position:relative;width:min(760px,100%);max-height:min(86dvh,900px);overflow:auto;overscroll-behavior:contain;padding:18px 20px 14px;
  background:var(--bp-hi);color:rgb(var(--ink));border:2px solid rgb(var(--ink));border-radius:18px 14px 20px 16px;box-shadow:5px 5px 0 rgba(var(--ink),.2)}
.dex-page header{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:4px 12px;margin-bottom:6px}
.dex-fam-h{margin:-2px 0 8px;font:400 .95rem/1.3 var(--hand);opacity:.8}
.dex-page h2{margin:0;font:400 clamp(1.5rem,4vw,2.1rem)/1.1 var(--hand)}
.dex-page header p{margin:0;font:500 .8rem/1 var(--mono);margin-right:40px}
.dex-barre{grid-column:1/-1;height:8px;border:1.5px solid rgb(var(--ink));border-radius:6px;overflow:hidden}
.dex-barre span{display:block;height:100%;background:rgb(var(--ink))}
.dex-x{position:absolute;top:10px;right:12px;width:34px;height:34px;border:2px solid rgb(var(--ink));border-radius:50%;background:none;color:inherit;font:400 1.4rem/1 var(--text);cursor:pointer}
.dex-page h3{margin:14px 0 6px;font:400 1.25rem/1.1 var(--hand)}
.dex-page h3 small{font:500 .7rem/1 var(--mono);opacity:.65}
.dex-page ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.dex-page li{display:flex;flex-direction:column;gap:2px;padding:6px 9px;border:1.5px dashed rgba(var(--ink),.35);border-radius:10px 8px 11px 9px;font:400 .82rem/1.3 var(--text)}
.dex-page li b{font:400 1.05rem/1.15 var(--hand)}
.dex-page li span{opacity:.6}
.dex-page li.ok{border-style:solid;border-color:rgb(var(--ink));background:rgba(var(--ink),.05)}
.dex-page li.ok span{opacity:.8}
/* (vague 4 de l'audit : « le carnet est une liste plate ») : il s'ouvre en basculant
   vers nous ; chaque découverte se pose l'une après l'autre, et porte un tampon d'empreinte penché ; celles qui manquent sont griffonnées */
.dex-page{transform-origin:50% 100%;animation:dex-ouvre .55s cubic-bezier(.2,1.3,.4,1) both}
.dex{perspective:1400px}
/* (vague 223 de l'audit, design) : plus de fondu : la page part de la tranche (on ne la voit pas encore) et bascule vers nous ; chaque fiche se pose en grandissant depuis rien */
@keyframes dex-ouvre{0%{transform:rotateX(-90deg) scale(.9)}100%{transform:none}}
.dex-page li{position:relative;rotate:calc(var(--r) * .15);animation:dex-pose .4s cubic-bezier(.2,1.6,.4,1) both;animation-delay:calc(.25s + var(--i) * 25ms)}
@keyframes dex-pose{0%{transform:translateY(-14px) scale(0)}100%{transform:none}}
.dex-page li.ok::after{content:"";position:absolute;right:6px;top:6px;width:26px;height:26px;rotate:var(--r);opacity:.8;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23262830' stroke-width='2'%3E%3Ccircle cx='16' cy='16' r='14.5' stroke-dasharray='3 2'/%3E%3Cellipse cx='16' cy='20' rx='5.5' ry='4.5'/%3E%3Ccircle cx='9.5' cy='13' r='2.2'/%3E%3Ccircle cx='13.5' cy='9.5' r='2.2'/%3E%3Ccircle cx='18.5' cy='9.5' r='2.2'/%3E%3Ccircle cx='22.5' cy='13' r='2.2'/%3E%3C/svg%3E")}
.dex-page li.ok{padding-right:36px}
.dex-page li:not(.ok) b{position:relative;opacity:.55}
.dex-page li:not(.ok) b::after{content:"";position:absolute;left:-3px;right:-3px;top:50%;height:6px;margin-top:-3px;opacity:.6;
  background:no-repeat center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 6' preserveAspectRatio='none'%3E%3Cpath d='M0 3 L5 1 L10 5 L15 1 L20 5 L25 1 L30 5 L35 1 L40 3' fill='none' stroke='%23262830' stroke-width='1.2'/%3E%3C/svg%3E")}
/* (vague 33) les polaroïds des chats : la photo prise sur le vif, penchée, un bout de scotch, la date à la main ; les chats pas encore croisés : leur silhouette en pointillés */
.dex-page li.ph{padding-top:8px}
.dex-page li.ph figure{position:relative;margin:0 auto 6px;width:min(100%,128px);aspect-ratio:1/1.12;padding:6px 6px 0;background:var(--bp-hi);border:1.5px solid rgb(var(--ink));border-radius:3px;
  rotate:calc(var(--r) * .45);box-shadow:2px 3px 0 rgba(var(--ink),.18);transition:rotate .35s cubic-bezier(.3,1.6,.5,1),scale .35s cubic-bezier(.3,1.6,.5,1)}
.dex-page li.ph figure::before{content:"";position:absolute;left:50%;top:-7px;width:38px;height:12px;translate:-50% 0;rotate:calc(var(--r) * -.6);background:rgba(var(--ink),.12);border:1px dashed rgba(var(--ink),.45)}
.dex-page li.ph img{display:block;width:100%;aspect-ratio:1;border:1px solid rgba(var(--ink),.35);background:rgba(var(--ink),.03)}
.dex-page li.ph figcaption{font:400 .9rem/1.5 var(--hand);text-align:center;white-space:nowrap;overflow:hidden}
.dex-page li.ph:hover figure{rotate:0deg;scale:1.08}
.dex-page li.ph .dex-ombre{display:grid;place-items:center;padding:10px;background:none;border-style:dashed;border-color:rgba(var(--ink),.4);box-shadow:none}
.dex-ombre svg{width:100%;overflow:hidden;fill:none;stroke:rgba(var(--ink),.45);stroke-width:3;stroke-dasharray:7 6;stroke-linecap:round;stroke-linejoin:round}
.dex-ombre text{font:400 44px var(--hand);fill:rgba(var(--ink),.5);stroke:none;text-anchor:middle}
.dex-page li.ok.ph{padding-right:9px;padding-bottom:34px}
/* (vague 223) : le tampon d'empreinte se posait sur la fin de la description ; il a maintenant sa place sous le texte */
/* (vague 77) un vrai polaroïd dans la main : il bascule en 3D sous le pointeur, un reflet glisse sur sa surface ; au clic, on le secoue et la photo se révèle */
.dex-page li.ph figure{transform:perspective(520px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));transform-style:preserve-3d}
.dex-page li.ph figure::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:3px;opacity:var(--go,0);transition:opacity .3s;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,30%),rgba(255,255,255,.7),rgba(255,255,255,0) 55%),linear-gradient(115deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.35) 50%,rgba(255,255,255,0) 65%) no-repeat var(--gx,50%) 0/200% 100%}
.dex-page li.ph figure.secoue{animation:dex-secoue .7s cubic-bezier(.3,1.5,.5,1)}
.dex-page li.ph figure.secoue img{animation:dex-revele 1.2s ease-out}
@keyframes dex-secoue{0%,100%{translate:0 0}15%{translate:-7px -3px;rotate:-6deg}35%{translate:6px 2px;rotate:5deg}55%{translate:-4px -1px;rotate:-3deg}75%{translate:2px 0;rotate:1deg}}
@keyframes dex-revele{0%{filter:brightness(1.9) contrast(.4) sepia(.6)}100%{filter:none}}
@media (prefers-reduced-motion:reduce){.dex-page li.ph figure{transform:none}.dex-page li.ph figure.secoue,.dex-page li.ph figure.secoue img{animation:none}}
.dex-page li.ok.ph::after{top:auto;bottom:6px}
.dex-toast-ph{width:46px;height:46px;align-self:center;margin:-.2rem 0;padding:3px 3px 8px;background:var(--bp-hi);border:1.5px solid rgb(var(--ink));rotate:-6deg}
/* le viseur dans la pièce : quatre coins qui se referment sur le chat, « clic », puis se replient en tournant jusqu'à un point */
.dex-vise{position:fixed;z-index:24;pointer-events:none;color:rgb(var(--ink));animation:dex-vise 1.5s cubic-bezier(.2,1.2,.4,1) forwards}
.dex-vise svg{width:100%;height:100%;overflow:visible;fill:none;stroke:currentColor;stroke-width:3.5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.dex-vise svg path{vector-effect:non-scaling-stroke}
.dex-vise b{position:absolute;left:100%;top:-6px;font:400 1.5rem/1 var(--hand);white-space:nowrap;rotate:-8deg;animation:dex-clic 1.5s both}
@keyframes dex-vise{0%{transform:scale(1.9) rotate(-8deg)}30%{transform:scale(1) rotate(0)}55%{transform:scale(.94)}62%,78%{transform:scale(1)}100%{transform:scale(0) rotate(90deg)}}
@keyframes dex-clic{0%,45%{scale:0}55%{scale:1.3}65%,85%{scale:1}100%{scale:0}}
@media (prefers-reduced-motion:reduce){.dex-page,.dex-page li{animation:none}}
.dex-page footer{margin-top:14px;text-align:right}
.dex-chat{position:fixed;left:0;top:0;width:150px;height:80px;pointer-events:none;z-index:2;color:rgb(var(--ink))}
.dex-folio{position:fixed;left:0;top:0;width:132px;height:96px;pointer-events:none;z-index:2;animation:dex-pose .5s cubic-bezier(.2,1.6,.4,1) .5s both}
.dex-chat svg{width:100%;height:100%;overflow:visible;fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.dex-chat .dc-tete>path:first-child{fill:var(--bp-hi,#e8e8e4)}
.dex-chat .dc-in,.dex-chat .dc-nez{stroke-width:2.2}
.dex-chat .dc-yeux ellipse{fill:currentColor;stroke:none;transform-box:fill-box;transform-origin:center;animation:dc-cligne 4.3s infinite}
.dex-chat .dc-ref{fill:var(--bp-hi,#fff);stroke:none}
.dex-chat .dc-patte{fill:var(--bp-hi,#e8e8e4)}
.dex-chat .dc-tete{transform-origin:60px 64px;transition:rotate .35s cubic-bezier(.3,1.6,.5,1),translate .35s cubic-bezier(.3,1.6,.5,1)}
.dex-chat[data-mode=ok] .dc-tete{translate:0 -6px}
.dex-chat[data-mode=q] .dc-tete{rotate:-14deg}
.dex-chat{animation:dc-monte .6s cubic-bezier(.2,1.5,.4,1) .35s both}
@keyframes dc-monte{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(-20% -20% 0 -20%)}}
@keyframes dc-cligne{0%,94%,100%{scale:1 1}97%{scale:1 .1}}
@media (prefers-reduced-motion:reduce){.dex-chat,.dex-chat .dc-yeux ellipse{animation:none}}
.dex-raz{background:none;border:0;color:inherit;opacity:.55;font:400 .75rem/1 var(--mono);text-decoration:underline;cursor:pointer}
@keyframes dex-fade{0%,100%{opacity:0}12%,80%{opacity:1}}
/* les hauts faits (js/hautsfaits.js) : la grande animation, la vitrine */
.hf-show{position:fixed;top:calc(84px + env(safe-area-inset-top,0px));right:14px;z-index:35;display:flex;align-items:center;gap:10px;max-width:min(340px,calc(100vw - 28px));
  padding:8px 16px 8px 8px;color:rgb(var(--ink));background:var(--bp-hi);border:2.5px solid rgb(var(--ink));border-radius:18px 14px 20px 16px;
  box-shadow:4px 4px 0 rgba(var(--ink),.22);cursor:pointer;transform-origin:100% 0}
.hf-show[hidden]{display:none}
.hf-rayons{position:absolute;left:46px;top:50%;width:170px;aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;z-index:-1;opacity:.8;scale:0;
  background:repeating-conic-gradient(rgba(var(--ink),.22) 0 1.5deg,transparent 1.5deg 15deg);-webkit-mask:radial-gradient(circle,#000 25%,transparent 70%);mask:radial-gradient(circle,#000 25%,transparent 70%)}
.hf-show .hf-badge{flex:none}
.hf-txt{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
.hf-sur{margin:0;font:600 .62rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;opacity:.7}
.hf-show h2{margin:0;font:400 1.35rem/1.05 var(--hand);text-wrap:balance}
/* (vague 222) : la carte reste transparente, mais ses mots gardent un halo de papier : lisibles même posés sur un chat ou un meuble (au téléphone, elle est au ras du sol) */
.hf-txt>*{text-shadow:0 0 2px var(--bp-hi),0 0 4px var(--bp-hi),0 0 8px var(--bp-hi)}
.hf-rang{margin:0;padding:1px 8px;border-radius:8px;background:none;border:1.5px solid currentColor;color:inherit;font:600 .6rem/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.hf-show.go{animation:hf-carte .6s cubic-bezier(.2,1.5,.4,1) both}
.hf-show.go .hf-rayons{animation:hf-rayons 5s linear forwards}
.hf-show.go .hf-badge{animation:hf-badge 1s cubic-bezier(.2,1.7,.4,1) .1s both}
.hf-show.go .hf-txt>*{animation:hf-mot .4s ease-out both}
.hf-show.go .hf-sur{animation-delay:.25s}.hf-show.go h2{animation-delay:.4s}.hf-show.go .hf-rang{animation-delay:.55s}
.hf-show.part{animation:hf-part .38s ease-in forwards}
/* (vague 315) : le contour s'écrit au stylo (js : trait()), le rang tombe comme un tampon et la carte encaisse */
.hf-show.trace{border-color:transparent!important}
.hf-trait{position:absolute;left:-5.5px;top:-5.5px;width:calc(100% + 11px);height:calc(100% + 11px);overflow:visible;pointer-events:none}
.hf-trait path{fill:none;stroke:rgb(var(--ink));stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:0}
.hf-show.go .hf-trait path{animation:hf-ecrit .75s cubic-bezier(.4,0,.3,1) .15s both}
@keyframes hf-ecrit{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.hf-show .hf-rang{rotate:-7deg;color:rgb(var(--c));border:3px double rgb(var(--c));font-weight:700}
.hf-show.go .hf-rang{animation:hf-tampon .3s cubic-bezier(.55,0,.9,.4) .95s both}
@keyframes hf-tampon{0%{visibility:hidden;transform:translate(8px,-30px) scale(2.3) rotate(-14deg)}1%{visibility:visible}82%{transform:scale(.9)}100%{transform:none}}
.hf-show.go{animation:hf-carte .6s cubic-bezier(.2,1.5,.4,1) both,hf-choc .34s ease-out 1.25s both}
.hf-show.go.part{animation:hf-part .38s ease-in forwards}
@keyframes hf-choc{0%{translate:0 0}25%{translate:-2px 4px}60%{translate:1px -1px}100%{translate:0 0}}
/* (vague 222 de l'audit, design) : plus aucun fondu : la carte jaillit (de rien, en tournant), les rayons poussent puis rentrent, les mots s'écrivent de gauche à droite */
@keyframes hf-carte{0%{transform:translate(30px,-20px) scale(0) rotate(12deg)}60%{transform:scale(1.05) rotate(-1deg)}100%{transform:none}}
@keyframes hf-part{to{transform:translateX(calc(100% + 40px)) rotate(7deg)}}
.hf-etin{position:fixed;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;z-index:35;pointer-events:none;border:1.6px solid rgb(var(--ink));border-radius:50%;animation:hf-etin .7s ease-out forwards}
@keyframes hf-etin{to{transform:translateY(14px) scale(0)}}
.hf-avale{animation:hf-avale .65s cubic-bezier(.2,1.8,.4,1)}
.hf-avale .dex-n{animation:hf-n .65s cubic-bezier(.2,1.8,.4,1)}
@keyframes hf-avale{0%{scale:1}25%{scale:1.35 .8}55%{scale:.9 1.15}100%{scale:1}}
@keyframes hf-n{0%{scale:1}35%{scale:1.7;rotate:-12deg}100%{scale:1;rotate:0deg}}
@keyframes hf-rayons{0%{scale:0;rotate:0deg}12%{scale:1}75%{scale:1}100%{scale:0;rotate:120deg}}
@keyframes hf-badge{0%{scale:0;rotate:-540deg}70%{scale:1.2;rotate:10deg}100%{scale:1;rotate:0deg}}
@keyframes hf-mot{0%{clip-path:inset(-30% 100% -30% -4px)}100%{clip-path:inset(-30% -4px -30% -4px)}}
/* (vague 95 de l'audit) : dans l'espace, au bureau, la planète des chats est en haut à droite : le haut fait s'annonce en haut à gauche, jamais sur elle */
@media (min-width:601px){.espace .hf-show{right:auto;left:14px;transform-origin:0 0}}
/* (vague 115, l'audit : au téléphone, la carte « Découverte ! » et celle du haut fait tombaient l'une sur l'autre en bas de l'écran) : quand un haut fait est là, la petite carte du carnet monte d'un cran au-dessus de lui, en glissant */
@media (max-width:600px){.dex-toast{transition:bottom .4s cubic-bezier(.3,1.5,.5,1)}body:has(.hf-show:not([hidden])) .dex-toast{bottom:calc(92px + 74px + env(safe-area-inset-bottom,0px))}}
/* (vague 177 de l'audit : « la horde ») : au téléphone, le carton « Découverte ! » ne se pose plus sur le plancher, au milieu de la horde qu'il annonce : il monte sur le mur vide, entre les boutons et la fenêtre */
@media (max-width:600px) and (orientation:portrait){.dex-toast,body:has(.hf-show:not([hidden])) .dex-toast{top:44dvh;bottom:auto}}
@media (max-width:600px){.hf-show{top:auto;bottom:calc(92px + env(safe-area-inset-bottom,0px));right:10px;max-width:min(270px,calc(100vw - 80px));padding:5px 12px 5px 5px;gap:6px;transform-origin:100% 100%}.hf-show .hf-badge{width:50px;height:auto}.hf-rayons{left:30px;width:120px}.hf-show h2{font-size:1.05rem}.hf-sur{font-size:.55rem}}
.hf-btn svg{fill:none}
.hf-grille{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))!important}
.hf-grille li{align-items:center;text-align:center;padding:10px 8px!important}
.hf-grille li .hf-badge{margin-bottom:2px}
.hf-grille li i{font:500 .62rem/1 var(--mono);font-style:normal;opacity:.55}
.hf-grille li.ok{background:none!important;border-color:rgb(var(--ink))!important}
@media (prefers-reduced-motion:reduce){.hf-show.go,.hf-show.go .hf-rayons,.hf-show.go .hf-badge,.hf-show.part,.hf-show.go .hf-trait path,.hf-show.go .hf-rang{animation-duration:.01s;animation-fill-mode:both}}
@media (prefers-reduced-motion:reduce){.dex-toast.go{animation:dex-fade 2.3s linear forwards;transform:none}.dex-toast.go span,.dex-toast.plie{animation:none}}

/* ——— le trou noir, puis l'espace (l'écran 2, js/trounoir.js) ——— */
/* (le thème qui change pendant le trou noir : les couleurs glissent, js/trounoir.js glisse()) */
.glisse,.glisse *{transition:color 1s,background-color 1s,border-color 1s,fill 1s,stroke 1s,box-shadow 1s!important}
#trou{position:fixed;inset:0;z-index:1;width:100%;height:100%;pointer-events:none;display:none}
.trou #trou,.espace #trou,.sortie #trou{display:block}
/* (vague 225 de l'audit, design : la bulle du tuto restait figée à l'écran pendant le trou noir, l'espace et la sortie, au téléphone) */
.trou .tuto,.espace .tuto,.sortie .tuto{visibility:hidden}
.sortie .evts,.sortie .sheet{pointer-events:none!important}
/* pendant l'aspiration, la page est une photo découpée en anneaux (sur #trou) : les vrais calques se cachent */
.trou #stage,.trou #fil,.trou #titles,.trou .scenes,.trou .tuto,.trou #caps{opacity:0!important}
.trou .evts,.trou .sheet,.trou .dex-toast,.trou .evts-annonce{pointer-events:none!important}
/* dans l'espace : ni la pièce, ni le menu des évènements, ni le cadre de la feuille, ni les bulles d'aide */
.espace #piece,.espace #fil,.espace .evts,.espace .evts-annonce,.espace .tuto,.espace .dex-toast,.espace .sheet,.espace #caps{opacity:0!important;pointer-events:none!important;visibility:hidden}

/* ——— (29/09, 07:32, Mathieu : « les boutons d'action : transparents, avec des couleurs au survol ; pareil pour les hauts faits, leurs fenêtres
   et les autres éléments : ils ne sont pas dans le style — transparent, trait épais, grille ») ———
   les pastilles, les bulles, les annonces : transparentes (la grille passe dessous), trait épais ; la couleur n'arrive qu'au survol.
   Les fenêtres (carnet, hauts faits, listes) : une feuille quadrillée comme le plan, pour que le texte reste lisible par-dessus les chats. */
:root{--quadrille:linear-gradient(rgba(var(--ink),.09) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,rgba(var(--ink),.09) 1px,transparent 1px) 0 0/24px 24px,var(--bp-hi);
  --halo:0 0 3px var(--bp-hi),0 0 6px var(--bp-hi),0 0 10px var(--bp-hi)}
.evts button{background:transparent;border-width:2.6px;transition:transform .2s cubic-bezier(.3,1.6,.5,1),background-color .25s,box-shadow .2s}
.evts-list button{box-shadow:none}
.evts-list li:nth-child(6n+1){--c:#F2A7B8}.evts-list li:nth-child(6n+2){--c:#8EC5F0}.evts-list li:nth-child(6n+3){--c:#F5D06B}
.evts-list li:nth-child(6n+4){--c:#9AD9A8}.evts-list li:nth-child(6n+5){--c:#C3A6EE}.evts-list li:nth-child(6n){--c:#F6B27A}
@media (hover:hover){.evts-list button:hover{background:color-mix(in srgb,var(--c) 70%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 45%,transparent)}}
.evts-list button:focus-visible,.evts-list button:active{background:color-mix(in srgb,var(--c) 70%,transparent)}
.dex-n{background:transparent;border-width:1.8px;text-shadow:var(--halo)}
.tuto,.dex-toast,.hf-show{background:transparent;border-width:2.6px;box-shadow:none;text-shadow:var(--halo)}
/* (vague 116, l'audit : pendant la horde, le nuage de poussière passait sous les cartes transparentes et mangeait leurs mots) : chaque lettre a un liseré de papier plein,
   la carte reste transparente, la grille et la scène se voient toujours autour des mots */
.dex-toast b,.dex-toast span,.dex-toast i,.hf-show h2,.hf-sur,.hf-rang{paint-order:stroke fill;-webkit-text-stroke:3.5px var(--bp-hi)}
.tuto::after{background:transparent;border-right-width:2.6px;border-bottom-width:2.6px}
.grab-hint{background:transparent;border:2px solid rgb(var(--ink));text-shadow:var(--halo)}
.dex{background:rgba(var(--ink),.12);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.dex-page{background:var(--quadrille);border-width:3px;box-shadow:none}
.dex-x{border-width:2.6px;transition:background-color .2s}.dex-x:hover{background:color-mix(in srgb,#F2A7B8 60%,transparent)}
.dex-page li{border-width:2px;transition:background-color .2s}
.dex-page li.ok{background:transparent;border-width:2.4px}
@media (hover:hover){.dex-page li.ok:hover{background:color-mix(in srgb,#F5D06B 45%,transparent)}}
.hf-rang{border-width:2px}
.pick ul{background:var(--quadrille);border:2.5px solid rgb(var(--ink));box-shadow:none}
.pick li button:hover,.pick li button:focus-visible{background:color-mix(in srgb,#8EC5F0 45%,transparent)}
/* le lien vers le CV en texte (index.html) : caché, il apparaît en haut à gauche quand on y arrive au clavier */
.lien-texte:focus{position:fixed;left:12px;top:12px;width:auto;height:auto;clip:auto;z-index:10000;padding:10px 14px;background:#fff;color:#111;border:3px solid #111;border-radius:10px;font:600 15px/1.2 Barlow,sans-serif}

/* (vague 99) l'aspirateur a avalé le curseur (js/chats.js, CUR) : la flèche dessinée le remplace un instant */
html.sans-curseur,html.sans-curseur *{cursor:none!important}
/* (vague 100) la frise arc-en-ciel laissée par le petit Nyan Cat sous la barre des chapitres : six bandes d'un pixel, pour toute la visite */
#chap{position:relative}
#chap .frise-arc{position:absolute;height:6px;width:0;pointer-events:none;background:linear-gradient(rgb(231,76,60) 0 16.6%,rgb(243,156,18) 0 33.3%,rgb(241,196,15) 0 50%,rgb(46,204,113) 0 66.6%,rgb(52,152,219) 0 83.3%,rgb(155,89,182) 0);opacity:.85}
/* (vague 101) la vitrine des hauts faits : des médailles qui pendent à leur clou par un ruban, se balancent, se retournent */
.hf-med{position:relative;display:block;padding-top:14px;perspective:600px}
.hf-clou{position:absolute;left:50%;top:0;width:8px;height:8px;margin-left:-4px;border-radius:50%;border:2px solid rgb(var(--ink));background:var(--bp-hi,#eeeeea);z-index:2}
.hf-pend{position:relative;display:block;transform-origin:50% 0;transform-style:preserve-3d;will-change:transform}
.hf-ruban{display:block;width:34px;height:26px;margin:-6px auto -8px;fill:var(--c);stroke:rgb(var(--ink));stroke-width:2;stroke-linejoin:round;position:relative;z-index:1}
.hf-face{display:block}
.hf-dos{visibility:hidden}
.hf-dos{position:absolute;left:50%;top:16px;width:74px;height:74px;margin-left:-37px;border-radius:50%;border:3px solid rgb(var(--ink));background:var(--bp-hi,#eeeeea);box-shadow:inset 0 0 0 5px var(--c);transform:rotateY(180deg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;text-align:center}
.hf-dos b{font:400 1.25rem/1 var(--hand)!important}
.hf-dos small{font:500 .5rem/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;opacity:.75}
.hf-grille li.ok{cursor:pointer}
.hf-grille li.ok:focus-visible{outline:2px solid rgb(var(--ink));outline-offset:2px}
/* (vague 101) le carnet : le tampon « nouveau ! » sur ce qu'on a découvert depuis la dernière ouverture */
.dex-tampon{position:absolute;right:-6px;bottom:-8px;z-index:3;display:flex;align-items:center;gap:3px;padding:3px 7px 3px 5px;border:2.4px solid rgb(192,57,43);border-radius:6px 4px 7px 5px;color:rgb(192,57,43);background:transparent;rotate:var(--tr,-8deg);pointer-events:none;mix-blend-mode:multiply}
.dex-tampon svg{width:17px;height:17px;fill:rgb(192,57,43)}
.dex-tampon span{font:400 .95rem/1 var(--hand);white-space:nowrap}
.dex-tampon.pan{animation:dex-tampon .42s cubic-bezier(.5,0,.6,1.4) both}
@keyframes dex-tampon{0%{scale:3.2;translate:40px -70px;filter:blur(1.5px)}55%{scale:.92;translate:0 0;filter:none}75%{scale:1.05}100%{scale:1}}
.dex-encre{position:absolute;left:50%;top:50%;width:var(--gs);height:var(--gs);border-radius:50%;background:rgb(192,57,43);translate:var(--gx) var(--gy);animation:dex-encre .3s ease-out both}
@keyframes dex-encre{from{translate:0 0;scale:.2}to{translate:var(--gx) var(--gy);scale:1}}
.dex-page li.ok:has(.dex-tampon){overflow:visible}