/* ============================================================================ RCF V1.1 — L'ÉCRAN D'OUVERTURE ---------------------------------------------------------------------------- Le premier écran après « JOUER ». Il ne présente plus l'entreprise : il lance la partie. Le texte est celui validé au cahier, mot pour mot ; tout ce qui change ici est sa mise en scène. TROIS DÉCISIONS DE COMPOSITION, ET POURQUOI ---------------------------------------------------------------------------- 1. LE PANNEAU DISPARAÎT. L'ancien écran posait une carte opaque au milieu de la photo d'usine : le décor ne servait plus à rien. Ici, le texte repose sur un VOILE ANCRÉ EN BAS — transparent en haut, dense sous les mots. Le ciel, les arbres et le bâtiment restent entièrement visibles ; la lisibilité est obtenue là où il y a du texte, et nulle part ailleurs. 2. LE TEXTE PASSE À GAUCHE. Une colonne centrée fait « page de présentation ». Un fer à gauche, avec un filet ambre et une estampille, fait « début de quelque chose ». 3. LE CTA DEVIENT LE SEUL BLOC PLEIN DE L'ÉCRAN. Après le titre, c'est la seule surface saturée : l'œil y va sans qu'on ait à le pousser. Le voile global de l'écran (`.rcf-hero-scrim`, partagé avec la création de personnage) est allégé ICI SEULEMENT, par `:has(#scIntro.on)` : la photo reprend vie sans que l'écran suivant change d'un pixel. Aucune couleur hors jetons. Aucune image, aucune police, aucun script, aucun CDN ajoutés. Aucun `!important`. ============================================================================ */ /* ========================================================================== 1. LE DÉCOR ========================================================================== */ /* Le voile partagé passe d'un aplat uniforme à un dégradé : clair en haut, dense en bas. La photo existe de nouveau. Portée strictement limitée à l'introduction — la création de personnage garde son réglage. */ body.rcf-hero-on:has(#scIntro.on) .rcf-hero-scrim{ background-image:linear-gradient(180deg, rgba(4,11,18,.20) 0%, rgba(4,11,18,.34) 34%, rgba(4,11,18,.62) 62%, rgba(4,11,18,.88) 100%)} body.rcf-hero-on:has(#scIntro.on) .rcf-hero-bg{filter:saturate(1.02) contrast(1.03)} /* CORRECTIF BETA-01 §11 — LE RECADRAGE, ET POURQUOI `background-position` SEUL N'Y SUFFISAIT PAS. La photo fait 1024 × 2048. La scène 9:16 est plus large que haute en proportion : en `cover`, l'image n'a que ~87 px de jeu vertical sur un téléphone 390. Déplacer le cadrage ne gagnait donc que quelques pixels, et le ciel — qui occupe le tiers supérieur de la photo — restait le sujet principal de l'écran. On agrandit donc la photo à 140 % de la largeur de la scène, ce qui libère ~399 px de jeu, et on descend le cadrage à 75 %. Mesuré sur une scène 390 × 693 : le ciel tombe de ~330 px à ~93 px, et l'usine remonte de y ≈ 269 à y ≈ 138 en passant de 70 à ~96 px de hauteur. Un premier essai à 155 % / 58 % a été écarté : le ciel disparaissait bien, mais le bâtiment était recadré de si près qu'il ne se lisait plus comme une usine. Le zoom sert le sujet, il ne le remplace pas. 140 % d'une scène de 390 px fait 546 px de large pour une source de 1024 : on reste en RÉDUCTION à densité 1, et à peine en agrandissement à densité 2. Aucun nouvel asset, et la création de personnage — qui partage ce calque — garde son cadrage d'origine : la règle est portée par `:has(#scIntro.on)`. */ body.rcf-hero-on:has(#scIntro.on) .rcf-hero-bg{ background-size:140% auto; background-position:50% 75%} /* ========================================================================== 2. LA COMPOSITION La colonne est poussée vers le bas : le regard entre par la photo, descend sur le titre, finit sur le bouton. C'est l'ordre de lecture d'un écran d'ouverture, pas celui d'une fiche. ========================================================================== */ /* LA HAUTEUR, ET LE PIÈGE QU'ELLE CACHE. `min-height:100dvh` — la valeur de l'ancien écran — mesure la FENÊTRE, pas la scène 9:16. Sur un téléphone 390 x 844, la scène ne fait que 390 x 693 : une colonne haute de 844 px y déborde de 151 px, et le bouton partait sous la ligne de flottaison. C'est ce que la recette a mesuré avant d'être corrigée, et c'est le défaut qui comptait le plus sur cet écran. On chaîne donc les hauteurs depuis `#rcfScroll`, qui est le seul élément à hauteur définie (`position:absolute; inset:0` sur la scène). Le contenu reste scrollable s'il déborde vraiment : on borne, on n'enferme pas. */ #rcfScroll:has(#scIntro.on) > .wrap{height:100%;padding:0} #scIntro{height:100%} /* CORRECTIF BETA-01 §12 — LE BLOC OCCUPE LA SCÈNE AU LIEU DE S'Y ACCROCHER. Collé en bas (`align-items:flex-end`), il laissait au-dessus de lui une zone morte de 125 px sur un téléphone et de 286 px sur un PC — jusqu'à un tiers de l'écran sans rien à regarder. La colonne prend maintenant toute la hauteur : le texte commence haut, le bouton reste en bas, et l'espace qui les sépare est de la respiration, pas un trou en haut de page. */ #scIntro .intro-wrap{ min-height:100%;height:100%; display:flex;align-items:stretch;justify-content:center;padding:0} /* Plus de carte : un bloc de texte sur son propre voile, bord à bord. `padding-top` EN POURCENTAGE, et ce n'est pas un raccourci : un pourcentage de padding se résout sur la LARGEUR du bloc conteneur, donc sur la largeur de la scène — jamais sur celle de la fenêtre. C'est la seule unité relative de cette feuille qui ne retombe pas dans le piège du `vh`. */ #scIntro .intro.introx{ position:relative;max-width:560px;width:100%; margin:0;padding:17% 18px calc(20px + var(--rcf-safe-b,0px)); display:flex;flex-direction:column;justify-content:space-between; text-align:left;background:none;border:0;border-radius:0;box-shadow:none} /* LE VOILE LOCALISÉ. Il déborde en haut du bloc pour se fondre dans la photo : aucune arête, aucun rectangle. Il est sous le texte, jamais devant. */ /* Il remonte de 120 px au-dessus du bloc : la première ligne du titre tombe sinon sur la bande de ciel, la zone la plus claire de la photo, et c'est là que le contraste se jouait. La mesure de la recette a fixé cette hauteur. */ /* CORRECTIF BETA-01 — le bloc couvrant maintenant toute la scène, le voile le couvre aussi, et ses paliers descendent avec lui : une fenêtre claire de 0 à ~30 % laisse voir l'usine, puis le dégradé se ferme sous le titre pour porter le texte. Le haut reste presque nu — la ligne technique a son propre voile. */ #scIntro .intro.introx::before{ content:"";position:absolute;inset:0;z-index:-1; pointer-events:none; background:linear-gradient(180deg, rgba(4,11,19,.06) 0%, rgba(4,11,19,.10) 14%, rgba(4,11,19,.30) 30%, rgba(4,11,19,.62) 46%, rgba(4,11,19,.86) 66%, rgba(4,11,19,.95) 100%)} /* ========================================================================== 3. LA LIGNE TECHNIQUE Un repère d'atelier, pas un slogan : identité à gauche, état à droite, un filet entre les deux. ========================================================================== */ /* ELLE A SON PROPRE VOILE, ET C'EST UNE MESURE QUI L'A DÉCIDÉ. Posée en haut du dégradé, sur la bande de ciel, la ligne technique plafonnait à 2,2:1 — largement sous le seuil. Plutôt que d'assombrir toute la photo pour trois mots (ce que le cahier interdit explicitement), elle reçoit un voile qui ne couvre qu'elle et s'efface vers la droite. Mesure après correction : 6:1 et plus, aux trois tailles mobiles. */ #scIntro .introx-rail-tech{ position:relative;display:flex;align-items:center;gap:9px; margin:0 -18px 14px;padding:7px 18px;max-width:none; font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase; background:linear-gradient(90deg, rgba(4,11,19,.78) 0%, rgba(4,11,19,.70) 62%, rgba(4,11,19,.42) 100%)} /* La ligne technique se pose sur le haut du voile, là où il est encore léger : `--faint` s'y perdait. `--steel` et une ombre courte suffisent — inutile de noircir la photo pour trois mots. */ /* L'identité cède la place, jamais le marqueur : à 360 px la ligne complète poussait « Nouveau départ » hors du cadre. C'est elle qui se tronque, et le marqueur reste entier — la recette mesure qu'il tient dans la scène. */ #scIntro .introx-rail-tech span{ flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; color:var(--steel);text-shadow:0 1px 8px rgba(2,8,14,.85)} #scIntro .introx-rail-tech b{white-space:nowrap} #scIntro .introx-rail-tech i{ flex:1 1 auto;height:1px;min-width:12px; background:linear-gradient(90deg,rgba(170,201,226,.30),rgba(170,201,226,0))} #scIntro .introx-rail-tech b{ flex:0 0 auto;font-weight:400;color:var(--hivis); text-shadow:0 1px 8px rgba(2,8,14,.8)} /* ========================================================================== 4. LE TITRE « 2028 » est une estampille de programme ; le titre se lit malgré tout d'un seul tenant, comme le cahier l'exige. Pas de néon, pas de halo : une plaque, un filet, une casse forte. ========================================================================== */ /* CORRECTIF BETA-01 §13 — le titre perd 4 px et gagne en tenue. `8.6vw` mesurait la FENÊTRE : sur un PC, il gonflait à 44 px dans une scène de 506 px, ce qui obligeait à trois lignes. La borne haute descend, et les deux lignes sont désormais posées par le balisage, pas par le hasard de la casse. */ #scIntro .introx-t{ position:relative;margin:0 0 14px;padding-left:14px; font-family:var(--disp);font-weight:700;text-transform:uppercase; font-size:clamp(26px,7.4vw,34px);line-height:1.04;letter-spacing:.01em; color:#fff;text-shadow:0 3px 18px rgba(2,8,14,.72)} /* Les deux lignes du titre. `display:block` sur un `` : la césure est écrite, elle ne dépend plus de la largeur disponible. */ #scIntro .introx-l{display:block} /* Le filet d'accent : c'est lui qui donne l'aplomb, pas une ombre lourde. */ #scIntro .introx-t::before{ content:"";position:absolute;left:0;top:.12em;bottom:.1em;width:3px; border-radius:0 2px 2px 0;background:var(--hivis)} #scIntro .introx-an{ display:inline-block;font-style:normal;font-family:var(--mono);font-weight:700; font-size:.62em;line-height:1;letter-spacing:.06em;vertical-align:.12em; padding:.24em .44em;margin-right:.08em;border-radius:5px; color:var(--floor);background:var(--yellowgrad); box-shadow:0 6px 18px -12px rgba(255,174,0,.9)} #scIntro .introx-tiret{color:var(--steel);margin:0 .12em 0 .08em;font-weight:400} /* L'estampille et son tiret gardent leur ligne ; le titre commence dessous. Le texte, lui, reste `2028 — VOTRE CARRIÈRE COMMENCE ICI` d'un seul tenant. */ #scIntro .introx-tt{display:block;margin-top:.14em} /* ========================================================================== 5. LE TEXTE Deux paragraphes validés, mais une mesure courte et de l'air : c'est ce qui supprime l'effet « bloc ». ========================================================================== */ #scIntro .introx-p{ margin:0 0 11px;max-width:38ch;text-align:left; font-size:14.5px;line-height:1.56;color:var(--dim)} #scIntro .introx-p.lead{color:#e9f1f8;font-size:15.5px} /* ========================================================================== 6. L'ACCROCHE Une phrase, pas quatre étiquettes. Elle porte un peu plus que les paragraphes et un peu moins que la signature : c'est une marche, pas un second titre. Le filet à gauche la distingue sans en faire un bloc. ========================================================================== */ #scIntro .introx-accroche{ position:relative;margin:13px 0 0;padding:0 0 0 12px;max-width:38ch; font-size:14.5px;line-height:1.5;font-weight:500; color:#f0f5fa;text-shadow:0 2px 10px rgba(2,8,14,.7)} #scIntro .introx-accroche::before{ content:"";position:absolute;left:0;top:.22em;bottom:.22em;width:2px; border-radius:0 2px 2px 0;background:var(--hivis);opacity:.85} /* ========================================================================== 7. LA SIGNATURE Isolée, en ambre, au-dessus du bouton : c'est la dernière phrase avant le clic, elle ne doit plus être noyée dans un paragraphe. ========================================================================== */ #scIntro .introx-signature{ margin:16px 0 14px;max-width:34ch; font-family:var(--disp);font-weight:600;font-size:16px;line-height:1.26; letter-spacing:.01em;color:var(--hivis); text-shadow:0 2px 12px rgba(2,8,14,.76)} /* ========================================================================== 8. LE BOUTON Le seul bloc plein de l'écran. Pleine largeur, 56 px, flèche qui avance à l'appui : « je lance ma partie », pas « page suivante ». ========================================================================== */ #scIntro .introx-cta{ display:flex;align-items:center;justify-content:center;gap:12px; width:100%;max-width:none;min-height:56px;margin:0;padding:14px 18px;cursor:pointer; font-family:var(--disp);font-weight:700;font-size:15px; letter-spacing:.09em;text-transform:uppercase;color:var(--floor); border:1px solid var(--hivis-deep);border-radius:13px; background:var(--yellowgrad); box-shadow:0 18px 40px -20px rgba(255,174,0,.72), 0 1px 0 rgba(255,255,255,.34) inset; transition:transform .16s ease,box-shadow .16s ease,filter .16s ease} /* ESSAI — tout l'excédent avant le bouton. Écarté après mesure (voir §2). */ #scIntro .introx-cta-fl{ font-size:20px;line-height:1;transform:translateX(0); transition:transform .18s cubic-bezier(.2,.75,.25,1)} #scIntro .introx-cta:hover{ transform:translateY(-1px);filter:brightness(1.04); box-shadow:0 22px 46px -20px rgba(255,174,0,.85), 0 1px 0 rgba(255,255,255,.4) inset} #scIntro .introx-cta:hover .introx-cta-fl{transform:translateX(4px)} #scIntro .introx-cta:active{transform:translateY(1px) scale(.994)} #scIntro .introx-cta:focus-visible{ outline:none;box-shadow:0 0 0 3px rgba(255,192,46,.5),0 0 0 6px rgba(4,11,19,.75)} /* ========================================================================== 9. LA MENTION DE FICTION Elle reste — c'est une obligation, pas un choix de design —, mais elle cesse d'être le dernier mot avant de jouer : elle passe sous le bouton, en pied, discrète. ========================================================================== */ #scIntro .fiction{ margin:12px 0 0;padding:0;border-top:0;max-width:44ch; font-size:10px;line-height:1.5;color:var(--faint);opacity:.9} /* ========================================================================== 10. L'ENTRÉE — QUATRE TEMPS, 860 ms EN TOUT Le décor, puis le titre, puis le texte, puis le bouton. Elle se joue une fois et s'arrête : rien ne pulse, rien ne clignote, rien ne bouge ensuite. `fill-mode: both` pose l'état de départ AVANT le délai. L'opacité n'empêche jamais un clic : le bouton reste atteignable dès la première frame, et la recette le vérifie en cliquant à 60 ms. ========================================================================== */ @keyframes introxMonte{ from{opacity:0;transform:translateY(12px)} to {opacity:1;transform:none}} @keyframes introxVoile{ from{opacity:0} to {opacity:1}} @keyframes introxPlaque{ from{opacity:0;transform:translateX(-10px)} to {opacity:1;transform:none}} #scIntro.on .intro.introx::before{animation:introxVoile 420ms ease both} #scIntro.on .introx-rail-tech{animation:introxPlaque 360ms cubic-bezier(.2,.75,.25,1) 60ms both} #scIntro.on .introx-t {animation:introxMonte 420ms cubic-bezier(.2,.75,.25,1) 140ms both} #scIntro.on .introx-p {animation:introxMonte 400ms cubic-bezier(.2,.75,.25,1) 300ms both} #scIntro.on .introx-p + .introx-p{animation-delay:370ms} #scIntro.on .introx-accroche {animation:introxMonte 400ms cubic-bezier(.2,.75,.25,1) 440ms both} #scIntro.on .introx-signature {animation:introxMonte 380ms cubic-bezier(.2,.75,.25,1) 520ms both} #scIntro.on .introx-cta {animation:introxMonte 400ms cubic-bezier(.2,.75,.25,1) 600ms both} #scIntro.on .fiction {animation:introxVoile 380ms ease 720ms both} /* Dernier temps : 720 + 380 = 1100 ms de fin pour une ligne de pied, et 860 ms pour tout ce qui compte (le bouton est posé à 1000 ms). */ /* ========================================================================== 11. TAILLES ========================================================================== */ /* Très petits mobiles : on resserre les espaces, jamais le texte. */ @media (max-width:380px){ #scIntro .intro.introx{padding-left:15px;padding-right:15px} #scIntro .introx-rail-tech{margin-left:-15px;margin-right:-15px; padding-left:15px;padding-right:15px;gap:7px;font-size:8.5px;letter-spacing:.15em} #scIntro .introx-t{font-size:clamp(24px,7.1vw,30px);margin-bottom:12px} #scIntro .introx-p{font-size:13.8px;line-height:1.5;margin-bottom:9px} #scIntro .introx-p.lead{font-size:14.6px} #scIntro .introx-accroche{margin-top:11px;font-size:13.8px;line-height:1.46} #scIntro .introx-signature{font-size:15px;margin:13px 0 12px} #scIntro .introx-cta{min-height:54px;font-size:14px} #scIntro .fiction{font-size:9.5px} } /* Écrans hauts : on laisse respirer plutôt que d'étirer. */ /* Écrans hauts : on laisse respirer plutôt que d'étirer. Le titre gagne quelques pixels, jamais assez pour repasser à trois lignes — la césure est de toute façon écrite dans le balisage. */ @media (min-height:880px){ #scIntro .intro.introx{padding-bottom:calc(34px + var(--rcf-safe-b,0px))} #scIntro .introx-t{font-size:clamp(30px,7.4vw,38px)} } /* ========================================================================== 12. ACCESSIBILITÉ ET MOUVEMENT ========================================================================== */ /* Mouvement réduit : l'écran est là, entier, tout de suite. Aucune séquence, aucune attente, aucune information qui n'arriverait qu'après une animation. */ @media (prefers-reduced-motion:reduce){ #scIntro.on .intro.introx::before, #scIntro.on .introx-rail-tech, #scIntro.on .introx-t, #scIntro.on .introx-p, #scIntro.on .introx-accroche, #scIntro.on .introx-signature, #scIntro.on .introx-cta, #scIntro.on .fiction{animation:none;opacity:1;transform:none} #scIntro .introx-cta,#scIntro .introx-cta-fl{transition:none} #scIntro .introx-cta:hover{transform:none} #scIntro .introx-cta:hover .introx-cta-fl{transform:none} } /* Contraste renforcé : on referme le voile sous le texte plutôt que de grossir les corps. La photo reste, elle passe simplement au second plan. */ @media (prefers-contrast:more){ body.rcf-hero-on:has(#scIntro.on) .rcf-hero-scrim{ background-image:linear-gradient(180deg,rgba(4,11,18,.55),rgba(4,11,18,.94))} #scIntro .intro.introx::before{ background:linear-gradient(180deg,rgba(4,11,19,0),rgba(4,11,19,.96) 40%)} #scIntro .introx-p{color:#e6eef6} #scIntro .introx-rail-tech span{color:var(--dim)} }