/* GARDE DESKTOP : le chrome OS mobile (elements injectes dans le body sur toutes les
pages) ne doit JAMAIS s'afficher >=768px. Sans cette regle, ces elements (sans display
defini hors media mobile) tombent dans le flux en taille geante apres le footer. */
@media (min-width:768px){
#app-header,#app-tabbar,#app-sheet,#app-sheet-backdrop,#app-toast,
#app-os-widget,#app-lock,#app-cnotif,#app-install,#app-tuto,#agt6cc-bar{display:none!important}
}
@media (max-width:767.98px){
:root{
--app-bp:767.98px;
/* header OS-telephone = 2 lignes (status bar ~22px + chrome ~44px) -> hauteur portee a 70px */
--app-tabbar-h:60px; --app-header-h:70px; --app-cta-h:58px;
--app-statusbar-h:22px;
/* hauteur que le dock occupe AU-DESSUS de la safe-area (apps + zone home indicator) :
sert a reserver l'espace contenu / CTA / cookies / toast sans toucher 6 endroits.
Intouche par le padding-top du dock (la plaque grandit VERS LE HAUT au-dessus de
cette reserve : aucun masquage de contenu, aucun trou). */
--app-dock-clear:calc(var(--app-tabbar-h) + 22px);
/* respiration interne HAUT du dock : pousse les tuiles vers le bas pour qu'AUCUNE
(y compris l'active soulevee de -4px + son anneau + sa capsule ::before) ne morde
le bord haut de la plaque. La hauteur du nav est augmentee d'autant pour ne pas
comprimer la zone home indicator (22px) ni la reserve --app-dock-clear. */
--app-dock-pad-top:10px;
/* tokens OS-telephone springboard (maquette gta-phone-mockup) */
--app-tile:18px; --app-teal:#00E5C8;
--sa-top:env(safe-area-inset-top,0px); --sa-bottom:env(safe-area-inset-bottom,0px);
--sa-left:env(safe-area-inset-left,0px); --sa-right:env(safe-area-inset-right,0px);
--hit-min:44px; --hit-comfort:48px; --hit-list:56px; --hit-gap:8px;
--app-gutter:16px; --app-radius:16px; --app-radius-sheet:22px;
--app-ease:cubic-bezier(0.16,1,0.3,1);
/* ---- motion (philosophie Emil Kowalski) : courbes fortes reutilisables. ----
--ease-out : decelere franc (feedback, slide horizontal page).
--ease-ios : courbe iOS "ouverture d'app" (expansion overlay rect->plein ecran). */
--ease-out:cubic-bezier(0.23,1,0.32,1);
--ease-ios:cubic-bezier(0.32,0.72,0,1);
--app-push-dur:300ms; --app-sheet-dur:320ms; --app-header-dur:220ms;
/* ---- DA Vice City : faux-verre SANS backdrop-filter (interdit sous 768px).
Le verre est EVOQUE par dégradés indigo empilés + halo radial sunset +
bordure néon + inset highlight + ombre colorée. Aucun flou en direct. ---- */
--app-accent:#FF2E93; --app-accent-2:#FF6B35; --app-gold:#FFB347;
--app-magenta:#C2185B; --app-ink:#F2EAD8;
/* surfaces opaques teintées (lisent "glass nuit Vice City", pas "barre d'OS") :
linear indigo profond + voile rose tres bas, empiles. */
--app-surface:linear-gradient(180deg,rgba(28,18,64,0.97) 0%,rgba(18,11,40,0.98) 60%,rgba(12,7,28,0.99) 100%);
--app-bar:linear-gradient(180deg,rgba(22,13,48,0.985) 0%,rgba(11,7,24,0.99) 100%);
/* halo sunset cousu (gradient, pas blur) : signe le rose/sunset du site. */
--app-halo:radial-gradient(120% 130% at 18% -10%,rgba(255,46,147,0.16) 0%,rgba(255,107,53,0.06) 42%,transparent 70%);
/* bordures néon PRESENTES (le site signe a ~.38-.42, pas .16 fantome). */
--app-border:rgba(255,46,147,0.30);
--app-border-soft:rgba(255,255,255,0.08);
--app-inset:inset 0 1px 0 rgba(255,255,255,0.10); /* highlight haut faux-verre */
--app-glow:0 -10px 36px -8px rgba(255,46,147,0.26); /* ombre colorée portée */
}
/* ---- piege sticky : overflow-x clip (pas hidden) sur html/body ----
styles-mch impose `overflow-x:hidden!important` (2x) sur html,body. Notre bloc
est dans le APRES le , donc a specificite egale + meme
!important il gagne (dernier declare). On force aussi overflow-y a son defaut
pour qu'aucun shorthand n'introduise overflow-y:auto sur html (sinon double
scrollbar / ancrage casse). overflow-x reste clip pour les sticky app. ---- */
html{overflow-x:clip!important;overflow-y:visible!important;max-width:100vw!important}
body{overflow-x:clip!important;max-width:100vw!important}
/* ---- coupe perf section 4 : intro / parallax / blends en continu ---- */
#vc-intro{display:none!important}
html.vc-lock{overflow-x:clip!important;overflow-y:visible!important} /* intro masquee : pas de lock, mais clip sur x */
/* NE PAS reintroduire `overflow:auto` (shorthand) ici : il reposerait overflow-x:auto
et casserait le clip des sticky app + creerait le double-scroll (defaut QA #4).
Le scroll vertical est deja l'etat naturel de html ; on force juste le longhand. */
html.vc-intro-on{overflow-x:clip!important;overflow-y:visible!important}
/* backdrop-filter -> coupe BALAI sous 768px (l'app shell est opaque par design,
spec section 4 : aucun blur ne doit survivre). styles-mch + nav-stack posent du
backdrop-filter avec !important sur de nombreuses surfaces (sections, footer,
.mch-section, .qm-card, countdown, boutons, etc.) ; enumerer en rate toujours
une, on coupe donc au selecteur universel. Le blur sur de larges surfaces
pendant le scroll = repaint cher (suspect n1 de jank). Critere : 0 element
visible avec backdrop-filter != none sous 768px.
Exception : la banniere cookies (#agt6cc) garde son blur (overlay ponctuel,
pas une surface scrollee, et au-dessus de tout). */
/* 1. balai universel : ecrase tout backdrop-filter NON-important (CSS de page
inline : .qm-card, .countdown-unit, .btn, .notify-btn, .hero-badge...). */
*:not(#agt6cc):not(#agt6cc-reopen):not(.qm-card):not(.mch-pick):not(.setup-pill):not(.ed-bonus):not(.article-card):not(.video-card):not(details),
*:not(#agt6cc):not(#agt6cc-reopen):not(.qm-card):not(.mch-pick):not(.setup-pill):not(.ed-bonus):not(.article-card):not(.video-card):not(details)::before,
*:not(#agt6cc):not(#agt6cc-reopen):not(.qm-card):not(.mch-pick):not(.setup-pill):not(.ed-bonus):not(.article-card):not(.video-card):not(details)::after{
backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
/* 2. liste explicite RENFORCEE (html body ...) : bat les backdrop-filter !important
plus specifiques de styles-mch + nav-stack, que le `*` (0,0,0) ne peut pas battre
a egalite de !important quand la source est plus specifique. */
html body .platforms-section,html body .manifesto-section,html body .articles-section,
html body .faq-section,html body #faq,html body .setup-section,html body .leonida-section,
html body .trailer-section,html body .final-explosion,html body .final-cta,
html body #quickmenu,html body #notify,html body .article-body,html body .article-wrap,
html body #plateformes.mch-section,html body #platforms.mch-section,html body .mch-section,
html body .hero,html body .article-hero,html body .gallery-hero,
html body footer,html body>footer,
html body #site-header,html body .lang-toggle,html body .nav-drawer,html body .sticky-bar{
backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
/* P2-BACKDROP-CARDS-STATIC : reallume backdrop-filter sur les cards FIXES (pas de scroll continu).
Le balai * ci-dessus + la liste explicite coupent tout, y compris les cards statiques qui
n'ont aucune impact perf au scroll. On les reallume avec specificite (html body ...) + !important
pour battre les regles de page. Elements cibles : cartes springboard, picks plateformes,
pills setup, bonus editions, cards articles, cards video, FAQ accordion.
Le header/dock/sticky restent OFF (perf scroll maintenue). */
html body .qm-card,
html body .mch-pick,
html body .setup-pill,
html body .ed-bonus,
html body .article-card,
html body .video-card,
html body .faq-list details{
backdrop-filter:blur(16px) saturate(1.3)!important;
-webkit-backdrop-filter:blur(16px) saturate(1.3)!important;
}
@media (prefers-reduced-transparency:reduce){
html body .qm-card,html body .mch-pick,html body .setup-pill,html body .ed-bonus,
html body .article-card,html body .video-card,html body .faq-list details{
backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
}
/* P3-SECTION-GUTTER-UNIFORM : uniformise le padding lateral de toutes les sections
de contenu a var(--app-gutter) = 16px sous 768px. Les CSS de page donnent des
valeurs disparates (0px pour setup, 24px pour articles, herites de styles-mch).
On force le padding gauche+droite des wrappers de section avec specificite
html body + !important. Les paddings vertical ne sont pas touches. */
html body .mch-wrap,html body .mch-section>.mch-intro,
html body .setup-head,html body .setup-section>.setup-head,
html body .articles-wrap,
html body .faq-wrap,html body .faq-section>.faq-wrap,
html body .leonida-section>.leonida-stage,
html body .trailer-stage{
padding-left:var(--app-gutter)!important;
padding-right:var(--app-gutter)!important;
}
/* mch-section elle-meme : force padding lateral uniforme (bat le 0px du CSS page) */
html body .mch-section,html body #plateformes.mch-section,html body #platforms.mch-section,
html body #editions.mch-section{
padding-left:var(--app-gutter)!important;
padding-right:var(--app-gutter)!important;
}
/* P3V2-MARGIN-SECTIONS : unifie la MARGE laterale (pas le padding) de #articles et #setup
a 16px pour que leur width = 390-32 = 358px, identique a .mch-section (width:calc(100%-32px)).
CAUSE RACINE : styles-mch pose margin:18px 12px!important (0,1,0)!important sur ces sections
=> 390-24=366px. La passe precedente touchait au padding (sans effet sur la width en
box-sizing:border-box). FIX : on cible les MARGES avec ID-scope (1,0,0)!important. */
#articles,#setup{
margin-left:16px!important;
margin-right:16px!important;
}
/* parallax hero off : neutralise le transform JS sur .hero-bg */
.hero-bg{transform:none!important;background-attachment:scroll!important}
/* ---- neutralise la nav pill/drawer existante, on monte la tab bar a la place.
Specificite RENFORCEE (html body ...) : nav-stack vit dans le donc PLUS LOIN
en ordre source ; a specificite egale il gagnerait. On le bat avec un niveau de plus. ---- */
html body #site-header,html body .nav-drawer,html body .nav-burger,
html body .lang-toggle,html body #info-pill{display:none!important}
/* ===================== HEADER APP retractable ===================== */
html body header#app-header.app-header{
position:fixed!important;top:0!important;bottom:auto!important;left:0!important;right:0!important;z-index:340!important;
width:auto!important;max-width:none!important;margin:0!important;border-radius:0!important;
height:calc(var(--app-header-h) + var(--sa-top));
padding-top:var(--sa-top);padding-bottom:0;
padding-left:max(var(--app-gutter),var(--sa-left));
padding-right:max(var(--app-gutter),var(--sa-right));
/* 2 lignes empilees : status bar OS-telephone + chrome fonctionnel */
display:flex;flex-direction:column;justify-content:flex-start;gap:0;
overflow:hidden;
/* faux-verre : halo sunset cousu PAR-DESSUS la surface indigo (2 couches gradient,
0 backdrop-filter). La bordure basse néon + l'ombre colorée portée signent la DA. */
background:var(--app-halo),var(--app-surface);
border-bottom:1px solid var(--app-border);
box-shadow:0 6px 24px -10px rgba(255,46,147,0.30),var(--app-inset);
/* PAS de transition ni will-change sur le header lui-meme (P2.3) :
la transition est portee par .app-chrome ci-dessous. */
}
/* P1.1 : .app-chrome (LIGNE 2 uniquement) se retracte.
translateY(-100%) fait monter le chrome de sa propre hauteur vers le haut.
Le header clippe ce debordement (overflow:hidden ci-dessus) -> seule la statusbar
(LIGNE 1, AVANT le chrome dans le flux flex) reste visible.
flex-shrink:0 + flex-basis:auto garantit que le chrome garde sa hauteur (44px) meme
quand il est translate : le header reste stable a var(--app-header-h) + sa-top. */
html body header#app-header.app-header .app-chrome{
flex:0 0 auto;
transition:transform var(--app-header-dur) var(--app-ease);
}
html body header#app-header.app-header .app-chrome.app-chrome-hidden{
transform:translateY(-100%);
visibility:hidden;
}
@media (prefers-reduced-motion:reduce){
html body header#app-header.app-header .app-chrome{transition-property:opacity!important}
html body header#app-header.app-header .app-chrome.app-chrome-hidden{
transform:none!important;opacity:0;
}
}
/* ---- LIGNE 1 : barre d'etat OS-telephone (LEONIDA + reseau + wifi + 5G + heure + batterie) ----
Decorative : aucun contenu indexable, aria-hidden sur le markup.
2e passe 2026-06-23 : "vrai haut d'OS mobile". 3 zones tripartites iOS : gauche
(operateur+signal), centre (heure), droite (cluster data cisele wifi+5G+batterie).
Le centre est cale en absolu pour un vrai centrage optique meme flancs asymetriques.
PROFONDEUR systeme : la barre d'etat porte une plaque/teinte propre (::before, gradient
indigo plus sombre + liseré bas) qui la DETACHE de la ligne identite -> hierarchie nette
"barre OS au-dessus du chrome", sans aucun backdrop-filter. */
.app-statusbar{
position:relative;
display:flex;align-items:center;justify-content:space-between;
height:var(--app-statusbar-h);flex:0 0 auto;
/* renfonce la barre d'etat dans les marges du header pour que la plaque file bord-a-bord */
margin:0 calc(-1 * max(var(--app-gutter),var(--sa-left))) 2px calc(-1 * max(var(--app-gutter),var(--sa-right)));
padding:0 max(var(--app-gutter),var(--sa-left));
font-family:'Barlow',sans-serif;font-size:11px;font-weight:600;letter-spacing:.02em;
color:var(--app-ink);text-shadow:0 1px 3px rgba(7,5,15,.9);line-height:1;
}
/* plaque systeme : teinte indigo plus profonde que la ligne identite + liseré bas tres
fin -> la barre d'etat se LIT comme une couche OS distincte (hierarchie), 0 blur. */
/* plaque cinematique discrete (3e passe) : degrade indigo 3 stops (sombre haut ->
creux bas) + liseré bas rose tres fin + DOUBLE inset (highlight haut fin + ombre
interne basse) -> la barre OS a une vraie profondeur de couche, sans crier. Reste
un FOND (opacites basses, c'est la hierarchie qui parle, pas la couleur). */
.app-statusbar::before{content:'';position:absolute;inset:0;z-index:-1;
background:linear-gradient(180deg,rgba(5,3,14,.62) 0%,rgba(9,5,20,.40) 55%,rgba(12,7,26,.22) 100%);
border-bottom:1px solid rgba(255,46,147,.12);
box-shadow:inset 0 1px 0 rgba(255,255,255,.055),inset 0 -3px 6px -4px rgba(0,0,0,.45)}
.app-sb-left{display:flex;align-items:center;gap:7px;min-width:0}
/* operateur LEONIDA : micro-typo de marque + petit glyphe d'identite GTA in-game.
Le glyphe (.app-sb-mark) = losange rose galbe facon "logo reseau grave", sobre,
pose avant le wordmark. Antonio condense, tracking large, accent rose contenu. */
.app-sb-carrier{display:inline-flex;align-items:center;gap:5px;
font-family:'Antonio','Bebas Neue',sans-serif;font-weight:700;
font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--app-accent);
text-shadow:0 0 10px rgba(255,46,147,.35),0 1px 3px rgba(7,5,15,.9)}
.app-sb-mark{width:8px;height:8px;flex:0 0 auto;border-radius:2px;transform:rotate(45deg);
background:linear-gradient(135deg,var(--app-accent) 0%,var(--app-magenta) 100%);
box-shadow:0 0 7px rgba(255,46,147,.55),inset 0 0 0 .5px rgba(255,255,255,.35)}
/* indicateur reseau cisele : 4 barres montantes a coins arrondis, remplies en degrade
cream (signal capte) ou estompees (.off). Largeur 3px + radius 1.5px = galbe OS mobile,
pas un trait sec. align flex-end pour la marche d'escalier propre. */
.app-sb-net{display:flex;align-items:flex-end;gap:2.5px;height:10px}
/* barres pleines : degrade cream + micro highlight gauche (liseré .5px clair) = galbe
cylindrique fin, pas un trait plat. Ombre portee tres basse pour decoller du fond. */
.app-sb-net i{width:3px;border-radius:1.5px;display:block;
background:linear-gradient(180deg,#FFF6E9 0%,var(--app-ink) 100%);
box-shadow:inset .5px 0 0 rgba(255,255,255,.3),0 .5px 1px rgba(7,5,15,.4)}
.app-sb-net i:nth-child(1){height:4px}
.app-sb-net i:nth-child(2){height:6px}
.app-sb-net i:nth-child(3){height:8px}
.app-sb-net i:nth-child(4){height:10px}
.app-sb-net i.off{background:rgba(242,234,216,.28)}
/* ---- CLUSTER DROIT cisele : mute + wifi + 5G + batterie, alignes et espaces au cordeau (rythme iOS).
gap 7px entre groupes, baseline commune, glyphes de meme hauteur optique (~10-11px).
Le bouton mute (son OS) est pose EN TETE du cluster droit, calé sur la meme baseline ;
hit-area 44px assure par un pseudo (le glyphe reste petit ~13px pour ne pas bousculer
la rangee ni la collision avec l'heure centrale a 320px). ---- */
.app-sb-right{display:flex;align-items:center;gap:7px}
/* bouton mute du son OS : glyphe haut-parleur cisele, meme palette cream que le cluster.
C'est un VRAI