/* =============================================================================
arcade.css — la direction artistique « arcade », posée PAR-DESSUS landing.css.
Pourquoi un fichier à part plutôt qu'une réécriture de landing.css :
landing.css sert aussi les pages légales, la 404 et /partenaires. Tant que la
nouvelle DA n'est pas validée, on ne veut pas qu'elle déborde dessus. Tout ce
qui suit est donc préfixé par « body.arcade », et seules les pages qui
portent cette classe changent d'allure. Le jour où la DA est adoptée
partout, on ajoute la classe aux autres pages ; le jour où elle est
abandonnée, on retire une ligne de . Aucun des deux ne casse le jeu.
Le levier principal n'est PAS dans ce fichier : c'est le bloc de jetons
ci-dessous. Les feuilles existantes passent déjà par var(--…) à près de 600
endroits, donc redéfinir une vingtaine de variables repeint la page entière
sans y toucher. On ne réécrit à la main que ce qui ne peut pas passer par un
jeton : les polices de titre, les bordures et la structure.
Ce que « arcade » veut dire, en une phrase : l'ombre floue et douce devient
une ombre DURE et décalée, et chaque surface gagne un contour d'encre épais.
============================================================================= */
/* ---------------------------------------------------------------------------
1 · LES JETONS
La palette de marque ne change quasiment pas : le violet est au pixel près
celui d'avant (#7C5CFF). Ce qui bouge vraiment, c'est l'encre (beaucoup plus
sombre, presque noire) et le vert (menthe → acide). Le bleu disparaît de la
maquette ; on le renvoie sur le violet profond pour que le bouton
« Rejoindre » ne se confonde pas avec « Créer ».
--------------------------------------------------------------------------- */
body.arcade {
/* Le violet de la maquette (#7C5CFF) ne donne que 4,35:1 avec du texte blanc
et 4,35:1 sur fond clair : sous le seuil de 4,5 exigé pour du texte normal.
Mesuré, pas supposé. On garde donc DEUX violets : le vif pour les aplats
décoratifs et les ombres, le profond partout où du texte se pose dessus.
À l'œil la différence est mince, à la lecture elle ne l'est pas. */
--grape: #5A3BE0; /* 6,69:1 avec du blanc, 6,69:1 sur le papier */
--grape-vif: #7C5CFF; /* la teinte de marque, pour le décor uniquement */
--coral: #FF5CA8;
--lime: #A8E830;
--sun: #FFD23F;
--sky: #5A3BE0; /* plus de bleu dans la charte : violet profond */
--ink: #1B1038;
--ink-soft: #3D3160; /* assez sombre pour rester lisible sur le papier */
--card: #FFFFFF;
--line: #1B1038; /* les filets deviennent des contours d'encre */
--paper: #FFF6E9;
--bg1: #FFF6E9;
--bg2: #FFF6E9;
--bg3: #FFF6E9;
--r-lg: 24px;
--r-md: 16px;
--r-sm: 12px;
/* Le cœur de la DA : des ombres portées SANS flou, décalées en diagonale. */
--shadow-card: 8px 8px 0 var(--ink);
--shadow-soft: 4px 4px 0 var(--ink);
--bord: 3px solid var(--ink);
--bord-gros: 4px solid var(--ink);
--titre: "Titan One", "Fredoka", system-ui, sans-serif;
}
/* Fond plat : la maquette n'a ni dégradé ni bulle. On neutralise les deux.
Le bandeau incliné et les cartes pivotées dépassent volontairement de la
largeur utile ; sans cette coupe, ça ajoute une barre de défilement
horizontale de quelques pixels, très visible sur mobile. */
body.arcade { background: var(--paper); overflow-x: hidden; }
body.arcade .blobs { display: none; }
/* base.css peint le dégradé sur « html, body » : neutraliser body ne suffit
pas, l'ancien fond réapparaissait en bande sous le pied de page quand la
page est plus courte que la fenêtre. On ne peut pas poser de classe sur
depuis le HTML des pages, d'où le :has(). */
html:has(body.arcade) { background: #FFF6E9; }
/* ---------------------------------------------------------------------------
2 · LES TITRES
Titan One n'existe qu'en une seule graisse et se comporte mal en petit : on
le réserve aux titres, et le corps de texte reste en Nunito. Les capitales
sont posées seulement sur h1/h2 — au-delà, ça crie.
--------------------------------------------------------------------------- */
body.arcade .land-hero-txt h1,
body.arcade .land-sec h2,
body.arcade .land-cta h2 {
font-family: var(--titre); font-weight: 400;
text-transform: uppercase; letter-spacing: .5px;
line-height: 1.02;
}
body.arcade .land-h3,
body.arcade .land-step h3,
body.arcade .feat h3,
body.arcade .flow-txt h4,
body.arcade .partner-txt h3,
body.arcade .se-title,
body.arcade .sf-col h4,
body.arcade .sc-name {
font-family: var(--titre); font-weight: 400; letter-spacing: .2px;
}
/* ---------------------------------------------------------------------------
3 · LES BOUTONS
Le bouton « bonbon » avait un reflet en dégradé sur le dessus et une ombre
floue. En arcade, il est plat, cerné d'encre, et s'enfonce à l'appui.
--------------------------------------------------------------------------- */
body.arcade .candy {
font-family: var(--titre); font-weight: 400; letter-spacing: .3px;
border: var(--bord); border-radius: var(--r-md);
box-shadow: 0 5px 0 var(--ink);
color: #fff;
}
body.arcade .candy::before { display: none; } /* plus de reflet verni */
body.arcade .candy:hover { filter: none; transform: translateY(-2px); box-shadow: 0 7px 0 var(--ink); }
body.arcade .candy:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
body.arcade .candy:disabled { opacity: .5; box-shadow: 0 5px 0 var(--ink); transform: none; }
body.arcade .candy-grape { background: var(--grape); }
/* ENCRE, pas blanc. Le rose de la charte est un aplat clair : du blanc dessus
donne 2,86:1 quand l'encre monte à 6,24. Et ce bouton-là n'est pas décoratif,
c'est « J'ai fini ! », celui qu'on presse à chaque manche. */
body.arcade .candy-coral { background: var(--coral); color: var(--ink); }
body.arcade .candy-sky { background: var(--sky); }
body.arcade .candy-lime { background: var(--lime); color: var(--ink); }
body.arcade .candy-sun { background: var(--sun); color: var(--ink); }
body.arcade .candy-ghost { background: #fff; color: var(--ink); box-shadow: 0 4px 0 var(--ink); }
/* Le CTA principal reprend le jaune de la maquette plutôt que le vert acide :
sur le violet du hero, le vert et le violet se battent. */
body.arcade .land-create,
body.arcade #landCta { background: var(--sun); color: var(--ink); }
/* ---------------------------------------------------------------------------
3 bis · LE PIÈGE DE --line
Ce jeton portait deux sens à la fois : un filet clair ET une surface grise
discrète. En le passant à l'encre, les 42 bordures qui l'utilisent gagnent
le contour arcade gratuitement — mais les 14 endroits où il sert de FOND
deviendraient des pavés noirs avec du texte gris dessus.
On les récupère ici, tous ensemble, avec un jeton qui ne dit qu'une chose.
Deux de ces endroits vivent dans une modale et quatre dans un survol : ni la
capture d'écran ni l'audit de contraste ne les auraient montrés.
--------------------------------------------------------------------------- */
body.arcade { --surface-douce: #EFE7F5; }
body.arcade .kbd,
body.arcade .seg,
body.arcade .plr-av.dots,
body.arcade .chat-sys,
body.arcade .tool-kbd,
body.arcade .bvar-kbd,
body.arcade .auth-x,
body.arcade .pf-gout-img,
body.arcade .pf-succ,
body.arcade .plr-edit:hover,
body.arcade .primary-undo:hover,
body.arcade .lien-connexion:hover,
body.arcade .cpt-lien:hover { background: var(--surface-douce); color: var(--ink); }
body.arcade .auth-or::before, body.arcade .auth-or::after { background: var(--ink); }
/* ---------------------------------------------------------------------------
4 · LES SURFACES
Toutes les cartes prennent le même traitement : contour d'encre + ombre dure.
Les légères rotations donnent le côté « collé à la main » de la maquette ;
elles sont annulées plus bas si la personne a demandé moins d'animation.
--------------------------------------------------------------------------- */
body.arcade .land-step,
body.arcade .feat,
body.arcade .flow-row,
body.arcade .stream-card,
body.arcade .stream-empty,
body.arcade .faq-list details,
body.arcade .partner,
body.arcade .vid-frame {
background: var(--card);
border: var(--bord-gros);
border-radius: var(--r-lg);
box-shadow: var(--shadow-card);
}
body.arcade .stream-empty { border-style: solid; } /* le pointillé n'a plus lieu d'être */
/* Le bloc partenaires prend le violet de marque plutôt que le vert acide :
même règle que le bandeau du salon, le vert est fait pour les boutons. Et
son bouton passe au jaune — violet sur violet, c'est le piège dans lequel
je viens de tomber une fois. */
body.arcade .partner { background: var(--grape); }
/* TOUT le texte du bloc, pas seulement celui que j'avais en tête. J'ai fait
deux fois la même erreur en une heure : changer un fond sans revérifier ce
qui est écrit dessus. Ici le paragraphe et la note sous les têtes d'animaux
étaient restés en encre douce, à 2,66:1 sur le violet. D'où une règle qui
prend le bloc entier plutôt que deux sélecteurs choisis à la main. */
body.arcade .partner, body.arcade .partner p, body.arcade .partner h3,
body.arcade .partner .pf-note { color: #fff; }
body.arcade .partner p, body.arcade .partner .pf-note { color: rgba(255, 255, 255, .94); }
body.arcade .partner .candy-grape { background: var(--sun); color: var(--ink); }
body.arcade .vid-frame { background: #EDE7FF; }
/* Les trois cartes « comment jouer » : une couleur d'ombre par carte, et une
inclinaison alternée. C'est la signature visuelle de la maquette. */
body.arcade .land-steps { gap: 26px; }
body.arcade .land-step:nth-child(1) { transform: rotate(-1.5deg); box-shadow: 8px 8px 0 var(--grape-vif); }
body.arcade .land-step:nth-child(2) { transform: rotate(1.5deg); box-shadow: 8px 8px 0 var(--coral); }
body.arcade .land-step:nth-child(3) { transform: rotate(-1deg); box-shadow: 8px 8px 0 #6BB520; }
body.arcade .ls-num {
background: var(--sun); color: var(--ink);
border: var(--bord); box-shadow: none;
font-family: var(--titre); font-weight: 400;
}
/* Les quatre cartes « pourquoi tu vas adorer » sont pleines de couleur. */
body.arcade .feat-grid { gap: 22px; }
body.arcade .feat { box-shadow: 6px 6px 0 var(--ink); }
body.arcade .feat:nth-child(1) { background: var(--sun); }
body.arcade .feat:nth-child(2) { background: var(--coral); }
body.arcade .feat:nth-child(3) { background: var(--grape); }
/* La quatrième carte quitte le vert acide pour un lavande calme. Quatre aplats
saturés côte à côte, ça se dispute l'attention ; trois couleurs et un neutre
se lisent mieux. */
body.arcade .feat:nth-child(4) { background: var(--surface-douce); }
/* Sur le rose, l'encre passe à 6,24:1 quand le blanc plafonnait à 2,86. */
body.arcade .feat:nth-child(1) h3, body.arcade .feat:nth-child(1) p,
body.arcade .feat:nth-child(2) h3, body.arcade .feat:nth-child(2) p,
body.arcade .feat:nth-child(4) h3, body.arcade .feat:nth-child(4) p { color: var(--ink); }
body.arcade .feat:nth-child(3) h3, body.arcade .feat:nth-child(3) p { color: #fff; }
/* La pastille d'emoji perdait son sens sur un fond déjà coloré : on la retire
et l'emoji vit directement sur la carte. */
body.arcade .feat-emo { background: none !important; width: auto; height: auto; margin: 0 0 8px; font-size: 38px; }
body.arcade .flow-shot { border: var(--bord); border-radius: var(--r-md); box-shadow: none; }
body.arcade .land-badges li { background: #fff; border: var(--bord); box-shadow: 3px 3px 0 var(--ink); font-weight: 800; }
/* ---------------------------------------------------------------------------
5 · LE HEADER
Il devient une barre violette pleine, cernée d'encre, au lieu du voile
translucide flouté.
--------------------------------------------------------------------------- */
body.arcade .hero {
background: var(--grape);
backdrop-filter: none;
border-bottom: var(--bord-gros);
}
body.arcade .hero-brand { color: #fff; font-family: var(--titre); font-weight: 400; letter-spacing: .5px; }
body.arcade .hero-emoji { background: #fff; border: var(--bord); border-radius: 12px; padding: 3px; }
/* CETTE RÈGLE NE VISE QUE LES LIENS DE NAVIGATION.
Une fois connecté, auth-ui.js remplace le bouton par un
qui porte le pseudo. Sans l'exclusion ci-dessous, « .hero-nav a » lui donnait
du blanc — sur son fond blanc. Le pseudo devenait invisible sur toutes les
pages sauf l'accueil, où une autre règle le rattrapait par hasard.
landing.css documente déjà ce piège quinze lignes plus haut, pour le bouton
« Jouer ». Il ne suffit pas de traiter les cas connus : la règle elle-même
doit dire qui elle vise. */
body.arcade .hero-nav a:not(.auth-btn):not(.nav-cta) { color: #fff; font-weight: 800; }
body.arcade .hero-nav a:not(.auth-btn):not(.nav-cta):hover { color: var(--sun); }
body.arcade .hero-nav a.nav-cta, body.arcade .hero-nav a.nav-cta:hover { color: var(--ink); }
/* Et on redit explicitement la couleur du bouton de compte, pour que sa
lisibilité ne dépende plus de l'ordre des feuilles. */
body.arcade .hero-nav a.auth-btn, body.arcade .hero-nav a.auth-btn .auth-nom { color: var(--ink); }
body.arcade .nav-cta { background: var(--sun); color: var(--ink); border-radius: 999px; }
body.arcade .hero-live { background: rgba(255,255,255,.16); color: #fff; border: 2px solid rgba(255,255,255,.4); }
/* ---------------------------------------------------------------------------
6 · LE HERO
Bande violette pleine largeur, titre en capitales avec ombre portée d'encre,
et l'image dans un cadre incliné.
--------------------------------------------------------------------------- */
/* La grille à deux colonnes remonte d'un cran : c'est .land-hero-inner qui la
porte désormais, et .land-hero n'est plus qu'une bande pleine largeur. Sans
ce « display: block », l'enveloppe se retrouvait coincée dans la première
colonne de l'ancienne grille, à la moitié de la largeur. */
body.arcade .land-hero {
display: block; max-width: none; padding: 0;
background: var(--grape);
position: relative; overflow: hidden;
}
/* Les hachures diagonales du fond, en pur CSS (aucune image à charger). */
body.arcade .land-hero::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: repeating-linear-gradient(-45deg, rgba(255,255,255,.06) 0 26px, transparent 26px 60px);
}
body.arcade .land-hero-inner {
position: relative; z-index: 1;
max-width: 1120px; margin: 0 auto; padding: 56px 34px 88px;
display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center;
}
body.arcade .land-eyebrow {
background: var(--lime); color: var(--ink);
border: var(--bord); border-radius: 999px;
transform: rotate(-2deg); font-weight: 900; font-size: 14px; padding: 8px 16px;
font-family: "Nunito", system-ui, sans-serif;
}
body.arcade .land-hero-txt h1 { font-size: clamp(38px, 5.4vw, 62px); color: #fff; margin: 20px 0 14px; }
/* landing.css met TOUT « h1 span » en dégradé découpé sur le texte, donc en
couleur transparente. Nos deux spans se faisaient attraper au passage et le
titre était purement invisible. On annule le découpage avant de recolorer. */
body.arcade .land-hero-txt h1 span {
background: none; -webkit-background-clip: border-box; background-clip: border-box;
color: inherit; -webkit-text-fill-color: currentColor;
}
/* Les trois verbes sont l'accroche de marque ; la phrase qui suit porte les
mots-clés. Les deux vivent dans le MÊME h1 : on gagne l'impact sans rien
retirer à ce que Google lit. */
body.arcade .h1-verbes { display: block; }
/* Empilés, les verbes n'ont plus besoin de la marge qui les séparait en ligne :
elle décalait chaque verbe un peu plus à droite que le précédent. */
/* Le rose sur le violet ne donne que 2,34:1 : sans contour, le troisième verbe
serait le texte le moins lisible de la page — et c'est le h1. L'ombre portée
devient donc un vrai cerne sur les quatre côtés, ce qui est de toute façon
l'idiome arcade. La lisibilité ne dépend plus de la couleur. */
body.arcade .h1-verbes b {
display: block; margin-left: 0; font-weight: 400;
text-shadow: 4px 4px 0 var(--ink),
2px 0 0 var(--ink), -2px 0 0 var(--ink),
0 2px 0 var(--ink), 0 -2px 0 var(--ink);
}
body.arcade .h1-verbes b:nth-child(1) { color: #fff; }
body.arcade .h1-verbes b:nth-child(2) { color: var(--sun); }
body.arcade .h1-verbes b:nth-child(3) { color: var(--coral); }
body.arcade .h1-seo {
display: block; margin-top: 12px;
font-family: "Nunito", system-ui, sans-serif; font-weight: 800;
font-size: 17px; letter-spacing: 0; text-transform: none; color: rgba(255,255,255,.92);
}
body.arcade .land-lead { color: rgba(255,255,255,.94); font-size: 18px; font-weight: 700; }
body.arcade .land-pseudo { color: rgba(255,255,255,.9); }
body.arcade .land-pseudo input, body.arcade .land-join input {
border: var(--bord); border-radius: 14px; box-shadow: 0 4px 0 var(--ink); font-weight: 800;
}
body.arcade .land-pseudo input:focus, body.arcade .land-join input:focus { border-color: var(--ink); box-shadow: 0 4px 0 var(--sun); }
body.arcade .land-join-toggle { color: #fff; text-decoration: underline; text-underline-offset: 4px; font-weight: 800; }
body.arcade .land-join-toggle:hover { color: var(--sun); }
body.arcade .land-err { color: var(--sun); font-weight: 800; }
body.arcade .lhv-frame {
border: var(--bord-gros); border-radius: 26px; overflow: visible;
box-shadow: 12px 12px 0 var(--ink); transform: rotate(3deg); background: #fff; padding: 12px;
}
body.arcade .lhv-frame img { border: var(--bord); border-radius: 16px; }
/* Encre et non blanc : sur le rose, le blanc tombe à 2,86:1 quand l'encre
monte à 6,24:1. La pastille reste rose, elle devient lisible. */
body.arcade .lhv-badge {
left: auto; right: -14px; bottom: -20px;
background: var(--coral); color: var(--ink); border: var(--bord);
transform: rotate(-4deg); font-family: var(--titre); font-weight: 400;
}
/* ---------------------------------------------------------------------------
7 · LE BANDEAU DÉFILANT
Le seul morceau de HTML que la maquette ajoute vraiment. Il chevauche le bas
du hero, d'où la marge négative.
--------------------------------------------------------------------------- */
body.arcade .arc-marquee {
display: block; /* landing.css le masque hors DA arcade */
position: relative; z-index: 5; margin-top: -40px;
background: var(--ink); color: var(--sun);
border-block: var(--bord-gros);
padding: 18px 0; overflow: hidden;
/* PAS DE scale() ICI. C'était la cause du flou : le navigateur rastérise le
texte à sa taille naturelle puis agrandit la couche de 3 %, et Titan One
en 18 px ne pardonne pas cet étirement. Le calcul montre d'ailleurs qu'il
n'apportait rien : à 1 degré, un bandeau de 966 px ne déborde que de
0,5 px à l'horizontale et bascule de 8 px à ses extrémités. On couvre donc
ça par la géométrie — un peu plus large, un peu plus haut — au lieu de
l'obtenir en étirant une image déjà dessinée. */
transform: rotate(-1deg);
width: 106%; margin-left: -3%;
}
body.arcade .arc-marquee-piste { display: flex; width: max-content; animation: arcDefile 26s linear infinite; }
body.arcade .arc-marquee-piste > span {
display: flex; gap: 40px; padding-right: 40px; white-space: nowrap;
font-family: var(--titre); font-weight: 400; font-size: 18px; text-transform: uppercase;
}
body.arcade .arc-marquee-piste i { font-style: normal; opacity: .6; }
@keyframes arcDefile { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* ---------------------------------------------------------------------------
8 · LES BANDES DE SECTION
Le voile blanc translucide n'a plus de fond à laisser voir : on l'enlève.
La section « en détail » passe en fond sombre, comme dans la maquette.
--------------------------------------------------------------------------- */
body.arcade .land-band { background: none; border-block: none; }
body.arcade .land-sec h2 { color: var(--ink); font-size: clamp(28px, 3.6vw, 44px); }
body.arcade .land-sub { color: var(--ink-soft); font-weight: 800; }
/* Le bandeau est incliné et débordant : la section qui suit doit lui laisser de
l'air, sinon la carte verte lui monte dessus.
Le dégagement va sur la SECTION, pas sur la carte. Posé sur « .land-sec », il
atterrissait dans la carte verte elle-même, qui se retrouvait avec 76 px de
marge en haut contre 40 sur ses trois autres côtés. Mesuré, pas vu. */
body.arcade .arc-marquee + .land-band,
body.arcade .arc-marquee + .land-sec { padding-top: 34px; }
body.arcade .defi-teaser {
background: var(--lime); border: var(--bord-gros); border-radius: 28px;
box-shadow: 10px 10px 0 var(--ink); max-width: 1120px; padding: 40px;
text-align: left;
}
/* Le bloc était centré et empilé. La maquette le met sur deux colonnes, texte
à gauche et bouton à droite : c'est plus court et le bouton tombe sous l'œil
au lieu d'attendre en bas. Uniquement du CSS, le HTML ne bouge pas. */
body.arcade .defi-teaser .dt-txt {
max-width: none; margin: 0;
display: grid; grid-template-columns: 1fr auto; gap: 10px 34px; align-items: center;
}
body.arcade .defi-teaser h2 { grid-column: 1; margin: 0; text-align: left; }
body.arcade .defi-teaser p { grid-column: 1; margin: 0; text-align: left; font-weight: 700; color: var(--ink); }
body.arcade .defi-teaser .candy {
grid-column: 2; grid-row: 1 / 3; justify-self: end;
background: var(--ink); color: var(--sun); font-size: 18px; padding: 18px 30px;
}
/* Le lecteur vidéo gardait son pastillage en dégradé et son ombre floue. */
body.arcade .vid-play { background: var(--coral); border: var(--bord); box-shadow: 0 5px 0 var(--ink); color: var(--ink); }
body.arcade .vid-soon { color: var(--ink); font-weight: 800; }
body.arcade .land-how { background: none; }
body.arcade .land-h3 { color: var(--ink); }
body.arcade .flow-tag {
display: inline-block; background: var(--sun); color: var(--ink);
border: var(--bord); border-radius: 999px; padding: 5px 13px;
font-family: "Nunito", system-ui, sans-serif; font-weight: 900; transform: rotate(-2deg);
}
body.arcade .flow-row.rev .flow-tag { transform: rotate(2deg); }
body.arcade .flow-txt p { color: var(--ink); font-weight: 600; }
body.arcade .land-concept p { color: var(--ink); }
body.arcade .land-concept strong { color: var(--grape); }
body.arcade .faq-list summary { font-family: "Nunito", system-ui, sans-serif; font-weight: 900; font-size: 16px; }
body.arcade .faq-list summary::after { color: var(--grape); }
body.arcade .faq-list details p { color: var(--ink); font-weight: 600; }
body.arcade .land-streams { position: relative; }
/* Le texte du bloc partenaires est traité plus haut, avec son fond violet.
Il y avait ici une règle qui le remettait en encre : écrite du temps où le
bloc était vert, elle survivait 220 lignes plus bas et l'emportait à
spécificité égale. C'est le risque d'une feuille de reprise qui s'allonge —
deux règles pour la même chose, et c'est la dernière qui décide. */
body.arcade .partner-txt { font-weight: 700; }
/* ---------------------------------------------------------------------------
9 · LE CTA FINAL ET LE FOOTER
--------------------------------------------------------------------------- */
body.arcade .land-cta {
background: var(--ink); position: relative; overflow: hidden;
border-block: var(--bord-gros);
}
body.arcade .land-cta::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: repeating-linear-gradient(-45deg, rgba(124,92,255,.25) 0 22px, transparent 22px 52px);
}
body.arcade .land-cta > * { position: relative; z-index: 1; }
body.arcade .land-cta h2 { font-size: clamp(32px, 4.6vw, 56px); text-shadow: 4px 4px 0 var(--grape-vif); }
body.arcade .site-footer { background: var(--grape); color: #fff; border-top: var(--bord-gros); }
body.arcade .sf-wordmark { font-family: var(--titre); font-weight: 400; background: none; -webkit-text-fill-color: #fff; color: #fff; }
body.arcade .sf-logo img { background: #fff; border: var(--bord); border-radius: 10px; padding: 3px; }
body.arcade .sf-tag, body.arcade .sf-col a { color: rgba(255,255,255,.92); font-weight: 700; }
body.arcade .sf-col a:hover { color: var(--sun); }
body.arcade .sf-col h4 { color: var(--sun); text-transform: uppercase; }
body.arcade .sf-bottom { color: rgba(255,255,255,.85); border-top-color: rgba(255,255,255,.25); }
body.arcade .sf-social .social-link { color: #fff; background: rgba(255,255,255,.14); border: 2px solid rgba(255,255,255,.3); }
body.arcade .sf-social .social-link:hover { color: var(--ink); background: var(--sun); }
/* ---------------------------------------------------------------------------
10 · ADAPTATION AUX PETITS ÉCRANS
Les inclinaisons et l'ombre à 8 px coûtent de la largeur : sur mobile elles
provoquent un débordement horizontal. On les calme.
--------------------------------------------------------------------------- */
@media (max-width: 820px) {
body.arcade .land-hero-inner { grid-template-columns: 1fr; gap: 22px; padding: 22px 20px 60px; }
body.arcade .land-hero-visual { order: 0; }
/* Mesuré à 375 px : la pastille d'accroche passait sur deux lignes et prenait
76 px pour une phrase. Réduite, elle tient sur une, et les deux boutons
d'entrée remontent d'autant — c'est eux qu'on veut voir sans défiler. */
body.arcade .land-eyebrow { font-size: 12.5px; padding: 6px 13px; margin-bottom: 10px; }
body.arcade .land-hero-txt h1 { margin: 14px 0 10px; }
body.arcade .h1-seo { font-size: 15.5px; margin-top: 8px; }
body.arcade .land-lead { font-size: 16px; line-height: 1.5; margin-bottom: 18px; }
body.arcade .lhv-frame { transform: rotate(2deg); box-shadow: 7px 7px 0 var(--ink); }
/* La pastille débordait du cadre par la droite sur un écran étroit. */
body.arcade .lhv-badge { right: 4px; bottom: -16px; font-size: 13px; padding: 7px 12px; }
body.arcade .land-step:nth-child(n) { transform: none; box-shadow: 6px 6px 0 var(--ink); }
body.arcade .defi-teaser { padding: 26px 20px; box-shadow: 6px 6px 0 var(--ink); }
body.arcade .defi-teaser .dt-txt { grid-template-columns: 1fr; gap: 16px; }
body.arcade .defi-teaser .candy { grid-column: 1; grid-row: auto; justify-self: stretch; }
body.arcade .arc-marquee { transform: rotate(-1deg); width: 112%; margin-left: -6%; margin-top: -28px; }
body.arcade .arc-marquee-piste > span { font-size: 15px; gap: 28px; padding-right: 28px; }
body.arcade .land-hero-txt h1 { font-size: 34px; }
body.arcade .h1-verbes b { text-shadow: 3px 3px 0 var(--ink); }
}
/* Le mouvement permanent d'un bandeau qui défile est exactement ce que ce
réglage système demande d'éviter. On l'arrête, et le texte reste lisible. */
@media (prefers-reduced-motion: reduce) {
body.arcade .arc-marquee-piste { animation: none; }
body.arcade .arc-marquee { transform: none; }
body.arcade .land-step:nth-child(n),
body.arcade .lhv-frame,
body.arcade .land-eyebrow,
body.arcade .flow-tag { transform: none; }
}
/* =============================================================================
11 · LA COQUILLE DU SITE
L'accueil ne vit pas seul : il partage son en-tête et son pied de page avec
les pages légales, la 404, /partenaires, /defi, /compte et les profils
publics. Habiller l'accueil sans elles produisait un site qui change
d'identité au premier clic du footer. Tout ce qui suit sert à ça, et ne
touche toujours ni au jeu (play/) ni à l'admin, qui ne portent pas la classe.
============================================================================= */
/* ---- Titres de page ------------------------------------------------------ */
body.arcade .legal h1,
body.arcade .soon h1,
body.arcade .notfound h1 {
font-family: var(--titre); font-weight: 400;
text-transform: uppercase; letter-spacing: .5px; line-height: 1.05;
}
body.arcade .legal h2,
body.arcade .soon-card h2,
body.arcade .defi-head h1,
body.arcade .defi-quoi h2,
body.arcade .pf-nom { font-family: var(--titre); font-weight: 400; letter-spacing: .2px; }
body.arcade .legal h3 { font-family: var(--titre); font-weight: 400; color: var(--grape); }
/* ---- Pages légales ------------------------------------------------------- */
body.arcade .legal p, body.arcade .legal li { color: var(--ink); }
body.arcade .legal a { color: var(--grape); font-weight: 800; }
body.arcade .legal .todo { border: 2px solid var(--ink); border-radius: 8px; }
body.arcade .legal .btn-cookies {
font-family: var(--titre); font-weight: 400;
border: var(--bord); background: var(--sun); color: var(--ink);
box-shadow: 0 4px 0 var(--ink);
}
body.arcade .legal .btn-cookies:hover { background: var(--sun); color: var(--ink); transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); }
body.arcade .legal-back, body.arcade .soon-back { color: var(--grape); font-weight: 800; }
/* ---- 404 ----------------------------------------------------------------- */
/* Le grand « 404 » était un dégradé découpé sur le texte : en arcade il devient
un aplat cerné, comme les verbes du hero. */
body.arcade .nf-code {
font-family: var(--titre); font-weight: 400;
background: none; -webkit-background-clip: border-box; background-clip: border-box;
color: var(--grape); -webkit-text-fill-color: var(--grape);
text-shadow: 5px 5px 0 var(--ink);
}
body.arcade .nf-sub, body.arcade .nf-hint { color: var(--ink); }
body.arcade .nf-found {
font-family: var(--titre); font-weight: 400;
background: var(--sun); color: var(--ink);
border: var(--bord-gros); box-shadow: var(--shadow-card);
}
/* ---- /partenaires -------------------------------------------------------- */
body.arcade .soon-tag {
background: var(--lime); color: var(--ink); border: var(--bord);
font-family: "Nunito", system-ui, sans-serif; font-weight: 900;
transform: rotate(-2deg);
}
body.arcade .soon-lead, body.arcade .soon-list li { color: var(--ink); }
body.arcade .soon-card { border: var(--bord-gros); box-shadow: var(--shadow-card); }
body.arcade .part-carte {
border: var(--bord-gros); border-radius: 22px; box-shadow: var(--shadow-card);
}
body.arcade .part-rang {
background: var(--sun); color: var(--ink); border: 2px solid var(--ink);
font-family: "Nunito", system-ui, sans-serif; font-weight: 900;
}
body.arcade .part-av { border: var(--bord); box-shadow: 4px 4px 0 var(--ink); }
body.arcade .part-txt h2 { font-family: var(--titre); font-weight: 400; }
body.arcade .part-txt p, body.arcade .part-note { color: var(--ink); }
/* Le violet officiel de Twitch (#9146FF) ne donne que 4,0:1 avec du blanc :
on prend sa variante sombre, qui reste la couleur de la marque. */
body.arcade .part-tw { background: #772CE8; color: #fff; border: 2px solid var(--ink); }
body.arcade .part-tw:hover { background: #5C16C5; }
/* Les pastilles d'animaux : liseré d'encre plutôt que blanc, ombre dure. */
body.arcade .pf { border: 2.5px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }
body.arcade .pf-vraie:hover { box-shadow: 4px 4px 0 var(--ink); }
body.arcade .pf-note { color: var(--ink); font-weight: 800; }
/* ---- /defi ----------------------------------------------------------------
defi.css est la seule feuille du site qui n'utilise AUCUNE variable : ses 25
couleurs sont écrites en dur, donc rien n'y suit les jetons. D'où ce bloc
plus bavard que les autres.
L'AIRE DE JEU REGARDE ENFIN LA HAUTEUR DE L'ÉCRAN.
Elle était en ratio 3/2 calé sur la seule LARGEUR disponible. Mesuré : sur un
portable 13 pouces, 214 px de décor tombaient sous la ligne de flottaison —
il fallait donc faire défiler la page pendant une chasse chronométrée, et le
caméléon pouvait très bien être dans le tiers qu'on ne voyait pas.
La hauteur est maintenant le plus petit des deux : ce que l'écran offre, et
ce que la largeur permet. Sur téléphone c'est la largeur qui commande, donc
rien n'y change pour l'instant — ce cas-là attend un vrai coup d'œil.
--------------------------------------------------------------------------- */
body.arcade .defi-date { background: var(--sun); color: var(--ink); border: 2px solid var(--ink); font-weight: 900; }
body.arcade .defi-sous { color: var(--ink); }
body.arcade .defi-head h1 { text-transform: uppercase; letter-spacing: .5px; }
/* Mesuré, pas estimé : au repos il y a 273 px au-dessus de l'aire de jeu, et
185 une fois la manche lancée. On ajoute ~15 px pour que l'ombre portée ne
se fasse pas couper par le bas de la fenêtre. */
body.arcade .defi-page { --chrome: 288px; }
/* Une fois la manche lancée, le titre et la date s'effacent : on connaît le
jeu auquel on joue, et ces 88 px sont mieux employés à montrer le décor.
L'image grandit donc au démarrage. C'est assumé : ça arrive au moment exact
où la carte « Prêt ? » disparaît et où le flou se lève, donc la zone change
de toute façon d'un bloc. Et sur un écran contraint, 88 px de décor en plus
valent mieux qu'une mise en page immobile. */
body.arcade .defi-page:has(.defi-zone.lance) { --chrome: 200px; }
body.arcade .defi-page:has(.defi-zone.lance) .defi-head h1,
body.arcade .defi-page:has(.defi-zone.lance) .defi-sous { display: none; }
body.arcade .defi-zone {
border: var(--bord-gros); box-shadow: var(--shadow-card);
aspect-ratio: 3 / 2; width: auto; margin-inline: auto; max-width: 100%;
height: min(calc(100dvh - var(--chrome)), calc((min(100vw, 1040px) - 32px) / 1.5));
}
/* LA BARRE D'ÉTAT A DEUX MÉTIERS, ET ÇA NE SE VOYAIT PAS.
Deux pastilles sont des COMPTEURS, deux sont des BOUTONS. Je leur avais donné
le même habillage : quatre rectangles blancs identiques, dont un seul change
pendant qu'on joue. Le chrono prend donc l'aplat violet et la taille qui va
avec — c'est la seule chose qu'on surveille — et les outils gardent l'ombre
portée qui dit « ça s'appuie ». */
body.arcade .defi-barre { gap: 12px; align-items: center; }
body.arcade .defi-pill { border: var(--bord); box-shadow: none; font-weight: 800; }
body.arcade .defi-pill:has(#defiChrono) {
background: var(--grape); color: #fff; font-size: 19px; padding: 8px 20px;
box-shadow: 3px 3px 0 var(--ink);
}
body.arcade .defi-pill:has(#defiChrono) b { font-family: var(--titre); font-weight: 400; }
body.arcade .defi-zone.fini { border: var(--bord-gros); box-shadow: var(--shadow-card); }
body.arcade .defi-quoi, body.arcade .defi-bilan, body.arcade .defi-compte {
border: var(--bord-gros); border-radius: 20px; box-shadow: var(--shadow-card); background: var(--card);
}
body.arcade .defi-quoi p, body.arcade .defi-compte p { color: var(--ink); }
/* Les deux outils sont des BOUTONS : ils prennent l'ombre portée dure qui, dans
toute la charte, veut dire « ça s'appuie ». Les compteurs restent plats. La
barre se lit alors d'un coup d'œil : ce qui s'appuie est en relief, ce qui
informe est à plat, et ce qu'on surveille est en violet. */
body.arcade .defi-outil {
border: var(--bord); font-weight: 800; color: var(--ink);
box-shadow: 0 4px 0 var(--ink); padding: 9px 15px;
}
body.arcade .defi-outil:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); border-color: var(--ink); }
body.arcade .defi-outil:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 var(--ink); }
body.arcade .defi-outil:disabled { opacity: .45; box-shadow: 0 4px 0 var(--ink); }
body.arcade .defi-outil.actif { background: var(--grape); border-color: var(--ink); color: #fff; }
body.arcade .defi-res.ok { color: #15734F; }
body.arcade .defi-res.ko { color: #B8244C; }
body.arcade .db-row.fort { color: var(--grape); font-family: var(--titre); font-weight: 400; }
body.arcade .defi-rebours, body.arcade .defi-depart { border: var(--bord-gros); box-shadow: var(--shadow-card); }
/* ---- /compte et la fenêtre de connexion ---------------------------------- */
body.arcade .cpt-card { border: var(--bord-gros); box-shadow: var(--shadow-card); }
body.arcade .cpt-card h1 { font-family: var(--titre); font-weight: 400; }
body.arcade .cpt-infos dt, body.arcade .cpt-infos dd { color: var(--ink); }
/* La zone de suppression de compte doit rester visuellement à part : on lui
garde son rouge, mais avec le contour d'encre du reste de la page. */
body.arcade .cpt-danger { border: var(--bord); border-color: #C22E5F; }
body.arcade .auth-modal { border: var(--bord-gros); box-shadow: var(--shadow-card); }
body.arcade .auth-h { font-family: var(--titre); font-weight: 400; }
body.arcade .auth-in { border: var(--bord); font-weight: 700; }
body.arcade .auth-in:focus { border-color: var(--ink); box-shadow: 0 3px 0 var(--sun); }
body.arcade .auth-btn { border: var(--bord); box-shadow: 0 4px 0 var(--ink); font-weight: 800; }
body.arcade .auth-sub, body.arcade .auth-note { color: var(--ink); }
/* ---- Profil public /joueur ----------------------------------------------- */
/* Le bandeau était un dégradé trois couleurs dont le bleu n'existe plus. */
body.arcade .pf-hero {
background: var(--grape); border: var(--bord-gros); box-shadow: var(--shadow-card);
}
body.arcade .pf-hero::after { display: none; }
body.arcade .pf-nom { text-shadow: 3px 3px 0 var(--ink); }
body.arcade .pf-av { border: var(--bord); box-shadow: 5px 5px 0 var(--ink); }
body.arcade .pf-av-pinceau { border: var(--bord); box-shadow: none; }
body.arcade .pf-part-lien { border: 2px solid var(--ink); font-weight: 800; }
body.arcade .pf-part-salle { background: var(--lime); color: var(--ink); }
body.arcade .pf-part-salle:hover { background: var(--lime); }
/* ---- Pied de page simple (légales, 404) ---------------------------------- */
body.arcade .land-footer { border-top: var(--bord-gros); }
body.arcade .lf-links a { color: var(--grape); font-weight: 800; }
body.arcade .lf-copy { color: var(--ink); }
/* =============================================================================
12 · LE NOUVEAU PARCOURS D'ENTRÉE, ET LE MINI-JEU DU HERO
============================================================================= */
/* ---- Le bouton de connexion prend la place du « Jouer » --------------------
Sur l'accueil, « Jouer » faisait doublon avec le hero et les rappels de
section. La connexion, elle, n'existe nulle part ailleurs sur la page : elle
hérite donc de la place et de l'allure du bouton principal. */
body.arcade .hero-auth-cta .auth-btn {
background: var(--sun); color: var(--ink);
border: var(--bord); box-shadow: 0 4px 0 var(--ink);
font-family: var(--titre); font-weight: 400;
}
body.arcade .hero-auth-cta .auth-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); }
body.arcade .hero-auth-cta .auth-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--ink); }
body.arcade .hero-auth-cta .auth-nom { color: var(--ink); }
/* ---- Les deux portes ------------------------------------------------------ */
body.arcade .land-porte { font-size: 18px; padding: 16px 22px; }
/* La porte secondaire est claire sur le violet du hero : sans fond plein, du
blanc sur violet ne tiendrait pas la lecture. */
body.arcade .land-portes .candy-ghost { background: #fff; color: var(--ink); }
body.arcade .land-form-h { color: rgba(255, 255, 255, .94); }
body.arcade .land-retour { color: #fff; font-weight: 800; text-decoration: underline; text-underline-offset: 4px; }
body.arcade .land-retour:hover { color: var(--sun); }
body.arcade .land-code-champ input { border: var(--bord); box-shadow: 0 4px 0 var(--ink); }
/* ---- Les rappels d'action des sections ------------------------------------
Il n'en reste que TROIS, aux trois moments où le bouton est mérité : après
les bénéfices, après l'explication d'une manche, après les objections levées.
Il y en avait cinq, plus celui du hero, celui du mini-jeu et le final : la
page finissait par crier la même chose à chaque écran.
Ils sont aussi plus petits que les deux boutons du hero et que le CTA final.
Trois tailles pour trois rôles : on entre, on est relancé, on conclut. Tout
au même volume, plus rien ne ressort. */
body.arcade .land-relance p { color: var(--ink); }
body.arcade .land-relance-b { font-size: 15px; padding: 12px 20px; }
/* ---- Le mini-jeu ----------------------------------------------------------
La cible n'apparaît qu'une fois trouvée. On la marque avec un cerne d'encre
doublé d'un halo jaune : sur un décor de jungle, un simple trait se perdrait
dans les feuilles. */
body.arcade .lhv-jeu img { border: none; border-radius: 16px; }
body.arcade .lhv-cible.on {
border: 4px solid var(--sun);
box-shadow: 0 0 0 4px var(--ink), 0 0 0 9999px rgba(20, 12, 34, .45);
animation: arcTrouve .5s ease-out;
}
@keyframes arcTrouve {
0% { transform: scale(.7); }
60% { transform: scale(1.12); }
100% { transform: scale(1); }
}
/* L'indice du troisième essai : on assombrit tout SAUF la moitié où il se
cache, sans jamais cerner la bête. On aide, on ne donne pas. */
body.arcade .lhv-cible.tiede:not(.on) {
left: 4%; top: 42%; width: 46%; height: 52%;
border-radius: 24px;
box-shadow: 0 0 0 9999px rgba(20, 12, 34, .42);
}
body.arcade .lhv-rate { border-color: var(--sun); }
body.arcade .lhv-aide { color: rgba(255, 255, 255, .94); }
body.arcade .lhv-gagne {
background: var(--sun); color: var(--ink);
border: var(--bord); box-shadow: 5px 5px 0 var(--ink);
}
body.arcade .lhv-gagne strong { font-family: var(--titre); font-weight: 400; }
@media (max-width: 820px) {
body.arcade .land-porte { font-size: 16px; padding: 14px 18px; }
/* Titan One a élargi le bouton de l'en-tête : à 375 px il dépassait de 5 px
et se faisait rogner son contour droit. Visible surtout sur la 404 et les
pages légales, qui gardent leur « Jouer » — l'accueil ne l'a plus. */
body.arcade .nav-cta { font-size: 12.5px; padding: 9px 12px; }
body.arcade .hero-nav { gap: 8px; }
body.arcade .lhv-gagne { padding: 12px 10px; }
body.arcade .lhv-gagne strong { font-size: 17px; }
}