/* Section 1 de l'accueil, l'ouverture : reprise du prototype publié ouverture-mix/ouverture.html, version 9 (md5 9ae7c7d6), chaque règle préfixée par l'identifiant de la section, #haut (plan v2.1 du site v10, § 2.7 : 65 classes sur 207 portaient le même nom dans plusieurs feuilles) ; la barre, la page et les noms courts des couleurs sont dans commun.css ; l'image de secours sans script se règle ici (html:not(.js)), le étant celui de l'assembleur. */ /* L'ouverture de l'accueil (section 1, ancre #haut), mise en scène de la piste A « Grand format, sans cadre » avec les détails de la piste B « Éclaté d'ingénieur » (Alex, 17/10) : le titre, l'appui, l'essai, et à droite la palette d'un vrai plan, hors de toute planche, posée sur la page comme un objet photographié ; elle se charge colis par colis sous une caméra qui descend une seule fois de la vue de dessus (le plan) à la vue de trois quarts, puis s'éclate couche par couche, et la palette elle-même se démonte en trois étages de bois (plateau, traverses avec leurs dés, semelles) ; récit « Poser, puis coter » de la charte, en vraie 3D : décision I1 ; repos éclaté : Q23 ; une légende par arrêt avec son poids : N20, et la liste des pièces de la palette, réparties des deux côtés de la pile. Un seul monde, clair. Couleurs, espaces, rayons, mouvement : jetons de la charte. */ #haut .btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 16px; border-radius: 6px; font: inherit; font-size: 15px; font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap; } #haut .btn.plein { background: var(--encre); color: var(--feuille); border: 0; } #haut .btn.plein:hover { background: var(--encre-2); } #haut .btn.borde { background: var(--feuille); color: var(--encre); border: 0; box-shadow: inset 0 0 0 2px var(--encre); } #haut .btn.borde:hover { background: var(--brume); } #haut :is(.btn, .passer):focus-visible { outline: 2px solid var(--bleu-plan); outline-offset: 2px; } /* l'ouverture, au téléphone et à la tablette : le texte, puis la palette sur toute la largeur de l'écran, sans planche */ #haut { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 8px; padding-block: 48px 0; } #haut .texte { position: relative; z-index: 2; max-width: 640px; } /* le titre d'ouverture (charte, Échelle du site) : Jost 300, approche resserrée, interligne 1,15 */ #haut h1 { margin: 0; font-size: 56px; line-height: 1.15; font-weight: 300; letter-spacing: -0.03em; text-wrap: balance; } #haut .appui { margin: 24px 0 0; max-width: 580px; font-size: 24px; line-height: 1.4; color: var(--encre-2); text-wrap: pretty; } #haut .actions { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-top: 48px; } #haut .actions .btn { padding: 0 24px; font-size: 16px; } #haut .note-essai { margin: 16px 0 0; font-size: 15px; line-height: 1.5; color: var(--encre-3); } /* la palette : pas de planche ni de quadrillage ; la toile (3D et habillage) est transparente, l'objet et son ombre se posent sur le papier de la page */ #haut .dessin { position: relative; margin: 0 calc(-1 * var(--marge)); min-width: 0; } #haut .dessin:focus { outline: none; } #haut .planche { position: relative; } #haut .cadre { position: relative; aspect-ratio: 1 / 0.92; } #haut .toile { position: absolute; inset: 0; pointer-events: none; -webkit-user-select: none; user-select: none; } #haut .toile canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } /* sans cadre, le bord haut de la toile ne doit pas se voir : un colis qui tombe d'au-dessus y entre en fondu sur 28 px, il n'est jamais tranché net (rien du repos n'est dans cette bande : cadrer() laisse 32 px d'air au moins) */ #haut .toile canvas { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 28px); mask-image: linear-gradient(to bottom, transparent 0, #000 28px); } /* ax-couleur-permise : le noir d'un masque est son opacité (fondu du bord haut), jamais vu */ /* les traits de rappel sont d'1 px en pointillé (plan du site, sections 2 et 4), le point de repère de la charte au bout */ #haut .habillage { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; } #haut .habillage .rappel { fill: none; stroke: var(--encre); stroke-width: 1; stroke-dasharray: 3 3; } #haut .habillage .points { fill: var(--encre); stroke: var(--papier); stroke-width: 3; paint-order: stroke; } #haut .habillage .cote { fill: none; stroke: var(--rouge-cote); stroke-width: 1; } #haut .habillage .pointes { fill: var(--rouge-cote); stroke: none; } /* une légende par arrêt, d'un côté ou de l'autre de la pile (comme une vue éclatée de catalogue) : sa marque, « Arrêt n » en 500, son nombre de colis, son poids et son rang dessous, en encre 2 ; à même le papier, sans pavé (au repos, aucune ombre portée : les couches soulevées n'en jettent pas) ; puis la liste des pièces de la palette démontée */ #haut .legende { position: absolute; left: 0; top: 0; z-index: 1; display: flex; align-items: flex-start; gap: 8px; font-size: 15px; line-height: 20px; color: var(--encre); white-space: nowrap; opacity: 0; pointer-events: none; } #haut .legende .texte, #haut .legendes-liste .texte { display: grid; } #haut .legende .texte span { color: var(--encre-2); } #haut .legende b, #haut .legendes-liste b { font-weight: 500; } #haut .legende[hidden] { display: none; } /* une étiquette que la disposition n'emploie pas (placer()) */ #haut .carre { display: inline-grid; place-items: center; flex: 0 0 auto; width: 20px; height: 20px; border-radius: 4px; font-size: 13px; font-weight: 500; line-height: 1; } #haut .carre.a1 { background: var(--arret-1); color: var(--arret-1-chiffre); } #haut .carre.a2 { background: var(--arret-2); color: var(--arret-2-chiffre); } #haut .carre.a3 { background: var(--arret-3); color: var(--arret-3-chiffre); } #haut .carre.a4 { background: var(--arret-4); color: var(--arret-4-chiffre); } #haut .carre.a5 { background: var(--arret-5); color: var(--arret-5-chiffre); } #haut .carre.a6 { background: var(--arret-6); color: var(--arret-6-chiffre); } #haut .carre.a7 { background: var(--arret-7); color: var(--arret-7-chiffre); } #haut .carre.a8 { background: var(--arret-8); color: var(--arret-8-chiffre); } /* la liste des pièces de la palette démontée, à droite d'elle : l'icône « Palette » de la charte dans la colonne des marques (au trait de 1,5, bouts ronds, couleur du texte : un carré de couleur s'y lirait comme un arrêt), son nom en 500, puis une ligne par étage de bois en encre 2, chacune avec son trait de rappel vers sa face ; en résumé (quand la disposition ou la taille de la palette ne laissent pas trois points nets), les pièces s'énumèrent et un seul trait part du nom */ #haut .icone { flex: 0 0 auto; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; } #haut .icone path { vector-effect: non-scaling-stroke; } /* le chiffre de la cote, plus discret qu'avant : 15 px, à même le papier, sous son trait */ #haut .cote-texte { position: absolute; left: 0; top: 0; padding: 0 4px; font-family: var(--police-cote); font-size: 15px; line-height: 18px; color: var(--rouge-cote); white-space: nowrap; opacity: 0; pointer-events: none; } /* « Passer » : bouton discret, souligné, en haut à droite de la scène, pendant le récit seulement (plan visuel) */ #haut .passer { position: absolute; right: var(--marge); top: 8px; z-index: 3; height: 44px; padding: 0 8px; border: 0; border-radius: 6px; background: var(--papier); font: inherit; font-size: 15px; color: var(--encre-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; pointer-events: auto; } #haut .passer:hover { color: var(--encre); } /* repli : l'état de repos en image, une par palier de largeur (fond transparent : le papier reste celui de la page), sans WebGL, sans script, ou si le script n'a pas pris la main au bout de 2 s ; la liste des arrêts et le cartouche attendent de même */ #haut .repos { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; opacity: 0; animation: s1-secours 0s linear 2s forwards; } @keyframes s1-secours { to { opacity: 1; } } .js #haut .dessin:not(.vivant):not(.sans3d) :is(.cartouche, .legendes-liste) { opacity: 0; animation: s1-secours 0s linear 2s forwards; } #haut .dessin.vivant .repos { display: none; } #haut .dessin.sans3d .repos { animation: none; opacity: 1; } #haut .dessin.sans3d .toile { display: none; } /* au téléphone, et à la tablette quand la pile n'a pas la place entre elles, les légendes passent sous la palette, en liste */ #haut .legendes-liste { display: none; margin: 0; padding: 16px var(--marge) 0; list-style: none; font-size: 15px; line-height: 20px; color: var(--encre); transition: opacity 150ms linear; } #haut .legendes-liste li { display: flex; align-items: flex-start; gap: 8px; } #haut .legendes-liste li + li { margin-top: 12px; } #haut .dessin.dessous .legende, #haut .dessin.dessous .habillage .rappel, #haut .dessin.dessous .habillage .points { display: none; } #haut .dessin.dessous .legendes-liste { display: block; } /* le cartouche, plus discret qu'une plaque : pas de cadre, un filet d'encre en tête, des filets de grille entre les lignes, l'étiquette à gauche sur 88 px, en bas à droite de la vue (sans la mention « Exemple », retirée par Alex le 17/10) ; posé sur le papier, il reste lisible si une ombre passe dessous */ #haut .cartouche { margin: 24px var(--marge) 0; border-top: 1px solid var(--encre); background: var(--papier); font-variant-numeric: tabular-nums; transition: opacity 150ms linear; } #haut .cartouche.recit { opacity: 0; } #haut .cartouche .ligne { display: grid; grid-template-columns: 80px minmax(0, 1fr); column-gap: 12px; align-items: baseline; padding: 4px 0; } #haut .cartouche .ligne + .ligne { border-top: 1px solid var(--grille); } #haut .cartouche .lib { font-size: 13px; line-height: 20px; color: var(--encre-3); } #haut .cartouche .val { font-size: 15px; line-height: 20px; color: var(--encre-2); } #haut .cartouche .controles .val { color: var(--encre); transition: opacity 150ms linear; } #haut .cartouche.attente .controles .val { opacity: 0; } /* la mesure de la disposition « comme A » (cadrer()) : les légendes d'arrêt sans leur poids, le temps de les mesurer */ #haut .toile.comme-a .poids { display: none; } /* quand la largeur de la fenêtre borne la pile (cadrer()), le poids passe sous le nombre de colis : les légendes y sont aussi étroites que celles de A */ #haut .toile.poids-dessous .legende .poids { display: block; } #haut .toile.poids-dessous .legende .poids .sep { display: none; } /* le grand format : dès 1 024 px, le texte à gauche sur 400 à 500 px (le titre sur trois lignes), et la palette prend tout le reste du premier écran, jusqu'au bord droit de la fenêtre, sans planche ; le cartouche en bas à droite, sur la ligne du contenu */ @media (min-width: 1024px) { #haut { --colonne: clamp(400px, 38vw, 500px); grid-template-columns: minmax(0, var(--colonne)) minmax(0, 1fr); align-items: center; min-height: calc(100svh - var(--barre)); padding-block: 48px; } #haut .texte { max-width: var(--colonne); } /* sous le titre, « Commencer l'essai » seul : « Se connecter » est dans la barre, sur le même écran (décision n° 18 d'Alex du 22/10) ; sous 1 024 px, la barre le range dans son menu, il reste donc ici */ #haut .actions .connexion { display: none; } /* le titre grandit sans saut : 48 px à 1 024, 64 px dès 1 280 et jusqu'à 1 920 (charte), la même droite entre les deux (décision d'Alex du 18/10, n° 5) */ #haut h1 { font-size: clamp(48px, 6.25vw - 16px, 64px); } #haut .appui { font-size: clamp(20px, 1.7vw, 24px); } #haut .dessin { position: absolute; z-index: 1; top: 0; bottom: 0; left: 30%; right: calc((100% - 100vw) / 2); margin: 0; } #haut .planche, #haut .cadre { position: absolute; inset: 0; aspect-ratio: auto; } /* la palette déborde la colonne ; « Passer » et le cartouche restent sur la ligne du contenu, au droit de la barre (le script règle l'écart au pixel près, une barre de défilement comprise) */ #haut .passer, #haut .cartouche { right: max(var(--marge), (100vw - 1280px) / 2); } #haut .cartouche { position: absolute; z-index: 2; bottom: 16px; width: max-content; max-width: 46%; margin: 0; } } @media (min-width: 744px) and (max-width: 1023px) { #haut .cartouche { max-width: 520px; margin-left: auto; } /* l'appui équilibré : sa dernière ligne n'est plus « leur stabilité. » seul (là où text-wrap: balance est inconnu, la coupure ordinaire, celle d'avant) */ #haut .appui { text-wrap: balance; } } /* la tablette tenue debout (décision n° 35 d'Alex, 19/10) : toute la pile et sa cote au premier écran, le cartouche juste sous le pli ; le cadre prend la hauteur qui reste sous le texte (530 px : le haut du cadre, 513 px à toutes ces largeurs où le texte a ses 640 px, et 17 px d'air ; la cote finit alors 38 px au-dessus du bas de l'écran), au plus 0,92 fois la largeur (le cadre d'avant, que garde la tablette en paysage) et au moins 440 px ; svh : la hauteur que laissent les barres du navigateur montrées (vh pour un navigateur qui ne connaît pas svh) ; la caméra se recadre sur le cadre (cadrer()) */ @media (min-width: 744px) and (max-width: 1023px) and (orientation: portrait) { #haut .cadre { aspect-ratio: auto; height: clamp(440px, calc(100vh - 530px), 92vw); height: clamp(440px, calc(100svh - 530px), 92vw); } } @media (max-width: 743px) { #haut { padding-block: 32px 0; } #haut h1 { font-size: 40px; } #haut .appui { font-size: 18px; margin-top: 16px; } #haut .actions { margin-top: 32px; } #haut .actions .btn { flex: 1 1 100%; } /* action principale pleine largeur (charte, téléphone) */ #haut .cadre { aspect-ratio: 1 / 1.5; } /* la pile éclatée est haute (plus encore avec la palette démontée) : au téléphone, elle prend la hauteur d'un écran */ #haut .legende, #haut .habillage .rappel, #haut .habillage .points { display: none; } #haut .legendes-liste { display: block; } #haut .cartouche .ligne { grid-template-columns: minmax(0, 1fr); padding: 6px 0; } } /* sans script : l'image du repos tout de suite, sans toile (le