/* Outil · Règle de 3 (Rule of three) : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : r3-
   A → B sur la première ligne, C → D sur la seconde : les champs « sortent » de leur label (comme .dims) pour
   que la flèche soit à la hauteur des champs. */
.r3.outil-page { max-width: 600px; }   /* quatre nombres : pas besoin de toute la largeur */
.r3-grille { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--libelle) 12px; }
.r3-grille .champ { display: contents; }
.r3-grille .champ:nth-of-type(1) > span { grid-area: 1 / 1; } .r3-grille .champ:nth-of-type(1) > input { grid-area: 2 / 1; }
.r3-grille .champ:nth-of-type(2) > span { grid-area: 1 / 3; } .r3-grille .champ:nth-of-type(2) > input { grid-area: 2 / 3; }
.r3-grille .champ:nth-of-type(3) > span { grid-area: 3 / 1; margin-top: 14px; } .r3-grille .champ:nth-of-type(3) > input { grid-area: 4 / 1; }
.r3-grille .champ:nth-of-type(4) > span { grid-area: 3 / 3; margin-top: 14px; } .r3-grille .champ:nth-of-type(4) > input { grid-area: 4 / 3; cursor: copy; }
.r3-fleche { display: grid; place-items: center; font: 400 22px/1 var(--display); color: var(--texte2); }
.r3-fleche:nth-of-type(1) { grid-area: 2 / 2; }
.r3-fleche:nth-of-type(2) { grid-area: 4 / 2; }
.r3-formule { margin-top: -6px; }
.r3-note { margin: 0; min-height: 3lh; text-align: center; text-wrap: balance; font: 400 13px/1.5 var(--corps); color: var(--texte2); }