/* polices hébergées avec le site (rien n'est demandé à Google quand on visite) ; licence libre, voir polices/LICENCES.txt */
@font-face{font-family:'Antonio';src:url('/assets/polices/antonio.woff2') format('woff2');font-weight:100 700;font-display:swap}
@font-face{font-family:'Sofia Sans Semi Condensed';src:url('/assets/polices/sofia-sans-semi-condensed.woff2') format('woff2');font-weight:1 1000;font-display:swap}
@font-face{font-family:'Jost';src:url('/assets/polices/jost.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Permanent Marker';src:url('/assets/polices/permanent-marker.woff2') format('woff2');font-weight:400;font-display:block}   /* l'écriture au feutre du scotch de l'interrupteur */

/* Concept : des bandes de pellicule posées sur une table dans le noir ; le curseur est un projecteur.
   Derrière, la composition du site actuel d'Adam (rôles empilés à gauche du nom, bouton central),
   en plus fin : capitales hautes et étroites, graisses légères, beaucoup d'air. */
:root{
  color-scheme: dark;
  --night:#00001b;      /* fond du site actuel */
  --navy-2:#253974;
  --pale:#d6e1ff;       /* texte du site actuel */
  --pale-dim:rgba(214,225,255,.72);
  --pale-faint:rgba(214,225,255,.34);
  --lamp:#fff1dc;       /* lumière du projecteur */
  --ink:rgba(236,238,244,.93);  /* texte courant : presque blanc, peu bleuté (demande d'Adam : plus lisible hors de la lampe) */
  --ink-dim:rgba(236,238,244,.8);
  --display:'Antonio','Bebas Neue','Arial Narrow',sans-serif;
  --text:'Sofia Sans Semi Condensed','Arial Narrow','Segoe UI',system-ui,sans-serif;   /* étroite comme Antonio, mais faite pour lire */
  --ease:cubic-bezier(.2,.7,.1,1);
}
html,body{height:100%}
body{margin:0;background:var(--night);color:var(--pale);font-family:var(--text);overflow-x:hidden;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
.vh{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html,body,button{cursor:var(--cur,auto)}
body.intro{overflow:hidden}
button{font:inherit;color:inherit}

/* ---------- couche intro ---------- */
#gl,#fx{position:fixed;inset:0;width:100%;height:100%;display:block;transition:opacity 1.4s ease}
#gl{z-index:20;touch-action:none}
#fx{z-index:21;pointer-events:none}
body:not(.intro) #gl,body:not(.intro) #fx{display:none}

/* ---------- barre du haut ---------- */
.bar{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:26px;
  padding-block:calc(22px + env(safe-area-inset-top,0px)) 22px;
  padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.nav{display:flex;align-items:center;gap:34px}
.nav .navlink{font-size:1.45rem;color:var(--pale)}   /* plus gros et plus visibles (demandes d'Adam, 27/10 puis 03/11/2026) */
/* le nom, en petit, en haut à gauche des pages (sur l'accueil il est déjà en grand) : retour à l'accueil */
.mark{background:none;border:0;padding:6px 0;font-family:var(--display);font-weight:200;font-size:1.5rem;letter-spacing:.24em;text-transform:uppercase;color:var(--pale);text-decoration:none;opacity:0;pointer-events:none;transition:opacity .6s}
.site.sub .mark{opacity:1;pointer-events:auto}
.menu-btn{display:none}
.navlink{position:relative;background:none;border:0;padding:6px 0;font-family:var(--display);font-weight:300;font-size:1.05rem;letter-spacing:.16em;text-transform:uppercase;color:var(--pale-dim);text-decoration:none;transition:color .25s}
.navlink::after{content:"";position:absolute;left:0;right:.16em;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.navlink:hover,.navlink[aria-current="page"]{color:var(--pale)}
.navlink:hover::after,.navlink[aria-current="page"]::after{transform:scaleX(1)}
.sound{display:grid;place-items:center;width:38px;height:38px;background:none;border:0;padding:0;color:var(--pale)}
.sound svg{width:22px;height:22px}
.sound:focus-visible,.cta:focus-visible,.navlink:focus-visible,.name:focus-visible,.mark:focus-visible,.btn:focus-visible,.menu-list a:focus-visible{outline:1px solid var(--pale);outline-offset:6px}

/* ---------- héros : showreel plein cadre ---------- */
.hero{position:relative;height:100svh;min-height:520px;overflow:hidden;background:#000;transition:height 1.2s var(--ease)}
/* le showreel porte des bandes noires incrustées (936 lignes d'image sur 1080) : la vidéo déborde de 7,7 % en haut et en bas,
   ainsi « cover » remplit le cadre avec la seule partie image, sans bandes, quelle que soit la forme de l'écran (téléphone surtout) */
.hero video{position:absolute;left:0;top:-7.69%;width:100%;height:115.38%;object-fit:cover;pointer-events:none}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(0,0,27,.5),rgba(0,0,27,.1) 38%,rgba(0,0,27,.1) 70%,rgba(0,0,27,.55)),
    radial-gradient(140% 100% at 50% 40%,rgba(0,0,27,0) 55%,rgba(0,0,27,.45))}

/* titre : rôles empilés à gauche, nom à droite, comme sur le site actuel */
.title{position:absolute;z-index:2;left:0;right:0;top:calc(13vh + env(safe-area-inset-top,0px));display:grid;grid-template-columns:1fr auto 1fr;column-gap:clamp(14px,1.6vw,26px);align-items:start;
  padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px));transition:opacity .6s}
.roles{grid-column:1;justify-self:end;margin:0;padding-top:.5em;display:flex;flex-direction:column;align-items:flex-end;gap:.32em;
  font-family:var(--display);font-weight:200;font-size:clamp(.92rem,1.75vw,1.7rem);line-height:1.1;letter-spacing:.24em;text-transform:uppercase;color:var(--pale-dim)}
.roles span{margin-right:-.24em}
.name{grid-column:2 / 4;justify-self:start;margin:0;background:none;border:0;padding:0;text-align:left;
  font-family:var(--display);font-weight:100;font-size:clamp(3rem,8.6vw,8.6rem);line-height:.98;letter-spacing:.09em;text-transform:uppercase}
.name span{display:block}

/* bouton central : contour fin, la lumière du projecteur le traverse au survol */
.cta{position:absolute;left:50%;top:69%;z-index:3;transform:translate(-50%,-50%);overflow:hidden;
  padding:15px 38px 15px calc(38px + .24em);border:1px solid var(--pale-faint);border-radius:999px;
  background:rgba(0,0,27,.16);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);white-space:nowrap;
  font-family:var(--display);font-weight:300;font-size:clamp(1.02rem,1.5vw,1.3rem);line-height:1;letter-spacing:.24em;text-transform:uppercase;
  transition:border-color .5s,opacity .6s,background .5s}
.cta::before{content:"";position:absolute;inset:-2px;z-index:-1;
  background:linear-gradient(100deg,rgba(255,241,220,0) 30%,rgba(255,241,220,.42) 50%,rgba(255,241,220,0) 70%);
  transform:translateX(-120%);transition:transform 1s var(--ease)}
.cta:hover,.cta:focus-visible{border-color:var(--pale);background:rgba(0,0,27,.28)}
.cta:hover::before,.cta:focus-visible::before{transform:translateX(120%)}
.cta:active{transform:translate(-50%,-50%) scale(.98)}

/* à l'arrivée, la lampe est éteinte : l'interrupteur de la lampe l'allume et met le son (les navigateurs n'autorisent le son qu'après un clic).
   Au clic (option 1 choisie par Adam, puis précisée le 03/11/2026) : déclic, le levier bascule, et c'est la lumière qui efface l'interrupteur :
   elle monte sans jamais redescendre, le surexpose, l'avale dans un halo, puis il ne reste que la lampe sur la pellicule (1,55 s) */
/* pénombre avant le clic : un voile sombre sur les pellicules, qui se lève en douceur au clic (la lampe s'allume dessous) */
.nuit{position:fixed;inset:0;z-index:22;pointer-events:none;background:#000006;opacity:.85;transition:opacity 1.3s cubic-bezier(.45,0,.4,1) .05s}
@media (min-width:641px){.nuit{opacity:.76}}   /* ordinateur : 76 % (85 % paraissait tout noir, puis « encore un peu plus clair », Adam, 03/11/2026) ; téléphone : 85 %, jugé parfait */
/* ordinateur : avant le clic, la souris éclaire déjà un peu autour d'elle ; un cercle de pénombre plus légère la suit
   (déplacé par une transformation, donc sans redessiner le voile à chaque mouvement) */
.nuit{overflow:hidden}
.nuit.souris{background:none}
.nuit.souris::before{content:"";position:absolute;left:0;top:0;width:500vmax;height:500vmax;margin:-250vmax 0 0 -250vmax;will-change:transform;
  transform:translate(var(--nx,50vw),var(--ny,50vh));
  background:radial-gradient(circle 300px at 50% 50%,rgba(0,0,6,.45) 0,rgba(0,0,6,.75) 55%,#000006 100%)}
/* un clic à côté de l'interrupteur : la lueur s'éteint un instant et revient (comme la lampe sur le site) */
.nuit.clin::after{content:"";position:absolute;inset:0;background:#000006;opacity:0;animation:clin .36s ease-out}
@keyframes clin{0%{opacity:0}22%{opacity:.75}100%{opacity:0}}
.nuit.off{opacity:0}
body:not(.intro) .nuit{display:none}
.allumer{position:fixed;left:50%;top:50%;z-index:23;transform:translate(-50%,-50%);
  background:none;border:0;padding:12px 40px 26px;color:var(--lamp);white-space:nowrap;line-height:1;
  transition:opacity .4s ease}
/* l'apparition est portée par l'intérieur : une animation sur le bouton lui-même gênerait sa disparition */
.allumer .in{display:flex;flex-direction:column;align-items:center;animation:fade 1.2s .4s both}
.allumer .obj{position:relative;display:block}
.allumer svg{display:block;width:clamp(70px,5.4vw,96px);height:auto;overflow:visible;filter:drop-shadow(0 14px 22px rgba(0,0,0,.65));transition:filter .4s}
.allumer .levier{transform-box:view-box;transform-origin:41px 64px;transition:transform .2s cubic-bezier(.6,0,.3,1)}
/* la consigne : un bout de scotch papier collé de travers en bas de la plaque, écrit au feutre, comme une note pour le monteur
   (idée d'Adam, 03/11/2026) : papier beige un peu translucide, fibres, bouts déchirés, légère ombre */
.allumer .scotch{position:absolute;left:50%;top:86%;transform:translate(-50%,-50%) rotate(-4deg);display:block;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.5)) brightness(.84);transition:filter .4s}
.allumer .scotch::before{content:"";position:absolute;inset:0;opacity:.94;
  background:repeating-linear-gradient(90deg,rgba(110,86,54,.06) 0 1px,transparent 1px 3px),
    linear-gradient(180deg,rgba(255,251,238,.4),rgba(255,251,238,0) 45%,rgba(90,66,36,.14)),#dccdae;
  clip-path:polygon(2% 0,98% 0,99.5% 9%,97.5% 21%,100% 34%,97% 48%,99.5% 61%,97.5% 75%,100% 88%,98% 100%,2% 100%,.5% 91%,2.5% 79%,0 66%,3% 52%,.5% 38%,2.5% 25%,0 12%)}
.allumer .t{position:relative;display:block;padding:.42em 1.25em .36em;
  font-family:'Permanent Marker','Segoe Print','Bradley Hand',cursive;font-size:clamp(.95rem,1.15vw,1.18rem);letter-spacing:.01em;
  color:#1d1813;text-shadow:0 0 .6px rgba(29,24,19,.55);transform:rotate(-1deg)}
.allumer:hover svg,.allumer:focus-visible svg{filter:drop-shadow(0 0 16px rgba(255,236,205,.2)) drop-shadow(0 14px 22px rgba(0,0,0,.65))}
.allumer:hover .scotch,.allumer:focus-visible .scotch{filter:drop-shadow(0 2px 2px rgba(0,0,0,.5)) brightness(.95)}
.allumer:focus-visible{outline:1px solid var(--lamp);outline-offset:4px}
/* la lumière de la lampe qui naît sur l'interrupteur : posée par-dessus, elle l'éclaire, puis le recouvre et l'efface */
.allumer::after{content:"";position:absolute;left:50%;top:44%;width:340px;height:340px;margin:-170px 0 0 -170px;border-radius:50%;pointer-events:none;opacity:0;transform:scale(.3);
  background:radial-gradient(circle,rgba(255,249,238,1) 0,rgba(255,237,207,.88) 16%,rgba(255,221,172,.42) 34%,rgba(255,206,150,.12) 52%,rgba(255,200,140,0) 70%);mix-blend-mode:screen}
/* trois temps sur 1,55 s : la lumière monte sur l'interrupteur ; il fond dedans quand elle est au plus fort ; elle se résorbe dans la lampe */
@keyframes allume{
  0%{filter:brightness(1) saturate(1) blur(0)}
  30%{filter:brightness(1.4) saturate(.95) blur(0)}
  65%{filter:brightness(2.3) saturate(.8) blur(.6px)}
  100%{filter:brightness(3.8) saturate(.45) blur(6px)}
}
@keyframes allume-fond{0%,22%{opacity:1}95%,100%{opacity:0}}   /* fondu bien visible : il s'efface peu à peu pendant que la lumière monte */
@keyframes allume-halo{
  0%{opacity:0;transform:scale(.3)}
  35%{opacity:.55;transform:scale(.7)}
  82%{opacity:1;transform:scale(1.3)}
  100%{opacity:0;transform:scale(1.6)}
}
.allumer.on{pointer-events:none;animation:allume 1.55s cubic-bezier(.4,0,.6,1) forwards}   /* la souris passe aussitôt à la lumière */
.allumer.on .in{animation:allume-fond 1.55s cubic-bezier(.45,0,.55,1) forwards}                               /* remplace l'animation d'arrivée, d'où le 0 % explicite */
.allumer.on::after{animation:allume-halo 1.55s cubic-bezier(.4,0,.6,1) forwards}
.allumer.on .levier{transform:scaleY(-1)}
.allumer.off{opacity:0;pointer-events:none}

/* arrivée lente après la brûlure */
body.intro .bar,body.intro .title,body.intro .cta{opacity:0}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes rise-c{from{opacity:0;transform:translate(-50%,calc(-50% + 12px))}to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
body.revealed .name{animation:rise 1.6s var(--ease) .5s both}
body.revealed .roles{animation:rise 1.6s var(--ease) .85s both}
body.revealed .cta{animation:rise-c 1.6s var(--ease) 1.3s both}
body.revealed .bar{animation:fade 1.4s 1.6s both}
body.direct .bar{animation:none}   /* page ouverte directement par son adresse : le menu est là tout de suite */

/* ---------- pages : le showreel reste en haut (plus bas de plafond), la page s'affiche dessous ---------- */
html:has(.site.sub){scrollbar-gutter:stable}   /* place de l'ascenseur réservée sur les pages seulement : sur l'accueil et pendant l'intro, l'image va jusqu'au bord de l'écran */
.site.sub .hero{height:62svh}
.site.sub .title,.site.sub .cta{opacity:0;pointer-events:none;animation:none}   /* sans « animation:none », l'animation d'arrivée garderait le bouton visible */
.page{padding-block:56px 140px}
.page-in{padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px));max-width:1500px;margin:0 auto}
.page h1,.introuvable h1{margin:0;font-family:var(--display);font-weight:200;font-size:clamp(2rem,5vw,4.4rem);line-height:1;letter-spacing:.14em;text-transform:uppercase}
.page h3{margin:0 0 22px;font-family:var(--display);font-weight:200;font-size:clamp(1.45rem,2.3vw,2rem);line-height:1.1;letter-spacing:.14em;text-transform:uppercase}
/* grandes parties d'une page (Associés, Ils nous ont fait confiance, Stand-up…) : un trait fin et un grand titre qui les regroupe */
.page .block{margin-top:clamp(80px,9vw,130px);padding-top:clamp(36px,4vw,56px);border-top:1px solid rgba(214,225,255,.14)}
.page .block>h3{font-size:clamp(2rem,3.6vw,3rem);margin-bottom:clamp(30px,3.4vw,48px)}
.prose{max-width:62ch;font-size:1.16rem;line-height:1.7;letter-spacing:.008em;color:var(--ink)}
/* textes de présentation (À propos, Théâtre / Stand-up) : Jost Light, plus élégante (choisie par Adam le 27/10/2026, contre Josefin Sans et Spectral) */
.prose:not(.bio){font-family:'Jost',var(--text);font-weight:300;font-size:1.22rem;letter-spacing:.01em;line-height:1.75}
.prose:not(.bio) b,.prose:not(.bio) strong{font-weight:400}
.prose p{margin:0 0 1.1em}
.prose p:last-child{margin-bottom:0}
.prose a,.coords a{color:var(--pale);text-decoration:underline;text-decoration-color:var(--pale-faint);text-underline-offset:.25em;transition:text-decoration-color .3s}
.prose a:hover,.coords a:hover{text-decoration-color:var(--pale)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:clamp(40px,7vw,130px);margin-top:52px;align-items:start}

/* Stand-up : le logo de Bon Soir Toulouse, dans la pénombre comme les portraits, et le texte */
.standup{--lit:0;display:grid;grid-template-columns:clamp(180px,19vw,270px) minmax(0,1fr);gap:clamp(32px,5vw,90px);align-items:start}
.standup .ph{display:block;aspect-ratio:1;overflow:hidden;border-radius:2px}
.standup img{display:block;width:100%;height:100%;object-fit:cover;filter:brightness(calc(.7 + .3 * var(--lit))) saturate(calc(.7 + .3 * var(--lit)));transition:filter .3s}
@media (max-width:1240px) and (min-width:901px){.nav{gap:24px}.nav .navlink{font-size:1.2rem}.mark{font-size:1.3rem}}
@media (max-width:900px) and (min-width:641px){.nav{gap:18px}.nav .navlink{font-size:1.05rem}.mark{font-size:1.1rem;letter-spacing:.2em}}
/* Théâtre : les membres du collectif, en grand et en capitales */
.names{list-style:none;margin:0;padding:0;font-family:var(--display);font-weight:200;font-size:clamp(1.3rem,2vw,1.75rem);line-height:1.65;letter-spacing:.12em;text-transform:uppercase}

/* À propos : la vidéo ronde devient le hublot de la cabine de projection */
.about-top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(44px,7vw,130px);align-items:center;margin-top:52px}
.hublot{--lit:0;position:relative;width:clamp(240px,29vw,430px);aspect-ratio:1;border-radius:50%;overflow:hidden;background:#05071a;
  box-shadow:0 0 0 9px #060919,0 0 0 10px rgba(214,225,255,.14),0 0 0 22px rgba(6,9,25,.7),0 34px 90px rgba(0,0,0,.6)}
.hublot video{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;filter:brightness(calc(.78 + .24 * var(--lit)))}
.hublot::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(90% 70% at 28% 18%,rgba(255,255,255,.13),rgba(255,255,255,0) 42%),radial-gradient(circle,rgba(0,0,14,0) 64%,rgba(0,0,14,.5) 100%)}
/* associés : une grille compacte sous un grand titre ; chaque texte est replié, « Lire la suite » le déplie */
.associes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:56px 32px}
.assoc{--lit:0;display:flex;flex-direction:column;align-items:flex-start}
.assoc .ph{display:block;width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:2px;background:#05071a;margin-bottom:18px}
.assoc .ph img{object-position:50% 28%}
.assoc .bio{font-size:1.05rem;line-height:1.6;max-height:calc(1.6em * 5);overflow:hidden;-webkit-mask-image:linear-gradient(#000 50%,transparent);mask-image:linear-gradient(#000 50%,transparent)}
.assoc.open .bio{max-height:none;-webkit-mask-image:none;mask-image:none}
.more{margin-top:10px;background:none;border:0;padding:4px 0;font-family:var(--text);font-size:1.04rem;color:var(--pale);text-decoration:underline;text-decoration-color:var(--pale-faint);text-underline-offset:.25em;transition:text-decoration-color .3s}
.more:hover,.more:focus-visible{text-decoration-color:var(--pale)}
@media (max-width:1180px){.associes{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){.associes{grid-template-columns:repeat(2,minmax(0,1fr))}}
.assoc img{display:block;width:100%;height:100%;object-fit:cover;filter:brightness(calc(.66 + .36 * var(--lit))) saturate(calc(.55 + .45 * var(--lit)));transition:filter .3s}
.assoc .n{margin:0;font-family:var(--display);font-weight:300;font-size:clamp(1.2rem,1.5vw,1.45rem);line-height:1.15;letter-spacing:.12em;text-transform:uppercase}
.assoc .r{margin:6px 0 14px;font-family:var(--display);font-weight:200;font-size:.98rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pale-dim)}
.logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:52px 44px;align-items:center;margin:40px 0 0;padding:0;list-style:none}
.logos li{--lit:0;--lh:72px;display:grid;place-items:center;height:var(--lh)}
.logos img{display:block;width:auto;height:auto;max-width:100%;max-height:var(--lh);opacity:calc(.4 + .55 * var(--lit));transition:opacity .3s}

/* Contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(48px,8vw,150px);margin-top:52px;align-items:start}
.form{display:grid;gap:30px;max-width:660px}
.field{display:grid;gap:6px}
.field label{font-size:1.04rem;color:var(--ink-dim)}
.field input,.field textarea{font:inherit;font-size:1.12rem;color:var(--pale);background:transparent;border:0;border-bottom:1px solid var(--pale-faint);border-radius:0;padding:10px 0;outline:none;transition:border-color .3s}
.field textarea{min-height:150px;resize:vertical;line-height:1.6}
.field input:focus,.field textarea:focus{border-color:var(--pale)}
.btn{position:relative;overflow:hidden;justify-self:start;padding:15px 38px 15px calc(38px + .24em);border:1px solid var(--pale-faint);border-radius:999px;background:rgba(0,0,27,.16);
  font-family:var(--display);font-weight:300;font-size:1.12rem;line-height:1;letter-spacing:.24em;text-transform:uppercase;transition:border-color .5s,background .5s}
.btn::before{content:"";position:absolute;inset:-2px;z-index:-1;background:linear-gradient(100deg,rgba(255,241,220,0) 30%,rgba(255,241,220,.42) 50%,rgba(255,241,220,0) 70%);transform:translateX(-120%);transition:transform 1s var(--ease)}
.btn:hover,.btn:focus-visible{border-color:var(--pale);background:rgba(0,0,27,.28)}
.btn:hover::before,.btn:focus-visible::before{transform:translateX(120%)}
.form-note{margin:0;font-size:1.04rem;color:var(--ink-dim);min-height:1.5em}
.coords{display:grid;gap:30px}
.coords p{margin:0}
.coords .k{margin-bottom:6px;font-size:1.04rem;color:var(--ink-dim)}
.socials a{font-size:1.1rem}
.coords .v{font-family:var(--display);font-weight:200;font-size:clamp(1.25rem,1.8vw,1.55rem);letter-spacing:.08em}
.socials{display:flex;flex-wrap:wrap;gap:10px 28px;margin:0;padding:0;list-style:none}

/* bas de page */
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 30px;padding:28px max(20px,env(safe-area-inset-right,0px)) calc(28px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));
  border-top:1px solid rgba(214,225,255,.1);font-size:1rem;color:var(--ink-dim)}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 26px}
.foot a{color:inherit;text-decoration:none;transition:color .25s}
.foot a:hover{color:var(--pale)}

/* menu du téléphone : un mot « Menu », la liste en grand dans le noir ; il se ferme tout seul après un choix */
.menu{position:fixed;inset:0;z-index:36;display:flex;flex-direction:column;justify-content:center;
  padding:calc(80px + env(safe-area-inset-top,0px)) max(28px,env(safe-area-inset-right,0px)) calc(60px + env(safe-area-inset-bottom,0px)) max(28px,env(safe-area-inset-left,0px));
  background:rgba(0,0,8,.97);opacity:0;visibility:hidden;transition:opacity .4s ease,visibility 0s .4s}
.menu.on{opacity:1;visibility:visible;transition:opacity .4s ease}
.menu-close{position:absolute;top:calc(22px + env(safe-area-inset-top,0px));right:max(20px,env(safe-area-inset-right,0px))}
.menu-list{display:grid;gap:6px}
.menu-list a{justify-self:start;padding:8px 0;font-family:var(--display);font-weight:200;font-size:clamp(2.1rem,10vw,2.9rem);line-height:1.1;letter-spacing:.14em;text-transform:uppercase;color:var(--pale-dim);text-decoration:none}
.menu-list a[aria-current="page"]{color:var(--pale)}
.menu.on .menu-list a{animation:rise .7s var(--ease) both}
.menu.on .menu-list a:nth-child(2){animation-delay:.05s}.menu.on .menu-list a:nth-child(3){animation-delay:.1s}.menu.on .menu-list a:nth-child(4){animation-delay:.15s}.menu.on .menu-list a:nth-child(5){animation-delay:.2s}
body.menu-open{overflow:hidden}
/* filtres : de simples mots, soulignés quand ils sont choisis (comme le menu) */
.filters{display:flex;flex-wrap:wrap;gap:8px 34px;margin:30px 0 52px}
/* ordinateur : les catégories occupent toute la largeur, en grand, sans dépasser le titre (demande d'Adam, 03/11/2026) */
@media (min-width:641px){
  .filters{justify-content:space-between;gap:14px 30px;margin:44px 0 64px}
  .filters .navlink{font-size:clamp(1.2rem,2.05vw,2.3rem);letter-spacing:.14em}
}
.navlink[aria-pressed="true"]{color:var(--pale)}
.navlink[aria-pressed="true"]::after{transform:scaleX(1)}
/* les films, dans la pénombre : la lampe (le curseur) les éclaire en passant */
.films{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,380px),1fr));gap:64px 32px;margin:0;padding:0;list-style:none}
.film{--lit:0;--lx:50%;--ly:50%;display:block;width:100%;background:none;border:0;padding:0;text-align:left}
.film .ph{position:relative;display:block;aspect-ratio:1.85;overflow:hidden;background:#05071a;border-radius:2px}
.film img{display:block;width:100%;height:100%;object-fit:cover;
  filter:brightness(calc(.7 + .32 * var(--lit))) saturate(calc(.72 + .3 * var(--lit)));
  transform:scale(calc(1 + .03 * var(--lit)));transition:filter .3s ease,transform .8s var(--ease)}
.film .ph::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--lit);mix-blend-mode:soft-light;
  background:radial-gradient(circle at var(--lx) var(--ly),rgba(255,236,205,.5),rgba(255,236,205,0) 60%)}
.film .cap{display:grid;grid-template-columns:1fr auto;column-gap:18px;margin-top:16px;opacity:calc(.9 + .1 * var(--lit));transition:opacity .3s}
.film .t{font-family:var(--display);font-weight:300;font-size:1.2rem;line-height:1.2;letter-spacing:.12em;text-transform:uppercase}
.film .y,.screen-cap .y{font-family:var(--display);font-weight:200;font-size:1.05rem;line-height:1.35;letter-spacing:.12em;color:var(--pale-faint)}
.film .s{grid-column:1 / -1;margin-top:6px;font-size:1.04rem;line-height:1.4;color:var(--ink-dim)}
.film:focus-visible{outline:1px solid var(--pale);outline-offset:8px;--lit:1 !important}
a.film{color:inherit;text-decoration:none}
/* vidéo verticale (Instagram, TikTok) : un écran de téléphone posé au milieu de la case, dans le noir */
.film.vertical .ph{display:grid;place-items:center;background:#03040f}
.film.vertical .phone{display:block;height:100%;aspect-ratio:9/16;overflow:hidden;border-radius:10px;box-shadow:0 0 0 1px rgba(214,225,255,.16),0 0 0 5px #070a1d,0 0 0 6px rgba(214,225,255,.08)}
.film.vertical .phone img{transform:none}
.film.vertical .ph::after{display:none}
.standup-next{margin-top:clamp(70px,8vw,110px)}
.prose h4.sub:first-child{margin-top:0}
.prose h4.sub{margin:1.8em 0 .5em;font-family:var(--display);font-weight:300;font-size:1.3rem;line-height:1.2;letter-spacing:.12em;text-transform:uppercase;color:var(--pale)}
/* page Stand-up : les vidéos de Bon Soir et de Manu, en rang */
.standup-videos{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:40px 28px;margin:44px 0 0;padding:0;list-style:none}
.films li.in{animation:rise .8s var(--ease) calc(var(--i) * 45ms) both}

/* projection : le film choisi vient se poser sur l'écran, dans le noir ; le lecteur YouTube ne se charge qu'à ce moment-là */
body.projecting{overflow:hidden}
.screen{position:fixed;inset:0;z-index:35;display:grid;place-items:center;
  padding:calc(70px + env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) calc(40px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));
  background:rgba(0,0,8,.975);opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s .45s}
.screen.on{opacity:1;visibility:visible;transition:opacity .45s ease}
.screen-in{width:min(100%,calc((100svh - 220px) * 16 / 9),1500px)}
.screen-frame{position:relative;aspect-ratio:16/9;background:#000;transform-origin:0 0;box-shadow:0 0 140px rgba(255,241,220,.06)}
.screen-frame img,.screen-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
.screen-frame iframe{opacity:0;transition:opacity .7s ease}
.screen-frame iframe.ready{opacity:1}
.screen-cap{display:grid;grid-template-columns:1fr auto;column-gap:18px;margin-top:20px}
.screen-cap .t{font-family:var(--display);font-weight:300;font-size:clamp(1.15rem,1.6vw,1.5rem);letter-spacing:.12em;text-transform:uppercase}
.screen-cap .s{grid-column:1 / -1;margin-top:6px;color:var(--ink-dim);font-size:1.06rem}
.screen-close{position:absolute;top:calc(18px + env(safe-area-inset-top,0px));right:max(20px,env(safe-area-inset-right,0px))}

/* mentions légales, page introuvable, message sans JavaScript */
.mentions{margin-top:44px}
.mentions p{margin-bottom:.4em}
.introuvable{display:grid;place-items:center;text-align:center}
.introuvable p{margin:26px 0 0;font-size:1.2rem}
.introuvable a{color:var(--pale);text-underline-offset:.25em}
.sans-js{position:fixed;z-index:40;left:0;right:0;bottom:0;margin:0;padding:20px;background:var(--night);text-align:center}

/* après l'intro, la souris reste une lampe : halo chaud qui suit le curseur, le reste de la page un peu dans l'ombre.
   À chaque clic, seule la lampe s'éteint et se rallume (--tk de 1 à 0 puis 1) : son halo retombe dans l'ombre du reste, le site ne bouge pas */
.torch{--tk:1;position:fixed;inset:0;z-index:15;pointer-events:none;opacity:0;transition:opacity 1.6s ease;
  background:
    radial-gradient(circle var(--tr,300px) at var(--tx,50%) var(--ty,42%),rgba(255,241,220,calc(.08 * var(--tk))),rgba(255,241,220,calc(.025 * var(--tk))) 40%,rgba(255,241,220,0) 62%),
    radial-gradient(circle var(--tr,300px) at var(--tx,50%) var(--ty,42%),rgba(0,0,14,calc(.3 - .3 * var(--tk))),rgba(0,0,14,calc(.3 - .3 * var(--tk))) 62%,rgba(0,0,14,.3) 100%)}   /* ombre .3 (et non .4) : le texte reste lisible loin de la lampe */
body.revealed:not(.intro) .torch{opacity:1}
@media (pointer:coarse){.torch{--tr:65vmax}}

@media (max-width:640px){
  .title{top:calc(11vh + env(safe-area-inset-top,0px));grid-template-columns:auto auto;justify-content:center}
  .roles{grid-column:1;font-size:.72rem;letter-spacing:.2em;padding-top:.35em}
  .roles span{margin-right:-.2em}
  .name{grid-column:2;font-size:clamp(2.3rem,11vw,3.4rem);letter-spacing:.07em}
  .cta{top:60%;padding:13px 26px 13px calc(26px + .22em);letter-spacing:.22em}
  .bar{gap:18px}
  .nav{gap:14px}
  .nav .navlink{display:none}
  .nav .menu-btn{display:block;font-size:1.75rem;letter-spacing:.18em}
  .mark{font-size:1.2rem;letter-spacing:.2em}
  .site.sub .hero{height:clamp(250px,64vw,420px);min-height:0}
  .page{padding-top:40px}
  .split,.about-top,.contact-grid{grid-template-columns:minmax(0,1fr);margin-top:36px}
  .hublot{justify-self:center;width:min(76vw,320px)}
  .standup{grid-template-columns:minmax(0,1fr);gap:26px}
  .standup .ph{width:min(70vw,260px)}
  .associes{grid-template-columns:minmax(0,1fr);gap:40px}
  .assoc{display:grid;grid-template-columns:104px minmax(0,1fr);column-gap:18px;align-items:start}
  .assoc .ph{margin:0;aspect-ratio:1}
  .logos{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 26px}
  .logos li{--lh:52px}
  .filters{flex-wrap:nowrap;overflow-x:auto;gap:28px;margin:24px -20px 40px;padding:0 36vw 4px 20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .filters::-webkit-scrollbar{display:none}
  .filters .navlink{flex:0 0 auto;font-size:1rem}
  .films{gap:48px}
}
@media (prefers-reduced-motion:reduce){
  .hero,.title,.cta{transition:none}
  body.revealed .name,body.revealed .roles{animation:fade 1.2s .4s both}
  body.revealed .cta{animation:fade 1.2s .9s both}
}