@charset "utf-8"; /* ========================================================================= World Cup 2030 Guide — template d'accueil, direction « Tally » Gabarit imite : RealSoccer Demo 2 (GoodLayers). Relevé : REFERENCE-ANALYSIS.md Direction complete : DIRECTION.json ------------------------------------------------------------------------- Une seule couleur d'accent (--stamp). Une seule seconde couleur vive (--pencil), a emploi unique et nomme : l'annotation provisoire. ========================================================================= */ /* ---------- 1. Jetons ---------------------------------------------------- */ :root { /* Couleurs. Chaque valeur a un role, aucune n'est decorative. */ --ink: #161A20; /* noir de la direction, jamais #000 */ --ink-deep: #0B0E12; /* barre de cote seulement */ --slate: #4A5058; /* texte courant — 7,9:1 sur --sheet */ --page: #D5D8D2; /* pourtour, hors des 1140px */ --sheet: #FAFBF8; /* feuille de contenu */ --panel: #EDEFE9; /* panneaux encastres */ --rule: #D9DDD4; /* filets */ --muted: #5F686F; /* texte secondaire — 4,79:1 sur --panel, le fond le plus sombre des deux */ --muted-dark: #8A939B; /* idem sur --ink-deep — 6,20:1 */ /* PORTAGE WORDPRESS : l'accent retenu est « pitch », le vert terrain. La maquette le posait par `data-accent="pitch"` sur ; WordPress n'emet pas cet attribut, l'accent devient donc le DEFAUT de :root. Contrastes remesures pour ces deux valeurs-ci, ils ne sont pas ceux du violet. */ --stamp: #1F6A46; /* UNIQUE accent loud — 6,30:1 sur --sheet, 5,65:1 sur --panel */ --stamp-lift: #6CC79A; /* le meme, sur fond sombre — 8,54:1 sur --ink */ --pencil: #9A6412; /* annotation provisoire — 4,83:1 sur --sheet */ --pencil-lift:#D2A24E; /* idem, sur fond sombre */ --on-dark: #F2F4F0; --on-dark-2: #A8B0B8; /* Cible pas encore publiee, sur fond sombre. Il lui faut deux qualites a la fois : etre PLUS FAIBLE qu'un lien voisin (#A8B0B8, 7,95:1) et rester au-dessus du seuil de lisibilite. Un `rgba(...,.55)` tombait a 3,31:1 — mesure, pas estimee. Valeur pleine plutot qu'alpha : l'alpha depend d'un fond qu'on ne controle pas partout. 4,96:1 sur --ink, 5,49:1 sur --ink-deep. */ --pending-dark: #808A91; /* Trame et rythme */ --wrap: 1140px; --gut: 15px; --veil: .80; /* opacite du calque d'encre sur les planches */ /* Polices */ --display: "Archivo", "Archivo Fallback", "Arial Narrow", Arial, sans-serif; --mono: "IBM Plex Mono", "Plex Mono Fallback", ui-monospace, "SFMono-Regular", Menlo, monospace; --t-fast: 140ms; --t-mid: 180ms; --ease: cubic-bezier(.4, 0, .2, 1); } /* VARIANTES D'ACCENT — ALTERNATIVES REVERSIBLES, conservees volontairement. Elles ne s'appliquent qu'a un ancetre portant `data-accent`, que WordPress ne pose nulle part : aucune n'est active en l'etat. Pour revenir a l'une d'elles, il suffit d'ajouter l'attribut sur (filtre `language_attributes`) ou sur n'importe quel ancetre — rien d'autre a toucher, tout le reste de la feuille passe par les deux jetons. « brick » est la couleur du gabarit de reference ; elle permet de comparer. « stamp » est le violet d'origine de la direction « Tally » (8,11:1 sur --sheet et 5,01:1 sur --ink). « pitch » est repete ici pour memoire : c'est desormais le defaut ci-dessus. */ :root[data-accent="brick"] { --stamp: #9B2F30; --stamp-lift: #E08384; } :root[data-accent="stamp"] { --stamp: #6E2E96; --stamp-lift: #A971D6; } :root[data-accent="pitch"] { --stamp: #1F6A46; --stamp-lift: #6CC79A; } /* ---------- 2. Socle ----------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; /* 84px de barre collee + 12px de garde : sans ca, la tabulation arriere pose le focus derriere l'en-tete (WCAG 2.4.11). */ scroll-padding-top: 96px; } body { margin: 0; background: var(--page); color: var(--slate); font-family: var(--display); font-stretch: 100%; font-weight: 400; font-size: 16px; line-height: 27px; font-synthesis-weight: none; overflow-x: hidden; } img, svg { max-width: 100%; } img { height: auto; display: block; } a { color: var(--stamp); text-decoration: none; } h1, h2, h3, h4 { margin: 0; font-weight: 700; color: var(--ink); } ul { margin: 0; padding: 0; list-style: none; } /* Le rythme vertical est dessine section par section, jamais delegue au `margin: 1em` du navigateur : c'est lui qui portait la bande a 540px. */ p { margin: 0; } /* Focus : toujours visible, jamais supprime. */ :focus-visible { outline: 3px solid var(--stamp); outline-offset: 3px; border-radius: 2px; } .on-dark :focus-visible, .hero :focus-visible, .footer :focus-visible, .head :focus-visible, .colophon :focus-visible, .rail :focus-visible { outline-color: var(--stamp-lift); } .skip { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--stamp); color: #fff; padding: 12px 20px; font-stretch: 87%; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; transition: top var(--t-fast) var(--ease); } .skip:focus { top: 12px; } .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- 3. Grille ---------------------------------------------------- */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); } .cols { display: grid; grid-template-columns: 1fr 2fr; gap: 42px; } .cols > * { min-width: 0; } /* ---------- 4. Le geste signature : la marque de depot ------------------- */ /* 4a. Deux barres avant chaque titre de section — le `ll` du releve, rendu litteralement. Huit occurrences sur la page, zero au pied de page. */ .sec-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin: 0 var(--gut) 35px; } .sec-title { position: relative; display: inline-block; padding-left: 22px; font-stretch: 75%; font-weight: 700; font-size: 23px; line-height: 23px; letter-spacing: .04em; text-transform: uppercase; } .sec-title::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); 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; } .on-dark .sec-title { color: var(--on-dark); } .on-dark .sec-title::before { background: linear-gradient(var(--stamp-lift), var(--stamp-lift)) left / 4px 100% no-repeat, linear-gradient(var(--stamp-lift), var(--stamp-lift)) right / 4px 100% no-repeat; } .sec-link { font-size: 13px; line-height: 1; display: inline-block; padding-block: 7px; /* 27px de haut : cible 24x24 minimum */ border-bottom: 1px solid transparent; transition: border-color var(--t-fast) var(--ease); } .sec-link:hover, .sec-link:focus-visible { border-bottom-color: currentColor; } .on-dark .sec-link { color: var(--stamp-lift); } .sec-nav { margin-left: auto; display: flex; gap: 6px; } .arrow { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 1px solid var(--rule); color: var(--ink); cursor: pointer; padding: 0; transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .arrow:hover:not(:disabled) { background: var(--stamp); border-color: var(--stamp); color: #fff; } .arrow:disabled { opacity: .3; cursor: default; } .on-dark .arrow, .hero .arrow { border-color: rgba(242,244,240,.28); color: var(--on-dark); } .on-dark .arrow:hover:not(:disabled), .hero .arrow:hover:not(:disabled) { background: var(--stamp-lift); border-color: var(--stamp-lift); color: var(--ink); } .arrow svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; } /* 4b. Trois traits devant un chiffre monumental. Le NOMBRE de traits pleins dit la confiance ; la couleur double l'information, elle ne la porte pas seule. La page reste entierement decodable en niveaux de gris. */ .gauge { display: inline-flex; gap: 3px; vertical-align: middle; flex: none; } /* LISTE BLANCHE DE LA CERTITUDE, jamais liste noire du doute. Le defaut est « creux gris » : un statut que ce CSS ne connait pas — `reported`, `disputed`, tout statut que le plugin `wc2030-facts` ajoutera demain — se peint en incertain, jamais en verifie. L'inverse peindrait un fait non ratifie avec la marque de verification, ce qui est exactement la promesse du site a l'envers. */ .gauge i { width: 4px; height: 12px; display: block; border: 1px solid #7C858D; background: none; } .gauge[data-state="ratified"] i, .gauge[data-state="announced"] i, .gauge[data-state="announced_by_confederation"] i { border-color: var(--stamp); background: var(--stamp); } .gauge[data-state="derived"] i, .gauge[data-state="reported"] i, .gauge[data-state="projected"] i { border-color: var(--pencil); background: var(--pencil); } .on-dark .gauge[data-state="ratified"] i, .hero .gauge[data-state="ratified"] i, .on-dark .gauge[data-state="announced"] i, .hero .gauge[data-state="announced"] i, .on-dark .gauge[data-state="announced_by_confederation"] i, .hero .gauge[data-state="announced_by_confederation"] i { border-color: var(--stamp-lift); background: var(--stamp-lift); } .on-dark .gauge[data-state="derived"] i, .hero .gauge[data-state="derived"] i, .on-dark .gauge[data-state="reported"] i, .hero .gauge[data-state="reported"] i, .on-dark .gauge[data-state="projected"] i, .hero .gauge[data-state="projected"] i { border-color: var(--pencil-lift); background: var(--pencil-lift); } /* Place en dernier : le trait creux vide toujours son fond, quel que soit l'etat. */ .gauge i.hollow, .on-dark .gauge i.hollow, .hero .gauge i.hollow { background: none; } /* 4c. Soulignement de valeur : plein = ratifie, tirets = derive ou projete, absent = en discussion. Environ 45 occurrences, et c'est voulu. */ .val { font-variant-numeric: tabular-nums; padding-bottom: 2px; } .val[data-state="ratified"], .val[data-state="announced"], .val[data-state="announced_by_confederation"] { box-shadow: inset 0 -2px 0 0 var(--stamp); } .val[data-state="derived"], .val[data-state="reported"], .val[data-state="projected"] { background-image: linear-gradient(90deg, var(--pencil) 0 4px, transparent 4px 8px); background-size: 8px 2px; background-repeat: repeat-x; background-position: 0 100%; } .val[data-state="unknown"], .val[data-state="disputed"] { box-shadow: none; color: var(--muted); } .on-dark .val[data-state="ratified"], .on-dark .val[data-state="announced"], .on-dark .val[data-state="announced_by_confederation"], .hero .val[data-state="announced_by_confederation"], .hero .val[data-state="ratified"], .hero .val[data-state="announced"] { box-shadow: inset 0 -2px 0 0 var(--stamp-lift); } .on-dark .val[data-state="derived"], .on-dark .val[data-state="reported"], .on-dark .val[data-state="projected"], .hero .val[data-state="derived"], .hero .val[data-state="reported"], .hero .val[data-state="projected"] { background-image: linear-gradient(90deg, var(--pencil-lift) 0 4px, transparent 4px 8px); } /* 4d. La contrepartie obligatoire de tout chiffre monumental : sa source. */ .src { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .on-dark .src, .hero .src { color: var(--on-dark-2); } .meta { font-family: var(--mono); font-size: 12px; letter-spacing: .10em; text-transform: uppercase; color: var(--muted); } .on-dark .meta, .hero .meta { color: var(--on-dark-2); } .num { font-stretch: 110%; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); } .on-dark .num, .hero .num { color: var(--on-dark); } /* Lien d'action, geste du releve : 14px / 700 / uppercase / +0.1em */ .more { display: inline-block; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; padding-block: var(--more-pad, 0px); background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 calc(100% - var(--more-pad, 0px)); transition: background-size var(--t-mid) var(--ease); } .more:hover, .more:focus-visible { background-size: 100% 1px; } .on-dark .more, .hero .more { color: var(--stamp-lift); } /* ---------- 5. En-tete --------------------------------------------------- */ .head { position: fixed; inset: 0 0 auto; z-index: 100; height: 239px; background: rgba(22, 26, 32, .72); /* pas de backdrop-filter : gele le scroll */ transition: background-color var(--t-fast) linear, height var(--t-mid) var(--ease); } .head.stuck { height: 84px; background: var(--ink); } .head-in { position: relative; height: 100%; display: flex; flex-direction: column; } .head-row { display: flex; align-items: center; justify-content: space-between; height: 130px; flex: 0 0 130px; transition: opacity var(--t-fast) var(--ease); } .head-row .meta { color: rgba(242,244,240,.62); } .head-tools { display: flex; align-items: center; gap: 4px; } .head-tools a, .head-tools button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; background: none; border: 0; cursor: pointer; color: rgba(242,244,240,.78); font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; } .head-tools a:hover, .head-tools button:hover { color: #fff; } .head-tools svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; } /* La plaque de cote — 190x120, chevauchant les deux rangs, comme l'ecusson du releve */ .plate { position: absolute; left: 50%; top: 6px; transform: translateX(-50%); width: 190px; height: 120px; display: grid; place-content: center; gap: 4px; text-align: center; border: 1px solid var(--stamp-lift); background: rgba(11, 14, 18, .55); transition: width var(--t-mid) var(--ease), height var(--t-mid) var(--ease), top var(--t-mid) var(--ease); } .plate::before, .plate::after { content: ""; position: absolute; width: 7px; height: 7px; border: 1px solid var(--stamp-lift); } .plate::before { left: -1px; top: -1px; border-width: 1px 0 0 1px; } .plate::after { right: -1px; bottom: -1px; border-width: 0 1px 1px 0; } .plate b { font-stretch: 110%; font-weight: 800; font-size: 44px; line-height: .9; color: #fff; letter-spacing: .02em; } .plate span { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; color: var(--on-dark-2); } .head.stuck .plate { width: 120px; height: 44px; top: 20px; } .head.stuck .plate b { font-size: 24px; } .head.stuck .plate span { font-size: 9px; } /* `pointer-events: none` neutralise la souris, pas le clavier : sans `visibility`, trois commandes invisibles restent tabulables. */ .head.stuck .head-row:first-child { opacity: 0; visibility: hidden; pointer-events: none; } .nav { display: flex; align-items: center; justify-content: center; flex: 1 1 auto; } .nav ul { display: flex; flex-wrap: nowrap; justify-content: center; } .nav a { display: block; padding: 20px clamp(10px, 1.85vw, 28px); /* 28px du releve au-dela de 1510px */ white-space: nowrap; font-stretch: 87%; font-weight: 700; font-size: 16px; letter-spacing: .08em; text-transform: uppercase; color: rgba(242,244,240,.86); transition: color var(--t-fast) var(--ease); } .nav a:hover, .nav a[aria-current] { color: #fff; } .nav a[aria-current] { box-shadow: inset 0 -3px 0 0 var(--stamp-lift); } .head.stuck .nav { display: none; } .head-tools .nav-toggle, .nav .nav-extra { display: none; } /* ---------- 6. Hero ------------------------------------------------------ */ .hero { position: relative; height: 820px; background: var(--ink); overflow: hidden; } /* Vraie piste horizontale, comme la slider du releve. Les trois vues sont peintes a l'etat final des le premier rendu : la vue 1 porte le LCP et n'est jamais en `opacity: 0`. Pas d'autoplay — un depot ne fait pas defiler sa premiere page tout seul. */ .slides { position: absolute; inset: 0; display: flex; transition: transform 420ms cubic-bezier(.22, .61, .36, 1); } .slide { flex: 0 0 100%; position: relative; height: 100%; } .slide-bg { position: absolute; inset: -6% 0 0; background-size: cover; background-position: center; } .slide-bg::after { content: ""; position: absolute; inset: 0; background: var(--ink); opacity: var(--veil); } /* Ecran supplementaire cote texte : sur une photo, le contraste se mesure au pire pixel, pas a la moyenne. */ .slide-bg::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, rgba(11,14,18,.55) 0%, rgba(11,14,18,.28) 46%, rgba(11,14,18,.45) 100%); } .slide-body { position: relative; height: 100%; display: grid; grid-template-columns: 2fr 1fr; gap: 48px; align-content: center; padding-top: 268px; padding-bottom: 92px; /* 239px d'en-tete + 29px de garde */ } .hero .eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-2); margin-bottom: 20px; } .hero .year { font-stretch: 62%; font-weight: 800; font-size: 64px; line-height: 1; color: var(--stamp-lift); letter-spacing: .01em; } .hero h1, .hero .slide-title { font-stretch: 62%; font-weight: 800; font-size: 68px; line-height: .94; letter-spacing: -.01em; text-transform: uppercase; color: var(--on-dark); margin: 12px 0 20px; max-width: 16ch; } .hero p { font-size: 18px; line-height: 30px; color: var(--on-dark-2); max-width: 54ch; margin: 0 0 28px; } .hero-acts { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; } .hero-acts .ghost { color: rgba(242,244,240,.62); } .chits { display: grid; gap: 22px; align-content: center; } .chit { border-left: 3px solid rgba(242,244,240,.16); padding-left: 16px; } .chit .gauge { margin-bottom: 8px; } .chit b { display: block; font-stretch: 110%; font-weight: 800; font-size: 46px; line-height: .9; color: var(--on-dark); font-variant-numeric: tabular-nums; } .chit .lab { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-2); margin-top: 6px; } .chit .src { display: block; margin-top: 4px; } .hero-arrows { position: absolute; right: max(var(--gut), calc(50% - 555px)); bottom: 88px; display: flex; gap: 8px; z-index: 3; } /* Le rail du siecle — 26 emplacements, DEUX vides : 1942 et 1946. Un registre qui affiche une frise pleine ment sur le siecle qu'il tient. */ .rail { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; z-index: 3; background: rgba(11,14,18,.66); } .rail-in { display: flex; align-items: flex-end; height: 100%; gap: 0; } .rail-slot { flex: 1 1 0; position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; } .rail-slot a { display: block; width: 100%; height: 100%; position: relative; display: flex; align-items: flex-end; justify-content: center; } .rail-tick { display: block; width: 3px; height: 14px; background: var(--on-dark-2); margin-bottom: 20px; transition: height var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); } .rail-slot a:hover .rail-tick, .rail-slot a:focus-visible .rail-tick { height: 24px; background: #fff; } .rail-slot[data-gap] { } .rail-slot[data-gap]::after { content: ""; width: 3px; height: 14px; margin-bottom: 20px; border-left: 1px dashed rgba(168,176,184,.5); } .rail-slot[data-now] .rail-tick { height: 30px; width: 4px; background: var(--stamp-lift); } .rail-year { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--on-dark-2); } .rail-slot a:hover .rail-year { color: #fff; } .rail-caption { position: absolute; left: var(--gut); bottom: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(168,176,184,.7); } /* ---------- 7. Bande du centenaire (emplacement du « VS ») --------------- */ .band { background: var(--panel); min-height: 290px; display: grid; align-content: center; padding: 22px 0; } .band-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 40px; align-items: center; } .band-side { display: grid; gap: 8px; } .band-side.right { text-align: right; justify-items: end; } .band-side .yr { font-stretch: 75%; font-weight: 700; font-size: 30px; line-height: 1; color: var(--ink); letter-spacing: .02em; } .flags { display: flex; gap: 8px; align-items: center; } .band-side.right .flags { justify-content: flex-end; } .flag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--slate); } .flag svg { width: 28px; height: 19px; display: block; box-shadow: 0 0 0 1px rgba(22,26,32,.18); } .band-side .place { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); } .band-fact { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); } /* Le seul numeral de 96px de la page porte le siecle, pas le tournoi. */ .band-100 { text-align: center; } .band-100 b { display: block; font-stretch: 110%; font-weight: 800; font-size: 96px; line-height: .88; color: var(--ink); font-variant-numeric: tabular-nums; } .band-100 > span { display: block; font-family: var(--mono); font-size: 13px; letter-spacing: .2em; color: var(--slate); margin-top: 4px; } .band-info { display: flex; gap: 44px; flex-wrap: wrap; justify-content: center; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--rule); } .band-info .item { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); } .band-info svg { width: 15px; height: 15px; fill: none; stroke: var(--stamp); stroke-width: 1.8; flex: none; } /* CORRECTION DU DEBORDEMENT HORIZONTAL A 320px. Mesure le 19/09/2026 : `.band` est `display:grid`, son unique enfant `.wrap` recoit donc `min-width:auto` = min-content et refuse de descendre sous la largeur intrinseque de son contenu. Or `.band-info .item` est un `inline-flex` SANS `flex-wrap` : ses elements anonymes de texte (« First qualifying window — », « · CONCACAF round 1 ») se posent sur une seule ligne et portent ce min-content a ~300px ; +30px de padding de `.wrap` = 330px de piste pour un viewport de 320. Les deux regles ci-dessous sont le correctif complet : la premiere autorise la piste de grille a retrecir, la seconde rend le min-content du contenu reellement petit. Aucun effet au-dessus de 320px : `flex-wrap` ne declenche que lorsque la ligne ne tient pas. */ .band > .wrap { min-width: 0; } .band-info .item { flex-wrap: wrap; row-gap: 4px; } .band-cta { text-align: center; margin-top: 14px; } /* ---------- 8. Sections sombres en parallaxe ----------------------------- */ .dark { position: relative; background: var(--ink); overflow: hidden; color: var(--on-dark-2); } .dark .par { position: absolute; inset: -12% 0; background-size: cover; background-position: center; } .dark .par::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22,26,32,.92) 0%, rgba(22,26,32,.80) 38%, rgba(22,26,32,.90) 100%); } .dark .wrap { position: relative; } .dark a { color: var(--stamp-lift); } .sec-players { padding: 78px 0; min-height: 527px; } .sec-ratio { padding: 78px 0; min-height: 659px; } /* Carrousel — meme piste, memes 420ms, pas d'autoplay. */ .track-vp { overflow: hidden; margin-inline: var(--gut); } .track { display: flex; gap: 30px; transition: transform 420ms cubic-bezier(.22,.61,.36,1); } .track > * { flex: 0 0 calc((100% - 90px) / 4); } .track[data-per="3"] > * { flex-basis: calc((100% - 60px) / 3); } .pcard { color: inherit; display: block; } .pcard img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--ink-deep); } .pcard-b { display: flex; gap: 14px; align-items: flex-start; padding-top: 16px; } .pcard-b .num { font-size: 50px; line-height: .86; flex: none; } .pcard h3 { font-stretch: 75%; font-weight: 700; font-size: 18px; line-height: 1.15; text-transform: uppercase; color: var(--on-dark); letter-spacing: .02em; } .pcard .meta { display: block; margin-top: 5px; } .pcard .src { display: block; margin-top: 3px; letter-spacing: .05em; } .pcard:hover h3, .pcard:focus-visible h3 { color: var(--stamp-lift); } /* ---------- 9. Feuille : tableau all-time + archive ---------------------- */ .sheet { background: var(--sheet); padding: 78px 0; } .panel { background: var(--panel); padding: 26px 22px; } .tbl { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; } .tbl caption { text-align: left; } .tbl th { font-family: var(--mono); font-weight: 400; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-align: right; padding: 0 0 10px; border-bottom: 1px solid var(--rule); } .tbl th:first-child { text-align: left; } .tbl td { padding: 9px 0; border-bottom: 1px solid rgba(217,221,212,.75); text-align: right; color: var(--ink); } .tbl td:first-child { text-align: left; font-family: var(--display); font-stretch: 87%; font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .02em; } .tbl td:first-child a { color: var(--ink); display: inline-block; padding-block: 6px; margin-block: -6px; } .tbl td:first-child a:hover { color: var(--stamp); } .tbl .rank { color: var(--muted); font-family: var(--mono); font-weight: 400; font-size: 11px; margin-right: 8px; } .tbl tr.top td { position: relative; } .tbl tr.top td:first-child { box-shadow: inset 3px 0 0 0 var(--stamp); padding-left: 10px; } .panel-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule); } .panel-foot .more { margin-left: auto; font-size: 13px; letter-spacing: .08em; } .news { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 30px; margin-inline: var(--gut); } .ncard { position: relative; } .ncard img { width: 100%; aspect-ratio: 750 / 360; object-fit: cover; background: var(--ink-deep); } /* Lien etendu : la carte entiere est cliquable, mais un seul lien porte le nom accessible. Une vignette enveloppee dans un vide annoncait « lien » puis l'URL brute, quatre fois de suite. */ .ncard h3 a::after { content: ""; position: absolute; inset: 0; } .ncard .more { position: relative; z-index: 1; } .ncard:hover h3 a, .ncard:focus-within h3 a { color: var(--stamp); } .ncard h3 { font-stretch: 75%; font-weight: 700; font-size: 20px; line-height: 1.16; text-transform: uppercase; margin: 16px 0 8px; letter-spacing: .02em; } .ncard h3 a { color: var(--ink); } .ncard h3 a:hover, .ncard h3 a:focus-visible { color: var(--stamp); } .ncard p { margin: 10px 0 12px; font-size: 16px; line-height: 27px; } .ncard .more { font-size: 13px; letter-spacing: .1em; } /* ---------- 10. Ratio board + edition mise en avant --------------------- */ .rboard { display: grid; gap: 20px; margin-inline: var(--gut); } /* Nom et ratio sur la meme ligne, la ligne de detail dessous sur toute la largeur : sur trois colonnes, « 13 goals in 6 matches » se cassait en trois. */ .rrow { display: grid; grid-template-columns: 110px 1fr; column-gap: 18px; row-gap: 7px; } .rrow img { grid-row: 1 / 3; width: 110px; height: 110px; align-self: center; object-fit: cover; background: var(--ink-deep); } .rr-main { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; } .rrow h3 { font-stretch: 75%; font-weight: 700; font-size: 18px; text-transform: uppercase; letter-spacing: .02em; } .rrow h3 a { color: var(--on-dark); display: inline-block; padding-block: 3px; } .rrow h3 a:hover, .rrow h3 a:focus-visible { color: var(--stamp-lift); } .rrow .rv { font-stretch: 110%; font-weight: 800; font-size: 34px; line-height: 1; color: var(--on-dark); font-variant-numeric: tabular-nums; flex: none; } .rr-meta { margin: 0; } /* 31 caracteres de mono 12px ne tiennent pas dans les 234px de la colonne : on serre la chasse plutot que de laisser la ligne se casser en deux. */ .rr-meta .meta, .rr-meta .src { font-size: 11px; letter-spacing: .06em; } .edition { margin-inline: var(--gut); border: 1px solid rgba(242,244,240,.16); aspect-ratio: 16 / 9; background: rgba(11, 14, 18, .58); /* la carte est une plaque, pas une transparence */ } .edition-in { display: grid; grid-template-columns: auto 1fr; gap: 26px; padding: 26px 28px; align-items: start; height: 100%; } .edition .ord { font-stretch: 110%; font-weight: 800; font-size: 48px; line-height: .9; color: var(--stamp-lift); font-variant-numeric: tabular-nums; } .edition h3 { font-stretch: 75%; font-weight: 700; font-size: 23px; text-transform: uppercase; color: var(--on-dark); letter-spacing: .03em; margin-bottom: 10px; } .edition p { margin: 0 0 14px; font-size: 16px; line-height: 27px; color: var(--on-dark-2); } .edition-facts { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; } .edition-rail { display: flex; gap: 3px; align-items: flex-end; height: 26px; margin: 16px 0 6px; } .edition-rail i { flex: 1 1 0; height: 10px; background: rgba(168,176,184,.34); display: block; } .edition-rail i.gap { background: none; border-left: 1px dashed rgba(168,176,184,.45); } .edition-rail i.here { height: 26px; background: var(--stamp-lift); } /* ---------- 11. Fenetres de qualification + silos + galerie ------------- */ .qrow { /* La colonne de gauche porte le libelle le plus long (« CONCACAF — ROUND 1 ») : elle recoit 1,45 part contre 1 a droite, sinon elle se casse en deux lignes. */ display: grid; grid-template-columns: minmax(0, 1.45fr) auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 13px 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; } .qrow:nth-child(odd) { background: var(--panel); } .qrow .q-conf { color: var(--ink); font-weight: 600; } .qrow .q-dash { width: 16px; height: 1px; background: #A8B0B8; } .qrow .q-when { text-align: right; color: var(--slate); white-space: nowrap; } .qlist { margin-inline: var(--gut); } .qfoot { margin: 18px var(--gut) 0; } .banner { display: flex; align-items: center; gap: 16px; min-height: 96px; padding: 20px 24px; margin-inline: var(--gut); background: var(--panel); border-left: 3px solid var(--stamp); color: var(--ink); transition: background-color var(--t-fast) var(--ease); } .banner + .banner { margin-top: 16px; } .banner:hover { background: #E4E7DD; } .banner b { font-stretch: 75%; font-weight: 700; font-size: 20px; text-transform: uppercase; letter-spacing: .03em; } .banner .meta { display: block; margin-top: 3px; } .banner .go { margin-left: auto; color: var(--stamp); font-size: 22px; line-height: 1; } .gal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-inline: var(--gut); } .gal img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--ink-deep); } .gal figcaption, .track figcaption { margin-top: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); } .gal a:hover figcaption, .track a:hover figcaption, .track a:focus-visible figcaption { color: var(--stamp); } .gal-foot { display: flex; gap: 26px; margin: 20px var(--gut) 0; } /* ---------- 12. Bande de provenance ------------------------------------- */ .prov { background: var(--panel); padding: 18px 0; text-align: center; } .prov .claim a { color: var(--ink); } .prov .claim a:hover, .prov .claim a:focus-visible { color: var(--stamp); } .prov .claim { display: inline-block; position: relative; padding-left: 22px; font-stretch: 87%; font-weight: 700; font-size: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); } .prov .claim::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 10px; height: 18px; background: linear-gradient(var(--stamp), var(--stamp)) left / 4px 100% no-repeat, linear-gradient(var(--stamp), var(--stamp)) right / 4px 100% no-repeat; } .legend { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px 16px; margin: 14px 0 12px; text-align: center; } .legend li .gauge { margin-top: 2px; } .legend li { display: inline-flex; align-items: flex-start; justify-content: center; gap: 7px; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--slate); } .authorities { margin: 0 0 4px; font-family: var(--mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .authorities span { margin: 0 6px; } /* ---------- 12b. Credits d'images -------------------------------------- CC BY et CC BY-SA exigent l'attribution la ou l'image parait. Repliee par defaut : l'obligation est remplie sans que la page se termine sur 24 lignes de mentions legales. */ .credits { background: var(--ink); color: var(--on-dark-2); border-top: 1px solid rgba(242,244,240,.10); } .credits details { padding: 18px 0; } .credits summary { cursor: pointer; list-style: none; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-2); padding: 6px 0; } .credits summary::-webkit-details-marker { display: none; } .credits summary::before { content: "+ "; color: var(--stamp-lift); } .credits details[open] summary::before { content: "\2212 "; } .credits summary:hover { color: #fff; } .credits-note { margin: 14px 0 20px; font-size: 14px; line-height: 23px; max-width: 78ch; } .credits h3 { font-stretch: 87%; font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #DDD; margin: 18px 0 8px; } .credits ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 30px; } .credits li { font-size: 13px; line-height: 21px; } /* 24 liens de credits a 15px de haut : on les met a 25px comme le reste de la page, plutot que d'invoquer l'exception « texte courant » de WCAG 2.5.8. */ .credits a { color: var(--on-dark-2); border-bottom: 1px solid rgba(168,176,184,.3); display: inline-block; padding-block: 5px; } .credits a:hover, .credits a:focus-visible { color: #fff; border-bottom-color: currentColor; } .credits .lic { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--muted-dark); } @media (max-width: 760px) { .credits ul { grid-template-columns: 1fr; } } /* ---------- 13. Footer + barre de cote ---------------------------------- */ /* Aucun sigle ici : le releve ne met aucune barre au pied de page, et c'est la rarete de l'ornement qui le tient. */ .footer { background: var(--ink); color: var(--on-dark-2); padding: 74px 0 60px; } .foot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; } .footer h2 { font-stretch: 75%; font-weight: 700; font-size: 23px; line-height: 29.9px; text-transform: uppercase; color: #DDD; letter-spacing: .03em; margin: 0 0 35px; /* valeur du releve */ } .footer li + li { margin-top: 6px; } .footer a { color: var(--on-dark-2); font-size: 15px; display: inline-block; padding-block: 5px; } .footer a:hover, .footer a:focus-visible { color: #fff; } .disclaim { margin: 24px 0 0; font-size: 15px; line-height: 25px; color: var(--on-dark-2); } .colophon { background: var(--ink-deep); min-height: 62px; display: flex; align-items: center; } .colo-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; width: 100%; } .colophon small { font-size: 13px; color: var(--muted-dark); } .colo-r { display: flex; align-items: center; gap: 18px; } .colophon .src { color: var(--muted-dark); } .colophon a { color: var(--stamp-lift); font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; } /* La section 14 d'origine (« Barre APERCU ») est SUPPRIMEE : c'etait l'outil de validation de la maquette, hors design, et son balisage n'existe pas dans le theme. Les sections suivantes sont renumerotees en continu. */ /* ---------- 14. Adaptatif ------------------------------------------------ */ @media (max-width: 1100px) { .track > *, .track[data-per="3"] > * { flex-basis: calc((100% - 60px) / 3); } .gal { grid-template-columns: repeat(2, 1fr); } .hero h1, .hero .slide-title { font-size: 56px; } } @media (max-width: 900px) { html { scroll-padding-top: 88px; } /* Un seul rang de 76px : la navigation passe en volet, la ligne d'etat du registre et « How we verify » descendent dans ce volet. Sans ca, le rang mesurait 494px de contenu pour 345px utiles et la barre fixe elargissait le document de 149px. */ .head, .head.stuck { height: 76px; } .head-row { height: 76px; flex-basis: 76px; } .head-row .meta { display: none; } .head-tools { flex: 1 1 auto; justify-content: space-between; } .head-tools > a { display: none; } .nav .nav-extra { display: block; } .plate { width: 132px; height: 62px; top: 7px; } .plate b { font-size: 28px; } .head.stuck .plate { width: 108px; height: 40px; top: 18px; } /* Meme specificite que la regle de masquage `.head-tools .nav-toggle`, sinon le bouton reste masque y compris la ou il sert. */ .head-tools .nav-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; background: none; border: 0; cursor: pointer; color: rgba(242,244,240,.85); font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; } .nav { position: absolute; left: 0; right: 0; top: 76px; background: var(--ink); border-top: 1px solid rgba(242,244,240,.12); display: none; } .nav[data-open] { display: block; } .nav ul { flex-direction: column; } .nav a { padding: 15px var(--gut); font-size: 17px; } .head.stuck .nav[data-open] { display: block; } /* `visibility` DOIT etre remis avec `opacity` et `pointer-events` : sans lui la ligne reste `visibility: hidden` (posee plus haut pour l'en-tete retractee du bureau) et le bouton Menu devient INATTEIGNABLE des 140px de defilement — elementFromPoint renvoie le conteneur, pas le bouton. Defaut present a l'identique dans la maquette, mesure sur le site le 19/09/2026. */ .head.stuck .head-row:first-child { opacity: 1; visibility: visible; pointer-events: auto; } .hero { height: auto; min-height: 620px; } .slides { position: relative; } .slide { height: auto; } /* `padding` en raccourci ecrasait le `padding-inline` de .wrap : le texte venait mourir sur le bord de l'ecran. */ .slide-body { grid-template-columns: 1fr; height: auto; padding: 108px var(--gut) 34px; gap: 32px; } /* Fleches et rail reviennent dans le flux : sur un hero de 1 200px, un rail colle en bas absolu se retrouve trois ecrans plus bas que son sujet. */ .hero-arrows { position: static; transform: none; justify-content: center; margin: 0 0 16px; } .rail { position: relative; } .hero h1, .hero .slide-title { font-size: 40px; line-height: 1.02; max-width: none; } .hero .year { font-size: 46px; } .hero-arrows { bottom: 76px; } .chits { grid-template-columns: repeat(3, 1fr); gap: 14px; } .chit b { font-size: 32px; } /* Cibles tactiles : 44px au doigt, au-dela du minimum 24x24 de WCAG 2.5.8 */ .more { --more-pad: 9px; } .sec-link { padding-block: 15px; } .tbl td:first-child a { padding-block: 12px; margin-block: -12px; } .legend { grid-template-columns: repeat(3, 1fr); } .cols { grid-template-columns: 1fr; gap: 54px; } .news { grid-template-columns: 1fr; } .track > *, .track[data-per="3"] > * { flex-basis: calc((100% - 30px) / 2); } .foot-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 30px; } } @media (max-width: 640px) { .legend { grid-template-columns: repeat(2, 1fr); } .band-grid { grid-template-columns: 1fr; gap: 26px; text-align: center; } .band-side.right { text-align: center; justify-items: center; } .band-side { justify-items: center; } .band-side.right .flags { justify-content: center; } .band-100 b { font-size: 76px; } .band-info { gap: 18px; flex-direction: column; align-items: center; } .track > *, .track[data-per="3"] > * { flex-basis: 100%; } .gal { grid-template-columns: 1fr; } .foot-grid { grid-template-columns: 1fr; } .edition-in { grid-template-columns: 1fr; gap: 16px; } .chits { grid-template-columns: 1fr; gap: 16px; } .chit b { font-size: 34px; } /* 24 cibles de 13px jointives se touchent au hasard : le rail devient une piste a defilement, chaque emplacement a 44px, les deux vides compris. */ .rail { height: 62px; } .rail-in { overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .rail-in::-webkit-scrollbar { display: none; } .rail-slot { flex: 0 0 44px; scroll-snap-align: center; } .rail-year { display: none; } .rail-slot[data-decade] .rail-year { display: block; font-size: 10px; } .colo-in { justify-content: center; text-align: center; } .sec-head { gap: 10px; } .sec-nav { margin-left: 0; width: 100%; } } /* ---------- 15. Mouvement reduit ---------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .dark .par, .slide-bg { transform: none !important; } } /* ---------- 16. Impression ---------------------------------------------- */ @media print { .head, .hero-arrows, .sec-nav { display: none; } /* `.preview-bar` retire avec la section 14 */ body { background: #fff; } } /* ========================================================================= =================== FIN DE assets/styles.css ========================== =================== DEBUT DE assets/ouverture-claire.css ============== ------------------------------------------------------------------------- Les deux feuilles de la maquette sont fusionnees ici dans CET ORDRE, qui est le seul valide : la variante « ouverture claire » ne modifie pas la feuille d'origine, elle la surcharge. Inverser les deux blocs rendrait le hero sombre et casserait la nameplate. Les sections de la seconde feuille sont renumerotees a la suite (17 a 24) pour que la numerotation du fichier fusionne reste continue. ========================================================================= */ /* ========================================================================= VARIANTE « OUVERTURE CLAIRE » — worldcup2030guide.com Chargee APRES assets/styles.css, qu'elle ne modifie pas. ------------------------------------------------------------------------- LE PRINCIPE : on renverse. Le hero quitte l'encre pour la feuille, le titre passe en noir sur clair, et la photographie cesse d'etre un fond voile pour devenir une BANDE CONTENUE de cinq vignettes posee sous le titre. Pourquoi : le jeton `--veil: .80` posait 80 % d'encre sur des photos qui mesurent jusqu'a 137 de moyenne. On detruisait la source de lumiere de la page pour pouvoir ecrire dessus. Ici plus rien n'est ecrit sur une photo dans la premiere page-ecran : aucun calque n'est donc necessaire, et les images rendent leur luminance et leur couleur entieres. CE QUI NE BOUGE PAS : la typographie (Archivo + IBM Plex Mono), l'ecusson d'en-tete, et la jauge du registre de faits — trois traits + soulignement, `data-fact` / `data-state`. Le geste signature ne se negocie pas : il est seulement retourne pour un fond clair, par reaffectation des jetons. METHODE : partout ou c'est possible, on ne reecrit pas les regles de la feuille d'origine — on REAFFECTE ses jetons dans la portee concernee. `--on-dark` devient l'encre dans le hero clair, puis redevient la creme a l'interieur de la plaque verte. Les ~40 regles `.hero X { color: var(--on-dark) }` suivent toutes seules, jauge et soulignements compris. ========================================================================= */ /* ---------- 17. Jetons de la variante ------------------------------------- L'accent vert terrain vient de la variante « pitch » deja prevue dans les jetons d'origine (`:root[data-accent="pitch"]`, porte par ) : sur fond clair, le vert lit « football » immediatement la ou le violet lit « institution ». On n'ajoute ici que ce que la feuille d'origine n'a pas. */ :root { /* Encre de nameplate : le noir de la direction, teinte du meme vert. Luminance 21 sur 255 — c'est elle qui tient le bas de la dynamique. Le gain de clarte doit venir du HAUT de l'echelle, pas d'un gris delave. */ --oc-plate: #0D1A13; /* Cremes lisibles sur le vert plein : 6,3:1 et 4,7:1. */ --oc-on-green: #FAFBF8; --oc-on-green-2: #CBDFD2; --oc-on-green-3: #E4F0E9; /* Le meme vert, eclairci pour les traits de jauge poses SUR le vert : 4,3:1, au-dessus du seuil 3:1 des elements graphiques. */ --oc-mark: #9FE0BC; --oc-mark-2: #F0C97A; /* ambre « provisoire », sur vert */ --oc-on-green-4: #BBD4C6; /* l'incertain sur le vert : 4,1:1, en retrait */ /* Ambre lisible sur fond clair — le `--pencil-lift` d'origine est calibre pour l'encre, il devient illisible sur la feuille. */ --oc-pencil: #7A5210; /* Le filet de pliage sous l'en-tete : luminance 165, a mi-chemin entre le pied vert de la plaque (84) et la feuille du hero (250,6). */ --oc-fold: #6DB88C; /* Cotes du hero. Le pied du hero est un SOCLE VERT d'un seul tenant : la bande des legendes et le rail du siecle y sont continus. */ --oc-shot: 144px; /* hauteur des vignettes */ --oc-cap: 26px; /* bande verte des legendes */ --oc-rail: 64px; /* rail du siecle, valeur d'origine */ --oc-top: 250px; /* 239px d'en-tete + 11px de garde */ --oc-aside: 420px; /* colonne des trois chiffres-cles */ --oc-gap: 44px; /* gouttiere entre les deux colonnes */ } /* La barre APERCU etait retiree du balisage de la variante ; la feuille posait ici un filet de securite `.preview-bar { display: none !important }`. La regle est supprimee avec la section 14 : le composant n'existe plus dans le theme. */ /* ---------- 18. En-tete : la nameplate ------------------------------------ L'en-tete d'origine est un voile translucide qui compte sur la photo du hero pour exister. Au-dessus d'une feuille claire il n'y a plus de photo dessous : le voile devient une bouillie grise. On le rend OPAQUE — ce n'est plus un calque pose sur une image, c'est une plaque de titre, comme la manchette d'un quotidien. Elle garde ses 239px et son ecusson au pixel pres. LA COUTURE. Mesure au pixel sur la colonne x=400 : l'en-tete tenait 22,7 de luminance jusqu'a sa derniere ligne, puis la feuille du hero commencait a 250,6. Une marche de 228 points en UN pixel — l'en-tete ne se lisait plus comme la tete de la page mais comme un bandeau rapporte par-dessus. On ne l'eclaircit pas : c'est elle qui tient le bas de la dynamique, et un gris delave est exactement ce que le releve du gabarit interdisait. On lui donne un PIED. Ses derniers 46 % descendent vers le vert de terrain, celui qui porte deja la plaque des trois chiffres et le socle du rail : l'en-tete et le pied du hero se referment sur la meme couleur, et le hero est tenu entre deux verts au lieu d'etre pose sous un bloc noir. Le filet du dernier pixel est la ligne de pliage. Sa valeur n'est pas decorative : posee au milieu de l'ecart restant en luminance, elle coupe la derniere marche en deux. Releve apres, en mediane de rangee — une colonne unique traverserait les glyphes du menu et mentirait : 22,7 -> 84,2 en degrade, 164,9 sur le filet, 250,6 sur la feuille. La plus grande marche d'un pixel au suivant passe de 227,8 a 85,7. */ .head { background: linear-gradient(180deg, var(--oc-plate) 0%, var(--oc-plate) 54%, #0F2318 72%, #163E2B 88%, var(--stamp) 100%); /* En `box-shadow` et non en `border-bottom` : la bordure mangerait 2 px des 239 px de l'en-tete et decalerait l'ecusson. */ box-shadow: inset 0 -2px 0 0 var(--oc-fold); } .head.stuck { background: linear-gradient(180deg, var(--oc-plate) 0%, var(--oc-plate) 42%, #0F2318 66%, #163E2B 86%, var(--stamp) 100%); } .plate { background: rgba(0, 0, 0, .28); } /* ---------- 19. Hero clair ------------------------------------------------ */ .hero { /* 820px : la cote du gabarit de reference, inchangee. */ height: 820px; background: var(--sheet); /* LA REAFFECTATION. Tout le hero croit ecrire sur de l'encre ; on lui dit que « le fond sombre » est maintenant la feuille. */ --on-dark: var(--ink); --on-dark-2: var(--slate); --stamp-lift: var(--stamp); --pencil-lift: var(--oc-pencil); } /* Le hero tient dans ses 820px sans jamais deborder : la vue est une colonne flex — bloc de tete elastique, puis bande photo, puis rail reserve par le padding. C'est la bande photo qui est intouchable, pas le texte. */ .slide { display: flex; flex-direction: column; padding-bottom: var(--oc-rail); } .slide-body { grid-template-columns: minmax(0, 1fr) var(--oc-aside); /* Une seule rangee en `1fr` : la plaque verte remplit toute la hauteur disponible au lieu de se dimensionner sur son contenu. */ grid-template-rows: 1fr; gap: var(--oc-gap); align-content: stretch; /* Jamais le raccourci `padding` : il ecraserait le `padding-inline` de .wrap et le texte viendrait mourir sur le bord de l'ecran. */ padding-top: var(--oc-top); padding-bottom: 12px; height: auto; flex: 1 1 auto; min-height: 0; } /* 3a. Le bloc de tete — c'est ici qu'Archivo se voit enfin. Sur l'encre, un titre de 68px en creme condensee se lit comme un logo ; sur la feuille, la meme lettre redevient de la typographie. Le millesime remonte SUR LA LIGNE du sur-titre au lieu d'occuper un rang a lui seul : cadre sur la ligne de base, il se lit comme le tampon de date d'une piece d'archive, et il rend 40px de hauteur a la bande photo. */ .oc-lede { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; align-content: start; column-gap: 16px; } .oc-lede > * { grid-column: 1 / -1; } .hero .year { grid-column: 1; grid-row: 1; font-size: 40px; line-height: 1; color: var(--stamp); margin-bottom: 14px; } .hero .eyebrow { grid-column: 2; grid-row: 1; margin-bottom: 14px; } .hero h1, .hero .slide-title { font-size: 48px; line-height: .94; color: var(--ink); margin: 6px 0 10px; /* La colonne fait deja la mesure : un `max-width` en ch la cassait en trois. */ max-width: none; } .hero p { font-size: 17px; line-height: 26px; max-width: 50ch; margin-bottom: 12px; } .hero-acts { gap: 20px; } /* L'action principale devient une plaque pleine : sur fond clair, un lien souligne ne fait plus le poids d'un bouton. */ .hero .oc-btn { background: var(--stamp); background-image: none; color: var(--oc-on-green); padding: 11px 20px; font-size: 13px; transition: background-color var(--t-fast) var(--ease); } .hero .oc-btn:hover, .hero .oc-btn:focus-visible { background-color: #175135; /* le meme vert, d'un cran plus fonce */ background-image: none; } .hero-acts .ghost { color: var(--muted); } /* 3b. Les trois chiffres-cles : une plaque verte pleine. Sur l'encre, ils tenaient par le contraste du fond. Sur la feuille, ils tiendraient par rien : on leur rend leur poids en leur donnant un support plutot qu'en grossissant le corps. Les jetons y repassent en clair-sur- sombre, donc la jauge et les soulignements se reteignent tout seuls. */ .oc-figures { --on-dark: var(--oc-on-green); --on-dark-2: var(--oc-on-green-2); --stamp-lift: var(--oc-mark); --pencil-lift: var(--oc-mark-2); background: var(--stamp); align-content: center; gap: 0; padding: 14px 22px; } /* La jauge repasse EN LIGNE avec le chiffre au lieu d'etre empilee dessus : trois traits de 12px de haut ne valent pas 20px de hauteur de plaque. */ .oc-figures .chit { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 11px; align-items: baseline; border-left: 0; padding-left: 0; padding-block: 9px; } .oc-figures .chit + .chit { border-top: 1px solid rgba(250, 251, 248, .22); } .oc-figures .chit .gauge { margin-bottom: 0; align-self: center; } .oc-figures .chit b { font-size: 40px; } .oc-figures .chit .lab, .oc-figures .chit .src { grid-column: 1 / -1; /* Le `line-height: 27px` du corps de page coutait 24px de plaque par chiffre sur trois lignes de mono 11px. */ line-height: 15px; } .oc-figures .chit .lab { margin-top: 7px; } .oc-figures .chit .src { margin-top: 5px; } /* `.val[data-state="unknown"]` est peint en `--muted`, calibre pour la feuille : sur le vert il tombait a 1,2:1, c'est-a-dire invisible. Le tiret du format 2030 doit se LIRE comme incertain, pas disparaitre — un chiffre absent qu'on ne voit pas est un chiffre que le registre aurait l'air de cacher. */ .oc-figures .val[data-state="unknown"], .oc-figures .val[data-state="disputed"] { color: var(--oc-on-green-4); } /* 3c. Fleches du slider — sur la ligne du millesime, calees sur le bord droit de la colonne de gauche : le coin haut-droit du hero appartient desormais a la plaque verte des chiffres. */ .hero-arrows { top: var(--oc-top); bottom: auto; right: max(calc(var(--gut) + var(--oc-aside) + var(--oc-gap)), calc(50% - 555px + var(--oc-aside) + var(--oc-gap))); } .hero .arrow { border-color: var(--rule); color: var(--ink); } .hero .arrow:hover:not(:disabled) { background: var(--stamp); border-color: var(--stamp); color: var(--oc-on-green); } /* ---------- 20. La bande photographique ---------------------------------- Pleine largeur, hauteur reduite, AUCUN calque. Quatre vignettes qui racontent ce que la vue annonce, dans l'ordre de lecture. C'est la planche-contact d'un fonds d'archives — et c'est elle qui apporte la couleur : les quatre vignettes de la vue 1 mesurent 0,37 de saturation moyenne, la ou la meme photo sous le voile a 80 % tombait sous 0,10. */ .oc-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); flex: none; } .oc-frame { margin: 0; min-width: 0; } .oc-frame + .oc-frame { border-left: 1px solid var(--sheet); } .oc-frame img { width: 100%; height: var(--oc-shot); object-fit: cover; background: var(--panel); } /* La legende est posee SOUS la photo, jamais dessus : une photo claire sous un texte clair est le piege classique, et il ne se corrige qu'en assombrissant l'image — c'est-a-dire en refaisant le voile qu'on vient d'enlever. */ .oc-frame figcaption { height: var(--oc-cap); display: flex; align-items: center; padding: 0 12px; background: var(--stamp); color: var(--oc-on-green-3); font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---------- 21. Le socle : legendes + rail du siecle ---------------------- Les deux bandes vertes se touchent et forment un seul socle de 90px sous les photographies. Le rail garde ses 26 emplacements et ses DEUX vides. */ .rail { background: var(--stamp); border-top: 1px solid rgba(250, 251, 248, .20); /* Sur le vert, on repasse en clair-sur-sombre. */ --on-dark-2: var(--oc-on-green-2); --stamp-lift: var(--oc-mark); } .rail-slot a:hover .rail-tick, .rail-slot a:focus-visible .rail-tick { background: #fff; } .rail-slot[data-gap]::after { border-left-color: rgba(250, 251, 248, .70); } /* Le trait et le millesime se chevauchaient de 6px : mesure au pire pixel, le « 2030 » tombait a 1,08:1 contre son propre trait. On degage les deux. */ .rail .rail-tick, .rail-slot[data-gap]::after { margin-bottom: 24px; } .rail .rail-year { line-height: 13px; bottom: 5px; } /* ---------- 22. Les deux PLANCHES PHOTOGRAPHIQUES ------------------------- PREMIERE VERSION, ET POURQUOI ELLE ETAIT FAUSSE. Le lavis creme etait pose a 0,86. Mesure sur la planche SEULE — contenu masque, en-tete fixe masque — l'ecart entre le 1er et le 9e decile de luminance valait 21,4 sur la planche des buteurs et 30,7 sur celle des ratios, pour une saturation de 0,017 dans les deux cas. La photo etait encore dans le fichier, plus dans la page. C'etait l'erreur de la maquette d'origine — qui noyait ses photos sous 80 % d'encre — refaite a l'envers : un voile reste un voile, noir ou blanc. Une photographie creditee qu'on ne distingue plus ne sert a rien, et le corps de la page y perdait sa seule respiration : 2 707 px sans changement de registre, du bas de la bande du centenaire au pied de page. LE PRINCIPE RETENU : on ne peut pas a la fois ECRIRE sur une photo et la REGARDER. Alors on separe les deux. — la planche redevient une photographie, sous un lavis LEGER (0,32) et teinte du vert de terrain, juste assez pour lier deux cliches tres differents (163 et 84 de moyenne) en une meme famille ; — plus aucun texte n'est pose dessus. Tout le contenu monte sur des PLAQUES CREME OPAQUES — la bande de titre, le corps des fiches joueurs, chaque ligne du tableau des ratios, la carte edition. Le contraste ne se mesure plus contre une image : il se mesure contre #FAFBF8. La photo se voit dans les marges, entre les fiches et dans les gouttieres ; les plaques posees dessus se lisent comme des pieces epinglees sur une planche-contact. Le registre reste clair, mais il n'est plus uniforme. */ /* Les deux lavis. Meme teinte — le vert du terrain, desature — a deux niveaux. */ :root { /* A luminance egale, on prend la teinte la PLUS chargee que la page supporte : un lavis gris rend la photo grise. Le premier essai, a 122/158/136, laissait la planche des ratios a 0,13 de saturation pour 0,32 dans le fichier source ; a luminance identique, ces valeurs-ci la remontent a 0,18. */ --oc-wash: 104, 162, 128; /* luminance 147 : pour une photo sombre */ --oc-wash-deep: 38, 96, 66; /* luminance 82 : pour une photo claire */ } .dark.on-dark { --on-dark: var(--ink); --on-dark-2: var(--slate); --stamp-lift: var(--stamp); --pencil-lift: var(--oc-pencil); background: var(--panel); color: var(--slate); } /* `.par` est decale de -12 % et TRANSLATE par la parallaxe (jusqu'a ~100 px) : des arrets de degrade cales sur ses bords ne tomberaient jamais au meme endroit d'un scroll a l'autre. Le lavis porte donc par `.par` reste presque uniforme, et le raccord avec les sections voisines est confie a un calque qui, lui, ne bouge pas (`.dark::after`). */ .dark .par::after { background: linear-gradient(180deg, rgba(var(--oc-wash), .38) 0%, rgba(var(--oc-wash), .32) 50%, rgba(var(--oc-wash), .40) 100%); } /* Un lavis unique sur deux cliches opposes ne les unit pas, il les ecarte. Mesure des fichiers source : la planche des buteurs est une foule en plein jour (163 de moyenne), celle des ratios une pelouse a l'ombre (84). Le meme lavis creme aplatissait la premiere sans la poser, et laissait la seconde filer vers le noir. Chacune recoit donc le lavis qui lui manque — plus sombre qu'elle pour l'une, plus clair qu'elle pour l'autre. Releve final sur les planches seules : 169 et 139 de moyenne, ecart d1-d9 de 157 et 190 (le seuil de la commande est 60), sur la meme teinte de terrain. */ .sec-players .par::after { background: linear-gradient(180deg, rgba(var(--oc-wash-deep), .38) 0%, rgba(var(--oc-wash-deep), .32) 50%, rgba(var(--oc-wash-deep), .40) 100%); } /* Le raccord. Sans lui, la planche commence net sur la feuille et la section se lit comme une image collee. La creme s'y eteint sur 92 px — et vers la couleur EXACTE de la section voisine, sinon le fondu laisse une marche. */ .dark::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; } /* `.dark > .wrap` est `position: relative` sans z-index : sans ce cran, le calque de raccord, genere en dernier, se peindrait PAR-DESSUS les fiches. */ .dark > .wrap { z-index: 2; } .sec-players::after { background: linear-gradient(180deg, var(--panel) 0, rgba(237, 239, 233, 0) 92px), linear-gradient(0deg, var(--sheet) 0, rgba(250, 251, 248, 0) 92px); } .sec-ratio::after { background: linear-gradient(180deg, var(--sheet) 0, rgba(250, 251, 248, 0) 92px), linear-gradient(0deg, var(--sheet) 0, rgba(250, 251, 248, 0) 92px); } /* La planche a besoin d'air pour EXISTER : sans marge, elle ne parait qu'en gouttieres et redevient une texture. */ .sec-players, .sec-ratio { padding: 96px 0; } /* 6a. Les plaques creme. Ce sont elles qui portent le texte, et elles seules. */ .dark .sec-head { background: var(--sheet); align-items: center; padding: 12px 18px; margin-bottom: 26px; } .dark .pcard { background: var(--sheet); } .dark .pcard-b { padding: 14px 15px 17px; } .dark .rrow { background: var(--sheet); padding: 13px 16px; } /* La carte « edition mise en avant » : plaque pleinement opaque. Et le ratio 16:9 saute. Impose, il fixait une hauteur que le contenu ne respecte pas : mesure, le contenu debordait de la carte de 2 px a 1440, de 5 px a 768, de 73 px a 1024, de 461 px a 414 et de 537 px a 375 — le texte sortait par le bas du cadre. Hauteur rendue au contenu, le debordement est nul a TOUTES les largeurs relevees, et la carte passe de 384 a 412 px a 1440 : le ratio ne decrivait pas la carte, il la coupait. */ .edition { background: var(--sheet); border-color: var(--rule); aspect-ratio: auto; } .edition-rail i { background: rgba(22, 26, 32, .20); } .edition-rail i.gap { background: none; border-left-color: rgba(22, 26, 32, .32); } .on-dark .arrow { border-color: var(--rule); color: var(--ink); } .on-dark .arrow:hover:not(:disabled) { background: var(--stamp); border-color: var(--stamp); color: var(--oc-on-green); } .pcard img, .rrow img { background: var(--panel); } /* ---------- 23. Adaptatif -------------------------------------------------- */ @media (max-width: 1240px) { :root { --oc-aside: 360px; --oc-gap: 32px; } .oc-frame figcaption { font-size: 9px; letter-spacing: .06em; padding: 0 8px; } } @media (max-width: 1100px) { .hero h1, .hero .slide-title { font-size: 46px; } :root { --oc-shot: 132px; } } @media (max-width: 900px) { /* L'en-tete tombe a 76px : le hero reprend sa respiration et redevient de hauteur libre. La bande photo passe a deux colonnes plutot que de reduire cinq vignettes a des timbres-poste. */ :root { --oc-top: 104px; --oc-shot: 148px; --oc-cap: 24px; } .hero { height: auto; min-height: 0; } .slide { padding-bottom: 0; } .slide-body { grid-template-columns: 1fr; padding-top: var(--oc-top); padding-bottom: 28px; gap: 26px; } .hero .year { font-size: 38px; } .hero h1, .hero .slide-title { font-size: 38px; line-height: 1.02; max-width: none; } .oc-figures { margin-top: 0; padding: 14px 18px; } .oc-figures .chit b { font-size: 32px; } /* Les fleches reviennent dans le flux, comme dans la feuille d'origine. */ .hero-arrows { position: static; justify-content: center; margin: 0 0 14px; } .oc-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Sur deux colonnes, « Estadio Centenario · Montevideo » ne tient plus sur une ligne : la legende passe a la ligne plutot que de perdre son lieu dans des points de suspension. Le hero est de hauteur libre ici, il peut l'absorber. */ .oc-frame figcaption { height: auto; min-height: var(--oc-cap); white-space: normal; line-height: 13px; padding: 6px 10px; } .oc-frame:nth-child(odd) { border-left: 0; } .oc-frame:nth-child(n + 3) { border-top: 1px solid var(--sheet); } } @media (max-width: 640px) { :root { --oc-shot: 128px; } .oc-figures .chit b { font-size: 30px; } .oc-frame figcaption { font-size: 9px; } } /* ---------- 24. Mouvement reduit ------------------------------------------ Rien a ajouter : la variante ne cree aucun mouvement. Elle en retire meme un, la parallaxe du hero, puisqu'il n'y a plus de plan photographique a decaler. */ /* ---------- 25. WordPress ------------------------------------------------ Tout ce qui n'existait pas dans la maquette parce que la maquette n'etait pas servie par WordPress. Rien ici ne modifie une regle des sections 1 a 24. ------------------------------------------------------------------------- */ /* 25a. Remise a zero des marges de blocs du coeur DANS nos sections dessinees. Le coeur emet `.is-layout-flow > * + * { margin-block-start: 24px }` et des marges par bloc. Notre rythme vertical est dessine section par section (c'est le `margin: 1em` du navigateur qui portait la bande du centenaire a 540px) : il faut donc neutraliser le rythme du coeur la ou nous dessinons le notre, et seulement la. La prose des articles, elle, GARDE le rythme du coeur. */ .head, .hero, .band, .sec-players, .sheet, .sec-ratio, .prov, .footer, .credits, .colophon { margin-block: 0; } .head :where(.wp-block-group, .wp-block-html) > * + *, .hero :where(.wp-block-group, .wp-block-html) > * + *, .band :where(.wp-block-group, .wp-block-html) > * + *, .sec-players :where(.wp-block-group, .wp-block-html) > * + *, .sheet :where(.wp-block-group, .wp-block-html) > * + *, .sec-ratio :where(.wp-block-group, .wp-block-html) > * + *, .prov :where(.wp-block-group, .wp-block-html) > * + *, .footer :where(.wp-block-group, .wp-block-html) > * + *, .credits :where(.wp-block-group, .wp-block-html) > * + * { margin-block-start: 0; } /* Le conteneur de gabarit du coeur ne doit ni centrer ni marger nos sections : la mise en page `constrained` centre les enfants etroits et casse les `max-width` dessines a la main. Nos gabarits posent `layout: default`, cette regle est la ceinture qui va avec les bretelles. */ .wp-site-blocks > * { margin-block: 0; } .wp-site-blocks main.wp-block-group { margin-block: 0; } /* 25b. Cible interne pas encore publiee. Regle du contrat §2.3 : aucun lien interne mort. Une page non publiee rend un au lieu d'un . Le style doit etre LISIBLEMENT PLUS FAIBLE qu'un lien et ne jamais emprunter la couleur d'accent : l'accent dit « verifie », il ne peut pas dire « n'existe pas encore ». */ .is-pending { color: var(--muted); border-bottom: 1px dotted currentColor; cursor: default; text-decoration: none; } .on-dark .is-pending, .hero .is-pending, .footer .is-pending, .head .is-pending { color: var(--on-dark-2); } /* Une carte entiere en attente : elle reste lisible, elle n'est simplement pas cliquable. Pas de soulignement pointille sur un bloc — il ferait un trait en travers de la carte. */ .pcard.is-pending, .ncard .is-pending, figure .is-pending, .banner.is-pending, .rail-slot .is-pending, .tbl .is-pending { border-bottom: 0; } /* `.banner` est un `display: flex` : le remettre en `block` ici casserait la mise en page de ses deux enfants (libelle a gauche, fleche poussee a droite par `margin-left: auto`). Il herite donc du flex et n'est PAS dans la liste. */ .pcard.is-pending, figure > .is-pending { display: block; } /* Meme cible de 25px que le lien qu'il remplace, pour que la ligne du tableau ne change pas de hauteur selon qu'une fiche est publiee ou non. */ .tbl td:first-child .is-pending { color: var(--muted); display: inline-block; padding-block: 6px; margin-block: -6px; } /* Le rail : un cran non publie garde son trait, en plus pale. L'emplacement VIDE (1942, 1946) reste distinct — c'est le seul endroit de la page ou une absence est dessinee, et « pas encore ecrit » n'est pas « n'a pas eu lieu ». Le reprend la boite du qu'il remplace : sans ces trois lignes le trait cesse d'etre aligne sur le bas du rail et la frise ondule. */ .rail-slot > .is-pending { display: flex; width: 100%; height: 100%; position: relative; align-items: flex-end; justify-content: center; border-bottom: 0; } .rail-slot > .is-pending .rail-tick { opacity: .45; } /* 25c. Pont vers l'extension `wc2030-facts`. Le shortcode [wc_fact] rend son propre balisage (.wc-fact / data-status) ; on l'habille dans la maison SANS toucher a l'extension. Meme LISTE BLANCHE DE LA CERTITUDE que `.val` : un statut inconnu ne recoit pas la marque de verification, il se peint en creux. */ .wc-fact { white-space: normal; font-variant-numeric: tabular-nums; } .wc-fact__value { padding-bottom: 2px; } .wc-fact[data-status="ratified"] .wc-fact__value, .wc-fact[data-status="announced"] .wc-fact__value, .wc-fact[data-status="announced_by_confederation"] .wc-fact__value { box-shadow: inset 0 -2px 0 0 var(--stamp); } .wc-fact[data-status="derived"] .wc-fact__value, .wc-fact[data-status="reported"] .wc-fact__value, .wc-fact[data-status="projected"] .wc-fact__value { background-image: linear-gradient(90deg, var(--pencil) 0 4px, transparent 4px 8px); background-size: 8px 2px; background-repeat: repeat-x; background-position: 0 100%; } .wc-fact__badge { display: inline-block; margin-left: .4em; padding: 0 .5em; border: 1px solid var(--rule); border-radius: 0; font-family: var(--mono); font-size: .68em; line-height: 1.8; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); vertical-align: baseline; opacity: 1; } .wc-fact__badge--projected, .wc-fact__badge--unknown { font-style: normal; color: var(--pencil); } .wc-fact__src, .wc-fact__owner { font-family: var(--mono); font-size: .78em; letter-spacing: .08em; text-transform: uppercase; } .wc-fact__src { color: var(--muted); } /* Le marqueur d'absence reste VISIBLE et laid : un fait manquant qui ne rend rien casse la phrase en silence et personne ne le voit passer. */ .wc-fact--missing, .wc-fact--empty { background: var(--pencil); color: var(--sheet); padding: 0 .3em; font-weight: 700; } .on-dark .wc-fact[data-status="ratified"] .wc-fact__value, .on-dark .wc-fact[data-status="announced"] .wc-fact__value, .on-dark .wc-fact[data-status="announced_by_confederation"] .wc-fact__value { box-shadow: inset 0 -2px 0 0 var(--stamp-lift); } .on-dark .wc-fact__badge, .on-dark .wc-fact__src { color: var(--on-dark-2); border-color: rgba(242,244,240,.28); } /* 25d. La prose des articles. Ici, et seulement ici, le rythme du coeur est conserve : le contenu est ecrit en blocs Gutenberg et doit respirer comme tel. */ .prose { max-width: 42em; } .prose > * + * { margin-block-start: 26px; } .prose p { line-height: 30px; } .prose a { border-bottom: 1px solid currentColor; } .prose a:hover, .prose a:focus-visible { background: var(--panel); } .prose :where(h2, h3, h4) { color: var(--ink); letter-spacing: .01em; } .prose h2 { font-stretch: 75%; font-weight: 700; font-size: 26px; line-height: 31px; text-transform: uppercase; margin-block-start: 52px; padding-left: 22px; position: relative; } /* Les deux barres du geste signature, a l'echelle de la prose. */ .prose h2::before { content: ""; position: absolute; left: 0; top: 4px; 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; } .prose h3 { font-stretch: 87%; font-size: 20px; line-height: 26px; margin-block-start: 38px; } .prose ul, .prose ol { padding-left: 22px; } .prose ul { list-style: disc; } .prose ol { list-style: decimal; } .prose li { margin-block-start: 10px; } .prose li::marker { color: var(--stamp); } .prose blockquote { margin-inline: 0; padding: 4px 0 4px 20px; box-shadow: inset 3px 0 0 0 var(--stamp); color: var(--ink); } .prose strong { color: var(--ink); font-weight: 700; } /* Tableau d'article : meme vocabulaire que `.tbl`, mais il doit pouvoir defiler plutot que deborder sur telephone. */ .prose .wp-block-table { margin-inline: 0; overflow-x: auto; } .prose .wp-block-table table { width: 100%; min-width: 30em; border-collapse: collapse; font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; } .prose .wp-block-table th { font-weight: 400; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-align: left; padding: 0 12px 10px 0; border-bottom: 1px solid var(--rule); vertical-align: bottom; } .prose .wp-block-table td { padding: 9px 12px 9px 0; border-bottom: 1px solid rgba(217,221,212,.75); color: var(--ink); vertical-align: top; } .prose .wp-block-table tr:last-child td { border-bottom: 0; } .prose figcaption, .prose .wp-element-caption { margin-top: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); line-height: 18px; } .prose img, .prose .wp-block-image img { width: 100%; height: auto; } /* 25e. Colonne de prose : alignements du coeur. */ .prose .alignwide { max-width: min(100%, 52em); margin-inline: auto; } .prose .alignfull { max-width: none; } .prose .alignleft { float: left; margin: 6px 24px 18px 0; max-width: 45%; } .prose .alignright { float: right; margin: 6px 0 18px 24px; max-width: 45%; } .prose .aligncenter { margin-inline: auto; } /* 25f. Barre d'administration. L'en-tete est `position: fixed` : sans ce decalage elle passe SOUS la barre d'admin et l'editeur perd ses commandes. La barre fait 32px, puis 46px sous 783px — les deux paliers de WordPress, pas une valeur inventee. */ body.admin-bar .head { top: 32px; } body.admin-bar { --wc2030-adminbar: 32px; } @media screen and (max-width: 782px) { body.admin-bar .head { top: 46px; } body.admin-bar { --wc2030-adminbar: 46px; } } /* 25g. Un seul lien d'evitement. WordPress injecte le sien (`#wp-skip-link`) sur les themes a blocs. On le neutralise cote PHP ; si la version de WordPress ne le permet pas, on l'habille comme le notre plutot que d'en afficher deux. */ #wp-skip-link { position: fixed; left: 12px; top: -60px; z-index: 200; width: auto; height: auto; clip: auto; clip-path: none; margin: 0; background: var(--stamp); color: #fff; padding: 12px 20px; font-stretch: 87%; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; transition: top var(--t-fast) var(--ease); } #wp-skip-link:focus { top: 12px; } /* 25h. Index des news et archives — le gabarit reutilise `.ncard`, il ne lui faut qu'une grille et une pagination. */ .archive-head { margin: 0 var(--gut) 35px; } .pagination { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 46px var(--gut) 0; font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; } .pagination .page-numbers { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding-inline: 12px; border: 1px solid var(--rule); color: var(--ink); } .pagination .page-numbers.current { background: var(--stamp); border-color: var(--stamp); color: #fff; } .pagination .page-numbers:hover:not(.current) { border-color: var(--stamp); color: var(--stamp); } /* 25i. Etat vide — jamais une page blanche muette. */ .empty-state { margin: 0 var(--gut); color: var(--muted); } /* 25j. Complements du portage --------------------------------------------- Ajouts append-only : ce bloc ne modifie aucune regle ci-dessus, il ferme les trous que 25a-25i laissaient ouverts. Chaque groupe dit pourquoi il existe. ------------------------------------------------------------------------- */ /* 25j-1. Le reset des gouttieres du coeur, complete et borne. (i) `.colophon` figurait dans la liste des sections a marge nulle de 25a mais pas dans celle des gouttieres ; (ii) les classes de mise en page du coeur arrivent aussi sur des elements qui ne portent pas `wp-block-group` (un `
`, un `
` de gabarit) ; (iii) SURTOUT : un gabarit d'article pose tres probablement sa colonne de lecture DANS une `
`, qui est la feuille de contenu de la maquette. `.sheet .wp-block-group > * + *` de 25a mettrait alors a zero le rythme de la prose — exactement ce qu'il ne faut pas, la prose etant le seul endroit ou le rythme du coeur est garde. Les resets s'arretent donc a la porte de `.prose`, et la gouttiere de 25d (26px) lui est rendue explicitement. Si 25d change cette valeur, changer celle-ci avec elle. */ .colophon :where(.wp-block-group, .wp-block-html) > * + * { margin-block-start: 0; } :is(.head, .hero, .band, .sec-players, .sheet, .sec-ratio, .prov, .footer, .credits, .colophon) :is(.is-layout-flow, .is-layout-constrained):not(.prose) > * + * { margin-block-start: 0; } :is(.head, .hero, .band, .sec-players, .sheet, .sec-ratio, .prov, .footer, .credits, .colophon) .prose > * + * { margin-block-start: 26px; } /* 25j-2. `.wc-fact` : le DEFAUT de la liste blanche. 25c peint bien les six statuts connus, mais rien ne dit ce que devient un statut que ce CSS ne connait pas — `disputed`, `unknown`, un attribut vide, ou celui que l'extension ajoutera demain. Sans cette regle il heriterait de la couleur du texte courant et se lirait comme un fait ordinaire. La chaine de `:not()` est la traduction litterale de la liste blanche de la section 4c : tout ce qui n'y figure pas se peint en creux gris, jamais avec la marque de verification. Ne jamais inverser en liste noire. */ .wc-fact:not([data-status="ratified"]):not([data-status="announced"]):not([data-status="announced_by_confederation"]):not([data-status="derived"]):not([data-status="reported"]):not([data-status="projected"]) .wc-fact__value { color: var(--muted); box-shadow: none; background-image: none; } /* Meme raisonnement pour la pastille : `unknown` et `disputed` sont des etats d'incertitude, pas des annotations provisoires. Le crayon (--pencil) dit « chiffre derive ou projete » ; il ne peut pas dire « on ne sait pas ». */ .wc-fact__badge--unknown, .wc-fact__badge--disputed { color: var(--muted); } /* Le proprietaire de la donnee se lit comme sa source : discret, monospace. */ .wc-fact__owner { color: var(--muted); } .wc-fact__src:hover, .wc-fact__owner:hover, .wc-fact__src:focus-visible, .wc-fact__owner:focus-visible { color: var(--stamp); } .on-dark .wc-fact__owner, .hero .wc-fact__owner { color: var(--on-dark-2); } .on-dark .wc-fact__src:hover, .on-dark .wc-fact__owner:hover { color: var(--stamp-lift); } /* 25j-3. Second chemin pour le meme habillage. Le contrat §6.7 donne `data-status` sur `.wc-fact` ET une classe modificatrice sur la pastille. Si une version de l'extension n'emettait QUE la classe, les regles de 25c resteraient muettes. `:has()` rattrape ce cas. Regles SEPAREES a dessein : un moteur qui ignore `:has()` jette la regle entiere, et on ne veut pas qu'il emporte l'habillage principal avec elle. */ .wc-fact:has(.wc-fact__badge--ratified) .wc-fact__value, .wc-fact:has(.wc-fact__badge--announced) .wc-fact__value, .wc-fact:has(.wc-fact__badge--announced_by_confederation) .wc-fact__value { color: inherit; box-shadow: inset 0 -2px 0 0 var(--stamp); } .wc-fact:has(.wc-fact__badge--derived) .wc-fact__value, .wc-fact:has(.wc-fact__badge--reported) .wc-fact__value, .wc-fact:has(.wc-fact__badge--projected) .wc-fact__value { color: inherit; background-image: linear-gradient(90deg, var(--pencil) 0 4px, transparent 4px 8px); background-size: 8px 2px; background-repeat: repeat-x; background-position: 0 100%; } .on-dark .wc-fact:has(.wc-fact__badge--ratified) .wc-fact__value, .on-dark .wc-fact:has(.wc-fact__badge--announced) .wc-fact__value, .on-dark .wc-fact:has(.wc-fact__badge--announced_by_confederation) .wc-fact__value { box-shadow: inset 0 -2px 0 0 var(--stamp-lift); } /* 25j-4. Ce qui, dans la prose, peut encore deborder a 320px. 25d pose `overflow-x: auto` sur `.wp-block-table` : la piste existe. Mais un element de flux recoit `min-width: auto` des qu'un ancetre est une grille ou un flex, et refuse alors de descendre sous son min-content — c'est exactement ce qui portait `.band` a 330px a 320 (voir la correction en section 7). On ferme la meme porte ici, et on traite les deux autres blocs du coeur capables de deborder : le code et le preformate. */ .prose .wp-block-table { min-width: 0; max-width: 100%; -webkit-overflow-scrolling: touch; } .prose .wp-block-code, .prose .wp-block-preformatted, .prose pre { min-width: 0; max-width: 100%; overflow-x: auto; font-family: var(--mono); font-size: 13px; line-height: 22px; background: var(--panel); padding: 16px 18px; } .prose code { font-family: var(--mono); font-size: .88em; background: var(--panel); padding: 1px 5px; } .prose pre code { background: none; padding: 0; font-size: inherit; } .prose .wp-block-embed__wrapper, .prose iframe { max-width: 100%; } /* 25j-5. Le lien d'evitement sous la barre d'administration. `.skip:focus` se pose a 12px du haut : connecte, il atterrit derriere la barre de WordPress et la premiere tabulation de la page devient invisible. Le jeton `--wc2030-adminbar` vient de 25f et vaut deja 32px puis 46px. */ body.admin-bar .skip:focus { top: calc(12px + var(--wc2030-adminbar, 32px)); } /* 25j-6. Alignements de la colonne de prose, bornes. `.alignwide` et `.alignfull` doivent elargir la colonne SANS jamais sortir du `.wrap`. On ne les calcule donc pas en `100vw` : `100vw` inclut la barre de defilement et rouvrirait le debordement horizontal ferme en section 7. Le debordement symetrique n'est autorise qu'au-dela de 1200px, ou la place existe vraiment ; en dessous les deux classes valent la largeur de lecture et ne peuvent rien casser. `--prose-measure` fige en PIXELS la mesure de 25d (42em a 16px = 672px) : un `em` dans le `calc()` se resoudrait contre la police de l'ENFANT aligne — un h2 a 26px donnerait 42em = 1092px — et non contre celle de la colonne. */ .prose { --prose-measure: 672px; } @media (min-width: 1200px) { .prose > .alignwide, .prose > .alignfull { width: calc(var(--wrap) - 2 * var(--gut)); max-width: none; margin-inline: calc((var(--prose-measure) - (var(--wrap) - 2 * var(--gut))) / 2); } } /* ---------- 26. La cible en attente reprend la BOITE du lien qu'elle remplace ------------------------------------------------------------------------- DEFAUT TROUVE APRES LE PREMIER DEPLOIEMENT, et qui ne se voyait sur aucune mesure : toutes les cotes, tous les comptages et toutes les luminances etaient justes, mais la navigation etait illisible. Cause : la maquette style l'ELEMENT `a` (`.nav a`, `.footer a`, `.tbl td:first-child a`…), pas une classe. Quand une page n'est pas publiee, `wc2030_maybe_link()` rend un `` — qui n'est pas un `a`, et qui perdait donc d'un coup le `display: block`, le padding, les capitales et le `white-space: nowrap`. Huit entrees de menu sur neuf se sont retrouvees collees les unes aux autres, en bas de casse, sur deux lignes. La regle : `.is-pending` herite de la GEOMETRIE du lien, jamais de sa COULEUR. La geometrie est la mise en page ; la couleur est la promesse. Il faut que la page se lise normalement, et qu'on voie du premier coup d'oeil ce qui n'existe pas encore. Le jour ou tout le socle sera publie, plus aucun `.is-pending` ne sera emis et cette section deviendra inerte d'elle-meme. Ne pas la supprimer pour autant : elle redeviendra utile a la moindre page depubliee. ------------------------------------------------------------------------- */ /* 26a. Navigation principale. */ .nav .is-pending { display: block; padding: 20px clamp(10px, 1.85vw, 28px); white-space: nowrap; font-stretch: 87%; font-weight: 700; font-size: 16px; letter-spacing: .08em; text-transform: uppercase; /* .45 mesurait 3,05:1 contre le pixel le plus clair du degrade de l'en-tete (26,79,54) — sous le seuil. .68 donne 4,90:1, et reste nettement en retrait du lien actif (.86, soit 6,76:1) : la hierarchie tient, la lisibilite aussi. Mesure au pire pixel, pas au calque. */ color: rgba(242, 244, 240, .68); border-bottom: 0; } /* Le repere « pas encore publie » est un trait interrompu SOUS le libelle. Il est dessine dans un `::after` plutot qu'en `border-bottom` : une bordure se colle au bas de la boite de 20px de padding, loin du texte, et se lirait comme un filet de separation du menu, pas comme une annotation du libelle. */ .nav .is-pending::after { content: ""; display: block; height: 2px; margin-top: 6px; background-image: linear-gradient(90deg, currentColor 0 4px, transparent 4px 8px); background-size: 8px 2px; background-repeat: repeat-x; opacity: .55; } /* 26b. Outils de l'en-tete (« How we verify »). */ .head-tools .is-pending { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(242, 244, 240, .68); /* meme mesure que 26a */ } /* 26c. Tableau all-time : meme boite, meme cible de 25px. */ .tbl td:first-child .is-pending { font-family: var(--display); font-stretch: 87%; font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .02em; } /* 26d. Cartes d'archive : le titre garde sa graisse, la carte cesse d'etre cliquable (le lien etendu `::after` n'existe que sur `a`, donc rien a neutraliser). */ .ncard h3 .is-pending { color: var(--muted); } /* 26e. Tableau des ratios, sur fond sombre. */ .rrow h3 .is-pending { color: var(--on-dark-2); display: inline-block; padding-block: 3px; } /* 26f. Vignettes de stades : la legende reste lisible, l'image reste en place. */ .track .is-pending figcaption, .gal .is-pending figcaption { color: var(--muted); } .track .is-pending, .gal .is-pending { border-bottom: 0; } /* 26g. Bande de provenance. */ .prov .claim .is-pending { color: var(--muted); border-bottom: 0; } /* 26h. Pied de page : meme cible de 25px que les liens voisins. */ .footer .is-pending { font-size: 15px; display: inline-block; padding-block: 5px; color: var(--pending-dark); } /* 26i. Barre de cote. */ .colophon .is-pending { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--pending-dark); } /* 26j. Volet mobile : le menu passe en colonne, la cible grandit. Le palier est 900px — celui des regles `.nav a` et `.tbl td:first-child a` d'origine, releve dans la feuille et non suppose. `.head-tools > a` y est masque : son equivalent en attente doit l'etre aussi, sinon le libelle « How we verify » reapparait sur mobile la ou le lien avait disparu. */ @media (max-width: 900px) { .nav .is-pending { padding: 15px var(--gut); font-size: 17px; } .nav .is-pending::after { max-width: 120px; } .head-tools > .is-pending { display: none; } .tbl td:first-child .is-pending { padding-block: 12px; margin-block: -12px; } } /* 26k. L'action principale du hero, quand sa page n'existe pas encore. ------------------------------------------------------------------------- Deux choses a corriger d'un coup. (1) La couleur etait illisible. `.hero .is-pending` (0,2,0) bat `.hero .oc-btn` (0,2,0) par l'ordre du fichier, et resout `--on-dark-2` — que la section 19 REMAPPE sur `--slate` a l'interieur du hero clair. Le libelle sortait donc en gris de texte courant (#4A5058) sur la plaque verte (#1F6A46) : 1,9:1, illisible. Mesure, pas impression. (2) Meme lisible, une plaque PLEINE qui ne clique pas est un mensonge : elle a exactement l'aspect de l'action principale. On la rend en contour — meme position, meme poids typographique, meme cote — ce qui dit « l'action existe, sa page pas encore » sans promettre un clic. Le contour n'ajoute aucune hauteur (`inset` box-shadow), la premiere page-ecran ne bouge pas d'un pixel. Contraste mesure : #1F6A46 sur #FAFBF8 = 6,3:1 pour le texte et le contour. */ .hero .oc-btn.is-pending { background: none; color: var(--stamp); box-shadow: inset 0 0 0 2px var(--stamp); } .hero .oc-btn.is-pending::after { content: none; } /* Le lien secondaire garde sa discretion, mais pas au point de disparaitre : `--slate` sur la feuille vaut 7,9:1, c'est le texte courant. Il reste distingue du lien actif par le seul trait interrompu. */ .hero .ghost.is-pending { color: var(--slate); } /* 26l. La recherche : deux emplacements, un seul visible a la fois. ------------------------------------------------------------------------- La maquette n'avait qu'une icone : un bouton sans formulaire, donc une commande annoncee « Search the archive » qui ne faisait rien. DEUX VERSIONS ECARTEES AVANT CELLE-CI, et les deux echecs valent d'etre ecrits, parce qu'ils ne se voyaient pas sur le meme controle : (1) un champ de largeur 0 s'ouvrant au survol — elegant, inutilisable : au doigt comme a la souris on ne pouvait viser que l'icone, et cliquer l'icone envoyait une recherche VIDE. Seul le clavier y arrivait. (2) un champ toujours ouvert dans la barre d'outils — correct au bureau, mais a 375px il CHEVAUCHAIT la plaque centrale, qui est en position absolue et ne participe donc pas au calcul de place. Visible seulement a l'oeil, sur une capture : aucune mesure de contraste, de debordement ou de comptage ne l'aurait signale. D'ou la forme retenue : la barre d'outils au bureau (elle survit a l'en-tete retractee), le volet mobile sous 900px (il a toute la largeur). L'exemplaire inactif est en `display: none`, donc hors de l'arbre d'accessibilite : jamais deux points de reperage « search » a la fois. */ .head-search { display: flex; align-items: center; gap: 4px; } .head-search input { border: 0; border-bottom: 1px solid rgba(242, 244, 240, .35); outline: 0; background: transparent; color: var(--on-dark); font-family: var(--mono); font-size: 12px; letter-spacing: .08em; transition: border-color var(--t-fast) var(--ease); } .head-search input:focus { border-bottom-color: var(--stamp-lift); } .head-search input::placeholder { color: rgba(242, 244, 240, .58); } .head-search button { background: none; border: 0; cursor: pointer; padding: 0; display: grid; place-items: center; width: 44px; height: 44px; flex: none; } .head-search button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; } /* Bureau : dans la barre d'outils. */ .head-search--tools input { width: 132px; padding: 6px 10px; } .head-search--drawer { display: none; } @media (max-width: 900px) { /* Mobile : dans le volet, pleine largeur, sous la derniere entree du menu. */ .head-search--tools { display: none; } .head-search--drawer { display: flex; gap: 0; padding: 12px var(--gut) 16px; border-top: 1px solid rgba(242, 244, 240, .12); } .head-search--drawer input { flex: 1 1 auto; min-width: 0; padding: 12px 4px; font-size: 14px; } }