/* Outil · Pellicules (Film stocks) : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : pe-
   À gauche : les pellicules en tuiles, regroupées par type (zone fixe qui défile ; grisées hors du type ou de la recherche).
   À droite : la recherche, les types, la fiche (rendu sur 3 lignes fixes, 7 lignes), le push / pull (5 crans, verdict,
   note sur 3 lignes fixes), les formats de film (schéma à l'échelle, 4 lignes, disponibilité). Au téléphone : recherche
   et types d'abord. */
.pe .outil-fixe { align-items: stretch; }
.pe-zone { height: 520px; overflow-y: auto; overscroll-behavior: contain; padding: 4px 4px 12px; display: flex; flex-direction: column; gap: 18px; scroll-behavior: smooth; }
.pe-type .groupe { margin-bottom: 8px; }
.pe-tuiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 960px) { .pe-tuiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pe-tuile { height: 70px; border: 0; border-radius: 12px; background: transparent; box-shadow: inset 0 0 0 1px var(--filet-doux); padding: 8px 12px; cursor: pointer;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 3px; text-align: left; transition: background .3s var(--courbe), box-shadow .3s var(--courbe), opacity .3s var(--courbe); }
.pe-tuile .pe-marque { font: 500 10px/1.2 var(--mono); font-style: normal; letter-spacing: .04em; color: var(--texte2); }
.pe-tuile b { font: 600 13px/1.2 var(--corps); color: var(--papier); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pe-tuile span { font: 500 10.5px/1.2 var(--mono); letter-spacing: .04em; color: var(--texte2); }
.pe-tuile:hover { background: rgba(242, 240, 235, .04); }
.pe-tuile[aria-pressed="true"] { background: rgba(242, 240, 235, .08); box-shadow: inset 0 0 0 1px var(--papier); }
.pe-tuile.pe-eteint { opacity: .22; }
.pe-info { flex: none; height: 1lh; margin: 0; }
.pe-maj { flex: none; margin: -10px 0 0; text-align: center; font: 500 10.5px/1.3 var(--mono); letter-spacing: .04em; color: var(--texte2); opacity: .7; }

.pe-types { flex-wrap: wrap; }
.pe-fiche { display: flex; flex-direction: column; gap: 8px; }
.pe-tete { display: flex; align-items: center; gap: 12px; height: 34px; }
.pe-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; }
.pe-rendu { margin: 0 0 4px; height: 3lh; overflow: hidden; font: 400 13.5px/1.5 var(--corps); color: var(--texte2); }
.pe-fait { height: 42px; cursor: default; }
.pe-fait .val { white-space: normal; text-align: right; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

.pe-push, .pe-formats { display: flex; flex-direction: column; gap: 10px; }
.pe-stops { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pe-stops button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 0; }
.pe-stops b { font: 600 14px/1.1 var(--corps); font-variant-numeric: tabular-nums; }
.pe-stops span { font: 500 10.5px/1.1 var(--mono); opacity: .7; }
.pe-verdict { display: flex; flex-direction: column; gap: 4px; }
.pe-verdict b { height: 1.3em; font: 700 18px/1.3 var(--display); letter-spacing: -.01em; color: var(--papier); }
.pe-verdict b[data-etat="trop"] { color: var(--peche); }
.pe-verdict p { margin: 0; height: 3lh; overflow: hidden; font: 400 13.5px/1.5 var(--corps); color: var(--texte2); }

.pe-puces { flex-wrap: wrap; }
.pe-puces .puce { cursor: pointer; }
.pe-schema { width: 100%; height: 128px; display: block; margin: 4px 0; }
.pe-cadre { fill: rgba(var(--orange-rgb), .14); stroke: var(--orange); stroke-width: 1.5; }
.pe-ref { fill: rgba(242, 240, 235, .06); stroke: var(--papier); stroke-width: 1; stroke-dasharray: 3 3; }
.pe-cote { font: 500 11px var(--mono); fill: var(--texte2); text-anchor: end; }
.pe-cote-h, .pe-cote-ref { text-anchor: middle; }
.pe-cote-ref { font-size: 9.5px; fill: var(--papier); opacity: .7; }
.pe-dispo { margin: 2px 0 0; height: 1lh; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 500 12px/1.5 var(--mono); color: var(--texte2); }
.pe-dispo[data-etat="non"] { color: var(--peche); }
@media (max-width: 959px) {
  .pe [data-recherche], .pe-types { order: -1; }
  .pe-zone { height: 360px; }
  .pe-tete h3 { font-size: 19px; }
}