/* ═══════════════════════════════════════════════════════════════════════════════════════════════ amorce.css — l'amorce du configurateur sur l'accueil (lot `the-first-move`, lot 4 du redesign). @registre /css/la-cote.css Source de vérité : « Kamba - specification La cote.html », dont le pied de page dit la règle : « toute valeur absente de ce document est une décision non prise ». Cette feuille n'invente donc AUCUNE valeur : chaque couleur, taille, espacement, rayon et trait est un jeton du registre déclaré ci-dessus, et tools/audit-css/one-set-of-values.js la tient à zéro littéral parce qu'elle NOMME son registre — registry by design, avant même que l'accueil ne la lie. ── CE QUE LA SPÉCIFICATION DIT DE CETTE SECTION, ET DONC CE QUE FAIT CE FICHIER ──────────────── §1 « Amorce du configurateur (accueil) · Maquettée · — » : la colonne « ce qu'il faut trancher » est VIDE, donc rien n'est à trancher ici et les règles du §2 au §5 suffisent. C'est le vrai livrable de cette ligne, et c'est pourquoi ce fichier ne pose aucune question. §4 les quatre paliers, et l'amorce est l'une des deux surfaces qu'il nomme explicitement : < 600 une colonne, marge 16 (le registre la porte) ≥ 600 marge 24 ≥ 880 « les champs restent en haut, l'aperçu coté passe dessous, pleine largeur, et les valeurs calculées se placent EN LIGNE sous l'aperçu » ≥ 1080 « amorce (champs 1fr / aperçu + cotes 1fr) » — les deux colonnes 🔴 « L'aperçu ne passe JAMAIS au-dessus des champs : sur téléphone on saisit d'abord, on vérifie ensuite — c'est l'ordre du geste réel. » Les champs sont donc premiers dans le DOCUMENT, à tous les paliers, et aucune règle ici ne réordonne quoi que ce soit. « Le dessin coté est dimensionné en % de son conteneur avec un rapport fixe, jamais en unités de fenêtre » — le rapport vient du viewBox du partiel bloc-cote, pas d'ici. §2.3 rythme d'une section : 44 de padding, 24 sous un H2, 16 entre blocs frères, 8 dans un bloc. Rayons 0 sauf le bouton. Aucune ombre, aucun dégradé, nulle part. §3 l'anneau de focus est --action, 2 px, jamais supprimé — il vient du registre, et cette feuille ne le touche pas. Les cibles font 48 px : les touches du stepper les tiennent depuis /css/controles.css, le châssis partagé, et les liens de type les tiennent ici. 🔴 LES RESETS S'ÉCRIVENT EN :where(), SANS EXCEPTION (leçon du lot 1, payée en contraste 1,67:1 sur le bouton primaire, invisible à un gate unitaire et attrapée seulement en e2e sur la page SERVIE). Cette feuille pose un seul défaut d'élément, sur
/
/
, et il passe par :where() pour qu'un composant le surcharge sans se battre contre une spécificité. ═══════════════════════════════════════════════════════════════════════════════════════════════ */ /* ── La section ──────────────────────────────────────────────────────────────────────────────── .amorce prend .section du registre d'accueil (padding 44, colonne contrainte) ; elle s'assoit sur --bande pour se détacher du hero sans être un aplat d'action (§2.1 : --action est « bouton primaire, liens, marque validé, anneau de focus » ET SEUL RÔLE). */ .amorce { background: var(--bande); } .amorce .section-head { margin-bottom: var(--espace-24); } /* §2.3 — 24 sous un H2 */ /* ── Le corps : champs puis aperçu ───────────────────────────────────────────────────────────── Une colonne jusqu'à 1080, dans l'ordre du document. 16 entre deux blocs frères (§2.3). */ .amorce__corps { display: grid; gap: var(--espace-16); } /* ── Le choix de type ────────────────────────────────────────────────────────────────────────── Des liens, pas des boutons : c'est ce qui rend la route SANS JAVASCRIPT réelle. Ils portent .bouton--secondaire du registre, donc leur cible et leur anneau sont déjà ceux du §3 ; la liste n'ajoute qu'une mise en page. Pas de puce : elle n'apporte rien à une rangée de choix. */ .amorce__consigne { font-family: var(--police-interface); font-weight: 600; font-size: var(--taille-intitule); line-height: var(--interligne-intitule); margin-bottom: var(--espace-8); } :where(.amorce__types) { list-style: none; margin: 0; padding: 0; } .amorce__types { display: flex; flex-wrap: wrap; gap: var(--espace-8); } .amorce__type { display: flex; } /* La cible de 48 px dans les DEUX sens, comme les touches du stepper : un lien de choix EST un contrôle, quoi qu'en dise sa balise (§3, « minimum, sans exception »). */ .amorce__type-lien { display: inline-flex; align-items: center; justify-content: center; min-height: var(--cible-tactile); } /* Le type retenu : l'état « validé » du §2.1, qui est un des rôles déclarés de --action. 🔴 IL SE DÉCLARE SUR L'ATTRIBUT, ET IL DOIT BATTRE LE :hover DU COMPOSANT DE BASE. Le premier jet écrivait `.amorce__type-lien--choisi`, une classe — donc une spécificité (0,1,0), que `.bouton--secondaire:hover` (0,2,0) du registre écrase. Résultat mesuré à l'instrument : dès que le pointeur reste sur le type choisi (et il y reste, c'est là qu'on vient de cliquer), le fond redevenait --bande sous une encre --papier, soit **1,11:1** — le libellé du type choisi disparaissait. Aucun gate unitaire ne pouvait le voir : la règle était correcte, c'est la CASCADE qui la perdait, et seulement à l'état survolé. Trouvé par la colonne `filled` de handoff/capture-the-first-move.js, qui est exactement l'état qu'un relevé d'un seul état n'aurait pas mesuré. La forme retenue est celle que le registre emploie déjà pour un segment retenu (`.seg[aria-pressed="true"]`) : l'état vit dans l'ARIA, une seule fois, et la feuille le LIT. `[aria-current="true"]` donne (0,2,0) de base et (0,3,0) au survol, donc il gagne dans les deux cas ; et l'adaptateur n'a plus de classe à tenir en parallèle de l'attribut. */ .amorce__type-lien[aria-current="true"], .amorce__type-lien[aria-current="true"]:hover, .amorce__type-lien[aria-current="true"]:active { background: var(--action); color: var(--papier); border-color: var(--action); } .amorce__type-lien[aria-busy="true"] { color: var(--encre-45); } /* ── Les trois mesures ───────────────────────────────────────────────────────────────────────── Le balisage est celui de shared/control-renderer.js et son châssis vit dans /css/controles.css (une seule écriture pour les deux lieux de montage). Ici : l'écart au-dessus du bloc, et le filet qui le ferme comme une liste de réglages (§2.3). */ .amorce__mesures { margin-top: var(--espace-16); border-top: var(--trait-filet) solid var(--filet-liste); } .amorce__mesures[hidden] { display: none; } .amorce__champ:last-child .control-row { border-bottom: 0; } /* ── L'aperçu ────────────────────────────────────────────────────────────────────────────────── Le dessin est le partiel bloc-cote (/css/bloc-cote.css) : il porte son fond, ses traits et ses chaînes de cote, et son rapport vient de son viewBox. Cette feuille ne lui donne qu'une place. Vide (aucun type choisi), il n'occupe rien : une boîte réservée et visible serait un composant que personne n'a dessiné. */ .amorce__dessin:empty { display: none; } /* 🔴 LA CHAÎNE D'UNE COTE DÉBORDE DE SA SCÈNE, ET IL FALLAIT LUI RÉSERVER LA PLACE. Mesuré à l'instrument (`en/filled/375 px`) : scrollWidth 381 pour innerWidth 375, et le coupable nommé est `span.bloc-cote__cote`, à droite du dessin. La cause est dans le PARTIEL, pas ici : une cote est une ancre de 0 × 0 posée en % sur la scène, et sa chaîne se déploie depuis ce point — sa largeur n'entre donc dans AUCUN calcul de largeur. En impérial elle est bien plus longue (« 236 1/4 in » contre « 600 cm »). Le partiel a été écrit au lot 2 (`one-cote-label`) sans consommateur de production : l'amorce est le premier, et c'est ce qui rend le défaut visible aujourd'hui. Ce que fait cette règle : elle RÉSERVE la place que la chaîne prend, pour que le débordement atterrisse dans la page au lieu d'en sortir. Elle ne coupe rien et ne masque rien — un `overflow: hidden` ici aurait retiré une cote de l'écran, l'exact contraire de ce lot. 🔴 LA VALEUR EST BALAYÉE, PAS DEVINÉE, et le reliquat est publié. Balayage : 3 langues × les largeurs 320 → 440 par pas de 20, AU MAXIMUM de chaque borne (600 × 240 × 60, les chaînes les plus longues que le produit accepte), soit 21 cas. · --espace-16 : 3 cas débordent (en-US 320 +8 px · 340 +5 · 360 +2) · --espace-24 : 1 cas déborde (en-US 320 +3 px) On garde --espace-24. Le reliquat est donc : l'ANGLAIS EN POUCES, à 320 px, au maximum des trois bornes, déborde de 3 px. Le cas que §4 rend obligatoire — « 320 px de large, en allemand » — est propre, et tous les cas métriques le sont. Le correctif de fond appartient au partiel et n'est PAS fait ici, parce qu'il a une raison mesurée : la cote de profondeur est ancrée à son DÉBUT exprès (« at 320 px a centred depth label met the width label », shared/bloc-cote.js), donc l'aligner à droite rouvrirait la collision que le lot 2 avait fermée. Il faut une troisième réponse, pas un basculement : entrée du BACKLOG. */ .amorce__dessin { padding: 0 var(--espace-24); } /* ── Les valeurs calculées ───────────────────────────────────────────────────────────────────── 🔴 LA FENTE GARDE SA BOÎTE ET NE SIMULE RIEN. La spécification demande « squelette + aria-live + état d'erreur » autour de l'appel à /api/validate ; le lot interdit « aucune fausse barre de progression, aucune valeur provisoire, aucun squelette qui simule un chiffre ». Les deux tiennent ensemble, et la différence est entre RÉSERVER une place et FEINDRE son contenu : la fente a une hauteur minimale (celle de sa propre ligne de valeur), elle garde son intitulé, et en attendant elle ne contient ni chiffre, ni miroitement, ni barre. Le
est aria-live="polite", une fois, au lieu d'annoncer chaque valeur séparément. */ :where(.amorce__valeurs, .amorce__valeurs dt, .amorce__valeurs dd) { margin: 0; } .amorce__valeurs { display: grid; gap: var(--espace-8); margin-top: var(--espace-16); } .amorce__valeur { display: flex; align-items: baseline; justify-content: space-between; gap: var(--espace-12); padding: var(--espace-8) 0; border-bottom: var(--trait-filet) solid var(--filet-liste); } .amorce__valeur:last-child { border-bottom: 0; } .amorce__valeur[hidden] { display: none; } /* La fente : la hauteur d'une ligne de valeur, pour que l'arrivée du chiffre ne fasse rien sauter. */ .amorce__valeur-slot { min-height: calc(var(--taille-valeur) * var(--interligne-valeur)); font-variant-numeric: tabular-nums; } /* `true-on-the-page` (M7) — la condition de la charge (« lorsque la charge est répartie uniformément. »), la clé du configurateur : une ligne pleine largeur sous l'intitulé et la valeur, jamais une valeur sans elle. */ .amorce__valeur { flex-wrap: wrap; } .amorce__valeur-condition { flex-basis: 100%; color: var(--encre-etiquette); font-size: var(--taille-interface); line-height: var(--interligne-interface); } .amorce__valeur-condition[hidden] { display: none; } /* L'état d'erreur du §3 : il se lit, il ne clignote pas, et il retire les chiffres au lieu d'en laisser de périmés (c'est l'adaptateur qui les retire ; ici, sa couleur). */ .amorce__note { margin-top: var(--espace-8); padding: var(--espace-8) var(--espace-12); background: var(--alerte-fond); border-left: var(--trait-dessin) solid var(--alerte-trait); color: var(--alerte-encre); font-size: var(--taille-interface); line-height: var(--interligne-interface); } .amorce__note[hidden] { display: none; } /* `hang-it-right` — le détail de la mention : les cartes que le configurateur rangerait sous le même titre, dans ses mots. Il prolonge la même bande d'alerte (même fond, même filet), sans marge entre les deux. */ .amorce__attention-detail { padding: 0 var(--espace-12) var(--espace-8); background: var(--alerte-fond); border-left: var(--trait-dessin) solid var(--alerte-trait); color: var(--alerte-encre); font-size: var(--taille-interface); line-height: var(--interligne-interface); overflow-wrap: anywhere; } .amorce__attention-detail[hidden] { display: none; } .amorce__attention-carte { margin: 0; } .amorce__attention-carte + .amorce__attention-carte { margin-top: var(--espace-8); } /* ── La suite ─────────────────────────────────────────────────────────────────────────────────── */ .amorce__suite { margin-top: var(--espace-24); } .amorce__suite .bouton { width: 100%; } /* < 600 : « bouton pleine largeur » (§4) */ /* ── ≥ 600 : la marge de page passe à 24 (registre). Le bouton cesse d'être pleine largeur : la ligne devient assez large pour qu'un bouton de 100 % se lise comme une bande. ──────────── */ @media (min-width: 600px) { .amorce__suite .bouton { width: auto; } } /* ── ≥ 880 : « les champs restent en haut, l'aperçu coté passe dessous, PLEINE LARGEUR, et les valeurs calculées se placent EN LIGNE sous l'aperçu » (§4, mot pour mot). ────────────────── */ @media (min-width: 880px) { .amorce__valeurs { grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--espace-16); } .amorce__valeur { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--espace-4); border-bottom: 0; border-top: var(--trait-filet) solid var(--filet-liste); } } /* ── ≥ 1080 : « les deux colonnes apparaissent : … amorce (champs 1fr / aperçu + cotes 1fr) ». L'ordre du document ne change pas : la première colonne EST les champs. ──────────────────── */ @media (min-width: 1080px) { .amorce__corps { grid-template-columns: 1fr 1fr; gap: var(--gouttiere); align-items: start; } .amorce__mesures { margin-top: var(--espace-16); } .amorce__valeurs { grid-auto-flow: row; grid-auto-columns: auto; gap: var(--espace-8); } .amorce__valeur { flex-direction: row; align-items: baseline; justify-content: space-between; gap: var(--espace-12); border-top: 0; border-bottom: var(--trait-filet) solid var(--filet-liste); } .amorce__valeur:last-child { border-bottom: 0; } } /* ── Le rail des guides (lot `try-it-here`, 3c-a) — LE MÊME COMPOSANT, un troisième montage ───── shared/amorce.js le rend avec `mount: 'rail'` : une