/* La section 4 de l'accueil (#produit) : « De votre fichier au quai. », reprise du prototype publié (section-4, version 2 du
   22/10, md5 cbd68ef5). Chaque règle est portée sous #produit (plan v2.1, § 2.7) ; page, barre, menu et noms courts : le gabarit
   et css/commun.css ; marques d'arrêt : les jetons. Ce qui change : S2/RAPPORT-S2.md, § 2. */
#produit .mot { white-space: nowrap; }   /* un mot composé (lave-vaisselle) ne se coupe pas à son trait d’union : Jost n’a pas le trait d’union insécable */
#produit :is(.lien, .fichier):focus-visible { outline: 2px solid var(--bleu-plan); outline-offset: 2px; }

/* ── la section 4 ──────────────────────────────────────────────────────────────────────────────────────────────────────────
   Le titre sur les colonnes 1 à 8 au bureau ; le texte sur 628 px au plus (colonnes 1 à 6 du bureau, comme la section 3) ;
   dessous, les trois objets, reliés par un trait ; la ligne de liens sous l’ensemble. La section est la boîte de mesure
   (container-type) : les tailles des documents et la place du trait se calculent sur sa largeur, celle de la grille */
/* l'espace entre deux sections (espace.9 : 96 px, 64 au téléphone), comme dans le prototype : déclaré ici, sous la
   section, tant que le commun ne l'a pas (DEMANDE du rapport S2) */
#produit { --entre-sections: 64px; }
@media (min-width: 744px) { #produit { --entre-sections: 96px; } }
#produit { position: relative; margin-top: var(--entre-sections); container-type: inline-size; }
#produit .ancre { position: absolute; top: 0; left: 0; }   /* un autre nom de la section, sans prendre de place */
#produit h2 { margin: 0; font-size: 32px; line-height: 1.15; font-weight: 400; letter-spacing: -0.02em; color: var(--encre); text-wrap: balance; }
#produit .propos { margin: 24px 0 0; max-width: 628px; font-size: 18px; line-height: 1.5; color: var(--encre-2); text-wrap: pretty; }

/* le fichier : un vrai tableau de texte (construire.py l’écrit depuis le fichier de l’exemple, ses six premières lignes telles
   qu’écrites). Tableaux de la charte : en-têtes de 13 px en encre 3, lignes de 44 px au moins, filets de grille, aucun zébrage,
   chiffres tabulaires alignés à droite ; une surface blanche bordée de grille, coins de 8 px. Les cases en 15 px, le petit texte
   de l’échelle du site : les données d’un fichier montré, comme une légende. Aucune réaction au survol (plan, § 3.1). Le cadre
   défile si le tableau ne tient pas (zoom, police agrandie) : le script le rend alors atteignable au clavier */
#produit .objet-fichier { position: relative; z-index: 1; min-width: 0; }
#produit .fichier { position: relative; z-index: 1; overflow-x: auto; border-radius: 8px; container-type: inline-size; }   /* le cadre qui défile ; le tableau porte la surface et le filet */
#produit .tableau { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--grille); border-radius: 8px; background: var(--feuille); font-variant-numeric: tabular-nums; }
#produit .tableau th { padding: 8px; font-size: 13px; line-height: 17px; font-weight: 500; color: var(--encre-3); text-align: left; vertical-align: bottom; border-bottom: 1px solid var(--grille); }
#produit .tableau td { height: 44px; padding: 12px 8px; font-size: 15px; line-height: 20px; color: var(--encre); text-align: left; vertical-align: top; }
#produit .tableau tbody tr + tr td { border-top: 1px solid var(--grille); }
#produit .tableau :is(th, td):first-child { padding-left: 12px; }
#produit .tableau :is(th, td):last-child { padding-right: 12px; }
#produit .tableau .court { width: 1%; }   /* les colonnes courtes à la largeur de leur en-tête (deux lignes au plus) ; la désignation prend le reste */
@container (min-width: 960px) { #produit .tableau .court { width: auto; } }   /* un tableau de 960 px et plus : toutes les colonnes tiennent sur une ligne ; la largeur se répartit entre elles, la désignation ne garde pas seule tout le blanc */
#produit .tableau .nombre { text-align: right; }
#produit .tableau td.nombre { white-space: nowrap; }   /* la valeur d'un tenant ; l'en-tête, lui, passe à la ligne (« Longueur / (cm) ») */
#produit .tableau .designation { min-width: 160px; text-wrap: balance; }   /* sur deux lignes, deux lignes égales : « Barquettes aluminium / 1 L, carton de 500 », pas « … carton / de 500 » */
#produit .tableau td.non { color: var(--encre-3); }   /* « Non » en encre 3, « Oui » en encre : comme le « non » du tableau des prix */
/* la marque d’arrêt (charte, Composants et nuancier du 14/10) : le numéro dans un carré de la couleur de l’arrêt, coins de 4 px,
   chiffre en encre ou en blanc selon ce qui atteint 4,5:1 ; carré de 20 px et chiffre de 13 px en 500, comme les légendes de
   l’ouverture ; couleurs : les jetons d'arrêt de la charte (alias --arret-N du commun) */
#produit .carre { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 4px; font-size: 13px; font-weight: 500; line-height: 1; vertical-align: top; }
#produit .carre.a1 { background: var(--arret-1); color: var(--arret-1-chiffre); }
#produit .carre.a2 { background: var(--arret-2); color: var(--arret-2-chiffre); }
#produit .carre.a3 { background: var(--arret-3); color: var(--arret-3-chiffre); }
#produit .carre.a4 { background: var(--arret-4); color: var(--arret-4-chiffre); }
#produit .carre.a5 { background: var(--arret-5); color: var(--arret-5-chiffre); }
#produit .carre.a6 { background: var(--arret-6); color: var(--arret-6-chiffre); }
#produit .carre.a7 { background: var(--arret-7); color: var(--arret-7-chiffre); }
#produit .carre.a8 { background: var(--arret-8); color: var(--arret-8-chiffre); }
#produit .phrase-tel { display: none; margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--encre-2); text-wrap: pretty; }
#produit .legende-fichier { margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: var(--encre-2); text-wrap: pretty; }
#produit .legende-fichier .nom { display: block; font-weight: 500; color: var(--encre); }

/* les places du rapport et du guide (D5 : au lancement, ni image du PDF ni écran du guide) : des feuilles blanches à filet de
   grille, coins de 8 px, qui portent le nom du document (24 px, 500) et ce qu’il contient (15 px, encre 2), mots des textes v1,
   § 5 ; à la proportion d’une page A4 et d’un écran de téléphone (20 : 9), de même hauteur ; l’image les remplacera à la même place */
#produit .document { position: relative; z-index: 1; min-width: 0; border: 1px solid var(--grille); border-radius: 8px; background: var(--feuille); padding: 24px; }
#produit .document h3 { margin: 0; font-size: 24px; line-height: 1.15; font-weight: 500; color: var(--encre); text-wrap: balance; }
#produit .document ul { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; font-size: 15px; line-height: 1.5; color: var(--encre-2); }
#produit .document li { text-wrap: pretty; }
/* la maquette du PDF et celle du guide (décision n° 16 du 25/10) : l'image remplit la feuille, qui a déjà la proportion d'une page A4 et
   celle d'un écran de téléphone ; le nom du document reste dans le HTML pour les lecteurs d'écran (h3.lecteur) ; recadrage : au plus 1 % */
#produit .document:has(> img) { padding: 0; overflow: hidden; }
#produit .document > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* le trait de rappel (plan, section 4 : « reliés par un seul trait de rappel en pointillé ») : un seul élément, posé derrière les
   objets, opaques (le tableau et les feuilles sont blancs) ; il ne se voit qu’entre eux. Une bordure d’1 px en pointillé, en encre, comme le trait de rappel de la
   section 2 (une bordure reste visible en couleurs forcées) */
#produit .trait { position: relative; z-index: 0; pointer-events: none; }

/* la ligne de liens (textes v1, § 5 ; plan visuel : sans point médian, 32 px entre deux liens) : bleu plan souligné, une cible de
   44 px chacun ; le premier est un téléchargement, jamais un envoi (Q6) ; le dernier porte les anciennes ancres #gabarits et
   #integrations (plan : un lien partagé vers elles arrive sur la phrase qui dit où aller). Le lien du rapport, entre les deux, est caché
   au lancement (décision d’Alex n° 12 du 22/10) : il attend dans le HTML, en commentaire (repère LIEN-DU-RAPPORT), le PDF redessiné ;
   .lien:not([href]) et .trou (le trou de sa taille, comme au plan visuel) ne servent qu’à lui, gardés pour son retour.
   Un lien est un bloc de texte (44 px par son rembourrage), jamais un conteneur flex : un lien qui passe à la ligne et contient le
   trou se disloquerait en colonnes */
#produit .liens { display: flex; flex-wrap: wrap; column-gap: 32px; margin: 32px 0 0; min-width: 0; }
#produit .lien { position: relative; display: inline-block; padding-block: 10px; font-size: 16px; line-height: 24px; color: var(--bleu-plan); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-wrap: balance; }
#produit .lien[href]:hover { text-decoration-thickness: 2px; }
#produit .lien:not([href]) { cursor: default; }
#produit .trou { padding: 0 4px; border-radius: 4px; background: var(--grille); color: var(--encre); white-space: nowrap; }   /* le trou d'un tenant */

/* ── le téléphone (sous 744 px ; décision n° 31 d’Alex : un rendu correct, sans effort d’amélioration) : le cadre du plan visuel,
   les objets l’un sous l’autre ; le tableau n’a que trois colonnes (Désignation, Arrêt, Ne pas gerber), suivies de la phrase du
   plan visuel ; le trait vertical, à 24 px du bord, part du bas du bloc du fichier (sa légende) et finit au milieu du guide :
   ses marges le posent sur les rangées de la grille, quelle que soit la hauteur du tableau ; les liens l’un sous l’autre */
#produit .chaine { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; margin-top: 32px; }
#produit .objet-fichier { grid-column: 1; grid-row: 1; }
#produit .rapport { grid-column: 1; grid-row: 2; width: 240px; aspect-ratio: 210 / 297; margin-top: 48px; }
#produit .guide { grid-column: 1; grid-row: 3; width: 180px; height: 400px; margin-top: 48px; }
#produit .trait { grid-column: 1; grid-row: 2 / 4; align-self: stretch; justify-self: start; width: 0; margin: 0 0 200px 24px; border-left: 1px dashed var(--encre); }
#produit .liens { grid-column: 1; grid-row: 4; flex-direction: column; align-items: flex-start; }
@media (max-width: 743px) {
  #produit .tableau .tel-non { display: none; }
  #produit .phrase-tel { display: block; }
}

/* ── la tablette et le petit bureau (744 à 1 199 px) : deux rangées. Le tableau sur toute la largeur ; dessous, à gauche, sa légende
   puis les liens l’un sous l’autre ; à droite, le rapport et le guide côte à côte, de même hauteur --h : le bloc des deux documents
   prend les colonnes 6 à 12, au plus 380 px de haut (une page A4 de 269 px de large), aligné à droite. Les documents et le trait
   courent sur les rangées 2 et 3, la troisième élastique : leur hauteur ne repousse jamais les liens. Le trait descend du tableau
   dans le rapport (en son milieu), puis file à mi-hauteur jusqu’au guide : on n’en voit que la descente et le passage entre les
   deux documents */
@media (min-width: 744px) {
  #produit h2 { font-size: 40px; letter-spacing: -0.03em; }
  #produit .chaine { margin-top: 48px; }
}
@media (min-width: 744px) and (max-width: 1199px) {
  #produit .chaine { --col: calc((100cqw - 11 * 24px) / 12); --h: min(calc((var(--col) * 7 + 5 * 24px) / 1.15711), 380px);
    grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; column-gap: 24px; row-gap: 24px; }
  #produit .objet-fichier { display: contents; }
  #produit .fichier { grid-column: 1 / -1; grid-row: 1; }
  #produit .legende-fichier { grid-column: 1 / span 5; grid-row: 2; margin: 0; }
  #produit .liens { grid-column: 1 / span 5; grid-row: 3; margin: 8px 0 0; }   /* 32 px sous la légende (la rangée en donne 24) */
  #produit .rapport { grid-column: 1 / -1; grid-row: 2 / span 2; justify-self: end; width: calc(var(--h) * 0.70711); height: var(--h); aspect-ratio: auto; margin: 0 calc(var(--h) * 0.45 + 24px) 0 0; }
  #produit .guide { grid-column: 1 / -1; grid-row: 2 / span 2; justify-self: end; width: calc(var(--h) * 0.45); height: var(--h); margin: 0; }
  #produit .trait { grid-column: 1 / -1; grid-row: 2 / span 2; align-self: start; justify-self: end; width: calc(var(--h) * 0.35355 + 32px); height: calc(32px + var(--h) / 2);
    margin: -32px calc(var(--h) * 0.45 - 8px) 0 0; border-left: 1px dashed var(--encre); border-bottom: 1px dashed var(--encre); }
}

/* ── le bureau (1 200 px et plus, comme la section 2) : les trois objets sur une ligne, alignés en haut (plan visuel, hypothèse 9) :
   le tableau sur les colonnes 1 à 7, la page du rapport sur 8 à 10 (proportion A4), l’écran du guide sur 11 et 12, de la même
   hauteur --h que la page du rapport (une proportion de 2,2 environ : un écran de 20 : 9) ; la légende sous le tableau ; la ligne
   de liens sous l’ensemble. Le trait horizontal, à mi-hauteur des documents, du tableau au guide (colonnes 7 à 10, ses marges
   l’amènent 8 px derrière le bord de chacun) : on n’en voit que les deux gouttières */
@media (min-width: 1200px) {
  #produit h2 { max-width: calc((100% - 11 * 24px) / 12 * 8 + 7 * 24px); }
  #produit .chaine { --col: calc((100cqw - 11 * 24px) / 12); --h: calc((var(--col) * 3 + 2 * 24px) * 1.41421);
    grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  #produit .objet-fichier { grid-column: 1 / span 7; grid-row: 1; }
  #produit .rapport { grid-column: 8 / span 3; grid-row: 1; width: auto; height: var(--h); aspect-ratio: auto; margin: 0; }
  #produit .guide { grid-column: 11 / span 2; grid-row: 1; width: auto; height: var(--h); margin: 0; }
  #produit .trait { grid-column: 7 / 11; grid-row: 1; align-self: start; justify-self: stretch; width: auto; height: 0;
    margin: calc(var(--h) / 2) -32px 0 calc(var(--col) - 8px); border-left: 0; border-top: 1px dashed var(--encre); }
  #produit .liens { grid-column: 1 / -1; grid-row: 2; flex-direction: row; align-items: center; margin: 32px 0 0; }
}
/* couleurs forcées (Windows) : les bordures restent (trait, cadres), le fond des marques d’arrêt aussi (le numéro suffit) */
@media (forced-colors: active) {
  #produit .carre { forced-color-adjust: none; }   /* la couleur de l’arrêt est une information : on la garde, avec son chiffre */
}