/* ==========================================================================
   Bū tools · hub
   L'accueil (grille d'outils), la liste All tools, la couche « outil ouvert »
   et la transition « mise au point » entre les trois.
   ========================================================================== */

/* ---------- Transition « mise au point » ----------
   Comme sur bu-site : le sujet est net, le reste sort du champ.
   --p : liste All tools (0 = fermée, 1 = ouverte) · --q : outil (0 = fermé, 1 = ouvert)
   --dir : 1 = la liste arrive du bas, -1 = du haut · --f : le plus fort des deux, appliqué à l'accueil.
   Pendant un glissement au doigt, html.glisse coupe les transitions : l'animation suit le doigt. */
:root { --p: 0; --q: 0; --dir: 1; --f: max(var(--p), var(--q)); }
.page, .lumiere, .feuille, .vue { transition: filter .7s var(--courbe), transform .7s var(--courbe), opacity .5s var(--courbe); }
.page { filter: blur(calc(var(--f) * 12px)); opacity: calc(1 - var(--f) * .55);
  transform: translateY(calc(var(--p) * var(--dir) * -24px)) scale(calc(1 - var(--f) * .05)); }
.lumiere { opacity: calc(1 - var(--f) * .4); }
html.glisse :is(.page, .lumiere, .feuille, .vue),
html.sans-anim :is(.page, .lumiere, .feuille, .vue) { transition: none; }

/* ---------- Accueil ---------- */
.page { position: relative; z-index: 2; flex: 1; min-height: 0; display: flex; flex-direction: column;
  width: 100%; max-width: 1120px; margin: 0 auto;
  padding: env(safe-area-inset-top) calc(var(--gouttiere) + env(safe-area-inset-right)) env(safe-area-inset-bottom) calc(var(--gouttiere) + env(safe-area-inset-left)); }
/* Pas d'en-tête : pas de logo (l'icône de l'app et le favicon suffisent), pas de bouton ; la recherche s'ouvre depuis le bas */

/* Zone des icônes : la grille est centrée ; en mode édition, les outils à ajouter défilent dessous et s'effacent en fondu */
main { flex: 1; min-height: 0; padding-top: 18px; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 48px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 48px), transparent 100%); }
main::-webkit-scrollbar { display: none; }
.centre { margin: auto 0; padding: 24px 0 40px; }             /* margin auto : centré quand tout tient, rien de coupé sinon */

/* Grille parfaite : cases identiques, 3×3 sur téléphone, 4×3 sur ordinateur, toujours centrée */
.grille { --cols: 3; --case: min(116px, calc((100vw - 2 * var(--gouttiere) - 16px) / 3)); --nom-base: 12.5px;
  list-style: none; margin: 0; padding: 0; display: grid; justify-content: center;
  grid-template-columns: repeat(var(--cols), var(--case)); grid-auto-rows: calc(var(--icone) + 38px); gap: 22px 8px; }
@media (min-width: 768px) { .grille { --cols: 4; --case: 150px; --nom-base: 13.5px; gap: 36px 16px; } }
.grille > li { min-width: 0; }
.tuile { position: relative; width: 100%; height: 100%; border: 0; background: none; padding: 4px 0; border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; }
.tuile .ic { transition: transform .6s var(--courbe); }
.tuile:hover .ic { transform: translateY(-3px); }
.tuile:active .ic { transform: scale(.94); transition-duration: .15s; }
/* Nom sur une seule ligne ; s'il ne tient pas, tous les noms rapetissent ensemble (hub.js, ajusterNoms) */
.tuile .nom { font: 500 var(--nom-taille, var(--nom-base))/1.3 var(--corps); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* Icône d'outil : carré arrondi encre, pictogramme en trait papier, un seul détail orange (classes o, of, pf dans le SVG) */
.ic { width: var(--icone); height: var(--icone); flex: none; border-radius: 24%; background: var(--encre); display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px rgba(242, 240, 235, .07); }
.ic svg { width: 56%; height: 56%; fill: none; stroke: var(--papier); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ic svg .o { stroke: var(--orange); }
.ic svg .of { fill: var(--orange); stroke: none; }
.ic svg .pf { fill: var(--papier); stroke: none; }

/* Badge « New » : pastille orange, réservée aux nouveautés */
.new { position: absolute; top: -4px; left: 50%; margin-left: calc(var(--icone) / 2 - 22px);
  background: var(--orange); color: var(--noir); border-radius: 999px; padding: 3px 7px; font: 600 9.5px/1.2 var(--mono); letter-spacing: .06em; }

/* Mode édition (Rearrange tools) : − pour retirer, + pour ajouter, cases libres en pointillés */
.retirer, .ajouter { position: absolute; top: -6px; left: 50%; margin-left: calc(var(--icone) / -2 - 6px); width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font: 600 16px/1 var(--corps); border: 2px solid var(--noir); }
.retirer { background: var(--papier); color: var(--noir); }
.ajouter { background: var(--orange); color: var(--noir); }
.place { display: flex; justify-content: center; padding-top: 4px; }
.place span { width: var(--icone); height: var(--icone); border-radius: 24%; border: 1.5px dashed var(--filet); }
.cachees { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--filet); }
.cachees .barre { display: flex; justify-content: center; margin-bottom: 14px; }
.cachees .ic { opacity: .5; }
.vide { color: var(--texte2); font-size: 14px; }

/* Bas : l'accès à la recherche, très discret (« type to search » sur ordinateur, « swipe up to search » au doigt) ;
   en mode édition, « Done » à la place */
.bas { flex: none; display: flex; justify-content: center; padding: 6px 0 34px; }
.bas .lien { font: 500 10.5px/1.5 var(--mono); letter-spacing: .1em; color: var(--texte2); opacity: .7;
  text-decoration-color: transparent; transition: color .4s var(--courbe), opacity .4s var(--courbe), text-decoration-color .4s var(--courbe); }
.bas .lien:hover { opacity: 1; color: var(--papier); text-decoration-color: currentColor; }
.si-clavier { display: none; }
@media (hover: hover) and (pointer: fine) { .si-clavier { display: inline; } .si-tactile { display: none; } }
#btnFini, .edition #btnChercher { display: none; }
.edition #btnFini { display: inline; }

/* ---------- All tools : liste A→Z, recherche, réglages ---------- */
.feuille { position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column; background: rgba(18, 16, 14, .62);
  opacity: var(--p); filter: blur(calc((1 - var(--p)) * 10px)); transform: translateY(calc((1 - var(--p)) * var(--dir) * 48px));
  visibility: hidden; transition: filter .7s var(--courbe), transform .7s var(--courbe), opacity .5s var(--courbe), visibility 0s .7s; }
html.ouvert .feuille, html.glisse .feuille { visibility: visible; transition: filter .7s var(--courbe), transform .7s var(--courbe), opacity .5s var(--courbe); }
.feuille .tete { width: 100%; max-width: 760px; margin: 0 auto; display: flex; align-items: center; gap: 10px;
  padding: calc(18px + env(safe-area-inset-top)) var(--gouttiere) 12px; }
.feuille h2 { margin: 0 auto 0 0; font: 700 22px/1 var(--display); letter-spacing: -.04em; }
.recherche { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 var(--gouttiere) 8px; }
.recherche input { width: 100%; border: 0; outline: none; border-radius: 999px; background: var(--encre); padding: 13px 18px; font-size: 16px;
  box-shadow: inset 0 0 0 1px var(--filet); }
.recherche input:focus { box-shadow: inset 0 0 0 1px var(--papier); }
.recherche input::placeholder { color: var(--texte2); }
.liste { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.liste > div { max-width: 760px; margin: 0 auto; padding: 0 var(--gouttiere) calc(32px + env(safe-area-inset-bottom)); }
.lettre { font: 500 11px/1.5 var(--mono); letter-spacing: .1em; color: var(--texte2); padding: 18px 0 6px; }
.ligne { width: 100%; border: 0; background: none; border-radius: 10px; display: flex; align-items: center; gap: 14px; padding: 8px 0; text-align: left; }
.ligne .ic { --icone: 44px; }
.ligne .ic svg { stroke-width: 2.8; }
.ligne .nom { font-weight: 500; }
.ligne .type { margin-left: auto; font: 500 11px/1.5 var(--mono); letter-spacing: .1em; color: var(--texte2); }
.ligne .new { position: static; margin: 0; }
.ligne:hover .nom { color: var(--peche); }
/* ---------- Outil ouvert : couche commune à tous les outils ----------
   En-tête : flèche retour en haut à gauche, puis le nom de l'outil.
   Retour : la flèche, le bouton retour du téléphone / navigateur, Échap, ou glisser depuis le bord gauche. */
.vue { position: fixed; inset: 0; z-index: 9; display: flex; flex-direction: column; background: rgba(18, 16, 14, .84);
  opacity: var(--q); filter: blur(calc((1 - var(--q)) * 10px)); transform: scale(calc(.96 + var(--q) * .04));
  visibility: hidden; transition: filter .7s var(--courbe), transform .7s var(--courbe), opacity .5s var(--courbe), visibility 0s .7s; }
.vue:focus { outline: none; }
html.outil .vue, html.glisse .vue { visibility: visible; transition: filter .7s var(--courbe), transform .7s var(--courbe), opacity .5s var(--courbe); }
.vue-tete { width: 100%; max-width: 560px;                    /* même largeur que .outil-page : flèche et titre alignés sur le contenu */
   margin: 0 auto; display: flex; align-items: center; gap: 14px;
  padding: calc(18px + env(safe-area-inset-top)) calc(var(--gouttiere) + env(safe-area-inset-right)) 10px calc(var(--gouttiere) + env(safe-area-inset-left)); }
.vue-tete h2 { margin: 0; font: 700 22px/1 var(--display); letter-spacing: -.04em; }
.vue-corps { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 32px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 32px), transparent 100%); }