/* v3-recup-e.css : la mise en scène « E » de l'article, la typographie en mouvement. Chargée APRÈS css/v3-recup.css, qui habille déjà chaque composant (figures, schémas, calculateurs, tableaux, encadrés, notes) à la charte or hextech. Cette feuille n'écrit que l'ARCHITECTURE et la MISE EN SCÈNE : ce que js/gk-recup-e.js construit autour des blocs existants. L'idée : l'article se lit comme une affiche qui se déroule. Le texte est le décor. Un héros plein écran dont les mots montent un à un derrière un masque, des cartons de chapitre plein écran que le corps du chapitre vient recouvrir, dix chiffres énormes, une citation seule sur son écran, et trois chapitres épinglés où la figure reste pendant que le texte défile. Cinq règles qui expliquent tout le fichier : 1. L'ÉTAT FINAL EST L'ÉTAT PAR DÉFAUT. Rien n'est caché par défaut. Un état initial (mot sous le masque, bloc translucide, chiffre à zéro) n'existe que sous .ve-anim, une classe que le script pose s'il a IntersectionObserver et si le lecteur n'a pas demandé moins d'animation. Sans script, sans observateur, en reduced-motion : tout est là, lisible. 2. LES EFFETS CONTINUS (parallaxe des couches de texte, barre de progression, dérive des images) passent par animation-timeline, sous @supports. Sur ce site c'est qui défile, et c'est un ancêtre : scroll() et view() le trouvent. Sans prise en charge, ces éléments restent simplement immobiles. 3. TOUT CE QUI COLLE VIT HORS DE .gk-dk-wrap. Pour un visiteur, gk-mur.js pose overflow:hidden sur le wrap, et un ancêtre qui découpe annule tout sticky en dessous. Le script déplace donc les chapitres dans .ve-page, FRÈRE du wrap. Seules les sources restent dans le wrap. 4. PAS DE BOÎTES. Les grands chiffres perdent leur encadré, les cartons n'ont pas de cadre, la citation n'a plus de filet. La hiérarchie est faite par la taille et les opacités de blanc, l'or n'apparaît que sur ce qui compte. 5. AUCUN arrondi, aucun border sur un clip-path, aucun point qui pulse, aucun scintillement, aucun détournement du défilement. Le seul mouvement en boucle : aucun. */ /* ═══ 0. LA RACINE ══════════════════════════════════════════════════════════ */ .content.gk-recup-e { --ve-gold: #C8AA6E; --ve-satin: linear-gradient(115deg, #8A6A2F 0 18%, #F7EFDC 34%, #C8AA6E 52%, #E4CE9B 74%, #8A6A2F 92%); --ve-pad: clamp(20px, 5vw, 72px); /* la marge des scènes plein écran */ --ve-bg: #0B0E1A; /* la teinte courante, cf. les tons */ padding: 0; /* les scènes gèrent leurs marges */ /* glass-site.css impose padding-top:24px !important sur .content au-dessus de 992 px : le héros doit toucher le haut de l'écran, on répond de même. */ padding-top: 0 !important; background-color: var(--ve-bg); transition: background-color 1.6s ease; } /* Le fond glisse d'un chapitre à l'autre : trois pas, jamais clair. Le script pose la classe quand un chapitre passe au milieu de l'écran. Le corps des chapitres (.ve-body) lit la même variable, pour recouvrir le carton. */ .gk-recup-e.ve-ton-b { --ve-bg: #0A1124; } /* bleu-nuit : sommeil, nutrition */ .gk-recup-e.ve-ton-c { --ve-bg: #15100F; } /* brun-nuit : suppléments, jour J, mental */ /* La bande photo de 250 px du gabarit d'article : inutile, le héros prend la photo en plein cadre. */ .content.gk-recup-e.mhero::before { display: none; } /* [hidden] perd contre display:flex/grid des composants : on tranche. */ .gk-recup-e [hidden] { display: none !important; } /* Le chapitre sorti du wrap garde ses classes de section : on annule les marges et filets du gabarit, la scène gère son espace. */ .gk-recup-e .ve-scene.rc-ch, .gk-recup-e .ve-scene.gk-dk-sec { margin: 0; padding: 0; border: 0; } /* ═══ 1. LE MASQUE DES MOTS ═════════════════════════════════════════════════ Chaque mot d'un titre est dans un masque (overflow:hidden) et monte de dessous. Ce n'est PAS une machine à écrire : les mots sont entiers, seul le temps d'arrivée diffère. Le padding du masque laisse passer les jambages et le débord de l'italique, que overflow:hidden couperait sinon. */ /* ⚠ glass-site.css pose `font-family:"Inter",sans-serif` sur le SÉLECTEUR span, pour le corps de texte hérité de Webflow. Une déclaration posée sur l'élément lui-même bat toujours l'héritage : dès qu'on découpe un titre en pour l'animer, il perd GT Sectra et sort en Inter. C'était le cas de tous les grands titres de cette variante : le héros et les onze titres de chapitre. `font: inherit` leur rend la famille, la graisse et l'italique de leur titre parent. Effet de bord bienvenu : le découpage en lignes est MESURÉ sur ces span, donc il l'était jusqu'ici dans la mauvaise fonte, et les coupures tombaient à côté. */ .gk-recup-e .ve-w, .gk-recup-e .ve-wi { font: inherit; letter-spacing: inherit; } .gk-recup-e .ve-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding: .06em .08em .12em 0; margin: -.06em -.08em -.12em 0; } .gk-recup-e .ve-wi { display: inline-block; will-change: transform; transition: transform 1s cubic-bezier(.16, .84, .26, 1); transition-delay: calc(var(--i, 0) * 70ms); } /* l'état initial n'existe que si le script anime */ .gk-recup-e.ve-anim .ve-rev:not(.is--vu) .ve-wi { transform: translateY(114%); } /* Même principe pour les blocs qui montent en fondu (accroches, chiffres, citation, légendes). */ .gk-recup-e .ve-rev-fade { transition: opacity .9s ease, transform 1s cubic-bezier(.16, .84, .26, 1); transition-delay: var(--d, .25s); } .gk-recup-e.ve-anim .ve-rev-fade:not(.is--vu) { opacity: 0; transform: translateY(22px); } /* ═══ 2. LE HÉROS ═══════════════════════════════════════════════════════════ Plein écran, la photo en plein cadre derrière, un grain discret, le titre très grand en bas à gauche, l'indicateur de défilement en bas à droite. */ .gk-recup-e .ve-hero { position: relative; isolation: isolate; overflow: hidden; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 var(--ve-pad) clamp(28px, 6vh, 64px); view-timeline-name: --ve-hero; } /* la photo du gabarit (--mh, posée en style sur la racine) prend tout le cadre. Elle est un peu plus grande que le cadre pour pouvoir dériver au défilement. */ .gk-recup-e .ve-hero-img { position: absolute; inset: 0; z-index: -2; background: var(--mh) center 30% / cover no-repeat; transform-origin: center top; } .gk-recup-e .ve-hero-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 14, 26, .30), rgba(11, 14, 26, .52) 45%, #0B0E1A 100%); } /* le grain : un bruit SVG, en fondu de superposition, presque invisible */ .gk-recup-e .ve-grain { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; opacity: .05; mix-blend-mode: overlay; pointer-events: none; } .gk-recup-e .ve-hero-top { position: absolute; top: 26px; left: var(--ve-pad); right: var(--ve-pad); display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; } .gk-recup-e .ve-hero-top .crumb { margin: 0; } .gk-recup-e .ve-hero-top .ve-cap { position: static; text-align: right; } .gk-recup-e .ve-hero-txt { position: relative; max-width: 1400px; } .gk-recup-e .ve-hero .gk-dk-kick { font: 500 clamp(18px, 2vw, 26px)/1 'Noto Serif KR', serif; color: var(--ve-gold); margin: 0 0 18px; } .gk-recup-e .ve-hero .gk-dk-hero { font: italic 700 clamp(46px, 8.2vw, 132px)/.96 'GT Sectra Display', Georgia, serif; letter-spacing: -.012em; white-space: normal; max-width: 12ch; margin: 0 0 clamp(18px, 3vh, 30px); color: #F2F4FA; } .gk-recup-e .ve-hero .gk-dk-lead { font: italic 400 clamp(17px, 1.6vw, 23px)/1.45 'GT Sectra Display', Georgia, serif; color: rgba(255, 255, 255, .84); max-width: 44ch; margin: 0; --d: .9s; /* après les mots du titre */ } /* l'indicateur : un mot, un filet, un segment d'or qui descend le long du filet. Ce n'est pas un point qui pulse : un seul sens, une seule vitesse. */ .gk-recup-e .ve-cue { position: absolute; right: var(--ve-pad); bottom: clamp(28px, 6vh, 64px); display: flex; flex-direction: column; align-items: center; gap: 12px; font: 600 9.5px/1 'Inter', sans-serif; letter-spacing: .26em; text-transform: uppercase; color: rgba(255, 255, 255, .55); } .gk-recup-e .ve-cue i { position: relative; display: block; width: 1px; height: 64px; overflow: hidden; background: rgba(255, 255, 255, .16); } .gk-recup-e .ve-cue i::after { content: ''; position: absolute; left: 0; top: -40%; width: 100%; height: 40%; background: var(--ve-gold); animation: none; /* pas de boucle : le segment reste immobile, comme en reduced-motion */ } @keyframes ve-cue { to { top: 100%; } } /* ═══ 3. L'INTRODUCTION ═══════════════════════════════════════════════════ */ .gk-recup-e .ve-intro { max-width: 64ch; margin: 0 auto; padding: clamp(56px, 10vh, 120px) 24px 48px; } .gk-recup-e .ve-intro .rc-story { margin: 0; max-width: none; } .gk-recup-e .ve-intro .rc-story .gk-dk-p { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.62; color: rgba(255, 255, 255, .84); } .gk-recup-e .ve-intro .rc-story .gk-dk-p:first-child::first-letter { font-size: 3.6em; } .gk-recup-e .ve-intro .rc-pills { margin-top: 30px; } /* ═══ 4. LES CARTONS DE CHAPITRE ════════════════════════════════════════════ Le carton est collé en haut de sa scène (position:sticky, top:0) et fait tout l'écran. Le corps du chapitre (.ve-body) vient ensuite dans le flux, au-dessus dans l'ordre d'empilement et avec un fond : il RECOUVRE le carton en montant. La scène porte une ligne de temps de vue (--ve-sc) que les couches de texte du carton utilisent pour se décaler à des vitesses différentes pendant le recouvrement. */ .gk-recup-e .ve-scene { position: relative; view-timeline-name: --ve-sc; } .gk-recup-e .ve-carton { position: sticky; top: 0; z-index: 0; isolation: isolate; overflow: hidden; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 var(--ve-pad) clamp(44px, 9vh, 96px); } /* le numéro, en filigrane : 40 vh, en haut à droite, presque fondu dans la nuit */ .gk-recup-e .ve-carton-n { position: absolute; top: 6vh; right: 3vw; z-index: -1; font: italic 800 40vh/.8 'Inter Tight', 'Inter', sans-serif; letter-spacing: -.06em; color: rgba(255, 255, 255, .045); pointer-events: none; user-select: none; will-change: transform; } .gk-recup-e .ve-carton-txt { position: relative; max-width: 1400px; will-change: transform; } .gk-recup-e .ve-carton-k { display: block; margin-bottom: 18px; font: 600 10.5px/1 'Inter', sans-serif; letter-spacing: .28em; text-transform: uppercase; color: var(--ve-gold); } .gk-recup-e .ve-carton-t { font: italic 700 clamp(38px, 6.6vw, 108px)/.98 'GT Sectra Display', Georgia, serif; letter-spacing: -.012em; max-width: 15ch; margin: 0; color: #F2F4FA; } /* l'accroche du chapitre (.rc-lead) monte dans le carton */ .gk-recup-e .ve-carton .rc-lead { font: italic 400 clamp(17px, 1.5vw, 23px)/1.45 'GT Sectra Display', Georgia, serif; color: rgba(255, 255, 255, .80); max-width: 46ch; margin: 22px 0 0; --d: .7s; } /* l'image placeholder du carton : plein cadre, sous le texte, assombrie vers le bas pour que le titre reste lisible et que le carton se fonde dans la nuit */ .gk-recup-e .ve-carton > .ve-ph { position: absolute; inset: 0; z-index: -2; } .gk-recup-e .ve-carton > .ve-ph::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 14, 26, .10), rgba(11, 14, 26, .55) 55%, var(--ve-bg) 100%); } .gk-recup-e .ve-carton > .ve-ph .ve-cap { top: 26px; left: var(--ve-pad); bottom: auto; } /* La tenue : un espace vide de 60 vh après le carton. Le carton, collé, reste donc SEUL à l'écran pendant 60 vh de défilement (le temps de lire le titre et l'accroche, et de laisser les couches dériver) avant que le corps ne monte dessus. Sans elle, le corps recouvrait le titre à l'instant où il collait. */ .gk-recup-e .ve-tenue { height: 60vh; height: 60svh; pointer-events: none; } /* le corps du chapitre recouvre le carton */ .gk-recup-e .ve-body { position: relative; z-index: 1; background-color: var(--ve-bg); transition: background-color 1.6s ease; padding: clamp(56px, 9vh, 110px) 24px clamp(72px, 12vh, 140px); } /* Les couches de texte dérivent pendant la tenue puis le recouvrement : le numéro le plus vite, le titre à peine, l'image entre les deux. Le texte ne s'efface pas : c'est le corps qui le recouvre. Sous @supports seulement, et l'état de départ est l'état visible. La plage va de l'instant où le carton colle (contain 0 %) à celui où le corps l'a recouvert (160 vh plus bas : 60 vh de tenue + 100 vh de recouvrement). */ @supports (animation-timeline: view()) { .gk-recup-e .ve-carton-n { animation: ve-couche-n linear both; animation-timeline: --ve-sc; animation-range: contain 0% contain 160vh; } .gk-recup-e .ve-carton-txt { animation: ve-couche-t linear both; animation-timeline: --ve-sc; animation-range: contain 0% contain 160vh; } .gk-recup-e .ve-carton > .ve-ph .ve-ph-in { animation: ve-couche-i linear both; animation-timeline: --ve-sc; animation-range: entry 0% contain 160vh; } /* le héros : le texte monte et s'efface, la photo grandit un peu */ .gk-recup-e .ve-hero-txt { animation: ve-hero-txt linear both; animation-timeline: --ve-hero; animation-range: exit 0% exit 85%; } .gk-recup-e .ve-hero-img { animation: ve-hero-img linear both; animation-timeline: --ve-hero; animation-range: exit 0% exit 100%; } .gk-recup-e .ve-cue { animation: ve-cue-out linear both; animation-timeline: --ve-hero; animation-range: exit 0% exit 30%; } /* les interludes : l'image, plus haute que son cadre, glisse en traversant */ .gk-recup-e .ve-inter .ve-ph-in { animation: ve-plx linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; } /* la barre de progression, sans une ligne de script */ .gk-recup-e .ve-prog > i { animation: ve-prog linear both; animation-timeline: scroll(); } } @keyframes ve-couche-n { 55% { opacity: 1; } to { transform: translateY(-34vh); opacity: 0; } } @keyframes ve-couche-t { to { transform: translateY(-9vh); } } @keyframes ve-couche-i { from { transform: translateY(-4%) scale(1.06); } to { transform: translateY(4%) scale(1); } } @keyframes ve-hero-txt { to { transform: translateY(-16vh); opacity: 0; } } @keyframes ve-hero-img { to { transform: translateY(8%) scale(1.08); } } @keyframes ve-cue-out { to { opacity: 0; } } @keyframes ve-plx { from { transform: translateY(-7%); } to { transform: translateY(7%); } } @keyframes ve-prog { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* ═══ 5. LES PLACEHOLDERS D'IMAGE ═══════════════════════════════════════════ Là où une image manque : une surface sombre, une trame fine, la fleur du site au centre, et la légende entre crochets qui dit ce que l'image devrait montrer. Aucun cadre, aucun arrondi. */ .gk-recup-e .ve-ph { position: relative; overflow: hidden; background: linear-gradient(135deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015) 60%, rgba(255, 255, 255, .035)); } .gk-recup-e .ve-ph-in { position: absolute; inset: -8% 0; will-change: transform; background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 18px); } .gk-recup-e .ve-ph-in::before { content: ''; position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; opacity: .22; background: url('/images/v3/fleur-white.svg') center / contain no-repeat; } .gk-recup-e .ve-cap { position: absolute; left: var(--ve-pad); bottom: 24px; z-index: 1; max-width: 62ch; font: 500 10px/1.55 'Inter', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .50); } /* l'interlude : une image seule entre deux chapitres, 70 % de l'écran */ .gk-recup-e .ve-inter { position: relative; overflow: hidden; height: 70vh; height: 70svh; } .gk-recup-e .ve-inter > .ve-ph { position: absolute; inset: 0; } /* ═══ 6. LES MOMENTS : LES DIX GRANDS CHIFFRES ══════════════════════════════ L'encadré .rc-card disparaît, il ne reste que le chiffre, énorme, en or satiné, et sa légende posée à droite sur la même ligne de base. */ .gk-recup-e .ve-moment { max-width: 1120px; margin: 0 auto clamp(48px, 8vh, 96px); display: grid; gap: 0; } .gk-recup-e .ve-moment .rc-card { padding: clamp(22px, 3.5vh, 40px) 0; background: none; box-shadow: none; border-top: 1px solid rgba(255, 255, 255, .10); } .gk-recup-e .ve-moment .rc-card:last-child { border-bottom: 1px solid rgba(255, 255, 255, .10); } .gk-recup-e .ve-moment .rc-stat { grid-template-columns: auto minmax(0, 1fr); gap: 10px clamp(24px, 4vw, 56px); align-items: baseline; } .gk-recup-e .ve-moment .rc-v { font: italic 800 clamp(64px, 11.5vw, 176px)/.9 'Inter Tight', 'Inter', sans-serif; letter-spacing: -.045em; font-variant-numeric: tabular-nums; background: var(--ve-satin); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; /* Le dégradé n'est peint que DANS la boîte du fond. Un « ×10 » en italique gras déborde de sa boîte inline à droite et sous la ligne de base : la partie sortie n'était donc pas peinte, et le chiffre semblait coupé. On élargit la boîte peinte, puis on reprend l'espace en marge négative pour que rien ne bouge dans la grille. */ display: inline-block; padding: .10em .14em .14em .05em; margin: -.10em -.14em -.14em -.05em; } .gk-recup-e .ve-moment .rc-l { font: 400 clamp(14px, 1.2vw, 17px)/1.5 'Inter', sans-serif; color: rgba(255, 255, 255, .72); max-width: 36ch; } /* ═══ 7. LE CORPS DU CHAPITRE ═══════════════════════════════════════════════ Une seule colonne de lecture, un peu plus large et plus grande qu'un article ordinaire : on lit une affiche, pas une notice. */ .gk-recup-e .ve-body .rc-prose { max-width: 66ch; margin: 0 auto; } .gk-recup-e .ve-body .gk-dk-p { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.66; color: rgba(255, 255, 255, .80); } .gk-recup-e .ve-body .rc-h3 { font-size: clamp(24px, 2.4vw, 34px); line-height: 1.15; margin: 52px 0 10px; } .gk-recup-e .ve-body .rc-h4 { font-size: 14px; } .gk-recup-e .ve-body .rc-checks li { font-size: clamp(15px, 1.15vw, 17px); } .gk-recup-e .ve-body .rc-callout { margin: 40px 0; padding: 22px 26px; } .gk-recup-e .ve-body .rc-callout .gk-dk-p { font-size: clamp(16px, 1.3vw, 19px); } /* Les figures, schémas, calculateurs et tableaux débordent de la colonne de texte jusqu'à 860 px : la formule vaut 0 sur petit écran (la colonne fait déjà toute la largeur) et -100 px de chaque côté sur grand écran. Pas dans les chapitres épinglés, où la colonne de texte a une voisine. */ .gk-recup-e .ve-body:not(.ve-pin) .rc-prose > .rc-fig, .gk-recup-e .ve-body:not(.ve-pin) .rc-prose > .rc-diag, .gk-recup-e .ve-body:not(.ve-pin) .rc-prose > .rc-tool, .gk-recup-e .ve-body:not(.ve-pin) .rc-prose > .rc-tablewrap { /* 380 et non 430 : à 1440 px, le rail des chapitres commence à 1389 et une planche de 430 de demi-largeur allait jusqu'à 1416, donc passait dessous. Invisible tant que les planches n'avaient pas de cadre. */ margin-left: calc(50% - min(50vw - 24px, 380px)); margin-right: calc(50% - min(50vw - 24px, 380px)); } .gk-recup-e .ve-body .rc-fig, .gk-recup-e .ve-body .rc-diag { margin-top: 40px; margin-bottom: 40px; padding: 22px 24px 20px; } .gk-recup-e .ve-body .rc-ft { font-size: 17px; } /* Les encadrés qui restaient dans la colonne de droite (« Si tu fais du poomsae », « les trois signes ») se posent en fin de chapitre, côte à côte. La classe rc-side est conservée pour que gk-recuperation.js y trouve encore ses définitions au survol : on annule seulement le sticky de la colonne. */ .gk-recup-e .ve-cards { position: static; top: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; /* 760 et non 860 : c'est la largeur des planches du fil (2 x 380). Avec 860, l'encadré « Le test avant le jour J » était le seul bloc plus large que le tableau juste au-dessus, et ça se voyait. */ max-width: 760px; margin: 48px auto 0; } .gk-recup-e .ve-cards .rc-card p, .gk-recup-e .ve-cards .rc-card li { font-size: 13.5px; line-height: 1.55; } /* ═══ 8. LES CHAPITRES ÉPINGLÉS ═════════════════════════════════════════════ Sommeil, outils, jour J : la figure (ou les grands chiffres) reste à gauche pendant que le texte qui l'explique défile à droite. Un simple sticky, qui marche parce que la scène vit hors du wrap découpé par le mur de compte. */ .gk-recup-e .ve-pin-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 60ch); gap: clamp(32px, 5vw, 88px); align-items: start; max-width: 1240px; margin: 0 auto; } /* min-width:0 : un élément de grille garde sinon sa largeur minimale de contenu, et un tableau à min-width 620 px faisait déborder la colonne de texte hors de l'écran sur mobile (vérifié à 390 px). */ .gk-recup-e .ve-pin-grid > * { min-width: 0; } .gk-recup-e .ve-pin-col { position: sticky; top: 8vh; } .gk-recup-e .ve-pin-col .rc-fig, .gk-recup-e .ve-pin-col .rc-diag { margin: 0; } .gk-recup-e .ve-pin-col .ve-moment { margin: 0; } .gk-recup-e .ve-pin-col .ve-moment .rc-v { font-size: clamp(56px, 8vw, 128px); } .gk-recup-e .ve-pin-col .ve-moment .rc-stat { grid-template-columns: minmax(0, 1fr); gap: 14px; } .gk-recup-e .ve-pin-grid .rc-prose { max-width: none; margin: 0; } /* ═══ 9. LA CITATION ════════════════════════════════════════════════════════ Seule sur son écran, centrée, très grande. Le filet d'or de la version sobre disparaît, la fleur du site la coiffe. */ .gk-recup-e .ve-quote { min-height: 90vh; min-height: 90svh; display: grid; place-items: center; align-content: center; gap: 28px; padding: 12vh 24px; text-align: center; } .gk-recup-e .ve-quote .ve-fleur { width: 18px; height: 18px; opacity: .6; } .gk-recup-e .ve-quote .rc-q { margin: 0; padding: 0; border: 0; max-width: 24ch; font: italic 700 clamp(28px, 4.4vw, 62px)/1.16 'GT Sectra Display', Georgia, serif; color: #F2F4FA; letter-spacing: -.008em; } .gk-recup-e .ve-quote .rc-q .rc-ref { font-size: .28em; vertical-align: super; } /* ═══ 10. LA PROGRESSION ET LE SOMMAIRE MINIMAL ═════════════════════════════ Deux éléments fixes, posés dans .content (donc emportés par la navigation SPA) : un filet d'or de 2 px en haut, et une colonne de numéros à droite. */ .gk-recup-e .ve-prog { position: fixed; left: 0; right: 0; top: 0; z-index: 41; height: 2px; background: rgba(255, 255, 255, .06); pointer-events: none; } .gk-recup-e .ve-prog > i { display: block; height: 100%; transform-origin: left center; transform: scaleX(var(--ve-p, 0)); background: var(--ve-gold); } .gk-recup-e .ve-nav { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .gk-recup-e .ve-nav a { position: relative; display: flex; align-items: center; gap: 10px; padding: 4px 0; text-decoration: none; font: 600 10px/1 'Inter Tight', 'Inter', sans-serif; letter-spacing: .1em; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .34); transition: color .2s; } .gk-recup-e .ve-nav a::after { content: ''; width: 14px; height: 1px; background: currentColor; transition: width .25s; } .gk-recup-e .ve-nav a:hover { color: rgba(255, 255, 255, .85); } .gk-recup-e .ve-nav a:focus-visible { outline: 2px solid var(--ve-gold); outline-offset: 2px; } .gk-recup-e .ve-nav a.is--on { color: var(--ve-gold); } .gk-recup-e .ve-nav a.is--on::after { width: 30px; } /* le titre du chapitre apparaît au survol, à gauche du numéro */ .gk-recup-e .ve-nav-t { font: italic 500 12.5px/1 'GT Sectra Display', Georgia, serif; letter-spacing: 0; color: rgba(255, 255, 255, .88); white-space: nowrap; opacity: 0; transform: translateX(6px); transition: opacity .2s, transform .2s; pointer-events: none; } .gk-recup-e .ve-nav a:hover .ve-nav-t, .gk-recup-e .ve-nav a:focus-visible .ve-nav-t { opacity: 1; transform: none; } /* ═══ 11. LES SOURCES, RESTÉES DANS LE WRAP ═════════════════════════════════ Le seul chapitre qui garde la mise en page sobre. Le wrap n'a plus que lui. */ .gk-recup-e .gk-dk-wrap { max-width: 860px; padding: 40px 24px 100px; } .gk-recup-e .gk-dk-wrap .rc-ch { border-top: 0; padding-top: 0; margin-top: 0; } .gk-recup-e .gk-dk-wrap .gk-dk-h2 { font: italic 700 clamp(26px, 3vw, 40px)/1.1 'GT Sectra Display', Georgia, serif; } .gk-recup-e .gk-dk-wrap .rc-cols { grid-template-columns: minmax(0, 1fr); } /* ═══ 12. PETITS ÉCRANS ═════════════════════════════════════════════════════ */ @media (max-width: 1000px) { .gk-recup-e .ve-pin-grid { grid-template-columns: minmax(0, 1fr); } .gk-recup-e .ve-pin-col { position: static; } /* width:100% + justify-self, PAS margin:auto : sur un élément de grille, les marges auto le dimensionnent à son contenu (66ch, soit 583 px) et il débordait de sa colonne de 310 px. */ .gk-recup-e .ve-pin-grid .rc-prose { width: 100%; max-width: 66ch; margin: 0; justify-self: center; } .gk-recup-e .ve-pin-col .rc-fig, .gk-recup-e .ve-pin-col .rc-diag { margin: 0 auto 40px; max-width: 860px; } .gk-recup-e .ve-pin-col .ve-moment { margin: 0 auto 40px; } } @media (max-width: 900px) { .gk-recup-e .ve-nav { display: none; } /* la barre de progression suffit */ .gk-recup-e .ve-carton { height: 84vh; height: 84svh; } .gk-recup-e .ve-carton-n { font-size: 26vh; top: 5vh; right: 4vw; } .gk-recup-e .ve-hero .gk-dk-hero { max-width: 10ch; } .gk-recup-e .ve-hero-top { flex-direction: column; gap: 10px; } .gk-recup-e .ve-hero-top .ve-cap { text-align: left; } .gk-recup-e .ve-cue { display: none; } .gk-recup-e .ve-moment .rc-stat { grid-template-columns: minmax(0, 1fr); gap: 8px; } .gk-recup-e .ve-inter { height: 52vh; height: 52svh; } } @media (max-width: 600px) { .gk-recup-e .ve-body { padding-left: 18px; padding-right: 18px; } .gk-recup-e .ve-carton > .ve-ph .ve-cap { max-width: 80vw; } } /* ═══ 13. MOINS D'ANIMATION ═════════════════════════════════════════════════ Tout ce qui bouge s'arrête, et tout reste lisible : le script ne pose pas .ve-anim, donc aucun état initial n'existe. Ici on coupe le reste : l'indicateur, les dérives liées au défilement, les fondus de teinte. */ @media (prefers-reduced-motion: reduce) { .gk-recup-e .ve-cue i::after, .gk-recup-e .ve-carton-n, .gk-recup-e .ve-carton-txt, .gk-recup-e .ve-carton > .ve-ph .ve-ph-in, .gk-recup-e .ve-hero-txt, .gk-recup-e .ve-hero-img, .gk-recup-e .ve-cue, .gk-recup-e .ve-inter .ve-ph-in { animation: none; } .gk-recup-e .ve-wi, .gk-recup-e .ve-rev-fade, .gk-recup-e .ve-body, .content.gk-recup-e { transition: none; } .gk-recup-e .ve-cue i::after { top: 30%; } /* le segment reste, immobile */ } /* ── Correctifs après relecture (08/09) ───────────────────────────────────── 1. Le débord des figures était calé sur la FENÊTRE (50vw) alors que .content est un élément flex à côté de la barre latérale : entre 992 et 1200 px, un bloc de 860 px passait sous la barre. En dessous de 1200 px, plus de débord : la figure prend la largeur de la colonne, point. */ @media (max-width: 1199px) { .gk-recup-e .ve-body:not(.ve-pin) .rc-prose > .rc-fig, .gk-recup-e .ve-body:not(.ve-pin) .rc-prose > .rc-diag, .gk-recup-e .ve-body:not(.ve-pin) .rc-prose > .rc-tool, .gk-recup-e .ve-body:not(.ve-pin) .rc-prose > .rc-tablewrap { margin-left: 0; margin-right: 0; } } /* 2. Le bleu et le rouge sont le SEUL marqueur de discipline des deux grands chiffres du chapitre 01 : la règle des moments les écrasait. */ .gk-recup-e .ve-moment .rc-card.rc-p { border-top: 2px solid var(--rc-blue); } .gk-recup-e .ve-moment .rc-card.rc-k { border-top: 2px solid var(--rc-red); } /* 3. .content garde le height:100% de Webflow : un fond posé dessus ne peint que le premier écran. La coquille .ve-page, elle, fait toute la hauteur : c'est elle qui porte la teinte du chapitre et sa transition. */ .gk-recup-e .ve-page { background-color: var(--ve-bg); transition: background-color 1.6s ease; } /* ═══ 12. LES VRAIES IMAGES ══════════════════════════════════════════════════ Mêmes photos que la variante D, mais ici elles sont PLEIN CADRE derrière le titre du chapitre. Trois conséquences : 1. la trame et la fleur du placeholder disparaissent (elles se verraient par transparence pendant le chargement) ; 2. la photo est nettement plus désaturée et plus sombre que dans D : le titre passe par dessus, en très grand, et doit rester lisible sur toute sa hauteur, y compris au milieu de l'image ; 3. le voile du carton devient un vrai dégradé de lecture, opaque en bas, qui raccorde l'image à la teinte du chapitre (--ve-bg). */ .gk-recup-e .ve-ph.ve-reel { background: #0B0E1A; } .gk-recup-e .ve-reel .ve-ph-in { background: none; } .gk-recup-e .ve-reel .ve-ph-in::before { display: none; } .gk-recup-e .ve-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; /* étalonné au tirage ; il reste un cran de moins car le titre passe dessus */ filter: brightness(.9); } .gk-recup-e .ve-carton > .ve-ph.ve-reel::after { background: linear-gradient(180deg, rgba(11, 14, 26, .46), rgba(11, 14, 26, .26) 30%, rgba(11, 14, 26, .70) 72%, var(--ve-bg) 100%); } /* l'interlude : un voile plus léger, l'image est seule, personne n'écrit dessus */ .gk-recup-e .ve-inter > .ve-ph.ve-reel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 14, 26, .40), rgba(11, 14, 26, .12) 36%, rgba(11, 14, 26, .78)); } /* la légende de l'interlude : le titre du chapitre qu'il annonce, filet or */ .gk-recup-e .ve-inter > .ve-cap { display: flex; align-items: center; gap: 12px; color: rgba(255, 255, 255, .62); } .gk-recup-e .ve-inter > .ve-cap::before { content: ''; width: 34px; height: 1px; flex: none; background: linear-gradient(90deg, #C8AA6E, rgba(200, 170, 110, 0)); } /* ═══ 13. LA FONTE DE LECTURE ═══════════════════════════════════════════════ Spectral (Production Type, Paris), retenue le 09/09 après comparaison avec Source Serif 4 et Literata. C'est la plus proche de GT Sectra : même famille d'idées, une serif française contemporaine dessinée pour l'écran et non adaptée du papier. Sa hauteur d'x est plus petite que celle d'Inter, d'où les 17 px ; son interligne est large (1,8), demandé pour aérer les longs paragraphes sur fond sombre. Ce qui NE change PAS de fonte, et c'est délibéré : · les titres restent en GT Sectra, c'est la voix de la marque ; · les sur-titres, pastilles, boutons et libellés restent en Inter : ce sont des étiquettes, pas de la lecture, et le sans y est plus net en petit ; · le texte DANS les schémas reste en Inter. Les libellés SVG sont ajustés à la largeur par mesure (getComputedTextLength) : changer leur fonte ferait déborder les boîtes dans les dix autres langues. La fonte est hébergée ici (css/serifs-lecture.css, fonts/lecture/), pas appelée chez un tiers, avec les jeux latin, latin étendu, cyrillique et vietnamien : de quoi couvrir les onze langues du wiki. Licence SIL OFL. */ .gk-recup-e { --rc-lecture: 'Spectral', Georgia, 'Times New Roman', serif; } /* On vise les éléments un par un plutôt qu'un conteneur : un héritage large emporterait aussi les étiquettes et le texte des schémas. */ .gk-recup-e .ve-body .gk-dk-p, .gk-recup-e .ve-intro .gk-dk-p, .gk-recup-e .ve-body .rc-lead, .gk-recup-e .ve-body .rc-prose li, .gk-recup-e .ve-body .rc-card p, .gk-recup-e .ve-body .rc-card li, .gk-recup-e .ve-body .rc-note, .gk-recup-e .ve-body .rc-tip, .gk-recup-e .ve-body .rc-ft, .gk-recup-e .ve-body .rc-fs, .gk-recup-e .ve-body .rc-fn, .gk-recup-e .ve-body .rc-tablewrap td, .gk-recup-e .ve-body .rc-h3, .gk-recup-e .ve-body .rc-h4 { font-family: var(--rc-lecture); /* Sur fond sombre, le lissage « antialiased » amincit les empattements jusqu'à les faire disparaître. On rend au texte le lissage plein. */ -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } .gk-recup-e .ve-body .gk-dk-p, .gk-recup-e .ve-body .rc-prose li { font-size: clamp(16.5px, 1.2vw, 17px); line-height: 1.8; color: rgba(255, 255, 255, .88); } .gk-recup-e .ve-intro .rc-story .gk-dk-p { font-size: 17px; line-height: 1.8; } .gk-recup-e .ve-body .rc-lead { font-size: clamp(16.5px, 1.35vw, 18.5px); line-height: 1.5; } .gk-recup-e .ve-body .rc-callout .gk-dk-p { font-size: clamp(17px, 1.4vw, 20px); } /* Les sous-titres passent dans la même fonte : un intertitre en sans au milieu d'un texte en serif se voit tout de suite, et pas en bien. */ .gk-recup-e .ve-body .rc-h3 { font-weight: 600; letter-spacing: 0; } .gk-recup-e .ve-body .rc-h4 { font-weight: 600; letter-spacing: 0; font-size: 15.5px; } .gk-recup-e .ve-body .gk-dk-p strong { font-weight: 600; } .gk-recup-e .ve-body .gk-dk-p, .gk-recup-e .ve-body .rc-tablewrap td { font-variant-numeric: proportional-nums; } /* ═══ 14. LA FONTE DES SCHÉMAS ══════════════════════════════════════════════ Demandé le 09/09 : la même Spectral que le texte courant, jusque dans les graphiques. Les tailles montent d'un point et demi, parce que la hauteur d'x de Spectral est plus petite que celle d'Inter et qu'un libellé de schéma est déjà petit. L'encre monte aussi : une serif sur fond noir a besoin de plus de présence qu'un sans. Les chiffres restent en chasse fixe (tabular-nums) : ce sont des colonnes de valeurs, elles doivent s'aligner. Spectral sait le faire, on ne change donc pas de fonte pour autant. */ .gk-recup-e .rc-fig text, .gk-recup-e .rc-diag text { font-family: var(--rc-lecture); font-size: 13px; fill: rgba(255, 255, 255, .72); } .gk-recup-e .rc-fig text.rc-cat, .gk-recup-e .rc-diag .rc-lbl { fill: rgba(255, 255, 255, .94); font-weight: 600; } .gk-recup-e .rc-fig text.rc-val, .gk-recup-e .rc-diag text.rc-val { font-family: var(--rc-lecture); font-variant-numeric: tabular-nums lining-nums; font-size: 12.5px; font-weight: 600; } .gk-recup-e .rc-fig text.rc-sub { font-size: 12px; fill: rgba(255, 255, 255, .62); } .gk-recup-e .rc-fig text.rc-mini, .gk-recup-e .rc-diag text.rc-mini { font-size: 11px; } .gk-recup-e .rc-fig text.rc-centre { font-size: 20px; } /* ═══ 15. L'AIR ═════════════════════════════════════════════════════════════ Demandé le 09/09 : « une quarantaine de pixels » de plus entre les blocs. Appliqué comme suit : · entre deux blocs (figure, schéma, calculateur, tableau, encadré) : +40 ; · entre deux paragraphes : +14 seulement. Quarante pixels entre chaque paragraphe casserait le fil de lecture, or c'est un texte suivi ; · SOUS un sous-titre : c'est là que ça serrait le plus. Le rc-h4 n'avait aucune marge haute et 6 px en dessous, il était collé des deux côtés. */ .gk-recup-e .ve-body .rc-fig, .gk-recup-e .ve-body .rc-diag { margin-top: 80px; margin-bottom: 80px; } .gk-recup-e .ve-body .rc-tool, .gk-recup-e .ve-body .rc-tablewrap { margin-top: 80px; margin-bottom: 80px; } .gk-recup-e .ve-body .rc-callout { margin: 80px 0; } .gk-recup-e .ve-body .rc-q { margin: 66px 0; } .gk-recup-e .ve-body .rc-card { margin-top: 44px; margin-bottom: 44px; } .gk-recup-e .ve-body .rc-checks { margin: 30px 0; } .gk-recup-e .ve-body .rc-checks li + li { margin-top: 12px; } .gk-recup-e .ve-body .gk-dk-p { margin-top: 24px; } .gk-recup-e .ve-body .rc-h3 { margin: 92px 0 28px; } .gk-recup-e .ve-body .rc-h4 { margin: 44px 0 16px; } .gk-recup-e .ve-body .rc-h3 + .gk-dk-p, .gk-recup-e .ve-body .rc-h4 + .gk-dk-p { margin-top: 0; } .gk-recup-e .ve-body .rc-lead { margin-bottom: 34px; } .gk-recup-e .ve-body .rc-fs { margin: 0 0 18px; } .gk-recup-e .ve-body .rc-fn { margin: 18px 0 0; } .gk-recup-e .ve-body .rc-callout .rc-kicker { margin-bottom: 12px; } /* Les autres endroits serrés de l'article, relevés en repassant la feuille de base : les listes des encadrés (4 px entre deux puces), le premier paragraphe d'un encadré (2 px sous son sur-titre), les libellés des calculateurs, et les cent sources du dernier chapitre (6 px). */ .gk-recup-e .ve-body .rc-card ul { margin: 14px 0 0; } .gk-recup-e .ve-body .rc-card li { margin: 9px 0; } .gk-recup-e .ve-body .rc-callout .gk-dk-p:first-of-type { margin-top: 6px; } .gk-recup-e .ve-body .rc-tool label { margin: 22px 0 8px; } .gk-recup-e .ve-body .rc-src li { margin: 15px 0; } .gk-recup-e .ve-body .rc-src ol { padding-left: 26px; } /* dans un chapitre épinglé, la colonne de gauche ne bouge pas : on lui rend ses marges d'origine, sinon la figure part hors de son écran */ .gk-recup-e .ve-pin-col .rc-fig, .gk-recup-e .ve-pin-col .rc-diag { margin: 0; } /* ═══ 16. LA DIRECTION ARTISTIQUE DU SITE, DANS L'ARTICLE ═══════════════════ Deux motifs repris de l'application, pour que l'article cesse d'être une page à part : 1. LES REPÈRES D'ANGLE. Ce sont les équerres d'or de la planche technique de /ressources (.reg reg-tl…, posées par poomsae-enhance.js). Deux suffisent, en haut à gauche et en bas à droite : quatre feraient un cadre, deux font une signature. 2. LE BISEAU. La charte n'a AUCUN arrondi ; ses formes sont coupées, jamais adoucies. L'hexagone (pointu à gauche et à droite) est déjà pris par les pastilles et les boutons, et il ne convient pas à un bloc large. On lui prend son principe et on coupe les quatre angles : un octogone, huit côtés, un angle rentré de 14 px. Réservé aux PLANCHES (figures, schémas, calculateurs), pas aux encadrés de texte : un biseau sur tout ferait un motif, sur les planches il fait une famille. ⚠ La charte interdit un box-shadow de contour sur une forme découpée : le contour suivrait le rectangle, pas le biseau. Le filet est donc dessiné par une couche découpée SOUS le contenu (::before), le fond par une seconde couche rentrée d'un pixel (::after). Le contenu, lui, n'est jamais découpé : l'info-bulle des graphiques doit pouvoir sortir de sa boîte. */ .gk-recup-e { --ve-bis: 14px; --ve-oct: polygon(var(--ve-bis) 0, calc(100% - var(--ve-bis)) 0, 100% var(--ve-bis), 100% calc(100% - var(--ve-bis)), calc(100% - var(--ve-bis)) 100%, var(--ve-bis) 100%, 0 calc(100% - var(--ve-bis)), 0 var(--ve-bis)); --ve-oct-in: polygon(calc(var(--ve-bis) - 1px) 0, calc(100% - var(--ve-bis) + 1px) 0, 100% calc(var(--ve-bis) - 1px), 100% calc(100% - var(--ve-bis) + 1px), calc(100% - var(--ve-bis) + 1px) 100%, calc(var(--ve-bis) - 1px) 100%, 0 calc(100% - var(--ve-bis) + 1px), 0 calc(var(--ve-bis) - 1px)); } /* ── les planches : biseau aux quatre angles ─────────────────────────────── */ .gk-recup-e .ve-body .rc-fig, .gk-recup-e .ve-body .rc-diag, .gk-recup-e .ve-body .rc-tool { /* ⚠ .rc-tool et .rc-callout n'étaient PAS positionnés dans la feuille de base : leurs couches en absolu se raccrochaient au premier ancêtre positionné, donc ailleurs dans la page, et le calculateur se retrouvait sans cadre du tout. */ position: relative; isolation: isolate; background: none; box-shadow: none; padding: 22px 26px 20px; } .gk-recup-e .ve-body .rc-callout { position: relative; } .gk-recup-e .ve-body .rc-fig::before, .gk-recup-e .ve-body .rc-diag::before, .gk-recup-e .ve-body .rc-tool::before { /* le filet */ content: ''; position: absolute; inset: 0; z-index: -2; background: rgba(255, 255, 255, .13); clip-path: var(--ve-oct); } .gk-recup-e .ve-body .rc-tool::before { background: rgba(200, 170, 110, .32); } .gk-recup-e .ve-body .rc-fig::after, .gk-recup-e .ve-body .rc-diag::after, .gk-recup-e .ve-body .rc-tool::after { /* le fond, un pixel dedans */ content: ''; position: absolute; inset: 1px; z-index: -1; background: linear-gradient(150deg, rgba(255, 255, 255, .062), rgba(255, 255, 255, .022)), var(--ve-bg, #0B0E1A); clip-path: var(--ve-oct-in); } .gk-recup-e .ve-body .rc-tool::after { background: linear-gradient(rgba(255, 255, 255, .038), rgba(255, 255, 255, .038)), var(--ve-bg, #0B0E1A); } /* ── les angles renforcés ──────────────────────────────────────────────── Repris de la fonction Corner de l'application. Ils se posent SUR le filet de la boîte (box-shadow inset de 1 px, au ras du bord) et le remplacent en or sur 18 px : c'est le même trait, plus marqué dans l'angle. D'où top et left à 0 et non un retrait : un retrait ferait un second cadre à l'intérieur du premier, ce qui n'est pas le motif. Trois angles seulement. Le bas gauche reste ouvert : quatre referaient un cadre, trois font une ponctuation. */ .gk-recup-e .ve-reg { position: absolute; width: 18px; height: 18px; z-index: 3; pointer-events: none; border: 0 solid rgba(200, 170, 110, .80); } .gk-recup-e .ve-reg-tl { top: 0; left: 0; border-left-width: 1px; border-top-width: 1px; } .gk-recup-e .ve-reg-tr { top: 0; right: 0; border-right-width: 1px; border-top-width: 1px; } .gk-recup-e .ve-reg-br { bottom: 0; right: 0; border-right-width: 1px; border-bottom-width: 1px; } /* les grands chiffres ne sont plus une boîte : ils n'ont ni fond ni filet, un angle renforcé y renforcerait un trait qui n'existe pas */ .gk-recup-e .ve-moment .ve-reg { display: none; } /* Le rail des chapitres est fixe à droite de la page. Le fil de lecture s'en tient à l'écart tout seul (colonne centrée), mais la grille des chapitres épinglés prend TOUTE la largeur : ses planches allaient jusqu'à 1416 px alors que le rail commence avant. Là encore, invisible tant qu'une planche n'avait pas de cadre. */ @media (min-width: 1200px) { .gk-recup-e .ve-body.ve-pin { padding-right: 84px; } } /* ═══ 17. LES ENCADRÉS DE DISCIPLINE ════════════════════════════════════════ « Si tu fais du poomsae », « Si tu fais du kyorugi ». Trois corrections : · le titre est le PREMIER enfant de la boîte, il ne doit pas hériter des 44 px de marge haute donnés aux sous-titres du fil de lecture ; · il était plus petit que ses propres puces, ce qui inversait la hiérarchie : 18 px contre 14,5 ; · un peu plus de matelas autour, pour loger les repères d'angle. */ .gk-recup-e .ve-body .rc-card { padding: 20px 24px 22px; } /* ── LE TITRE D'UNE BOÎTE ────────────────────────────────────────────────── Vaut pour TOUTES les boîtes de l'article, pas seulement les encadrés de discipline : les calculateurs (« Combien boire après la séance ? », « Tes cibles du jour ») ont le même titre `rc-h4` en premier enfant. Deux corrections, la même partout : 1. il ne doit pas hériter des 44 px de marge haute donnés aux sous-titres du fil de lecture. Ajoutés au matelas de la boîte, ça faisait 66 px de vide au-dessus du titre ; 2. c'est un titre de bloc, pas un intertitre de paragraphe : 18 px, plus gros que le texte qu'il annonce, sinon la hiérarchie s'inverse. */ .gk-recup-e .ve-body .rc-card > :first-child, .gk-recup-e .ve-body .rc-tool > :first-child, .gk-recup-e .ve-body .rc-callout > :first-child { margin-top: 0; } .gk-recup-e .ve-body .rc-card > .rc-h4, .gk-recup-e .ve-body .rc-card > .rc-h3, .gk-recup-e .ve-body .rc-tool > .rc-h4, .gk-recup-e .ve-body .rc-tool > .rc-h3, .gk-recup-e .ve-body .rc-callout > .rc-h4 { font-size: 18px; line-height: 1.25; margin-bottom: 16px; letter-spacing: 0; color: #F5F7FB; } .gk-recup-e .ve-body .rc-card p, .gk-recup-e .ve-body .rc-card li { font-size: 14.5px; line-height: 1.62; color: rgba(255, 255, 255, .80); } .gk-recup-e .ve-body .rc-card ul { padding-left: 20px; } /* ═══ 18. LE DÉPLIANT DE LA JOURNÉE DE COMPÉTITION ══════════════════════════ Le bloc « une journée de compétition » se colle en haut de l'écran, s'ouvre en grand, et la journée défile horizontalement pendant qu'on continue à faire défiler la page. Chorégraphie dans gk-recup-e.js. La scène fait un écran de haut plus la course ; sa hauteur est posée par le script, qui la calcule sur la largeur réelle de la bande. Ici on ne décrit que l'aspect. */ .gk-recup-e .ve-lep { position: relative; margin: 96px 0; } .gk-recup-e .ve-lep-colle { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; /* clip et non hidden : hidden ferait de ce bloc un conteneur de défilement, et le sticky des chapitres au-dessus tomberait */ display: flex; align-items: center; background: linear-gradient(180deg, var(--ve-bg, #0B0E1A), #080B14 55%, var(--ve-bg, #0B0E1A)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), inset 0 -1px 0 rgba(255, 255, 255, .10); } /* ── la page de garde ── */ .gk-recup-e .ve-lep-garde { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; padding: 0 6vw; background: linear-gradient(100deg, var(--ve-bg, #0B0E1A) 62%, rgba(11, 14, 26, 0)); will-change: opacity, transform; } .gk-recup-e .ve-lep-garde-in { max-width: 46ch; } .gk-recup-e .ve-lep-titre { margin: 0; font: italic 700 clamp(30px, 4vw, 58px)/1.06 'GT Sectra Display', Georgia, serif; color: #F5F7FB; letter-spacing: -.01em; } .gk-recup-e .ve-lep-sous { margin: 20px 0 0; max-width: 42ch; font-family: var(--rc-lecture); font-size: 17px; line-height: 1.7; color: rgba(255, 255, 255, .78); } .gk-recup-e .ve-lep-cue { margin: 34px 0 0; display: flex; align-items: center; gap: 12px; font: 600 10px/1 'Inter', sans-serif; letter-spacing: .28em; text-transform: uppercase; color: var(--ve-gold, #C8AA6E); } .gk-recup-e .ve-lep-cue::after { content: ''; width: 54px; height: 1px; background: linear-gradient(90deg, #C8AA6E, rgba(200, 170, 110, 0)); } /* ── la bande ── */ .gk-recup-e .ve-lep-bande { position: relative; height: 74vh; height: 74svh; width: 340vw; max-width: 4600px; flex: none; will-change: transform; } /* le schéma occupe toute la bande : plus de plaque, plus de cadre, on est DEDANS. Le viewBox est étiré (preserveAspectRatio="none") : les creux et les pics gardent leur hauteur pendant que la journée s'allonge. */ .gk-recup-e .ve-lep-bande .rc-diag { position: absolute; inset: 12% 0 18%; margin: 0; padding: 0; background: none; box-shadow: none; isolation: auto; } .gk-recup-e .ve-lep-bande .rc-diag::before, .gk-recup-e .ve-lep-bande .rc-diag::after { display: none; } .gk-recup-e .ve-lep-bande .rc-diag svg { width: 100%; height: 100%; display: block; } .gk-recup-e .ve-lep-bande .rc-ft { display: none; } /* la bande est redessinée par le script : plus aucun texte dans le SVG, il serait étiré avec le viewBox. Les libellés sont dans les moments, en HTML. */ .gk-recup-e .ve-lep-bande .rc-diag svg text { display: none; } .gk-recup-e .ve-lep-eff { fill: rgba(255, 255, 255, .055); } .gk-recup-e .ve-lep-base { stroke: rgba(255, 255, 255, .12); stroke-width: 1; vector-effect: non-scaling-stroke; } .gk-recup-e .ve-lep-courbe { fill: none; stroke-width: 2.2; stroke-linejoin: round; } .gk-recup-e .ve-lep-bande .rc-fn { position: absolute; left: 0; bottom: -13%; width: 46ch; margin: 0; } /* la note de source reste lisible : elle ne suit pas l'étirement */ .gk-recup-e .ve-lep-bande .rc-fs { display: none; } /* ── un moment ── */ .gk-recup-e .ve-lep-m { position: absolute; z-index: 3; width: 25ch; max-width: 300px; transform: translate(-14px, 14px); opacity: 0; transition: opacity .55s ease, transform .55s cubic-bezier(.16, .84, .26, 1); border-left: 1px solid rgba(255, 255, 255, .16); padding-left: 14px; } .gk-recup-e .ve-lep-m.is-vu { opacity: 1; transform: translate(-14px, 0); } .gk-recup-e .ve-lep-m--haut { top: 4%; } .gk-recup-e .ve-lep-m--bas { bottom: 6%; } .gk-recup-e .ve-lep-m--effort { border-left-color: rgba(200, 170, 110, .55); } .gk-recup-e .ve-lep-h { display: block; font: 600 10px/1 'Inter Tight', 'Inter', sans-serif; letter-spacing: .18em; font-variant-numeric: tabular-nums; color: var(--ve-gold, #C8AA6E); margin-bottom: 7px; } .gk-recup-e .ve-lep-m b { display: block; margin-bottom: 6px; font: italic 700 19px/1.2 'GT Sectra Display', Georgia, serif; color: #F5F7FB; } .gk-recup-e .ve-lep-t { display: block; font-family: var(--rc-lecture); font-size: 14.5px; line-height: 1.62; color: rgba(255, 255, 255, .80); } .gk-recup-e .ve-lep-fin { width: 34ch; } .gk-recup-e .ve-lep-fin .ve-lep-t { color: #F5F7FB; font-size: 16px; } /* la ligne de lecture : le trait vertical où la courbe se trace et où les moments s'écrivent. Discret, mais il explique la mise en scène. */ .gk-recup-e .ve-lep-colle::after { content: ''; position: absolute; left: 34%; top: 12%; bottom: 12%; width: 1px; z-index: 2; background: linear-gradient(180deg, rgba(200, 170, 110, 0), rgba(200, 170, 110, .34), rgba(200, 170, 110, 0)); pointer-events: none; } /* ── le repli : rouleau horizontal ordinaire ────────────────────────────── Sous 1024 px, ou si le lecteur demande moins de mouvement, aucun épinglage : la journée se fait glisser au doigt, à crans, et tout est déjà écrit. */ .gk-recup-e .rc-diag.ve-lep-rouleau { overflow-x: auto; scroll-snap-type: x proximity; } .gk-recup-e .rc-diag.ve-lep-rouleau svg { min-width: 720px; scroll-snap-align: start; } @media (max-width: 1023px) { .gk-recup-e .ve-lep-colle { position: static; height: auto; } .gk-recup-e .ve-lep { margin: 56px 0; } } /* ═══ 19. LES PLANCHES ANATOMIQUES ══════════════════════════════════════════ Elles portent la classe .rc-fig : elles héritent donc du biseau, des angles renforcés et de la note de source, comme toutes les autres figures. Seule la vue 3D est propre à elles. */ .gk-recup-e .ve-anat .ve-anat-vue { position: relative; margin: 16px 0 4px; height: clamp(360px, 52vh, 560px); background: radial-gradient(120% 90% at 46% 42%, rgba(24, 33, 56, .55), rgba(11, 14, 26, 0) 66%); touch-action: none; } .gk-recup-e .ve-anat .ve-anat-vue::after { /* tant que la planche charge, le cadre ne doit pas être un trou noir */ content: 'planche en chargement'; position: absolute; inset: 0; display: grid; place-items: center; font: 500 10px/1 'Inter', sans-serif; letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .28); pointer-events: none; transition: opacity .5s ease; } .gk-recup-e .ve-anat .ve-anat-vue.est-pret::after { opacity: 0; } .gk-recup-e .ve-anat-lb { position: absolute; pointer-events: none; white-space: nowrap; opacity: 0; transition: opacity .7s ease; /* la planche tourne : une étiquette finit toujours par passer devant un os blanc. L'ombre portée la garde lisible sans lui donner de cartouche. */ text-shadow: 0 1px 5px rgba(11, 14, 26, .95), 0 0 16px rgba(11, 14, 26, .85); } .gk-recup-e .ve-anat-lb.est-vu { opacity: 1; } .gk-recup-e .ve-anat-n { display: block; margin-bottom: 5px; font: 600 9.5px/1 'Inter', sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--ve-gold, #C8AA6E); } .gk-recup-e .ve-anat-v { display: block; font: 600 20px/1.15 'Inter Tight', 'Inter', sans-serif; color: #EEF1F7; font-variant-numeric: tabular-nums; max-width: 22ch; white-space: normal; } /* Le sélecteur à deux états : mêmes pastilles que les autres commandes de l'article, angles coupés à gauche et à droite, aucun arrondi. */ .gk-recup-e .ve-anat-ctrl { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; } .gk-recup-e .ve-anat-bt { padding: 9px 18px; cursor: pointer; border: 0; font: 600 11px/1 'Inter', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .70); background: rgba(255, 255, 255, .06); clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 9px 100%, 0 50%); transition: background .18s, color .18s; } .gk-recup-e .ve-anat-bt:hover { background: rgba(255, 255, 255, .11); color: #F2F4FA; } .gk-recup-e .ve-anat-bt:focus-visible { outline: 2px solid var(--ve-gold, #C8AA6E); outline-offset: 2px; } .gk-recup-e .ve-anat-bt[aria-pressed="true"] { color: #0B0E1A; background: linear-gradient(115deg, #8A6A2F 0 18%, #F7EFDC 34%, #C8AA6E 52%, #E4CE9B 74%, #8A6A2F 92%); } /* ce que le moyen sélectionné atteint, en toutes lettres sous la planche */ .gk-recup-e .ve-anat-dit { margin: 4px 0 0; max-width: 62ch; font-family: var(--rc-lecture); font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, .84); } .gk-recup-e .ve-anat-rate { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font-family: var(--rc-lecture); color: var(--rc-red, #E06A76); } @media (max-width: 700px) { .gk-recup-e .ve-anat .ve-anat-vue { height: 320px; } .gk-recup-e .ve-anat-v { font-size: 16px; } } /* ═══ 20. LES PLANCHES MOLÉCULAIRES ═════════════════════════════════════════ Elles réutilisent tout le gabarit des planches anatomiques (.ve-anat) : le biseau, les angles, le sélecteur, la note. Il ne leur manquait qu'un panneau de mesure, posé dans le coin bas gauche du cadre. */ .gk-recup-e .ve-mol .ve-anat-vue { height: clamp(380px, 56vh, 580px); } .gk-recup-e .ve-mol-p { position: absolute; left: 18px; bottom: 16px; z-index: 2; width: min(250px, 52%); display: flex; flex-direction: column; pointer-events: none; } .gk-recup-e .ve-mol-s { font: 600 9.5px/1 'Inter', sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--ve-gold, #C8AA6E); } .gk-recup-e .ve-mol-v { margin-top: 6px; font: 600 30px/1 'Inter Tight', 'Inter', sans-serif; color: #EEF1F7; font-variant-numeric: tabular-nums; } .gk-recup-e .ve-mol-m { display: block; height: 2px; margin: 10px 0 11px; background: rgba(255, 255, 255, .12); } .gk-recup-e .ve-mol-m > i { display: block; height: 100%; width: 100%; background: var(--ve-satin, #C8AA6E); transition: width .35s ease; } .gk-recup-e .ve-mol-c { font-family: var(--rc-lecture); font-size: 13px; line-height: 1.55; color: rgba(255, 255, 255, .78); } /* le sélecteur passe AVANT la vue sur ces planches : on choisit la situation, puis on regarde. L'ordre inverse oblige à chercher la commande sous l'image. */ .gk-recup-e .ve-mol .ve-anat-ctrl { margin: 14px 0 0; } @media (max-width: 700px) { .gk-recup-e .ve-mol .ve-anat-vue { height: 340px; } .gk-recup-e .ve-mol-p { left: 12px; bottom: 12px; width: min(200px, 62%); } .gk-recup-e .ve-mol-v { font-size: 24px; } .gk-recup-e .ve-mol-c { font-size: 12px; } } /* ═══ 21. LA LOUPE DE LA JOURNÉE DE COMPÉTITION ═════════════════════════════ Remplace la bande horizontale de la section 18. Le schéma reste entier sous les yeux ; le scroll entre dedans, arrêt par arrêt, et chaque arrêt porte son explication. Deux écrans et demi au lieu de cinq, et on sait toujours où on en est grâce à la frise du bas. Les règles de la section 18 qui servent encore (bandes d'effort, ligne de base, courbe) restent en place : seule la mise en scène change. */ .gk-recup-e .ve-loupe { margin: 96px 0; } .gk-recup-e .ve-loupe-colle { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; /* clip et non hidden : hidden ferait de ce bloc un conteneur de défilement et casserait le sticky des chapitres au-dessus */ display: flex; flex-direction: column; justify-content: center; gap: clamp(18px, 3vh, 34px); padding: 0 clamp(24px, 6vw, 90px); background: linear-gradient(180deg, var(--ve-bg, #0B0E1A), #080B14 55%, var(--ve-bg, #0B0E1A)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), inset 0 -1px 0 rgba(255, 255, 255, .10); } .gk-recup-e .ve-loupe-tete { max-width: 62ch; } .gk-recup-e .ve-loupe-titre { margin: 0; font-family: var(--rc-titre, 'GT Sectra Display'), Georgia, serif; font-size: clamp(24px, 3vw, 40px); line-height: 1.12; color: #F5F7FB; } .gk-recup-e .ve-loupe-sous { margin: 8px 0 0; font-family: var(--rc-lecture); font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .62); } /* ── le cadre : c'est lui qui découpe la loupe ── */ .gk-recup-e .ve-loupe-cadre { position: relative; overflow: hidden; height: clamp(190px, 30vh, 300px); border-top: 1px solid rgba(255, 255, 255, .10); border-bottom: 1px solid rgba(255, 255, 255, .10); } .gk-recup-e .ve-loupe-plan { position: absolute; inset: 0; transform-origin: 0 50%; will-change: transform; } .gk-recup-e .ve-loupe-plan .rc-diag { margin: 0; padding: 0; height: 100%; background: none; box-shadow: none; border: 0; } .gk-recup-e .ve-loupe-plan .rc-diag::before, .gk-recup-e .ve-loupe-plan .rc-diag::after { display: none; } .gk-recup-e .ve-loupe-plan .rc-diag svg { width: 100%; height: 100%; display: block; } .gk-recup-e .ve-loupe-plan .rc-diag svg text { display: none; } .gk-recup-e .ve-loupe-plan .rc-ft, .gk-recup-e .ve-loupe-plan .rc-fs, .gk-recup-e .ve-loupe-plan .rc-fn { display: none; } /* ── les repères : en HTML, donc jamais étirés par le zoom ── */ .gk-recup-e .ve-loupe-pins { position: absolute; inset: 0; pointer-events: none; } .gk-recup-e .ve-loupe-pin { position: absolute; top: 50%; left: 0; width: 9px; height: 9px; margin-left: -4.5px; background: rgba(255, 255, 255, .20); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); opacity: 0; transition: opacity .35s ease, background .35s ease, width .25s, height .25s; } .gk-recup-e .ve-loupe-pin.est-vu { opacity: 1; } .gk-recup-e .ve-loupe-pin.est-effort { background: rgba(200, 170, 110, .45); } .gk-recup-e .ve-loupe-pin.est-lu { width: 15px; height: 15px; margin-left: -7.5px; background: var(--ve-gold, #C8AA6E); box-shadow: 0 0 0 6px rgba(200, 170, 110, .12); } /* ── l'explication de l'arrêt ── */ .gk-recup-e .ve-loupe-dit { min-height: clamp(84px, 12vh, 116px); max-width: 68ch; transition: opacity .3s ease; } .gk-recup-e .ve-loupe-h { display: block; margin-bottom: 6px; font: 600 10px/1 'Inter', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--ve-gold, #C8AA6E); font-variant-numeric: tabular-nums; } .gk-recup-e .ve-loupe-dit b { display: block; margin-bottom: 6px; font: 600 17px/1.25 'Inter Tight', 'Inter', sans-serif; color: #F5F7FB; } .gk-recup-e .ve-loupe-t { display: block; font-family: var(--rc-lecture); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.7; color: rgba(255, 255, 255, .86); } .gk-recup-e .ve-loupe-dit.est-bilan .ve-loupe-t { color: #F5F7FB; } /* ── la frise : combien d'arrêts, et où l'on en est ── */ .gk-recup-e .ve-loupe-frise { display: flex; gap: 8px; } .gk-recup-e .ve-loupe-puce { width: 34px; height: 2px; background: rgba(255, 255, 255, .16); transition: background .3s ease; } .gk-recup-e .ve-loupe-puce.est-la { background: var(--ve-satin, #C8AA6E); } @media (max-width: 1023px) { .gk-recup-e .ve-loupe-colle { position: static; height: auto; padding: 28px 0; } .gk-recup-e .ve-loupe-cadre { height: 200px; } } /* ═══ 22. LES CHAMPS DES CALCULATEURS ═══════════════════════════════════════ Les listes déroulantes et les champs de saisie restaient en HTML nu : coins arrondis du système, chevron gris de macOS, hauteur qui ne s'accorde à rien. Ils passent à la charte comme le reste : pas d'arrondi, un angle coupé en haut à gauche et en bas à droite, un liseré or discret, et un chevron dessiné à nous. */ .gk-recup-e .rc-tool label { margin: 10px 0 6px; font: 600 9.5px/1 'Inter', sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--ve-gold, #C8AA6E); } .gk-recup-e .rc-tool input[type=number], .gk-recup-e .rc-tool input[type=time], .gk-recup-e .rc-tool select { appearance: none; -webkit-appearance: none; font: 500 14.5px/1.2 'Inter', sans-serif; height: 44px; padding: 0 15px; width: 160px; color: #F2F4FA; background: rgba(255, 255, 255, .055); border: 0; border-radius: 0; box-shadow: inset 0 0 0 1px rgba(200, 170, 110, .30); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); transition: background .18s, box-shadow .18s; } .gk-recup-e .rc-tool input[type=number]:hover, .gk-recup-e .rc-tool input[type=time]:hover, .gk-recup-e .rc-tool select:hover { background: rgba(255, 255, 255, .09); box-shadow: inset 0 0 0 1px rgba(200, 170, 110, .55); } /* le chevron : dessiné, en or, à la place de celui du système */ .gk-recup-e .rc-tool select { width: auto; max-width: 100%; padding-right: 42px; cursor: pointer; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23C8AA6E' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; } /* la liste déroulée reste peinte par le système : au moins, elle est sombre */ .gk-recup-e .rc-tool select option { background: #0D1524; color: #F2F4FA; } /* l'icône d'horloge de Chrome est noire sur fond nuit : on la retourne */ .gk-recup-e .rc-tool input[type=time]::-webkit-calendar-picker-indicator { filter: invert(1) sepia(1) saturate(2) hue-rotate(5deg) brightness(.85); cursor: pointer; } .gk-recup-e .rc-tool input[type=number]::-webkit-inner-spin-button { opacity: .5; } .gk-recup-e .rc-tool input:focus-visible, .gk-recup-e .rc-tool select:focus-visible { outline: 2px solid var(--ve-gold, #C8AA6E); outline-offset: 2px; background: rgba(255, 255, 255, .10); } /* le curseur de réglage, même famille : une piste fine, un pouce en losange */ .gk-recup-e input[type=range] { appearance: none; -webkit-appearance: none; width: 240px; height: 22px; background: none; cursor: pointer; } .gk-recup-e input[type=range]::-webkit-slider-runnable-track { height: 2px; background: rgba(255, 255, 255, .16); } .gk-recup-e input[type=range]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 15px; height: 15px; margin-top: -6.5px; background: var(--ve-satin, #C8AA6E); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); } .gk-recup-e input[type=range]::-moz-range-track { height: 2px; background: rgba(255, 255, 255, .16); } .gk-recup-e input[type=range]::-moz-range-thumb { width: 15px; height: 15px; border: 0; border-radius: 0; background: var(--ve-gold, #C8AA6E); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); } @media (max-width: 700px) { .gk-recup-e .rc-tool input[type=number], .gk-recup-e .rc-tool input[type=time] { width: 100%; } } /* ═══ 23. LES DEUX JOURNÉES DE COMPÉTITION ══════════════════════════════════ Elles ne sortent plus de la colonne de lecture et ne détournent plus le scroll : ce sont des figures, comme les autres, mais des figures qui portent leurs axes. Une échelle de battements à gauche, une durée cotée sous chaque bloc, l'heure de la journée en bas, et les trois rounds dessinés dans chaque combat. */ .gk-recup-e .rc-diag.ve-jour { padding: 26px 4px 6px; } .gk-recup-e .ve-jour svg { width: 100%; height: auto; display: block; overflow: visible; } .gk-recup-e .ve-jour .ve-jour-reg { stroke: rgba(255, 255, 255, .09); stroke-width: 1; } .gk-recup-e .ve-jour .ve-jour-eff { fill: rgba(255, 255, 255, .05); } .gk-recup-e .ve-jour .ve-jour-ax { fill: rgba(255, 255, 255, .42); font: 500 11px 'Inter', sans-serif; font-variant-numeric: tabular-nums; } .gk-recup-e .ve-jour .ve-jour-unite { fill: var(--ve-gold, #C8AA6E); font: 600 9px 'Inter', sans-serif; letter-spacing: .14em; text-transform: uppercase; } .gk-recup-e .ve-jour .ve-jour-nom { fill: #F2F4FA; font: 700 12px 'Inter Tight', 'Inter', sans-serif; } .gk-recup-e .ve-jour .ve-jour-pic { fill: var(--ve-gold, #C8AA6E); font: 500 9.5px 'Inter', sans-serif; font-variant-numeric: tabular-nums; } .gk-recup-e .ve-jour .ve-jour-cote line { stroke: rgba(200, 170, 110, .40); stroke-width: 1; } .gk-recup-e .ve-jour .ve-jour-dur { fill: rgba(255, 255, 255, .62); font: 500 10px 'Inter', sans-serif; font-variant-numeric: tabular-nums; } .gk-recup-e .ve-jour .ve-jour-h { fill: rgba(255, 255, 255, .38); font: 500 10px 'Inter', sans-serif; font-variant-numeric: tabular-nums; } .gk-recup-e .ve-jour .ve-jour-courbe { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; } /* ── les quatre moments, sous le schéma ── */ .gk-recup-e .ve-jour-moments { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0; margin: 22px 0 4px; border-top: 1px solid rgba(255, 255, 255, .10); } .gk-recup-e .ve-jour-m { padding: 16px 18px 16px 0; border-right: 1px solid rgba(255, 255, 255, .07); } .gk-recup-e .ve-jour-m:last-child { border-right: 0; } .gk-recup-e .ve-jour-m + .ve-jour-m { padding-left: 18px; } .gk-recup-e .ve-jour-mh { display: block; margin-bottom: 7px; font: 600 9.5px/1 'Inter', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--ve-gold, #C8AA6E); font-variant-numeric: tabular-nums; } .gk-recup-e .ve-jour-mt { display: block; font-family: var(--rc-lecture); font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .82); } .gk-recup-e .ve-jour-m.est-fin .ve-jour-mt { color: #F2F4FA; } @media (max-width: 700px) { .gk-recup-e .ve-jour-m { padding: 14px 0; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .07); } .gk-recup-e .ve-jour-m + .ve-jour-m { padding-left: 0; } } /* les cinq niveaux de l'hypnogramme, nommés à gauche de leur ligne */ .gk-recup-e .ve-mol-niv { position: absolute; inset: 0; pointer-events: none; } .gk-recup-e .ve-mol-niv > span { position: absolute; transform: translate(-100%, -50%); padding-right: 9px; white-space: nowrap; font: 600 9px/1 'Inter', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .46); } /* La journée sort de la colonne de lecture et prend la largeur du chapitre. On garde à droite la place du rail des chapitres, qui passerait sinon par-dessus la fin de la courbe. */ .gk-recup-e .ve-jour-scene { margin: clamp(48px, 7vh, 84px) 0; } .gk-recup-e .ve-jour-scene .rc-diag.ve-jour { max-width: none; margin: 0 clamp(30px, 5.5vw, 86px) 0 0; padding: 26px clamp(18px, 2.4vw, 34px) 10px; } @media (max-width: 900px) { .gk-recup-e .ve-jour-scene .rc-diag.ve-jour { margin-right: 0; } } /* l'avertissement de vulgarisation, remonté devant le premier chapitre */ /* En mise en page E, la bande prend toute la largeur de lecture, comme les figures : elle n'est plus bornée à 66 caractères, c'est ce qui en faisait un bloc posé au milieu de rien. */ .gk-recup-e .rc-vulg { max-width: none; width: min(100%, 1100px); margin: clamp(40px, 6vh, 72px) auto clamp(8px, 2vh, 20px); padding: 16px 48px 16px 0; } @media (max-width: 700px) { .gk-recup-e .rc-vulg { padding-right: 40px; } } /* ═══ 24. LA LECTURE SUR TÉLÉPHONE ═════════════════════════════════════════ Les deux articles longs se lisent sur tous les appareils (la porte mobile les laisse passer, cf. js/gk-mobile.js), et c'est par les WebViews de l'app que la plupart des lecteurs y arrivent. Ce bloc ne change RIEN au dessin sur grand écran. Il est en fin de fichier : à spécificité égale, c'est lui qui gagne. */ @media (max-width: 620px) { /* ── 1. L'ARTICLE PREND TOUTE LA LARGEUR ──────────────────────────────── Trois gouttières s'additionnaient sans que personne les ait voulues ensemble : 15 px du conteneur Webflow, 12 px de la coquille d'article, 16 px du corps. Quarante-trois pixels de chaque côté sur un écran de 375, soit près du quart de l'écran perdu, et une bande vide de part et d'autre dans l'app. On ne peut pas retirer le rembourrage des ancêtres : ils sont à tout le site. On sort donc du flux par la recette du plein cadre, qui marche quel que soit le rembourrage au-dessus. */ /* ⚠ Le plein cadre par `calc(50% - 50vw)` centre l'élément sur la boîte de son PARENT. Il ne retombe juste que si cette boîte est elle-même centrée dans l'écran. Ici elle ne l'est pas : la coquille d'article porte 12 px à gauche et 0 à droite, et l'article ressortait décalé de 6 px vers la droite. On remet donc d'abord la coquille d'aplomb (c'est la racine de l'article, on ne touche à rien d'autre), et le plein cadre n'a plus qu'à franchir les 15 px symétriques du conteneur Webflow. */ /* ⚠ `!important`, et ce n'est pas de la paresse. Le rembourrage vient de `.main { padding: 12px }` (hextech-or.css, sous 480 px) ET de la feuille Webflow distante, qu'on ne peut pas modifier. Essayé et mesuré : `.content.gk-recup-e` (0-2-0) ne l'emporte PAS, le calculé restait à 12 px et l'article ressortait décalé de 6 px. C'est le seul endroit de la feuille qui en porte un ; il est borné à l'article et au téléphone. */ .content.gk-recup-e { padding-left: 0 !important; padding-right: 0 !important; } .gk-recup-e .ve-page { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } /* Le TEXTE garde ses marges, lui : une phrase collée au bord ne se lit pas. Ce sont les images, les cartons et les figures qui doivent aller au bord. */ .gk-recup-e .ve-body { padding-left: 16px; padding-right: 16px; } .gk-recup-e .ve-carton, .gk-recup-e .ve-inter { margin-left: 0; margin-right: 0; } /* ── 2. LE CHAPITRAGE ─────────────────────────────────────────────────── Le rail de droite est masqué (il demande un survol). La barre de progression devient le repère : le filet d'or, et dessous le numéro et le titre du chapitre courant. Elle est fixée en haut, donc l'article se décale de sa hauteur et RIEN n'est recouvert. */ .gk-recup-e .ve-prog { height: auto; background: rgba(11, 14, 26, .92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255, 255, 255, .08); pointer-events: none; } .gk-recup-e .ve-prog > i { height: 2px; } .gk-recup-e .ve-prog-t { display: block; padding: 6px 16px 7px; font: italic 500 12.5px/1.25 'GT Sectra Display', Georgia, serif; color: rgba(255, 255, 255, .82); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gk-recup-e .ve-prog-t em { font-style: normal; font-family: 'Inter Tight', 'Inter', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .12em; font-variant-numeric: tabular-nums; color: var(--ve-gold); margin-right: 9px; } /* la place que prend la barre, rendue à l'article */ .gk-recup-e .ve-page { padding-top: 34px; } /* ── 3. LE TITRE DU HÉROS ─────────────────────────────────────────────── `max-width: 10ch` est une belle colonne haute quand elle tient à côté de la photo. Sur un téléphone elle laisse 200 px de vide à droite et empile le titre sur cinq lignes : ça ne se lit plus comme un titre. */ .gk-recup-e .ve-hero .gk-dk-hero { max-width: none; font-size: clamp(30px, 8.6vw, 40px); line-height: 1.02; } .gk-recup-e .ve-hero .gk-dk-lead { max-width: none; } /* ── 4. LES PLANCHES 3D ───────────────────────────────────────────────── La colonne d'étiquettes prend 58 % de la largeur : juste sur 700 px, absurde sur 245. On rend la place au dessin et on donne de la hauteur, la seule dimension dont un téléphone soit riche. */ .gk-recup-e .ve-anat-vue { height: 62vh; height: 62svh; min-height: 380px; } .gk-recup-e .ve-anat-lb { font-size: 10px; line-height: 1.3; } .gk-recup-e .ve-anat-lb b { font-size: 11px; } .gk-recup-e .ve-anat-ctrl { flex-wrap: wrap; gap: 6px; } .gk-recup-e .ve-anat-bt { font-size: 11px; padding: 8px 10px; } /* ── 5. LES BLANCS QUI NE DISENT RIEN ─────────────────────────────────── Les respirations sont calées sur la hauteur de l'écran (vh) : sur un téléphone en portrait, un écart de 12 vh fait 97 px, et la lecture se hache. On les ramène à des valeurs fixes, plus serrées. */ .gk-recup-e .ve-scene { margin-bottom: 0; } .gk-recup-e .ve-moment { margin: 18px 0; } .gk-recup-e .ve-quote { padding: 40px 16px; } .gk-recup-e .ve-intro { padding: 22px 16px 8px; } .gk-recup-e .rc-cols { display: block; } .gk-recup-e .rc-side { margin-top: 18px; } /* une colonne d'encadrés vide n'a pas à réserver sa place */ .gk-recup-e .rc-side:empty { display: none; } /* ── 6. RIEN NE DOIT DÉBORDER ─────────────────────────────────────────── Les tableaux et les grands schémas défilent DANS leur cadre, jamais en poussant la page : une page d'article qui glisse latéralement sous le doigt donne l'impression d'être cassée. */ .gk-recup-e .rc-tablewrap, .gk-recup-e .rc-diag, .gk-recup-e .rc-fig { max-width: 100%; overflow-x: auto; } .gk-recup-e .rc-fig svg, .gk-recup-e .rc-diag svg { max-width: 100%; height: auto; } }