@charset "utf-8"; /* ========================================================================= article.css — couche de l'agent « article » (RESTRUCTURATION.md §6). Chargee APRES theme.css (gelee) et shell.css, hors accueil seulement. Portee : les trois gabarits interieurs (page-article, page-hub, page), leurs blocs dynamiques (inc/article.php) et la prose qu'ils encadrent. Toute regle est bornee par `.article` (le
de ces gabarits) ou par une classe propre a un bloc, sauf les tableaux et legendes de `.prose`, qui sont le MEME composant partout ou la prose est employee. Identite inchangee (contrat §1, principe 3) : feuille claire, vert terrain --stamp, Archivo + IBM Plex Mono, jauge a trois traits, barres doubles. On change l'EXECUTION : hierarchie, mesure, lisibilite. Specificite : le coeur pose `:root :where(.is-layout-flow) > *` (0,1,0) ; les regles d'espacement ci-dessous sont toutes a (0,2,0) au moins, pour gagner quel que soit l'ordre d'impression des feuilles dans . ========================================================================= */ /* ---------- A1. Jetons --------------------------------------------------- */ :root { /* Barre fixe de --head-h (shell.css 2a, 72px / 64px) + 48px d'air, 32px sous 900px. Avant 2.1.0 : 239px d'en-tete, --art-top 287px. */ --art-top: calc(var(--head-h, 72px) + 48px); --art-main: 720px; /* colonne principale */ --art-rail: 300px; /* rail >= 1200px */ --art-measure: 680px; /* mesure de lecture des paragraphes */ --art-stick: calc(var(--head-h, 72px) + 16px); /* sous la barre fixe */ --art-hollow: #B3BAC0; /* trait creux des micro-jauges, lisible a 2px */ } @media (max-width: 900px) { :root { --art-top: calc(var(--head-h, 64px) + 32px); --art-stick: calc(var(--head-h, 64px) + 16px); } } /* ---------- A2. Le
des pages interieures -------------------------- */ .article { background: var(--sheet); padding-block: var(--art-top) 88px; margin-block: 0; } /* Une colonne centree de 720px sous 1200px (contrat §3.1) ; les pages simples gardent cette colonne a toutes les largeurs (§3.3). */ .article--page .article-head.wrap, .article--page .article-grid.wrap { max-width: calc(var(--art-main) + 2 * var(--gut)); } @media (max-width: 1199px) { .article .article-head.wrap, .article .article-grid.wrap, .article .article-hub.wrap { max-width: calc(var(--art-main) + 2 * var(--gut)); } } /* Les groupes structurels n'heritent pas du rythme de 1.2rem du coeur : chaque ecart est dessine ci-dessous. */ .article .article-head > *, .article .article-head__body > *, .article .article-head__text > *, .article .article-grid > *, .article .article-rail > *, .article .article-rail__stick > *, .article .article-main > *, .article .article-hub > *, .article .article-hub__grid > *, .article .article-hub__aside > * { margin-block: 0; } /* ---------- A3. En-tete d'article ---------------------------------------- */ /* Fil d'Ariane : etiquettes courtes, donc capitales mono (§3.5). */ .article .art-crumbs { margin-block-end: 26px; font-family: var(--mono); font-size: 13px; line-height: 18px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } /* Le fil PASSE A LA LIGNE plutot que de couper un maillon (REV1-01 : une ellipse sur « Players: Records, G… » est une troncature visible, §7.2). Les maillons sont desormais des noms courts (inc/article.php) ; si l'un d'eux depasse encore, il se replie sur lui-meme. Le separateur « › » est pose en FIN de maillon (::after), pas en tete du suivant : quand le fil se replie, il reste en bout de ligne au lieu d'ouvrir la ligne suivante (defaut vu a l'oeil au tour precedent). */ .art-crumbs ol { display: flex; flex-wrap: wrap; align-items: baseline; row-gap: 2px; margin: 0; padding: 0; list-style: none; } .art-crumbs li { display: flex; align-items: baseline; flex: 0 1 auto; min-width: 0; max-width: 100%; } .art-crumbs li > * { min-width: 0; overflow-wrap: break-word; } .art-crumbs li:not(:last-child)::after { content: "\203A"; content: "\203A" / ""; flex: none; margin-inline: .7em; color: var(--muted); } .art-crumbs a { color: var(--muted); padding-block: 3px; /* 24px de cible avec l'interligne */ border-bottom: 1px solid transparent; transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); } .art-crumbs a:hover, .art-crumbs a:focus-visible { color: var(--stamp); border-bottom-color: currentColor; } .art-crumbs [aria-current] { color: var(--ink); } /* Rubrique : les deux barres du geste signature quittent le H1 (4 lignes a 375px, barres face aux lignes 2 et 3) pour l'etiquette qui le precede. */ .article .art-kicker { position: relative; margin-block-end: 14px; padding-left: 18px; font-family: var(--mono); font-weight: 600; font-size: 13px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--stamp); } .art-kicker::before { content: ""; position: absolute; left: 0; top: 2px; width: 9px; height: 12px; background: linear-gradient(var(--stamp), var(--stamp)) left / 3px 100% no-repeat, linear-gradient(var(--stamp), var(--stamp)) right / 3px 100% no-repeat; } /* Le H1 : plus grand que tout H2 de la page, casse de phrase (§3.5). */ .article .art-title { max-width: 22em; font-family: var(--display); font-stretch: 75%; font-weight: 800; font-size: 44px; line-height: 48px; letter-spacing: 0; text-transform: none; color: var(--ink); text-wrap: balance; } /* Chapo : l'extrait manuel, sans lien « lire la suite ». */ .article .art-lede { margin-block-start: 18px; max-width: var(--art-measure); } .article .art-lede p { margin: 0; font-size: 19px; line-height: 29px; color: var(--slate); } /* Signature : une phrase, donc Archivo en casse normale, pas de capitales. */ .article .art-meta { display: flex; flex-wrap: wrap; align-items: baseline; margin: 18px 0 0; padding: 0; list-style: none; font-size: 14px; line-height: 22px; color: var(--muted); } /* Separateur en FIN d'element : quand la ligne se replie (375px), le point reste en bout de ligne au lieu d'ouvrir la suivante. Chaque element est insecable. */ .art-meta li { white-space: nowrap; } .art-meta li:not(:last-child)::after { content: "\00B7"; content: "\00B7" / ""; margin-inline: .55em; color: var(--muted); } .art-meta a { color: var(--stamp); display: inline-block; padding-block: 1px; border-bottom: 1px solid rgba(31, 106, 70, .35); } .art-meta a:hover, .art-meta a:focus-visible { border-bottom-color: currentColor; } .art-meta time { color: var(--slate); font-variant-numeric: tabular-nums; } /* Le corps de l'en-tete : texte seul, ou texte + portrait. */ .article .article-head__body { padding-block-end: 34px; border-bottom: 1px solid var(--rule); } .article--page .article-head__text { padding-block-end: 30px; border-bottom: 1px solid var(--rule); } /* Portrait credite (VISUALMOBILE-06) : carre, a droite du titre des 768px. */ .art-portrait { margin: 0; } .art-portrait img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: var(--panel); } .art-portrait__credit { margin-top: 8px; font-family: var(--display); font-size: 13px; line-height: 17px; letter-spacing: 0; text-transform: none; color: var(--muted); } /* « Just Fontaine in 2016 » (EXACT2-05) : ce que montre la photo, avant son credit ; un ton plus fonce que le credit, sans changer de taille. */ .art-portrait__when { color: var(--slate); } .art-portrait__credit a { color: var(--muted); border-bottom: 1px solid var(--rule); } .art-portrait__credit a:hover, .art-portrait__credit a:focus-visible { color: var(--stamp); border-bottom-color: currentColor; } @media (min-width: 768px) { .article .article-head__body:has(> .art-portrait) { display: grid; grid-template-columns: minmax(0, 1fr) 190px; column-gap: 40px; align-items: start; } } @media (min-width: 1200px) { .article .article-head__body:has(> .art-portrait) { grid-template-columns: minmax(0, var(--art-main)) var(--art-rail); justify-content: space-between; } .article .art-portrait { width: 240px; } } @media (max-width: 767px) { .article .art-portrait { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 14px; align-items: end; margin-block-start: 22px; } .art-portrait__credit { margin-top: 0; } } /* ---------- A4. Grille : colonne principale + rail ----------------------- */ .article .article-grid { margin-block-start: 40px; } .article--page .article-grid { margin-block-start: 36px; } /* Rail vide (ni chiffres cles, ni sommaire, ni pub) : pas de trou. */ .article-rail:not(:has(.art-kf, .art-toc, .ad-slot)) { display: none; } @media (max-width: 1199px) { .article .article-rail { margin-block-end: 40px; } .article .article-rail > * + *, .article .article-rail__stick > * + * { margin-block-start: 16px; } /* Le rail publicitaire n'existe qu'a partir de 1200px (pas de rail a cote). */ .article .article-rail .ad-slot--rail { display: none; } } /* La grille a rail n'existe que sur page-article : la page simple (§3.3) n'a pas de rail et garde sa colonne unique centree. */ @media (min-width: 1200px) { .article--article .article-grid { display: grid; grid-template-columns: minmax(0, var(--art-main)) var(--art-rail); justify-content: space-between; align-items: stretch; } .article--article .article-main { grid-column: 1; grid-row: 1; min-width: 0; } .article--article .article-rail { grid-column: 2; grid-row: 1; } .article .article-rail > * + * { margin-block-start: 28px; } /* Le sommaire (et la pub de rail) suivent la lecture, sous l'en-tete collee. */ .article .article-rail__stick { position: sticky; top: calc(var(--art-stick) + var(--wc2030-adminbar, 0px)); max-height: calc(100vh - var(--art-stick) - 16px); overflow-y: auto; scrollbar-width: thin; } .article .article-rail__stick > * + * { margin-block-start: 28px; } } .article .article-main { max-width: var(--art-main); } .article--page .article-main { margin-inline: auto; } @media (max-width: 1199px) { .article .article-main { margin-inline: auto; } } /* ---------- A5. Chiffres cles : la plaque verte du registre -------------- */ .art-kf { background: var(--stamp); color: var(--oc-on-green, #FAFBF8); padding: 16px 20px 18px; } .article .art-kf__title { margin: 0 0 12px; font-family: var(--mono); font-weight: 400; font-size: 13px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--oc-on-green-2, #CBDFD2); } .art-kf__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; margin: 0; } @media (min-width: 768px) and (max-width: 1199px) { .art-kf__list { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); } } .art-kf__item { display: flex; flex-direction: column-reverse; /* le chiffre au-dessus, le libelle lu d'abord */ justify-content: flex-end; gap: 6px; min-width: 0; padding-top: 12px; border-top: 1px solid rgba(250, 251, 248, .22); } .art-kf__label { font-family: var(--mono); font-size: 13px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--oc-on-green-2, #CBDFD2); } .art-kf__fig { display: flex; align-items: center; gap: 10px; margin: 0; } .art-kf__num { font-stretch: 110%; font-weight: 800; font-size: 40px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--oc-on-green, #FAFBF8); overflow-wrap: anywhere; } .art-kf__num.is-long { font-size: 22px; line-height: 26px; font-stretch: 100%; } .art-kf__num.is-word { font-size: 30px; line-height: 1.05; font-stretch: 100%; } .art-kf__num.is-long, .art-kf__num.is-word { overflow-wrap: normal; word-break: normal; hyphens: none; } .art-kf__mark { display: inline-grid; place-items: center; min-width: 24px; min-height: 24px; border-radius: 2px; } .art-kf__mark:focus-visible { outline: 3px solid var(--oc-on-green, #FAFBF8); outline-offset: 2px; } /* La jauge du socle se peint en --stamp : sur la plaque verte elle disparaitrait. Meme liste blanche que la section 4b de theme.css, reteinte pour le vert. */ .art-kf .gauge i { border-color: rgba(250, 251, 248, .55); background: none; } .art-kf .gauge[data-state="ratified"] i, .art-kf .gauge[data-state="announced"] i, .art-kf .gauge[data-state="announced_by_confederation"] i { border-color: var(--oc-mark, #9FE0BC); background: var(--oc-mark, #9FE0BC); } .art-kf .gauge[data-state="derived"] i, .art-kf .gauge[data-state="reported"] i, .art-kf .gauge[data-state="projected"] i { border-color: var(--oc-mark-2, #F0C97A); background: var(--oc-mark-2, #F0C97A); } .art-kf .gauge i.hollow { background: none; } @media (max-width: 640px) { .art-kf__num { font-size: 34px; } } /* ---------- A6. Sommaire « On this page » -------------------------------- */ .art-toc { font-size: 15px; line-height: 20px; } .article .art-toc__title { margin: 0 0 10px; font-family: var(--mono); font-weight: 400; font-size: 13px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .art-toc__list { margin: 0; padding: 0; list-style: none; border-left: 2px solid var(--rule); } .art-toc__list li { margin: 0; } .art-toc__list a { display: block; margin-left: -2px; padding: 6px 0 6px 14px; border-left: 2px solid transparent; color: var(--slate); transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); } .art-toc__list a:hover, .art-toc__list a:focus-visible { color: var(--stamp); border-left-color: var(--stamp); } .art-toc__list .art-toc__extra { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--rule); } .art-toc__extra a { font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .art-toc__fold { background: var(--panel); } .art-toc__fold summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; cursor: pointer; list-style: none; font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); } .art-toc__fold summary::-webkit-details-marker { display: none; } .art-toc__fold summary::after { content: ""; width: 7px; height: 7px; margin-left: auto; border-right: 2px solid var(--stamp); border-bottom: 2px solid var(--stamp); transform: translateY(-2px) rotate(45deg); transition: transform var(--t-fast) var(--ease); } .art-toc__fold[open] summary::after { transform: translateY(2px) rotate(-135deg); } .art-toc__n { color: var(--muted); } .art-toc__fold .art-toc__list { margin: 0 16px 14px; } @media (max-width: 1199px) { .art-toc > .art-toc__title, .art-toc > .art-toc__list { display: none; } } @media (min-width: 1200px) { .art-toc__fold { display: none; } } /* ---------- A7. Emplacements publicitaires (inertes par defaut) ---------- */ .ad-slot { position: relative; display: grid; place-items: start center; min-height: 280px; contain: layout style; border-top: 1px solid var(--rule); padding-top: 6px; } .ad-slot--rail { min-height: 600px; } .article .prose > .ad-slot--inline { max-width: var(--art-main); margin-block: 40px; } .article .article-main > .ad-slot--end { margin-block-start: 48px; } .ad-slot__label { font-family: var(--mono); font-size: 13px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } /* ---------- A8. Prose des pages interieures ------------------------------ */ .article .prose { max-width: none; font-size: 18px; line-height: 30px; color: var(--slate); } .article .prose p, .article .prose li { font-size: 18px; line-height: 30px; } /* Mesure : 680px pour ce qui se lit, 720px pour ce qui se consulte. */ .article .prose > * { max-width: var(--art-measure); } .article .prose > :is(figure, .wp-block-table, .wp-block-image, .wp-block-embed, .wc-table, .ad-slot, pre, .wp-block-code, .wp-block-preformatted) { max-width: var(--art-main); } /* Alignements larges (ARTICLETEMPLATE-26) : theme.css 25j-6 calcule une sortie symetrique pour une colonne de 672px CENTREE dans 1110px ; la colonne est desormais une grille a rail, ce calcul sortirait la figure de l'ecran. Une figure large prend toute la colonne principale, pas plus. */ .article .prose > :is(.alignwide, .alignfull) { width: auto; max-width: var(--art-main); margin-inline: 0; } /* Rythme : l'intertitre se rattache a ce qu'il introduit (X-ARTICLETEMPLATE-01). 56px avant, 14px apres, contre 24px entre deux paragraphes. */ .article .prose > * + * { margin-block-start: 24px; } .article .prose > h2 { margin-block-start: 56px; } .article .prose > h3 { margin-block-start: 40px; } .article .prose > :is(h2, h3) + * { margin-block-start: 14px; } .article .prose > :first-child { margin-block-start: 0; } /* H2 : casse de phrase, barres signature calees sur la PREMIERE ligne. */ .article .prose h2 { position: relative; padding-left: 22px; font-family: var(--display); font-stretch: 87%; font-weight: 700; font-size: 28px; line-height: 32px; letter-spacing: 0; text-transform: none; color: var(--ink); text-wrap: balance; } .article .prose h2::before { top: 5px; height: 22px; transform: none; } .article .prose h3 { font-family: var(--display); font-stretch: 87%; font-weight: 700; font-size: 21px; line-height: 27px; letter-spacing: 0; text-transform: none; color: var(--ink); } .article .prose ul, .article .prose ol { padding-left: 24px; } .article .prose li + li { margin-block-start: 8px; } /* Scores insecables (VISUALMOBILE-24) : « 3-0 » ne se coupe plus sur le tiret. */ .score { white-space: nowrap; font-variant-numeric: tabular-nums; } /* ---------- A9. Tableaux de prose (§3.5) --------------------------------- Le coeur pose `.wp-block-table td, th { border: 1px solid; padding: .5em }` et `thead { border-bottom: 3px solid }` : filets verticaux couleur encre et texte colle au filet (ARTICLETEMPLATE-04). On neutralise tout, on ne garde que des filets horizontaux. Texte en Archivo, en-tetes en mono 12px. */ .prose .wp-block-table { margin-inline: 0; overflow: visible; /* c'est .wc-table, dedans, qui defile */ min-width: 0; } .prose .wp-block-table table, .prose .wc-table table { width: 100%; min-width: 0; /* plus de min-width: 30em : un tableau a 2 colonnes ne defile pas */ margin: 0; border-collapse: collapse; border: 0; font-family: var(--display); font-size: 15px; line-height: 21px; font-variant-numeric: tabular-nums; background: none; } .prose .wp-block-table thead, .prose .wp-block-table tfoot, .prose .wc-table thead, .prose .wc-table tfoot { border: 0; } .prose .wp-block-table :is(td, th), .prose .wc-table :is(td, th) { border: 0; border-bottom: 1px solid var(--rule); padding: 10px 12px; text-align: left; vertical-align: top; color: var(--ink); background: none; } .prose .wp-block-table :is(td, th):first-child, .prose .wc-table :is(td, th):first-child { padding-left: 0; } .prose .wp-block-table :is(td, th):last-child, .prose .wc-table :is(td, th):last-child { padding-right: 0; } .prose .wp-block-table thead th, .prose .wc-table thead th { font-family: var(--mono); font-weight: 400; font-size: 13px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); vertical-align: bottom; border-bottom: 2px solid var(--ink); } .prose .wp-block-table tbody th, .prose .wc-table tbody th { font-weight: 700; } .prose .wp-block-table tr:last-child td, .prose .wc-table tr:last-child td { border-bottom: 1px solid var(--rule); } /* Colonnes numeriques a droite, chiffres tabulaires (filtre de rendu `is-num`, ou alignement pose dans l'editeur). */ .prose .wp-block-table :is(td, th):is(.is-num, .has-text-align-right), .prose .wc-table :is(td, th):is(.is-num, .has-text-align-right) { text-align: right; } /* Le chiffre est insecable ; son EN-TETE ne l'est pas : « GOALS PER MATCH » sur une ligne ecrasait la colonne des noms (« Kylian / Mbappe »). */ .prose .wp-block-table td:is(.is-num, .has-text-align-right), .prose .wc-table td:is(.is-num, .has-text-align-right) { white-space: nowrap; } .prose .wp-block-table :is(td, th).has-text-align-center { text-align: center; } /* Ligne « Total » (tbody ou tfoot) : gras, filet encre. */ .prose .wc-table tr.is-total :is(td, th), .prose .wp-block-table tfoot :is(td, th) { font-weight: 700; color: var(--ink); border-top: 2px solid var(--ink); border-bottom: 0; } .prose .wc-table tr.is-total strong { font-weight: 700; } /* 2.1.0 (23/09/2026, « les tableaux sont laids ») : un tableau se lit par lignes. En-tete sur un bandeau teinte, lignes alternees, survol, et la ligne mise en avant par la redaction (toutes ses cellules en gras : le joueur de la fiche dans un classement) sur un vert pale avec un filet a gauche. Les cellules collantes du mobile heritent du fond de LEUR ligne (sinon une ligne alternee aurait une premiere cellule blanche). */ .prose .wc-table thead th { background: var(--panel); color: var(--slate); padding-top: 11px; padding-bottom: 9px; border-bottom: 2px solid var(--stamp); } .prose .wc-table :is(td, th):first-child { padding-left: 12px; } .prose .wc-table :is(td, th):last-child { padding-right: 12px; } .prose .wc-table thead tr { background: var(--panel); } .prose .wc-table tbody tr { background: var(--sheet); } .prose .wc-table tbody tr:nth-child(even) { background: #F3F5F0; } .prose .wc-table tbody tr:hover { background: #E9F1EC; } .prose .wc-table tbody tr:has(> td:first-child > strong):has(> td:last-child > strong):not(.is-total) { background: #E3EFE7; box-shadow: inset 3px 0 0 0 var(--stamp); } .prose .wc-table tr.is-total { background: var(--panel); } /* La region defilante : focalisable, nommee, et SIGNALEE. Les deux voiles « local » suivent le contenu et masquent les ombres « scroll » aux bouts ; une ombre n'apparait donc que du cote ou il reste des colonnes cachees. */ .wc-table { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; background: linear-gradient(to right, var(--sheet) 30%, rgba(250, 251, 248, 0)) left center / 40px 100% no-repeat local, linear-gradient(to left, var(--sheet) 30%, rgba(250, 251, 248, 0)) right center / 40px 100% no-repeat local, radial-gradient(farthest-side at 0 50%, rgba(22, 26, 32, .22), rgba(22, 26, 32, 0)) left center / 14px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, rgba(22, 26, 32, .22), rgba(22, 26, 32, 0)) right center / 14px 100% no-repeat scroll; background-color: var(--sheet); } .wc-table:focus-visible { outline: 3px solid var(--stamp); outline-offset: 3px; } /* Legendes : la methode et les sources se lisent (§3.5, ARTICLETEMPLATE-14). Archivo 14/21, casse normale, a gauche — le coeur les centre. */ .prose figcaption, .prose .wp-element-caption, .prose .wp-block-table figcaption, .prose .wp-block-table :where(figcaption) { margin-top: 12px; max-width: var(--art-measure); font-family: var(--display); font-size: 14px; line-height: 21px; letter-spacing: 0; text-transform: none; text-align: left; color: var(--muted); } @media (max-width: 640px) { /* Premiere colonne collante : le lecteur garde la ligne en defilant. */ .prose .wc-table :is(td, th):first-child { position: sticky; left: 0; z-index: 1; background: inherit; box-shadow: inset -1px 0 0 var(--rule); padding-right: 10px; } .prose .wp-block-table :is(td, th), .prose .wc-table :is(td, th) { padding: 9px 10px; } .prose .wc-table table { font-size: 14px; line-height: 20px; } /* Tableau a rang (REV1-06, classe `has-rank` posee par inc/article.php) : « 5= » seul ne dit pas de qui il s'agit. Le rang prend une largeur FIXE et la 2e colonne (le nom) colle juste a sa droite : rang et nom restent a l'ecran pendant qu'on fait defiler « Goals per match ». Quand le tableau defile, les colonnes sont a leur largeur minimale : la colonne du rang vaut alors exactement --art-rank, donc le decalage tombe juste. */ .prose .wc-table.has-rank { --art-rank: 2.5rem; } .prose .wc-table.has-rank :is(td, th):first-child { box-sizing: border-box; width: var(--art-rank); min-width: var(--art-rank); max-width: var(--art-rank); box-shadow: none; z-index: 2; } .prose .wc-table.has-rank :is(td, th):nth-child(2) { position: sticky; left: var(--art-rank); z-index: 1; background: inherit; box-shadow: inset -1px 0 0 var(--rule); } /* L'en-tete est haut (« GOALS PER MATCH » sur trois lignes, texte cale en bas) : le filet vertical y montait seul au-dessus de « PLAYER ». Le filet de separation ne court que le long du corps. */ .prose .wc-table thead :is(td, th):first-child, .prose .wc-table.has-rank thead :is(td, th):nth-child(2) { box-shadow: none; } } /* ---------- A10. Faits en ligne (balisage compact de l'extension 1.2.0) --- La valeur garde son soulignement de statut (theme.css 25c : plein pour ratified/announced, tirets pour derived/reported/projected, rien pour unknown) mais ne doit PAS se lire comme un lien : couleur du texte, curseur normal. La micro-jauge .wc-fact__mark porte le lien vers « Figures on this page » : 10px visibles, 24x24 de cible, sans toucher a la hauteur de ligne. */ .prose .wc-fact__value { color: inherit; cursor: text; } /* Valeur-phrase (filtre de rendu `wc-fact--text`) : pas de soulignement, il se lirait comme un lien ; la micro-jauge qui suit porte le statut. */ .prose .wc-fact--text .wc-fact__value, .prose .wc-fact.wc-fact--text[data-status] .wc-fact__value { box-shadow: none; background-image: none; padding-bottom: 0; } /* L'extension pose un defaut en :where() (point rond de 6px, boite de 24px en marges negatives) : on le remplace entierement, boite comprise. */ .wc-fact__mark, .prose a.wc-fact__mark { position: relative; display: inline-block; box-sizing: content-box; width: 10px; height: 8px; min-width: 0; min-height: 0; margin: 0 1px 0 3px; padding: 0; /* Relevee comme un appel de note : elle renvoie ailleurs, elle ne fait pas partie du nombre. Sur la ligne de base, les trois traits se lisaient « III ». */ vertical-align: .42em; border: 0; border-radius: 0; background: none; text-decoration: none; line-height: 0; opacity: 1; } .wc-fact__mark::after { content: ""; position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; transform: translate(-50%, -50%); } .prose a.wc-fact__mark:hover, .prose a.wc-fact__mark:focus-visible { background: none; } .wc-fact__mark:focus-visible { outline: 2px solid var(--stamp); outline-offset: 3px; } .wc-fact__mark > span { --m1: var(--art-hollow); --m2: var(--art-hollow); --m3: var(--art-hollow); display: block; box-sizing: border-box; width: 10px; height: 8px; border: 0; border-radius: 0; opacity: 1; background: linear-gradient(var(--m1), var(--m1)) 0 100% / 2px 100% no-repeat, linear-gradient(var(--m2), var(--m2)) 4px 100% / 2px 100% no-repeat, linear-gradient(var(--m3), var(--m3)) 8px 100% / 2px 100% no-repeat; } /* Liste blanche : ce qui n'est pas nomme ici reste a trois traits creux. */ .wc-fact[data-status="ratified"] .wc-fact__mark > span { --m1: var(--stamp); --m2: var(--stamp); --m3: var(--stamp); } .wc-fact[data-status="announced"] .wc-fact__mark > span, .wc-fact[data-status="announced_by_confederation"] .wc-fact__mark > span { --m1: var(--stamp); --m2: var(--stamp); } .wc-fact[data-status="derived"] .wc-fact__mark > span, .wc-fact[data-status="reported"] .wc-fact__mark > span { --m1: var(--pencil); --m2: var(--pencil); } .wc-fact[data-status="projected"] .wc-fact__mark > span { --m1: var(--pencil); } .wc-fact__mark:hover > span { --art-hollow: var(--muted); } /* ---------- A11. « Figures on this page » -------------------------------- */ .art-figures { margin-block-start: 64px; padding-top: 22px; border-top: 2px solid var(--ink); } .article .article-main > .art-figures { margin-block-start: 64px; } .article .art-figures__title, .article .art-related__title { font-family: var(--display); font-stretch: 87%; font-weight: 700; font-size: 24px; line-height: 28px; color: var(--ink); } .art-figures__intro { max-width: var(--art-measure); margin: 10px 0 16px; font-size: 15px; line-height: 23px; color: var(--muted); } .art-figures__intro a { color: var(--stamp); border-bottom: 1px solid currentColor; } .art-figures__table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; font-variant-numeric: tabular-nums; } .art-figures__table :is(th, td) { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; color: var(--slate); } .art-figures__table :is(th, td):last-child { padding-right: 0; } .art-figures__table thead th { font-family: var(--mono); font-weight: 400; font-size: 13px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); vertical-align: bottom; border-bottom: 2px solid var(--ink); } .art-figures__table tbody th { font-weight: 400; width: 44%; } .art-figures__value { display: block; font-weight: 800; font-size: 16px; line-height: 21px; color: var(--ink); } .art-figures__label { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--muted); } .art-figures__status { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } .art-figures__table a { color: var(--stamp); border-bottom: 1px solid rgba(31, 106, 70, .35); } .art-figures__table a:hover, .art-figures__table a:focus-visible { border-bottom-color: currentColor; } .art-figures__asof { display: block; font-size: 13px; line-height: 18px; color: var(--muted); } .art-figures__table time { white-space: nowrap; } /* Arrivee depuis une micro-jauge : la ligne visee se signale. */ .art-figures__table tr:target { background: var(--panel); box-shadow: inset 3px 0 0 var(--stamp); } .art-figures__table tr:target > th { padding-left: 10px; } @media (max-width: 640px) { /* Pas de defilement ici : la table se replie en fiches (le balisage porte `data-label`), une fiche par chiffre. */ .art-figures__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .art-figures__table, .art-figures__table tbody, .art-figures__table tr { display: block; } .art-figures__table tr { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.25fr) minmax(0, .9fr); column-gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--rule); } .art-figures__table :is(th, td) { display: block; padding: 0; border: 0; } .art-figures__table tbody th { grid-column: 1 / -1; width: auto; margin-bottom: 8px; } .art-figures__table td::before { content: attr(data-label); display: block; font-family: var(--mono); font-size: 13px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .art-figures__table tr:target > th { padding-left: 0; } .art-figures__table tr:target { padding-inline: 10px; } } /* ---------- A12. « Keep reading » ---------------------------------------- */ .art-related { margin-block-start: 56px; padding-top: 22px; border-top: 2px solid var(--ink); } .article .article-main > .art-related { margin-block-start: 56px; } .art-related__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; margin: 10px 0 0; padding: 0; list-style: none; } .art-related__item { margin: 0; } .art-related__link { display: block; height: 100%; padding: 14px 0 15px; border-bottom: 1px solid var(--rule); color: var(--ink); } .art-related__kicker { display: block; font-family: var(--mono); font-size: 13px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .art-related__name { display: block; margin-top: 4px; font-stretch: 87%; font-weight: 700; font-size: 19px; line-height: 24px; color: var(--ink); transition: color var(--t-fast) var(--ease); } .art-related__link:hover .art-related__name, .art-related__link:focus-visible .art-related__name { color: var(--stamp); } .art-related__fix { margin: 18px 0 0; font-size: 15px; line-height: 23px; color: var(--muted); } .art-related__fix a { color: var(--stamp); border-bottom: 1px solid currentColor; } @media (max-width: 640px) { .art-related__list { grid-template-columns: 1fr; } } /* ---------- A13. Hub : grille des pages de la section -------------------- */ .article .article-hub { margin-block-start: 40px; } .article .art-children__title { position: relative; padding-left: 22px; font-family: var(--display); font-stretch: 87%; font-weight: 700; font-size: 28px; line-height: 32px; color: var(--ink); } .art-children__title::before { content: ""; position: absolute; left: 0; top: 5px; width: 10px; height: 22px; background: linear-gradient(var(--stamp), var(--stamp)) left / 4px 100% no-repeat, linear-gradient(var(--stamp), var(--stamp)) right / 4px 100% no-repeat; } .art-children__n { display: inline-block; margin-left: 6px; padding: 0 7px; font-family: var(--mono); font-weight: 400; font-size: 13px; line-height: 20px; letter-spacing: .06em; vertical-align: 5px; color: var(--muted); border: 1px solid var(--rule); } .art-children__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; margin: 22px 0 0; padding: 0; list-style: none; } /* Moins de trois pages (REV1-15) : la grille se cale sur la colonne de lecture et ses cartes se partagent la rangee, au lieu d'une carte etroite perdue a gauche d'une grille a quatre colonnes vides. */ .art-children__grid.is-few { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); max-width: var(--art-main); } .art-card { position: relative; display: flex; flex-direction: column; margin: 0; padding: 18px 20px 16px; background: var(--panel); border-top: 3px solid var(--stamp); transition: background-color var(--t-fast) var(--ease); } .art-card:hover { background: #E4E7DF; } .art-card:focus-within { outline: 3px solid var(--stamp); outline-offset: 3px; } .art-card__kicker { margin: 0; font-family: var(--mono); font-size: 13px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .article .art-card__name { margin: 6px 0 0; font-family: var(--display); font-stretch: 87%; font-weight: 800; font-size: 23px; line-height: 27px; color: var(--ink); } .art-card__name a { color: inherit; } .art-card__name a:focus-visible { outline: 0; } .art-card__name a::after { content: ""; position: absolute; inset: 0; } .art-card:hover .art-card__name { color: var(--stamp); } .art-card__figs { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; padding: 0; list-style: none; } .art-card__figs li { display: flex; align-items: baseline; gap: 6px; margin: 0; } .art-card__figs b { font-stretch: 110%; font-weight: 800; font-size: 22px; line-height: 26px; color: var(--ink); font-variant-numeric: tabular-nums; } .art-card__figs span { font-family: var(--mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .art-card__excerpt { margin: 10px 0 0; font-size: 15px; line-height: 23px; color: var(--slate); } .art-card__go { margin-top: auto; padding-top: 14px; font-family: var(--mono); font-size: 13px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--stamp); } .article .article-hub__grid { margin-block-start: 56px; } .article .article-hub__aside > .art-related { margin-block-start: 56px; } @media (min-width: 1200px) { .article .article-hub__grid { display: grid; grid-template-columns: minmax(0, var(--art-main)) var(--art-rail); justify-content: space-between; align-items: start; } .article .article-hub__aside > .art-related { margin-block-start: 0; } .article-hub__aside .art-related__list { grid-template-columns: 1fr; } } /* ---------- A14. Petits ecrans ------------------------------------------- */ @media (max-width: 900px) { .article .art-title { font-size: 34px; line-height: 38px; } } @media (max-width: 640px) { .article { padding-block-end: 64px; } .article .art-crumbs { margin-block-end: 20px; } .article .art-title { font-size: 30px; line-height: 34px; } .article .art-lede p { font-size: 17px; line-height: 26px; } .article .prose, .article .prose p, .article .prose li { font-size: 17px; line-height: 28px; } .article .prose h2 { font-size: 24px; line-height: 28px; } .article .prose h2::before { top: 3px; } .article .prose > h2 { margin-block-start: 44px; } .article .art-children__title { font-size: 24px; line-height: 28px; } .art-children__title::before { top: 3px; } .article .article-head__body { padding-block-end: 28px; } .article .article-grid { margin-block-start: 28px; } } /* ---------- A15. Impression ---------------------------------------------- */ @media print { .article { padding-top: 0; background: #fff; } .article-rail, .art-related, .ad-slot, .art-crumbs { display: none !important; } .wc-table { overflow: visible; background: none; } } /* ---------- A16. Corrections de la recette finale (23/09/2026) ------------ Defauts R3-01, R3-05, R3-06 et R3-09 de la recette independante, corriges par l'orchestrateur apres les deux tours de corrections des agents. */ /* R3-01 — La micro-jauge d'un fait partait seule a la ligne (« carried him to 21 » / « ▮▮▮. »). .wc-fact__mark est un inline-block : il cree une occasion de coupure avant lui. La coupure a la frontiere entre deux elements est gouvernee par le white-space de leur plus proche ancetre commun, .wc-fact : en nowrap, la valeur et sa marque restent collees. Une valeur-PHRASE garde la coupure normale ENTRE ses mots, mais jamais entre son dernier mot et la marque. */ .prose .wc-fact { white-space: nowrap; } .prose .wc-fact--text .wc-fact__value { white-space: normal; } /* R3-05 — A 375, les tableaux de matchs a 5 colonnes etaient ecrases dans 345 px (« 18 / June », « Round / of 16 ») au lieu d'utiliser la region defilante et son indice. Au-dela de 4 colonnes (data-cols pose par wc2030_article_table_wrap), le tableau garde une largeur lisible et defile ; la date de la premiere colonne ne se coupe jamais. Les tableaux a 2-3 colonnes restent sans defilement (§3.5). */ @media (max-width: 640px) { .prose .wc-table :is(td, th):first-child { white-space: nowrap; } .prose .wc-table:is([data-cols="5"], [data-cols="6"], [data-cols="7"], [data-cols="8"], [data-cols="9"]) .wc-table__t { min-width: 34rem; } } /* R3-06 — Une seule marge gauche sur tout le site. Les colonnes etroites (page simple a toute largeur, fiches et hubs sous 1200 px) etaient CENTREES (x=280 a 1280, x=152 a 1024) alors que l'en-tete, le pied, l'accueil, la 404 et la recherche commencent au bord du .wrap. La colonne garde sa largeur mais s'aligne sur ce bord : meme marge gauche que le wrap pleine largeur. */ .article--page .article-head.wrap, .article--page .article-grid.wrap { margin-inline: max(0px, calc((100% - var(--wrap)) / 2)) auto; } .article--page .article-main { margin-inline: 0; } @media (max-width: 1199px) { .article .article-head.wrap, .article .article-grid.wrap, .article .article-hub.wrap { margin-inline: max(0px, calc((100% - var(--wrap)) / 2)) auto; } .article .article-main { margin-inline: 0; } } /* R3-09 — La jauge du registre est a GAUCHE du chiffre partout ailleurs (plaque du hero, trois records, bande de provenance) : meme place ici. */ .art-kf__mark { order: -1; }