/* ==========================================================================
   Bū tools · kit des outils
   Les composants communs à tous les outils, pour qu'ils se ressemblent.
   Un outil n'écrit dans son propre outil.css que ce qui lui est vraiment propre.

   .outil-page        conteneur du contenu d'un outil (colonne centrée, 560 px max)
   .seg               choix segmenté en 2 (ex. Landscape / Portrait), boutons avec aria-pressed
   .puces / .puce     rangée de choix rapides qui défile (ex. ratios), aria-pressed
   .champ             grand champ de nombre avec son libellé ; .auto = valeur calculée (pêche)
   .resume            ligne de résultat : <b> valeur forte, texte mono, .badge orange
   .groupe            titre de section en mono
   .rangee            ligne de liste cliquable : .nom, .val, .note ; états .estompee, .actuelle
   ========================================================================== */

.outil-page { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px;
  padding: 14px calc(var(--gouttiere) + env(safe-area-inset-right)) calc(48px + env(safe-area-inset-bottom)) calc(var(--gouttiere) + env(safe-area-inset-left)); }
.outil-page > .pastille { align-self: flex-start; }

/* Choix segmenté */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--filet); }
.seg button { border: 0; background: none; border-radius: 999px; padding: 10px; display: flex; align-items: center; justify-content: center; gap: 8px;
  font: 500 12px/1 var(--mono); letter-spacing: .08em; color: var(--texte2); transition: background .4s var(--courbe), color .4s var(--courbe); }
.seg button[aria-pressed="true"] { background: var(--papier); color: var(--noir); }
.seg svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }

/* Puces : choix rapides, la rangée défile horizontalement jusqu'aux bords de l'écran */
.puces { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gouttiere) * -1); padding: 2px var(--gouttiere); }
.puces::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .puces { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; } }   /* ordinateur : sur plusieurs lignes */
.puce { flex: none; border: 0; border-radius: 999px; padding: 9px 14px; background: transparent; box-shadow: inset 0 0 0 1px var(--filet);
  color: var(--texte2); font: 500 12px/1 var(--mono); letter-spacing: .06em; transition: background .4s var(--courbe), color .4s var(--courbe); }
.puce[aria-pressed="true"] { background: var(--papier); color: var(--noir); box-shadow: none; }

/* Grand champ de nombre */
.champ { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.champ > span { display: flex; justify-content: space-between; font: 500 11px/1.5 var(--mono); letter-spacing: .1em; color: var(--texte2); }
.champ > span i { font-style: normal; color: var(--peche); }   /* petite mention, ex. « auto » */
.champ input { width: 100%; min-width: 0; border: 0; outline: none; border-radius: 16px; background: var(--encre); box-shadow: inset 0 0 0 1px var(--filet);
  padding: 16px 10px; text-align: center; color: var(--papier); font: 700 clamp(24px, 7.5vw, 38px)/1 var(--display); letter-spacing: -.04em;
  transition: color .4s var(--courbe), box-shadow .4s var(--courbe); }
.champ input:focus { box-shadow: inset 0 0 0 1.5px var(--papier); }
.champ input.auto { color: var(--peche); }
.champ input::placeholder { color: rgba(242, 240, 235, .25); }

/* Ligne de résultat */
.resume { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-height: 30px; font: 500 12px/1.5 var(--mono); letter-spacing: .06em; color: var(--texte2); }
.resume b { font: 700 20px/1 var(--display); letter-spacing: -.03em; color: var(--papier); }
.badge { background: var(--orange); color: var(--noir); border-radius: 999px; padding: 4px 10px; font: 600 11px/1.2 var(--mono); letter-spacing: .06em; }

/* Liste */
.groupe { font: 500 11px/1.5 var(--mono); letter-spacing: .1em; color: var(--texte2); padding: 14px 0 8px; }
.rangee { width: 100%; border: 0; background: none; display: flex; align-items: baseline; gap: 10px; padding: 11px 0; text-align: left; color: var(--papier);
  border-bottom: 1px solid rgba(242, 240, 235, .07); transition: opacity .4s var(--courbe); }
.rangee .nom { font: 500 14px/1.3 var(--corps); }
.rangee .val { margin-left: auto; font: 500 13px/1.3 var(--mono); letter-spacing: .03em; color: var(--texte2); white-space: nowrap; }
.rangee .note { width: 52px; text-align: right; font: 500 11px/1.3 var(--mono); color: var(--texte2); white-space: nowrap; }
.rangee:hover .nom { color: var(--peche); }
.rangee.estompee { opacity: .35; }
.rangee.actuelle .nom::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); margin: 0 8px 1px 0; }
.rangee.actuelle .val { color: var(--papier); }
.rangee:focus-visible, .puce:focus-visible, .seg button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }