/* Section 2 de l'accueil, « Ce qu’on ne vérifie pas de tête » : reprise du prototype publié section-2/section-2.html, version 2
   (md5 abe433ba), chaque règle préfixée par l'identifiant de la section, #verifications (plan v2.1 du site v10, § 2.7) ; la
   barre, la page, les noms courts des couleurs et .lecteur (mêmes déclarations) sont dans commun.css. */
/* La section 2 de l'accueil (« Ce qu’on ne vérifie pas de tête », décision N11 d'Alex ; ancres #verifications et #contraintes), dans sa page : la
   barre collée de l'ouverture en haut. v3 du 18/10 (RAPPORT-v3.md) : la palette de la piste 3 (décisions n° 15 et 17 d'Alex), le
   plan du moteur de 27 colis sur 4 arrêts, jugé sans constat, vu de trois quarts comme l'ouverture, en cartons bruns avec
   l'étiquette de couleur de leur arrêt, rendu une fois (image WebP à double densité, plusieurs largeurs) ; par-dessus, en vrai
   texte et en traits : la cote du centre de gravité, deux repères numérotés (le centre de gravité ; le « ne pas gerber » et le
   fragile), les cinq légendes dans l'ordre du lot 5. Aucune animation, aucune interaction (plan du site, section 2). Couleurs,
   espaces, rayons : jetons de la charte. */
#verifications .liens a:focus-visible { outline: 2px solid var(--bleu-plan); outline-offset: 2px; }
/* ── la section 2 ──────────────────────────────────────────────────────────────────────────────────────────────────────────
   Grille de la charte : 12 colonnes, gouttière de 24 px. Au bureau (1 200 px et plus) : le titre sur les colonnes 1 à 8 ; le
   texte et le lien en 1 à 3 ; le dessin en 4 à 8, plus grand que la palette de l'ouverture ; les légendes en 9 à 12. Les trois
   colonnes partent d'une même ligne : le haut du texte, le haut du chargement dessiné (le plus haut des coins des colis) et le
   haut de la première légende */
#verifications { margin-top: 96px; }
#verifications h2 { margin: 0; max-width: calc((100% - 11 * 24px) / 12 * 8 + 7 * 24px); font-size: 40px; line-height: 1.15; font-weight: 400; letter-spacing: -0.03em; color: var(--encre); text-wrap: balance; }
#verifications .corps { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; margin-top: 48px; }
#verifications .propos { grid-column: 1 / span 3; }
#verifications .propos p { margin: 0; font-size: 18px; line-height: 1.5; color: var(--encre-2); text-wrap: pretty; }
/* une seule ligne de liens (texte bleu plan souligné), chaque lien sur une cible de 44 px */
#verifications .liens { display: flex; flex-wrap: wrap; column-gap: 24px; margin: 16px 0 0 !important; }
#verifications .liens a { display: inline-flex; align-items: center; min-height: 44px; color: var(--bleu-plan); text-decoration: underline; text-decoration-thickness: 1px; }
#verifications .liens a:hover { text-decoration-thickness: 2px; }
/* la planche (dessin et légendes) reprend les colonnes 4 à 12 : neuf colonnes de la même largeur, mêmes gouttières */
#verifications .planche { grid-column: 4 / -1; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
/* le dessin remonte de sa marge du haut (--t, part de sa hauteur ; une marge en % se rapporte à sa largeur, d'où --hw) : le haut
   du chargement tombe sur la ligne de départ commune. Sa largeur, --dessin : toute sa place dans la grille, sauf sur un écran bas */
#verifications .vue-tq { grid-column: 1 / span 5; min-width: 0; --dessin: 100%; width: var(--dessin); margin: calc(-1 * var(--t) * var(--hw) * var(--dessin)) 0 0; }
/* RÈGLE DES ÉCRANS BAS (décision n° 26 d'Alex, 18/10 ; RAPPORT-v3.md, v3b) : aux deux dispositions à deux colonnes (744 px et
   plus), la section ouverte par son ancre (titre sous la barre collée), le dessin prend la largeur qui pose le bas de son étiquette
   à --air du bas de l'écran, s'il en a besoin : au bureau bas (1 366 × 657, 1 024 × 768…) il rapetisse ; ailleurs la grille est
   la plus petite et rien ne change. Continue : la largeur suit la hauteur de l'écran sans saut (1 px de haut, 1,04 px de large),
   jamais sous 288 px (le dessin du téléphone de 320 px, le plus petit éprouvé : les numéros s'y serrent déjà). Le dessin descend
   sous la ligne de départ de (1 − t) × hw fois sa largeur. Toutes les positions de l'habillage sont des parts du dessin : elles
   suivent. Au téléphone (le dessin, puis les légendes en liste dessous), rien. Mesures prises au pixel par banc.js (« un-ecran »,
   « grille », « hauteurs ») : si le titre, le texte ou les marges changent, --avant-dessin change avec eux */
@media (min-width: 744px) {
  #verifications {
    --avant-dessin: calc(var(--barre) + 16px + env(safe-area-inset-top, 0px) + 46px + 48px);   /* barre, ouverture par l'ancre, titre (40 px × 1,15, une ligne), marge du corps */
    --apres-dessin: calc(8px + 20px + var(--air));                                               /* l'étiquette (marge, une ligne) et l'air sous elle */
    --air: 16px;
    --dessin-plancher: 288px;
  }
  #verifications .vue-tq { --dessin: min(100%, max(var(--dessin-plancher), (100vh - var(--avant-dessin) - var(--apres-dessin)) / ((1 - var(--t)) * var(--hw)))); }
}
/* le dessin : l'image rendue (fond transparent, à même le papier, sans planche, comme la palette de l'ouverture) et, par-dessus,
   la projection du centre de gravité (dans le repère de l'image), la cote, les repères et leurs traits de rappel (posés en
   pixels, calés sur le pixel : des bords de boîte, que le navigateur aligne sur la grille de l'écran, et non des tracés
   vectoriels, qu'il étale sur deux pixels) */
#verifications .vue { position: relative; aspect-ratio: 2880 / 2825; }
#verifications .vue img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
#verifications .habillage { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
/* de trois quarts, le centre de gravité est dans la charge : un pointillé rouge le reporte, à sa hauteur, sur l'arête cotée (l'arête
   arrière gauche de la palette, la plus à gauche du dessin : la cote reste hors de l'objet) */
#verifications .habillage .projection { fill: none; stroke: var(--rouge-cote); stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
/* la cote du centre de gravité, comme une vraie cote (charte, planche des composants) : hors de l'objet, à gauche de la palette,
   rouge, d'1 px ; deux traits d'attache, à la hauteur du centre de gravité et du plateau, passent le trait de cote de 4 px et
   s'arrêtent à 3 px de l'arête ; flèches de 9 × 6 px à toute largeur, pointes sur les traits d'attache ; chiffre en osifont entre
   le trait et la palette, lu de bas en haut */
#verifications .cote-ligne, #verifications .cote-attache { position: absolute; width: 0; height: 0; pointer-events: none; }
#verifications .cote-ligne { left: calc(var(--g) * 100% - 28px); top: calc(var(--v) * 100%); height: calc((var(--p) - var(--v)) * 100%); border-left: 1px solid var(--rouge-cote); }
#verifications .cote-attache { left: calc(var(--g) * 100% - 32px); width: 29px; border-top: 1px solid var(--rouge-cote); }
#verifications .cote-attache.haut { top: calc(var(--v) * 100% - 0.5px); }
#verifications .cote-attache.bas { top: calc(var(--p) * 100% - 0.5px); }
#verifications .pointe { position: absolute; left: calc(var(--g) * 100% - 30.5px); width: 6px; height: 9px; overflow: visible; pointer-events: none; }
#verifications .pointe.haut { top: calc(var(--v) * 100%); }
#verifications .pointe.bas { top: calc(var(--p) * 100% - 9px); }
#verifications .pointe path { fill: var(--rouge-cote); }
#verifications .cote-texte { position: absolute; left: calc(var(--g) * 100% - 25px); top: calc((var(--v) + var(--p)) / 2 * 100%); writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg); font-family: var(--police-cote); font-size: 15px; line-height: 18px; color: var(--rouge-cote); font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
/* les repères numérotés (charte, planche des composants) : le numéro posé au-dessus de sa cible, relié à elle par un trait de
   rappel vertical d'1 px en pointillé (une bordure : elle reste en couleurs forcées) ; le repère 1 finit sur le point d'encre du
   centre de gravité (tracé, cerné de papier : il reste en couleurs forcées), les repères 2 sur le haut du pictogramme. Un même
   numéro dans la légende */
#verifications .point { position: absolute; left: calc(var(--u) * 100% - 4px); top: calc(var(--w) * 100% - 4px); width: 8px; height: 8px; overflow: visible; pointer-events: none; }
#verifications .point circle { fill: var(--encre); stroke: var(--papier); stroke-width: 1.5; paint-order: stroke; }
#verifications .rappel { position: absolute; width: 0; left: calc(var(--x) * 100% - 0.5px); top: calc(var(--yb) * 100% + 11px); height: calc((var(--yc) - var(--yb)) * 100% - 11px); border-left: 1px dashed var(--encre); pointer-events: none; }
#verifications .rappel.r-cdg { height: calc((var(--yc) - var(--yb)) * 100% - 16px); }
#verifications .bulle { display: inline-grid; place-items: center; flex: 0 0 auto; width: 22px; height: 22px; border: 1.25px solid var(--encre); border-radius: 50%; background: var(--feuille); font-size: 13px; font-weight: 500; line-height: 1; color: var(--encre); font-variant-numeric: tabular-nums; }
#verifications .vue .bulle { position: absolute; left: calc(var(--x) * 100%); top: calc(var(--yb) * 100%); margin: -11px 0 0 -11px; pointer-events: none; }
/* l'étiquette, calée sur le bout gauche de la palette (l'arête cotée) */
#verifications .etiquette { margin: 8px 0 0; padding-left: calc(var(--g) * 100%); font-size: 15px; line-height: 20px; color: var(--encre-3); }
/* les cinq légendes, en colonne à droite du dessin, hors de l'objet : un nom, une ligne, dans l'ordre du lot 5. Celles qui ont un
   repère sur le dessin portent son numéro ; les autres gardent sa place, vide (un même retrait pour toutes) */
#verifications .legendes { grid-column: 6 / -1; display: flex; flex-direction: column; gap: 16px; min-width: 0; margin: 0; padding: 0; list-style: none; }
#verifications .legende { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 8px; align-items: start; font-size: 15px; line-height: 20px; }
#verifications .legende .marque { width: 22px; height: 22px; margin-top: -1px; }
#verifications .legende .nom { font-weight: 500; color: var(--encre); }
#verifications .legende .ligne { display: block; color: var(--encre-2); text-wrap: pretty; }
@media (max-width: 1199px) {
  /* la tablette, et le petit bureau : le titre et le texte d'abord, sur toute la largeur ; puis le dessin et les légendes, une
     moitié chacun, partis de la même ligne */
  #verifications h2 { max-width: none; }
  #verifications .propos { grid-column: 1 / -1; max-width: 640px; }
  #verifications .planche { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 32px; }
  #verifications .vue-tq { grid-column: 1; }
  #verifications .legendes { grid-column: 2; }
}
@media (min-width: 744px) and (max-width: 1199px) {
  /* au-dessus de la ligne de départ, en plus : le texte (deux lignes de 27 px sur 640 px), le lien (16 + 44 px), la marge de la planche */
  #verifications { --avant-dessin: calc(var(--barre) + 16px + env(safe-area-inset-top, 0px) + 46px + 48px + 2 * 27px + 16px + 44px + 32px); }
}
@media (max-width: 743px) {
  #verifications { margin-top: 64px; }
  #verifications h2 { font-size: 32px; }
  #verifications .corps { margin-top: 24px; }
  /* le téléphone : le dessin, puis les cinq légendes en liste dessous */
  #verifications .planche { display: block; margin-top: 32px; }
  #verifications .vue-tq { margin-top: 0; }
  #verifications .legendes { margin-top: 24px; }
}