/* v3-souplesse.css : ce que l'article « Gagner en souplesse en taekwondo » ajoute, et rien d'autre. La page charge, dans cet ordre : v3-recup.css (la charte et tous les composants partagés), serifs-lecture.css, CE FICHIER, puis v3-recup-e.css (la mise en page « E »). Tout ce qui existait déjà pour « récupération » (cartes, encadrés, figures, schémas, outils, tableaux, sommaire, notes, renvois de sources) n'est pas retouché ici : c'est le même article, dans la même coquille, et le redéclarer serait deux endroits à corriger. Les variables --rc-* sont posées sur :root par v3-recup.css. On s'en sert, on n'en redéclare aucune. Trois pièges à connaître avant de relire ce fichier : 1. LES VARIANTES SONT DES CLASSES NUES : `class="rc-gcard ok"`, `class="rc-vcol no"`, `class="rc-vbadge v-weak"`. Elles ne portent pas le préfixe `rc-` parce que ce sont des DONNÉES (la valeur du verdict), pas des sélecteurs écrits dans le balisage. On ne les cible donc jamais seules : toujours accolées à leur famille, `.rc-gcard.ok`, sinon une règle du site sur un `.ok` quelconque viendrait s'y poser. (Le 12/09, ces classes arrivaient COLLÉES, `rc-gcardok` : transform.py mangeait l'espace de `class="gcard ${m.v}"`. C'est réparé à la source.) 2. LES TEINTES DU THÈME PAPIER SONT REPEINTES, PAS TRANSPOSÉES. L'article d'origine posait des aplats pastel (vert d'eau, rose pâle) sur du blanc. Sur #0B0E1A, un aplat pastel devient une tache laiteuse. On garde le CODE (vert = validé, rouge = invalidé, bleu = discipline poomsae) mais en voiles à 16 % sur fond sombre, c'est-à-dire exactement les variables --rc-green-soft / --rc-red-soft / --rc-blue-soft déjà utilisées ailleurs dans l'article. 3. AUCUN ARRONDI, et les filets des blocs passent par `box-shadow: inset` comme dans tout le reste de l'article, pour que les cartes de cette feuille et les .rc-card de v3-recup.css aient rigoureusement le même bord. */ /* ═══ 1. LE CHAPITRE PLEINE LARGEUR ═════════════════════════════════════════ Trois chapitres (00 le verdict, 04 les méthodes, 05 la musculation) portent une grille de cartes au lieu d'une colonne de texte. La colonne d'encadrés n'a plus de raison d'être : on rend la largeur entière au contenu. Le corps de l'article pose déjà `style="max-width:none"` sur .rc-prose dans ces trois sections. La règle ci-dessous n'est donc pas un doublon inutile : elle tient si la version traduite perd l'attribut en route, et elle doit passer devant `.gk-recup-e .ve-body .rc-prose { max-width: 66ch }`, qui est chargé APRÈS nous. D'où le `.rc-ch.rc-full` (deux classes) et non `.rc-full` seul. */ .gk-recup .rc-ch.rc-full .rc-cols { grid-template-columns: minmax(0, 1fr); } .gk-recup .rc-ch.rc-full .rc-prose { max-width: none; } /* ═══ 2. LE TABLEAU DE VERDICT (chapitre 00) ════════════════════════════════ Cinq colonnes, une par niveau de preuve, remplies par le script. C'est la première chose que le lecteur voit : elle doit se lire sans rien cliquer. */ /* `min(220px, 100%)` et pas `220px` : sur un écran de 320 px, une piste de 220 px de minimum plus les gouttières dépasse, et c'est toute la PAGE qui part en défilement horizontal. Le `min()` autorise la piste à redescendre à la largeur disponible. Même raison dans la galerie, plus bas. */ .gk-recup .rc-vgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 14px; margin: 20px 0; } /* Même fond et même filet que .rc-card de v3-recup.css : ce sont des encadrés, ils n'ont aucune raison de se distinguer des autres encadrés de l'article. */ .gk-recup .rc-vcol { position: relative; padding: 14px 16px; background: linear-gradient(150deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10); } .gk-recup .rc-vcol h4 { margin: 0 0 10px; } .gk-recup .rc-vcol ul { list-style: none; padding: 0; margin: 0; } .gk-recup .rc-vcol li { padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, .08); font: 400 12.5px/1.45 var(--rc-body); color: rgba(255, 255, 255, .70); } /* l'énoncé, puis la preuve chiffrée : deux registres, deux tailles */ .gk-recup .rc-vcol li b { display: block; margin-bottom: 2px; font: 600 13px/1.35 var(--rc-body); color: #F2F4FA; } .gk-recup .rc-vcol li span { display: block; font-size: 11.5px; color: rgba(255, 255, 255, .58); } /* Le filet de tête code le verdict. 2 px et non les 4 px de l'article d'origine : c'est l'épaisseur qu'ont déjà .rc-card.rc-p et .rc-card.rc-k dans v3-recup.css, et deux épaisseurs de filet côte à côte se voient. « Jamais testé » n'a pas de couleur : c'est une absence, pas un jugement. */ .gk-recup .rc-vgrid > .rc-vcol.ok { border-top: 2px solid var(--rc-green); } .gk-recup .rc-vgrid > .rc-vcol.mid { border-top: 2px solid var(--rc-blue); } .gk-recup .rc-vgrid > .rc-vcol.weak { border-top: 2px solid var(--rc-gold); } .gk-recup .rc-vgrid > .rc-vcol.none { border-top: 2px solid rgba(255, 255, 255, .26); } .gk-recup .rc-vgrid > .rc-vcol.no { border-top: 2px solid var(--rc-red); } /* ═══ 3. LA PASTILLE DE VERDICT ═════════════════════════════════════════════ Elle sert deux fois : en tête de colonne du tableau, et sur chaque fiche de méthode. Une seule définition, donc, sans sélecteur de contexte. Le registre est celui des en-têtes de tableau de l'article (.gk-recup th) : très petit, capitales, fortement interlettré. C'est ce qui la fait lire comme une étiquette et pas comme un bouton. */ .gk-recup .rc-vbadge { display: inline-block; padding: 4px 8px; font: 600 9.5px/1 var(--rc-body); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; } .gk-recup .rc-vbadge.v-ok { background: var(--rc-green-soft); color: var(--rc-green); } .gk-recup .rc-vbadge.v-mid { background: var(--rc-blue-soft); color: var(--rc-blue); } .gk-recup .rc-vbadge.v-weak { background: rgba(200, 170, 110, .16); color: var(--rc-gold); } .gk-recup .rc-vbadge.v-no { background: var(--rc-red-soft); color: var(--rc-red); } /* « Jamais testé » : pas de teinte, juste un filet. Un aplat, même neutre, aurait donné à l'absence de preuve le même poids visuel qu'un verdict. */ .gk-recup .rc-vbadge.v-none { background: none; color: var(--rc-ink-3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); } /* ═══ 4. LES FICHES DE MÉTHODE (chapitres 04 et 05) ═════════════════════════ Une vignette dessinée, un verdict, le protocole, la preuve, et la requête à taper pour trouver une vraie photo. Le script en produit vingt-cinq. */ .gk-recup .rc-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 14px; margin: 20px 0; } .gk-recup .rc-gcard { display: flex; flex-direction: column; overflow: hidden; background: linear-gradient(150deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10); } /* La vignette : un fond très légèrement plus clair que la fiche, pour que le pictogramme au trait clair ait quelque chose sous lui et ne flotte pas. */ .gk-recup .rc-gimg { padding: 10px; background: rgba(255, 255, 255, .035); border-bottom: 1px solid rgba(255, 255, 255, .10); } /* Validé et invalidé teintent le fond de la vignette : on voit le verdict de la fiche avant d'avoir lu un mot. Les trois niveaux intermédiaires gardent le fond neutre, sinon la grille entière devient un vitrail. */ .gk-recup .rc-gcard.ok .rc-gimg { background: var(--rc-green-soft); } .gk-recup .rc-gcard.no .rc-gimg { background: var(--rc-red-soft); } .gk-recup .rc-gbody { padding: 14px 16px 16px; } .gk-recup .rc-gcard h4 { margin: 8px 0 6px; font: 600 14px/1.35 var(--rc-body); color: #F2F4FA; letter-spacing: .01em; } .gk-recup .rc-ghow, .gk-recup .rc-gev { font: 400 12.5px/1.5 var(--rc-body); margin: 6px 0 0; } .gk-recup .rc-ghow { color: rgba(255, 255, 255, .80); } /* « Comment : » est une étiquette, pas un mot du texte : or, comme tous les intitulés de l'article. */ .gk-recup .rc-ghow b { color: var(--rc-gold); font-weight: 600; } /* la preuve passe derrière le protocole : c'est la justification, pas la consigne. Elle porte les renvois [n], déjà stylés par v3-recup.css. */ .gk-recup .rc-gev { color: rgba(255, 255, 255, .62); } /* la requête à taper : monospace, le registre « donnée brute » de l'article */ .gk-recup .rc-gq { margin: 10px 0 0; font: 400 10.5px/1.4 var(--rc-mono); color: var(--rc-ink-3); } /* ═══ 5. LES PICTOGRAMMES D'EXERCICE ════════════════════════════════════════ Dessinés en SVG par le script, dans un viewBox 200x160 fixe. Les épaisseurs de trait sont celles de l'article d'origine : elles sont calées sur ce viewBox, les changer déforme les silhouettes. Ce qui change, c'est l'encre. Sur papier, le corps était noir sur blanc et le décor gris clair. Ici tout s'inverse : le corps est un blanc franc, le décor (sol, accessoires) redescend dans les opacités basses. On ne descend PAS en dessous de 28 % de blanc : en dessous, un filet de 2 px sur #0B0E1A disparaît à l'écran avant même de disparaître à l'impression. */ /* max-height reprise de l'original : le viewBox est plus haut que large, sans plafond la vignette mangerait la moitié de la fiche. Le SVG se centre alors dans sa boîte (preserveAspectRatio par défaut). */ .gk-recup svg.rc-pose { display: block; width: 100%; height: auto; max-height: 150px; } /* le corps et la tête : la seule chose qui doit se lire de loin */ .gk-recup .rc-pline { fill: none; stroke: rgba(255, 255, 255, .88); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; } .gk-recup .rc-phead { fill: rgba(255, 255, 255, .88); } /* Une méthode invalidée est dessinée en gris : la fiche « rebonds balistiques » ne doit pas avoir la même présence que « statique soutenu ». */ .gk-recup .rc-gcard.no .rc-pline { stroke: rgba(255, 255, 255, .40); } .gk-recup .rc-gcard.no .rc-phead { fill: rgba(255, 255, 255, .40); } /* le sol, et les accessoires (banc, caisse, rouleau, plateforme, cible, pattes d'ours, disques de la barre) : du décor, il reste en retrait */ .gk-recup .rc-pfloor { stroke: rgba(255, 255, 255, .30); stroke-width: 2; stroke-linecap: round; } .gk-recup .rc-pprop { fill: rgba(255, 255, 255, .30); } .gk-recup .rc-pbar { stroke: rgba(255, 255, 255, .42); stroke-width: 4; stroke-linecap: round; } /* l'or signale l'intention : ce qui tire (l'élastique) et ce qui bouge (les arcs et les flèches de direction). Il reste tel quel, c'est l'accent du site et il porte parfaitement sur fond sombre. */ .gk-recup .rc-pband { fill: none; stroke: var(--rc-gold); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 6 4; } .gk-recup .rc-parc { fill: none; stroke: var(--rc-gold); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 5 4; } /* la chaleur et le partenaire sont en rouge, mais ici le rouge ne dit pas « invalidé » : il dit « apport extérieur ». Opacité remontée de .5/.6 à .62/.72, un aplat rouge translucide sur #0B0E1A rend bien plus sourd que sur du blanc. */ .gk-recup .rc-pheat { fill: var(--rc-red); opacity: .62; } .gk-recup .rc-ppartner { fill: var(--rc-red); opacity: .72; } .gk-recup .rc-ppartnerl { fill: none; stroke: var(--rc-red); stroke-width: 5; stroke-linecap: round; opacity: .72; } /* ═══ 6. LE SCHÉMA DES ZONES DU COUP DE PIED (chapitre 07) ══════════════════ Trois groupes survolables dans un schéma de yop chagi : jambe d'appui (bleu), bassin (or), jambe de frappe (rouge). Les couleurs sont posées en dur dans le balisage, en var(--rc-blue) / var(--rc-gold) / var(--rc-red) : rien à repeindre, elles lisent déjà la charte. ⚠ Le curseur et l'état de survol sont posés ICI et nulle part ailleurs. Le script cherche ses zones en `#diag-kick .kz`, sans le préfixe `rc-`, et ne trouve donc jamais rien (le balisage dit `#rc-diag-kick .rc-kz`) : ni le `cursor:pointer` qu'il devait poser, ni la légende qu'il devait changer au survol. La légende ne peut pas être réparée depuis une feuille de style ; l'affordance, si. Sans ces deux règles, les trois zones n'ont plus AUCUN signe qu'elles réagissent. */ .gk-recup .rc-kz { cursor: pointer; opacity: .82; transition: opacity .18s; } .gk-recup .rc-kz:hover { opacity: 1; } /* L'intitulé du sélecteur de discipline. Il s'appelle .rc-label dans le corps de cet article, alors que v3-recup.css ne connaît que .rc-lbl : deux noms pour la même chose, hérités de la conversion. On rejoue donc ici, à l'identique, la règle .rc-lbl de v3-recup.css. (Le sélecteur est masqué par la mise en page E, qui force « les deux » ; la règle sert le jour où l'article est servi sans elle.) */ .gk-recup .rc-label { font: 600 10px/1 var(--rc-body); letter-spacing: .2em; text-transform: uppercase; color: var(--rc-gold); } /* La seconde occurrence est la phrase d'explication sous les boutons : le corps la dégrade en ligne (text-transform, letter-spacing, graisse). Elle reste en or 10 px, ce qui n'est pas lisible pour une phrase entière. On la repasse dans le registre des mentions, comme .rc-hint. L'attribut style est ce qui la distingue, et c'est le seul .rc-label du document qui en porte un. */ .gk-recup .rc-label[style] { font-size: 12px; line-height: 1.4; color: var(--rc-ink-3); } /* ═══ 7. PETITS ÉCRANS ══════════════════════════════════════════════════════ Les deux grilles se replient toutes seules (auto-fit / auto-fill + min()). Il ne reste qu'à resserrer les gouttières : à une colonne, 14 px de blanc entre deux cartes suffisent, et la vignette peut prendre plus de hauteur puisqu'elle a toute la largeur. */ @media (max-width: 600px) { .gk-recup .rc-gallery, .gk-recup .rc-vgrid { gap: 12px; } .gk-recup svg.rc-pose { max-height: 180px; } } /* ═══ 8. MOINS D'ANIMATION ══════════════════════════════════════════════════ Le seul mouvement de cette feuille est le fondu des zones du schéma. On le coupe, l'état de survol reste. */ @media (prefers-reduced-motion: reduce) { .gk-recup .rc-kz { transition: none; } }