/* ========================================================================== wg2-accueil.css — LA PAGE D'ACCUEIL, `index.html`, morceau 11 Planches : « Page 3 · l'accueil ordinateur » et « Page 3 · l'accueil mobile », toutes deux dans « WG 2.0 Pages.dc.html ». Spec : 5.5 « Accueil », VALIDÉ le 24 août (volume 5, page 3). ⚠⚠ LE DOSSIER ANNONÇAIT QUE CES PLANCHES ÉTAIENT AILLEURS ET QUE CE MORCEAU SERAIT BLOQUÉ. `site/CLAUDE.md` ligne 443 porte, depuis le 2026-08-29 : « UN MANQUE QUI BLOQUERA LES MORCEAUX 9 ET 11 : le verrou ne lit qu'une seule maquette […] les planches de l'accueil et du hub sont dans un AUTRE fichier ». **C'est faux pour l'accueil comme ce l'était pour le hub.** Relevé du 2026-09-02 : « Page 3 · l'accueil ordinateur » dans WG 2.0 Pages.dc.html → 143699 « Page 3 · l'accueil mobile » dans WG 2.0 Pages.dc.html → 175848 les deux dans WG 2.0 Accueil.dc.html → 0 Il n'y avait rien à réparer. ⚠ AUCUNE VALEUR N'EST CHOISIE ICI. Chacune est RELEVÉE dans le balisage de la planche — pas lue sur une image — ou vient d'un jeton de `wg2-fondations.css`. Là où la planche est muette, c'est le jeton qui parle, jamais un nombre écrit à la main. ⚠ CETTE FEUILLE NE SE SUFFIT PAS. La page charge, dans cet ordre : wg2-fondations.css les jetons wg2-fiche-chaine.css l'en-tête, la barre, les sections, la queue de contenu et le pied — LES MÊMES OBJETS que sur les 104 pages déjà validées wg2-accueil.css ce qui est propre à cette page ========================================================================== */ /* -------------------------------------------------------------------------- 1 · LES DEUX COLONNES — `grid-template-columns: 190px 930px`, `gap: 40px` Spec 5.5 : « puis `190px 930px`, `gap: 40px` ». Relevé dans la planche : `display:flex; gap:40px; align-items:flex-start`, la colonne en `width:190px;flex:none` et le contenu en `flex:1;min-width:0`. ⚠ LA COLONNE EST À GAUCHE, ET CE N'EST PAS UNE RÈGLE D'ORDRE : elle est ÉCRITE EN PREMIER dans le document, comme la planche la pose en premier dans son flux. Le hub télé fait l'inverse pour la même raison. -------------------------------------------------------------------------- */ /* ⚠⚠ LE BANDEAU DE TETE VIT DESORMAIS DANS `.wg-corps`, premier enfant. Il y est entré le 2026-09-02 pour que la vue téléphone puisse le glisser entre la dernière catégorie et l'introduction — `order` ne déplace que des FRÈRES, et tant que le bandeau vivait dans un conteneur à lui, aucune feuille ne pouvait l'atteindre. Sur ordinateur il reste EXACTEMENT où il était : première ligne, toute la largeur, collé au-dessus des deux colonnes. `flex-wrap: wrap` ouvre une seconde ligne pour les colonnes `width: 100%` lui rend ses 1160 `order: -1` le place avant la colonne quoi qu'il arrive `gap: 24px 40px` 24 sous le bandeau — c'est le `padding-top` que le conteneur portait — et 40 entre les deux colonnes `padding-top: 0` parce que ces 24 px SONT désormais le row-gap : une seule source pour cet écart, jamais deux. */ .wg2 .wg-corps--accueil { display: flex; flex-wrap: wrap; /* ⚠ AUCUN ECART DE RANGEE ICI : chaque ecart vertical est porte par le bloc qui le precede, une source chacun. Un `row-gap` s'ajouterait aux marges posees plus bas et ferait deux sources pour un meme blanc. */ gap: 0 40px; align-items: flex-start; /* ⚠ 0 ET NON 24 : les 24 px etaient l'ecart SOUS le bandeau, qui vivait au-dessus du conteneur. Le bandeau est entre dedans, l'ecart le suit (voir la marge ci-dessous). Le bandeau est le premier bloc de la page sur ordinateur : rien ne se perd. */ /* 2026-09-04 - ECART MINIMUM SOUS LA BARRE BLEUE, 32 px, arrete par Phil. Avant, TOUT l'ecart entre la barre de navigation et le contenu venait de la banniere : quand elle ne se remplissait pas, la page servait le contenu COLLE a la barre — mesure sur la production, bas de barre 153 px, haut du contenu 153 px, ecart ZERO. Un ecart de page ne doit pas dependre d'une annonce. */ padding-top: 32px; } .wg2 .wg-corps--accueil > .wg-acc-pub { order: -1; width: 100%; /* L'ecart est pose une seule fois, dans wg2-fondations.css. */ } .wg2 .wg-corps--accueil > .wg-acc-col { width: 190px; flex: none; } .wg2 .wg-corps--accueil > .wg-contenu { flex: 1; min-width: 0; } /* -------------------------------------------------------------------------- 2 · LA COLONNE DE GAUCHE — cinq liens à cube isolé, AUCUN TITRE Relevé dans la planche, au caractère près : conteneur display:flex; flex-direction:column; gap:12px; margin-bottom:32px ligne display:flex; gap:9px; align-items:center cube 8 × 8; border-radius:2px; flex:none libellé 700 17px/1.2 'Baloo 2'; #16150f ⚠ AUCUN TITRE — spec 5.5, « Colonne de gauche : aucun titre (voir 4.5 bis) ». La spec 5.1, ANTÉRIEURE, demandait « Multimédia pour tous » ; la planche ne le montre pas. Les deux textes de l'original sont pris sans être écrits, et ils s'inscrivent aux retraits : ce sont des TEXTES, aucune adresse n'est perdue. ⚠ LES CINQ COULEURS DE CUBE SONT CELLES DES JETONS, pas des valeurs écrites ici : `wg-cube-1` à `wg-cube-5` de `wg2-fondations.css`. La planche les donne dans son ordre à elle — #2000C3, #158D00, #25DE00, #F90015, #FFCE00 — et le bâtisseur numérote dans cet ordre-là. -------------------------------------------------------------------------- */ .wg2 .wg-acc-col__liens { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; } .wg2 .wg-acc-col__lien { display: flex; gap: 9px; align-items: center; } .wg2 .wg-acc-col__lien > .wg-cube { width: 8px; height: 8px; border-radius: 2px; flex: none; } .wg2 .wg-acc-col__lien > a { font: 700 17px/1.2 'Baloo 2', Nunito, sans-serif; color: #16150f; text-decoration: none; } .wg2 .wg-acc-col__lien > a:hover { text-decoration: underline; } /* -------------------------------------------------------------------------- 3 · LE TEXTE D'INTRODUCTION — deux phrases Relevé dans la planche : phrase 1 400 15px/1.6 Arial; #16150f; margin-bottom:6px le nom « Webmaster-Gratuit » en 700 phrase 2 400 15px/1.6 Arial; #3d3a33; margin-bottom:20px mots cliquables en 700 #2000C3 ⚠⚠ LES DEUX PHRASES SONT SUR DEUX LIGNES — décision de Phil du 2026-09-02, et elle rejoint le dessin : la planche écrit bien DEUX `
` séparés. Ce fichier a porté pendant une demi-journée la note « les deux phrases sont un seul bloc, le CSS ne sait pas viser la première » — c'était vrai du document que j'avais écrit, pas du dessin. **La coupure débloque les deux couleurs de la planche**, qui étaient inatteignables tant que le bloc était unique. -------------------------------------------------------------------------- */ /* ⚠⚠ LA BOITE DE TEXTE NE FAIT PAS LA TAILLE DE SON ENCRE, et c'est ce qui rendait le rythme incoherent — Phil, 2026-09-02 : « interlignes incoherents entre les 3 elements comme d'habitude ». Mesure avant : 24 / 35 / 41 d'encre a encre, pour des marges de 20 / 40 / 24. `text-box: trim-both cap alphabetic` coupe la boite a la hauteur de capitale et a la ligne de base : la marge devient CE QUE L'OEIL VOIT. C'est le geste du 2026-08-28 sur les blocs 10 et 11, qui avait ramene 14 · 22 · 23 · 17 a 12 partout. UNE SEULE SOURCE : 24 px. */ /* ⚠⚠ LE TITRE DE TETE S'AFFICHE DESORMAIS SUR LES DEUX VUES — decision de Phil, 2026-09-02 : « La sélection des loisirs numériques = h1 ». Il etait masque au-dessus de 767, parce que la planche ordinateur ne le porte pas. Sa decision est POSTERIEURE a la planche et elle la bat. ⚠ C'est le SEUL geste du jour qui change la vue ordinateur qu'il a validee, et il l'a demande. ⚠ La cote reprend celle des titres de section (23 px), pas les 20 px du telephone : sur une page large, un titre de niveau 1 plus petit que les titres qu'il coiffe se lirait comme une erreur. Le palier 767 garde ses 20 px, il n'est pas touche. */ .wg2 .wg-acc-titre { /* ⚠ LA MEME TAILLE ET LA MEME POLICE QUE L'ENUMERATION — decision de Phil, 2026-09-02, devant le rendu : la phrase est d'un seul tenant, et seul le GRAS distingue le titre. En 23 px Baloo 2 devant du 15 px Arial, elle se lisait comme un texte qui change de police au milieu. C'est aussi ce qui remet le titre a la hauteur de l'ancienne accroche, donc aligne sur la colonne de gauche. */ font: 700 15px/1.6 Arial, Helvetica, sans-serif; color: #16150f; /* ⚠⚠ SUR UNE SEULE LIGNE AVEC L'ENUMERATION — Phil, 2026-09-02 : « La sélection des loisirs numériques : / TV en direct, radio, jeux en ligne et musique gratuite. / Corriger : sur une seule ligne ». Le titre etait un bloc, l'enumeration un paragraphe : ils tombaient l'un sous l'autre. En `inline`, la phrase coule d'un trait et se replie naturellement quand la fenetre retrecit. ⚠ Le `

` RESTE un `

` : c'est son rendu qui devient en ligne, pas sa nature. Le titre de niveau 1 de la page ne change pas. */ display: inline; /* ⚠ LA LIGNE DE BASE DU TITRE TOMBE SUR CELLE DE « TV en direct », le premier lien de la colonne de gauche — Phil, 2026-09-02 : « sur le meme alignement que la base ». Mesuree avec un repere en `vertical-align: baseline`, jamais avec le haut d'une boite : 285,5 contre 282,5, soit 3 px. Le conteneur remonte donc de 3 px, et l'ecart tombe a ZERO. */ margin: 0; } /* ⚠ INTERLETTRAGE +3 % SUR TOUTE LA LIGNE — Phil, 2026-09-02, apres l'avoir vu a 5 % : « Pardon espacement, pas 5% mais 3% ». `.03em` VAUT exactement 3 % de la taille de police, quelle qu'elle soit : la valeur suit le corps au lieu d'etre figee en pixels. Elle porte sur le titre ET sur l'enumeration, qui sont une seule phrase. */ .wg2 .wg-acc-titre + .wg-acc-intro, .wg2 .wg-acc-titre { position: relative; top: -3px; letter-spacing: .03em; } /* ⚠⚠ ET LA MARGE QUI SEPARE LA LIGNE DES BOUTONS DE PARTAGE NE PEUT PLUS VIVRE SUR LE PARAGRAPHE : un element `inline` IGNORE les marges verticales. Posee la, elle ne faisait plus rien — mesure : 6 px entre la ligne et les boutons, quand l'ecart voulu est 29 (celui qui separe les boutons de la premiere section, juste en dessous). Defaut introduit par le passage en une seule ligne, vu par Phil au rendu. ⚠ ELLE PASSE SUR LES BOUTONS, PAS AILLEURS : une seule source pour cet ecart, et c'est la meme valeur des deux cotes des boutons. */ .wg2 .wg-acc-titre + .wg-acc-intro { display: inline; } .wg2 .wg-acc-titre + .wg-acc-intro p { display: inline; } .wg2 .wg-acc-titre + .wg-acc-intro { margin-bottom: 0; } /* ⚠ 23 ET NON 29 : la boite d'une ligne de texte est plus haute que son encre — 24 px de boite pour 15 px de corps, donc ~6 px de blanc sous la derniere ligne. Poser 29 donnait 35 px VUS, contre 29 sous les boutons. L'ecart se juge a l'encre, pas a la boite (regle du 2026-08-26). */ /* ⚠ 18 : les 22 posés plus tôt MOINS 4 — Phil, 2026-09-02, sur le rendu : « Entre la sélection et Boutons de partage, en hauteur, tu enlèves 4 px ». L'écart VU passe donc de 29 à 25. */ /* ⚠ LE SELECTEUR NE MATCHAIT QUE SI L'INTRO EST ENTRE LES DEUX. Phil, 2026-09-05 : « entre "La selection des loisirs..." et les boutons de partage il n'y a pas d'interligne ». Mesure : 7 px. Sur cette page le partage suit DIRECTEMENT le titre, l'intro est ailleurs — la regle ne s'appliquait donc jamais. C'est un frere adjacent entre deux elements qui ne sont pas freres, le piege deja au dossier. Les deux cas sont desormais couverts, avec la MEME valeur : une seule source. */ .wg2 .wg-acc-titre + .wg-acc-intro + .wg-partage--accueil, .wg2 .wg-acc-titre + .wg-partage--accueil { margin-top: 18px; } /* ⚠ MEME REGLE, MEME MOTIF, pour le second encart 320 x 50 : la planche ordinateur ne le porte pas. Sans cette ligne il s'affichait sur ordinateur et poussait tout de 97 px — mesure : la quatrieme categorie passait de y=952 a y=1049. Vu par la comparaison boite par boite, par rien d'autre. */ .wg2 .wg-acc-encart2 { display: none; } .wg2 .wg-acc-intro { font: 400 15px/1.6 Arial, Helvetica, sans-serif; text-box: trim-both cap alphabetic; /* ⚠ 27 et non 24 — Phil, 2026-09-02 : « Avant et après les boutons de partage, en haut et en bas, tu ajoutes 3 pixels. » C'est l'écart AVANT les boutons. */ margin-bottom: 29px; } /* ⚠ Pas de `!important` : les deux règles de phrase portent TROIS classes là où la règle générale en porte deux plus un élément — elles gagnent par spécificité, ce qui est vérifiable et ne bloque rien plus tard. */ /* ⚠ LES CLASSES `__1` ET `__2` SONT PARTIES AVEC LES DEUX PARAGRAPHES. Phil, 2026-09-02, a remplacé les deux phrases par UNE ; leurs règles n'auraient plus rien visé, et V3 refuse un sélecteur orphelin — à juste titre : une règle qui ne vise rien est une règle écrite pour un balisage qui n'existe pas. */ .wg2 .wg-acc-intro p { margin: 0; color: #16150f; } .wg2 .wg-acc-intro strong { font-weight: 700; } .wg2 .wg-acc-intro a { font-weight: 700; color: #2000C3; text-decoration: none; } .wg2 .wg-acc-intro a:hover { text-decoration: underline; } /* -------------------------------------------------------------------------- 4 · LES TROIS BOUTONS DE PARTAGE — 40 px après ⚠ LE DESSIN DES BOUTONS EST CELUI DE `wg2-fiche-chaine.css` — hauteur 32, padding 0 12px, rayon 4, gap 8, 700 12px/1 Nunito. Ce sont les mêmes valeurs dans la planche de l'accueil : rien à redéfinir, seul l'écart qui suit est propre à cette page (`
`). -------------------------------------------------------------------------- */ /* ⚠ 27 et non 24 — même demande de Phil, 2026-09-02 : c'est l'écart APRÈS les boutons. Les deux se posent au même endroit qu'avant, une source chacun : on ajoute 3, on ne compense pas ailleurs. */ .wg2 .wg-partage--accueil { margin-bottom: 29px; } /* -------------------------------------------------------------------------- 5 · LES SEPT SECTIONS ET LEURS LIGNES DE LIENS ⚠⚠ POURQUOI LES LIGNES DE LIENS SONT DES SŒURS DES SECTIONS, ET NON LEURS FILLES — c'est la seule décision de structure de cette feuille, et elle est commandée par le dessin, pas par le confort : planche ordinateur la ligne de liens est SOUS SA RANGÉE planche mobile les lignes de liens sont REGROUPÉES EN BAS Un seul document doit rendre les deux vues. Imbriquées, il faudrait les écrire DEUX FOIS — ce que le compte de liens et la Condition n°1 interdisent — ou en masquer une, ce que le paquet d'implémentation interdit aussi. Sœurs dans un conteneur unique, elles se déplacent par `order` : aucun lien dupliqué, aucun lien masqué, un seul document. ⚠ L'ÉCART ENTRE DEUX SECTIONS EST POSÉ UNE SEULE FOIS, SUR LE CONTENEUR. C'est la règle du 2026-08-28 : « on ne compense pas un écart, on supprime les sources jusqu'à ce qu'il n'en reste qu'une. » Le `gap` du flex est cette source unique — 40 px sur ordinateur (spec 5.5, « 40 px entre deux sections »), 28 px sur téléphone (spec 5.5, « 28 px entre les sections »). -------------------------------------------------------------------------- */ .wg2 .wg-acc-sections { display: flex; flex-direction: column; gap: 40px; } /* L'en-tête de section : marqueur à cinq cubes + titre 700 22px 'Baloo 2', `gap:11px`, puis 24 px avant la grille. Relevé dans la planche. Le marqueur lui-même vient de `wg2-fiche-chaine.css` : c'est le MÊME objet que sur les 104 pages validées. */ /* ⚠ 12 et non les 24 de la planche — Phil, 2026-09-02 : « interligne titre categorie et rangee de logo : tu reduis la hauteur de l'espace de 12 pixels en moins. » Ecart au dessin, decide par lui, mesure apres la pose : 12 px sur les sept sections. */ .wg2 .wg-acc-section > .wg-section { margin-bottom: 12px; } /* ⚠ LA PREMIERE SECTION SEULE — Phil, 2026-09-02 : « C'est possible de remonter légèrement la 1ère ligne de logo, celle des télés, à cause de TF1 qui est rectangulaire. Tu réduis de 4px l'écart entre TV en direct et la rangée de logos TV. » ⚠ `:first-of-type` vise la section du DOM, pas celle que `order` place en premier — et le bâtisseur écrit « TV en direct » en premier dans le document. Les deux coïncident, et c'est mesuré après la pose. */ .wg2 .wg-acc-sections > .wg-acc-section:first-of-type > .wg-section { /* ⚠ 6 et non 8 — Phil, 2026-09-02, second cran sur la même demande : « réduis encore de 2 pixels ». Écart total à la rangée TV : 12 → 6. */ margin-bottom: 6px; } .wg2 .wg-acc-section__titre { /* ⚠ 23 et non les 22 de la planche — Phil, 2026-09-02 : « Les titres des catégories, tu augmentes font size +1 ». Le palier téléphone garde ses 18 px : il n'est pas dans sa demande, et il n'est pas validé. */ font: 700 23px/1.2 'Baloo 2', Nunito, sans-serif; color: #16150f; text-box: trim-both cap alphabetic; } /* La grille : `repeat(5,1fr)`, gouttière 24. Vignette de 167 px — (930 − 4 × 24) / 5 = 166,8, la cote que la spec 3.2 recalcule. */ .wg2 .wg-acc-grille { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; } /* La vignette : boîte de 118 px de haut, rayon 8, libellé dessous. ⚠ L'IMAGE EST CONTENUE, JAMAIS AGRANDIE. Les images de l'original vont de 65 × 31 à 75 × 75 ; les étirer à 118 px de haut les rendrait floues et déformées. C'est la garde posée le 2026-09-01 sur les logos du hub (`min(L/w, H/h, 1)` — le `1` est la garde), écrite ici en CSS. */ /* ⚠⚠ LA BOÎTE NE FAIT PLUS 118 px, ET C'EST UNE RÉPARATION, PAS UN CHOIX. La planche écrit `height:118px` pour un rectangle hachuré qui REPRÉSENTE une vignette d'image. Mesure du 2026-09-02 sur les 31 vignettes servies : elles font de **26 à 80 px** de haut — aucune ne fait 118. La boîte laissait donc de 38 à 92 px de VIDE, et sur TF1 l'œil voyait 43 px au-dessus du logo et 44 en dessous, en plus des 24 px voulus. C'est la règle du 2026-08-31 : une cote de planche vaut pour l'objet qu'elle dessine, pas pour celui qui occupe la même place. ⚠ LA BOÎTE SUIT DÉSORMAIS SA RANGÉE, ET LA SOURCE DU VIDE EST UNIQUE : la cellule s'étire à la hauteur de la rangée (comportement de la grille), la boîte prend ce qui reste au-dessus du nom. La hauteur d'une rangée est donc celle de sa PLUS GRANDE IMAGE, jamais un nombre écrit à la main. Les noms d'une même rangée restent alignés — c'est la grille qui le tient. ⚠ L'IMAGE EST CONTENUE, JAMAIS AGRANDIE. Les étirer à 118 px les aurait rendues floues et déformées. C'est la garde posée le 2026-09-01 sur les logos du hub (`min(L/w, H/h, 1)`), écrite ici en CSS. */ .wg2 .wg-acc-vignette { text-align: center; display: flex; flex-direction: column; } /* ⚠⚠ L'IMAGE EST CENTRÉE DANS SA BOÎTE — décision de Phil, 2026-09-02 : « Vignettes : Centrées évidemment ». Elle bat ma recommandation, qui était « en haut », et elle rejoint ce qu'il avait déjà tranché sur les logos du hub le 2026-09-01 pour exactement le même problème. ⚠ ET IL FAUT SAVOIR CE QUE ÇA NE RÈGLE PAS, parce que c'est une impossibilité géométrique et non un réglage qui reste à trouver : avec des images de 26 à 80 px de haut et des NOMS ALIGNÉS sur une même rangée, le blanc doit tomber quelque part. Aucune pose ne rend les deux écarts constants à la fois — c'est exactement ce que le dossier a établi sur les logos du hub le 2026-09-01, et que Phil y a clos. en haut titre → logo constant à 24 ; logo → nom 8 à 51 centré (SERVI) 24 à 46 et 8 à 30 — les deux varient de moitié en bas logo → nom constant à 8 ; titre → logo 24 à 67 Les rendre tous égaux demanderait d'AGRANDIR les petites images à la hauteur des grandes — ce que la garde du 2026-09-01 interdit, et qui les rendrait floues. */ /* ⚠⚠ BOITE DE HAUTEUR FIXE, LOGOS SUR UNE LIGNE DE BASE COMMUNE — c'est la SEULE pose qui rende TOUS les interlignes constants, et Phil l'a demandee sans ambiguite le 2026-09-02 : « Recalcule tout ca. Interlignages coherent. » Mesure qui ferme les autres voies : les 27 vignettes servies vont de 26 a 80 px de haut, et ONZE d'entre elles n'ont AUCUN fichier d'au moins 60 px dans `pict/`. Les rendre toutes a la meme hauteur exigerait donc d'AGRANDIR onze images — flou garanti, et la garde du 2026-09-01 l'interdit (`min(L/w, H/h, 1)`). La boite fixe deplace le probleme la ou il ne se voit plus : le blanc variable est DANS la boite, au-dessus de chaque logo. Ce qui se lit — titre -> boite, boite -> nom, et la hauteur de chaque rangee — devient IDENTIQUE partout. ⚠ 75 px n'est pas choisi : c'est la hauteur des plus grandes images servies (M6, RMC, RTL, T18 a 75). Aucune n'est agrandie. */ .wg2 .wg-acc-vignette__boite { height: 75px; flex: none; border-radius: 8px; margin-bottom: 4px; display: flex; /* ⚠ CENTRÉ — Phil, 2026-09-02 : « Logo centré verticalement ». ⚠ Et ça ne défait PAS la cohérence obtenue plus haut : la boîte a une hauteur FIXE de 75 px, donc « titre → boîte » (12) et « boîte → nom » (8) restent constants quelle que soit la pose. Seule change la place du logo DANS sa boîte. Mesuré après la pose. */ align-items: center; justify-content: center; overflow: hidden; } /* ⚠ 4 et non 8 — Phil, 2026-09-02 : « tu remontes les liens des logos de 4 pixels. » Le nom se rapproche de son logo. */ /* ⚠⚠ PAS DE `width: auto` NI DE `height: auto` ICI. Ces deux lignes ECRASENT EN SILENCE la cote que le batisseur ecrit dans l'attribut : l'agrandissement de +20 % de TF1 etait bien dans la page (`width="78" height="37"`) et la page rendait 65 x 31. ⚠ C'est le defaut mesure le 2026-09-01 sur les logos du hub, mot pour mot — « invisible a la lecture du HTML, seule une sonde comparant l'ATTRIBUT au RENDU l'attrape ». Il a remordu ici le 2026-09-02. Les deux `max-` restent : ils bornent sans jamais commander. */ .wg2 .wg-acc-vignette__boite img { max-width: 100%; max-height: 100%; display: block; } /* ⚠ 15 px et non les 13 de la planche — Phil, 2026-09-02 : « legende des logos trop petite ». Meme cran que sa demande de lisibilite du 2026-08-26, ou « En savoir plus » et les liens de suite sont passes de 13 a 15 : « des gens de mon age ont du mal a lire ». */ .wg2 .wg-acc-vignette__nom { display: block; font: 400 15px/1.3 Arial, Helvetica, sans-serif; color: #2000C3; text-decoration: none; /* ⚠ Phil, 2026-09-02 : « les légendes/liens sous logo, tu augmentes l'espace entre caractère +15% », puis sa correction du même jour : « Pardon 15% c'était trop, seulement 10% ». La valeur n'est pas choisie : elle est CALCULÉE pour que la légende rende 10 % plus large, et le contrôle est la largeur mesurée avant/après, pas la valeur écrite. */ letter-spacing: .0515em; } .wg2 .wg-acc-vignette__nom:hover { text-decoration: underline; } /* La ligne de liens dense — spec 4.7, ARRÊTÉ dessin du 21 août : conteneur display:flex; flex-wrap:wrap; align-items:baseline; margin-top:18px lien 700 14px/1.5 Arial; #2000C3 séparateur filet vertical 1 × 13 px, #dde2ee, margin: 0 16px, AUCUN avant le premier lien ⚠ Le filet est posé en `::before` plutôt que par un élément : les tirets « - » de l'original sont des TEXTES, pris sans être écrits. Les écrire en filets aurait demandé un élément par séparateur, donc un balisage que le dessin ne montre pas. ⚠ `margin-top: 18px` COMPENSERAIT le `gap` du conteneur de sections. La source unique de l'écart est le `gap` ; ici la ligne de liens colle à sa rangée, donc on annule le gap au-dessus d'elle et on pose les 18 px. Une seule source par écart, toujours. */ .wg2 .wg-acc-dense { display: flex; flex-wrap: wrap; align-items: baseline; /* ⚠ 13 et non les 18 de la spec 4.7 — Phil, 2026-09-02 : « tu remontes la ligne des liens comme TV nationales Film de 5 pixels ». */ margin-top: calc(13px - 40px); } /* ⚠⚠ ÉCART À LA SPEC 4.7, DÉCIDÉ PAR PHIL LE 2026-09-02 : « moins gras, légèrement moins ». La spec écrit `700 14px` et ajoute « c'est le gras qui porte la hiérarchie » — sur cette page-ci, avec sept lignes de liens, il fait un mur. ⚠ ET SA CORRECTION REJOINT SON ORIGINAL, ce n'est pas un goût contre une spec : `.souscathome` de `stylesheet.css` écrit font-family: Verdana, Arial, Helvetica; font-size: 10pt — soit ~13 px, en poids NORMAL. Ses mots : « la page originale est mieux ». La valeur posée est donc RELEVÉE dans sa feuille, pas choisie. */ .wg2 .wg-acc-dense > a { font: 400 13px/1.5 Arial, Helvetica, sans-serif; color: #2000C3; text-decoration: none; /* ⚠ Phil, 2026-09-02 : « Les caractères des lignes de lien type TV nationales Film, espacement entre les caractères +10% ». Valeur CALCULÉE pour que la ligne rende 10 % plus large ; le contrôle est la largeur mesurée avant/après, jamais la valeur écrite. */ letter-spacing: .049em; } .wg2 .wg-acc-dense > a:hover { text-decoration: underline; } .wg2 .wg-acc-dense > a + a::before { content: ""; display: inline-block; width: 1px; height: 13px; background: #dde2ee; margin: 0 16px; vertical-align: -1px; } /* La réserve d'annonces automatiques après la quatrième section — spec 5.5. Même annulation de gap que la ligne de liens : elle appartient à la section qui la précède. */ /* -------------------------------------------------------------------------- 6 · LA QUEUE DE CONTENU — « Le site regroupe également… » Quatre entrées à cube. Le dessin les pose sous un texte d'introduction, à la même échelle que les liens de la colonne de gauche. ⚠⚠ CE BLOC PORTE LA CONTREPARTIE ÉCRITE D'UNE EXCEPTION À LA CONDITION N°1. `wg_batir_fiche_chaine.py` retire du pied de CHAQUE page bâtie les quatre liens `logiciel/index.php`, `images/`, `outils/` et `services/` — décision de Phil du 2026-08-26 : « les liens seront sur la page d'accueil. Tu les retires. » **Trois des quatre sont ici**, et le quatrième, `services/`, n'y est pas : relevé du 2026-09-02, l'accueil porte `logiciel/index.php`, `images/` et `outils/`, mais `services/` zéro fois. Signalé, non réparé — ajouter un lien est une décision de Phil, pas une réparation d'outil. -------------------------------------------------------------------------- */ /* ⚠ TOUTES CES VALEURS SONT RELEVÉES dans la planche, et ma première écriture s'était trompée sur trois d'entre elles — je les avais alignées sur la colonne de gauche, qui leur ressemble sans être le même objet : les entrées sont EN COLONNE, une par ligne, jamais en ligne qui passe à la ligne · la gouttière du cube est 11, pas 9 · le libellé est BLEU `#2000C3`, pas noir. C'est la règle du 2026-08-31 : une cote vaut pour l'objet qu'elle dessine, pas pour celui qui lui ressemble. */ .wg2 .wg-acc-regroupe { margin-top: 40px; } .wg2 .wg-acc-regroupe__titre { font: 400 13px/1.7 Arial, Helvetica, sans-serif; color: #3d3a33; margin-bottom: 14px; } .wg2 .wg-acc-regroupe__liste { display: flex; flex-direction: column; gap: 12px; } .wg2 .wg-acc-regroupe__entree { display: flex; gap: 11px; align-items: center; } .wg2 .wg-acc-regroupe__entree > .wg-cube { width: 8px; height: 8px; border-radius: 2px; flex: none; } .wg2 .wg-acc-regroupe__entree > a { font: 700 17px/1.2 'Baloo 2', Nunito, sans-serif; color: #2000C3; text-decoration: none; } .wg2 .wg-acc-regroupe__entree > a:hover { text-decoration: underline; } /* ⚠ LE RYTHME DE LA QUEUE — 40 px entre chaque bloc, relevé dans la planche (`
` et `margin-bottom:40px`, quatre fois). ⚠ La feuille de fiche chaîne pose `margin-top: var(--wg-etalon-bloc)` (44 px) sur `.wg-contenu > .wg-rubriques` : cette page-ci la reprend à 40, la valeur de SA planche. Même spécificité, déclaration postérieure. */ .wg2 .wg-contenu > .wg-rubriques { margin-top: 40px; } .wg2 .wg-acc-legal { margin-top: 40px; } /* ⚠ ORPHELINE DEPUIS LE 2026-09-02 : la reserve marketing est neutralisee avant la mise au serveur, elle ne parait plus dans aucune page. La regle est gardee, commentee, pour le jour ou l'emplacement se vend. .wg2 .wg-contenu > .wg-reserve--marketing { margin-top: 40px; } */ .wg2 .wg-contenu > .wg-fb-page { margin-top: 40px; } /* -------------------------------------------------------------------------- 6 bis · LE BLOC DE TEXTE LÉGAL, et l'accroche du bouton Facebook ⚠ CES SIX PARAGRAPHES SONT CEUX DE L'ORIGINAL, et la planche les garde en entier — c'est l'inverse des quatre familles de `/tele/`, où ils sont remplacés par deux phrases dans le pied. Relevé dans la planche : `400 13px/1.7 Arial` `#3d3a33`, deux groupes séparés de 12 px, le lien « Au sujet des droits d'auteur… » fermant le second en `700` `#2000C3`. ⚠ « Cliquez pour devenir fan » est un texte du DESSIN : il n'existe ni dans l'original de l'accueil, ni sur les 104 pages bâties. Relevé dans la planche : `400 13px/1.5 Arial` `#3d3a33`, centré, 10 px au-dessus du bouton. C'est un ajout, il ne porte aucun lien, et il est SIGNALÉ. -------------------------------------------------------------------------- */ .wg2 .wg-acc-legal { font: 400 13px/1.7 Arial, Helvetica, sans-serif; color: #3d3a33; } .wg2 .wg-acc-legal p { margin: 0 0 12px; } .wg2 .wg-acc-legal p:last-child { margin-bottom: 0; } .wg2 .wg-acc-legal a { font-weight: 700; color: #2000C3; text-decoration: none; } .wg2 .wg-acc-legal a:hover { text-decoration: underline; } /* ⚠ PAS DE RÈGLE POUR UNE ACCROCHE DE BOUTON FACEBOOK : elle a existé une heure et elle est retirée. Le texte « Cliquez pour devenir fan » est DESSINÉ DANS `pict/facecbook-fan.png` (120 × 49) ; l'écrire en clair au-dessus l'affichait deux fois. Un sélecteur sans cible est un défaut que V3 refuse — il part avec l'élément. */ /* -------------------------------------------------------------------------- 7 · LES PALIERS 1023 et moins — la colonne passe SOUS le contenu, comme sur les 104 pages déjà validées : le seuil est celui de `wg2-fiche-chaine.css`, pas un seuil neuf. À 1024-1159 la spec donne encore deux colonnes. -------------------------------------------------------------------------- */ @media (max-width: 1023px) { .wg2 .wg-corps--accueil { flex-direction: column; } .wg2 .wg-corps--accueil > .wg-acc-col { width: 100%; order: 3; } /* ⚠ Les 40 px entre le contenu et la colonne etaient le `gap` du conteneur ; il est passe a 0 pour que chaque ecart ait une seule source, donc ils se posent ici. Inerte sous 768, ou `.wg-contenu` passe en `display: contents`. */ .wg2 .wg-corps--accueil > .wg-contenu { width: 100%; margin-bottom: 40px; } } /* -------------------------------------------------------------------------- 767 et moins — LA VUE TÉLÉPHONE, planche « Page 3 · l'accueil mobile » ⚠⚠ CE QUE CETTE PLANCHE FAIT ET QUE LA VUE ORDINATEUR NE FAIT PAS : elle CHANGE L'ORDRE DE LA PAGE. Le titre ouvre le contenu, les sept sections suivent, PUIS l'introduction, PUIS les lignes de liens regroupées avec leur intitulé, PUIS les boutons de partage. Le bâtisseur l'avait prévu et l'écrit dans son propre commentaire : « la planche mobile REGROUPE les lignes de liens en bas de page […] la feuille les déplace par `order` ». Les lignes de liens sont donc SŒURS des sections, pas leurs filles, exprès. Aucun lien n'est dupliqué, aucun n'est masqué. Relevé dans la planche, à 404 px : titre de tête 700 20px 'Baloo 2', 24 px dessous section titre 700 18px, trois vignettes, boîte 62, légende 400 12px Arial, 28 px entre deux sections introduction 400 15px/1.6, 24 px dessous groupe de liens intitulé détaché au-dessus, cube 7, 13px Arial, liens 700 15px bleu, séparateur « / », 16 px dessous partage 12 px au-dessus, boutons centrés -------------------------------------------------------------------------- */ @media (max-width: 767px) { /* ---- 1 · L'ORDRE DE LA PLANCHE --------------------------------------- `display: contents` fait des sections et des lignes de liens des frères directs de l'introduction : c'est la seule façon de les intercaler sans toucher au document. Les `order` en ligne du bâtisseur (0 à 11) sont ceux de la vue ordinateur ; ils sont écrits DANS la page, donc seul `!important` les bat — c'est nommé, ce n'est pas une facilité. */ /* ⚠ LE CONTENEUR QUI ORDONNE EST `.wg-corps`, PAS `.wg-contenu` : le bandeau d'annonces automatiques est son enfant, et `order` ne deplace que des freres. Les deux conteneurs intermediaires s'effacent donc, et tout devient frere : bandeau, titre, categories, introduction, groupes de liens, boutons, et la colonne. */ .wg2 .wg-contenu { display: contents; } .wg2 .wg-acc-sections { display: contents; } /* ⚠⚠ `align-items: stretch` EST OBLIGATOIRE ICI. Le conteneur porte `flex-start` pour la vue ordinateur, ou il empeche la colonne de gauche de s'etirer sur toute la hauteur. En colonne, `flex-start` veut dire tout autre chose : chaque bloc prend LA LARGEUR DE SON CONTENU au lieu de celle de la page. Mesure du defaut : la ligne de liens « Chérie FM / Europe 1 / … » debordait de la gouttiere droite, et le debordement de page restait a ZERO — donc aucun controle de palier ne l'aurait vu. */ .wg2 .wg-corps--accueil { align-items: stretch; } /* ⚠⚠ ET LA RESERVE PASSE EN `border-box`. Elle porte `width: 100%` PLUS un liseré de 1 px : en `content-box` elle mesure donc 2 px de plus que la page, et comme la largeur d'une colonne flex est celle de son plus large element, CES 2 px S'ETAIENT PROPAGES A TOUS LES BLOCS. Mesure du defaut : 294 px de blocs dans une page de 292, a tous les paliers telephone. Une seule ligne, et la cause est traitee a sa source. */ .wg2 .wg-corps--accueil .wg-reserve { box-sizing: border-box; } .wg2 .wg-acc-titre { order: 0; } .wg2 .wg-acc-section { order: 1 !important; margin-bottom: 28px; } /* Le second encart 320 x 50 : il porte `order: 1` comme les categories et il est ecrit apres « Jeux » dans le document, donc il tombe entre « Jeux » et « Musique gratuite », comme la planche le montre. */ /* ⚠⚠ ET IL SORT DE LA GOUTTIERE, COMME L'ENCART DU HAUT. Sans cette ligne, son unite de 320 px FIXE devient l'element le plus large de la colonne flex : la ligne prend 320, tous les blocs s'etirent a 320, et la page deborde de 28 px a 320 px de fenetre — mesure du defaut. Le remede est celui que Phil a arrete le 2026-08-29 pour l'encart du haut : la gouttiere s'efface sous l'annonce, l'annonce ne se deforme pas. Meme slot, meme cote, meme unite de revenu. */ .wg2 .wg-acc-encart2 { display: block; order: 1 !important; margin-bottom: 28px; text-align: center; min-width: 0; margin-left: calc(-1 * var(--wg-marge-ecran)); margin-right: calc(-1 * var(--wg-marge-ecran)); } /* La bande « annonces automatiques » : juste avant l'introduction. */ .wg2 .wg-corps--accueil > .wg-acc-pub { order: 2; } /* ⚠ PAS DE REGLE POUR `.wg-acc-auto` : la reserve d'annonces automatiques de la spec 5.5 n'est pas servie sur cette page (le conteneur ne s'ecrit que s'il y a quelque chose dedans), et V3 refuse un selecteur qui ne vise rien. */ .wg2 .wg-acc-intro { order: 3; margin-bottom: 24px; } .wg2 .wg-acc-dense { order: 4 !important; } /* ⚠ CENTRES — Phil, 2026-09-02 : « Boutons de Partage centrés sur la page ». C'est aussi ce que dessine la planche mobile. Téléphone seul : sur ordinateur ils restent alignés à gauche, comme il l'a validé. */ .wg2 .wg-partage--accueil { order: 5; margin: 12px 0 0; justify-content: center; } /* ⚠ CE QUE LA PLANCHE MOBILE NE DESSINE PAS et qui reste dans la page : le bloc « Le site regroupe également », la ligne de rubriques, le texte légal, la réserve marketing, le bloc Facebook et la colonne de cinq liens. Les retirer retirerait des liens — Condition n^o 1. Ils suivent les boutons de partage, dans leur ordre d'origine, au même rythme. */ /* ⚠⚠ RETIRE SUR TELEPHONE — Phil, 2026-09-02 : « Tu supprimes sur mobile : Le site regroupe également du contenu, images et outils pour réussir un site Web : - Les 10 meilleurs logiciels gratuits - Images - Outils - Actu ». ⚠ ECART A LA CONDITION N^o 1, NOMME : quatre liens — `logiciel/`, `images/`, `outils/`, `actu/` — cessent d'etre VUS sous 768 px. Ils restent dans le document, donc le maillage ne bouge pas d'un lien. ⚠ Et la vue ordinateur les garde : sa demande dit « sur mobile ». */ .wg2 .wg-acc-regroupe { display: none; } .wg2 .wg-contenu > .wg-rubriques { order: 7; margin-top: 28px; } .wg2 .wg-acc-legal { order: 8; margin-top: 28px; } /* ⚠⚠ RETIRE SUR TELEPHONE — Phil, 2026-09-02 : « 930 x 160 tu retires ». C'est l'emplacement marketing RESERVE de la spec 5.5 : il ne sert aucune annonce, il ne porte ni lien ni texte, et sur telephone il ne montrait qu'un rectangle hachure. Rien n'est perdu. ⚠ La vue ordinateur le garde : sa demande porte sur le telephone. */ /* ⚠ ORPHELINE DEPUIS LE 2026-09-02 — voir la regle jumelle au nominal. .wg2 .wg-contenu > .wg-reserve--marketing { display: none; } */ .wg2 .wg-contenu > .wg-fb-page { order: 10; margin-top: 28px; } /* ⚠⚠ LA COLONNE DE CINQ LIENS EST RETIREE — Phil, 2026-09-02 : « Supprimer la colonne de cinq liens ». Elle emporte avec elle la seconde reserve marketing, le « 190 x 320 », qui vivait dedans. ⚠ ECART A LA CONDITION N^o 1, NOMME ET MESURE : cinq liens — TV en direct, TV en replay, Radio, Jeux en ligne, Musique — cessent d'etre VUS sous 768 px. Ils restent dans le document, donc le maillage ne bouge pas d'un lien. Et AUCUNE cible ne devient inatteignable sur telephone : les cinq sont servies par la barre d'onglets, par les titres de categorie et par le menu burger de la meme page. ⚠ La vue ordinateur la garde : sa demande porte sur le telephone. */ .wg2 .wg-corps--accueil > .wg-acc-col { display: none; } /* ---- 2 · LE TITRE DE TÊTE -------------------------------------------- */ .wg2 .wg-acc-titre { display: block; font: 700 20px/1.3 'Baloo 2', Nunito, sans-serif; color: #16150f; margin-bottom: 24px; } /* ---- 3 · LES SECTIONS ------------------------------------------------ « Sept sections, TROIS vignettes chacune ». La planche dessine partout les deux premières vignettes puis LE LIEN GÉNÉRAL de la catégorie, qui est la dernière : on masque la 3e et la 4e, jamais la 5e. ⚠ Les douze vignettes masquées RESTENT dans le document — le compte de liens ne bouge pas d'un lien, Google les voit. */ .wg2 .wg-acc-grille { grid-template-columns: repeat(3, 1fr); gap: 16px; } .wg2 .wg-acc-grille > .wg-acc-vignette:nth-child(3), .wg2 .wg-acc-grille > .wg-acc-vignette:nth-child(4) { display: none; } .wg2 .wg-acc-vignette__boite { height: 62px; } /* ⚠ 12 px, la valeur de la planche : à 15 px, « Musique gratuite » mesure 123 px pour une colonne de 105 à 375 px, et cinq légendes sur dix-huit tombaient sur deux lignes — donc des rangées de hauteurs différentes. La vue ordinateur garde les 15 px arrêtés par Phil. */ .wg2 .wg-acc-vignette__nom { font-size: 12px; } /* ⚠ 19 et non 18 — Phil, 2026-09-02 : « Tu augmentes font size des catégories +1 ». La planche donne 18 ; sa demande lui est postérieure. Téléphone SEUL : la vue ordinateur garde ses 23 px. */ .wg2 .wg-acc-section__titre { font-size: 19px; } /* ⚠ LE TITRE SE CENTRE SUR LE MARQUEUR — Phil, 2026-09-02, capture à l'appui : « tu centres les titres verticalement par rapport au petit logo ». Le composant partagé aligne sur la LIGNE DE BASE, ce qui pose le milieu du titre 3 px sous le milieu des cubes (mesuré). `center` met les deux milieux au même endroit — et le titre porte déjà `text-box: trim-both cap alphabetic`, donc sa boîte EST son encre : c'est bien ce que l'œil voit qui se centre, pas une boîte de ligne. ⚠ Portée : l'accueil, sur téléphone. Le marqueur des 104 autres pages n'est pas touché — il n'est pas dans sa demande. */ .wg2 .wg-acc-section > .wg-section { align-items: center; } /* ⚠ ET LE CALAGE DE −4 px DU MARQUEUR S'ANNULE AVEC. Il existait POUR l'alignement sur la ligne de base ; laissé en place sous `center`, il redevenait exactement l'écart qu'on venait de supprimer — mesuré : 4 px, soit la valeur du `top`. On retire la source, on ne compense pas. Écart des milieux après : ZÉRO. */ .wg2 .wg-acc-section > .wg-section > .wg-marqueur { top: 0; } /* ---- 4 · LES GROUPES DE LIENS ---------------------------------------- La planche : intitulé détaché au-dessus, cube de 7, puis les liens séparés par « / ». L'intitulé est porté par `data-intitule`, écrit par le bâtisseur : il n'ajoute ni texte ni lien au document. */ .wg2 .wg-acc-dense { display: block; position: relative; /* 18 px sous l'intitule ET sous les lignes suivantes : la planche decale tout le bloc de liens, pas seulement sa premiere ligne. */ padding-left: 18px; margin-top: 0; margin-bottom: 16px; } .wg2 .wg-acc-dense::before { content: attr(data-intitule); display: block; margin-bottom: 6px; /* ⚠ 14 et non les 13 de la planche — Phil, 2026-09-02 : « les liens en bas de page […] tu augmentes font size +1 », capture du groupe entier à l'appui. Le groupe monte donc d'un cran en entier : l'intitulé et ses liens. */ font: 400 14px/1.2 Arial, Helvetica, sans-serif; color: #3d3a33; letter-spacing: normal; } /* Le cube est pose EN ABSOLU, pas en fond : un fond ne s'arrondit pas, et la planche donne un carre de 7 a coins arrondis de 2. */ .wg2 .wg-acc-dense::after { content: ""; position: absolute; left: 0; top: 3px; width: 7px; height: 7px; border-radius: 2px; background: currentColor; } /* Le cube reprend LE MOTIF DU CUBE ISOLÉ de `wg2-fondations.css`, dans son ordre — bleu, vert foncé, vert clair, rouge, jaune — qui est exactement celui de la planche. ⚠⚠ IL SE LIT DANS `data-cube`, ÉCRIT PAR LE BÂTISSEUR, ET PLUS DANS UN `:nth-child`. Le comptage a été pris en défaut le jour même où il a été écrit : l'ajout du second encart 320 × 50 a décalé d'un cran tout ce qui le suit, et TROIS cubes sur six sont passés au noir sans un mot. Un numéro déclaré ne peut pas se décaler. */ .wg2 .wg-acc-dense[data-cube="1"] { color: var(--wg-bleu); } .wg2 .wg-acc-dense[data-cube="2"] { color: var(--wg-vert-fonce); } .wg2 .wg-acc-dense[data-cube="3"] { color: var(--wg-vert-clair); } .wg2 .wg-acc-dense[data-cube="4"] { color: var(--wg-rouge); } .wg2 .wg-acc-dense[data-cube="5"] { color: var(--wg-jaune); } /* Les liens du groupe : la planche les met en 700 15px bleu, décalés de 18 px sous leur intitulé. */ .wg2 .wg-acc-dense > a { /* ⚠ 16 et non les 15 de la planche — même demande, même capture. */ font: 700 16px/1.6 Arial, Helvetica, sans-serif; } /* ⚠ LE FILET VERTICAL DEVIENT LA BARRE OBLIQUE. La règle de la vue ordinateur dessine un trait de 1 × 13 px ; la planche mobile écrit « séparateur / ». Toutes les cotes du trait sont donc annulées, sinon il resterait un rectangle coloré derrière la barre. */ .wg2 .wg-acc-dense > a + a::before { content: "/"; width: auto; height: auto; background: none; color: #c8c3b6; font: 400 14px/1.6 Arial, Helvetica, sans-serif; letter-spacing: normal; margin: 0 6px; vertical-align: baseline; } }