/* Outil · Poids de fichier (File size) : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : pd-
   Tout en haut, centré : Vidéo / Photo / Son. À gauche : le total et 5 lignes, toujours aux mêmes places ; à droite : les options du type. */
.pd .outil-fixe { align-items: stretch; }
.pd-types { justify-self: center; align-self: center; display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--filet); margin: 0 auto; }
.pd-types button { border: 0; background: none; border-radius: 999px; padding: 10px 20px; cursor: pointer; font: var(--valeur); line-height: 1; letter-spacing: .06em; color: var(--texte2);
  transition: background .4s var(--courbe), color .4s var(--courbe); }
.pd-types button[aria-pressed="true"] { background: var(--papier); color: var(--noir); }
.pd-types button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
@media (min-width: 960px) {
  .pd.outil-colonnes { grid-template-rows: auto minmax(0, 1fr); row-gap: 24px; }
  .pd-types { grid-column: 1 / -1; margin-top: 4px; }
}

.pd-resultat { 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); }
.pd-resultat .groupe { padding: 0; height: 1.5em; }
.pd-grand { border: 0; background: none; padding: 0; text-align: left; cursor: copy; white-space: nowrap; color: var(--papier); font: 700 clamp(38px, 11vw, 60px)/1.1 var(--display); letter-spacing: -.03em; }
.pd-note { margin: 0; height: 1.5em; font: var(--valeur); letter-spacing: .04em; color: var(--texte2); }
.pd-lignes { display: flex; flex-direction: column; }
.pd-ligne { height: 42px; flex: none; align-items: center; padding: 0; cursor: copy; }
.pd-ligne .nom { color: var(--texte2); font-weight: 400; white-space: nowrap; }
.pd-ligne:hover .nom { color: var(--texte2); }
.pd-ligne .val { color: var(--papier); }
.pd-ligne:hover .val { color: var(--peche); }

.pd-options { display: flex; flex-direction: column; gap: 22px; }
.pd-options[hidden] { display: none; }
.pd-ligne-champ { margin-bottom: 10px; }
.pd-champ { display: inline-flex; align-items: center; gap: 8px; }
.pd-champ .saisie { width: 96px; text-align: center; font: 600 16px/1.3 var(--display); }
.pd-champ span { font: var(--valeur); letter-spacing: .06em; color: var(--texte2); }
.pd-duree { display: flex; flex-wrap: wrap; gap: 14px; }
.pd-duree .saisie { width: 72px; }
.pd-eteint { opacity: .35; pointer-events: none; transition: opacity .4s var(--courbe); }
.pd-ligne-champ { display: flex; align-items: center; gap: 12px; }
.pd-mini { display: inline-flex; padding: 3px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--filet); }
.pd-mini button { border: 0; background: none; border-radius: 999px; padding: 8px 12px; cursor: pointer; font: var(--valeur); line-height: 1; letter-spacing: .06em; color: var(--texte2);
  transition: background .4s var(--courbe), color .4s var(--courbe); }
.pd-mini button[aria-pressed="true"] { background: var(--papier); color: var(--noir); }