/* 21grams.studio, version « A+B » (2026-10-15) : la bande démo joue dans le logo 21G puis s'ouvre,
   ensuite un film par écran avec son crédit en grand. Un seul film joue à la fois.
   Ancienne version : ~/21G/_archive/site-agence-21g-2026-10-15-avant-ab/. */
:root{
  --bg:#000; --ink:#E2E3E4; --white:#fff; --dim:rgba(255,255,255,.44); --mute:#9C9FA3; --hair:rgba(226,227,228,.14);
  --display:'Supreme','Helvetica Neue',Arial,sans-serif; /* Supreme (Fontshare, gratuite usage commercial), choisie par Gabriel le 2026-10-15 */
  --body:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'JetBrains Mono','SF Mono',monospace;
  --g:20px;
}
@media (min-width:900px){:root{--g:40px;}}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
img{display:block;max-width:100%;}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;}

/* ---- barre : logo, sélecteur de style, contact. Posée sur le film, sans boîte. */
.bar{position:fixed;inset:0 0 auto;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(14px + env(safe-area-inset-top)) var(--g) 14px;
  background:linear-gradient(to bottom,rgba(0,0,0,.55),rgba(0,0,0,0));}
.bar__logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600;font-size:18px;color:#fff;}
.bar__logo img{height:30px;width:auto;}
.bar__cta{font-family:var(--display);font-weight:500;font-size:15px;color:#fff;padding:10px 0;}


/* ---- lecteurs : image du film d'abord, la vidéo se pose dessus quand elle joue */
.media{position:relative;overflow:hidden;background:#0b0b0c center/cover no-repeat;}
.media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease-out;}
.media video.on{opacity:1;}
.media video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none;}
.soon-tag{position:absolute;inset:0;z-index:2;display:grid;place-items:start center;padding-top:14%;pointer-events:none;
  font-family:var(--mono);font-weight:500;letter-spacing:.2em;color:#fff;font-size:clamp(16px,3.4vw,46px);
  text-shadow:-2px 0 rgba(255,0,60,.7),2px 0 rgba(0,220,255,.7),0 2px 24px rgba(0,0,0,.6);
  background:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,.15) 50%,rgba(0,0,0,.3));}

/* ---- ouverture (A+B et B) : la bande démo dans le logo 21G, qui grandit au défilement */
.ouv{position:relative;height:260svh;}
.ouv__pin{position:sticky;top:0;height:100svh;overflow:hidden;}
.ouv__film{position:absolute;inset:0;}
.ouv__film video{width:100%;height:100%;object-fit:cover;}
.ouv__tag{position:absolute;left:var(--g);top:50%;transform:translateY(-50%);font-family:var(--display);font-weight:500;font-size:15px;color:#fff;max-width:180px;line-height:1.35;}
.ouv__bas{position:absolute;left:var(--g);right:var(--g);bottom:calc(24px + env(safe-area-inset-bottom));display:flex;justify-content:space-between;color:rgba(255,255,255,.72);}
@media (orientation:portrait){.ouv__tag{top:auto;bottom:84px;transform:none;max-width:none;}}

/* ---- A · Le générique : un film par écran, le crédit en énorme */
.plan{position:relative;height:100svh;overflow:hidden;background:#000;}
.plan .media{position:absolute;inset:0;}
.plan__voile{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.7) 0%,rgba(0,0,0,0) 45%);}
.plan__credit{position:absolute;left:var(--g);right:var(--g);bottom:calc(36px + env(safe-area-inset-bottom));z-index:3;color:#fff;pointer-events:none;}
.plan__meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 20px;margin-bottom:14px;color:rgba(255,255,255,.82);}
.plan__logos{display:flex;align-items:center;gap:14px;}
.plan__logos img{height:26px;width:auto;}
.plan__credit h2{font-family:var(--display);font-weight:800;font-size:clamp(48px,9vw,150px);line-height:.9;letter-spacing:-.045em;text-wrap:balance;}
.plan__credit h2 span{color:rgba(255,255,255,.46);font-weight:400;}
.plan__voir{position:absolute;right:var(--g);bottom:calc(44px + env(safe-area-inset-bottom));z-index:4;color:#fff;padding:12px 0;}
/* film paysage sur téléphone debout : le film entier en haut, le crédit dessous, rien de coupé */
@media (orientation:portrait){
  .plan--wide .media{inset:auto 0 auto 0;top:22svh;aspect-ratio:16/9;}
  .plan--wide .plan__voile{background:none;}
  .plan__credit h2{font-size:clamp(44px,13vw,64px);}
  .plan__credit h2 span{display:block;}
  .plan__voir{position:static;display:inline-block;margin-top:14px;pointer-events:auto;}
  .plan__credit{pointer-events:auto;}
}

/* ---- contact, pied */
.contact{position:relative;z-index:5;background:#000;display:grid;gap:32px;padding:96px var(--g) 64px;max-width:1360px;margin:0 auto;}
@media (min-width:900px){.contact{grid-template-columns:1fr 1fr;gap:64px;padding:140px var(--g) 96px;}}
.contact h2{font-family:var(--display);font-weight:800;font-size:clamp(44px,7vw,96px);line-height:1;letter-spacing:-.04em;color:#fff;}
.contact__sub{margin-top:12px;color:var(--mute);font-size:18px;}
.contact__alt{margin-top:28px;color:var(--mute);}
.contact__alt a{color:#fff;text-decoration:underline;text-underline-offset:3px;}
.form{display:grid;gap:16px;}
.form label{display:grid;gap:8px;}
.form label span{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);}
.form input,.form textarea{font:inherit;color:#fff;background:#0d0d0f;border:1px solid var(--hair);padding:12px 14px;border-radius:0;}
.btn{height:52px;background:#fff;color:#000;font-family:var(--display);font-weight:500;font-size:16px;}
.form__note{font-size:13px;color:var(--mute);}
.foot{position:relative;z-index:5;background:#000;display:flex;justify-content:space-between;padding:24px var(--g) calc(24px + env(safe-area-inset-bottom));border-top:1px solid var(--hair);
  font-family:var(--mono);font-size:12px;color:var(--mute);max-width:1360px;margin:0 auto;}

/* ---- séance : le film seul, avec le son */
.cine{position:fixed;inset:0;z-index:50;background:#000;display:grid;place-items:center;}
.cine[hidden]{display:none;}
.cine__screen{position:relative;width:min(100vw,calc(100svh * 16 / 9));aspect-ratio:16/9;}
.cine__screen.tall{width:min(100vw,calc(100svh * 9 / 16));aspect-ratio:9/16;}
.cine__screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.cine__close{position:absolute;top:calc(14px + env(safe-area-inset-top));right:var(--g);z-index:2;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#fff;padding:12px 0;}
.cine__title{position:absolute;left:var(--g);bottom:calc(20px + env(safe-area-inset-bottom));font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);}


/* ---- langue */
.bar__right{display:flex;align-items:center;gap:18px;}
.lang{display:flex;gap:2px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;}
.lang button{min-width:36px;height:40px;color:rgba(255,255,255,.55);}
.lang button[aria-pressed="true"]{color:#fff;}

/* ---- logos clients, en bandeau qui défile */
.logos{position:relative;z-index:5;overflow:hidden;padding:26px 0;border-block:1px solid var(--hair);background:#070708;}
.logos__track{display:flex;width:max-content;animation:slide 34s linear infinite;}
.logos__set{display:flex;align-items:center;}
.logos__set img,.logos__set span{margin:0 22px;}
.logos__set img{height:22px;width:auto;max-width:130px;object-fit:contain;filter:grayscale(1) brightness(1.9);opacity:.7;}
.logos__set img.l-um{height:28px;}
.logos__set img.l-bo{height:17px;}
.logos__set img.l-round{height:36px;max-width:none;}
.w-lik,.w-zz{font-family:var(--display);color:rgba(255,255,255,.7);white-space:nowrap;line-height:1;}
.w-lik{font-weight:500;font-size:18px;letter-spacing:.34em;}
.w-zz{font-weight:600;font-size:24px;letter-spacing:-.05em;font-style:italic;}
@keyframes slide{to{transform:translate3d(-50%,0,0);}}
@media (min-width:900px){
  .logos{padding:52px 0;}
  .logos__track{animation-duration:60s;}
  .logos__set img,.logos__set span{margin:0 48px;}
  .logos__set img{height:42px;max-width:240px;opacity:.85;}
  .logos__set img.l-um{height:54px;}
  .logos__set img.l-bo{height:32px;}
  .logos__set img.l-round{height:72px;}
  .w-lik{font-size:32px;}
  .w-zz{font-size:44px;}
}
@media (prefers-reduced-motion:reduce){.logos__track{animation:none;}}
.cine__hint{display:none;position:absolute;left:0;right:0;bottom:calc(52px + env(safe-area-inset-bottom));text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);}
@media (orientation:portrait){.cine[data-orient="landscape"] .cine__hint{display:block;}}
@media (prefers-reduced-motion:reduce){.media video{transition:none;}}

/* ---- « Voir le film » : sous le crédit sur téléphone debout, dans le coin sur écran paysage */

@media (orientation:landscape){.plan--wide .plan__credit{right:calc(var(--g) + 200px);}}

/* ---- logos des marques posés en GRAND sur le film, au-dessus du nom */
.plan__marque{display:flex;align-items:center;flex-wrap:wrap;gap:16px clamp(20px,3vw,48px);margin-bottom:18px;}
.plan__marque img{height:clamp(64px,15vh,170px);width:auto;max-width:min(46vw,560px);object-fit:contain;filter:drop-shadow(0 2px 20px rgba(0,0,0,.45));}
.plan--marque .plan__credit h2{font-size:clamp(30px,4.2vw,68px);}
/* logos ronds : plus de vide autour du dessin, on les monte d'un cran pour qu'ils pèsent autant que les autres */
.plan__marque img[src*="no-limit"],.plan__marque img[src*="47ter"]{height:clamp(96px,22vh,240px);}
@media (orientation:portrait){.plan__marque img{height:52px;max-width:60vw;}.plan__marque img[src*="no-limit"],.plan__marque img[src*="47ter"]{height:84px;}.plan--marque .plan__credit h2{font-size:clamp(30px,9vw,44px);}}

/* ---- formats verticaux : une rangée de téléphones (mise en situation), comme la version précédente */
.verts{position:relative;z-index:1;background:#000;padding:110px var(--g) 72px;}
.verts__head{display:flex;flex-direction:column;gap:10px;margin-bottom:28px;}
.verts__head .mono{color:rgba(255,255,255,.7);}
.verts__head h2{font-family:var(--display);font-weight:800;font-size:clamp(40px,6vw,96px);line-height:.95;letter-spacing:-.04em;color:#fff;}
.verts__list{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:14px 12px 10px;margin:0 calc(var(--g) * -1);scrollbar-width:none;}
.verts__list::-webkit-scrollbar{display:none;}
.vert{flex:0 0 74%;max-width:340px;scroll-snap-align:center;cursor:pointer;}
.vert:first-child{margin-left:calc(var(--g) - 12px);}
.phone{aspect-ratio:9/16;border-radius:12% / 6.75%;
  box-shadow:0 0 0 clamp(6px,1.8vw,11px) #0e0e10,0 0 0 calc(clamp(6px,1.8vw,11px) + 1.5px) #3b3b3f,0 24px 50px rgba(0,0,0,.55);}
.phone::before{content:'';position:absolute;z-index:3;top:2.3%;left:50%;transform:translateX(-50%);width:31%;height:3.3%;border-radius:999px;background:#000;pointer-events:none;}
.vert figcaption{display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:22px;text-align:center;}
.vert__logos{display:flex;align-items:center;gap:14px;}
.vert__logos img{height:30px;width:auto;max-width:150px;object-fit:contain;}
.vert figcaption b{font-family:var(--display);font-weight:500;font-size:16px;color:#fff;}
.verts__hint{margin-top:18px;color:var(--mute);font-size:11px;}
@media (min-width:900px){
  .verts{padding:140px var(--g) 110px;}
  .verts__head{flex-direction:row;align-items:baseline;justify-content:space-between;margin-bottom:56px;}
  .verts__list{display:grid;grid-template-columns:repeat(3,minmax(0,360px));justify-content:center;gap:72px 64px;overflow:visible;margin:0;padding:12px;}
  .vert:first-child{margin-left:0;}
  .vert__logos img{height:38px;max-width:190px;}
  .verts__hint{display:none;}
}

/* « Voir le film » sous le crédit, partout (dans le coin il tombait sur les textes incrustés des films) */
.plan__voir--tel{position:static;display:inline-block;margin-top:16px;pointer-events:auto;}
.plan__credit{pointer-events:auto;}
.plan__actions{display:flex;align-items:center;flex-wrap:wrap;gap:6px 28px;margin-top:16px;}
.plan__actions .plan__voir--tel{margin-top:0;}
.plan__ig{color:#fff;padding:12px 0;}
.plan__stats{color:rgba(255,255,255,.7);}

/* ---- téléphone debout : même rendu immersif que l'ordinateur, sans recadrer le film.
   L'image du film, floutée et assombrie, remplit l'écran ; le film entier est posé au centre ;
   logos et crédit par-dessus (comme Instagram et TikTok pour les vidéos paysage). */
@media (orientation:portrait){
  .plan--wide::before{content:'';position:absolute;inset:-40px;background:var(--poster) center/cover no-repeat;
    filter:blur(30px) brightness(.78) saturate(1.45);transform:scale(1.15);}
  .plan--wide .media{top:calc(50% - 15svh);transform:translateY(-50%);box-shadow:0 20px 60px rgba(0,0,0,.6);}
  .plan--wide .plan__voile{background:linear-gradient(to top,rgba(0,0,0,.7) 0%,rgba(0,0,0,.15) 40%,rgba(0,0,0,0) 60%);}
}

/* ---- intro en motion design (2026-10-15) : rafale de logos sur nos images, mur de logos, puis 21G.
   Typo de l'intro = typo du site (variables ci-dessous, à changer avec la typo choisie). */
body{--f-a:var(--display);--w-a:800;--wd-a:100%;--ls-a:-.04em;}
/* ---- intro en motion design : rafale de logos sur nos images, mur de logos, puis 21G */
.intro{position:fixed;inset:0;z-index:60;background:#000;overflow:hidden;cursor:pointer;color:#fff;}
.intro.out{animation:intro-out .6s cubic-bezier(.76,0,.24,1) forwards;}
@keyframes intro-out{to{clip-path:inset(0 0 100% 0);}}
.intro__bg{position:absolute;inset:0;background:#000 center/cover no-repeat;}
.intro__bg::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.42);}
.intro.blanc .intro__bg{background:#fff!important;}
.intro.blanc .intro__bg::after{display:none;}
.intro.blanc .intro__logo img{filter:invert(1);}
.intro.blanc .intro__hud{color:#000;}
.intro__ligne{position:absolute;left:0;right:0;top:50%;height:2px;background:#fff;transform:scaleX(0);}
.intro__logo{position:absolute;inset:0;display:grid;place-items:center;}
.intro__logo img{position:absolute;max-width:72vw;max-height:30vh;width:auto;height:30vh;object-fit:contain;}
.intro__logo img.r{max-height:46vh;height:46vh;}
.intro__logo img.rouge,.intro__logo img.cyan{mix-blend-mode:screen;opacity:.9;}
.intro__logo img.rouge{filter:brightness(.6) sepia(1) saturate(9) hue-rotate(-50deg);}
.intro__logo img.cyan{filter:brightness(.6) sepia(1) saturate(9) hue-rotate(150deg);}
.intro__logo .mot{font-family:var(--f-a);font-weight:var(--w-a);font-stretch:var(--wd-a);text-transform:uppercase;font-size:min(22vw,30vh);letter-spacing:var(--ls-a);line-height:.9;}
.intro__hud{position:absolute;inset:calc(18px + env(safe-area-inset-top)) 20px calc(18px + env(safe-area-inset-bottom));pointer-events:none;
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;}
.intro__hud span{position:absolute;}
.intro__hud .n{left:0;top:0;}.intro__hud .t{left:0;bottom:0;}.intro__hud .s{right:0;bottom:0;}.intro__hud .k{right:0;top:0;opacity:.7;pointer-events:auto;cursor:pointer;}
.intro__mur{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);align-content:center;gap:5vh 4vw;padding:0 8vw;}
.intro__mur img{width:100%;height:9vh;object-fit:contain;opacity:0;}
.intro__mur img.r{height:15vh;}
@media (orientation:portrait){.intro__mur{grid-template-columns:repeat(3,1fr);gap:4vh 6vw;}.intro__mur img{height:6vh;}.intro__mur img.r{height:10vh;}.intro__logo img{height:22vh;max-height:22vh;}.intro__logo img.r{height:30vh;max-height:30vh;}}
.intro__fin{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:3vh;}
.intro__fin img{height:min(30vh,240px);}
.intro__fin p{font-family:var(--f-a);font-weight:var(--w-a);font-stretch:var(--wd-a);text-transform:uppercase;font-size:clamp(16px,2.2vw,28px);letter-spacing:.02em;}
@media (prefers-reduced-motion:reduce){.intro{display:none!important;}}

/* ---- téléphones façon iPhone récent (2026-10-15) : coins très arrondis, contour fin, liseré titane,
   Dynamic Island, boutons latéraux. Remplace l'allure « ancien iPhone » plus haut. */
.device{position:relative;}
.device .phone{border-radius:15.5% / 8.7%;
  box-shadow:0 0 0 clamp(4px,1vw,6px) #050506,
             0 0 0 calc(clamp(4px,1vw,6px) + 1.5px) #9b9ca1,
             0 0 0 calc(clamp(4px,1vw,6px) + 3px) #3d3e42,
             0 28px 60px rgba(0,0,0,.6);}
.device .phone::before{top:2.1%;width:29%;height:3.1%;}
/* bouton d'allumage à droite, deux boutons de volume à gauche */
.device::before,.device::after{content:'';position:absolute;width:3px;border-radius:2px;background:linear-gradient(to right,#55565a,#9b9ca1);}
.device::before{right:calc(-1 * (clamp(4px,1vw,6px) + 5px));top:27%;height:11%;}
.device::after{left:calc(-1 * (clamp(4px,1vw,6px) + 5px));top:22%;height:17%;
  background:linear-gradient(to bottom,#8a8b90 0 42%,transparent 42% 58%,#8a8b90 58% 100%);}
/* iPhone (Safari) : une vidéo qui joue ignore l'arrondi de son cadre ; on arrondit la vidéo et l'image elles-mêmes */
.phone video{border-radius:inherit;}
.phone{-webkit-transform:translateZ(0);transform:translateZ(0);}
.bar{transition:transform .35s cubic-bezier(.4,0,.2,1);}
.bar--cache{transform:translateY(-100%);}

/* lecture automatique refusée (iPhone en mode Économie d'énergie) : un ▶ pour montrer que c'est une vidéo */
.media.fige::after{content:'';position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;pointer-events:none;
  background:rgba(0,0,0,.45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='%23fff'/%3E%3C/svg%3E") 55% 50%/24px no-repeat;
  border:1px solid rgba(255,255,255,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* Laboratoire 21G × Studio Play 3D : une console (films carrés) et un abribus (films verticaux) */
.lab{position:relative;z-index:1;background:#000;padding:110px var(--g) 90px;}
.lab__head{display:flex;flex-direction:column;gap:14px;margin-bottom:36px;}
.lab__head h2{font-family:var(--display);font-weight:800;font-size:clamp(40px,6vw,96px);line-height:.95;letter-spacing:-.04em;color:#fff;}
.lab__head h2 b{font-weight:800;}
.lab__head h2 i{font-style:normal;font-weight:300;color:var(--mute);margin:0 .08em;}
.lab__head p{display:flex;align-items:center;gap:14px;color:var(--mute);font-size:12px;letter-spacing:.12em;text-transform:uppercase;}
.lab__ig{display:inline-grid;place-items:center;width:max(.62em,38px);height:max(.62em,38px);margin-left:.22em;vertical-align:.06em;border-radius:50%;background:#fff;color:#000;transition:transform .2s,background .2s,color .2s;}
.lab__ig svg{width:56%;height:56%;}
.lab__ig:hover{transform:scale(1.08) rotate(-6deg);}
@media (min-width:900px){
  .lab{padding:140px var(--g) 120px;}
  .lab__head{flex-direction:row;align-items:baseline;justify-content:space-between;margin-bottom:56px;}
  .lab__head h2{max-width:none;}
}
.reflet{position:absolute;z-index:1;filter:blur(12px) brightness(1.15) saturate(1.2);pointer-events:none;}
/* la scène : console à gauche, abribus à droite */
.scene{display:grid;gap:56px;}
.cadre-s{position:relative;}
.cadre-s > img{position:relative;z-index:2;display:block;width:100%;height:auto;pointer-events:none;}
.cadre-s .media,.affiche,.osd{position:absolute;}
.cadre-s > .media{z-index:1;}
.osd{z-index:3;display:flex;justify-content:flex-end;align-items:flex-start;padding:5% 7%;font-family:var(--mono);font-size:clamp(16px,2.2vw,30px);letter-spacing:.06em;color:#7dff6a;text-shadow:0 0 8px rgba(125,255,106,.8);opacity:0;transition:opacity .2s;pointer-events:none;}
.poste{overflow:hidden;}
.affiche{z-index:1;overflow:hidden;background:#000;}
.affiche .media{position:absolute;inset:0;}
.vue{position:relative;overflow:hidden;aspect-ratio:3/4;cursor:pointer;}
.vue .cadre-s{position:absolute;width:170%;left:-14.43%;top:-35.4%;}
.scene__bar{display:flex;align-items:center;gap:10px;margin-top:16px;color:#fff;}
.scene__bar button{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:10px 14px;transition:background .2s,color .2s;}
.scene__bar button:hover,.scene__bar button[aria-pressed="true"]{background:#fff;color:#000;}
.scene__titre{flex:1;min-width:0;font-size:15px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;}
.scene__titre b{font-weight:600;}
.scene__titre span{color:var(--mute);}
.scene__titre i{font-style:normal;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);}
.poste .scene__titre{order:-1;}
@media (max-width:899px){.poste .cadre-s{width:130%;margin-left:-15%;}}
@media (min-width:900px){.scene{grid-template-columns:1.1fr 1fr;gap:5vw;align-items:end;}}
.vue{-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 58%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 58%,transparent 100%);}
/* la console */
.gb-corps{max-width:calc(92svh * .7466);margin:0 auto;}
.gb{position:absolute;z-index:3;background:rgba(0,0,0,.6);cursor:pointer;-webkit-tap-highlight-color:transparent;}
.gb i{position:absolute;inset:0;background-repeat:no-repeat;border-radius:inherit;transition:transform .14s ease-out,filter .14s;}
.gb--a,.gb--b{border-radius:50%;}
.gb--sel,.gb--st{border-radius:999px;}
.gb--pad{clip-path:polygon(32% 0,68% 0,68% 32%,100% 32%,100% 68%,68% 68%,68% 100%,32% 100%,32% 68%,0 68%,0 32%,32% 32%);}
.gb.on i{transform:translateY(3%) scale(.93);filter:brightness(.78);transition-duration:.05s;}
.gb--pad.on i{filter:brightness(.85);}
.gb--pad.on[data-dir="g"] i{transform:perspective(260px) rotateY(-16deg) scale(.97);}
.gb--pad.on[data-dir="d"] i{transform:perspective(260px) rotateY(16deg) scale(.97);}
.gb--pad.on[data-dir="h"] i{transform:perspective(260px) rotateX(16deg) scale(.97);}
.gb--pad.on[data-dir="b"] i{transform:perspective(260px) rotateX(-16deg) scale(.97);}
.lcd{position:absolute;z-index:1;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px),radial-gradient(ellipse at 50% 40%,transparent 60%,rgba(0,0,0,.35));}
.boot{position:absolute;z-index:1;display:grid;place-items:center;overflow:hidden;background:#c4cf9e;opacity:0;pointer-events:none;transition:opacity .3s;}
.boot b{font-family:var(--display);font-weight:800;font-size:clamp(15px,2.3vw,30px);line-height:1.02;letter-spacing:-.01em;text-align:center;color:#2f3d22;transform:translateY(-220%);}
.boote .boot{opacity:1;transition:none;}
.boote .boot b{animation:gbboot 1.5s steps(14) forwards;}
@keyframes gbboot{to{transform:none;}}
.osd--gb{color:#fff;text-shadow:0 0 4px #000,0 0 1px #000;padding:5% 6%;}
.gb-aide{margin-top:10px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);}
.cine__screen video{position:absolute;inset:0;width:100%;height:100%;background:#000;}
.poste--gb .media{cursor:zoom-in;}
.lab__head h2 .nw{white-space:nowrap;}

/* texte pour Google, les IA et les lecteurs d'écran : présent dans la page, invisible à l'œil (outils/seo-build.mjs) */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}