/* ============================================================ ERP+ : Coquille chrome-marketing (V1.3) Feuille de coquille de la vitrine publique (home, refonte #362, refs #364). Porte les recettes de la coquille marketing (topnav, hero marine, sections, cadres de capture, mirror-row, engagements, footer) PAR-DESSUS le trio canonique erp-tokens.css / erp-typography.css / erp-components.css. Doctrine (SKILL) : aucune couleur en dur. Toute couleur passe par var(--erp-*) ou color-mix(... var(--erp-*) ...). Tout espacement par var(--sp-*), toute police par var(--erp-font-*), tout rayon par var(--radius-*) ou 50%. Aucun gradient, aucune ombre hors --shadow-1/2 et :focus-visible. Recettes portees verbatim (regle visuelle) du kit docs/design/system-v1.3/system/system.css, re-exprimees en tokens (les rgba litteraux du kit deviennent color-mix). ============================================================ */ /* ------------------------------------------------------------ 0. Base de coquille ------------------------------------------------------------ */ .chrome-marketing { /* Variable de mise en page locale (pas un token de marque) : hauteur de la topnav, partagee par .topnav__inner et le calcul de hauteur du hero. */ --topnav-h: 68px; margin: 0; min-height: 100vh; display: flex; flex-direction: column; } /* box-sizing: border-box pose au socle (erp-components.css, DA16). */ .chrome-marketing__body { flex: 1; } .erp-container { max-width: 1180px; margin: 0 auto; padding-inline: var(--sp-8); } @media (max-width: 760px) { .erp-container { padding-inline: var(--sp-5); } } /* Largeur explicite du conteneur dans les sections en colonne (#495). Une section flex en colonne place son conteneur sur l'axe transverse, ou la marge auto de .erp-container neutralise l'etirement : le conteneur est alors dimensionne par son contenu au lieu d'etre plafonne. Le defaut reste invisible tant qu'un texte long sans largeur maximale pousse la boite jusqu'au plafond, et se declare des qu'une refonte borne ce texte. La section Tarifs l'a paye : son conteneur s'est referme a 808 px quand la grille de cartes a cede la place a un objet dont tous les textes sont bornes. Epreuve de latence a l'appui, la largeur rendue seule ne separant pas un conteneur etire d'un conteneur large par son contenu : contenu borne a 200 px, ces conteneurs se referment a 328 et 560 px, alors que ceux qui portent deja cette declaration tiennent leur plafond. La declaration est preventive : elle supprime la classe de defaut au lieu d'en traiter les symptomes, et son effet mesure est nul, sauf sur le conteneur du comparatif ou il vaut trois dixiemes de pixel CSS, soit moins d'un pixel physique au facteur d'echelle le plus eleve de la matrice de controle. Un ecart inferieur au pixel physique n'est pas un changement de forme, et laisser une section porter le defaut pour cet ecart serait un mauvais echange. .hero-marine, .hero-cream et .tarifs portent la meme declaration a leur place respective. La cible du comparatif est #comparatif et non .fold-comparatif : c'est la section interne qui parente le conteneur, l'enveloppe exterieure ne contenant que des bandes. */ #etapes > .erp-container, .avantages > .erp-container, .api-teaser > .erp-container, #comparatif > .erp-container { width: 100%; } /* Lien d'evitement : visible uniquement au focus clavier. */ .skip-link { position: absolute; left: var(--sp-4); top: -64px; z-index: 80; background: var(--erp-marine); color: var(--erp-fg-on-marine); font-family: var(--erp-font-sans); font-weight: 600; font-size: 14px; padding: 10px 16px; border-radius: var(--radius-1); text-decoration: none; transition: top 120ms ease; } .skip-link:focus { top: var(--sp-4); } /* ------------------------------------------------------------ 1. Logo wordmark (typographique, tokenise) ------------------------------------------------------------ */ .erp-logo { font-family: var(--erp-font-serif); font-weight: 500; font-size: 22px; letter-spacing: -0.01em; color: var(--erp-marine); line-height: 1; display: inline-flex; align-items: baseline; text-decoration: none; } .erp-logo .erp-logo__plus { color: var(--erp-terracotta); font-style: italic; padding-left: 1px; } .erp-logo--marine { color: var(--erp-fg-on-marine); } .erp-logo--marine .erp-logo__plus { color: var(--erp-terracotta-lt); } .erp-logo--lg { font-size: 30px; } /* Icone de masque/trait (burger) : trait pilote par currentColor. Sa dimension de base vient du SOCLE, erp-components.css, paragraphe Iconographie restitue du kit (verdict 184, R184.1). Cette feuille la redeclarait a 24 px, valeur reconstituee de memoire au moment ou le socle ne portait rien. */ /* ------------------------------------------------------------ 2. Topnav chrome-marketing (sticky, creme, menu poids 600 DA14) ------------------------------------------------------------ */ .topnav { background: var(--erp-cream); border-bottom: 1px solid var(--erp-marine-line); position: sticky; top: 0; z-index: 40; } /* Offset de defilement des sections ancrees. La barre ci-dessus est adherente et OPAQUE : sans cet offset, un clic sur Fonctionnement, Avantages, Tarifs ou API amene le haut de la section a l'ordonnee zero et la barre recouvre alors ses premiers pixels, donc son eyebrow et une partie de son titre. Une barre adherente opaque avec des ancres et sans offset cache ce vers quoi elle envoie. La valeur est la hauteur de la barre, --topnav-h, seule source du repere ; le filet bas de 1 px n'est pas repris, il ne masque aucun texte. Cet offset ne coute aucune hauteur de document : il deplace une position de defilement, il n'ajoute aucun pixel. */ #etapes, #avantages, #tarifs, #api { scroll-margin-top: var(--topnav-h); } .topnav__inner { max-width: 1180px; margin: 0 auto; min-height: var(--topnav-h); padding: 0 var(--sp-8); display: flex; align-items: center; gap: var(--sp-7); } .topnav__menu { display: flex; align-items: center; gap: var(--sp-7); margin-left: auto; } .topnav__links { display: flex; align-items: center; gap: var(--sp-6); } .topnav__link { font-family: var(--erp-font-sans); font-weight: 600; font-size: 14px; color: var(--erp-fg-1); text-decoration: none; transition: color 120ms ease; } .topnav__link:hover { color: var(--erp-terracotta-dk); } .topnav__link[aria-current="page"] { color: var(--erp-terracotta-text); } .topnav__auth { display: flex; align-items: center; gap: var(--sp-5); padding-left: var(--sp-6); border-left: 1px solid var(--erp-marine-line); } /* Burger : masque au-dela du point de bascule, affiche en dessous. */ .topnav__burger { display: none; margin-left: auto; align-items: center; justify-content: center; width: 44px; height: 44px; background: transparent; color: var(--erp-marine); border: 1px solid var(--erp-rule-strong); border-radius: var(--radius-1); cursor: pointer; } @media (max-width: 880px) { .topnav__inner { gap: var(--sp-4); } .topnav__burger { display: inline-flex; } .topnav__menu { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; margin-left: 0; background: var(--erp-cream); border-bottom: 1px solid var(--erp-marine-line); padding: var(--sp-4) var(--sp-5) var(--sp-5); max-height: 0; overflow: hidden; visibility: hidden; transition: max-height 160ms ease; } .topnav--open .topnav__menu { max-height: 70vh; overflow: auto; visibility: visible; } .topnav__links { flex-direction: column; align-items: stretch; gap: 0; } .topnav__link { padding: var(--sp-3) 0; border-bottom: 1px solid var(--erp-rule); } .topnav__auth { flex-direction: column; align-items: stretch; gap: var(--sp-3); padding-left: 0; padding-top: var(--sp-4); border-left: 0; } } /* ------------------------------------------------------------ 3. Hero sur surface marine (le reste de la page reste creme) ------------------------------------------------------------ */ /* Hero pleine hauteur sous la topnav sticky. min-height (jamais height fixe) : le contenu peut depasser et scroller sur petit ecran, aucune coupe. Repli vh pour les navigateurs sans dvh ; dvh gere les barres mobiles dynamiques. */ .hero-marine { min-height: calc(100vh - var(--topnav-h)); min-height: calc(100dvh - var(--topnav-h)); display: flex; align-items: center; padding-block: var(--sp-8); } .hero-marine > .erp-container { width: 100%; } .hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--sp-9); align-items: center; } @media (max-width: 920px) { .hero-grid { grid-template-columns: 1fr; gap: var(--sp-7); } } .hero__title { font-family: var(--erp-font-serif); font-weight: 500; font-size: var(--t-display); line-height: var(--t-display-lh); letter-spacing: -0.01em; color: var(--erp-fg-1); margin: 0; text-wrap: balance; } .hero__title--on-marine { color: var(--erp-fg-on-marine); max-width: 16ch; } .hero__title em, .hero__title--on-marine em { font-style: italic; } .hero__title em { color: var(--erp-terracotta); } .hero__title--on-marine em { color: var(--erp-terracotta-lt); } .hero__lead { font-family: var(--erp-font-serif); font-weight: 400; font-size: 22px; line-height: 1.5; color: var(--erp-fg-2); max-width: 46ch; margin-top: var(--sp-5); } .hero__lead--on-marine { color: var(--erp-fg-on-marine); opacity: 0.85; max-width: 42ch; } /* ------------------------------------------------------------ 4. Sections editoriales et entetes ------------------------------------------------------------ */ .section { padding-block: var(--sp-9); } .section--cream { background: var(--erp-cream); } .section--soft { background: var(--erp-cream-soft); } .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-5); margin-bottom: var(--sp-7); } /* Verdict 54 : c'est l'encre qui cede, sur les trois porteurs mesures. Le corps ne bouge pas et aucun jeton n'est cree : remonter un corps pour sauver une encre deplacerait une hierarchie posee par le brand book, et un jeton neuf de rang tertiaire conforme ferait deux gris la ou le depot en documente deja un qui passe. La lecon existait au depot pour la bande de notes ; une doctrine qui a tranche une fois ne se retranche pas, elle s'etend. */ .section-head__num { font-family: var(--erp-font-sans); font-size: 12px; letter-spacing: 0.06em; color: var(--erp-fg-3); white-space: nowrap; } .section-lead { margin-top: var(--sp-3); max-width: 60ch; } .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); } .cluster--hero { margin-top: var(--sp-6); } /* ------------------------------------------------------------ 5. Mirror-row : cartes comparatives miroir ------------------------------------------------------------ */ .mirror-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); align-items: stretch; } @media (max-width: 760px) { .mirror-row { grid-template-columns: 1fr; } } .mirror-row .erp-card { display: flex; flex-direction: column; } /* Verdict 63 : marge d'agent utilisateur remise a zero, 11 px de chaque cote, 22 px de carte a l'echelle ou le comparatif se replie. */ .mirror-head { margin-block: 0; font-family: var(--erp-font-sans); font-weight: 600; font-size: 11px; letter-spacing: var(--t-eyebrow-track); text-transform: uppercase; color: var(--erp-fg-3); } .erp-card--marine .mirror-head { color: var(--erp-terracotta-lt); } .mirror-list { margin-top: var(--sp-4); } .mirror-list li { font-family: var(--erp-font-serif); font-size: 17px; line-height: 1.35; padding: var(--sp-3) 0; border-top: 1px solid var(--erp-rule); color: var(--erp-fg-2); } .mirror-list li:first-child { border-top: 0; } .erp-card--marine .mirror-list li { border-top-color: var(--erp-rule-marine); color: var(--erp-fg-on-marine); } /* ------------------------------------------------------------ 6. Engagements numerotes (.erp-numbadge--lg) ------------------------------------------------------------ */ .engagements { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); } @media (max-width: 880px) { .engagements { grid-template-columns: 1fr; } } .engagement { display: flex; flex-direction: column; gap: var(--sp-3); } .engagement__head { display: flex; align-items: center; gap: var(--sp-3); } .engagement__title { font-family: var(--erp-font-serif); font-weight: 600; font-size: var(--t-h3); color: var(--erp-fg-1); } /* ------------------------------------------------------------ 7. Bandeau claim (mise en page du composant .erp-bandeau) ------------------------------------------------------------ */ .claim-band__inner { max-width: 1180px; margin: 0 auto; padding-inline: var(--sp-8); display: flex; align-items: center; justify-content: center; gap: var(--sp-6); flex-wrap: wrap; } /* Taille sur l'echelle typo --t-* (fix non-conformite 26px ad-hoc) : --t-h2 (28px) en claim affirme, --t-h3 (20px) sous le breakpoint. */ .claim-band__text { font-family: var(--erp-font-serif); font-size: var(--t-h2); line-height: 1.35; margin: 0; max-width: none; text-align: center; } @media (max-width: 760px) { .claim-band__inner { padding-inline: var(--sp-5); } .claim-band__text { font-size: var(--t-h3); } } /* ------------------------------------------------------------ 8. Lot 1 (#362) : variante additive header marine + hero creme Recette PARALLELE a l'habillage existant (header creme section 2 + hero marine section 3), qui reste intact. Application sur la home : topnav--marine + hero-cream (Section 1) + proof-band (Section 2). Aucune couleur en dur : tout passe par var(--erp-*). ------------------------------------------------------------ */ /* Header marine : modificateur sur .topnav, surcharge surface et couleurs internes. La topnav de base reste creme tant que ce modificateur est absent. */ .topnav--marine { background: var(--erp-marine); border-bottom-color: var(--erp-rule-marine); } .topnav--marine .topnav__link { color: var(--erp-fg-on-marine); } .topnav--marine .topnav__link:hover { color: var(--erp-terracotta-lt); } .topnav--marine .topnav__link[aria-current="page"] { color: var(--erp-terracotta-lt); } /* Burger : l'icone SVG est en stroke="currentColor", color pilote donc le trait. */ .topnav--marine .topnav__burger { color: var(--erp-fg-on-marine); border-color: var(--erp-rule-marine); } /* Tiroir mobile en mode marine : le tiroir de base est creme (invisible avec des liens creme), on bascule sa surface et ses filets sur la gamme marine. */ @media (max-width: 880px) { .topnav--marine .topnav__menu { background: var(--erp-marine); border-bottom-color: var(--erp-rule-marine); } .topnav--marine .topnav__link { border-bottom-color: var(--erp-rule-marine); } } /* Hero creme : recette parallele a .hero-marine. La hauteur plein ecran n'est plus portee ici mais par .home-fold (composition au pli, refs #362) : le hero est flex:1 et centre son contenu verticalement. Restent flex, alignement, padding, surface creme et couleurs. */ .hero-cream { display: flex; align-items: center; padding-block: var(--sp-8); background: var(--erp-cream); color: var(--erp-fg-1); } .hero-cream > .erp-container { width: 100%; } /* Ruban de sources : fin, creme chaud, sous le header (refs #362) */ .band-sources { background: var(--erp-cream-warm); border-bottom: 1px solid var(--erp-rule); padding-block: var(--sp-3); } .band-sources__inner { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; } .sources-list { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--sp-5); flex-wrap: wrap; align-items: center; } .source-mark { font-family: var(--erp-font-serif); color: var(--erp-marine); opacity: 0.72; } /* Bandeau de preuves compact, marine, au pli (remplace "Ce qui fait foi") */ .proof-band { background: var(--erp-marine); padding-block: var(--sp-5); } .proof-band__inner { display: flex; gap: var(--sp-6); justify-content: space-between; flex-wrap: wrap; } .proof-item { display: flex; gap: var(--sp-3); align-items: flex-start; flex: 1 1 0; min-width: 180px; } .proof-item__icon { color: var(--erp-terracotta-lt); display: inline-flex; } .proof-item__icon svg { width: 20px; height: 20px; } .proof-item__text { display: flex; flex-direction: column; gap: var(--sp-1); } .proof-item__label { color: var(--erp-fg-on-marine); font-weight: 600; } .proof-item__sub { color: var(--erp-fg-on-marine); opacity: 0.72; font-size: var(--t-small); line-height: var(--t-small-lh); } /* Composition plein ecran de la page 1 : sources + hero centre + preuves */ .home-fold { min-height: calc(100dvh - var(--topnav-h)); display: flex; flex-direction: column; } .home-fold .band-sources { flex: 0 0 auto; } .home-fold .hero-cream { flex: 1 1 auto; min-height: 0; } .home-fold .proof-band { flex: 0 0 auto; } @media (max-width: 768px) { .home-fold { min-height: auto; } } /* ------------------------------------------------------------ 9. Lot 2 (#362) : emphase du titre hero + composant DocSpecimen ------------------------------------------------------------ */ /* Emphase decorative du segment final du titre du hero (italique terracotta). */ .hero__accent { font-style: italic; color: var(--erp-terracotta); } /* ===== DocSpecimen : figure hero, reproduite du kit erp-figure V1.3, re-tokenise ===== Reproduction fidele du composant kit (source JSX validee), re-exprimee en tokens canoniques. Tout porteur de couleur passe par un token, et tout rayon par var(--radius-*) ou 50% (impose par la doctrine et la regle 3c du gate). Les autres dimensions (px, %) restent litterales par fidelite au kit. Profondeur par seat decale reel (.doc-specimen__seat), sans bordure, plus box-shadow plafond charte var(--shadow-2). Statut = point marine, terracotta pour les rubriques accent, jamais de rouge ni de vert. */ .doc-specimen { position: relative; width: 100%; max-width: 452px; } .doc-specimen__seat { position: absolute; inset: 24px -16px -16px 28px; background: var(--erp-cream-deep); border-radius: var(--radius-2); } @keyframes doc-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .doc-specimen__card { position: relative; z-index: 1; background: var(--erp-white); border: 1px solid var(--erp-rule); border-radius: var(--radius-2); box-shadow: var(--shadow-2); padding: 26px 28px; animation: doc-float 3s ease-in-out infinite; will-change: transform; } .doc-specimen__filet { position: absolute; left: 0; top: 26px; width: 3px; height: 32px; background: var(--erp-terracotta); } .doc-specimen__head { padding-bottom: 18px; border-bottom: 1px solid var(--erp-rule); } .doc-specimen__head .erp-eyebrow { margin-bottom: 12px; } .doc-specimen__head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); } .doc-specimen__bars { display: flex; flex-direction: column; gap: 9px; flex: 1; } .doc-specimen__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; } .doc-specimen__tag { font-family: var(--erp-font-mono); font-size: 11px; color: var(--erp-marine); background: var(--erp-cream); border: 1px solid var(--erp-rule); border-radius: var(--radius-1); padding: 3px 8px; } /* Verdict 54, meme motif : corps inchange a 10,5 px, l'encre passe a --erp-fg-3. */ .doc-specimen__edition { font-family: var(--erp-font-sans); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--erp-fg-3); } .doc-specimen__ph { display: block; border-radius: var(--radius-1); background: var(--erp-cream-deep); } .doc-specimen__ph--strong { background: var(--erp-rule-strong); } .doc-specimen__register { margin-top: var(--sp-4); } .doc-specimen__reg-head { display: flex; justify-content: space-between; align-items: center; font-family: var(--erp-font-sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--erp-fg-3); padding: 0 0 11px; border-bottom: 1px solid var(--erp-rule-strong); } .doc-specimen__reg-row { display: flex; justify-content: space-between; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--erp-rule); } .doc-specimen__label { font-family: var(--erp-font-sans); font-size: 13.5px; color: var(--erp-fg-2); } .doc-specimen__state { display: flex; align-items: center; gap: 9px; justify-content: flex-end; min-width: 96px; } .doc-specimen__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--erp-marine); flex-shrink: 0; } .doc-specimen__dot--accent { background: var(--erp-terracotta); } .doc-specimen__foot { margin-top: 18px; padding-top: var(--sp-4); border-top: 1px solid var(--erp-rule-strong); display: flex; justify-content: space-between; align-items: center; } .doc-specimen__trust { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--erp-font-sans); font-size: 12px; color: var(--erp-fg-3); } .doc-specimen__trust-ic { color: var(--erp-terracotta); display: flex; } .doc-specimen__trust-ic svg { width: 15px; height: 15px; } /* Verdict 54, meme motif : corps inchange a 12 px, l'encre passe a --erp-fg-3. */ .doc-specimen__pagenum { font-family: var(--erp-font-sans); font-size: 12px; letter-spacing: 0.08em; color: var(--erp-fg-3); } @media (max-width: 560px) { .doc-specimen__seat { inset: 18px -10px -12px 20px; } } /* ===== Home §3 Comment ca marche : marine, plein ecran, cartes a badge numerote ===== Coquille (.erp-container, .section-head, .erp-eyebrow, .erp-h2) reutilisee de l'existant. La section bascule en fond marine plein ecran, contenu centre verticalement. Les cartes sont des .erp-card--marine canoniques (filet terracotta ::before porte par le composant) ; seules les couleurs de texte sur marine sont surchargees ici, le rayon et l'ombre restent ceux du composant. */ /* Verdict 49 : le plancher de hauteur est retire des cinq sections, sans critere de conservation. Le motif n'est pas le gain de vues mais la FORME de la distribution : l'idiome agit fort la ou la section tient deja dans la vue, faiblement la ou elle commence a deborder, et pas du tout la ou elle deborde franchement. Il ajoute donc du vide en proportion inverse du besoin. Un plancher de hauteur ne fait jamais tenir ce qui depasse, il ne peut que gonfler ce qui rentrait. Conserver l'idiome la ou il lie encore a ete examine et ecarte : il ferait dependre l'identite de la page de la fenetre du lecteur, la meme page etant une succession de plein-ecrans sur un grand moniteur et un document continu sur un portable. L'asymetrie qui en resulte est perverse, le lecteur au grand ecran defilant a travers plus de vide que celui au petit, alors que c'est lui qui avait la place. Le retrait passe a --sp-8 : les deux sections tenaient 96 px du .section partage, les trois autres declarent deja 64 px en local. L'unification retient la valeur basse, unifier vers le haut ajouterait de la hauteur a une page jugee trop haute. La declaration est locale et non portee sur .section, qui sert cinq autres gabarits et sortirait du perimetre de #497. justify-content: center devient un no-op et n'est pas retire ici : sans plancher la boite vaut son contenu, il n'y a plus d'espace libre a distribuer. Recensement au rapport du lot. */ /* SEQUENCE DES FONDS DE LA PAGE D'ACCUEIL, verdicts 74 et 75. Regle opposable : JAMAIS DEUX SURFACES SOMBRES CONTIGUES, ruban compris, et UNE SEULE SECTION DE CONTENU EN MARINE, les tarifs. Le compte de bandes est retire : il posait une limite sans dire ce qui compte. Le pied est du chrome, le proof-band et le bandeau sont des rubans, aucun des trois n'entre au compte du rythme. Sequence retenue, de haut en bas : hero creme, proof-band marine, Etapes creme, Avantages creme, Tarifs marine, API creme, Comparatif creme doux, bandeau terracotta, closing creme, pied marine fonce. Le filet de frontiere ne se pose que LA OU LE FOND NE CHANGE PAS : une couleur qui change est deja une frontiere, et poser un filet partout doublerait le signal la ou il existe en banalisant le trait. Voir .filet-frontiere. */ /* VERDICT 74. La section passe de marine a creme, ce qui defait l'adjacence proof-band puis Etapes, soit 615 px de marine lus comme une seule masse. La regle opposable n'est pas un compte de bandes mais une interdiction de contiguite : deux surfaces sombres ne se touchent jamais, ruban compris. Une seule section de CONTENU reste en marine, les tarifs, ou l'autorite de la page se joue et ou l'idiome du miroir vit deja. Le fond n'est pas la seule declaration a changer : une section qui change de surface retourne TOUTE son encre. Les quatre portees de section qui posaient ici l'encre sur marine sont RETIREES et non reecrites, conformement au verdict 44 point B3 : l'encre est une propriete de la SURFACE et le socle la rend de lui meme. Une portee de section capturerait par surprise tout element present ou futur, y compris celui qu'on n'a pas encore ecrit. Les cartes passent de .erp-card--marine a la carte de base dans le gabarit, pour la meme raison. */ #etapes { background: var(--erp-cream); padding-block: var(--sp-8); display: flex; flex-direction: column; justify-content: center; } .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); } .step { display: flex; flex-direction: column; gap: var(--sp-3); } .step .erp-numbadge { margin-bottom: var(--sp-2); } /* Verdict 74 : les deux portees d'encre des cartes sont retirees avec les deux autres. L'opacite de 0,78 disparait avec elles, et c'est voulu : une encre affaiblie par opacite est une encre dont le ratio ne se lit pas dans son jeton. Le socle rend --erp-fg-2 sur .erp-body, qui passe le seuil sur creme sans reglage. */ @media (max-width: 768px) { .steps-grid { grid-template-columns: 1fr; } #etapes { min-height: auto; padding-block: var(--sp-8); } } /* ===== Ecran fin de page 1 : comparatif centre + bandeau terracotta colle en bas ===== */ /* Verdict 49, meme motif qu'a #etapes. Le plancher etait ici sur l'ENVELOPPE et non sur la section : c'est .fold-comparatif qui le portait, #comparatif s'y etirant par flex: 1. Les deux ne sont pas le meme element, et le retrait de 96 px, lui, tenait au .section partage porte par #comparatif. */ .fold-comparatif { display: flex; flex-direction: column; } #comparatif { flex: 1; padding-block: var(--sp-8); display: flex; flex-direction: column; justify-content: center; } /* ===== Ecran fin de page 2 : closing CTA aere (footer du layout suit, pas de plein ecran) ===== */ #closing { padding-block: var(--sp-10); } @media (max-width: 768px) { .fold-comparatif { min-height: auto; } #comparatif { padding-block: var(--sp-8); } #closing { padding-block: var(--sp-8); } } /* ===== Section Avantages (perimetre couvert) ===== */ /* VERDICT 75, precise par le VERDICT 82. Filet de frontiere, --erp-rule-strong, 1 px, pleine largeur du CONTENU, en haut de la section qui suit une section de meme FAMILLE de fond. La regle ne dit plus "la ou le fond ne change pas" mais LA OU LA FAMILLE NE CHANGE PAS. Deux familles seulement, claire et sombre, le terracotta formant une famille a lui seul. Une nuance a l'interieur d'une famille ne dit pas qu'une section finit : creme et creme doux different de neuf points, ce qui ne se lit pas comme une frontiere, et c'est pourquoi les deux filets poses sont l'un et l'autre justes. L'ancienne formulation ne couvrait litteralement que la premiere jointure ; elle est corrigee ici. Poser un filet partout doublerait le signal la ou il existe en banalisant le trait : un changement de FAMILLE est deja une frontiere. Le filet est un pseudo-element et non une bordure de section : une bordure de section irait de bord a bord, alors que le verdict demande la largeur du contenu. Il est cale sur le bord HAUT de la section, a --sp-8 au dessus du conteneur, et sur les bords lateraux du contenu, a --sp-8 en retrait du conteneur, ce dernier portant son retrait horizontal en --sp-8. Aucun filet a l'entree ni a la sortie d'une surface marine ou terracotta : ces frontieres sont deja dites par la couleur. L'eyebrow ne se retire nulle part, il reste le marqueur d'ouverture de toute section. */ .filet-frontiere { position: relative; } .filet-frontiere::before { content: ""; position: absolute; /* Ancre sur le bord haut de la SECTION et non sur le conteneur : le retrait vertical de section descend a --sp-6 sous 600 px, si bien qu'un decalage ecrit en dur sortait le filet de sa section a l'echelle mobile. Ancre ici, il ne depend d'aucun retrait. */ top: 0; /* Bords lateraux du CONTENU : demi-marge du conteneur centre, plus son retrait horizontal. Se recalcule seul a toute largeur, y compris sous le plafond de 1180 px ou la demi-marge tombe a zero. */ left: calc((100% - min(100%, 1180px)) / 2 + var(--sp-8)); right: calc((100% - min(100%, 1180px)) / 2 + var(--sp-8)); height: 1px; background: var(--erp-rule-strong); } @media (max-width: 760px) { .filet-frontiere::before { left: calc((100% - min(100%, 1180px)) / 2 + var(--sp-5)); right: calc((100% - min(100%, 1180px)) / 2 + var(--sp-5)); } } /* Verdict 49 : plancher retire, meme motif. Le retrait etait deja a --sp-8. */ .avantages { background: var(--erp-cream); display: flex; flex-direction: column; justify-content: center; padding-block: var(--sp-8); } .avantages-lead { max-width: 60ch; margin-top: var(--sp-4); color: var(--erp-fg-2); } .avantages-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); align-items: stretch; margin-top: var(--sp-6); } .avantage-card { padding: var(--sp-5); } .avantage-card__title { margin-bottom: var(--sp-4); } .avantage-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); } .avantage-list li { position: relative; padding-left: var(--sp-5); color: var(--erp-fg-2); } .avantage-list li::before { content: "\2713"; position: absolute; left: 0; color: var(--erp-terracotta-text); font-weight: 700; } @media (max-width: 768px) { .avantages { min-height: auto; padding-block: var(--sp-6); } .avantages-grid { grid-template-columns: 1fr; } } /* ===== Section Teaser API (#api) ===== */ /* Verdict 49 : plancher retire, meme motif. Le retrait etait deja a --sp-8. */ .api-teaser { background: var(--erp-cream); display: flex; flex-direction: column; justify-content: center; padding-block: var(--sp-8); } .api-teaser__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); align-items: start; } .api-teaser__lead { max-width: 46ch; margin-top: var(--sp-4); color: var(--erp-fg-2); } .api-teaser__cta { display: flex; /* baseline, pas center : la boite du .erp-link embarque son soulignement (padding-bottom 2px + border 1px), un centrage geometrique remonte son libelle par rapport a celui du bouton ; l'alignement typographique des deux libelles passe par la baseline. */ align-items: baseline; flex-wrap: wrap; gap: var(--sp-5); margin-top: var(--sp-5); } .api-kpis { display: flex; flex-wrap: wrap; gap: var(--sp-6); margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--erp-rule); } .api-kpi { display: flex; flex-direction: column; } .api-kpi__v { font-family: var(--erp-font-serif); font-size: var(--t-h2); line-height: 1; color: var(--erp-terracotta-text); } .api-kpi__l { margin-top: var(--sp-2); font-size: var(--t-small); color: var(--erp-fg-3); } .code-card { background: var(--erp-marine-deep); border-radius: var(--radius-2); box-shadow: var(--shadow-2); overflow: hidden; } .code-card__bar { display: flex; justify-content: space-between; align-items: baseline; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--erp-marine-line); } .code-card__host, .code-card__status { font-family: var(--erp-font-mono); font-size: var(--t-small); letter-spacing: 0.04em; color: var(--erp-terracotta-lt); } /* VERDICT 79 : le specimen NE SE REPLIE PAS, il defile dans sa carte, lignes intactes. Un specimen d'API montre ce que le client recevra, a la ligne pres : le replier change ce qu'il montre, et la carte cesse d'etre une preuve. Le debordement, lui, n'est pas negociable, il sort du document et non de la carte. LES DEUX DECLARATIONS SONT NECESSAIRES, et c'est le point qui a demande une mesure. overflow-x SEUL est inoperant : il n'annule la contribution de contenu minimal que de la boite qui le porte, or la carte n'est pas l'objet de grille, et la chaine remonte jusqu'a .api-teaser__code dont le contenu minimal reste le code non secable. Sans min-width: 0 sur cette chaine, la piste reste dimensionnee par le code et le document deborde toujours de 67 px. Mesure avant pose, aux trois largeurs que le verdict nomme : document a 320, 390 et 450 px sans aucun debordement, carte contenant son defilement aux trois, 17 lignes rendues pour 17 lignes source. */ .api-teaser__code, .code-card, .code-card__body { min-width: 0; } .code-card__body { overflow-x: auto; margin: 0; padding: var(--sp-5); font-family: var(--erp-font-mono); font-size: 0.8rem; line-height: 1.7; color: var(--erp-fg-on-marine); overflow-x: auto; white-space: pre; } .code-card__c { color: var(--erp-terracotta-lt); } @media (max-width: 768px) { .api-teaser { min-height: auto; padding-block: var(--sp-6); } .api-teaser__grid { grid-template-columns: 1fr; } } /* ===== Section Tarifs (#tarifs) ===== */ /* Verdict 49 : plancher retire, meme motif. Le retrait etait deja a --sp-8. Le verdict 51 ajoute pour cette section que la disparite de hauteur est un fait de CONTENU et reste acceptable : c'est le centrage qui etait le defaut, et le retrait du plancher en supprime la cause. Aucun plafond de hauteur n'est pose : un plafond ne fait pas tenir, comme un plancher ne fait pas rentrer. */ .tarifs { background: var(--erp-marine); display: flex; flex-direction: column; justify-content: center; padding-block: var(--sp-8); /* SOURCE UNIQUE DU PLAFOND DE LA PLANCHE, VERDICT 113. La parite de largeur entre la planche et la bande unitaire est rendue par le verdict 47, "meme largeur, meme bord gauche", ratifiee au round 9 puis sans reserve au verdict 113. TOUTE SECONDE DECLARATION INDEPENDANTE DE CE PLAFOND EST UN DEFAUT, quelle que soit sa valeur au moment du releve : deux valeurs egales ne sont pas une parite, elles en sont la coincidence, et rien dans le depot n'aurait signale leur divergence. Le code portait deux constantes de 1052 la ou la doctrine porte une dependance ; la bande derive desormais de la planche par ce jeton, qui est le seul endroit ou la valeur s'ecrit. La declaration vit sur la section parce que c'est le plus proche ancetre commun des deux boites : les proprietes personnalisees descendent, elles ne traversent pas entre freres. Le nom dit ce dont la valeur est le plafond, et non ou elle est declaree. Ce lot ne change AUCUNE valeur : 1052 des deux cotes avant, 1052 des deux cotes apres. C'est la facon dont la seconde valeur est obtenue qui change. */ --planche-plafond: 1052px; } /* .tarifs est un contexte flex en colonne : sur l'axe transverse, la marge auto de .erp-container empeche l'etirement et la rend dimensionnee par son contenu. La grille precedente masquait l'effet par un paragraphe long sans largeur maximale, qui portait la boite jusqu'a la largeur plafond. La planche borne ses textes, donc plus rien ne pousse la boite : sans cette largeur explicite le conteneur se referme sur environ 808 px, les colonnes tombent a 170 px et la rampe du prix engage alors qu'elle ne doit jamais engager a quatre colonnes. Meme idiome que .hero-marine et .hero-cream, qui la portent deja pour la meme raison. */ .tarifs > .erp-container { width: 100%; } /* Serrage des marges du bloc de tete (verdict 48). La regle de 64 a 96 px de respiration du socle vaut ENTRE blocs majeurs, pas a l'interieur d'un bloc de tete : 87 px de marge pure entre un eyebrow et son propre titre sont du mou. Pris par pas de jetons exclusivement, jamais par une valeur libre. .section-head est une classe partagee (cf. plus haut dans cette feuille) : la reduction est scopee a la section tarifaire et ne touche pas la regle globale. Ce margin-bottom COLLAPSE avec le margin-top du chapo, le parent etant un bloc : c'est le maximum des deux qui s'applique, ils ne s'additionnent pas. Le pas de jeton --sp-5 vers --sp-4 vaut 24 px vers 16 px sur cette echelle, soit moins 8 px sur le poste, et --sp-4 est exactement le rythme que le verdict 48 nomme lui meme pour titre vers chapo. Sous l'allocation de 27 px, sans arrondi. */ /* Verdicts 59 et 66 : la tete reste bornee a l'enclos, 900 px. Ce fond n'est pas touche. VERDICT 87 : LA TETE PORTE SON PROPRE ALIGNEMENT, ET IL SE DECLARE ICI. La lettre du verdict 59, "la tete suit la planche", est retiree : la mesure a etabli que la tete ne suivait pas la planche, son margeage etant independant. Une lettre qui decrit une dependance inexistante est un piege pour le lot suivant, et elle l'a deja ete. VERDICT 86 : une tete de section appartient a la GRILLE DE PAGE et jamais a son contenu. L'enclos n'a pas droit a sa propre verticale, le bornage etant une propriete de l'enclos et non de la section qui le porte. Les cinq tetes partagent donc le bord gauche de la boite de contenu, a toutes les echelles. Aucune marge automatique : la tete se cale a gauche comme ses quatre sœurs, et son plafond de 900 px ne gouverne que son bord droit. */ .tarifs .section-head { margin-bottom: var(--sp-4); max-width: 900px; } /* Encre du bloc de tete : par SURFACE, jamais par portee de section (verdict 44, B3, resserrement porte au lot C). `.tarifs .erp-eyebrow { color: terracotta-lt }` etait vrai tant que la section etait uniformement marine. La planche y a introduit une surface creme : la regle est devenue fausse, et elle capturait par surprise tout element de classe .erp-eyebrow present ou futur dans la section, y compris celui qu'on n'a pas encore ecrit. Elle est donc supprimee, et non reecrite : le bloc de tete et la bande unitaire declarent leur surface par .erp-on-marine et le socle leur rend l'encre saumon de lui meme (erp-components.css:43-44). Aucune classe du socle ne recoit d'encre par une portee de section. Le titre suit le meme principe, faute d'un modificateur de socle equivalent : la portee reste ecrite, mais elle est gardee par la surface. Un futur .erp-h2 pose sur une surface claire de cette section n'est plus capture. */ .tarifs .erp-on-marine .erp-h2 { color: var(--erp-fg-on-marine); } .tarifs .tarifs-lead { /* 64ch est une regle de LISIBILITE, pas du mou : le verdict 48 refuse d'elargir la mesure de ligne pour gagner une ligne de chapo. C'est la contrainte QUI GOUVERNE ce rang, et le verdict 66 l'a ratifie contre la coincidence des bords : voir la declaration de marge ci-dessous. */ max-width: 64ch; /* Conserve a --sp-4, la valeur que le verdict 48 nomme pour titre vers chapo. Le conteneur de la section est un bloc, pas un flex : cette marge collapse avec le margin-bottom de .section-head et c'est le maximum des deux qui s'applique. La reduire ici ne rend donc aucun pixel tant que l'autre est superieure ; le poste utile est le margin-bottom, serre plus haut. */ margin-top: var(--sp-4); /* VERDICT 66, amendant le verdict 59. TROIS BORDS SUR QUATRE COINCIDENT, ET LE BORD DROIT DU CHAPO EST LIBRE. Ce n'est pas un defaut, c'est la valeur rendue par un verdict : aucun lot, et aucune colonne de harnais, ne doit le relever comme un ecart a corriger. Le bord gauche est celui de la BOITE DE CONTENU, comme la tete qu'il suit et comme les quatre autres sections, verdicts 86 et 87. Le decalage qui le portait sur le bord d'une planche centree tombe avec ce centrage : la grille de page suffit, et aucun nombre magique n'est plus necessaire. Le bord droit est LIBRE, et voulu tel. Borner le chapo a 900 comme la tete porterait sa mesure de 64 caracteres a environ 92, ce que le verdict 48 refuse nommement. La regle que le verdict 66 en tire depasse ce rang : une contrainte de composition ne se satisfait jamais contre une contrainte de LISIBILITE. Entre la coincidence des bords et la mesure de ligne, c'est la mesure qui gouverne, le verdict 59 se motivant par l'alignement et non par la largeur. Un chapo est un rang de prose : il finit ou son texte finit. Note d'instrument : la colonne de centrage du harnais ne voit pas ce bord, par construction et non par chance. Elle ecarte les boites de prose bornees pour la mesure de ligne, par un critere structurel, une boite de mise en page disposant d'autres boites quand une boite de prose ne dispose que du texte. Reconfirme a zero apres ce commit. */ margin-inline: 0 auto; color: var(--erp-fg-on-marine); opacity: 0.82; } /* Planche tarifaire (#479, verdicts de registre V1.6). Un seul enclos : c'est lui qui porte la restriction professionnelle, et il ne peut pas se dissoudre en cartes detachables. Les colonnes sont separees par des filets, jamais par du vide, et le repli reorganise leur geometrie sans jamais retirer de contenu. Tracking : deux valeurs pour toute la planche, et deux seulement. L'eyebrow porte var(--t-eyebrow-track) et il est le seul ; toute autre micro-etiquette porte 0.08em, valeur qui preexistait dans cette feuille. Une troisieme valeur ici est une derive, pas un reglage. */ /* Plafond de largeur (verdict 47). Sans lui la planche s'etire sur les 1052 px du conteneur et chaque colonne vaut 263 px pour environ 120 px de texte. A 900 px la colonne vaut 225 px, la boite de requete 177 px : le prix rend 30,1 px, donc le plafond de 28 tient avec 2,1 px de marge, et il reste 19 % de mou d'encre, environ le double de la variance de chasse entre Newsreader et ses replis. AUCUNE marge automatique : la planche est un bloc du .erp-container et s'aligne a gauche par le flux. Centree, elle poserait 76 px de blanc a sa gauche et decalerait son bord de celui de l'eyebrow. Alignee a gauche, son accent terracotta tombe dans la verticale de l'eyebrow de section, deux marques de la meme encre sur la meme ligne. Le plafond mord des 1028 px de viewport (900 + 128 de retraits de conteneur) : il coexiste avec le repli 2x2 entre 1029 et 1080 px, sans consequence, la colonne valant alors 450 px. */ .planche { /* Verdict 56 : le liant tete vers planche est NOMME a 32 px, --sp-6, et le resserrage a --sp-4 est refuse. La valeur rendue ne change pas, mais elle cesse d'etre un accident : elle est opposable, et un lot ne peut plus la modifier sans verdict. Regle qui la fonde : la jointure entre deux objets est strictement superieure a la separation interne du plus haut des deux. Ici 32 contre 16. A 16 px, le liant egalerait la separation tete vers chapo, et deux intervalles egaux pour deux rangs differents effacent la lecture : la planche paraitrait appartenir au bloc de tete. Les 16 px gagnes ne valent pas la hierarchie perdue. Le geste "des deux cotes" est sans objet : la tete porte deja --sp-4. */ margin-top: var(--sp-6); /* ALIGNEMENT A GAUCHE, nomme par le verdict 47 et retabli par le verdict 85. Il n'y a PAS de marge automatique ici, et c'est voulu : le verdict 47 ecarte nommement le centrage, au motif que l'accent terracotta du coin superieur gauche doit tomber dans la meme verticale que l'eyebrow de section, deux marques de la meme encre sur la meme ligne. Les 152 px se rendent a droite, comme un blanc de composition normal. Ce que cette phrase existe pour empecher : un lot a lu cette boite comme decentree par oubli et lui a pose une marge automatique. Il n'y avait pas de defaut, il y avait une clause. Aucun instrument ne distingue une boite alignee par intention d'une boite alignee par oubli, le rendu etant identique dans les deux hypotheses : SEUL CE COMMENTAIRE PORTE L'INTENTION. Le bord droit n'est pas regi, verdict 86 : il est la consequence de la largeur, aucune verticale de droite n'est instituee. PLAFOND A 1052 PX, VERDICT 103. La valeur precedente, 900, a ete rendue par le verdict 47 contre une planche jugee enorme ; la mesure du verdict 95 a rendu une courbe asymetrique qui ne laisse rien a arbitrer du cote haut. De 900 a 1052, ONZE GRANDEURS VERTICALES ne bougent d'aucune sorte : hauteur de planche et de section, les trois intervalles internes de colonne, les quatre hauteurs de rang, densite de section et de colonne. La distance au pli du critere 48 reste a 30,86 px, le corps du prix a 28, et la rampe n'engage pas. Une borne qui n'achete rien n'est pas une doctrine, c'est une habitude. 1052 est la boite de contenu de la grille de page : la planche cesse d'y laisser 152 px de blanc a droite sans contrepartie mesuree. PLANCHER DE 851 PX, PORTE EN LIMITE. C'est la valeur ou la RAMPE ENGAGE, et l'engagement de rampe fait foi : le registre le tient pour un indicateur de panne et non pour une degradation gracieuse. Toute planche descendue sous 851 est un DEFAUT, quel que soit le gain de hauteur invoque. Mesure : a 851 le prix rend 27,92 px, a 824 il rend 26,78, a 790 il rend 25,33, pour un gain de section de 5,35 px seulement entre 900 et 790. GOUTTIERE : LA FIGURE A CHANGE, LOT D'ECRAN B. Cette phrase disait "gouttiere nulle, conforme par le verdict 33 : les colonnes sont separees par des filets de 1 px, jamais par du vide", et elle etait exacte tant que la colonne etait une case de tableau. Sous la figure B, retenue par la presidence, la colonne est une SURFACE bordee sur ses quatre cotes et les colonnes se separent par une gouttiere de --sp-2, jamais plus par un filet partage. Le lot n'arbitre pas le verdict 33 : il constate que la figure qu'il decrivait n'est plus celle qui est rendue, et le point part au registre avec les releves. Ce que la phrase gardait et qui reste vrai : elargir la planche ne cree aucun vide SUPPLEMENTAIRE entre colonnes, la gouttiere etant une constante de l'echelle d'espacement et non une part du mou de largeur. LA VALEUR NE S'ECRIT PLUS ICI, verdict 113 : elle vient du jeton --planche-plafond, declare une seule fois sur .tarifs, et la bande unitaire lit le meme jeton. La parite cesse d'etre une coincidence de deux constantes. */ max-width: var(--planche-plafond); /* L'habillage interne est porte par chaque sous bloc : head, colonnes, pied. */ padding: 0; overflow: hidden; } /* Un seul accent terracotta pour toute la planche. Le filet reste l'idiome de carte : l'accent de la planche ne diverge pas de celui des autres cartes, donc ni largeur ni hauteur ne sont redeclarees ici et .erp-card::before fournit le couple de jetons du socle. Seul le calage vertical est surcharge, le socle posant top: var(--sp-6) alors que la planche demande le bord haut. Bordure, ombre et rayon restent eux aussi ceux de .erp-card. */ .planche::before { top: 0; } /* L'en-tete est la couche qui fait foi : elle passe a la ligne plutot que de tronquer, a toute largeur. Une convention de prix abregee informerait moins qu'elle ne rassure. */ .planche__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2) var(--sp-4); padding: var(--sp-4) var(--sp-5); background: var(--erp-cream-soft); border-bottom: 1px solid var(--erp-rule-strong); } /* La legende de restriction est un eyebrow : le gabarit porte la classe .erp-eyebrow et l'idiome vient d'elle, graisse, corps et tracking compris. Rien n'est recopie ici, une propriete recopiee divergerait du socle au premier ajustement. L'encre non plus : la reprise locale posee au lot A est DEPOSEE au lot C (verdict 44, B3, confirmation demandee et donnee). L'eyebrow vit sur creme, il prend donc --erp-terracotta-text du socle sans aucune declaration ici. La valeur que l'implementation avait verifiee, #9a4929, etait la bonne encre au mauvais endroit ; c'est le fait de la declarer sur place qui tombe. */ /* La convention se tient au corps du marqueur d'identite qu'elle accompagne : a 14 px elle pesait visuellement plus lourd que lui. Les deux textes de l'en-tete se separent par le poids et par l'encre, jamais par la taille. */ .planche__conv { font-size: var(--t-meta); line-height: 1.4; color: var(--erp-fg-3); } /* CHAMP CREME, FIGURE B RETENUE PAR LA PRESIDENCE (#479 lot d'ecran B). L'enveloppe qui tient ENSEMBLE le barreau de colonnes et la bande de notes, et qui fait de l'enclos quatre bandes et non cinq : en-tete, champ, actions, API. Le champ est la teinte de fond du chantier, --erp-cream, et les colonnes sont les surfaces blanches qui s'y posent. AUCUN BORD BAS, ET C'EST UNE GRANDEUR D'ARRET DU LOT. Le changement de surface separe deja le champ du rang d'actions, et un bord propre ferait du champ une COUCHE, ce qu'il n'est pas. Le filet du rang d'actions reste le seul filet du segment : deux filets adjacents ici seraient un defaut, pas un renforcement. DEUX CREMES ADJACENTS, NOMME ET NON OUVERT. Le champ est --erp-cream, l'en-tete --erp-cream-soft, et ils se touchent. La doctrine de fond qui encadre ce cas est ecrite pour l'imprime et exige qu'une zone teintee contienne une surface blanche ou un filet ; le filet fort de l'en-tete est la, et les quatre surfaces blanches des colonnes aussi. Aucune condition n'y est attachee. L'ENVELOPPE REPRISE, ET LES DEUX COTES N'ONT PAS LE MEME MOTIF. Le retrait bas ne separait rien : le filet du rang d'actions fait deja la separation, et ce retrait ne l'epaississait que par le dedans (R119.1) ; il tombe donc a --sp-2. Le retrait haut separe vraiment, seul entre le filet fort de l'en-tete et le bord de la premiere carte, deux natures ; ce qui etait faux chez lui etait le corps et non l'existence, et sa valeur, --sp-4, est celle que la presidence a arretee a l'ecran. Le creme vaut --sp-2 entre pairs et --sp-4 la ou il separe deux natures. Les retraits lateraux ne bougent pas : --sp-2 plus le --sp-4 de colonne tiennent l'aplomb sur le --sp-5 de l'en-tete et du rang d'actions. */ .planche__field { background: var(--erp-cream); padding: var(--sp-4) var(--sp-2) var(--sp-2); } /* La gouttiere qui separe les colonnes. Sous la figure B les colonnes ne partagent plus de filet : chacune porte le sien sur ses quatre cotes, et deux surfaces bordees ne se separent pas par un bord partage. La meme valeur sert au repli en gouttiere de rang, declaree aux deux points de rupture. */ .planche__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--sp-2); } /* Le retrait bas est plus court que le haut : c'est la separation entre les colonnes et le rang d'action, serree au titre du budget de pied du verdict 48. Elle est AU-DESSUS du bord inferieur du rang d'action, elle compte donc pour le critere de recette, a la difference de ce qui est pris a la bande API. VERDICT 83 : LA DISTANCE AU PLI DU CRITERE EST GELEE. Elle vaut 30,86 px depuis le verdict 77, et CE N'EST PAS UN BUDGET. Toute depense s'autorise par verdict, ligne a ligne. Sans cette phrase, un prochain lot lirait 30,86 px comme de la place disponible et la consommerait sans que personne l'ait accorde : c'est exactement ainsi que la distance au pli est tombee a 5,25 px au lot F, puis a 6,86 px au verdict 60, chaque fois par une depense que nul n'avait rendue. LA COLONNE DEVIENT UNE SURFACE, FIGURE B. Elle etait une case de tableau, separee de ses voisines par un filet partage et posee a meme la carte ; elle est desormais une surface blanche posee dans le champ creme, bordee sur ses quatre cotes et arrondie au rayon de travail. BORDURE D'ASSISE : l'expression du depot entre, et non celle du specimen. Le specimen ecrit un rgba brut ; le socle ecrit color-mix sur --erp-marine a 6 %, regle .erp-card de erp-components.css, et c'est cette expression qui est reprise ici. Une couleur brute serait de surcroit relevee par scripts/check_design.sh. AUCUNE OMBRE ET AUCUN ACCENT. L'ombre ferait de la colonne une carte detachable, ce que le verdict 34 refuse a l'echelle de l'enclos. L'accent est referme par le registre dans le sens du lot A : UN SEUL accent terracotta pour tout l'enclos, celui de la planche, aucun sur les colonnes. Le filet terracotta est la marque de la carte, et la colonne de B n'est pas une carte ; quatre accents auraient de surcroit concurrence l'eyebrow de l'en-tete, seul marqueur d'identite de l'enclos. Un accent rendu sur une colonne est un DEFAUT. */ .pcol { display: flex; flex-direction: column; padding: var(--sp-5) var(--sp-4) var(--sp-4); background: var(--erp-white); border: 1px solid color-mix(in srgb, var(--erp-marine) 6%, transparent); border-radius: var(--radius-1); /* Etablit la requete de conteneur sur la boite de contenu de la colonne : c'est d'elle que le corps du prix derive. */ container-type: inline-size; /* GESTE DE SURVOL DE LA COLONNE (#479 lot d'ecran B, commit 2). Le point 3 est rendu : l'interdiction du verdict 35 est une interdiction d'APPEL A L'ACTION, non de figure. Le mouvement est donc ouvert, a une condition que le registre attache a son rendu : LE GESTE SE DECLARE, IL NE S'HERITE PAS, ET IL SE DECLARE DIFFERENT. Le site de declaration est .pcol, et la colonne n'est pas une carte : elle n'herite d'aucune elevation de socle, ce qui n'est pas une recopie mais un geste propre. LA TRANSITION PORTE LA TRANSFORMATION SEULE. Aucune autre propriete n'y entre, et il n'y en a aucune a y faire entrer : le geste ne touche ni le curseur, ni l'ombre, ni l'encre. DUREE ET COURBE : L'EXPRESSION DU DEPOT ENTRE. Elles ne sont pas choisies. Le depot possede deja une expression pour cette intention exacte, l'elevation au survol d'une carte de contexte marketing, et elle vaut .2s ease dans cette meme feuille. Le specimen du registre en rend d'autres : ce sont ses observations du tour, pas des valeurs proposees, et elles n'entrent pas. AMPLITUDE, R148.1, ET L'INTERSECTION N'EST PAS UN SINGLETON. La contrainte nommee par le registre est une seule : STRICTEMENT MOINDRE que le deplacement de la carte du socle, qui vaut 6 px. L'intersection est donc l'intervalle ouvert de 0 a 6 px, et elle admet plus d'une valeur. CE QUI A FAIT CHOISIR DANS CET INTERVALLE, et qui n'est pas un essai : une grandeur retenue s'ecrit en jeton de l'echelle, jamais en litteral, verdict 64. Les jetons de l'echelle strictement compris entre 0 et 6 se comptent a UN, --sp-1, qui vaut 4 px ; --sp-0 vaut zero et n'est pas un geste. Croisee avec l'echelle, l'intersection redevient un singleton, et la valeur n'est accordee par aucun essai. CE QUE LE GESTE NE PORTE PAS, chacun etant une grandeur d'arret du lot : aucun curseur de pointeur, le registre en faisant l'instrument decisif entre une mise en evidence et une designation de cible ; aucune ombre, ni posee ni modifiee ; aucun changement d'encre, ni de fond, ni de texte, ni de bordure. REPLI D'ACCESSIBILITE : IL NE S'APPLIQUE PAS, ET C'EST ECRIT AU DEPOT. Le bloc prefers-reduced-motion de cette feuille porte en tete : "Repli accessibilite : pas de mouvement non sollicite. Le survol (reponse a une action) reste actif." Aucune neutralisation du geste n'y est donc ajoutee, et l'omission n'est pas un oubli. LE GABARIT NE CHANGE PAS : la colonne ne devient ni lien, ni bouton, ni cible de tabulation. */ transition: transform .2s ease; } .pcol:hover { transform: translateY(calc(-1 * var(--sp-1))); } /* VERDICT 77 : cinquieme poste de marge d'agent utilisateur, remis a zero comme les quatre autres. Le verdict 63 est ETENDU, non rouvert : cinq postes, tous a zero. Quatre freres etires par la grille des colonnes, donc cout CONJOINT : 24 px aux quatre echelles larges, 48 aux deux repliees, et 96 a l'echelle mobile ou les colonnes s'empilent, les quatre marges s'additionnant alors au lieu de se partager. Il n'avait echappe qu'a un instrument aveugle aux freres etires, corrige au verdict 73. */ .pcol__vol { margin-block: 0; font-family: var(--erp-font-sans); font-weight: 700; font-size: var(--t-meta); letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.3; color: var(--erp-fg-3); } /* Appel de note, pose sur l'etiquette de palier (verdict 38). C'est une MARQUE et non un rang de texte (verdict 46, R11.4) : portee par une valeur hote, elle n'existe pas sans elle et tire son corps de cette hote en em. Le plancher de 12 px de l'echelle ne lui est pas opposable, et la lier a un echelon nomme la ferait concurrencer ce qu'elle annote. 0,75em est la valeur rendue par l'amendement A7, la meme que celle du chiffre de la bande de notes : les deux marques deviennent alors rigoureusement egales, ce qui est la condition du verdict 38 quand il en fait le seul lien visuel entre l'appel et la note. La remontee passe par vertical-align et non par la reduction automatique de , qui dereglerait l'interligne de l'etiquette. Le retrait gauche de 3 px reste litteral : aucun jeton d'espacement ne vaut 3 px (--sp-1 vaut 4), et arrondir au jeton serait ici changer la valeur rendue par le verdict. Ni parentheses, ni crochets, ni italique : le systeme reserve l'italique a l'emphase editoriale. */ .pref { font-family: var(--erp-font-sans); font-weight: 700; font-size: 0.75em; letter-spacing: 0; color: var(--erp-terracotta-text); margin-left: 3px; vertical-align: 0.42em; /* Le verdict 38 choisit vertical-align CONTRE la reduction automatique de , au motif expres qu'elle deregle l'interligne de l'etiquette. La mesure etablit que l'interligne bougeait quand meme de 1,77 px, par l'autre chemin : le pave de ligne de la marque, plus haut que sa position relevee, debordait celui de son hote. Cette declaration sert donc l'intention ecrite du verdict, elle ne la contredit pas. La position optique de la marque est intacte : vertical-align en longueur se resout sur la ligne de base, jamais sur le pave de ligne. */ line-height: 0; } /* Le corps du prix est derive de la largeur de colonne, plafonne au jeton --t-h2. Invariant a tenir, ce n'est pas le nombre : la rampe doit engager AVANT que la chaine la plus large epuise sa boite. A quatre colonnes la rampe n'est pas une degradation gracieuse, c'est un indicateur de panne : si elle engage, l'escalier des rangs est deja casse. Son domaine legitime est le repli, la colonne unique et la variance de metrique d'une fonte de repli. AUCUN plancher absolu : un plancher en pixels reclame plus d'encre que la boite n'en offre, il reintroduit donc le debordement qu'il devait prevenir. La rampe seule tient le domaine, par construction. Verdict 58, chasse des chiffres : tout rang de comparaison verticale exige une chasse FIXE, obtenue nativement ou par declaration. L'exigence est nommee AU RANG et non a la declaration, et ce rang reste donc nu : Newsreader rend ses chiffres a chasse fixe nativement, etendue nulle sur les dix chiffres, si bien qu'une declaration posee ici serait sans effet mesure. Une declaration sans effet est du bruit : elle enseigne a declarer plutot qu'a mesurer. UN CHANGEMENT DE FONTE DE TITRAGE ROUVRE CE VERDICT DE PLEIN DROIT et se mesure avant d'etre livre. Les deux rangs de rappel, eux, portent la declaration : Public Sans rend ses chiffres proportionnels (verdict 57). */ .pcol__price { font-family: var(--erp-font-serif); font-size: min(var(--t-h2), 17cqw); line-height: 1; /* Resserrement du lot I, constat visuel de la presidence. Cet intervalle n'est nomme par aucun verdict, il vient du specimen converti : il descend d'un cran de jeton, --sp-3 vers --sp-2. La hierarchie de detachement de la colonne survit et se durcit meme : rappel colle au prix dont il derive (--sp-1), etiquette a --sp-2, unitaire detache a --sp-3 parce qu'il est l'argument de la grille. */ /* Le raccourci, et non margin-top seul : margin-top laisse vivre la marge basse d'agent utilisateur, qui vaut 1 em du corps RENDU et n'a donc jamais ete choisie par personne. Mesuree a 28 px, elle porte a elle seule les 28 des 32 px de l'intervalle vers le rappel : la part declaree y etait minoritaire. Le motif du geste est qu'aucune de ces valeurs n'a ete arbitree, jamais ce qu'il rend ailleurs. La forme est celle de .planche__notes, seul precedent du depot pour garder un haut et mettre le reste a zero. La valeur haute ne bouge pas : --sp-2 est la seule valeur de cet intervalle que quelqu'un ait choisie. */ margin: var(--sp-2) 0 0; color: var(--erp-fg-1); white-space: nowrap; } /* Le suffixe est DANS la valeur : il ne peut pas s'en detacher au repli. C'est une MARQUE et non un rang de texte (verdict 46, R11.4) : elle est portee par une valeur hote, n'existe pas sans elle, et tire donc son corps de cette hote en em, comme toute superieure de composition. La lier a un echelon nommme la ferait concurrencer ce qu'elle annote, et le plancher de 12 px de l'echelle ne lui est pas opposable : une superieure a 12 px sur un prix a 28 px ne serait plus une superieure. 0,34em est la valeur rendue par ce verdict. */ .pcol__price span { font-family: var(--erp-font-sans); font-size: 0.34em; font-weight: 700; letter-spacing: 0.08em; color: var(--erp-fg-3); margin-left: var(--sp-1); vertical-align: 0.42em; } /* Rappel du montant debite, sur une ligne propre : c'est la ligne qui etablit sans ambiguite que le HT du rang au-dessus derive d'elle. Rang de texte lie a un echelon, --t-small (verdict 46, inventaire de l'enclos). */ .pcol__ttc { /* Deja au plancher de l'echelle d'espacement : le resserrement du lot I ne descend pas sous --sp-1, et cet intervalle est le plus serre de la colonne par construction, le rappel derivant du prix qui le precede. */ /* Le raccourci, meme motif qu'au rang de prix : la marge basse d'agent utilisateur, mesuree a 14 px, portait la majorite des 26 px de l'intervalle vers l'unitaire, ou --sp-3 n'en declarait que 12. La valeur haute ne bouge pas. */ margin: var(--sp-1) 0 0; font-size: var(--t-small); /* Verdict 57 : chasse tabulaire sur les deux rangs de rappel. Ce sont des rangs de SERVICE, lus en colonne et jamais isolement : l'alignement y est la fonction, pas l'ornement. Public Sans rend ses chiffres proportionnels par defaut, etendue de 3,38 px entre le plus etroit et le plus large, et fournit la fonctionnalite : l'effet est donc mesure et non presume. */ font-variant-numeric: tabular-nums; /* Interligne de service, declare localement et NON par abaissement de --t-small-lh : ce jeton dimensionne la prose de tout le site, ou le blanc entre lignes successives est ce qui rend un paragraphe lisible. Ici il n'y a pas de ligne successive : le rappel est une ligne unique dans une colonne etroite, et l'interligne de lecture n'y produit que du blanc interne, reparti moitie au-dessus moitie au-dessous de la seule ligne rendue. A 1,4 sur 14 px le pave mesurait 19,6 px pour 14 px d'encre. A 1,2 il en mesure 16,8, sans qu'aucune marge ni aucun corps ne bouge. Le prix (deja a 1) et l'etiquette de palier (dont le verdict 38 protege expressement le pave de ligne) restent hors de ce resserrement. */ line-height: 1.2; color: var(--erp-fg-3); } /* L'unitaire est l'argument de la planche : plus fonce que le rappel, bien que plus petit que le prix. Le poids fait le rang, pas la taille. */ .pcol__unit { /* Le raccourci, meme motif qu'aux deux rangs qui precedent. Dernier rang de l'escalier : sa marge basse ne borne aucun intervalle interne, elle separe le rang du bord bas de la colonne, ou le retrait de la colonne dit deja cette distance. La valeur haute ne bouge pas. */ margin: var(--sp-3) 0 0; font-size: var(--t-small); /* Verdict 57, meme motif qu'au rang de rappel TTC. */ font-variant-numeric: tabular-nums; font-weight: 600; color: var(--erp-fg-2); } /* Bande de notes de l'enclos (#479 lot I, verdict 38). La bande reste ou elle etait : dans l'enclos, entre les colonnes et le rang d'actions. Sous la figure B elle entre dans le champ creme avec le barreau de colonnes, et la note se lit au fil du texte qu'elle annote, jamais sur un centrage. VERDICT 158, CE QUI SURVIT : la bande n'est pas une boite. Aucun filet, aucun retrait vertical, et desormais AUCUN FOND PROPRE. Le fond blanc que le lot I avait pose n'a plus d'objet : il distinguait la bande d'une carte blanche, quand elle vit maintenant sur le creme du champ, entre quatre surfaces blanches qui sont les colonnes. Une note n'a pas de statut, elle n'a donc ni couche ni surface propre. CE QUI TOMBE, ET POURQUOI. Le margin-block-end disparait. Il portait la separation du dessous au titre du verdict 158 ; sous B cette separation est le RETRAIT BAS DU CHAMP, et deux sites pour une meme separation en feraient une somme que personne ne saurait relire. Le commentaire de branche B qui fondait sa valeur, et le renvoi qu'il portait sur le choix d'une marge plutot que d'un retrait, tombent avec lui : ils nommaient une figure qui n'existe plus. Les egalites du verdict 158 ne sont ni rejouees ni desavouees par ce lot : elles se REMESURENT sur d'autres bords, et les releves partent au registre. RETRAIT LATERAL, VALEUR CHANGEE ET POURQUOI. Il passe de --sp-5 a --sp-4 : le champ porte deja --sp-2 de retrait lateral, et le bord de contenu de la note tombe ainsi a 24 px du bord de l'enclos, la ou l'en-tete pose le sien. Le bord de contenu de la premiere colonne tombe a 25 px, l'epaisseur de son propre filet d'assise ; l'ecart d'un pixel est le filet, il n'est pas un decalage. Corps, interligne et encre ne sont pas touches. La marge de bloc du
    vient de la feuille du navigateur et vaut 1em du corps herite : les deux cotes restent declares, --sp-2 en haut, zero en bas. */ .planche__notes { list-style: none; margin: var(--sp-2) 0 0; padding: 0 var(--sp-4); } /* Deux pistes de grille, une pour le chiffre et une pour le reste : la gouttiere et l'alignement des lignes de continuation ne doivent dependre d'aucune espace de texte. Rang de texte lie a un echelon (verdict 46, inventaire de l'enclos), donc --t-meta : le plancher de 12 px lui est opposable, et son ancien corps de 10 px etait un reliquat, pas une intention (amendement A7). L'encre est --erp-fg-3 et non --erp-fg-4 : la seule occurrence d'une mention legale ne peut pas etre le texte que personne ne lit, --erp-fg-4 tombant sous le seuil AA a ce corps. */ .planche__notes li { display: grid; grid-template-columns: var(--sp-3) 1fr; align-items: baseline; column-gap: var(--sp-1); font-size: var(--t-meta); line-height: 1.45; color: var(--erp-fg-3); } /* Le chiffre repris devant la note. MARQUE portee par la ligne de note, donc en em de cette hote et au meme 0,75em que l'appel : les deux sont exactement egaux, ce que le verdict 38 exigeait en les designant comme le seul lien visuel entre l'appel et la note. Meme encre pour la meme raison. */ .planche__notes b { font-family: var(--erp-font-sans); font-weight: 700; font-size: 0.75em; color: var(--erp-terracotta-text); } /* Le pied porte l'unique appel a l'action de l'enclos (verdict 36) : bouton puis note, alignes a gauche, separes du barreau de colonnes par le filet superieur. La colonne n'a plus de bouton a pousser en bas d'elle-meme, la regle .pcol .erp-btn { margin-top: auto } qui l'y poussait est donc retiree ici. */ .planche__act { display: flex; align-items: center; gap: var(--sp-4); /* Retrait vertical serre au titre du budget de pied (verdict 48) : ce rang portait des retraits genereux pour ce qu'il contient, et les serrer ne touche ni un corps, ni un rang, ni une couche. VERDICT 120 : LA VALEUR DU VERDICT 109 EST REPRISE, ET LE RANG REVIENT A --sp-2. C'est le premier verdict du registre qu'une mesure ulterieure defait, et il faut lire ce qu'elle a defait exactement. Le verdict 109 a porte l'intervalle a --sp-4 pour 16 px, sur une table de depense, SANS QUE PERSONNE SACHE CE QUE LA GRANDEUR SEPARAIT. La mesure de la depense conjointe l'a etabli : ce retrait vit SOUS LE FILET SUPERIEUR DU RANG, donc a l'interieur du rang, et il separe le filet du bouton, non la colonne du rang. La separation entre le dernier rang de la colonne et le rang d'actions vaut 60,39 px avec --sp-4 COMME AVEC --sp-2 : les 16 px n'en achetaient pas un seul. Ils achetaient de l'air autour d'un bouton, ce qui est une valeur legitime mais ne se defend pas a 16 px contre 4 px de distance au pli. REPRENDRE EST UNE PERTE REELLE ET LOCALE, et elle est assumee : le registre choisit la perte parce qu'une valeur qu'on ne saurait pas defendre aujourd'hui n'a pas a l'etre par le seul fait qu'elle est deja posee. Ce qui SURVIT du verdict 109 : son plancher de distance au pli, opposable et instrumente, et son incident de regle 8. Seule sa valeur tombe. Distance au pli du critere 48 rendue a 30,86 px a win100, la valeur de depart. Le retrait HORIZONTAL n'est pas touche, il reste --sp-5. LA DISTANCE AU PLI N'EST PAS DEPENSABLE SANS VERDICT, et son plancher est de 10 px : tout lot qui l'y ferait descendre est arrete et rendu au registre, quelle que soit sa justification propre. Le plancher n'est pas porte par ce commentaire seul, il est instrumente : voir scripts/lib/viewport_matrix.js, colonne measureDistanceAuPli. R119.1 : LA SEPARATION SE MESURE ENTRE BORDS RENDUS, jamais par somme des retraits declares de part et d'autre. Un retrait pose a l'interieur d'un objet, sous son propre filet, ne separe rien de ce qui est dehors. C'est la phrase qui manquait au verdict 109 et qui a coute sa valeur. */ padding: var(--sp-2) var(--sp-5); border-top: 1px solid var(--erp-rule); } /* Etat d'attente : aucun verdict ne nomme le corps de cette note. Elle est posee par parite avec .planche__conv, seule ligne de service de l'enclos dont le rang soit rendu (verdict 45, R5.3 : --t-meta, 12 px). La feuille de specimen la porte a 10,5 px, valeur anterieure au renommage des jetons et non reprise par la correction de ce verdict, qui ne portait que sur cinq autres classes. Lecture la plus defendable, pas un verdict : a reprendre ici si le registre tranche. */ /* Verdict 63 : marge d'agent utilisateur remise a zero, 12 px de chaque cote. Retenu pour coherence et non comme reserve : le poste ne coute qu'aux deux echelles repliees, ou il ne finance rien. */ .planche__act .note { margin-block: 0; font-size: var(--t-meta); line-height: 1.4; color: var(--erp-fg-3); } .planche__api { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); background: var(--erp-cream-soft); border-top: 1px solid var(--erp-rule); } /* Verdict 63 : marge d'agent utilisateur remise a zero. Le paragraphe portait 1em de marge de bloc de chaque cote, soit 14 px, dans un rang flex ou une marge ne se replie pas : 28 px de section que nul verdict n'avait rendus. Verdict 64 : une marge d'agent utilisateur n'est jamais un intervalle de doctrine, tout intervalle retenu s'ecrivant en jeton de l'echelle. */ .planche__api p { margin-block: 0; max-width: 56ch; font-size: var(--t-small); line-height: 1.45; color: var(--erp-fg-2); } /* Verdict 60 : seuil tactile de 44 px sur le rang d'action de la planche et sur la cible de la bande API. La hauteur vient du REMBOURRAGE et non d'un corps augmente : un corps releve pour atteindre un seuil de main deplacerait un rang typographique pose par le brand book. Les deux gestes sont rendus avec le verdict 63 et non apres lui : la cible ne tenait sa gratuite que du mou de 28 px du rang, et separer les deux ferait disparaitre le mou avant que la cible soit fixee. Cout mesure de la cible, 0 px avant la remise a zero, 3,41 px apres, nul sur la distance au pli du critere 48 dans les deux cas, la bande API vivant SOUS le rang que ce critere mesure. Portee locale a la planche : le chrome partage des six gabarits reste hors du lot, il vit en #501, et le verdict 50 interdit de le decider d'ici. */ .planche__api .erp-link { display: inline-flex; align-items: center; min-height: 44px; } .planche__act .erp-btn { min-height: 44px; } /* ===== Bande unitaire (#479 lot E, verdicts 37, 42 et 47) ===== Ligne tarifaire a quatre membres sur le marine : eyebrow d'adresse, ligne de qualification, prix pousse a droite, action en bout. L'idiome de carte transpose sur fond sombre vient du socle, .erp-card--marine, qui porte le filet --erp-rule-marine et l'absence d'ombre : rien n'est recopie ici. MEME PLAFOND ET MEME BORD GAUCHE QUE LA PLANCHE (verdict 47). Deux mesures differentes feraient deux natures d'objet la ou le registre a etabli qu'elles sont deux surfaces de meme rang a audiences distinctes : la parite d'action du verdict 36 gagne une parite de mesure. Aucune marge automatique, l'alignement a gauche vient du flux comme pour la planche. Le retrait haut est --sp-5, le minimum que le verdict 37 nomme : la bande vient apres la planche et ce n'est pas un rang, la compensation d'ordre etant l'eyebrow d'adresse et non un espacement genereux. ALIGNEMENT A GAUCHE retabli par le verdict 85, EN MEME TEMPS que celui de la planche et jamais separement : le lot est indivisible, poser l'un sans l'autre romprait la parite de bords du verdict 47 de 76 px. Les deux boites portent le meme plafond dans la meme boite de contenu, donc les aligner a gauche toutes deux leur rend exactement les memes bords. Le verdict 47 nomme la parite ET l'alignement : la parite est tenue par l'egalite des deux boites, l'alignement par l'absence de marge automatique, et la phrase ci-dessus le dit deja. PLAFOND DERIVE DE CELUI DE LA PLANCHE, verdict 113. Le verdict 103 ne nommait que la planche ; c'est le verdict 47 qui lie cette bande a sa mesure, "meme largeur, meme bord gauche", parite ratifiee au round 9 puis SANS RESERVE au verdict 113. La doctrine portait une DEPENDANCE que le code n'exprimait pas : deux plafonds independants de meme valeur, et rien dans le depot n'aurait signale leur divergence. La bande lit desormais --planche-plafond, declare une seule fois sur .tarifs. AUCUNE VALEUR N'EST CHANGEE par ce geste ; ce qui change est la facon dont la seconde est obtenue. Ne pas reintroduire de constante ici : une seconde declaration independante est un defaut par le verdict 113, quelle que soit sa valeur. */ .unitband { margin-top: var(--sp-5); max-width: var(--planche-plafond); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-5); padding: var(--sp-5); } /* Sur marine l'accent prend le terracotta clair, comme toute marque d'accent de cette surface. Seul le calage vertical est surcharge, le socle posant top: var(--sp-6) pour un retrait de carte de 32 px alors que cette bande est a --sp-5 : l'accent se cale sur le bord haut du contenu. La HAUTEUR n'est pas redeclaree (verdict 44, B2) : l'accent est un signe d'identite, sa longueur ne mesure rien, et un accent cale sur la hauteur exacte de la bande cesserait d'etre une signature pour designer une zone. Qu'il s'arrete aux deux tiers n'est pas un defaut d'alignement. */ .unitband::before { top: var(--sp-5); background: var(--erp-terracotta-lt); } /* Les trois premiers membres tiennent une seule colonne de lecture ; le prix est pousse a droite par la marge automatique, l'action le suit en bout. */ .unitband__addr { min-width: 0; } .unitband__desc { margin-top: var(--sp-1); font-size: var(--t-small); line-height: 1.45; color: var(--erp-fg-on-marine); } /* Verdict 63 : marge d'agent utilisateur remise a zero, 20 px de chaque cote pour 9,7 px de cout mesure, le rang absorbant le reste dans son mou. La parite de bords du verdict 47 est horizontale : elle n'est pas touchee. margin-left reste : c'est la poussee a droite du rang, elle est declaree. */ .unitband__price { margin-block: 0; margin-left: auto; font-family: var(--erp-font-serif); /* Un cran sous le corps des prix packs sur l'echelle nommee de erp-typography.css : --t-h2 pour les packs, donc --t-h3 ici, l'echelle n'offrant aucun echelon intermediaire entre 28 et 20. Les valeurs de specimen du verdict, 23 px contre 25 px, sont des valeurs de specimen : le verdict 39 a retire de la production les corps estimes hors echelle. */ font-size: var(--t-h3); line-height: 1; color: var(--erp-fg-on-marine); white-space: nowrap; } /* Le suffixe TTC est une MARQUE portee par le prix, donc en em de son hote et non lie a un echelon (verdict 46, R11.4). 0,34em est la valeur des deux suffixes de prix de la section, celui de la planche et celui-ci. Le tracking est 0,08em, seule valeur de micro-etiquette de la section hors eyebrow (verdict 44). Encre terracotta clair, l'encre d'accent de la surface marine. Aucun suffixe HT nulle part dans cette bande. */ .unitband__price span { font-family: var(--erp-font-sans); font-size: 0.34em; font-weight: 700; letter-spacing: 0.08em; color: var(--erp-terracotta-lt); margin-left: var(--sp-1); vertical-align: 0.42em; } /* Sous le repli de la planche, la bande empile ses membres : le prix perd sa marge automatique et l'action passe a la ligne, plutot que de comprimer la ligne de qualification sous sa mesure de lisibilite. */ @media (max-width: 600px) { .unitband__price { margin-left: 0; } } /* Seuil de repli derive du rang du prix, non choisi : sous 1051 px de viewport la colonne a quatre force le prix sous son corps plafonne, ce qui effondre l'escalier des rangs. Le seuil se place au-dessus, la ou le corps du prix n'est pas encore force sous son plafond. A 2x2 la boite de colonne double et le prix retrouve son plafond : le repli restaure la hierarchie au lieu de la menager. VERDICT 143 : CETTE PHRASE PORTAIT LE MOT "reserve" POUR NOMMER CE SEUIL. Le mot nomme desormais une seule grandeur du chantier, la distance au pli du critere 48, renommee au verdict 136 ; le porter ici en aurait nomme deux, et le compte des grandeurs portant un nom donne vaut un ou le nom est fautif. Aucun nom n'est invente en echange : le seuil de repli du prix est deja nomme trois lignes plus haut, et cette phrase le dit maintenant en propres termes. Rien n'est ouvert sur le seuil lui meme, ni sa valeur, ni son domaine, ni son existence. */ /* AUX POINTS DE RUPTURE, LES FILETS DE TABLEAU DEVIENNENT UNE GOUTTIERE. Le repli dessinait la grille avec des bords partages : .pcol:nth-child(odd) rendait son bord gauche a zero et .pcol:nth-child(n + 3) posait un bord haut. Quatre surfaces bordees ne se separent pas par des bords partages : les deux regles n'ont plus d'objet et tombent, remplacees par une gouttiere de rang de meme valeur que la gouttiere de colonne. */ @media (max-width: 1080px) { .planche__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-2); } /* Le pied empile au lieu d'aligner. La note d'action survit au repli : elle est la contrepartie de parcours de la restriction, precisement aux echelles qui sont la cible prioritaire. */ .planche__act, .planche__api { flex-direction: column; align-items: flex-start; } } /* Meme geste au second point de rupture, et pour le meme motif : .pcol rendait son bord gauche a zero et .pcol + .pcol posait un bord haut. Les deux regles tombent, la gouttiere de rang les remplace. */ @media (max-width: 600px) { .tarifs { min-height: auto; padding-block: var(--sp-6); } .planche__cols { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-2); } } /* ===== Micro-interactions home (#362) ===== */ /* Effet 2 : survol des cartes (contexte marketing ; erp-components.css gele). Elevation seule : l'ombre d'origine (erp-components.css) est conservee. */ .erp-card { transition: transform .2s ease; } .erp-card:hover { transform: translateY(-6px); } /* La neutralisation de ces deux effets sur la planche n'est plus locale : elle est portee par le primitif .erp-card--static du socle, une seule declaration pour une seule regle. La regle generale ci-dessus reste entiere pour les autres cartes. */ /* Effet 3 : apparition au scroll. Etat cache conditionne par .has-reveal sur (pose par le JS) : sans JS, les cartes restent visibles. */ .has-reveal .reveal { opacity: 0; transform: scale(0.93) translateY(14px); transition: opacity 1.2s ease-out, transform 1.2s ease-out; } .has-reveal .reveal.is-visible { opacity: 1; transform: none; } /* Second temps : le contenu interne des cartes se pose apres le cadre (delai .25s). */ .has-reveal .reveal .erp-card > * { opacity: 0; transform: translateY(10px); transition: opacity 1.2s ease-out .25s, transform 1.2s ease-out .25s; } .has-reveal .reveal.is-visible .erp-card > * { opacity: 1; transform: none; } /* Repli accessibilite : pas de mouvement non sollicite. Le survol (reponse a une action) reste actif. */ @media (prefers-reduced-motion: reduce) { .doc-specimen__card { animation: none; } .has-reveal .reveal { opacity: 1; transform: none; transition: none; } .has-reveal .reveal .erp-card > * { opacity: 1; transform: none; transition: none; } } /* ===== Page /contact (#436, fiche Formulaire de contact V1.3) ===== */ .contact { padding-block: var(--sp-9); background: var(--erp-cream); } .contact-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--sp-8); align-items: start; } @media (max-width: 880px){ .contact-grid { grid-template-columns: 1fr; gap: var(--sp-6); } } /* Colonne editoriale : titre serif + coordonnees directes. Le courriel reste un chemin de premier rang (lectorat B2B) : le formulaire n'est pas un mur. */ .contact-aside .erp-h2 { margin-top: var(--sp-3); } .contact-aside__lead { margin-top: var(--sp-4); max-width: 44ch; } .contact-direct { margin-top: var(--sp-7); border-top: 1px solid var(--erp-rule-strong); } .contact-direct__row { display: flex; align-items: baseline; gap: var(--sp-3); padding: var(--sp-4) 0; border-bottom: 1px solid var(--erp-rule); } .contact-direct__label { flex: none; width: 130px; font-family: var(--erp-font-sans); font-weight: 600; font-size: 11px; letter-spacing: var(--t-eyebrow-track); text-transform: uppercase; color: var(--erp-fg-4); } /* Carte formulaire : .erp-card du socle (blanc sur creme, filet terracotta), padding par defaut. Le stack reprend la cadence d'auth-card__form (sp-4). */ .contact-card { padding: var(--sp-7); } .contact-card::before { top: var(--sp-7); } .contact-form { display: flex; flex-direction: column; gap: var(--sp-4); } .contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); } @media (max-width: 600px){ .contact-form__row { grid-template-columns: 1fr; } } .contact-form__foot { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-2); align-items: flex-start; } /* L'attribut hidden (etats pilotes par le JS de page) doit l'emporter sur le display:flex de .erp-alert et le display:flex de .contact-form. */ .contact-card [hidden] { display: none; } /* Honeypot anti-bot : masque hors ecran (pas de display:none, certains bots le detectent), retire du flux et de l'accessibilite par le HTML (tabindex -1, aria-hidden, autocomplete off). */ .contact-form__website { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } /* ===== Page /etat-des-risques : gabarit de corps de texte suivi ===== */ /* Verdict 266 : le manque etait un gabarit de corps, pas une coquille. Le chrome marketing est inchange, cette classe est la seule addition. Nommage aligne sur le precedent de la coquille juridique (.chrome-legal__doc). La classe porte la colonne a 640 px (verdict Colonne) et le rythme vertical que le texte suivi exige, rien d'autre : aucune echelle typographique, aucune couleur, aucun token redefini ici. */ .chrome-marketing__doc { max-width: 640px; margin: 0 auto; padding: var(--sp-8) var(--sp-5) var(--sp-9); } .chrome-marketing__doc .erp-h1 { margin-block: var(--sp-3) var(--sp-5); } .chrome-marketing__doc .erp-h3 { margin-block: var(--sp-7) var(--sp-3); } /* Rang de groupe (verdicts 285 a 290) : erp-h2 servi tel qu'au kit, corps ratifie au verdict 290, encre des titres portee par le kit (verdict 269). Le conteneur ne pose que les blancs du verdict 287 : 64 px avant un titre de groupe ; attache de 24 px a sa premiere section, qui SE SUBSTITUE aux 48 px du verdict 283 (la marge haute de la premiere section passe a 24 px et s'effondre avec la marge basse du rang, aucun empilement, R287.1). Les sections suivantes du meme groupe gardent leurs 48 px. Le terme final ne coiffe aucune section : il ne recoit aucune attache, sa marge basse est celle de l'attache de titre a son texte. */ .chrome-marketing__doc .erp-h2 { margin-block: var(--sp-8) var(--sp-3); } .chrome-marketing__doc .erp-h2 + .erp-h3 { margin-top: var(--sp-5); } .chrome-marketing__doc p { margin-bottom: var(--sp-4); } /* Amorces de paragraphe (verdict 269, note 266 a 272) : graisse 600 et encre des titres, seule marque recue. Sans cette regle le navigateur rend sa graisse par defaut et l'encre du corps. Scopee au conteneur de la page : aucune regle globale n'est touchee. */ .chrome-marketing__doc .erp-body strong { font-weight: 600; color: var(--erp-fg-1); } /* ===== Page de commune du pilote : deux organes de plus au gabarit de corps ===== */ /* Verdicts 349 a 357 : la famille du 266, augmentee d'un tableau et d'un bloc de limite. Aucun jeton, aucune couleur, aucune classe de surface : le bloc de limite prend .erp-surface-marine du socle, le tableau prend .erp-table. Les regles ci-dessous ne posent que la composition dans la colonne (blancs de l'echelle --sp-*, rayon de la charte) et la seconde forme du tableau. */ .chrome-marketing__doc .doc-bloc + .doc-bloc { margin-top: var(--sp-7); } .chrome-marketing__doc .doc-bloc .erp-h3 { margin-top: 0; } .chrome-marketing__doc .doc-bloc p:last-child { margin-bottom: 0; } /* Bloc de limite (verdict 350) : surface marine pleine a la largeur de la colonne, radius 2 px (--radius-1), sans filet ; titre au rang des autres blocs et corps courant, encre de la charte sur marine (heritee de la surface, les classes de texte du socle posant sinon l'encre du fond clair). */ .chrome-marketing__doc .doc-limite { padding: var(--sp-6); border-radius: var(--radius-1); } .chrome-marketing__doc .doc-limite .erp-h3, .chrome-marketing__doc .doc-limite .erp-body { color: inherit; } /* Tableau des zonages (verdicts 351 a 353) : deux colonnes, le libelle de volet en tete de ligne. Le libelle prend la marque de l'amorce (sans 600, encre des titres, casse normale) : un en-tete de ligne n'est pas un en-tete de colonne, la capitale et l'interlettrage du th du socle ne lui sont pas dus. Les phrases d'une case s'empilent au corps du tableau, corps, encre et graisse identiques aux trois etats (aucune regle par data-etat). */ .chrome-marketing__doc .doc-tableau { margin-top: var(--sp-4); } .chrome-marketing__doc .doc-tableau th[scope="row"] { font-size: inherit; letter-spacing: 0; text-transform: none; color: var(--erp-fg-1); vertical-align: top; border-bottom: 1px solid var(--erp-rule); } .chrome-marketing__doc .doc-tableau td { vertical-align: top; } .chrome-marketing__doc .doc-tableau td p { margin: 0; } .chrome-marketing__doc .doc-tableau td p + p { margin-top: var(--sp-2); } /* Repli des arretes (verdict 354) : l'organe se nomme et porte le reste. */ .chrome-marketing__doc .doc-arretes__depli { margin: var(--sp-4) 0 0; } .chrome-marketing__doc .doc-renvoi__organe { margin: var(--sp-5) 0 0; } /* La seconde forme du tableau (verdict 353) : sous le seuil derive, chaque ligne devient un bloc, le nom de volet puis sa phrase ; sur les arretes, le nom de colonne se repete devant chaque case et l'en-tete ne subsiste pas seul. Une seule bascule pour les deux tableaux de la page. SEUIL DERIVE, JAMAIS ECRIT A LA MAIN : la largeur ci-dessous est posee par scripts/page_commune/mesurer.js depuis lib/page_commune/seuils.json, et tests/test_page_commune.js refuse tout ecart entre les deux. */ @media (max-width: 489px) { /* doc-tableau-bascule */ .chrome-marketing__doc .doc-tableau, .chrome-marketing__doc .doc-tableau tbody, .chrome-marketing__doc .doc-tableau tr, .chrome-marketing__doc .doc-tableau th, .chrome-marketing__doc .doc-tableau td { display: block; } .chrome-marketing__doc .doc-tableau thead, .chrome-marketing__doc .doc-tableau [hidden] { display: none; } .chrome-marketing__doc .doc-tableau tr { padding: var(--sp-3) 0; border-bottom: 1px solid var(--erp-rule); } .chrome-marketing__doc .doc-tableau th[scope="row"] { padding: 0 0 var(--sp-2); border-bottom: 0; } .chrome-marketing__doc .doc-tableau td { padding: 0; border-bottom: 0; } .chrome-marketing__doc .doc-tableau td + td { margin-top: var(--sp-3); } .chrome-marketing__doc .doc-arretes td::before { content: attr(data-colonne); display: block; font-weight: 600; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--erp-fg-3); margin-bottom: var(--sp-1); } } /* ===== Ligne de retour de la page de commune et index des communes ===== */ /* Verdict 365 : la ligne de retour suit le dernier bloc, hors de leur rang ; un lien de la charte (.erp-text-link), rien d'autre. Le blanc qui la separe du dernier bloc est celui de l'echelle, pas un rang de bloc. */ .chrome-marketing__doc .doc-retour { margin: var(--sp-7) 0 0; } /* Verdicts 360 a 364 : l'index prend la coquille et sa largeur de contenu (.erp-container), pas le gabarit de corps ; aucun jeton, aucune couleur, aucune surface, aucun radius propre. La liste coule en colonnes dans cette largeur, continue et dans l'ordre : un groupe de lettre ne se coupe pas, le repere reste au-dessus de ses entrees. Les blancs sont ceux de l'echelle. LARGEUR DE COLONNE DERIVEE, JAMAIS ECRITE A LA MAIN : elle est posee par scripts/page_commune/mesurer_index.js depuis lib/page_commune/seuils_index.json (l'entree la plus longue sur une ligne, a la largeur de reference), et tests/test_index_communes.js refuse tout ecart entre les deux. */ .communes-index { padding-block: var(--sp-8) var(--sp-9); } .communes-index .erp-h1 { margin-block: 0 var(--sp-7); } .communes-index__liste { column-width: 285px; /* communes-index-colonne */ column-gap: var(--sp-7); } .communes-index__groupe { break-inside: avoid; } .communes-index__groupe + .communes-index__groupe { margin-top: var(--sp-6); } .communes-index__groupe .erp-h3 { margin: 0 0 var(--sp-3); } .communes-index__groupe ul { list-style: none; margin: 0; padding: 0; } .communes-index__groupe li + li { margin-top: var(--sp-2); }