/* Outil · À propos : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : ap-
   Même mise en page que les guides (Codecs, Conteneurs) : à gauche les six points en tuiles, la signature et les liens
   dessous ; à droite la fiche du point choisi (texte de hauteur fixe), le mot du créateur, les crédits. */
.ap .outil-fixe { align-items: stretch; }

/* Les tuiles : deux colonnes, l'icône, le titre, un sous-titre court */
.ap-tuiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ap-tuile { height: 112px; border: 0; border-radius: 14px; background: transparent; box-shadow: inset 0 0 0 1px var(--filet-doux); padding: 14px; cursor: pointer;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 4px; text-align: left;
  transition: background .3s var(--courbe), box-shadow .3s var(--courbe); }
@media (min-width: 960px) { .ap-tuile { height: 128px; padding: 16px; } }
.ap-tuile .ap-icone { margin-bottom: auto; }
.ap-tuile b { font: 600 13.5px/1.25 var(--corps); color: var(--papier); max-width: 100%; }
.ap-tuile span { font: 500 10.5px/1.2 var(--mono); letter-spacing: .06em; color: var(--texte2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-tuile:hover { background: rgba(242, 240, 235, .04); }
.ap-tuile[aria-pressed="true"] { background: rgba(242, 240, 235, .08); box-shadow: inset 0 0 0 1px var(--papier); }
.ap-tuile:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.ap-icone { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--papier); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.ap-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ap-actions .pastille { text-decoration: none; }
.ap-actions .pastille:hover { translate: none; }

/* La fiche du point choisi */
.ap-fiche { display: flex; flex-direction: column; gap: 10px; }
.ap-tete { display: flex; align-items: center; gap: 12px; height: 34px; }
.ap-tete h3 { margin: 0; font: 700 22px/1.1 var(--display); letter-spacing: -.02em; color: var(--papier); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-texte { margin: 0; height: 6lh; overflow: hidden; font: 400 14px/1.55 var(--corps); color: var(--texte2); }
@media (min-width: 960px) { .ap-texte { height: 5lh; } }

/* Le mot du créateur */
.ap-mot { margin: 0; padding-top: 6px; border-top: 1px solid var(--filet-doux); }
.ap-mot blockquote { margin: 0; font: 400 15.5px/1.55 var(--corps); color: var(--papier); text-wrap: pretty; }

/* Les crédits : des rangées du kit, le nom à gauche, qui et la licence à droite */
.ap-credits { padding-top: 6px; border-top: 1px solid var(--filet-doux); }
.ap-credit { cursor: default; align-items: center; gap: 14px; border-bottom: 1px solid var(--filet-doux); }
.ap-credit:last-child { border-bottom: 0; }
.ap-credit .nom { flex: none; color: var(--texte2); font-weight: 400; }
.ap-credit:hover .nom { color: var(--texte2); }
.ap-credit .val { min-width: 0; white-space: normal; text-align: right; color: var(--papier); font: 400 13px/1.4 var(--corps); }
.ap-credit .val small { display: block; font: 500 10.5px/1.4 var(--mono); letter-spacing: .04em; color: var(--texte2); }
/* Téléphone : la fiche juste sous les tuiles (on lit ce qu'on vient de toucher), puis la signature et les liens */
@media (max-width: 959px) { .ap-tuiles { order: -2; } .ap-fiche { order: -1; } }