/* Vitrine · classes dérivées DIRECTEMENT des valeurs en ligne de la maquette (docs/design/vitrine-v1/*.dc.html) — jamais ajustées à l'œil, chaque règle est tracée à un style exact relevé dans la source. Séparée de `composants.css` (l'intégration conçue à la main) : grandit écran par écran au fil du port (voir docs/design/port-vitrine/). Règle du fondateur (05/10) : quand la maquette et le code divergent sur une question de disposition/taille/texte fixe/composant déjà posée comme ouverte à RAPPORT_MISSION_05, la maquette tranche. Chaque bloc ci-dessous dit la question qu'il tranche. */ /* ───── M1 : rangée « Nouveautés » en tuiles compactes (question 9 — tranchée : la maquette dessine une mini-tuile de 130 px sur M1, PAS la vignette complète que D2/D3/D4 utilisent — vérifié : D2 dessine `aspect-ratio:4/5` + badges + bouton, M1 ne dessine qu'une photo + nom + prix). Source exacte, cadre « M1 Accueil multi-univers » : style="height:130px;border-radius:var(--r-m);background:var(--u-surface);position: relative;overflow:hidden" (kawaii : background:var(--u-a2);color:var(--u-on)) ; texte en style="position:absolute;left:12px;bottom:10px" (nom 13px/600, prix 13px/800 var(--f-data)). */ .tuile-nouveaute{position:relative;display:block;height:130px;border-radius:var(--r-m);background:var(--u-surface);overflow:hidden;color:var(--u-ink)} [data-univers="kawaii"].tuile-nouveaute{background:var(--u-a2);color:var(--u-on)} .tuile-nouveaute__media{position:absolute;inset:0} .tuile-nouveaute__media .image{display:block;width:100%;height:100%} .tuile-nouveaute__media .image img{width:100%;height:100%;object-fit:cover} .tuile-nouveaute__texte{position:absolute;left:12px;right:12px;bottom:10px;display:flex;flex-direction:column;gap:2px} .tuile-nouveaute__nom{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tuile-nouveaute__prix{font-family:var(--f-data);font-size:13px;font-weight:800} /* L'accueil (M1/D1/TB1/D0) : AUCUN des trois cadres ≥768 (TB1, D1, D0) ne dessine de rangée « Nouveautés » — vérifié par lecture, zéro occurrence de « NOUVEAUT » dans leurs segments de `Vitrine - Ordinateur.dc.html`. C'est une tuile mobile (M1) seulement ; la masquer ailleurs est donc la maquette elle-même, pas une réduction de notre fait. */ @media (min-width:768px){.page-accueil .rangee{display:none}} /* ───── TB1 : rangée de recherche dédiée, 768-1279 px, entre la barre et le bento — relevé dans l'outerHTML du cadre « TB1 Accueil multi 768 » (`Vitrine - Ordinateur.dc.html`) : style="padding:16px 24px 0" portant style="height:52px; border-radius:14px;background:var(--u-surface);display:flex;align-items:center; gap:10px;padding:0 16px" + le texte EXACT de `.barre__recherche` ("Rechercher une carte, une série, une figurine…", pas « Chasser : carte, série, figurine… » du champ `.tuile--chasser` mobile). Rien d'équivalent à cette largeur aujourd'hui : le champ mobile intégré (`.tuile--chasser`) est déjà masqué dès 768px (composants.css ligne 281) et la barre ne sert qu'une icône loupe (44×44) jusqu'à 1280px, où son propre champ plein (`.barre__recherche`) prend le relais — un vrai trou de 768 à 1279px, pas une préférence. Portée scopée à `.page-accueil` (la SEULE référence disponible pour cette rangée, TB1, est l'accueil multi-univers — aucune maquette univers à 768px, T1/K1/F1 n'ont que leur cadre téléphone et leur cadre 1280px/D2-D3-D4, § RAPPORT.md ; étendre à `.page-univers` sans preuve inventerait une disposition) : nommé pour le fondateur si un jour une référence univers à 768px confirme ou contredit cette portée. */ .recherche-tablette{display:none} @media (min-width:768px) and (max-width:1279.98px){ .page-accueil .recherche-tablette{display:flex;align-items:center;gap:10px;height:52px;border-radius:14px;background:var(--u-surface);padding:0 16px;margin-bottom:16px} .page-accueil .recherche-tablette input{flex:1 1 0%;min-width:0;height:100%;border:0;background:transparent;font-size:15px;outline:none} .page-accueil .recherche-tablette input::placeholder{color:var(--u-muted);opacity:1} } /* ───── K4 : scène du récit ouvert, univers kawaii (« objet en scène »). Deux faits relevés en dumpant l'outerHTML du cadre « K4 Récit ouvert Kawaii » (jamais le texte source — § PORT_MECANIQUE_VITRINE.md) : 1) Le fond de la scène est un APLAT `var(--u-a1)` (rose kawaii) + une trame à points 10 px — PAS le gris neutre `var(--u-surface)` que le code servait aux trois univers sans distinction. Source : premier calque style="position:absolute;inset:0; background:var(--u-a1)" puis style="...background-image:radial-gradient( var(--u-line) 1.2px,transparent 1.8px);background-size:10px 10px". 2) L'« objet en scène » n'est PAS une photo plein cadre (`object-fit:cover` sur toute la zone, comportement actuel) : la maquette dessine une capsule compacte 170×200, centrée horizontalement, radius 85 85 28 28 — le remplissage à rayures diagonales DANS cette capsule est la convention « photo manquante » déjà identifiée à l'Étape 1 (M1/D1, figurine détourée), donc remplacée ici par la vraie photo en object-fit:cover À L'INTÉRIEUR de la capsule, jamais étirée. Source : style="position:absolute; left:50%;top:120px;width:170px;height:200px;margin-left:-85px;border-radius:85px 85px 28px 28px". Scopé à <1280 : aucune maquette desktop kawaii pour le récit n'existe (D9 — la seule référence desktop de la famille récit — ne dessine QUE l'univers figurines) ; le comportement desktop actuel n'est donc pas touché ici, faute de référence kawaii. Hors mandat de cette passe (non vérifié, non touché) : l'éventuel chevauchement du texte du chapitre 1 sur cette scène (positions absolues de la maquette, qui mélange systématiquement mise en page de section et positionnement libre de l'outil — la structure scène/chapitres déjà en place n'est pas remise en cause sans une preuve de second état, scrollé, qu'un seul cadre statique ne donne pas). */ @media (max-width:1279.98px){ [data-univers="kawaii"] .recit__scene{background:var(--u-a1)} [data-univers="kawaii"] .recit__scene::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background-image:radial-gradient(var(--u-line) 1.2px,transparent 1.8px);background-size:10px 10px} [data-univers="kawaii"] .recit__objet{position:absolute;inset:auto;left:50%;top:120px;width:170px;height:200px;margin-left:-85px;border-radius:85px 85px 28px 28px;display:flex;align-items:center;justify-content:center;overflow:hidden} /* ⚠ F4 (port-vitrine, 05/10) : la capsule détourée des figurines (90 90 18 18 — la MÊME convention déjà confirmée 6 fois sur les fiches F1/D4/F3/K3/D8, ici une 7ᵉ fois sur la SCÈNE DU RÉCIT) manquait pour `.recit__objet` — seule kawaii (ligne ci-dessus) l'avait reçue, figurines restait en plein cadre par défaut (composants.css). Relevé dans l'outerHTML du cadre « F4 Récit ouvert Figurines » : style="position:absolute; left:26%;right:26%;top:110px;height:280px;border-radius:90px 90px 18px 18px". Scopé à <1280 comme kawaii : D9 (seule référence desktop figurines) n'a pas été relu pour cette forme précise, pas touché. */ [data-univers="figurines"] .recit__objet{position:absolute;inset:auto;left:26%;right:26%;top:110px;height:280px;border-radius:90px 90px 18px 18px;overflow:hidden} } /* ───── T5 : scène du récit TCG — trame à points 7 px (pas 10, la taille kawaii du bloc ci-dessus) sur le fond `var(--u-surface)` déjà servi par défaut (il correspond déjà — le gris neutre EST ce que T5 dessine, aucun aplat de teinte d'univers ici, à la différence de kawaii). Relevé dans l'outerHTML du cadre « T5 Récit ouvert TCG » : premier calque style="position:absolute;inset:0;background:var(--u-surface)" puis style="...background-image:radial-gradient(var(--u-line) 1.2px,transparent 1.8px); background-size:7px 7px". N'étend PAS la figurines (F4/D9, aucune trame dans leur outerHTML — spot/chrome/inclinaison 3D à la place, déjà rendus par --u-spot/--u-chrome, § composants.css ligne ~191). */ [data-univers="tcg"] .recit__scene::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background-image:radial-gradient(var(--u-line) 1.2px,transparent 1.8px);background-size:7px 7px} /* ───── F1 : rayon du champ « Chasser » de la tuile `.tuile--chasse-mobile` (univers figurines) — `--r-m` (20px), PAS 14px (`.champ-chasse{border-radius:14px}`, composants.css ligne 301). Relevé dans l'outerHTML du cadre « F1 Accueil Figurines » : style="…border-radius:var(--r-m);background:var(--u-surface);…". PROGRESSION.md avait d'abord classé ceci comme un CONFLIT avec K1 (kawaii), censé « concorder avec le code à 14px » — erreur de cette ancienne note, corrigée ici après vérification DIRECTE de la source de la maquette (jamais seulement la planche) : le cadre « K1 Accueil Kawaii » dessine en réalité style="…border-radius:28px;…" pour SON champ, exactement `[data-univers="kawaii"] .champ-chasse{border-radius:28px}` déjà codé (composants.css ligne 305) — confirmé aussi par `getComputedStyle` sur la page réelle (kawaii : 28px, figurines : 14px, headless Playwright, 05/10). K1 est donc déjà CONFORME (28 = 28), rien à y toucher ; seule figurines manquait son propre jeton, comme kawaii l'a déjà. Scopé `[data-univers="figurines"]` (même recette que la ligne kawaii juste en dessous), aucun effet sur tcg (T1, pas de règle dédiée, reste 14px — aucune référence T1 ne contredit). */ [data-univers="figurines"] .champ-chasse{border-radius:var(--r-m)} /* ───── Barre, nom + rayon (téléphone) : `composants.css` (« corrections du lot D », ligne ~599) choisit de TRONQUER « Boutique / figurines » à l'ellipse pour ne jamais déborder — mais la maquette ne tronque jamais ce texte : elle le laisse PASSER À LA LIGNE (deux lignes, « vitrine » puis « / figurines », vérifié dans l'outerHTML du cadre « F1 Accueil Figurines » : un seul
sans `flex-direction:column` ni saut de ligne explicite — donc un retour à la ligne NATUREL du texte dans l'espace disponible, pas une mise en page à deux rangées dessinée à la main). Question de disposition déjà résolue par le code (une troncature délibérée) mais autrement par la maquette (un retour à la ligne) — la maquette tranche. Composant partagé (`_barre.html`, TOUS les écrans ≥ 1 univers) : généralise au-delà de F1 seul, vérifié aussi contre D4 (desktop : le rayon est déjà masqué par `composants.css` ligne 53, `@media(min-width:768px)`, confirmé par l'outerHTML du cadre « D4 Accueil Figurines » — "vitrine" seul, aucun rayon — donc cette règle, qui ne s'applique qu'à `.logo__nom`, est sans effet visible ≥ 768 px, où `.logo__rayon` est de toute façon invisible). */ .barre__dedans .logo__nom{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.15} /* ⚠ Reprise K1 (harnais structurel, mesurer_structure.py) : `.barre__dedans` porte `padding:10px var(--marge) 14px` (composants.css ligne 57) — les QUATRE cadres mobiles de la barre (M1, T1, K1, F1, même rangée relevée dans leur outerHTML) dessinent `padding:0 4px 14px` : AUCUNE marge en haut. Scopé <768 px (seule largeur où ce padding n'est pas remplacé par `--nav-h`, composants.css ligne 75) — non vérifié pour les cadres desktop (D1 etc.), hors mandat de cette passe (K1 seul). */ @media (max-width:767.98px){.barre__dedans{padding-top:0;padding-left:18px;padding-right:18px}} /* ───── Tuile « récit du moment » (M1/D1 · T1/K1/F1 · D2/D3/D4 — `_tuile_recit.html`, UN gabarit, utilisé partout) : deux faits relevés dans l'outerHTML de QUATRE cadres distincts (M1, T1, K1, F1 — jamais devinés par un seul) : 1) Hauteur de la tuile sur téléphone : M1 = 380px (déjà la valeur exacte du code, laissé intact) ; T1 ET K1 = 360px (vérifiés tous les deux, mêmes 360px) ; F1 = 430px (plus haute — la figurine détourée, plus verticale, a besoin de plus de place). Scopé à `.page-univers` (T1/K1/F1 : la page dédiée à UN univers) — PAS `.page-accueil` (M1/D1 : déjà exact à 380px, et M1 peut très bien afficher un récit de N'IMPORTE QUEL univers selon le tirage du jour — le distinguer par l'univers DU RÉCIT plutôt que par la PAGE casserait M1 un jour sur trois). 2) La couverture figurines n'est JAMAIS un plein cadre (`object-fit:cover` sur toute la tuile, comportement actuel pour les trois univers sans distinction) : c'est une capsule compacte détourée, même convention que la figurine de M1/D1 (Étape 1), F2 (vignette) et F4/D9 (scène du récit) — confirmée ICI une quatrième fois, sur un quatrième composant. Valeurs lues sur les cadres DÉDIÉS (F1 mobile, D4 desktop) ; M1 affiche la même capsule mais 20 px plus bas (160px) quand son récit du moment est une figurine — écart mineur, non dupliqué séparément (cf. point 1, la hauteur DE LA TUILE est déjà correctement distinguée par page, pas celle de la capsule). */ .page-univers .tuile--recit{min-height:360px} .page-univers .tuile--recit[data-univers="figurines"]{min-height:430px} .tuile--recit[data-univers="figurines"] .tuile__couverture{inset:auto;left:30%;right:30%;top:22px;height:180px;border-radius:90px 90px 18px 18px} @media (min-width:768px){.tuile--recit[data-univers="figurines"] .tuile__couverture{left:auto;right:12%;top:40px;width:240px;height:380px}} /* ⚠ Reprise K1 (harnais structurel) : la tuile récit KAWAII est la SEULE des 4 cadres mobiles (M1/T1/K1/F1, même composant partagé) à ne PAS utiliser le fond de base `.tuile{background:var(--u-surface)}` — relevé dans l'outerHTML du cadre « K1 Accueil Kawaii » : `background:var(--u-surface-2)` (plus clair, pour la faire ressortir du fond de page) — M1/T1/F1 gardent bien `background:var(--u-surface)` (vérifié dans leur propre outerHTML), § règle du fondateur : ce qu'UN cadre dessine s'applique à CET écran, pas besoin d'une généralisation. */ .tuile--recit[data-univers="kawaii"]{background:var(--u-surface-2)} /* ───── D3 : capsule de l'« objet en scène » pour la tuile récit KAWAII (1280 px) — relevé dans l'outerHTML du cadre « D3 Accueil Kawaii » : style="position:absolute;right:14%; top:70px;width:240px;height:240px;border-radius:44px" portant le texte-témoin de la maquette "boîte surprise · 3D / Lottie" (une légende d'exemple, jamais du texte réel à reproduire — même convention que les autres légendes d'objet-en-scène déjà rencontrées, K4/F4/D9). PAS la même forme que la capsule figurines ci-dessus (90 90 18 18, verticale, left:30%/right:30% ou right:12%/w:240/h:380) : ici un carré 240×240, radius 44 UNIFORME, ancré à droite seulement (right:14%/top:70px) — une convention propre à kawaii pour CETTE tuile. Appliquée à `.tuile__couverture` (photo réelle, si la donnée en a une — `object-fit:cover` existant la recadre dans cette forme) ET `.tuile__trame` (repli sans photo, même risque déjà noté pour la capsule figurines, § TB1/PROGRESSION.md) pour ne pas dépendre de la branche que le gabarit choisit. */ @media (min-width:1280px){ .tuile--recit[data-univers="kawaii"] .tuile__couverture, .tuile--recit[data-univers="kawaii"] .tuile__trame{inset:auto;right:14%;top:70px;width:240px;height:240px;border-radius:44px} } /* ───── K1 (harnais structurel, reprise suivante) : MÊME capsule objet-en-scène, mais sur le cadre MOBILE de l'accueil kawaii — relevé dans l'outerHTML du cadre « K1 Accueil Kawaii » : style="left:50%;top:40px;width:150px;height:150px;margin-left:-75px; border-radius:28px" (var(--r-l)), CENTRÉE horizontalement (pas ancrée à droite comme D3) — une troisième géométrie de capsule propre à CE cadre, ni la figurines (verticale, 90 90 18 18) ni le D3 desktop (carré 240, ancré à droite) : chaque cadre dessine sa propre forme, § règle du fondateur. Corrige la note précédente (« aucun cadre mobile kawaii… ») : K1 EST cette référence, simplement pas encore lue à l'époque. */ @media (max-width:767.98px){ .tuile--recit[data-univers="kawaii"] .tuile__couverture, .tuile--recit[data-univers="kawaii"] .tuile__trame{inset:auto;left:50%;top:40px;width:150px;height:150px;margin-left:-75px;border-radius:28px} } /* ───── Vignette « tuile », figurines (T2/K2/F2 § RAPPORT.md, point « trouvé pas corrigé #1 » ci-dessus) : même convention de capsule détourée que la tuile-récit (ci-dessus) et M1/D1/F4/D9 — relevée dans l'outerHTML du cadre « F2 Tuile Figurines » : style="position:absolute;inset:-22px 18% 18px;border-radius:90px 90px 18px 18px" sur l'image elle-même (le fond var(--u-bg) du `.vignette__media` reste plein cadre, déjà correct — `--vig-media:var(--u-bg)` pour figurines, composants.css ligne ~175). Déborde volontairement en haut (-22px) : la maquette dessine l'objet qui dépasse le cadre, pas une photo contenue. Scopé à `.vignette--tuile` (le mode illustré par F2) ; la grille (`.vignette--grille`, D5/T3) n'illustre QUE l'univers cartes dans `ECRANS-VITRINE.md`, jamais figurines — rien à trancher là faute de référence. */ .vignette--tuile[data-univers="figurines"] .vignette__media .image{position:absolute;inset:-22px 18% 18px;border-radius:90px 90px 18px 18px;width:auto;height:auto} /* ───── Chantier « récit » (K4 · T5 · F4 · D9 ensemble, PROGRESSION.md § K4/T5) : LAQUELLE des deux lectures la maquette dessine-t-elle (scène/corps ou plein-écran par chapitre) ? Preuve relue dans l'outerHTML des QUATRE cadres, jamais devinée : - K4/T5/F4 (mobile, 780 px) : le texte du chapitre COURANT (surtitre « CHAPITRE i SUR n », titre, texte) est positionné dans le cadre ENTIER (`bottom:118px` depuis le bas du cadre de 780 px, jamais dans une boîte de 62vh) — la scène (aplat/trame kawaii-tcg ou photo+tilt figurines) occupe VISUELLEMENT tout le cadre derrière lui. AUCUN texte d'en-tête distinct (`r.titre`, le titre du RÉCIT lui-même, pas du chapitre) n'apparaît dans ces trois cadres — seul le chapitre courant est visible. - D9 (desktop, 1280×900, la seule référence desktop de la famille) : même absence d'un en-tête `r.titre` distinct — la colonne de droite n'affiche QUE la liste des chapitres (actif agrandi plein texte, les 3 autres réduits à `opacity:.38`+titre seul). Déjà implémenté par `.recit--suivi` (composants.css ~701) — confirmé fidèle, rien à y changer. La scène desktop est DÉJÀ `position:sticky;height:100vh` (layout.css ligne 48) — déjà correcte, le chantier concerne donc MOBILE seulement. Lecture retenue (celle que les 4 cadres dessinent, pas devinée entre A et B) : la scène est un fond PLEIN CADRE qui ne prend PAS de place dans le flux (position absolue, 100vh, épinglée en haut) ; `.recit__corps`, seul enfant du flux, démarre donc AU MÊME POINT que la scène (AUCUN "tirage" de marge négative requis : en sortant la scène du flux, le corps recule naturellement à sa place) et reste transparent — le chapitre 0 seul réserve `min-height:100vh` (sinon le chapitre 1 apparaîtrait immédiatement, collé sous le haut de la scène, comme avant cette passe) avec son texte aligné en BAS de cette réserve (`justify-content:flex-end`, correspond au `bottom:118px` de la maquette). Au-delà de cette première réserve, le corps redevient un article normal, opaque (`--u-bg`), exactement le comportement actuel — rien ne change pour les chapitres 2+. `.recit__entete` (le titre DU RÉCIT, distinct des titres de CHAPITRE) est masqué visuellement (gardé pour le lecteur d'écran, même recette que `.sr`) : aucun des 4 cadres ne le montre, confirmé 2 fois (K4/T5/F4 ET D9, deux familles de maquette indépendantes, même absence). `pointer-events:none` sur la zone qui recouvre la scène (progression + chapitre 0, liens/ boutons ré-autorisés) : la scène garde un écouteur `pointermove` (inclinaison/projecteur, `data-effet="incliner"`, effets.js ligne 63) — sans ce `none`, le texte superposé intercepterait le survol avant qu'il n'atteigne la scène. La maquette F4 fait précisément ce choix elle-même (son bloc de texte porte déjà `pointer-events:none` dans l'outerHTML) ; étendu à K4/T5 par cohérence (même famille, même superposition). Kawaii seulement : le texte du chapitre 0 passe à `color:var(--u-on)` (la maquette K4 écrit explicitlement `color:var(--u-on)` sur tout le bloc texte) — sans ça le texte garderait sa couleur claire par défaut (pensée pour un fond sombre) sur l'aplat ROSE clair de kawaii, illisible. TCG/figurines : pas touché, leur scène reste sombre (photo/aplat `--u-surface`), le texte clair par défaut contraste déjà correctement (vérifié sur la planche). `.recit__voile` (le fondu `transparent → --u-bg`, déjà dans le gabarit, composants.css ligne 624) masqué pour kawaii seulement : son fond est un APLAT (pas une photo), la maquette K4 ne dessine AUCUN calque de fondu (vérifié dans son outerHTML, à la différence de T5/F4 qui en ont un) — sur un aplat uni, un fondu vers `--u-bg` (sombre) ferait apparaître une ombre que la maquette ne montre pas. D9 : seul `.bloc__titre` (44px desktop, TOUS les chapitres actuellement, composants.css ligne 654) est corrigé pour ne s'appliquer qu'au chapitre ACTIF (30px sinon, la taille mobile déjà correcte) — scopé à `.recit__corps .bloc__titre` (jamais `.bloc__titre` seul : le même gabarit `blocs/chapitre.html` sert aussi « Son histoire » sur la fiche produit, D6/D7/K5/D8, hors chantier récit, vérifié par recherche avant d'écrire — aucune autre page n'utilise `.recit__corps`). */ /* `.recit__entete` masqué à TOUTES les largeurs (pas seulement <1280) : D9 (la seule référence desktop) ne le montre pas davantage que K4/T5/F4 — vérifié dans son outerHTML (§ ci-dessus), confirmé une seconde fois en comparant la capture réelle à 1280 px (le titre du RÉCIT apparaissait au-dessus de « CHAPITRE 01 SUR 01 », absent de la maquette). Gardé pour le lecteur d'écran (même recette que `.sr`), jamais supprimé. */ .recit--a-chapitres .recit__entete{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} @media (max-width:1279.98px){ .recit--a-chapitres .recit__scene{position:absolute;top:0;left:0;right:0;height:100vh;min-height:0} .recit--a-chapitres .recit__corps{background:transparent} .recit--a-chapitres [data-chapitre="0"]{min-height:100vh;justify-content:flex-end;box-sizing:border-box} .recit--a-chapitres .recit__progression, .recit--a-chapitres [data-chapitre="0"]{pointer-events:none} .recit--a-chapitres [data-chapitre="0"] a, .recit--a-chapitres [data-chapitre="0"] button{pointer-events:auto} [data-univers="kawaii"] .recit--a-chapitres [data-chapitre="0"]{color:var(--u-on)} [data-univers="kawaii"] .recit--a-chapitres [data-chapitre="0"] .bloc__texte{color:var(--u-on)} /* ⚠ Trouvé par `tests/pages/test_accessibilite.py` cette reprise (axe-core, color-contrast, « serious ») : poser `color` sur le CONTENEUR `[data-chapitre="0"]` (ligne ci-dessus) ne suffit PAS pour `.bloc__surtitre`/`strong`/`a` — ces trois ont chacun leur PROPRE règle de couleur directe (`composants.css` : `.bloc__surtitre{color: var(--u-a2)}`, `.bloc__texte strong{color:var(--u-ink)}`, `.bloc__texte a{color: var(--u-ink)}`) qui l'emporte TOUJOURS sur une couleur seulement HÉRITÉE d'un ancêtre, quelle que soit la spécificité de l'ancêtre (la cascade CSS place toujours une correspondance directe au-dessus d'une valeur héritée). `.bloc__texte` lui-même avait déjà reçu ce traitement (ligne au-dessus) ; pas ses propres enfants à couleur directe. Même teinte que le reste du chapitre 0 kawaii (`--u-on`), pas une nouvelle décision. */ [data-univers="kawaii"] .recit--a-chapitres [data-chapitre="0"] .bloc__surtitre, [data-univers="kawaii"] .recit--a-chapitres [data-chapitre="0"] .bloc__texte strong, [data-univers="kawaii"] .recit--a-chapitres [data-chapitre="0"] .bloc__texte a{color:var(--u-on)} /* K4 (port-vitrine, 05/10), seule référence récit kawaii qui existe dans les 43 : le bouton Fermer résout en `--u-on` (presque noir), jamais `--u-surface-2` (un violet moyen) — cohérent avec le reste de la scène kawaii, déjà posée en aplat clair `--u-a1` (un bouton sombre se détache mieux qu'un violet moyen sur un fond rose vif). Aucune seconde référence kawaii à ce niveau n'existe pour contredire. */ [data-univers="kawaii"] .recit__fermer{background:var(--u-on)} /* K4 : surtitre de chapitre en 600, jamais 400 (la base) — seule référence kawaii, cohérente avec le poids déjà renforcé des étiquettes de tuile kawaii ailleurs (`.tuile--chiffre .tuile__etiquette{font-weight:600}`, composants.css ligne 315). */ [data-univers="kawaii"] .recit__corps .bloc__surtitre{font-weight:600} [data-univers="kawaii"] .recit--a-chapitres .recit__voile{display:none} } @media (min-width:1280px){ .recit__corps .bloc__titre{font-size:30px} .recit--suivi [data-actif] .bloc__titre{font-size:44px} } /* ⚠ F4 (port-vitrine, 05/10) : « CHAPITRE 2 SUR 4 · ORIGINE » résout en rgb(255,107,26) dans l'outerHTML du cadre — c'est `--u-a1` de figurines (univers.css, #ff6b1a), jamais `--u-a2` (#9a6bff) que pose la règle de base (composants.css, `.bloc__surtitre{color:var(--u-a2)}`) : confirmé en comparant les deux teintes aux jetons déclarés, pas une coïncidence. T5 (tcg) ne montre AUCUN écart de couleur sur ce même bloc — la base `--u-a2` reste donc correcte pour tcg/ kawaii, seule figurines a besoin d'un autre jeton. Scopé à `.recit__corps` comme le `.bloc__titre` de D9 ci-dessus (même gabarit `blocs/chapitre.html` partagé avec « Son histoire » sur la fiche F3/D7, jamais vérifié là — pas étendu sans preuve). */ [data-univers="figurines"] .recit__corps .bloc__surtitre{color:var(--u-a1)} /* ───── Récit ouvert, bouton « Fermer » : le repère clavier « Échap » n'est dessiné QUE sur la référence desktop (D9 : "Fermer Échap") — les trois cadres MOBILES de la même famille (K4, T5, F4, vérifiés les trois) ne dessinent qu'un simple "Fermer", sans ce repère. Cohérent : un téléphone n'a pas de touche Échap, l'indice n'a pas de sens sous 1280 px. Le lien reste cliquable et la touche Échap reste active au clavier (`x-on:keydown.window="clavier"` sur `.recit`, indépendant de ce badge visuel) — on masque le TEXTE d'un raccourci qui ne s'applique pas à l'appareil, jamais le raccourci lui-même : pas un affaiblissement de l'exception a11y protégée (RAPPORT.md, « Fermer · Échap » gardé), seulement sa portée corrigée au bon point de rupture. */ @media (max-width:1279.98px){.recit__fermer .barre__raccourci{display:none}} /* ───── E2 : badge « Épuisé » posé SUR la photo de la fiche — relevé dans l'outerHTML du cadre « E2 Produit épuisé » : style="position:absolute;top:14px;left:14px" portant style="font-size:13px;font-weight:600;padding:6px 12px;border-radius:12px; background:var(--u-ink);color:var(--u-on)" sur le texte "Épuisé". Absent du gabarit actuel (`_fiche_medias.html`) : vérifié par recherche avant d'écrire, aucune classe `.medias__epuise` ni équivalent n'existait — seule la barre d'achat du bas (déjà correcte, `_fiche_achat.html`) portait l'état épuisé. Texte repris de `p.disponibilite.libelle` (jamais un "Épuisé" écrit en dur) : la même donnée que la barre du bas, qui peut aussi valoir "Vendue" pour une pièce unique (§ test `test_recit_prix_vivant`). Scopé à `.medias__scene` (déjà `position:relative`, composants.css ligne 428) — PAS `_fiche_boite.html` (K3/D8, la scène de boîte surprise est une interaction « ouvrir/refermer » différente, aucune référence maquette d'une boîte épuisée pour trancher son propre badge ; hors mandat de cette passe). */ .medias__epuise{position:absolute;top:14px;left:14px;z-index:2;font-size:13px;font-weight:600;padding:6px 12px;border-radius:12px;background:var(--u-ink);color:var(--u-on)} /* ───── T4 : recto/verso en PASTILLES texte sur téléphone, pas les points génériques — relevé dans l'outerHTML du cadre « T4 Fiche carte » : deux pastilles en bas à DROITE de la photo, style="height:36px;padding:0 10px;border-radius:10px" ("Recto" actif : background:var(--u-a1);color:var(--u-on);font-weight:600 ; "Verso" : background:var(--u-surface-2)) — jamais les points centrés (`.medias__points`) que le code sert actuellement à TOUTE fiche à plusieurs photos sans distinction, carte comprise. K5 (peluche, 5 photos, vérifié ci-dessous) confirme à l'inverse que les points SONT la bonne convention pour un objet multi-photos générique (5 points, le premier large) — l'exception touche donc « carte » (exactement 2 faces NOMMÉES), pas « plusieurs photos » en général. `.medias__vignettes` (la liste recto/verso) existe déjà, MASQUÉE sous 1280 (composants.css ligne 423) : affichée ici pour `.fiche--carte` seulement, en ligne, l'image de la vignette masquée (texte seul) — réutilise le MÊME `for="photo-N"` que le reste du composant (jamais un second mécanisme de bascule). */ @media (max-width:1279.98px){ .fiche--carte .medias__vignettes{display:flex;flex-direction:row;position:absolute;right:12px;bottom:12px;gap:4px;z-index:2} .fiche--carte .medias__vignettes .medias__vignette{width:auto;height:36px;aspect-ratio:auto;border-radius:10px;background:var(--u-surface-2);padding:0 10px;display:flex;align-items:center;justify-content:center} .fiche--carte .medias__vignettes .medias__vignette .image{display:none} .fiche--carte .medias__legende{position:static;font-family:var(--f-data);font-size:11px;color:inherit} .fiche--carte .medias__points{display:none} .fiche--carte #photo-1:checked ~ .medias__vignettes [for="photo-1"], .fiche--carte #photo-2:checked ~ .medias__vignettes [for="photo-2"]{background:var(--u-a1);color:var(--u-on);font-weight:600;outline:none} } /* ───── F3 : les onglets média (3D/360/Vidéo/Photos) posés SUR la scène, en bas — relevé dans l'outerHTML du cadre « F3 Fiche figurine » : style="position:absolute;left:12px; right:12px;bottom:12px" portant les pastilles "3D"/"360°"/"Vidéo" + un compteur à droite (`margin-left:auto`). Le code actuel (`.medias__onglets`, composants.css ligne 456) est une rangée en flux NORMAL, sous la scène — jamais superposée. `.medias` (le conteneur photo+onglets, PAS `.fiche__medias` qui engloberait aussi le titre) passe `position:relative` et les onglets passent en `position:absolute` ancrés à SON bas : comme un seul des trois (`.medias__photos`/`.medias__stage`) est visible à la fois (bascule `x-show`, déjà existant, pas touché), les onglets se superposent toujours à CELUI qui est affiché, quelle que soit sa hauteur. Scopé <1280 (seule référence lue ; D7 desktop non vérifié cette passe, pas de preuve pour y toucher). Compteur "1/8" de la maquette : PAS reproduit (correspond à une aide `.medias__aide`-like pour le mode Photos — aucune preuve suffisante de ce qu'il compte exactement pour ce cadre précis, où c'est le mode 3D qui est actif ; laissé tel quel plutôt que deviné). */ @media (max-width:1279.98px){ .medias:has(.medias__onglets){position:relative} .medias__onglets{position:absolute;left:12px;right:12px;bottom:12px;z-index:2} } /* ───── F3 : la scène de la fiche FIGURINES est une capsule détourée, jamais la photo en plein cadre (`.medias__vue .image img{max-height:60vh;object-fit:contain}` actuel, même règle générique pour tous les univers) — relevé dans l'outerHTML du cadre « F3 Fiche figurine » : scène `height:380px` (PAS 290, la valeur « carte » du cadre T4 voisin) ; capsule `left:22%;right:22%;top:26px;bottom:70px` (le `bottom:70px` réserve la place de la rangée d'onglets ci-dessus), `border-radius:90px 90px 18px 18px` — CINQUIÈME confirmation indépendante de la même convention « figurines = objet détouré » déjà portée pour M1/D1 (Étape 1), F1/D4 (tuile accueil), F2 (vignette), F4/D9 (scène du récit) : jamais une photo plein cadre pour cet univers. Desktop (D7) non vérifié cette passe, scopé <1280 comme F3 seul. */ @media (max-width:767.98px){ [data-univers="figurines"] .medias__scene{min-height:380px} [data-univers="figurines"] .medias__vue{position:absolute;inset:26px 22% 70px;max-width:none;border-radius:90px 90px 18px 18px} [data-univers="figurines"] .medias__vue .image img{width:100%;height:100%;max-height:none;object-fit:cover} } /* ───── K5 : badge (« Exclu Japon ») posé SUR la photo, pas sous le titre — relevé dans l'outerHTML du cadre « K5 Fiche article kawaii » : style="position:absolute;top:12px; right:12px" portant le badge, à l'INTÉRIEUR de `.medias__scene` ; rien après le sous-titre dans ce même cadre (le bloc prix/marché suit directement) — la maquette ne dessine PAS une seconde liste de badges sous le titre pour cet écran. Donnée réelle, jamais une valeur en dur : `p.badges` (même liste que `.fiche__badges` actuel, « Exclu Japon » de la maquette ≈ « Introuvable en Europe » du produit de démo `pochette-panda`, même famille d'exclusivité). Avant de généraliser : vérifié sur une TROISIÈME référence (F3, figurines) ET une quatrième (T4, carte) que NI L'UNE NI L'AUTRE ne dessine de badge sur sa photo (§ PROGRESSION.md) — l'exception touche donc « kawaii, fiche simple » (K5), jamais « toute fiche non-carte ». Scopée par `[data-univers="kawaii"]` (posé sur par base.html, § theme_p) ET `.medias:has(.medias__badges)` pour ne JAMAIS atteindre `_fiche_boite.html` (K3/D8 — série/boîte surprise, autre inclusion, aucune référence maquette d'un badge sur une boîte pour trancher) : seule `_fiche_medias.html` rend `.medias__badges`, K3/D8 ne l'ont jamais dans leur DOM. */ .medias__badges{display:none} [data-univers="kawaii"] .medias__badges{position:absolute;top:12px;right:12px;z-index:2;display:flex;flex-direction:column;align-items:flex-end;gap:6px;list-style:none;margin:0;padding:0} [data-univers="kawaii"] .fiche__medias:has(.medias__badges) ~ .fiche__achat .fiche__badges{display:none} /* ───── M2 : recherche plein écran (<1280 px) — relevé dans l'outerHTML du cadre « M2 Recherche instantanée » : le champ ET les résultats occupent le cadre ENTIER (375×780), RIEN d'autre derrière (ni barre, ni contenu de page) ; la rangée du haut, style="display:flex;gap:8px;align-items:center;padding:0 0 14px", porte le champ (style="flex:1;height:56px;border-radius:var(--r-m);background:var(--u-surface); padding:0 16px") ET un bouton « Annuler » texte (style="height:44px;padding:0 6px; font-size:14px;color:var(--u-muted)") À DROITE — présent dans la maquette, pas inventé. `.barre__loupe` (composants.css lignes 69/78/83 : seul déclencheur de recherche visible <1280 px aujourd'hui — `.barre__recherche` elle-même reste `display:none` jusqu'à 1280 px) devient le déclencheur plein écran via Alpine (`ouvrirRecherche`/ `fermerRecherche`, effets.js — même recette que `ouvrirMenu`/`fermerMenu` juste au-dessus : focus posé sur le champ, piège du focus par Tab, Échap ferme (x-on:keydown.escape sur le formulaire, _barre.html), le focus revient au bouton loupe à la fermeture). Sans JavaScript, `.barre__loupe` reste un lien normal vers /chercher — aucun changement ici ne retire ce repli (le gestionnaire ne s'attache qu'après `alpine:init`). `_barre.html` est le MÊME composant sur toutes les pages : la recherche plein écran profite donc à n'importe quelle page, pas seulement l'accueil (M2 lui-même est capturé depuis `/`). */ @media (max-width:1279.98px){.barre__loupe{display:flex}} /* ⚠ Reprise K1 (05/10, harnais structurel) : la règle ci-dessus rend `.barre__loupe` visible sur TOUTE page <1280 px, y compris l'accueil et les pages univers — or les QUATRE cadres mobiles qui montrent cette barre (M1, T1, K1, F1 — même composant partagé, structure identique relevée dans leur outerHTML) ne dessinent QUE 4 enfants (menu, points de rayon, nom, panier), JAMAIS de loupe : ces pages ont déjà leur propre champ de recherche intégré (`.tuile--chasser`/`.tuile--chasse-mobile`, visible <768 px uniquement, composants.css lignes 277-281/299-324). La loupe de la barre reste utile <1280 px sur les pages SANS ce champ intégré (fiche, récit, panier…, l'intention d'origine de M2 ci-dessus) et à 768-1279 px même sur l'accueil/l'univers (le champ intégré y est lui-même masqué, composants.css ligne 281/324) — seule la fenêtre <768 px sur CES pages précises est concernée. */ @media (max-width:767.98px){body:has(.page-accueil,.page-univers) .barre__loupe{display:none}} .barre__recherche[data-ouvert]{display:flex;position:fixed;inset:0;z-index:70;background:var(--u-bg);padding:14px;height:56px;flex:none;border-radius:0;align-items:center} .barre__recherche[data-ouvert] input{height:100%;font-size:16px} .barre__recherche[data-ouvert] .barre__raccourci{display:none} .barre__annuler{display:none;flex:none;appearance:none;height:44px;padding:0 6px;margin-left:8px;font-size:14px;color:var(--u-muted);background:none;border:0;cursor:pointer;font-family:inherit} .barre__recherche[data-ouvert] .barre__annuler{display:flex;align-items:center} .barre__recherche[data-ouvert] .instantane{position:fixed;left:14px;right:14px;top:84px;bottom:14px;z-index:69} .barre__recherche[data-ouvert] .instantane__panneau{max-height:none;height:100%} /* ───── T3/T3b/E1/E4 (`/chercher`, téléphone) : la maquette ne dessine JAMAIS la barre du site sur ces quatre cadres — le cadre commence directement au champ de recherche/aux filtres (vérifié dans l'outerHTML des quatre : aucune rangée de barre, à la différence de l'accueil mobile M1/T1/K1/F1 ET de la grille DESKTOP de recherche D5, 1280 px, qui dessine sa barre complète — seule la fenêtre TÉLÉPHONE de `/chercher` l'omet). Tranché : sous ce point de rupture, la page de recherche n'affiche pas la barre du site ; le retour se fait par le lien « Annuler » ajouté dans `chercher.html` (`.page-chasse__retour`) — aucun des quatre cadres ne dessine de flèche ni de lien dédié, juste le champ seul, donc le repli explicitement prévu par le mandat : un lien simple vers l'accueil, qui marche SANS JavaScript (un `` normal, jamais `history.back()` seul). Un repère de navigation reste atteignable au clavier : le lien d'évitement (`.saut`, avant `.barre` dans le DOM, inchangé) PUIS ce lien, puisque `.barre` entière est retirée du flux et de l'ordre de tabulation (`display:none`, pas seulement masquée visuellement). */ @media (max-width:767.98px){body:has(.page-chasse) .barre{display:none}} .page-chasse__entete{display:flex;align-items:center;gap:10px} .champ-chasse--page{flex:1 1 0%} .page-chasse__retour{display:none} @media (max-width:767.98px){ .page-chasse__retour{display:flex;flex:none;align-items:center;height:44px;padding:0 2px;font-size:14px;color:var(--u-muted)} } /* ───── C1/C2 : /compte comme une superposition sur téléphone — relevé dans l'outerHTML des DEUX cadres mobiles (C1 Connexion, C2 Création de compte) : un en-tête ALLÉGÉ (logo seul — pas de menu, pas de rangée de rayons, pas de recherche, pas de panier) portant à droite un lien « Fermer » en pastille, style="margin-left:auto;height:44px; padding:0 14px;border-radius:22px;background:var(--u-surface);display:flex; align-items:center;font-size:14px">Fermer — identique à la pastille `.menu__fermer`/ `.barre__panier` déjà codée ailleurs, jamais une forme inventée. RIEN de tel sur D13 (1280px, la seule référence desktop de `/compte`) : la barre normale complète (menu, rayons, recherche, Compte, Panier) y est servie SANS aucun « Fermer » — confirmé en lisant son outerHTML. Même famille que `/chercher` mobile déjà tranché juste au-dessus (une page qui SE FERME plutôt qu'une page qui navigue, barre entière retirée du flux à cette largeur) : même recette reprise ici, pas une nouvelle invention. Local à `compte.html` (PAS `_barre.html`, composant partagé par TOUTE page) — la question posée par `mesurer_structure.py` (« barre allégée partagée vs lien local à compte.html ») est tranchée du côté le moins risqué : aucune autre page n'est touchée. Un repère de navigation reste atteignable au clavier : le lien d'évitement (`.saut`, avant `.barre` dans le DOM, inchangé) PUIS le logo (named, vers `/`) PUIS « Fermer » (même `/`) — jamais un piège de focus, `.barre` entière sort du flux ET de l'ordre de tabulation. */ @media (max-width:767.98px){body:has(.page-compte) .barre{display:none}} .compte__barre-legere{display:none} @media (max-width:767.98px){ .compte__barre-legere{display:flex;align-items:center;gap:10px;padding:0 4px 14px} .compte__fermer{margin-left:auto;height:44px;padding:0 14px;border-radius:22px;background:var(--u-surface);display:flex;align-items:center;font-size:14px;color:var(--u-ink)} } /* ───── K5 : scène de la fiche article KAWAII — aplat d'accent + capsule, pas le fond neutre générique (`.medias__scene{background:var(--u-surface)}`, composants.css) — relevé dans l'outerHTML du cadre « K5 Fiche article kawaii » : scène `height:330px; background:var(--u-a2)` (un aplat vif, pas `--u-surface`/`--u-surface-2`), capsule détourée 180×210 centrée (`left:50%;top:40px;margin-left:-90px; border-radius:90px 90px 36px 36px`) — UNE TROISIÈME géométrie de capsule propre à cet écran (ni la figurines 90/90/18/18, ni le kawaii-accueil 28 uniforme de K1) : chaque cadre dessine sa propre forme, § règle du fondateur. Scopé à `_fiche_medias.html` (`.medias__scene`), PAS `_fiche_boite.html` (K3/D8, déjà sa propre scène `.boite`, aucun chevauchement de classe). Aucune référence DESKTOP pour cet écran dans les 43 (pas de « D-quelque chose Fiche article kawaii ») : scopé `<768px` par prudence, seule largeur prouvée, comme F3 avant sa propre référence desktop. */ @media (max-width:767.98px){ [data-univers="kawaii"] .medias__scene{min-height:330px;background:var(--u-a2)} [data-univers="kawaii"] .medias__vue{position:absolute;inset:40px auto auto 50%;width:180px;height:210px;margin-left:-90px;max-width:none;border-radius:90px 90px 36px 36px} [data-univers="kawaii"] .medias__vue .image img{width:100%;height:100%;max-height:none;object-fit:cover} /* § composants.css : fond clair ici (aplat d'accent vif), donc point SOMBRE (--u-on), pas le --u-ink clair par défaut (illisible sur un fond déjà clair). */ [data-univers="kawaii"] .medias__point{background:var(--u-on)} /* ⚠ E2 (port-vitrine, 05/10) : la scène d'un produit kawaii ÉPUISÉ ne dessine PAS l'aplat d'accent `--u-a2` ci-dessus — relevé dans l'outerHTML du cadre « E2 Produit épuisé » : fond rgb(47,36,66) = `--u-surface-2` (neutre), contre rgb(168,240,212) = `--u-a2` sur K5 (produit disponible). D'ABORD classé comme un conflit entre deux cadres kawaii (K5 contre E2, même règle, deux couleurs) ; relu : ce n'est pas un désaccord entre cadres, c'est un ÉTAT — E2 et K5 sont deux produits DIFFÉRENTS, l'un épuisé, l'autre non, chacun la référence de SON état. Le code a déjà un marqueur fiable pour cet état dans le DOM, jamais deviné : `.medias__epuise` (le badge "Épuisé", rendu par `_fiche_medias.html` seulement quand `p.disponibilite.etat == "epuise"`). Scopé par `:has()` sur ce marqueur réel plutôt que sur une nouvelle donnée inventée. */ [data-univers="kawaii"] .medias__scene:has(.medias__epuise){background:var(--u-surface-2)} } /* ───── K4 : bande d'achat fixe du récit, univers kawaii — relevé dans l'outerHTML du cadre « K4 Récit ouvert Kawaii » : la bande dessine un radius de 38px (pas `--r-m`, 20px, la valeur générique de `.bande`) et son avatar (`.bande__vignette`) est un CERCLE PARFAIT (28px = la moitié de sa taille 56px), pas le radius 12-14px générique des autres univers (T5/F4/D9, aucune référence kawaii pour les contredire sur CE point). Scopé sur `.bande[data-univers="kawaii"]` (l'attribut est posé directement sur `