/* © 2026 DRAK Infinity (NEQ 2281240509). Outil interne.
   Mission 31, lot C, vague 1, agent 1e : ajouts CSS propres à la page Catalogue d'outils (/outils, /en/tools), chargée par
   outils/outils-catalogue-donnees.mjs (balise <link> posée dans le <tete> de la page, pas dans le gabarit commun de
   outils/construire-site.mjs : cette feuille n'est utile qu'à cette page).
   AJOUTS SEULEMENT, au-delà du contrat partagé déjà posé par site/commun/v4.css (agent 0b, mission 31, lot C, vague 0) :
   .v4-sec/.v4-alt, .v4-wrap, .v4-tete, .v4-fil, .v4-eti, .v4-deux/.v4-trois/.v4-quatre, .v4-carte, .v4-note, .v4-btns,
   .v4-intro, .v4-vedette (modificateur de .v4-carte), .v4-produit (modificateur de .v4-carte) sont réutilisés tels quels,
   SANS être redéfinis ici.
   Thèmes (fait 179 f) : jetons déjà établis de site/commun/v3.css (--texte, --texte2, --trait, --or-texte), posés par
   :root[data-theme="clair"/"nuit"]; rien n'est figé en dur, les deux thèmes s'appliquent automatiquement. */

/* .v4-produit .v4-pied : ligne prix + bouton d'achat sous les mentions de chaque fiche d'outil (même disposition que l'ancienne
   .carte .pied de site/site.css, avec les jetons V4 plutôt que les jetons V3, puisque .v4-produit n'a pas encore de pied défini
   par v4.css — seuls la grille, l'image, le <h3> et les <p> y sont posés).
   CORRECTIF (trouvé par outils/tester-boutons-achat.mjs, qui ne cliquait plus : « <span class="prix"> intercepte les événements
   pointeur » d'une carte voisine) : la taille minimale automatique des éléments de grille (« min-width: auto » implicite d'un
   élément de grille ou d'un enfant flex, qui prend la taille de son contenu plutôt que 0) laissait .v4-pied — un conteneur flex
   non coupable — forcer .v4-produit (lui-même un élément de grille de .v4-trois) à dépasser sa colonne (720 px mesurés contre
   452 px attribués, vérifié par capture des rectangles DOM), chevauchant la carte suivante. Correction classique : min-width: 0
   sur l'élément de grille qui déborde ET sur les enfants flex qui refusaient de rétrécir sous leur contenu. */
/* La vraie cause (confirmée en mesurant les rectangles DOM : .v4-mentions et .v4-pied rendaient à 720 px dans une carte de 452 px) :
   .v4-produit n'a qu'UNE colonne implicite (.v4-carte pose display:grid sans grid-template-columns), dimensionnée « auto » —
   c'est-à-dire au max-content de son enfant le plus large. Les longues phrases de C9 (sous-traitants du Kit Loi 96 et du Pack
   Make) ont un max-content bien plus large que 452 px; une colonne « auto » n'est jamais rétrécie sous ce max-content par la
   grille (ce n'est pas comme un bloc, qui enroule son texte à la largeur disponible) : elle déborde, visible par-dessus la carte
   voisine. min-width:0 sur les éléments de grille empêche une colonne de grandir À CAUSE d'un enfant, mais ne change rien à la
   fonction de dimensionnement « auto » de la colonne elle-même. Le correctif qui règle la cause, pas le symptôme :
   grid-template-columns: minmax(0,1fr) — une seule colonne dont le minimum est 0 (jamais le max-content) et le maximum est la
   largeur réellement disponible de la carte; le texte des mentions s'enroule normalement dans cette largeur. */
html[data-theme] .v4-produit{grid-template-columns:minmax(0,1fr)}
html[data-theme] .v4-produit .v4-pied{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:4px;padding-top:14px;border-top:1px solid var(--trait);min-width:0}
html[data-theme] .v4-produit .v4-pied .prix{font-weight:700;color:var(--or-texte);font-size:19px;white-space:nowrap;min-width:0}
html[data-theme] .v4-produit .v4-pied .prix small{display:block;font-weight:400;color:var(--texte2);font-size:12px;white-space:normal}
html[data-theme] .v4-produit .v4-pied a.bouton{min-width:0;white-space:nowrap}
html[data-theme] .v4-produit .v4-mentions{grid-template-columns:minmax(0,1fr)}

/* .v4-produit .v4-mentions : les mentions légales par outil (portée géographique, sous-traitants, mise à jour), empilées sous le
   prix, chacune déjà en .v4-note (11 px, posé par v4.css) — seul l'espacement entre les lignes est ajouté ici, jamais fusionnées
   en une seule note (confirmé par le juriste, C9 du journal de session).
   CORRECTION mission 31-BIS, lot B (retour du contrôleur, deuxième passage, fait 191 c) : gap porté de 2 à 8 px — une mention
   longue (ex. la liste des sous-traitants d'un lot) est maintenant coupée en plusieurs <p class="v4-note"> par
   outils-catalogue-donnees.mjs (fonction noteHtml) pour rester sous 4 lignes chacun, mais le gap de 2 px ne laissait voir
   aucune coupure réelle (un seul pavé de 8 à 12 lignes à l'écran, malgré le balisage en plusieurs paragraphes). 8 px (le
   minimum demandé par le contrôleur) sépare visiblement chaque paragraphe SANS éclater le bloc de petit texte légal en
   lignes trop espacées les unes des autres. */
html[data-theme] .v4-produit .v4-mentions{display:grid;gap:8px;margin-top:2px}
html[data-theme] .v4-produit .v4-mentions .v4-note{margin-top:0}

/* .v4-produit.v4-lot : la carte du lot (fait 186 e, point 3) n'a ni image ni étiquette ni mentions propres (fait 179 d, zéro
   répétition : ses deux produits ont déjà les leurs) — bordure pointillée pour la distinguer visuellement des cinq fiches vendues
   séparément, contenu centré verticalement dans la même grille que .v4-produit. */
html[data-theme] .v4-produit.v4-lot{border-style:dashed;align-content:center;text-align:center}
html[data-theme] .v4-produit.v4-lot .v4-pied{justify-content:center}