/* Outil · Mon appareil (This device) : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : ap-

   Mise en page : la structure commune .outil-colonnes (app/kit.css).
   Téléphone : l'IP, le résumé, les boutons, puis le détail. Ordinateur : tout ça à gauche, le détail à droite. */
.ap .outil-fixe { align-items: stretch; }

/* L'IP : la grande ligne, touchée = copiée ; une IPv6 (longue) en plus petit, coupée où il faut */
.ap-carte { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; border-radius: 18px; background: var(--encre); box-shadow: inset 0 0 0 1px var(--filet); }
.ap-carte .groupe { padding: 0; }
.ap-ip { border: 0; background: none; padding: 0; text-align: left; color: var(--papier); cursor: pointer;
  font: 700 clamp(28px, 8.5vw, 46px)/1.1 var(--display); letter-spacing: -.03em; overflow-wrap: anywhere; transition: color .3s var(--courbe); }
.ap-ip.long { font-size: clamp(18px, 5.2vw, 26px); letter-spacing: -.01em; }
.ap-ip.vide { color: var(--texte2); font-size: clamp(22px, 6vw, 30px); cursor: default; }
.ap-ip:not(.vide):hover { color: var(--peche); }
.ap-ip:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; border-radius: 8px; }
.ap-lieu { margin: 0; min-height: 1.5em; font: var(--valeur); letter-spacing: .06em; color: var(--texte2); }

/* Le résumé de l'appareil */
.ap-puces { display: flex; flex-wrap: wrap; gap: 8px; }
.ap-puces span { border-radius: 999px; padding: 8px 13px; box-shadow: inset 0 0 0 1px var(--filet); color: var(--papier);
  font: var(--valeur); line-height: 1; letter-spacing: .06em; }

.ap-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ap-actions .pastille:hover { translate: none; }
.ap-note { margin: 0; text-align: left; font: 400 13px/1.5 var(--corps); letter-spacing: 0; }

/* Le détail : une ligne par info, touchée = copiée ; une petite note sous certaines sections */
.ap-ligne { align-items: baseline; }
.ap-ligne .nom { flex: none; max-width: 55%; color: var(--texte2); font-weight: 400; }
.ap-ligne .val { min-width: 0; white-space: normal; overflow-wrap: anywhere; text-align: right; color: var(--papier); }
.ap-ligne:hover .nom { color: var(--texte2); }
.ap-ligne:hover .val { color: var(--peche); }
.ap-sous { margin: 10px 0 0; font: 400 13px/1.5 var(--corps); color: var(--texte2); }